/* app/css/hq.css: Bontu OS ontwerpsysteem (patroon: HQ-instrument met vaste kop, cijferrij, een accent per scherm).
   Huid Bontu: navy als enige gevulde actiekleur, mint als zacht accent, Inter voor tekst en Work Sans voor koppen.
   Laadt als LAATSTE stylesheet en is de bron van de tokens. Thema's: licht (standaard) en donker ([data-theme="dark"]).
   Contrast: tekstrollen >= 4.5:1 op canvas en panel in beide thema's; wit op navy en op accent. */

:root{
  /* oppervlakken */
  --bg-canvas:#F5F7FB; --bg-panel:#FFFFFF; --bg-elevated:#F5F7FB; --bg-slate:#ECEFF5;
  --bg-hover:rgba(15,27,61,.045); --bg-active:rgba(15,27,61,.075);
  /* lijnen */
  --border-soft:#E7EAF0; --border-mid:#CBD2DF; --border-input:#DDE2EB;
  /* tekst */
  --text-primary:#0F1B3D; --text-body:#16213F; --text-secondary:#5B6478; --text-tertiary:#5B6478;
  /* actie: navy is het enige gevulde element, mint alleen als zachte achtergrond */
  --accent:#152A6B; --accent-hover:#1D3A8F; --accent-ink:#FFFFFF; --accent-text:#1D3A8F; --accent-wash:rgba(148,211,190,.30);
  --mint:#94D3BE; --navy:#152A6B; --navy2:#1D3A8F; --sky:#3F78C0;
  /* status: alleen labels en toestand */
  --status-live:#147A55; --status-warn:#A86F00; --status-error:#C42B2B; --status-info:#3F78C0; --status-idle:#9AA3B5;
  --status-live-wash:rgba(20,122,85,.10); --status-warn-wash:rgba(201,138,11,.12); --status-error-wash:rgba(196,43,43,.09); --status-info-wash:rgba(63,120,192,.11);
  /* type */
  --font-ui:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:'Work Sans','Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-micro:10.5px; --t-label:11.5px; --t-caption:12.5px; --t-body-sm:13.5px; --t-body:14.5px; --t-title:17px; --t-heading:22px; --t-page:30px; --t-stat:24px;
  --w-regular:400; --w-medium:510; --w-strong:600;
  /* vorm en ritme */
  --radius-badge:4px; --radius-control:8px; --radius-card:12px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;
  --shadow-card:0 1px 0 rgba(15,27,61,.03); --shadow-pop:0 0 0 1px rgba(15,27,61,.08),0 12px 32px -8px rgba(15,27,61,.22);
  --focus-ring:0 0 0 2px var(--bg-canvas),0 0 0 4px rgba(63,120,192,.55);
  --ease:cubic-bezier(.16,1,.3,1); --dur-fast:140ms; --dur-med:220ms;
  --sidebar-w:248px; --topbar-h:52px; --askbar-h:46px;
  /* oude namen (base/shell/theme lezen deze nog): zelfde systeem */
  --g:var(--text-primary); --tx:var(--text-body); --mu:var(--text-tertiary); --ln:var(--border-soft);
  --cr:var(--bg-canvas); --paper:var(--bg-panel); --sand:var(--bg-slate); --outer:var(--bg-slate); --soft:var(--accent-wash);
  --y:var(--accent); --y-ink:var(--accent-text); --on-accent:var(--accent-ink);
  --bg-sidebar:var(--bg-canvas); --bg-card:var(--bg-panel); --text-tertiary-legacy:var(--text-tertiary);
  --accent-primary:var(--text-primary); --accent-light:var(--accent-wash); --accent-mid:var(--accent); --accent-yellow:var(--accent);
  --ok:var(--status-live); --err:var(--status-error); --warn:var(--status-warn); --info:var(--status-info);
  --ok-ink:var(--status-live); --ok-bg:var(--status-live-wash); --warn-ink:var(--status-warn); --warn-bg:var(--status-warn-wash); --err-bg:var(--status-error-wash); --info-bg:var(--status-info-wash);
  --radius:var(--radius-card); --radius-sm:var(--radius-control);
  --sans:var(--font-ui); --serif:var(--font-display);
  --on-dark:var(--bg-panel); --on-dark-mu:var(--text-tertiary);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg-canvas:#0A1024; --bg-panel:#101934; --bg-elevated:#141F3D; --bg-slate:#1A2648;
  --bg-hover:rgba(243,245,250,.05); --bg-active:rgba(243,245,250,.085);
  --border-soft:#223056; --border-mid:#33437166; --border-input:rgba(243,245,250,.12);
  --text-primary:#F3F5FA; --text-body:#E2E7F1; --text-secondary:#9AA5BF; --text-tertiary:#9AA5BF;
  --accent:#3F78C0; --accent-hover:#5A8ED0; --accent-ink:#FFFFFF; --accent-text:#9CC0EE; --accent-wash:rgba(148,211,190,.14);
  --status-live:#4CC79A; --status-warn:#E0A142; --status-error:#EE6A52; --status-info:#7FB0EA; --status-idle:#6B7690;
  --status-live-wash:rgba(76,199,154,.13); --status-warn-wash:rgba(224,161,66,.13); --status-error-wash:rgba(238,106,82,.13); --status-info-wash:rgba(127,176,234,.13);
  --shadow-card:none; --shadow-pop:0 0 0 1px rgba(0,0,0,.6),0 12px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  --focus-ring:0 0 0 2px var(--bg-canvas),0 0 0 4px rgba(148,211,190,.6);
  color-scheme:dark;
}

