/* ════════════════════════════════════════════════════════════════════
   SCHOONGENOEG — Dark Mode Comprehensive Fixes v1.9
   ════════════════════════════════════════════════════════════════════
   Overschrijft alle hardcoded lichte kleuren die niet reageren op
   het .sg-theme-dark thema. Geladen ná style.css en sg-fixes.css.
   v1.1: input/select/textarea in modals correct donker in dark mode.
   v1.2: planning board personeelskaarten (INKOOP/VERKOOP, knoppen).
   v1.3: timer GPS-keuze modal, team agenda panel, pastel badges,
         beschikbaarheid, verlof, notities, contracten, loonstroken,
         offline/error states, inactive dag-balk kleuren.
   v1.4: bottom-sheets & modals (background:white/border-radius),
         infobot bubble, chat-location, smart-planner kaarten,
         notifications, dag-week-planner, sg-accounts/subscription tabs,
         sg-timer stop dialog, hardcoded donkere tekst (#0f172a/#1e293b)
         op donkere achtergrond, sg-netwerk QR modal, sg-stats kaarten,
         sg-connectie-profiel, sg-admin-hub, sg-juridisch.
   v1.5: Admin Control Centre schema-tabs tekst (bug5), AI Training
         tabblad achtergrond (bug6), gebruikers-tab tier-kaarten,
         wallet-badge en Ultra/Basis pill tooltips (bug1/4).
   v1.6: CHAT & TEAM SECTIE — volledige dark-mode voor gesprekkenlijst,
         contactenlijst (#tcNavContactList), chat-overlay (#tcChatOverlay),
         berichten-vlak (#tcChatMessages), invoerbalk (#tcChatInputBar),
         pill-knoppen (Locatie/GPS/Bellen/WhatsApp/Bestand), spraakknop,
         emoji-picker, status-popup, settings-panel (chat-location.js),
         locatie kaart-picker.
   v1.7: CHAT CSS-VARIABELEN — --chat-bg/--chat-card/--chat-pill/--chat-text
         per thema gedefinieerd zodat inline-style fallbacks altijd correct zijn;
         extra agressieve !important overrides voor alle resterende witte vlakken.
   v1.8: CHAT BUBBLE FIX (v16.9.32) — tcRenderMessages gebruikt nu CSS-klassen
         .tc-bubble-other/.tc-bubble-me/.tc-msg-row ipv hardcoded 'white'.
         Extra-acties pills volledig donker. Vertaalknop dark mode.
         Input-balk absolute fallback. Lege staat donker.
   v1.9: CHAT HEADER LIGHT-FIRST (v16.9.32) — #tcChatHeader + #tcNavMeBar
         van hardcoded dark gradient → var(--card,#fff) + dark override hier.
         #tcChatBackBtn, #tcNavChatName/Status, #tcNavMeName, #tcNavStatusDot,
         #tcNavMeAvatar — alle CSS-variabelen. Actieknoppen (.tc-hdr-action)
         CSS-klassen met dark-mode translucent overrides.
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CHAT CSS-VARIABELEN — v1.7
   Definieer --chat-* voor light mode (behoud standaard kleuren)
   en overschrijf voor .sg-theme-dark (altijd donker)
══════════════════════════════════════════════════════════════════ */
:root {
  --chat-bg:         var(--bg,   #f8fafc);
  --chat-card:       var(--card, #ffffff);
  --chat-pill:       var(--bg,   #f8fafc);
  --chat-text:       var(--text, #111827);
  --chat-text-light: var(--text-light, #475569);
}
.sg-theme-dark {
  --chat-bg:         #0f172a !important;
  --chat-card:       #111827 !important;
  --chat-pill:       #1a2540 !important;
  --chat-text:       #e2e8f0 !important;
  --chat-text-light: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════
   1. FILTER BUTTONS (Actief / Gepland / Afgerond / Offerte etc.)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .filter-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .filter-btn:hover:not(.active) {
  background: rgba(255,255,255,.1) !important;
  color: #cbd5e1 !important;
}
.sg-theme-dark .filter-btn.active {
  background: var(--wl-primary,#e30613) !important;
  border-color: var(--wl-primary-dark,#9b0000) !important;
  color: #ffffff !important;
}
/* Gekleurde status-filter buttons */
.sg-theme-dark .proj-status-btn {
  background: rgba(255,255,255,.06) !important;
}
.sg-theme-dark .proj-status-btn[style*="f59e0b"] {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.4) !important;
}
.sg-theme-dark .proj-status-btn[style*="8b5cf6"] {
  color: #c084fc !important;
  border-color: rgba(192,132,252,.4) !important;
}
.sg-theme-dark .proj-status-btn[style*="10b981"] {
  color: #34d399 !important;
  border-color: rgba(52,211,153,.4) !important;
}

/* ══════════════════════════════════════════════════════════════════
   2. PROJECT CARD V2 — kaart zelf + gekleurde header-balken
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .project-card-v2 {
  background: #1a2235 !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.07) !important;
}
.sg-theme-dark .project-card-v2:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1) !important;
}
/* Kaart-body in dark mode — achtergrond donker */
.sg-theme-dark .pcv2-body {
  background: #182032 !important;
}
.sg-theme-dark .pcv2-actions {
  border-top-color: rgba(255,255,255,.06) !important;
}

/* Gekleurde header-balken — dezelfde donkere kleuren als light mode (header heeft nu altijd donkere achtergrond) */
/* Geen !important overrides nodig — light-mode kleuren zijn al donker genoeg */

/* Teksten in de kaart */
.sg-theme-dark .pcv2-title  { color: #f1f5f9 !important; }
.sg-theme-dark .pcv2-client { color: #94a3b8 !important; }
.sg-theme-dark .pcv2-meta   { color: #94a3b8 !important; }
.sg-theme-dark .pcv2-location { color: #94a3b8 !important; }

/* Status pill — is inline styled maar omring zorgt dat de kaart OK blijft */
.sg-theme-dark .pcv2-status-pill {
  /* Kleuren worden inline gezet via JS — ze zijn al lichte transparante varianten */
  opacity: 1 !important;
}

/* ── Naam-chips in kaart ── */
.sg-theme-dark .pcv2-name-chip {
  background: rgba(59,130,246,.18) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.3) !important;
}
.sg-theme-dark .pcv2-name-chip:hover { background: rgba(59,130,246,.28) !important; }
.sg-theme-dark .pcv2-name-chip.role-voorman   { background: rgba(139,92,246,.18) !important; color: #c084fc !important; border-color: rgba(139,92,246,.3) !important; }
.sg-theme-dark .pcv2-name-chip.role-monteur   { background: rgba(14,165,233,.18) !important; color: #7dd3fc !important; border-color: rgba(14,165,233,.3) !important; }
.sg-theme-dark .pcv2-name-chip.role-chauffeur { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; border-color: rgba(245,158,11,.3) !important; }
.sg-theme-dark .pcv2-name-chip.role-zzp       { background: rgba(34,197,94,.16) !important;  color: #86efac !important; border-color: rgba(34,197,94,.3) !important; }
.sg-theme-dark .pcv2-name-chip.role-sub       { background: rgba(249,115,22,.18) !important; color: #fdba74 !important; border-color: rgba(249,115,22,.3) !important; }
.sg-theme-dark .pcv2-name-chip.role-pm        { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.3) !important; }
.sg-theme-dark .pcv2-name-chip.role-teken     { background: rgba(20,184,166,.16) !important; color: #5eead4 !important; border-color: rgba(20,184,166,.3) !important; }
.sg-theme-dark .pcv2-name-more { background: rgba(255,255,255,.08) !important; color: #94a3b8 !important; border-color: rgba(255,255,255,.12) !important; }

/* ── Snelknoppen onderaan kaart ── */
.sg-theme-dark .pcv2-actions {
  border-top-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark .pcv2-btn-blue   { background: rgba(59,130,246,.15) !important;  color: #93c5fd !important;  border-color: rgba(59,130,246,.3) !important; }
.sg-theme-dark .pcv2-btn-blue:hover   { background: rgba(59,130,246,.25) !important; }
.sg-theme-dark .pcv2-btn-green  { background: rgba(34,197,94,.14) !important;   color: #86efac !important;  border-color: rgba(34,197,94,.28) !important; }
.sg-theme-dark .pcv2-btn-green:hover  { background: rgba(34,197,94,.24) !important; }
.sg-theme-dark .pcv2-btn-purple { background: rgba(139,92,246,.15) !important;  color: #c084fc !important;  border-color: rgba(139,92,246,.3) !important; }
.sg-theme-dark .pcv2-btn-purple:hover { background: rgba(139,92,246,.25) !important; }
.sg-theme-dark .pcv2-btn-gray   { background: rgba(255,255,255,.07) !important; color: #94a3b8 !important;  border-color: rgba(255,255,255,.12) !important; }
.sg-theme-dark .pcv2-btn-gray:hover   { background: rgba(255,255,255,.12) !important; }

/* ── Avatar borders ── */
.sg-theme-dark .ta {
  border-color: #1e2940 !important;
}

/* ══════════════════════════════════════════════════════════════════
   3. PROJECT CARDS (oud formaat) + COMPLIANCE BARS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .project-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .project-card-header.blue   { background: rgba(37,99,235,.2) !important; }
.sg-theme-dark .project-card-header.red    { background: rgba(220,38,38,.2) !important; }
.sg-theme-dark .project-card-header.green  { background: rgba(22,163,74,.2) !important; }
.sg-theme-dark .project-card-header.orange { background: rgba(245,158,11,.2) !important; }
.sg-theme-dark .project-card-header.purple { background: rgba(124,58,237,.2) !important; }
.sg-theme-dark .compliance-bar {
  background: rgba(255,255,255,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. PIPELINE / KANBAN VIEW
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #pipelineStats {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark #pipelineColumns .pipeline-column {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .pipeline-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. PROJECT DETAIL — STATUS BADGE + TABS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #pdStatusBadge {
  background: rgba(37,99,235,.2) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(37,99,235,.35) !important;
}
/* v16.9.72: status menu als body-overlay — dark mode achtergrond */
.sg-theme-dark #pdStatusMenu {
  background: var(--card, #1e293b) !important;
  border-color: var(--border, rgba(255,255,255,.12)) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.45) !important;
}
.sg-theme-dark .pd-status-opt {
  background: none !important;
  color: var(--text, #e2e8f0) !important;
}
.sg-theme-dark .pd-status-opt:hover {
  background: rgba(255,255,255,.08) !important;
}
/* Fade-in animatie voor het status-menu */
@keyframes _fadeInDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Project detail tabs */
.sg-theme-dark .pd-tab {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .pd-tab.active {
  background: var(--wl-primary,#e30613) !important;
  color: #fff !important;
  border-color: var(--wl-primary-dark,#9b0000) !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. CONTRACT STATUS BADGES (inline in project cards)
      Lichte pastel-achtergronden → donkere transparante varianten
══════════════════════════════════════════════════════════════════ */

/* Blauw → rood (contract klaarzetten) */
.sg-theme-dark [style*="background:#eff6ff"][style*="bfdbfe"] {
  background: rgba(227,6,19,.15) !important;
  border-color: rgba(227,6,19,.3) !important;
  color: #f87171 !important;
}
/* Groen (alles getekend) */
.sg-theme-dark [style*="background:#f0fdf4"][style*="86efac"] {
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: #86efac !important;
}
/* Geel (gedeeltelijk getekend) */
.sg-theme-dark [style*="background:#fefce8"][style*="fde68a"] {
  background: rgba(234,179,8,.14) !important;
  border-color: rgba(234,179,8,.3) !important;
  color: #fde047 !important;
}
/* Algemene lichte inline backgrounds */
.sg-theme-dark [style*="background:#fffbeb"] {
  background: rgba(245,158,11,.12) !important;
}
.sg-theme-dark [style*="background:#fef2f2"] {
  background: rgba(239,68,68,.12) !important;
}
.sg-theme-dark [style*="background:#ecfdf5"],
.sg-theme-dark [style*="background:#d1fae5"] {
  background: rgba(16,185,129,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. INLINE HARDCODED BACKGROUNDS — algemene fix voor js-gegenereerde elementen
      Caution: gebruik !important spaarzaam en alleen voor dark-thema
══════════════════════════════════════════════════════════════════ */

/* Progress bar track */
.sg-theme-dark [style*="background:#e2e8f0"] {
  background: rgba(255,255,255,.1) !important;
}
/* Lichtgrijze vakken */
.sg-theme-dark [style*="background:#f1f5f9"],
.sg-theme-dark [style*="background: #f1f5f9"] {
  background: rgba(255,255,255,.06) !important;
}
.sg-theme-dark [style*="background:#f8fafc"],
.sg-theme-dark [style*="background: #f8fafc"] {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark [style*="background:#f4f4f4"] {
  background: rgba(255,255,255,.06) !important;
}
/* Witte kaarten/secties — ALLE varianten */
.sg-theme-dark [style*="background:white"],
.sg-theme-dark [style*="background: white"],
.sg-theme-dark [style*="background:#ffffff"],
.sg-theme-dark [style*="background: #ffffff"],
.sg-theme-dark [style*="background:#fff;"],
.sg-theme-dark [style*="background: #fff;"],
.sg-theme-dark [style*="background:#fff\""],
.sg-theme-dark [style*="background: #fff\""],
.sg-theme-dark [style*="background:#fff "],
.sg-theme-dark [style*="background: #fff "] {
  background: #1e2940 !important;
}

/* Bottom sheets / modals met ronde bovenhoeken */
.sg-theme-dark [style*="border-radius:22px 22px 0 0"],
.sg-theme-dark [style*="border-radius:20px 20px 0 0"],
.sg-theme-dark [style*="border-radius:18px 18px 0 0"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* Hardcoded border kleuren → donker */
.sg-theme-dark [style*="border:1.5px solid #e2e8f0"],
.sg-theme-dark [style*="border: 1.5px solid #e2e8f0"],
.sg-theme-dark [style*="border:1px solid #e2e8f0"],
.sg-theme-dark [style*="border: 1px solid #e2e8f0"],
.sg-theme-dark [style*="border:2px solid #e2e8f0"] {
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark [style*="border:1.5px solid #e0e0e0"],
.sg-theme-dark [style*="border:1px solid #e0e0e0"],
.sg-theme-dark [style*="border:2px solid #e8e8e8"],
.sg-theme-dark [style*="border:1.5px solid #e8ecf0"],
.sg-theme-dark [style*="border:1px solid #e8ecf0"] {
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark [style*="border-top:1.5px solid #f1f5f9"],
.sg-theme-dark [style*="border-bottom:1.5px solid #f1f5f9"] {
  border-color: rgba(255,255,255,.07) !important;
}

/* Hardcoded tekst kleuren → licht */
.sg-theme-dark [style*="color:#0f172a"],
.sg-theme-dark [style*="color: #0f172a"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark [style*="color:#374151"] {
  color: #d1d5db !important;
}
.sg-theme-dark [style*="color:#334155"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark [style*="color:#111\""],
.sg-theme-dark [style*="color:#111;"],
.sg-theme-dark [style*="color: #111"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="color:#333\""],
.sg-theme-dark [style*="color:#333;"],
.sg-theme-dark [style*="color: #333"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark [style*="color:#1d4ed8"] {
  color: #e30613 !important;
}
.sg-theme-dark [style*="color:#15803d"],
.sg-theme-dark [style*="color:#166534"],
.sg-theme-dark [style*="color:#1e293b"] {
  /* laat die als-is — zijn al donker genoeg op donkere achtergrond
     maar verhoog contrast zodat ze leesbaar blijven */
  filter: brightness(1.5) !important;
}

/* ══════════════════════════════════════════════════════════════════
   8. TEAM AGENDA PANEL (popup vanuit project kaart)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .team-agenda-panel,
.sg-theme-dark [id*="teamAgendaPanel"],
.sg-theme-dark [id*="snelPlanModal"],
.sg-theme-dark [id*="sgTeamAgenda"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f1f5f9 !important;
}
/* Dag-cellen in team agenda (inline #f1f5f9, #fee2e2 etc.) */
.sg-theme-dark [class*="dag-cel"],
.sg-theme-dark [class*="dag-cell"] {
  background: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   9. SEARCH BARS + INPUTS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .search-bar {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark .search-bar input {
  color: #f1f5f9 !important;
  background: transparent !important;
}
.sg-theme-dark .search-bar input::placeholder { color: #64748b !important; }
.sg-theme-dark .search-bar i { color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════════
   10. SECTION CONTENT + HEADERS — Fix116 + Fix121 (v16.9.232)
   ─────────────────────────────────────────────────────────────────
   FIX121: LICHTE modus expliciete overrides toegevoegd.
   Probleem was: donkere !important regels hadden geen tegenhanger
   voor lichte modus → achtergrond bleef donker na toggle naar licht.
   Oplossing: html.sg-theme-LIGHT regels met hogere specificiteit
   die donkere !important regels altijd overschrijven.
══════════════════════════════════════════════════════════════════ */

/* ── LICHTE MODUS — explicit reset (Fix121, v16.9.232) ── */
/* Deze regels staan BOVEN de donkere regels → winnen in cascade  */
html.sg-theme-light,
html.sg-theme-light body {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html.sg-theme-light #app {
  background: #f1f5f9 !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 .section-header {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
html.sg-theme-light .section-title   { color: #0f172a !important; }
html.sg-theme-light .section-subtitle { color: #64748b !important; }

/* ── DONKERE MODUS — hoofd-scrollcontainer ── */
html.sg-theme-dark .main-content,
html.sg-theme-dark #mainContent {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

/* ── DONKERE MODUS — body/html ── */
html.sg-theme-dark,
html.sg-theme-dark body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

/* ── DONKERE MODUS — Sections ── */
.sg-theme-dark .section { background: var(--sg-bg, #0b1120) !important; }
.sg-theme-dark .section-header {
  background: var(--sg-bg, #0b1120) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark .section-title { color: #f1f5f9 !important; }
.sg-theme-dark .section-subtitle { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   11. NETWERK KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .network-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .network-card:hover { background: #253355 !important; }
.sg-theme-dark .network-tag {
  background: rgba(255,255,255,.08) !important;
  color: #94a3b8 !important;
  border: none !important;
}
.sg-theme-dark .network-tag[style*="dbeafe"],
.sg-theme-dark .network-tag[style*="eff6ff"] {
  background: rgba(59,130,246,.18) !important;
  color: #93c5fd !important;
}

/* ══════════════════════════════════════════════════════════════════
   12. MELDINGEN / NOTIFICATIONS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .notif-item {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
.sg-theme-dark .notif-item:hover { background: rgba(255,255,255,.04) !important; }
.sg-theme-dark .notif-dot.blue  { background: #e30613 !important; }
.sg-theme-dark .notif-dot.green { background: #22c55e !important; }
.sg-theme-dark .notif-dot.red   { background: #ef4444 !important; }
.sg-theme-dark .notif-dot.orange{ background: #f97316 !important; }

/* ══════════════════════════════════════════════════════════════════
   13. LAADLIJST
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .ll-wrap { background: #0b1120 !important; }
.sg-theme-dark .ll-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .ll-badge {
  background: rgba(255,255,255,.08) !important;
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   14. FINANCE / BETALING KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .finance-card,
.sg-theme-dark .payment-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .finance-amount { color: #f1f5f9 !important; }
.sg-theme-dark .finance-label  { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   15. PLANNING BOARD — PERSONEELSKAARTEN (plan-person-card-atw)
       Kaart zelf, naam, dividers, tarieven-inputs en actieknoppen
══════════════════════════════════════════════════════════════════ */

/* ── Kaart achtergrond ── */
.sg-theme-dark .plan-person-card-atw {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
.sg-theme-dark .plan-person-card-atw:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.55) !important;
}

/* ── Naam & rol tekst ── */
.sg-theme-dark .plan-person-name { color: #f1f5f9 !important; }
.sg-theme-dark .plan-person-role { /* kleur wordt inline gezet via rc — OK */ }

/* ── Week-bar track ── */
.sg-theme-dark .plan-person-week-track { background: rgba(255,255,255,.1) !important; }
.sg-theme-dark .plan-person-week-norm  { background: rgba(255,255,255,.25) !important; }

/* ── Dag-barlabels ── */
.sg-theme-dark .plan-person-dagbar-lbl { color: #64748b !important; }

/* ── Dividers (border-top/bottom op tarieven-rij en actierij) ── */
.sg-theme-dark .ppc-tarieven-row {
  border-top-color:    rgba(255,255,255,.08) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .plan-person-card-atw .plan-person-actions {
  border-top-color: rgba(255,255,255,.08) !important;
}
/* Snelknoppen-divider (inline style border-top:1px solid #f1f5f9) */
.sg-theme-dark .plan-person-card-atw [style*="border-top:1px solid #f1f5f9"] {
  border-top-color: rgba(255,255,255,.08) !important;
}

/* ── Inkoop/Verkoop input wrapper ── */
.sg-theme-dark .ppc-tarief-inputwrap {
  background: #0f1829 !important;
  border-color: rgba(255,255,255,.14) !important;
}
.sg-theme-dark .ppc-tarief-inputwrap:focus-within {
  border-color: #64748b !important;
  box-shadow: 0 0 0 2px rgba(100,116,139,.25) !important;
}
.sg-theme-dark .ppc-tarief-inputwrap--sell:focus-within {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22,163,74,.25) !important;
}

/* ── Euro-symbool achtergrond ── */
.sg-theme-dark .ppc-tarief-sym {
  background: #162032 !important;
  border-right-color: rgba(255,255,255,.08) !important;
  color: #64748b !important;
}

/* ── Invoerveld zelf ── */
.sg-theme-dark .ppc-tarief-inp {
  background: #0f1829 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .ppc-tarief-inp::placeholder { color: #475569 !important; }

/* ── /u suffix ── */
.sg-theme-dark .ppc-tarief-sfx { color: #64748b !important; }

/* ── Marge badge ── */
.sg-theme-dark .ppc-marge-badge { /* kleur wordt inline bepaald op %, bewaar die */ }

/* ── Actieknoppen onderaan de kaart ──
   Alle drie de knoppen hebben hardcoded light-mode inline stijlen.
   We overrijden ze via hun unieke inline-color hint. */

/* "Project openen" — blauw (#eff6ff / #bfdbfe / #1d4ed8) */
.sg-theme-dark .plan-person-card-atw [style*="background:#eff6ff"] {
  background: rgba(37,99,235,.18) !important;
  border-color: rgba(59,130,246,.35) !important;
  color: #93c5fd !important;
}
/* "Inplannen op voorkeur" — geel (#fef3c7 / #fde68a / #b45309) */
.sg-theme-dark .plan-person-card-atw [style*="background:#fef3c7"] {
  background: rgba(245,158,11,.16) !important;
  border-color: rgba(234,179,8,.35) !important;
  color: #fcd34d !important;
}
/* "Ziek" knop — rood (#fef2f2 / #fca5a5 / #ef4444) */
.sg-theme-dark .plan-person-card-atw [style*="background:#fef2f2"] {
  background: rgba(239,68,68,.16) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #fca5a5 !important;
}
/* Chat knop — lichtgrijs (#f8fafc / #e2e8f0 / #2563eb) */
.sg-theme-dark .plan-person-card-atw [style*="background:#f8fafc"] {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #60a5fa !important;
}

/* ── Suggestie-banner (geel verloop bovenaan kaart) ── */
.sg-theme-dark .plan-person-card-atw [style*="background:linear-gradient(90deg,#fef3c7"] {
  background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.08)) !important;
  border-bottom-color: rgba(234,179,8,.25) !important;
}

/* ── ATW warn-tags ── */
.sg-theme-dark .plan-person-warn-tag {
  background: rgba(190,18,60,.18) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.3) !important;
}
.sg-theme-dark .plan-person-warn-tag.warn {
  background: rgba(180,83,9,.18) !important;
  color: #fcd34d !important;
  border-color: rgba(234,179,8,.3) !important;
}

/* ── Alert-badges ── */
.sg-theme-dark .plan-person-alert-badge {
  background: rgba(194,65,12,.18) !important;
  color: #fdba74 !important;
  border-color: rgba(249,115,22,.3) !important;
}

/* ── ATW detail rijen ── */
.sg-theme-dark .plan-atw-detail-row {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .plan-atw-detail-row.red {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.25) !important;
}
.sg-theme-dark .plan-atw-detail-row.orange {
  background: rgba(249,115,22,.1) !important;
  border-color: rgba(249,115,22,.25) !important;
}

/* ── Rijbewijs badge (inline #dbeafe / #1d4ed8) ── */
.sg-theme-dark .plan-person-card-atw [style*="background:#dbeafe"] {
  background: rgba(37,99,235,.18) !important;
  color: #93c5fd !important;
}

/* ══════════════════════════════════════════════════════════════════
   16. UREN / HOURS SECTION
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .uren-card,
.sg-theme-dark .hour-row {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .hour-row:hover { background: rgba(255,255,255,.04) !important; }

/* ══════════════════════════════════════════════════════════════════
   16. SETTINGS PANELEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .settings-group {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .settings-item {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
.sg-theme-dark .settings-label { color: #f1f5f9 !important; }
.sg-theme-dark .settings-sub   { color: #94a3b8 !important; }

/* Toggle switches */
.sg-theme-dark .toggle-track {
  background: rgba(255,255,255,.15) !important;
}
.sg-theme-dark input:checked + .toggle-track {
  background: var(--wl-primary,#e30613) !important;
}

/* ══════════════════════════════════════════════════════════════════
   17. VAULT / KLUIS SECTIE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .vault-item {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .vault-item:hover { background: rgba(255,255,255,.06) !important; }

/* ══════════════════════════════════════════════════════════════════
   18. ELEARNING KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .elearning-card,
.sg-theme-dark .lesson-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   19. ALGEMENE BADGES / TAGS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .status-badge {
  opacity: .95;
}
/* Light pastel badges → donkere semi-transparante versies */
.sg-theme-dark .badge-blue,
.sg-theme-dark [class*="badge-blue"] {
  background: rgba(59,130,246,.2) !important;
  color: #93c5fd !important;
}
.sg-theme-dark .badge-green,
.sg-theme-dark [class*="badge-green"] {
  background: rgba(34,197,94,.18) !important;
  color: #86efac !important;
}
.sg-theme-dark .badge-red,
.sg-theme-dark [class*="badge-red"] {
  background: rgba(239,68,68,.2) !important;
  color: #fca5a5 !important;
}
.sg-theme-dark .badge-orange,
.sg-theme-dark [class*="badge-orange"] {
  background: rgba(249,115,22,.2) !important;
  color: #fdba74 !important;
}
.sg-theme-dark .badge-yellow,
.sg-theme-dark [class*="badge-yellow"] {
  background: rgba(234,179,8,.18) !important;
  color: #fde047 !important;
}
.sg-theme-dark .badge-purple,
.sg-theme-dark [class*="badge-purple"] {
  background: rgba(139,92,246,.2) !important;
  color: #c084fc !important;
}

/* ══════════════════════════════════════════════════════════════════
   20. WET / LEGAL NOTICE BOXES
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .wet,
.sg-theme-dark [class*="wet-"] {
  background: rgba(227,6,19,.08) !important;
  border-color: rgba(227,6,19,.2) !important;
  color: #f87171 !important;
}
.sg-theme-dark .wet strong { color: #fca5a5 !important; }

/* ══════════════════════════════════════════════════════════════════
   21. DOCUMENT CONTROL KAART + WERKPOSTEN KAART — dark mode
══════════════════════════════════════════════════════════════════ */

/* ── Werkposten & Planning kaart ── */
.sg-theme-dark #pdWerkPostenCard {
  background: #1a2744 !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Kop-tekst */
.sg-theme-dark #pdWerkPostenCard h3 {
  color: #e2e8f0 !important;
}
/* TEAMLEDEN tile (was #f0f9ff / blauw) */
.sg-theme-dark #pdWerkPostenContent [style*="background:#f0f9ff"] {
  background: #0c2340 !important;
}
.sg-theme-dark #pdWerkPostenContent [style*="background:#f0f9ff"] [style*="color:#0369a1"] {
  color: #38bdf8 !important;
}
/* SUBPROJECTEN tile (was #f0fdf4 / groen) */
.sg-theme-dark #pdWerkPostenContent [style*="background:#f0fdf4"] {
  background: #0a2318 !important;
}
.sg-theme-dark #pdWerkPostenContent [style*="background:#f0fdf4"] [style*="color:#15803d"] {
  color: #4ade80 !important;
}
/* UREN LOGS tile (was #fef9c3 / geel) */
.sg-theme-dark #pdWerkPostenContent [style*="background:#fef9c3"] {
  background: #2a1f04 !important;
}
.sg-theme-dark #pdWerkPostenContent [style*="background:#fef9c3"] [style*="color:#92400e"] {
  color: #fbbf24 !important;
}
/* Label-tekst onder de cijfers (TEAMLEDEN / SUBPROJECTEN / UREN LOGS) */
.sg-theme-dark #pdWerkPostenContent [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
/* Team member pills */
.sg-theme-dark #pdWerkPostenContent [style*="background:#f8fafc"] {
  background: #1e2d45 !important;
}
/* "+X meer" pill */
.sg-theme-dark #pdWerkPostenContent [style*="background:#f1f5f9"] {
  background: #1e2d45 !important;
  color: #94a3b8 !important;
}

/* ── Documentcontroles kaart ── */
.sg-theme-dark #pdDocControleCard,
.sg-theme-dark .doc-controle-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Kop-tekst (was color:#1e293b — onleesbaar in dark) */
.sg-theme-dark #pdDocControleCard h3 {
  color: #e2e8f0 !important;
}
/* Wettelijke verplichting blauwe balk (was #e0f2fe) */
.sg-theme-dark #pdDocControleCard [style*="background:#e0f2fe"] {
  background: #0c2340 !important;
  color: #93c5fd !important;
}
.sg-theme-dark #pdDocControleCard [style*="background:#e0f2fe"] strong {
  color: #bfdbfe !important;
}
.sg-theme-dark #pdDocControleCard [style*="background:#e0f2fe"] em {
  color: #7dd3fc !important;
}
.sg-theme-dark #pdDocControleCard [style*="color:#0c4a6e"] {
  color: #93c5fd !important;
}
.sg-theme-dark #pdDocControleCard [style*="color:#0369a1"] {
  color: #38bdf8 !important;
}
/* Vernieuwen knop */
.sg-theme-dark #pdDocControleCard [style*="background:#f1f5f9"] {
  background: #1e2d45 !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Lege staat dashed kader */
.sg-theme-dark #pdDocControleContainer [style*="background:#f8fafc"] {
  background: #0f1e35 !important;
  border-color: #1e3a5f !important;
}
.sg-theme-dark #pdDocControleContainer [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
.sg-theme-dark #pdDocControleContainer [style*="color:#94a3b8"] {
  color: #64748b !important;
}
.sg-theme-dark #pdDocControleContainer [style*="color:#93c5fd"] {
  color: #3b82f6 !important;
}

.sg-theme-dark .doc-status-ok    { color: #4ade80 !important; }
.sg-theme-dark .doc-status-warn  { color: #facc15 !important; }
.sg-theme-dark .doc-status-error { color: #f87171 !important; }

/* ══════════════════════════════════════════════════════════════════
   22. MODALS — algemene donkere overrides
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .modal-overlay,
.sg-theme-dark .sg-modal-overlay {
  background: rgba(0,0,0,.72) !important;
}
.sg-theme-dark .modal-body {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .modal-header {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .modal-footer {
  background: #162032 !important;
  border-top-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   23. INPUT / SELECT / TEXTAREA IN MODALS — dark mode
   Overschrijft de !important witte achtergrond uit sg-fixes.css voor
   tekst-inputs (niet datepickers — die blijven licht voor leesbaarheid).
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark .modal-body input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.sg-theme-dark .modal-body select,
html.sg-theme-dark .modal-body textarea {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sg-theme-dark .modal-body input::placeholder,
html.sg-theme-dark .modal-body textarea::placeholder {
  color: #64748b !important;
}
html.sg-theme-dark .modal-body input:focus,
html.sg-theme-dark .modal-body select:focus,
html.sg-theme-dark .modal-body textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,.18) !important;
  background: #0f1e35 !important;
}
/* Modal .modal (container) */
html.sg-theme-dark .modal {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Modal labels */
html.sg-theme-dark .modal-body label,
html.sg-theme-dark .modal-body .form-group label {
  color: #94a3b8 !important;
}

.sg-theme-dark select option {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   24. SGTimer SAVE DIALOG — dark mode
   (inline-styled wittte modal → donker)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgTimerSaveDlg > div {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgTimerSaveDlg input:not([type="date"]):not([type="time"]):not([type="file"]):not([type="color"]):not([type="number"]),
.sg-theme-dark #sgTimerSaveDlg textarea {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}
.sg-theme-dark #sgTimerSaveDlg input[type="number"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}
.sg-theme-dark #sgTimerSaveDlg select {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}
.sg-theme-dark #sgTimerSaveDlg input::placeholder,
.sg-theme-dark #sgTimerSaveDlg textarea::placeholder {
  color: #475569 !important;
}
/* Reistijd & werktijd blokken in save dialog */
.sg-theme-dark #sgDlgTravelBlock { background: #162447 !important; border-color: rgba(59,130,246,.3) !important; }
.sg-theme-dark #sgDlgWorkBlock   { background: #112a1c !important; border-color: rgba(34,197,94,.3) !important; }
.sg-theme-dark #sgDlgTravelDisplay { color: #93c5fd !important; }
.sg-theme-dark #sgDlgWorkDisplay   { color: #86efac !important; }
/* Kosten sectie in save dialog */
.sg-theme-dark #sgTimerKostenBody       { background: transparent !important; }
.sg-theme-dark #sgTimerKostenRijen > div { background: #1a2e18 !important; border-color: rgba(234,179,8,.25) !important; }
.sg-theme-dark #sgTimerKostenTotaal     { background: #102414 !important; border-color: rgba(34,197,94,.3) !important; }
/* Datum input — altijd licht (datepicker OS vereiste) */
.sg-theme-dark #sgTimerSaveDlg input[type="date"],
.sg-theme-dark #sgTimerSaveDlg input[type="time"] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(227,6,19,.3) !important;
  color-scheme: light !important;
}

/* ══════════════════════════════════════════════════════════════════
   24b. DOCUMENTCONTROLE KAART (Uren-sectie, sgPresenceCard) — dark mode
   De balk in sg-presence-control.js heeft hardcoded #e0f2fe / #0c4a6e
══════════════════════════════════════════════════════════════════ */

/* Kaart zelf */
.sg-theme-dark #sgPresenceCard {
  background: var(--card, #1e2940) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Koptekst */
.sg-theme-dark #sgPresenceCard [style*="font-weight:900"][style*="font-size:.95rem"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark #sgPresenceCard [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* Wettelijke verplichting balk (background:#e0f2fe) */
.sg-theme-dark #sgPresenceCard [style*="background:#e0f2fe"] {
  background: #0c2340 !important;
  color: #93c5fd !important;
}
.sg-theme-dark #sgPresenceCard [style*="background:#e0f2fe"] strong {
  color: #bfdbfe !important;
}
.sg-theme-dark #sgPresenceCard [style*="background:#e0f2fe"] em {
  color: #7dd3fc !important;
}
.sg-theme-dark #sgPresenceCard [style*="color:#0c4a6e"] {
  color: #93c5fd !important;
}
.sg-theme-dark #sgPresenceCard [style*="color:#0369a1"] {
  color: #38bdf8 !important;
}

/* Inspecteur-modus knop (background:#fef3c7 — geel) */
.sg-theme-dark #sgPresenceCard [style*="background:#fef3c7"],
.sg-theme-dark #sgPresenceCard [style*="background:#fde68a"] {
  background: #2a1f04 !important;
  color: #fbbf24 !important;
  border-color: #92400e !important;
}

/* Rooster knop (background:#f5f3ff — paars) */
.sg-theme-dark #sgPresenceCard [style*="background:#f5f3ff"],
.sg-theme-dark #sgPresenceCard [style*="background:#ede9fe"] {
  background: #1e1433 !important;
  color: #a78bfa !important;
  border-color: #6d28d9 !important;
}

/* Labels "Project selecteren" / "Datum" */
.sg-theme-dark #sgPresenceCard label[style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* ── Fix189: Project bewerken modal — dark mode inputs zwart-op-zwart fix ── */
html.sg-theme-dark #sgEditProjectModal > div,
html.sg-theme-dark #sgEditProjectModal .sg-modal-inner {
  background: #161b2e !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark #sgEditProjectModal input:not([type="date"]):not([type="time"]):not([type="checkbox"]):not([type="radio"]),
html.sg-theme-dark #sgEditProjectModal select,
html.sg-theme-dark #sgEditProjectModal textarea {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sg-theme-dark #sgEditProjectModal input[type="date"],
html.sg-theme-dark #sgEditProjectModal input[type="time"] {
  background: #1e2940 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
  color-scheme: dark;
}
html.sg-theme-dark #sgEditProjectModal input::placeholder,
html.sg-theme-dark #sgEditProjectModal textarea::placeholder {
  color: #64748b !important;
}
html.sg-theme-dark #sgEditProjectModal input:focus,
html.sg-theme-dark #sgEditProjectModal select:focus,
html.sg-theme-dark #sgEditProjectModal textarea:focus {
  border-color: #e30613 !important;
  background: #0f1e35 !important;
}
html.sg-theme-dark #sgEditProjectModal label,
html.sg-theme-dark #sgEditProjectModal [style*="color:var(--text-light)"],
html.sg-theme-dark #sgEditProjectModal [style*="color:var(--text-light,"] {
  color: #94a3b8 !important;
}
html.sg-theme-dark #sgEditProjectModal [style*="color:var(--text)"],
html.sg-theme-dark #sgEditProjectModal [style*="color:var(--text,"] {
  color: #e2e8f0 !important;
}
html.sg-theme-dark #sgEditProjectModal [style*="border-bottom:1px solid var(--border)"],
html.sg-theme-dark #sgEditProjectModal [style*="border-bottom: 1px solid var(--border)"] {
  border-bottom-color: rgba(255,255,255,.1) !important;
}
/* Opties dropdown (status, kaartkleur) */
html.sg-theme-dark #sgEditProjectModal option {
  background: #1e2940;
  color: #e2e8f0;
}
/* Locatie suggesties dropdown */
html.sg-theme-dark #epLocationList {
  background: #161b2e !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.sg-theme-dark #epLocationList div {
  color: #e2e8f0 !important;
}
html.sg-theme-dark #epLocationList div:hover {
  background: #1e2940 !important;
}

/* ── SGTimer GPS-keuze modal — dark mode ── */
.sg-theme-dark #sgGpsKeuzeModal > div {
  background: #1e2940 !important;
}
.sg-theme-dark #sgGpsKeuzeModal [style*="border:2px solid"] {
  background: #1a2744 !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark #sgGpsKeuzeModal [style*="color:var(--text"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark #sgGpsKeuzeModal [style*="color:var(--text-light"] {
  color: #94a3b8 !important;
}

/* ── SGTimer project-picker bottom sheet — dark mode ── */
.sg-theme-dark #sgTimerProjectPicker > div {
  background: #1e2940 !important;
}
.sg-theme-dark #sgTimerProjectPicker [style*="border-bottom:1px solid #f1f5f9"] {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark #sgTimerProjectPicker [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
/* Project knoppen in de lijst */
.sg-theme-dark #sgTimerProjectPicker button[style*="background:var(--card"] {
  background: #1a2744 !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Project naam tekst (hardcoded #1e293b) */
.sg-theme-dark #sgTimerProjectPicker [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}
/* Locatie/type badge (#eff6ff blauw) */
.sg-theme-dark #sgTimerProjectPicker [style*="background:#eff6ff"] {
  background: #0c2340 !important;
  color: #60a5fa !important;
}
/* "Geen specifiek project" knop (background:#f8fafc dashed) */
.sg-theme-dark #sgTimerProjectPicker [style*="background:#f8fafc"] {
  background: #0f1e35 !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Sluit knop (background:#f1f5f9) */
.sg-theme-dark #sgTimerProjectPicker [style*="background:#f1f5f9"] {
  background: #2a3a52 !important;
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   25. SGTimer WIDGET PANEL — dark mode (paneel rechts)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgTimerPanel {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
}
.sg-theme-dark #sgTimerPanel .sgt-header {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark #sgTimerPanel .sgt-chips  { background: #1e2940 !important; }
.sg-theme-dark #sgTimerPanel .sgt-chip   {
  background: #162032 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark #sgTimerPanel .sgt-chip-val { color: #f1f5f9 !important; }
.sg-theme-dark #sgTimerPanel .sgt-actions  { background: #1e2940 !important; }
.sg-theme-dark #sgTimerPanel .sgt-gps-hint { background: #1e2940 !important; color: #64748b !important; }

/* Actiebnoppen in donker panel */
.sg-theme-dark #sgTimerPanel .sgt-btn[style*="background:#f1f5f9"] {
  background: rgba(255,255,255,.08) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark #sgTimerPanel .sgt-btn[style*="background:#fef9c3"] {
  background: rgba(234,179,8,.18) !important;
  color: #fde047 !important;
}
.sg-theme-dark #sgTimerPanel .sgt-btn[style*="background:#fee2e2"] {
  background: rgba(239,68,68,.18) !important;
  color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   26. ROUTE PLANNER MODAL — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgRoutePlannerModal > div {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgRoutePlannerModal input[type="text"],
.sg-theme-dark #sgRoutePlannerModal input[type="date"],
.sg-theme-dark #sgRoutePlannerModal select {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #sgRoutePlannerModal input[type="date"] {
  color-scheme: light !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}
/* Stop rijen */
.sg-theme-dark #sgRpStopsList > div > input[type="text"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
}
/* Footer van route planner */
.sg-theme-dark #sgRoutePlannerModal [style*="border-top:1px solid #f1f5f9"] {
  border-top-color: rgba(255,255,255,.08) !important;
  background: #162032 !important;
}
/* Carpool sectie */
.sg-theme-dark #sgRoutePlannerModal [style*="background:#f0fdf4"] {
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.25) !important;
}
/* Route resultaat is al donker (gradient) — geen override nodig */

/* ══════════════════════════════════════════════════════════════════
   27. GPS KEUZE MODAL — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgGpsKeuzeModal > div {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgGpsKeuzeModal [style*="background:#f0f9ff"],
.sg-theme-dark #sgGpsKeuzeModal [style*="background:#eff6ff"] {
  background: rgba(227,6,19,.1) !important;
  border-color: rgba(227,6,19,.2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   28. PLANNING TABS — dark mode (planning-mode-tabs)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .planning-mode-tabs {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark .plan-tab {
  color: #64748b !important;
  border-bottom-color: transparent !important;
}
.sg-theme-dark .plan-tab.active {
  color: var(--wl-primary, #e30613) !important;
  border-bottom-color: var(--wl-primary, #e30613) !important;
}
.sg-theme-dark .plan-tab:hover:not(.active) { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   29. DATE/TIME INPUT PICKERS — altijd licht (kleurschema)
   Datepickers zijn het meest leesbaar in light mode — forceer dit.
══════════════════════════════════════════════════════════════════ */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: light !important;
  accent-color: #e30613 !important;
}
/* Maar in light mode gewoon mee met het thema */
:root:not(.sg-theme-dark) input[type="date"],
:root:not(.sg-theme-dark) input[type="time"],
:root:not(.sg-theme-dark) input[type="datetime-local"] {
  color-scheme: light !important;
  background: #fff !important;
  color: #0f172a !important;
}
/* In dark mode: wit venster voor de picker */
.sg-theme-dark input[type="date"],
.sg-theme-dark input[type="time"],
.sg-theme-dark input[type="datetime-local"],
.sg-theme-dark input[type="month"],
.sg-theme-dark input[type="week"] {
  color-scheme: light !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* ══════════════════════════════════════════════════════════════════
   30. INLINE TIMER BAR (op de tijden sectie pagina)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .tir-main {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .tir-detail { color: #94a3b8 !important; }
.sg-theme-dark .tir-verkeer { color: #64748b !important; }
/* Reistijd-balk gradient */
.sg-theme-dark #timerStarttijdRow {
  background: #162032 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark #timerStarttijdInput {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #timerStarttijdReset {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   31. DASHBOARD SHIFTS WIDGET (sg-timer-alarm)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #dashShiftsVandaag {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark #dashShiftsLijst > div {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
/* Alarm-chip in shifts */
.sg-theme-dark [class*="alarm-chip"],
.sg-theme-dark [id*="alarmChip"] {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.25) !important;
}

/* ══════════════════════════════════════════════════════════════════
   32. ADMIN THEMA PANEEL — thema-neutraal (gebruikt CSS vars)
══════════════════════════════════════════════════════════════════ */
/* Het admin thema paneel gebruikt al CSS vars — alleen selects/inputs fixen */
.sg-theme-dark #sgAdminThemaPanel select {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #sgAdminThemaPanel details {
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark #sgAdminThemaPanel summary { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   33. TOPBAR THEME TOGGLE — correcte kleuren licht/donker
══════════════════════════════════════════════════════════════════ */
/* Maan/Zon-knop per thema — sg-whitelabel-reset.css is leidend */
:root:not(.sg-theme-dark) #topbarThemeBtn {
  color: #fbbf24 !important;
  background: rgba(251,191,36,.18) !important;
  border: 2px solid rgba(251,191,36,.55) !important;
}
.sg-theme-dark #topbarThemeBtn {
  color: #ffffff !important;
  background: rgba(255,255,255,.12) !important;
  border: 2px solid rgba(255,255,255,.35) !important;
}
.sg-theme-dark #topbarThemeIcon { color: #ffffff !important; }
/* Zorg dat er maar 1 thema-toggle zichtbaar is */
[data-theme-toggle]:not(#topbarThemeBtn) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   34. ALGEMENE INPUT/SELECT DARK MODE (buiten modals)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]) {
  background-color: #0f1e35;
  color: #e2e8f0;
  border-color: rgba(255,255,255,.14);
}
.sg-theme-dark input::placeholder { color: #475569 !important; }
.sg-theme-dark select:not([class*="sg-light"]) {
  background-color: #0f1e35;
  color: #e2e8f0;
  border-color: rgba(255,255,255,.14);
}
.sg-theme-dark textarea:not([class*="sg-light"]) {
  background-color: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
/* Voorkomen dark-op-dark in form inputs die al wit zijn gestyled */
.sg-theme-dark .sg-input-light,
.sg-theme-dark input.sg-input-light,
.sg-theme-dark select.sg-input-light {
  background: #f8fafc !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

/* ══════════════════════════════════════════════════════════════════
   35. PROGRESS BARS — whitelabel kleur + dark achtergrond
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .progress-bar,
.sg-theme-dark [class*="progress-track"],
.sg-theme-dark [class*="voortgang-track"] {
  background: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .progress-fill,
.sg-theme-dark [class*="progress-fill"],
.sg-theme-dark [class*="voortgang-fill"] {
  background: var(--wl-primary, #e30613) !important;
}
/* Timer progress bars */
.sg-theme-dark .sgt-travel-bar { background: rgba(59,130,246,.15) !important; }
.sg-theme-dark .sgt-work-bar   { background: rgba(34,197,94,.15) !important; }

/* ══════════════════════════════════════════════════════════════════
   36. WAGENPARK / MACHINEPARK KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .voertuig-card,
.sg-theme-dark .machine-card,
.sg-theme-dark .vehicle-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .voertuig-card:hover,
.sg-theme-dark .machine-card:hover { background: #253355 !important; }

/* ══════════════════════════════════════════════════════════════════
   37. KLANTPORTAAL / ZZP KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .klant-card,
.sg-theme-dark .zzp-card,
.sg-theme-dark .portaal-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   38. MAANDOVERZICHT CELLEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .maand-dag-cel,
.sg-theme-dark .month-cell,
.sg-theme-dark [class*="maand-cel"] {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .maand-dag-cel.vandaag,
.sg-theme-dark .month-cell.today {
  background: rgba(var(--wl-primary-rgb, 227,6,19),.12) !important;
  border-color: var(--wl-primary, #e30613) !important;
}
.sg-theme-dark .maand-dag-cel.heeft-event { color: #f1f5f9 !important; }

/* ══════════════════════════════════════════════════════════════════
   39. INLINE HARDCODED BACKGROUNDS (extra vangnet v2)
   Extra kleurwaarden die in v1 gemist worden
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:#fafafa"],
.sg-theme-dark [style*="background: #fafafa"] {
  background: #1a2336 !important;
}
.sg-theme-dark [style*="background:#f5f5f5"],
.sg-theme-dark [style*="background: #f5f5f5"] {
  background: #1a2336 !important;
}
.sg-theme-dark [style*="background:#eef2ff"] {
  background: rgba(99,102,241,.12) !important;
}
.sg-theme-dark [style*="background:#fce7f3"],
.sg-theme-dark [style*="background: #fce7f3"] {
  background: rgba(219,39,119,.12) !important;
}
/* Hardcoded lichte tekst op donkere achtergrond — al goed, geen filter nodig */
.sg-theme-dark [style*="color:#94a3b8"],
.sg-theme-dark [style*="color:#64748b"] {
  /* subduede tekst is al neutraal genoeg */
}
/* Hardcoded witte tekst op kleur-achtergrond — al goed */
.sg-theme-dark [style*="color:white"],
.sg-theme-dark [style*="color:#fff;"],
.sg-theme-dark [style*="color:#ffffff"] {
  /* laat wit staan — staat op gekleurde knop/gradient */
}

/* ══════════════════════════════════════════════════════════════════
   40. SCHADUWEN IN DARK MODE — minder intens
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="box-shadow:0 24px 64px rgba(0,0,0,.35)"],
.sg-theme-dark [style*="box-shadow: 0 24px 64px rgba(0,0,0,.35)"] {
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
.sg-theme-dark [style*="box-shadow:0 4px 16px rgba(29,78,216,.3)"] {
  box-shadow: 0 4px 16px rgba(29,78,216,.5) !important;
}


/* ══════════════════════════════════════════════════════════════════
   24. KLANT PORTAAL
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .klantportaal-card,
.sg-theme-dark .kp-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .kp-tab {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .kp-tab.active {
  background: var(--wl-primary,#e30613) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   25. COMPLIANCE / ALERTS BAR
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .compliance-alert-bar {
  background: rgba(239,68,68,.15) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   26. MARKTPLAATS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .marktplaats-item,
.sg-theme-dark .mp-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .mp-tag {
  background: rgba(255,255,255,.08) !important;
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   27. SCHOON AI / INFOBOT
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .ai-bubble,
.sg-theme-dark .bot-bubble {
  background: #162032 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .ai-input-wrap {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   28. GPS TRACKER
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .gpt-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .gpt-filter-chips .gpt-chip {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .gpt-filter-chips .gpt-chip.active {
  background: rgba(59,130,246,.25) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.4) !important;
}

/* ══════════════════════════════════════════════════════════════════
   29. WEEK DAGBALKEN in project kaart en planning board
       Inactive dagen gebruiken #e2e8f0 (lichtgrijs) — onzichtbaar
       op donker. Vangnet via inline-stijl selector.
══════════════════════════════════════════════════════════════════ */

/* Inline dag-balk: lege dag = #e2e8f0 → donker */
.sg-theme-dark [style*="background:#e2e8f0"] {
  background: rgba(255,255,255,.1) !important;
}
/* Planning week-overzicht lege dag-cellen */
.sg-theme-dark [style*="background:#f1f5f9"][style*="border-radius"],
.sg-theme-dark [style*="background:#f8fafc"][style*="border-radius:8px"] {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Progress track voor ATW bars */
.sg-theme-dark [style*="background:#e2e8f0"][style*="border-radius:5px"] {
  background: rgba(255,255,255,.1) !important;
}
/* Legenda dot 'Vrij' (lichtgrijs) */
.sg-theme-dark .plan-atw-leg-dot[style*="background:#e2e8f0"] {
  background: rgba(255,255,255,.2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   30. TIMER GPS-KEUZE MODAL — optie-kaarten (inline stijlen)
       background:#fef2f2 (GPS icon), #f0fdf4/#eff6ff/#f5f3ff (badges),
       #f8fafc (handmatig icon + AVG note), #fefce8 (waarschuwing badges)
══════════════════════════════════════════════════════════════════ */

/* Optie-kaarten container (var(--card,#fff) gebruikt al CSS var — OK) */

/* GPS icoon blokje (rood) */
.sg-theme-dark #sgGpsOptAuto [style*="background:#fef2f2"],
.sg-theme-dark #sgGpsKeuzeModal [style*="background:#fef2f2"] {
  background: rgba(239,68,68,.16) !important;
}
/* Handmatig icoon blokje (grijs) */
.sg-theme-dark #sgGpsOptHandmatig [style*="background:#f8fafc"],
.sg-theme-dark #sgGpsKeuzeModal [style*="background:#f8fafc"] {
  background: rgba(255,255,255,.07) !important;
}
/* AVG note (grijs vlak onderaan) */
.sg-theme-dark [id^="sgGpsOpt"] ~ [style*="background:#f8fafc"],
.sg-theme-dark #sgTimerGpsModal [style*="background:#f8fafc"] {
  background: rgba(255,255,255,.05) !important;
}
/* Feature badges — groen: #f0fdf4 */
.sg-theme-dark [style*="background:#f0fdf4"][style*="color:#166534"] {
  background: rgba(22,163,74,.15) !important;
  color: #86efac !important;
}
/* Feature badges — blauw: #eff6ff */
.sg-theme-dark [style*="background:#eff6ff"][style*="color:#1d4ed8"] {
  background: rgba(37,99,235,.18) !important;
  color: #93c5fd !important;
}
/* Feature badges — paars: #f5f3ff */
.sg-theme-dark [style*="background:#f5f3ff"][style*="color:#5b21b6"] {
  background: rgba(109,40,217,.18) !important;
  color: #c4b5fd !important;
}
/* Waarschuwing badges — geel: #fefce8 */
.sg-theme-dark [style*="background:#fefce8"][style*="color:#854d0e"] {
  background: rgba(180,83,9,.16) !important;
  color: #fcd34d !important;
}
/* Tekst kleuren in timer modals */
.sg-theme-dark #sgGpsOptAuto    [style*="color:#1e293b"],
.sg-theme-dark #sgGpsOptHandmatig [style*="color:#374151"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgGpsOptHandmatig [style*="color:#374151"] {
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   31. TEAM AGENDA PANEL — dark mode
       .ta-act-btn, .ta-nav-arrow, .ta-week-strip dag-knoppen,
       .ta-resource-bar, .ta-card, .ta-dag-card, .ta-search-wrap
══════════════════════════════════════════════════════════════════ */

/* Actie-knoppen (copy, edit, delete) */
.sg-theme-dark .ta-act-btn {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .ta-act-ghost {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .ta-act-btn:hover { filter: brightness(1.2) !important; }

/* Week navigatie pijlen */
.sg-theme-dark .ta-nav-arrow {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #64748b !important;
}
.sg-theme-dark .ta-nav-arrow:hover {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Week dag-knoppen */
.sg-theme-dark .ta-week-strip .plan-day-btn {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #64748b !important;
}
.sg-theme-dark .ta-week-strip .plan-day-btn-name { color: #64748b !important; }
.sg-theme-dark .ta-week-strip .plan-day-btn-num  { color: #cbd5e1 !important; }
.sg-theme-dark .ta-week-strip .plan-day-btn.today {
  background: rgba(227,6,19,.12) !important;
  border-color: rgba(227,6,19,.3) !important;
}
.sg-theme-dark .ta-week-strip .plan-day-btn.weekend {
  background: rgba(249,115,22,.06) !important;
}
.sg-theme-dark .ta-week-strip .plan-day-btn.selected .plan-day-btn-name,
.sg-theme-dark .ta-week-strip .plan-day-btn.selected .plan-day-btn-num,
.sg-theme-dark .tp-week-strip .plan-day-btn.selected .plan-day-btn-name,
.sg-theme-dark .tp-week-strip .plan-day-btn.selected .plan-day-btn-num {
  color: #f1f5f9 !important;
}
.sg-theme-dark .ta-week-strip .plan-day-btn:hover:not(.selected) {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* View toggle balk */
.sg-theme-dark .ta-view-bar {
  border-top-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark .ta-view-btn:hover:not(.active) {
  background: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
}

/* Resource tab balk */
.sg-theme-dark .ta-resource-bar {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .ta-res-tab {
  color: #64748b !important;
}
.sg-theme-dark .ta-res-tab:hover:not(.active) {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .ta-res-tab.active {
  color: var(--wl-primary, #e30613) !important;
}

/* Sectielabels */
.sg-theme-dark .ta-section-label { color: #64748b !important; }

/* Kaarten */
.sg-theme-dark .ta-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .ta-dag-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .ta-dag-card-hdr {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark .ta-dag-card-title { color: #f1f5f9 !important; }
.sg-theme-dark .ta-dag-card-sub   { color: #64748b !important; }

/* Zoekbalk */
.sg-theme-dark .ta-search-wrap input {
  background: #0f1829 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .ta-search-wrap input:focus {
  background: #0f1829 !important;
  border-color: var(--wl-primary, #e30613) !important;
}
.sg-theme-dark .ta-search-wrap i { color: #475569 !important; }

/* ══════════════════════════════════════════════════════════════════
   32. PLANNING BOARD — WEEK VIEW dag-knoppen + lege staat
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .plan-dag-btn,
.sg-theme-dark .dag-btn {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #64748b !important;
}
.sg-theme-dark .plan-dag-btn.selected,
.sg-theme-dark .dag-btn.active {
  background: rgba(227,6,19,.15) !important;
  border-color: rgba(227,6,19,.4) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .plan-empty {
  color: #475569 !important;
}
.sg-theme-dark .plan-empty i { color: #334155 !important; }

/* ══════════════════════════════════════════════════════════════════
   33. INLINE PASTEL KLEUREN — brede vangnet voor alle resterende
       light-mode inline stijlen (buiten specifieke modals)
══════════════════════════════════════════════════════════════════ */

/* Groen pastel (#f0fdf4, #dcfce7) buiten GPS modal */
.sg-theme-dark [style*="background:#dcfce7"] {
  background: rgba(22,163,74,.14) !important;
}
/* Paars pastel (#f5f3ff, #ede9fe) */
.sg-theme-dark [style*="background:#f5f3ff"],
.sg-theme-dark [style*="background: #f5f3ff"] {
  background: rgba(109,40,217,.14) !important;
}
.sg-theme-dark [style*="background:#ede9fe"],
.sg-theme-dark [style*="background: #ede9fe"] {
  background: rgba(109,40,217,.14) !important;
}
/* Roos/roze pastel (#fdf2f8, #fce7f3) */
.sg-theme-dark [style*="background:#fdf2f8"],
.sg-theme-dark [style*="background:#fce7f3"] {
  background: rgba(219,39,119,.12) !important;
}
/* Cyaan pastel (#ecfeff, #cffafe) */
.sg-theme-dark [style*="background:#ecfeff"],
.sg-theme-dark [style*="background:#cffafe"] {
  background: rgba(6,182,212,.12) !important;
}
/* Indigo pastel (#eef2ff, #e0e7ff) */
.sg-theme-dark [style*="background:#eef2ff"],
.sg-theme-dark [style*="background:#e0e7ff"] {
  background: rgba(99,102,241,.14) !important;
}

/* Hardcoded donkere tekst in inline gegenereerde elementen */
.sg-theme-dark [style*="color:#854d0e"] { color: #fcd34d !important; }
.sg-theme-dark [style*="color:#166534"] { color: #86efac !important; }
.sg-theme-dark [style*="color:#5b21b6"] { color: #c4b5fd !important; }
.sg-theme-dark [style*="color:#1e40af"] { color: #93c5fd !important; }
.sg-theme-dark [style*="color:#92400e"] { color: #fcd34d !important; }
.sg-theme-dark [style*="color:#065f46"] { color: #6ee7b7 !important; }
.sg-theme-dark [style*="color:#1e3a5f"] { color: #93c5fd !important; }
.sg-theme-dark [style*="color:#7c2d12"] { color: #fdba74 !important; }
.sg-theme-dark [style*="color:#4c1d95"] { color: #c4b5fd !important; }

/* ══════════════════════════════════════════════════════════════════
   34. BESCHIKBAARHEID LEGENDA — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .besch-legenda-item { color: #94a3b8 !important; }
.sg-theme-dark .besch-dag-cel {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .besch-dag-cel.beschikbaar { background: rgba(34,197,94,.14) !important; }
.sg-theme-dark .besch-dag-cel.niet-beschikbaar { background: rgba(239,68,68,.14) !important; }
.sg-theme-dark .besch-dag-cel.voorkeur { background: rgba(59,130,246,.14) !important; }

/* ══════════════════════════════════════════════════════════════════
   35. VERLOF AANVRAAG KAARTEN — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .verlof-card,
.sg-theme-dark .verlof-aanvraag-item {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .verlof-type-chip {
  /* kleur is inline — wordt al afgevangen door pastel vangnet */
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════
   36. NOTITIES & MAIL — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .notitie-card,
.sg-theme-dark .mail-item,
.sg-theme-dark .sg-mail-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .notitie-card:hover,
.sg-theme-dark .mail-item:hover { background: #1e2940 !important; }
.sg-theme-dark .mail-unread {
  background: rgba(227,6,19,.08) !important;
  border-left-color: var(--wl-primary, #e30613) !important;
}

/* ══════════════════════════════════════════════════════════════════
   37. CONTRACTEN KAARTEN — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .contract-card,
.sg-theme-dark .sg-contract-item {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .contract-card:hover { background: #1e2940 !important; }

/* Contract status labels (inline kleur wordt al afgevangen) */
.sg-theme-dark .contract-status-signed  { color: #86efac !important; }
.sg-theme-dark .contract-status-concept { color: #fcd34d !important; }
.sg-theme-dark .contract-status-expired { color: #fca5a5 !important; }

/* ══════════════════════════════════════════════════════════════════
   38. LOONSTROOK KAARTEN — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .loonstrook-card,
.sg-theme-dark .ls-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .ls-totaal-row {
  background: rgba(255,255,255,.04) !important;
  border-top-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   39. OFFLINE / ERROR STATES — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .offline-banner {
  background: rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #fcd34d !important;
}
.sg-theme-dark .error-state,
.sg-theme-dark .empty-state {
  color: #475569 !important;
}
.sg-theme-dark .error-state i,
.sg-theme-dark .empty-state i { color: #334155 !important; }

/* ══════════════════════════════════════════════════════════════════
   30. ADMIN COMMAND CENTRE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .admin-tile,
.sg-theme-dark .cmd-tile {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .admin-tile:hover,
.sg-theme-dark .cmd-tile:hover {
  background: #253355 !important;
}

/* ══════════════════════════════════════════════════════════════════
   31. PLANNING BOARD — extra fixes
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .plan-filter-chip {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .plan-filter-chip.active {
  background: rgba(59,130,246,.25) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.4) !important;
}
.sg-theme-dark .tp-project-card,
.sg-theme-dark .plan-project-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   33. MARKTPLAATS — tabs, kaarten, inputs
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgMarktplaatsWrap,
.sg-theme-dark #sgMarktplaats,
.sg-theme-dark [id*="marktplaats"] {
  background: var(--sg-bg, #0b1120) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark [id*="mktReactieTarief"],
.sg-theme-dark [id*="mktReactieToelichting"] {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   34. ACCOUNTS & ABONNEMENT
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sec-accounts,
.sg-theme-dark #accountsContent {
  background: var(--sg-bg, #0b1120) !important;
}
.sg-theme-dark .account-plan-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Tab switcher (Mijn account / Abonnement / etc.) */
.sg-theme-dark .acc-tab-btn {
  background: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .acc-tab-btn.active {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   35. ABONNEMENT / SUBSCRIPTION KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sub-plan-card,
.sg-theme-dark [id*="subPlan"],
.sg-theme-dark [id*="subscriptionCard"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .sub-feature-item { color: #cbd5e1 !important; }
.sg-theme-dark .sub-price { color: #f1f5f9 !important; }

/* ══════════════════════════════════════════════════════════════════
   FIX D2-A: SG CREDITS — credit-widget & bundel-kaarten (inline #fff/#111)
══════════════════════════════════════════════════════════════════ */
/* Credit bundel aankoop card */
.sg-theme-dark [style*="background:#fff;border:2px solid #e30613"] {
  background: #1e2940 !important;
  border-color: #e30613 !important;
}
/* Bundel prijs-label en naam */
.sg-theme-dark [style*="color:#111"] {
  color: #f1f5f9 !important;
}
/* Betaalformulier inputs (background:#fff;color:#111) */
.sg-theme-dark [style*="background:#fff;color:#111"],
.sg-theme-dark [style*="background: #fff; color: #111"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
/* Plan-kaarten in credits widget */
.sg-theme-dark [style*="background:#fff;cursor:pointer"] {
  background: #1e2940 !important;
}
/* Bundel achtergrond row (background:#fafafa;border:...) */
.sg-theme-dark [style*="background:#fafafa;border:1px solid #f0f0f0"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.07) !important;
}
/* Prijs-tekst (#666 subtext) in credits */
.sg-theme-dark [style*="color:#666"] {
  color: #64748b !important;
}
/* Credit saldo groen blok (background:#f0fdf4) */
.sg-theme-dark [style*="background:#f0fdf4;border-bottom:1px solid #bbf7d0"] {
  background: rgba(34,197,94,.1) !important;
  border-bottom-color: rgba(34,197,94,.2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX D2-B: SG E-LEARNING — cursuskaarten en modals (inline background:white)
══════════════════════════════════════════════════════════════════ */
/* Zoekbalk container */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:10px"] {
  background: #0f1e35 !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Cursuskaart */
.sg-theme-dark [style*="background:white;border-radius:16px;border:1.5px solid #e2e8f0;overflow:hidden;cursor:pointer"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Voortgang track (witte balk) */
.sg-theme-dark [style*="background:white;border-radius:10px;overflow:hidden"] {
  background: rgba(255,255,255,.08) !important;
}
/* Les-rij */
.sg-theme-dark [style*="background:white;border-radius:14px;border:1.5px solid"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Certificaat label */
.sg-theme-dark [style*="background:white;border:1px solid #bbf7d0"] {
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.25) !important;
  color: #4ade80 !important;
}
/* Duur/les-count badges */
.sg-theme-dark [style*="background:white;border:1px solid #e2e8f0"] {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
/* Quiz opties (background:white met border:1.5px solid transparent) */
.sg-theme-dark [style*="background:white"][style*="border:1.5px solid transparent"] {
  background: #162032 !important;
  color: #e2e8f0 !important;
}
/* Cursus-detail panel */
.sg-theme-dark [style*="background:white;border-radius:16px;border:1.5px solid #e2e8f0;overflow:hidden"][style*="display:flex"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* E-learning modal bottomsheet */
.sg-theme-dark [style*="background:white;border-radius:24px 24px 0 0"] {
  background: var(--sg-card, #1e2940) !important;
}
/* Categorie filter button (actief: background:white) */
.sg-theme-dark [style*="background:white;color:#e30613"] {
  background: rgba(227,6,19,.15) !important;
  border-color: rgba(227,6,19,.4) !important;
  color: #f87171 !important;
}

/* ══════════════════════════════════════════════════════════════════
   36. TIMER MODALS & SHEETS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgTimerModal,
.sg-theme-dark #timerModal,
.sg-theme-dark [id*="Timer"][id*="Modal"],
.sg-theme-dark [id*="timer"][id*="modal"],
.sg-theme-dark [id*="timer"][id*="sheet"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   37. VERLOF / ZIEKMELDING / TVT SHEETS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="verlof"][id*="modal"],
.sg-theme-dark [id*="verlof"][id*="sheet"],
.sg-theme-dark [id*="ziek"][id*="modal"],
.sg-theme-dark [id*="ziek"][id*="sheet"],
.sg-theme-dark [id*="tvt"][id*="modal"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   38. ACCOUNT BEHEER DASHBOARD — altijd wit paneel (thema-neutraal)
   Reden: het paneel is een bottom-sheet met eigen lichte stijl.
   De dark-mode generieke selectors (.panel, [style*="background:#fff"])
   maakten het paneel donker terwijl de tekst ook donker bleef → zwart.
   Oplossing: forceer het paneel, tabs en kaarten naar lichte kleuren,
   ongeacht het actieve thema.
══════════════════════════════════════════════════════════════════ */

/* Hoofd-paneel: altijd wit */
html.sg-theme-dark #sgAcbPanel {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Tab-balk: lichtgrijs */
html.sg-theme-dark #sgAcbPanel .acb-tab-bar {
  background: #fafafa !important;
  border-bottom-color: #f1f5f9 !important;
}

/* Tabs: donkergrijze tekst, rode actieve kleur */
html.sg-theme-dark #sgAcbPanel .acb-tab {
  color: #64748b !important;
  background: none !important;
}
html.sg-theme-dark #sgAcbPanel .acb-tab.actief {
  color: #e30613 !important;
  border-bottom-color: #e30613 !important;
}
html.sg-theme-dark #sgAcbPanel .acb-tab:hover {
  color: #1e293b !important;
}

/* Inhoudsgebied: wit */
html.sg-theme-dark #sgAcbPanel .acb-content {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Account-kaarten */
html.sg-theme-dark #sgAcbPanel .acb-account-kaart {
  background: #fafafa !important;
  border-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html.sg-theme-dark #sgAcbPanel .acb-account-kaart:hover {
  border-color: #e2e8f0 !important;
}

/* Stat blokken */
html.sg-theme-dark #sgAcbPanel .acb-stat {
  background: #f8fafc !important;
  color: #0f172a !important;
}
html.sg-theme-dark #sgAcbPanel .acb-stat-num { color: #1e293b !important; }
html.sg-theme-dark #sgAcbPanel .acb-stat-lbl { color: #94a3b8 !important; }

/* Groep-kopjes */
html.sg-theme-dark #sgAcbPanel .acb-groep-kop { color: #94a3b8 !important; }

/* Lege staat */
html.sg-theme-dark #sgAcbPanel .acb-leeg { color: #94a3b8 !important; }

/* Toestemming slot */
html.sg-theme-dark #sgAcbPanel .acb-toest-slot {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #0f172a !important;
}

/* Privacy banner */
html.sg-theme-dark #sgAcbPanel .acb-privbanner {
  background: linear-gradient(135deg,#fef2f2,#fff5f5) !important;
  border-color: #fecaca !important;
  color: #0f172a !important;
}

/* Inputs in het paneel */
html.sg-theme-dark #sgAcbPanel .acb-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html.sg-theme-dark #sgAcbPanel .acb-input:focus {
  border-color: #e30613 !important;
}

/* Alle tekst in het paneel: altijd donker leesbaar */
html.sg-theme-dark #sgAcbPanel [style*="color:#1e293b"],
html.sg-theme-dark #sgAcbPanel [style*="color: #1e293b"] {
  color: #1e293b !important;
}
html.sg-theme-dark #sgAcbPanel [style*="color:#0f172a"],
html.sg-theme-dark #sgAcbPanel [style*="color: #0f172a"] {
  color: #0f172a !important;
}
html.sg-theme-dark #sgAcbPanel [style*="color:#475569"],
html.sg-theme-dark #sgAcbPanel [style*="color: #475569"] {
  color: #475569 !important;
}
html.sg-theme-dark #sgAcbPanel [style*="color:#64748b"],
html.sg-theme-dark #sgAcbPanel [style*="color: #64748b"] {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — BOTTOM-SHEETS & MODALS (background:white + border-radius)
   De meeste JS-modules bouwen modals als:
   <div style="background:white;border-radius:22px 22px 0 0;…">
   Dit vangnet pakt alle bottom-sheet modals op.
══════════════════════════════════════════════════════════════════ */

/* Bottom-sheet (border-radius: …22px 0 0 of 22px 22px 0 0) */
.sg-theme-dark [style*="background:white;border-radius:22px 22px 0 0"],
.sg-theme-dark [style*="background:#fff;border-radius:22px 22px 0 0"],
.sg-theme-dark [style*="background:white;border-radius:20px 20px 0 0"],
.sg-theme-dark [style*="background:#fff;border-radius:20px 20px 0 0"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* Ronde modals (border-radius: 22px of 20px, volledig) */
.sg-theme-dark [style*="background:white;border-radius:22px"],
.sg-theme-dark [style*="background:#fff;border-radius:22px"],
.sg-theme-dark [style*="background:white;border-radius:20px"],
.sg-theme-dark [style*="background:#fff;border-radius:20px"],
.sg-theme-dark [style*="background:white;border-radius:18px"],
.sg-theme-dark [style*="background:#fff;border-radius:18px"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* Sticky header binnen bottom-sheets (border-bottom) */
.sg-theme-dark [style*="border-bottom:1.5px solid #f1f5f9;position:sticky"],
.sg-theme-dark [style*="border-bottom: 1.5px solid #f1f5f9;position:sticky"] {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* Footer van bottom-sheets */
.sg-theme-dark [style*="border-top:1.5px solid #f1f5f9;background:white"],
.sg-theme-dark [style*="border-top:1.5px solid #f1f5f9;background:#fff"] {
  background: #162032 !important;
  border-top-color: rgba(255,255,255,.08) !important;
}

/* Generieke kaart met border-radius:14px en border:#e2e8f0 */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:14px"],
.sg-theme-dark [style*="background:#fff;border:1.5px solid #e2e8f0;border-radius:14px"],
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:16px"],
.sg-theme-dark [style*="background:#fff;border:1.5px solid #e2e8f0;border-radius:16px"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — INFOBOT BUBBLE & KNOPPEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgInfoBotBubble {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Infobot actie-knoppen (background:white;border:1.5px solid #e2e8f0) */
.sg-theme-dark #sgInfoBotBubble button[style*="background:white"],
.sg-theme-dark #sgInfoBotList button[style*="background:white"] {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #cbd5e1 !important;
}
/* Infobot panel resultaat-container */
.sg-theme-dark [style*="background:white;border-radius:7px;padding:5px 8px"] {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — CHAT-LOCATION MODULE
══════════════════════════════════════════════════════════════════ */
/* Chat venster */
.sg-theme-dark [style*="background:white;border-radius:16px;padding:0"],
.sg-theme-dark #sgChatVenster {
  background: #1e2940 !important;
}
/* Ontvangen berichten bubble */
.sg-theme-dark [style*="background:white;border-radius:14px 14px 14px 3px"],
.sg-theme-dark [style*="background:white;color:#1e293b;border-radius:14px 14px 14px 3px"] {
  background: #162032 !important;
  color: #e2e8f0 !important;
}
/* Locatie-kaart in chat */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:12px"][style*="display:flex;align-items:center"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Navigate-app knoppen */
.sg-theme-dark [style*="font-weight:700;font-size:.79rem;color:#1e293b"] {
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SMART PLANNER KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border-radius:14px;padding:14px 16px;border:1.5px solid"],
.sg-theme-dark [style*="background:white;border-radius:11px;padding:10px 12px;border-left:3px solid"] {
  background: #1a2235 !important;
}
.sg-theme-dark [style*="background:white;border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:10px;border:1.5px solid"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark [style*="background:white;border-radius:12px;padding:12px 14px;border:1.5px solid"][style*="box-shadow"] {
  background: #1a2235 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — NOTIFICATIONS KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:#fff;border:1.5px solid #e0e0e0;border-radius:12px"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark [style*="background:#fff;border:1px solid #e0e0e0;border-radius:11px"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — DAG-WEEK PLANNER PERSOON KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .dwp-person-card,
.sg-theme-dark .dag-planner-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Persoon naam in dag-week-planner */
.sg-theme-dark [style*="font-size:.75rem;font-weight:800;color:#1e293b"],
.sg-theme-dark [style*="font-size:.7rem;font-weight:800;color:#1e293b"] {
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG TIMER STOP DIALOG (sgTimerStopDlg)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgTimerStopDlg > div {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgTimerStopDlg input:not([type="date"]):not([type="time"]) {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}
.sg-theme-dark #sgTimerStopDlg select {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG NAVIGATE BOTTOM-SHEET
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgNavigateSheet,
.sg-theme-dark #sgNavigeerModal {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
/* App-tegels in navigate (background:white;padding:2px) */
.sg-theme-dark [style*="background:white;padding:2px"][style*="object-fit:contain"] {
  background: rgba(255,255,255,.1) !important;
}
/* Recente locaties kaart */
.sg-theme-dark [style*="background:white;border:1.5px solid #f1f5f9;border-radius:13px"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG STATS KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:13px;padding:11px 13px"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
/* Stats header tekst */
.sg-theme-dark [style*="font-weight:800;font-size:.87rem;color:#0f172a"] {
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG RIJVERBODEN KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id="sgRvDatumChecker"] {
  background: #1e2940 !important;
  border-color: rgba(37,99,235,.3) !important;
}
.sg-theme-dark [style*="background:white;border:1.5px solid"][style*="border-radius:14px;padding:14px;margin-bottom:8px;cursor:pointer"] {
  background: #1a2235 !important;
}
/* Rijverbod land detail bottomsheet */
.sg-theme-dark [style*="background:white;border-radius:20px 20px 0 0;width:100%;max-width:600px"] {
  background: #1e2940 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — GENERIEKE DONKERE TEKST OP DONKERE ACHTERGROND
   Vangnet: hardcoded donkere teksten worden lichter in dark mode.
   Uitzondering: binnen #sgAcbPanel (al afgehandeld boven).
══════════════════════════════════════════════════════════════════ */

/* Primaire koptekst in kaarten */
.sg-theme-dark [style*="font-weight:800;font-size:.95rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.95rem;color:#0f172a"],
.sg-theme-dark [style*="font-weight:900;font-size:.95rem;color:#1e293b"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="font-weight:700;font-size:.9rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.9rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:900;font-size:.9rem;color:#1e293b"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="font-weight:700;font-size:.88rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.88rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.88rem;color:#0f172a"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="font-weight:700;font-size:.85rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.85rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.85rem;color:#0f172a"],
.sg-theme-dark [style*="font-weight:900;font-size:.85rem;color:#1e293b"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="font-weight:700;font-size:.82rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.82rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.82rem;color:#0f172a"],
.sg-theme-dark [style*="font-weight:900;font-size:.82rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:900;font-size:.82rem;color:#0f172a"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="font-weight:700;font-size:.8rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.8rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:800;font-size:.8rem;color:#0f172a"],
.sg-theme-dark [style*="font-weight:900;font-size:.8rem;color:#1e293b"],
.sg-theme-dark [style*="font-weight:900;font-size:.8rem;color:#0f172a"] {
  color: #f1f5f9 !important;
}
/* Secundaire tekst (#374151) in kaarten */
.sg-theme-dark [style*="font-size:.76rem;color:#374151"],
.sg-theme-dark [style*="font-size:.75rem;font-weight:700;color:#374151"],
.sg-theme-dark [style*="font-size:.78rem;font-weight:700;color:#374151"] {
  color: #94a3b8 !important;
}
/* Formulier-labels (#374151) */
.sg-theme-dark label[style*="color:#374151"] {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG NETWERK QR MODAL
══════════════════════════════════════════════════════════════════ */
/* QR code container — moet wit blijven anders is QR onleesbaar */
.sg-theme-dark #qrCodeCanvas,
.sg-theme-dark #qrCanvasInner,
.sg-theme-dark [id*="QRCanvas"],
.sg-theme-dark [id*="qrCanvas"] {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* QR wrap info-blokken */
.sg-theme-dark [style*="background:#fff;border-radius:10px;padding:10px 12px;text-align:left;margin-bottom:10px;border:1.5px solid #e2e8f0"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG JURIDISCH KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:14px;padding:14px 16px"],
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG ADMIN HUB KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:18px"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG CONNECTIE PROFIEL
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border:1.5px solid #e2e8f0;border-radius:12px;padding:12px 14px"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark [style*="background:white;border:1.5px solid #d1fae5;border-radius:10px"] {
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.25) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG WAGENPARK STAT-BLOKKEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border-radius:10px;padding:10px 12px;text-align:center;box-shadow"] {
  background: #1a2235 !important;
  border: 1px solid rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — TOGGLE KNOP (wit bolletje — laat staan, is functie-element)
══════════════════════════════════════════════════════════════════ */
/* Toggle knop bolletje moet altijd wit blijven voor leesbaarheid */
.sg-theme-dark [style*="border-radius:50%;background:white;transition"] {
  background: #ffffff !important;
}
.sg-theme-dark [style*="border-radius:50%;background:#fff;"] {
  background: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — #f3f4f6 / #f9fafb ACHTERGRONDEN (licht grijs)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:#f3f4f6"],
.sg-theme-dark [style*="background: #f3f4f6"] {
  background: rgba(255,255,255,.07) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark [style*="background:#f9fafb"],
.sg-theme-dark [style*="background: #f9fafb"] {
  background: rgba(255,255,255,.05) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SUBSCRIPTION / ABONNEMENT KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:480px"],
.sg-theme-dark [style*="background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:440px"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="border-radius:16px;padding:16px;margin-bottom:10px;background:#fff"],
.sg-theme-dark [style*="border-radius:16px;padding:16px;margin-bottom:10px;background:#fff"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SG DRM MODALS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;border-radius:20px;max-width:500px"],
.sg-theme-dark [style*="background:white;border-radius:20px;max-width:460px"],
.sg-theme-dark [style*="background:white;border-radius:20px;max-width:720px"],
.sg-theme-dark [style*="background:white;border-radius:20px;max-width:760px"],
.sg-theme-dark [style*="background:white;border-radius:22px;max-width:700px"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — SLIM ALERT KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:white;color:"][style*="font-size:.72rem;font-weight:700;cursor:pointer"] {
  background: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.4 — MARKTPLAATS & ZZP-MARKTPLAATS TABS (actief = background:#fff)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:#fff;font-weight:700;box-shadow"] {
  background: rgba(255,255,255,.12) !important;
  color: #f1f5f9 !important;
  box-shadow: none !important;
}
/* Inactieve tab (background:none) — al OK, geen override nodig */

/* ══════════════════════════════════════════════════════════════════
   v1.4 — HARDCODED #color:#111 TEKST (zwart op donker)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="color:#111;"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="color:#111\""] {
  color: #f1f5f9 !important;
}
/* Voorkomen dat #111827 (Tailwind gray-900) zwart toont op donker */
.sg-theme-dark [style*="color:#111827"] {
  color: #f1f5f9 !important;
}

/* Lichte achtergronden in het paneel: altijd licht houden */
html.sg-theme-dark #sgAcbPanel [style*="background:#fafafa"],
html.sg-theme-dark #sgAcbPanel [style*="background: #fafafa"] {
  background: #fafafa !important;
}
html.sg-theme-dark #sgAcbPanel [style*="background:#f8fafc"],
html.sg-theme-dark #sgAcbPanel [style*="background: #f8fafc"] {
  background: #f8fafc !important;
}
html.sg-theme-dark #sgAcbPanel [style*="background:#f1f5f9"],
html.sg-theme-dark #sgAcbPanel [style*="background: #f1f5f9"] {
  background: #f1f5f9 !important;
}
html.sg-theme-dark #sgAcbPanel [style*="background:#fff"],
html.sg-theme-dark #sgAcbPanel [style*="background: #fff"],
html.sg-theme-dark #sgAcbPanel [style*="background:#ffffff"],
html.sg-theme-dark #sgAcbPanel [style*="background: #ffffff"] {
  background: #ffffff !important;
}

/* Rode en gekleurde knoppen: onveranderd */
html.sg-theme-dark #sgAcbPanel [style*="background:#e30613"] {
  background: #e30613 !important;
  color: #ffffff !important;
}

/* Toggle-switch in het paneel */
html.sg-theme-dark #sgAcbPanel input[type="checkbox"] {
  accent-color: #e30613;
}

/* ══════════════════════════════════════════════════════════════════
   38. LAADLIJST MODALS
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="llModal"],
.sg-theme-dark [id*="laadlijst"][id*="modal"],
.sg-theme-dark [id*="llSheet"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   39. ADMIN COMMAND CENTRE — LIGHT MODE FORM CLASSES
   Klassen worden gebruikt door sg-admin-command.js voor form-elementen
   die via innerHTML worden gerenderd (geen template literals).
══════════════════════════════════════════════════════════════════ */

/* Shared form-element basis (light mode default) */
.sg-admin-label {
  font-size: .7rem;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
}
.sg-admin-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 11px;
  color: #0f172a;
  font-size: .82rem;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.sg-admin-input:focus {
  border-color: #e30613;
  box-shadow: 0 0 0 3px rgba(227,6,19,.1);
}
.sg-admin-fout {
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.2);
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .78rem;
  margin-bottom: 10px;
}
.sg-admin-btn-sec {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .8rem;
}
.sg-admin-btn-sec:hover { background: #e2e8f0; }

/* Dark mode overrides voor admin form klassen */
.sg-theme-dark .sg-admin-label {
  color: rgba(255,255,255,.45) !important;
}
.sg-theme-dark .sg-admin-input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .sg-admin-input:focus {
  border-color: rgba(99,102,241,.6) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.sg-theme-dark .sg-admin-fout {
  background: rgba(248,113,113,.1) !important;
  border-color: rgba(248,113,113,.3) !important;
  color: #fca5a5 !important;
}
.sg-theme-dark .sg-admin-btn-sec {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.5) !important;
}
.sg-theme-dark .sg-admin-btn-sec:hover {
  background: rgba(255,255,255,.1) !important;
}

/* Form title + close button */
.sg-admin-form-title {
  font-size: .9rem;
  font-weight: 800;
  color: #1e293b;
}
.sg-admin-close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sg-admin-close-btn:hover { background: #e2e8f0; }

/* Dark mode: select-element achtergrond */
.sg-theme-dark .sg-admin-input option {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   40. SNELLE ACTIE KNOPPEN (dashboard) — dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sg-qa-btn {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark .sg-qa-btn:hover {
  background: #253355 !important;
  border-color: rgba(255,255,255,.18) !important;
}
.sg-theme-dark .sg-qa-sub {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   41. PLANNING KAARTEN — dark mode (controle + ok)
══════════════════════════════════════════════════════════════════ */
/* "Alles in orde" kaart */
.sg-theme-dark .sg-plan-ok-card {
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.06)) !important;
  border-color: rgba(16,185,129,.3) !important;
}
.sg-theme-dark .sg-plan-ok-btn {
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.3) !important;
  color: #4ade80 !important;
}
/* Urgentie-kaart */
.sg-theme-dark .sg-plan-controle-card {
  background: #1e2940 !important;
  border-color: rgba(239,68,68,.3) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}
.sg-theme-dark .sg-plan-controle-icon {
  background: rgba(239,68,68,.15) !important;
}
.sg-theme-dark .sg-plan-alert-item {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   42. MELDINGEN TAB — dark mode leesbaarheid
   Notif-items, icoon-achtergronden en tekst correct in donker thema
══════════════════════════════════════════════════════════════════ */
/* Notificatie-item zelf */
.sg-theme-dark .notif-item {
  border-bottom-color: rgba(255,255,255,.07) !important;
}
/* Tekst in notificaties leesbaar maken */
.sg-theme-dark .notif-info strong {
  color: #f1f5f9 !important;
}
.sg-theme-dark .notif-info p {
  color: #94a3b8 !important;
}
.sg-theme-dark .notif-time {
  color: #64748b !important;
}
/* Icoon-achtergronden: lichte pastels → donkere semi-transparante versies */
.sg-theme-dark .notif-item.red .notif-icon {
  background: rgba(239,68,68,.18) !important;
  color: #f87171 !important;
}
.sg-theme-dark .notif-item.orange .notif-icon {
  background: rgba(249,115,22,.18) !important;
  color: #fb923c !important;
}
.sg-theme-dark .notif-item.green .notif-icon {
  background: rgba(34,197,94,.15) !important;
  color: #4ade80 !important;
}
.sg-theme-dark .notif-item.blue .notif-icon {
  background: rgba(227,6,19,.18) !important;
  color: #f87171 !important;
}
/* Sub-tabs in meldingen sectie */
.sg-theme-dark .sub-tab {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark .sub-tab.active {
  background: var(--wl-primary,#e30613) !important;
  color: #ffffff !important;
  border-color: var(--wl-primary-dark,#9b0000) !important;
}
/* Knoppen in notificatie-items (btn-xs) */
.sg-theme-dark .notif-item .btn-xs {
  background: rgba(255,255,255,.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.sg-theme-dark .notif-item .btn-xs:hover {
  background: rgba(255,255,255,.14) !important;
}
/* Verwijder-knop in notificatie */
.sg-theme-dark .notif-dismiss {
  color: #64748b !important;
}
.sg-theme-dark .notif-dismiss:hover {
  color: #f87171 !important;
}

/* Dark mode overrides voor form-title + close-btn */
.sg-theme-dark .sg-admin-form-title {
  color: #f1f5f9 !important;
}
.sg-theme-dark .sg-admin-close-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.5) !important;
}
.sg-theme-dark .sg-admin-close-btn:hover {
  background: rgba(255,255,255,.14) !important;
}

/* ══════════════════════════════════════════════════════════════════
   40. ADMIN COMMAND CENTRE — LICHT & DONKER MODUS FIXES
   Uitgebreide CSS om alle inline-gestileerde elementen te corrigeren.
══════════════════════════════════════════════════════════════════ */

/* ── Licht modus: paneel wrapper ── */
#sg_admin_command_panel {
  color: #1e293b;
}

/* ── Donker modus: paneel wrapper ── */
.sg-theme-dark #sg_admin_command_panel {
  color: #e2e8f0 !important;
}

/* ── LIGHT MODE: Kaartjes / tegels — forceer leesbare tekst ──────
   De tegels gebruiken inline-stijlen via _tk(). Als _isDark()
   onjuist true retourneert (bijv. na thema-wissel zonder herrender),
   zorgen onderstaande CSS-rules voor correcte leesbaarheid.
── */

/* Tegel labels — zorg dat ze donker zijn in light mode */
html.sg-theme-light #sg_admin_command_panel button[style*="border-top:3px solid"] div[style*="font-weight:800"],
html.sg-theme-light #sg_admin_command_panel button[style*="border-top:3px solid"] div[style*="font-weight: 800"] {
  color: #0f172a !important;
}

/* Tegel sub-labels */
html.sg-theme-light #sg_admin_command_panel button[style*="border-top:3px solid"] div[style*="font-size:.7rem"],
html.sg-theme-light #sg_admin_command_panel button[style*="border-top:3px solid"] div[style*="font-size: .7rem"] {
  color: #64748b !important;
}

/* Tegel achtergrond zeker wit */
html.sg-theme-light #sg_admin_command_panel button[style*="border-top:3px solid"] {
  background: #ffffff !important;
}

/* ── Sectie headers (DEVELOPERS & TEAMS etc.) ── */
html.sg-theme-light #sg_admin_command_panel div[style*="text-transform:uppercase"][style*="letter-spacing"] {
  color: #94a3b8 !important;
}

/* ── Statistieken strip labels ── */
html.sg-theme-light #sg_admin_command_panel div[style*="font-size:.6rem"] {
  color: #64748b !important;
}

/* ── Stat kaartjes achtergrond + nummers zichtbaar ── */
html.sg-theme-light #sg_admin_command_panel div[style*="border-top:2px solid"][style*="border-radius:10px"] {
  background: #ffffff !important;
}

/* ── Rij-achtergronden (dev, code, gebruiker lijsten) ── */
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:11px"][style*="border:1px solid"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:9px"][style*="border:1px solid"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ── Hoofdtitel in developer/gebruiker rijen ── */
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:11px"] span[style*="font-weight:700"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:9px"] div[style*="font-weight:600"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:9px"] div[style*="font-weight:800"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:11px"] div[style*="font-weight:800"] {
  color: #0f172a !important;
}

/* ── Subtekst in rijen ── */
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:11px"] div[style*="font-size:.7rem"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:9px"] div[style*="font-size:.68rem"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:9px"] div[style*="font-size:.7rem"],
html.sg-theme-light #sg_admin_command_panel div[style*="border-radius:11px"] div[style*="font-size:.73rem"] {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix122 — QR SCANNER RESULTAAT PANEEL — dark mode
   sg-qr-engine.js bouwt het resultaat-paneel met background:#fff (lijn ~1288)
   Dit vangnet pakt het resultaat-paneel en de tekst-result kaart op.
══════════════════════════════════════════════════════════════════ */
/* Resultaat paneel (ID.RESULT in sg-qr-engine.js, background:#fff) */
.sg-theme-dark #sgQRScanResult,
.sg-theme-dark [id$="QRResult"],
.sg-theme-dark [id$="qrResult"] {
  background: #1e2940 !important;
  border-top-color: rgba(255,255,255,.07) !important;
  color: #f1f5f9 !important;
}
/* Tekst-QR gevonden kaart (background:#f8fafc) */
.sg-theme-dark #sgQRScanResult [style*="background:#f8fafc"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Tekst in de kaart */
.sg-theme-dark #sgQRScanResult [style*="color:#0f172a"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark #sgQRScanResult [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
/* Kopieer knop */
.sg-theme-dark #sgQRScanResult button[style*="background:#f1f5f9"] {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #cbd5e1 !important;
}
/* Status balk (boven resultaat, background:#0f172a) — al donker, goed */

/* QR GEN modal (sgQRGenModal) resultaat-wrapper */
.sg-theme-dark #sgQRGenModal {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgQRGenModal [style*="background:#f8fafc"],
.sg-theme-dark #sgQRGenModal [style*="background:#ffffff"],
.sg-theme-dark #sgQRGenModal [style*="background:white"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}
/* QR canvas wrapper — ALTIJD wit (QR-code moet leesbaar zijn) */
.sg-theme-dark #sgQRGenModal canvas,
.sg-theme-dark #sgQRGenModal img[alt*="QR"],
.sg-theme-dark [id*="QRCanvas"],
.sg-theme-dark [class*="qr-canvas"] {
  background: #ffffff !important;
}
/* QR netwerk modal (sg-netwerk.js) */
.sg-theme-dark [id*="netwerkQR"],
.sg-theme-dark [id*="NetworkQR"],
.sg-theme-dark [id*="zzpProQRModal"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix123 — SGINFOBOT BUBBLE — licht/donker correcte kleuren
   De bubble heeft hardcoded background:white (lijn 2621 sg-infobot.js)
   In donkere modus → al afgevangen door v1.4 #sgInfoBotBubble.
   In LICHTE modus → bubble moet WIT zijn, maar sommige inner elementen
   (tabel-rijen met background:#f8fafc) moeten ook licht blijven.
   Correctie: zorg dat in LICHTE modus de bubble goed leesbaar is.
══════════════════════════════════════════════════════════════════ */

/* LICHTE MODUS: zorg dat bubble content goed leesbaar is */
html.sg-theme-light #sgInfoBotBubble {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.07) !important;
}
html.sg-theme-light #sgInfoBotContent {
  background: #ffffff !important;
  color: #0f172a !important;
}
html.sg-theme-light #sgInfoBotContent table {
  color: #0f172a !important;
}
html.sg-theme-light #sgInfoBotContent table tr[style*="background:#f8fafc"] td {
  color: #0f172a !important;
}
/* Input balk licht modus */
html.sg-theme-light #sgInfoBotInput {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html.sg-theme-light #sgInfoBotBubble [style*="border-top:1px solid #f1f5f9"] {
  border-top-color: #f1f5f9 !important;
  background: #ffffff !important;
}
/* Chip knoppen in lichte modus */
html.sg-theme-light #sgBotChips button {
  color: #374151 !important;
  background: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix140 v2.0 — QR SCANNER MODAL: ABSOLUTE DONKERE CONTEXT
   ─────────────────────────────────────────────────────────────────
   De scanner overlay (sgQRScanOverlay) is ALTIJD donker — ongeacht
   het app-thema. De camera-UI draait in zijn eigen donkere context.

   Problemen opgelost:
   1. Resultaatpaneel had hardcoded background:#fff → nu #1e2940
   2. Actieknoppen (Foto uploaden / Camera wisselen) zijn transparent
      rgba op donkere balk — maar browser-default button styling kan
      wit opaque achtergrond toevoegen → nu geforceerd
   3. Sluit-knop witte cirkel → rgba geforceerd
   4. QR Generator modal in donkere modus → thema-aware kleuren

   Dit is de CSS-backup voor de JS-fixes in sg-qr-engine.js.
   Als de JS-patch faalt, vangt deze CSS het op.
══════════════════════════════════════════════════════════════════ */

/* ── Scanner overlay: altijd donkere container ── */
#sgQRScanOverlay {
  background: rgba(0,0,0,.92) !important;
  color: #f1f5f9 !important;
}

/* ── Actie-balk onderaan: altijd #0f172a ── */
#sgQRScanOverlay > div:last-child {
  background: #0f172a !important;
  border-top-color: rgba(255,255,255,.07) !important;
}

/* ── Alle knoppen en labels BINNEN de scanner: nooit witte browser-default ── */
#sgQRScanOverlay button,
#sgQRScanOverlay label {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.9) !important;
  /* Verwijder browser user-agent witte achtergrond */
  -webkit-appearance: none;
  appearance: none;
}

/* ── Opnieuw-scannen knop: blauw (niet transparent) ── */
#sgQRScanOpnieuw {
  background: #3b82f6 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* ── Sluit-knop: transparant wit (cirkel op donkere header) ── */
#sgQRScanSluit {
  background: rgba(255,255,255,.12) !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.7) !important;
}
#sgQRScanSluit:hover {
  background: rgba(255,255,255,.22) !important;
}

/* ── Resultaatpaneel: altijd donkerblauw ── */
#sgQRScanResult {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
  border-top-color: rgba(255,255,255,.08) !important;
}

/* ── Resultaatkaarten: donkere context varianten ── */
#sgQRScanResult > div {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f1f5f9 !important;
}
#sgQRScanResult [style*="background:#f0fdf4"],
#sgQRScanResult [style*="background:rgba(34,197,94"],
#sgQRScanResult [style*="background:#eff6ff"] {
  /* behoud de gekleurde kaart-achtergronden (success=groen, url=blauw) */
}
#sgQRScanResult [style*="color:#0f172a"],
#sgQRScanResult [style*="color:#1e293b"],
#sgQRScanResult [style*="color:#334155"] {
  color: #f1f5f9 !important;
}
#sgQRScanResult [style*="color:#64748b"],
#sgQRScanResult [style*="color:#475569"] {
  color: #94a3b8 !important;
}
#sgQRScanResult button {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #cbd5e1 !important;
}

/* ── Status balk: altijd donker ── */
#sgQRScanStatus {
  color: rgba(255,255,255,.7) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix140 — QR GENERATOR MODAL: THEMA-AWARE (donkere modus backup)
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #sgQRGenModal {
  color: #f1f5f9 !important;
}
/* Modal wrapper div (eerste child van #sgQRGenModal) */
html.sg-theme-dark #sgQRGenModal > div {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Alle lichte achtergronden binnen de generator modal */
html.sg-theme-dark #sgQRGenModal [style*="background:#fff"],
html.sg-theme-dark #sgQRGenModal [style*="background:white"],
html.sg-theme-dark #sgQRGenModal [style*="background:#f8fafc"],
html.sg-theme-dark #sgQRGenModal [style*="background:#f1f5f9"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}
/* QR canvas container ALTIJD wit (QR-code moet scanbaar blijven) */
html.sg-theme-dark #sgQRGenContainer,
html.sg-theme-dark #sgQRGenModal canvas {
  background: #ffffff !important;
}
/* Kopieer-knop donker */
html.sg-theme-dark #sgQRGenKopieer {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #f1f5f9 !important;
}
/* Sluit-knop generator modal */
html.sg-theme-dark #sgQRGenSluit {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
}
/* Tekst in donkere generator modal */
html.sg-theme-dark #sgQRGenModal [style*="color:#0f172a"],
html.sg-theme-dark #sgQRGenModal [style*="color:#1e293b"],
html.sg-theme-dark #sgQRGenModal [style*="color:#334155"] {
  color: #f1f5f9 !important;
}
html.sg-theme-dark #sgQRGenModal [style*="color:#64748b"],
html.sg-theme-dark #sgQRGenModal [style*="color:#475569"] {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix140 — TOPBAR KNOPPEN: NOOIT WITTE BROWSER-DEFAULT
   De topbar is altijd donker (#0f172a). Alle knoppen daarin mogen
   NOOIT een witte browser-user-agent achtergrond krijgen.
══════════════════════════════════════════════════════════════════ */
#topbar button,
#topbar [role="button"],
.topbar button {
  -webkit-appearance: none;
  appearance: none;
}
/* Thema-toggle: goudgeel */
#topbarThemeBtn {
  background: rgba(251,191,36,.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251,191,36,.25) !important;
}
/* Avatar cirkel: Fix148 — gebruik rode brand-kleur (of transparant als foto aanwezig).
   GEEN blauw meer — dat stond hardcoded terwijl de app rood als huisstijl gebruikt.
   .has-foto class zorgt dat achtergrond wegvalt als JS een foto heeft geladen. */
#topbarAvatarCircle {
  background: #e30613 !important;
  color: #ffffff !important;
}
#topbarAvatarCircle.has-foto {
  background: transparent !important;
}
/* Status-wrap: semi-transparant */
#topbarStatusWrap {
  background: rgba(255,255,255,.1) !important;
}
/* QR-knop icon-wrap: altijd semi-transparant */
#topbarQRIconWrap,
#topbarQRBtn .topbar-icon-qr {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
}

/* DONKERE MODUS: aanvulling op bestaande v1.4 regel */
html.sg-theme-dark #sgInfoBotBubble {
  background: #1e2940 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07) !important;
}
/* Chat inhoud donker */
html.sg-theme-dark #sgInfoBotContent {
  background: #1e2940 !important;
  color: #e2e8f0 !important;
}
/* Tabel-rijen in infobot (abonnement-tabel) */
html.sg-theme-dark #sgInfoBotContent table {
  color: #e2e8f0 !important;
}
html.sg-theme-dark #sgInfoBotContent table tr[style*="background:#f8fafc"] {
  background: rgba(255,255,255,.04) !important;
}
html.sg-theme-dark #sgInfoBotContent table td {
  color: #cbd5e1 !important;
  border-color: rgba(255,255,255,.07) !important;
}
/* Chips (snelle acties) donker */
html.sg-theme-dark #sgBotChips button {
  background: rgba(255,255,255,.07) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.1) !important;
}
html.sg-theme-dark #sgBotChips button:hover {
  background: rgba(255,255,255,.13) !important;
  color: #e2e8f0 !important;
}
/* Input balk donker */
html.sg-theme-dark #sgInfoBotInput {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sg-theme-dark #sgInfoBotInput::placeholder {
  color: #475569 !important;
}
/* Input border bottom van de balk */
html.sg-theme-dark #sgInfoBotBubble [style*="border-top:1px solid #f1f5f9"] {
  border-top-color: rgba(255,255,255,.07) !important;
  background: #162032 !important;
}
/* Microfoon knop donker */
html.sg-theme-dark #sgBotMicBtn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.sg-theme-dark #sgBotMicBtn i { color: #94a3b8 !important; }
/* Suggesties */
html.sg-theme-dark #sgInfoBotSuggs button {
  background: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Info/tip blokken in berichten */
html.sg-theme-dark #sgInfoBotContent [style*="background:#eff6ff"] {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.2) !important;
}
html.sg-theme-dark #sgInfoBotContent [style*="background:#f0fdf4"] {
  background: rgba(34,197,94,.1) !important;
  border-color: rgba(34,197,94,.2) !important;
}
html.sg-theme-dark #sgInfoBotContent [style*="background:#fef3c7"] {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.2) !important;
}
html.sg-theme-dark #sgInfoBotContent [style*="background:#fef2f2"] {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.2) !important;
}
html.sg-theme-dark #sgInfoBotContent [style*="background:#f5f3ff"] {
  background: rgba(139,92,246,.1) !important;
  border-color: rgba(139,92,246,.2) !important;
}
html.sg-theme-dark #sgInfoBotContent code {
  background: rgba(255,255,255,.08) !important;
  color: #93c5fd !important;
}
/* Project keuze knoppen in infobot */
html.sg-theme-dark #sgInfoBotContent button[style*="background:white"] {
  background: #1a2744 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
/* Welkom-berichten kleuren */
html.sg-theme-dark #sgInfoBotContent [style*="color:#1e293b"] {
  color: #f1f5f9 !important;
}
html.sg-theme-dark #sgInfoBotContent [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix124 — TEAM & CHAT — aanvullende donkere modus fixes
   Screenshots tonen witte achtergrond achter de gesprekkenlijst en
   contact-sectie. v1.6-1.9 dekten de meeste elementen al. Hier
   pakken we resterende probleemgevallen op.
══════════════════════════════════════════════════════════════════ */

/* Hoofd-sectie wrapper */
html.sg-theme-dark #sec-team,
html.sg-theme-dark [id*="tcNav"],
html.sg-theme-dark #tcWrapper {
  background: #0b1120 !important;
  color: #e2e8f0 !important;
}

/* Gesprekkenlijst panel */
html.sg-theme-dark #tcNavList,
html.sg-theme-dark #tcConvList,
html.sg-theme-dark #tcNavContactList {
  background: #0f172a !important;
}

/* Gesprek-rij achtergronden */
html.sg-theme-dark .tc-conv-row,
html.sg-theme-dark .tc-contact-row {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
}
html.sg-theme-dark .tc-conv-row:hover,
html.sg-theme-dark .tc-contact-row:hover {
  background: rgba(255,255,255,.04) !important;
}
html.sg-theme-dark .tc-conv-row.actief,
html.sg-theme-dark .tc-contact-row.actief {
  background: rgba(255,255,255,.07) !important;
}

/* Gespreks-preview tekst */
html.sg-theme-dark .tc-conv-naam {
  color: #f1f5f9 !important;
}
html.sg-theme-dark .tc-conv-preview {
  color: #64748b !important;
}

/* Chat overlay / paneel */
html.sg-theme-dark #tcChatOverlay,
html.sg-theme-dark #tcChatPanel {
  background: #0f172a !important;
}

/* Berichten-vlak */
html.sg-theme-dark #tcChatMessages {
  background: #0b1120 !important;
}

/* Input balk */
html.sg-theme-dark #tcChatInputBar,
html.sg-theme-dark #tcInputBar {
  background: #0f172a !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
html.sg-theme-dark #tcChatInputBar input,
html.sg-theme-dark #tcInputBar input {
  background: #1e2940 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.sg-theme-dark #tcChatInputBar input::placeholder,
html.sg-theme-dark #tcInputBar input::placeholder {
  color: #475569 !important;
}

/* Lege staat chat */
html.sg-theme-dark #tcChatLeeg,
html.sg-theme-dark [id*="tcLeeg"] {
  background: #0b1120 !important;
  color: #475569 !important;
}

/* Team header */
html.sg-theme-dark #tcChatHeader {
  background: #0f172a !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
html.sg-theme-dark #tcNavMeBar {
  background: #0f172a !important;
  border-top-color: rgba(255,255,255,.06) !important;
}

/* Berichten bubbles worden al afgehandeld door .tc-bubble-other/.tc-bubble-me */
/* Extra: hardcoded background:white in berichten (v16.9.32 fix, maar sommige
   legacy berichten gebruiken nog steeds inline-stijlen) */
html.sg-theme-dark #tcChatMessages [style*="background:white;border-radius:14px 14px 14px 3px"] {
  background: #1e2940 !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark #tcChatMessages [style*="background:white;border-radius:3px 14px 14px 14px"] {
  background: rgba(227,6,19,.18) !important;
  color: #fecaca !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix125 — MAIL BEHEER — donkere modus kaarten volledig
   Lichte kaarten (#f8fafc, #fff) in mailbeheer moeten donker worden.
══════════════════════════════════════════════════════════════════ */

/* Mail sectie achtergrond */
html.sg-theme-dark #sec-mailbeheer,
html.sg-theme-dark #mailbeheerContent,
html.sg-theme-dark [id*="mailBeheer"] {
  background: var(--sg-bg, #0b1120) !important;
  color: #e2e8f0 !important;
}

/* Mail kaarten (worden al gedeeltelijk afgevangen door .mail-item) */
html.sg-theme-dark .mail-card,
html.sg-theme-dark .sg-mail-card,
html.sg-theme-dark .mb-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark .mail-card:hover,
html.sg-theme-dark .sg-mail-card:hover,
html.sg-theme-dark .mb-card:hover {
  background: #1e2940 !important;
}

/* Inline-gestylede mail kaarten */
html.sg-theme-dark [id*="mailbeheer"] [style*="background:#fff;border"],
html.sg-theme-dark [id*="mailbeheer"] [style*="background:white;border"],
html.sg-theme-dark [id*="mailbeheer"] [style*="background:#f8fafc"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}

/* Template kaartjes */
html.sg-theme-dark [id*="mailTemplate"] [style*="background:#fff"],
html.sg-theme-dark [id*="mailTemplate"] [style*="background:white"] {
  background: #1a2235 !important;
}

/* Mail preview header */
html.sg-theme-dark .mb-preview-header {
  background: #162032 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* Mail filter tabs */
html.sg-theme-dark .mb-tab-btn {
  color: #64748b !important;
}
html.sg-theme-dark .mb-tab-btn.active {
  color: var(--wl-primary, #e30613) !important;
  border-bottom-color: var(--wl-primary, #e30613) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix126 — URENREGISTRATIE — header-kaart donker modus
   De "Uren voor goedkeuring" header-kaart is licht in donkere modus.
══════════════════════════════════════════════════════════════════ */

/* Uren sectie kaarten */
html.sg-theme-dark #sec-tijden .uren-header-card,
html.sg-theme-dark .uren-header-card,
html.sg-theme-dark .uren-stat-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}

/* Uren goedkeuring kaart */
html.sg-theme-dark .uren-goedkeuring-card,
html.sg-theme-dark [id*="urenGoedkeuring"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* Inline lichte kaarten in tijden-sectie */
html.sg-theme-dark #sec-tijden [style*="background:#fff;border"],
html.sg-theme-dark #sec-tijden [style*="background:white;border"],
html.sg-theme-dark #sec-tijden [style*="background:#f8fafc"],
html.sg-theme-dark #sec-tijden [style*="background:#f1f5f9"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}

/* Uren-tabel header */
html.sg-theme-dark .uren-table-header,
html.sg-theme-dark .uren-week-header {
  background: #162032 !important;
  color: #94a3b8 !important;
}

/* Uren-regel rijen */
html.sg-theme-dark .uren-row,
html.sg-theme-dark .ur-rij {
  border-bottom-color: rgba(255,255,255,.05) !important;
}
html.sg-theme-dark .uren-row:hover { background: rgba(255,255,255,.03) !important; }

/* Specifiek: de goedkeuring wachttijd badge */
html.sg-theme-dark .uren-wacht-badge {
  background: rgba(245,158,11,.15) !important;
  color: #fcd34d !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix127 — FINANCE — witte kaarten donker maken
   Finance-sectie toont witte summary-kaarten in donkere modus.
══════════════════════════════════════════════════════════════════ */

/* Finance sectie achtergrond */
html.sg-theme-dark #sec-finance,
html.sg-theme-dark #financeContent,
html.sg-theme-dark [id*="financeWrap"] {
  background: var(--sg-bg, #0b1120) !important;
  color: #e2e8f0 !important;
}

/* Finance summary kaarten */
html.sg-theme-dark .finance-summary-card,
html.sg-theme-dark .fin-summary-card,
html.sg-theme-dark .fin-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}

/* Inline finance kaarten (hardcoded #fff / white) */
html.sg-theme-dark #sec-finance [style*="background:#fff;border"],
html.sg-theme-dark #sec-finance [style*="background:white;border"],
html.sg-theme-dark #sec-finance [style*="background:#f8fafc"],
html.sg-theme-dark [id*="financeCard"] [style*="background:#fff"],
html.sg-theme-dark [id*="financeCard"] [style*="background:white"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}

/* Finance grafiek container */
html.sg-theme-dark .finance-chart-wrap,
html.sg-theme-dark [id*="financeChart"] {
  background: #162032 !important;
}

/* Finance tabel */
html.sg-theme-dark .finance-table th {
  background: #162032 !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.07) !important;
}
html.sg-theme-dark .finance-table td {
  border-color: rgba(255,255,255,.05) !important;
  color: #cbd5e1 !important;
}
html.sg-theme-dark .finance-table tr:hover td {
  background: rgba(255,255,255,.03) !important;
}

/* Totaal-regel */
html.sg-theme-dark .finance-totaal-row {
  background: rgba(255,255,255,.05) !important;
  border-top-color: rgba(255,255,255,.1) !important;
}
html.sg-theme-dark .finance-totaal-row td {
  color: #f1f5f9 !important;
  font-weight: 700;
}

/* Inline finance kaarten specifieke fix (bg-white op border-radius:12px/14px/16px) */
html.sg-theme-dark #sec-finance [style*="border-radius:12px"][style*="background:white"],
html.sg-theme-dark #sec-finance [style*="border-radius:14px"][style*="background:white"],
html.sg-theme-dark #sec-finance [style*="border-radius:16px"][style*="background:white"],
html.sg-theme-dark #sec-finance [style*="border-radius:12px"][style*="background:#fff"],
html.sg-theme-dark #sec-finance [style*="border-radius:14px"][style*="background:#fff"],
html.sg-theme-dark #sec-finance [style*="border-radius:16px"][style*="background:#fff"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix128 — NOTITIES — achtergrond licht/donker
   In donkere modus moet notities-sectie de donkere achtergrond hebben.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #sec-notities,
html.sg-theme-dark #notitiesContent,
html.sg-theme-dark [id*="notitieWrap"] {
  background: var(--sg-bg, #0b1120) !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark .notitie-card {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark .notitie-card:hover { background: #1e2940 !important; }
html.sg-theme-dark .notitie-title { color: #f1f5f9 !important; }
html.sg-theme-dark .notitie-inhoud { color: #94a3b8 !important; }
html.sg-theme-dark .notitie-datum { color: #64748b !important; }

/* Notitie editor / textarea */
html.sg-theme-dark .notitie-editor,
html.sg-theme-dark [id*="notitieEditor"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix129 — INSTELLINGEN — lichte kaart in donkere modus
   Screenshot toont dat de instellingen-kaart er light uitziet in
   donkere modus (jfR8USG3 / 5f6TTuvx).
   Note: de instellingen-kaarten zijn CORRECT licht van kleur
   (.section klasse heeft var(--card)) — maar BINNEN de kaart
   zijn de sub-items soms wit.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #sec-instellingen [style*="background:#fff;border"],
html.sg-theme-dark #sec-instellingen [style*="background:white;border"],
html.sg-theme-dark #sec-instellingen [style*="background:#f8fafc"] {
  background: #1a2235 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
html.sg-theme-dark #sec-instellingen .instellingen-kaart {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
html.sg-theme-dark #sec-instellingen .inst-row {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
html.sg-theme-dark #sec-instellingen label { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   Fix130 — DUBBELE TOAST FIX (CSS zijde)
   Toasts kunnen tijdelijk over elkaar vallen als de debounce net
   mist. CSS-fix: zorg dat max 1 toast zichtbaar is (stack via
   nth-child — de nieuwste wint).
══════════════════════════════════════════════════════════════════ */
#sgToastContainer .sg-toast:not(:last-child) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity .15s, transform .15s !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix131 — LICHTE MODUS — section/card baseline correct
   In lichte modus moeten .section kaarten WIT zijn.
   Zorgt dat lichte modus kaarten wit (var(--card, #fff)) zijn.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light .section,
html.sg-theme-light .card,
html.sg-theme-light .sg-card {
  background: #ffffff !important;
  color: #0f172a !important;
}
html.sg-theme-light .section-header {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix132 — INSTELLINGEN-KAARTEN LICHTE MODUS
   De kaarten Kleurthema/Tekstgrootte/Accentkleur gebruiken inline
   style="background:var(--card,#fff)" — maar als --card nog de
   donkere waarde (#1e2940) heeft door een timing-issue of doordat
   een vorige dark-mode sessie de var niet correct heeft gereset,
   zien de kaarten er donker uit in lichte modus.
   Fix: directe CSS-override voor alle inline-style kaarten in
   lichte modus binnen #sec-instellingen (inclusief het sticky header).
══════════════════════════════════════════════════════════════════ */
html.sg-theme-light #sec-instellingen [style*="background:var(--card"],
html.sg-theme-light #sec-instellingen [style*="background: var(--card"],
html.sg-theme-light #sec-instellingen [style*="background:#1e2940"],
html.sg-theme-light #sec-instellingen [style*="background: #1e2940"],
html.sg-theme-light #sec-instellingen [style*="background:#111827"],
html.sg-theme-light #sec-instellingen [style*="background:#162032"],
html.sg-theme-light #sec-instellingen [style*="background:#1a2235"],
html.sg-theme-light #sec-instellingen [style*="background:#1a1a1a"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
/* Sticky header + panel containers lichte modus */
html.sg-theme-light #sec-instellingen [style*="position:sticky"],
html.sg-theme-light #sec-instellingen > div:first-child {
  background: #ffffff !important;
  color: #0f172a !important;
}
/* Alle direkte child-divs van het panel (kaart-containers) */
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;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
/* Thema-selectie knoppen in lichte modus: altijd lichte achtergrond */
html.sg-theme-light #instThemaLicht,
html.sg-theme-light #instThemaDonker,
html.sg-theme-light #instThemaAuto {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
/* Actieve thema-knop (licht = actief): rode border */
html.sg-theme-light #instThemaLicht[aria-pressed="true"] {
  border-color: #e30613 !important;
  background: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX ALGEMEEN — inline background:#f1f5f9 / #e2e8f0 in donkere modus
   Deze kleuren zijn te donker als tekst-kleur maar te licht als
   achtergrond in donkere modus. Vangnet voor alle overige elementen.
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:#f1f5f9;border"],
.sg-theme-dark [style*="background: #f1f5f9;border"] {
  background: #162032 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark [style*="background:#e2e8f0;border"],
.sg-theme-dark [style*="background: #e2e8f0;border"] {
  background: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v2.0 — sg-dark-fixes.css
   Fix122: QR scanner resultaat paneel donker
   Fix123: SGInfoBotUI licht+donker correct
   Fix124: Team & Chat aanvullend donker
   Fix125: Mail Beheer kaarten donker
   Fix126: Urenregistratie header-kaart donker
   Fix127: Finance witte kaart donker
   Fix128: Notities donker
   Fix129: Instellingen sub-items donker
   Fix130: Dubbele toast CSS-fix
   Fix131: Lichte modus section/card baseline
══════════════════════════════════════════════════════════════════ */

/* ── Header actie-bar titels ── */
html.sg-theme-light #sg_admin_command_panel div[style*="font-size:1rem"][style*="font-weight:800"] {
  color: #0f172a !important;
}
html.sg-theme-light #sg_admin_command_panel div[style*="font-size:.73rem"][style*="color:"] {
  color: #64748b !important;
}

/* ── Welkom banner — tekst altijd WIT (banner is altijd donkere gradient) ── */
#sg_admin_command_panel div[style*="linear-gradient(135deg,#1e1b4b"],
#sg_admin_command_panel div[style*="linear-gradient(135deg,#0f172a"] {
  color: #ffffff;
}

/* ── Light mode: codebadge in kortingscodes tab ── */
#sg_admin_command_panel .sg-code-badge {
  background: rgba(227,6,19,.08);
  border: 1px solid rgba(227,6,19,.2);
  color: #e30613;
}

/* ══════════════════════════════════════════════════════════════════
   41. BTN-XS DARK MODE — gekleurde knoppen behouden hun kleur
   Probleem: btn-xs { color: var(--text) } + btn-xs:hover { background: white }
   overschrijft inline-gestileerde knoppen met gradient in dark mode.
   Oplossing: knoppen MET een background-gradient of expliciete bg-kleur
   houden altijd witte tekst en een donkere hover-state.
══════════════════════════════════════════════════════════════════ */

/* Alle btn-xs die een gradient achtergrond hebben → altijd witte tekst */
.sg-theme-dark .btn-xs[style*="gradient"],
.sg-theme-dark .btn-xs[style*="background:linear"],
.sg-theme-dark .btn-xs[style*="background: linear"] {
  color: #ffffff !important;
}
/* Hover: iets donkerder ipv wit */
.sg-theme-dark .btn-xs[style*="gradient"]:hover,
.sg-theme-dark .btn-xs[style*="background:linear"]:hover,
.sg-theme-dark .btn-xs[style*="background: linear"]:hover {
  opacity: .88 !important;
  background: inherit !important; /* behoudt gradient, geen witte hover */
}

/* Specifieke project-header knoppen op ID — extra zekerheid */
.sg-theme-dark #pdMapsLink {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
}
.sg-theme-dark #pdNavBtn {
  background: linear-gradient(135deg,#e30613,#9b0000) !important;
  color: #ffffff !important;
  border: none !important;
}
.sg-theme-dark #pdMarktplaatsBtn {
  background: linear-gradient(135deg,#f59e0b,#d97706) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Hover states voor de drie knoppen */
.sg-theme-dark #pdMapsLink:hover     { opacity: .88 !important; }
.sg-theme-dark #pdNavBtn:hover       { opacity: .88 !important; }
.sg-theme-dark #pdMarktplaatsBtn:hover { opacity: .88 !important; }

/* ══════════════════════════════════════════════════════════════════
   42. SIDEBAR NAV-ITEMS — tekst altijd leesbaar in dark mode
══════════════════════════════════════════════════════════════════ */

/* Nav-item label tekst */
.sg-theme-dark .nav-item > span {
  color: #cbd5e1 !important;
}
/* Actief nav-item */
.sg-theme-dark .nav-item.active > span {
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* Nav-item hover */
.sg-theme-dark .nav-item:hover > span {
  color: #f1f5f9 !important;
}
/* Nav-icoon kleuren behouden (worden inline gezet via JS, maar voor de zekerheid) */
.sg-theme-dark .nav-item .nav-icon {
  opacity: 1 !important;
  filter: none !important;
}

/* ── Light mode: tab bar scheiding ── */
#sg_admin_command_panel > div > div:first-child {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
  margin-bottom: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════
   39. INFOBOT BUBBLE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgInfoBotBubble,
.sg-theme-dark [id*="infoBotBubble"],
.sg-theme-dark [id*="InfoBotPanel"] {
  background: #111827 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .infobot-msg-in {
  background: #162032 !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .infobot-quick-btn {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #cbd5e1 !important;
}

/* ══════════════════════════════════════════════════════════════════
   40. NAVIGATIE MODALS (route kiezen, locatie)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="navigat"][id*="modal"],
.sg-theme-dark [id*="routeModal"],
.sg-theme-dark [id*="locatieModal"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   41. CONTRACTEN GENERATOR
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #contractGenerator,
.sg-theme-dark #sgContractModal {
  background: var(--sg-bg, #0b1120) !important;
}
.sg-theme-dark .contract-preview-box {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   42. SMART PLANNER / RIJVERBODEN KAARTEN
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sp-card,
.sg-theme-dark [id*="smartPlan"] .card-item {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgRvDatumChecker {
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.25) !important;
}
.sg-theme-dark .rv-land-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   43. MACHINE BEHEER / WAGENPARK
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .machine-card,
.sg-theme-dark .voertuig-card,
.sg-theme-dark [id*="machineModal"],
.sg-theme-dark [id*="wagenparkModal"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   44. AGENDA MODAL
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="agendaModal"],
.sg-theme-dark [id*="dagModal"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v1.8 — EMAIL-VELD FIX + READONLY INPUTS DARK MODE
   Probleem: type="email" readonly inputs negeren bg override op Android
   Oplossing: maximale specificiteit + -webkit-text-fill-color override
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #profielEmail,
html.sg-theme-dark #profielEmail[readonly],
html.sg-theme-dark input[type="email"][readonly] {
  background: #0f1e35 !important;
  background-color: #0f1e35 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
  opacity: 1 !important;
  -webkit-opacity: 1 !important;
}

/* Alle readonly inputs in dark mode donker */
html.sg-theme-dark input[readonly]:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
  background: #0f1e35 !important;
  background-color: #0f1e35 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  opacity: 1 !important;
}

/* .form-group inputs — zeker dark (ook als var(--card) nog niet geladen) */
html.sg-theme-dark .form-group input:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
html.sg-theme-dark .form-group select,
html.sg-theme-dark .form-group textarea {
  background: #0f1e35 !important;
  background-color: #0f1e35 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sg-theme-dark .form-group input::placeholder,
html.sg-theme-dark .form-group textarea::placeholder {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* ══════════════════════════════════════════════════════════════════
   45. TOGGLE KNOPPEN (schakelaar-knopjes)
      De witte dot blijft wit — dat is correct gedrag
══════════════════════════════════════════════════════════════════ */
/* Toggle track backgrounds */
.sg-theme-dark [style*="border-radius:12px"][style*="width:44px"],
.sg-theme-dark [style*="border-radius:11px"][style*="width:44px"],
.sg-theme-dark [style*="border-radius:20px"][style*="width:44px"] {
  /* Background wordt al gezet door de JS-module via kleur */
}

/* ══════════════════════════════════════════════════════════════════
   46. PALLET MANAGER
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="palletModal"],
.sg-theme-dark [id*="palletSheet"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .pallet-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   47. LOONSTROOK
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="loonstrookModal"],
.sg-theme-dark [id*="loonstrookSheet"],
.sg-theme-dark [id*="sgLoonstrook"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   48. CREDITS / WALLET
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="creditsModal"],
.sg-theme-dark [id*="walletModal"],
.sg-theme-dark .credits-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .credits-plan-option {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   49. NOTIFICATIONS MODULE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #notificatiesContent .notif-row {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark .push-pref-item {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   50. VERVANGER MODULE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="vervangerModal"],
.sg-theme-dark [id*="vervangerSheet"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .vervanger-card {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   51. QR CODE CONTAINERS — witte achtergrond BEHOUDEN (QR vereist contrast)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [id*="QR"],
.sg-theme-dark [id*="qrCode"],
.sg-theme-dark canvas[id*="qr"],
.sg-theme-dark img[id*="qr"] {
  /* QR-codes mogen WIT blijven — anders zijn ze onleesbaar */
  background: white !important;
}

/* ══════════════════════════════════════════════════════════════════
   52. INPUTS / SELECTS / TEXTAREAS — algemeen
      (dekt alle hardcoded background:#fff inputs die niet door
       de theme-engine worden gedekt)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark input[style*="background:#fff"],
.sg-theme-dark input[style*="background: #fff"],
.sg-theme-dark input[style*="background:white"],
.sg-theme-dark input[style*="background: white"],
.sg-theme-dark textarea[style*="background:#fff"],
.sg-theme-dark textarea[style*="background: #fff"],
.sg-theme-dark textarea[style*="background:white"],
.sg-theme-dark select[style*="background:#fff"],
.sg-theme-dark select[style*="background: #fff"],
.sg-theme-dark select[style*="background:white"],
.sg-theme-dark select[style*="background: white"] {
  background: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark input[style*="color:#111"],
.sg-theme-dark textarea[style*="color:#111"],
.sg-theme-dark select[style*="color:#111"] {
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   32. SCROLLBAR GLOBAAL
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sg-theme-dark *::-webkit-scrollbar { width: 4px; height: 4px; }
.sg-theme-dark *::-webkit-scrollbar-track { background: transparent; }
.sg-theme-dark *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}
.sg-theme-dark *::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.25);
}

/* ══════════════════════════════════════════════════════════════════
   53. CONTRAST FIX v2.0 — STAT-ICON PASTEL BACKGROUNDS
   Pastelkleurige icon-vakjes zijn onleesbaar in dark mode.
   Vervang door donkere semi-transparante varianten.
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .stat-icon.blue  {
  background: rgba(59,130,246,.2) !important;
  color: #93c5fd !important;
}
.sg-theme-dark .stat-icon.green {
  background: rgba(34,197,94,.18) !important;
  color: #4ade80 !important;
}
.sg-theme-dark .stat-icon.red   {
  background: rgba(239,68,68,.2) !important;
  color: #f87171 !important;
}
.sg-theme-dark .stat-icon.orange {
  background: rgba(245,158,11,.2) !important;
  color: #fbbf24 !important;
}
/* Stat-icon met inline stijl (ecfeff, f0fdf4 etc.) */
.sg-theme-dark .stat-icon[style*="#ecfeff"],
.sg-theme-dark .stat-icon[style*="#dbeafe"],
.sg-theme-dark .stat-icon[style*="#dcfce7"],
.sg-theme-dark .stat-icon[style*="#fee2e2"],
.sg-theme-dark .stat-icon[style*="#fef3c7"],
.sg-theme-dark .stat-icon[style*="#f0fdf4"],
.sg-theme-dark .stat-icon[style*="#eff6ff"] {
  background: rgba(255,255,255,.1) !important;
}
/* Stat tekst */
.sg-theme-dark .stat-value { color: #f1f5f9 !important; }
.sg-theme-dark .stat-label { color: #94a3b8 !important; }
.sg-theme-dark .stat-card  { background: var(--sg-card, #1a1a1a) !important; }

/* ══════════════════════════════════════════════════════════════════
   54. CONTRAST FIX v2.0 — ALERT ITEMS IN DARK MODE
   .alert-item.red/orange/green gebruiken lichte pastel achtergronden.
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .alert-item.red {
  background: rgba(239,68,68,.1) !important;
  border-left-color: #ef4444 !important;
}
.sg-theme-dark .alert-item.orange {
  background: rgba(245,158,11,.1) !important;
  border-left-color: #f59e0b !important;
}
.sg-theme-dark .alert-item.green {
  background: rgba(34,197,94,.1) !important;
  border-left-color: #22c55e !important;
}
.sg-theme-dark .alert-item .alert-icon {
  /* icon achtergrond ook aanpassen */
}
.sg-theme-dark .alert-item.red .alert-icon {
  background: rgba(239,68,68,.18) !important;
  color: #f87171 !important;
}
.sg-theme-dark .alert-item.orange .alert-icon {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
}
.sg-theme-dark .alert-item.green .alert-icon {
  background: rgba(34,197,94,.15) !important;
  color: #4ade80 !important;
}
.sg-theme-dark .alert-info strong { color: #f1f5f9 !important; }
.sg-theme-dark .alert-info span   { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   55. CONTRAST FIX v2.0 — COMP-CHECK (compliance ✓ blokken)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .comp-check.green  { background: rgba(34,197,94,.1) !important; }
.sg-theme-dark .comp-check.orange { background: rgba(245,158,11,.1) !important; }
.sg-theme-dark .comp-check.red    { background: rgba(239,68,68,.1) !important; }
.sg-theme-dark .comp-check div strong { color: #f1f5f9 !important; }
.sg-theme-dark .comp-check div span   { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   56. CONTRAST FIX v2.0 — INLINE GRADIENT DASHBOARD KAARTEN
   Pastelkleurige inline gradients (eff6ff, dbeafe, fefce8 etc.)
   worden omgezet naar donkere varianten.
══════════════════════════════════════════════════════════════════ */
/* Blauw pastel (eff6ff, dbeafe) */
.sg-theme-dark [style*="linear-gradient(135deg,#eff6ff"],
.sg-theme-dark [style*="linear-gradient(135deg, #eff6ff"],
.sg-theme-dark [style*="background:linear-gradient(135deg,#eff6ff"],
.sg-theme-dark [style*="background: linear-gradient(135deg,#eff6ff"] {
  background: linear-gradient(135deg,rgba(37,99,235,.14),rgba(59,130,246,.08)) !important;
}
/* Geel pastel (fefce8, fef3c7) */
.sg-theme-dark [style*="linear-gradient(135deg,#fefce8"],
.sg-theme-dark [style*="linear-gradient(135deg, #fefce8"],
.sg-theme-dark [style*="background:linear-gradient(135deg,#fefce8"],
.sg-theme-dark [style*="background: linear-gradient(135deg,#fefce8"] {
  background: linear-gradient(135deg,rgba(245,158,11,.14),rgba(251,191,36,.08)) !important;
}
/* Cyaan pastel (ecfeff, f0f9ff) */
.sg-theme-dark [style*="linear-gradient(135deg,#ecfeff"],
.sg-theme-dark [style*="linear-gradient(135deg, #ecfeff"] {
  background: linear-gradient(135deg,rgba(8,145,178,.14),rgba(6,182,212,.08)) !important;
}
/* Groen pastel (f0fdf4, dcfce7) */
.sg-theme-dark [style*="linear-gradient(135deg,#f0fdf4"],
.sg-theme-dark [style*="linear-gradient(135deg, #f0fdf4"],
.sg-theme-dark [style*="linear-gradient(135deg,#dcfce7"] {
  background: linear-gradient(135deg,rgba(34,197,94,.12),rgba(16,185,129,.07)) !important;
}

/* ══════════════════════════════════════════════════════════════════
   57. CONTRAST FIX v2.0 — INLINE TEKST OP PASTEL ACHTERGROND
   Hardcoded donkere tekst (#065f46, #92400e, #1e40af) op lichte achtergrond
   → lichter maken voor dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="color:#065f46"] { color: #6ee7b7 !important; }
.sg-theme-dark [style*="color:#92400e"] { color: #fcd34d !important; }
.sg-theme-dark [style*="color:#1e40af"] { color: #f87171 !important; }
.sg-theme-dark [style*="color:#166534"] { color: #86efac !important; }
.sg-theme-dark [style*="color:#15803d"] { color: #4ade80 !important; }
.sg-theme-dark [style*="color:#b45309"] { color: #fbbf24 !important; }
.sg-theme-dark [style*="color:#ca8a04"] { color: #fde047 !important; }
.sg-theme-dark [style*="color:#d97706"] { color: #fcd34d !important; }
.sg-theme-dark [style*="color:#9d174d"] { color: #f9a8d4 !important; }

/* ══════════════════════════════════════════════════════════════════
   58. CONTRAST FIX v2.0 — INLINE LICHTE ACHTERGROND COLORS
   div/span elementen met hardcoded pastelkleur achtergronden
══════════════════════════════════════════════════════════════════ */
/* Lichtblauw */
.sg-theme-dark [style*="background:#dbeafe"],
.sg-theme-dark [style*="background: #dbeafe"] {
  background: rgba(59,130,246,.18) !important;
  color: #93c5fd !important;
}
/* Lichtgroen */
.sg-theme-dark [style*="background:#dcfce7"],
.sg-theme-dark [style*="background: #dcfce7"],
.sg-theme-dark [style*="background:#bbf7d0"],
.sg-theme-dark [style*="background: #bbf7d0"] {
  background: rgba(34,197,94,.15) !important;
  color: #4ade80 !important;
}
/* Lichtoranje */
.sg-theme-dark [style*="background:#fed7aa"],
.sg-theme-dark [style*="background: #fed7aa"] {
  background: rgba(249,115,22,.18) !important;
  color: #fdba74 !important;
}
/* Lichtpaars → neutrale donkere kaart */
.sg-theme-dark [style*="background:#ede9fe"],
.sg-theme-dark [style*="background: #ede9fe"],
.sg-theme-dark [style*="background:#ddd6fe"] {
  background: rgba(255,255,255,.06) !important;
  color: #e2e8f0 !important;
}
/* Lichtroze */
.sg-theme-dark [style*="background:#fce7f3"],
.sg-theme-dark [style*="background: #fce7f3"] {
  background: rgba(236,72,153,.15) !important;
  color: #f9a8d4 !important;
}
/* Lichtgeel */
.sg-theme-dark [style*="background:#fef9c3"],
.sg-theme-dark [style*="background: #fef9c3"],
.sg-theme-dark [style*="background:#fef08a"] {
  background: rgba(234,179,8,.15) !important;
  color: #fde047 !important;
}
/* Extra lichte grijze vlakken */
.sg-theme-dark [style*="background:#f9fafb"],
.sg-theme-dark [style*="background: #f9fafb"] {
  background: rgba(255,255,255,.04) !important;
}
/* Light cyan */
.sg-theme-dark [style*="background:#ecfeff"],
.sg-theme-dark [style*="background: #ecfeff"] {
  background: rgba(8,145,178,.15) !important;
  color: #67e8f9 !important;
}
/* Light indigo */
.sg-theme-dark [style*="background:#e0e7ff"],
.sg-theme-dark [style*="background: #e0e7ff"] {
  background: rgba(99,102,241,.18) !important;
  color: #a5b4fc !important;
}

/* ══════════════════════════════════════════════════════════════════
   59. CONTRAST FIX v2.0 — ROLE/STATUS TAGS IN LICHTE STIJL
   .sg-role-tag klassen in dark mode
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sg-role-tag--og {
  background: rgba(185,28,28,.2) !important;
  color: #fca5a5 !important;
  border-color: rgba(248,113,113,.3) !important;
}
.sg-theme-dark .sg-role-tag--zzp {
  background: rgba(21,128,61,.2) !important;
  color: #86efac !important;
  border-color: rgba(134,239,172,.3) !important;
}
.sg-theme-dark .sg-role-tag--free {
  background: rgba(29,78,216,.2) !important;
  color: #93c5fd !important;
  border-color: rgba(147,197,253,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   60. CONTRAST FIX v2.0 — CONN BADGE + PLAN CARDS IN DARK MODE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sg-conn-badge {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
.sg-theme-dark .sg-conn-badge.unlimited {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(134,239,172,.25) !important;
  color: #86efac !important;
}

/* ══════════════════════════════════════════════════════════════════
   61. CONTRAST FIX v2.0 — MODAL CLOSE BUTTON IN DARK MODE
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .modal-close {
  background: rgba(255,255,255,.08) !important;
  color: #cbd5e1 !important;
}
.sg-theme-dark .modal-close:hover {
  background: rgba(239,68,68,.2) !important;
  color: #f87171 !important;
}

/* ══════════════════════════════════════════════════════════════════
   62. CONTRAST FIX v2.0 — SECTION / CARD TEKST GLOBAAL
   Ensures generic card tekst altijd leesbaar is
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .card { background: #1e2940 !important; }
.sg-theme-dark .card-header h3,
.sg-theme-dark .card-title   { color: #f1f5f9 !important; }

/* ══════════════════════════════════════════════════════════════════
   63. LIGHT MODE CONTRAST VERBETERINGEN
   Pastelkleurige icon-vakjes in light mode: tekst donkerder maken
   zodat de minimale WCAG AA ratio (4.5:1) gehaald wordt.
══════════════════════════════════════════════════════════════════ */
/* stat-icon tekst forceren op juiste donkere kleur */
.stat-icon.blue   { color: #e30613 !important; }
.stat-icon.green  { color: #15803d !important; }
.stat-icon.red    { color: #b91c1c !important; }
.stat-icon.orange { color: #b45309 !important; }

/* alert-info tekst: licht op pastel in light-mode, wit in dark-mode */
html.sg-theme-light .alert-item.red    .alert-info strong,
html.sg-theme-light .alert-item.orange .alert-info strong,
html.sg-theme-light .alert-item.green  .alert-info strong { color: #111827 !important; }
html.sg-theme-light .alert-item.red    .alert-info span,
html.sg-theme-light .alert-item.orange .alert-info span,
html.sg-theme-light .alert-item.green  .alert-info span   { color: #374151 !important; }
/* Dark-mode: witte tekst op donkere kaartachtergrond */
html.sg-theme-dark .alert-item.red    .alert-info strong,
html.sg-theme-dark .alert-item.orange .alert-info strong,
html.sg-theme-dark .alert-item.green  .alert-info strong { color: #f1f5f9 !important; }
html.sg-theme-dark .alert-item.red    .alert-info span,
html.sg-theme-dark .alert-item.orange .alert-info span,
html.sg-theme-dark .alert-item.green  .alert-info span   { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════════
   FIX: AANDACHTSPUNTEN SECTIE — dark-mode (hard-coded wit/zwart)
   #alertsSection heeft inline background:#ffffff / color:#111111.
   Deze regels overschrijven dat voor dark-theme.
══════════════════════════════════════════════════════════════════ */
html.sg-theme-dark #alertsSection {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Header balk binnen alertsSection */
html.sg-theme-dark #alertsSection > div:first-child {
  border-bottom-color: rgba(255,255,255,.07) !important;
}
/* Titel "Aandachtspunten" */
html.sg-theme-dark #alertsSection [style*="color:#111111"] {
  color: #f1f5f9 !important;
}
/* Subtitel */
html.sg-theme-dark #alertsSection [style*="color:#888888"] {
  color: #94a3b8 !important;
}
/* "Alles →" knop */
html.sg-theme-dark #alertsSection button[onclick*="compliance"] {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}
/* Inline tekst op alert-kaarten via js (color:#991b1b etc.) */
html.sg-theme-dark .alert-item [style*="color:#991b1b"],
html.sg-theme-dark .alert-item [style*="color:#9a3412"],
html.sg-theme-dark .alert-item [style*="color:#15803d"] {
  color: #f1f5f9 !important;
}
html.sg-theme-dark .alert-item [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* sg-qa-btn label: altijd donker in light mode, licht in dark mode */
.sg-qa-btn > div > div:first-child { color: #0f172a !important; }
html.sg-theme-light .sg-qa-btn > div > div:first-child { color: #0f172a !important; }
html.sg-theme-dark .sg-qa-btn > div > div:first-child { color: #f1f5f9 !important; }
html.sg-theme-dark .sg-qa-btn > div { color: #f1f5f9 !important; }
html.sg-theme-dark .sg-qa-btn { color: #f1f5f9 !important; }

/* ══════════════════════════════════════════════════════════════════
   64. CONTRAST FIX v2.0 — INLINE HEX+ALPHA COLORS (bijv. #10b98115)
   CSS attribute-selectors voor 8-cijferige HEX kleuren (hex+alpha)
══════════════════════════════════════════════════════════════════ */
/* Lichtgroene achtergrond met 8-cijferige hex (#10b98115, #10b98120 etc.) */
.sg-theme-dark [style*="background:#10b98115"],
.sg-theme-dark [style*="background:#10b98108"],
.sg-theme-dark [style*="background:#10b98120"],
.sg-theme-dark [style*="background:#10b98125"] {
  background: rgba(16,185,129,.14) !important;
}
/* Tekst kleur op die achtergrond (span met bg=#10b98120 + color=#065f46) */
.sg-theme-dark [style*="background:#10b98120"][style*="color:#065f46"] {
  color: #6ee7b7 !important;
  border-color: rgba(110,231,183,.3) !important;
}
/* Border 8-cijferig hex */
.sg-theme-dark [style*="border:1.5px solid #10b98130"],
.sg-theme-dark [style*="border: 1.5px solid #10b98130"] {
  border-color: rgba(16,185,129,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   65. CONTRAST FIX v2.0 — PIPE URGENT BADGES
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .pipe-urgent-badge[style*="background:#fce7f3"] {
  background: rgba(236,72,153,.15) !important;
  color: #f9a8d4 !important;
}
.sg-theme-dark .pipe-urgent-badge[style*="background:#fef9c3"] {
  background: rgba(234,179,8,.14) !important;
  color: #fde047 !important;
}

/* ══════════════════════════════════════════════════════════════════
   66. CONTRAST FIX v2.0 — ZZP UPGRADE BANNER (donkergroene gradient)
   Deze banner is al donker (064e3b → 059669) — prima, tekst wit laten
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:linear-gradient(135deg,#064e3b"],
.sg-theme-dark [style*="background: linear-gradient(135deg,#064e3b"] {
  /* Al donker genoeg — behoud de gradient */
}

/* ══════════════════════════════════════════════════════════════════
   67. CONTRAST FIX v2.0 — NETWORK / PROFIEL BADGE KLEUREN
   Inline badge met lichte achtergrond (bv. #10b98120 + kleur tekst)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark [style*="background:rgba(16,185,129,0.1)"],
.sg-theme-dark [style*="background: rgba(16,185,129,0.1)"],
.sg-theme-dark [style*="background:rgba(16,185,129,.1)"] {
  background: rgba(16,185,129,.18) !important;
}

/* ══════════════════════════════════════════════════════════════════
   68. ALGEMENE BODY / APP ACHTERGROND — BEIDE MODI (Fix121 v16.9.232)
══════════════════════════════════════════════════════════════════ */

/* ── LICHTE MODUS reset (Fix121) — staat vóór donkere regels ── */
.sg-theme-light body,
.sg-theme-light #app {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.sg-theme-light .topbar {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
/* Fix191: Sidebar altijd donker — ook in lichte modus */
.sg-theme-light .sidebar {
  background: linear-gradient(180deg, #0c1120 0%, #0f172a 100%) !important;
  border-right-color: rgba(255,255,255,.07) !important;
  color: #e2e8f0 !important;
}
/* Alle directe tekstelementen in de lichte sidebar wit/lichtgrijs */
/* nav-icon en i zijn uitgezonderd — kleuren komen uit sg-module-kleuren.css */
.sg-theme-light .sidebar *:not(.nav-badge):not(.nav-icon):not(i):not([class*="sgmt"]) {
  color: #cbd5e1;
}
.sg-theme-light .sidebar .nav-item         { color: #cbd5e1 !important; }
.sg-theme-light .sidebar .nav-item:hover   { color: #f1f5f9 !important; background: rgba(255,255,255,.08) !important; }
.sg-theme-light .sidebar .nav-item.active  { color: #ffffff !important; background: rgba(255,255,255,.12) !important; box-shadow: inset 3px 0 0 #e30613 !important; }
.sg-theme-light .sidebar .sidebar-brand-name { color: #f1f5f9 !important; }
.sg-theme-light .sidebar .sidebar-brand-sub  { color: #94a3b8 !important; }
.sg-theme-light .sidebar strong, .sg-theme-light .sidebar b { color: #f1f5f9 !important; }
.sg-theme-light .sidebar-header { background: #0c1120 !important; border-bottom-color: rgba(255,255,255,.07) !important; }
.sg-theme-light .sidebar-footer { background: #0a1020 !important; border-top-color: rgba(255,255,255,.07) !important; }
.sg-theme-light .sidebar-nav-section { color: #64748b !important; }
.sg-theme-light #sidebarRoleBar { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; color: #94a3b8 !important; }
.sg-theme-light .bottom-nav {
  background: #ffffff !important;
  border-top-color: #e2e8f0 !important;
}
.sg-theme-light p     { color: #374151; }
.sg-theme-light small { color: #6b7280; }

/* ── DONKERE MODUS ── */
.sg-theme-dark body,
.sg-theme-dark #app {
  background: var(--sg-bg, #0b1120) !important;
  color: #e2e8f0 !important;
}
/* Topbar */
.sg-theme-dark .topbar {
  background: #111827 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
/* Sidebar */
.sg-theme-dark .sidebar {
  background: #0f1729 !important;
  border-right-color: rgba(255,255,255,.06) !important;
}
/* Bottom nav */
.sg-theme-dark .bottom-nav {
  background: #111827 !important;
  border-top-color: rgba(255,255,255,.07) !important;
}
/* Generieke tekst kleuren */
.sg-theme-dark p     { color: #cbd5e1; }
.sg-theme-dark small { color: #94a3b8; }
.sg-theme-dark strong,
.sg-theme-dark b     { color: #f1f5f9; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE FIXES v2.0 — Bottom nav + PostBoard + witte vakken
══════════════════════════════════════════════════════════════════ */

/* ── 1. BOTTOM NAV — tekst leesbaar in dark mode ─────────────────
   --text-light = #64748b (onleesbaar op donker). Fix: lichtgrijs. */
.sg-theme-dark .bottom-nav {
  background: #111827 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
.sg-theme-dark .bottom-nav-btn {
  color: #94a3b8 !important;
}
.sg-theme-dark .bottom-nav-btn span,
.sg-theme-dark .bottom-nav-btn span:last-child {
  color: #94a3b8 !important;
}
.sg-theme-dark .bottom-nav-btn i {
  color: #94a3b8 !important;
}
.sg-theme-dark .bottom-nav-btn.active {
  color: #e30613 !important;
}
.sg-theme-dark .bottom-nav-btn.active span,
.sg-theme-dark .bottom-nav-btn.active span:last-child {
  color: #e30613 !important;
  font-weight: 700 !important;
}
.sg-theme-dark .bottom-nav-btn.active i {
  color: #e30613 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PERSOON INSTELLINGEN MODAL — dark-mode styling
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #sgPersoonModal > div {
  background: rgba(0,0,0,.7) !important;
}
.sg-theme-dark #sgPersoonSheet {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .sgpi-tabbtn {
  color: #94a3b8 !important;
  background: none !important;
}
.sg-theme-dark .sgpi-tabbtn.active {
  color: var(--wl-primary, #e30613) !important;
  border-bottom-color: var(--wl-primary, #e30613) !important;
}
.sg-theme-dark .sgpi-tabbar {
  border-bottom-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark .sgpi-row {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .sgpi-label {
  color: #f1f5f9 !important;
}
.sg-theme-dark .sgpi-sub {
  color: #64748b !important;
}
.sg-theme-dark .sgpi-offset-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .sgpi-offset-btn:hover {
  background: rgba(255,255,255,.14) !important;
}
.sg-theme-dark .sgpi-btn-ghost {
  background: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .sgpi-chip.inactive {
  background: transparent !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.2) !important;
}
.sg-theme-dark .sgpi-badge-ok {
  background: rgba(22,163,74,.15) !important;
  color: #86efac !important;
  border-color: rgba(22,163,74,.3) !important;
}
.sg-theme-dark .sgpi-badge-warn {
  background: rgba(217,119,6,.15) !important;
  color: #fcd34d !important;
  border-color: rgba(217,119,6,.3) !important;
}
.sg-theme-dark .sgpi-badge-err {
  background: rgba(220,38,38,.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(220,38,38,.3) !important;
}
/* Adres/tijd inputs in dark mode */
.sg-theme-dark #sgPersoonSheet input[type="text"],
.sg-theme-dark #sgPersoonSheet input[type="number"],
.sg-theme-dark #sgPersoonSheet input[type="time"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #sgPersoonSheet input:focus {
  border-color: var(--wl-primary, #e30613) !important;
  outline: none !important;
}

/* ── Rit-instellingen popover dark-mode ─── */
.sg-theme-dark #sgRijInstellingenPop {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgRijInstellingenPop input[type="time"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ── Starttijd offset afwijking badge dark-mode ─── */
.sg-theme-dark [title*="persoonlijke tijd"] {
  background: rgba(245,158,11,.12) !important;
  color: #fcd34d !important;
  border-color: rgba(245,158,11,.3) !important;
}

/* ── Starttijd-aanpassen popover (dashboard widget) dark-mode ── */
.sg-theme-dark #sgStarttijdPopover {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) !important;
}
.sg-theme-dark #sgStarttijdPopover input[type="time"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #sgStarttijdPopover input[type="time"]:focus {
  border-color: var(--wl-primary, #e30613) !important;
}
.sg-theme-dark #sgStarttijdPopover button[style*="#f8fafc"],
.sg-theme-dark #sgStarttijdPopover button[style*="background:var(--sg-card-alt"] {
  background: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #sgStarttijdRoute {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
}

/* ── Alarm banner (starttijd-wekker in-app fallback) dark-mode ── */
/* (Banner heeft al donkere gradient-achtergrond, geen wijziging nodig) */

/* ── Rit-instellingen knop in dashboard shifts widget dark-mode ── */
.sg-theme-dark [title*="Rit-instellingen"] {
  background: rgba(3,105,161,.2) !important;
  border-color: rgba(56,189,248,.25) !important;
  color: #7dd3fc !important;
}
.sg-theme-dark [title*="Rit-instellingen"]:hover {
  background: rgba(3,105,161,.35) !important;
}

/* ── Permissie instructiebanner in persoon-instellingen dark-mode ── */
.sg-theme-dark #sgpiPermInstructies > div {
  background: rgba(220,38,38,.12) !important;
  border-color: rgba(220,38,38,.3) !important;
  color: #fca5a5 !important;
}
.sg-theme-dark #sgpiPermInstructies ol {
  color: #cbd5e1 !important;
}
.sg-theme-dark #sgpiPermInstructies strong {
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgpiPermInstructies kbd {
  background: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 3px !important;
  padding: 1px 4px !important;
}
/* Waarschuwingsbanner (prompt-status) */
.sg-theme-dark #sgpiPermInstructies > div[style*="245,158,11"] {
  background: rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #fcd34d !important;
}
/* Herlaad-knop in instructiebanner */
.sg-theme-dark #sgpiPermInstructies button {
  background: var(--wl-primary, #e30613) !important;
  color: #fff !important;
}

/* ── Dashboard shifts: afwijking badge (offset van plan-starttijd) ── */
.sg-theme-dark #dashShiftsLijst span[style*="rgba(245,158,11"] {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.4) !important;
}

/* ══════════════════════════════════════════════════════════════════
   69. PROJECT-DETAIL TAB KNOPPEN — Dark Mode
   .tab-btn gebruikt background:white (nu #f1f5f9) → donker in dark mode.
   Kleurklassen (tab-rood/oranje/amber/blauw/paars/groen) icon-kleuren
   blijven zichtbaar; actieve tab krijgt gekleurde gradient.
══════════════════════════════════════════════════════════════════ */

/* Basis tab-btn in dark mode */
.sg-theme-dark .tab-btn {
  background: rgba(255,255,255,.07) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.sg-theme-dark .tab-btn:hover:not(.active) {
  background: rgba(255,255,255,.12) !important;
  color: #cbd5e1 !important;
}

/* Icon-kleuren bewaren in dark mode (per type) */
.sg-theme-dark .tab-btn.tab-rood   i { color: #f87171 !important; }
.sg-theme-dark .tab-btn.tab-oranje i { color: #fb923c !important; }
.sg-theme-dark .tab-btn.tab-amber  i { color: #fbbf24 !important; }
.sg-theme-dark .tab-btn.tab-blauw  i { color: #60a5fa !important; }
.sg-theme-dark .tab-btn.tab-paars  i { color: #c084fc !important; }
.sg-theme-dark .tab-btn.tab-groen  i { color: #34d399 !important; }
.sg-theme-dark .tab-btn.tab-roze   i { color: #f9a8d4 !important; }

/* Actieve tab: gekleurde gradient (zelfde als light, maar border none) */
.sg-theme-dark .tab-btn.tab-rood.active   { background: linear-gradient(135deg,#e30613,#9b0000) !important; color: #fff !important; border-color: transparent !important; }
.sg-theme-dark .tab-btn.tab-oranje.active { background: linear-gradient(135deg,#f97316,#c2410c) !important; color: #fff !important; border-color: transparent !important; }
.sg-theme-dark .tab-btn.tab-amber.active  { background: linear-gradient(135deg,#f59e0b,#b45309) !important; color: #fff !important; border-color: transparent !important; }
.sg-theme-dark .tab-btn.tab-blauw.active  { background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; color: #fff !important; border-color: transparent !important; }
.sg-theme-dark .tab-btn.tab-paars.active  { background: linear-gradient(135deg,#7c3aed,#5b21b6) !important; color: #fff !important; border-color: transparent !important; }
.sg-theme-dark .tab-btn.tab-groen.active  { background: linear-gradient(135deg,#059669,#047857) !important; color: #fff !important; border-color: transparent !important; }
.sg-theme-dark .tab-btn.tab-roze.active   { background: linear-gradient(135deg,#ec4899,#be185d) !important; color: #fff !important; border-color: transparent !important; }

/* Actieve tab zonder kleur-klasse → rode gradient (legacy) */
.sg-theme-dark .tab-btn.active:not([class*="tab-"]) {
  background: linear-gradient(135deg,#e30613,#9b0000) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Icon altijd wit in actieve tab */
.sg-theme-dark .tab-btn.active i { color: #ffffff !important; }

/* Tab balk scroll container — donkere achtergrond */
.sg-theme-dark .tab-scroll-bar,
.sg-theme-dark [id*="tabBar"],
.sg-theme-dark .tab-nav-bar {
  background: rgba(255,255,255,.04) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   70. MODULE-KLEUREN — verplaatst naar css/sg-module-kleuren.css
   Gecentraliseerd systeem met CSS custom properties per module.
   Kleuren gelden nu voor BEIDE thema's (light + dark) consistent.
   Zie css/sg-module-kleuren.css voor het volledige palet.
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   71. KLUIS VAULT-TABS — Dark Mode (v16.9.84)
   .vault-tab buttons krijgen donkere achtergrond; gekleurde icons;
   actieve tab behoudt zijn gradient maar blijft leesbaar.
══════════════════════════════════════════════════════════════════ */

/* Vault tab bar achtergrond */
.sg-theme-dark #vaultTabBar {
  background: rgba(255,255,255,.06) !important;
}

/* Basis vault-tab in dark mode */
.sg-theme-dark .vault-tab {
  color: #94a3b8 !important;
  background: none !important;
}
.sg-theme-dark .vault-tab:hover:not(.active) {
  background: rgba(255,255,255,.08) !important;
  color: #cbd5e1 !important;
}

/* Icon kleuren in dark mode (iets helderder) */
.sg-theme-dark .vault-tab-rood   i { color: #f87171 !important; }
.sg-theme-dark .vault-tab-blauw  i { color: #60a5fa !important; }
.sg-theme-dark .vault-tab-paars  i { color: #c084fc !important; }
.sg-theme-dark .vault-tab-groen  i { color: #4ade80 !important; }
.sg-theme-dark .vault-tab-cyaan  i { color: #22d3ee !important; }
.sg-theme-dark .vault-tab-emerald i { color: #34d399 !important; }
.sg-theme-dark .vault-tab-sky    i { color: #38bdf8 !important; }
.sg-theme-dark .vault-tab-indigo i { color: #a5b4fc !important; }

/* Actieve vault-tab: gradients behouden (al correct) */
.sg-theme-dark .vault-tab-rood.active   { background: linear-gradient(135deg,#e30613,#9b0000) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-blauw.active  { background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-paars.active  { background: linear-gradient(135deg,#7c3aed,#5b21b6) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-groen.active  { background: linear-gradient(135deg,#16a34a,#15803d) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-cyaan.active  { background: linear-gradient(135deg,#0891b2,#0e7490) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-emerald.active { background: linear-gradient(135deg,#059669,#047857) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-sky.active    { background: linear-gradient(135deg,#0ea5e9,#0284c7) !important; color: #fff !important; }
.sg-theme-dark .vault-tab-indigo.active { background: linear-gradient(135deg,#4f46e5,#3730a3) !important; color: #fff !important; }

/* Actieve vault-tab icon altijd wit */
.sg-theme-dark .vault-tab.active i { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════
   BOTTOM NAV — hoogte & overflow gecontroleerd door #sgBottomNavFix
   (inline <style> in index.html, laadt als eerste, wint van alles).
   Hier ALLEEN dark-mode kleuren — GEEN height/overflow overrides.
   v9.14.1: hoogte 48px definitief.
══════════════════════════════════════════════════════════════════ */
/* Geen height/overflow regels meer hier — zie index.html #sgBottomNavFix */

/* ── 2. POSTBOARD KAART — witte achtergrond → donker ────────────── */
.sg-theme-dark .pb-rij {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .pb-rij:hover {
  background: #263354 !important;
}
.sg-theme-dark #pbWidget {
  background: #151f35 !important;
}
.sg-theme-dark #pbWidget .pb-header,
.sg-theme-dark #pbWidget > div:first-child {
  background: #151f35 !important;
  border-color: rgba(255,255,255,.07) !important;
}
/* PostBoard header — amber in light mode, donker in dark mode */
.sg-theme-dark #pbWidget > div:first-child {
  background: linear-gradient(135deg,#0f172a,#1e293b) !important;
}
.sg-theme-dark #pbWidget > div:first-child [style*="color:#7c2d12"] {
  color: white !important;
}
.sg-theme-dark #pbWidget > div:first-child [style*="color:rgba(124,45,18"] {
  color: rgba(255,255,255,.5) !important;
}
.sg-theme-dark #pbWidget > div:first-child button {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.8) !important;
}

/* PostBoard inline-style witte achtergronden — compleet */
.sg-theme-dark #pbWidget [style*="background:#fff"],
.sg-theme-dark #pbWidget [style*="background: #fff"],
.sg-theme-dark #pbWidget [style*="background:white"],
.sg-theme-dark #pbWidget [style*="background: white"],
.sg-theme-dark #pbWidget [style*="background:#ffffff"],
.sg-theme-dark #pbWidget [style*="background: #ffffff"],
.sg-theme-dark #pbWidget [style*="background:#f8fafc"],
.sg-theme-dark #pbWidget [style*="background: #f8fafc"],
.sg-theme-dark #pbWidget [style*="background:#fafffe"],
.sg-theme-dark #pbWidget [style*="background:#fffbeb"] {
  background: #1e2940 !important;
}
/* PostBoard filterbalk (altijd donker, ongeacht achtergrond) */
.sg-theme-dark #pbWidget > div:nth-child(2) {
  background: #151f35 !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* PostBoard rij-hover en border */
.sg-theme-dark #pbWidget .pb-rij {
  background: #1e2940 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
.sg-theme-dark #pbWidget .pb-rij:hover {
  background: #243352 !important;
}
/* PostBoard teksten */
.sg-theme-dark #pbWidget [style*="color:#0f172a"],
.sg-theme-dark #pbWidget [style*="color:#374151"],
.sg-theme-dark #pbWidget [style*="color:#1e293b"],
.sg-theme-dark #pbWidget [style*="color:#111"],
.sg-theme-dark #pbWidget [style*="color:#475569"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark #pbWidget [style*="color:#64748b"],
.sg-theme-dark #pbWidget [style*="color:#6b7280"],
.sg-theme-dark #pbWidget [style*="color:#94a3b8"] {
  color: #94a3b8 !important;
}
/* PostBoard inputs in filterbalk */
.sg-theme-dark #pbWidgetZoek,
.sg-theme-dark #pbWidgetLoc {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
}

/* ── 3. ALGEMENE WITTE KAARTEN — class-gebaseerd ────────────────── */
.sg-theme-dark .card,
.sg-theme-dark .kaart,
.sg-theme-dark .widget,
.sg-theme-dark .panel {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f1f5f9 !important;
}

/* ── 4. HARDCODED WITTE ACHTERGRONDEN (background-color alleen, geen gradient) ──────────── */
.sg-theme-dark [style*="background-color:#fff"],
.sg-theme-dark [style*="background-color: #fff"],
.sg-theme-dark [style*="background-color:white"],
.sg-theme-dark [style*="background-color: white"],
.sg-theme-dark [style*="background-color:#ffffff"],
.sg-theme-dark [style*="background-color: #ffffff"] {
  background-color: #1e2940 !important;
}

/* ── 5. DARK TEKST OP DONKERE ACHTERGROND — leesbaar maken ──────── */
.sg-theme-dark [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
.sg-theme-dark [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}
.sg-theme-dark [style*="color:#111;"],
.sg-theme-dark [style*="color:#111\""],
.sg-theme-dark [style*="color:#111 "] {
  color: #f1f5f9 !important;
}
.sg-theme-dark [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE FIXES v3.0 — GPS Widget + Dashboard quick-buttons
══════════════════════════════════════════════════════════════════ */

/* ── GPS Tracker Dashboard Widget ─────────────────────────────── */
.sg-theme-dark .gpt-dash-widget {
  background: #151f35 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark .gpt-dash-widget-hdr {
  background: #1a2540 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark .gpt-dash-widget-title {
  color: #e2e8f0 !important;
}
.sg-theme-dark .gpt-dash-widget-body {
  background: #151f35 !important;
}
.sg-theme-dark .gpt-dash-empty {
  color: #64748b !important;
}
.sg-theme-dark .gpt-dash-widget-link {
  color: #f87171 !important;
}
.sg-theme-dark .gpt-dash-widget-link:hover {
  background: rgba(227,6,19,.12) !important;
}
.sg-theme-dark #dashGpsWidgetBody {
  background: #151f35 !important;
  color: #94a3b8 !important;
}
.sg-theme-dark #dashGpsTrackerWidget {
  background: #151f35 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── Dashboard snelle-acties knoppen ──────────────────────────── */
.sg-theme-dark .dashboard-quick-btn {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .dashboard-quick-btn:hover {
  background: #263348 !important;
  border-color: rgba(255,255,255,.14) !important;
}
.sg-theme-dark .dashboard-quick-btn span,
.sg-theme-dark .dashboard-quick-btn small {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   BETAALPROVIDER PANEL — dark-mode overrides v9.25.1
   Targets inline-style elements rendered by sg-betaalprovider.js
══════════════════════════════════════════════════════════════════ */

/* ── CSS custom props used by JS _statBox / addon cards ────────── */
.sg-theme-dark {
  --sg-bp-card:        #1e2940;
  --sg-bp-card-actief: #162a40;
}

/* ── Stat boxes (totale omzet, 30dgn, betalingen, credits) ─────── */
.sg-theme-dark #betaalPane-log [style*="background:#fff"],
.sg-theme-dark #betaalPane-log [style*="background: #fff"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ── Betalingen log table rows ──────────────────────────────────── */
.sg-theme-dark #betaalPane-log [style*="background:#fff"],
.sg-theme-dark #betaalPane-log [style*="background:#fafafa"] {
  background: transparent !important;
}
.sg-theme-dark #betaalPane-log [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #betaalPane-log [style*="color:#111"] {
  color: #f1f5f9 !important;
}

/* ── Credits pane ───────────────────────────────────────────────── */
.sg-theme-dark #betaalPane-credits [style*="background:#fff"],
.sg-theme-dark #betaalPane-credits [style*="background: #fff"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark #betaalPane-credits tr[style*="border-bottom"] {
  border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ── Pakketten form card backgrounds ────────────────────────────── */
.sg-theme-dark #betaalPane-pakketten [style*="background:#fff"],
.sg-theme-dark #betaalPane-pakketten [style*="background: #fff"] {
  background: #1a2535 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ── Webhook pane — Mollie warning block ────────────────────────── */
.sg-theme-dark #betaalPane-webhook [style*="background:#fff7f5"] {
  background: rgba(254,215,170,.06) !important;
  border-color: rgba(254,215,170,.2) !important;
  color: #fcd34d !important;
}
.sg-theme-dark #betaalPane-webhook [style*="background:#fff"],
.sg-theme-dark #betaalPane-webhook [style*="background: #fff"] {
  background: #1a2535 !important;
}
.sg-theme-dark #betaalPane-webhook code[style*="color:#374151"] {
  color: #e2e8f0 !important;
}

/* ── Boekhouding pane ───────────────────────────────────────────── */
.sg-theme-dark #betaalPane-boekhouding [style*="background:#fff"],
.sg-theme-dark #betaalPane-boekhouding [style*="background: #fff"] {
  background: #1a2535 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.sg-theme-dark #betaalPane-boekhouding input[type="date"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
  color-scheme: dark;
}
/* Step-list text */
.sg-theme-dark #betaalPane-boekhouding [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #betaalPane-boekhouding [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}

/* ── Uitbreidingen summary ──────────────────────────────────────── */
.sg-theme-dark .sg-bp-summary [style*="color:#374151"] {
  color: #cbd5e1 !important;
}

/* ── Actieve pakketten grid (f8fafc default card bg) ────────────── */
.sg-theme-dark [style*="background:#f8fafc"] {
  background: rgba(255,255,255,.04) !important;
  color: #e2e8f0 !important;
}
/* …but NOT gradient headers or accent backgrounds */
.sg-theme-dark [style*="background:linear-gradient"] {
  /* keep — already dark */
}

/* ── Tab strip: inactive tabs readable in dark mode ────────────── */
.sg-theme-dark .betaal-sub-tab {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Fix121b — DATA-THEME BACKUP: ALLEEN via .sg-theme-dark KLASSE (v16.9.232)
   ─────────────────────────────────────────────────────────────────
   Fix120 (data-theme attribuut als CSS selector) verwijderd omdat:
   - data-theme="dark" stond hardcoded in HTML en werd niet geüpdated bij toggle
   - !important regels bleven actief in lichte modus → witte achtergrond verdween
   Fix121a in sg-theme.js: _applyTheme() update nu data-theme bij elke wissel.
   Backup werkt nu via .sg-theme-dark klasse (altijd gesynchroniseerd).
   CSS vars backup: alleen via :root inline-style (vroeg inline script in index.html).
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .betaal-sub-tab:hover {
  color: #e2e8f0 !important;
  background: rgba(255,255,255,.04) !important;
}

/* ══════════════════════════════════════════════════════════════════
   BETAAL DREIGING OVERLAY — dark-mode body overrides v9.25.6
   De modal-kaart zelf blijft wit (design intent: hoog contrast op
   de rode/oranje gradient-header). Alleen body-tekst en info-boxen
   krijgen dark-mode behandeling via CSS custom properties.
══════════════════════════════════════════════════════════════════ */

/* Modal-kaart body: donker in dark-mode */
.sg-theme-dark #sgBetaalDreiging > div,
.sg-theme-dark #sgBetaalDreiging_Staff > div {
  background: #1e2940 !important;
  color: #e2e8f0 !important;
}

/* Body-tekst in dreiging overlay */
.sg-theme-dark #sgBetaalDreiging [style*="color:#374151"],
.sg-theme-dark #sgBetaalDreiging_Staff [style*="color:#374151"] {
  color: #cbd5e1 !important;
}

/* Muted tekst */
.sg-theme-dark #sgBetaalDreiging [style*="color:#6b7280"],
.sg-theme-dark #sgBetaalDreiging_Staff [style*="color:#6b7280"],
.sg-theme-dark #sgBetaalDreiging [style*="color:#9ca3af"],
.sg-theme-dark #sgBetaalDreiging_Staff [style*="color:#9ca3af"] {
  color: #94a3b8 !important;
}

/* Grace/info boxen: rode tint-box */
.sg-theme-dark #sgBetaalDreiging [style*="background:#fef2f2"],
.sg-theme-dark #sgBetaalDreiging_Staff [style*="background:#fef2f2"] {
  background: rgba(220,38,38,.12) !important;
  border-color: rgba(220,38,38,.25) !important;
}
.sg-theme-dark #sgBetaalDreiging [style*="color:#991b1b"],
.sg-theme-dark #sgBetaalDreiging_Staff [style*="color:#991b1b"] {
  color: #fca5a5 !important;
}

/* Gele "Wat kan ik doen?" box */
.sg-theme-dark #sgBetaalDreiging_Staff [style*="background:#fffbeb"] {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.25) !important;
}
.sg-theme-dark #sgBetaalDreiging_Staff [style*="color:#92400e"],
.sg-theme-dark #sgBetaalDreiging_Staff [style*="color:#b45309"] {
  color: #fcd34d !important;
}

/* Grace knop "beperkte toegang" border */
.sg-theme-dark #sgBetaalDreiging [style*="border:1.5px solid #e5e7eb"] {
  border-color: rgba(255,255,255,.12) !important;
  color: #94a3b8 !important;
}

/* "Geblokkeerd voor jou" items */
.sg-theme-dark #sgBetaalDreiging_Staff [style*="background:#fef2f2"][style*="border:1px solid #fecaca"] {
  background: rgba(220,38,38,.10) !important;
  border-color: rgba(220,38,38,.2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SP BESCHIKBAARHEID — dark-mode overrides v9.25.6
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sp-besch-card,
.sg-theme-dark [class*="sp-beschikbaar"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   MARKTPLAATS — dark-mode overrides v9.25.6
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .markt-card,
.sg-theme-dark .markt-opdracht-card,
.sg-theme-dark [class*="markt-"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .markt-card [style*="color:#374151"],
.sg-theme-dark .markt-opdracht-card [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark .markt-card [style*="color:#6b7280"],
.sg-theme-dark .markt-opdracht-card [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}
.sg-theme-dark .markt-card [style*="background:#f8fafc"],
.sg-theme-dark .markt-opdracht-card [style*="background:#f8fafc"] {
  background: rgba(255,255,255,.04) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CREDIT LOG TABEL — dark-mode overrides v9.25.6
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .credit-log-row,
.sg-theme-dark [id*="creditLog"] tr,
.sg-theme-dark [id*="creditsLog"] tr {
  border-bottom-color: rgba(255,255,255,.05) !important;
  color: #cbd5e1 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PLANNING BOARD extra — dark-mode overrides v9.25.6
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .plan-persoon-kaart [style*="background:#fff"],
.sg-theme-dark .plan-persoon-kaart [style*="background:#f8fafc"] {
  background: #1e2940 !important;
}
.sg-theme-dark .plan-dag-header {
  background: #111827 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── Koppeling form: SEPA / ZZP input dark bg ───────────────────── */
.sg-theme-dark #betaalPane-koppeling input[type="text"],
.sg-theme-dark #betaalPane-koppeling input[type="number"],
.sg-theme-dark #betaalPane-koppeling input[type="password"],
.sg-theme-dark #betaalPane-koppeling select {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MODULE TILE CARDS — donkere achtergrond, leesbare tekst
   (snelle-acties, dashboard module-knoppen, module-grid tiles)
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .module-tile,
.sg-theme-dark .module-card,
.sg-theme-dark .snelle-actie,
.sg-theme-dark .snelle-acties-item,
.sg-theme-dark .quick-action-tile {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .module-tile:hover,
.sg-theme-dark .module-card:hover,
.sg-theme-dark .snelle-actie:hover,
.sg-theme-dark .quick-action-tile:hover {
  background: #263354 !important;
  border-color: rgba(255,255,255,.14) !important;
}
.sg-theme-dark .module-tile .tile-label,
.sg-theme-dark .module-card .card-title,
.sg-theme-dark .snelle-actie span,
.sg-theme-dark .quick-action-tile span {
  color: #e2e8f0 !important;
}
.sg-theme-dark .module-tile .tile-sub,
.sg-theme-dark .module-card .card-sub,
.sg-theme-dark .snelle-actie small,
.sg-theme-dark .quick-action-tile small {
  color: #94a3b8 !important;
}

/* ── Snelle-acties panel container ─────────────────────────────── */
.sg-theme-dark #snelleActiesPanel,
.sg-theme-dark .snelle-acties-panel,
.sg-theme-dark #dashSnelleActies {
  background: #151f35 !important;
  border-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark #snelleActiesPanel h3,
.sg-theme-dark #snelleActiesPanel .panel-title,
.sg-theme-dark .snelle-acties-panel h3 {
  color: #e2e8f0 !important;
}

/* ── Dashboard kaarten / widgets: witte inline-bg overrides ─────── */
.sg-theme-dark #dashboardContent [style*="background:#fff"],
.sg-theme-dark #dashboardContent [style*="background: #fff"],
.sg-theme-dark #dashboardContent [style*="background:#ffffff"] {
  background: #1e2940 !important;
}
.sg-theme-dark #dashboardContent [style*="background:#f8fafc"],
.sg-theme-dark #dashboardContent [style*="background: #f8fafc"] {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark #dashboardContent [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #dashboardContent [style*="color:#6b7280"],
.sg-theme-dark #dashboardContent [style*="color:#9ca3af"] {
  color: #94a3b8 !important;
}
.sg-theme-dark #dashboardContent [style*="color:#111"] {
  color: #f1f5f9 !important;
}
/* Borders */
.sg-theme-dark #dashboardContent [style*="border:1.5px solid #e5e7eb"],
.sg-theme-dark #dashboardContent [style*="border: 1.5px solid #e5e7eb"],
.sg-theme-dark #dashboardContent [style*="border:1px solid #e5e7eb"] {
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CARPOOL / TEAM-PICKUP WIDGET — dark-mode (lichtblauwe gradient → donker)
   app.js rendert inline: background:linear-gradient(135deg,#f0f9ff,#e0f2fe)
   border: 1.5px solid #bae6fd  —  tekst: #0c4a6e / #0369a1
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #dashCarpoolWidget [style*="background:linear-gradient(135deg,#f0f9ff"],
.sg-theme-dark #dashCarpoolWidget [style*="background: linear-gradient(135deg,#f0f9ff"] {
  background: linear-gradient(135deg,#0c1e35,#0a2540) !important;
  border-color: rgba(8,145,178,.35) !important;
}
/* Titel + subtitel tekst donker → licht */
.sg-theme-dark #dashCarpoolWidget [style*="color:#0c4a6e"] {
  color: #7dd3fc !important;
}
.sg-theme-dark #dashCarpoolWidget [style*="color:#0369a1"] {
  color: #38bdf8 !important;
}
/* Statistieken-blokjes binnen de widget */
.sg-theme-dark #dashCarpoolWidget [style*="background:#e0f2fe"],
.sg-theme-dark #dashCarpoolWidget [style*="background: #e0f2fe"],
.sg-theme-dark #dashCarpoolWidget [style*="background:#f0f9ff"],
.sg-theme-dark #dashCarpoolWidget [style*="background: #f0f9ff"] {
  background: rgba(8,145,178,.12) !important;
  border-color: rgba(8,145,178,.25) !important;
}
/* Getallen en labels in stat-blokjes */
.sg-theme-dark #dashCarpoolWidget [style*="color:#0891b2"],
.sg-theme-dark #dashCarpoolWidget [style*="color:#0284c7"] {
  color: #22d3ee !important;
}
.sg-theme-dark #dashCarpoolWidget [style*="color:#64748b"],
.sg-theme-dark #dashCarpoolWidget [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}
/* SGCarpool.renderWidget() output (als module wél geladen is) */
.sg-theme-dark #dashCarpoolWidgetInner [style*="background:#fff"],
.sg-theme-dark #dashCarpoolWidgetInner [style*="background: #fff"],
.sg-theme-dark #dashCarpoolWidgetInner [style*="background:linear-gradient(135deg,#f0f9ff"] {
  background: #0c1e35 !important;
  border-color: rgba(8,145,178,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SNELLE ACTIES KAART — de .card wrapper heeft een witte achtergrond
   in light-mode; in dark-mode moet hij donker worden.
   dashboardQuickActions rendert: <div class="card" style="padding:16px">
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #dashboardQuickActions .card {
  background: #1a2535 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
/* Heading "Snelle acties" — var(--text-light) is in light-mode grijs,
   in dark mode de CSS-variabele al donker-proof via theme engine,
   maar als fallback: */
.sg-theme-dark #dashboardQuickActions .card > div:first-child {
  color: #94a3b8 !important;
}
/* sg-qa-btn al dark via regel 1259, maar border-radius guard: */
.sg-theme-dark #dashboardQuickActions .sg-qa-btn {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   TEKST-SELECTIE — leesbaar in light én dark mode
══════════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(227,6,19,.25);
  color: inherit;
}
html.sg-theme-dark ::selection {
  background: rgba(59,130,246,.40);
  color: #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════════
   CARPOOL WIDGET — herstel zichtbaarheid in dark mode
   (brede [style*="background:#fff"] override slokte gradient op)
══════════════════════════════════════════════════════════════════ */
/* Wrapper: lichtblauwe gradient → donkerblauw */
.sg-theme-dark #dashCarpoolWidget > div {
  background: linear-gradient(135deg,#0c1e35,#0a2540) !important;
  border-color: rgba(8,145,178,.35) !important;
}
/* Knop-stijl intact houden (heeft al donkere gradient) */
.sg-theme-dark #dashCarpoolWidget button[style*="background:linear-gradient(135deg,#0891b2"] {
  background: linear-gradient(135deg,#0891b2,#0c4a6e) !important;
  color: white !important;
}
/* Teksten */
.sg-theme-dark #dashCarpoolWidget [style*="color:#0c4a6e"] { color: #7dd3fc !important; }
.sg-theme-dark #dashCarpoolWidget [style*="color:#0369a1"] { color: #38bdf8 !important; }

/* ══════════════════════════════════════════════════════════════════
   APP INSTELLINGEN MODULE — witte vlakken donker maken
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark #moduleAppInstellingen [style*="background:#fff"],
.sg-theme-dark #moduleAppInstellingen [style*="background: #fff"],
.sg-theme-dark #paneelAppInstellingen [style*="background:#fff"],
.sg-theme-dark #paneelAppInstellingen [style*="background: #fff"] {
  background: #1a2535 !important;
}
.sg-theme-dark #moduleAppInstellingen input,
.sg-theme-dark #moduleAppInstellingen select,
.sg-theme-dark #moduleAppInstellingen textarea,
.sg-theme-dark #paneelAppInstellingen input,
.sg-theme-dark #paneelAppInstellingen select,
.sg-theme-dark #paneelAppInstellingen textarea {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CHAT & TEAM SECTIE — dark-mode v1.6
   Dekt: gesprekkenlijst, zoekbalk, tab-balk, contactenlijst,
         chatoverlay, berichten-vlak, invoerbalk, pill-knoppen,
         lege staat, status-popup, settings-panel (chat-location.js)
══════════════════════════════════════════════════════════════════ */

/* ── Gesprekkenlijst wrapper (#tcConvList) ───────────────────────── */
.sg-theme-dark #tcConvList {
  background: #0f172a !important;
}
/* Extra zekerheid: ook de directe child-divs die var(--bg) gebruiken */
.sg-theme-dark #tcConvList > div {
  background: #0f172a !important;
}

/* ── Zoekbalk rij ────────────────────────────────────────────────── */
.sg-theme-dark #tcConvList > div[style*="background:var(--bg"],
.sg-theme-dark #tcConvList > div[style*="background: var(--bg"],
.sg-theme-dark #tcConvList > div[style*="background:var(--chat"] {
  background: #0f172a !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
/* Zoekbalk input-container (wit vlak) */
.sg-theme-dark #tcConvList div[style*="background:var(--card"],
.sg-theme-dark #tcConvList div[style*="background:var(--chat-card"] {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Zoekbalk input zelf */
.sg-theme-dark #tcSearchInput {
  background: transparent !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark #tcSearchInput::placeholder { color: #475569 !important; }
.sg-theme-dark #tcSearchClear { color: #64748b !important; }

/* ── Tab-balk (Alles / Projecten / Personen) ─────────────────────── */
.sg-theme-dark #tcConvList > div[style*="background:var(--card"],
.sg-theme-dark #tcConvList > div[style*="background:var(--chat-card"],
.sg-theme-dark #tcConvList > div[style*="display:flex;gap:0"] {
  background: #111827 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.sg-theme-dark #tcTabAll,
.sg-theme-dark #tcTabGroups,
.sg-theme-dark #tcTabDMs {
  background: transparent !important;
  color: #64748b !important;
}
.sg-theme-dark #tcTabAll[style*="color:var(--primary)"],
.sg-theme-dark #tcTabAll[style*="border-bottom:3px solid var(--primary)"] {
  color: #f87171 !important;
}

/* ── Contactenlijst (#tcNavContactList) — inline-rendered rijen ──── */
.sg-theme-dark #tcNavContactList {
  background: #0f172a !important;
}
/* Contact-rijen: inline style "display:flex;...padding:10px 14px" */
.sg-theme-dark #tcNavContactList > div[onclick] {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark #tcNavContactList > div[onclick]:hover {
  background: rgba(255,255,255,.04) !important;
}
/* Naam-tekst in contactrijen: hardcoded var(--text) */
.sg-theme-dark #tcNavContactList [style*="color:var(--text)"],
.sg-theme-dark #tcNavContactList [style*="color: var(--text)"] {
  color: #e2e8f0 !important;
}
/* Preview-tekst (grijs) */
.sg-theme-dark #tcNavContactList [style*="color:var(--text-light)"],
.sg-theme-dark #tcNavContactList [style*="color:#94a3b8"] {
  color: #4b5e7a !important;
}
/* Lege-staat tekst ("Nog geen verbindingen") */
.sg-theme-dark #tcNavContactList > div[style*="text-align:center"] {
  background: #0f172a !important;
  color: #4b5e7a !important;
}

/* tc-conv-item class (bestaande chat-items) */
.sg-theme-dark .tc-conv-item {
  background: #0f172a !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
}
.sg-theme-dark .tc-conv-item:hover { background: #1a2540 !important; }
.sg-theme-dark .tc-conv-item.active {
  background: rgba(227,6,19,.08) !important;
  border-left-color: #e30613 !important;
}
.sg-theme-dark .tc-conv-name { color: #e2e8f0 !important; }
.sg-theme-dark .tc-conv-preview,
.sg-theme-dark .tc-conv-time  { color: #4b5e7a !important; }

/* ── Mijn profiel balk (onderaan gesprekkenlijst) ────────────────── */
/* Al donker (linear-gradient #0f172a → #1e293b) — geen override nodig */
/* Status-popup */
.sg-theme-dark #tcStatusPopup {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark .tc-status-opt {
  color: #e2e8f0 !important;
}
.sg-theme-dark #tcStatusCustomInput {
  background: #0f172a !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark #tcStatusCustomInput::placeholder { color: #475569 !important; }

/* ── Chat Overlay (#tcChatOverlay) ──────────────────────────────── */
.sg-theme-dark #tcChatOverlay,
.sg-theme-dark #tcChatOverlay.tc-open {
  background: #0f172a !important;
}

/* ── Chat Header — v16.9.32: nu light-first, dark-mode override hier ── */
.sg-theme-dark #tcChatHeader {
  background: #111827 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
/* Terug-knop in dark mode */
.sg-theme-dark #tcChatBackBtn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
}
/* Naam + status in header */
.sg-theme-dark #tcNavChatName  { color: #f1f5f9 !important; }
.sg-theme-dark #tcNavChatStatus { color: rgba(255,255,255,.45) !important; }
/* Avatar border in header */
.sg-theme-dark #tcNavAvatar {
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

/* ── Profiel-balk onderaan (koen/Online) — v16.9.32: light-first, dark override ── */
.sg-theme-dark #tcNavMeBar {
  background: linear-gradient(135deg,#0f172a,#1e293b) !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
.sg-theme-dark #tcNavMeName { color: rgba(255,255,255,.92) !important; }
/* Status-dot border in dark mode */
.sg-theme-dark #tcNavStatusDot { border-color: #1e293b !important; }
/* Avatar border in profiel-balk */
.sg-theme-dark #tcNavMeAvatar { border-color: rgba(255,255,255,.2) !important; }

/* ── Chat header actie-knoppen dark mode ─────────────────────────── */
.sg-theme-dark .tc-hdr-action--groen  { background:rgba(22,163,74,.18)  !important; color:#4ade80 !important; }
.sg-theme-dark .tc-hdr-action--paars  { background:rgba(124,58,237,.18) !important; color:#a78bfa !important; }
.sg-theme-dark .tc-hdr-action--blauw  { background:rgba(37,99,235,.18)  !important; color:#60a5fa !important; }
.sg-theme-dark .tc-hdr-action--oranje { background:rgba(234,88,12,.18)  !important; color:#fb923c !important; }
.sg-theme-dark .tc-hdr-action--groen2 { background:rgba(5,150,105,.18)  !important; color:#34d399 !important; }
.sg-theme-dark .tc-hdr-action:hover   { opacity:.85 !important; }

/* ══════════════════════════════════════════════════════════════════
   MKT-MODAL ALGEMEEN — dark mode voor alle .mkt-modal-* modals
   ══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .mkt-modal-sheet  { background: #1e293b !important; color: #e2e8f0 !important; }
.sg-theme-dark .mkt-modal-body   { background: #1e293b !important; color: #e2e8f0 !important; }
.sg-theme-dark .mkt-modal-header { background: var(--card,#111827) !important; border-bottom-color: rgba(255,255,255,.07) !important; }
.sg-theme-dark .mkt-modal-header strong { color: #f1f5f9 !important; }
.sg-theme-dark .mkt-modal-close  { background: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; }
.sg-theme-dark .mkt-modal-close:hover { background: rgba(255,255,255,.14) !important; }

/* ══════════════════════════════════════════════════════════════════
   CREDITS KOPEN MODAL — dark mode + consistente light mode
   ══════════════════════════════════════════════════════════════════ */

/* Light mode: modal sheet wit, body wit */
#sgCreditShopModal .mkt-modal-sheet {
  background: var(--card,#fff) !important;
}
#sgCreditShopModal .mkt-modal-body {
  background: var(--card,#fff) !important;
}

/* Dark mode: sheet + body donker */
.sg-theme-dark #sgCreditShopModal .mkt-modal-sheet {
  background: #1e293b !important;
}
.sg-theme-dark #sgCreditShopModal .mkt-modal-body {
  background: #1e293b !important;
}

/* Tekst in body */
.sg-theme-dark #sgCreditShopModal .mkt-modal-body,
.sg-theme-dark #sgCreditShopModal .mkt-modal-body span,
.sg-theme-dark #sgCreditShopModal .mkt-modal-body p,
.sg-theme-dark #sgCreditShopModal .mkt-modal-body div {
  color: #e2e8f0 !important;
}

/* Hardcoded donkere tekst kleuren */
.sg-theme-dark #sgCreditShopModal [style*="color:#111"],
.sg-theme-dark #sgCreditShopModal [style*="color: #111"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgCreditShopModal [style*="color:#333"] { color: #e2e8f0 !important; }
.sg-theme-dark #sgCreditShopModal [style*="color:#555"] { color: #94a3b8 !important; }
.sg-theme-dark #sgCreditShopModal [style*="color:#666"] { color: #94a3b8 !important; }
.sg-theme-dark #sgCreditShopModal [style*="color:#888"] { color: #64748b !important; }
.sg-theme-dark #sgCreditShopModal [style*="color:#aaa"] { color: #475569 !important; }

/* Hardcoded witte achtergronden */
.sg-theme-dark #sgCreditShopModal [style*="background:#fff"],
.sg-theme-dark #sgCreditShopModal [style*="background: #fff"],
.sg-theme-dark #sgCreditShopModal [style*="background:#ffffff"],
.sg-theme-dark #sgCreditShopModal [style*="background:white"] {
  background: #273549 !important;
}
.sg-theme-dark #sgCreditShopModal [style*="background:#fafafa"] { background: #1e2d3d !important; }
.sg-theme-dark #sgCreditShopModal [style*="background:#f8fafc"] { background: #1e2d3d !important; }

/* Lichte pastel achtergronden in dark */
.sg-theme-dark #sgCreditShopModal [style*="background:#fffbeb"] { background: rgba(245,158,11,.1) !important; }
.sg-theme-dark #sgCreditShopModal [style*="background:#f0fdf4"] { background: rgba(22,163,74,.1)  !important; }
.sg-theme-dark #sgCreditShopModal [style*="background:#fff8f8"],
.sg-theme-dark #sgCreditShopModal [style*="background:#fff5f5"] { background: rgba(227,6,19,.1)   !important; }
.sg-theme-dark #sgCreditShopModal [style*="background:#eff6ff"] { background: rgba(59,130,246,.1) !important; }

/* Borders */
.sg-theme-dark #sgCreditShopModal [style*="border-bottom:1px solid #bbf7d0"] { border-bottom-color: rgba(34,197,94,.2)  !important; }
.sg-theme-dark #sgCreditShopModal [style*="border-bottom:1px solid #fecaca"] { border-bottom-color: rgba(227,6,19,.2)   !important; }
.sg-theme-dark #sgCreditShopModal [style*="border:1px solid #bfdbfe"]        { border-color: rgba(59,130,246,.25)        !important; }
.sg-theme-dark #sgCreditShopModal [style*="border:1px solid #f0f0f0"],
.sg-theme-dark #sgCreditShopModal [style*="border:1px solid #e0e0e0"],
.sg-theme-dark #sgCreditShopModal [style*="border:1.5px solid #e0e0e0"]      { border-color: rgba(255,255,255,.1)        !important; }
.sg-theme-dark #sgCreditShopModal [style*="border-top:1px solid #e0e0e0"]    { border-top-color: rgba(255,255,255,.08)   !important; }
.sg-theme-dark #sgCreditShopModal [style*="border-top:1px solid #fde68a"]    { border-top-color: rgba(245,158,11,.25)    !important; }

/* Betaalkaart labels — geselecteerde border behouden */
.sg-theme-dark #sgCreditShopModal label[id^="payLabel_"],
.sg-theme-dark #sgCreditShopModal label[id^="slotPayLabel_"] {
  background: #273549 !important;
}

/* Terug-knop */
.sg-theme-dark #sgCreditShopModal [style*="background:transparent"] {
  background: rgba(255,255,255,.05) !important;
  color: #e2e8f0 !important;
}

/* Prijs-breakdown vlak */
.sg-theme-dark #sgCreditShopModal [style*="background:#fafafa;border:1px solid #f0f0f0"] {
  background: #1a2840 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Sectie-label uppercase */
.sg-theme-dark #sgCreditShopModal [style*="text-transform:uppercase"] { color: #64748b !important; }

/* Abonnement info blok (blauw) */
.sg-theme-dark #sgCreditShopModal [style*="background:#eff6ff;border:1px solid #bfdbfe"] {
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(59,130,246,.25) !important;
}
.sg-theme-dark #sgCreditShopModal [style*="color:#1e40af"] { color: #93c5fd !important; }
.sg-theme-dark #sgCreditShopModal [style*="color:#1d4ed8"] { color: #60a5fa !important; }

/* Bundel kaartjes grid */
.sg-theme-dark #sgCreditShopModal [style*="border:2px solid #e5e7eb"] {
  background: #273549 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Connectie-uitleg strook (geel) */
.sg-theme-dark #sgCreditShopModal [style*="background:#fffbeb;border:1px solid #fde68a"] {
  background: rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.25) !important;
}
.sg-theme-dark #sgCreditShopModal [style*="color:#92400e"] { color: #fcd34d !important; }

/* ── Urenregistratie header sticky — dark mode ───────────────────── */
.sg-theme-dark #sec-tijden > div:first-child {
  background: var(--card,#1e293b) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.sg-theme-dark #sec-tijden > div:first-child h2 { color: #f1f5f9 !important; }
.sg-theme-dark #sec-tijden > div:first-child p   { color: #64748b !important; }

/* ── Berichten-vlak (#tcChatMessages) ───────────────────────────── */
.sg-theme-dark #tcChatMessages {
  background: #0f172a !important;
}
/* Alle directe children van messages ook donker */
.sg-theme-dark #tcChatMessages > div:not(#tcNavMsgList) {
  background: #0f172a !important;
}
/* Lege staat: "Nog geen berichten" */
.sg-theme-dark #tcChatMessages > div[style*="text-align:center"],
.sg-theme-dark #tcChatMessages [style*="Nog geen berichten"] {
  color: #4b5e7a !important;
}
/* Chat-bubbles: eigen berichten (rechts) */
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-end"] > div[style*="background:#e30613"],
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-end"] > div[style*="background:var(--primary)"] {
  /* eigen berichten: behoud rode kleur — licht aanpassen */
  box-shadow: 0 2px 8px rgba(227,6,19,.25) !important;
}
/* Chat-bubbles: ontvangen berichten (links) — hardcoded witte/lichte bg */
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-start"] > div[style*="background:#fff"],
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-start"] > div[style*="background:white"],
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-start"] > div[style*="background:#f8fafc"],
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-start"] > div[style*="background:#f1f5f9"],
.sg-theme-dark #tcNavMsgList [style*="align-items:flex-start"] > div[style*="background:var(--card)"] {
  background: #1a2540 !important;
  color: #e2e8f0 !important;
}
/* Tijdstempel van berichten */
.sg-theme-dark #tcNavMsgList [style*="color:#94a3b8"],
.sg-theme-dark #tcNavMsgList [style*="color:#64748b"],
.sg-theme-dark #tcNavMsgList [style*="color:var(--text-light)"] {
  color: #4b5e7a !important;
}
/* Afzender-naam boven bubble (groepschat) */
.sg-theme-dark #tcNavMsgList [style*="font-size:.63rem"],
.sg-theme-dark #tcNavMsgList [style*="font-size:.65rem"] {
  color: #64748b !important;
}
/* Systeem-berichten (italic, gecentreerd) */
.sg-theme-dark #tcNavMsgList [style*="font-style:italic"],
.sg-theme-dark #tcNavMsgList [style*="font-style: italic"] {
  color: #475569 !important;
}

/* ── Invoerbalk (#tcChatInputBar) ────────────────────────────────── */
.sg-theme-dark #tcChatInputBar {
  background: #111827 !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
/* Alle child-divs in invoerbalk ook donker */
.sg-theme-dark #tcChatInputBar > div {
  background: #111827 !important;
}

/* ── Extra-acties rij (Locatie / GPS / Bellen / WhatsApp / Bestand) */
.sg-theme-dark #tcChatExtraActions {
  background: #111827 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
/* ALLE knoppen in extra-acties rij: universele donkere stijl voor grijze/neutrale knoppen */
.sg-theme-dark #tcChatExtraActions button[style*="background:var(--bg)"],
.sg-theme-dark #tcChatExtraActions button[style*="background: var(--bg)"],
.sg-theme-dark #tcChatExtraActions button[style*="background:#f8fafc"],
.sg-theme-dark #tcChatExtraActions button[style*="background:var(--chat-pill)"] {
  background: #1a2540 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Bellen-knop */
.sg-theme-dark #tcChatExtraActions button[style*="color:var(--text)"],
.sg-theme-dark #tcChatExtraActions button[style*="color:var(--chat-text)"] {
  color: #cbd5e1 !important;
}
/* Bestand-knop: var(--text-light) */
.sg-theme-dark #tcChatExtraActions button[style*="color:var(--text-light)"],
.sg-theme-dark #tcChatExtraActions button[style*="color:var(--chat-text-light)"] {
  color: #64748b !important;
}

/* ── Invoer-rij (emoji + input + knoppen) ─────────────────────────── */
.sg-theme-dark #tcChatInputBar > div:last-child,
.sg-theme-dark #tcChatInputBar > div[style*="display:flex"] {
  background: #111827 !important;
}
/* Tekstveld */
.sg-theme-dark #tcChatInput {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
/* Input met --chat-pill var */
.sg-theme-dark #tcChatInput[style*="background:var(--chat-pill)"],
.sg-theme-dark #tcChatInput[style*="background:var(--bg"] {
  background: #1a2540 !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark #tcChatInput::placeholder { color: #4b5e7a !important; }
.sg-theme-dark #tcChatInput:focus { border-color: rgba(227,6,19,.5) !important; }

/* Spraakknop: hardcoded #eef2ff → donker */
.sg-theme-dark #tcSpraaknop {
  background: #1a2540 !important;
  color: #818cf8 !important;
}
.sg-theme-dark #tcSpraaknop:hover {
  background: #1e2d52 !important;
}

/* Emoji-knop hover */
.sg-theme-dark #tcChatInputBar button[onclick*="tcToggleEmoji"] {
  background: none !important;
}
.sg-theme-dark #tcChatInputBar button[onclick*="tcToggleEmoji"]:hover {
  background: rgba(245,158,11,.12) !important;
}

/* Emoji-picker achtergrond — al donker via var(--card,#1e293b) maar extra zekerheid */
.sg-theme-dark #tcNavEmojiPicker {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ── Settings panel (chat-location.js: .sg-settings-panel) ──────── */
.sg-theme-dark .sg-settings-panel {
  background: #1a2540 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07) !important;
}
.sg-theme-dark .sg-settings-row {
  border-bottom-color: rgba(255,255,255,.06) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .sg-settings-row:hover {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark .sg-toggle {
  background: #2d3f5c !important;
}

/* ── Locatie kaart-picker (chat-location.js: .sg-loc-map-picker) ── */
.sg-theme-dark .sg-loc-map-picker {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark .sg-loc-map-link {
  border-top-color: rgba(255,255,255,.06) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .sg-loc-map-link:hover {
  background: rgba(255,255,255,.05) !important;
}

/* ── Lege-staat berichten in chatvenster (gegenereerd door tcNavRender) */
.sg-theme-dark #tcChatMessages > div:empty,
.sg-theme-dark #tcChatMessages [style*="color:var(--text-light)"] {
  color: #4b5e7a !important;
}
/* "Nog geen berichten / Stuur het eerste bericht!" vlak */
.sg-theme-dark #tcChatMessages > div[style*="display:flex"][style*="flex-direction:column"],
.sg-theme-dark #tcChatMessages [style*="Nog geen"] {
  color: #475569 !important;
}

/* ── Inline witte backgrounds in tcNavContactList (door tcNavRender) */
.sg-theme-dark #tcNavContactList [style*="background:white"],
.sg-theme-dark #tcNavContactList [style*="background:#fff"],
.sg-theme-dark #tcNavContactList [style*="background: #fff"],
.sg-theme-dark #tcNavContactList [style*="background:#f8fafc"] {
  background: #0f172a !important;
}
.sg-theme-dark #tcNavContactList [style*="color:#475569"],
.sg-theme-dark #tcNavContactList [style*="color:#1e293b"],
.sg-theme-dark #tcNavContactList [style*="color:#0f172a"] {
  color: #e2e8f0 !important;
}

/* ── Inline witte backgrounds in tcChatMessages ──────────────────── */
.sg-theme-dark #tcChatMessages [style*="background:white"],
.sg-theme-dark #tcChatMessages [style*="background:#fff"],
.sg-theme-dark #tcChatMessages [style*="background: #fff"],
.sg-theme-dark #tcChatMessages [style*="background:#f8fafc"],
.sg-theme-dark #tcChatMessages [style*="background:#f1f5f9"] {
  background: #1a2540 !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark #tcChatMessages [style*="color:#1e293b"],
.sg-theme-dark #tcChatMessages [style*="color:#0f172a"],
.sg-theme-dark #tcChatMessages [style*="color:#374151"] {
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   CHAT DARK MODE v1.8 — volledige fix voor alle resterende problemen
   Geldig voor tcRenderMessages (sg-teamchat-extra.js) output:
   - .tc-bubble-other  → ontvangen bericht (was hardcoded white)
   - .tc-msg-row       → bericht rij wrapper
   - tcChatMessages zelf (leeg scherm)
   - Extra-acties pills (Gast-knop, Bellen, Bestand, GPS)
   - Vertaalknop (nieuwe toevoeging v16.9.31)
══════════════════════════════════════════════════════════════════ */

/* Berichten container — altijd donker in dark mode */
.sg-theme-dark #tcChatMessages,
.sg-theme-dark #tcChatOverlay #tcChatMessages {
  background: #0f172a !important;
}

/* Ontvangen bericht bubbles (.tc-bubble-other) */
.sg-theme-dark .tc-bubble-other {
  background: #1a2540 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Eigen bericht bubbles (.tc-bubble-me) — rood houden, tekst wit */
.sg-theme-dark .tc-bubble-me {
  color: #ffffff !important;
}
/* Span binnenin bubble — tekst kleur meegeven */
.sg-theme-dark .tc-bubble-other span,
.sg-theme-dark .tc-bubble-other [id^="tcTxt_"] {
  color: #e2e8f0 !important;
}

/* Tijdstempel + afzender naam */
.sg-theme-dark .tc-msg-row [style*="color:var(--text-light)"],
.sg-theme-dark .tc-msg-row [style*="font-size:.63rem"] {
  color: #475569 !important;
}

/* Vertaalknop in berichten */
.sg-theme-dark .tc-msg-row button[onclick*="tcVertaalBericht"] {
  border-color: rgba(255,255,255,.12) !important;
  color: #64748b !important;
  background: transparent !important;
}
.sg-theme-dark .tc-msg-row button[onclick*="tcVertaalBericht"]:hover {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
}

/* Extra actie-rij: Gast-knop specifiek donker */
.sg-theme-dark #tcChatExtraActions button[onclick*="gast"],
.sg-theme-dark #tcChatExtraActions button[style*="background:rgba(237"] {
  background: rgba(237,137,54,.15) !important;
  border-color: rgba(237,137,54,.35) !important;
  color: #fbbf24 !important;
}
/* Alle neutrale pills in extra-acties */
.sg-theme-dark #tcChatExtraActions button:not([style*="whatsapp"]):not([style*="#e30613"]):not([style*="#25d366"]) {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #cbd5e1 !important;
}

/* Input-balk compleet donker — absolute fallback */
.sg-theme-dark #tcChatInputBar,
.sg-theme-dark #tcChatInputBar > *,
.sg-theme-dark #tcChatInputBar > div {
  background: #111827 !important;
  border-color: rgba(255,255,255,.06) !important;
}
/* Maar het tekstveld zelf iets lichter */
.sg-theme-dark #tcChatInput {
  background: #1a2540 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark #tcChatInput::placeholder { color: #4b5e7a !important; }

/* Lege chat staat */
.sg-theme-dark #tcChatMessages:empty,
.sg-theme-dark #tcNavMsgList:empty {
  background: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════════
   BERICHTEN MODULE — witte kaarten donker
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .bericht-kaart,
.sg-theme-dark .sg-bericht-item,
.sg-theme-dark #berichtenLijst > div {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
}
.sg-theme-dark .bericht-kaart [style*="color:#374151"],
.sg-theme-dark .sg-bericht-item [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark .bericht-kaart [style*="color:#6b7280"],
.sg-theme-dark .sg-bericht-item [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL FALLBACK — #f8fafc inline-style in any module panel
══════════════════════════════════════════════════════════════════ */
.sg-theme-dark .sg-module-panel [style*="background:#f8fafc"],
.sg-theme-dark .sg-module-panel [style*="background: #f8fafc"],
.sg-theme-dark .sg-panel [style*="background:#f8fafc"],
.sg-theme-dark .sg-panel [style*="background: #f8fafc"] {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark .sg-module-panel [style*="background:#fff"],
.sg-theme-dark .sg-module-panel [style*="background: #fff"],
.sg-theme-dark .sg-panel [style*="background:#fff"],
.sg-theme-dark .sg-panel [style*="background: #fff"] {
  background: #1a2535 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BETAALPROVIDER PANEL — volledige dark-mode overrides
   Alle panes: koppeling, pakketten, uitbreidingen, webhook,
   credits, log, boekhouding — inline witte vlakken donker maken
══════════════════════════════════════════════════════════════════ */

/* Root container */
.sg-theme-dark [id^="betaalPane-"] {
  color: #e2e8f0 !important;
}

/* Witte kaarten in alle panes */
.sg-theme-dark [id^="betaalPane-"] [style*="background:#fff"],
.sg-theme-dark [id^="betaalPane-"] [style*="background: #fff"],
.sg-theme-dark [id^="betaalPane-"] [style*="background:#ffffff"] {
  background: #1e2940 !important;
}
.sg-theme-dark [id^="betaalPane-"] [style*="background:#f8fafc"],
.sg-theme-dark [id^="betaalPane-"] [style*="background: #f8fafc"],
.sg-theme-dark [id^="betaalPane-"] [style*="background:#f9fafb"] {
  background: rgba(255,255,255,.04) !important;
}

/* Lichte border-kleuren */
.sg-theme-dark [id^="betaalPane-"] [style*="border:1px solid #e5e7eb"],
.sg-theme-dark [id^="betaalPane-"] [style*="border: 1px solid #e5e7eb"],
.sg-theme-dark [id^="betaalPane-"] [style*="border:1.5px solid #e5e7eb"],
.sg-theme-dark [id^="betaalPane-"] [style*="border:2px solid #e5e7eb"] {
  border-color: rgba(255,255,255,.1) !important;
}

/* Donkere tekst → licht */
.sg-theme-dark [id^="betaalPane-"] [style*="color:#374151"],
.sg-theme-dark [id^="betaalPane-"] [style*="color:#111827"],
.sg-theme-dark [id^="betaalPane-"] [style*="color:#1f2937"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark [id^="betaalPane-"] [style*="color:#6b7280"],
.sg-theme-dark [id^="betaalPane-"] [style*="color:#9ca3af"],
.sg-theme-dark [id^="betaalPane-"] [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
.sg-theme-dark [id^="betaalPane-"] [style*="color:#111"] {
  color: #f1f5f9 !important;
}

/* Sub-tabs balk */
.sg-theme-dark .betaal-sub-tab {
  color: #94a3b8 !important;
}
.sg-theme-dark .betaal-sub-tab[style*="color:#1e3a5f"] {
  color: #7dd3fc !important;
}

/* Uitbreidingen (OG Pro addon cards) — lichte bg → donker */
.sg-theme-dark #betaalPane-uitbreidingen [style*="background:#fff"],
.sg-theme-dark #betaalPane-uitbreidingen [style*="background: #fff"] {
  background: #1e2940 !important;
}
.sg-theme-dark #betaalPane-uitbreidingen [style*="background:#f8fafc"],
.sg-theme-dark #betaalPane-uitbreidingen [style*="background:#fafafa"] {
  background: rgba(255,255,255,.04) !important;
}

/* Webhook pane */
.sg-theme-dark #betaalPane-webhook [style*="background:#f8fafc"],
.sg-theme-dark #betaalPane-webhook [style*="background:#f9fafb"],
.sg-theme-dark #betaalPane-webhook [style*="background:#fff"] {
  background: #0f1e35 !important;
}
.sg-theme-dark #betaalPane-webhook [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #betaalPane-webhook [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}
/* Webhook endpoint URL box */
.sg-theme-dark #betaalPane-webhook [style*="background:#1e3a5f"],
.sg-theme-dark #betaalPane-webhook [style*="background: #1e3a5f"] {
  background: #0c2040 !important;
  border-color: rgba(99,102,241,.4) !important;
}

/* Boekhouding pane — export knoppen, datum-invoer, maand-overzicht */
.sg-theme-dark #betaalPane-boekhouding [style*="background:#fff"],
.sg-theme-dark #betaalPane-boekhouding [style*="background: #fff"] {
  background: #1e2940 !important;
}
.sg-theme-dark #betaalPane-boekhouding [style*="background:#f8fafc"],
.sg-theme-dark #betaalPane-boekhouding [style*="background:#fafafa"] {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark #betaalPane-boekhouding input[type="date"],
.sg-theme-dark #betaalPane-boekhouding input[type="month"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
.sg-theme-dark #betaalPane-boekhouding [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #betaalPane-boekhouding [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}

/* Pakketten pane — invoervelden */
.sg-theme-dark #betaalPane-pakketten [style*="background:#fff"],
.sg-theme-dark #betaalPane-pakketten [style*="background: #fff"] {
  background: #1e2940 !important;
}
.sg-theme-dark #betaalPane-pakketten input[type="text"],
.sg-theme-dark #betaalPane-pakketten input[type="number"] {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* Credits pane — tabel header */
.sg-theme-dark #betaalPane-credits [style*="background:#1e3a5f"] {
  background: #0c1e35 !important;
}
.sg-theme-dark #betaalPane-credits [style*="background:#fff"],
.sg-theme-dark #betaalPane-credits [style*="background: #fff"] {
  background: #1e2940 !important;
}

/* statBox kaarten — stat-vak in betalingen log */
.sg-theme-dark #betaalPane-log .stat-box,
.sg-theme-dark [id^="betaalPane-"] [style*="border-radius:12px"][style*="border:1px"] {
  background: #1e2940 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Ultraprijsmeter gradient: lichtblauwe bg → donker */
.sg-theme-dark #betaalPane-uitbreidingen [style*="background:linear-gradient(135deg,#e0f2fe"],
.sg-theme-dark #betaalPane-uitbreidingen [style*="background:linear-gradient(135deg, #e0f2fe"],
.sg-theme-dark #betaalPane-uitbreidingen [style*="background:linear-gradient(135deg,#f0f9ff"] {
  background: linear-gradient(135deg,#0c1e35,#0a2540) !important;
  border-color: rgba(8,145,178,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MODULE-GRID TILES — app.js rendert inline stijlen voor het
   module-raster. Overrides voor witte achtergronden en grijze tekst.
══════════════════════════════════════════════════════════════════ */

/* Module grid container */
.sg-theme-dark #moduleGrid,
.sg-theme-dark .modules-grid,
.sg-theme-dark .sg-modules-container {
  background: transparent !important;
}

/* Individuele module-knoppen (inline style met #fff) */
.sg-theme-dark #moduleGrid [style*="background:#fff"],
.sg-theme-dark #moduleGrid [style*="background: #fff"],
.sg-theme-dark .modules-grid [style*="background:#fff"],
.sg-theme-dark .modules-grid [style*="background: #fff"],
.sg-theme-dark .sg-modules-container [style*="background:#fff"] {
  background: #1e2940 !important;
}
.sg-theme-dark #moduleGrid [style*="background:#f8fafc"],
.sg-theme-dark #moduleGrid [style*="background:#f9fafb"] {
  background: rgba(255,255,255,.04) !important;
}

/* Module label / naam */
.sg-theme-dark #moduleGrid [style*="color:#1e293b"],
.sg-theme-dark #moduleGrid [style*="color:#111827"],
.sg-theme-dark #moduleGrid [style*="color:#0f172a"],
.sg-theme-dark .modules-grid [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}

/* Module sub-label / omschrijving */
.sg-theme-dark #moduleGrid [style*="color:#64748b"],
.sg-theme-dark #moduleGrid [style*="color:#6b7280"],
.sg-theme-dark .modules-grid [style*="color:#64748b"],
.sg-theme-dark .sg-modules-container [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* Module grid borders */
.sg-theme-dark #moduleGrid [style*="border:1px solid #e5e7eb"],
.sg-theme-dark #moduleGrid [style*="border:1.5px solid #e5e7eb"],
.sg-theme-dark .modules-grid [style*="border:1px solid #e5e7eb"] {
  border-color: rgba(255,255,255,.08) !important;
}

/* Locked/uitgeschakeld module — grijze overlay */
.sg-theme-dark #moduleGrid .module-locked,
.sg-theme-dark #moduleGrid [style*="opacity:0.4"],
.sg-theme-dark #moduleGrid [style*="opacity:.4"] {
  opacity: 0.5 !important;
  filter: grayscale(20%) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SNELLE ACTIES — ontbrekende inline-style overrides
   dashboardQuickActions rendert knoppen met inline witte bg
══════════════════════════════════════════════════════════════════ */

/* Snelle-acties knoppen met inline witte achtergrond */
.sg-theme-dark #dashboardQuickActions [style*="background:#fff"],
.sg-theme-dark #dashboardQuickActions [style*="background: #fff"],
.sg-theme-dark #dashSnelleActies [style*="background:#fff"],
.sg-theme-dark #dashSnelleActies [style*="background: #fff"] {
  background: #1e2940 !important;
}
.sg-theme-dark #dashboardQuickActions [style*="background:#f8fafc"],
.sg-theme-dark #dashboardQuickActions [style*="background:#f1f5f9"],
.sg-theme-dark #dashSnelleActies [style*="background:#f8fafc"],
.sg-theme-dark #dashSnelleActies [style*="background:#f1f5f9"] {
  background: rgba(255,255,255,.06) !important;
}

/* Tekst in snelle-acties knoppen */
.sg-theme-dark #dashboardQuickActions [style*="color:#374151"],
.sg-theme-dark #dashboardQuickActions [style*="color:#1e293b"],
.sg-theme-dark #dashSnelleActies [style*="color:#374151"],
.sg-theme-dark #dashSnelleActies [style*="color:#1e293b"] {
  color: #e2e8f0 !important;
}
.sg-theme-dark #dashboardQuickActions [style*="color:#64748b"],
.sg-theme-dark #dashboardQuickActions [style*="color:#6b7280"],
.sg-theme-dark #dashSnelleActies [style*="color:#64748b"],
.sg-theme-dark #dashSnelleActies [style*="color:#9ca3af"] {
  color: #94a3b8 !important;
}

/* Border van snelle-actie knoppen */
.sg-theme-dark #dashboardQuickActions [style*="border:1px solid #e5e7eb"],
.sg-theme-dark #dashboardQuickActions [style*="border:1.5px solid #e5e7eb"],
.sg-theme-dark #dashSnelleActies [style*="border:1px solid #e5e7eb"] {
  border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ACCOUNTS & ABONNEMENTEN SECTIE — volledig dark-mode
   #accountsSection + sgAccountsContainer: tier-kaarten, connecties
   uitleg, add-ons blok, status-banner, periode-toggle
══════════════════════════════════════════════════════════════════ */

/* Wrapper container */
.sg-theme-dark #accountsSection,
.sg-theme-dark #sgAccountsContainer {
  background: transparent !important;
}

/* Tier-kaarten (ZZP / Sub / OG / Custom) — witte bg → donker */
.sg-theme-dark #sgAccountsContainer [style*="background:#fff"],
.sg-theme-dark #sgAccountsContainer [style*="background: #fff"],
.sg-theme-dark #accountsSection [style*="background:#fff"],
.sg-theme-dark #accountsSection [style*="background: #fff"] {
  background: #1a2535 !important;
}

/* Lichtgrijze achtergronden (f8fafc / f1f5f9) → donker */
.sg-theme-dark #sgAccountsContainer [style*="background:#f8fafc"],
.sg-theme-dark #sgAccountsContainer [style*="background:#f1f5f9"],
.sg-theme-dark #sgAccountsContainer [style*="background:#f5f3ff"],
.sg-theme-dark #accountsSection [style*="background:#f8fafc"],
.sg-theme-dark #accountsSection [style*="background:#f1f5f9"],
.sg-theme-dark #accountsSection [style*="background:#f5f3ff"] {
  background: rgba(255,255,255,.05) !important;
}

/* Borders (e2e8f0 / e0e7ff) → donker */
.sg-theme-dark #sgAccountsContainer [style*="border:2px solid #e2e8f0"],
.sg-theme-dark #sgAccountsContainer [style*="border:1.5px solid #e2e8f0"],
.sg-theme-dark #sgAccountsContainer [style*="border:2px solid #e0e7ff"],
.sg-theme-dark #accountsSection [style*="border:2px solid #e2e8f0"],
.sg-theme-dark #accountsSection [style*="border:1.5px solid #e2e8f0"],
.sg-theme-dark #accountsSection [style*="border:2px solid #e0e7ff"] {
  border-color: rgba(255,255,255,.1) !important;
}

/* Kaart-inner vlakken (witte sub-kaartjes in connecties-uitleg) */
.sg-theme-dark #sgAccountsContainer [style*="background:#fff"][style*="border-radius:11px"],
.sg-theme-dark #accountsSection [style*="background:#fff"][style*="border-radius:11px"] {
  background: #243046 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Tekst: donkerblauw / donkergrijs → licht */
.sg-theme-dark #sgAccountsContainer [style*="color:#111"],
.sg-theme-dark #sgAccountsContainer [style*="color:#0f172a"],
.sg-theme-dark #sgAccountsContainer [style*="color:#1e293b"],
.sg-theme-dark #accountsSection [style*="color:#111"],
.sg-theme-dark #accountsSection [style*="color:#0f172a"],
.sg-theme-dark #accountsSection [style*="color:#1e293b"] {
  color: #f1f5f9 !important;
}

/* Tekst: mid-grijs (#374151 / #64748b) → lichtgrijs */
.sg-theme-dark #sgAccountsContainer [style*="color:#374151"],
.sg-theme-dark #sgAccountsContainer [style*="color:#64748b"],
.sg-theme-dark #accountsSection [style*="color:#374151"],
.sg-theme-dark #accountsSection [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* Periode-toggle achtergrond */
.sg-theme-dark #accToggleMnd,
.sg-theme-dark #accToggleJr {
  background: #1e2940 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.sg-theme-dark #accToggleMnd[style*="box-shadow"] {
  background: #243150 !important;
  color: #f1f5f9 !important;
}

/* "Beheren" knop in status-banner */
.sg-theme-dark #sgAccountsContainer [style*="background:white"],
.sg-theme-dark #accountsSection [style*="background:white"] {
  background: #243046 !important;
  border-color: rgba(147,197,253,.4) !important;
}

/* Add-on container sub-info balk */
.sg-theme-dark #sgAccAddonContainer {
  background: transparent !important;
}

/* Contact-link (Custom plan) */
.sg-theme-dark #sgAccountsContainer a[href*="mailto"][style*="background:#eef2ff"] {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: #a5b4fc !important;
}

/* Garantie-footer tekst */
.sg-theme-dark #sgAccountsContainer [style*="color:#94a3b8"] {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUG FIX v9.30 — ADMIN CONTROL CENTRE tekst dark/light mode
   #sgAdminPayPanel rendert schema-tabs met inline lichte kleuren.
   In dark-mode zijn #374151 / #64748b onleesbaar op donker bg.
══════════════════════════════════════════════════════════════════ */

/* Instellingen label + uitleg tekst in schema-tabs */
.sg-theme-dark #sgAdminPayPanel [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
.sg-theme-dark #sgAdminPayPanel [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #sgAdminPayPanel [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}
.sg-theme-dark #sgAdminPayPanel [style*="color:#9ca3af"] {
  color: #64748b !important;
}

/* Schema-tab kaart achtergronden (var(--card) werkt hier al, maar inline-bg niet) */
.sg-theme-dark #sgAdminPayPanel [style*="background:#f0fdf4"] {
  background: rgba(22,163,74,.08) !important;
}
.sg-theme-dark #sgAdminPayPanel [style*="background:#f1f5f9"],
.sg-theme-dark #sgAdminPayPanel [style*="background:#f8fafc"],
.sg-theme-dark #sgAdminPayPanel [style*="background:#fafafa"] {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark #sgAdminPayPanel [style*="background:#fff"],
.sg-theme-dark #sgAdminPayPanel [style*="background: #fff"],
.sg-theme-dark #sgAdminPayPanel [style*="background:#ffffff"] {
  background: #1e2940 !important;
}

/* Toggle-label: AAN/UIT badges */
.sg-theme-dark #sgAdminPayPanel [style*="background:#d1fae5"][style*="color:#059669"] {
  background: rgba(16,185,129,.15) !important;
  color: #6ee7b7 !important;
}
.sg-theme-dark #sgAdminPayPanel [style*="background:#f1f5f9"][style*="color:#94a3b8"] {
  background: rgba(255,255,255,.06) !important;
  color: #64748b !important;
}

/* Input fields in schema-tabs */
.sg-theme-dark #sgAdminPayPanel input[type="number"],
.sg-theme-dark #sgAdminPayPanel input[type="text"],
.sg-theme-dark #sgAdminPayPanel select {
  background: #0f1e35 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* Gebruikers-tab: tier kaart achtergronden */
.sg-theme-dark #adminContentPanel [style*="background:#fefce8"] {
  background: rgba(245,158,11,.08) !important;
}
.sg-theme-dark #adminContentPanel [style*="background:#f0f9ff"] {
  background: rgba(14,165,233,.08) !important;
}
.sg-theme-dark #adminContentPanel [style*="background:#f3f4f6"] {
  background: rgba(255,255,255,.04) !important;
}
/* Gebruikers kaart achtergrond → donker */
.sg-theme-dark #adminContentPanel [style*="background:var(--card)"] {
  /* var(--card) is al dark-mode aware */
}
/* Tier kleur teksten in dark mode behouden */
.sg-theme-dark #adminContentPanel [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #adminContentPanel [style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUG FIX v9.30 — AI TRAINING TABBLAD achtergrond
   SchoonAIDashboard rendert SVG met hardcoded #f8fafc grid-bg en
   kaart-wrappers met witte achtergrond in light-mode.
   In dark-mode moeten deze donker worden.
══════════════════════════════════════════════════════════════════ */

/* AI Training container */
.sg-theme-dark #sgAITrainingContainer {
  background: transparent !important;
}

/* Status-banner is al donker (0a0a0a / 111827) — geen override nodig */

/* Data-meter kaarten en wrapper-divs */
.sg-theme-dark #sgAITrainingContainer > div > div {
  color: var(--text, #f1f5f9);
}

/* Witte kaarten in AI Dashboard */
.sg-theme-dark #sgAITrainingContainer [style*="background:#fff"],
.sg-theme-dark #sgAITrainingContainer [style*="background: #fff"],
.sg-theme-dark #sgAITrainingContainer [style*="background:#ffffff"],
.sg-theme-dark #sgAITrainingContainer [style*="background:white"] {
  background: #1a2535 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Lichtgrijze achtergronden */
.sg-theme-dark #sgAITrainingContainer [style*="background:#f8fafc"],
.sg-theme-dark #sgAITrainingContainer [style*="background:#f1f5f9"],
.sg-theme-dark #sgAITrainingContainer [style*="background:#f9fafb"] {
  background: rgba(255,255,255,.04) !important;
}

/* SVG grid achtergrond (background:#f8fafc in SVG style attribuut) */
.sg-theme-dark #sgAITrainingContainer svg[style*="background:#f8fafc"] {
  background: #0f1e30 !important;
}

/* Data-meter balk container */
.sg-theme-dark #sgAITrainingContainer [style*="background:#f1f5f9"][style*="border-radius:8px"] {
  background: rgba(255,255,255,.08) !important;
}

/* Tekst kleuren in AI Training */
.sg-theme-dark #sgAITrainingContainer [style*="color:#374151"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark #sgAITrainingContainer [style*="color:#64748b"] {
  color: #94a3b8 !important;
}
.sg-theme-dark #sgAITrainingContainer [style*="color:#1e293b"],
.sg-theme-dark #sgAITrainingContainer [style*="color:#0f172a"] {
  color: #f1f5f9 !important;
}
.sg-theme-dark #sgAITrainingContainer [style*="color:#6b7280"] {
  color: #94a3b8 !important;
}

/* Sandbox-tabs in AI Training (witte bg tabs) */
.sg-theme-dark #sgAITrainingContainer button[style*="background:#fff"],
.sg-theme-dark #sgAITrainingContainer button[style*="background: #fff"] {
  background: #243046 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark #sgAITrainingContainer button[style*="background:#f8fafc"] {
  background: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
}

/* Schoon AI / Zelflerend Systeem kaart (lichtpaarse bg #f5f3ff) */
.sg-theme-dark #sgAITrainingContainer [style*="background:#f5f3ff"],
.sg-theme-dark #sgAITrainingContainer [style*="background:#ede9fe"],
.sg-theme-dark #sgAITrainingContainer [style*="background:#faf5ff"] {
  background: rgba(124,58,237,.12) !important;
  border-color: rgba(124,58,237,.25) !important;
}
.sg-theme-dark #sgAITrainingContainer [style*="color:#5b21b6"],
.sg-theme-dark #sgAITrainingContainer [style*="color:#6d28d9"] {
  color: #c4b5fd !important;
}
.sg-theme-dark #sgAITrainingContainer [style*="color:#7c3aed"] {
  color: #a78bfa !important;
}

/* AI fase-indicator borders en inline-borders */
.sg-theme-dark #sgAITrainingContainer [style*="border:1.5px solid #e2e8f0"],
.sg-theme-dark #sgAITrainingContainer [style*="border:1px solid #e2e8f0"],
.sg-theme-dark #sgAITrainingContainer [style*="border:1.5px solid #e5e7eb"] {
  border-color: rgba(255,255,255,.1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 73 — v2.0 GLOBALE DARK MODE COMPLETERING
   Vangt alle resterende inline-style patronen die modules dynamisch
   genereren. Hiermee worden de donker/licht problemen opgelost.
══════════════════════════════════════════════════════════════════ */

/* ── 1. Alle sectie-containers donker (sec-*) ──────────────────── */
.sg-theme-dark [id^="sec-"] {
  background: var(--bg, #0b1120) !important;
  color: var(--text, #f1f5f9) !important;
}

/* ── 2. Module-content wrappers ──────────────────────────────────── */
.sg-theme-dark .module-content,
.sg-theme-dark .module-body,
.sg-theme-dark .section-body,
.sg-theme-dark .page-content,
.sg-theme-dark .tab-content,
.sg-theme-dark .view-content {
  background: var(--bg, #0b1120) !important;
  color: var(--text, #f1f5f9) !important;
}

/* ── 3. Alle witte inline-style achtergronden (extra patronen) ───── */
.sg-theme-dark [style*="background:#fafafa"],
.sg-theme-dark [style*="background: #fafafa"] {
  background: var(--card, #1e2940) !important;
}
.sg-theme-dark [style*="background:#f9fafb"],
.sg-theme-dark [style*="background: #f9fafb"] {
  background: rgba(255,255,255,.04) !important;
}
.sg-theme-dark [style*="background:#fcfcfc"],
.sg-theme-dark [style*="background: #fcfcfc"],
.sg-theme-dark [style*="background:#fefefe"],
.sg-theme-dark [style*="background: #fefefe"] {
  background: var(--card, #1e2940) !important;
}
/* Extra #fff varianten zonder semikolon/aanhalingstekens */
.sg-theme-dark [style*="background:#fff}"],
.sg-theme-dark [style*="background: #fff}"] {
  background: var(--card, #1e2940) !important;
}

/* ── 4. Kleur-gecombineerde backgrounds (veel modules) ─────────── */
.sg-theme-dark [style*="background:rgba(255,255,255,1)"],
.sg-theme-dark [style*="background: rgba(255,255,255,1)"],
.sg-theme-dark [style*="background:rgba(255,255,255,.95)"],
.sg-theme-dark [style*="background:rgba(255,255,255,.98)"] {
  background: var(--card, #1e2940) !important;
}

/* ── 5. Inline-color patronen (onleesbaar in dark) ──────────────── */
.sg-theme-dark [style*="color:#222"],
.sg-theme-dark [style*="color: #222"] {
  color: var(--text, #f1f5f9) !important;
}
.sg-theme-dark [style*="color:#444"],
.sg-theme-dark [style*="color: #444"] {
  color: #cbd5e1 !important;
}
.sg-theme-dark [style*="color:#555"],
.sg-theme-dark [style*="color: #555"] {
  color: #94a3b8 !important;
}
.sg-theme-dark [style*="color:#666"],
.sg-theme-dark [style*="color: #666"],
.sg-theme-dark [style*="color:#666666"],
.sg-theme-dark [style*="color: #666666"] {
  color: #94a3b8 !important;
}
.sg-theme-dark [style*="color:#888"],
.sg-theme-dark [style*="color: #888"],
.sg-theme-dark [style*="color:#888888"],
.sg-theme-dark [style*="color: #888888"] {
  color: #94a3b8 !important;
}
.sg-theme-dark [style*="color:#475569"],
.sg-theme-dark [style*="color: #475569"] {
  color: #94a3b8 !important;
}

/* ── 6. Border kleuren (extra patronen) ─────────────────────────── */
.sg-theme-dark [style*="border:1px solid #e5e7eb"],
.sg-theme-dark [style*="border: 1px solid #e5e7eb"],
.sg-theme-dark [style*="border:1.5px solid #e5e7eb"],
.sg-theme-dark [style*="border:1px solid #d1d5db"],
.sg-theme-dark [style*="border: 1px solid #d1d5db"],
.sg-theme-dark [style*="border:1px solid #f0f0f0"],
.sg-theme-dark [style*="border:1px solid #eee"],
.sg-theme-dark [style*="border: 1px solid #eee"],
.sg-theme-dark [style*="border:1px solid #ddd"],
.sg-theme-dark [style*="border: 1px solid #ddd"],
.sg-theme-dark [style*="border-bottom:1px solid #eee"],
.sg-theme-dark [style*="border-top:1px solid #eee"],
.sg-theme-dark [style*="border-bottom:1px solid #f0f4f8"],
.sg-theme-dark [style*="border-top:1px solid #f0f4f8"] {
  border-color: rgba(255,255,255,.1) !important;
}

/* ── 7. Box-shadow op witte kaarten donker ──────────────────────── */
.sg-theme-dark [style*="box-shadow:0 "][style*="rgba(0,0,0,.06)"],
.sg-theme-dark [style*="box-shadow:0 "][style*="rgba(0,0,0,0.06)"] {
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}

/* ── 8. Input/select/textarea extra dark overrides ──────────────── */
.sg-theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background: var(--card, #1e2940) !important;
  color: var(--text, #f1f5f9) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark select {
  background: var(--card, #1e2940) !important;
  color: var(--text, #f1f5f9) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.sg-theme-dark textarea {
  background: var(--card, #1e2940) !important;
  color: var(--text, #f1f5f9) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ── 9. Tooltip/popover/dropdown donker ──────────────────────────── */
.sg-theme-dark .tooltip,
.sg-theme-dark .popover,
.sg-theme-dark .dropdown-menu,
.sg-theme-dark [class*="tooltip"],
.sg-theme-dark [class*="dropdown"] {
  background: #1e2940 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ── 10. Tabs donker ─────────────────────────────────────────────── */
.sg-theme-dark .tab-bar,
.sg-theme-dark .tabs,
.sg-theme-dark [class*="tab-bar"],
.sg-theme-dark [class*="tab-nav"] {
  background: var(--card, #1e2940) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark [class*="tab-btn"]:not(.active),
.sg-theme-dark [class*="tab-item"]:not(.active),
.sg-theme-dark .tab:not(.active) {
  color: #94a3b8 !important;
}

/* ── 11. Modals en overlays donker ──────────────────────────────── */
.sg-theme-dark .modal,
.sg-theme-dark .modal-content,
.sg-theme-dark [class*="modal-body"],
.sg-theme-dark [class*="sheet-body"],
.sg-theme-dark [class*="bottom-sheet"] {
  background: var(--card, #1e2940) !important;
  color: var(--text, #f1f5f9) !important;
}
.sg-theme-dark .modal-header,
.sg-theme-dark [class*="modal-hdr"],
.sg-theme-dark [class*="sheet-hdr"] {
  background: rgba(255,255,255,.04) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* ── 12. Tabel-rijen donker ─────────────────────────────────────── */
.sg-theme-dark table {
  background: transparent !important;
  color: var(--text, #f1f5f9) !important;
}
.sg-theme-dark th {
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark td {
  border-color: rgba(255,255,255,.06) !important;
}
.sg-theme-dark tr:nth-child(even) {
  background: rgba(255,255,255,.02) !important;
}

/* ── 13. Lichte badges/chips donker ─────────────────────────────── */
.sg-theme-dark [style*="background:#e0f2fe"],
.sg-theme-dark [style*="background:#dbeafe"],
.sg-theme-dark [style*="background:#eff6ff"],
.sg-theme-dark [style*="background:#f0f9ff"] {
  background: rgba(59,130,246,.15) !important;
  color: #93c5fd !important;
}
.sg-theme-dark [style*="background:#dcfce7"],
.sg-theme-dark [style*="background:#d1fae5"],
.sg-theme-dark [style*="background:#f0fdf4"] {
  background: rgba(34,197,94,.12) !important;
  color: #86efac !important;
}
.sg-theme-dark [style*="background:#fee2e2"],
.sg-theme-dark [style*="background:#fecaca"],
.sg-theme-dark [style*="background:#fef2f2"] {
  background: rgba(239,68,68,.12) !important;
  color: #fca5a5 !important;
}
.sg-theme-dark [style*="background:#fef3c7"],
.sg-theme-dark [style*="background:#fef9c3"],
.sg-theme-dark [style*="background:#fffbeb"],
.sg-theme-dark [style*="background:#fefce8"] {
  background: rgba(234,179,8,.12) !important;
  color: #fde68a !important;
}
.sg-theme-dark [style*="background:#f3e8ff"],
.sg-theme-dark [style*="background:#ede9fe"],
.sg-theme-dark [style*="background:#faf5ff"] {
  background: rgba(139,92,246,.15) !important;
  color: #c4b5fd !important;
}

/* ── 14. Licht mode herstelregels — donkere tekst op lichte bg ─── */
/* Voorkom dat bg-dark in lichtmodus actief is */
.sg-theme-light body,
.sg-theme-light #app,
.sg-theme-light .app-container {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
/* Herstel witte kaarten in lichte modus die per ongeluk donker worden */
.sg-theme-light .card,
.sg-theme-light .kaart,
.sg-theme-light .module-card,
.sg-theme-light [class*="stat-card"] {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* ── 15. Topbar / bottomnav altijd correct ──────────────────────── */
.sg-theme-dark .topbar,
.sg-theme-dark .top-bar,
.sg-theme-dark #topBar,
.sg-theme-dark header.main-header {
  background: var(--tb-bg, #0a0a0a) !important;
  border-bottom-color: var(--tb-border, rgba(255,255,255,.05)) !important;
  color: #f1f5f9 !important;
}
.sg-theme-dark .bottom-nav,
.sg-theme-dark .bottomnav,
.sg-theme-dark #bottomNav {
  background: #0a0a0a !important;
  border-top-color: rgba(255,255,255,.08) !important;
}

/* ── 16. Inline transition/hover states corrigeren ──────────────── */
.sg-theme-dark a:not([class*="btn"]):not([class*="button"]) {
  color: #60a5fa !important;
}
.sg-theme-dark a:hover:not([class*="btn"]):not([class*="button"]) {
  color: #93c5fd !important;
}

/* ── 17. Separators/dividers donker ─────────────────────────────── */
.sg-theme-dark hr {
  border-color: rgba(255,255,255,.08) !important;
}
.sg-theme-dark [style*="border-top:1px solid #f1f5f9"],
.sg-theme-dark [style*="border-top:1px solid #e8ecf0"],
.sg-theme-dark [style*="border-top:1.5px solid #f1f5f9"],
.sg-theme-dark [style*="border-bottom:1px solid #f1f5f9"],
.sg-theme-dark [style*="border-bottom:1.5px solid #f1f5f9"] {
  border-color: rgba(255,255,255,.07) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 73 — LICHT MODUS HERSTELREGELS
   Voorkomen dat lichte modules donker ogen door variabele conflicten.
══════════════════════════════════════════════════════════════════ */
.sg-theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
.sg-theme-light select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
.sg-theme-light textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
/* Lichte module-secties behouden witte achtergrond */
.sg-theme-light [id^="sec-"] {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
/* Bottom sheets in licht mode altijd wit */
.sg-theme-light [style*="border-radius:22px 22px 0 0"],
.sg-theme-light [style*="border-radius:20px 20px 0 0"],
.sg-theme-light [style*="border-radius:18px 18px 0 0"] {
  background: #ffffff !important;
  color: #0f172a !important;
}