/* ───────────────────────────────────────────────────────────────────────────
   ViPayments design system — premium SaaS-taal, 1:1 overgenomen van ViRank,
   met ViPayments-merk: primair marineblauw (#000080), accent oranje (#FF7518).
   Plain CSS (geen build-step) zodat wijzigingen live zichtbaar zijn.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Merk — navy */
    --brand-50:#eef0fb; --brand-100:#d6dbf5; --brand-200:#b0b8ec; --brand-300:#8088df;
    --brand-400:#4f57c4; --brand-500:#2a2fa6; --brand-600:#15169a; --brand-700:#000080;
    --brand-800:#00006b; --brand-900:#000052;
    /* Accent — oranje */
    --accent-50:#fff3e9; --accent-100:#ffe2cc; --accent-200:#ffc599; --accent-300:#ffa466;
    --accent-400:#ff8c3d; --accent-500:#ff7518; --accent-600:#e85f00; --accent-700:#c24f00;
    /* Neutraal (Tailwind gray) */
    --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
    --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
    --gray-800:#1f2937; --gray-900:#111827;
    /* Statuskleuren */
    --green-50:#f0fdf4; --green-700:#15803d;
    --amber-50:#fffbeb; --amber-700:#b45309;
    --red-50:#fef2f2; --red-600:#dc2626; --red-700:#b91c1c;
    --blue-50:#eff6ff; --blue-700:#1d4ed8;
    --orange-50:#fff7ed; --orange-700:#c2410c;
    /* Effecten */
    --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --shadow-2xl:0 25px 50px -12px rgb(0 0 0 / .25);
    --radius-lg:.5rem; --radius-xl:.75rem; --radius-2xl:1rem;
    --font-sans:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
    margin:0; font-family:var(--font-sans); color:var(--gray-800);
    background:var(--gray-50); -webkit-font-smoothing:antialiased;
    font-feature-settings:'cv11','ss01';
}
a { color:inherit; text-decoration:none; }
:focus-visible { outline:none; box-shadow:0 0 0 2px rgb(42 47 166 / .4); border-radius:4px; }

/* Typografie ----------------------------------------------------------------- */
.page-title    { font-size:1.5rem; line-height:1.85rem; font-weight:700; letter-spacing:-.02em; color:var(--gray-900); margin:0; }
.page-subtitle { margin:.25rem 0 0; font-size:.875rem; color:var(--gray-500); }
.section-label, .nav-group { font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-400); }
h1 { font-size:1.5rem; line-height:1.85rem; font-weight:700; letter-spacing:-.02em; color:var(--gray-900); margin:0 0 .25rem; }
h2 { font-size:.9375rem; font-weight:600; color:var(--gray-900); margin:0 0 .85rem; }
.sub { margin:.25rem 0 1.4rem; font-size:.875rem; color:var(--gray-500); }