/* ================= basis ================= */
html,body{background:var(--bg-canvas);color:var(--text-body);font-family:var(--font-ui);font-size:var(--t-body);line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-control)}
a{color:var(--text-primary)}
.watermark{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================= schil ================= */
.app{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
html .sidebar{background:var(--bg-canvas);border-right:1px solid var(--border-soft);padding:12px 10px 10px;gap:0}
html .sidebar .brand{min-height:0;padding:6px 8px 10px;margin:0;background:none;border:0!important;border-radius:0;gap:10px;align-items:center}
html .sidebar .brand::after{display:none}
html .sidebar .brand-mark{width:30px!important;height:30px!important;border-radius:8px!important;background:var(--bg-panel)!important;box-shadow:inset 0 0 0 1px var(--border-soft)!important;padding:4px}
html .sidebar .brand-name{font:var(--w-strong) var(--t-body-sm)/1.1 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-primary)}
html .sidebar .brand-sub{font:var(--w-regular) var(--t-label)/1.2 var(--font-ui);font-style:normal;color:var(--text-tertiary);margin:1px 0 0}
html.ws-lockup .sidebar .brand-mark{width:auto!important;height:30px!important;background:none!important;box-shadow:none!important;padding:0}
html.ws-lockup .sidebar .brand-mark img{height:22px;width:auto}
html.ws-lockup .sidebar .brand-stack .brand-name{display:none}
.online-pill{display:none}

/* werkplek-keuze + zoeken bovenin de zijbalk (zoals HQ "All businesses" + "Search or jump to") */
.sb-ws{margin:2px 4px 6px;position:relative}
.sb-ws select{width:100%;appearance:none;-webkit-appearance:none;height:32px;padding:0 30px 0 10px;border-radius:var(--radius-control);border:1px solid var(--border-input);
  background:var(--bg-panel);color:var(--text-primary);font:var(--w-medium) var(--t-body-sm)/1 var(--font-ui);cursor:pointer}
.sb-ws::after{content:"";position:absolute;right:11px;top:12px;width:6px;height:6px;border-right:1.5px solid var(--text-tertiary);border-bottom:1.5px solid var(--text-tertiary);transform:rotate(45deg);pointer-events:none}
.sb-search{display:flex;align-items:center;gap:8px;margin:0 4px 8px;height:32px;padding:0 8px 0 10px;border-radius:var(--radius-control);border:1px solid var(--border-input);
  background:var(--bg-panel);color:var(--text-tertiary);font:var(--w-regular) var(--t-body-sm)/1 var(--font-ui);cursor:pointer;width:calc(100% - 8px);text-align:left}
.sb-search svg{width:14px;height:14px;flex:none}
.sb-search span{flex:1}
.sb-search kbd{font:var(--w-medium) var(--t-micro)/1 var(--font-ui);color:var(--text-tertiary);border:1px solid var(--border-soft);border-radius:4px;padding:3px 5px;background:var(--bg-elevated)}
.sb-search:hover{border-color:var(--border-mid);color:var(--text-secondary)}

html .sidebar nav{flex:1 1 auto}
html .sidebar .nav-section,html .sidebar .nav-section:first-of-type{margin-top:14px}
html .sidebar .nav-label{font:var(--w-medium) var(--t-label)/1 var(--font-ui);font-style:normal;letter-spacing:0;text-transform:none;color:var(--text-tertiary);padding:0 10px 6px}
html .sidebar .nav-item{display:flex;align-items:center;gap:10px;min-height:30px;padding:5px 10px;margin:1px 0;border-radius:var(--radius-control);
  font:var(--w-regular) var(--t-body-sm)/1.2 var(--font-ui);font-style:normal;color:var(--text-secondary);background:transparent;position:relative}
html .sidebar .nav-item svg{width:15px;height:15px;opacity:.75;color:currentColor;stroke-width:1.8}
html .sidebar .nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
html .sidebar .nav-item.active{font:var(--w-medium) var(--t-body-sm)/1.2 var(--font-ui);font-style:normal;color:var(--text-primary);background:var(--bg-active)}
html .sidebar .nav-item.active svg{opacity:1;color:var(--accent-text)}
html .sidebar .nav-item.active::before{content:"";display:block;position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
html .sidebar .nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:var(--w-strong) var(--t-micro)/18px var(--font-ui);text-align:center;background:var(--accent-wash);color:var(--accent-text)}
html .sidebar .sidebar-footer{border-top:1px solid var(--border-soft);margin-top:10px;padding-top:8px}
html .sidebar .sidebar-footer .nav-item{color:var(--text-secondary)}
.sb-usage{margin:4px 4px 6px;padding:8px 10px;border-radius:var(--radius-control);background:var(--bg-elevated);border:1px solid var(--border-soft);font-size:var(--t-caption);color:var(--text-secondary)}
.sb-usage b{display:flex;justify-content:space-between;font-weight:var(--w-medium);color:var(--text-primary);font-size:var(--t-caption)}
.sb-usage .bar{height:4px;border-radius:2px;background:var(--bg-slate);margin-top:6px;overflow:hidden}
.sb-usage .bar i{display:block;height:100%;background:var(--accent);border-radius:2px}
html .sidebar .avatar-row{border-top:0;padding:6px 6px 0;gap:10px}
html .sidebar .avatar{width:26px;height:26px;font-size:10px;border-radius:50%;background:var(--bg-slate);color:var(--text-primary)}
html .sidebar .avatar-row .who .n{color:var(--text-primary);font-size:var(--t-body-sm);font-weight:var(--w-medium)}
html .sidebar .avatar-row .who .r{color:var(--text-tertiary);font-size:var(--t-micro)}
.os-theme{border:0;background:none;color:var(--text-tertiary);width:28px;height:28px;border-radius:var(--radius-control);display:grid;place-items:center;cursor:pointer}
.os-theme:hover{background:var(--bg-hover);color:var(--text-primary)}
.os-theme svg{width:15px;height:15px}

/* hoofdvlak + topbar */
html .main{padding:0 28px calc(var(--askbar-h) + 28px);max-width:none}
html .topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);margin:0 -28px 18px;padding:0 28px;border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--bg-canvas) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);flex-wrap:nowrap}
html .breadcrumb{font:var(--w-regular) var(--t-body-sm)/1 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-tertiary);padding:0;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .breadcrumb #breadcrumbPage{color:var(--text-primary);font-weight:var(--w-medium)}
html .breadcrumb .sep{color:var(--border-mid);margin:0 6px}
html .brand-switch{padding:2px;gap:2px;border-radius:var(--radius-control);background:var(--bg-elevated);border:1px solid var(--border-soft)}
html .brand-switch button{font:var(--w-medium) var(--t-caption)/1 var(--font-ui);letter-spacing:0;padding:7px 11px;min-height:0;border-radius:5px;color:var(--text-secondary)}
html .brand-switch button:hover{background:var(--bg-hover);color:var(--text-primary)}
html .brand-switch button.on{background:var(--bg-panel);color:var(--text-primary);box-shadow:0 0 0 1px var(--border-soft),0 1px 2px rgba(0,0,0,.06)}

