/* =====================================================================
   casa360-stijl.css — dé huisstijl als code (v2.0 · 05-08-2026)
   Vervangt casa360-tokens.css v1.0 (Japandi).

   Besluit Michiel 05-08-2026: de stijl uit de wireframes wint. Blauw is
   weer toegestaan; lichte schaduwen en gradients mogen waar ze diepte
   geven en nergens anders. De regel «geen blauw» uit CLAUDE.md vervalt —
   pas dat bestand aan, anders staan er twee waarheden in de repo.

   Twee dingen die hierin zitten:
   1. de nieuwe tokens (blok A) en de componenten uit de wireframes (blok C);
   2. een compatibiliteitslaag (blok B) die de oude --c-*-namen op de nieuwe
      waarden zet. Dertig CSS-bestanden blijven daardoor werken zonder dat
      er één regel in verandert. Nieuwe code gebruikt de namen uit blok A;
      een module stapt over op het moment dat hij door het herontwerp gaat.
===================================================================== */

/* ═══ A · tokens ═══════════════════════════════════════════════════ */
:root{
  /* lijnen en vlakken */
  /* Huisstijl «Blauw» (besluit Michiel 13-08-2026, vervangt Zand 10-08 —
     referenties: stijlvoorstel-blauw-offertes.html en
     stijlvoorstel-blauw-menu-opdrachten.html): koel licht blauwgrijs als
     vlak, witte kaarten die erop drijven, blauw als accent én primaire
     knop. De zand-kopband en terra vervallen; geldbedragen worden --ink,
     het merkpuntje «360» wordt --accent, soort keten wordt paars. */
  --lijn:      #E4EAF2;   /* standaard 1px-rand — licht en koel */
  --lijn2:     #D3DCE8;   /* nadruk-rand, inputs */
  --grijs:     #EEF3F9;   /* zachte zone op een kaart, hover, tip-blok */
  --grijs2:    #E4EAF2;   /* scheidingslijn in een tabel, balkje-achtergrond */
  --kaart:     #FFFFFF;   /* het vlak van een kaart, paneel of invoerveld */
  --vlak:      #F4F7FB;   /* app-achtergrond: koel licht blauwgrijs */
  --rail:      #EEF3F9;   /* tabelkoppen; de navigatie zelf wordt wit (§2) */

  /* inkt */
  --ink:       #1E2A3A;   /* primaire tekst */
  --ink2:      #5B6B80;   /* secundaire tekst, labels */
  --ink3:      #8A97A8;   /* tertiair, placeholders — nooit lopende tekst */

  /* accent — hét blauw (prompt §1); -t2 is de rijhover uit de mockups */
  --accent:    #1B66F0;   /* actieve module, selectie, primaire knop */
  --accent-t:  #E8F0FE;   /* accentvlak, actieve tab/menu-item */
  --accent-t2: #F0F5FF;   /* rijhover, geselecteerde rij */
  --accent-d:  #1450C4;   /* hover primaire knop, accenttekst op licht */

  /* semantisch — deze drie hebben een betekenis, geen smaak */
  --goed:      #1E9E5A;   /* in orde, betaald, klaar */
  --goed-t:    #E4F5EC;
  --goed-d:    #157347;   /* teksttint op een goed-tintvlak (AA) */
  --let:       #B97E0A;   /* let op, wacht op iets, buiten de norm */
  --let-t:     #FCF1DA;
  --let-d:     #8A5E08;   /* teksttint op een let-tintvlak (AA) */
  --stop:      #D24B35;   /* blokkade, poort dicht, fout */
  --stop-t:    #FBE9E5;
  --stop-d:    #A93A28;

  /* soortkleur keten (was terra) — soortregister, geen semantiek */
  --paars:     #7A5AF0;
  --paars-t:   #EFEAFD;

  --memo:      #F1F73B;   /* alléén interne notities */

  /* avatar-palet (BS.avatar, prompt §2) — identiteitskleuren met een
     vaste toewijzing per naam; géén semantiek, dus bewust los van de
     betekeniskleuren */
  --avatar-1:  #1B66F0;
  --avatar-2:  #1E9E5A;
  --avatar-3:  #7A5AF0;
  --avatar-4:  #D27635;
  --avatar-5:  #0E9BA4;
  --avatar-6:  #C2447E;

  /* typografie — Nunito (besluit 13-08), Manrope als terugval; mono blijft */
  --font-ui:   'Nunito', 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* vorm — ronder dan Zand: kaarten 14–16, knoppen/chips 11 */
  --radius:      14px;
  --radius-klein:11px;
  --radius-pill: 99px;
  --lijndikte:   1px;

  /* diepte — mag, maar spaarzaam: alleen op wat boven het vlak zweeft */
  --schaduw-kaart: 0 1px 4px rgba(30,42,58,.05);
  --schaduw-zwevend: 0 2px 8px rgba(30,42,58,.08);
  --schaduw-knop:  0 2px 8px rgba(27,102,240,.25);   /* alléén de primaire knop */
  --schaduw-laag:  0 8px 24px rgba(30,42,58,.15);   /* overlay, pdf-viewer */

  /* de halfdoorzichtige laag achter een venster of overlay — één token,
     zodat module-CSS er geen eigen rgba-literal voor hoeft te dragen */
  --sluier:    rgba(20, 20, 20, .45);

  --overgang:  160ms ease;
  --focus-ring:3px solid var(--accent);
}

