/*
 * Dark Mode Styles
 * Overrides voor body.dark-mode
 */

/* =========================
   0. Dark Mode Variabelen
   ========================= */
:root {
    /* Dark Mode variabelen */
    --color-dark-background: #121212; /* Zeer donker, bijna zwart */
    --color-dark-surface: #1e1e1e;   /* Net iets lichter voor kaarten/blokken */
    --color-dark-border: #444444;    /* Donkere grijze randen */
    --color-text-light: #e9ecef;
    --color-dark-accent: rgba(254, 254, 60,1);     /* Lichte tekst */
}

/* =========================
   1. Algemene Overrides
   ========================= */
body.dark-mode {
    background-color: var(--color-dark-background);
    color: var(--color-text-light);
    --color-accent: var(--color-dark-accent);
    --color-text-dark: var(--color-text-light);
    --color-light-background: var(--color-light-background);
}
body.dark-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("style/img/samsam-bg.png"), url("style/img/samsam-bg.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 400px auto, 400px auto;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  background-blend-mode: multiply;
}
body.dark-mode .logo {
    color: var(--color-primary); /* Houd de primaire kleur zichtbaar */
}
body.dark-mode .modal-content{
background-color: var(--color-dark-background);
color: var(--color-text-light);
}
body.dark-mode .card-body{
background-color: var(--color-dark-surface);
color: var(--color-text-light);
}
body.dark-mode .btn-close{
filter: invert(100%) grayscale(100%) brightness(200%);
}
/* =========================
   2. Header & Navigatie
   ========================= */
body.dark-mode #main-header {
    background-color: var(--color-dark-surface);
    border-bottom-color: var(--color-dark-border);
}

body.dark-mode #main-nav ul li a {
    color: var(--color-text-light);
}

body.dark-mode #main-nav ul li a:hover,
body.dark-mode #main-nav ul li a.active {
   color: var(--color-accent-light);
}

body.dark-mode .theme-toggle {
    background: var(--color-dark-border);
    color: var(--color-text-light);
}

/* =========================
   3. Main Content Overrides
   ========================= */
body.dark-mode .content-section {
    border-bottom-color: var(--color-dark-border);
}

body.dark-mode .section-title {
    color: var(--color-primary);
}

/* Hero & DJ Card */
body.dark-mode .dj-live-card {
    background-color: var(--color-dark-surface);
    border-color: var(--color-dark-border);
}

body.dark-mode .dj-live-card h3 {
    color: var(--color-primary);
}

/* Programmering */
body.dark-mode .tab-pills {
    border-bottom-color: var(--color-dark-border);
}

body.dark-mode .pill-btn {
    color: var(--color-text-light);
}

body.dark-mode .pill-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

body.dark-mode .program-card {
    background-color: var(--color-dark-surface);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

body.dark-mode .program-card.live-highlight {
    border-color: var(--color-accent-light);
}

body.dark-mode .program-tijd {
    color: #999;
}

/* Spiegelplaat */
body.dark-mode .spiegel-track-title {
    color: var(--color-primary);
}
body.dark-mode .spiegel-track-name {
    color: var(--color-text-light);
}
body.dark-mode .spiegel-gekozen {
    color: var(--color-text-light);
}

/* Studio's */
body.dark-mode .studio-card {
    background-color: var(--color-dark-surface);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

/* =========================
   4. Footer Overrides
   ========================= */
body.dark-mode #main-footer {
    background-color: var(--color-dark-surface);
    border-top-color: var(--color-dark-border);
    color: var(--color-text-light);
}

body.dark-mode .footer-block h3 {
    color: var(--color-accent-light);
}

body.dark-mode .footer-nav-links a {
    color: var(--color-text-light);
}

body.dark-mode .footer-email-link {
    color: var(--color-primary);
}

body.dark-mode .social-icons a {
    color: var(--color-text-light);
}


body.dark-mode .footer-block {
    border-bottom-color: var(--color-dark-border);
}

/* =========================
   5. Popup Overrides
   ========================= */

body.dark-mode .popup-content-wrapper {
    background-color: var(--color-dark-surface);
}

body.dark-mode .popup-header {
    background-color: var(--color-dark-background);
    border-bottom-color: var(--color-dark-border);
}

body.dark-mode .popup-title {
    color: var(--color-accent-light);
}

body.dark-mode .btn-close-popup {
    color: var(--color-text-light);
}

body.dark-mode .sidebar ul li a:hover{
background-color: rgba(255,255,255,0.1);
}

body.dark-mode .sidebar{
background-color: var(--color-dark-background, #fff);
}