/* ================= paginakop ================= */
.page-header,.ui-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px;padding:0;border:0}
.page-header h1,.ui-head h1{font-family:var(--font-display);font-weight:600;font-size:var(--t-page);line-height:1.08;letter-spacing:-.005em;color:var(--text-primary);margin:0}
.page-header .subtitle,.ui-head p{font:var(--w-regular) var(--t-body-sm)/1.45 var(--font-ui);color:var(--text-secondary);margin:4px 0 0;max-width:760px}
.page-header .right,.ui-head-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.section-title{font:var(--w-strong) var(--t-title)/1.25 var(--font-ui);letter-spacing:-.01em;color:var(--text-primary);text-transform:none}
.section-title .count{font-weight:var(--w-regular);color:var(--text-tertiary);font-size:var(--t-caption);margin-left:6px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}

/* ================= uitleg ("Zo werkt dit"): één rustige regel, details klappen open ================= */
#osExplain{margin:0 0 14px}
html .ox{background:var(--bg-panel);color:var(--text-body);border:1px solid var(--border-soft);border-radius:var(--radius-card);box-shadow:none;
  --g:var(--text-primary);--cr:var(--text-primary);--mu:var(--text-secondary);--ln:var(--border-soft);--y:var(--accent)}
html .ox::before{display:none}
html .ox .ox-bar{padding:8px 10px 8px 12px;gap:10px}
html .ox .ox-tog{gap:10px}
html .ox .ox-eye{font:var(--w-strong) var(--t-micro)/1 var(--font-ui);letter-spacing:.04em;text-transform:none;padding:4px 7px;border-radius:var(--radius-badge);background:var(--accent-wash);color:var(--accent-text)}
html .ox .ox-title{font:var(--w-medium) var(--t-body-sm)/1.3 var(--font-ui);color:var(--text-primary)}
html .ox .ox-chev{width:26px;height:26px;border:1px solid var(--border-soft);color:var(--text-secondary);border-radius:var(--radius-control)}
html .ox .ox-ask{font:var(--w-medium) var(--t-caption)/1 var(--font-ui);padding:7px 10px;border-radius:var(--radius-control);background:transparent;border:1px solid var(--border-soft);color:var(--text-secondary)}
html .ox .ox-ask svg{color:var(--accent-text);width:14px;height:14px}
html .ox .ox-ask:hover{background:var(--bg-hover);color:var(--text-primary)}
html .ox .ox-kern{display:none}
html .ox.open .ox-kern{display:block;margin:0 14px 10px;font-size:var(--t-body-sm);color:var(--text-secondary);max-width:860px}
html .ox .ox-card{background:var(--bg-elevated);border-color:var(--border-soft);color:var(--text-body)}
html .ox h4{color:var(--text-primary)}
html .ox p,html .ox li span{color:var(--text-secondary)}