/* ═══ B · compatibiliteit met v1.0 ═════════════════════════════════
   De oude namen blijven werken en wijzen naar de nieuwe waarden. Niet
   uitbreiden; deze laag verdwijnt als de laatste module is omgezet.     */
:root{
  --c-creme:    var(--grijs);
  --c-paneel:   var(--grijs2);
  --c-paneel-2: var(--vlak);
  --c-ink:      var(--ink);
  --c-ink-2:    var(--ink2);
  --c-ink-3:    var(--ink3);
  --c-lijn:     var(--lijn);
  --c-lijn-2:   var(--lijn2);
  /* groen bleef groen: het betekende «goed», niet «primaire kleur». */
  --c-groen:    var(--goed);
  --c-groen-d:  var(--goed-d);
  --c-groen-t:  var(--goed-t);
  /* AFBOUW Blauw 13-08: terra vervalt. In de module-stylesheets droeg
     --c-terra vrijwel altijd signaal-semantiek ([]gevoelig, onder norm,
     herzien nodig) — dat is «let op». Geldbedragen horen op --ink; een
     module die dat via --c-terra deed, gaat om bij zijn herontwerp. */
  --c-terra:    var(--let);
  --c-terra-d:  var(--let-d);
  --c-terra-t:  var(--let-t);
  --c-amber:    var(--let);
  --c-amber-t:  var(--let-t);
  --c-rood:     var(--stop);
  --c-rood-d:   var(--stop-d);
  --c-rood-t:   var(--stop-t);
  --c-memo:     var(--memo);
  --c-sage:     #B9B99D;   /* blijft — decoratief, geen betekenis */
  --c-sage-t:   #E9E9DC;   /* de tint erbij; stond hier niet en daarmee vielen
                              veertien achtergronden terug op transparant —
                              o.a. de gefactureerd-balk en chip--groen-licht */
  --c-oker:     #DCB482;
  --c-blush:    #E0CFC3;
  /* Ook deze twee misten: amber-donker (tekst op een amber vlak) en de
     app-achtergrond onder zijn oude naam. */
  --c-amber-d:  #7A4E22;
  --c-vlak:     var(--vlak);
  --schaduw-tegel:       var(--schaduw-kaart);
  --schaduw-tegel-hover: var(--schaduw-zwevend);
  /* Blauw 13-08: de primaire knop is accent-blauw met de blauwe schaduw
     (prompt §1) — de zwarte primair van Zand vervalt. */
  --gradient-primair:       var(--accent);
  --gradient-primair-hover: var(--accent-d);
}

/* ═══ C · componenten ══════════════════════════════════════════════ */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);color:var(--ink);background:#fff;font-size:14px;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--font-mono)}
input,select,textarea{border:1px solid var(--lijn2);border-radius:var(--radius-klein);padding:5px 8px;
  font-family:inherit;font-size:.76rem;color:var(--ink);background:#fff}
:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* knoppen */
.knopje{border:1px solid var(--lijn2);background:#fff;border-radius:var(--radius-klein);
  padding:6px 12px;font-size:.72rem;font-weight:700;color:var(--ink2)}
.knopje:hover{background:var(--grijs)}
.knopje.pri{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--schaduw-knop)}
.knopje.pri:hover{background:var(--accent-d)}
.knopje:disabled{opacity:.45;cursor:not-allowed}

