/* ════════════════════════════════════════════════════════════
   Selvi Portaal — DESIGN-OVERLAY (high-fidelity handoff look)
   ----------------------------------------------------------------
   Laadt NÁ styles.css. Brengt de design-handoff (selvi-design)
   over op de bestaande componenten ZONDER markup te herschrijven:
     1) introduceert de --selvi-* tokens (bron van waarheid)
     2) remapt de bestaande semantische tokens op het nieuwe palet
        → alle bestaande .card/.btn/.pill/.tbl schuiven vanzelf mee
     3) skinned de paar hard-coded plekken (sidebar, topbar, nav,
        badges, avatar) exact naar het ontwerp.
   De huisstijl-kleur (--brand) blijft instelbaar via Beheer →
   applyTheme(); we raken 'm hier niet aan.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ───────── Design-handoff tokens (--selvi-*) ───────── */
  --selvi-brand-900:#0A1A22; --selvi-brand-800:#0C2C39; --selvi-brand-700:#0E2E38;
  --selvi-brand-600:#15414F; --selvi-brand-500:#1B6B8C; --selvi-brand-400:#1E7385;
  --selvi-brand-ring:#15788F; --selvi-brand-ink:#104056;
  --selvi-sidebar-gradient:linear-gradient(160deg,#0A1A22 0%,#0E2E38 55%,#15414F 100%);
  --selvi-logo-gradient:linear-gradient(145deg,#1B5163,#0C2C39);
  --selvi-nav-active-gradient:linear-gradient(135deg,#1E7385,#0E3947);
  --selvi-avatar-gradient:linear-gradient(145deg,#15414F,#0C2C39);
  --selvi-accent-500:#E0682A; --selvi-accent-400:#F2913F; --selvi-accent-700:#9A4A12;
  --selvi-ink:#0F1F26; --selvi-ink-2:#3C4F57; --selvi-muted:#5B6B73; --selvi-muted-2:#73828A; --selvi-faint:#9AA9B0;
  --selvi-on-dark:#cfe0e6; --selvi-on-dark-2:#9FB3BC; --selvi-on-dark-3:#7E97A1; --selvi-on-dark-cap:#647d87;
  --selvi-bg:#F7FAFB; --selvi-surface:#FFFFFF; --selvi-surface-2:#EEF3F6; --selvi-surface-3:#F1F6F8;
  --selvi-border:#E2E8EC; --selvi-border-2:#EDF1F3; --selvi-border-hover:#BCD0D8;
  --selvi-success-bg:#E9F4ED; --selvi-success-fg:#14653E; --selvi-success-dot:#1E7D4F; --selvi-success-border:#BFE0CD;
  --selvi-info-bg:#E2F0F5;    --selvi-info-fg:#125066;    --selvi-info-dot:#1B6B8C;
  --selvi-warn-bg:#FEF6E7;    --selvi-warn-fg:#8A5A00;    --selvi-warn-dot:#9A6700;
  --selvi-violet-bg:#EEEAF7;  --selvi-violet-fg:#4B3A86;  --selvi-violet-dot:#6B54B8;
  --selvi-neutral-bg:#EEF3F6; --selvi-neutral-fg:#5B6B73; --selvi-neutral-dot:#8499A2;
  --selvi-danger-bg:#FBE9E7;  --selvi-danger-fg:#B3261E;  --selvi-danger-dot:#B3261E;
  --selvi-radius-sm:8px; --selvi-radius:11px; --selvi-radius-md:14px; --selvi-radius-lg:16px; --selvi-radius-pill:999px;
  --selvi-shadow-card:0 1px 4px rgba(16,64,86,.06);
  --selvi-shadow-pop:0 18px 44px rgba(14,46,58,.18);
  --selvi-shadow-nav-active:0 6px 16px rgba(30,115,133,.45);
  --selvi-focus-ring:0 0 0 4px rgba(21,120,143,.18);
  --selvi-sidebar-w:244px; --selvi-sidebar-w-collapsed:74px; --selvi-topbar-h:72px;

  /* ───────── Remap bestaande semantische tokens → design-palet ───────── */
  --bg:#F7FAFB;
  --surface:#FFFFFF;
  --surface-2:#F1F6F8;
  --surface-3:#EEF3F6;
  --border:#E2E8EC;
  --border-strong:#D2DEE4;

  --text:#0F1F26;
  --text-2:#5B6B73;
  --text-3:#9AA9B0;

  /* --brand* blijft via huisstijl instelbaar (default petrol/teal, dicht bij design) */
  --brand-soft:#E2F0F5;

  --success:#1E7D4F; --success-soft:#E9F4ED;
  --warning:#9A6700; --warning-soft:#FEF6E7;
  --danger:#B3261E;  --danger-soft:#FBE9E7;
  --info:#1B6B8C;    --info-soft:#E2F0F5;

  --radius:14px; --radius-sm:8px; --radius-lg:16px;

  --sidebar-w:244px;
}

/* ════════════════════════ SIDEBAR ════════════════════════ */
#sidebar {
  background: var(--selvi-sidebar-gradient) !important;
  background-image: var(--selvi-sidebar-gradient) !important;
  border-right: none;
  color: var(--selvi-on-dark);
}
#sidebar.collapsed { width: var(--selvi-sidebar-w-collapsed); }
#sidebar.collapsed:hover { width: var(--sidebar-w); }

.logo-mark { border-radius: 11px; background: var(--selvi-logo-gradient); box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.logo-text h1 { font-weight: 800; }
.logo-text span { color: var(--selvi-on-dark-3); }

.nav-section { color: var(--selvi-on-dark-cap); letter-spacing: .1em; font-weight: 700; }
.nav-item { color: var(--selvi-on-dark-2); border-radius: var(--selvi-radius); font-weight: 500; font-size: 14px; padding: 10px 12px; gap: 12px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #eaf2f5; }
.nav-item.active { background: var(--selvi-nav-active-gradient); box-shadow: var(--selvi-shadow-nav-active); font-weight: 600; }

/* Telbadges in de nav: oranje accent (design), wit op actief */
.nav-item .badge,
.nav-item:not(.active) .badge.alert,
.nav-item:not(.active) .badge.warn {
  background: var(--selvi-accent-500); color: #fff; border-radius: var(--selvi-radius-pill);
  font-weight: 700; min-width: 20px; padding: 1px 8px;
}
.nav-item.active .badge { background: rgba(255,255,255,.22); }

/* Lucide-iconen in de sidebar netjes uitlijnen (vervangen de emoji-spans) */
.nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: 1; flex: 0 0 auto; }
.nav-icon svg { width: 18px; height: 18px; stroke-width: 2; }

.admin-pick { border-radius: 13px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); }
.admin-pick .lbl { color: var(--selvi-on-dark-3); letter-spacing: .09em; }
.collapse-btn { color: var(--selvi-on-dark-3); }
.collapse-btn:hover { color: var(--selvi-on-dark); }
.sidebar-footer .avatar,
.avatar { border-radius: 11px; background: var(--selvi-avatar-gradient); }
.footer-info .role { color: var(--selvi-on-dark-3); }

/* ════════════════════════ TOPBAR ════════════════════════ */
#topbar {
  height: var(--selvi-topbar-h);
  background: var(--selvi-surface);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--selvi-border);
  padding: 0 24px;
}
.page-title { font-size: var(--selvi-fs-h1, 20px); font-weight: 800; letter-spacing: -.02em; }
.page-title small { color: var(--selvi-muted); font-weight: 500; }
.search-box { border-radius: var(--selvi-radius-pill); background: var(--selvi-bg); border-color: var(--selvi-border); height: 42px; }
.search-box:focus { border-color: var(--selvi-brand-ring); background: #fff; box-shadow: var(--selvi-focus-ring); }
.queue-pill { border-radius: var(--selvi-radius-pill); background: var(--selvi-bg); border-color: var(--selvi-border); }
.admin-context { border-radius: var(--selvi-radius-pill); }

/* topbar icoon-knop (sync e.d.) — rond, design-stijl */
.tb-icon { width: 42px; height: 42px; border-radius: var(--selvi-radius-pill); background: var(--selvi-surface); border: 1px solid var(--selvi-border); color: var(--selvi-brand-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, border-color .12s; }
.tb-icon:hover { background: var(--selvi-surface-2); border-color: var(--selvi-border-hover); }
.tb-icon svg, .topbar-right [data-lucide] svg, .topbar-right svg.lucide { width: 18px; height: 18px; }

/* account-avatar (renderAccountMenu) */
.account-avatar { background: var(--selvi-avatar-gradient) !important; }

/* ════════════════════════ KNOPPEN ════════════════════════ */
.btn { border-radius: var(--selvi-radius); height: auto; padding: 9px 16px; }
.btn-primary { background: var(--selvi-nav-active-gradient); box-shadow: var(--selvi-shadow-nav-active); }
.btn-primary:hover { filter: brightness(1.05); transform: none; box-shadow: var(--selvi-shadow-nav-active); }
.btn-secondary { border-radius: var(--selvi-radius); }
.btn-secondary:hover { background: var(--selvi-surface-2); border-color: var(--selvi-border-hover); }
.btn-success { background: var(--selvi-success-dot); box-shadow: 0 4px 12px rgba(30,125,79,.25); }
.btn-success:hover { filter: brightness(1.04); transform: none; }
.btn-sm { border-radius: var(--selvi-radius-sm); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ════════════════════════ KAARTEN ════════════════════════ */
.card { border-radius: var(--selvi-radius-md); box-shadow: var(--selvi-shadow-card); border-color: var(--selvi-border); }
.card-header { border-bottom-color: var(--selvi-border-2); }
.card-header h3 { font-size: 16px; font-weight: 700; color: var(--selvi-ink); }

/* ════════════════════════ KPI ════════════════════════ */
.kpi { border-radius: var(--selvi-radius-md); box-shadow: var(--selvi-shadow-card); border-color: #E6ECEF; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(14,46,58,.1); border-color: #D2E0E6; }
.kpi-icon { border-radius: 9px; }
.kpi-label { color: var(--selvi-faint); font-weight: 700; }
.kpi-value { color: var(--selvi-ink); }

/* ════════════════════════ PILLS / STATUS ════════════════════════ */
.pill { border-radius: var(--selvi-radius-pill); font-weight: 700; padding: 4px 10px; gap: 6px; }
.pill-green  { background: var(--selvi-success-bg); color: var(--selvi-success-fg); }
.pill-yellow { background: var(--selvi-warn-bg);    color: var(--selvi-warn-fg); }
.pill-red    { background: var(--selvi-danger-bg);  color: var(--selvi-danger-fg); }
.pill-blue   { background: var(--selvi-info-bg);    color: var(--selvi-info-fg); }
.pill-brand  { background: var(--selvi-info-bg);    color: var(--selvi-info-fg); }
.pill-gray   { background: var(--selvi-neutral-bg); color: var(--selvi-neutral-fg); }
.pill-orange { background: #FBEEE3; color: var(--selvi-accent-700); }
.pill-violet { background: var(--selvi-violet-bg);  color: var(--selvi-violet-fg); }

/* ════════════════════════ TABEL ════════════════════════ */
.tbl th { background: var(--selvi-surface); color: var(--selvi-faint); letter-spacing: .04em; border-bottom-color: var(--selvi-border); }
.tbl td { border-bottom-color: var(--selvi-border-2); color: var(--selvi-ink); }
.tbl tbody tr:hover td { background: var(--selvi-surface-3); }

/* ════════════════════════ TABS / SEGMENT ════════════════════════ */
.tab.active { background: var(--selvi-nav-active-gradient); box-shadow: var(--selvi-shadow-nav-active); }
.tabs { border-radius: var(--selvi-radius-md); border-color: var(--selvi-border); }
.psize.active { background: var(--selvi-nav-active-gradient); }
.subnav-item.active { background: var(--selvi-info-bg); color: var(--selvi-info-fg); }

/* ════════════════════════ FORM ════════════════════════ */
.form-control { border-radius: var(--selvi-radius-sm); border-color: var(--selvi-border); }
.form-control:hover { border-color: var(--selvi-border-hover); }
.form-control:focus { border-color: var(--selvi-brand-ring); box-shadow: var(--selvi-focus-ring); }

/* ════════════════════════ MODAL ════════════════════════ */
.modal { border-radius: var(--selvi-radius-lg); }
.modal-header { border-bottom-color: var(--selvi-border); }
.modal-footer { background: var(--selvi-surface); border-top-color: var(--selvi-border); }
.modal-bg { background: rgba(14,46,58,.42); }

/* ════════════════════════ ALERTS ════════════════════════ */
.alert { border-radius: var(--selvi-radius-sm); }
.alert-info    { background: var(--selvi-info-bg);    color: var(--selvi-info-fg);    border-color: #C5DEE7; }
.alert-warn    { background: var(--selvi-warn-bg);    color: var(--selvi-warn-fg);    border-color: #F4E2BC; }
.alert-success { background: var(--selvi-success-bg); color: var(--selvi-success-fg); border-color: var(--selvi-success-border); }
.alert-brand   { background: var(--selvi-info-bg);    color: var(--selvi-info-fg);    border-color: #C5DEE7; }

/* ════════════════════════ ALGEMENE LUCIDE-HULP ════════════════════════ */
/* svg.lucide erbij: na createIcons strippen we data-lucide van de SVG (tegen de re-render-lus) */
[data-lucide], svg.lucide { display: inline-flex; align-items: center; justify-content: center; }
i[data-lucide] svg { display: block; }
.kpi-icon svg { width: 21px; height: 21px; }
.insight-icon svg { width: 17px; height: 17px; }
.btn svg, .tab svg, .pill svg { flex: 0 0 auto; }

/* ════════════════════════ OFF-PALET KLEUREN → DESIGN ════════════════════════ */
/* Inlog-gate: navy/paars → design teal-verloop */
#login-gate {
  background: #0E2E38 !important;
  background-image: radial-gradient(at 0% 0%, rgba(21,65,79,.55) 0, transparent 50%),
                    radial-gradient(at 100% 100%, rgba(27,107,140,.35) 0, transparent 55%) !important;
}
/* Kolommenbalans-kop: navy→indigo → design teal */
.kb-h { background: linear-gradient(135deg, #0C2C39 0%, #15414F 100%) !important; }
.kb-totaal { background: var(--selvi-info-bg); }
/* Progressbalken: felgroen/amber → design */
.progress-bar { background: var(--selvi-nav-active-gradient); }
.progress-bar.success { background: linear-gradient(90deg, #1E7D4F, #2C9C73) !important; }
.progress-bar.warning { background: linear-gradient(90deg, #9A6700, #C08A2E) !important; }
/* Confidence-balkjes: felle einden → design */
.conf-high .conf-fill { background: linear-gradient(90deg, #1E7D4F, #2C9C73) !important; }
.conf-mid .conf-fill  { background: linear-gradient(90deg, #9A6700, #C08A2E) !important; }
.conf-low .conf-fill  { background: linear-gradient(90deg, #B3261E, #D2564E) !important; }
/* Statuschips (bank/inkoop/werkbak) → design-pill */
.chip { border-radius: var(--selvi-radius-pill); height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 700; }
.chip.active { background: var(--brand); box-shadow: none; }
.chip .cnt { font-weight: 800; }
/* Brand-accenten exact op design */
.subnav-item.active { color: var(--selvi-info-fg); }