/* ================= kaarten ================= */
html .card{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-card);box-shadow:var(--shadow-card);color:var(--text-body)}
html .card:hover{box-shadow:var(--shadow-card)}
#homeScheduleCard,.hero-dark{background:var(--bg-panel)!important;border-color:var(--border-soft)!important;color:var(--text-body)!important;
  --text-primary:inherit;--text-secondary:var(--text-secondary);--cr:var(--text-primary)}
#homeScheduleCard::after{display:none}
#homeScheduleCard .section-title{color:var(--text-primary)}

/* KPI-kaarten als één cijferrij (HQ stat-strip) */
html .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-card);overflow:hidden;margin-bottom:16px}
html .kpi-row>.card,html .kpi-row>.kpi-card{border:0;border-radius:0;box-shadow:none;background:transparent;border-left:1px solid var(--border-soft);padding:12px 16px;margin:0;min-height:0}
html .kpi-row>:first-child{border-left:0}
html .kpi-label{font:var(--w-medium) var(--t-label)/1.2 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-secondary)}
html .kpi-value{font:var(--w-strong) var(--t-stat)/1.15 var(--font-ui);letter-spacing:-.02em;color:var(--text-primary);margin-top:6px;font-variant-numeric:tabular-nums;border:0}
html .kpi-sub{font-size:var(--t-caption);color:var(--text-tertiary);margin-top:2px}

/* ================= knoppen ================= */
html .btn,html .btn-primary,html .btn-sm,html .kb-btn,html button.primary,.ui-btn{border-radius:var(--radius-control)!important;font:var(--w-medium) var(--t-caption)/1 var(--font-ui);letter-spacing:0;min-height:30px;padding:7px 12px;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);cursor:pointer}
html .btn-primary,.ui-btn.is-primary{background:var(--accent)!important;color:var(--accent-ink)!important;border:1px solid transparent;font-weight:var(--w-strong);box-shadow:none}
html .btn-primary:hover,.ui-btn.is-primary:hover{background:var(--accent-hover)!important;transform:none;box-shadow:none}
html .btn-sm,.ui-btn{background:var(--bg-panel);border:1px solid var(--border-soft);color:var(--text-primary)}
html .btn-sm:hover,.ui-btn:hover{background:var(--bg-elevated);border-color:var(--border-mid);color:var(--text-primary)}
html .btn-sm.ghost,.ui-btn.is-ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}
html .btn-sm.ghost:hover,.ui-btn.is-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
html .btn-primary:disabled,.ui-btn:disabled{opacity:.5;cursor:default}

