/* ══════════════════════════════════════════════════════════════
   Heat Block POS — backoffice
   Kleuren uit 50-ui.md (navy zijbalk, blauw / geel / rood als accent), systeemfont,
   geen CDN. Bedragen: gewicht 800 met tabelcijfers, nooit een ander lettertype.
   ══════════════════════════════════════════════════════════════

   KLASSEN VOOR DE PAGINA'S  (de shell komt uit includes/header.php + footer.php)

   Indeling
     .content                 wordt door de shell gezet: kolom met 18 px tussenruimte
     .grid                    raster; .grid--kpi (tegels, min 180 px) .grid--2 .grid--3 .grid--4
     .row                     regel met tussenruimte (wrapt); .row--between; .spacer vult de ruimte
     .stack                   kolom met tussenruimte; .stack--sm
     .right .center .nowrap .hide-sm (weg op telefoon) .only-sm (alleen op telefoon)

   Kaarten en tegels
     .card                    wit vlak; <h2> erin is de kaarttitel (flex: titel links, knop rechts)
     .card--flush             zonder binnenmarge (tabel tot de rand); .card--warn .card--danger .card--accent
     .kpi                     KPI-tegel: <small>label</small><b>waarde</b><em>toelichting</em>
     .kpi--ok --warn --bad --accent   kleur van de waarde / gele rand
     .empty                   lege toestand (gecentreerde tekst in een kaart)

   Tabellen
     table                    standaardopmaak; .table-wrap = horizontaal schuiven op smalle schermen
                              (een tabel direct in .card schuift ook vanzelf; op de telefoon blijft een tabel
                              met 5 of meer kolommen breed genoeg om te lezen)
     table.compact            kleinere regels
     th.num td.num            rechts uitgelijnd, tabelcijfers, vet
     tr.total                 totaalregel; tr.sub = subtotaal; tr.muted; tr.void (doorgestreept)
     td.actions               knoppen rechts in de rij
     .neg (rood bedrag) .pos (groen bedrag)

   Formulieren
     .form                    raster van velden (auto-fit, min 220 px); .wide = hele breedte;
                              .form--2 / .form--3 = vast 2 of 3 kolommen (1 kolom op de telefoon)
     label.f                  label boven het veld: <label class="f">Naam<input ...></label>
     label.chk                vinkje met tekst
     .input                   los invoerveld of select; .input--sm .input--num (rechts, tabelcijfers)
     .hint                    toelichting onder een veld; .field-error; .is-invalid (rode rand)
     .filters                 regel met filtervelden boven een lijst
     form.inline              formulier in de regel

   Knoppen
     .btn                     standaard (wit)
     .btn--primary            hoofdactie (navy)        .btn--blue    merkblauw
     .btn--yellow             aandacht (geel)          .btn--ok      groen
     .btn--danger             rood omlijnd             .btn--danger-solid  rood gevuld
     .btn--ghost              zonder rand              .btn--sm .btn--lg .btn--block

   Labels en meldingen
     .pill                    statuslabel; .ok .warn .bad .muted .info .navy .yellow  (helper: pill())
     .flash                   melding over de hele breedte: .flash--ok --bad --warn --info
     .note                    toelichting in een kaart: .note--warn --bad --info
     .badge                   klein telgetal

   Navigatie in de pagina
     .tabs                    tabbladen: <nav class="tabs"><a class="on" href>…</a></nav>
     .pager                   bladeren: <nav class="pager"><a>…</a><span class="on">2</span></nav>

   Grafieken (alleen CSS)
     .bars > .bar             liggende balken: .bar__label .bar__track > .bar__fill[style="width:62%"] .bar__value
                              kleur: .bar__fill--blue --yellow --red --ok
     .cols > .col             staande balken (per uur): .col__bar[style="height:70%"] + .col__label;
                              de waarde boven de balk staat ín de balk: <span class="col__bar" style="height:70%">
                              <span class="col__value">9.650</span></span>; .cols--tall

   Overig
     .muted .small .strong .mono .code (blok met vaste breedte) .bigtotal .codebig (grote cijfercode)
     .kv                      <dl class="kv"><dt>sleutel</dt><dd>waarde</dd></dl>
     .steps                   genummerde stappen (<ol class="steps">)
     .items .checks           lijsten (bolletjes / vinkjes)
     .swatch                  kleurstip: <span class="swatch" style="background:#E42430"></span>
     .dl                      rij downloadknoppen; .apps > .app  downloadkaart met pictogram
     .sep                     scheidingslijn
     .no-print                niet afdrukken; .print-only  alleen op papier; .report  smalle afdrukkolom (Z-rapport)

   Gedrag (assets/admin.js, via data-attributen — inline scripts en on...= zijn geblokkeerd):
     data-confirm="tekst"       bevestiging op een knop, link of formulier
     data-autosubmit            formulier versturen zodra het veld wijzigt
     data-refresh="30"          op <body> (via $autoRefresh): pagina elke N seconden herladen
     data-toggle="#id"          element tonen / verbergen (attribuut hidden)
     data-copy="tekst"          tekst naar het klembord
     data-check-all=".klasse"   vinkje dat alle vinkjes met die klasse zet
     data-filter="#tabel-id"    zoekveld dat de rijen van <tbody> filtert
     data-print                 afdrukken
     data-countdown="seconden"  aftellen (mm:ss); daarna data-countdown-done als tekst
                                (met data-countdown-reload wordt de pagina dan herladen)
     data-toggle-password="#id" wachtwoordveld tonen / verbergen
     data-href="/pad"           hele tabelrij klikbaar
   Een POST-formulier wordt maar één keer tegelijk verstuurd: de verzendknop gaat uit tot het antwoord er is.

   Voorbeeld van een pagina:
     <div class="grid grid--kpi">
       <div class="kpi"><small>Omzet</small><b>SRD 48.250,00</b><em>132 bonnen</em></div>
     </div>
     <div class="card">
       <h2>Bestellingen <a class="btn btn--sm" href="?export=csv">CSV</a></h2>
       <table>
         <thead><tr><th>Bon</th><th>Status</th><th class="num">Totaal</th><th></th></tr></thead>
         <tbody><tr><td>#1042</td><td><span class="pill ok">Betaald</span></td><td class="num">SRD 1.171,00</td>
           <td class="actions"><a class="btn btn--sm" href="order_view.php?id=...">Bekijken</a></td></tr></tbody>
       </table>
     </div>
   ══════════════════════════════════════════════════════════════ */