/* Cards / panels ------------------------------------------------------------- */
.card, .panel { border-radius:var(--radius-xl); background:#fff; padding:1.25rem; box-shadow:var(--shadow-sm); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--gray-200); margin-bottom:1.125rem; }
.card-tight { padding:1rem; }
.card-link { transition:box-shadow .15s; }
.card-link:hover { box-shadow:var(--shadow-md), inset 0 0 0 1px var(--gray-300); }

/* KPI-grid ------------------------------------------------------------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.cards .card { margin-bottom:0; }
.card .label { font-size:.75rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.card .value { font-size:1.65rem; font-weight:700; margin-top:.4rem; letter-spacing:-.02em; color:var(--gray-900); }

/* Buttons -------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; cursor:pointer;
    border-radius:var(--radius-lg); padding:.625rem 1rem; font-size:.875rem; font-weight:600; font-family:inherit;
    transition:background-color .15s, box-shadow .15s; background:var(--brand-700); color:#fff; }
.btn:hover { background:var(--brand-600); }
.btn:active { background:var(--brand-800); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:.375rem .75rem; font-size:.75rem; }
.btn-primary { background:var(--brand-700); color:#fff; }
.btn-accent  { background:var(--accent-500); color:#fff; }
.btn-accent:hover { background:var(--accent-600); }
.btn-secondary, .btn.secondary { background:var(--gray-100); color:var(--gray-700); }
.btn-secondary:hover, .btn.secondary:hover { background:var(--gray-200); }
.btn-outline { background:#fff; color:var(--gray-700); box-shadow:inset 0 0 0 1px var(--gray-300); }
.btn-outline:hover { background:var(--gray-50); }
.btn-danger, .btn.danger { background:var(--red-600); color:#fff; }
.btn-danger:hover, .btn.danger:hover { background:#ef4444; }

.link { font-weight:500; color:var(--brand-600); transition:color .15s; }
.link:hover { color:var(--brand-700); }

/* Forms ---------------------------------------------------------------------- */
.label { display:block; font-size:.875rem; font-weight:500; color:var(--gray-700); margin-bottom:.4rem; }
.field-hint { margin-top:.25rem; font-size:.75rem; color:var(--gray-400); }
.field-error { margin-top:.25rem; font-size:.75rem; color:var(--red-600); }
.input, .select, .textarea, input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select {
    display:block; width:100%; border:0; background:#fff; border-radius:var(--radius-lg);
    padding:.625rem .75rem; font-size:.875rem; color:var(--gray-900); font-family:inherit;
    box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--gray-300); transition:box-shadow .15s; }
.input::placeholder, input::placeholder { color:var(--gray-400); }
.input:focus, input:focus, select:focus, .textarea:focus { outline:none; box-shadow:inset 0 0 0 2px var(--brand-500); }

/* Badges --------------------------------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:.25rem; border-radius:9999px; padding:.125rem .625rem; font-size:.75rem; font-weight:500; }
.badge-brand  { background:var(--brand-50);  color:var(--brand-700); }
.badge-gray,  .badge.muted { background:var(--gray-100);  color:var(--gray-600); }
.badge-green, .badge.ok    { background:var(--green-50);  color:var(--green-700); }
.badge-amber, .badge.warn  { background:var(--amber-50);  color:var(--amber-700); }
.badge-blue   { background:var(--blue-50);   color:var(--blue-700); }
.badge-orange { background:var(--orange-50); color:var(--orange-700); }
.badge-red,   .badge.err   { background:var(--red-50);    color:var(--red-700); }

/* Alerts / flashes ----------------------------------------------------------- */
.alert, .flash { border-radius:var(--radius-lg); padding:.75rem 1rem; font-size:.875rem; margin-bottom:1rem; }
.alert-success, .flash.ok  { background:var(--green-50); color:var(--green-700); }
.alert-warning             { background:var(--amber-50); color:var(--amber-700); }
.alert-error,  .flash.err  { background:var(--red-50);   color:var(--red-700); }
.alert-info                { background:var(--brand-50);  color:var(--brand-700); }

/* Tables --------------------------------------------------------------------- */
table, .table { min-width:100%; width:100%; border-collapse:collapse; font-size:.875rem; }
thead th, .table thead th { white-space:nowrap; padding:.75rem 1rem; text-align:left; font-size:.75rem;
    font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); border-bottom:1px solid var(--gray-100); }
tbody tr, .table tbody tr { border-top:1px solid var(--gray-100); transition:background-color .15s; }
tbody tr:hover, .table tbody tr:hover { background:rgb(249 250 251 / .7); }
tbody td, .table tbody td { padding:.85rem 1rem; vertical-align:middle; color:var(--gray-700); }
td a { color:var(--brand-600); font-weight:500; }

/* Empty state ---------------------------------------------------------------- */
.empty, .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:var(--radius-xl); border:1px dashed var(--gray-300); background:rgb(249 250 251 / .5);
    padding:3rem 1.5rem; text-align:center; color:var(--gray-400); font-size:.875rem; }

