/* Gas Station Radio — front-end dashboard */

.gsr-dash {
	background: rgba(15, 26, 42, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	padding: 32px;
	margin: 0 0 24px;
	color: #f3f6fa;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gsr-dash__header { margin-bottom: 24px; }
.gsr-dash__header h2 { margin: 0 0 6px; font-size: 1.6rem; }
.gsr-dash__sub { color: #94a8bf; font-size: 0.9rem; margin: 0; }

.gsr-dash__panel {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gsr-dash__panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.gsr-dash__panel-head h3 { margin: 0; font-size: 1.15rem; }

.gsr-dash__open {
	font-size: 0.85rem;
	color: #64b5f6;
	text-decoration: none;
}
.gsr-dash__open:hover { color: #2196f3; text-decoration: underline; }

/* Tables */
.gsr-dash__playlists,
.gsr-dash__media,
.gsr-dash__campaigns {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gsr-dash__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 480px;
}
.gsr-dash__table th,
.gsr-dash__table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gsr-dash__table th {
	color: #94a8bf;
	font-weight: 500;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.gsr-dash__table tr:last-child td { border-bottom: 0; }
.gsr-dash__table tr:hover td { background: rgba(25, 118, 210, 0.06); }

.gsr-dash__pill {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(25, 118, 210, 0.18);
	color: #64b5f6;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}
.gsr-dash__pill--green { background: rgba(76, 175, 80, 0.18); color: #81c784; }
.gsr-dash__pill--gray  { background: rgba(255, 255, 255, 0.08); color: #94a8bf; }

.gsr-dash__empty {
	color: #94a8bf;
	font-size: 0.95rem;
	padding: 24px;
	text-align: center;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 8px;
}

/* Form */
.gsr-dash__form {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	padding: 20px;
	margin-top: 14px;
}
.gsr-dash__form h4 { margin-top: 0; }

.gsr-dash__row { margin-bottom: 14px; }
.gsr-dash__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.gsr-dash__row label { display: block; font-size: 0.85rem; color: #94a8bf; margin-bottom: 4px; }
.gsr-dash__row input,
.gsr-dash__row select {
	width: 100%;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #f3f6fa;
	padding: 10px 12px;
	border-radius: 8px;
	font: inherit;
}
.gsr-dash__row input:focus { outline: none; border-color: #1976d2; }

.gsr-dash__actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.gs-btn--small { padding: 6px 14px; font-size: 0.85rem; box-shadow: 0 2px 8px rgba(25,118,210,0.3); }

.gsr-dash--login { text-align: center; padding: 40px 24px; }

@media (max-width: 720px) {
	.gsr-dash {
		padding: 18px 14px;
		margin: 0 -8px 24px;
		border-radius: 10px;
	}
	.gsr-dash__header h2 { font-size: 1.25rem; }
	.gsr-dash__panel { padding-top: 18px; margin-top: 22px; }
	.gsr-dash__panel-head h3 { font-size: 1rem; }
	.gsr-dash__open { font-size: 0.78rem; }
	.gsr-dash__row--two { grid-template-columns: 1fr; }
	.gsr-dash__table { font-size: 0.82rem; min-width: 420px; }
	.gsr-dash__table th, .gsr-dash__table td { padding: 8px 10px; }
	.gsr-dash__pill { font-size: 0.7rem; padding: 1px 6px; }

	/* Form inputs become full-width on mobile */
	.gsr-dash__form { padding: 14px; }
	.gsr-dash__row input,
	.gsr-dash__row select { padding: 9px 10px; font-size: 0.9rem; }

	/* Hint that there is more to scroll horizontally */
	.gsr-dash__playlists::after,
	.gsr-dash__media::after,
	.gsr-dash__campaigns::after {
		content: "";
		display: block;
		height: 2px;
	}
}

@media (max-width: 480px) {
	.gsr-dash { padding: 14px 10px; }
	.gsr-dash__table { min-width: 380px; }
}