/* ════════════════════════════════════════════════════════════════════
   SCHOONGENOEG — THEMA RESET v3.0
   
   PRINCIPE: Thema = structuur, NIET uiterlijk.
   
   LICHT:  achtergrond wit (#ffffff), tekst zwart (#111), accent rood (#e30613)
   DONKER: achtergrond zwart (#0f0f0f), tekst wit (#f5f5f5), accent rood (#e30613)
   
   SEMANTISCHE KLEUREN BEHOUDEN (functioneel, niet decoratief):
   - Groen  = beschikbaar / online / gereed / succes
   - Blauw  = planning / informatie / navigatie
   - Oranje = waarschuwing / let op
   - Rood   = gevaar / alert / SG-accent
   - Grijs  = neutraal / inactief
   
   WAT DIT BESTAND DOET:
   - CSS variabelen corrigeren naar wit/zwart/rood
   - Timer widget: puur zwart achtergrond, rode rand — geen gradient-spuitbus
   - Planning Board bar: rood/zwart — correct
   - Kaarten wit (licht) of donkergrijs (donker) — geen paars/lila/mintgroen
   - Inputs: wit met zwarte tekst (licht) / donker met witte tekst (donker)
   - Semantische kleuren (groen, blauw, oranje) NIET aanraken
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1. LICHT THEMA — CSS VARIABELEN
══════════════════════════════════════════════════════════════════ */
:root,
html.sg-theme-light {
  --sg-bg:           #ffffff;
  --sg-card:         #ffffff;
  --sg-card-alt:     #f9f9f9;
  --sg-text:         #111111;
  --sg-text-2:       #333333;
  --sg-text-muted:   #666666;
  --sg-border:       #e2e2e2;
  --sg-input-bg:     #ffffff;
  --sg-input-text:   #111111;
  --sg-input-border: #cccccc;
  --sg-topbar-bg:    #0f172a;
  --sg-nav-bg:       #ffffff;
  --sg-modal-bg:     #ffffff;
  --sg-modal-hdr:    #f5f5f5;
  --wl-primary:      #e30613;
  --wl-primary-light:rgba(227,6,19,.1);
  --wl-primary-dark: #b50010;
  --wl-secondary:    #111111;
  --accent:          #e30613;
  --accent-hover:    #b50010;
}

/* ══════════════════════════════════════════════════════════════════
   2. DONKER THEMA — CSS VARIABELEN
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark {
  --sg-bg:           #0f0f0f;
  --sg-card:         #1a1a1a;
  --sg-card-alt:     #222222;
  --sg-text:         #f5f5f5;
  --sg-text-2:       #cccccc;
  --sg-text-muted:   #888888;
  --sg-border:       rgba(255,255,255,.1);
  --sg-input-bg:     #222222;
  --sg-input-text:   #f5f5f5;
  --sg-input-border: rgba(255,255,255,.15);
  --sg-topbar-bg:    #0f0f0f;
  --sg-sidebar-bg:   #0f0f0f;
  --sg-nav-bg:       #0f0f0f;
  --sg-modal-bg:     #1a1a1a;
  --sg-modal-hdr:    #222222;
  --wl-primary:      #e30613;
  --wl-primary-light:rgba(227,6,19,.15);
  --wl-primary-dark: #ff2233;
  --wl-secondary:    #f5f5f5;
  --accent:          #e30613;
}

/* ══════════════════════════════════════════════════════════════════
   3. LICHT THEMA — PAGINA BASIS
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light body,
html.sg-theme-light #app          { background: #ffffff !important; color: #111111 !important; }
/* Topbar ALTIJD donker — zowel licht als donker thema */
html #topbar,
html.sg-theme-light #topbar,
html.sg-theme-dark  #topbar,
html.sg-theme-light .topbar,
html.sg-theme-dark  .topbar,
.topbar                            { background: #0f172a !important; background-color: #0f172a !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 2px 12px rgba(0,0,0,.4) !important; }
html.sg-theme-light .menu-btn     { color: #ffffff !important; }
html.sg-theme-light .topbar .icon-btn { color: rgba(255,255,255,.85) !important; }
html.sg-theme-light .topbar-logo span { color: #ffffff !important; }
/* QR-knop span: ALTIJD semi-transparant wit op donkere topbar */
#topbarQRIconWrap,
html #topbarQRIconWrap,
html.sg-theme-light #topbarQRIconWrap,
html.sg-theme-dark  #topbarQRIconWrap {
  background:       rgba(255,255,255,.14) !important;
  background-color: rgba(255,255,255,.14) !important;
  color:            #ffffff !important;
  border:           1.5px solid rgba(255,255,255,.28) !important;
}
/* Maan/Zon-knop — licht thema = gele maan, donker thema = witte zon */

/* BASIS — licht thema (of geen thema-class): gele maan */
html #topbarThemeBtn,
html.sg-theme-light #topbarThemeBtn {
  display: inline-flex !important;
  color: #fbbf24 !important;
  background: rgba(251,191,36,.18) !important;
  border: 2px solid rgba(251,191,36,.55) !important;
}
html #topbarThemeBtn:hover,
html.sg-theme-light #topbarThemeBtn:hover {
  background: rgba(251,191,36,.32) !important;
  border-color: #fbbf24 !important;
}
html #topbarThemeIcon,
html.sg-theme-light #topbarThemeIcon { color: #fbbf24 !important; }

