/* ==========================================================
   MY RADIO — THEMES
   Classic Light is the default.
   ========================================================== */

:root {
    color-scheme: light;

    --page-background: linear-gradient(145deg, #eef4f8, #dce7ef);
    --panel-background: #ffffff;
    --panel-secondary: #f3f6f9;
    --text-primary: #1f2933;
    --text-secondary: #687781;
    --accent: #1683e8;
    --selected-background: #dfeaf1;
    --hover-background: #eef3f6;
    --border-color: #dce3e9;
    --panel-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    --soft-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --about-background: rgba(255, 255, 255, 0.55);
}

/* DARK MODERN */

body[data-theme="dark"] {
    color-scheme: dark;

    --page-background:
        radial-gradient(ellipse at 15% 15%, #132b4b 0%, transparent 45%),
        radial-gradient(ellipse at 90% 85%, #102b50 0%, transparent 42%),
        linear-gradient(145deg, #050b16, #0a1426);

    --panel-background: #111e30;
    --panel-secondary: #192940;
    --text-primary: #edf4ff;
    --text-secondary: #a8b8cd;
    --accent: #168cff;
    --selected-background: #173e69;
    --hover-background: #1b304a;
    --border-color: #293d57;
    --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    --soft-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    --about-background: rgba(17, 30, 48, 0.82);
}

/* WARM SUNSET */

body[data-theme="sunset"] {
    --page-background:
        radial-gradient(ellipse at 80% 15%, #ffe4bd 0%, transparent 40%),
        linear-gradient(150deg, #fff0df, #f8c8b7 58%, #e8a6a0);

    --panel-background: #fff8f1;
    --panel-secondary: #ffede1;
    --text-primary: #49352f;
    --text-secondary: #8b655a;
    --accent: #d7654e;
    --selected-background: #f5d5c6;
    --hover-background: #fbe5d9;
    --border-color: #ecd0c3;
    --panel-shadow: 0 6px 20px rgba(104, 58, 45, 0.12);
    --soft-shadow: 0 4px 12px rgba(104, 58, 45, 0.09);
    --about-background: rgba(255, 248, 241, 0.72);
}

/* NATURE */

body[data-theme="nature"] {
    --page-background:
        radial-gradient(ellipse at 15% 10%, #e4ead8 0%, transparent 45%),
        linear-gradient(145deg, #f1f2e7, #d8e2d0);

    --panel-background: #fbfcf6;
    --panel-secondary: #e9eee1;
    --text-primary: #283b30;
    --text-secondary: #6a7b6d;
    --accent: #4e8761;
    --selected-background: #d8e7d8;
    --hover-background: #e8efe4;
    --border-color: #d4dfd0;
    --panel-shadow: 0 6px 20px rgba(38, 66, 45, 0.12);
    --soft-shadow: 0 4px 12px rgba(38, 66, 45, 0.08);
    --about-background: rgba(251, 252, 246, 0.7);
}

/* OLED BLACK */

body[data-theme="oled"] {
    color-scheme: dark;

    --page-background: #000000;
    --panel-background: #090b0f;
    --panel-secondary: #12151b;
    --text-primary: #f4f6fa;
    --text-secondary: #9ba6b7;
    --accent: #55b5ff;
    --selected-background: #102b42;
    --hover-background: #171e28;
    --border-color: #252b35;
    --panel-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    --soft-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --about-background: #090b0f;
}

/* Apply the selected palette */

body[data-theme] {
    background: var(--page-background);
    color: var(--text-primary);
}

.station-name {
    color: var(--text-primary);
}

.status {
    color: var(--text-secondary);
}

.control-button {
    background: var(--panel-background);
    color: var(--accent);
    box-shadow: var(--soft-shadow);
    border: 1px solid var(--border-color);
}

.control-button:hover {
    filter: brightness(1.06);
}

.shuffle-button.shuffle-active {
    background: var(--selected-background) !important;
    color: var(--accent) !important;
    outline: 2px solid var(--accent) !important;
    outline-offset: 1px;
}

.station-list {
    background: var(--panel-background);
    box-shadow: var(--panel-shadow);
}

.station-item {
    color: var(--text-primary);
}

.station-item:hover {
    background: var(--hover-background);
}

.station-item.active {
    background: var(--selected-background);
    color: var(--text-primary);
}

.station-number {
    color: var(--text-secondary);
}

.search,
.filter-row select,
.genre-button,
.genre-menu {
    background: var(--panel-background);
    color: var(--text-primary);
    box-shadow: var(--soft-shadow);
}

.search::placeholder {
    color: var(--text-secondary);
    opacity: 0.85;
}

.filter-row select {
    border: 1px solid var(--border-color);
}

.genre-menu {
    border: 1px solid var(--border-color);
}

.genre-option {
    color: var(--text-primary);
}

.genre-option:hover {
    background: var(--hover-background);
}

.no-results {
    color: var(--text-secondary);
}

.about {
    background: var(--about-background);
    color: var(--text-primary);
}

.about p {
    color: var(--text-secondary);
}

.footer,
.footer strong {
    color: var(--text-secondary);
}

/* Station information */

.station-info {
    color: var(--text-secondary);
    background: var(--panel-secondary);
    border-color: var(--border-color);
}

.station-info a {
    color: var(--accent);
}

/* Settings button */

.settings-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--panel-background);
    color: var(--text-primary);
    box-shadow: var(--soft-shadow);
    font-size: 19px;
    cursor: pointer;
    z-index: 20;
}

.app {
    position: relative;
}

.settings-button:focus-visible,
.theme-choice:focus-visible,
.settings-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Settings dialog */

.theme-dialog {
    width: min(340px, calc(100vw - 32px));
    max-height: min(580px, 85vh);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--panel-background);
    color: var(--text-primary);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.theme-dialog::backdrop {
    background: rgba(3, 8, 18, 0.58);
    backdrop-filter: blur(4px);
}

.theme-dialog h2 {
    margin: 0 0 6px;
    font-size: 22px;
}

.theme-dialog p {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.theme-options {
    display: grid;
    gap: 10px;
}

.theme-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-secondary);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.theme-choice[aria-pressed="true"] {
    border: 2px solid var(--accent);
    padding: 11px;
    background: var(--selected-background);
}

.theme-swatch {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.25);
}

.theme-choice-label {
    flex: 1;
    font-weight: 600;
}

.theme-choice-check {
    color: var(--accent);
    font-weight: 700;
}

.settings-close {
    width: 100%;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-secondary);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

@media (max-width: 430px) {
    .settings-button {
        top: 8px;
        right: 8px;
    }

    .theme-dialog {
        padding: 18px;
        border-radius: 18px;
    }
}