/* ════════════════════════════════════════════════════════════════════
   SCHOONGENOEG — THEMA ENGINE v1.0
   Eén centrale plek voor ALLE thema-gevoelige stijlen:
   • CSS custom properties per thema (light / dark)
   • Whitelabel kleur-koppeling (--wl-primary meekleurend)
   • Timer widget + mini-pill whitelabel-aware
   • Date/time inputs: neutraal (geen groen / donker popup)
   • Donkere blokken met donkere tekst → gefixed
   • Lichte blokken met lichte tekst   → gefixed
   • Admin-controleerbaar via :root overschrijving
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES — LICHT THEMA (standaard)
══════════════════════════════════════════════════════════════════ */
:root,
html.sg-theme-light {
  --sg-bg:          #ffffff;
  --sg-card:        #ffffff;
  --sg-card-alt:    #f8fafc;
  --sg-text:        #0f172a;
  --sg-text-2:      #334155;
  --sg-text-muted:  #64748b;
  --sg-border:      #e2e8f0;
  --sg-input-bg:    #ffffff;
  --sg-input-text:  #0f172a;
  --sg-input-border:#d1d5db;
  --sg-topbar-bg:   #0f172a;
  --sg-sidebar-bg:  #0f172a;
  --sg-nav-bg:      #ffffff;
  --sg-overlay-bg:  rgba(0,0,0,.45);
  --sg-modal-bg:    #ffffff;
  --sg-modal-hdr:   #f8fafc;
  --sg-shadow:      0 2px 12px rgba(0,0,0,.08);
  /* Thema-icoon: maan in lichtmodus → naar donker */
  --sg-theme-icon:  "\f186"; /* fa-moon */
  --sg-date-scheme: light;
  --sg-date-bg:     #ffffff;
  --sg-date-color:  #0f172a;
  --sg-date-border: #d1d5db;
  --sg-date-icon-filter: none;
  /* Whitelabel fallbacks (overschreven door sg-whitelabel.js) */
  --wl-primary:     #e30613;
  --wl-primary-light: rgba(227,6,19,.12);
  --wl-primary-dark:  #9b0000;
  --wl-secondary:   #0f172a;
  /* Skeleton loader kleuren */
  --sg-skeleton-bg:  #e2e8f0;
  --sg-skeleton-bg2: #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════════
   2. CSS CUSTOM PROPERTIES — DONKER THEMA
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark {
  --sg-bg:          #0a0a0a;
  --sg-card:        #161616;
  --sg-card-alt:    #1a1a1a;
  --sg-text:        #ffffff;
  --sg-text-2:      #e0e0e0;
  --sg-text-muted:  #999999;
  --sg-border:      rgba(255,255,255,.12);
  --sg-input-bg:    #1a1a1a;
  --sg-input-text:  #ffffff;
  --sg-input-border:rgba(255,255,255,.16);
  --sg-topbar-bg:   #0a0a0a;
  --sg-sidebar-bg:  #0a0a0a;
  --sg-nav-bg:      #0a0a0a;
  --sg-overlay-bg:  rgba(0,0,0,.8);
  --sg-modal-bg:    #161616;
  --sg-modal-hdr:   #1a1a1a;
  --sg-shadow:      0 2px 12px rgba(0,0,0,.4);
  --sg-theme-icon:  "\f185"; /* fa-sun */
  /* Datepicker: licht houden in dark mode voor leesbaarheid */
  --sg-date-scheme: light;
  --sg-date-bg:     #1e293b;
  --sg-date-color:  #f1f5f9;
  --sg-date-border: rgba(255,255,255,.18);
  --sg-date-icon-filter: invert(1) brightness(0.85);
  /* Skeleton loader kleuren — zichtbaar op donkere achtergrond */
  --sg-skeleton-bg:  rgba(255,255,255,.08);
  --sg-skeleton-bg2: rgba(255,255,255,.04);
}

/* ══════════════════════════════════════════════════════════════════
   3. BASIS BODY / APP — via custom properties
══════════════════════════════════════════════════════════════════ */
html,
body {
  background: var(--sg-bg) !important;
  color:       var(--sg-text) !important;
}
#app {
  background: var(--sg-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. TOPBAR / SIDEBAR / BOTTOM NAV
══════════════════════════════════════════════════════════════════ */
.topbar {
  background:    var(--sg-topbar-bg) !important;
  border-bottom: 1px solid var(--sg-border) !important;
}
.sidebar {
  background:  var(--sg-sidebar-bg) !important;
  border-right: 1px solid var(--sg-border) !important;
}
.bottom-nav {
  background:  var(--sg-nav-bg) !important;
  border-top:  1px solid var(--sg-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. KAARTEN EN VAKKEN — via custom properties
   Vervangt hardcoded wit/donker in dark mode.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .card,
html.sg-theme-dark .kaart,
html.sg-theme-dark .widget,
html.sg-theme-dark .panel,
html.sg-theme-dark .section-card,
html.sg-theme-dark [class*="stat-card"],
html.sg-theme-dark [class*="info-card"],
html.sg-theme-dark [class*="kpi-card"] {
  background:   var(--sg-card) !important;
  color:        var(--sg-text) !important;
  border-color: var(--sg-border) !important;
}

/* Generieke witte inline-style achtergronden in dark mode */
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:#fff;"],
html.sg-theme-dark [style*="background: #fff;"],
html.sg-theme-dark [style*="background-color:#ffffff"],
html.sg-theme-dark [style*="background-color: #ffffff"],
html.sg-theme-dark [style*="background-color:white"],
html.sg-theme-dark [style*="background-color: white"] {
  background:   var(--sg-card) !important;
  color:        var(--sg-text) !important;
}

/* Lichtgrijze inline achtergronden */
html.sg-theme-dark [style*="background:#f8fafc"],
html.sg-theme-dark [style*="background: #f8fafc"],
html.sg-theme-dark [style*="background:#f1f5f9"],
html.sg-theme-dark [style*="background: #f1f5f9"] {
  background: var(--sg-card-alt) !important;
  color:      var(--sg-text) !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. DARK TEKST OP DONKERE ACHTERGROND — leesbaar maken
   Hardcoded donkere kleuren die in dark mode onleesbaar zijn.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark [style*="color:#0f172a"],
html.sg-theme-dark [style*="color: #0f172a"] {
  color: var(--sg-text) !important;
}
html.sg-theme-dark [style*="color:#1e293b"],
html.sg-theme-dark [style*="color: #1e293b"] {
  color: var(--sg-text-2) !important;
}
html.sg-theme-dark [style*="color:#374151"],
html.sg-theme-dark [style*="color: #374151"] {
  color: var(--sg-text-2) !important;
}
html.sg-theme-dark [style*="color:#111827"],
html.sg-theme-dark [style*="color: #111827"] {
  color: var(--sg-text) !important;
}
html.sg-theme-dark [style*="color:#111\""],
html.sg-theme-dark [style*="color:#111;"],
html.sg-theme-dark [style*="color: #111"] {
  color: var(--sg-text) !important;
}
html.sg-theme-dark [style*="color:#333"],
html.sg-theme-dark [style*="color: #333"] {
  color: var(--sg-text-2) !important;
}

/* Muted tekst lichter maken in dark mode */
html.sg-theme-dark [style*="color:#64748b"],
html.sg-theme-dark [style*="color: #64748b"] {
  color: var(--sg-text-muted) !important;
}
html.sg-theme-dark [style*="color:#6b7280"],
html.sg-theme-dark [style*="color: #6b7280"] {
  color: var(--sg-text-muted) !important;
}
html.sg-theme-dark [style*="color:#9ca3af"],
html.sg-theme-dark [style*="color: #9ca3af"] {
  color: var(--sg-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. LICHT THEMA — wit↔zwart correcties
   In het lichte thema moet de achtergrond WIT zijn en tekst ZWART.
   Hardcoded witte/lichte tekstkleuren op witte achtergrond → onzichtbaar.
   Uitzondering: donkere containers (timer widget, touchboard, dark cards).
══════════════════════════════════════════════════════════════════ */

/* Witte tekst buiten donkere containers → zwart/donkergrijs */
html.sg-theme-light :not(#dashTimerWidget):not(#planTouchboardWrap):not(#tbIB_bank):not(.tbib-chip):not([style*="background:#0"]):not([style*="background:linear-gradient(150deg,#1a"]):not([style*="background:linear-gradient(135deg,#1a"]) > [style*="color:white"],
html.sg-theme-light :not(#dashTimerWidget):not(#planTouchboardWrap):not(#tbIB_bank):not(.tbib-chip):not([style*="background:#0"]):not([style*="background:linear-gradient(150deg,#1a"]):not([style*="background:linear-gradient(135deg,#1a"]) > [style*="color: white"] {
  color: #0f172a !important;
}

/* Dashboard Planning Board kaart behoud witte tekst (donkere achtergrond) */
#dashPlanningBar [style*="color:white"],
#dashPlanningBar [style*="color: white"],
#dashTimerWidget [style*="color:white"],
#dashTimerWidget [style*="color: white"] {
  color: white !important;
}

/* Licht thema: planning board chips / beschikbaar kaarten leesbaarheid */
html.sg-theme-light .plan-avail-card,
html.sg-theme-light .zp-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html.sg-theme-light .zp-card-title { color: #1e293b !important; }
html.sg-theme-light .zp-card-sub   { color: #64748b !important; }

/* Licht thema: planning board dag-header tekst */
html.sg-theme-light .plan-wk-day-hdr    { color: #64748b !important; }
html.sg-theme-light .plan-wk-day-num    { color: #1e293b !important; }
html.sg-theme-light .plan-wk-col        { background: #fafbfc !important; border-color: #f1f5f9 !important; }

/* Licht thema: filter chips */
html.sg-theme-light .tp-filter-chip     { background: #f8fafc !important; color: #64748b !important; border-color: #e2e8f0 !important; }
html.sg-theme-light .tp-view-btn        { color: #64748b !important; }
html.sg-theme-light .tp-view-btn.active { background: #ffffff !important; color: var(--wl-primary,#e30613) !important; }

/* Licht thema: section titles leesbaar */
html.sg-theme-light .tp-section-title  { color: #1e293b !important; }
html.sg-theme-light .tp-section-sub    { color: #64748b !important; }
html.sg-theme-light .tp-brand-title    { color: #0f172a !important; }

/* Licht thema: inputs leesbaarheid */
html.sg-theme-light .tp-search-wrap input { background: #f8fafc !important; color: #1e293b !important; border-color: #e2e8f0 !important; }

/* Licht thema: planning board header balk */
html.sg-theme-light #tpHeader { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; }

/* Licht thema: week strip dag knoppen */
html.sg-theme-light .tp-week-strip .plan-day-btn       { background: #f8fafc !important; border-color: #e2e8f0 !important; }
html.sg-theme-light .tp-week-strip .plan-day-btn-name  { color: #94a3b8 !important; }
html.sg-theme-light .tp-week-strip .plan-day-btn-num   { color: #1e293b !important; }
/* Geselecteerde dag: tekst altijd zwart leesbaar, ook in licht thema */
html.sg-theme-light .tp-week-strip .plan-day-btn.selected .plan-day-btn-name,
html.sg-theme-light .ta-week-strip .plan-day-btn.selected .plan-day-btn-name { color: #111111 !important; }
html.sg-theme-light .tp-week-strip .plan-day-btn.selected .plan-day-btn-num,
html.sg-theme-light .ta-week-strip .plan-day-btn.selected .plan-day-btn-num  { color: #111111 !important; }

/* ══════════════════════════════════════════════════════════════════
   8. FORMULIER INPUTS — thema-aware (geen zwarte vakken)
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html.sg-theme-dark select,
html.sg-theme-dark textarea {
  background:   var(--sg-input-bg) !important;
  color:        var(--sg-input-text) !important;
  border-color: var(--sg-input-border) !important;
}

html.sg-theme-dark input::placeholder,
html.sg-theme-dark textarea::placeholder {
  color: var(--sg-text-muted) !important;
  opacity: 1;
}

html.sg-theme-dark input:focus,
html.sg-theme-dark select:focus,
html.sg-theme-dark textarea:focus {
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--wl-primary-rgb, 227,6,19), .15) !important;
  outline: none !important;
}

/* Light mode: witte inputs met donkere tekst */
html.sg-theme-light input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html.sg-theme-light select,
html.sg-theme-light textarea {
  background:   #ffffff !important;
  color:        #0f172a !important;
  border-color: var(--sg-input-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   9. DATUM / TIJD INPUTS — neutraal thema (géén groen / géén donker)
   Reden: browser-native date-picker popup volgt de color-scheme.
   • In dark mode: lichte pickers zijn leesbaarder
   • In light mode: lichte pickers zijn standaard
   • Kleur van het ikoontje past aan het thema
══════════════════════════════════════════════════════════════════ */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  background:   #ffffff !important;
  color:        #0f172a !important;
  border:       1.5px solid #d1d5db !important;
  border-radius:10px !important;
  padding:      9px 12px !important;
  font-size:    .9rem !important;
  font-family:  inherit !important;
  color-scheme: light !important;
  accent-color: #e30613 !important;
  outline:      none;
  transition:   border-color .15s;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border-color: var(--wl-primary, #e30613) !important;
  box-shadow:   0 0 0 3px rgba(227,6,19,.12) !important;
}

/* Kalender-ikoontje: neutraal grijs in beide thema's */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity:      0.55;
  cursor:       pointer;
  color-scheme: light !important;
  filter:       none !important;
  width:        18px;
  height:       18px;
}

/* Dark mode: donker input met lichte tekst, lichte popup */
html.sg-theme-dark input[type="date"],
html.sg-theme-dark input[type="time"],
html.sg-theme-dark input[type="datetime-local"],
html.sg-theme-dark input[type="month"] {
  background:   #1e293b !important;
  color:        #f1f5f9 !important;
  border-color: rgba(255,255,255,.18) !important;
  color-scheme: dark !important;  /* native popup volgt donker thema */
}

html.sg-theme-dark input[type="date"]:focus,
html.sg-theme-dark input[type="time"]:focus,
html.sg-theme-dark input[type="datetime-local"]:focus {
  border-color: var(--wl-primary, #e30613) !important;
  box-shadow:   0 0 0 3px rgba(227,6,19,.18) !important;
}

html.sg-theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
html.sg-theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
html.sg-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter:  invert(1) brightness(0.8) !important;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════
   10. MODALS — thema-aware
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .modal-overlay,
html.sg-theme-dark .sg-modal-overlay {
  background: var(--sg-overlay-bg) !important;
}
html.sg-theme-dark .modal,
html.sg-theme-dark .modal-content {
  background:   var(--sg-modal-bg) !important;
  border-color: var(--sg-border) !important;
  color:        var(--sg-text) !important;
}
html.sg-theme-dark .modal-header {
  background:   var(--sg-modal-hdr) !important;
  border-bottom-color: var(--sg-border) !important;
  color:        var(--sg-text) !important;
}
html.sg-theme-dark .modal-body {
  background:   var(--sg-modal-bg) !important;
  color:        var(--sg-text) !important;
}
html.sg-theme-dark .modal-footer {
  background:   var(--sg-modal-hdr) !important;
  border-top-color: var(--sg-border) !important;
}
html.sg-theme-dark .modal-body label,
html.sg-theme-dark .modal-body .form-group label {
  color: var(--sg-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
   11. TIMER WIDGET — simpele kaart stijl, zelfde als dashboard
══════════════════════════════════════════════════════════════════ */
/* Laat de inline styles werken — geen override nodig */

/* ══════════════════════════════════════════════════════════════════
   12. TIMER MINI-PILL (drijvende knop)
   Fase-kleuren zijn SEMANTISCH: rood=reizen, groen=werk, amber=pauze
══════════════════════════════════════════════════════════════════ */
#timerMiniPill                { background: #e30613 !important; box-shadow: 0 2px 8px rgba(0,0,0,.3) !important; }
#timerMiniPill.work-phase     { background: #16a34a !important; }
#timerMiniPill.pause-phase    { background: #d97706 !important; }

/* ══════════════════════════════════════════════════════════════════
   13. ROUTE INFO ROW IN TIMER MODAL
   Toont verwachte reistijd + verkeer boven de timer knoppen.
══════════════════════════════════════════════════════════════════ */
#timerRouteInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sg-card-alt, #f8fafc);
  border: 1.5px solid var(--sg-border, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: .8rem;
}
html.sg-theme-dark #timerRouteInfo {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.tir-icon {
  width:  32px;
  height: 32px;
  border-radius: 9px;
  background: var(--wl-primary-light, rgba(227,6,19,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .85rem;
  color: var(--wl-primary, #e30613);
}
.tir-main {
  flex: 1;
  min-width: 0;
}
.tir-tijd {
  font-weight: 800;
  color: var(--sg-text, #0f172a);
  font-size: .88rem;
}
.tir-detail {
  font-size: .7rem;
  color: var(--sg-text-muted, #64748b);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tir-verkeer {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tir-verkeer.ok     { background: rgba(22,163,74,.12);  color: #16a34a; }
.tir-verkeer.medium { background: rgba(245,158,11,.12); color: #d97706; }
.tir-verkeer.druk   { background: rgba(227,6,19,.12);   color: #e30613; }

/* ══════════════════════════════════════════════════════════════════
   14. STARTTIJD AANPASSEN ROW — in timer modal
   Toont instelbare starttijd (gekoppeld aan planning/agenda).
══════════════════════════════════════════════════════════════════ */
#timerStarttijdRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--sg-border, #e2e8f0);
}
#timerStarttijdRow label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--sg-text-muted, #64748b);
  flex-shrink: 0;
}
#timerStarttijdInput {
  background:   var(--sg-input-bg, #ffffff) !important;
  color:        var(--sg-input-text, #0f172a) !important;
  border:       1.5px solid var(--sg-input-border, #d1d5db) !important;
  border-radius:8px !important;
  padding:      5px 8px !important;
  font-size:    .82rem !important;
  font-family:  inherit !important;
  width:        90px;
  outline:      none;
}
#timerStarttijdInput:focus {
  border-color: var(--wl-primary, #e30613) !important;
}
#timerStarttijdReset {
  background:   none;
  border:       none;
  color:        var(--sg-text-muted, #64748b);
  font-size:    .72rem;
  cursor:       pointer;
  padding:      4px 8px;
  border-radius:6px;
  font-family:  inherit;
  transition:   background .12s, color .12s;
  white-space:  nowrap;
}
#timerStarttijdReset:hover {
  background: var(--sg-card-alt, #f1f5f9);
  color:      var(--sg-text, #0f172a);
}
html.sg-theme-dark #timerStarttijdReset:hover {
  background: rgba(255,255,255,.08);
  color:      #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════════
   15. SHIFTS VANDAAG KAART — dashboard
   De "#dashShiftsVandaag" widget volgt ook de whitelabel kleur.
══════════════════════════════════════════════════════════════════ */
#dashShiftsVandaag {
  border-color: color-mix(in srgb, var(--wl-primary, #e30613) 25%, transparent) !important;
}
html.sg-theme-dark #dashShiftsVandaag {
  border-color: color-mix(in srgb, var(--wl-primary, #e30613) 22%, transparent) !important;
}

/* ══════════════════════════════════════════════════════════════════
   16. PLANNING-BALK TABS — dark mode fix
══════════════════════════════════════════════════════════════════ */
/* ── Planning tabs donker thema ── */
html.sg-theme-dark .planning-mode-tabs {
  background:    #0f172a !important;
  border-bottom: 2px solid #1e2d45 !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}
html.sg-theme-dark .plan-mode-tab--inactive {
  background:   rgba(255,255,255,.05) !important;
  color:        #94a3b8 !important;
  border-color: rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
}
html.sg-theme-dark .plan-mode-tab--inactive:hover {
  background:   rgba(255,255,255,.1) !important;
  color:        #e2e8f0 !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:   0 3px 10px rgba(0,0,0,.25) !important;
}

/* ── Planning tabs licht thema ── */
html.sg-theme-light .planning-mode-tabs {
  background:    #f1f5f9 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  box-shadow:    0 2px 8px rgba(0,0,0,.06) !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}
html.sg-theme-light .plan-mode-tab--inactive {
  background:   #ffffff !important;
  color:        #64748b !important;
  border-color: #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow:   0 1px 3px rgba(0,0,0,.06) !important;
}
html.sg-theme-light .plan-mode-tab--inactive:hover {
  background:   #f8fafc !important;
  color:        #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow:   0 3px 10px rgba(0,0,0,.09) !important;
}

/* ── Actieve tab — altijd rode gradient ── */
.plan-mode-tab--active {
  background: linear-gradient(135deg, #e30613, #9b0000) !important;
  color:      #ffffff !important;
  border-color: rgba(255,255,255,.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(227,6,19,.4) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   17. THEMA TOGGLE KNOPPEN — icoon wisselt per thema
══════════════════════════════════════════════════════════════════ */
/* Topbar knop in donker thema */
html.sg-theme-dark .topbar-theme-btn,
html.sg-theme-dark #topbarThemeBtn {
  background:   rgba(165,180,252,.12) !important;
  border-color: rgba(165,180,252,.28) !important;
  color:        #a5b4fc !important;
}
html.sg-theme-dark .topbar-theme-btn:hover,
html.sg-theme-dark #topbarThemeBtn:hover {
  background: rgba(165,180,252,.22) !important;
  color:      #c7d2fe !important;
}
/* Topbar knop licht thema — gele maan */
html.sg-theme-light .topbar-theme-btn,
html.sg-theme-light #topbarThemeBtn {
  background:   rgba(251,191,36,.18) !important;
  border-color: rgba(251,191,36,.55) !important;
  color:        #fbbf24 !important;
}
html.sg-theme-light .topbar-theme-btn:hover,
html.sg-theme-light #topbarThemeBtn:hover {
  background: rgba(251,191,36,.32) !important;
}
/* Planning header thema-knop (tp-act-ghost) */
html.sg-theme-dark #planThemeToggleBtn {
  background:   rgba(165,180,252,.1) !important;
  border-color: rgba(165,180,252,.2) !important;
  color:        #a5b4fc !important;
}
html.sg-theme-light #planThemeToggleBtn {
  background:   rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.25) !important;
  color:        #d97706 !important;
}

/* ══════════════════════════════════════════════════════════════════
   18. SNELLE ACTIE KNOPPEN (dashboard) — thema-aware
══════════════════════════════════════════════════════════════════ */
.sg-qa-btn {
  background:   var(--sg-card, #ffffff) !important;
  color:        var(--sg-text, #0f172a) !important;
  border-color: var(--sg-border, #e2e8f0) !important;
}
.sg-qa-btn:hover {
  background: var(--sg-card-alt, #f1f5f9) !important;
}
.sg-qa-sub {
  color: var(--sg-text-muted, #64748b) !important;
}

/* ══════════════════════════════════════════════════════════════════
   19. FILTER KNOPPEN — thema-aware
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .filter-btn {
  background:   rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:        var(--sg-text-muted) !important;
}
html.sg-theme-dark .filter-btn.active {
  background:   var(--wl-primary, #e30613) !important;
  border-color: var(--wl-primary, #e30613) !important;
  color:        #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   20. ADMIN THEMA-CONTROL — CSS custom properties override punt
   Beheerder kan via JS eenmalig --sg-* variabelen overschrijven
   (via document.documentElement.style.setProperty) om globaal alle
   kleuren te sturen vanuit één admin-interface.
   
   Voorbeeld JS (vanuit admin-paneel):
     document.documentElement.style.setProperty('--sg-card', '#1a1a2e');
     document.documentElement.style.setProperty('--wl-primary', '#7c3aed');
   
   Dit overschrijft automatisch alle elementen die de variabelen gebruiken.
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   21. PAARS/LICHT BESCHIKBAARHEID KAARTEN — dark mode fix
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark [style*="background:linear-gradient(135deg,#ede9fe"],
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:#ede9fe"],
html.sg-theme-dark [style*="background:#ddd6fe"] {
  background: rgba(124,58,237,.18) !important;
}
html.sg-theme-dark [style*="border:1.5px solid #c4b5fd"],
html.sg-theme-dark [style*="border: 1.5px solid #c4b5fd"] {
  border-color: rgba(196,181,253,.35) !important;
}

/* ══════════════════════════════════════════════════════════════════
   22. DASHBOARD SNELLE LINKS (planning bar etc.) — dark mode fix
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #dashPlanningBar {
  /* Donkere gradient is al goed — behoud */
}

/* ══════════════════════════════════════════════════════════════════
   23. GLOBALE BORDER-COLOR FIX — dark mode
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark [style*="border-bottom:1px solid var(--border)"],
html.sg-theme-dark [style*="border-top:1px solid var(--border)"],
html.sg-theme-dark [style*="border:1px solid var(--border)"],
html.sg-theme-dark [style*="border:1.5px solid var(--border)"] {
  border-color: var(--sg-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   24. FORM GROUP ACHTERGRONDEN — dark mode fix (bg:var(--bg))
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark [style*="background:var(--bg)"],
html.sg-theme-dark [style*="background: var(--bg)"],
html.sg-theme-dark [style*="background:var(--card)"],
html.sg-theme-dark [style*="background: var(--card)"],
html.sg-theme-dark [style*="background:var(--card-bg)"],
html.sg-theme-dark [style*="background: var(--card-bg)"] {
  /* CSS variabelen worden al correct opgepakt door de browser
     zolang de :root dark-mode waarden zijn overschreven.
     Geen extra override nodig als de variabelen kloppen. */
}

/* ══════════════════════════════════════════════════════════════════
   25. TOUCHBOARD DARK MODE — rijen, headers, inputs
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .tb-row {
  background:   #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color:        var(--sg-text) !important;
}
html.sg-theme-dark .tb-col-label,
html.sg-theme-dark .tbib-col-hdr {
  background:   #162032 !important;
  color:        var(--sg-text-muted) !important;
  border-color: rgba(255,255,255,.07) !important;
}
html.sg-theme-dark .tb-input,
html.sg-theme-dark .tb-select,
html.sg-theme-dark [class*="tb-field"] input,
html.sg-theme-dark [class*="tb-field"] select {
  background:   var(--sg-input-bg) !important;
  color:        var(--sg-input-text) !important;
  border-color: var(--sg-input-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   26. SGTIMER SAVE-DIALOG + GPS-MODAL — dark-mode
   De dialogen worden via JS gegenereerd met inline-styles.
   Deze selectors vangen de meest voorkomende hardcoded kleuren op.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #sgTimerSaveDlg > div,
html.sg-theme-dark #sgGpsKeuzeModal > div > div,
html.sg-theme-dark #sgGpsInstellingenModal > div > div,
html.sg-theme-dark #sgTimerProjectPicker > div {
  background: var(--sg-modal-bg, #1e2940) !important;
  color:      var(--sg-text, #f1f5f9) !important;
}

/* Lichte blokken binnen SGTimer dialoog */
html.sg-theme-dark #sgDlgTravelBlock {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.25) !important;
}
html.sg-theme-dark #sgDlgWorkBlock {
  background: rgba(22,163,74,.10) !important;
  border-color: rgba(22,163,74,.22) !important;
}

/* Project-kiezer knoppen in dark mode */
html.sg-theme-dark #sgTimerProjectPicker button[style*="background:white"],
html.sg-theme-dark #sgTimerProjectPicker button[style*="background: white"] {
  background:   var(--sg-card, #1e2940) !important;
  border-color: var(--sg-border, rgba(255,255,255,.1)) !important;
  color:        var(--sg-text, #f1f5f9) !important;
}

/* AVG-note achtergrond in GPS keuze modal */
html.sg-theme-dark #sgGpsKeuzeModal [style*="background:#f8fafc"],
html.sg-theme-dark #sgGpsKeuzeModal [style*="background: #f8fafc"],
html.sg-theme-dark #sgGpsInstellingenModal [style*="background:#f8fafc"],
html.sg-theme-dark #sgGpsInstellingenModal [style*="background: #f8fafc"] {
  background: rgba(255,255,255,.05) !important;
}

/* Alarm-banner route-info chip */
html.sg-theme-dark #sgAlarmRouteInfo {
  color: rgba(255,255,255,.85) !important;
}

/* Starttijd popover in dark mode */
html.sg-theme-dark #sgStarttijdPopover {
  background: var(--sg-modal-bg, #1e2940) !important;
  color:      var(--sg-text, #f1f5f9) !important;
  border: 1px solid var(--sg-border, rgba(255,255,255,.1)) !important;
}
html.sg-theme-dark #sgStarttijdRoute {
  background: var(--sg-card-alt, #162032) !important;
  color:      var(--sg-text-muted, #94a3b8) !important;
}

/* ══════════════════════════════════════════════════════════════════
   27. DATUM / TIJD INPUTS — slim thema
   • Lichtmodus: wit met donkere tekst, neutrale popup
   • Donkermodus: donker input, neutrale (lichte) popup voor leesbaarheid
   Focus kleur via whitelabel-variabele.
══════════════════════════════════════════════════════════════════ */
/* Override eventuele oudere sg-fixes.css regels die groen forceren */
html.sg-theme-dark input[type="date"],
html.sg-theme-dark input[type="time"],
html.sg-theme-dark input[type="datetime-local"],
html.sg-theme-dark input[type="month"] {
  background:   #1e293b !important;
  color:        #f1f5f9 !important;
  border-color: rgba(255,255,255,.2) !important;
  color-scheme: light !important; /* native popup altijd licht = leesbaarder */
}
html.sg-theme-dark input[type="date"]:focus,
html.sg-theme-dark input[type="time"]:focus,
html.sg-theme-dark input[type="datetime-local"]:focus {
  border-color: var(--wl-primary, #e30613) !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.18) !important;
}
html.sg-theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
html.sg-theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
html.sg-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.8) !important;
  opacity: 0.7;
}

/* Lichtmodus: altijd wit + neutrale popup */
html.sg-theme-light input[type="date"],
html.sg-theme-light input[type="time"],
html.sg-theme-light input[type="datetime-local"],
html.sg-theme-light input[type="month"] {
  background:   #ffffff !important;
  color:        #111827 !important;
  border-color: #d1d5db !important;
  color-scheme: light !important;
}

/* ══════════════════════════════════════════════════════════════════
   28. TWEEDE THEMA-KNOP (planning-balk) — verborgen houden
   De enige thema-toggle staat in de topbar. De planning-balk
   had een duplicate die verwijderd is uit HTML; deze rule is
   een extra veiligheidsnet als hij ooit terugkomt.
══════════════════════════════════════════════════════════════════ */
/* Geen extra CSS nodig — HTML duplicate is verwijderd */

/* ══════════════════════════════════════════════════════════════════
   29. EXTRA INLINE STIJL OVERRIDES — dark mode
   Vangen specifieke hardcoded kleuren die in dark mode verkeerd staan.
══════════════════════════════════════════════════════════════════ */

/* Donkerblauwe headers (e.g. #0f172a, #1e293b) die in dark mode tekst verbergen */
html.sg-theme-dark [style*="background:#0f172a"] p,
html.sg-theme-dark [style*="background:#0f172a"] small,
html.sg-theme-dark [style*="background:#1e293b"] p,
html.sg-theme-dark [style*="background:#1e293b"] small {
  color: rgba(255,255,255,.75) !important;
}

/* Witte tekst labels op lichte achtergronden in light mode */
html.sg-theme-light [style*="color:rgba(255,255,255,.6)"],
html.sg-theme-light [style*="color: rgba(255,255,255,.6)"],
html.sg-theme-light [style*="color:rgba(255,255,255,.65)"],
html.sg-theme-light [style*="color:rgba(255,255,255,.7)"],
html.sg-theme-light [style*="color:rgba(255,255,255,.75)"],
html.sg-theme-light [style*="color:rgba(255,255,255,.8)"] {
  /* Alleen overschrijven als NIET in een donkere container */
  /* Detecteer donkere containers via background-selector */
}

/* Select dropdowns dark mode — extra specifiek voor iOS */
html.sg-theme-dark select option {
  background: var(--sg-card, #1e2940);
  color:      var(--sg-text, #f1f5f9);
}

/* ══════════════════════════════════════════════════════════════════
   30. ADMIN THEMA-CONTROL CSS-ANKER
   Via JS (sg-admin-thema.js) kunnen beheerders runtime CSS-vars
   overschrijven. Deze comment documenteert de variabelen die
   daarvoor beschikbaar zijn.
   
   Beheer via: Admin → Instellingen → Thema & Huisstijl
   
   Variabelen (voorbeelden):
     --wl-primary       Accent/brand kleur
     --wl-secondary     Sidebar/header achtergrond
     --sg-card          Kaart achtergrond (donker thema)
     --sg-bg            Pagina achtergrond
     --sg-text          Primaire tekst
     --sg-border        Rand kleur
══════════════════════════════════════════════════════════════════ */