/* status en chips */
.st{font-size:.61rem;font-weight:700;border:1px solid var(--lijn2);border-radius:3px;padding:1px 6px;
  color:var(--ink2);white-space:nowrap}
.st.goed{border-color:var(--goed);color:var(--goed-d)}
.st.let{border-color:var(--let);color:var(--let-d)}
.st.stop{border-color:var(--stop);color:var(--stop-d)}
.fchip{border:1px solid var(--lijn2);background:#fff;border-radius:14px;padding:4px 11px;
  font-size:.68rem;font-weight:700;color:var(--ink2)}
.fchip.act{background:var(--accent);border-color:var(--accent);color:#fff}
.pil{display:inline-block;border:1px solid var(--lijn2);border-radius:14px;padding:3px 10px;font-size:.67rem;
  font-weight:700;color:var(--ink2);background:#fff;margin:0 4px 4px 0;cursor:pointer}
.pil.act{background:var(--accent);border-color:var(--accent);color:#fff}
.bol{width:9px;height:9px;border-radius:50%;flex:none}
.bol.goed{background:var(--goed)} .bol.let{background:var(--let)}
.bol.stop{background:var(--stop)} .bol.rust{background:var(--lijn2)}

/* schil — witte zijbalk met icoon + label, inklapbaar tot een glyph-rail
   (Blauw 13-08, prompt §2 — het «geen iconen»-besluit van 05-08 is terug-
   gedraaid: ingeklapt blijven de werkruimte-glyphs staan) */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);height:100vh;transition:grid-template-columns var(--overgang)}
.app.in{grid-template-columns:52px minmax(0,1fr)}
.app.in .nav__voet,.app.in .navkop b,.app.in .nav__merk{display:none}
.app.in .navkop{justify-content:center;padding:15px 0}
.app.in .dom__label,.app.in .dom__pijl,.app.in .dom__badge,.app.in .nav__groep,.app.in .dom__modules{display:none}
.app.in .dom__kop{justify-content:center;padding:9px 0}
.app.in .nav__boom{padding:4px 6px 10px}
.nav{background:var(--kaart);border-right:1px solid var(--lijn);display:flex;flex-direction:column;overflow:hidden}
.navkop{display:flex;align-items:center;gap:8px;padding:15px 14px 11px}
.navkop b{font-weight:800;font-size:1rem;flex:1;white-space:nowrap}
.navkop b span{color:var(--accent-d)}
.navklap{border:1px solid var(--lijn);background:#fff;border-radius:6px;width:26px;height:26px;flex:none;
  display:grid;place-items:center;font-size:.8rem;color:var(--ink2);line-height:1}
.navklap:hover{background:var(--grijs)}
.nav__boom{flex:1;overflow-y:auto;padding:4px 10px 10px}
.dom{margin-bottom:1px}
.dom__kop{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 12px;border-radius:10px;font-size:.82rem;font-weight:700;color:var(--ink2)}
.dom__kop:hover{background:var(--vlak)}
.dom__ico{width:18px;text-align:center;opacity:.85;flex:none}
.dom.is-actief .dom__kop{background:var(--accent-t);color:var(--accent)}
.dom.is-actief.is-open .dom__kop{background:transparent;color:var(--ink)}
.dom__pijl{margin-left:auto;font-size:.56rem;color:var(--ink3)}
.dom.is-open .dom__pijl{transform:rotate(90deg)}
.dom__badge{font-size:.56rem;font-weight:800;background:var(--let);color:#fff;border-radius:20px;padding:1px 6px}
.dom__modules{display:none;padding:2px 0 6px}
.dom.is-open .dom__modules{display:block}
.nav__groep{padding:9px 14px 3px 26px;font-size:.58rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2)}
.module{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:7px 12px 7px 26px;
  margin-bottom:1px;border:0;border-radius:9px;background:transparent;
  font-size:.78rem;color:var(--ink2)}
.module:hover{background:var(--vlak)}
.module.nu{background:var(--accent-t);color:var(--accent);font-weight:800}
.module .mbadge{margin-left:auto;font-size:.56rem;font-weight:800;background:var(--let);color:#fff;
  border-radius:20px;padding:1px 6px;font-family:var(--font-mono)}
/* F-R1 (12-08): de prototype-pil — zelfde pil als in de Marketing-ronde */
.module .mproto{margin-left:auto;font-size:.56rem;font-weight:800;background:var(--stop-t);color:var(--stop);
  border-radius:99px;padding:1px 7px;font-family:var(--font-mono)}
/* N1 (12-08) · de terugchip in de kopband — bestaande Zand-tokens, geen
   nieuwe kleuren (MARKETING-NAV §3.2) */
.terugband{padding:10px 26px 0;max-width:1240px;margin:0 auto}
.terugchip{border:1.5px solid var(--lijn2);background:#fff;color:var(--accent-d);
  border-radius:99px;padding:5px 14px;font:700 12px var(--font-ui);cursor:pointer;
  transition:background .16s}
.terugchip:hover{background:var(--grijs)}
.terugchip:focus-visible{outline:3px solid var(--accent-t);outline-offset:1px}
/* N2 (12-08) · de prototype-band bovenaan een prototype-scherm — zelfde
   pil als in het menu, mét korte uitleg (MARKETING-NAV §2) */
.protoband{padding:10px 26px 0;max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:9px}
.protoband .mproto{font-size:.56rem;font-weight:800;background:var(--stop-t);color:var(--stop);
  border-radius:99px;padding:2px 8px;font-family:var(--font-mono)}
.protoband-uitleg{font-size:.68rem;color:var(--ink2)}
.nav__voet{margin-top:auto;border-top:1px solid var(--lijn);padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.rol{display:flex;align-items:center;gap:9px;border:1px solid var(--lijn);background:#fff;border-radius:10px;padding:7px 9px}
.rol__avatar{width:29px;height:29px;border-radius:9px;background:var(--accent);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:.72rem}
.rol__naam{font-size:.74rem;font-weight:700} .rol__sub{font-size:.6rem;color:var(--ink2)}

/* modulebalk en cluster-tabs */
.content{overflow:hidden;min-width:0;display:flex;flex-direction:column}
.modbalk{display:flex;align-items:center;gap:8px;height:52px;padding:0 22px;border-bottom:1px solid var(--lijn);
  background:#fff;flex:none}
.stapbalk{display:flex;gap:6px;align-items:center;padding:8px 22px;border-bottom:1px solid var(--lijn);
  background:var(--kaart);flex:none}
/* Blauw 13-08 · de zand-bánd vervalt: de kopband is wit en de tabs zijn
   een segmentgroep (witte kaart, actieve tab accent-tint) — prompt §2. */
.cluster-tabs{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:12px 32px;
  background:#fff;border-bottom:1px solid var(--lijn)}
.cluster-tab{border:0;background:transparent;color:var(--ink2);border-radius:8px;
  padding:8px 14px;font:700 .8rem var(--font-ui);text-decoration:none;
  transition:background var(--overgang),color var(--overgang)}
.cluster-tab:hover{color:var(--ink);background:var(--grijs)}
.cluster-tab.is-actief{background:var(--accent-t);color:var(--accent)}
.vlak{height:calc(100vh - 53px - 46px);overflow-y:auto}
.kol{padding:15px 22px 60px;max-width:1420px}

/* tegels en kaarten */
.tegels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}
.tegel{border:1px solid var(--lijn);border-radius:7px;padding:9px 12px;background:#fff}
.tegel b{display:block;font-family:var(--font-mono);font-size:1.22rem;line-height:1.1}
.tegel span{font-size:.58rem;color:var(--ink2);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tegel.stop b{color:var(--stop)} .tegel.let b{color:var(--let)} .tegel.goed b{color:var(--goed)}
.kaartje{border:1px solid var(--lijn);border-radius:7px;padding:12px 14px;margin-bottom:11px;background:#fff}
.kaartje h4{margin:0 0 8px;font-size:.63rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);
  display:flex;gap:8px;align-items:center}
.kaart{background:#fff;border:var(--lijndikte) solid var(--lijn);border-radius:var(--radius)}

/* tabellen */
table.vt,.kaartje table{width:100%;border-collapse:collapse;font-size:.73rem}
.vt th,.kaartje th{font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);
  text-align:left;padding:6px 7px;border-bottom:1px solid var(--lijn2)}
.vt td,.kaartje td{padding:7px;border-bottom:1px solid var(--grijs2);vertical-align:top}
.vt tr.rij:hover td{background:var(--grijs)}
.m{font-family:var(--font-mono);text-align:right;white-space:nowrap}

/* meldingen — de enige plek waar kleur betekenis draagt */
.melddoos{border-radius:7px;padding:9px 12px;font-size:.71rem;line-height:1.55;margin-bottom:11px}
.melddoos.goed{background:var(--goed-t);border:1px solid var(--goed);color:var(--goed-d)}
.melddoos.let{background:var(--let-t);border:1px solid var(--let);color:var(--let-d)}
.melddoos.stop{background:var(--stop-t);border:1px solid var(--stop);color:var(--stop-d)}
.waarsch{border-radius:7px;padding:8px 10px;font-size:.67rem;line-height:1.55;margin-bottom:7px}
.waarsch.goed{background:var(--goed-t);border:1px solid var(--goed);color:var(--goed-d)}
.waarsch.let{background:var(--let-t);border:1px solid var(--let);color:var(--let-d)}
.waarsch.stop{background:var(--stop-t);border:1px solid var(--stop);color:var(--stop-d)}
.tip{font-size:.65rem;color:var(--ink2);line-height:1.6;margin-top:8px;background:var(--grijs);
  border-radius:6px;padding:8px 10px}

/* rijkaart — één regel per object in een werkvoorraad */
.rij{display:grid;gap:10px;align-items:center;border:1px solid var(--lijn);border-left-width:4px;
  border-radius:7px;padding:9px 12px;margin-bottom:7px;background:#fff}
.rij.goed{border-left-color:var(--goed)} .rij.let{border-left-color:var(--let)}
.rij.stop{border-left-color:var(--stop)} .rij.rust{border-left-color:var(--lijn2)}
.rij b{font-size:.78rem} .rij span{font-size:.63rem;color:var(--ink2)}
.rij div>span:not(.st){display:block;margin-top:2px}

/* ketenbalk met poortsloten — stappen van een proces */
.keten{display:flex;align-items:stretch;flex-wrap:wrap}
.stap{flex:1;min-width:112px;border:1px solid var(--lijn);border-left-width:0;padding:7px 9px;
  background:#fff;position:relative}
.stap:first-child{border-left-width:1px;border-radius:6px 0 0 6px}
.stap:last-child{border-radius:0 6px 6px 0}
.stap b{font-size:.69rem;display:block}
.stap span{font-size:.58rem;color:var(--ink2);display:block;margin-top:2px;line-height:1.4}
.stap.klaar{background:var(--goed-t)}
.stap.nu{background:var(--ink);color:#fff}
.stap.nu span{color:rgba(255,255,255,.78)}
.stap.slot{background:var(--stop-t)}
.slotje{position:absolute;top:5px;right:6px;font-size:.68rem}

/* inklapbare sectie in een zijpaneel */
.vouw{border-top:1px solid var(--grijs2)}
.vouw>button{width:100%;text-align:left;border:0;background:none;padding:9px 0;font-size:.74rem;
  font-weight:700;display:flex;align-items:center;gap:7px;color:var(--ink)}
.vouw>button s{text-decoration:none;margin-left:auto;font-size:.65rem;color:var(--ink2);font-weight:400}
.vouw__in{padding:0 0 11px}

/* melding onderin */
.toast{display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:#fff;border-radius:8px;padding:11px 18px;font-size:.74rem;z-index:60;max-width:820px;line-height:1.55}
.toast.aan{display:block}

/* document — offerte, opdrachtbevestiging, order */
.a4{width:794px;background:#fff;box-shadow:var(--schaduw-laag);padding:50px 58px;font-size:.72rem;line-height:1.65}
.a4 .kop{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);
  padding-bottom:14px}
.a4 h2{font-size:.72rem;margin:20px 0 6px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.a4 .klein{font-size:.63rem;color:var(--ink2);line-height:1.6}
.a4 .tot{display:flex;justify-content:space-between;padding:3px 0;font-size:.72rem}
.a4 .tot.eind{border-top:1px solid var(--ink);margin-top:5px;padding-top:7px;font-weight:800;font-size:.85rem}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* =====================================================================
   Wat hier NIET in hoort: kleuren per module. Heeft een scherm een tint
   nodig die er niet is, dan is dat een gesprek over betekenis — niet een
   literal in een modulebestand. De vier semantische kleuren (accent,
   goed, let, stop) dekken alles wat we tot nu toe tegenkwamen.
===================================================================== */

/* ═══ Zand (besluit 10-08) · filtergroepen, betekeniskleur en sorteerkoppen ═══
   Referentie: docs/prototypes/stijlvoorstel-mengvorm2.html — standaardstand. */

/* §3 · een chipgroep is één blok: geen losse ovalen meer */
.filters{display:flex;gap:0;align-items:center;flex-wrap:wrap;margin:14px 0 18px}
.fgroep{display:inline-flex;align-items:center;margin-right:22px;margin-top:6px}
.flabel{font:700 10.5px var(--font-mono);letter-spacing:.12em;color:var(--ink3);
  text-transform:uppercase;margin-right:10px}
.chips{display:inline-flex;border:1px solid var(--lijn);border-radius:9px;overflow:hidden;background:var(--kaart)}
.chips .chip{border:0;border-right:1px solid var(--grijs2);background:transparent;
  padding:7px 14px;font:600 12.5px var(--font-ui);color:var(--ink2);cursor:pointer}
.chips .chip:last-child{border-right:0}
.chips .chip:hover{background:var(--grijs)}
.chips .chip.is-actief{background:var(--accent);color:#fff;font-weight:700}

/* §4 · soort heeft een vaste kleur, platformbreed (register in bouwstenen.js):
   isolatie/spouw groen, kozijnen accent-blauw, keten paars (Blauw 13-08 —
   terra vervallen), overig neutraal */
.soortchip{display:inline-block;font:700 10.5px var(--font-mono);padding:3px 9px;border-radius:6px;
  background:var(--goed-t);color:var(--goed-d);white-space:nowrap}
.soortchip.k-kozijnen{background:var(--accent-t);color:var(--accent-d)}
.soortchip.k-keten{background:var(--paars-t);color:var(--paars)}
.soortchip.k-neutraal{background:var(--grijs);color:var(--ink2)}

/* §4 · status: tonale pillen, altijd mét het woord erbij (leeslaagregel) */
.status{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap}
.status.s-geplaatst{background:var(--accent-t);color:var(--accent-d)}
.status.s-uitvoering{background:var(--goed-t);color:var(--goed-d)}
.status.s-wacht{background:var(--let-t);color:var(--let-d)}
.status.s-af{background:var(--grijs);color:var(--ink2)}

/* §5 · de sorteertabel (component .tafel) + generieke sorteerkop-lagen.
   De pijl en de actieve kolom werken in élke tabel waar BS.sorteerbaar op
   staat; .tafel is de volledige prototype-vorm voor lijstschermen. */
.tafel{background:var(--kaart);border:1px solid var(--lijn);border-radius:16px;overflow:hidden;
  box-shadow:var(--schaduw-kaart)}
.tafel table{width:100%;border-collapse:collapse}
.tafel th{font:700 10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  text-align:left;padding:0;background:var(--rail);border-bottom:1px solid var(--lijn)}
.tafel th .bs-sorteerknop{padding:12px 14px}
.tafel td{padding:13px 14px;border-bottom:1px solid var(--grijs);vertical-align:top;font-size:13.5px}
.tafel tr:last-child td{border-bottom:0}
.tafel tbody tr:hover td{background:var(--accent-t2)}
.tafel tbody tr[data-vkb-doel],.tafel tbody tr[data-doel]{cursor:pointer}
.tafel td .sub{font-size:11.5px;color:var(--ink3);margin-top:2px}
.tafel .nr{font:700 13px var(--font-mono)}
.tafel .dash{color:var(--ink3)}
.tafel td.num{font-family:var(--font-mono);font-size:12.5px}

.bs-sorteerknop{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.bs-sorteerknop:hover{background:var(--grijs2);color:var(--ink)}
.bs-sorteerknop:focus-visible{outline:var(--focus-ring, 3px solid var(--accent));outline-offset:-3px}
th .pijl{font-size:9px;opacity:0;transition:opacity .12s}
th .bs-sorteerknop:hover .pijl{opacity:.45}
th.sort-op .pijl,th.sort-neer .pijl{opacity:1;color:var(--accent-d)}
th.sort-op .bs-sorteerknop,th.sort-neer .bs-sorteerknop{color:var(--ink);background:#fff;
  box-shadow:inset 0 -2px 0 var(--accent)}
th.sort-neer .pijl{display:inline-block;transform:rotate(180deg)}