code { background:var(--gray-100); color:var(--gray-700); padding:.125rem .45rem; border-radius:6px;
    font-size:.8125rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

.stripe-mount { min-height:120px; }

/* App shell ------------------------------------------------------------------ */
.shell { display:flex; min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:16rem; display:flex; flex-direction:column;
    background:#fff; border-right:1px solid var(--gray-200); z-index:40; }
.sidebar-head { display:flex; align-items:center; height:4rem; padding:0 1.25rem; border-bottom:1px solid var(--gray-100); }
.sidebar-head img { height:1.75rem; width:auto; }
.nav { flex:1; overflow-y:auto; padding:1rem .75rem; }
.nav-group { padding:1rem .75rem .4rem; }
.nav a { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:var(--radius-lg);
    color:var(--gray-600); font-size:.875rem; font-weight:500; margin-bottom:.125rem; transition:background-color .12s, color .12s; }
.nav a svg { width:1.05rem; height:1.05rem; flex-shrink:0; color:var(--gray-400); }
.nav a:hover { background:var(--gray-50); color:var(--gray-900); }
.nav a.active { background:var(--brand-50); color:var(--brand-800); font-weight:600; }
.nav a.active svg { color:var(--brand-700); }

.main { flex:1; min-width:0; margin-left:16rem; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
    height:4rem; padding:0 1.75rem; background:rgb(255 255 255 / .85); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--gray-200); }
.topbar .title { font-weight:600; color:var(--gray-900); }
.topbar .right { display:flex; gap:1rem; align-items:center; font-size:.8125rem; color:var(--gray-500); }
.content { padding:2rem 1.75rem; max-width:75rem; width:100%; }

.mode { font-size:.6875rem; font-weight:600; padding:.2rem .6rem; border-radius:9999px; }
.mode.test { color:var(--accent-700); background:var(--accent-50); }
.mode.live { color:var(--green-700); background:var(--green-50); }

@media (max-width:900px) {
    .sidebar { transform:translateX(-100%); transition:transform .2s; }
    .sidebar.open { transform:none; }
    .main { margin-left:0; }
}

ol.sub, ul.sub { color:var(--gray-600); }

/* Logo-hoogtes (vervangt Tailwind h-*) */
.h-7  { height:1.75rem; width:auto; }
.h-9  { height:2.25rem; width:auto; }
.h-12 { height:3rem;    width:auto; }
.h-14 { height:3.5rem;  width:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   FUNDAMENT — gedeelde componenten voor de modules (tabs, drawer, charts,
   segmented, kpi-delta, skeleton, toasts, command-palette, notif-bel,
   data-toolbar) + dark-mode. Zelfde light/navy/oranje-taal.
   ─────────────────────────────────────────────────────────────────────────── */

/* Semantische oppervlak-tokens — zodat klassen meeschalen in dark-mode.
   Light = bestaand gedrag (geen visuele wijziging). */
:root {
    --bg:var(--gray-50);
    --surface:#fff;
    --surface-2:var(--gray-50);
    --text:var(--gray-800);
    --text-strong:var(--gray-900);
    --text-muted:var(--gray-500);
    --border:var(--gray-200);
    --border-soft:var(--gray-100);
}

/* Tabs ----------------------------------------------------------------------- */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }
.tab { appearance:none; border:0; background:none; cursor:pointer; font-family:inherit;
    padding:.7rem .9rem; font-size:.875rem; font-weight:500; color:var(--text-muted);
    border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; }
.tab:hover { color:var(--text-strong); }
.tab.active { color:var(--brand-700); border-bottom-color:var(--accent-500); font-weight:600; }
[data-theme="dark"] .tab.active { color:var(--brand-200); }

/* Drawer / modal ------------------------------------------------------------- */
.modal-overlay { position:fixed; inset:0; z-index:60; background:rgb(17 24 39 / .45);
    backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.modal { width:100%; max-width:34rem; background:var(--surface); border-radius:var(--radius-2xl);
    box-shadow:var(--shadow-2xl), inset 0 0 0 1px var(--border); padding:1.5rem; }
.drawer { position:fixed; inset:0 0 0 auto; z-index:60; width:min(30rem, 92vw); background:var(--surface);
    box-shadow:var(--shadow-2xl); border-left:1px solid var(--border); display:flex; flex-direction:column;
    transform:translateX(0); animation:drawer-in .2s ease; overflow-y:auto; }
.drawer-head { display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 1.25rem; border-bottom:1px solid var(--border-soft); }
.drawer-head h2 { margin:0; }
.drawer-body { padding:1.25rem; flex:1; }
@keyframes drawer-in { from { transform:translateX(100%); } to { transform:translateX(0); } }

/* Chart-card ----------------------------------------------------------------- */
.chart-card { border-radius:var(--radius-xl); background:var(--surface); padding:1.25rem;
    box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--border); margin-bottom:1.125rem; }
.chart-card h2 { margin-bottom:1rem; }
.canvas-container { position:relative; height:280px; width:100%; }
.canvas-container canvas { position:absolute; inset:0; }

/* Segmented control (datum-filter knoppengroep) ------------------------------ */
.segmented { display:inline-flex; padding:.2rem; gap:.2rem; background:var(--surface-2);
    border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px var(--border); }
.segmented button, .segmented a { appearance:none; border:0; cursor:pointer; font-family:inherit;
    background:none; color:var(--text-muted); font-size:.8125rem; font-weight:600;
    padding:.4rem .8rem; border-radius:calc(var(--radius-lg) - .15rem); transition:background-color .15s, color .15s; }
.segmented button:hover, .segmented a:hover { color:var(--text-strong); }
.segmented button.active, .segmented a.active { background:var(--surface); color:var(--brand-700);
    box-shadow:var(--shadow-sm); }
[data-theme="dark"] .segmented button.active, [data-theme="dark"] .segmented a.active { color:var(--brand-200); }

/* KPI-delta (groen/rood pijltje) --------------------------------------------- */
.kpi-delta { display:inline-flex; align-items:center; gap:.2rem; font-size:.8125rem; font-weight:600;
    margin-top:.35rem; }
.kpi-delta.up { color:var(--green-700); }
.kpi-delta.down { color:var(--red-600); }
.kpi-delta::before { font-size:.9em; }
.kpi-delta.up::before { content:'▲'; }
.kpi-delta.down::before { content:'▼'; }

/* Skeleton (shimmer) --------------------------------------------------------- */
.skeleton { position:relative; overflow:hidden; background:var(--surface-2);
    border-radius:var(--radius-lg); min-height:1rem; }
.skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
    animation:skeleton-shimmer 1.4s infinite; }
