/* --- BASIS: CLASSIC DARK MODE (Standaard) --- */
body { 
    padding-top: 100px; 
    padding-bottom: 80px; 
    background-color: #2a2a2a; /* Iets lichtere zwart-grijs */
    color: #ccc; /* Lichter grijs voor tekst */
    font-family: sans-serif; 
    overflow-x: hidden; 
    transition: background 0.3s ease; 
}

.top-player-bar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1030; 
    background: #1a1a1a; /* Donkerder grijs dan zwart */
    border-bottom: 1px solid #444; /* Lichtere grenskleur */
    height: 80px; 
    display: flex; 
    align-items: center; 
    transition: background 0.3s ease; 
}

.logo-text { 
    color: #ddd; /* Lichter grijs voor logo */
    font-weight: 900; 
    letter-spacing: 2px; 
    font-size: 1.2rem; 
    text-decoration: none; 
    margin-right: 20px; 
    padding-right: 20px; 
    border-right: 1px solid #444; /* Lichtere grenskleur */
    flex-shrink: 0; 
}

.info-container { 
    flex-grow: 1; 
    overflow: hidden; 
    white-space: nowrap; 
    margin-right: 10px; 
}

#player-title { 
    color: #ddd; /* Lichter grijs */
    font-weight: bold; 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    display: inline-block; 
}

#player-info { 
    color: #777; /* Iets lichter grijs */
    font-size: 0.7rem; 
    text-transform: uppercase; 
    display: block; 
    margin-top: 2px; 
    letter-spacing: 0.5px; 
}

/* --- ANIMATIES --- */
.scroll-active { 
    animation: marquee 10s linear infinite; 
    padding-right: 80px; 
}

@keyframes marquee { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* --- UI ELEMENTEN --- */
.unified-panel { 
    display: flex; 
    align-items: center; 
    background: #333; /* Donkergrijs achtergrond */
    border: 1px solid #444; /* Lichtere rand */
    border-radius: 4px; 
    padding: 2px 6px; 
    gap: 4px; 
}

.player-controls-group { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
}

.player-only { 
    display: none !important; 
}

.unified-panel.active-player .player-only { 
    display: flex !important; 
}

.btn-minimal { 
    background: transparent; 
    border: none; 
    color: #bbb; /* Lichter grijs */
    font-size: 0.7rem; 
    text-transform: uppercase; 
    height: 32px; 
    padding: 0 12px; 
}

.btn-minimal:hover { 
    color: #ddd; /* Lichter grijs bij hover */
}

/* --- VOLUME SLIDER --- */
.volume-wrap { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 0 10px; 
    border-left: 1px solid #444; 
    height: 20px; 
}

.vol-text { 
    font-size: 0.65rem; 
    color: #ddd; /* Lichter grijs */
    min-width: 25px; 
    text-align: right; 
}

.form-range { 
    width: 100px; 
    height: 32px; 
    background: transparent; 
    cursor: pointer; 
}

.form-range::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 2px; 
    background: #444; /* Donkerder grijs */
}

.form-range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    margin-top: -7px; 
    width: 14px; 
    height: 14px; 
    background: #ddd; /* Lichter grijs */
    border-radius: 50%; 
}

/* --- STATION CARDS --- */
.station-card { 
    background: transparent; 
    border: 1px solid #444; /* Grijs randje */
    border-radius: 4px; 
    cursor: pointer; 
    color: #bbb; /* Lichter grijs */
    transition: 0.2s; 
}

.station-card.active { 
    border-color: #777; /* Lichter grijs */
    background: #2a2a2a; /* Donkergrijs achtergrond */
    color: #ddd; /* Lichter grijs */
}

.card-info-line { 
    font-size: 0.7rem; 
    color: #666; /* Iets donkerder grijs */
}

.card-controls { 
    padding: 1px 4px; 
    font-size: 0.7rem; 
    height: 24px; 
}

.listener-count { 
    color: #ddd; /* Lichter grijs */
    font-weight: bold; 
    padding: 0 4px; 
}

.source-divider { 
    width: 1px; 
    height: 12px; 
    background: #444; /* Donkerder grijs */
    margin: 0 2px; 
}

.source-mini-btn { 
    color: #666; /* Iets lichter grijs */
    padding: 0 4px; 
    cursor: pointer; 
}

.grid-5 { 
    width: 20% !important; 
    flex: 0 0 20% !important; 
}

/* --- FOOTER & LINKS --- */
.footer-text { 
    position: fixed; 
    bottom: 15px; 
    right: 20px; 
    font-size: 0.65rem; 
    color: #444; /* Iets lichter grijs */
    text-transform: uppercase; 
    letter-spacing: 1px; 
    z-index: 1000; 
    pointer-events: none; 
}

.footer-link {
    color: #777; /* Iets lichter grijs */
    text-decoration: none;
    pointer-events: auto; 
    transition: color 0.2s;
}

.footer-link:hover {
    color: #ddd; /* Lichter grijs */
    text-decoration: underline;
}

/* --- MOBIELE OPTIMALISATIE --- */
@media (max-width: 767px) {
    .logo-text { 
        border: none; 
        margin-right: 10px; 
        padding-right: 0; 
        font-size: 1.1rem; 
    }
    #player-title.initial { 
        display: none !important; 
    }
    .info-container { max-width: 150px; }
    #player-info { 
        color: #bbb; /* Iets lichter grijs */
        font-weight: bold; 
    }
    .footer-text { 
        display: none; 
    }
    body { 
        padding-bottom: 20px; 
    }
}

/* --- DAG MODUS (Light Mode) OVERRIDES --- */
body.light-mode { 
    background-color: #f0f0f0; /* Lichter grijs voor dagmodus */
    color: #444; /* Iets donkerder grijs */
}

body.light-mode .top-player-bar { 
    background: #f9f9f9; /* Lichter grijs voor de topbar */
    border-bottom-color: #ddd; 
}

body.light-mode .logo-text { 
    color: #333; /* Donkerder grijs voor logo */
    border-right-color: #ddd; 
}

body.light-mode #player-title { 
    color: #333; /* Donkerder grijs */
}

body.light-mode #player-info { 
    color: #888; /* Iets lichter grijs */
}

body.light-mode .unified-panel { 
    background: #dcdcdc; /* Lichter grijs achtergrond */
    border-color: #ccc; 
}

body.light-mode .station-card { 
    background: #fff; 
    border-color: #ddd; 
    color: #666; /* Iets donkerder grijs */
}

body.light-mode .station-card.active { 
    background: #f5f5f5; /* Zeer lichte grijs */
    border-color: #bbb; 
    color: #333; /* Donkerder grijs */
}

body.light-mode .station-name { 
    color: #333 !important; 
}

body.light-mode .card-info-line { 
    color: #777; /* Iets lichter grijs */
}

body.light-mode .listener-count { 
    color: #333; /* Donkerder grijs */
}

body.light-mode .btn-minimal { 
    color: #666; /* Lichter grijs */
}

body.light-mode .btn-minimal:hover { 
    color: #333; /* Donkerder grijs */
}

body.light-mode .source-divider { 
    background: #ddd; /* Lichter grijs */
}

body.light-mode .vol-text { 
    color: #333; /* Donkerder grijs */
}

body.light-mode .form-range::-webkit-slider-thumb { 
    background: #333; /* Donkerder grijs */
}

body.light-mode .footer-text {
    color: #777; /* Lichter grijs */
}

body.light-mode .footer-link {
    color: #888; /* Iets lichter grijs */
}

body.light-mode .footer-link:hover {
    color: #333; /* Donkerder grijs */
}