/* DONKER THEMA — witte zon */
html.sg-theme-dark #topbarThemeBtn {
  display: inline-flex !important;
  color: #ffffff !important;
  background: rgba(255,255,255,.12) !important;
  border: 2px solid rgba(255,255,255,.35) !important;
}
html.sg-theme-dark #topbarThemeBtn:hover {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.6) !important;
}
html.sg-theme-dark #topbarThemeIcon { color: #ffffff !important; }
/* Online pill tekst altijd wit op donkere topbar */
#topbarStatusLabel { color: #ffffff !important; }
#topbarStatusWrap  { background: rgba(255,255,255,.1) !important; }
html.sg-theme-light .bottom-nav   { background: #ffffff !important; border-top:    1px solid #e2e2e2 !important; }

/* ══════════════════════════════════════════════════════════════════
   4. LICHT THEMA — KAARTEN WIT MET ZWARTE TEKST
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light .card,
html.sg-theme-light .kaart,
html.sg-theme-light .widget,
html.sg-theme-light .stat-card,
html.sg-theme-light .section-card {
  background:   #ffffff !important;
  color:        #111111 !important;
  border-color: #e2e2e2 !important;
}
html.sg-theme-light .card-title,
html.sg-theme-light .section-title { color: #111111 !important; }
html.sg-theme-light .card-sub,
html.sg-theme-light .stat-label    { color: #666666 !important; }
html.sg-theme-light .stat-value    { color: #111111 !important; }

/* ══════════════════════════════════════════════════════════════════
   5. LICHT THEMA — INPUTS WIT MET ZWARTE TEKST
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.sg-theme-light select,
html.sg-theme-light textarea {
  background:   #ffffff !important;
  color:        #111111 !important;
  border-color: #cccccc !important;
}
html.sg-theme-light input::placeholder,
html.sg-theme-light textarea::placeholder { color: #999999 !important; }
html.sg-theme-light input:focus,
html.sg-theme-light select:focus,
html.sg-theme-light textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.1) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. LICHT THEMA — BESCHIKBAARHEID + TEAM KAARTEN
      Was paars/groen gradient — nu wit met rode/blauwe icoon-tint
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light [data-actie="agenda-open"],
html.sg-theme-light [onclick*="SGAgenda.openModal"]:not(#dashPlanningBar) {
  background:   #ffffff !important;
  border-color: #e2e2e2 !important;
}
html.sg-theme-light [data-actie="agenda-open-team"],
html.sg-theme-light [onclick*="switchTab('team')"] {
  background:   #ffffff !important;
  border-color: #e2e2e2 !important;
}
/* Paarse gradient achtergronden → wit */
html.sg-theme-light [style*="background:linear-gradient(135deg,#ede9fe"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#ddd6fe"],
html.sg-theme-light [style*="background:#ede9fe"],
html.sg-theme-light [style*="background:#ddd6fe"] {
  background: #ffffff !important;
  border-color: #e2e2e2 !important;
}
/* Groene gradient achtergronden → wit */
html.sg-theme-light [style*="background:linear-gradient(135deg,#dcfce7"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#bbf7d0"],
html.sg-theme-light [style*="background:#dcfce7"],
html.sg-theme-light [style*="background:#bbf7d0"] {
  background: #ffffff !important;
  border-color: #e2e2e2 !important;
}
/* Blauwe gradient achtergronden (carpool, info widgets) → wit */
html.sg-theme-light [style*="background:linear-gradient(135deg,#f0f9ff"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#e0f2fe"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#bae6fd"],
html.sg-theme-light [style*="background:#f0f9ff"],
html.sg-theme-light [style*="background:#e0f2fe"],
html.sg-theme-light [style*="background:#bae6fd"] {
  background: #ffffff !important;
  border-color: #e2e2e2 !important;
}
/* Blauwe icoon-divs → rode tint in lichtmodus */
html.sg-theme-light [style*="background:#0891b2"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#0891b2"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#0c4a6e"] {
  background: rgba(227,6,19,.12) !important;
}
/* Blauwe tekst in lichtmodus → donkergrijs */
html.sg-theme-light [style*="color:#0c4a6e"],
html.sg-theme-light [style*="color:#0369a1"],
html.sg-theme-light [style*="color:#0891b2"] { color: #333333 !important; }
/* Paarse/groene tekst in die kaarten → zwart */
html.sg-theme-light [style*="color:#4c1d95"],
html.sg-theme-light [style*="color:#6d28d9"],
html.sg-theme-light [style*="color:#166534"],
html.sg-theme-light [style*="color:#15803d"] { color: #111111 !important; }
/* Paarse icoon-divs → rode tint */
html.sg-theme-light [style*="background:linear-gradient(135deg,#7c3aed"],
html.sg-theme-light [style*="background:linear-gradient(135deg,#a78bfa"] {
  background: rgba(227,6,19,.12) !important;
}
/* Groene icoon-divs → behoudt groen (semantisch: beschikbaar) */
/* intentioneel leeggelaten */

/* ══════════════════════════════════════════════════════════════════
   6b. LICHT THEMA — CARPOOL / BLAUW WIDGET BUTTON
       De 'Nieuwe Team-Pickup' knop heeft hardcoded blauw gradient.
       In lichtmodus → rode primaire kleur van de app.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light [style*="background:linear-gradient(135deg,#0891b2,#0c4a6e"] {
  background: linear-gradient(135deg,#e30613,#b50010) !important;
  color: white !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. LICHT THEMA — TIMER WIDGET: witte kaart (zelfde als rest dashboard)
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light #dashTimerWidget {
  background: #ffffff !important;
  border: 1.5px solid #e0e0e0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  color: #111111 !important;
}

/* ══════════════════════════════════════════════════════════════════
   8. DONKER THEMA — TIMER WIDGET: donkere kaart
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #dashTimerWidget {
  background: #1a1a1a !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   9. DONKER THEMA — PAGINA BASIS: PUUR ZWART
══════════════════════════════════════════════════════════════════ */
/* ── Fix121: LICHTE MODUS reset — staat vóór donkere regels, wint altijd ── */
html.sg-theme-light body,
html.sg-theme-light #app        { background: #f1f5f9 !important; color: #0f172a !important; }
html.sg-theme-light .main-content,
html.sg-theme-light #mainContent { background: #f1f5f9 !important; color: #0f172a !important; }
html.sg-theme-light .section    { background: #ffffff !important; color: #0f172a !important; }
html.sg-theme-light .topbar     { background: #0f172a !important; border-bottom: 1px solid #1e293b !important; }
html.sg-theme-light .bottom-nav { background: #ffffff !important; border-top:    1px solid #e2e8f0 !important; }
html.sg-theme-light .sidebar    { background: #0f172a !important; border-right:  1px solid #1e293b !important; }

/* ── DONKER THEMA — PAGINA BASIS: PUUR ZWART ── */
html.sg-theme-dark body,
html.sg-theme-dark #app        { background: #0f0f0f !important; color: #f5f5f5 !important; }
html.sg-theme-dark .topbar     { background: #0f0f0f !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
html.sg-theme-dark .bottom-nav { background: #0f0f0f !important; border-top:    1px solid rgba(255,255,255,.08) !important; }
html.sg-theme-dark .sidebar    { background: #0f0f0f !important; border-right:  1px solid rgba(255,255,255,.06) !important; }

/* ══════════════════════════════════════════════════════════════════
   10. DONKER THEMA — KAARTEN DONKERGRIJS MET WITTE TEKST
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .card,
html.sg-theme-dark .kaart,
html.sg-theme-dark .widget,
html.sg-theme-dark .stat-card,
html.sg-theme-dark .section-card {
  background:   #1a1a1a !important;
  color:        #f5f5f5 !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.sg-theme-dark .card-title,
html.sg-theme-dark .section-title { color: #f5f5f5 !important; }
html.sg-theme-dark .stat-label    { color: #888888 !important; }
html.sg-theme-dark .stat-value    { color: #f5f5f5 !important; }

/* ══════════════════════════════════════════════════════════════════
   11. DONKER THEMA — INPUTS DONKER MET WITTE TEKST
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.sg-theme-dark select,
html.sg-theme-dark textarea {
  background:   #222222 !important;
  color:        #f5f5f5 !important;
  border-color: rgba(255,255,255,.15) !important;
}
html.sg-theme-dark input::placeholder,
html.sg-theme-dark textarea::placeholder { color: #666666 !important; }
html.sg-theme-dark input:focus,
html.sg-theme-dark select:focus,
html.sg-theme-dark textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.15) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   12. DONKER THEMA — WITTE INLINE ACHTERGRONDEN → DONKERGRIJS
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark [style*="background:#ffffff"],
html.sg-theme-dark [style*="background: #ffffff"],
html.sg-theme-dark [style*="background:#fff;"],
html.sg-theme-dark [style*="background:#fff\""],
html.sg-theme-dark [style*="background-color:#ffffff"],
html.sg-theme-dark [style*="background-color:white"],
html.sg-theme-dark [style*="background:#f8fafc"],
html.sg-theme-dark [style*="background:#f5f5f5"],
html.sg-theme-dark [style*="background:#f1f5f9"],
html.sg-theme-dark [style*="background: #f1f5f9"],
html.sg-theme-dark [style*="background:#f0f4f8"],
html.sg-theme-dark [style*="background:#f9fafb"],
html.sg-theme-dark [style*="background:#e8ecf0"],
html.sg-theme-dark [style*="background:#e2e8f0"] {
  background: #1a1a1a !important;
  color:      #f5f5f5 !important;
}
/* Donkere tekst op donkere achtergrond → wit */
html.sg-theme-dark [style*="color:#0f172a"],
html.sg-theme-dark [style*="color:#1e293b"],
html.sg-theme-dark [style*="color:#111111"],
html.sg-theme-dark [style*="color:#111827"],
html.sg-theme-dark [style*="color:#374151"],
html.sg-theme-dark [style*="color:#333333"],
html.sg-theme-dark [style*="color:#333;"],
html.sg-theme-dark [style*="color:#333\""] { color: #f5f5f5 !important; }

/* ══════════════════════════════════════════════════════════════════
   13. DONKER THEMA — BESCHIKBAARHEID + TEAM KAARTEN
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark [data-actie="agenda-open"],
html.sg-theme-dark [onclick*="SGAgenda.openModal"]:not(#dashPlanningBar),
html.sg-theme-dark [data-actie="agenda-open-team"],
html.sg-theme-dark [onclick*="switchTab('team')"] {
  background:   #1a1a1a !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.sg-theme-dark [style*="background:linear-gradient(135deg,#ede9fe"],
html.sg-theme-dark [style*="background:linear-gradient(135deg,#ddd6fe"],
html.sg-theme-dark [style*="background:linear-gradient(135deg,#dcfce7"],
html.sg-theme-dark [style*="background:linear-gradient(135deg,#bbf7d0"] {
  background:   #1a1a1a !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.sg-theme-dark [style*="color:#4c1d95"],
html.sg-theme-dark [style*="color:#6d28d9"],
html.sg-theme-dark [style*="color:#166534"],
html.sg-theme-dark [style*="color:#15803d"] { color: #f5f5f5 !important; }

/* ══════════════════════════════════════════════════════════════════
   14. MODALS DONKER THEMA
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .modal,
html.sg-theme-dark .modal-content { background: #1a1a1a !important; border-color: rgba(255,255,255,.1) !important; color: #f5f5f5 !important; }
html.sg-theme-dark .modal-header  { background: #222222 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; color: #f5f5f5 !important; }

/* ══════════════════════════════════════════════════════════════════
   15. ACTIEVE PLANNING BOARD KNOPPEN — ROOD ACCENT (beide thema's)
══════════════════════════════════════════════════════════════════ */
.tp-act-primary,
.tp-week-strip .plan-day-btn.active,
.plan-day-btn.active,
.week-strip-day.active {
  background:   #e30613 !important;
  border-color: #b50010 !important;
  color:        #ffffff !important;
}
.tp-week-strip .plan-day-btn.today:not(.active),
.plan-day-btn.today:not(.active) {
  border-color: #e30613 !important;
  color:        #e30613 !important;
}
.tp-filter-chip.active {
  background:   #e30613 !important;
  border-color: #e30613 !important;
  color:        #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   16b. DONKER THEMA — VERBINDINGEN KAARTEN (GPS / Bluetooth / Meldingen)
       background:#f1f5f9 icoon-wrap + toggle track donker maken
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #dashboardGPSBar,
html.sg-theme-dark #dashboardBTBar,
html.sg-theme-dark #dashboardPushBar {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Icoon-wrap: f1f5f9 → donkergrijs */
html.sg-theme-dark #dashGPSIcon,
html.sg-theme-dark #dashBTIcon,
html.sg-theme-dark #dashPushIcon {
  background: #2a2a2a !important;
}
/* Toggle-track: e2e8f0 → donkergrijs */
html.sg-theme-dark #dashGPSBtn,
html.sg-theme-dark #dashBTBtn,
html.sg-theme-dark #dashPushToggleBtn {
  background: #333333 !important;
}
/* Tekst wit */
html.sg-theme-dark #dashboardGPSBar [style*="color:var(--text)"],
html.sg-theme-dark #dashboardBTBar  [style*="color:var(--text)"],
html.sg-theme-dark #dashboardPushBar [style*="color:var(--text)"] { color: #f5f5f5 !important; }

/* ══════════════════════════════════════════════════════════════════
   16c. QR-KNOP ICOON — ALTIJD SEMI-TRANSPARANT (nooit volledig wit)
   Fix134: topbar is altijd donker → QR wrap = rgba wit + wit icoon
   Geldt voor BEIDE thema's (licht en donker) want topbar = altijd donker.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .topbar-icon-qr,
html.sg-theme-dark #topbarQRBtn .topbar-icon-qr,
html.sg-theme-dark #topbarQRIconWrap {
  background: rgba(255,255,255,.14) !important;
  background-color: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.28) !important;
}
html.sg-theme-light .topbar-icon-qr,
html.sg-theme-light #topbarQRBtn .topbar-icon-qr,
html.sg-theme-light #topbarQRIconWrap {
  background: rgba(255,255,255,.15) !important;
  background-color: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* ══════════════════════════════════════════════════════════════════
   16. BLAUWE KNOPPEN DIE BLAUW MOETEN BLIJVEN ZIJN — PLANNING
      Planningboard navigatie: blauw = planning (semantisch correct)
      We raken dit NIET aan.
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   17. BLAUW DAT WEG MOET — NIET-SEMANTISCH BLAUW IN UI CHROME
      Knoppen in topbar, badges in cards die blauw zijn zonder
      semantische reden worden rood.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light .bottom-nav-planning i    { color: #e30613 !important; }
html.sg-theme-light .bottom-nav-planning span { color: #e30613 !important; }

/* ══════════════════════════════════════════════════════════════════
   18. SCROLLBARS — SUBTIEL
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light ::-webkit-scrollbar       { width: 5px; height: 5px; }
html.sg-theme-light ::-webkit-scrollbar-track { background: #f0f0f0; }
html.sg-theme-light ::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 3px; }
html.sg-theme-light ::-webkit-scrollbar-thumb:hover { background: #e30613; }

html.sg-theme-dark  ::-webkit-scrollbar       { width: 5px; height: 5px; }
html.sg-theme-dark  ::-webkit-scrollbar-track { background: #111111; }
html.sg-theme-dark  ::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; }
html.sg-theme-dark  ::-webkit-scrollbar-thumb:hover { background: #e30613; }

/* ══════════════════════════════════════════════════════════════════
   19. BOTTOM BANK — HOOGTE + SCROLL
══════════════════════════════════════════════════════════════════ */
#tbIB_bank     { min-height: 290px !important; max-height: 310px !important; }
#tbIB_bankBody { height: 240px !important; overflow-y: auto !important; overflow-x: hidden !important; }
#tbIB_bankBody::-webkit-scrollbar       { width: 3px; }
#tbIB_bankBody::-webkit-scrollbar-thumb { background: #e30613; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════════
   20. BESCHIKBAARHEIDSKAARTEN — SCROLLBAAR VOOR >6 ITEMS
══════════════════════════════════════════════════════════════════ */
#zpTeamBeschikbaarGrid,
#zpSamenvatting,
.plan-personeel-grid {
  max-height: 520px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#zpTeamBeschikbaarGrid::-webkit-scrollbar       { width: 4px; }
#zpTeamBeschikbaarGrid::-webkit-scrollbar-thumb,
#zpSamenvatting::-webkit-scrollbar-thumb,
.plan-personeel-grid::-webkit-scrollbar-thumb   { background: #e30613; border-radius: 3px; }

/* Toon altijd alle beschikbaarheidskaarten (nooit afkappen na 6) */
#zpTeamBeschikbaarGrid .zp-persoon-card,
.plan-personeel-grid  .plan-avail-card,
.plan-personeel-grid  .zp-card           { display: flex !important; }

/* ══════════════════════════════════════════════════════════════════
   Fix132 — SIDEBAR BOVENSTE PROFIEL-SECTIE — DONKERE MODUS
   Probleem: .sidebar-header / .sidebar-user / .sidebar-top-bar
   hebben witte achtergrond in donkere modus (rgba(255,255,255,.03)
   wordt wit als de cascade-basis wit is).
   Oplossing: Expliciete donkere kleur op alle sidebar-sub-elementen.
   Dit bestand laadt als LAATSTE → wint altijd van eerdere regels.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .sidebar-top-bar {
  background: #0a1020 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
html.sg-theme-dark .sidebar-header {
  background: #0d1525 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
html.sg-theme-dark .sidebar-user {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.sg-theme-dark .sidebar-user:hover {
  background: rgba(255,255,255,.09) !important;
}
html.sg-theme-dark .sidebar-brand-name {
  color: #ffffff !important;
}
html.sg-theme-dark .sidebar-brand-sub {
  color: rgba(255,255,255,.35) !important;
}
html.sg-theme-dark #sidebarUsername,
html.sg-theme-dark .sidebar-user strong {
  color: #f1f5f9 !important;
}
html.sg-theme-dark .sidebar-user .user-info,
html.sg-theme-dark .sidebar-user .role-badge {
  color: #94a3b8 !important;
}
/* Sidebar footer donker */
html.sg-theme-dark .sidebar-footer {
  background: #0a1020 !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
html.sg-theme-dark .sidebar-footer-label {
  color: #94a3b8 !important;
}
/* Navigatie-items donker */
html.sg-theme-dark .sidebar-nav {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix133 — DASHBOARD WELKOMST-TEKST — DONKERE MODUS
   Probleem: #dashboardGreeting heeft inline style color:#0f172a
   + style.css rule #dashboardGreeting { color:#0f172a !important }
   Dit is zwart op donkere achtergrond = onleesbaar.
   Oplossing: Sterkste selector in laatste CSS-bestand.
   Extra: date badge en sub-greeting ook donker-vriendelijk maken.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #dashboardGreeting {
  color: #f1f5f9 !important;
}
html.sg-theme-dark #dashboardSubGreeting {
  color: #94a3b8 !important;
}
/* Datum badge rechtsboven in dashboard greeting-rij */
html.sg-theme-dark #dashTopDateBadge {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}
html.sg-theme-dark #dashTopDay,
html.sg-theme-dark #dashTopMonth {
  color: #94a3b8 !important;
}
html.sg-theme-dark #dashTopDate {
  color: #f1f5f9 !important;
}
/* Avatar cirkel bij greeting — lichte rand */
html.sg-theme-dark #dashGreetingAvatar {
  border-color: rgba(14,165,233,.35) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.4) !important;
}
/* Status-knoppen in dashboard greeting-rij */
html.sg-theme-dark #dst_bezet,
html.sg-theme-dark #dst_offline {
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
html.sg-theme-dark #dst_online {
  border-color: #22c55e !important;
  background: rgba(34,197,94,.1) !important;
  color: #86efac !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix134 — QR-KNOP TOPBAR — DONKERE MODUS
   Probleem: .topbar-icon-qr wordt een wit vlak in donkere modus.
   De bestaande regel in sg-fixes.css werkt niet door cascade-conflict.
   Oplossing: Hoge specificity in laatste CSS-bestand.
   QR-wrap = semi-transparant wit + wit icoon (goed leesbaar op donkere topbar).
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #topbarQRBtn .topbar-icon-qr,
html.sg-theme-dark .topbar-icon-qr {
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.28) !important;
}
html.sg-theme-dark #topbarQRBtn:hover .topbar-icon-qr,
html.sg-theme-dark .topbar-icon-btn:hover .topbar-icon-qr {
  background: rgba(255,255,255,.22) !important;
}
/* Lichte modus QR-knop: topbar is donker (#0f172a) dus wit icoon */
html.sg-theme-light #topbarQRBtn .topbar-icon-qr,
html.sg-theme-light .topbar-icon-qr {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.30) !important;
}
html.sg-theme-light #topbarQRBtn:hover .topbar-icon-qr {
  background: rgba(255,255,255,.25) !important;
}

/* ── Lichte modus: datum-badge + greeting baseline (na verwijderen inline styles) ── */
html.sg-theme-light #dashboardGreeting {
  color: #0f172a !important;
}
html.sg-theme-light #dashboardSubGreeting {
  color: #64748b !important;
}
html.sg-theme-light #dashTopDateBadge {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}
html.sg-theme-light #dashTopDay,
html.sg-theme-light #dashTopMonth {
  color: #64748b !important;
}
html.sg-theme-light #dashTopDate {
  color: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix132 — INSTELLINGEN-KAARTEN: WIT IN LICHTE MODUS
   De instellingen-kaarten (Kleurthema, Tekstgrootte, Accentkleur)
   en panels moeten WIT zijn in lichte modus.
   Sterkste specificiteit (ID + thema klasse).
══════════════════════════════════════════════════════════════════ */
/* Alle kaart-containers in instellingen lichte modus */
html.sg-theme-light #sec-instellingen {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html.sg-theme-light #sec-instellingen > div {
  background: #ffffff !important;
}
/* Panels en kaarten wit */
html.sg-theme-light #instPanel-thema > div > div,
html.sg-theme-light #instPanel-notifs > div > div,
html.sg-theme-light #instPanel-privacy > div > div,
html.sg-theme-light #instPanel-account > div > div,
html.sg-theme-light #instPanel-app > div > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
/* Sticky header: wit */
html.sg-theme-light #instellingenTabBar {
  background: #ffffff !important;
}
/* Alle elementen met var(--card) of donkere hardcoded kleuren → wit */
html.sg-theme-light #sec-instellingen [style*="background:var(--card"],
html.sg-theme-light #sec-instellingen [style*="background: var(--card"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
/* Alle elementen met var(--bg) → lichtgrijs */
html.sg-theme-light #sec-instellingen [style*="background:var(--bg"],
html.sg-theme-light #sec-instellingen [style*="background: var(--bg"] {
  background: #f8fafc !important;
}
/* Tekst in instellingen altijd donker in lichte modus */
html.sg-theme-light #sec-instellingen span,
html.sg-theme-light #sec-instellingen div,
html.sg-theme-light #sec-instellingen p {
  color: inherit;
}