[data-theme="dark"] .skeleton::after { background:linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); }
@keyframes skeleton-shimmer { 100% { transform:translateX(100%); } }

/* Toasts --------------------------------------------------------------------- */
.toast-stack { position:fixed; right:1.25rem; bottom:1.25rem; z-index:80;
    display:flex; flex-direction:column; gap:.6rem; max-width:24rem; }
.toast { display:flex; align-items:flex-start; gap:.6rem; padding:.8rem 1rem; border-radius:var(--radius-lg);
    background:var(--surface); color:var(--text); font-size:.875rem; font-weight:500;
    box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--border); animation:toast-in .2s ease; }
.toast.success { box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--green-700); color:var(--green-700); }
.toast.error   { box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--red-600);  color:var(--red-700); }
.toast.warn    { box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--amber-700); color:var(--amber-700); }
.toast::before { font-size:1rem; line-height:1.2; }
.toast.success::before { content:'✓'; }
.toast.error::before   { content:'✕'; }
.toast.warn::before    { content:'!'; }
@keyframes toast-in { from { opacity:0; transform:translateY(.5rem); } to { opacity:1; transform:none; } }

/* Command-palette (⌘K) ------------------------------------------------------- */
.cmdk-overlay { position:fixed; inset:0; z-index:90; background:rgb(17 24 39 / .45);
    backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:12vh 1.5rem 1.5rem; }
.cmdk-panel { width:100%; max-width:36rem; background:var(--surface); border-radius:var(--radius-2xl);
    box-shadow:var(--shadow-2xl), inset 0 0 0 1px var(--border); overflow:hidden; }
