/* dark.css — automatische nachtview via prefers-color-scheme */

@media (prefers-color-scheme: dark) {
  /* 1. Root variabelen */
  :root {
    --ink: #e2e8f0; --ink-2: #cbd5e1; --muted: #94a3b8;
    --line: #1e293b; --line-2: #334155;
    --surface: #0f172a; --surface-2: #131d2e;
    --bg: #020617; --bg-soft: #0a1220;
    --navy: #0a1e3f; --gold: #d4b566; --gold-soft: #1a1e29;
    --accent-soft: #1a1e29;
    --ok-bg: rgba(22,163,74,.18); --ok: #4ade80;
    --err-bg: rgba(185,28,28,.2); --err: #f87171;
    --warn-bg: rgba(146,64,14,.25); --warn: #fbbf24;
    --info-bg: rgba(29,78,216,.22); --info: #60a5fa;
    --success: #4ade80; --success-bg: rgba(22,163,74,.18);
    --danger: #f87171; --danger-bg: rgba(185,28,28,.2);
    --warning: #fbbf24; --warning-bg: rgba(146,64,14,.25);
  }

  /* 2. Body — altijd donker */
  html, body {
    background-color: #020617 !important;
    background-image:
      radial-gradient(circle at 12% 0%, #122544 0%, transparent 45%),
      radial-gradient(circle at 88% 8%, #2a1f0f 0%, transparent 42%) !important;
    color: #e2e8f0 !important;
  }

  /* 3. Basistekst */
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote {
    color: #e2e8f0 !important;
  }
  a:not([class*="btn"]) { color: #93c5fd !important; }
  strong, b { color: #f1f5f9 !important; }

  /* 4. Kaarten / panels / containers */
  .card, .dashboard, .stat-card, .home-card, .login-card,
  .modal, .list-wrapper, .day, .ride-card, .ride-row,
  .chauffeur-item, .backup-row, .archive-row, .info-block,
  .account-info, .tussenstop-block, .note, .health,
  .search-bar, .week-nav, .view-tabs, .filter-bar, .sort-bar,
  .range-selector, .range-collapsed button, .main-tabs,
  .sub-tabs, .sub-tab, .main-tab, .view-tab, .filter-tab, .filter-btn,
  .period-switcher, .empty, .empty-state, .empty-day-row,
  .empty-maand, .uren-summary, .uren-days, .uren-day-row,
  .inv-card, .inv-header, .inv-body, .pdf-toolbar,
  .klant-card, .chauffeur-option, .modal .modal-head,
  .ac-dropdown, .ac-item, .segmented span, .state, .loading {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
  }
  .stat-card, .home-card-icon, .info-block, .account-info,
  .tussenstop-block, .health, .backup-row, .archive-row,
  .sub-tab, .filter-tab, .filter-btn, .chauffeur-option,
  .ac-item:hover, .ac-item.active, .modal-close, .chevron,
  .ride-row.empty-day-row {
    background-color: #131d2e !important;
    background: #131d2e !important;
  }

  /* 5. Headers — navy blijft navy */
  .app-header, .header, .pdf-modal {
    background-color: #0a1e3f !important;
    background: #0a1e3f !important;
    color: #fff !important;
  }
  .header .name, .app-header .brand { color: #fff !important; }
  .header .greeting, .brand-sub { color: #94a3b8 !important; }
  .brand { color: #e2e8f0 !important; }

  /* 6. Inputs */
  input, select, textarea {
    background-color: #0a1220 !important;
    background: #0a1220 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
  }
  input:focus, select:focus, textarea:focus {
    background-color: #0a1220 !important;
    border-color: #d4b566 !important;
    outline: none !important;
  }
  input::placeholder, textarea::placeholder {
    color: #64748b !important; opacity: 1 !important;
  }
  input[readonly] {
    background-color: #131d2e !important; color: #94a3b8 !important;
  }
  input[type="date"], input[type="time"] { color-scheme: dark !important; }
  select, option {
    background-color: #0a1220 !important; color: #e2e8f0 !important;
  }
  option:checked { background-color: #1e293b !important; }

  /* 7. Labels */
  label, .field > label, .modal .field > label, .field-label {
    color: #cbd5e1 !important;
  }

  /* 8. Knoppen */
  .btn, button.btn { color: #e2e8f0 !important; }
  .btn-secondary {
    background-color: #131d2e !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
  }
  .btn-secondary:hover:not(:disabled) {
    background-color: #1e293b !important;
  }
  .btn-primary {
    background-color: #d4b566 !important;
    background: #d4b566 !important;
    color: #0a1e3f !important;
  }
  .btn-primary:hover:not(:disabled) { background-color: #a07b30 !important; }
  .btn-danger {
    background-color: #131d2e !important;
    color: #f87171 !important;
    border-color: #7f1d1d !important;
  }

  /* 9. Tabellen */
  table { color: #e2e8f0 !important; }
  th {
    background-color: #131d2e !important;
    color: #94a3b8 !important;
    border-color: #1e293b !important;
  }
  td { border-color: #1e293b !important; color: #e2e8f0 !important; }
  tr:hover td { background-color: #131d2e !important; }
  td.tijd, td.bron, td.context { color: #94a3b8 !important; }
  td.bericht { color: #e2e8f0 !important; }

  /* 10. Badges */
  .badge.pin, .badge.afr, .badge.warn {
    background: rgba(251,191,36,.2) !important; color: #fbbf24 !important;
  }
  .badge.rekening, .badge.info {
    background: rgba(96,165,250,.2) !important; color: #93c5fd !important;
  }
  .badge.bagage, .badge.no-bagage {
    background: rgba(148,163,184,.15) !important; color: #cbd5e1 !important;
  }
  .badge.retour {
    background: rgba(234,88,12,.2) !important; color: #fdba74 !important;
  }
  .badge.verwerkt, .badge.uren {
    background: rgba(99,102,241,.2) !important; color: #a5b4fc !important;
  }

  /* 11. Chips */
  .chip, .meta-chip, .ride-meta .chip, .ride-meta-row .chip {
    background: #1e293b !important; color: #cbd5e1 !important;
  }

  /* 12. Chauffeur-cirkel */
  .chauffeur-dot {
    background: rgba(99,102,241,.25) !important;
    color: #c7d2fe !important;
    border-color: #4f46e5 !important;
  }
  .chauffeur-dot.unassigned {
    background: #131d2e !important;
    color: #64748b !important;
    border-style: dashed !important;
    border-color: #334155 !important;
  }

  /* 13. Notities / opmerkingen */
  .notitie-preview, .notities, .notes,
  .ride-notities, .ride-col-main .notitie-preview {
    background: rgba(251,191,36,.12) !important;
    color: #fbbf24 !important;
  }
  .ride-notities { border-left-color: #d4b566 !important; }
  .ride-notities strong { color: #d4b566 !important; }

  /* 14. Specifieke tekstkleuren */
  .brand, .dashboard-title,
  .day-header .dag-code, .day-header .dag-datum,
  .ride-time, .ride-row-time, .ride-col-time,
  .ride-col-main .route, .ride-route,
  .ride-col-main .who .name, .ride-who .name,
  .uren-total-value, .uren-day-name, .uren-day-hours,
  .ride-col-right .prijs,
  .ride-col-date .dag, .ride-col-date .datum,
  .inv-num, .inv-klant, .inv-total,
  .inv-brand-name, .inv-badge-nr, .inv-client-name,
  .klant-card-name, .chauffeur-name,
  .stat-value, .pdf-toolbar-name {
    color: #e2e8f0 !important;
  }
  .day-header .dag-code, .ride-time, .ride-row-time,
  .ride-col-time, .stat-value,
  .inv-brand-name, .inv-badge-nr, .uren-total-value {
    color: #d4b566 !important;
  }

  /* 15. Status pill */
  .status.ok { background: rgba(22,163,74,.2) !important; color: #4ade80 !important; }
  .status.warn { background: rgba(146,64,14,.25) !important; color: #fbbf24 !important; }

  /* 16. Range-collapsed / filter */
  .range-collapsed button {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }
  .range-collapsed button:hover {
    color: #e2e8f0 !important;
    border-color: #d4b566 !important;
  }

  /* 17. Empty-day row */
  .ride-row.empty-day-row .ride-col-date .dag { color: #e2e8f0 !important; }
  .ride-row.empty-day-row .ride-col-date .datum { color: #cbd5e1 !important; }
  .empty-day-add {
    color: #94a3b8 !important;
    border-color: #334155 !important;
    background: transparent !important;
  }
  .empty-day-add:hover {
    background: #d4b566 !important;
    color: #0a1e3f !important;
    border-color: #d4b566 !important;
  }

  /* 18. Section titles */
  .section-title, .section-desc { color: #94a3b8 !important; }

  /* 19. Modal close */
  .modal-close {
    background: #131d2e !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }
  .modal-close:hover {
    background: rgba(185,28,28,.2) !important;
    color: #f87171 !important;
  }

  /* 20. Actieve tabs / filters — goud op navy */
  .main-tab.active, .view-tab.active, .filter-tab.active,
  .filter-btn.active, .period-btn.active {
    background: #0a1e3f !important;
    color: #d4b566 !important;
  }
  .sub-tab.active {
    background: #1a1e29 !important;
    color: #d4b566 !important;
    border-color: #d4b566 !important;
  }

  /* 21. Segmented (radio) */
  .segmented input:checked + span {
    background: #d4b566 !important;
    border-color: #d4b566 !important;
    color: #0a1e3f !important;
  }

  /* 22. Adres pills */
  .adres-pills button {
    background: rgba(13,148,136,.15) !important;
    color: #5eead4 !important;
    border-color: rgba(94,234,212,.3) !important;
  }

  /* 23. Code */
  .info-block code, code {
    background: #1e293b !important;
    color: #e2e8f0 !important;
  }

  /* 24. Chauffeur actie-knoppen */
  .action-btn.call {
    background: rgba(29,78,216,.15) !important; color: #93c5fd !important;
    border-color: rgba(29,78,216,.3) !important;
  }
  .action-btn.wa {
    background: rgba(22,163,74,.15) !important; color: #86efac !important;
    border-color: rgba(22,163,74,.3) !important;
  }
  .action-btn.copy {
    background: #131d2e !important; color: #cbd5e1 !important;
    border-color: #334155 !important;
  }
  .action-btn.forward {
    background: rgba(245,158,11,.15) !important; color: #fbbf24 !important;
    border-color: rgba(245,158,11,.3) !important;
  }
  .action-btn.uren-edit {
    background: rgba(79,70,229,.15) !important; color: #a5b4fc !important;
    border-color: rgba(79,70,229,.3) !important;
  }

  /* 25. Flight link */
  .flight-link {
    color: #93c5fd !important;
    background: rgba(29,78,216,.15) !important;
    border-color: rgba(29,78,216,.3) !important;
  }

  /* 26. Rekening-blok in chauffeur-portaal */
  .ride-rekening {
    background: rgba(99,102,241,.15) !important;
    color: #c7d2fe !important;
  }

  /* 27. Error / success / notice */
  .error, .notice.err, .modal-error {
    background: rgba(185,28,28,.2) !important; color: #f87171 !important;
  }
  .success, .notice.ok {
    background: rgba(22,163,74,.18) !important; color: #4ade80 !important;
  }
  .notice { color: #e2e8f0 !important; }
  .notice.ok { color: #4ade80 !important; }
  .notice.err { color: #f87171 !important; }

  /* 28. Health-check blokken */
  .health.ok { background: rgba(22,163,74,.18) !important; }
  .health.warn { background: rgba(146,64,14,.25) !important; }
  .health.err { background: rgba(185,28,28,.2) !important; }
  .health-issues { background: rgba(255,255,255,.05) !important; }

  /* 29. Ritten in donker */
  .ride-row:hover, .ride-card:hover { background: #131d2e !important; }
  .ride-row.today-row, .ride-card.today {
    background: #1a1e29 !important; border-color: #d4b566 !important;
  }
  .ride-row.verwerkt-row, .ride-card.verwerkt {
    background: rgba(185,28,28,.08) !important;
  }
  .ride-row.expanded { border-color: #d4b566 !important; }
  .ride-row-main:active { background: #1e293b !important; }

  /* 30. PDF factuur — WIT houden (wordt geprint) */
  .pdf-modal-panel, .pdf-scroll { background: #0f172a !important; }
  .invoice-paper {
    background: #ffffff !important;
    color: #1e293b !important;
  }

  /* 31. Disabled */
  button:disabled, .btn:disabled {
    opacity: .5 !important; cursor: not-allowed !important;
  }

  /* 32. Filter-bar in beheer */
  .filter-bar { background: #0f172a !important; border-color: #1e293b !important; }
  .filter-btn { background: #131d2e !important; color: #94a3b8 !important; }
  .filter-btn.active { background: #0a1e3f !important; color: #d4b566 !important; }
}

@media (prefers-color-scheme: dark) {
  /* Pijltjes (← →) in week-nav */
  .week-nav button {
    color: #e2e8f0 !important;
    background: #131d2e !important;
    border-color: #334155 !important;
  }
  .week-nav button:active {
    background: #1e293b !important;
  }

  /* Vandaag / Deze week / Deze maand knop */
  .week-nav .today-btn {
    background: #0a1e3f !important;
    color: #d4b566 !important;
    border-color: #0a1e3f !important;
  }
  .week-nav .today-btn:active {
    background: #061730 !important;
  }

  /* Dag-label (ma, di, wo...) */
  .day-header .day-label {
    color: #e2e8f0 !important;
  }
  .day-header.today .day-label {
    color: #d4b566 !important;
  }

  /* Datum naast de dag */
  .day-header .day-date {
    color: #e2e8f0 !important;
  }

  /* "N rit/ten" badge */
  .day-header .day-count {
    background: #131d2e !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }

  /* "← Home" terug-knop (mogelijk ook donker) */
  .back-link {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
  }
  .back-link:hover {
    color: #fff !important;
    border-color: #d4b566 !important;
  }
}