/* ================= chips / pills ================= */
html .pill,.ui-chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-badge);padding:3px 7px;font:var(--w-medium) var(--t-label)/1.2 var(--font-ui);letter-spacing:0;background:var(--bg-slate);color:var(--text-secondary);border:0}
.ui-chip i{width:6px;height:6px;border-radius:50%;background:var(--status-idle)}
html .pill.green,.ui-chip.t-ok{background:var(--status-live-wash);color:var(--status-live)}
html .pill.yellow,.ui-chip.t-warn{background:var(--status-warn-wash);color:var(--status-warn)}
html .pill.red,.ui-chip.t-err{background:var(--status-error-wash);color:var(--status-error)}
html .pill.blue,.ui-chip.t-info{background:var(--status-info-wash);color:var(--status-info)}
html .pill.violet{background:var(--accent-wash);color:var(--accent-text)}
html .pill.gray{background:var(--bg-slate);color:var(--text-secondary)}
.ui-chip.t-ok i{background:var(--status-live)} .ui-chip.t-warn i{background:var(--status-warn)} .ui-chip.t-err i{background:var(--status-error)} .ui-chip.t-info i{background:var(--status-info)}

/* ================= tabellen ================= */
html .data-table,.ui-table{width:100%;border-collapse:collapse;font-size:var(--t-body-sm)}
html .data-table th,.ui-table th{font:var(--w-medium) var(--t-label)/1.2 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-tertiary);text-align:left;padding:9px 12px;border-bottom:1px solid var(--border-soft);background:transparent}
html .data-table td,.ui-table td{padding:10px 12px;border-bottom:1px solid var(--border-soft);color:var(--text-body);vertical-align:middle}
html .data-table tr:last-child td,.ui-table tr:last-child td{border-bottom:0}
html .data-table tr:hover td,.ui-table tbody tr:hover td{background:var(--bg-hover)}
.ui-table .num,html .data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ui-table tr[role=link]{cursor:pointer}
.ui-table-wrap{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-card);overflow:auto}

/* ================= tabs (één soort) ================= */
.ui-tabs,html .os-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 14px;padding:0;border:0;background:none}
.ui-tab,html .os-tabs>button,html .os-tabs>a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--radius-control);border:1px solid transparent;background:transparent;
  font:var(--w-medium) var(--t-caption)/1 var(--font-ui);color:var(--text-secondary);cursor:pointer;text-decoration:none}
.ui-tab:hover,html .os-tabs>button:hover{background:var(--bg-hover);color:var(--text-primary)}
.ui-tab.on,html .os-tabs>button.on,html .os-tabs>button.active,html .os-tabs>button[aria-selected=true]{background:var(--bg-panel);border-color:var(--border-soft);color:var(--text-primary);box-shadow:0 1px 1px rgba(0,0,0,.03)}
.ui-tab-n{font-weight:var(--w-regular);color:var(--text-tertiary);font-size:var(--t-label)}
.ui-tabs.is-seg{display:inline-flex;padding:2px;background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--radius-control)}
.ui-tabs.is-seg .ui-tab{height:26px;border-radius:5px}

/* ================= formulieren ================= */
html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html textarea,html select,.ui-input,.ui-select{
  border-radius:var(--radius-control);border:1px solid var(--border-input);background:var(--bg-panel);color:var(--text-primary);font:var(--w-regular) var(--t-body-sm)/1.4 var(--font-ui)}