.cmdk-panel input { border-radius:0; box-shadow:none; border-bottom:1px solid var(--border-soft);
    padding:1rem 1.1rem; font-size:.9375rem; background:var(--surface); }
.cmdk-panel input:focus { box-shadow:none; border-bottom:1px solid var(--border-soft); }
.cmdk-list { max-height:22rem; overflow-y:auto; padding:.4rem; }
.cmdk-item { display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; border-radius:var(--radius-lg);
    color:var(--text); font-size:.875rem; font-weight:500; cursor:pointer; }
.cmdk-item svg { width:1.05rem; height:1.05rem; color:var(--text-muted); flex-shrink:0; }
.cmdk-item small { margin-left:auto; color:var(--text-muted); font-size:.6875rem; text-transform:uppercase; letter-spacing:.05em; }
.cmdk-item:hover, .cmdk-item.active { background:var(--brand-50); color:var(--brand-800); }
[data-theme="dark"] .cmdk-item:hover, [data-theme="dark"] .cmdk-item.active { background:var(--brand-900); color:var(--brand-100); }
.cmdk-empty { padding:1.5rem; text-align:center; color:var(--text-muted); font-size:.875rem; }

/* Notificatie-bel ------------------------------------------------------------ */
.notif-bell { position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:2.25rem; height:2.25rem; border:0; cursor:pointer; background:none; color:var(--text-muted);
    border-radius:var(--radius-lg); transition:background-color .15s, color .15s; }
.notif-bell:hover { background:var(--surface-2); color:var(--text-strong); }
.notif-bell svg { width:1.15rem; height:1.15rem; }
.notif-dot { position:absolute; top:.4rem; right:.4rem; width:.5rem; height:.5rem; border-radius:9999px;
    background:var(--accent-500); box-shadow:0 0 0 2px var(--surface); }
.notif-panel { position:absolute; top:calc(100% + .5rem); right:0; z-index:70; width:22rem;
    background:var(--surface); border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--border); overflow:hidden; }
.notif-panel header { padding:.85rem 1rem; border-bottom:1px solid var(--border-soft);
    font-size:.8125rem; font-weight:600; color:var(--text-strong); display:flex; justify-content:space-between; align-items:center; }
.notif-list { max-height:24rem; overflow-y:auto; }
.notif-item { display:flex; gap:.65rem; padding:.8rem 1rem; border-top:1px solid var(--border-soft);
    font-size:.8125rem; color:var(--text); text-align:left; }
.notif-item:first-child { border-top:0; }
.notif-item.unread { background:var(--brand-50); }
[data-theme="dark"] .notif-item.unread { background:var(--brand-900); }
.notif-item .notif-title { font-weight:600; color:var(--text-strong); }
.notif-item .notif-time { color:var(--text-muted); font-size:.6875rem; margin-top:.15rem; }

/* Data-toolbar (zoek + filter-balk) ------------------------------------------ */
.data-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1rem; }
.data-toolbar .grow { flex:1; min-width:12rem; }
.data-toolbar input[type=search], .data-toolbar input[type=text] { max-width:20rem; }

/* Pill-filter ---------------------------------------------------------------- */
.pill-filter { display:inline-flex; align-items:center; gap:.35rem; appearance:none; border:0; cursor:pointer;
    font-family:inherit; font-size:.8125rem; font-weight:500; color:var(--text); padding:.4rem .75rem;
    border-radius:9999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border);
    transition:box-shadow .15s, background-color .15s, color .15s; }
.pill-filter:hover { background:var(--surface-2); }
.pill-filter.active { background:var(--brand-50); color:var(--brand-700); box-shadow:inset 0 0 0 1px var(--brand-200); }
[data-theme="dark"] .pill-filter.active { background:var(--brand-900); color:var(--brand-100); box-shadow:inset 0 0 0 1px var(--brand-600); }