:root{
  --navy:#0C2060; --navy-dark:#071236; --navy-soft:#142C7A;
  --blue:#00A8F0; --blue-dark:#0086C4;
  --red:#E42430; --red-dark:#C81D28; --red-bg:#FDECEC; --red-ink:#A3141D;
  --yellow:#FFC629; --yellow-dark:#E0A800; --yellow-ink:#3B2A08; --cream:#FCE484;
  --bg:#F2F6FC; --panel2:#E3EDFA; --line:#D5E0F0; --line-strong:#BFD0EA;
  --ink:#10254F; --ink-soft:#5A6E96; --surface:#fff;
  --ok:#1E9E5A; --ok-dark:#17834A; --ok-bg:#E4F6EC; --ok-ink:#0F6337;
  --warn:#D9942A; --warn-bg:#FFF4E0; --warn-ink:#7A4E08;
  --info-bg:#E1F4FE; --info-ink:#075B86;
  --r:12px; --r-tile:14px; --r-dialog:20px;
  --heat:linear-gradient(90deg,var(--blue) 0,var(--blue) 34%,var(--yellow) 34%,var(--yellow) 67%,var(--red) 67%);
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  --mono:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
  --sidebar-w:252px;
}

/* ── basis ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.5 var(--font);color:var(--ink);background:var(--bg);min-height:100vh}
h1,h2,h3,h4{line-height:1.25;font-weight:800;color:var(--navy)}
h2{font-size:17px}
h3{font-size:15px}
a{color:var(--blue-dark);text-underline-offset:2px}
a:hover{color:var(--navy)}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid rgba(0,168,240,.55);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--navy);padding:8px 14px;border-radius:var(--r);font-weight:700}
.skip:focus{left:8px}

/* ── shell ──────────────────────────────────────────────────── */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;color:#fff;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 58%,var(--navy-dark) 100%)}
.brand{display:flex;gap:12px;align-items:center;padding:16px 16px 14px}
.brand__logo{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden}
.brand__logo img{width:42px;height:42px;object-fit:contain;display:block}
.brand__text{flex:1;min-width:0}
.brand__text strong{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__text small{display:block;color:rgba(255,255,255,.66);font-size:12.5px}
.heatline{height:3px;flex:0 0 3px;background:var(--heat)}
.sidebar__close{display:none;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.nav{flex:1;min-height:0;overflow-y:auto;padding:12px 10px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav__group + .nav__group{margin-top:14px}
.nav__title{padding:4px 12px;font-size:12px;font-weight:700;color:rgba(255,255,255,.5)}
.nav__item{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:rgba(255,255,255,.84);text-decoration:none;font-weight:600;font-size:14.5px}
.nav__item svg{width:19px;height:19px;flex:0 0 19px;opacity:.85}
.nav__item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav__item.is-on{background:rgba(255,255,255,.13);color:#fff}
.nav__item.is-on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--yellow)}
.nav__item.is-on svg{color:var(--yellow);opacity:1}
.sidefoot{display:flex;align-items:center;gap:10px;padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.12)}
.sidefoot__user{flex:1;min-width:0}
.sidefoot__user strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidefoot__user small{display:block;color:rgba(255,255,255,.6);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidefoot__logout{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:700;border-radius:10px;padding:7px 11px;min-height:36px;cursor:pointer}
.sidefoot__logout:hover{background:rgba(255,255,255,.12)}
.backdrop{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;min-height:60px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 26px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar h1{flex:1;min-width:0;font-size:20px}
.topbar__right{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 10px}
.topbar__menu{display:none;width:42px;height:42px;flex:0 0 42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--navy);cursor:pointer}
.topbar__menu svg{width:22px;height:22px}
.content{flex:1;width:100%;max-width:1480px;padding:22px 26px 28px;display:flex;flex-direction:column;gap:18px}
.footer{padding:0 26px 18px;color:var(--ink-soft);font-size:12.5px}

/* ── meldingen ──────────────────────────────────────────────── */
.flash{margin:14px 26px 0;padding:12px 16px;border-radius:var(--r);font-weight:600;background:var(--panel2);color:var(--ink);border:1px solid transparent}
.content .flash,.card .flash,.login .flash{margin:0}
.flash--ok{background:var(--ok-bg);color:var(--ok-ink);border-color:#BFE6CF}
.flash--bad,.flash--error,.flash--err,.flash--danger{background:var(--red-bg);color:var(--red-ink);border-color:#F6C6C9}
.flash--warn,.flash--warning{background:var(--warn-bg);color:var(--warn-ink);border-color:#F3DDB0}
.flash--info{background:var(--info-bg);color:var(--info-ink);border-color:#BFE4F8}
.flash a{color:inherit}
.note{padding:10px 14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);font-size:14px}
.note--warn{background:var(--warn-bg);border-color:#F3DDB0;color:var(--warn-ink)}
.note--bad{background:var(--red-bg);border-color:#F6C6C9;color:var(--red-ink)}
.note--info{background:var(--info-bg);border-color:#BFE4F8;color:var(--info-ink)}

/* ── kaarten, raster, tegels ────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-tile);padding:18px 20px;overflow-x:auto}
.card > h2,.card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.card > h2 small,.card__head small{font-size:13px;font-weight:500;color:var(--ink-soft)}
.card p + p,.card p + ul,.card p + ol,.card ul + p,.card ol + p{margin-top:8px}
.card--flush{padding:0}
.card--flush > h2,.card--flush > .card__head{padding:16px 20px 0}
.card--warn{border-color:#EFD08F;background:#FFFBF2}
.card--danger{border-color:#F3B9BD}
.card--danger > h2{color:var(--red-ink)}
.card--accent{box-shadow:inset 0 4px 0 var(--yellow)}
.grid{display:grid;gap:14px}
.grid--kpi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-tile);padding:14px 16px;min-width:0;container-type:inline-size}
.kpi small{display:block;color:var(--ink-soft);font-weight:600;font-size:13px}
.kpi b{display:block;margin-top:2px;font-size:24px;font-size:clamp(18px,13cqi,26px);line-height:1.2;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--ink-soft)}
.kpi--ok b{color:var(--ok-dark)}
.kpi--warn b{color:#B4730F}
.kpi--bad b{color:var(--red)}
.kpi--accent{box-shadow:inset 0 4px 0 var(--yellow)}
.empty{padding:26px 16px;text-align:center;color:var(--ink-soft)}
.empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row--between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:14px}
.stack--sm{gap:8px}
.spacer{flex:1}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.only-sm{display:none}
.sep{border:0;border-top:1px solid var(--line);margin:6px 0}

/* ── tabellen ───────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;vertical-align:bottom}
thead th{border-bottom-color:var(--line-strong)}
th a{color:inherit;text-decoration:none}
th a:hover{color:var(--navy);text-decoration:underline}
tbody tr:hover td{background:#F7FAFE}
tr:last-child > td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.num{font-weight:700}
td.actions{text-align:right;white-space:nowrap;padding-top:5px;padding-bottom:5px}
td.actions > *{margin-left:6px}
table.compact th,table.compact td{padding:6px 8px;font-size:13.5px}
tr.total > td,tr.total > th{font-weight:800;color:var(--navy);border-top:2px solid var(--line-strong);border-bottom:0;background:#F7FAFE}
tr.sub > td{font-weight:700;background:#FAFCFF}
tr.muted > td{color:var(--ink-soft)}
tr.void > td{color:var(--ink-soft);text-decoration:line-through}
tr[data-href]{cursor:pointer}
.card--flush table th:first-child,.card--flush table td:first-child{padding-left:20px}
.card--flush table th:last-child,.card--flush table td:last-child{padding-right:20px}
.neg,tr.muted > td.neg{color:var(--red)}
.pos,tr.muted > td.pos{color:var(--ok-dark)}

/* ── labels ─────────────────────────────────────────────────── */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;line-height:1.5;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;background:var(--panel2);color:var(--ink-soft)}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.bad{background:var(--red-bg);color:var(--red-ink)}
.pill.muted{background:#E9EEF5;color:#56688A}
.pill.info,.pill.kiosk{background:var(--info-bg);color:var(--info-ink)}
.pill.navy{background:var(--navy);color:#fff}
.pill.yellow{background:var(--cream);color:var(--yellow-ink)}
.badge{display:inline-block;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;text-align:center}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(16,37,79,.18);vertical-align:-2px}

/* ── knoppen ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;line-height:1.2;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--bg);color:var(--ink)}
.btn:disabled,.btn.is-busy,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.btn small{font-weight:500;opacity:.85}
.btn--primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--primary:hover{background:var(--navy-soft);border-color:var(--navy-soft);color:#fff}
.btn--blue{background:var(--blue);border-color:var(--blue);color:var(--navy-dark)}
.btn--blue:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn--yellow,.btn--accent{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.btn--yellow:hover,.btn--accent:hover{background:var(--yellow-dark);border-color:var(--yellow-dark);color:var(--yellow-ink)}
.btn--ok{background:var(--ok-dark);border-color:var(--ok-dark);color:#fff}
.btn--ok:hover{background:#116B3B;border-color:#116B3B;color:#fff}
.btn--danger{background:#fff;border-color:#F3B9BD;color:var(--red-ink)}
.btn--danger:hover{background:var(--red-bg);color:var(--red-ink)}
.btn--danger-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn--danger-solid:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn--ghost{background:transparent;border-color:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--panel2)}
.btn--sm{min-height:34px;padding:5px 11px;font-size:13.5px;border-radius:10px}
.btn--lg{min-height:52px;padding:12px 22px;font-size:16px}
.btn--block{display:flex;width:100%}
form.inline{display:inline}

/* ── formulieren ────────────────────────────────────────────── */
input[type=text],input[type=password],input[type=number],input[type=email],input[type=tel],input[type=url],input[type=search],
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=file],select,textarea,.input{
  font:inherit;font-size:15px;font-weight:400;color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r);padding:8px 11px;min-height:42px;max-width:100%}
textarea{min-height:84px;resize:vertical}
select{padding-right:28px}
input[type=file]{padding:7px 9px}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:0 0 18px;accent-color:var(--navy)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,168,240,.22)}
input:disabled,select:disabled,textarea:disabled{background:var(--bg);color:var(--ink-soft)}
input[readonly]{background:var(--bg)}
::placeholder{color:#93A3C2}
.input--sm{min-height:34px;padding:4px 9px;font-size:14px;border-radius:10px}
.input--num{text-align:right;font-variant-numeric:tabular-nums}
.is-invalid{border-color:var(--red) !important;background:#FFF8F8}
label.f{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--ink-soft);min-width:0}
label.f > input:not([type=checkbox]):not([type=radio]),label.f > select,label.f > textarea{width:100%}
label.chk{display:flex;gap:9px;align-items:center;font-weight:600;min-height:32px;cursor:pointer}
label.chk small{font-weight:400;color:var(--ink-soft)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .wide{grid-column:1 / -1}
.hint{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft)}
.field-error{display:block;font-size:12.5px;font-weight:600;color:var(--red-ink)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters label.f{min-width:140px}

/* ── tabbladen, bladeren ────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-strong);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{margin-bottom:-1px;padding:10px 14px;border-bottom:3px solid transparent;color:var(--ink-soft);font-weight:700;text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--navy)}
.tabs a.on,.tabs a.active,.tabs a.is-on,.tabs a[aria-current]{color:var(--navy);border-bottom-color:var(--yellow)}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;text-align:center;font-weight:700;text-decoration:none;color:var(--ink)}
.pager .on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── grafieken ──────────────────────────────────────────────── */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:minmax(84px,30%) 1fr auto;gap:10px;align-items:center;font-size:14px}
.bar__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__track{display:block;height:12px;border-radius:999px;background:var(--panel2);overflow:hidden}
.bar__fill{display:block;height:100%;min-width:2px;border-radius:999px;background:var(--navy)}
.bar__fill--blue{background:var(--blue)}
.bar__fill--yellow{background:var(--yellow)}
.bar__fill--red{background:var(--red)}
.bar__fill--ok{background:var(--ok)}
.bar__value{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cols{display:flex;align-items:stretch;gap:4px;height:170px;padding-top:18px}
.cols--tall{height:240px}
.col{flex:1;min-width:0;display:grid;grid-template-rows:1fr auto;justify-items:center;gap:3px}
.col__bar{position:relative;align-self:end;width:100%;max-width:36px;min-height:2px;border-radius:6px 6px 0 0;background:var(--navy)}
.col__value{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:2px;font-size:11px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.col__label{font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ── overig ─────────────────────────────────────────────────── */
.muted{color:var(--ink-soft)}
.small{font-size:12.5px}
.strong{font-weight:800}
.mono{font-family:var(--mono);font-size:.94em}
.code{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-family:var(--mono);font-size:13.5px;word-break:break-all}
pre.code{white-space:pre-wrap;max-height:420px;overflow:auto}
.bigtotal{font-size:26px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.codebig{font-size:42px;line-height:1.1;font-weight:800;letter-spacing:.12em;color:var(--navy);font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 16px;font-size:14px}
.kv dt{color:var(--ink-soft);font-weight:600}
.kv dd{min-width:0;overflow-wrap:anywhere}
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.steps > li{position:relative;padding-left:40px;min-height:28px;counter-increment:s}
.steps > li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.items{padding-left:20px}
.checks{list-style:none;display:flex;flex-direction:column;gap:6px}
.checks > li{position:relative;padding-left:26px}
.checks > li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--ok-dark);font-weight:800}
.card ul:not([class]),.card ol:not([class]){padding-left:20px}
.dl{display:flex;gap:12px;flex-wrap:wrap}
.dl a.btn{min-height:54px;font-size:15px}
.apps{display:grid;gap:12px}
.app{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-tile);background:#fff;text-align:left}
.app > img{width:68px;height:68px;flex:0 0 68px;border-radius:16px}
.app__body{flex:1 1 150px;min-width:0}
.app__body strong{display:block;font-size:16px;color:var(--navy)}
.app__body small{display:block;color:var(--ink-soft);font-size:13px}
.pinbox{display:flex;flex-direction:column;gap:2px;align-items:center;padding:16px;border:2px solid var(--yellow);border-radius:var(--r-tile);background:var(--warn-bg);text-align:center;color:var(--warn-ink);font-weight:600}
.pinbox b{font-size:46px;line-height:1.15;font-weight:800;letter-spacing:.2em;color:var(--navy);font-variant-numeric:tabular-nums}

/* ── inloggen en losse pagina's ─────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%)}
.login > .card{position:relative;width:min(420px,100%);padding:30px 28px 24px;border:0;border-radius:var(--r-dialog);display:flex;flex-direction:column;gap:14px;text-align:center;overflow:hidden}
.login > .card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--heat)}
.login > .login__card--wide{width:min(720px,100%);text-align:left}
.login > .login__card--wide > h1,.login > .login__card--wide > .login__logo{align-self:center;text-align:center}
.login__logo{width:128px;height:128px;align-self:center;object-fit:contain}
.login__card h1{font-size:22px}
.login__card label.f{text-align:left}
.login__vendor{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink-soft);font-size:12.5px}
.login__vendor img{height:26px;width:auto}

/* ── smal scherm ────────────────────────────────────────────── */
@media (max-width:1100px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .form--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar{padding:8px 14px}
  .topbar h1{font-size:18px}
  .topbar__menu{display:inline-flex}
  .content{padding:14px 14px 22px;gap:14px}
  .flash{margin:12px 14px 0}
  .footer{padding:0 14px 16px}
  .card{padding:14px}
  .card--flush{padding:0}
  .hide-sm{display:none !important}
  .only-sm{display:initial}
  table:has(tr:first-child > :nth-child(5)){min-width:600px}
  table:has(tr:first-child > :nth-child(8)){min-width:780px}
  input[type=text],input[type=password],input[type=number],input[type=email],input[type=tel],input[type=url],input[type=search],
  input[type=date],input[type=time],input[type=datetime-local],input[type=month],select,textarea,.input{font-size:16px}
  .codebig{font-size:34px}
  /* zonder JavaScript staat het menu gewoon boven de pagina */
  html:not(.js) .shell{flex-direction:column}
  html:not(.js) .sidebar{position:static;width:100%;height:auto;flex:none}
  /* met JavaScript schuift het van links in beeld */
  .js .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;width:min(86vw,300px);height:auto;transform:translateX(-104%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .js .nav-open .sidebar{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s;box-shadow:0 0 44px rgba(7,18,54,.4)}
  .js .sidebar__close{display:block}
  .js .backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(7,18,54,.5);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .js .nav-open .backdrop{opacity:1;pointer-events:auto}
}
@media (max-width:560px){
  .grid--4{grid-template-columns:minmax(0,1fr)}
  .form--2,.form--3{grid-template-columns:minmax(0,1fr)}
  .grid--kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:6px}
  .bar{grid-template-columns:minmax(70px,34%) 1fr auto;gap:8px}
  .login > .card{padding:26px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ── afdrukken ──────────────────────────────────────────────── */
.print-only{display:none}
@media print{
  .sidebar,.backdrop,.topbar__menu,.topbar__right,.flash,.btn,.tabs,.filters,.pager,.footer,.skip,.no-print{display:none !important}
  .print-only{display:block !important}
  .card:has(> .filters:only-child){display:none}
  body{background:#fff;font-size:12px}
  .shell{display:block}
  .topbar{position:static;min-height:0;padding:0 0 8px;border:0}
  .content{max-width:none;padding:0;gap:10px}
  .card,.kpi{border-color:#999;break-inside:avoid}
  .card{overflow:visible;padding:10px 12px}
  table{font-size:11.5px}
  th,td{padding:4px 6px}
  a{color:inherit;text-decoration:none}
  .report{max-width:92mm}
}