html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html select,.ui-input,.ui-select{min-height:32px;padding:6px 10px}
html textarea{padding:8px 10px}
html input::placeholder,html textarea::placeholder{color:var(--text-tertiary)}
html input:focus,html textarea:focus,html select:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-wash)}
html select,.ui-select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--text-tertiary) 50%),linear-gradient(135deg,var(--text-tertiary) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
html input[type=file]{font:var(--w-regular) var(--t-caption)/1.4 var(--font-ui);color:var(--text-secondary)}
html input[type=file]::file-selector-button{margin-right:10px;height:30px;padding:0 12px;border-radius:var(--radius-control);border:1px solid var(--border-soft);background:var(--bg-panel);color:var(--text-primary);font:var(--w-medium) var(--t-caption)/1 var(--font-ui);cursor:pointer}
html input[type=file]::file-selector-button:hover{background:var(--bg-elevated)}
.ui-file{display:inline-flex;align-items:center;gap:10px}
html label,html .field label,html .modal-field label{font:var(--w-medium) var(--t-label)/1.3 var(--font-ui);color:var(--text-secondary);letter-spacing:0;text-transform:none}

/* ================= lege staat, notities, laden ================= */
html .empty-state,html .os-empty,.ui-empty{padding:28px 20px;text-align:center;background:var(--bg-panel);border:1px dashed var(--border-mid);border-radius:var(--radius-card);box-shadow:none}
html .os-empty .os-empty-mark{display:none}
html .empty-state h3,html .os-empty h3,.ui-empty h3{font:var(--w-strong) var(--t-body)/1.3 var(--font-ui);color:var(--text-primary);margin:0 0 4px}
html .empty-state p,html .os-empty p,.ui-empty p{font-size:var(--t-body-sm);color:var(--text-secondary);margin:0 auto;max-width:520px}
.ui-empty-a{margin-top:12px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
html .os-note{background:var(--bg-elevated);border:1px solid var(--border-soft);border-radius:var(--radius-control);color:var(--text-secondary);font-size:var(--t-caption)}
html .os-loading{color:var(--text-tertiary);font-size:var(--t-body-sm)}

/* ================= nieuwe componenten (start/ui.js) ================= */
.ui-stats{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-card);margin:0 0 16px;overflow:hidden}
.ui-stat{padding:12px 16px;border-left:1px solid var(--border-soft);min-width:0}
.ui-stat:first-child{border-left:0}
.ui-stat[role=link]{cursor:pointer}
.ui-stat[role=link]:hover{background:var(--bg-hover)}
.ui-stat-l{font:var(--w-medium) var(--t-label)/1.2 var(--font-ui);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-stat-v{font:var(--w-strong) var(--t-stat)/1.15 var(--font-ui);letter-spacing:-.02em;color:var(--text-primary);margin-top:6px;font-variant-numeric:tabular-nums}
.ui-stat-s{font-size:var(--t-label);color:var(--text-tertiary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-stat.t-warn .ui-stat-v{color:var(--status-warn)} .ui-stat.t-err .ui-stat-v{color:var(--status-error)} .ui-stat.t-ok .ui-stat-v{color:var(--status-live)}

.ui-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0 0 16px}
.ui-tile{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:var(--radius-card);padding:12px 14px;display:flex;flex-direction:column;min-height:150px}
.ui-tile-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ui-tile-h h3{font:var(--w-strong) var(--t-body-sm)/1.2 var(--font-ui);color:var(--text-primary);margin:0;flex:1}
.ui-tile-dot{width:7px;height:7px;border-radius:50%;background:var(--status-idle);flex:none}
.ui-tile.t-ok .ui-tile-dot{background:var(--status-live)} .ui-tile.t-warn .ui-tile-dot{background:var(--status-warn)} .ui-tile.t-err .ui-tile-dot{background:var(--status-error)} .ui-tile.t-accent .ui-tile-dot{background:var(--accent)}
.ui-tile-n{font:var(--w-strong) var(--t-body)/1 var(--font-ui);color:var(--text-primary)}
.ui-tile-list{list-style:none;margin:0;padding:0;flex:1}
.ui-tile-list li{display:flex;flex-direction:column;padding:6px 0;border-top:1px solid var(--border-soft)}
.ui-tile-list li:first-child{border-top:0}
.ui-tile-list li[role=link]{cursor:pointer}
.ui-tile-list li[role=link]:hover .t{color:var(--accent-text)}
.ui-tile-list .t{font-size:var(--t-body-sm);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-tile-list .m{font-size:var(--t-label);color:var(--text-tertiary)}
.ui-tile-empty{font-size:var(--t-body-sm);color:var(--text-tertiary);margin:0;flex:1}
.ui-tile-more{margin-top:8px;font:var(--w-medium) var(--t-caption)/1 var(--font-ui);color:var(--text-secondary);text-decoration:none}
.ui-tile-more:hover{color:var(--text-primary)}

.ui-fresh{display:inline-flex;align-items:center;gap:6px;font:var(--w-regular) var(--t-caption)/1 var(--font-ui);color:var(--text-tertiary);white-space:nowrap}
.ui-fresh i{width:6px;height:6px;border-radius:50%;background:var(--status-live)}
.ui-fresh.is-late{color:var(--status-warn)} .ui-fresh.is-late i{background:var(--status-warn)}
.ui-fresh.is-unknown i{background:var(--status-idle)}

/* ================= toasts + modals ================= */
html .os-toast{border-radius:var(--radius-control);font-size:var(--t-body-sm);box-shadow:var(--shadow-pop);background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-soft)}
html .modal,html .os-confirm-box{background:var(--bg-panel);border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow-pop);color:var(--text-body)}
html .modal h2,html .modal h3,html .os-confirm-box h3{font:var(--w-strong) var(--t-title)/1.3 var(--font-ui);color:var(--text-primary)}

/* ================= "Vraag het OS": vaste balk onderin (zoals HQ Chief of Staff), niet zwevend over content ================= */
html .aos-fab{left:var(--sidebar-w);right:0;bottom:0;height:var(--askbar-h);border-radius:0;padding:0 28px;justify-content:flex-start;gap:10px;
  background:color-mix(in srgb,var(--bg-canvas) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border-soft);box-shadow:none;
  color:var(--text-tertiary);font:var(--w-regular) var(--t-body-sm)/1 var(--font-ui)}
html .aos-fab::after{content:"Vraag het OS iets over deze pagina...";margin-left:2px}
html .aos-fab span{font-weight:var(--w-strong);color:var(--text-primary)}
html .aos-fab svg{width:16px;height:16px;color:var(--accent-text)}
html .aos-fab:hover{box-shadow:none;color:var(--text-secondary);background:var(--bg-panel)}
html .aos{right:16px;bottom:calc(var(--askbar-h) + 10px);border-radius:14px;background:var(--bg-panel);border:1px solid var(--border-soft);box-shadow:var(--shadow-pop);color:var(--text-body)}

/* ================= mobiel ================= */
@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  html .main{padding:0 16px calc(var(--askbar-h) + 20px)}
  html .topbar{margin:0 -16px 14px;padding:0 12px 0 64px;height:56px;gap:8px}
  html .breadcrumb{padding-left:0;min-height:0}
  html .topbar{flex-wrap:wrap;height:auto;min-height:56px;padding-top:8px;padding-bottom:8px;row-gap:8px}
  html .os-row{width:100%;margin-left:-52px;width:calc(100% + 52px);overflow-x:auto;scrollbar-width:none}
  html .os-row::-webkit-scrollbar{display:none}
  html .brand-switch{flex-wrap:nowrap}
  html .brand-switch button{white-space:nowrap}
  html .ox .ox-ask{display:none}
  .mobile-toggle{top:calc(8px + env(safe-area-inset-top,0px))!important;left:12px!important;width:40px!important;height:40px!important;border-radius:var(--radius-control)!important;background:var(--bg-panel)!important;border:1px solid var(--border-soft)!important}
  html .sidebar{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:100dvh;padding:12px 10px;background:var(--bg-canvas);border-right:1px solid var(--border-soft);box-shadow:var(--shadow-pop);
    visibility:hidden;opacity:1;transform:translateX(-102%);transition:transform var(--dur-med) var(--ease),visibility var(--dur-med)}
  html .sidebar.open{visibility:visible;transform:none}
  html .sidebar-overlay.show{display:block!important;background:rgba(0,0,0,.35)}
  html .sidebar .nav-item,html .sidebar .nav-item.active,html .sidebar .sidebar-footer .nav-item{font:var(--w-regular) 15px/1.2 var(--font-ui);min-height:40px;padding:8px 10px;width:auto;background-image:none!important;color:var(--text-secondary)}
  html .sidebar .nav-item.active{color:var(--text-primary);font-weight:var(--w-medium);background:var(--bg-active)!important}
  html .sidebar .nav-item svg{display:block}
  html .sidebar .nav-item.active::before{display:block}
  html .sidebar .nav-label{font:var(--w-medium) var(--t-label)/1 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-tertiary)}
  html .sidebar .nav-section+.nav-section{border-top:0}
  html .sidebar .brand{margin:0;background:none;box-shadow:none;padding:6px 8px 10px}
  html .menu-close{width:34px;height:34px;border-radius:var(--radius-control);background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-soft)}
  html .aos-fab{left:0;right:0;width:auto;max-width:none;white-space:nowrap;flex-wrap:nowrap;padding:0 16px env(safe-area-inset-bottom,0px);height:calc(var(--askbar-h) + env(safe-area-inset-bottom,0px))}
  html .aos-fab span{white-space:nowrap}
  html .aos-fab::after{content:"Vraag het OS..."}
  .page-header h1,.ui-head h1{font-size:26px}
  .page-header,.ui-head{flex-wrap:wrap;align-items:flex-start}
  .ui-head-r,.page-header .right{justify-content:flex-start}
  .ui-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-stat{border-left:0;border-top:1px solid var(--border-soft)}
  .ui-stat:nth-child(-n+2){border-top:0}
  .ui-stat:nth-child(even){border-left:1px solid var(--border-soft)}
  html .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  html .kpi-row>*{border-left:0!important;border-top:1px solid var(--border-soft)}
  html .kpi-row>:nth-child(-n+2){border-top:0}
  html .kpi-row>:nth-child(even){border-left:1px solid var(--border-soft)!important}
  html .ox .ox-ask span{display:none}
}
@media (max-width:640px){ html .card{border-radius:var(--radius-card)} }