/* Stat-row ------------------------------------------------------------------- */
.stat-row { display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.7rem 0; border-top:1px solid var(--border-soft); font-size:.875rem; }
.stat-row:first-child { border-top:0; }
.stat-row .stat-label { color:var(--text-muted); }
.stat-row .stat-value { font-weight:600; color:var(--text-strong); }

/* Theme-toggle knop (topbar) ------------------------------------------------- */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem;
    border:0; cursor:pointer; background:none; color:var(--text-muted); border-radius:var(--radius-lg);
    transition:background-color .15s, color .15s; }
.theme-toggle:hover { background:var(--surface-2); color:var(--text-strong); }
.theme-toggle svg { width:1.15rem; height:1.15rem; }

/* ── Dark-mode ──────────────────────────────────────────────────────────────
   Zet de semantische tokens om naar donker en patcht de plekken waar bestaande
   klassen hard #fff / gray-* gebruiken, zodat alles meeschaalt. */
[data-theme="dark"] {
    --bg:#0b1020;
    --surface:#121a2e;
    --surface-2:#0e1526;
    --text:#cbd5e1;
    --text-strong:#f1f5f9;
    --text-muted:#94a3b8;
    --border:#26314d;
    --border-soft:#1c2740;
}
[data-theme="dark"] body { background:var(--bg); color:var(--text); }
[data-theme="dark"] .page-title, [data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] .card .value, [data-theme="dark"] .topbar .title { color:var(--text-strong); }
[data-theme="dark"] .sub, [data-theme="dark"] .page-subtitle, [data-theme="dark"] .card .label,
[data-theme="dark"] .topbar .right, [data-theme="dark"] .section-label, [data-theme="dark"] .nav-group { color:var(--text-muted); }
[data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .chart-card {
    background:var(--surface); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--border); }
[data-theme="dark"] .sidebar { background:var(--surface); border-right-color:var(--border); }
[data-theme="dark"] .sidebar-head { border-bottom-color:var(--border-soft); }
[data-theme="dark"] .topbar { background:rgb(18 26 46 / .85); border-bottom-color:var(--border); }
[data-theme="dark"] .nav a { color:var(--text-muted); }
[data-theme="dark"] .nav a:hover { background:var(--surface-2); color:var(--text-strong); }
[data-theme="dark"] .nav a.active { background:var(--brand-900); color:var(--brand-100); }
[data-theme="dark"] .nav a.active svg { color:var(--brand-200); }
[data-theme="dark"] .input, [data-theme="dark"] input[type=text], [data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=password], [data-theme="dark"] input[type=url], [data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=search], [data-theme="dark"] select, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
    background:var(--surface-2); color:var(--text-strong); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--border); }
[data-theme="dark"] .input::placeholder, [data-theme="dark"] input::placeholder { color:var(--text-muted); }
[data-theme="dark"] thead th, [data-theme="dark"] .table thead th { color:var(--text-muted); border-bottom-color:var(--border); }
[data-theme="dark"] tbody tr, [data-theme="dark"] .table tbody tr { border-top-color:var(--border-soft); }
[data-theme="dark"] tbody td, [data-theme="dark"] .table tbody td { color:var(--text); }
[data-theme="dark"] tbody tr:hover, [data-theme="dark"] .table tbody tr:hover { background:rgb(255 255 255 / .03); }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn.secondary { background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn.secondary:hover { background:var(--border-soft); }
[data-theme="dark"] .btn-outline { background:var(--surface); color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }
[data-theme="dark"] .empty, [data-theme="dark"] .empty-state { background:rgb(255 255 255 / .02); border-color:var(--border); color:var(--text-muted); }
[data-theme="dark"] code { background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .modal, [data-theme="dark"] .drawer, [data-theme="dark"] .cmdk-panel,
[data-theme="dark"] .notif-panel, [data-theme="dark"] .toast { background:var(--surface); color:var(--text); }
[data-theme="dark"] .pill-filter { background:var(--surface); color:var(--text); }
[data-theme="dark"] .segmented { background:var(--surface-2); }
[data-theme="dark"] .segmented button.active, [data-theme="dark"] .segmented a.active { background:var(--surface); }