/* logo per thema (lockup inkt op licht, crème op donker) */
html .sidebar .brand-mark .lk-d{display:none}
html[data-theme="dark"] .sidebar .brand-mark .lk-l{display:none}
html[data-theme="dark"] .sidebar .brand-mark .lk-d{display:block}
/* menu compacter: alles past zonder scrollen op 900 px hoogte */
html .sidebar .nav-section,html .sidebar .nav-section:first-of-type{margin-top:10px}
html .sidebar .nav-item{min-height:28px;padding:4px 10px}
html .sidebar .nav-label{padding-bottom:4px}

/* Agents & jobs: staven in kobalt */
.sys-chart{color:var(--accent)}

/* ================= cockpit (Home) + Te beoordelen ================= */
.ui-section-title{font:var(--w-strong) var(--t-body)/1.3 var(--font-ui);color:var(--text-primary);margin:20px 0 10px;letter-spacing:-.005em}
.home-period{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.home-period .ui-tabs{margin:0}
.ui-tile-fresh{margin-top:8px;font-size:var(--t-label)}
.inbox-card{padding:0;margin:0 0 12px;overflow:hidden}
html .inbox-card .os-li{display:flex;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid var(--border-soft);margin:0;background:none;border-radius:0}
html .inbox-card .inbox-head{border-top:0;background:var(--bg-elevated);cursor:pointer;padding:9px 14px}
html .inbox-card .inbox-head .t{font:var(--w-strong) var(--t-body-sm)/1.3 var(--font-ui);color:var(--text-primary)}
html .inbox-card .inbox-head:hover{background:var(--bg-hover)}
.inbox-n{font:var(--w-strong) var(--t-body-sm)/1 var(--font-ui);color:var(--text-primary);font-variant-numeric:tabular-nums}
.inbox-head>span:last-child{color:var(--text-tertiary)}
.inbox-link{text-decoration:none;min-width:0}
.inbox-link .t{font-size:var(--t-body-sm);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-link .m{font-size:var(--t-label);color:var(--text-tertiary)}
.inbox-link:hover .t{color:var(--accent-text)}
.inbox-acts{display:flex;gap:6px;flex:none}
html .inbox-card .inbox-more{margin:0;padding:8px 14px;border:0;border-top:1px solid var(--border-soft);border-radius:0;background:none;font-size:var(--t-label);color:var(--text-tertiary)}
.inbox-item.is-done{opacity:.45;pointer-events:none}
@media (max-width:640px){ html .inbox-card .os-li{flex-wrap:wrap} .inbox-acts{width:100%;justify-content:flex-end} }

/* legacy-accent volgt overal het werkplek-accent (shell.css zette per merk vaste hexwaarden) */
html[data-brand]{--y:var(--accent);--klei:var(--accent);--soft:var(--accent-wash);--on-accent:var(--accent-ink)}
html .ws-mono{font-family:var(--font-ui);font-style:normal;font-weight:700;font-size:15px;color:var(--text-primary)}

/* inklapbare menugroepen */
html .sidebar .nav-label{display:flex;align-items:center;gap:4px;width:100%;background:none;border:0;cursor:pointer;text-align:left;border-radius:var(--radius-control)}
html .sidebar .nav-label svg{width:11px;height:11px;opacity:0;transition:opacity var(--dur-fast),transform var(--dur-fast)}
html .sidebar .nav-label:hover{color:var(--text-secondary)}
html .sidebar .nav-label:hover svg,html .sidebar .nav-section.is-shut .nav-label svg{opacity:.8}
html .sidebar .nav-section.is-shut .nav-label svg{transform:rotate(-90deg)}
html .sidebar .nav-section.is-shut .nav-item{display:none}

/* Eén werkplek: geen merkwissel. Meer werkplekken (html.ws-multi, gezet door shell.js): wissel bovenin + keuzelijst in de zijbalk. */
html:not(.ws-multi) #brandSwitch,html:not(.ws-multi) .os-row:has(#brandSwitch),html:not(.ws-multi) #sbWs{display:none!important}
@media (max-width:1080px){html.ws-multi .topbar .os-row{margin-left:0;width:100%}}