/* ── casa360-stijl.css ── */
/* =====================================================================
   casa360-stijl.css — dé huisstijl als code (v3.0 «Werkbank» · 23-08-2026)
   Vervangt v2.0 «Blauw» (13-08); v2.0 verving v1.0 (Japandi).

   Besluit Michiel 23-08-2026, na de drie beeldrichtingen
   (docs/prototypes/beeldrichtingen-v1.html): het wordt Werkbank.

   Wat er verandert, en waarom:

   · **Geen sierkleur meer.** Blauw was accent én primaire knop én actieve
     module. Daardoor betekende blauw alles en dus niets. De primaire knop
     wordt zwart, de actieve module wordt zwart, en kleur is voortaan
     uitsluitend betekenis: rood blokkeert, amber vraagt aandacht, groen is
     in orde. Zie je kleur, dan is er iets aan de hand.
   · **De navigatie wordt donker.** Een bijna zwarte rail duwt het werkvlak
     naar voren en geeft de tellers en statuspunten een grond waarop ze
     leesbaar zijn zonder te schreeuwen.
   · **Rustiger vormen.** Radius van 14 naar 10, schaduwen zachter en
     grijzer. Het accent-token blijft bestaan — als bijna-zwart — zodat de
     dertig modulestylesheets niet hoeven te veranderen.

   Het blauw is niet verboden zoals groen dat ooit was; het is alleen geen
   dráger meer. Waar een module nog var(--accent) gebruikt, krijgt hij nu
   inkt — en dat is precies de bedoeling.

   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 — Werkbank (v3.0): koel neutraal grijs, geen blauwe
     ondertoon meer. Het werkvlak is licht, de kaarten zijn wit, en het
     verschil tussen die twee draagt de indeling in plaats van een rand. */
  --lijn:      #DCDFE3;   /* standaard 1px-rand */
  --lijn2:     #C9CDD3;   /* nadruk-rand, inputs */
  --grijs:     #F1F2F4;   /* zachte zone op een kaart, hover, tip-blok */
  --grijs2:    #E4E6E9;   /* scheidingslijn in een tabel, balkje-achtergrond */
  --kaart:     #FFFFFF;   /* het vlak van een kaart, paneel of invoerveld */
  --vlak:      #EFF1F3;   /* app-achtergrond */
  --rail:      #F1F2F4;   /* tabelkoppen */

  /* de donkere navigatierail (v3.0) — eigen tokens, want dit is het enige
     donkere vlak in de applicatie en het heeft zijn eigen inkt nodig */
  --nav:       #16191C;   /* de rail zelf */
  --nav2:      #23272C;   /* actieve stap, hover */
  --nav-lijn:  #262A2F;   /* scheiding tussen stappen */
  --nav-ink:   #C9CDD2;   /* tekst op de rail */
  --nav-ink2:  #7E858E;   /* onderschrift op de rail */

  /* inkt */
  --ink:       #14171A;   /* primaire tekst */
  --ink2:      #545B63;   /* secundaire tekst, labels */
  --ink3:      #838B94;   /* tertiair, placeholders — nooit lopende tekst */

  /* «accent» is in v3.0 geen kleur meer maar inkt. De naam blijft staan
     omdat dertig modulestylesheets hem gebruiken; wat eruit komt is zwart.
     Een primaire knop valt op door contrast, niet door een kleur die ook
     nog eens «actief» en «geselecteerd» moet betekenen. */
  --accent:    #14171A;   /* actieve module, selectie, primaire knop */
  --accent-t:  #EDEEF0;   /* accentvlak, actieve tab/menu-item */
  --accent-t2: #F6F7F8;   /* rijhover, geselecteerde rij */
  --accent-d:  #000000;   /* hover primaire knop */

  /* semantisch — déze drie dragen de kleur van het systeem, en zij alleen */
  --goed:      #1B7A4B;   /* in orde, betaald, klaar */
  --goed-t:    #E2F1E8;
  --goed-d:    #14603A;   /* teksttint op een goed-tintvlak (AA) */
  --let:       #A97A08;   /* let op, wacht op iets, buiten de norm */
  --let-t:     #FBF1DC;
  --let-d:     #7E5A06;   /* teksttint op een let-tintvlak (AA) */
  --stop:      #A63B27;   /* blokkade, poort dicht, fout */
  --stop-t:    #F8E7E3;
  --stop-d:    #8A2F1E;

  /* soortkleur keten — soortregister, geen semantiek. Gedempt in v3.0:
     een soort mag herkenbaar zijn, niet luid. */
  --paars:     #5B4BA8;
  --paars-t:   #ECEAF5;

  --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:  #3A5A8C;
  --avatar-2:  #2F6B4F;
  --avatar-3:  #5B4BA8;
  --avatar-4:  #9C5F2E;
  --avatar-5:  #16707A;
  --avatar-6:  #914462;

  /* typografie — Manrope (besluit 23-08, v3.0): Nunito is rond en vriendelijk
     en dat is precies wat een werkbank níet is. Manrope staat rechter en
     leest strakker in dichte lijsten; mono blijft JetBrains. */
  --font-ui:   'Manrope', 'Nunito', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* vorm — strakker dan Blauw: 14 werd 10, 11 werd 8. Een werkbank heeft
     rechte hoeken; te ronde kaarten maken een lijst zachter dan hij is. */
  --radius:      10px;
  --radius-klein:8px;
  --radius-pill: 99px;
  --lijndikte:   1px;

  /* diepte — mag, maar spaarzaam: alleen op wat boven het vlak zweeft */
  --schaduw-kaart: 0 1px 3px rgba(20,23,26,.06);
  --schaduw-zwevend: 0 2px 8px rgba(20,23,26,.09);
  --schaduw-knop:  0 1px 3px rgba(20,23,26,.22);    /* alléén de primaire knop */
  --schaduw-laag:  0 10px 28px rgba(20,23,26,.18);  /* 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)}
/* 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)}
/* Besluit Michiel 03-09 · de weg terug staat links in de tabbalk, als eerste
   knop, alleen als er een herkomst is — de band erboven en de Overzicht-tab
   zijn vervallen. Zelfde maat als een tab, lijn rechts als scheiding. */
.cluster-terug{border:0;background:transparent;color:var(--ink2);border-radius:8px;
  padding:8px 14px;font:700 .8rem var(--font-ui);cursor:pointer;margin-right:6px;
  border-right:1px solid var(--lijn);border-radius:8px 0 0 8px;
  transition:background var(--overgang),color var(--overgang)}
.cluster-terug:hover{color:var(--ink);background:var(--grijs)}
.cluster-terug:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.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)}

/* ── app.css ── */
/* =====================================================================
   app.css — Casa360 Beheer · navigatieschil (variant A) + Vandaag
   Bouwt uitsluitend voort op casa360-tokens.css. Geen nieuwe kleuren,
   diepte via de tokens in casa360-diepte.css; geen blauw. Basis = 1px-lijnen
   en paneel-tinten. Zie CLAUDE.md.
===================================================================== */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }

.app {
  display: grid;
  /* minmax(0,1fr): content mag krimpen — brede tabellen scrollen dan
     bínnen de contentkolom i.p.v. de hele pagina breder te duwen */
  grid-template-columns: 264px minmax(0, 1fr);
  height: 100vh;
  /* Werkbank v3.0 · een goot tussen rail en inhoud. Systeembreed en op het
     raster, niet per module: de module-wortelnorm (padding 26/32/72) wordt
     nu eenmaal vergeten — het moduleoverzicht had `padding: 4px 0 8px` en
     plakte daardoor tegen de rail. Met de goot op het raster kán dat niet
     meer, hoe een scherm zijn eigen binnenwerk ook opmaakt.

     Tegen een donkere rail is dit bovendien geen luxe. Wit tegen wit
     vergeeft een krappe marge; zwart tegen wit maakt er een naad van. */
  /* UITLIJNING (Michiel 04-09): de goot is weg — de pagina sluit direct
     op de rail aan, en elke modulewortel begint op dezelfde linkerlijn
     (zie de uitlijnregel bij .content hieronder). De marge zit in de
     wortel zelf (padding 32px), niet meer in een grijze strook ertussen. */
  column-gap: 0;
  background: var(--vlak);
}

/* ---------- Navigatie: accordion-boom (UX-besluit 14-07-2026) ---------- */
.nav {
  /* Blauw 13-08 (prompt §2): de zijbalk is wit; --rail blijft alleen
     voor tabelkoppen bestaan. */
  background: var(--kaart);
  border-right: var(--lijndikte) solid var(--c-lijn);
  display: flex; flex-direction: column; overflow: hidden;
}
.nav__merk { padding: 20px 18px 12px; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.nav__merk span { color: var(--accent); }   /* Blauw 13-08: de cijfers in accent */
.nav__boom { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }

.dom { margin-bottom: 2px; }
.dom__kop {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 10px 12px; border-radius: 10px;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 700; color: var(--c-ink-2);
  transition: background var(--overgang), color var(--overgang);
}
.dom__kop:hover { background: var(--c-vlak); }
.dom.is-actief .dom__kop { background: var(--accent-t); color: var(--accent); }
.dom.is-actief.is-open .dom__kop { background: transparent; color: var(--c-ink); }
.dom__pijl { margin-left: auto; font-size: .58rem; color: var(--c-ink-3); transition: transform var(--overgang); }
.dom.is-open .dom__pijl { transform: rotate(90deg); }
.dom__badge { font-size: .58rem; font-weight: 800; background: var(--c-terra); color: #fff; border-radius: var(--radius-pill); padding: 1px 6px; }

.dom__modules { display: none; padding: 2px 0 6px; }
.dom.is-open .dom__modules { display: block; }
.nav__groep { padding: 10px 14px 3px 26px; }
.module {
  display: block; width: 100%; text-align: left;
  padding: 7px 12px 7px 26px; margin-bottom: 1px;
  border: 0; border-left: 2px solid transparent; border-radius: 9px;
  background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink-2);
  transition: background var(--overgang), color var(--overgang);
}
.module:hover { background: var(--c-vlak); }
.module[aria-current="true"] {
  background: var(--accent-t); color: var(--accent); font-weight: 800;
}

/* voet: zoeken + AANZICHT + rol-switch */
.nav__voet {
  margin-top: auto; border-top: var(--lijndikte) solid var(--c-lijn);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
}
.paneel__zoek {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  color: var(--c-ink-3); font-size: .78rem; cursor: text;
}
.paneel__zoek kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: .6rem;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 5px; padding: 1px 5px; color: var(--c-ink-2);
}
.entiteit {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 0; cursor: pointer; color: var(--c-ink-2);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em;
  padding: 0 2px; text-align: left;
}
/* AANZICHT-stip: geconsolideerd = neutraal, casa360 = groen, casa365 = terra */
.entiteit__stip { width: 9px; height: 9px; border-radius: 50%; background: var(--c-ink-3); flex: none; }
.entiteit.is-casa360 .entiteit__stip { background: var(--c-groen); }
.entiteit.is-casa365 .entiteit__stip { background: var(--c-terra); }
.rol {
  display: flex; align-items: center; gap: 10px;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  border-radius: 10px; padding: 8px 10px; cursor: pointer;
  font-family: var(--font-ui); text-align: left;
}
.rol:hover { border-color: var(--c-lijn-2); }
.rol__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .74rem; flex: none; }
.rol__tekst { min-width: 0; display: flex; flex-direction: column; }
.rol__naam { font-size: .76rem; font-weight: 700; color: var(--c-ink); }
.rol__sub { font-size: .62rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rol__wissel { margin-left: auto; font-size: .64rem; color: var(--accent-d); font-weight: 700; flex: none; }

/* ---------- Content ---------- */
.content { position: relative; overflow-y: auto; overflow-x: auto; background: var(--c-paneel-2); min-width: 0; }
/* UITLIJNING (Michiel 04-09): alle pagina's links uitgelijnd op de rail.
   De modulewortels dragen zelf «margin: 0 auto» (module-wortel-norm); dat
   centreerde ze en gaf op een breed scherm links een wisselende leegte —
   het meest op Vandaag. Deze regel wint van de wortelregel (id + klasse)
   en zet elke wortel op dezelfde linkerlijn; de max-breedte en de eigen
   padding van de wortel blijven. */
#content > .cluster-inhoud > *, #content > *:not(.cluster-tabs):not(.protoband):not(.cluster-inhoud) { margin-left: 0; margin-right: auto; }
.vandaag { max-width: 1120px; margin: 0; padding: 26px 32px 60px; }

.begroeting { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.begroeting h1 { margin: 2px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; }
.begroeting__rol { color: var(--c-ink-2); font-weight: 600; }
.datum { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--c-ink-3); text-transform: uppercase; }

/* rolwisselaar */
.rolwissel { display: flex; gap: 4px; margin: 16px 0 4px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 3px; width: max-content; }
.rolwissel button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-ink-2);
  transition: background var(--overgang), color var(--overgang);
}
.rolwissel button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-creme); }

/* signalenstrook — "wat vraagt vandaag om aandacht" */
.signalen { margin: 18px 0 6px; }
.signalen__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.signalen__lijst { display: flex; gap: 10px; flex-wrap: wrap; }
.signaal {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-left-width: 3px; border-radius: var(--radius);
  padding: 8px 12px; font-size: .8rem; color: var(--c-ink);
  cursor: pointer; transition: border-color var(--overgang);
}
.signaal:hover { border-color: var(--c-lijn-2); }
.signaal--rood { border-left-color: var(--c-rood); }
.signaal--amber { border-left-color: var(--c-amber); }
.signaal--groen { border-left-color: var(--c-groen); }
.signaal__icoon { font-size: .95rem; }

/* tegels */
.sectiekop { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); margin: 26px 0 10px; }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tegel {
  background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-top-width: 3px; border-radius: var(--radius);
  padding: 14px 16px 16px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--overgang), transform var(--overgang);
  font-family: var(--font-ui);
}
.tegel:hover { border-color: var(--c-lijn-2); }
.tegel--groen { border-top-color: var(--c-groen); }
.tegel--terra { border-top-color: var(--c-terra); }
.tegel--amber { border-top-color: var(--c-amber); }
.tegel--stil  { border-top-color: var(--c-lijn-2); }
.tegel__kop { display: flex; align-items: center; gap: 8px; }
.tegel__icoon { font-size: 1rem; }
.tegel__naam { font-weight: 800; font-size: .92rem; }
.tegel__pijl { margin-left: auto; color: var(--c-ink-3); font-size: .9rem; }
.kpis { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi__waarde { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.kpi__waarde.mono { font-family: var(--font-mono); }
.kpi__label { font-size: .68rem; color: var(--c-ink-2); }
.kpi__waarde--rood { color: var(--c-rood); }
.kpi__waarde--amber { color: var(--c-amber); }
.kpi__waarde--groen { color: var(--c-groen-d); }

/* funnel-mini */
.funnel { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.funnel span { flex: 1; background: var(--c-groen-t); border-radius: 4px 4px 0 0; }
.funnel span:last-child { background: var(--c-groen); }

/* Voor mij te doen */
.tedoen { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; }
.taak { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: var(--lijndikte) solid var(--c-lijn); }
.taak:first-child { border-top: 0; }
.taak:hover { background: var(--c-creme); }
.taak__check { width: 18px; height: 18px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 6px; flex: 0 0 auto; display: grid; place-items: center; color: transparent; background: #fff; cursor: pointer; padding: 0; font-size: .7rem; }
.taak.is-klaar .taak__check { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.taak.is-klaar .taak__titel { text-decoration: line-through; color: var(--c-ink-3); }
.taak__titel { font-size: .85rem; font-weight: 600; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); color: var(--c-ink); padding: 0; flex: 1; min-width: 0; }
.taak__titel:hover { color: var(--c-groen-d); }
.taak__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.taak__bron { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }

/* één-bron-notie */
.bronnotie { margin-top: 22px; display: flex; align-items: center; gap: 8px; color: var(--c-ink-3); font-size: .72rem; }
.bronnotie::before { content: "◉"; color: var(--c-groen); }

/* toast (undo) */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--c-ink); color: var(--c-creme);
  padding: 10px 14px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px; font-size: .82rem;
  opacity: 0; pointer-events: none; transition: opacity var(--overgang), transform var(--overgang);
  z-index: 40;
}
.toast.is-zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast button { background: transparent; border: 0; color: var(--c-groen-t); font-weight: 800; cursor: pointer; font-family: var(--font-ui); }

@media (max-width: 720px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .nav__merk { font-size: .9rem; }
}

/* ＋ Taak toevoegen (E6): rustige stippellijn-knop onderaan de takenlijst */
.taak--nieuw { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--c-lijn-2, var(--c-lijn)); border-radius: 12px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); padding: 10px 14px; cursor: pointer; }
.taak--nieuw:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); }

/* Doorstroom-flits (keten-wow, 18-07-2026): een record dat net uit een
   keten-stap is ontstaan licht kort op waar het landt. Alleen een zachte
   achtergrond-puls binnen de tokens; reduced-motion krijgt een statische tint. */
.is-vers { animation: casa-flits 3.2s ease-out; }
@keyframes casa-flits {
  0% { background-color: var(--c-groen-t); box-shadow: inset 3px 0 0 var(--c-groen); }
  70% { background-color: var(--c-groen-t); box-shadow: inset 3px 0 0 var(--c-groen); }
  100% { background-color: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-vers { animation: none; background-color: var(--c-groen-t); box-shadow: inset 3px 0 0 var(--c-groen); }
}

/* Keten-werkvoorraad op Vandaag (18-07-2026): echte tellers, klikbaar */
.vt-keten { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-top: 14px; }
.vt-ketenrij { display: flex; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; background: none; font: inherit; font-size: 12.5px; color: var(--c-ink); padding: 9px 14px; cursor: pointer; text-align: left; }
.vt-ketenrij:hover { border-color: var(--c-groen-d); background: var(--c-creme); }
.vt-ketenrij strong { font-size: 15px; color: var(--c-groen-d); min-width: 22px; }
.vt-ketenrij span:last-child { margin-left: auto; color: var(--c-ink-3); }

/* Cluster-tabbalk (menu-consolidatie 18-07-2026): werkbank-tabs boven de
   module — zelfde rustige pill-stijl als de beheer-tabs. */
/* Zand §2: de cluster-tabbalk is de kopband — canoniek in casa360-stijl.css. */

/* ⌘K command-palette (uitbreiding 1, 18-07-2026) */
.zd-laag { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--c-ink) 32%, transparent); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.zd-paneel { width: min(640px, 92vw); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-tegel-hover); overflow: hidden; }
.zd-zoekrij { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); }
.zd-zoekrij input { flex: 1; border: 0; outline-offset: 4px; font: 600 .95rem var(--font-ui); color: var(--c-ink); background: none; }
.zd-zoekrij kbd { font: 600 .6rem var(--font-mono); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 6px; padding: 2px 7px; color: var(--c-ink-3); }
.zd-lijst { max-height: 46vh; overflow-y: auto; }
.zd-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px 18px; font: 500 .8rem var(--font-ui); color: var(--c-ink); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.zd-item:last-child { border-bottom: 0; }
.zd-item.is-actief, .zd-item:hover { background: var(--c-creme); }
.zd-item__soort { flex: none; width: 64px; font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-groen-d); }
.zd-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.zd-item__t span { font-size: .64rem; color: var(--c-ink-3); }
.zd-leeg { padding: 18px; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); }
.zd-voet { padding: 8px 18px; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); background: var(--c-creme); border-top: var(--lijndikte) solid var(--c-lijn); }

/* Meldingen (uitbreiding 2): knop in de nav-voet + dropdown-paneel */
.attentie { display: flex; align-items: center; gap: 8px; width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 12px; background: #fff; font: 600 12.5px var(--font-ui); color: var(--c-ink-2); padding: 9px 12px; cursor: pointer; margin-bottom: 8px; }
.attentie:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.attentie__badge { margin-left: auto; background: var(--c-terra); color: #fff; border-radius: 99px; font-size: 10.5px; padding: 1px 8px; }
.att-paneel { position: fixed; left: 210px; bottom: 90px; z-index: 80; width: min(400px, 90vw); max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; }
.att-kop { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.att-gelezen { border: 0; background: none; font: 600 11px var(--font-ui); color: var(--c-groen-d); cursor: pointer; }
.att-lijst { overflow-y: auto; }
.att-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 12.5px var(--font-ui); color: var(--c-ink); }
.att-item:hover { background: var(--c-creme); }
.att-item.is-gelezen { opacity: .55; }
.att-item__soort { flex: none; color: var(--c-groen-d); font-size: 12px; margin-top: 2px; }
.att-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.att-item__t span { font-size: 11px; color: var(--c-ink-2); }
.att-item__t em { font-style: normal; font-size: 9.5px; color: var(--c-ink-3); }
.att-leeg { padding: 16px; font: 400 12px var(--font-ui); color: var(--c-ink-3); }

/* FT-1.1 · aandacht-strip: gecapt op 3 chips, uitgeklapt als opsomming */
.signalen__lijst.is-opsomming { flex-direction: column; align-items: stretch; gap: 6px; }
.signaal--meer { border-style: dashed; color: var(--c-ink-2); background: none; }
.signaal--meer:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.signaal-regel { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; background: #fff; font: 600 13px var(--font-ui); color: var(--c-ink); padding: 9px 14px; cursor: pointer; }
.signaal-regel:hover { border-color: var(--c-groen-d); }
.signaal-regel__dot { flex: none; width: 8px; height: 8px; border-radius: 99px; }
.signaal-regel__dot.is-rood { background: var(--c-rood); }
.signaal-regel__dot.is-amber { background: var(--c-amber); }
.signaal-regel__dot.is-groen { background: var(--c-groen); }
.signaal-regel__tekst { flex: 1; min-width: 0; }
.signaal-regel > span:last-child { color: var(--c-ink-3); }

/* R1 bouwplan · Mijn werk-blok op Vandaag (WP1.4) */
.mwb { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--schaduw-tegel); }
.mwb-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.mwb-open { border: 0; background: none; cursor: pointer; font: 700 .76rem var(--font-ui); color: var(--c-groen-d); padding: 0; }
.mwb-open:hover { color: var(--c-ink); }
.mwb-cellen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mwb-cel { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 9px 12px; background: var(--c-creme); cursor: pointer; font: inherit; color: var(--c-ink); text-align: left; transition: border-color var(--overgang); }
.mwb-cel:hover { border-color: var(--c-groen); }
.mwb-cel b { font-size: 1.05rem; }
.mwb-cel span { font-size: .62rem; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.mwb-cel.is-rood b { color: var(--c-rood); }
.mwb-cel.is-amber b { color: var(--c-amber); }
.mwb-cel.is-groen b { color: var(--c-groen-d); }
@media (max-width: 980px) { .mwb-cellen { grid-template-columns: repeat(3, 1fr); } }
.mwb-leerpunt { margin: 8px 0 0; padding: 10px 12px; background: var(--c-memo); border-radius: 9px; font-size: .8rem; line-height: 1.55; color: var(--c-ink); }
.mwb-leerpunt span { color: var(--c-ink-3); font-size: .72rem; }

/* Vandaag-herindeling (01-08): keten-tegelrij — vijf gelijke stops */
.tegels--keten { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.vd-ketentegel .kpi__waarde { font-size: 1.25rem; }

/* OI1 · teller in een menu-item (Doorzetten, Opvolging) — stil getal,
   dezelfde vorm als de werkruimte-badge maar kleiner. */
.module .mbadge { margin-left: 6px; font-size: .62rem; font-weight: 800; color: var(--c-ink-3);
  background: var(--c-paneel-2); border-radius: 99px; padding: 0 6px; }
.module[aria-current="true"] .mbadge { background: var(--c-groen-t); color: var(--c-groen-d); }

/* ═══ Inklapbare rail. Blauw 13-08 (prompt §2): het menu toont weer
   icoon + label, dus de smalle stand houdt de werkruimte-glyphs — het
   «niets te tonen»-argument van 05-08 vervalt met de iconen. De content
   schuift mee omdat de schil een grid is. */
.navkop { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.navkop .nav__merk { flex: 1; min-width: 0; }
.navklap { border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  border-radius: 6px; width: 26px; height: 26px; flex: none; display: grid;
  place-items: center; font-size: .8rem; color: var(--c-ink-2); line-height: 1;
  transition: background var(--overgang); }
.navklap:hover { background: var(--c-creme); }

.app { transition: grid-template-columns var(--overgang); }
/* min-width:0 is hier geen detail maar de hele truc: een grid-item wordt
   standaard niet smaller dan zijn min-content, en dan blijft de rail op de
   breedte van zijn breedste kind hangen — hoeveel je de kolom ook verkleint. */
.app > .nav { min-width: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   N1 · de keten als menu — verticaal (besluit Michiel 22-08-2026)

   Het menu staat weer links, maar de accordion komt niet terug. Zes
   ketenstappen onder elkaar met hun teller ernáást — verticaal is daar
   ruimte voor, horizontaal moest het onderschrift onder het getal en werd
   «€ 1.529K debiteuren open» krap.

   De actieve stap toont zijn modules ingesprongen. De andere niet. Er klapt
   niets open of dicht: dát was wat er aan de oude boom van dertien
   werkruimtes mankeerde — dezelfde klik deed iets anders afhankelijk van
   wat er al openstond.

   Geen iconen (besluit 22-08): alleen het woord telt.
   ═══════════════════════════════════════════════════════════════════ */
.app.nav-keten { grid-template-columns: 258px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
/* ═══ Werkbank v3.0 (besluit 23-08-2026) · de donkere rail ═══════════
   De navigatie was wit, net als de kaarten ernaast — daardoor liep de
   rand van de app door het werk heen. Een bijna zwarte rail zet het
   werkvlak naar voren en geeft de tellers en statuspunten een grond
   waarop ze leesbaar zijn zonder te schreeuwen.

   De rail heeft zijn eigen inkt-tokens (--nav-ink, --nav-ink2). Dat moet
   wel: --ink is gemaakt voor donkere tekst op een licht vlak, en hier is
   het precies andersom. */
.app.nav-keten .nav {
  background: var(--nav);
  border-right: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.app.nav-keten .nav__merk {
  padding: 15px 16px 14px; font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
  color: #FFFFFF; flex: none;
}
.app.nav-keten .nav__merk span { color: var(--nav-ink); }

.ketenrail { flex: 1; overflow-y: auto; padding: 2px 0 10px; }
.stapwrap { position: relative; }
.stapV__glyph { display: none; }

/* ---- één stap ---- */
.stapV {
  display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 8px;
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 10px 14px 10px 10px; border-top: var(--lijndikte) solid var(--nav-lijn);
  transition: background var(--overgang, 160ms ease);
}
.stapV:hover { background: var(--nav2); }
.stapV:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.stapV[aria-current="true"] { background: var(--nav2); }

/* Het statuspunt. Geen punt betekent: hier ligt niets — een groen bolletje
   bij alles is een kerstboom, en dan zegt rood niets meer. */
.stapV__punt { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.stapV__punt.is-stop { background: #D2543A; }
.stapV__punt.is-let  { background: #D19B14; }
.stapV__punt.is-goed { background: #2E9E68; }

.stapV__tekst { min-width: 0; }
.stapV__rij { display: flex; align-items: baseline; gap: 8px; }
.stapV__nm { font: 700 13.5px var(--font-ui); color: var(--nav-ink); }
.stapV[aria-current="true"] .stapV__nm { color: #FFFFFF; }
.stapV__tel {
  margin-left: auto; font: 700 13.5px var(--font-mono); color: var(--nav-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stapV[aria-current="true"] .stapV__tel { color: #FFFFFF; }
.stapV__sub { display: block; font-size: 10.5px; color: var(--nav-ink2); line-height: 1.35; margin-top: 1px; }
.stapV__sub.is-let { color: #D19B14; font-weight: 700; }

/* ---- de modules van de actieve stap ---- */
.submods { padding: 0 0 8px; background: var(--nav2); }
.submod {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  padding: 5px 14px 5px 30px; font: 600 12.5px var(--font-ui); color: var(--nav-ink2);
}
.submod:hover { color: #FFFFFF; }
.submod:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.submod[aria-current="true"] { color: #FFFFFF; font-weight: 700; box-shadow: inset 2px 0 0 #FFFFFF; }
.submod .mbadge, .submod .mproto { margin-left: auto; }

.railscheiding { height: var(--lijndikte); background: var(--nav-lijn); margin: 8px 0; }

/* ---- de voet (04-09, naar Gripp): «Ingelogd als» + een rij glyphs ---- */
.railvoet {
  flex: none; padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 6px;
  border-top: var(--lijndikte) solid var(--nav-lijn);
}
.railwie {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left; padding: 6px 6px; border-radius: var(--radius-klein);
  color: var(--nav-ink);
}
.railwie:hover { background: var(--nav2); }
.railwie:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.railwie .rol__avatar { width: 28px; height: 28px; font-size: 10px; }
.railwie__tekst { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.railwie__tekst b { font: 700 12.5px var(--font-ui); color: #FFFFFF; }
.railwie__tekst em { font-style: normal; font-size: 11px; color: var(--nav-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.railwie__pijl { font: 700 16px var(--font-ui); color: var(--nav-ink2); }
.railiconen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-top: var(--lijndikte) solid var(--nav-lijn); padding-top: 6px; }
.railicoon {
  position: relative; height: 34px; border: 0; background: none; border-radius: var(--radius-klein); cursor: pointer;
  font: 600 16px var(--font-ui); color: var(--nav-ink2); display: grid; place-items: center;
}
.railicoon:hover { background: var(--nav2); color: #FFFFFF; }
.railicoon:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.railicoon .attentie__badge { position: absolute; top: 3px; right: 6px; font-size: 9.5px; line-height: 1; padding: 2px 5px; border-radius: 99px; background: #D19B14; color: #14171A; }
/* (04-09) de losse voetknoppen zijn vervangen door .railwie + .railiconen hierboven */
.railvoet .rol__avatar {
  width: 20px; height: 20px; border-radius: 50%; background: #3A4148; color: #FFFFFF;
  display: grid; place-items: center; font: 800 9px var(--font-ui); flex: none;
}
.railvoet .rol__naam { font-weight: 700; color: #FFFFFF; }

/* Smal scherm: de rail wordt een strook boven het werk. Zonder iconen valt
   er in een échte smalle rail niets te tonen — dat is de consequentie van
   het icoonbesluit, en dus wordt hij hier horizontaal in plaats van smal. */
/* ---- NAVIGATIE V2 (besluit 8, 04-09): de smalle rail ----
   56 px, één glyph per ingang, het statuspunt rechtsboven, naam en
   teller in de tooltip; het submenu als zweeflijst naast de rail. */
.app.nav-keten.rail-smal { grid-template-columns: 56px minmax(0, 1fr); }
.app.rail-smal .nav__merk { padding: 14px 0 10px; text-align: center; font-size: 1.05rem; }
.app.rail-smal .nav__merk--smal { font-size: .95rem; letter-spacing: .02em; }
.app.rail-smal .stapV {
  grid-template-columns: 1fr; gap: 0; padding: 11px 0; justify-items: center; position: relative;
}
.app.rail-smal .stapV__glyph {
  display: block; font: 600 17px var(--font-ui); color: var(--nav-ink); line-height: 1; text-align: center;
}
.app.rail-smal .stapV[aria-current="true"] .stapV__glyph { color: #FFFFFF; }
.app.rail-smal .stapV__tekst { display: none; }
.app.rail-smal .stapV__punt { position: absolute; top: 7px; right: 12px; width: 7px; height: 7px; }
.app.rail-smal .submods { display: none; }
.app.rail-smal .submods--fly {
  position: fixed; left: 56px; z-index: 60; min-width: 236px; max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--nav2); border: var(--lijndikte) solid var(--nav-lijn); border-left: 0;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0; box-shadow: var(--schaduw-zwevend); padding: 6px 0 8px;
}
.app.rail-smal .submods--fly .submod { padding-left: 16px; }
.app.rail-smal .submods__kop { padding: 6px 16px 6px; font: 700 12.5px var(--font-ui); color: #FFFFFF; border-bottom: var(--lijndikte) solid var(--nav-lijn); margin-bottom: 4px; }
.app.rail-smal .stapwrap:hover > .submods--fly,
.app.rail-smal .stapwrap.is-open > .submods--fly,
.app.rail-smal .stapwrap:focus-within > .submods--fly { display: block; }
.app.rail-smal .railvoet { padding: 6px 4px 8px; align-items: stretch; }
.app.rail-smal .railwie { grid-template-columns: 1fr; justify-items: center; padding: 6px 0; }
.app.rail-smal .railwie__tekst, .app.rail-smal .railwie__pijl { display: none; }
.app.rail-smal .railiconen { grid-template-columns: 1fr; gap: 2px; }
/* de glyph van de actieve stap vóór de paginatitel, alleen ingeklapt */
.app.rail-smal > .content[data-stapglyph]:not([data-stapglyph=""])::before {
  content: attr(data-stapglyph); display: block; flex: 0 0 auto; width: 100%; box-sizing: border-box;
  padding: 10px 32px 0; font: 700 11px var(--font-mono); letter-spacing: .04em; color: var(--ink2);
}

@media (max-width: 900px) {
  .app.nav-keten, .app.nav-keten.rail-smal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app.rail-smal .stapV__glyph, .app.rail-smal .submods--fly, .app.rail-smal .railvoet .railklap { display: none; }
  .app.rail-smal .stapV__tekst { display: block; }
  .app.rail-smal .stapV { grid-template-columns: 8px auto; gap: 8px; padding: 8px 14px 6px 10px; }
  .app.rail-smal .stapV__punt { position: static; }
  .stapwrap { display: contents; }
  .app.nav-keten .nav { flex-direction: row; align-items: center; overflow-x: auto;
    border-right: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
  .app.nav-keten .nav__merk { border-bottom: 0; padding: 10px 14px; white-space: nowrap; }
  .ketenrail { display: flex; align-items: stretch; padding: 0; overflow: visible; }
  /* Werkbank v3.0 · de stap is verticaal een raster van punt + tekst; op
     smal moet dat een rij worden die zijn eigen breedte houdt. Zonder deze
     regel houdt hij zijn kolombreedte van 8px en schuiven alle stappen
     over elkaar heen. */
  .stapV {
    width: auto; flex: none; grid-template-columns: 8px auto; align-items: center;
    border-top: 0; border-bottom: 3px solid transparent; padding: 8px 14px 6px 10px;
    white-space: nowrap;
  }
  .stapV + .stapV { border-left: var(--lijndikte) solid var(--nav-lijn); }
  .stapV[aria-current="true"] { border-bottom-color: #FFFFFF; }
  .stapV__rij { gap: 6px; }
  .stapV__tel { margin-left: 6px; }
  .stapV__sub { display: none; }       /* op smal telt de naam en het getal */
  .submods { display: none; }          /* op smal telt de stap, niet de submodule */
  .railvoet { flex-direction: row; border-top: 0; padding: 8px 12px; }
  .railvoet .paneel__zoek, .railvoet .entiteit { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stapV { transition: none; } }

/* ═══ Werkbank v3.0 · het blokkadepaneel op Vandaag ══════════════════
   Rijen met een statusstrook links, het bedrag rechts en de handeling
   permanent zichtbaar. De strook laat je de lijst scannen zonder te
   lezen; de knop maakt van kijken doen. */
.wbpaneel {
  background: var(--kaart); border: var(--lijndikte) solid var(--lijn);
  border-radius: var(--radius); overflow: hidden; margin: 16px 0;
  box-shadow: var(--schaduw-kaart);
}
.wbpaneel__kop {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 15px; border-bottom: var(--lijndikte) solid var(--lijn);
}
.wbpaneel__kop strong { font: 800 .86rem var(--font-ui); }
.wbpaneel__som { margin-left: auto; font-size: .78rem; color: var(--ink2); }
.wbrij {
  display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center; padding-right: 15px;
  border-bottom: var(--lijndikte) solid var(--lijn);
}
.wbrij:last-child { border-bottom: 0; }
.wbrij:hover { background: var(--accent-t2); }
.wbrij__streep { align-self: stretch; }
.wbrij__streep.is-stop { background: var(--stop); }
.wbrij__streep.is-let  { background: var(--let); }
.wbrij__wat { padding: 11px 0 11px 13px; min-width: 0; }
.wbrij__wat b { display: block; font: 700 .84rem var(--font-ui); }
.wbrij__wat span { display: block; font-size: .76rem; color: var(--ink2); }
.wbrij__geld { font: 700 .88rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wbrij__knop {
  border: var(--lijndikte) solid var(--lijn); background: var(--kaart); color: var(--ink);
  font: 700 .76rem var(--font-ui); padding: 6px 11px;
  border-radius: var(--radius-klein); cursor: pointer; white-space: nowrap;
}
.wbrij__knop:hover { background: var(--ink); border-color: var(--ink); color: var(--kaart); }
.wbrij__knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wbrij__knop--stil { background: none; border-color: transparent; color: var(--ink3); cursor: default; font-weight: 500; }
.wbrij__knop--stil:hover { background: none; color: var(--ink3); }
.signaal--stil { color: var(--ink2); background: var(--grijs); border-color: var(--lijn); }
@media (max-width: 720px) {
  .wbrij { grid-template-columns: 5px minmax(0, 1fr); }
  .wbrij__geld, .wbrij__knop { grid-column: 2; justify-self: start; margin-bottom: 10px; }
}
/* een tegel met een 0 vult ruimte en zegt niets; wat er niet is krijgt
   één regel in plaats van zes lege vakken */
.mwb-leeg { align-self: center; font-size: .74rem; color: var(--ink3); padding-left: 4px; }

/* VP14 · focus-modus voor het planbord op een tweede scherm: rail weg,
   de module op de volle breedte. De module zet en wist de klasse; app.js
   wist hem zodra een ander scherm opent. */
.app.pb-focus { grid-template-columns: minmax(0, 1fr) !important; }
.app.pb-focus #nav { display: none; }

/* ── bouwstenen.css ── */
/* =====================================================================
   bouwstenen.css — Fase 0: stijl van de gedeelde bouwstenen (bs-*).
   Bouwt uitsluitend op casa360-tokens.css. Diepte = 1px-lijnen en
   paneel-tinten; geen blauw, schaduw of gradient. Zie WERKPLAN fase 0.
===================================================================== */

/* ---------- Knoppen ---------- */
.btn { font-family: var(--font-ui); font-weight: 700; font-size: .84rem; border-radius: var(--radius); padding: 10px 16px; border: var(--lijndikte) solid transparent; cursor: pointer; transition: background var(--overgang), color var(--overgang), border-color var(--overgang); }
.btn--primary { background: var(--c-groen); color: #fff; }
.btn--primary:hover { background: var(--c-groen-d); }
.btn--primary:disabled { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; border-color: var(--c-lijn); }
.btn--stil { background: #fff; color: var(--c-ink); border-color: var(--c-lijn-2); }
.btn--stil:hover { background: var(--c-creme); }
.btn--donker { background: var(--c-ink); color: #fff; }
.btn--donker:hover { background: #000; }
.btn--klein { padding: 6px 11px; font-size: .7rem; }
/* Vangnet: een knop zónder kleurvariant viel terug op het grijs van de
   browser (buiten de tokenset) — zichtbaar op elke "Exporteer lijst"-knop.
   Kale .btn (ook mét .btn--klein) krijgt daarom de stille look. */
.btn:not(.btn--primary):not(.btn--stil):not(.btn--donker):not(.btn--rood) {
  background: #fff; color: var(--c-ink); border-color: var(--c-lijn-2); }
.btn:not(.btn--primary):not(.btn--stil):not(.btn--donker):not(.btn--rood):hover {
  background: var(--c-creme); }
.btn:not(.btn--primary):not(.btn--stil):not(.btn--donker):not(.btn--rood):disabled {
  background: var(--c-paneel); color: var(--c-ink-3); border-color: var(--c-lijn); cursor: not-allowed; }
/* Rood is blokkadekleur: alleen op de bevestigknop van een onomkeerbare stap. */
.btn--rood { background: var(--c-rood); color: #fff; border-color: var(--c-rood); }
.btn--rood:hover { background: var(--c-rood-d); }

/* ---------- Bevestigdialoog (BS.bevestig) ---------- */
.bs-bevestig__tekst { margin: 0 0 4px; font-size: .82rem; line-height: 1.55; color: var(--c-ink-2); }

/* ---------- Statuschip-variant (aanvulling op tokens) ---------- */
.chip--groen-licht { background: var(--c-sage-t); color: #6B6B4E; }

/* ---------- 0.1 KPI-strip: zie .bs-stats/.bs-stat verderop (vaste stijl
   voor elke module — witte stat-tegels, norm module 1.1). ---------- */

/* ---------- 0.1 werkbalk: zoeken + sorteren ---------- */
.bs-werkbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 10px; }
.bs-zoek { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 8px 12px; }
.bs-zoek:focus-within { border-color: var(--c-groen); }
.bs-zoek__icoon { color: var(--c-ink-3); display: inline-flex; }
.bs-zoek input { border: 0; background: transparent; font-family: var(--font-ui); font-size: .84rem; width: 100%; color: var(--c-ink); }
/* Focus-ring nooit uitzetten (CLAUDE.md) — de globale :focus-visible geldt. */
.bs-sorteer { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bs-sorteer__label { font-size: .74rem; color: var(--c-ink-3); }
.bs-sort { font-family: var(--font-ui); font-size: .76rem; font-weight: 700; padding: 7px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-3); cursor: pointer; transition: border-color var(--overgang), background var(--overgang), color var(--overgang); }
.bs-sort:hover { background: var(--c-creme); }
.bs-sort.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-ink); }
.bs-telling { font-size: .74rem; color: var(--c-ink-3); margin: 0; padding: 0 20px 8px; }

/* ---------- 0.1 bulk-balk ---------- */
.bs-bulk { display: flex; align-items: center; gap: 12px; padding: 11px 20px; background: var(--c-ink); color: var(--c-creme); flex-wrap: wrap; }
.bs-bulk__label { font-weight: 700; font-size: .8rem; }
.bs-bulk__acties { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bs-bulk__knop { padding: 7px 14px; border-radius: 8px; border: var(--lijndikte) solid var(--c-ink-3); background: transparent; color: var(--c-creme); font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; transition: background var(--overgang); }
.bs-bulk__knop:hover { background: var(--c-ink-2); }
.bs-bulk__knop--wit { background: var(--c-creme); color: var(--c-ink); border-color: transparent; }
.bs-bulk__knop--wit:hover { background: #fff; }
.bs-bulk__knop--stil { border-color: transparent; color: var(--c-ink-3); }

/* ---------- 0.1 kolomkop + grid-rijen (kolommen via --bs-kolommen) ---------- */
.bs-lkop, .bs-lrij { display: grid; grid-template-columns: var(--bs-kolommen, 1fr); gap: 10px; align-items: center; padding: 9px 20px; }
.bs-lkop { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); padding-bottom: 8px; }
.bs-lrij { border-top: var(--lijndikte) solid var(--c-lijn); transition: background var(--overgang); }
.bs-lrij:hover { background: var(--c-creme); }
.bs-lrij.is-gekozen { background: var(--c-groen-t); }

.bs-checkbox { width: 17px; height: 17px; flex: none; border-radius: 5px; border: 2px solid var(--c-lijn-2); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bs-checkbox.is-checked { background: var(--c-groen); border-color: var(--c-groen); }

/* rij-cellen */
.bs-nr { font-size: .72rem; color: var(--c-groen-d); background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0 0 0 8px; border-left: 3px solid var(--c-groen); white-space: nowrap; }
.bs-nr:hover { color: var(--c-ink); }
.bs-entiteit { justify-self: start; font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; color: #fff; background: var(--c-groen); }
.bs-entiteit--casa365 { background: var(--c-terra-t); }
.bs-klant { font-family: var(--font-ui); font-weight: 700; font-size: .82rem; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; color: var(--c-ink); }
.bs-klant:hover { color: var(--c-groen-d); }
.bs-adres, .bs-pakket { color: var(--c-ink-2); font-size: .78rem; }
.bs-bedrag { font-weight: 800; font-size: .84rem; white-space: nowrap; }
.bs-geldig { color: var(--c-ink-3); font-size: .72rem; white-space: nowrap; }
.bs-status { justify-self: start; }

/* ---------- 0.1 paginering + lege staat + uitleg ---------- */
.bs-paging { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: var(--lijndikte) solid var(--c-lijn); }
.bs-paging__label { font-size: .76rem; color: var(--c-ink-3); }
.bs-paging__knoppen { display: flex; gap: 8px; }
.bs-paging__knop { padding: 8px 16px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; color: var(--c-groen-d); cursor: pointer; transition: background var(--overgang); }
.bs-paging__knop:hover:not(:disabled) { background: var(--c-creme); }
.bs-paging__knop:disabled { color: var(--c-ink-3); cursor: not-allowed; }
.bs-leeg-rij { text-align: center; color: var(--c-ink-3); padding: 28px 20px; font-size: .82rem; border-top: var(--lijndikte) solid var(--c-lijn); }
.bs-uitleg { margin-top: 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--c-groen-t); font-size: .78rem; line-height: 1.55; color: var(--c-ink-2); }
.bs-uitleg strong { color: var(--c-ink); }

/* ---------- 0.2 poorten ---------- */
.bs-poort { display: flex; align-items: flex-start; gap: 8px; border-radius: var(--radius); padding: 10px 12px; font-size: .8rem; line-height: 1.4; }
.bs-poort--blok { background: var(--c-rood-t); color: var(--c-rood); border: var(--lijndikte) solid var(--c-rood); }
.bs-poort--ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.bs-poort--wacht { background: var(--c-amber-t); color: var(--c-amber); border: var(--lijndikte) solid var(--c-amber); }
.bs-poort--info { background: var(--c-paneel); color: var(--c-ink-2); }
.bs-poort__icoon { flex: 0 0 auto; }

/* ---------- 0.3 auditlog ---------- */
.bs-sectie__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bs-sectie__meta { color: var(--c-ink-3); font-size: .68rem; }
.bs-audit { padding: 2px 0; }
.bs-audit__rij { display: flex; align-items: baseline; gap: 12px; padding: 9px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.bs-audit__rij:last-child { border-bottom: 0; }
.bs-audit__tijd { color: var(--c-ink-3); font-size: .68rem; flex: 0 0 auto; width: 62px; }
.bs-audit__actie { font-weight: 700; }
.bs-audit__detail { color: var(--c-ink-3); font-weight: 400; font-family: var(--font-mono); font-size: .68rem; }
.bs-audit__door { margin-left: auto; color: var(--c-ink-2); font-size: .72rem; text-align: right; }

/* ---------- 0.4 gebouwcontext (BAG) ---------- */
.bs-woning { padding: 16px 18px; }
.bs-woning__kop { display: flex; align-items: center; gap: 14px; }
.bs-woning__badge { width: 42px; height: 42px; border-radius: var(--radius); background: var(--c-groen-t); display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; }
.bs-woning__adres { font-weight: 800; font-size: 1rem; }
.bs-woning__klant { color: var(--c-ink-2); font-size: .82rem; }
.bs-woning__bag { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.bs-woning__bag .mono { font-size: .72rem; color: var(--c-ink-2); }
.bs-woning__kenmerken { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; color: var(--c-ink); }
.bs-woning__kenmerken em { font-style: normal; color: var(--c-ink-3); margin-right: 5px; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- 0.5 modaal ---------- */
.bs-modal-laag { position: fixed; inset: 0; background: rgba(51, 50, 46, .38); display: grid; place-items: center; z-index: 60; padding: 24px; }
.bs-modal { width: 100%; max-width: 520px; padding: 0; overflow: hidden; }
.bs-modal--smal { max-width: 440px; }
.bs-modal__kop { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.bs-modal__x { background: transparent; border: 0; cursor: pointer; color: var(--c-ink-3); font-size: .9rem; }
.bs-modal__x:hover { color: var(--c-ink); }
.bs-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.bs-modal__voet { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); }

/* ---------- Stat-tegel — dé KPI-huisstijl voor elke module (norm 1.1):
   witte kaart, label · grote waarde · subregel; accent op de waarde;
   optioneel donker; klikbaar als filter wanneer de module dat wil. ---------- */
/* Blauw 13-08 (prompt §2): witte KPI-kaart met een gekleurde icoon-bol
   links — de border-top-streep van Zand is vervallen; het accent kleurt
   voortaan de bol, niet de rand of het cijfer. */
.bs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bs-stat { display: flex; align-items: center; gap: 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; }
.bs-stat__bol { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; background: var(--accent-t); color: var(--accent); }
.bs-stat--groen .bs-stat__bol { background: var(--goed-t); color: var(--goed-d); }
.bs-stat--amber .bs-stat__bol { background: var(--let-t); color: var(--let-d); }
.bs-stat--terra .bs-stat__bol { background: var(--accent-t); color: var(--accent); }   /* afbouw-alias */
.bs-stat__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
button.bs-stat { cursor: pointer; text-align: left; font-family: var(--font-ui); transition: border-color var(--overgang); }
button.bs-stat:hover { border-color: var(--c-lijn-2); }
.bs-stat.is-actief { border-color: var(--accent); }
.bs-stat__label { font-size: .72rem; font-weight: 700; color: var(--c-ink-2); }
.bs-stat__waarde { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.bs-stat__sub { font-size: .66rem; color: var(--c-ink-3); }
.bs-stat--geld .bs-stat__waarde { color: var(--ink); }   /* geldbedragen zijn --ink */
.bs-stat--donker { background: var(--c-ink); border-color: var(--c-ink); }
.bs-stat--donker .bs-stat__bol { background: rgba(255,255,255,.12); color: #fff; }
.bs-stat--donker .bs-stat__waarde, .bs-stat--donker.bs-stat--geld .bs-stat__waarde { color: var(--c-creme); }
.bs-stat--donker .bs-stat__label, .bs-stat--donker .bs-stat__sub { color: var(--c-lijn-2); }

/* ---------- BS.avatar — initialen-cirkel, vaste kleur per naam ---------- */
.bs-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 800 .64rem var(--font-ui); color: #fff; flex: none; vertical-align: middle; }
.bs-avatar--klein { width: 22px; height: 22px; font-size: .55rem; }
.bs-avatar--1 { background: var(--avatar-1); } .bs-avatar--2 { background: var(--avatar-2); }
.bs-avatar--3 { background: var(--avatar-3); } .bs-avatar--4 { background: var(--avatar-4); }
.bs-avatar--5 { background: var(--avatar-5); } .bs-avatar--6 { background: var(--avatar-6); }

/* ---------- BS.wizard — genummerde bollen met verbindingslijn ---------- */
.bs-wizard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.bs-wizard__stap { display: inline-flex; align-items: center; gap: 8px; }
.bs-wizard__bol { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 800 .7rem var(--font-ui); font-style: normal; background: var(--c-vlak); color: var(--c-ink-2);
  border: var(--lijndikte) solid var(--c-lijn-2); flex: none; }
.bs-wizard__label { font-size: .76rem; font-weight: 700; color: var(--c-ink-2); }
.bs-wizard__stap.is-actief .bs-wizard__bol { background: var(--accent); border-color: var(--accent); color: #fff; }
.bs-wizard__stap.is-actief .bs-wizard__label { color: var(--c-ink); }
.bs-wizard__stap.is-klaar .bs-wizard__bol { background: var(--goed-t); border-color: var(--goed); color: var(--goed-d); }
.bs-wizard__lijn { flex: 1; min-width: 18px; height: 2px; background: var(--c-lijn); border-radius: 1px; }

/* ---------- Filterchip (donker als actief) ---------- */
.bs-chip { padding: 8px 14px; border-radius: 10px; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; white-space: nowrap; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); transition: background var(--overgang), color var(--overgang); }
.bs-chip.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.bs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- Schakelaar ---------- */
.bs-switch { width: 42px; height: 24px; flex: none; border-radius: var(--radius-pill); cursor: pointer; position: relative; border: 0; background: var(--c-lijn-2); transition: background var(--overgang); padding: 0; }
.bs-switch.is-aan { background: var(--c-groen); }
.bs-switch span { position: absolute; top: 2.5px; left: 2.5px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform var(--overgang); }
.bs-switch.is-aan span { transform: translateX(18px); }

/* ---------- Detail-drawer rechts — vaste huisstijl (norm 1.1) ---------- */
.bs-drawer-laag { position: fixed; inset: 0; background: rgba(51, 50, 46, .38); z-index: 60; display: flex; justify-content: flex-end; }
.bs-drawer { width: min(480px, 92vw); height: 100%; background: var(--c-creme); border-left: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; overflow: hidden; }
.bs-drawer__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: #fff; }
.bs-drawer__kop h2 { margin: 3px 0 4px; font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-drawer__sub { font-size: .72rem; color: var(--c-ink-3); }
.bs-drawer__body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.bs-drawer__voet { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-top: var(--lijndikte) solid var(--c-lijn); background: #fff; }
.bs-drawer__feiten { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bs-feit { display: inline-flex; flex-direction: column; gap: 1px; font-size: .8rem; font-weight: 700; }
.bs-feit em { font-style: normal; font-family: var(--font-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }

/* ---------- 0.5 beheerpatroon: vijf tabs ---------- */
.bs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.bs-tab { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); cursor: pointer; transition: background var(--overgang), color var(--overgang); }
.bs-tab.is-actief { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }

/* ---- 0.8 formulier-velden (norm "werkbaar", 14-07-2026) ----
   Grid voor twee kolommen; .bs-veld--breed spant de volle breedte. */
.bs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bs-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-veld--breed { grid-column: 1 / -1; }
.bs-veld > span { font: 600 .66rem var(--font-ui); color: var(--c-ink-2); }
.bs-veld > span b { color: var(--c-terra); font-weight: 700; }
.bs-veld input, .bs-veld select, .bs-veld textarea {
  box-sizing: border-box; width: 100%; padding: 9px 11px;
  border: 1.5px solid var(--c-lijn-2); border-radius: 9px;
  font: 500 .78rem var(--font-ui); color: var(--c-ink); background: #fff;
}
.bs-veld textarea { resize: vertical; }
.bs-veld em { font: 400 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }

/* ---- 0.9 invoer-lat: inline verplicht-validatie (rood = blokkade) ---- */
.bs-veld [aria-invalid="true"] { border-color: var(--c-rood); background: var(--c-rood-t); }
.bs-veld .bs-veld-fout { font: 600 .6rem var(--font-ui); font-style: normal; color: var(--c-rood); }

/* ---- 0.9 zoek-kiezer (relatie/opdracht/leverancier) ---- */
.bs-kz-zoek { position: relative; }
.bs-kz-icoon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); font-size: .82rem; pointer-events: none; }
.bs-kz-zoek input[data-kz-zoek] { padding-left: 30px; }
.bs-kz-res {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: var(--radius); box-shadow: var(--schaduw-tegel);
  overflow: hidden; max-height: 230px; overflow-y: auto;
}
.bs-kz-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn);
  font: 500 .74rem var(--font-ui); color: var(--c-ink);
}
.bs-kz-item:last-child { border-bottom: 0; }
.bs-kz-item:hover { background: var(--c-creme); }
.bs-kz-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bs-kz-item__t small { font: 400 .62rem var(--font-ui); color: var(--c-ink-3); }
.bs-kz-item__tag { flex: none; font-size: .56rem; color: var(--c-groen-d); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill); padding: 2px 8px; background: var(--c-creme); }
.bs-kz-leeg { padding: 10px 12px; font: 400 .68rem var(--font-ui); color: var(--c-ink-3); }
.bs-kz-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: var(--lijndikte) solid var(--c-groen); background: var(--c-groen-t);
  border-radius: var(--radius); padding: 7px 8px 7px 12px;
}
.bs-kz-chip__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; font: 700 .74rem var(--font-ui); color: var(--c-groen-d); }
.bs-kz-chip__t small { font: 500 .62rem var(--font-ui); color: var(--c-ink-2); }
.bs-kz-chip__x { flex: none; border: 0; background: none; cursor: pointer; font-size: .68rem; color: var(--c-ink-2); padding: 2px 4px; border-radius: 6px; }
.bs-kz-chip__x:hover { color: var(--c-rood); }
.bs-form-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bs-form-kop h2 { margin: 3px 0 0; font-size: 1.05rem; }
.bs-form-kop p { margin: 7px 0 0; font: 400 .76rem/1.55 var(--font-ui); color: var(--c-ink-2); max-width: 54ch; }
.bs-form-voet { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }

/* In een modaal krijgt het bs-form-patroon zijn vaste binnenmarge en een
   verankerde voet (crème balk, knoppen rechts) — stijlfix 14-07-2026. */
.bs-modal > .bs-form-kop { padding: 20px 22px 0; }
.bs-modal > .bs-form { padding: 0 22px; }
.bs-modal > .bs-form-voet {
  justify-content: flex-end; margin-top: 18px; padding: 14px 22px;
  background: var(--c-creme);
}
.bs-modal > .bs-form-voet > span, .bs-modal > .bs-form-voet > em {
  margin-right: auto; font-size: .68rem; color: var(--c-ink-3);
}

/* ---- 0.8 Custom filters (Gripp-norm) ---- */
.bs-flt-tel { font-size: 11px; opacity: .7; margin-left: 2px; }
.bs-flt-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--c-groen-d); border-radius: 99px; overflow: hidden; }
.bs-flt-chip__naam { border: 0; background: color-mix(in srgb, var(--c-groen-d) 10%, var(--c-paneel)); color: var(--c-ink); font: inherit; font-weight: 600; font-size: 13px; padding: 7px 12px; cursor: pointer; }
.bs-flt-chip__x { border: 0; border-left: 1px solid var(--c-groen-d); background: none; color: var(--c-ink); font: inherit; padding: 0 10px; cursor: pointer; }
.bs-flt-chip__naam:hover, .bs-flt-chip__x:hover { background: color-mix(in srgb, var(--c-groen-d) 18%, var(--c-paneel)); }
.bs-flt-sectie { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c-lijn); }
.bs-flt-sectie:last-child { border-bottom: 0; }
.bs-flt-rij { display: grid; grid-template-columns: 1.1fr 0.9fr 1.2fr 32px; gap: 8px; align-items: center; }
.bs-flt-rij select, .bs-flt-rij input { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--c-paneel); color: var(--c-ink); min-width: 0; }
/* Documentkluis-inkijk (bonnen, CV's): iframe in het modaal */
.bs-doc-preview { min-height: 420px; }
.bs-doc-preview iframe { width: 100%; height: 60vh; border: 1px solid var(--c-lijn); border-radius: 12px; background: var(--c-paneel); }

/* Multi-select bij keuze-velden: chips met checkbox (OF binnen het veld) */
.bs-flt-rij--multi { grid-template-columns: 1.1fr 0.9fr 32px; }
.bs-flt-rij--multi .bs-flt-multi { grid-column: 1 / -2; }
.bs-flt-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-flt-optie { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 5px 12px; font-size: 13px; cursor: pointer; background: var(--c-paneel); color: var(--c-ink); }
.bs-flt-optie input { accent-color: var(--c-groen-d); margin: 0; }
.bs-flt-optie.is-aan { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen-d) 10%, var(--c-paneel)); font-weight: 600; }
.bs-flt-optie:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 1px; }
.bs-flt-del { border: 1px solid var(--c-lijn); border-radius: 12px; background: none; color: var(--c-ink-2); cursor: pointer; height: 34px; }
.bs-flt-del:hover { color: var(--c-rood); border-color: var(--c-rood); }
.bs-flt-add { align-self: flex-start; }
.bs-flt-modus { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.bs-flt-modus label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.bs-flt-opgeslagen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--c-lijn); border-radius: 12px; }
.bs-flt-opgeslagen__info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.bs-flt-opgeslagen__info span { color: var(--c-ink-2); font-size: 12px; }
.bs-flt-opgeslagen__acties { display: flex; gap: 6px; }
.bs-flt-bewaar .btn--primary { align-self: flex-start; }

/* ---- 0.9 klikbare referentie + universele dossier-drawer (18-07-2026) ---- */
.bs-ref { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--c-lijn-2); text-underline-offset: 3px; text-align: left; }
.bs-ref:hover { color: var(--c-groen-d); text-decoration-color: var(--c-groen); }
.bs-ref--opdracht, .bs-ref--factuur, .bs-ref--case { font-family: var(--font-mono); }

.dos-laden { padding: 18px; font: 400 .78rem var(--font-ui); color: var(--c-ink-3); }
.dos-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.dos-rij { display: flex; flex-direction: column; gap: 2px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; background: #fff; }
.dos-rij span { font: 600 .58rem var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.dos-rij b { font: 800 .88rem var(--font-mono); color: var(--c-ink); }
.dos-kaartje { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font: 500 .76rem var(--font-ui); color: var(--c-ink); }
.dos-kaartje:hover { border-color: var(--c-groen-d); background: var(--c-creme); }
.dos-kaartje.is-stil { cursor: default; }
.dos-kaartje.is-stil:hover { border-color: var(--c-lijn); background: #fff; }
.dos-kaartje > div { display: flex; align-items: center; gap: 8px; }
.dos-kaartje span { font-size: .68rem; color: var(--c-ink-2); }
.dos-event { display: flex; gap: 10px; padding: 7px 0; font: 500 .74rem var(--font-ui); }
.dos-event__dot { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--c-groen); margin-top: 6px; }
.dos-event__meta { font-size: .6rem; color: var(--c-ink-3); }
.dos-actie { margin-top: 14px; }

/* =====================================================================
   0.9 Formuliermotor — één stijl voor alle formulieren in het systeem.
   Secties met tussenkop, tweekoloms raster, vaste voet met teller.
===================================================================== */
.bs-form__sectie { grid-column: 1 / -1; }
.bs-form__sectie + .bs-form__sectie { margin-top: 16px; padding-top: 15px; border-top: var(--lijndikte) solid var(--c-lijn); }
.bs-form__sectiekop { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; }
.bs-form__sectiekop em { font: 400 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.bs-form__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Voet: teller links, knoppen rechts — overal dezelfde volgorde. */
.bs-form-voet { justify-content: space-between; }
.bs-form__knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-form__teller { font: 600 .68rem var(--font-ui); color: var(--c-terra-d); }
.bs-form__teller.is-klaar { color: var(--c-groen-d); }

/* Bedragveld: het €-teken staat vast vóór het invoervak. */
.bs-veld--bedrag { position: relative; }
.bs-veld__pre { position: absolute; left: 11px; top: 26px; font: 700 .78rem var(--font-mono); color: var(--c-ink-3); pointer-events: none; }
.bs-veld--bedrag input { padding-left: 26px; }

/* Aanvinkvakje: label naast het vakje in plaats van erboven. */
.bs-veld--vink { flex-direction: row; align-items: flex-start; gap: 9px; padding: 9px 0; }
.bs-veld--vink input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--c-groen); }
.bs-veld--vink > span { font-size: .76rem; color: var(--c-ink); }

/* Radio- en meerkeuzegroep: rijen die als geheel klikbaar zijn. */
.bs-veld__kop { font: 600 .66rem var(--font-ui); color: var(--c-ink-2); display: block; margin-bottom: 7px; }
.bs-keuzerijen { display: grid; gap: 6px; }
.bs-keuzerij { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff;
  transition: border-color 160ms ease, background 160ms ease; }
.bs-keuzerij:hover { border-color: var(--c-groen); background: var(--c-creme); }
.bs-keuzerij:has(input:checked) { border-color: var(--c-groen); background: var(--c-groen-t); }
.bs-keuzerij input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--c-groen); }
.bs-keuzerij strong { display: block; font: 600 .76rem var(--font-ui); }
.bs-keuzerij em { display: block; font: 400 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 1px; }
.bs-veld--keuze.is-fout .bs-keuzerij { border-color: var(--c-rood); }
.bs-veld__fout { display: block; font: 600 .6rem var(--font-ui); font-style: normal; color: var(--c-rood); }
.bs-veld__fout:empty { display: none; }

/* ---- Werkblad: lange formulieren rechts, in de stijl van de detail-drawer.
   Kop en voet staan vast; alleen het middendeel scrolt. ---- */
.bs-werkblad-laag { position: fixed; inset: 0; z-index: 70; background: rgba(31, 30, 28, .34);
  display: flex; justify-content: flex-end; animation: bs-vervaag 160ms ease; }
.bs-werkblad { width: min(680px, 94vw); height: 100%; background: var(--c-creme); display: flex; flex-direction: column;
  border-left: var(--lijndikte) solid var(--c-lijn); box-shadow: var(--schaduw-tegel-hover);
  animation: bs-schuifin 180ms cubic-bezier(.22, .61, .36, 1); }
.bs-werkblad .bs-form-kop { padding: 22px 26px 15px; margin: 0; background: #fff; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.bs-werkblad__body { flex: 1; overflow-y: auto; padding: 20px 26px; }
.bs-werkblad .bs-form-voet { margin: 0; padding: 14px 26px; border-top: var(--lijndikte) solid var(--c-lijn);
  background: #fff; }
@keyframes bs-schuifin { from { transform: translateX(26px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes bs-vervaag { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bs-werkblad, .bs-werkblad-laag { animation: none; }
}
@media (max-width: 640px) {
  .bs-form__raster { grid-template-columns: 1fr; }
  .bs-werkblad { width: 100%; }
}
.bs-veld--bestand input[type="file"] { font: 500 .72rem var(--font-ui); padding: 9px 11px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); cursor: pointer; }
.bs-veld--bestand input[type="file"]::file-selector-button { font: 700 .68rem var(--font-ui); margin-right: 10px;
  padding: 5px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px;
  background: var(--c-creme); color: var(--c-ink-2); cursor: pointer; }
/* Voet mét teller: teller links, knoppen rechts (ook bij bestaande formulieren
   die nog geen .bs-form__knoppen-wikkel hebben). */
.bs-form-voet--teller { justify-content: flex-end; }
.bs-form-voet--teller .bs-form__teller { margin-right: auto; }
/* Tweede voetvariant (bs-modal__voet) krijgt dezelfde teller-uitlijning. */
.bs-modal__voet.bs-form-voet--teller { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.bs-modal__voet.bs-form-voet--teller .bs-form__teller { margin-right: auto; }
/* Leesregel in een formulier: berekende uitkomst, geen invoer. */
.bs-veld--toon { background: var(--c-paneel); border-radius: var(--radius); padding: 10px 13px; gap: 2px; }
.bs-veld--toon > span { font: 600 .62rem var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.bs-veld--toon > strong { font: 700 .82rem var(--font-ui); color: var(--c-ink); }

/* Verzendlijst: eerst zien wát er weggaat, dan pas versturen (norm
   19-07-2026). Het vinkje breekt bewust de spierherinnering van
   doorklikken — je moet de lijst gezien hebben. */
.bs-vzsub { margin: 6px 0 0; font: 400 .78rem/1.55 var(--font-ui); color: var(--c-ink-2); max-width: 68ch; }
.bs-vzlijst { max-height: 320px; overflow-y: auto; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); background: var(--c-creme); margin: 14px 0 0; }
.bs-vzrij { display: grid; grid-template-columns: 1.1fr 1.6fr auto 1fr; gap: 12px; align-items: center;
  padding: 8px 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.bs-vzrij:first-child { border-top: 0; }
.bs-vzrij--kop { position: sticky; top: 0; background: var(--c-paneel); font-size: .58rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.bs-vzrij__wie { font-weight: 700; }
.bs-vzrij__wat { color: var(--c-ink-2); }
.bs-vzrij__bedrag { text-align: right; }
.bs-vzrij__extra { font-size: .68rem; color: var(--c-ink-3); }
.bs-vzleeg, .bs-vzmeer { padding: 12px 14px; font-size: .76rem; color: var(--c-ink-3);
  border-top: var(--lijndikte) solid var(--c-lijn); }
.bs-vzvoet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 2px 0; font-size: .82rem; }
.bs-vzvoet__extra { font-size: .7rem; color: var(--c-ink-3); margin-left: auto; }
.bs-vzcheck { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0;
  padding: 11px 13px; border-radius: var(--radius); background: var(--c-amber-t);
  font-size: .78rem; line-height: 1.5; cursor: pointer; }
.bs-vzcheck input { margin-top: 2px; flex: none; }

/* 0.10 · uniforme schermtoestanden (R1 bouwplan, EPIC 2) */
.bs-toestand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--c-ink-2); }
.bs-toestand strong { font-size: .88rem; color: var(--c-ink); }
.bs-toestand span { font-size: .78rem; max-width: 52ch; line-height: 1.5; }
.bs-toestand--laden { flex-direction: row; justify-content: center; }
.bs-toestand__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-lijn-2); border-top-color: var(--c-groen); animation: bs-spin 900ms linear infinite; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bs-toestand__spin { animation: none; } }
.bs-toestand--fout strong { color: var(--c-rood); }
.bs-verouderd { font-size: .68rem; color: var(--c-amber); }

/* ---- Klantcontext (klantkaart v2, 31-07): gele memo + "Loopt nu" ----
   De memo is strikt intern (memo-geel is exclusief voor interne
   notities); de strip reist mee in dossier-drawer en configurator. */
.kc-host:empty { display: none; }
.kc-host--koz { max-width: 1240px; margin: 10px auto 0; padding: 0 32px; display: flex; flex-direction: column; gap: 8px; }
.kc-memo { display: flex; flex-direction: column; gap: 4px; background: var(--c-memo);
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.kc-memo__kop { font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-2); }
.kc-memo__tekst { font-size: .8rem; color: var(--c-ink); }
.kc-memo__bewerk { align-self: flex-start; border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: .66rem; color: var(--c-ink-2); text-decoration: underline; }
.kc-memo__bewerk:hover { color: var(--c-ink); }
.kc-memo--compact { margin: 0; }
.kc-zaken { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.kc-zaken__kop { font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-3); }
.kc-zaken--compact { flex-direction: row; flex-wrap: wrap; margin: 0 0 6px; }
.kc-zaak { display: flex; align-items: center; gap: 8px; text-align: left; text-decoration: none;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: #fff;
  padding: 7px 12px; cursor: pointer; font-family: var(--font-ui); font-size: .74rem; color: var(--c-ink);
  max-width: 100%; min-width: 0; box-sizing: border-box;
  transition: border-color var(--overgang); }
.kc-zaak:hover { border-color: var(--c-groen); }
.kc-zaak b { font-size: .68rem; white-space: nowrap; }
.kc-zaak__ic { color: var(--c-ink-3); }
.kc-zaak__label { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.kc-zaak__st { margin-left: auto; color: var(--c-groen-d); font-weight: 700; font-size: .68rem; white-space: nowrap; }
.kc-zaken--compact .kc-zaak { padding: 5px 10px; }
.rel-memoknop { align-self: flex-start; margin: 8px 0; }
@media (prefers-reduced-motion: reduce) { .kc-zaak { transition: none; } }

/* ---- Staafgroei-animatie (vaste stijl, akkoord Michiel 01-08) ----
   Elke staaf in een diagram groeit bij het openen van 0 naar zijn
   waarde: 900ms met zachte uitloop, rijen 110ms na elkaar via
   --groei-i. Bewust langer dan de 150-180ms-interactienorm — dit is
   een eenmalige data-onthulling, geen UI-overgang. Bewegingsarm
   ingesteld? Dan staan de staafjes direct op volle breedte. */
@keyframes bsGroei { from { width: 0; } }
@keyframes bsGroeiV { from { height: 0; } }
.bs-groei { animation: bsGroei 900ms cubic-bezier(.22, .8, .36, 1) both; animation-delay: calc(var(--groei-i, 0) * 110ms); }
.bs-groei-v { animation: bsGroeiV 900ms cubic-bezier(.22, .8, .36, 1) both; animation-delay: calc(var(--groei-i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) { .bs-groei, .bs-groei-v { animation: none; } }

/* ---- 0.10 Fotokijker (SUB A7) — doorbladeren zonder de werkbon te openen.
   Alleen tokens; de overlay gebruikt --schaduw-laag, net als de pdf-viewer. ---- */
.bs-fotokijker-laag { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(20, 20, 20, .52); padding: 24px; }
.bs-fotokijker { width: min(680px, 100%); max-height: 90vh; overflow: auto; background: var(--c-vlak);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); box-shadow: var(--schaduw-laag); }
.bs-fotokijker__kop { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.bs-fotokijker__kop .kicker { font: 700 .64rem var(--font-mono); letter-spacing: .06em; color: var(--c-ink-2); }
.bs-fotokijker__sluit { border: 0; background: transparent; font-size: .9rem; color: var(--c-ink-2); cursor: pointer;
  border-radius: var(--radius-klein); padding: 2px 8px; }
.bs-fotokijker__sluit:hover { color: var(--c-ink); }
.bs-fotokijker__sluit:focus-visible, .bs-fotokijker__pijl:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.bs-fotokijker__beeld { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 16px; }
.bs-fotokijker__pijl { height: 44px; border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  border-radius: var(--radius-klein); font-size: 1.2rem; line-height: 1; color: var(--c-ink); cursor: pointer; }
.bs-fotokijker__pijl:disabled { opacity: .35; cursor: not-allowed; }
.bs-fotokijker__vlak { min-height: 168px; display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: 20px; text-align: center; border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: var(--radius-klein);
  background: var(--c-paneel); }
.bs-fotokijker__fase { font: 700 .78rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-2); }
.bs-fotokijker__geen { max-width: 42ch; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }

.bs-fotokijker__feiten { display: grid; grid-template-columns: 132px 1fr; gap: 6px 14px;
  margin: 0; padding: 0 16px 16px; }
.bs-fotokijker__feiten dt { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.bs-fotokijker__feiten dd { margin: 0; font: 600 .72rem var(--font-ui); color: var(--c-ink); }

/* ═══ Bladervoet (N3a) ══════════════════════════════════════════════
   Onder elke lijst die niet in één keer past. Hij toont wat er staat én
   wat er is: «100 van 2.605» in plaats van een lijst die compleet lijkt.
   Een lijst die stil bij honderd ophoudt is erger dan een lange lijst,
   want er is niets aan te zien. */
.bs-blader {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--kaart);
}
.bs-blader__tel { font-size: 13px; color: var(--ink2); }
.bs-blader__klaar { font-size: 13px; color: var(--ink3); font-style: italic; }

/* RE18 · de woning in beeld */
.bs-wv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.bs-wv.is-compact { grid-template-columns: 160px minmax(0, 1fr); gap: 10px; }
.bs-wv.is-laden, .bs-wv.is-leeg { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink2); }
.bs-wv__foto { position: relative; width: 300px; height: 200px; overflow: hidden; border-radius: var(--radius); background: var(--paneel-2, var(--c-paneel-2)); border: var(--lijndikte, 1px) solid var(--lijn, var(--c-lijn)); }
.bs-wv__foto.is-compact { width: 160px; height: 106px; }
.bs-wv__mozaiek { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.bs-wv__mozaiek img { position: absolute; width: 256px; height: 256px; left: calc(var(--dx) * 256px - var(--wv-px)); top: calc(var(--dy) * 256px - var(--wv-py)); display: block; }
.bs-wv__foto.is-compact .bs-wv__mozaiek { transform: scale(.55); }
.bs-wv__punt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--stop); font-size: 1.1rem; text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.bs-wv__attr { position: absolute; right: 4px; bottom: 2px; font-size: .55rem; color: #fff; background: rgba(20,23,26,.55); padding: 1px 5px; border-radius: 4px; }
.bs-wv__foto.is-leeg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink3, var(--c-ink-3)); font-size: .74rem; }
.bs-wv__foto.is-leeg span { font-size: 1.6rem; }
.bs-wv__rest { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bs-wv__adres { font-weight: 800; font-size: .92rem; }
.bs-wv.is-compact .bs-wv__adres { font-size: .8rem; }
.bs-wv__kenmerken { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bs-wv__k { display: inline-flex; flex-direction: column; font-size: .74rem; }
.bs-wv__k .kicker { font-size: .56rem; }
.bs-wv__deuren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bs-wv.is-compact .bs-wv__deuren { gap: 6px; }
.bs-wv__deur { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink, var(--c-ink));
  border: var(--lijndikte, 1px) solid var(--lijn-2, var(--c-lijn-2)); border-radius: var(--radius); padding: 10px 8px; background: #fff;
  transition: background 150ms ease, border-color 150ms ease; }
.bs-wv__deur:hover { background: var(--paneel-2, var(--c-paneel-2)); border-color: var(--ink, var(--c-ink)); }
.bs-wv__deur:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bs-wv__deur[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.bs-wv__deur.has-beeld { padding: 0; overflow: hidden; }
.bs-wv__deur img { width: 100%; height: 70px; object-fit: cover; display: block; }
.bs-wv__glyph { font-size: 1.3rem; line-height: 1; }
.bs-wv.is-compact .bs-wv__glyph { font-size: 1rem; }
.bs-wv.is-compact .bs-wv__deur { padding: 6px 4px; }
.bs-wv__lbl { text-align: center; font-size: .7rem; line-height: 1.25; }
.bs-wv__lbl b { display: block; font-size: .72rem; }
.bs-wv__lbl small { color: var(--ink3, var(--c-ink-3)); font-size: .62rem; }
/* in een smalle kolom (klantdossier) staat de foto boven en de rest eronder */
[data-wv] { container-type: inline-size; display: block; min-width: 0; }
@container (max-width: 560px) { .bs-wv { grid-template-columns: 1fr; } .bs-wv__foto:not(.is-compact) { width: 100%; height: 190px; } }
@media (max-width: 700px) { .bs-wv { grid-template-columns: 1fr; } .bs-wv__foto { width: 100%; } }

/* VB1 · verzendbevestiging (besluit 51): samenvatting vóór elke verzending naar de klant */
.bs-vb { display: grid; gap: 12px; padding: 4px 22px 8px; }
.bs-vb__aan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-klein, 8px); background: var(--paneel, var(--vlak2)); }
.bs-vb__aan strong { font-size: 15px; }
.bs-vb__adres { font-size: 12px; color: var(--ink2); }
.bs-vb__regels { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.bs-vb__regels dt { color: var(--ink2); }
.bs-vb__regels dd { margin: 0; overflow-wrap: anywhere; }
.bs-vb__bijlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-vb__voorbeeld { border: 1px solid var(--lijn); border-radius: var(--radius-klein, 8px); padding: 10px 12px; font-size: 12.5px; color: var(--ink2); max-height: 180px; overflow: auto; white-space: pre-wrap; }

/* BP1 · de bevestigingspoort: samenvattingsregels in het venster */
.bs-bevestig__rijen { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 4px 0 6px; font-size: .9rem; }
.bs-bevestig__rij { display: contents; }
.bs-bevestig__rij span { color: var(--c-ink-2); }
.bs-bevestig__rij b { font-weight: 700; }
.bs-bevestig__waarschuwing { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius-klein); background: var(--memo); font-size: .85rem; }

/* ── casa360-diepte.css ── */
/* =====================================================================
   casa360-diepte.css — vaste diepte-laag (goedgekeurde uitzondering
   14-07-2026, aangescherpt in handoff 2.0). Basis blijft 1px-lijnen en
   paneel-tinten; dáárbovenop: subtiele schaduw op tegels/kaarten en
   knoppen, gradient uitsluitend op primaire knoppen. Uitsluitend via
   de diepte-tokens in casa360-tokens.css — nooit losse literals.
===================================================================== */

/* kaarten en KPI-tegels: subtiele schaduw bovenop de 1px-rand */
.kaart { box-shadow: var(--schaduw-tegel); }
.bs-stat {
  box-shadow: var(--schaduw-tegel);
  transition: transform var(--overgang), box-shadow var(--overgang);
}
button.bs-stat:hover { transform: translateY(-2px); box-shadow: var(--schaduw-tegel-hover); }
@media (prefers-reduced-motion: reduce) { button.bs-stat:hover { transform: none; } }

/* primaire knoppen: gradient + zachte gloed (enige gradient-plek) */
.btn--primary { background: var(--gradient-primair); box-shadow: var(--schaduw-knop); }
.btn--primary:hover { background: var(--gradient-primair-hover); }

/* klantpagina: zelfde regels */
.kl-knop--primair { background: var(--gradient-primair); box-shadow: var(--schaduw-knop); }
.kl-knop--primair:hover { background: var(--gradient-primair-hover); }

/* ── artikelen.css ── */
/* =====================================================================
   artikelen.css — Module 2.4b · Artikelbeheer. Registerlijst met
   soort-chips en beheerdossier (vijf tabs) in de drawer.
   Bouwt op tokens + bouwstenen.css.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.art { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.art-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; }
.art-lijst__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; flex-wrap: wrap; }
.art-lijst__kop strong { font-size: .95rem; }
.art-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; }
.art-lijst__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.art-zoek { max-width: 250px; }

.art-rij { display: grid; grid-template-columns: 1.6fr .7fr .9fr 1fr 1fr .8fr .5fr; gap: 10px; align-items: center; padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.art-rij:hover { background: var(--c-creme); }
.art-rij--kop { padding: 6px 18px 8px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.art-rij--kop:hover { background: transparent; }
.art-rij__naam { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--c-ink); }
.art-rij__cat { font-size: .74rem; color: var(--c-ink-2); }
.art-rij__sub { font-size: .66rem; color: var(--c-ink-3); font-weight: 400; }
.art-rij__extra { font-size: .72rem; color: var(--c-ink-2); }
.art-rij__code { font-size: .68rem; color: var(--c-groen-d); }
.art-rij__versie { font-size: .7rem; font-weight: 700; color: var(--c-groen-d); }
.art-rij .chip { justify-self: start; }

/* drawer / beheerdossier */
.art-tabinhoud { padding-top: 13px; }
.art-kop { display: block; margin: 14px 0 6px; }
.art-kop:first-child { margin-top: 0; }
.art-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.art-kv > span:first-child { color: var(--c-ink-2); }
.art-kv > span:last-child { text-align: right; }
.art-link { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-groen-d); text-decoration: none; }
.art-link:hover { text-decoration: underline; }
.art-uitleg { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 10px; }
.art-voetnoot { font-size: .7rem; color: var(--c-ink-3); }

.art-bewerk { margin-top: 14px; width: 100%; }
.art-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.art-veld { display: flex; flex-direction: column; gap: 4px; }
.art-veld--breed { grid-column: 1 / -1; }
.art-input { width: 100%; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink); background: #fff; box-sizing: border-box; }
.art-bewerk__voet { display: flex; gap: 8px; margin-top: 14px; }
.art-status { text-transform: capitalize; }

/* Prijsimport (E5a): diff-preview vóór doorvoeren */
.art-diffrij { display: grid; grid-template-columns: 1.3fr 1.2fr 1.2fr; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.art-diffrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-bottom-width: 2px; }
.art-delta--op { color: var(--c-terra); font-weight: 700; }
.art-delta--af { color: var(--c-groen-d); font-weight: 700; }

/* VRD-D (02-09) · de dubbeltelling tussen catalogus en magazijn. Staat
   bovenaan omdat een van de twee getallen niet waar is en niemand weet
   welke; --let, want het is «let op» en geen blokkade. */
.art-dubbel {
  display: flex; flex-direction: column; gap: 4px;
  border: var(--lijndikte) solid var(--let); border-left-width: 4px;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; background: var(--kaart);
}
.art-dubbel b { font-size: .84rem; color: var(--ink); }
.art-dubbel__rij { font-size: .74rem; color: var(--ink2); }
.art-dubbel__rij i { font-style: normal; color: var(--ink3); }
.art-dubbel__uitleg { font-size: .76rem; color: var(--ink2); max-width: 82ch; margin-top: 4px; }

/* ── offertes.css ── */
/* =====================================================================
   offertes.css — Commercie › Offertes. Alleen module-eigen stijlen;
   gedeelde patronen (lijst, poort, audit, woning, modaal, knoppen)
   staan in bouwstenen.css (fase 0). Geen blauw, schaduw of gradient.
===================================================================== */

.off { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

.off-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.off-kop h1 { margin: 4px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.off-versie { font-size: .8rem; color: var(--c-ink-3); font-weight: 700; }
.off-terug { background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--c-ink-3); text-transform: uppercase; padding: 0 0 6px; }
.off-terug:hover { color: var(--c-ink); }

/* Lijstkaart: kolommen van het offertes-overzicht (prototype-grid) */
.off-lijstkaart { padding: 0; overflow: hidden; --bs-kolommen: 26px 132px 92px 1.1fr 1.2fr 1.2fr .8fr .7fr .9fr; }

/* ---------- Editor-grid ---------- */
.off-grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .off-grid { grid-template-columns: 1fr; } }

.off-config { display: flex; flex-direction: column; gap: 20px; }
.off-sectie__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.off-grens { color: var(--c-ink-3); font-size: .68rem; }
.off-toeslag { color: var(--c-amber); font-size: .74rem; font-weight: 700; }

/* Maatregel-regels */
.off-regels { display: flex; flex-direction: column; gap: 10px; }
.off-regel { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; transition: border-color var(--overgang); }
.off-regel:hover { border-color: var(--c-lijn-2); }
.off-regel__hoofd { display: flex; align-items: flex-start; justify-content: space-between; }
.off-regel__naam { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.off-regel__titel { font-weight: 800; font-size: .92rem; }
.off-regel__meld { font-size: .62rem; color: var(--c-ink-3); }
.off-regel__weg { background: transparent; border: 0; cursor: pointer; color: var(--c-ink-3); font-size: .8rem; padding: 2px 6px; border-radius: 6px; }
.off-regel__weg:hover { color: var(--c-rood); background: var(--c-rood-t); }
.off-regel__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.off-regel__meta { display: flex; align-items: flex-end; gap: 18px; margin-left: auto; }
.off-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.off-btw { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 2px 8px; }
.off-regel__prijs { text-align: right; display: flex; flex-direction: column; }
.off-regel__excl { font-size: .62rem; color: var(--c-ink-3); }
.off-regel__totaal { font-size: 1rem; font-weight: 800; }

/* Velden */
.off-veld { display: flex; flex-direction: column; gap: 5px; }
.off-veld--breed { width: 100%; }
.off-veld__label { font-size: .68rem; color: var(--c-ink-2); font-weight: 600; }
.off-veld__input { display: flex; align-items: center; background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; }
.off-veld__input:focus-within { border-color: var(--c-groen); }
.off-veld__input input { border: 0; padding: 9px 10px; font-family: var(--font-mono); font-size: .9rem; width: 92px; background: transparent; color: var(--c-ink); }
/* Focus-ring nooit uitzetten (CLAUDE.md) — de globale :focus-visible geldt. */
.off-veld__eenheid { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-3); padding: 0 10px 0 4px; }
.off-veld__eenheid--pre { padding: 0 4px 0 10px; }
.off-reden { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-ui); font-size: .82rem; background: #fff; color: var(--c-ink); width: 100%; }
.off-reden:focus-visible { border-color: var(--c-groen); }
.off-select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-ui); font-size: .82rem; background: #fff; color: var(--c-ink); width: 100%; }

/* Catalogus-chips */
.off-catalogus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.off-add { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid transparent; border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: background var(--overgang); }
.off-add:hover { background: #fff; border-color: var(--c-lijn-2); }
.off-leeg { color: var(--c-ink-3); font-size: .82rem; }

/* Korting-kaart */
.off-korting { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

/* Fiat-acties (module-eigen aanvulling op bs-poort) */
.off-mini { margin-top: 8px; align-self: flex-start; font-size: .78rem; padding: 8px 14px; }
.off-fiat-mgr { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--c-lijn-2); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.off-fiat-mgr__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.off-fiat-mgr__acties { display: flex; gap: 8px; }
.off-fiat-mgr__acties .btn { margin-top: 0; padding: 7px 14px; }
.bs-poort--sam { margin-top: 12px; }

/* ---------- Samenvatting (sticky) ---------- */
.off-samenvatting-wrap { position: sticky; top: 22px; }
.off-samenvatting { position: relative; padding: 20px 20px 18px; overflow: hidden; }
.off-sam__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-groen); }
.off-sam__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.off-sam__geldig { font-size: .68rem; color: var(--c-amber); }

.off-sam__eind { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.off-sam__eindlabel { font-size: .72rem; color: var(--c-ink-2); }
.off-sam__eindwaarde { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }

/* ISDE-blok */
.off-subsidie { margin: 14px 0; padding: 13px 14px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid transparent; }
.off-subsidie--nul { background: var(--c-paneel); }
.off-subsidie__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.off-subsidie__label { font-size: .74rem; font-weight: 700; color: var(--c-groen-d); }
.off-subsidie--nul .off-subsidie__label { color: var(--c-ink-2); }
.off-subsidie__bedrag { font-size: 1.35rem; font-weight: 800; color: var(--c-groen-d); margin: 3px 0 4px; }
.off-subsidie--nul .off-subsidie__bedrag { color: var(--c-ink-3); }
.off-subsidie__uitleg { font-size: .72rem; line-height: 1.45; color: var(--c-ink-2); }

/* Prijsopbouw */
.off-opbouw { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.off-opbouwrij { display: flex; justify-content: space-between; font-size: .82rem; color: var(--c-ink); }
.off-opbouwrij--korting { color: var(--c-terra-d); }
.off-btwsplit { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding-top: 8px; border-top: 1px dashed var(--c-lijn); }
.off-btwrij { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); }

/* Marge (gevoelig) */
.off-marge { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--c-paneel); font-size: .82rem; }
.off-marge__label { font-weight: 700; }
.off-gevoelig { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 6px; }

/* Acties */
.off-acties { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.off-versturen { width: 100%; }
.off-acties__sub { display: flex; gap: 8px; }
.off-acties__sub .btn { flex: 1; }
.off-sam__bron { margin-top: 14px; font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; }

/* =====================================================================
   Offerte-document (preview → PDF via browser-print)
===================================================================== */
.off-preview-laag { position: fixed; inset: 0; z-index: 70; background: var(--c-paneel-2); display: flex; flex-direction: column; overflow: auto; }
.off-preview__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--c-creme); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.off-preview__titel { font-weight: 800; font-size: .9rem; }
.off-preview__acties { display: flex; gap: 10px; }
.off-preview__blad { padding: 28px 20px 60px; }

.off-doc {
  max-width: 820px; margin: 0 auto; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 46px 52px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.doc-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--c-ink); }
.doc-merk { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
.doc-meta { display: flex; gap: 26px; }
.doc-meta > div { display: flex; flex-direction: column; gap: 2px; }
.doc-nr { font-weight: 700; }
.doc-meta .mono { font-size: .78rem; }

.doc-partijen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 22px 0; }
.doc-partij__naam { font-weight: 800; font-size: 1rem; margin-top: 4px; }
.doc-partij__regel { font-size: .82rem; color: var(--c-ink-2); line-height: 1.5; }

.doc-intro { font-size: .86rem; line-height: 1.55; color: var(--c-ink); margin: 0 0 20px; }

.doc-tabel { width: 100%; border-collapse: collapse; }
.doc-tabel thead th { text-align: left; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn-2); }
.doc-tabel tbody td { padding: 12px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); vertical-align: top; }
.doc-num { text-align: right; white-space: nowrap; }
.doc-maat__naam { font-weight: 700; font-size: .9rem; }
.doc-maat__meld { display: block; font-size: .62rem; color: var(--c-ink-3); margin-top: 2px; }
.doc-tabel .doc-num.mono { font-size: .86rem; }

.doc-onder { display: grid; grid-template-columns: 1fr 300px; gap: 34px; margin-top: 26px; }
.doc-voorwaarden ul { margin: 8px 0 0; padding-left: 18px; }
.doc-voorwaarden li { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }

.doc-tot__rij { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .84rem; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.doc-tot__rij--korting { color: var(--c-terra-d); }
.doc-tot__rij--eind { border-bottom: 0; margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--c-ink); font-weight: 800; font-size: 1.05rem; }
.doc-subsidie { margin-top: 16px; padding: 13px 14px; border-radius: var(--radius); background: var(--c-groen-t); }
.doc-subsidie__kop { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--c-groen-d); }
.doc-subsidie__bedrag { font-size: 1.2rem; font-weight: 800; color: var(--c-groen-d); margin: 3px 0 1px; }
.doc-subsidie__uitleg { font-size: .7rem; color: var(--c-ink-2); }

.doc-voet { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .68rem; color: var(--c-ink-3); }

@media print {
  body.preview-open .app, #toast, .bs-modal-laag { display: none !important; }
  .off-preview-laag { position: static; overflow: visible; background: #fff; }
  .off-preview__bar { display: none !important; }
  .off-preview__blad { padding: 0 !important; }
  .off-doc { border: 0; border-radius: 0; max-width: 100%; padding: 0; }
  @page { size: A4; margin: 16mm; }
}

/* Previewmail */
.off-mail { margin: 18px 20px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; }
.off-mail__van, .off-mail__aan { padding: 10px 16px; font-size: .78rem; }
.off-mail__van { background: var(--c-paneel); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.off-mail__aan { color: var(--c-ink-2); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.off-mail__body { padding: 18px 16px; font-size: .86rem; line-height: 1.5; }
.off-mail__body p { margin: 0 0 12px; }
.off-cta { margin: 4px 0 10px; }
.off-mail__klein { font-size: .72rem; color: var(--c-ink-3); }

/* Marge-stoplicht (B2a) */
.off-marge__stand { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.off-marge__stand em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.off-margelamp { font-size: 11px; margin-right: 4px; }
.off-marge--groen .off-margelamp { color: var(--c-groen-d); }
.off-marge--amber .off-margelamp { color: var(--c-amber); }
.off-marge--terra .off-margelamp { color: var(--c-terra); }
.off-marge--amber .off-marge__stand em { color: var(--c-amber); }
.off-marge--terra .off-marge__stand em { color: var(--c-terra); font-weight: 600; }

/* Versie-diff (B2b) */
.off-diff__kop { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-lijn); margin-bottom: 12px; }
.off-diff__kolom { display: flex; flex-direction: column; gap: 4px; }
.off-diff__prijs { font-size: 17px; font-weight: 800; }
.off-diff__pijl { color: var(--c-ink-2); font-size: 18px; }
.off-diff__kiezer { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.off-diff__kiezer select { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 6px 10px; font: inherit; background: var(--c-paneel); color: var(--c-ink); }
.off-diff__rijen { display: flex; flex-direction: column; }
.off-diffrij { display: flex; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13.5px; }
.off-diffrij--plus span:first-child { color: var(--c-groen-d); font-weight: 600; }
.off-diffrij--min span:first-child { color: var(--c-terra); font-weight: 600; }
.off-diffrij--wijzig span:first-child { color: var(--c-amber); font-weight: 600; }
.off-diffrij--totaal { border-bottom: 0; padding-top: 12px; font-weight: 700; }

/* Startpakketten (B2c) */
.off-startpakket__intro { font-size: 13.5px; color: var(--c-ink-2); margin: 0 0 12px; }
.off-startpakketten { display: flex; flex-direction: column; gap: 10px; }
.off-startpakket { display: flex; flex-direction: column; gap: 5px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; background: var(--c-paneel); cursor: pointer; font: inherit; color: var(--c-ink); }
.off-startpakket:hover { border-color: var(--c-groen-d); }
.off-startpakket.is-aanbevolen { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen-d) 6%, var(--c-paneel)); }
.off-startpakket__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.off-startpakket__sub { font-size: 12.5px; color: var(--c-ink-2); }
.off-startpakket__regels { font-size: 11.5px; color: var(--c-ink-2); }

/* B27 · backend-kaart: concept-offertes versturen naar de Woningkluis */
.off-b27kaart { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 16px; }
.off-b27kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.off-b27kop > span { font-size: 11px; color: var(--c-ink-2); }
.off-b27rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; }
.off-b27rij > div { display: flex; flex-direction: column; }
.off-b27rij .mono { font-size: 11.5px; color: var(--c-ink-2); }

/* Fase A (01-08): gedeelde teltegel-kop van de offerte-modules */
.ofk-host:empty { min-height: 96px; }
.ofk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 4px; }
.ofk-tegel { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 16px;
  font-family: var(--font-ui); box-shadow: var(--schaduw-tegel); }
.ofk-tegel--klik { cursor: pointer; transition: border-color var(--overgang), box-shadow var(--overgang); }
.ofk-tegel--klik:hover { border-color: var(--c-groen); box-shadow: var(--schaduw-tegel-hover); }
.ofk-tegel__lbl { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); }
.ofk-tegel__n { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); }
.ofk-tegel__n.is-amber { color: var(--c-amber); }
.ofk-tegel__sub { font-size: .66rem; color: var(--c-ink-3); }
@media (prefers-reduced-motion: reduce) { .ofk-tegel--klik { transition: none; } }

/* De opvolging van kozijnoffertes loopt sinds KO8 via de gedeelde module
   Opvolging; de eigen stijlen zijn daarmee vervallen. */

/* ═══ OF1 (OFFERTEFLOW §1) · wizard-editor ═══ */
.off-autosave { margin-left: auto; font-size: .66rem; color: var(--c-ink-3); align-self: flex-start; padding-top: 6px; }
.off-wizvoet { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.off-grid--breed { grid-template-columns: 1fr; }
.off-cat { display: flex; flex-direction: column; gap: 9px; }
.off-cat__zoek { border: 1px solid var(--lijn2); border-radius: var(--radius-klein); padding: 8px 12px; font: inherit; font-size: .78rem; }
.off-regelacties { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.off-opt { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--ink2); font-weight: 700; cursor: pointer; }
.off-mini2 { border: 1px solid var(--lijn2); background: #fff; border-radius: 6px; width: 24px; height: 24px; font-size: .7rem; color: var(--ink2); cursor: pointer; }
.off-mini2:hover { background: var(--grijs); }
.off-mini2:disabled { opacity: .35; cursor: default; }
.off-check { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; padding: 4px 0; line-height: 1.5; }
.off-check__tk { font-weight: 800; width: 15px; text-align: center; flex: none; }
.off-check--ok .off-check__tk { color: var(--goed-d); }
.off-check--let .off-check__tk { color: var(--let-d); }
.off-check--rood .off-check__tk { color: var(--stop); }

/* ── offdossier.css ── */
/* offdossier.css — het offerte-dossier (OI1). De modulebalk wisselt naar
   deze kop zodra je een offerte opent: terug, klant, nummer, status, bedrag
   en drie tabs. Alleen tokens. */

.ofd-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 20px 32px 72px;
  display: flex; flex-direction: column; gap: 12px; }
.ofd-balk { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ofd-terug { font-size: .76rem; font-weight: 700; color: var(--c-groen-d); text-decoration: none; }
.ofd-klant { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.ofd-klant a { color: var(--c-ink); text-decoration: none; }
.ofd-klant a:hover { text-decoration: underline; }
.ofd-nr { font-size: .74rem; color: var(--c-ink-3); }
.ofd-rek { flex: 1; }
.ofd-bedrag { font-size: .9rem; font-weight: 800; }
.ofd-status { font-size: .64rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 99px; padding: 1px 9px; color: var(--c-ink-2); }
.ofd-status.is-verstuurd { border-color: var(--c-groen); color: var(--c-groen-d); }
.ofd-status.is-akkoord { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ofd-status.is-af { border-color: var(--c-lijn-2); color: var(--c-ink-3); }

.ofd-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ofd-tab { border: 0; background: none; padding: 8px 14px; font-size: .8rem; font-weight: 700;
  color: var(--c-ink-3); font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; }
.ofd-tab.is-actief { color: var(--c-groen-d); border-bottom-color: var(--c-groen); }
.ofd-inhoud { display: flex; flex-direction: column; gap: 14px; }

.ofd-blok { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--schaduw-tegel); }
.ofd-tabel { border-collapse: collapse; width: 100%; font-size: .78rem; }
.ofd-tabel th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); padding: 4px 6px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); }
.ofd-tabel td { padding: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ofd-totaal { display: flex; justify-content: space-between; font-size: .84rem; padding-top: 6px; }
.ofd-leeg { font-size: .76rem; color: var(--c-ink-3); }
.ofd-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; }
.ofd-opdracht { display: flex; gap: 10px; font-size: .78rem; padding: 4px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); }
.ofd-opdracht:first-of-type { border-top: 0; }
.ofd-opdracht span { color: var(--c-ink-3); }

/* tijdlijn van dít stuk */
.ofd-tl { display: flex; flex-direction: column; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 14px; }
.ofd-tlrij { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.ofd-tlrij:first-child { border-top: 0; }
.ofd-tltijd { font-size: .66rem; color: var(--c-ink-3); }
.ofd-tlbron, .ofd-tlwissel, .ofd-tlreden { display: block; font-size: .66rem; color: var(--c-ink-3); font-style: normal; }
.ofd-tlwissel { color: var(--c-ink-2); }

/* ── OI3 · het afmaakscherm (bouwspec §3) ───────────────────────────────
   Drie kolommen: wie/wat/welke prijzen · herkomst en regels · het geld.
   Onder 1180 px vouwen de zijkolommen onder de regels, zodat het scherm op
   een laptop nog steeds werkbaar blijft. */
.ofd-drie { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.ofd-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1180px) {
  .ofd-drie { grid-template-columns: minmax(0, 1fr); }
  .ofd-kol--midden { order: -1; }
}
.ofd-wortel:has(.ofd-drie) { max-width: 1360px; }

/* herkomst — waar de offerte vandaan komt (§3.1) */
.ofd-herk { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-left: 3px solid var(--c-groen); border-radius: var(--radius); padding: 12px 15px;
  display: flex; flex-direction: column; gap: 6px; }
.ofd-herk.is-scan { border-left-color: var(--c-ink-2); }
.ofd-herk.is-hand { border-left-color: var(--c-lijn-2); }
.ofd-herksub { margin: 0; font-size: .78rem; color: var(--c-ink-2); line-height: 1.5; }
.ofd-notitie { background: var(--c-memo); border-radius: var(--radius); padding: 9px 12px;
  font-size: .76rem; line-height: 1.5; }
.ofd-notitie b { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); margin-bottom: 3px; }

/* regels — aan/uit, prijs met ondergrens, marge per regel */
.ofd-regels { display: flex; flex-direction: column; gap: 8px; }
.ofd-regel { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 13px; box-shadow: var(--schaduw-tegel); }
.ofd-regel.is-uit { opacity: .55; }
.ofd-regel.is-verhoogd { border-left: 3px solid var(--c-amber); }
.ofd-regel.is-blok { border-left: 3px solid var(--c-terra); }
.ofd-vink input { width: 16px; height: 16px; accent-color: var(--c-groen); }
.ofd-regellijf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ofd-regelkop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .84rem; }
.ofd-regelbedrag { font-weight: 800; }
.ofd-regelbedrag.is-rood, .ofd-regeldetail .is-rood { color: var(--c-terra); font-weight: 700; }
.ofd-vlag { font-size: .6rem; font-weight: 700; letter-spacing: .04em; border-radius: 99px;
  padding: 1px 8px; border: var(--lijndikte) solid var(--c-amber); color: var(--c-amber); }
.ofd-vlag.is-rood { border-color: var(--c-terra); color: var(--c-terra); }
.ofd-regeldetail { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .7rem; color: var(--c-ink-2); }
.ofd-regeldetail label { display: inline-flex; align-items: center; gap: 5px; }
.ofd-regeldetail input { width: 74px; padding: 3px 6px; font-size: .72rem;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; background: #fff; font-family: var(--font-mono); }
.ofd-regeldetail input:disabled { background: var(--c-paneel); color: var(--c-ink-3); }
.ofd-std { color: var(--c-ink-3); font-size: .66rem; }
.ofd-herstel { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 1px 9px; font: 700 .64rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.ofd-herstel:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.ofd-optie { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: var(--c-ink-2); }
.ofd-optie input { accent-color: var(--c-groen); }
.ofd-optie i { color: var(--c-ink-3); }

/* totaal · marge · korting */
.ofd-trij { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; padding: 3px 0; }
.ofd-trij.is-groot { font-size: .92rem; font-weight: 800; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 7px; }
.ofd-trij.is-klein { font-size: .68rem; color: var(--c-ink-3); }
.ofd-trij.is-kort { color: var(--c-ink-2); }
.ofd-trij.is-sub { color: var(--c-groen-d); font-weight: 700; }
.ofd-x2 { font-size: .58rem; border: var(--lijndikte) solid var(--c-groen); border-radius: 4px;
  padding: 0 4px; font-style: normal; }
.ofd-intern { font-size: .58rem; font-weight: 600; color: var(--c-ink-3); text-transform: none;
  letter-spacing: 0; font-style: normal; }
.ofd-margebalk { position: relative; height: 7px; border-radius: 99px; background: var(--c-paneel);
  border: var(--lijndikte) solid var(--c-lijn); overflow: hidden; margin: 3px 0; }
.ofd-margebalk i { display: block; height: 100%; background: var(--c-groen); }
.ofd-margebalk.is-laag i { background: var(--c-terra); }
.ofd-norm { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-ink-2); }
.ofd-poort { background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra);
  border-radius: var(--radius); padding: 8px 11px; font-size: .72rem; color: var(--c-terra); line-height: 1.5; margin: 0; }
.ofd-poort em { display: block; font-style: normal; color: var(--c-ink-3); font-size: .66rem; margin-top: 3px; }
.ofd-let2 { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius); padding: 8px 11px; font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; }
.ofd-kmodus { display: flex; gap: 4px; flex-wrap: wrap; }
.ofd-kbtn { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 3px 11px; font: 700 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.ofd-kbtn.is-actief { border-color: var(--c-groen); background: var(--c-groen); color: #fff; }
.ofd-kbtn:disabled { opacity: .5; cursor: not-allowed; }
.ofd-kinvoer { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--c-ink-2); flex-wrap: wrap; }
.ofd-kinvoer input, .ofd-kinvoer select { padding: 4px 7px; font-size: .74rem; border-radius: 7px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-family: inherit; }
.ofd-kinvoer input { width: 96px; font-family: var(--font-mono); }
.ofd-kreden input { width: 100%; font-family: var(--font-ui); }
.ofd-acties { gap: 7px; }
.ofd-acties .btn { width: 100%; }
.ofd-versieregel { margin: 0; font-size: .68rem; color: var(--c-ink-3); }
.ofd-vraagstand { color: var(--c-amber); }
.ofd-toeslag { font-style: normal; font-size: .66rem; color: var(--c-amber); }
.ofd-vraagkaart { background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: var(--radius); padding: 12px 15px; display: flex; flex-direction: column; gap: 6px; font-size: .78rem; }
.ofd-vraagkaart p { margin: 0; line-height: 1.5; }

.ofd-plus { align-self: flex-start; }

/* ── OI4 · wat de klant ziet: vier gezichten (bouwspec §4) ────────────── */
.ofd-gezichten { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
.ofd-gknop { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 5px 14px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.ofd-gknop.is-actief { border-color: var(--c-groen); background: var(--c-groen); color: #fff; }
.ofd-kvblok { max-width: 720px; }
.ofd-kvregels { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.ofd-kvregel { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: var(--c-paneel); font-size: .82rem; }
.ofd-kvregel.is-optie { border-style: dashed; }
.ofd-kvregel em { font-style: normal; color: var(--c-ink-3); font-size: .7rem; }
.ofd-kvsub { display: block; font-size: .7rem; color: var(--c-ink-3); }
.ofd-kvtotaal { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 8px; margin-top: 6px; }
.ofd-eenbron { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 9px; margin-top: 4px; }

.ofd-mail { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; }
.ofd-mailkop { background: var(--c-paneel); padding: 10px 14px; font-size: .72rem; line-height: 1.6;
  color: var(--c-ink-2); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ofd-maillijf { padding: 14px 16px; font-size: .82rem; line-height: 1.6; background: #fff; }
.ofd-maillijf p { margin: 0 0 10px; }
.ofd-mailknop { display: inline-block; background: var(--c-groen); color: #fff; border-radius: var(--radius);
  padding: 9px 18px; font-weight: 700; font-size: .8rem; }
.ofd-mailbijlage { display: flex; gap: 11px; align-items: center; margin-top: 12px; padding: 10px 12px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-paneel); font-size: .78rem; }
.ofd-mailbijlage span.mono { font-size: .62rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 5px; padding: 2px 6px; color: var(--c-ink-3); }

.ofd-url { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 6px 14px; font-size: .74rem; color: var(--c-ink-2); display: inline-block; }
.ofd-kluisbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--c-ink);
  color: #fff; border-radius: var(--radius); padding: 9px 14px; font-size: .78rem; font-weight: 700; }
.ofd-idin { font-size: .58rem; letter-spacing: .06em; border: var(--lijndikte) solid var(--c-groen);
  color: var(--c-groen); border-radius: 99px; padding: 1px 8px; }

.ofd-pdf { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 16px 18px; background: #fff; }
.ofd-pdfkop { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
  border-bottom: var(--lijndikte) solid var(--c-lijn); padding-bottom: 10px; margin-bottom: 12px; font-size: .8rem; }
.ofd-pdfnr { text-align: right; }
.ofd-pdfvelden { display: flex; gap: 26px; flex-wrap: wrap; font-size: .76rem; line-height: 1.5; margin-bottom: 12px; }
.ofd-pdfvelden .kd-lbl { display: block; }
.ofd-pdfteken { display: flex; gap: 30px; margin-top: 14px; }
.ofd-pdfteken div { flex: 1; border-top: var(--lijndikte) solid var(--c-lijn-2); padding-top: 5px;
  font-size: .66rem; color: var(--c-ink-3); }
.ofd-kvregel.is-uit { opacity: .6; }
/* geen browserblauw: links in het dossier dragen de accentkleur */
.ofd-let a, .ofd-blok a, .ofd-opdracht a { color: var(--c-groen-d); }

/* RAIL COMPLEET (03-09): de werkstraatstappen als link-tab in de tabbalk —
   zelfde maat als de knoppen, de pijl zegt dat je het dossier verlaat. */
.ofd-tab--link { text-decoration: none; color: var(--ink2); display: inline-block; }
.ofd-tab--link:hover { color: var(--ink); }

/* ── kozdossier.css ── */
/* kozdossier.css — het kozijnofferte-dossier (KO1) en het beheer van de
   configurator. Leunt op de vormtaal van het offerte-dossier: kozijnen is
   hetzelfde als isolatie, dus de binnendienst hoeft niet om te schakelen.
   Alleen tokens. */
.kzd-wortel, .kzb-wortel { max-width: 1240px; margin: 0 auto; width: 100%;
  padding: 20px 32px 72px; display: flex; flex-direction: column; gap: 12px; }
.kzd-blok, .kzb-blok { background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--schaduw-tegel); }
.kzd-let, .kzb-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; line-height: 1.6; }
.kzd-rek { flex: 1; }

/* posities: één positie is één offerteregel */
.kzd-posities { display: flex; flex-direction: column; gap: 8px; }
.kzd-positie { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 12px; background: var(--c-paneel); }
.kzd-poskop { display: flex; align-items: baseline; gap: 9px; font-size: .84rem;
  padding-bottom: 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kzd-poskop span { font-size: .7rem; color: var(--c-ink-3); }
.kzd-poskop .mono { font-size: .8rem; font-weight: 800; color: var(--c-ink); }
.kzd-posrooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 9px; padding-top: 8px; }
.kzd-posrooster span { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); margin-bottom: 2px; }
.kzd-posrooster b { font-size: .78rem; }

/* beheer: negen tabbladen */
.kzb-kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.kzb-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.kzb-sub { font-size: .76rem; color: var(--c-ink-3); margin: 2px 0 0; }
.kzb-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.kzb-tab { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 5px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.kzb-tab.is-actief { border-color: var(--c-groen); background: var(--c-groen); color: #fff; }
.kzb-blokkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .88rem; padding-bottom: 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kzb-blokkop span { font-size: .66rem; color: var(--c-ink-3); }
.kzb-tabel { border-collapse: collapse; width: 100%; font-size: .78rem; }
.kzb-tabel th { text-align: left; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); padding: 5px 7px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); }
.kzb-tabel td { padding: 6px 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kzb-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; }
.kzb-staal { display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  border: var(--lijndikte) solid var(--c-lijn-2); vertical-align: -2px; margin-right: 5px; }

/* ═══ KO3 · de configurator: drie kolommen — links waar je begint, midden
   de tekening, rechts de maten en wat het kost. ═══ */
.kzc-rooster { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
.kzc-kolom { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1180px) { .kzc-rooster { grid-template-columns: 1fr; } }

/* de positielijst met miniatuurtjes uit dezelfde tekenfunctie */
.kzc-poslijst { display: flex; flex-direction: column; gap: 5px; }
.kzc-posrij { display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff;
  padding: 6px 8px; cursor: pointer; font: inherit; transition: border-color 150ms, background 150ms; }
.kzc-posrij:hover { border-color: var(--c-lijn-2); background: var(--c-paneel); }
.kzc-posrij.is-actief { border-color: var(--c-groen); background: var(--c-paneel); }
.kzc-mini { flex: 0 0 46px; display: flex; align-items: center; justify-content: center; }
.kzc-postxt { min-width: 0; }
.kzc-postxt b { display: block; font-size: .78rem; }
.kzc-postxt span { display: block; font-size: .66rem; color: var(--c-ink-3); }
.kzc-postxt em { color: var(--c-amber-d); font-style: normal; font-weight: 700; }

/* de modellenbibliotheek */
.kzc-groep { font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 8px 0 4px; }
.kzc-modelrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.kzc-model { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff;
  padding: 5px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: inherit; transition: border-color 150ms, background 150ms; }
.kzc-model:hover { border-color: var(--c-lijn-2); background: var(--c-paneel); }
.kzc-model.is-actief { border-color: var(--c-groen); background: var(--c-paneel); }
.kzc-model small { font-size: .56rem; line-height: 1.25; text-align: center; color: var(--c-ink-2); }
.kzc-model small .mono { font-size: .5rem; color: var(--c-ink-3); }

/* het doek */
.kzc-doekblok { position: relative; }
.kzc-doek { display: flex; align-items: center; justify-content: center; min-height: 340px;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px; }
.kzc-standknop { position: absolute; top: 44px; right: 22px; display: flex; gap: 4px; z-index: 1; }
.kzc-stand { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 3px 11px; font: 700 .66rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.kzc-stand.is-actief { border-color: var(--c-groen); background: var(--c-groen); color: #fff; }
.kzc-doekvoet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .68rem; color: var(--c-ink-3); }

/* velden: label boven het veld, nooit alleen een placeholder */
.kzc-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.kzc-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kzc-veld > span { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.kzc-veld input, .kzc-veld select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px;
  padding: 5px 8px; font: 500 .78rem var(--font-ui); background: #fff; color: var(--c-ink); width: 100%; }
.kzc-veld input:focus-visible, .kzc-veld select:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.kzc-veld select:disabled { opacity: .45; }
.kzc-smal { max-width: 110px; }

/* de indeling: één rij per vak */
.kzc-vakken { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kzc-vakrij { display: flex; align-items: flex-end; gap: 7px; }
.kzc-vaknr { flex: 0 0 20px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800; color: var(--c-ink-3); }
.kzc-weg { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 8px;
  padding: 4px 9px; font: 700 .74rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.kzc-weg:disabled { opacity: .3; cursor: default; }
.kzc-knopje { align-self: flex-start; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  border-radius: 99px; padding: 4px 12px; font: 700 .7rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.kzc-knopje:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.kzc-knop { align-self: flex-start; border: none; background: var(--gradient-primair); color: #fff;
  border-radius: 99px; padding: 6px 15px; font: 800 .74rem var(--font-ui); cursor: pointer;
  box-shadow: var(--schaduw-knop); }
.kzc-knop:hover { background: var(--gradient-primair-hover); }

/* de prijsopbouw: elke euro terug te rekenen naar de matrixcel */
.kzc-opbouw { display: flex; flex-direction: column; gap: 4px; }
.kzc-opbouwkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kzc-opbouwkop b { font-size: 1.1rem; font-family: var(--font-mono); color: var(--c-groen-d); }
.kzc-opbouwkop span { font-size: .62rem; color: var(--c-ink-3); }
.kzc-opbouwrij { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; color: var(--c-ink-2); }
.kzc-opbouwrij.is-som { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 4px; margin-top: 2px; font-weight: 700; color: var(--c-ink); }

/* geen prijs uit de matrix: op aanvraag, met fiat */
.kzc-geenprijs { display: flex; flex-direction: column; gap: 7px; border-left: 3px solid var(--c-rood);
  padding-left: 10px; }
.kzc-geenprijs b { font-size: .8rem; color: var(--c-rood-d); }
.kzc-geenprijs p { font-size: .72rem; color: var(--c-ink-2); margin: 0; line-height: 1.5; }
.kzc-aanvraag, .kzc-fiat { display: flex; flex-direction: column; gap: 7px; }
.kzc-fiat { flex-direction: row; align-items: center; flex-wrap: wrap; }
.kzc-fiat em { font-size: .64rem; color: var(--c-ink-3); font-style: italic; }

/* de kleurenkaart van het gekozen merk */
.kzc-stalen { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.kzc-staal { width: 24px; height: 24px; border-radius: 5px; border: var(--lijndikte) solid var(--c-lijn-2); cursor: pointer; }
.kzc-staal.is-actief { border: 2px solid var(--c-ink); }

/* ═══ KO4 · beheer met toevoegen, wijzigen en uit de lijst halen ═══ */
.kzb-acties { white-space: nowrap; text-align: right; }
.kzb-mini { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 3px 10px; font: 700 .66rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; margin-left: 4px; }
.kzb-mini:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.kzb-tabel tr.is-vervallen td { opacity: .5; }
.kzb-uitleg { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: italic; margin-top: 2px; line-height: 1.4; }
.kzb-voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); }
.kzb-varrooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* de versiegeschiedenis in de drawer */
.kzb-hist { display: flex; flex-direction: column; gap: 9px; }
.kzb-histrij { display: flex; gap: 10px; font-size: .74rem; padding-bottom: 8px;
  border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kzb-histrij > .mono { flex: 0 0 96px; font-size: .64rem; color: var(--c-ink-3); }
.kzb-histrij b { display: block; }
.kzb-histrij em { display: block; font-size: .68rem; color: var(--c-ink-2); font-style: normal; }
.kzb-histreden { color: var(--c-amber-d) !important; }
.kzb-histdoor { color: var(--c-ink-3) !important; font-style: italic !important; }

/* de vier kleurvlakken: kader en draaideel, buiten en binnen */
.kzc-vlakken { display: flex; flex-direction: column; gap: 8px; }
.kzc-vlakkop { display: flex; align-items: center; gap: 10px; font-size: .6rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3);
  padding-top: 6px; border-top: var(--lijndikte) solid var(--c-lijn); }
.kzc-kleurrij { display: flex; flex-direction: column; gap: 5px; }
.kzc-vink { display: flex; align-items: center; gap: 5px; margin-left: auto; text-transform: none;
  letter-spacing: 0; font-weight: 600; font-size: .66rem; color: var(--c-ink-2); cursor: pointer; }
.kzc-vink input { accent-color: var(--c-groen); }

/* ═══ KO5 · controles en opties ═══ */
.kzc-controles { display: flex; flex-direction: column; gap: 7px; }
.kzc-melding { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left-width: 3px;
  border-radius: var(--radius); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--schaduw-tegel); }
.kzc-melding b { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
.kzc-melding span { font-size: .76rem; color: var(--c-ink-2); line-height: 1.5; }
.kzc-melding .kzc-knopje { margin-top: 4px; }
.kzc-melding.is-stop { border-left-color: var(--c-rood); }
.kzc-melding.is-stop b { color: var(--c-rood-d); }
.kzc-melding.is-let { border-left-color: var(--c-amber); }
.kzc-melding.is-let b { color: var(--c-amber-d); }
.kzc-melding.is-goed { border-left-color: var(--c-groen); }
.kzc-melding.is-goed b { color: var(--c-groen-d); }

.kzc-optierij { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer;
  border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kzc-optierij:last-of-type { border-bottom: 0; }
.kzc-optierij input { margin-top: 2px; accent-color: var(--c-groen); }
.kzc-optierij > span { flex: 1; min-width: 0; }
.kzc-optierij b { display: block; font-size: .76rem; font-weight: 600; }
.kzc-optierij em { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: italic; line-height: 1.4; }
.kzc-optierij .mono { flex: 0 0 auto; font-size: .7rem; color: var(--c-ink-3); }

.kzc-extras { display: flex; flex-direction: column; gap: 5px; }
.kzc-extrarij { display: flex; align-items: center; gap: 7px; font-size: .74rem; }
.kzc-extrarij > span:first-child { flex: 1; min-width: 0; }
.kzc-extrarij input { width: 62px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px;
  padding: 3px 6px; font: 500 .74rem var(--font-ui); }
.kzc-extrarij input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.kzc-opbouwrij.is-optie { color: var(--c-ink-3); font-style: italic; }

/* KO6 · de maatcodes van een dakraam */
.kzc-maatrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
.kzc-maatrij .kzc-model b { font-size: .76rem; color: var(--c-ink); }

/* ═══ KO7 · wat de klant ziet ═══ */
.kzv-rooster { grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 1180px) { .kzv-rooster { grid-template-columns: 1fr; } }
.kzv-positie { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 9px; background: var(--c-paneel); }
.kzv-poskop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kzv-poskop b { font-size: .86rem; }
.kzv-poskop span { display: block; font-size: .68rem; color: var(--c-ink-3); }
.kzv-poskop .mono { font-size: .92rem; color: var(--c-groen-d); }
.kzv-tek { display: flex; justify-content: center; padding: 8px 0 4px; }
.kzv-tek svg { max-width: 100%; height: auto; }
.kzv-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px;
  padding-top: 8px; border-top: var(--lijndikte) solid var(--c-lijn); }
.kzv-spec span { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.kzv-spec b { font-size: .74rem; font-weight: 600; }
.kzv-extras { margin-top: 9px; padding-top: 7px; border-top: var(--lijndikte) solid var(--c-lijn);
  display: flex; flex-direction: column; gap: 3px; }
.kzv-extra { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--c-ink-2); }
.kzv-possom { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; padding-top: 6px;
  border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; font-weight: 700; }
.kzv-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 14px; border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius);
  background: #fff; box-shadow: var(--schaduw-tegel); }
.kzv-totaal .mono { font-size: 1.15rem; font-weight: 800; color: var(--c-groen-d); }
.kzv-knoppen { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kzv-knoppen a.kzc-knopje { text-decoration: none; display: inline-block; }

/* de vaste aanzichten op het klantvoorstel (route B, open punt §8.1) */
.kzv-strip { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.kzc-standknop .kzc-stand { min-width: 30px; text-align: center; }

/* ── doorzet.css ── */
/* doorzet.css — de fase Doorzetten (bouwspec Offertes isolatie §5).
   Links de lijst met wat er wacht, rechts wat eruit komt. De opmaak blijft
   kaal: op dit scherm doet maar één knop er echt toe. Alleen tokens. */
.dz-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }
.dz-kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.dz-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.dz-rek { flex: 1; }
.dz-oudste { font-size: .74rem; color: var(--c-ink-3); font-weight: 700; }
.dz-oudste.is-let { color: var(--c-amber); }
.dz-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; line-height: 1.6; }
.dz-let a { color: var(--c-groen-d); }
.dz-rs { font-style: normal; }

/* twee kolommen: de lijst en het splitsvoorstel */
.dz-twee { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .dz-twee { grid-template-columns: minmax(0, 1fr); } }
.dz-kolL, .dz-kolR { min-width: 0; }

.dz-lijst { display: flex; flex-direction: column; gap: 8px; }
.dz-kaart { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-groen);
  border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: inherit;
  box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease, background 160ms ease; }
.dz-kaart.is-voorbehoud { border-left-color: var(--c-amber); }
.dz-kaart.is-gekozen { background: var(--c-groen-t); border-color: var(--c-groen); }
.dz-kaart:hover { border-color: var(--c-groen); }
.dz-kr1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .86rem; }
.dz-stand { font-size: .56rem; font-weight: 700; letter-spacing: .07em; color: var(--c-ink-3); white-space: nowrap; }
.dz-kaart.is-voorbehoud .dz-stand { color: var(--c-amber); }
.dz-ks { font-size: .7rem; color: var(--c-ink-3); }
.dz-leeg { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 22px 18px; text-align: center; font-size: .86rem; font-weight: 700; color: var(--c-groen-d); }
.dz-leeg span { display: block; margin-top: 5px; font-size: .72rem; font-weight: 400; color: var(--c-ink-3); }

/* het dagstart-signaal (besluit 14) */
.dz-dagstart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.dz-dskop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .66rem; color: var(--c-ink-3); }
.dz-dstegel { display: flex; align-items: center; gap: 14px; }
.dz-cijfer { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--c-amber); }
.dz-cijfer.is-goed { color: var(--c-groen-d); }
.dz-dstekst { font-size: .78rem; line-height: 1.55; color: var(--c-ink-2); }
.dz-dstekst b { color: var(--c-ink); }

/* het splitsvoorstel */
.dz-detail { display: flex; flex-direction: column; gap: 11px; }
.dz-h2 { margin: 4px 0 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.dz-nr { font-size: .76rem; color: var(--c-ink-3); font-weight: 600; }
.dz-sub { margin: 0; font-size: .74rem; color: var(--c-ink-2); line-height: 1.6; }
.dz-voorbehoud { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius); padding: 10px 13px; font-size: .76rem; line-height: 1.6; color: var(--c-ink-2); }
.dz-opk { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--schaduw-tegel); }
.dz-opkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .88rem; padding-bottom: 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.dz-opkop span { font-size: .66rem; color: var(--c-ink-3); }
.dz-oprooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding-top: 9px; }
.dz-oprooster span { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); margin-bottom: 2px; }
.dz-oprooster b { font-size: .8rem; }
.dz-koppel { display: flex; gap: 9px; align-items: flex-start; font-size: .78rem; font-weight: 700; }
.dz-koppel input { width: 17px; height: 17px; accent-color: var(--c-groen); margin-top: 1px; flex: 0 0 auto; }
.dz-koppel i { display: block; font-weight: 400; font-style: normal; color: var(--c-ink-3); font-size: .7rem; }
.dz-acties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.dz-slot { font-size: .74rem; font-weight: 700; color: var(--c-amber); }
.dz-gedaan { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen);
  border-radius: var(--radius); padding: 10px 13px; font-size: .78rem; line-height: 1.6; color: var(--c-groen-d); }
.dz-gedaan a { color: var(--c-groen-d); }


/* VA3 · fiat-verzoeken korting bovenaan de doorzetlijst */
.dz-fiats { margin: 0 0 14px; padding: 14px 16px; display: grid; gap: 8px; border-left: 3px solid var(--let); }
.dz-fiatkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dz-fiatrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.dz-fiatknoppen { display: flex; gap: 6px; flex-shrink: 0; }

/* ── werkbak.css ── */
/* werkbak.css — de voordeur van Verkoop (bouwspec Verkoopstraat v7 §3.1).
   Kleurkeuze: te lang wachten is een **signaal**, geen blokkade — daarom
   amber/terra en géén rood. Rood blijft in dit platform voorbehouden aan
   blokkades en confidence D (CLAUDE.md).
   Eén rij per opname, en de wachttijd is het enige dat opvalt: een gekleurde
   rand links en één cijfer rechts. Verder blijft het scherm kaal, want de
   binnendienst scant hier en leest niet. Alleen tokens. */
.wbk-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.wbk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wbk-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.wbk-lead { margin: 6px 0 0; max-width: 62ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.wbk-regelset { font-size: .64rem; color: var(--c-ink-3); background: var(--c-paneel);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 5px 11px; white-space: nowrap; }

.wbk-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); background: var(--c-paneel); }
.wbk-meld.is-stop { background: var(--c-amber-t); border-color: var(--c-amber); }
.wbk-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.wbk-meld b { color: var(--c-ink); }

.wbk-zoek { display: flex; align-items: center; gap: 8px; }
.wbk-zoek .bs-zoek { flex: 1; max-width: 380px; }

.wbk-hoofd { margin: 8px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }

/* één rij per opname — zes kolommen, links de wachttijdkleur */
.wbk-rij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 34px minmax(0, 2.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 120px auto;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 11px 14px; box-shadow: var(--schaduw-tegel);
  transition: border-color 160ms ease; }
.wbk-rij:hover { border-color: var(--c-groen); }
.wbk-rij.is-goed { border-left-color: var(--c-groen); }
.wbk-rij.is-let  { border-left-color: var(--c-amber); }
.wbk-rij.is-stop { border-left-color: var(--c-terra-d); }
.wbk-rij.is-rust { border-left-color: var(--c-lijn); }
@media (max-width: 1080px) {
  .wbk-rij { grid-template-columns: 34px minmax(0, 1fr); grid-auto-rows: min-content; }
  .wbk-rij .wbk-kol, .wbk-rij .wbk-akties { grid-column: 2; }
}

.wbk-avatar { width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center;
  justify-content: center; font-size: .64rem; font-weight: 800; letter-spacing: .02em;
  background: var(--c-groen-t); color: var(--c-groen-d); border: var(--lijndikte) solid var(--c-lijn); }

.wbk-kol { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .82rem; }
.wbk-kol b { font-weight: 700; }
.wbk-sub { font-size: .69rem; color: var(--c-ink-3); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; }
.wbk-kol--wacht { text-align: right; }
.wbk-kol--wacht b { font-size: .92rem; font-weight: 800; }
.wbk-kol--wacht b.is-goed { color: var(--c-groen-d); }
.wbk-kol--wacht b.is-let  { color: var(--c-amber); }
.wbk-kol--wacht b.is-stop { color: var(--c-terra-d); }
.wbk-kol--wacht b.is-rust { color: var(--c-ink-3); }

.wbk-stat { display: inline-block; align-self: flex-start; font-size: .64rem; font-weight: 700;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 9px; color: var(--c-ink-2); }
.wbk-stat.is-goed { border-color: var(--c-groen); color: var(--c-groen-d); }
.wbk-stat.is-let  { border-color: var(--c-amber); color: var(--c-amber); }

.wbk-akties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.wbk-akties .btn { padding: 5px 11px; font-size: .7rem; }

/* de opname zelf, in de drawer */
.wbk-opnamekaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wbk-opnamekaart p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--c-ink-2); }
.wbk-lijstje { margin: 0; padding-left: 16px; font-size: .74rem; color: var(--c-ink-2); line-height: 1.7; }
.wbk-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; line-height: 1.6; margin: 10px 0 0; }
.wbk-bijlagen { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }


/* WB1/WB4 · bron, tafelvoorstel en de halten per spoor in de rij */
.wbk-bron { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--lijn); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink2); vertical-align: middle; }
.wbk-bron.is-tafel { border-color: var(--let); color: var(--let); }
.wbk-halten { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.wbk-halte { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: var(--paneel); border: 1px solid var(--lijn); color: var(--ink2); }
.wbk-halte.is-tafelvoorstel { border-color: var(--let); color: var(--let); }
.wbk-halte.is-akkoord, .wbk-halte.is-doorgezet { border-color: var(--goed); color: var(--goed); }

/* ── opname.css ── */
/* opname.css — stap 1 van de werkstraat (bouwspec Verkoopstraat v7 §8, V2).
   Links wat er binnenkwam, rechts wat de binnendienst ermee doet. De
   stappenbalk bovenaan zegt waar je bent en waar je heen kunt; verder
   blijft het scherm een leesscherm. Alleen tokens. */
.opn-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.opn-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.opn-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.opn-sub { margin: 5px 0 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.6; }
.opn-kopakties { display: flex; gap: 6px; flex-wrap: wrap; }

/* de stappenbalk — één rij per spoor */
.opn-balk { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 7px 9px; }
.opn-spoorlabel { align-self: center; font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--c-ink-3); padding: 0 6px; }
.opn-stap { display: flex; align-items: baseline; gap: 7px; flex: 1; min-width: 150px; text-align: left;
  background: transparent; border: var(--lijndikte) solid transparent; border-radius: var(--radius);
  padding: 7px 11px; font-family: inherit; font-size: .78rem; color: var(--c-ink-2);
  transition: background 160ms ease, border-color 160ms ease; }
button.opn-stap { cursor: pointer; }
button.opn-stap:hover { background: #fff; border-color: var(--c-groen); color: var(--c-ink); }
.opn-stap b { font-family: var(--mono, ui-monospace), monospace; font-size: .66rem; font-weight: 800;
  color: var(--c-ink-3); }
.opn-stap em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.opn-stap.is-nu { background: #fff; border-color: var(--c-groen); color: var(--c-ink); font-weight: 700; }
.opn-stap.is-nu b { color: var(--c-groen-d); }
.opn-stap.is-uit { opacity: .55; }
.opn-nr { align-self: center; font-size: .64rem; color: var(--c-ink-3); padding: 0 6px; }

.opn-meld { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius); padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.opn-meld b { color: var(--c-ink); }

.opn-twee { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1020px) { .opn-twee { grid-template-columns: minmax(0, 1fr); } }
.opn-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.opn-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--schaduw-tegel); }
.opn-kaart.is-nadruk { border-color: var(--c-ink); }
.opn-kaart h3 { margin: 0 0 9px; font-size: .82rem; font-weight: 800; letter-spacing: -.01em; }

.opn-veld { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.opn-veld:first-of-type { border-top: 0; }
.opn-veld span { color: var(--c-ink-3); font-size: .7rem; }
.opn-veld b { text-align: right; font-weight: 700; }

.opn-notitie { margin-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 9px; }
.opn-notitie p { margin: 5px 0 0; font-size: .8rem; line-height: 1.65; color: var(--c-ink-2); }

.opn-bijlagen { display: flex; flex-direction: column; gap: 6px; }
.opn-bijlage { display: flex; align-items: center; gap: 9px; text-decoration: none;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 11px;
  color: var(--c-ink); transition: border-color 160ms ease; }
.opn-bijlage:hover { border-color: var(--c-groen); }
.opn-bijlage b { font-size: .76rem; font-weight: 700; display: block; }
.opn-bijlage em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.opn-bijicoon { color: var(--c-ink-3); font-size: .9rem; }

/* het akkoord aan tafel */
.opn-keuze { display: block; width: 100%; text-align: left; background: #fff; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 8px 11px; margin-bottom: 5px; font-family: inherit;
  transition: border-color 160ms ease, background 160ms ease; }
.opn-keuze:hover { border-color: var(--c-groen); }
.opn-keuze.is-nu { border-color: var(--c-groen); background: var(--c-groen-t); }
.opn-keuze b { font-size: .78rem; font-weight: 700; }
.opn-keuze em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); display: block; }
.opn-vb { margin-top: 8px; }

.opn-check { display: flex; gap: 9px; padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.opn-check:first-of-type { border-top: 0; }
.opn-check b { font-weight: 700; }
.opn-check em { font-style: normal; display: block; font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; }
.opn-vink { font-weight: 800; }
.opn-vink.is-goed { color: var(--c-groen-d); }
.opn-vink.is-let  { color: var(--c-amber); }
.opn-vink.is-stop { color: var(--c-rood); }

.opn-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; line-height: 1.6; margin: 9px 0 0; }
.opn-goed { font-size: .74rem; color: var(--c-groen-d); line-height: 1.6; margin: 9px 0 0; }

.opn-door { width: 100%; justify-content: center; margin-bottom: 6px; }
.opn-door em { font-style: normal; font-size: .66rem; opacity: .8; margin-left: 6px; }

.opn-tl { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 9px; font-size: .72rem;
  padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.opn-tl:first-of-type { border-top: 0; }
.opn-tl span:first-child { color: var(--c-ink-3); font-size: .64rem; }
.opn-tl em { font-style: normal; display: block; font-size: .66rem; color: var(--c-ink-3); line-height: 1.5; }


/* WB1/WB2 · app-opname en verschil opname ↔ offerte */
.opn-tabel { width: 100%; border-collapse: collapse; margin: 6px 0; }
.opn-tabel td { padding: 4px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.opn-tabel td:last-child, .opn-tabel td:nth-child(2) { text-align: right; }
.opn-tabel tr.opn-tot td { font-weight: 700; border-bottom: 0; }
.opn-verschil { border-left: 3px solid var(--goed); }
.opn-verschil.is-let { border-left-color: var(--let); }
.opn-verschil.is-stop { border-left-color: var(--stop); }
.opn-verschilrij { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.opn-verschilrij.opn-tot { font-weight: 700; border-top: 1px solid var(--lijn); margin-top: 4px; padding-top: 6px; }

/* ── commercie.css ── */
/* commercie.css — stap 3 van de werkstraat (Verkoopstraat v7 §3.2, V3).
   Links waar de prijs vandaan komt, rechts wat de klant betaalt en wat
   wij eraan overhouden. De poorten staan bovenaan: als er iets dicht is,
   moet je dat lezen vóór je gaat rekenen. Alleen tokens. */
.cm-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.cm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cm-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.cm-sub { margin: 5px 0 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.6; }
.cm-kopakties { display: flex; gap: 6px; flex-wrap: wrap; }

.cm-twee { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1020px) { .cm-twee { grid-template-columns: minmax(0, 1fr); } }
.cm-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.cm-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--schaduw-tegel); }
.cm-kaart h3 { margin: 0 0 9px; font-size: .82rem; font-weight: 800; letter-spacing: -.01em; }

.cm-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 13px; font-size: .77rem; line-height: 1.6; color: var(--c-ink-2); background: var(--c-paneel); }
.cm-meld + .cm-meld { margin-top: 8px; }
.cm-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.cm-meld.is-let  { background: var(--c-amber-t); border-color: var(--c-amber); }
.cm-meld.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); }
.cm-meld b { color: var(--c-ink); }
.cm-meld em { font-style: normal; display: block; margin-top: 4px; font-size: .66rem; color: var(--c-ink-3); }
.cm-meld .btn { margin-top: 8px; }

/* de rekenstaat */
.cm-rij { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.cm-rij:first-of-type { border-top: 0; }
.cm-rij span { color: var(--c-ink-2); }
.cm-rij b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-rij.is-korting b { color: var(--c-amber); }
.cm-rij.is-totaal { border-top-width: 2px; border-top-color: var(--c-ink); padding-top: 9px; margin-top: 3px; }
.cm-rij.is-totaal span { color: var(--c-ink); font-weight: 700; }
.cm-rij.is-totaal b { font-size: 1.05rem; font-weight: 800; }
.cm-rij.is-klein { font-size: .7rem; padding: 3px 0; border-top: 0; }
.cm-rij.is-klein span, .cm-rij.is-klein b { color: var(--c-ink-3); font-weight: 400; }

.cm-akties { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* marge */
.cm-marge { display: flex; align-items: center; gap: 14px; padding: 4px 0 10px; }
.cm-cijfer { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.cm-marge.is-goed .cm-cijfer { color: var(--c-groen-d); }
.cm-marge.is-let .cm-cijfer  { color: var(--c-amber); }
.cm-marge.is-blok .cm-cijfer { color: var(--c-rood); }
.cm-margetekst { font-size: .76rem; line-height: 1.55; color: var(--c-ink-2); }
.cm-margetekst em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

/* regels */
.cm-tabel { width: 100%; border-collapse: collapse; font-size: .76rem; }
.cm-tabel th { text-align: left; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; padding: 0 8px 6px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.cm-tabel th:nth-child(n+2), .cm-tabel td:nth-child(n+2) { text-align: right; }
.cm-tabel th:last-child, .cm-tabel td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.cm-tabel td { padding: 7px 8px 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn);
  vertical-align: top; font-variant-numeric: tabular-nums; }
.cm-tabel tr.is-onder td { background: var(--c-amber-t); }
.cm-tabel td.is-onder { color: var(--c-amber); font-weight: 700; }
.cm-tabel .btn { padding: 3px 9px; font-size: .66rem; }
.cm-hand, .cm-lijst { font-style: normal; display: block; font-size: .65rem; color: var(--c-ink-3); line-height: 1.45; }

.cm-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; line-height: 1.6; margin: 10px 0 0; }
.cm-let b { font-style: normal; color: var(--c-ink-2); }

/* versies (V4, besluit 4) — v1 ligt bij de klant en verandert niet meer */
.cm-versies { display: flex; flex-direction: column; gap: 6px; }
.cm-versie { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 11px; font-family: inherit;
  transition: border-color 160ms ease; }
.cm-versie:hover { border-color: var(--c-groen); }
.cm-versie.is-verstuurd { border-left-color: var(--c-groen); }
.cm-versie.is-vervangen { border-left-color: var(--c-lijn); opacity: .72; }
.cm-versie.is-concept   { border-left-color: var(--c-amber); }
.cm-versie.is-nu { background: var(--c-paneel); }
.cm-vnr { font-size: .72rem; font-weight: 800; color: var(--c-ink-3); padding-top: 1px; }
.cm-vtekst b { font-size: .76rem; font-weight: 700; display: block; }
.cm-vtekst em { font-style: normal; display: block; font-size: .66rem; color: var(--c-ink-3); line-height: 1.5; }

/* documenten (V5, besluit 7) — het papier dat de klant heeft */
.cm-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cm-doc { display: flex; align-items: flex-start; gap: 9px; text-align: left; width: 100%; cursor: pointer;
  background: #fff; font-family: inherit; color: var(--c-ink);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 11px;
  transition: border-color 160ms ease; }
.cm-doc:hover { border-color: var(--c-groen); }
.cm-doc b { font-size: .76rem; font-weight: 700; display: block; }
.cm-doc em { font-style: normal; display: block; font-size: .64rem; color: var(--c-ink-3); line-height: 1.5; }
.cm-docicoon { color: var(--c-ink-3); font-size: .9rem; padding-top: 1px; }

/* ── maatregelen.css ── */
/* maatregelen.css — stap 2 van de isolatiekant (Verkoopstraat v7 §3.3, V7).
   Eén kaart per maatregel: wat het kost, wat het ons kost, en of de klant
   zijn subsidie haalt. Dat laatste is het venijn — het minimum geldt per
   maatregel, niet over de offerte. Alleen tokens. */
.mt-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.mt-hoofd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mt-hoofd h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.mt-sub { margin: 5px 0 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.6; }
.mt-akties { display: flex; gap: 6px; flex-wrap: wrap; }

.mt-twee { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1020px) { .mt-twee { grid-template-columns: minmax(0, 1fr); } }
.mt-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.mt-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--schaduw-tegel); border-left: 3px solid var(--c-lijn); }
.mt-kaart.is-goed { border-left-color: var(--c-groen); }
.mt-kaart.is-let  { border-left-color: var(--c-amber); }
.mt-kaart.is-marge { border-left-color: var(--c-terra-d); }
.mt-kaart h3 { margin: 0 0 9px; font-size: .82rem; font-weight: 800; letter-spacing: -.01em; }

.mt-kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.mt-kop b { font-size: .88rem; font-weight: 800; }
.mt-rek { flex: 1; }
.mt-rd { font-size: .62rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 99px; padding: 2px 9px; color: var(--c-ink-3); }
.mt-kop .btn { padding: 3px 9px; font-size: .66rem; }

.mt-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px;
  padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.mt-rooster span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-rooster em { font-style: normal; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.mt-rooster b { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-rooster b.is-onder { color: var(--c-terra-d); }
.mt-hand { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

.mt-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 12px; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2);
  background: var(--c-paneel); margin-top: 8px; }
.mt-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.mt-meld.is-let  { background: var(--c-amber-t); border-color: var(--c-amber); }
.mt-meld b { color: var(--c-ink); }

/* de catalogus: wat er nog bij kan */
.mt-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.mt-keuze { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 12px; font-family: inherit; transition: border-color 160ms ease; }
.mt-keuze:hover:not(:disabled) { border-color: var(--c-groen); }
.mt-keuze:disabled { opacity: .55; cursor: default; }
.mt-keuze b { font-size: .78rem; font-weight: 700; }
.mt-keuze em, .mt-keuze i { font-style: normal; font-size: .65rem; color: var(--c-ink-3); line-height: 1.45; }

.mt-groot { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--c-ink); }
.mt-isde .mt-groot { color: var(--c-groen-d); }

.mt-rij { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; margin-top: 8px; }
.mt-rij span { color: var(--c-ink-2); }
.mt-rij b { font-weight: 700; font-variant-numeric: tabular-nums; }

.mt-let { font-size: .72rem; color: var(--c-ink-3); line-height: 1.6; margin: 8px 0 0; }
.mt-let b { color: var(--c-ink-2); }
.mt-door { width: 100%; margin-top: 10px; justify-content: center; }

/* ── vkbeheer.css ── */
/* vkbeheer.css — de regels van de verkoopstraat (Verkoopstraat v7 §8, V8).
   Vier blokken onder elkaar, elk met zijn regelsetversie zichtbaar in de
   kop. Dat is geen detail: het is de reden dat een oude offerte over een
   jaar nog uit te leggen valt. Alleen tokens. */
.vbr-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.vbr-hoofd h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.vbr-lead { margin: 6px 0 0; max-width: 70ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }

.vbr-blokken { display: flex; flex-direction: column; gap: 12px; }
.vbr-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--schaduw-tegel); }
.vbr-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vbr-kop h3 { margin: 0; font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.vbr-versie { text-align: right; font-size: .64rem; color: var(--c-ink-3); white-space: nowrap;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 6px 11px; line-height: 1.5; }
.vbr-versie em { font-style: normal; }

.vbr-tabel { width: 100%; border-collapse: collapse; margin-top: 11px; }
.vbr-tabel th { text-align: left; vertical-align: top; width: 170px; padding: 8px 12px 8px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; font-weight: 700; color: var(--c-ink-2); }
.vbr-tabel td { padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.vbr-w { display: inline-flex; flex-direction: column; gap: 1px; margin: 0 18px 6px 0; }
.vbr-w em { font-style: normal; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.vbr-w b { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.vbr-akties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.vbr-let { font-size: .72rem; color: var(--c-ink-3); line-height: 1.6; margin: 5px 0 0; }
.vbr-groep { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 10px; margin-top: 10px; }
.vbr-groep:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.vbr-meld { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px 13px; font-size: .75rem; line-height: 1.6;
  color: var(--c-ink-2); margin-top: 12px; }
.vbr-meld b { color: var(--c-ink); }

/* de marge-ondergrens per maatregel: haalt de prijslijst hem? */
.vbr-tabel tr.is-let th { color: var(--c-amber); }
.vbr-waar, .vbr-ok, .vbr-toel { font-style: normal; display: block; font-weight: 400;
  font-size: .64rem; line-height: 1.45; margin-top: 2px; }
.vbr-waar { color: var(--c-amber); }
.vbr-ok, .vbr-toel { color: var(--c-ink-3); }

/* MG1 · een waarde die uit de productcategorie komt is hier alleen te lezen;
   aanpassen doe je in het blok «Minimale marge per productcategorie». */
.vbr-w--afgeleid b { color: var(--c-ink-2); }
.vbr-w--afgeleid em::after { content: " ↗"; color: var(--c-ink-3, var(--c-ink-2)); }

/* ── support.css ── */
/* support.css — Meldingen (bouwspec SUPPORT §2.1, fase S1).

   Kleurkeuze: rood (terra-d) is hier voorbehouden aan wat écht klem zit —
   geen woning gekoppeld, een klant die na het sluiten zegt dat het niet
   opgelost is, en een verlopen reactienorm. Alles wat alleen aandacht
   vraagt is amber. De WIP-limiet kleurt amber en niet rood: hij is een
   signaal, geen blokkade (§2.1).

   Dit scherm is breder dan de moduleregel van 1240px omdat het een bord
   met vijf kolommen én het dossier naast elkaar draagt — de vastgelegde
   uitzondering voor borden. Alleen tokens, geen losse hex of schaduw. */

.sup-wortel { max-width: 1360px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.sup-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sup-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.sup-kicker { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--c-ink-3); margin: 0; }
.sup-lead { margin: 6px 0 0; max-width: 64ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.sup-regelset { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3);
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px;
  padding: 5px 11px; white-space: nowrap; }

/* ---- signaalstrip: één regel per signaal ---- */
.sup-sig { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: var(--c-paneel); overflow: hidden; }
.sup-sig.is-goed { background: var(--c-groen-t); border-color: var(--c-groen);
  padding: 11px 14px; font-size: .78rem; color: var(--c-ink-2); }
.sup-sig.is-goed b { color: var(--c-ink); }
.sup-sigkop { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: none; border: 0; padding: 10px 14px; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 700; color: var(--c-ink-2); text-align: left; }
.sup-caret { color: var(--c-ink-3); }
.sup-sigrijen { display: flex; flex-direction: column; border-top: var(--lijndikte) solid var(--c-lijn); }
.sup-sigrij { display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 9px 14px; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn);
  cursor: pointer; font: inherit; font-size: .76rem; color: var(--c-ink-2); text-align: left;
  transition: background 160ms ease; }
.sup-sigrij:first-child { border-top: 0; }
.sup-sigrij:hover { background: var(--c-paneel-2); }
.sup-sigrij b { font-family: var(--font-mono); color: var(--c-ink); }
.sup-bol { width: 8px; height: 8px; border-radius: 99px; background: var(--c-lijn); }
.sup-sigrij.is-stop .sup-bol { background: var(--c-terra-d); }
.sup-sigrij.is-let .sup-bol { background: var(--c-amber); }
.sup-nrs { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); white-space: nowrap; }

/* ---- filters + weergave-schakelaar ---- */
.sup-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sup-schakel { display: inline-flex; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 99px; overflow: hidden; background: var(--c-paneel); }
.sup-sch { border: 0; background: none; padding: 7px 16px; font: inherit; font-size: .74rem;
  font-weight: 700; color: var(--c-ink-3); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.sup-sch.is-aan { background: var(--c-groen); color: #fff; }
.sup-vld { display: flex; flex-direction: column; gap: 4px; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; }
.sup-vld input, .sup-vld select { font: inherit; font-size: .78rem; text-transform: none;
  letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 7px 10px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; min-width: 170px; }
.sup-vld input[type="search"] { min-width: 260px; }

/* ---- het vlak: links de lijst of het bord, rechts het dossier ---- */
.sup-vlak { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.sup-vlak.is-open { grid-template-columns: minmax(0, 1fr) 440px; }
@media (max-width: 1180px) { .sup-vlak.is-open { grid-template-columns: minmax(0, 1fr); } }
.sup-links { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.sup-hoofd { margin: 6px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.sup-niets { font-size: .74rem; color: var(--c-ink-3); margin: 4px 0; }
.sup-lijst { display: flex; flex-direction: column; gap: 8px; }

/* één rij per melding — links de ernstkleur, rechts de klok */
.sup-rij { display: grid; align-items: center; gap: 12px; width: 100%; text-align: left;
  grid-template-columns: 22px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 128px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer; font: inherit;
  box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease; }
.sup-rij:hover { border-color: var(--c-groen); }
.sup-rij.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-rij.is-goed { border-left-color: var(--c-groen); }
.sup-rij.is-let  { border-left-color: var(--c-amber); }
.sup-rij.is-stop { border-left-color: var(--c-terra-d); }
.sup-rij.is-rust { border-left-color: var(--c-lijn); }
.sup-soortbol { font-size: .9rem; color: var(--c-ink-3); text-align: center; }
.sup-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .8rem; color: var(--c-ink); }
.sup-cel b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-cel em { font-style: normal; font-size: .68rem; color: var(--c-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-leeg { font-style: normal; color: var(--c-amber); }
.sup-klok { display: flex; flex-direction: column; gap: 2px; text-align: right;
  font-family: var(--font-mono); font-size: .72rem; color: var(--c-ink); }
.sup-klok em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
@media (max-width: 1080px) {
  .sup-rij { grid-template-columns: 22px minmax(0, 1fr) 110px; }
  .sup-rij .sup-kanaal, .sup-rij .sup-eig { display: none; }
}

/* ---- het bord: vijf fasen, WIP als signaal ---- */
.sup-bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.sup-kolom { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px; }
.sup-kolom > header { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .74rem; }
.sup-wip { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 8px; background: #fff; }
.sup-wip.is-over { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); }
.sup-kolom.is-vol { border-color: var(--c-amber); }
.sup-wipuitleg { margin: 0; font-size: .66rem; line-height: 1.5; color: var(--c-ink-3); }
.sup-kaart { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 11px; cursor: pointer; font: inherit; box-shadow: var(--schaduw-tegel);
  transition: border-color 160ms ease; }
.sup-kaart:hover { border-color: var(--c-groen); }
.sup-kaart.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-kaartkop { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: .62rem; color: var(--c-ink-3); }
.sup-kaart b { font-size: .76rem; line-height: 1.4; color: var(--c-ink); }
.sup-kaart em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); }
.sup-kaartklok { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); }
.sup-kaartklok.is-stop { color: var(--c-terra-d); }
.sup-kaartklok.is-let { color: var(--c-amber); }

/* ---- het dossier: de rechterhelft, geen tweede scherm ---- */
.sup-dossier { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 16px 18px; }
.sup-dossier.is-leeg { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.sup-uitleg { margin: 0; font-size: .7rem; line-height: 1.6; color: var(--c-ink-3); }
.sup-doskop h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 0; line-height: 1.35; }
.sup-dossub { margin: 4px 0 0; font-size: .72rem; color: var(--c-ink-2); }
.sup-rood { color: var(--c-terra-d); font-weight: 700; }

.sup-watnu { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; }
.sup-watnu.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); }
.sup-watnu.is-let { background: var(--c-amber-t); border-color: var(--c-amber); }
.sup-watnu b { font-size: .82rem; }
.sup-watnu span { font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); }

.sup-feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; overflow: hidden; }
.sup-feit { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px;
  padding: 7px 12px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; }
.sup-feit:first-child { border-top: 0; }
.sup-feit span { color: var(--c-ink-3); }
.sup-feit b { font-weight: 600; color: var(--c-ink); word-break: break-word; }

.sup-blok { display: flex; flex-direction: column; gap: 8px; }
.sup-blok h3 { font-size: .78rem; font-weight: 800; margin: 0; }
.sup-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.sup-wissel { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; }
.sup-wissel .sup-vld input, .sup-wissel .sup-vld select { min-width: 0; width: 100%; }

.sup-tijdlijn { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex;
  flex-direction: column; gap: 10px; border-left: var(--lijndikte) solid var(--c-lijn); }
.sup-tijdlijn li { display: flex; flex-direction: column; gap: 2px; position: relative;
  font-size: .74rem; line-height: 1.55; color: var(--c-ink); }
.sup-tijdlijn li::before { content: ""; position: absolute; left: -18px; top: 6px;
  width: 7px; height: 7px; border-radius: 99px; background: var(--c-lijn); }
.sup-tijdlijn li.is-in::before { background: var(--c-groen); }
.sup-tijdlijn li.is-uit::before { background: var(--c-ink-3); }
.sup-tijdlijn li.is-escalatie::before { background: var(--c-terra-d); }
.sup-tlkop { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); }

.sup-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sup-audit li { font-size: .72rem; line-height: 1.5; color: var(--c-ink-2); }
.sup-audit b { color: var(--c-ink); }
.sup-audit em { display: block; font-style: normal; font-family: var(--font-mono);
  font-size: .6rem; color: var(--c-ink-3); }

/* ═══ S2 · de handelingen op een melding ════════════════════════════

   Zeven knoppen op een rij, en één paneel tegelijk eronder. De knoppen
   zijn bewust klein en gelijk: alleen wat nú het meest voor de hand ligt
   (oppakken, of het eerste antwoord) krijgt de primaire vorm. */
.sup-acties { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-acties .bs-knop.is-aan { border-color: var(--c-groen); }

.sup-paneel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius);
  background: var(--c-paneel); }
.sup-paneelkop { margin: 0; font-size: .82rem; font-weight: 800; }
.sup-form { display: flex; flex-direction: column; gap: 10px; }
.sup-form .bs-knop { align-self: flex-start; }
.sup-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }

/* zoekresultaten bij «woning koppelen»: één regel per adres, klikbaar */
.sup-treffers { display: flex; flex-direction: column; gap: 4px; }
.sup-treffer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center; gap: 10px; text-align: left; font: inherit; font-size: .74rem;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 8px 12px; cursor: pointer; transition: border-color 160ms ease; }
.sup-treffer:hover { border-color: var(--c-groen); }
.sup-treffer em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

@media (max-width: 1080px) {
  .sup-treffer { grid-template-columns: minmax(0, 1fr) auto; }
  .sup-treffer > span:nth-child(2) { display: none; }
}

/* ═══ S3 · de intake ════════════════════════════════════════════════

   Drie stappen in een overlay. Bewust een modaal en geen apart scherm:
   de intake gebeurt met een klant aan de lijn, en dan wil je de lijst
   erachter kunnen laten staan. */
.sup-kopacties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sup-overlay { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 20px;
  background: color-mix(in srgb, var(--c-ink) 42%, transparent); overflow-y: auto; }
.sup-modaal { width: min(940px, 100%); display: flex; flex-direction: column;
  background: var(--c-paneel-2, #fff); border-radius: var(--radius);
  border: var(--lijndikte) solid var(--c-lijn); box-shadow: var(--schaduw-tegel); }
.sup-modkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sup-modkop > b { font-size: .92rem; }
.sup-stappen { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0;
  font-size: .68rem; color: var(--c-ink-3); }
.sup-stappen li.is-nu { color: var(--c-ink); font-weight: 800; }
.sup-stappen li.is-klaar { color: var(--c-groen-d); }
.sup-modkop .bs-knop { margin-left: auto; }
.sup-modlijf { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sup-modtitel { margin: 0; font-size: 1rem; font-weight: 800; }
.sup-modvoet { display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); }
.sup-vul { flex: 1; }

.sup-woningkaart { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); background: var(--c-groen-t); }
.sup-woningkaart .sup-feiten { background: #fff; }
.sup-woningkaart .bs-knop { align-self: flex-start; }
.sup-feit b em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); font-weight: 500; }

.sup-normregel { font-size: .74rem; color: var(--c-ink-2); padding: 8px 12px;
  background: var(--c-paneel); border-radius: var(--radius); }
.sup-vink { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; line-height: 1.5; }
.sup-link { background: none; border: 0; padding: 0; font: inherit; color: var(--c-groen-d);
  text-decoration: underline; cursor: pointer; }
.sup-zacht { color: var(--c-ink-3); }

@media (max-width: 720px) {
  .sup-overlay { padding: 12px; }
  .sup-stappen { display: none; }
}

/* ═══ S4 · besluiten ════════════════════════════════════════════════ */
.sup-peillijst { display: flex; flex-direction: column; gap: 6px; }
.sup-besluitrij { display: grid; align-items: baseline; gap: 4px 12px;
  grid-template-columns: minmax(0, 160px) 90px minmax(0, 1fr);
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 8px 12px; font-size: .74rem; }
.sup-besluitrij em { grid-column: 1 / -1; font-style: normal; font-family: var(--font-mono);
  font-size: .6rem; color: var(--c-ink-3); }
@media (max-width: 900px) {
  .sup-besluitrij { grid-template-columns: minmax(0, 1fr) 80px; }
  .sup-besluitrij > span:last-of-type { grid-column: 1 / -1; }
}

/* ═══ S5 · de twee handtekeningen ═══════════════════════════════════

   Naast elkaar, want dat is de vraag: wie heeft getekend en wie nog
   niet. Een gezette handtekening krijgt de groene rand; een lege blijft
   neutraal — dit is geen blokkade maar een stap die nog moet. */
.sup-handtekeningen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.sup-handtekening { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; }
.sup-handtekening.is-gezet { border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-hkop { font-size: .72rem; font-weight: 800; }
.sup-handtekening em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.sup-handtekening b { font-size: .76rem; color: var(--c-groen-d); }

.sup-chip { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.sup-chip.is-goed { color: var(--c-groen-d); border-color: var(--c-groen); background: var(--c-groen-t); }
.sup-chip.is-let { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); }

/* ═══ criterium 12 · de bevroren factuur ════════════════════════════
   Amber, niet rood: er is niets kapot, er staat iets stil. Rood blijft
   voor blokkades. */
.sup-geschil { padding: 12px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); background: #fff; }
.sup-geschil.is-bevroren { border-color: var(--c-amber); background: var(--c-amber-t); }
.sup-geschil .sup-chip { border-color: var(--c-amber); color: var(--c-amber); background: #fff; }

/* ═══ de tabbenbalk van Support ═════════════════════════════════════ */
.sup-tabs { display: flex; gap: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sup-tab { padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--c-ink-3);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease; }
.sup-tab:hover { color: var(--c-ink); }
.sup-tab.is-aan { color: var(--c-ink); border-bottom-color: var(--c-groen); }

/* ═══ S6 · faalkosten en verhaal ════════════════════════════════════

   De balk toont de verhouding, niet het bedrag — dat staat ernaast in
   cijfers. Wie de verdeling ziet weet met wie hij het gesprek moet
   voeren; wie alleen het totaal ziet, weet dat niet. */
.sup-balken { display: flex; flex-direction: column; gap: 8px; }
.sup-balkrij { display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 90px 130px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 12px; font-size: .76rem; }
.sup-balklabel { display: flex; flex-direction: column; }
.sup-balklabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sup-balk { height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.sup-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-terra); }
.sup-balksub { font-size: .68rem; color: var(--c-ink-3); }
.sup-subs { grid-column: 1 / -1; font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.sup-betalers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sup-betaler { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--c-paneel); border-radius: var(--radius); font-size: .74rem; }
.sup-betaler b { font-size: .92rem; }
.sup-betaler em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.sup-verhaalrij { display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1.4fr) 90px 110px minmax(0, 1.6fr) 130px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; }
.sup-verhaalrij.is-betwist { border-left-color: var(--c-amber); }
.sup-verhaalrij.is-verrekend { border-left-color: var(--c-groen); }
.sup-verhaalrij.is-afgeboekt { border-left-color: var(--c-terra-d); }
.sup-verhaalreden { font-size: .7rem; color: var(--c-ink-2); }
.sup-verhaalreden em { display: block; font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sup-verhaalform { grid-column: 1 / -1; margin-top: 6px; }
.sup-rijknoppen { display: flex; justify-content: flex-end; }

@media (max-width: 1080px) {
  .sup-balkrij { grid-template-columns: minmax(0, 1fr) 90px; }
  .sup-balkrij > .sup-balk, .sup-balkrij > .sup-balksub { display: none; }
  .sup-verhaalrij { grid-template-columns: minmax(0, 1fr) 90px 110px; }
  .sup-verhaalrij > .sup-verhaalreden { grid-column: 1 / -1; }
}

/* ═══ S7 · contracten en planbaar werk ══════════════════════════════

   De planbare regel draagt de rand als kleurcode: neutraal is «komt
   eraan», amber «te laat maar het kan nog», terra «gemist». Die laatste
   verdwijnt niet uit beeld — de verplichting verdwijnt ook niet. */
.sup-planrij { display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 70px 170px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; }
.sup-planrij.is-telaat { border-left-color: var(--c-amber); }
.sup-planrij.is-gemist { border-left-color: var(--c-terra-d); background: var(--c-terra-t); }
.sup-planrij.is-uitgevoerd { border-left-color: var(--c-groen); }
.sup-planrij .sup-cel em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.sup-planform { grid-column: 1 / -1; margin-top: 6px; }

@media (max-width: 1080px) {
  .sup-planrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; }
  .sup-planrij > .mono, .sup-planrij > .sup-cel:nth-child(2) { display: none; }
}

/* open punten uit de bouwspec: geen signaalstrip maar een notitie —
   dit is werk voor Michiel, niet voor de supportmedewerker */
.sup-openpunten { display: flex; flex-direction: column; gap: 6px;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-left: 3px solid var(--c-amber); border-radius: var(--radius); padding: 12px 14px; }
.sup-openpunten b { font-size: .76rem; }
.sup-openpunten p { margin: 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2); max-width: 82ch; }

/* ═══ S8 · patronen en beheer ═══════════════════════════════════════

   Een patroon is uitklapbaar: de kop zegt hoeveel en waarheen, het lijf
   toont welke meldingen het zijn. Wie alleen de kop leest weet genoeg om
   te beslissen of hij verder kijkt. */
.sup-patroon { background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-left: 3px solid var(--c-amber); border-radius: var(--radius); overflow: hidden; }
.sup-patroon.is-opgepakt { border-left-color: var(--c-groen); }
.sup-patroonkop { display: grid; align-items: center; gap: 12px; width: 100%;
  grid-template-columns: minmax(0, 1.6fr) 50px minmax(0, 1fr) 120px;
  text-align: left; font: inherit; font-size: .78rem; background: none; border: 0;
  padding: 10px 12px; cursor: pointer; }
.sup-patroonkop:hover { background: var(--c-paneel); }
.sup-patroonkop em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.sup-patroonlijf { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.sup-patroonrij { display: grid; align-items: baseline; gap: 12px;
  grid-template-columns: 118px minmax(0, 1.6fr) minmax(0, 1fr) 70px; font-size: .74rem;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); }

.sup-recallrij { display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 100px 110px 110px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-terra-d);
  border-radius: var(--radius); padding: 10px 12px; font-size: .76rem; }
.sup-recallrij.is-afgerond { border-left-color: var(--c-groen); }
.sup-recalladressen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.sup-adres { font-size: .64rem; background: var(--c-paneel); border-radius: 99px; padding: 2px 8px; }
/* een adres zonder melding is juist het adres dat je moet bellen */
.sup-adres.is-stil { background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; }

.sup-beheervelden { display: flex; flex-direction: column; gap: 4px; }
.sup-beheerveld { background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 12px; }
.sup-beheerveld.is-open { border-color: var(--c-groen); }
.sup-beheerrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1.6fr) 190px minmax(0, 1fr) 96px; font-size: .76rem; }
.sup-beheerlabel { display: flex; flex-direction: column; gap: 1px; }
.sup-beheerlabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sup-beheerrij .bs-knop { justify-self: end; }
.sup-beheerveld .sup-form { margin-top: 10px; }

.sup-versies { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-versie { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3);
  background: var(--c-paneel); border-radius: var(--radius); padding: 4px 9px; }
.sup-versie.is-nu { color: var(--c-groen-d); background: var(--c-groen-t); }
.sup-versie em { font-style: normal; }

.sup-sjabloonrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1fr) 110px 80px; font-size: .76rem;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; }
.sup-sjabloonrij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

@media (max-width: 1080px) {
  .sup-patroonkop { grid-template-columns: minmax(0, 1fr) 50px 110px; }
  .sup-patroonkop > .sup-cel:nth-child(3) { display: none; }
  .sup-patroonrij { grid-template-columns: 110px minmax(0, 1fr); }
  .sup-patroonrij > span:nth-child(3), .sup-patroonrij > span:nth-child(4) { display: none; }
  .sup-recallrij { grid-template-columns: minmax(0, 1fr) 100px 110px; }
  .sup-recallrij > .sup-cel:nth-child(2), .sup-recallrij > .sup-zacht { display: none; }
  .sup-beheerrij { grid-template-columns: minmax(0, 1fr) 150px 90px; }
  .sup-beheerrij > span:nth-child(3) { display: none; }
}

/* ── matvoorraad.css ── */
/* matvoorraad.css — Voorraad & hub (bouwspec VOORRAAD §2.2, fase V1).

   Kleurkeuze: de rem is geen fout maar een feit — hij krijgt een groene
   nadruk zolang er boven het bestelpunt gewerkt kan worden, en terra
   zodra dat niet meer zo is. Rood (terra-d) blijft voor de IBC's die niet
   sluiten: daar is niet gescand, en dat blokkeert straks een factuur.
   Onbalans is amber: geld dat stilstaat is een signaal, geen blokkade.
   Alleen tokens, geen losse hex of schaduw. */

.vrd-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 16px; }

.vrd-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vrd-kop > div { flex: 1 1 480px; min-width: 0; }
.vrd-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.vrd-kicker { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--c-ink-3); margin: 0; }
.vrd-lead { margin: 6px 0 0; max-width: 64ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.vrd-regelset { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3);
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px;
  padding: 5px 11px; white-space: nowrap; }

.vrd-tabs { display: flex; gap: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vrd-tab { padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--c-ink-3);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease; }
.vrd-tab:hover { color: var(--c-ink); }
.vrd-tab.is-aan { color: var(--c-ink); border-bottom-color: var(--c-groen); }

.vrd-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); background: var(--c-paneel); }
.vrd-meld.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); }
.vrd-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.vrd-meld b { color: var(--c-ink); }

.vrd-blok { display: flex; flex-direction: column; gap: 10px; }
.vrd-blok h2 { font-size: 15px; font-weight: 800; margin: 4px 0 0; letter-spacing: -.01em; }
.vrd-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vrd-acties { display: flex; gap: 8px; }
.vrd-uitleg { margin: 0; max-width: 78ch; font-size: .72rem; line-height: 1.6; color: var(--c-ink-3); }

/* De zin die de klant leest. Apart gezet omdat dit géén toelichting is
   maar een belofte: hier staat waarop straks gefactureerd wordt. */
.vrd-offertetekst { max-width: 78ch; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); background: var(--c-paneel-2); display: flex; flex-direction: column; gap: 4px; }
.vrd-offertetekst b { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.vrd-offertetekst p { margin: 0; font-size: .76rem; line-height: 1.6; color: var(--c-ink); }
.vrd-offertetekst em { font-size: .68rem; color: var(--c-ink-3); font-style: normal; }

/* ---- dekking per component: de kern van het scherm ---- */
.vrd-comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.vrd-comp { display: flex; flex-direction: column; gap: 8px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--schaduw-tegel); }
.vrd-comp.is-rem { border-color: var(--c-groen); }
.vrd-comp > header { display: flex; align-items: flex-start; gap: 10px; }
.vrd-code { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--c-ink);
  background: var(--c-paneel); border-radius: var(--radius); padding: 3px 9px; }
.vrd-comp header b { display: block; font-size: .8rem; font-weight: 700; }
.vrd-comp header em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.vrd-rembadge { margin-left: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: #fff; background: var(--c-groen); border-radius: 99px; padding: 3px 9px; }

.vrd-dekking { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; }
.vrd-dekking b { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.vrd-dekking span { font-size: .7rem; color: var(--c-ink-3); }

.vrd-balk { position: relative; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: visible; }
.vrd-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-sage); }
.vrd-comp.is-rem .vrd-balk i { background: var(--c-groen); }
/* het bestelpunt als streepje: je ziet meteen of je erboven of eronder zit */
.vrd-balk u { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--c-ink-3); text-decoration: none; }

.vrd-cijfers { display: flex; gap: 16px; margin: 2px 0 0; }
.vrd-cijfers div { display: flex; flex-direction: column; gap: 1px; }
.vrd-cijfers dt { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.vrd-cijfers dd { margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--c-ink); }
.vrd-perloc { margin: 0; font-size: .66rem; color: var(--c-ink-3); }

/* ---- IBC's die niet sluiten ---- */
.vrd-scheef { display: flex; flex-direction: column; gap: 6px; }
.vrd-scheefrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 82px minmax(0, 1.4fr) 120px minmax(0, 1fr) 90px;
  background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra-d);
  border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; }
.vrd-scheefrij .vrd-verschil { text-align: right; font-family: var(--font-mono); color: var(--c-terra-d); }

/* ---- het register ---- */
.vrd-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vrd-vld { display: flex; flex-direction: column; gap: 4px; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; }
.vrd-vld input, .vrd-vld select { font: inherit; font-size: .78rem; text-transform: none;
  letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 7px 10px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; min-width: 170px; }
.vrd-vld input[type="search"] { min-width: 240px; }

.vrd-tabel { display: flex; flex-direction: column; gap: 4px; }
/* .vrd-tkop is de kolomkop van de tabel — bewust een andere naam dan
   .vrd-kop (de paginakop), anders erft de leadtekst zijn kapitalen. */
.vrd-tkop, .vrd-rij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 88px 110px minmax(0, 1.6fr) 84px 84px 84px 76px; }
.vrd-tkop { padding: 0 12px; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.vrd-rij { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 12px; font-size: .76rem; }
.vrd-rij.is-scheef { border-left-color: var(--c-terra-d); }
.vrd-rij.is-extern { border-left-color: var(--c-sage); }
.vrd-rij em { font-style: normal; color: var(--c-ink-3); font-size: .68rem; }
.vrd-rood { color: var(--c-terra-d); font-weight: 700; }
.vrd-rijknoppen { display: flex; gap: 6px; justify-content: flex-end; }
.vrd-uitgifte { margin: 0 0 4px; }
/* De verbruikstabel heeft hieronder een eigen smalle indeling: daar is de
   afwijking het getal waar het scherm om draait, en die mag niet als
   eerste wegvallen. */
@media (max-width: 1080px) {
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop,
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij { grid-template-columns: 88px minmax(0, 1fr) 84px 150px; }
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop span:nth-child(2),
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij > span:nth-child(2),
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop span:nth-child(5),
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij > span:nth-child(5),
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop span:nth-child(6),
  .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij > span:nth-child(6) { display: none; }
}

/* ---- formulieren ---- */
.vrd-form { display: flex; flex-direction: column; gap: 10px; background: var(--c-paneel);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; }
.vrd-formkop { margin: 0; font-size: .82rem; font-weight: 800; }
.vrd-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.vrd-form .bs-knop { align-self: flex-start; }

/* ═══ V2 · Vandaag in de hub ════════════════════════════════════════
   Eén blok per ploegdag. De rand links draagt de stand: groen als alles
   klaarstaat, amber als er nog gepakt moet worden, terra als de dag niet
   rondkomt. Rood is hier op zijn plaats — een ploeg die zonder materiaal
   uitrijdt is een verloren dag, geen signaal. */
.vrd-meld.is-let { background: var(--c-amber-t); border-color: var(--c-amber); }
.vrd-zacht { color: var(--c-ink-3); }

.vrd-dagen { display: flex; flex-direction: column; gap: 12px; }
.vrd-dag { display: flex; flex-direction: column; gap: 10px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--schaduw-tegel); }
.vrd-dag.is-goed { border-left-color: var(--c-groen); }
.vrd-dag.is-let  { border-left-color: var(--c-amber); }
.vrd-dag.is-stop { border-left-color: var(--c-terra-d); }
.vrd-dag > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vrd-dag header b { font-size: .88rem; font-weight: 800; }
.vrd-dag header em { display: block; font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.vrd-chip { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.vrd-chip.is-stop { color: var(--c-terra-d); border-color: var(--c-terra-d); background: var(--c-terra-t); }

.vrd-klussen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vrd-klussen li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
  gap: 10px; align-items: baseline; font-size: .74rem; }
.vrd-klussen b { font-weight: 700; }
.vrd-klussen span { color: var(--c-ink-2); }
.vrd-klussen em { font-style: normal; color: var(--c-ink-3); font-size: .7rem; }
.vrd-klussen .mono { font-size: .64rem; color: var(--c-ink-3); }
@media (max-width: 900px) { .vrd-klussen li { grid-template-columns: minmax(0, 1fr); } }

.vrd-picks { display: flex; flex-direction: column; gap: 4px; }
.vrd-pick { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 26px minmax(0, 1.5fr) 96px 108px minmax(0, 1.4fr);
  background: var(--c-paneel-2); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 7px 11px; font-size: .74rem; }
.vrd-pick.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); }
.vrd-pick b { font-weight: 600; }
.vrd-pick em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.vrd-vink { width: 22px; height: 22px; border-radius: 6px; background: #fff; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); font: inherit; font-size: .72rem; line-height: 1;
  color: #fff; transition: background 160ms ease, border-color 160ms ease; }
.vrd-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); }
.vrd-tag { display: inline-block; font-size: .64rem; background: #fff; color: var(--c-ink);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 8px; margin: 0 4px 2px 0; }
@media (max-width: 1080px) {
  .vrd-pick { grid-template-columns: 26px minmax(0, 1fr) 96px; }
  .vrd-pick > span:nth-child(4), .vrd-pick > span:nth-child(5) { display: none; }
}

/* ---- peilen ---- */
.vrd-peillijst { display: flex; flex-direction: column; gap: 6px; }
.vrd-peilrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 82px minmax(0, 1.2fr) 110px 84px minmax(0, 1.4fr) 84px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-amber);
  border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; }
.vrd-peilrij.is-stop { border-left-color: var(--c-terra-d); background: var(--c-terra-t); }
.vrd-peilrij .bs-knop { justify-self: end; }
.vrd-peilform { display: flex; flex-direction: column; gap: 10px; background: var(--c-paneel);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; }
.vrd-peilform .bs-knop { align-self: flex-start; }
@media (max-width: 1080px) {
  .vrd-peilrij { grid-template-columns: 82px minmax(0, 1fr) 84px; }
  .vrd-peilrij > span:nth-child(3), .vrd-peilrij > span:nth-child(5) { display: none; }
}

/* ---- retour naar de fabrikant: lege vaten zijn statiegeld ---- */
.vrd-retourklaar { display: flex; flex-direction: column; gap: 6px; background: var(--c-paneel);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 14px; }
.vrd-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.vrd-zending { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 110px minmax(0, 1.6fr) 120px 110px 110px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-sage);
  border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; }
.vrd-zending .bs-knop { justify-self: end; }
@media (max-width: 1080px) {
  .vrd-zending { grid-template-columns: 110px minmax(0, 1fr) 110px; }
  .vrd-zending > span:nth-child(3), .vrd-zending > span:nth-child(4) { display: none; }
}

/* ---- de scanplicht: aan, signaal of uit ----
   De gekozen stand krijgt de groene nadruk zolang hij «verplicht» is; op
   signaal of uit kleurt de chip amber. Niet rood: het is een bewuste
   keuze van de beheerder, geen storing. De teller eronder is wél amber
   zodra er bonnen zonder batch door zijn — dat is een gat in de keten. */
.vrd-standen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.vrd-stand { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 12px; font: inherit; transition: border-color 160ms ease, background 160ms ease; }
.vrd-stand:hover { border-color: var(--c-groen); }
.vrd-stand.is-aan { border-color: var(--c-groen); background: var(--c-groen-t); }
.vrd-stand b { font-size: .8rem; font-weight: 700; color: var(--c-ink); }
.vrd-stand em { font-style: normal; font-size: .68rem; line-height: 1.5; color: var(--c-ink-3); }
.vrd-chip.is-let { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); }

.vrd-scanteller { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px;
  align-items: baseline; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px 14px; }
.vrd-scanteller.is-let { background: var(--c-amber-t); border-color: var(--c-amber); }
.vrd-scanteller b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; grid-row: span 2; }
.vrd-scanteller span { font-size: .78rem; color: var(--c-ink); }
.vrd-scanteller em { font-style: normal; font-size: .7rem; line-height: 1.5; color: var(--c-ink-3); }
.vrd-scanrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 110px minmax(0, 1fr) 130px minmax(0, 1.6fr);
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-amber);
  border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; }
@media (max-width: 1080px) {
  .vrd-scanrij { grid-template-columns: 110px minmax(0, 1fr); }
  .vrd-scanrij > span:nth-child(3), .vrd-scanrij > span:nth-child(4) { display: none; }
}

/* ---- V5 · batches en de terugroepactie ----
   Een woning zónder melding krijgt géén kleur: hij is niet fout, hij is
   alleen nog niet benaderd. De amber-rand zit op de rij die op de
   werklijst staat — dát is wat er nog moet gebeuren. */
.vrd-woningrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 104px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; }
.vrd-woningrij.is-open { border-left-color: var(--c-amber); }
.vrd-woningrij .bs-knop { justify-self: end; }
.vrd-woningrij b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrd-woningrij span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) {
  .vrd-woningrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; }
  .vrd-woningrij > span:nth-child(3), .vrd-woningrij > span:nth-child(4) { display: none; }
}
.vrd-blok h3 { font-size: .82rem; font-weight: 800; margin: 0; }

/* ---- V6 · de uitvoerderstabel heeft eigen kolommen: namen zijn lang,
   percentages en bedragen kort, en die mogen elkaar niet raken. ---- */
.vrd-uitvtabel .vrd-tkop, .vrd-uitvtabel .vrd-rij {
  grid-template-columns: minmax(0, 1.8fr) 76px 78px 92px 52px 92px 92px; }
.vrd-eigen { color: var(--c-groen); font-size: .7rem; }
/* De breedte die telt is die van de kolom, niet die van het venster: staat
   het dossier open, dan is deze lijst de helft smaller terwijl het scherm
   even breed blijft. Een container-query kijkt naar het juiste getal. */
.sup-links { container-type: inline-size; }
@container (max-width: 700px) {
  .vrd-uitvtabel .vrd-tkop, .vrd-uitvtabel .vrd-rij { grid-template-columns: minmax(0, 1fr) 72px 88px 84px; }
  .vrd-uitvtabel .vrd-tkop span:nth-child(2), .vrd-uitvtabel .vrd-rij > span:nth-child(2),
  .vrd-uitvtabel .vrd-tkop span:nth-child(5), .vrd-uitvtabel .vrd-rij > span:nth-child(5),
  .vrd-uitvtabel .vrd-tkop span:nth-child(7), .vrd-uitvtabel .vrd-rij > span:nth-child(7) { display: none; }
  /* de generieke tabel (batches, IBC's) — niet de uitvoerderstabel, die
     heeft hierboven zijn eigen indeling */
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop,
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij { grid-template-columns: 88px minmax(0, 1fr) 76px 84px; }
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop span:nth-child(3),
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij > span:nth-child(3),
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop span:nth-child(5),
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij > span:nth-child(5),
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop span:nth-child(6),
  .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij > span:nth-child(6) { display: none; }
  .vrd-woningrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; }
  .vrd-woningrij > span:nth-child(3), .vrd-woningrij > span:nth-child(4) { display: none; }
}

/* ---- V7 · het bestelvoorstel ----
   De rem krijgt de groene rand: dát is het vat dat je écht nodig hebt.
   De rest is aanvullen, en dat is geen signaal. */
.vrd-bestelrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1.3fr) 108px 76px 88px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; }
.vrd-bestelrij.is-rem { border-left-color: var(--c-groen); }
@container (max-width: 700px) {
  .vrd-bestelrij { grid-template-columns: 44px minmax(0, 1fr) 76px 88px; }
  .vrd-bestelrij > span:nth-child(3), .vrd-bestelrij > span:nth-child(4) { display: none; }
}

/* ═══ V8 · verbruik, kozijnen en beheer ═════════════════════════════

   Drie schermen die dezelfde tabel- en dossiervormen hergebruiken; wat
   hier staat is alleen wat ze eigen hebben. Kleurkeuze ongewijzigd:
   terra voor wat een claim of een factuur kost, amber voor signaal,
   groen voor «dit klopt». */

/* de feitenlijst in een dossier — dezelfde rijen als bij support, maar
   in een omlijst blok zodat hij van de rest loskomt */
.vrd-feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: #fff; padding: 2px 12px; font-size: .76rem; }
.vrd-chip.is-goed { color: var(--c-groen-d); border-color: var(--c-groen); background: var(--c-groen-t); }
.vrd-rij.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); }
.vrd-breed { grid-column: 1 / -1; }

/* ---- Verbruik: de klus als regel, de componenten eronder ---- */
.vrd-vbrtabel .vrd-tkop, .vrd-vbrtabel .vrd-rij {
  grid-template-columns: 118px minmax(0, 1.4fr) 74px 78px 74px 74px 92px; }
.vrd-vbrdetail { display: flex; flex-direction: column; gap: 4px;
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 10px 12px; margin: -2px 0 4px; }
.vrd-vbrkop { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .72rem;
  padding-bottom: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vrd-vbrcomp { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 40px 74px 66px 148px 84px 64px minmax(0, 1fr);
  font-size: .72rem; padding: 5px 0; }
.vrd-vbrcomp .vrd-code { font-size: .8rem; padding: 2px 7px; }
/* de datum onder de klantnaam, niet ertegenaan */
.vrd-vbrtabel .vrd-rij em { display: block; }
.vrd-vbrcomp em { font-style: normal; color: var(--c-ink-3); }

/* ---- Kozijnen: doorstroom, dus de stand telt zwaarder dan het aantal ---- */
.vrd-koztabel .vrd-tkop, .vrd-koztabel .vrd-rij {
  grid-template-columns: 124px minmax(0, 1.3fr) minmax(0, 1fr) 52px 76px 74px 104px; }

/* ---- Beheer: label, waarde, afleiding, knop ---- */
.vrd-beheerblok { padding-top: 4px; }
.vrd-beheervelden { display: flex; flex-direction: column; gap: 4px; }
.vrd-beheerveld { background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 8px 12px; }
.vrd-beheerveld.is-open { border-color: var(--c-groen); }
.vrd-beheerrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1.6fr) 190px minmax(0, 1fr) 96px; font-size: .76rem; }
.vrd-beheerlabel { display: flex; flex-direction: column; gap: 1px; }
.vrd-beheerlabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.vrd-beheerveld .vrd-form { margin-top: 10px; }
.vrd-beheerrij .bs-knop { justify-self: end; }

/* ---- locatieregister ---- */
.vrd-locrij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 78px minmax(0, 1.5fr) minmax(0, 1fr) 84px 104px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 7px 12px; font-size: .74rem; }
.vrd-locrij.is-uit { background: var(--c-paneel); border-left-color: var(--c-lijn-2); color: var(--c-ink-3); }
.vrd-locrij .bs-knop { justify-self: end; }

@media (max-width: 1080px) {
  /* verbruik: de norm-in-liters valt weg, de afwijking en de kosten
     blijven — dat zijn de twee getallen waarvoor je hier komt */
  .vrd-vbrtabel .vrd-tkop, .vrd-vbrtabel .vrd-rij {
    grid-template-columns: 112px minmax(0, 1fr) 66px 72px 68px 84px; }
  .vrd-vbrtabel .vrd-tkop span:nth-child(5), .vrd-vbrtabel .vrd-rij > span:nth-child(5) { display: none; }
  .vrd-beheerrij { grid-template-columns: minmax(0, 1fr) 150px 90px; }
  .vrd-beheerrij > span:nth-child(3) { display: none; }
  /* het aantal vaten bepaalt of een locatie eruit kán — dat blijft staan,
     de soort valt als eerste weg */
  .vrd-locrij { grid-template-columns: 78px minmax(0, 1fr) 76px 108px; }
  .vrd-locrij > span:nth-child(3) { display: none; }
  .vrd-vbrcomp { grid-template-columns: 40px 66px 78px 64px minmax(0, 1fr); }
  .vrd-vbrcomp > span:nth-child(2), .vrd-vbrcomp > span:nth-child(4) { display: none; }
}
@container (max-width: 700px) {
  .vrd-koztabel .vrd-tkop, .vrd-koztabel .vrd-rij { grid-template-columns: 118px minmax(0, 1fr) 48px 100px; }
  .vrd-koztabel .vrd-tkop span:nth-child(3), .vrd-koztabel .vrd-rij > span:nth-child(3),
  .vrd-koztabel .vrd-tkop span:nth-child(5), .vrd-koztabel .vrd-rij > span:nth-child(5),
  .vrd-koztabel .vrd-tkop span:nth-child(6), .vrd-koztabel .vrd-rij > span:nth-child(6) { display: none; }
}

/* ── opvolging.css ── */
/* opvolging.css — de module Opvolging (bouwspec Offertes isolatie §6).
   Links de bellijst op kans × orderwaarde, rechts het gesprek. De opmaak
   blijft rustig: het werk zit in het gesprek, niet in het scherm.
   Alleen tokens. */
.ovg-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 12px; }
.ovg-kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ovg-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.ovg-sub { font-size: .76rem; color: var(--c-ink-3); margin: 2px 0 0; line-height: 1.6; }
.ovg-sub a { color: var(--c-groen-d); }
.ovg-kop2 { font-size: .78rem; color: var(--c-ink-2); margin: 0; line-height: 1.6; }
.ovg-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; line-height: 1.6; }
.ovg-let a { color: var(--c-groen-d); font-weight: 700; }
.ovg-let2 { font-size: .74rem; color: var(--c-ink-2); margin: 0; line-height: 1.6; }

.ovg-twee { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .ovg-twee { grid-template-columns: minmax(0, 1fr); } }
.ovg-kolL, .ovg-kolR { min-width: 0; }

/* de bellijst */
.ovg-lijst { display: flex; flex-direction: column; gap: 8px; }
.ovg-kaart { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn-2);
  border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: inherit;
  box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease, background 160ms ease; }
.ovg-kaart.is-warm { border-left-color: var(--c-groen); }
.ovg-kaart.is-gekozen { background: var(--c-groen-t); border-color: var(--c-groen); }
.ovg-kaart:hover { border-color: var(--c-groen); }
.ovg-kr1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .88rem; }
.ovg-kans { font-size: .74rem; font-weight: 800; color: var(--c-groen-d); }
.ovg-ks { font-size: .7rem; color: var(--c-ink-3); }
.ovg-pog { color: var(--c-amber); }
.ovg-sigs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ovg-sig { font-size: .6rem; font-weight: 600; border-radius: 99px; padding: 1px 8px;
  border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-3); }
.ovg-sig.is-warm { border-color: var(--c-groen); color: var(--c-groen-d); }
.ovg-sig.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); }
.ovg-leeg { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 22px 18px; text-align: center; font-size: .86rem; font-weight: 700; color: var(--c-groen-d); }
.ovg-leeg span { display: block; margin-top: 5px; font-size: .72rem; font-weight: 400; color: var(--c-ink-3); }

/* het gesprek */
.ovg-detail { display: flex; flex-direction: column; gap: 11px; }
.ovg-h2 { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.ovg-plaats { font-size: .8rem; font-weight: 600; color: var(--c-ink-3); }
.ovg-blok { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--schaduw-tegel); }
.ovg-blok.is-notitie { background: var(--c-memo); border-color: var(--c-lijn-2); box-shadow: none; }
.ovg-blok.is-let { border-color: var(--c-amber); }
.ovg-blokkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .86rem; padding-bottom: 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ovg-blokkop span { font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); }
.ovg-sigrij { font-size: .78rem; padding: 2px 0; }
.ovg-notitie { margin: 0; font-size: .82rem; line-height: 1.55; }

.ovg-cadans { display: flex; gap: 6px; flex-wrap: wrap; }
.ovg-stap { flex: 1 1 100px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 7px 9px; font-size: .68rem; color: var(--c-ink-3); background: var(--c-paneel); }
.ovg-stap b { display: block; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.ovg-stap.is-klaar { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); }
.ovg-stap.is-nu { border-color: var(--c-ink); color: var(--c-ink); background: #fff; font-weight: 700; }

.ovg-uitkomsten { display: flex; gap: 7px; flex-wrap: wrap; }
.ovg-gesprek { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: .74rem;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.ovg-gesprek:first-of-type { border-top: 0; }
.ovg-gesprek span:first-child { color: var(--c-ink-3); font-size: .66rem; }
.ovg-gesprek em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

/* ── OI7 · Later terug, analyse en de adviseur-app ──────────────────── */
.ovg-groep { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--schaduw-tegel); }
.ovg-groepkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .92rem; padding-bottom: 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ovg-groepkop span { font-family: var(--font-mono); font-size: .74rem; color: var(--c-ink-3); }
.ovg-lrij { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.ovg-lrij:first-of-type { border-top: 0; }
.ovg-lrij.is-vroeg { border-left: 3px solid var(--c-groen); padding-left: 10px; margin-left: -13px; }
.ovg-lrij .ovg-ks { display: block; }
.ovg-lacties { display: flex; gap: 6px; flex-wrap: wrap; }
.ovg-leeg2 { font-size: .76rem; color: var(--c-ink-3); margin: 0; }

.ovg-ana { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 8px 15px 14px; box-shadow: var(--schaduw-tegel); }
.ovg-anarij { display: grid; grid-template-columns: minmax(0,1.6fr) 70px 100px 110px minmax(80px,1fr);
  gap: 12px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.ovg-anarij--kop { border-top: 0; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); }
.ovg-anarij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.ovg-balk { display: block; height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.ovg-balk i { display: block; height: 100%; background: var(--c-groen); }

.ovg-app { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ovg-appkaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--schaduw-tegel); }
.ovg-appkaart .btn { align-self: flex-start; margin-top: 4px; }

/* ── OI8 · de instellingen (§7): één plek voor alles wat de motor stuurt ── */
.ovg-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.ovg-cfgblok { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--schaduw-tegel); }
.ovg-cfgrij { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.ovg-cfgrij:first-of-type { border-top: 0; }
.ovg-cfgrij > span:first-child { flex: 1; min-width: 0; }
.ovg-cfgrij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); line-height: 1.45; }
.ovg-cfgrij input[type="number"], .ovg-cfgrij select { width: 86px; padding: 4px 7px; font-size: .76rem;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; background: #fff; font-family: var(--font-mono); }
.ovg-cfgrij select { width: 128px; font-family: var(--font-ui); }
.ovg-cfgrij--vink { align-items: flex-start; }
.ovg-cfgrij--vink input { width: 17px; height: 17px; accent-color: var(--c-groen); margin-top: 2px; flex: 0 0 auto; }
.ovg-eh { font-size: .66rem; color: var(--c-ink-3); width: 34px; }
.ovg-vast { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 9px 11px; font-size: .7rem; line-height: 1.55; color: var(--c-ink-2); margin-top: 6px; }
.ovg-cfgvoet { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--schaduw-tegel); }
.ovg-cfgacties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

/* ---- adres-motor (bouwspec OPVOLGING · wireframe v3) ---- */
.ov { max-width: 1240px; margin: 0 auto; padding: 0; }
.ov-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); overflow: hidden; margin-top: 14px; }
.ov-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; }
.ov-bakkop b { font-size: 13px; }
.ov-bakkop span { font-size: 11px; color: var(--ink3); }
.ov-eind { margin-left: auto; }
.ov-lijf { padding: 11px 13px; }
.ov-leeg { padding: 22px; color: var(--ink3); line-height: 1.6; }
.ov-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius);
  background: var(--stop-t); color: var(--stop); margin-top: 14px; }
.ov-fijn { color: var(--ink3); font-size: 11px; line-height: 1.5; }
.ov-rechts { text-align: right; }
.ov-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); }
.ov-pil--goed { background: var(--goed-t); color: var(--goed); }
.ov-pil--let { background: var(--let-t); color: var(--let); }
.ov-pil--stop { background: var(--stop-t); color: var(--stop); }
.ov-pil--acc { background: var(--accent-t); color: var(--accent-d); }
.ov-pil--stil { background: var(--vlak); color: var(--ink2); }
.is-goed { color: var(--goed); }
.ov-bel { display: grid; grid-template-columns: minmax(0, 1fr) 110px 190px 130px; gap: 12px; align-items: center;
  padding: 10px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; font-size: 12.5px; }
.ov-bel:last-child { border-bottom: 0; }
.ov-bel:hover, .ov-bel:focus-visible { background: var(--vlak); }
.ov-bel.is-verzoek { border-left: 3px solid var(--goed); }
.ov-gesprek { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ov-gesprek { grid-template-columns: 1fr; } }
.ov-gesprek .ov-kaart:first-child { margin-top: 14px; }
.ov-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px;
  margin-bottom: 9px; line-height: 1.55; font-size: 12.5px; }
.ov-tegel--goed { border-color: var(--goed); background: var(--goed-t); }
.ov-tegel h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); }
.ov-tegel label { display: block; margin-bottom: 8px; font-size: 12px; }
.ov-tegel input { display: block; width: 100%; margin-top: 4px; font: inherit; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 5px 8px; background: var(--kaart); color: var(--ink); }
.ov-paar { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px;
  align-items: flex-start; line-height: 1.5; }
.ov-paar--streep { border-top: 1px solid var(--lijn); margin-top: 4px; padding-top: 6px; }
.ov-uitk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
@media (max-width: 900px) { .ov-uitk { grid-template-columns: 1fr 1fr; } }
.ov-uitk button { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein);
  padding: 9px 10px; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.ov-uitk button b { font-size: 12.5px; }
.ov-uitk button span { font-size: 10.5px; color: var(--ink3); }
.ov-uitk button.is-aan { border-color: var(--accent); background: var(--accent-t); }
.ov-spoor { display: grid; grid-template-columns: 64px 120px minmax(0, 1fr) 150px; gap: 11px;
  padding: 9px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; align-items: start; }
.ov-spoor:last-child { border-bottom: 0; }
.ov-dag { font-family: var(--font-mono); font-weight: 800; font-size: 11px; color: var(--ink2); }
.ov-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .ov-twee { grid-template-columns: 1fr; } }
.ov-twee .ov-kaart { margin-top: 14px; }

/* ── opdrachtenlijst.css ── */
/* opdrachtenlijst.css — scherm `opdrachten` (bouwspec OPDRACHTEN §3).
   Referentie: wireframe-opdrachten-v8. Vorm en kleur uit
   casa360-stijl.css; geen kleurliteral. */

.opl { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.opl-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius);
  background: var(--stop-t); color: var(--stop); margin-top: 14px; }
.opl-fijn { color: var(--ink3); font-size: 11px; line-height: 1.45; }
.opl-klant { font-weight: 700; }
.opl-rechts { text-align: right; }
.is-stop { color: var(--stop); }
.is-goed { color: var(--goed); }

.opl-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.opl-chip { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-pill);
  padding: 4px 12px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.opl-chip.is-aan { background: var(--ink); border-color: var(--ink); color: var(--kaart); }
.opl-scheiding { width: 1px; height: 18px; background: var(--lijn); margin: 0 4px; }
.opl-zoek { flex: 1; min-width: 240px; font: inherit; font-size: 12.5px; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 6px 10px; background: var(--kaart); color: var(--ink); }

.opl-bak { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .opl-bak { grid-template-columns: 1fr; } }
.opl-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); overflow: hidden; }
.opl-kaart--los { margin-top: 14px; }
.opl-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; }
.opl-bakkop b { font-size: 13px; }
.opl-bakkop span { font-size: 11px; color: var(--ink3); }
.opl-leeg { padding: 26px; text-align: center; color: var(--ink3); }

.opl-rij { display: grid; grid-template-columns: 96px minmax(0, 1fr) 130px 170px 90px; gap: 11px;
  align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; font-size: 12.5px; }
.opl-rij:last-child { border-bottom: 0; }
.opl-rij--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); font-weight: 700; cursor: default; }
.opl-rij:not(.opl-rij--kop):hover { background: var(--vlak); }
.opl-rij.is-gekozen { background: var(--accent-t); }

.opl-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); }
.opl-pil--goed { background: var(--goed-t); color: var(--goed); }
.opl-pil--let { background: var(--let-t); color: var(--let); }
.opl-pil--stop { background: var(--stop-t); color: var(--stop); }
.opl-pil--stil { background: var(--grijs); color: var(--ink2); }
.opl-pil--iso { background: var(--goed-t); color: var(--goed); }
.opl-pil--koz { background: var(--accent-t); color: var(--accent-d); }
.opl-pillen { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }

.opl-balk { height: 8px; border-radius: 99px; background: var(--grijs2); overflow: hidden; display: flex; }
.opl-balk i { display: block; height: 100%; }
.opl-balk__bet { background: var(--goed); }
.opl-balk__fac { background: var(--let); }
.opl-marge { font-weight: 800; }
.opl-marge.is-onder { color: var(--stop); }
.opl-marge.is-ok { color: var(--goed); }

.opl-paneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); position: sticky; top: 14px; overflow: hidden;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.opl-paneelkop { padding: 12px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.opl-paneellijf { padding: 12px 14px; overflow: auto; }
.opl-paneelvoet { padding: 10px 14px; border-top: 1px solid var(--lijn); background: var(--vlak);
  display: flex; gap: 6px; flex-wrap: wrap; }
.opl-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px; margin-bottom: 9px; }
.opl-tegel--stop { border-color: var(--stop); background: var(--stop-t); }
.opl-tegel--let { border-color: var(--let); background: var(--let-t); }
.opl-tegel h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); }
.opl-paar { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px;
  align-items: flex-start; line-height: 1.5; }
.opl-paar--streep { border-top: 1px solid var(--lijn); margin-top: 6px; padding-top: 6px; }
.opl-poort { font-size: 11px; color: var(--stop); line-height: 1.5; padding: 2px 0 4px; }
.opl-knoppen { display: flex; gap: 6px; margin-top: 7px; }
.opl-knop--stop { color: var(--stop); border-color: var(--stop); }
.opl-knop--stop:hover { background: var(--stop-t); }

.opl-trij { display: grid; grid-template-columns: 96px 200px minmax(0, 1fr) 130px; gap: 11px;
  align-items: start; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12.5px; }
.opl-trij:last-child { border-bottom: 0; }

/* ---- annuleer-venster (OP6) ---- */
.opl-mask { position: fixed; inset: 0; background: var(--sluier); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 5vh; }
.opl-venster { background: var(--kaart); border-radius: var(--radius); width: min(640px, 94vw);
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--schaduw-zwevend); overflow: hidden; }
.opl-vensterkop { padding: 12px 15px; border-bottom: 1px solid var(--lijn); background: var(--vlak);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opl-vensterlijf { padding: 13px 15px; overflow: auto; }
.opl-venstervoet { padding: 10px 15px; border-top: 1px solid var(--lijn); background: var(--vlak);
  display: flex; gap: 6px; justify-content: flex-end; }
.opl-veld { display: block; margin-bottom: 8px; font-size: 12px; }
.opl-veld input { display: block; width: 100%; margin-top: 4px; font: inherit; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 6px 9px; background: var(--kaart); color: var(--ink); }

/* ─── B3 (QUERY-HYGIENE §3) · bladeren ───────────────────────────────
   De lijst was 25.544px hoog en toonde 252 records zonder te zeggen dat
   er meer waren. De balk hoort onderaan de lijst, niet erboven: je leest
   hem als je het einde bereikt. */
.opl-blader { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-top: var(--lijndikte) solid var(--c-lijn); }
.opl-bladerknoppen { display: flex; gap: 6px; }
.opl-blader .opl-chip[disabled] { opacity: .42; cursor: default; }


/* KK · ketenkaart in het detailpaneel */
.opl-keten .opl-ketenstap { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--lijn); font-size: 12.5px; }
.opl-keten .opl-ketenstap:first-of-type { border-top: 0; }
.opl-ketenstap i { font-style: normal; text-align: center; color: var(--ink2); }
.opl-ketenstap.is-klaar i { color: var(--goed); }
.opl-ketenstap.is-nu i { color: var(--let); }
.opl-ketenstap.is-stop i { color: var(--stop); }
.opl-ketenstap span { display: grid; }
.opl-ketenstap small { color: var(--ink2); font-size: 11.5px; }
.opl-ketenstap.is-wacht b { color: var(--ink2); font-weight: 500; }
.opl-ketenstap em { font-style: normal; font-size: 11px; color: var(--ink2); white-space: nowrap; }

/* ── opdrachten.css ── */
/* =====================================================================
   opdrachten.css — Module 1.2 · Opdrachten & voorbehoud. Bouwt op
   tokens + bouwstenen.css (+ drawer-basis uit recovery.css).
===================================================================== */

/* Keten-strip */
.op-keten { padding: 16px 18px; margin-bottom: 16px; }
.op-keten__stappen { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 5px; margin-top: 12px; }
.op-stap { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--c-ink-3); }
.op-stap__num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; background: var(--c-paneel); color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); }
.op-stap.is-klaar { color: var(--c-ink-2); }
.op-stap.is-klaar .op-stap__num { background: var(--c-groen-t); color: var(--c-groen-d); border-color: transparent; }
.op-stap.is-actief { color: var(--c-ink); font-weight: 800; }
.op-stap.is-actief .op-stap__num { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }
.op-stap__pijl { color: var(--c-lijn-2); font-size: .74rem; }
.op-keten__toel { margin: 12px 0 0; font-size: .76rem; color: var(--c-ink-2); max-width: 82ch; }

/* Lijst */
.op-lijst { padding: 0; overflow: hidden; }
.op-rij { display: grid; grid-template-columns: 96px 1.4fr 1.5fr 1.2fr .8fr; gap: 12px; align-items: center; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.op-rij:hover { background: var(--c-creme); }
.op-rij.is-actief { background: var(--c-groen-t); }
.op-rij--kop { padding: 11px 18px; background: var(--c-paneel); border-top: 0; cursor: default; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); }
.op-rij--kop:hover { background: var(--c-paneel); }
.op-idcel { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.op-id { font-size: .74rem; color: var(--c-ink-2); }
.op-cel { min-width: 0; }
.op-klant { font-weight: 800; font-size: .84rem; }
.op-sub { font-size: .7rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sub--intro { margin: 0 0 13px; white-space: normal; }
.op-status, .op-vbnaam { justify-self: start; }
.op-vbnaam { font-weight: 700; font-size: .76rem; display: block; margin-bottom: 3px; }
.op-marge { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 800; }
.op-marge--ok { color: var(--c-groen-d); }
.op-marge--laag { color: var(--c-terra-d); }
.op-fiatvlag { font-size: .56rem; font-weight: 800; color: var(--c-terra-d); background: var(--c-terra-t); border-radius: 5px; padding: 1px 5px; }
.op-poorttel { color: var(--c-amber); font-weight: 800; }

/* Donker uitlegblok */
.op-uitlegdonker { margin-top: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--c-ink); color: var(--c-lijn-2); font-size: .82rem; line-height: 1.6; }
.op-uitlegdonker strong { color: var(--c-creme); }
.op-uitlegdonker__kicker { color: var(--c-lijn-2); margin-bottom: 9px; display: block; }

/* Configuratie */
.op-cfggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .op-cfggrid { grid-template-columns: 1fr; } }
.op-cfgkaart { padding: 18px 20px; }
.op-h2 { font-size: .95rem; font-weight: 800; margin: 0 0 3px; }
.op-cfgrijen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.op-cfgrij { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.op-cfgnum { font-weight: 800; font-size: .72rem; color: var(--c-groen-d); min-width: 18px; }
.op-cfglabel { flex: 1; font-weight: 700; font-size: .8rem; }
.op-cfgweg { background: transparent; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; color: var(--c-terra-d); }
.op-cfgnieuw { display: flex; gap: 8px; }
.op-cfgnieuw .off-reden { flex: 1; }

/* Drawer-blokken */
.op-blok { padding: 14px 16px; margin-bottom: 14px; }
.op-blok--vb { border-color: var(--c-amber); }
.op-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.op-kicker--amber { color: var(--c-amber); }
.op-prijs { font-size: 1.05rem; font-weight: 800; }
.op-maatregel { font-weight: 700; font-size: .8rem; margin-bottom: 4px; }
.op-blok .chip { margin-top: 6px; }
.op-wijzig { width: 100%; margin-top: 11px; padding: 9px; border-radius: 9px; border: 1px dashed var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; color: var(--c-ink-2); }
.op-wijzig:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.op-vbsub { font-size: .8rem; margin-bottom: 4px; }
.op-vbacties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.op-mini { padding: 8px 13px; font-size: .72rem; }
.op-mini--groen { color: var(--c-groen-d); }
.op-mini--terra { color: var(--c-terra-d); border-color: var(--c-terra); }

/* Poort-checklist */
.op-poort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 560px) { .op-poort { grid-template-columns: 1fr; } }
.op-check { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--c-ink-3); }
.op-check.is-klaar { color: var(--c-ink); }
.op-check:disabled { cursor: default; }
.op-check__box { width: 20px; height: 20px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--c-lijn-2); background: #fff; color: #fff; font-weight: 800; font-size: .72rem; }
.op-check.is-klaar .op-check__box { background: var(--c-groen); border-color: var(--c-groen); }

/* Margekaart */
.op-mrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--c-ink-2); padding: 3px 0; }
.op-mrij.is-sterk { font-weight: 800; font-size: .82rem; color: var(--c-ink); }
.op-mrij--groen .mono { color: var(--c-groen-d); }
.op-mrij--terra .mono { color: var(--c-terra-d); }
.op-fiatknop { width: 100%; margin-top: 11px; padding: 10px; border-radius: 10px; border: var(--lijndikte) solid var(--c-terra); background: var(--c-terra-t); font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; color: var(--c-terra-d); }

/* Drawer-voet */
.op-voetknoppen { display: flex; gap: 10px; }
.op-annuleer { flex: none; color: var(--c-terra-d); border-color: var(--c-terra); }
.op-release { flex: 1; }

/* Annuleer-dialoog */
.op-reden { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; color: var(--c-ink); text-align: left; }
.op-reden__dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 5px solid var(--c-lijn-2); background: #fff; }
.op-reden.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.op-reden.is-actief .op-reden__dot { border-color: var(--c-terra); }
.op-gevolg { display: flex; align-items: flex-start; gap: 9px; font-size: .76rem; color: var(--c-ink-2); }
.op-gevolg .mono { color: var(--c-terra-d); font-weight: 700; flex: none; }
.op-annuleer-bevestig:not(:disabled) { background: var(--c-terra); }
.op-annuleer-bevestig:not(:disabled):hover { background: var(--c-terra-d); }

/* B39 · backend-kaart: opdracht-dossiers met marge-opbouw */
/* Fix 22-07: zelfde euvel als de magazijn-kaart — de globale .kaart draagt
   geen padding, dus zonder eigen binnenmarge plakt de tekst tegen de rand. */
.op-bkkaart { padding: 16px 18px; margin-bottom: 14px; }
.op-bkkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.op-bkkop .mono { font-size: .7rem; color: var(--c-ink-3); }
.op-bkrijen { display: flex; flex-wrap: wrap; gap: 8px; }
.op-bkrij { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-family: var(--font-ui); font-size: .78rem; cursor: pointer; color: var(--c-ink); }
.op-bkrij .mono { font-size: .7rem; color: var(--c-ink-3); }
.op-bkrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.op-bkdossier { margin-top: 12px; padding: 13px 14px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); }
.op-bkdoskop { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.op-bkdoskop > div { flex: 1; display: flex; flex-direction: column; }
.op-bksectie { margin-top: 12px; padding-top: 9px; border-top: var(--lijndikte) solid var(--c-lijn-2); display: flex; flex-direction: column; gap: 5px; }
.op-bkregel { display: grid; grid-template-columns: 1.2fr 1fr auto auto; align-items: center; gap: 10px; font-size: .76rem; color: var(--c-ink-2); }
.op-bkregel .mono:last-child { text-align: right; font-weight: 700; color: var(--c-ink); }
.op-bkform { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.op-bkform select, .op-bkform input { padding: 8px 10px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); font-family: var(--font-ui); font-size: .76rem; background: #fff; color: var(--c-ink); }
.op-bkform select { flex: 1; min-width: 0; }
.op-bkform input { width: 84px; }

/* Demo op praktijkschaal (18-07): paginering + "toon meer" bij volume */
.op-paginering { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.op-paginering > .mono { font-size: 11.5px; color: var(--c-ink-3); }
.op-bkmeer { margin: 10px 0 0; }

/* Fase C (01-08): opdracht-modules per discipline — zelfde gezicht */
.opm-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.opm-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.opm-rij { display: grid; grid-template-columns: 108px 1.3fr 138px 1fr 100px 150px 116px; gap: 12px; align-items: center;
  padding: 11px 16px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.opm-rij--kop { border-top: 0; font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-3); text-transform: uppercase; }
.opm-wie { display: flex; flex-direction: column; min-width: 0; }
.opm-adres { font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opm-voortgang { display: flex; flex-direction: column; gap: 3px; }
.opm-baan { position: relative; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.opm-baan i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.opm-fac { background: var(--c-sage-t); }
.opm-bet { background: var(--c-groen); }
.opm-voortgang em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.opm-bron { font-size: .66rem; color: var(--c-ink-3); }
/* Financieel (02-08): marge-kolom — rood alléén onder de norm (blokkadekleur) */
.opm-marge { font-size: .72rem; font-weight: 700; }
.opm-marge em { font-style: normal; font-weight: 500; font-size: .62rem; color: var(--c-ink-3); }
.opm-marge.is-groen { color: var(--c-groen-d); }
.opm-marge.is-amber { color: var(--c-amber); }
.opm-marge.is-rood { color: var(--c-rood); }
.opm-marge--stil { color: var(--c-ink-3); font-weight: 500; }
@media (max-width: 1000px) { .opm-rij { grid-template-columns: 1fr 1fr; } .opm-rij--kop { display: none; } }

/* Fase D (01-08): Inmeet & fabriek — stappenbalk met betaalpoorten */
.if-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 12px; }
.if-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.if-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 78ch; margin: -4px 0 2px; }
.if-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--schaduw-tegel); }
.if-kaart.is-gedempt { opacity: .78; border-color: var(--c-lijn); box-shadow: none; }
.if-kaart__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; }
.if-adres { color: var(--c-ink-3); font-size: .74rem; }
.if-stappen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.if-pijl { color: var(--c-ink-3); font-size: .62rem; }
.if-stap { border-radius: var(--radius-pill); padding: 3px 10px; font-size: .66rem; font-weight: 600;
  border: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); background: #fff; white-space: nowrap; }
.if-stap.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.if-stap.is-actief { border: 2px solid var(--c-groen); color: var(--c-ink); font-weight: 700; }
.if-stap.is-wacht { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-ink); }
.if-stap.is-dicht { }
.if-wachtlbl { font-size: .7rem; color: var(--c-ink-3); }
.if-wachtslot { font-size: .7rem; color: var(--c-ink); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 4px 12px; }

/* Opdrachtdossier (02-08): één scherm per opdracht */
.od-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.od-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.od-kop__wie { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.od-kop__wie h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.od-klantlink { color: inherit; text-decoration: none; }
.od-klantlink:hover { color: var(--c-groen-d); text-decoration: underline; }
.od-nr { font-size: .72rem; color: var(--c-ink-3); }
.od-adres { font-size: .78rem; color: var(--c-ink-2); }
.od-kop__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.od-fasen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.od-fase { border-radius: var(--radius-pill); padding: 4px 12px; font-size: .68rem; font-weight: 600;
  border: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); background: #fff; white-space: nowrap; }
.od-fase.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.od-fase.is-actief { border: 2px solid var(--c-groen); color: var(--c-ink); font-weight: 700; }
.od-pijl { color: var(--c-ink-3); font-size: .62rem; }
.od-raster { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.od-links { display: flex; flex-direction: column; gap: 14px; background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); }
.od-inzien { font-style: normal; color: var(--c-ink-3); font-size: .64rem; }
.od-rechts { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.od-tegels { margin-bottom: 0; }
.od-warm { color: var(--c-amber); font-weight: 700; }
.od-termijnen { display: flex; flex-direction: column; }
.od-trij { display: grid; grid-template-columns: minmax(0, 1fr) 110px 190px auto; gap: 12px; align-items: center;
  padding: 10px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.od-trij:first-child { border-top: 0; }
.od-tactie { display: flex; justify-content: flex-end; }
.od-wacht { font-size: .66rem; color: var(--c-ink-3); }
.od-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.od-hint { font-size: .68rem; color: var(--c-ink-3); }
.od-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; }
.od-reden { font-style: normal; color: var(--c-ink-2); }
.opm-nr { color: var(--c-groen-d); text-decoration: none; font-size: .72rem; font-weight: 700; font-family: var(--font-mono); }
.opm-nr:hover { text-decoration: underline; }
/* Financieel-gebied (02-08): beoogd naast werkelijk, opbouw links/rechts */
.od-finkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.od-finkaart { background: var(--c-paneel); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; }
.od-finkaart__lbl { font-size: .66rem; color: var(--c-ink-3); }
.od-finkaart b { font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.od-finkaart b.is-groen { color: var(--c-groen-d); }
.od-finkaart b.is-amber { color: var(--c-amber); }
.od-finkaart b.is-rood { color: var(--c-rood); }
.od-finkaart__sub { font-size: .64rem; color: var(--c-ink-3); }
.od-finnorm { margin-top: 10px; font-size: .72rem; color: var(--c-rood); font-weight: 600; }
.od-finkolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 14px; }
.od-finrij { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.od-finrij--stil { color: var(--c-ink-3); font-size: .68rem; }
@media (max-width: 980px) { .od-raster { grid-template-columns: 1fr; } }

/* ═══ IM1 · «wat er nú moet» ══════════════════════════════════════════
   De zin staat bóven de stappenbalk en niet erin: een werkvoorbereider
   met dertig lopende opdrachten leest liever één regel dan zeven
   bolletjes. Vier toestanden, want ze vragen een ander soort aandacht —
   er ligt een besluit, er is werk, we wachten op iemand anders, of het
   loopt gewoon. */
.if-nu { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn);
  background: var(--c-paneel-2); font-size: .82rem; }
.if-nu b { font-weight: 700; color: var(--c-ink); }
.if-nu.is-stop { border-color: var(--c-rood); background: #fff; }
.if-nu.is-stop b { color: var(--c-rood); }
.if-nu.is-let { border-color: var(--c-amber); background: var(--c-amber-t); }
.if-nu.is-rust { color: var(--c-ink-3); }
.if-nu.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-nu.is-goed b { color: var(--c-groen-d); }
/* Scheef is een signaal, geen blokkade: amber, met het aantal erbij. */
.if-scheef { font-size: .66rem; font-weight: 700; color: var(--c-amber);
  border: var(--lijndikte) solid var(--c-amber); background: var(--c-amber-t);
  border-radius: var(--radius-pill); padding: 2px 8px; }

/* ═══ IM5 · het dossier: drie kolommen ══════════════════════════════
   In de volgorde waarin de werkvoorbereider kijkt: wélke positie, wát er
   gemeten is, en wát hij ermee doet. De middenkolom is de breedste —
   daar staat de maatketen, en dat is waar hij zijn oordeel op baseert. */
.if-drie { display: grid; grid-template-columns: 214px minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px; align-items: start; }
@media (max-width: 1100px) { .if-drie { grid-template-columns: 1fr; } }
.if-kol { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.if-kol h3 { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }
.if-kol--maat, .if-kol--besluit { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schaduw-tegel); }

/* Links: de posities. De linkerrand draagt de stand — beoordeeld groen,
   buiten de marge amber. Zo zie je waar het geld zit zonder te lezen. */
.if-pos { text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 12px; transition: box-shadow var(--overgang), border-color var(--overgang); }
.if-pos:hover { box-shadow: var(--schaduw-tegel); }
.if-pos.is-nu { border-left-color: var(--c-groen); box-shadow: var(--schaduw-tegel); }
.if-pos.is-buiten { border-left-color: var(--c-amber); }
.if-pos__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: .82rem; }
.if-pos__sub { font-size: .7rem; color: var(--c-ink-2); }
.if-pos__geld { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-3); }
.if-vink { color: var(--c-groen-d); font-size: .78rem; }

/* Midden: de maatketen. Elke regel een stap, bedragen en maten in mono
   zodat ze onder elkaar uitlijnen — hier wordt vergeleken, niet gelezen. */
.if-maat { display: flex; flex-direction: column; }
.if-mrij { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.if-mrij:last-child { border-bottom: 0; }
.if-mrij span { font-size: .76rem; color: var(--c-ink-2); }
.if-mrij b { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.if-mrij b u { text-decoration: none; border-bottom: 2px solid var(--c-groen); }
.if-mrij em { grid-column: 1 / -1; font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

.if-advies { display: flex; flex-direction: column; gap: 3px; margin-top: 11px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; }
.if-advies b { font-size: .8rem; }
.if-advies span { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }
.if-advies.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-advies.is-goed b { color: var(--c-groen-d); }
.if-advies.is-let { border-color: var(--c-amber); background: var(--c-amber-t); }
/* Memo-geel: een notitie van een mens, geen systeemtekst. */
.if-memo { margin-top: 11px; background: var(--c-memo); border-radius: var(--radius);
  padding: 10px 12px; font-size: .76rem; line-height: 1.55; }
.if-memo span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); margin-bottom: 3px; }

/* Rechts: het besluit. Vier keuzes met hun gevolg erbij — wie hier klikt
   moet weten wat er met het geld gebeurt, niet alleen met de status. */
.if-eerder { display: flex; flex-direction: column; gap: 2px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 9px 11px; background: var(--c-paneel-2); }
.if-eerder span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.if-eerder b { font-size: .8rem; }
.if-eerder em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; }
.if-keuzes { display: flex; flex-direction: column; gap: 7px; }
.if-keuze { display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; }
.if-keuze.is-nu { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-keuze input { margin-top: 3px; accent-color: var(--c-groen); }
.if-keuze span { display: flex; flex-direction: column; gap: 1px; }
.if-keuze b { font-size: .8rem; }
.if-keuze em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); line-height: 1.45; }
.if-bedraghint { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--c-ink-2); }
.if-som { margin: 0; font-size: .74rem; color: var(--c-ink-2); }
.if-som b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.if-wachtlbl { font-size: .7rem; color: var(--c-ink-3); }
/* Altijd-bereikbare ingang naar het dossier: een tekstknop, geen tegel —
   hij hoort niet te concurreren met de actieknop in de nu-regel. */
.if-open { border: 0; background: none; padding: 0 0 0 6px; cursor: pointer;
  font: inherit; font-size: .74rem; color: var(--c-groen-d); text-decoration: underline; }
.if-open:hover { color: var(--c-ink); }
/* Retour is geen afronding: amber en een kringetje, niet groen met een vink. */
.if-retour { color: var(--c-amber); font-size: .8rem; font-weight: 700; }
.if-pos.is-retour { border-left-color: var(--c-amber); }

/* ═══ IM6 · het handtekening-blok ═══════════════════════════════════
   Onder de drie kolommen: dit is de afsluiting van de stapel, geen
   vierde ding om tussendoor te doen. */
.if-teken { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--schaduw-tegel); }
.if-teken > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.if-teken b { font-size: .88rem; }
.if-teken em { font-style: normal; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); max-width: 86ch; }
.if-teken.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); }
.if-teken.is-goed b { color: var(--c-groen-d); }
/* Rood is de blokkadekleur en blijft dat: hier staat de opdracht stil. */
.if-teken.is-stop { border-color: var(--c-rood); }
.if-teken.is-stop b { color: var(--c-rood); }
.if-teken.is-wacht { border-style: dashed; }
.if-zwak { color: var(--c-amber) !important; font-weight: 600; }
.if-tekenknoppen { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.if-rood { color: var(--c-rood); border-color: var(--c-rood); }

/* ═══ IM8 · Inmeet & fabriek · Beheer ═══════════════════════════════
   Eén gedachte draagt dit scherm: wijzigen is een nieuwe versie, geen
   overschrijving. Daarom staan de versies bovenaan met wat erop loopt —
   dat is wat je wilt weten vóór je de aftrek verhoogt. */
.ib-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }
.ib-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.ib-lead { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 82ch; margin: -4px 0 0; }

.ib-versies { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-versie { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); font-size: .72rem;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 6px 11px; background: #fff; }
.ib-versie em { font-family: var(--font-ui); font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.ib-versie.is-nu { border-color: var(--c-lijn-2); }
.ib-versie.is-nieuw { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); }

.ib-kaart { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; gap: 2px; }
.ib-kaart__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.ib-kaart h3 { margin: 2px 0 0; font-size: .95rem; font-weight: 800; }
.ib-uitleg { font-size: .76rem; line-height: 1.6; color: var(--c-ink-2); max-width: 84ch; margin-bottom: 10px; }
.ib-kop4 { margin: 12px 0 2px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }

/* Eén regel per instelling: label, waarde, en waarom hij bestaat. */
.ib-rij { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline;
  padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ib-rij:last-child { border-bottom: 0; }
.ib-rij span { font-size: .8rem; }
.ib-rij b { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ib-rij em { grid-column: 1 / -1; font-style: normal; font-size: .68rem; line-height: 1.5; color: var(--c-ink-3); }

.ib-fabriek, .ib-inmeter, .ib-mfout { display: grid; align-items: center; gap: 4px 14px;
  padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ib-fabriek { grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.6fr) auto; }
.ib-inmeter { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto auto; }
.ib-mfout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto; }
.ib-fabriek:last-child, .ib-inmeter:last-child, .ib-mfout:last-child { border-bottom: 0; }
.ib-fabriek > div, .ib-inmeter > div, .ib-mfout > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ib-fabriek b, .ib-inmeter b, .ib-mfout b { font-size: .84rem; }
.ib-fabriek span, .ib-inmeter span, .ib-mfout span { font-size: .72rem; color: var(--c-ink-2); }
.ib-sub { font-size: .72rem; color: var(--c-ink-3); }
.ib-fmt { font-size: .62rem; letter-spacing: .06em; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius-pill); padding: 2px 8px; color: var(--c-ink-2); }
.ib-acties { display: flex; gap: 6px; }
/* Gearchiveerd blijft zichtbaar — gedempt, niet weg. */
.ib-inmeter.is-weg { opacity: .55; }
.ib-fout { font-size: .68rem; font-weight: 700; color: var(--c-amber); }
.ib-fout.is-stop { color: var(--c-rood); }
.ib-mfout.is-klaar { opacity: .6; }
.ib-klaar { font-size: .7rem; color: var(--c-groen-d); font-weight: 700; }
.ib-weg { color: var(--c-rood); border-color: var(--c-rood); }
/* Twee getallen naast elkaar: breedte en hoogte horen bij elkaar. */
.ib-paar { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 10px; align-items: end;
  padding: 5px 0; }
.ib-paar > span { font-size: .78rem; color: var(--c-ink-2); padding-bottom: 9px; }
@media (max-width: 800px) {
  .ib-fabriek, .ib-inmeter, .ib-mfout, .ib-paar { grid-template-columns: 1fr; }
}

/* ═══ M1 · de fiat-strook onder het marge-dossier ═════════════════════
   Hij hoort op te vallen zonder te schreeuwen: dit is de plek waar iemand
   een besluit neemt over geld dat de organisatie niet verdient. Amber en
   niet rood — een marge onder de norm is een afweging, geen blokkade. */
.op-fiat { border-top: var(--lijndikte) solid var(--lijn); padding-top: 10px; }
.op-fiat .op-bkform input { flex: 1 1 auto; min-width: 0; }
.op-fiat .op-bkregel { background: var(--goed-t); border-radius: var(--radius-klein); padding: 6px 8px; }


/* KK · de ketenkaart in de opdracht-drawer */
.op-keten .op-ketenlijst { display: grid; gap: 4px; margin-top: 6px; }
.op-ketenstap { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--lijn); font-size: 12.5px; }
.op-ketenstap:last-child { border-bottom: 0; }
.op-ketenstap > div { display: grid; }
.op-ketenstap > div span { color: var(--ink2); font-size: 11.5px; }
.op-ketenstap em { font-style: normal; font-size: 11px; color: var(--ink2); white-space: nowrap; }
.op-ketenglyph { font-style: normal; text-align: center; color: var(--ink2); }
.op-ketenstap.is-klaar .op-ketenglyph { color: var(--goed); }
.op-ketenstap.is-nu .op-ketenglyph { color: var(--let); }
.op-ketenstap.is-stop .op-ketenglyph { color: var(--stop); }
.op-ketenstap.is-nu b { color: var(--ink); }
.op-ketenstap.is-wacht b, .op-ketenstap.is-wacht span { color: var(--ink2); }
.op-ketenhint { color: var(--ink2); font-size: 12px; margin: 6px 0 0; }

/* ── pijplijn.css ── */
/* =====================================================================
   pijplijn.css — Module 1.3 · Pijplijn & leads. Bouwt op tokens +
   bouwstenen.css. Kolomtinten en bron-tags via token-mapping.
===================================================================== */

/* Balk: tabs links, scope rechts */
.pip-balk { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pip-tabs { margin-bottom: 0; }
.pip-scope { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pip-scopenote { font-size: .72rem; color: var(--c-ink-3); }
.pip-scopeknop { padding: 7px 14px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); font-family: var(--font-ui); font-size: .74rem; font-weight: 700; cursor: pointer; transition: border-color var(--overgang), background var(--overgang); }
.pip-scopeknop.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); }

/* KPI-strip: gedeelde .bs-stat (bouwstenen.css). */

/* Kanban */
.pip-kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; align-items: start; }
@media (max-width: 1100px) { .pip-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pip-kolom { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; }
.pip-kolom--stil { background: var(--c-creme); }
.pip-kolom--groen { background: var(--c-groen-t); }
.pip-kolom--paneel { background: var(--c-paneel); }
.pip-kolom--amber { background: var(--c-amber-t); }
.pip-kolom--groend { background: var(--c-groen-t); }
.pip-kolom__kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; font-weight: 800; font-size: .78rem; }
.pip-kolom__tel { font-size: .62rem; color: var(--c-ink-2); font-weight: 700; }
.pip-kolom__body { display: flex; flex-direction: column; gap: 9px; padding: 11px; min-height: 80px; }
.pip-leeg { text-align: center; color: var(--c-ink-3); font-size: .74rem; padding: 8px 0; }

/* Kans-kaart */
.pip-kaart { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.pip-kaart.is-stagnerend { border-color: var(--c-terra); }
.pip-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.pip-id { font-size: .64rem; color: var(--c-ink-3); }
.pip-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pip-scope-tag { font-size: .56rem; color: var(--c-ink-3); text-transform: uppercase; }
.pip-klant { font-weight: 800; font-size: .84rem; }
.pip-sub { font-size: .68rem; color: var(--c-ink-3); }
.pip-bedragen { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pip-potentie { font-weight: 800; font-size: .84rem; }
.pip-gewogen { font-size: .68rem; font-weight: 700; color: var(--c-groen-d); }
.pip-kansregel { display: flex; justify-content: space-between; font-size: .62rem; color: var(--c-ink-3); margin-bottom: 3px; }
.pip-kaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pip-dagen { font-size: .62rem; color: var(--c-ink-3); }
.pip-acties { display: flex; gap: 6px; }
.pip-volgende { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: var(--c-groen); color: #fff; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; transition: background var(--overgang); }
.pip-volgende:hover { background: var(--c-groen-d); }
.pip-verlies { padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; background: #fff; color: var(--c-terra-d); font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; }
.pip-verlies:hover { border-color: var(--c-terra); background: var(--c-terra-t); }

/* Bron-tags (blauw/paars uit prototype → stil/terra) */
.pip-bron { font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; }
.pip-bron--groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.pip-bron--amber { color: var(--c-amber); background: var(--c-amber-t); }
.pip-bron--stil { color: var(--c-ink-2); background: var(--c-paneel); }
.pip-bron--terra { color: var(--c-terra-d); background: var(--c-terra-t); }

/* Lead-instroom */
.pip-merge { margin-left: 10px; padding: 8px 14px; font-size: .74rem; }
.pip-leads { padding: 0; overflow: hidden; margin-top: 14px; }
.pip-lrij { display: grid; grid-template-columns: 90px 1.3fr 1.3fr 1.6fr 1fr 150px; gap: 12px; align-items: center; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); }
.pip-lrij--kop { padding: 12px 18px; background: var(--c-paneel); border-top: 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.pip-cel { min-width: 0; }
.pip-cel .chip { margin-top: 4px; }
.pip-woning { font-size: .76rem; color: var(--c-ink-2); }
.pip-ctx { font-size: .7rem; line-height: 1.45; color: var(--c-ink-3); }
.pip-datum { font-size: .64rem; color: var(--c-ink-3); margin-top: 3px; }
.pip-leadactie { display: flex; }
.pip-lead-knop { width: 100%; padding: 9px; font-size: .72rem; }
.pip-voetnoot { margin-top: 12px; font-size: .7rem; color: var(--c-ink-3); }

/* Kop-acties (export + nieuwe lead) naast elkaar */
.pip-kopacties { display: flex; gap: 10px; align-items: center; }

/* Bel-eerst-lijst (B1a) */
.pip-bellijst { padding: 14px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 0; }
.pip-bellijst__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-lijn); }
.pip-belnote { font-size: 12px; color: var(--c-ink-2); }
.pip-belrij { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); }
.pip-belrij:last-child { border-bottom: 0; }
.pip-belrang { font-weight: 800; color: var(--c-groen-d); font-size: 15px; }
.pip-belreden { font-size: 12.5px; color: var(--c-ink-2); }
.pip-belrij.is-stagnerend .pip-belreden { color: var(--c-terra); }
.pip-belknop { white-space: nowrap; }

/* Dubbel-lead-alarm (B1b) */
.pip-dupalarm { grid-column: 1 / -1; background: color-mix(in srgb, var(--c-amber) 12%, var(--c-paneel)); border: 1px solid var(--c-amber); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.45; }

/* Regelset-notitie (B1c) */
.pip-regelsetnote { grid-column: 1 / -1; font-size: 12.5px; color: var(--c-ink-2); margin: 0; }
.pip-filter-reset { margin-left: 10px; }

/* B25 · backend-kaart: website & funnel-instroom (web-leads) */
.pip-wlkaart { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 16px; }
.pip-wlkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pip-wlkop > span { font-size: 11px; color: var(--c-ink-2); }
.pip-wlrij { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; }
.pip-wlsoort { font-size: 11.5px; color: var(--c-ink-2); }
.pip-wlrij > div { display: flex; flex-direction: column; min-width: 0; }
.pip-wlrij > div > span { font-size: 11.5px; color: var(--c-ink-2); }
.pip-wlrij > div > span em { font-style: normal; color: var(--c-ink-3); }
.pip-wlacties { display: flex; gap: 6px; align-items: center; }
.pip-wlafspraak { font-size: 11px; color: var(--c-groen-d); }

/* FT-1.2: kicker en titel van het instroomblok op eigen regels */
.pip-wlkop .kicker { display: block; margin-bottom: 3px; }

/* ── relaties.css ── */
/* relaties.css — de lijst en de ingangen. RE15 (03-09) haalde de regels
   voor de verdwenen drawer, Woningkluis en het weergaven-paneel eruit. */
/* =====================================================================
   relaties.css — Module 1.5 · Relaties & Klant-360. Bouwt op tokens +
   bouwstenen.css (lijst, drawer, chips).
===================================================================== */
/* Lijst */


.rel-rij.is-actief { background: var(--c-groen-t); }


.rel-cs .mono { font-size: 1.25rem; font-weight: 800; }


dat blok .off-veld { margin: 0; }


.bs-form[hidden] { display: none !important; }


.rel-kvkres .mono { font-size: .62rem; color: var(--c-ink-3); }


.rel-intgl--klant.is-actief { border-color: var(--c-groen); }


.rel-intgl--klant.is-actief .rel-intgl__n { color: var(--c-groen-d); }
/* ═══ RE2 · de relatielijst uit wireframe v3 ═══
   De lijst: segment- en rollenbalk boven, de tabel met kolomkeuze en bulk-acties eronder. Alleen tokens. */

.rl-schil { display: flex; flex-direction: column; height: 100%; min-height: 0; }


.rl-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 18px 26px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); }


.rl-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }


.rl-rek { flex: 1; }


.rl-zoek { min-width: 300px; padding: 8px 12px; font-size: .8rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
/* RE7 (voorstel A, 12-08): het weergaven-paneel is weg — de lijst krijgt
   de volle breedte; het paneel ernaast is weg (RE7); RE15 haalde zijn stijlen eruit. */

.rl-vlak { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }
/* RE7 · segment- en rollenbalk: aaneengesloten chipgroepen mét telling */

.rl-segmentbalk { display: flex; align-items: center; gap: 14px; padding: 10px 20px 0; flex-wrap: wrap; }


.rl-seggroep { display: inline-flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; overflow: hidden; }


.rl-seg { border: 0; background: #fff; padding: 6px 12px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-right: var(--lijndikte) solid var(--c-lijn); }


.rl-seg:last-child { border-right: 0; }


.rl-seg.is-actief { background: var(--c-groen); color: #fff; }


.rl-seg.is-actief .rl-tel { color: #fff; opacity: .85; }


.rl-tel { font-size: .62rem; color: var(--c-ink-3); }


.rl-richting { margin-left: 4px; font-size: .6rem; }


.rl-sorteer.is-actief { color: var(--c-ink); }


.rl-vknop.is-actief { background: var(--c-groen-t); font-weight: 700; color: var(--c-groen-d); }


.rl-vnieuw.is-actief { background: var(--c-groen-t); color: var(--c-groen-d); border-style: solid; border-color: var(--c-groen); }
/* rechts: tabel */

.rl-tabelvlak { display: flex; flex-direction: column; min-width: 0; min-height: 0; }


.rl-lkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); }


.rl-lkop b { font-size: .86rem; }


.rl-telling { font-size: .72rem; color: var(--c-ink-3); margin-right: 8px; }


.rl-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 20px;
  background: var(--c-groen-t); border-bottom: var(--lijndikte) solid var(--c-groen); font-size: .78rem; }


.rl-tabelscroll { flex: 1; overflow: auto; }


.rl-tabel { border-collapse: collapse; width: 100%; }


.rl-tabel th { position: sticky; top: 0; background: #fff; text-align: left; padding: 8px 10px;
  border-bottom: var(--lijndikte) solid var(--c-lijn-2); z-index: 1; }


.rl-sorteer { border: 0; background: none; font: inherit; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); cursor: pointer; padding: 0; }


.rl-sorteer:hover { color: var(--c-ink); }


.rl-tabel td { padding: 9px 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; vertical-align: top; }


.rl-rij { cursor: pointer; }


.rl-rij:hover td { background: var(--c-paneel-2); }


.rl-rij.is-archief td { opacity: .62; }


.rl-vink { width: 34px; }


.rl-sub { font-size: .68rem; color: var(--c-ink-3); }


.rl-fase { font-size: .64rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 99px; padding: 1px 9px; color: var(--c-ink-2); white-space: nowrap; }


.rl-fase.is-klant { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }


.rl-fase.is-offerte { border-color: var(--c-groen); color: var(--c-groen-d); }


.rl-fase.is-akkoord { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }


.rl-fase.is-opvolging { border-color: var(--c-amber); color: var(--c-amber); }


.rl-dubbel { font-size: .6rem; font-weight: 800; color: var(--c-amber); border: 1px solid var(--c-amber);
  border-radius: 4px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }


.rl-tag { font-size: .62rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 0 7px; margin-right: 3px; color: var(--c-ink-2); }


.rl-pagina { display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; }
/* modalen: kolomkeuze en de verzendlijst van een campagne */

.rl-kolkeuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }


.rl-kolvink { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--c-ink-2); }


.rl-kolvink input { accent-color: var(--c-groen); }


.rl-verzendlijst { max-height: 240px; overflow-y: auto; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); }


.rl-verzendrij { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px;
  font-size: .74rem; border-bottom: var(--lijndikte) solid var(--c-lijn); }


.rl-verzendrij:last-child { border-bottom: 0; }


.rl-let { font-size: .72rem; color: var(--c-amber); margin: 8px 0 0; }
/* RE4 · de tweede ingang: schakelaar Relaties | Woningen */

.rl-schakel { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; }


.rl-schakelknop { border: 0; background: #fff; padding: 6px 14px; font-size: .74rem; font-weight: 700;
  color: var(--c-ink-2); font-family: inherit; cursor: pointer; }


.rl-schakelknop.is-actief { background: var(--c-groen); color: #fff; }
/* RE11 · een afgeleide eigenaar is geen toewijzing. Hij komt van de laatste
   offerte, dus hij staat er lichter bij — met het waaróm ernaast. */

.rel-eig--afgeleid { color: var(--c-ink-2); }


.rel-eig--afgeleid i { display: block; font: 400 .62rem/1.3 var(--font-mono); color: var(--c-ink-3, var(--c-ink-2)); font-style: normal; }
/* smal: de lijst in één kolom (het weergaven-paneel ernaast is sinds RE7 weg) */
 .rl-vlak { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .rl-vlak { grid-template-columns: 1fr; } }

/* RE16 · een afgevallen lead is een stand, geen leeg vakje */
.rl-fase.is-afgevallen { color: var(--c-ink-2); text-decoration: line-through; }

/* ── klantdossier.css ── */
/* klantdossier.css — klantkaart + Klant-360 samengevoegd (31-07) */
.kd-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.kd-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kd-kop__wie { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.kd-terug { font-size: .74rem; color: var(--c-ink-2); text-decoration: none; white-space: nowrap; }
.kd-terug:hover { color: var(--c-groen-d); }
.kd-knr { font-size: .68rem; color: var(--c-ink-3); }
.kd-kop__wie h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.kd-kop__adres { font-size: .78rem; color: var(--c-ink-2); }
.kd-kop__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.kd-raster { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.kd-links { display: flex; flex-direction: column; gap: 14px; background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); }
.kd-links .kc-memo { margin: 0; }
/* Loopt nu in de smalle kolom: regels onder elkaar, altijd binnen het vak */
.kd-links .kc-zaken--compact { flex-direction: column; align-items: stretch; }
.kd-links .kc-zaak { width: 100%; }
.kd-memoknop { align-self: flex-start; }
.kd-kicker { display: block; font-size: .6rem; letter-spacing: .1em; color: var(--c-ink-3); margin-bottom: 6px; }
.kd-kenmerken { display: flex; flex-direction: column; gap: 4px; }
.kd-kenmerk { font-size: .76rem; color: var(--c-ink-2); }
.kd-kenmerk .mono { font-size: .66rem; }
.kd-leeg { font-size: .74rem; color: var(--c-ink-3); margin: 0; }
.kd-rechts { min-width: 0; }
.kd-tabs { margin-bottom: 12px; flex-wrap: wrap; }
.kd-inhoud { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 16px 20px; box-shadow: var(--schaduw-tegel); }
.kd-inhoud .rec-h3:first-child { margin-top: 0; }
.kd-tijdlijn { display: flex; flex-direction: column; gap: 10px; }
.kd-event { display: flex; gap: 10px; font-size: .8rem; }
.kd-event__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-groen); margin-top: 5px; flex: none; }
.kd-event__dot.is-in { background: var(--c-terra); }
.kd-event__meta { font-size: .62rem; color: var(--c-ink-3); margin-top: 1px; }
.kd-docs { display: flex; flex-direction: column; gap: 6px; }
.kd-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 8px 12px; font-size: .78rem; }
.kd-doc__label { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-som { font-size: .8rem; color: var(--c-ink-2); margin: 0 0 10px; }
@media (max-width: 980px) { .kd-raster { grid-template-columns: 1fr; } }

/* Tegel-navigatie (akkoord 31-07): de tegels zíjn de tabs */
.kd-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kd-tegels--stil { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kd-tegel { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--c-lijn);
  border-radius: var(--radius); padding: 12px 16px; font-family: var(--font-ui);
  box-shadow: var(--schaduw-tegel); transition: border-color var(--overgang), box-shadow var(--overgang); }
.kd-tegel:hover { box-shadow: var(--schaduw-tegel-hover); }
.kd-tegel.is-actief { border-color: var(--c-groen); }
.kd-tegel__lbl { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); }
.kd-tegel__n { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); }
.kd-tegel__n.is-open { color: var(--c-amber); }
.kd-tegel__sub { font-size: .66rem; color: var(--c-ink-3); }
.kd-tegel--stil { padding: 10px 14px; }
.kd-tegel--stil .kd-tegel__lbl { color: var(--c-ink); font-size: .78rem; }
.kd-doc__link { color: var(--c-groen-d); text-decoration: none; font-size: .72rem; font-weight: 700; }
.kd-doc__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .kd-tegel { transition: none; } }

/* Label/waarde-rooster (akkoord 01-08): labels vet, waarden uitgelijnd */
.kd-rooster { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px 12px; font-size: .76rem; align-items: baseline; }
.kd-lbl { font-weight: 700; color: var(--c-ink); }
.kd-wrd { color: var(--c-ink-2); overflow-wrap: anywhere; }
.kd-wrd .mono { font-size: .64rem; }

/* Persoon & AVG (01-08): kopregel met maskeer-knop */
.kd-avgkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kd-avgkop .kd-kicker { margin-bottom: 0; }


/* ═══ RE3 · het record in drie kolommen (wireframe v3) ═══ */
.kd-raster--drie { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.kd-midden { display: flex; flex-direction: column; min-width: 0; gap: 10px; }
.kd-rechtskol { display: flex; flex-direction: column; gap: 14px; }
.kd-blok { display: flex; flex-direction: column; gap: 6px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--schaduw-tegel); }

/* klantwaarde in cijfers */
.kd-waarde { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kd-wcel { display: flex; flex-direction: column; }
.kd-wlbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.kd-wcel strong { font-size: 1rem; color: var(--c-ink); }
.kd-wsub { font-size: .64rem; color: var(--c-ink-3); }

/* dubbel-signaal */
.kd-dubbel { display: flex; flex-direction: column; gap: 4px; border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius); padding: 10px 12px; font-size: .74rem; background: var(--c-amber-t); }
.kd-dubbel b { font-size: .78rem; color: var(--c-amber); }
.kd-dubbel__knoppen { display: flex; gap: 6px; margin-top: 4px; }

/* inline bewerken */
.kd-inlineknop { border: 0; background: none; font: inherit; color: var(--c-ink); text-align: left;
  padding: 1px 3px; margin: -1px -3px; border-radius: 4px; cursor: text; }
.kd-inlineknop:hover { background: var(--c-groen-t); box-shadow: inset 0 -1px 0 var(--c-groen); }
.kd-inline { width: 100%; padding: 3px 6px; font: inherit; font-size: .76rem;
  border: var(--lijndikte) solid var(--c-groen); border-radius: 5px; }
.kd-toon { border: 1px dashed var(--c-lijn-2); background: none; border-radius: var(--radius);
  padding: 5px 8px; font-size: .68rem; color: var(--c-ink-2); font-family: inherit; cursor: pointer; margin-top: 6px; }
.kd-let { font-size: .66rem; color: var(--c-ink-3); margin: 4px 0 0; font-style: italic; }
.kd-woningknoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.kd-archiveer { align-self: flex-start; }

/* tabs + tijdlijn */
.kd-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.kd-tab { border: 0; background: none; padding: 8px 12px; font-size: .78rem; font-weight: 700;
  color: var(--c-ink-3); font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; }
.kd-tab.is-actief { color: var(--c-groen-d); border-bottom-color: var(--c-groen); }
.kd-tlkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.kd-tlchips { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.kd-pins { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
  border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); padding: 6px; background: var(--c-groen-t); }
.kd-tllijst { display: flex; flex-direction: column; }
.kd-tl { display: grid; grid-template-columns: 110px minmax(0, 1fr) 26px; gap: 10px; align-items: baseline;
  padding: 7px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.kd-tl:first-child { border-top: 0; }
.kd-tl__tijd { font-size: .66rem; color: var(--c-ink-3); }
.kd-tl__bron { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: normal; }
.kd-tl__pin { border: 0; background: none; color: var(--c-ink-3); cursor: pointer; font-size: .8rem; }
.kd-tl__pin:hover { color: var(--c-groen-d); }
.kd-tl.is-pin .kd-tl__pin { color: var(--c-groen-d); }

@media (max-width: 1240px) {
  .kd-raster--drie { grid-template-columns: 280px minmax(0, 1fr); }
  .kd-rechtskol { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .kd-raster--drie { grid-template-columns: 1fr; }
}

/* RE6 · samenvoegen: per veld kiezen wat wint */
.kd-samenvoeg { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.kd-svkop { font-size: .76rem; color: var(--c-ink-2); margin: 0 0 4px; }
.kd-svrij { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.kd-svveld { font-size: .68rem; color: var(--c-ink-3); }
.kd-svkeuze { display: flex; gap: 14px; flex-wrap: wrap; }
.kd-svkeuze label { display: flex; align-items: center; gap: 5px; }
.kd-svkeuze input { accent-color: var(--c-groen); }
.kd-svstukken { font-size: .72rem; color: var(--c-ink-3); margin: 8px 0 0; }

/* RE9 (12-08) · de fasebalk: berekend, alleen tonen — geen klikbare status */
.kd-fasebalk { display: flex; align-items: center; gap: 8px; padding: 8px 0 2px; flex-wrap: wrap; font-size: .72rem; }
.kd-fase { color: var(--c-ink-3); padding: 3px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; background: #fff; }
.kd-fase.is-geweest { color: var(--c-ink-2); border-color: var(--c-lijn-2); }
.kd-fase.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: #fff; font-weight: 700; }
.kd-fasepijl { color: var(--c-ink-3); font-size: .66rem; }

/* RE9 · naam-match-label op de tegels + prototype-band op de kluis-tab */
.kd-naammatch { font-size: .56rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 1px 6px; }
.kd-protoband { display: flex; align-items: center; gap: 9px; font-size: .72rem; color: var(--c-ink-2); margin-bottom: 10px; }
.kd-protoband .mproto, .kd-tab .mproto { font-size: .56rem; font-weight: 800; background: var(--stop-t); color: var(--stop); border-radius: 99px; padding: 1px 7px; }
.kd-belnummer { font-size: 1.05rem; margin: 0 0 10px; }
.kd-belnummer a { color: var(--c-ink); text-decoration: none; font-weight: 700; }

/* RE14 · acties rechts in een AVG-rij (benadering, kanaal) */
.kd-doc__acties { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* RE18 · de woning in beeld, boven de BAG-kenmerken */
.kd-woningvisual { margin: 6px 0 12px; }

/* ── woning.css ── */
/* woning.css — het woning-record (RE4). Zelfde vormtaal als het
   klantrecord (kd-blok, kd-rooster), met wat dit scherm eigen is: de
   bewonersperiodes, de maatregelen-strip en de garanties die bij de
   wóning horen. Alleen tokens. */

.wn-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 22px 32px 72px;
  display: flex; flex-direction: column; gap: 16px; }
.wn-raster { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.wn-links, .wn-rechts { display: flex; flex-direction: column; gap: 14px; }
.wn-leeg { font-size: .76rem; color: var(--c-ink-3); margin: 4px 0; }
.wn-bron { display: block; font-size: .62rem; color: var(--c-ink-3); font-style: normal; }

/* maatregelen */
.wn-maatregelen { display: flex; flex-wrap: wrap; gap: 5px; }
.wn-maatregel { font-size: .7rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 2px 10px; color: var(--c-ink-3); }
.wn-maatregel.is-gedaan { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); font-weight: 700; }

/* garanties bij de woning */
.wn-garanties { display: flex; flex-direction: column; gap: 8px; }
.wn-garantie { display: flex; flex-direction: column; font-size: .74rem; border-left: 3px solid var(--c-lijn-2);
  padding-left: 8px; color: var(--c-ink-2); }
.wn-garantie.is-actief { border-left-color: var(--c-groen); }
.wn-garantie em { font-size: .64rem; color: var(--c-ink-3); font-style: normal; }

/* bewoners met periode */
.wn-bewoners { display: flex; flex-direction: column; gap: 8px; }
.wn-bewoner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .78rem;
  padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.wn-bewoner:first-child { border-top: 0; }
.wn-bewoner.is-vorig { opacity: .68; }
.wn-bewoner__wie { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 180px; }
.wn-knr { font-size: .64rem; color: var(--c-ink-3); }
.wn-rol { font-size: .62rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 0 7px; color: var(--c-ink-3); }
.wn-bewoner__periode { font-size: .7rem; color: var(--c-ink-2); }
.wn-bewoner__reden { font-size: .68rem; color: var(--c-ink-3); font-style: italic; }

/* historie van het adres */
.wn-historie { display: flex; flex-direction: column; }
.wn-hrij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 10px; align-items: baseline;
  padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.wn-hrij:first-child { border-top: 0; }
.wn-hrij__tijd { font-size: .68rem; color: var(--c-ink-3); }
.wn-hrij__wie { display: block; font-size: .66rem; color: var(--c-ink-3); font-style: normal; }
.wn-hrij__soort { font-size: .64rem; color: var(--c-ink-3); text-align: right; }
.wn-docs { display: flex; flex-direction: column; gap: 4px; }
.wn-doc { font-size: .74rem; color: var(--c-ink-2); }

@media (max-width: 1000px) { .wn-raster { grid-template-columns: 1fr; } }

/* ── nieuwerelatie.css ── */
/* nieuwerelatie.css — de intake in vijf stappen (RE5, wireframe
   nieuwe-relatie). Rustig formulier, één vraag per stap, de stappenbalk
   laat zien waar je bent. Alleen tokens. */

.nr-wortel { max-width: 900px; margin: 0 auto; width: 100%; padding: 22px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }
.nr-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.nr-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.nr-rek { flex: 1; }

/* stappenbalk */
.nr-stappen { display: flex; gap: 4px; flex-wrap: wrap; }
.nr-stap { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 120px;
  border-bottom: 2px solid var(--c-lijn); padding: 6px 2px; font-size: .72rem; color: var(--c-ink-3); }
.nr-stap.is-nu { border-bottom-color: var(--c-groen); color: var(--c-ink); font-weight: 700; }
.nr-stap.is-klaar { border-bottom-color: var(--c-groen); color: var(--c-groen-d); }
.nr-bol { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); font-size: .66rem; font-weight: 800; }
.nr-stap.is-nu .nr-bol { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.nr-stap.is-klaar .nr-bol { border-color: var(--c-groen); color: var(--c-groen-d); }

/* paneel */
.nr-vlak { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; gap: 10px; }
.nr-kop { font-size: 1.05rem; margin: 0; }
.nr-sub { font-size: .8rem; color: var(--c-ink-2); margin: 0 0 6px; }
.nr-hint { font-size: .74rem; color: var(--c-ink-3); margin: 4px 0 0; }
.nr-link { border: 0; background: none; font: inherit; color: var(--c-groen-d); font-weight: 700; cursor: pointer; padding: 0; }
.nr-melding { font-size: .78rem; color: var(--c-amber); margin: 0; }

/* velden */
.nr-rij { display: flex; gap: 10px; flex-wrap: wrap; }
.nr-veld { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px; font-size: .74rem; color: var(--c-ink-2); }
.nr-veld--smal { flex: 0 1 130px; }
.nr-veld span i { font-style: normal; color: var(--c-ink-3); font-size: .68rem; }
.nr-veld input, .nr-veld select, .nr-veld textarea { padding: 7px 10px; font-size: .8rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); color: var(--c-ink); }
.nr-blokkop { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); margin-top: 8px; }
.nr-blokkop em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 400; }
.nr-schakel { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  overflow: hidden; align-self: flex-start; }
.nr-schakel button { border: 0; background: #fff; padding: 7px 16px; font-size: .76rem; font-weight: 700;
  color: var(--c-ink-2); font-family: inherit; cursor: pointer; }
.nr-schakel button.is-actief { background: var(--c-groen); color: #fff; }

/* stap 2 · woning + dedup */
.nr-woning { border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); padding: 14px 16px;
  background: var(--c-groen-t); display: flex; flex-direction: column; gap: 10px; }
.nr-woning__top { display: flex; align-items: flex-start; gap: 10px; }
.nr-woning h3 { margin: 0; font-size: .92rem; }
.nr-vink { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 99px; background: var(--c-groen); color: #fff; font-size: .7rem; flex: none; }
.nr-bag { font-size: .68rem; color: var(--c-ink-3); }
.nr-kenmerken { display: flex; gap: 18px; flex-wrap: wrap; }
.nr-kenmerk { display: flex; flex-direction: column; }
.nr-kenmerk b { font-size: .92rem; }
.nr-kenmerk span { font-size: .6rem; letter-spacing: .06em; color: var(--c-ink-3); }
.nr-autolabel { font-size: .62rem; color: var(--c-groen-d); }
.nr-schoon { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; }
.nr-bekend { border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius);
  padding: 14px 16px; background: var(--c-amber-t); display: flex; flex-direction: column; gap: 8px; }
.nr-bekend h3 { margin: 0; font-size: .88rem; color: var(--c-amber); }
.nr-bekend p { margin: 0; font-size: .78rem; }
.nr-bekendkaart { background: #fff; border-radius: var(--radius); padding: 10px 12px; font-size: .8rem; }
.nr-knr { font-size: .66rem; color: var(--c-ink-3); }
.nr-regel { font-size: .72rem; color: var(--c-ink-2); }
.nr-keuzes { display: flex; flex-direction: column; gap: 6px; }
.nr-keuze { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 10px 12px;
  font-family: inherit; cursor: pointer; }
.nr-keuze.is-gekozen { border: 2px solid var(--c-groen); background: var(--c-groen-t); }
.nr-keuze b { display: block; font-size: .8rem; }
.nr-keuze small { font-size: .7rem; color: var(--c-ink-2); }
.nr-ic { font-size: .9rem; color: var(--c-groen-d); }

/* stap 4 · bronnen */
.nr-bronnen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.nr-bronknop { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 10px 12px;
  font-family: inherit; cursor: pointer; }
.nr-bronknop.is-actief { border: 2px solid var(--c-groen); background: var(--c-groen-t); }
.nr-bronknop b { font-size: .8rem; }
.nr-bronknop small { font-size: .68rem; color: var(--c-ink-3); }

/* stap 5 · klaar */
.nr-klaar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; text-align: center; }
.nr-grootvink { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 99px; background: var(--c-groen); color: #fff; font-size: 1.4rem; }
.nr-klaar h2 { margin: 4px 0 0; font-size: 1.1rem; }
.nr-knrgroot { font-size: .78rem; color: var(--c-ink-3); }
.nr-gedaan { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nr-gedaanrij { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; }
.nr-v { color: var(--c-groen-d); font-weight: 800; }
.nr-vervolg { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 12px; }
.nr-vervolgknop { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 11px 13px;
  font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.nr-vervolgknop small { font-size: .68rem; font-weight: 400; color: var(--c-ink-3); }
.nr-vervolgknop.is-primair { background: var(--gradient-primair); border-color: var(--c-groen); color: #fff;
  box-shadow: var(--schaduw-knop); }
.nr-vervolgknop.is-primair small { color: #fff; opacity: .85; }

/* voet */
.nr-voet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nr-stapinfo { font-size: .64rem; letter-spacing: .07em; color: var(--c-ink-3); }

/* ── cockpit360.css ── */
/* =====================================================================
   cockpit360.css — Module 1.6 · Casa360 cockpit. Bouwt op tokens +
   bouwstenen.css. Funnel-tinten: oplopend groen (tokens, geen gradient).
===================================================================== */

.ck-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.ck-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .ck-grid, .ck-grid3 { grid-template-columns: 1fr; } }
.ck-blok { padding: 18px 20px; }
.ck-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ck-blok .rec-h2 { margin-bottom: 13px; }
.ck-blok__kop .rec-h2 { margin-bottom: 0; }
.ck-sectiekop { margin: 0 0 11px; }

/* Funnel — tinten via opacity-loze token-vlakken */
.ck-funnel { display: flex; flex-direction: column; gap: 9px; }
.ck-funnelrij { display: flex; align-items: center; gap: 12px; }
.ck-funnellabel { width: 120px; flex: none; font-size: .76rem; color: var(--c-ink-2); }
.ck-funnelbaan { flex: 1; height: 22px; border-radius: 7px; background: var(--c-paneel); }
.ck-funnelbalk { height: 100%; border-radius: 7px; display: flex; align-items: center; padding-left: 10px; font-size: .68rem; font-weight: 700; color: #fff; min-width: 34px; }
.ck-funnelbalk--1 { background: var(--c-groen-t); color: var(--c-groen-d); }
.ck-funnelbalk--2 { background: var(--c-lijn-2); color: var(--c-ink); }
.ck-funnelbalk--3 { background: var(--c-groen); opacity: .75; }
.ck-funnelbalk--4 { background: var(--c-groen); }
.ck-funnelbalk--5 { background: var(--c-groen-d); }
.ck-voetnoot { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .68rem; color: var(--c-ink-3); }
.ck-voetnoot--midden { border-top: 0; padding-top: 0; margin-top: 8px; text-align: center; }

/* Rijen */
.ck-rijen { display: flex; flex-direction: column; gap: 8px; }
.ck-rij { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--c-ink-2); }
.ck-rij b { font-weight: 800; color: var(--c-ink); text-align: right; }
.ck-rij--amber, .ck-rij--amber b { color: var(--c-amber); }
.ck-groen { color: var(--c-groen-d); }
.ck-sync { color: var(--c-groen-d); font-size: .64rem; }
.ck-badge { font-size: .6rem; color: var(--c-ink-2); background: var(--c-paneel); padding: 4px 8px; border-radius: 6px; }

/* Facturatie */
.ck-facturatie { display: flex; flex-direction: column; }
.ck-facturatie__voet { margin-top: auto; padding-top: 14px; }
.ck-verstuur { width: 100%; }

/* Module-kaarten */
.ck-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1100px) { .ck-modules { grid-template-columns: repeat(2, 1fr); } }
.ck-module { padding: 16px 18px; text-align: left; cursor: pointer; display: flex; flex-direction: column; font-family: var(--font-ui); border-top: 3px solid var(--c-lijn-2); transition: border-color var(--overgang); }
.ck-module:hover { border-color: var(--c-lijn-2); }
.ck-module--groen { border-top-color: var(--c-groen); }
.ck-module--amber { border-top-color: var(--c-amber); }
.ck-module--terra { border-top-color: var(--c-terra); }
.ck-module--stil { border-top-color: var(--c-ink-2); }
.ck-module__titel { font-weight: 800; font-size: .88rem; margin-bottom: 11px; }
.ck-module__rijen { display: flex; flex-direction: column; gap: 7px; }
.ck-module__rijen .ck-rij { font-size: .76rem; }
.ck-module__cta { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .74rem; color: var(--c-groen-d); }

/* Donkere feedback-kaart */
.ck-donker { border-radius: var(--radius); background: var(--c-ink); color: var(--c-creme); padding: 18px 20px; }
.ck-donker__titel { font-weight: 800; font-size: .88rem; margin-bottom: 8px; }
.ck-donker__tekst { font-size: .8rem; line-height: 1.6; color: var(--c-lijn-2); }

/* ── prijzen.css ── */
/* =====================================================================
   prijzen.css — Module 1.7 · Prijsbeheer. Bouwt op tokens + bouwstenen.
===================================================================== */

.px-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .px-grid { grid-template-columns: 1fr; } }
.px-links, .px-rechts { display: flex; flex-direction: column; gap: 14px; }
.px-blok { padding: 16px 18px; }
.px-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.px-kicker { display: block; margin-bottom: 10px; }
.px-kicker--groen { color: var(--c-groen-d); }
.px-sub { font-size: .72rem; color: var(--c-ink-3); margin: 2px 0 0; }
.px-groen { color: var(--c-groen-d); }
.px-amber { color: var(--c-amber); }
.px-terra { color: var(--c-terra-d); font-weight: 800; }

/* Woning-keuze + maatregel-toggles */
.px-woningen, .px-maten { display: flex; flex-direction: column; gap: 8px; }
.px-woning { text-align: left; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; cursor: pointer; font-family: var(--font-ui); transition: border-color var(--overgang), background var(--overgang); }
.px-woning:hover { border-color: var(--c-lijn-2); }
.px-woning.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.px-woning__adres { font-weight: 800; font-size: .8rem; }
.px-woning__sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 1px; }
.px-maat { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: .78rem; color: var(--c-ink-2); }
.px-maat__dot { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--c-lijn-2); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; }
.px-maat.is-aan { border-color: var(--c-groen); color: var(--c-ink); }
.px-maat.is-aan .px-maat__dot { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.px-onbekend { font-size: .58rem; color: var(--c-amber); }

/* Statusbalk */
.px-statusbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.px-statusbalk__links { display: flex; align-items: center; gap: 12px; }
.px-geldig { font-size: .74rem; color: var(--c-ink-3); }

/* Interne opbouw */
.px-comp { display: grid; grid-template-columns: 1.4fr 1.2fr .8fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-comp--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-comp__naam { font-weight: 700; font-size: .82rem; }
.px-comp__detail { font-size: .72rem; color: var(--c-ink-3); }
.px-comp__netto { text-align: right; font-weight: 800; }
.px-bar { height: 14px; border-radius: 8px; overflow: hidden; display: flex; background: var(--c-paneel); margin: 14px 0 8px; }
.px-bar__seg--ink { background: var(--c-lijn-2); }
.px-bar__seg--marge { background: var(--c-groen); }
.px-bar__seg--btw { background: var(--c-amber); }
.px-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .72rem; color: var(--c-ink-2); align-items: center; }
.px-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.px-dot--ink { background: var(--c-lijn-2); }
.px-dot--marge { background: var(--c-groen); }
.px-dot--btw { background: var(--c-amber); }
.px-marge { margin-left: auto; font-weight: 700; color: var(--c-groen-d); }

/* BTW + subsidie duo */
.px-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .px-duo { grid-template-columns: 1fr; } }
.px-rij { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; color: var(--c-ink-2); }
.px-rij--totaal { border-bottom: 0; font-weight: 800; color: var(--c-ink); }
.px-eind { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn-2); font-size: .78rem; color: var(--c-ink-2); }
.px-eind .mono { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); }
.px-subsidie { background: var(--c-groen-t); }
.px-subsidie__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.px-subsidie__bedrag { font-size: 1.7rem; font-weight: 800; color: var(--c-groen-d); }
.px-subsidie__geen { font-weight: 800; font-size: 1.05rem; color: var(--c-ink-3); margin-bottom: 4px; }
.px-subsidie__uitleg { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }

/* Tarieven */
.px-tarieven { padding: 16px 20px; margin-bottom: 14px; }
.px-tarieven__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.px-tarief { display: grid; grid-template-columns: 1.5fr .9fr .8fr .8fr .7fr 1fr 76px; gap: 10px; align-items: center; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-tarief--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-tarief__naam { font-weight: 700; font-size: .8rem; }
.px-tarief__unit { font-size: .72rem; color: var(--c-ink-3); }
.px-tarief__rvo { font-size: .74rem; color: var(--c-ink-2); }
.px-tarief .chip { justify-self: start; }
.px-invoer { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--c-ink-3); }
.px-invoer input { width: 92px; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--c-ink); background: #fff; text-align: right; }
.px-invoer input:focus-visible { border-color: var(--c-groen); }

/* Versiebeheer */
.px-pending { padding: 18px 20px; margin-bottom: 16px; border-color: var(--c-amber); background: var(--c-amber-t); }
.px-pending__kop { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: .88rem; }
.px-pending__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; align-items: center; }
@media (max-width: 760px) { .px-pending__grid { grid-template-columns: 1fr; } }
.px-pending__wat { font-weight: 700; font-size: .82rem; }
.px-pending__delta { font-size: .82rem; color: var(--c-ink-2); }
.px-pending__delta strong { color: var(--c-ink); }
.px-pending__actie { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.px-versies { padding: 6px 20px 16px; }
.px-versies__titel { padding: 14px 0 6px; margin: 0; }
.px-versie { display: flex; gap: 12px; padding: 13px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-versie__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-groen); flex: none; margin-top: 5px; }
.px-versie__kop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: .82rem; }
.px-versie__v { font-size: .64rem; font-weight: 700; color: var(--c-ink-2); background: var(--c-paneel); padding: 2px 8px; border-radius: 6px; }
.px-versie__delta { font-size: .76rem; color: var(--c-ink-2); margin-top: 4px; }
.px-versie__fiat { font-size: .7rem; font-weight: 700; color: var(--c-groen-d); margin-top: 3px; }

/* Nacalculatie */
.px-nacs { padding: 0 20px 6px; }
.px-nac { display: grid; grid-template-columns: 1fr 1.3fr .9fr .9fr .8fr 1fr; gap: 10px; align-items: center; padding: 12px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-nac--kop { border-top: 0; padding: 12px 0 8px; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-nac__ord { font-weight: 700; font-size: .72rem; color: var(--c-groen-d); }
.px-nac__klant { font-weight: 700; font-size: .8rem; }
.px-nac__calc, .px-nac__werk, .px-nac__afw { text-align: right; font-size: .78rem; }
.px-nac.is-struct { background: var(--c-terra-t); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.px-signaal { justify-self: start; background: #fff; border: var(--lijndikte) solid var(--c-terra); border-radius: var(--radius-pill); color: var(--c-terra-d); font-family: var(--font-ui); font-size: .68rem; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.px-signaal:hover { background: var(--c-terra-t); }

/* Producten */
.px-prod { display: grid; grid-template-columns: 2fr .8fr .8fr .9fr .5fr; gap: 10px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-prod--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-prod__naam { font-weight: 700; font-size: .8rem; }
.px-prod .chip { justify-self: start; }
.px-prod__btw { font-size: .74rem; color: var(--c-ink-3); }
.px-nieuw { border: 1.5px dashed var(--c-lijn-2); border-radius: var(--radius); background: var(--c-creme); padding: 20px; }
.px-nieuw__rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.px-nieuw__naam { flex: 2; min-width: 200px; width: auto; }
.px-nieuw__cats { display: flex; gap: 7px; }
.px-invoer--nieuw input { width: 110px; }

/* =====================================================================
   Besparingsmotor & CasaScore (tab, spec 1.2)
===================================================================== */
.bm-status { margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 8px; }
.bm-status__rij { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--c-ink-3); }
.bm-verify { margin-top: 4px; font-size: .74rem; padding: 9px 14px; }
.bm-geverifieerd { font-size: .74rem; font-weight: 700; color: var(--c-groen-d); }

/* Score-ringen (SVG-boog — geen gradient) */
.bm-scorekaart { padding: 20px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.bm-ringen { display: flex; align-items: center; gap: 18px; }
.bm-pijl { font-size: 1.6rem; color: var(--c-lijn-2); }
.bm-ring__spoor { fill: none; stroke: var(--c-paneel); stroke-width: 9; }
.bm-ring__boog { fill: none; stroke-width: 9; stroke-linecap: round; }
.bm-ring--nu .bm-ring__boog { stroke: var(--c-amber); }
.bm-ring--mogelijk .bm-ring__boog { stroke: var(--c-groen); }
.bm-ring__score { font-family: var(--font-mono); font-size: 26px; font-weight: 800; fill: var(--c-ink); text-anchor: middle; }
.bm-ring__sublabel { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: var(--c-ink-3); text-anchor: middle; }
.bm-scoretekst { flex: 1; min-width: 190px; }
.bm-scoretitel { font-weight: 800; font-size: 1rem; }
.bm-scoresub { font-size: .8rem; color: var(--c-ink-2); margin-top: 4px; }
.bm-scoresub strong { color: var(--c-groen-d); }
.bm-disclaimer { font-size: .68rem; color: var(--c-ink-3); margin-top: 8px; }

/* Bouwdeel-tabel */
.bm-deel { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.bm-deel.is-vast { cursor: default; }
.bm-deel--kop { border-top: 0; padding: 6px 0; cursor: default; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.bm-deel__naam { font-weight: 700; font-size: .82rem; }
.bm-deel__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.bm-deel__comfort { font-size: .66rem; color: var(--c-ink-3); }
.bm-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); display: flex; overflow: hidden; }
.bm-balk__cur { background: var(--c-groen); }
.bm-balk__pot { background: var(--c-amber-t); }
.bm-deel__delta { font-weight: 800; color: var(--c-ink-3); }
.bm-groen { color: var(--c-groen-d); }
.bm-deel__besp { font-size: .78rem; font-weight: 700; color: var(--c-groen-d); }
.bm-deel__actie { display: flex; justify-content: flex-end; }
.bm-afnemen { padding: 7px 12px; background: var(--c-groen-t); color: var(--c-groen-d); border: 0; border-radius: 9px; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bm-afnemen:hover { background: var(--c-groen); color: #fff; }

/* Modelbeheer */
.bm-modelgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .bm-modelgrid { grid-template-columns: 1fr; } }
.bm-dot { background: var(--c-amber); }
.bm-v { color: var(--c-amber); background: var(--c-amber-t); }
.bm-aanname { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.bm-aanname__par { font-weight: 700; font-size: .8rem; }
.bm-aanname__waarde { font-weight: 800; color: var(--c-groen-d); font-size: .8rem; }

.px-link { font-weight: 700; color: var(--c-groen-d); text-decoration: none; }
.px-link:hover { text-decoration: underline; }

/* Wat-als-simulator (B4a) */
.px-simkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.px-simkpis span { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; }
.px-simkpis em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.px-simkpis b { font-size: 15px; }
.px-simrij { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.px-simrij--kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.px-sim__bron { margin-top: 10px; }

/* Grandfathering (B4c) */
.px-gf { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.px-gf--oud { border-color: var(--c-amber); }
.px-gf__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-gf__versie { font-weight: 800; }
.px-gf__tel { margin-left: auto; font-size: 12.5px; color: var(--c-ink-2); }
.px-gf__lijst { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--c-ink-2); }
.px-gf__open { margin-top: 4px; }

/* ---------- Prijsregel-beheer (regels toevoegen/bewerken/archiveren) ---------- */
.px-regelacties { display: flex; gap: 4px; justify-self: end; }
.px-mini { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 5px 8px;
  font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.px-mini:hover { background: var(--c-creme); border-color: var(--c-groen); color: var(--c-groen-d); }
.px-regelnieuw { margin-top: 12px; background: transparent; border: 1px dashed var(--c-lijn-2); border-radius: var(--radius);
  padding: 9px 14px; font: 700 .72rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; width: 100%;
  transition: border-color 160ms ease, color 160ms ease; }
.px-regelnieuw:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.px-archief { margin-top: 14px; border-top: 1px dashed var(--c-lijn); padding-top: 11px; display: grid; gap: 6px; }
.px-archrij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-3); }
.px-archrij em { font-size: .66rem; font-style: normal; color: var(--c-ink-3); }

/* VK2 · maatregelen zonder vaste prijs. Een steiger of een e-DNA-onderzoek
   wordt per geval doorbelast; ze als € 0 in de tarieventabel zetten zou een
   marge van 0% opleveren en het gemiddelde vervuilen. Hier staan ze apart,
   mét de reden die de regelset erbij geeft. */
.px-pergeval { margin: 10px 0 0; padding: 12px 14px; border: var(--lijndikte) dashed var(--c-lijn-2);
  border-radius: var(--radius); background: var(--c-paneel); }
.px-pergeval .kicker { display: block; margin-bottom: 8px; }
.px-pergeval__rij { display: grid; grid-template-columns: 1.4fr 90px minmax(0, 3fr); gap: 12px;
  align-items: baseline; padding: 5px 0; font: 400 .72rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.px-pergeval__rij strong { color: var(--c-ink); font-size: .74rem; }

/* VK2 · de balk die verschijnt zodra er prijzen zijn ingetikt maar nog niet
   opgeslagen. Zonder deze stap schreef een prijswijziging alleen in de
   browser: het scherm toonde de nieuwe prijs, de offertemotor de oude. */
.px-conceptbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius); background: var(--c-amber-t); }
.px-conceptbalk__tel { font: 700 .78rem/1 var(--font-ui); color: var(--c-ink); }
.px-conceptbalk .px-sub { flex: 1 1 200px; margin: 0; }

/* ── werkbon.css ── */
/* =====================================================================
   werkbon.css — Module 2.2 · Werkbon & dossier. Links de uitvoerder-app
   (telefoon-mockup, donker frame — zonder schaduw, gemeld), rechts de
   terugkoppeling per uitvoerder + het kwaliteitsdossier. Bouwt op
   tokens + bouwstenen.css; foto-placeholders als vlakke tinten.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.wb { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.wb-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .wb-grid { grid-template-columns: 1fr; } }

/* ---- uitvoerder-app (telefoon) ---- */
.wb-app .kicker { display: block; margin-bottom: 8px; }
.wb-frame { border-radius: 30px; background: #1A1917; padding: 12px; border: var(--lijndikte) solid var(--c-lijn-2); }
.wb-scherm { border-radius: 22px; overflow: hidden; background: var(--c-creme); }
.wb-appkop { background: var(--c-ink); padding: 16px 16px 14px; color: #fff; }
.wb-appkop__rij { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wb-merk { font-weight: 800; font-size: .84rem; color: #EEEFEA; }
.wb-merk span { color: var(--c-terra-t); }
.wb-appkop__mont { font-size: .6rem; color: rgba(255,255,255,.55); }
.wb-appkop__bon { font-weight: 800; font-size: .92rem; }
.wb-appkop__sub { font-size: .68rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.wb-body { padding: 14px; }

.wb-gps { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--c-paneel); margin-bottom: 13px; }
.wb-gps__coord { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: .66rem; color: var(--c-groen-d); }
.wb-gps__meta { font-size: .54rem; color: var(--c-ink-3); margin-top: 2px; }
.wb-net { flex: none; border: 0; cursor: pointer; padding: 4px 9px; border-radius: 99px; white-space: nowrap; font-family: var(--font-mono); font-size: .56rem; font-weight: 600; background: var(--c-groen-t); color: var(--c-groen-d); }
.wb-net.is-offline { background: var(--c-amber-t); color: var(--c-amber); }

.wb-kicker { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); margin: 13px 0 7px; }
.wb-kicker--rij { display: flex; align-items: center; justify-content: space-between; }
.wb-wissel { border: 0; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: .6rem; font-weight: 700; color: var(--c-groen); text-transform: none; letter-spacing: 0; }

.wb-kv { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; color: var(--c-ink-2); padding: 2.5px 0; }
.wb-kv span:last-child { color: var(--c-ink); font-weight: 600; }
.wb-kv--laatste { margin-bottom: 2px; }

.wb-taken { display: flex; flex-direction: column; gap: 6px; }
.wb-taak { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font-family: var(--font-ui); font-size: .72rem; font-weight: 500; color: var(--c-ink-2); transition: border-color var(--overgang); }
.wb-taak__box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--c-lijn-2); background: transparent; display: flex; align-items: center; justify-content: center; }
.wb-taak.is-klaar { font-weight: 700; color: var(--c-ink); }
.wb-taak.is-klaar .wb-taak__box { background: var(--c-groen); border-color: var(--c-groen); }

.wb-voortgang { display: flex; justify-content: space-between; font-size: .64rem; color: var(--c-ink-3); margin: 12px 0 5px; }
.wb-balk { height: 6px; border-radius: 99px; background: var(--c-paneel); margin-bottom: 2px; }
.wb-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-amber); transition: width .3s; }

/* foto-placeholders: vlakke tint i.p.v. prototype-gradient (verboden) */
.wb-fotos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.wb-foto { aspect-ratio: 1; border-radius: 8px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-lijn); position: relative; display: flex; align-items: center; justify-content: center; }
.wb-foto--groot { aspect-ratio: 4/3; border-radius: 11px; }
.wb-foto__tag { position: absolute; top: 5px; left: 5px; font-size: .5rem; font-weight: 600; color: #fff; background: rgba(51,50,46,.55); padding: 2px 5px; border-radius: 4px; }
.wb-foto--ok { background: var(--c-groen-t); border: 1.5px solid var(--c-groen); }
.wb-foto--leeg { background: transparent; border: 1.5px dashed var(--c-amber); color: var(--c-ink-3); font-size: .78rem; opacity: .7; }
.wb-foto--plus { border-color: var(--c-lijn-2); opacity: .5; }

.wb-matlijst { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; overflow: hidden; background: #fff; }
.wb-mat { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.wb-mat:last-child { border-bottom: 0; }
.wb-mat__prod { font-weight: 700; font-size: .68rem; }
.wb-mat__batch { font-size: .56rem; color: var(--c-ink-3); margin-top: 1px; }
.wb-mat__qty { font-size: .64rem; font-weight: 600; color: var(--c-ink-2); white-space: nowrap; }

/* afwijkingen: prototype-tinten → terra (meerwerk) / rood (schade) / amber (risico) */
.wb-afwchips { display: flex; gap: 5px; margin-bottom: 8px; }
.wb-afwchip { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 8px; cursor: pointer; font-family: var(--font-ui); font-size: .62rem; font-weight: 700; border: 1.5px solid var(--c-lijn-2); background: transparent; color: var(--c-ink-2); transition: background var(--overgang); }
.wb-afwchip i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.wb-afwchip--terra i { background: var(--c-terra); }
.wb-afwchip--rood i { background: var(--c-rood); }
.wb-afwchip--amber i { background: var(--c-amber); }
.wb-afwchip--terra.is-actief { background: var(--c-terra); border-color: var(--c-terra); }
.wb-afwchip--rood.is-actief { background: var(--c-rood); border-color: var(--c-rood); }
.wb-afwchip--amber.is-actief { background: var(--c-amber); border-color: var(--c-amber); }
.wb-afwchip.is-actief { color: #fff; }
.wb-afwchip.is-actief i { background: #fff; }

.wb-afwrij { display: flex; gap: 8px; padding: 8px 10px; border-radius: 9px; margin-bottom: 5px; border: var(--lijndikte) solid var(--c-lijn); }
.wb-afwrij i { width: 3px; border-radius: 2px; flex: none; }
.wb-afwrij--terra { background: var(--c-terra-t); } .wb-afwrij--terra i { background: var(--c-terra); }
.wb-afwrij--rood { background: var(--c-rood-t); } .wb-afwrij--rood i { background: var(--c-rood); }
.wb-afwrij--amber { background: var(--c-amber-t); } .wb-afwrij--amber i { background: var(--c-amber); }
.wb-afwrij__label { font-size: .66rem; font-weight: 800; }
.wb-afwrij--terra .wb-afwrij__label { color: var(--c-terra-d); }
.wb-afwrij--rood .wb-afwrij__label { color: var(--c-rood); }
.wb-afwrij--amber .wb-afwrij__label { color: var(--c-amber); }
.wb-afwrij__desc { font-size: .62rem; color: var(--c-ink-2); margin-top: 1px; }

.wb-stil { font-size: .62rem; color: var(--c-ink-3); }
.wb-stil--midden { text-align: center; margin-top: 6px; }

.wb-handtekening { border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; padding: 12px; text-align: center; background: #fff; }
.wb-handtekening__naam { font-family: cursive; font-size: 1.25rem; color: var(--c-ink); transform: rotate(-4deg); }
.wb-handtekening__meta { font-size: .58rem; color: var(--c-ink-3); margin-top: 2px; }

/* dossiercheck-poort in de app */
.wb-check { border: var(--lijndikte) solid var(--c-amber); border-radius: 11px; padding: 11px 12px; margin: 13px 0 11px; background: var(--c-amber-t); }
.wb-check.is-compleet { border-color: var(--c-groen); background: var(--c-groen-t); }
.wb-check__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: var(--c-ink-2); }
.wb-check__badge { font-size: .52rem; padding: 3px 7px; border-radius: 99px; background: var(--c-amber-t); color: var(--c-amber); border: var(--lijndikte) solid var(--c-amber); }
.wb-check.is-compleet .wb-check__badge { background: var(--c-groen-t); color: var(--c-groen-d); border-color: var(--c-groen); }
.wb-req { display: flex; align-items: center; gap: 8px; font-size: .66rem; font-weight: 500; color: var(--c-amber); padding: 3px 0; }
.wb-req__box { width: 16px; height: 16px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--c-amber); background: transparent; }
.wb-req.is-ok { color: var(--c-ink); font-weight: 600; }
.wb-req.is-ok .wb-req__box { background: var(--c-groen); border: 0; }

.wb-gate { width: 100%; padding: 12px; border: 0; border-radius: 11px; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; background: var(--c-groen); color: #fff; transition: background var(--overgang); }
.wb-gate:hover:not(:disabled) { background: var(--c-groen-d); }
.wb-gate:disabled { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }

.wb-app__voet { font-size: .7rem; line-height: 1.5; color: var(--c-ink-3); margin-top: 10px; text-align: center; }

/* ---- beheer: terugkoppeling per uitvoerder ---- */
.wb-rechts { min-width: 0; }
.wb-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; }
.wb-lijst__kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 12px; flex-wrap: wrap; }
.wb-lijst__kop strong { font-size: .95rem; }
.wb-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; }
.wb-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 12px; }
.wb-tab { padding: 8px 15px; border-radius: 9px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .76rem; font-weight: 600; background: transparent; color: var(--c-ink-2); transition: background var(--overgang); }
.wb-tab.is-actief { background: var(--c-ink); color: #fff; }

.wb-groep__kop { display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: var(--c-paneel); border-top: var(--lijndikte) solid var(--c-lijn); }
.wb-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .74rem; flex: none; }
.wb-groep__naam { flex: 1; min-width: 0; font-weight: 800; font-size: .84rem; }
.wb-groep__naam span { font-weight: 500; font-size: .76rem; color: var(--c-ink-3); }
.wb-groep__stat { font-size: .68rem; color: var(--c-ink-2); }

.wb-rij { display: grid; grid-template-columns: 78px 1.1fr 1.4fr .9fr .6fr .6fr .9fr; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 20px; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: .76rem; transition: background var(--overgang); }
.wb-rij:hover { background: var(--c-creme); }
.wb-rij.is-actief { background: var(--c-groen-t); }
.wb-rij--kop { padding: 8px 20px 4px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.wb-rij--kop:hover { background: transparent; }
.wb-rij__id { font-size: .7rem; color: var(--c-ink-2); }
.wb-rij__klant { font-weight: 700; }
.wb-rij__taak, .wb-rij__tijd { color: var(--c-ink-2); font-size: .74rem; }
.wb-groen { color: var(--c-groen-d); }
.wb-amber { color: var(--c-amber); }

/* ---- kwaliteitsdossier ---- */
.wb-dossier { padding: 20px; margin-bottom: 14px; }
.wb-dossier__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wb-dossier__titel { display: flex; align-items: center; gap: 9px; font-size: .95rem; }
.wb-dossier__sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 3px; }
.wb-dossier__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .wb-dossier__grid { grid-template-columns: 1fr; } }
.wb-dossier__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wb-dossier__kicker { display: block; margin-bottom: 10px; }
/* Controlepunten zijn een oordeel, geen versiering: open = leeg vakje,
   afgevinkt = groen. Bij een echte bon is de rij een knop (klikbaar). */
.wb-punt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: 400 .78rem var(--font-ui); color: var(--c-ink-3); padding: 5px 0; background: transparent; border: 0; }
button.wb-punt { cursor: pointer; transition: color var(--overgang); }
button.wb-punt:hover { color: var(--c-ink); }
.wb-punt.is-ok { color: var(--c-ink-2); }
.wb-punt__box { width: 19px; height: 19px; flex: none; border-radius: 6px; background: var(--c-lijn-2);
  display: flex; align-items: center; justify-content: center; transition: background var(--overgang); }
.wb-punt.is-ok .wb-punt__box { background: var(--c-groen); }
/* Zoekbalk boven de werkbonlijst — met honderden werkorders vind je een
   bon niet meer door te scrollen. */
.wb-zoekbalk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); }
.wb-zoekbalk .kicker { flex: none; }
.wb-zoekveld { flex: 1; min-width: 230px; font: 400 .8rem var(--font-ui); color: var(--c-ink);
  padding: 8px 12px; border-radius: var(--radius); background: var(--c-creme);
  border: var(--lijndikte) solid var(--c-lijn-2); transition: border-color var(--overgang); }
.wb-zoekveld:hover { border-color: var(--c-lijn); }
.wb-flt { font: 700 .72rem var(--font-ui); padding: 7px 13px; border-radius: var(--radius-pill);
  border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); color: var(--c-ink-3);
  cursor: pointer; transition: background var(--overgang), border-color var(--overgang), color var(--overgang); }
.wb-flt:hover { border-color: var(--c-lijn); color: var(--c-ink); }
.wb-flt.is-actief { border-color: var(--c-rood); background: var(--c-rood-t); color: var(--c-rood); }
.wb-zoekstand { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; }
.wb-dossier__stand { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wb-poortacties { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wb-poortacties .btn { flex: 1; min-width: 170px; }
.wb-override { border-color: var(--c-rood); color: var(--c-rood); }
.wb-wissel--terug { display: block; margin: 4px 0 0 auto; color: var(--c-ink-3); }
.wb-wissel--terug:hover { color: var(--c-rood); }
.wb-dossier__gate { margin-top: 14px; }
.wb-keur { width: 100%; margin-top: 10px; }
.wb-goed { padding: 13px; border-radius: 12px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); text-align: center; font-size: .8rem; font-weight: 700; color: var(--c-groen-d); }
.wb-wacht { padding: 13px; border-radius: 12px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); text-align: center; font-size: .76rem; color: var(--c-amber); }

/* Teken-vlak klanthandtekening (C3a) */
.wb-tekenvlak { position: relative; border: 1px dashed var(--c-lijn); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.wb-tekenvlak canvas { width: 100%; height: 90px; touch-action: none; cursor: crosshair; background: var(--c-paneel); border-radius: 8px; }
.wb-tekenvlak__hint { position: absolute; top: 42px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--c-ink-3); pointer-events: none; }
.wb-tekenvlak__acties { display: flex; justify-content: flex-end; gap: 6px; }
.wb-wissel--vast { color: var(--c-groen-d); font-weight: 700; }

/* Facturatie-poort (besluit 15-07): klantakkoord → keuring → automatisch */
.wb-facstappen { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.wb-facstap { font-size: 12px; color: var(--c-ink-2); }
.wb-facstap.is-ok { color: var(--c-groen-d); font-weight: 600; }
.wb-facwijze { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 10px; }
.wb-facwijze select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }

/* ---- Voorraad V3 · de batchscan op de bon (P-VRD-SCAN) ----
   Het blok kleurt groen zodra elke component gescand is en amber zolang er
   iets ontbreekt. Geen rood: de bon zelf is niet fout, hij is nog niet af —
   rood is voor de poort die daarna dichtblijft. */
.wb-batch { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--radius);
  border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel); }
.wb-batch.is-ok { border-color: var(--c-groen); background: var(--c-groen-t); }
.wb-batch.is-open { border-color: var(--c-amber); background: var(--c-amber-t); }
.wb-batch__uitleg { margin: 2px 0 8px; font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); }
.wb-batchrij { display: grid; align-items: center; gap: 10px;
  grid-template-columns: 28px minmax(0, 1.3fr) 66px minmax(0, 1.6fr);
  padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; }
.wb-batchrij:first-of-type { border-top: 0; }
.wb-batchcode { font-weight: 700; font-size: .84rem; color: var(--c-ink); }
.wb-batchnaam em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.wb-batchvaten { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-batchtag { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 4px 2px 9px; }
.wb-batchweg { border: 0; background: none; cursor: pointer; font: inherit; font-size: .7rem;
  line-height: 1; color: var(--c-ink-3); padding: 2px 5px; border-radius: 99px; }
.wb-batchweg:hover { color: var(--c-terra-d); }
.wb-batchleeg { font-style: normal; color: var(--c-amber); }
.wb-batchvoet { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; }
.wb-scanform { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px; background: #fff; border-radius: var(--radius);
  border: var(--lijndikte) solid var(--c-lijn); }
.wb-scanveld { display: flex; flex-direction: column; gap: 4px; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; }
.wb-scanveld select, .wb-scanveld input { font: inherit; font-size: .76rem; text-transform: none;
  letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 6px 9px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; }
.wb-scanveld input { width: 110px; }

/* ── natuur.css ── */
/* natuur.css — Natuurvriendelijk isoleren (2.10) */
.nt-kalender { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.nt-kalrij { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.nt-kalmnd { text-align: center; font-size: 11px; font-family: var(--font-mono); padding: 6px 0; border-radius: 8px; text-transform: uppercase; }
.nt-kalmnd.is-mag { background: color-mix(in srgb, var(--c-groen) 22%, var(--c-paneel)); }
.nt-kalmnd.is-nietmag { background: color-mix(in srgb, var(--c-amber) 26%, var(--c-paneel)); }
.nt-kalmnd.is-nu { outline: 2px solid var(--c-groen-d); font-weight: 800; }
.nt-kaluitleg { font-size: 12px; color: var(--c-ink-2); line-height: 1.5; }

.nt-lijst { margin-top: 14px; }
.nt-rij { display: grid; grid-template-columns: 78px 1.5fr 1.4fr auto auto auto; gap: 12px; align-items: center; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--c-lijn); cursor: pointer; color: var(--c-ink); }
.nt-rij:last-child { border-bottom: 0; }
.nt-rij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); cursor: default; }
.nt-rij.is-actief { background: color-mix(in srgb, var(--c-groen) 5%, transparent); }
.nt-cel { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.nt-cel .mono, .nt-gem { font-size: 11px; color: var(--c-ink-2); }
.nt-poort { font-size: 11px; font-weight: 700; }
.nt-poort.is-ok { color: var(--c-groen-d); }
.nt-poort.is-blok { color: var(--c-rood); }

.nt-drawerchips { display: flex; gap: 6px; margin-bottom: 12px; }
.nt-uitleg { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5; margin: 8px 0; }
.nt-acties { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 8px 0; }
.nt-labkeuze { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.nt-labkeuze select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; background: var(--c-paneel); color: var(--c-ink); }
.nt-edna { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0; }
.nt-feit { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.nt-blok { border: 1px solid var(--c-rood); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.nt-blok.is-amber { border-color: var(--c-amber); color: var(--c-amber); }
.nt-nvstap { display: flex; gap: 10px; align-items: center; width: 100%; border: 1px solid var(--c-lijn); border-radius: 12px; background: var(--c-paneel); font: inherit; font-size: 13px; text-align: left; padding: 10px 14px; margin-bottom: 6px; cursor: pointer; color: var(--c-ink); }
.nt-nvstap i { font-style: normal; font-weight: 800; }
.nt-nvstap.is-klaar { border-color: var(--c-groen-d); }
.nt-nvstap.is-klaar i { color: var(--c-groen-d); }
.nt-nvstap[disabled] { opacity: .5; cursor: not-allowed; }
.nt-kalgebonden { font-style: normal; font-size: 11px; color: var(--c-amber); }

/* ── afwijkingen.css ── */
/* =====================================================================
   afwijkingen.css — Module 2.3 · Afwijkingen & meerwerk. Meldingen-
   kaarten met type-kleurbalk links en gevolg-badges; typenbeheer als
   geversioneerde regelset-tabel. Bouwt op tokens + bouwstenen.css.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.afw { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


/* aanzicht-wissel (prototype: donkere actieve pill) */
.afw-switch { display: flex; gap: 9px; margin-bottom: 18px; }
.afw-switch__knop { padding: 9px 17px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .8rem; font-weight: 600; background: var(--c-paneel); color: var(--c-ink-2); transition: background var(--overgang); }
.afw-switch__knop.is-actief { background: var(--c-ink); color: #fff; }

/* ---- meldingen ---- */
.afw-lijst { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.afw-kaart { padding: 16px 18px; border-left: 4px solid var(--c-lijn-2); }
.afw-kaart--groen { border-left-color: var(--c-groen); }
.afw-kaart--terra { border-left-color: var(--c-terra); }
.afw-kaart--amber { border-left-color: var(--c-amber); }
.afw-kaart--stil { border-left-color: var(--c-lijn-2); }

.afw-kaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.afw-kaart__links { display: flex; gap: 12px; min-width: 0; flex: 1; }
.afw-kaart__ic { font-size: 1.15rem; flex: none; color: var(--c-ink-2); }
.afw-kaart__inhoud { min-width: 0; }
.afw-kaart__titel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.afw-kaart__titel strong { font-size: .88rem; }
.afw-kaart__id { font-size: .68rem; color: var(--c-ink-3); }
.afw-kaart__oms { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); max-width: 640px; margin: 0; }
.afw-kaart__meta { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; font-size: .7rem; color: var(--c-ink-3); }

.afw-gevolg { font-size: .64rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.afw-gevolg--groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.afw-gevolg--amber { color: var(--c-amber); background: var(--c-amber-t); }
.afw-gevolg--rood { color: var(--c-rood); background: var(--c-rood-t); }
.afw-gevolg--stil { color: var(--c-ink-2); background: var(--c-paneel); }

.afw-kaart__impact { text-align: right; flex: none; }
.afw-kaart__bedrag { font-size: 1.1rem; font-weight: 800; margin-top: 2px; }

.afw-kaart__acties { display: flex; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; align-items: center; }
.afw-wachttekst { font-size: .74rem; font-weight: 600; color: var(--c-amber); }
.afw-afwijs { border-color: var(--c-terra); color: var(--c-terra-d); }
.afw-afwijs:hover:not(:disabled) { background: var(--c-terra-t); }

/* ---- typen & gevolgen ---- */
.afw-typen__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.afw-typen__intro { max-width: 640px; font-size: .8rem; line-height: 1.6; color: var(--c-ink-2); margin: 0; }
.afw-ministats { display: flex; gap: 12px; margin-bottom: 16px; }
.afw-ministat { padding: 13px 17px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; background: #fff; font-size: .76rem; color: var(--c-ink-3); }
.afw-ministat .mono { font-size: 1.2rem; font-weight: 800; color: var(--c-ink); margin-right: 4px; }
.afw-ministat--groen { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); }
.afw-ministat--groen .mono { color: var(--c-groen-d); }

.afw-editor { border: 1.5px solid var(--c-groen); background: var(--c-groen-t); padding: 20px 22px; margin-bottom: 18px; }
.afw-editor__titel { display: block; font-size: .88rem; margin-bottom: 15px; }
.afw-editor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .afw-editor__grid { grid-template-columns: 1fr; } }
.afw-editor .kicker { display: block; margin-bottom: 6px; }
.afw-editor__kicker { margin-top: 15px; }
.afw-input { width: 100%; padding: 10px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink); background: #fff; box-sizing: border-box; }
.afw-opties { display: flex; gap: 7px; flex-wrap: wrap; }
.afw-optie { padding: 7px 13px; border-radius: 9px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; background: #fff; color: var(--c-ink-2); border: var(--lijndikte) solid var(--c-lijn-2); }
.afw-optie.is-actief { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.afw-gevolgen { display: flex; flex-direction: column; gap: 6px; }
.afw-gevolgkeuze { padding: 8px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; text-align: left; background: #fff; color: var(--c-ink-2); }
.afw-gevolgkeuze--groen.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.afw-gevolgkeuze--amber.is-actief { background: var(--c-amber); border-color: var(--c-amber); color: #fff; }
.afw-gevolgkeuze--rood.is-actief { background: var(--c-rood); border-color: var(--c-rood); color: #fff; }
.afw-gevolgkeuze--stil.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.afw-editor__voet { display: flex; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: var(--lijndikte) solid var(--c-lijn-2); }

.afw-tabel { padding: 0; overflow: hidden; }
.afw-trij { display: grid; grid-template-columns: 26px 1.7fr .8fr 1.4fr .9fr .8fr .7fr auto; gap: 12px; align-items: center; padding: 13px 16px; border-top: var(--lijndikte) solid var(--c-lijn); }
.afw-trij.is-uit { opacity: .5; }
.afw-trij--kop { border-top: 0; background: var(--c-paneel); padding: 12px 16px; font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.afw-trij__ic { font-size: 1rem; color: var(--c-ink-2); }
.afw-trij__naam strong { display: block; font-size: .82rem; }
.afw-trij__naam span { font-size: .66rem; color: var(--c-ink-3); }
.afw-cat { font-size: .62rem; font-weight: 600; padding: 3px 9px; border-radius: 7px; justify-self: start; }
.afw-cat--terra { color: var(--c-terra-d); background: var(--c-terra-t); }
.afw-cat--amber { color: var(--c-amber); background: var(--c-amber-t); }
.afw-cat--groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.afw-cat--stil { color: var(--c-ink-2); background: var(--c-paneel); }
.afw-trij .afw-gevolg { justify-self: start; }
.afw-trij .chip { justify-self: start; }
.afw-trij__onderb { font-size: .72rem; color: var(--c-ink-2); }
.afw-trij__versie { font-weight: 700; font-size: .7rem; color: var(--c-groen-d); }
.afw-trij__acties { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.afw-trij__acties-kop { text-align: right; }
.afw-toggle { border: 0; cursor: pointer; font-family: var(--font-ui); }

/* Meerwerk-prijslijst-onderbouwing (C4a) */
.afw-prijsbron { display: block; font-size: 11px; color: var(--c-groen-d); margin-top: 3px; }
.afw-prijsbron--afwijkend { color: var(--c-amber); font-weight: 600; }

/* ── templates.css ── */
/* =====================================================================
   templates.css — Module 2.5b · Templatebeheer. Registerlijst +
   drawer met merge-velden en template-editor. Tokens + bouwstenen.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.tpl { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.tpl-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; }
.tpl-lijst__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tpl-lijst__kop strong { font-size: .95rem; }
.tpl-lijst__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; max-width: 72ch; }

.tpl-rij { display: grid; grid-template-columns: 1.4fr .7fr 1.6fr 1fr .7fr; gap: 10px; align-items: center; padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.tpl-rij:hover { background: var(--c-creme); }
.tpl-rij--kop { padding: 6px 18px 8px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.tpl-rij--kop:hover { background: transparent; }
.tpl-rij__naam { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--c-ink); }
.tpl-rij__koppelt { font-size: .7rem; color: var(--c-ink-3); }
.tpl-rij__versie { font-size: .68rem; color: var(--c-groen-d); font-weight: 700; }
.tpl-rij .chip { justify-self: start; }

.tpl-kop { display: block; margin: 14px 0 7px; }
.tpl-kop:first-child { margin-top: 0; }
.tpl-velden { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-veld { font-size: .64rem; font-weight: 600; color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); padding: 3px 8px; border-radius: 7px; }
.tpl-koppeling { font-size: .76rem; line-height: 1.5; color: var(--c-ink-2); margin: 0; }
.tpl-body { font-size: .68rem; line-height: 1.6; color: var(--c-ink); background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 14px 16px; white-space: pre-wrap; margin: 0; max-height: 46vh; overflow: auto; }
.tpl-editor { width: 100%; min-height: 320px; box-sizing: border-box; font-family: var(--font-mono); font-size: .68rem; line-height: 1.6; color: var(--c-ink); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 11px; padding: 14px 16px; resize: vertical; }

/* contract-preview (modaal, gedeeld met uitvoerders 2.5b) */
.tpl-preview { white-space: pre-wrap; font-family: var(--font-mono); font-size: .68rem; line-height: 1.65; max-height: 58vh; overflow: auto; padding: 4px 2px; }

/* E5b · versies + diff */
.tpl-versierij { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.tpl-versierij__door { font-size: 11.5px; color: var(--c-ink-2); }
.tpl-versierij__acties { display: flex; gap: 6px; }
.tpl-diff { border: 1px solid var(--c-lijn); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.tpl-diff__kop { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--c-lijn); background: var(--c-creme); }
.tpl-diff__body { max-height: 320px; overflow: auto; font-size: 11.5px; line-height: 1.5; padding: 8px 0; }
.tpl-diff__regel { display: flex; gap: 8px; padding: 0 12px; white-space: pre-wrap; }
.tpl-diff__regel i { font-style: normal; width: 10px; flex: none; font-weight: 800; }
.tpl-diff__regel.is-plus { background: color-mix(in srgb, var(--c-groen) 14%, transparent); }
.tpl-diff__regel.is-plus i { color: var(--c-groen-d); }
.tpl-diff__regel.is-min { background: color-mix(in srgb, var(--c-terra) 12%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 55%, transparent); }
.tpl-diff__regel.is-min i { color: var(--c-terra); }

/* E5c · merkvarianten */
.tpl-merken { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-merkchip { border: 1px solid var(--c-lijn); border-radius: 99px; background: var(--c-paneel); font: inherit; font-size: 11.5px; padding: 4px 12px; cursor: pointer; color: var(--c-ink); }
.tpl-merkchip.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 14%, var(--c-paneel)); font-weight: 700; }
.tpl-merkblok { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.tpl-merkblok textarea { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); resize: vertical; }

/* E5 · merge-velden: kiezer + invoeg-strip */
.tpl-mvkiezer { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 8px 0 14px; max-height: 300px; overflow: auto; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; }
.tpl-mvgroep { display: flex; flex-direction: column; gap: 4px; }
.tpl-mvkeuze { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; cursor: pointer; }
.tpl-mvkeuze__veld { font-size: 10.5px; color: var(--c-ink-2); }
.tpl-invoeg { display: flex; gap: 8px; align-items: end; margin-bottom: 8px; flex-wrap: wrap; }
.tpl-invoeg__kies { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.tpl-invoeg__kies select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }

/* E5b · clausule-eisen */
.tpl-clausrij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); }
.tpl-clausrij__zoek { font-size: 10.5px; color: var(--c-ink-2); }
.tpl-clmlink { color: var(--c-groen-d); font-weight: 700; text-decoration: none; }
.tpl-clmlink:hover { text-decoration: underline; }

/* ── intranet.css ── */
/* intranet.css — Intranet & messenger (E5 · 16-07-2026) */

/* ---- zwevend icoon + paneel (rechtsonder, op elk scherm) ---- */
#casa-intranet { position: fixed; right: 24px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.intra-knop { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--c-lijn); background: var(--gradient-primair); color: var(--c-paneel); font-size: 22px; cursor: pointer; box-shadow: var(--schaduw-knop); display: grid; place-items: center; order: 2; transition: transform 160ms; }
.intra-knop:hover { background: var(--gradient-primair-hover); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .intra-knop, .intra-knop:hover { transition: none; transform: none; } }
.intra-knop__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--c-amber); color: var(--c-ink); font-size: 10.5px; font-weight: 800; font-family: var(--font-mono); display: grid; place-items: center; padding: 0 4px; }

.intra-paneel { order: 1; width: 372px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px); background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: 12px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; overflow: hidden; }
.intra-kop { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px 0; }
.intra-kop__tabs { display: flex; gap: 4px; margin-top: 8px; border-bottom: 1px solid var(--c-lijn); }
.intra-tab { position: relative; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); padding: 6px 10px 8px; cursor: pointer; border-bottom: 2px solid transparent; }
.intra-tab.is-actief { color: var(--c-ink); border-bottom-color: var(--c-groen-d); }
.intra-tab__badge { position: static; display: inline-grid; margin-left: 4px; }
.intra-x { border: 0; background: none; font-size: 14px; cursor: pointer; color: var(--c-ink-2); padding: 4px 6px; }

.intra-lijst { flex: 1; overflow: auto; padding: 6px 8px 10px; display: flex; flex-direction: column; }
.intra-rij { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--c-ink); }
.intra-rij:hover { background: var(--c-creme); }
.intra-rij__mid { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.intra-rij__mid strong { font-size: 13px; }
.intra-rij__tijd { font-size: 10px; color: var(--c-ink-2); }
.intra-rij__badge { position: static; flex: none; }
.intra-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 800; font-size: 13px; border: 1px solid var(--c-groen); }
.intra-avatar.is-team { background: var(--c-creme); color: var(--c-ink-2); border-color: var(--c-lijn); }
.intra-sub { font-size: 11px; color: var(--c-ink-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.intra-gesprekkop { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--c-lijn); }
.intra-gesprekkop strong { font-size: 13.5px; display: block; }
.intra-terug { border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); font: inherit; cursor: pointer; padding: 4px 10px; color: var(--c-ink); }
.intra-berichten { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.intra-bericht { max-width: 82%; align-self: flex-start; background: var(--c-creme); border: 1px solid var(--c-lijn); border-radius: 12px 12px 12px 4px; padding: 7px 11px; display: flex; flex-direction: column; gap: 2px; }
.intra-bericht.is-ik { align-self: flex-end; background: var(--c-groen-t); border-color: var(--c-groen); border-radius: 12px 12px 4px 12px; }
.intra-bericht__van { font-size: 10.5px; font-weight: 800; color: var(--c-groen-d); }
.intra-bericht__tekst { font-size: 12.5px; line-height: 1.45; }
.intra-bericht__tijd { font-size: 9.5px; color: var(--c-ink-2); align-self: flex-end; }
.intra-leeg { font-size: 12px; color: var(--c-ink-2); text-align: center; margin-top: 24px; }

.intra-invoer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-lijn); }
.intra-invoer input { flex: 1; border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }
.intra-invoer .btn { padding: 6px 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.intra-lijst--nieuws { gap: 10px; padding: 12px 14px; }
.intra-nieuws { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.intra-nieuws__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.intra-nieuws__kop strong { font-size: 13px; }
.intra-nieuws p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--c-ink-2); }
.intra-redactielink { font-size: 12px; font-weight: 700; color: var(--c-groen-d); text-decoration: none; align-self: flex-start; }
.intra-redactielink:hover { text-decoration: underline; }

/* ---- redactiescherm (menu Bedrijf › Intranet) ---- */
.intra-pagina { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.intra-h1 { margin: 2px 0 6px; }
.intra-uitleg { color: var(--c-ink-2); max-width: 62ch; line-height: 1.55; font-size: 13.5px; margin: 0 0 16px; }
.intra-redactie { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; }
.intra-redactie__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.intra-redactie__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intra-mdrij { display: grid; grid-template-columns: 1.8fr auto auto auto auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--c-lijn); }
.intra-mdrij.is-archief { opacity: .55; }
.intra-mdrij__acties { display: flex; gap: 6px; }

/* ── mijndag.css ── */
/* mijndag.css — Vandaag-verdieping: signalen · dagboog · meldingen (E6) */

.md-pagina { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.md-h1 { margin: 2px 0 12px; }
.md-sub { font-size: 11.5px; color: var(--c-ink-2); }
.md-uitleg { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5; margin: 8px 0; }
.md-kaart { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; }
.md-kaart__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.md-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.md-regels { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }

/* signalen */
.md-sigrij { display: grid; grid-template-columns: 34px 1.8fr auto auto auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--c-lijn); }
.md-sigrij.is-stil { opacity: .55; }
.md-sigrij__icoon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 1px solid var(--c-lijn); }
.md-sigrij.is-rood .md-sigrij__icoon { color: var(--c-rood); border-color: var(--c-rood); }
.md-sigrij.is-amber .md-sigrij__icoon { color: var(--c-amber); border-color: var(--c-amber); }
.md-sigrij.is-groen .md-sigrij__icoon { color: var(--c-groen-d); border-color: var(--c-groen); }
.md-sigrij__tekst { border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--c-ink); padding: 0; }
.md-sigrij__tekst:hover { text-decoration: underline; }
.md-sigrij__bron { font-size: 11px; color: var(--c-ink-2); }
.md-sigrij__acties { display: flex; gap: 6px; }

/* dagboog */
.md-tweekolom { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; }
@media (max-width: 980px) { .md-tweekolom { grid-template-columns: 1fr; } }
.md-kolomrechts { display: flex; flex-direction: column; gap: 14px; }
.md-boog { padding: 4px 18px 12px; position: relative; }
.md-boogrij { display: grid; grid-template-columns: 52px 14px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; position: relative; }
.md-boogrij__tijd { font-size: 11px; color: var(--c-ink-2); }
.md-boogrij__stip { width: 10px; height: 10px; border-radius: 50%; background: var(--c-paneel); border: 2px solid var(--c-lijn-2, var(--c-lijn)); justify-self: center; }
.md-boogrij.is-taak .md-boogrij__stip { border-color: var(--c-groen-d); }
.md-boogrij.is-afspraak .md-boogrij__stip { border-color: var(--c-terra); }
.md-boogrij::before { content: ""; position: absolute; left: 62px; top: 0; bottom: 0; width: 2px; background: var(--c-lijn); z-index: 0; }
.md-boogrij__stip { position: relative; z-index: 1; }
.md-boogrij:first-child::before { top: 50%; }
.md-boogrij:last-child::before { bottom: 50%; }
.md-boogrij__titel { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--c-ink); padding: 0; }
button.md-boogrij__titel { cursor: pointer; font-weight: 600; }
button.md-boogrij__titel:hover { text-decoration: underline; }

.md-doelen { padding: 4px 18px 12px; display: flex; flex-direction: column; gap: 12px; }
.md-doelrij { display: flex; flex-direction: column; gap: 6px; }
.md-doelrij.is-klaar { opacity: .6; }
.md-doelrij__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.md-voortgang { height: 8px; border-radius: 99px; background: var(--c-creme); border: 1px solid var(--c-lijn); overflow: hidden; }
.md-voortgang span { display: block; height: 100%; background: var(--c-groen-d); border-radius: 99px; transition: width 160ms; }
@media (prefers-reduced-motion: reduce) { .md-voortgang span { transition: none; } }
.md-doelrij__acties { display: flex; gap: 6px; }

.md-memo { background: var(--c-memo); }
.md-memo .md-kaart__kop { padding-bottom: 6px; }
.md-memo__veld { margin: 0 18px 10px; min-height: 84px; border: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 12.5px; background: color-mix(in srgb, var(--c-paneel) 55%, transparent); color: var(--c-ink); resize: vertical; }
.md-memo .btn { margin: 0 18px 14px; align-self: flex-start; }
.md-memo { display: flex; flex-direction: column; }

/* meldingen */
.md-meldrij { display: grid; grid-template-columns: 64px auto 1fr auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--c-lijn); }
.md-meldrij.is-gelezen { opacity: .6; }
.md-meldrij:not(.is-gelezen) .md-meldrij__tekst { font-weight: 700; }
.md-meldrij__tijd { font-size: 11px; color: var(--c-ink-2); }
.md-meldrij__tekst { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--c-ink); padding: 0; }
.md-meldrij__tekst:hover { text-decoration: underline; }
.md-voorkeurrij { display: grid; grid-template-columns: 110px repeat(3, auto); gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }

/* E6 a/b/c · Vandaag-laag (KPI-strip, briefing, geaggregeerde taken) */
.vt-stripwrap { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; }
.vt-stripwrap .bs-stats { flex: 1; margin: 0; }
.vt-mini { border: 1px solid var(--c-lijn); border-radius: 9px; background: var(--c-paneel); font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; color: var(--c-ink-2); }
.vt-mini:hover { color: var(--c-groen-d); border-color: var(--c-groen-d); }
.vt-mini[disabled] { opacity: .4; cursor: default; }
.vt-stripcfg { margin-top: 4px; }

.vt-briefing { padding: 14px 18px 10px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.vt-briefregel { display: flex; gap: 10px; align-items: baseline; width: 100%; border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left; padding: 7px 2px; cursor: pointer; color: var(--c-ink); border-top: 1px solid var(--c-lijn); }
.vt-briefing .vt-briefregel:first-of-type { border-top: 0; }
.vt-briefregel:hover strong { color: var(--c-groen-d); }
.vt-briefregel__glyph { flex: none; width: 20px; text-align: center; color: var(--c-groen-d); }
.vt-briefregel__pijl { margin-left: auto; color: var(--c-ink-2); }
.vt-briefregel span:nth-child(2) { line-height: 1.45; }

.vt-taak--snooze { opacity: .6; }
.vt-snoozetag { font-size: 10px; color: var(--c-amber); font-weight: 700; }
.vt-snoozekop { display: block; width: 100%; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--c-ink-2); text-align: left; padding: 10px 16px; cursor: pointer; border-top: 1px solid var(--c-lijn); }
.vt-snoozekop:hover { color: var(--c-groen-d); }
.vt-wegtag { font-size: 11px; color: var(--c-ink-2); padding: 10px 16px; border-top: 1px solid var(--c-lijn); }

.vt-kpirij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.vt-kpirij__acties { display: flex; gap: 4px; }

/* ── mijnwerk.css ── */
/* =====================================================================
   mijnwerk.css — Mijn werk (R1 bouwplan, EPIC 1).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.mw { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.mw-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mw-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.mw-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.mw-kopacties { display: flex; align-items: center; gap: 12px; flex: none; }
.mw-kopacties .bs-toestand { padding: 0; }
.mw-vers { font-size: .66rem; color: var(--c-ink-3); }

/* balk: tabs · scope · filter · bulk */
.mw-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mw-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius); }
.mw-tab { border: var(--lijndikte) solid transparent; background: none; border-radius: 9px; padding: 7px 14px; font: 700 .76rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.mw-tab.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); }
.mw-scope { display: flex; gap: 4px; align-items: center; }
.mw-scopeknop { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: var(--radius-pill); padding: 6px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.mw-scopeknop.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-ink); }
.mw-scope select { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 6px 9px; font: 600 .74rem var(--font-ui); background: #fff; color: var(--c-ink); }

/* takenlijst */
.mw-rij { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.mw-rij:first-child { border-top: 0; }
.mw-rij:hover { background: var(--c-creme); }
.mw-rij.is-actief { background: var(--c-groen-t); }
.mw-rij.is-telaat { border-left: 3px solid var(--c-rood); }
.mw-rij:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.mw-kies { display: inline-flex; }
.mw-kies input { width: 16px; height: 16px; accent-color: var(--c-groen-d); }
.mw-glyph { width: 28px; height: 28px; flex: none; border-radius: 9px; font-style: normal; background: var(--c-paneel); color: var(--c-ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.mw-glyph.is-hoog { background: var(--c-terra-t); color: var(--c-terra-d); }
.mw-rij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mw-rij__wat strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-rij__wat span { font-size: .7rem; color: var(--c-ink-3); }

/* drawer-delen */
.mw-deel { display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--c-lijn); padding: 12px 0; }
.mw-deel:first-of-type { border-top: 0; }
.mw-tekst { margin: 0; font-size: .8rem; color: var(--c-ink-2); line-height: 1.55; }
.mw-context { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .78rem; }
.mw-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; }

@media (max-width: 900px) {
  .mw { padding: 18px 14px 60px; }
  .mw-rij { grid-template-columns: auto 1fr auto; }
  .mw-kies, .mw-rij > button { display: none; }
}

/* ─── B4 (QUERY-HYGIENE §4) · doorladen ──────────────────────────────
   De wachtrij was stil begrensd op 400 van 1.011. De regel staat onder
   de lijst omdat je hem daar tegenkomt: op het moment dat je denkt alles
   gezien te hebben. */
.mw-meer { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-top: var(--lijndikte) solid var(--c-lijn); }
.mw-meer .mono { font-size: .74rem; color: var(--c-ink-3); }

/* ── uitvoerders.css ── */
/* =====================================================================
   uitvoerders.css — Module 2.5 · Uitvoerdersbeheer. Master-detail:
   partnerlijst links, compliance-dossier rechts (verificatie, certs,
   WKA + G-rekening, tarieven, scores, lifecycle). Tokens + bouwstenen.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.uv { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.uv-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
@media (max-width: 1000px) { .uv-grid { grid-template-columns: 1fr; } }

/* banners */
.uv-banner { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 13px; font-size: .82rem; font-weight: 600; margin-bottom: 14px; border: var(--lijndikte) solid var(--c-lijn); }
.uv-banner--her { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }
.uv-banner--ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.uv-banner--blok { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); }
.uv-banner--klein { margin-bottom: 0; font-size: .78rem; }
.uv-banner__ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #fff; background: var(--c-groen-d); }
.uv-banner__ic--rood { background: var(--c-rood); }
.uv-banner__ic--amber { background: var(--c-amber); }

/* lijst links */
.uv-lijst { padding: 0 0 4px; overflow: hidden; }
.uv-lijst__kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.uv-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; font-family: var(--font-ui); transition: background var(--overgang); }
.uv-item:first-of-type { border-top: 0; }
.uv-item:hover { background: var(--c-creme); }
.uv-item.is-actief { background: var(--c-groen-t); }
.uv-item__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uv-item__tekst strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uv-item__tekst span { font-size: .68rem; color: var(--c-ink-3); }
.uv-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .74rem; flex: none; }
.uv-avatar--groot { width: 46px; height: 46px; border-radius: 13px; font-size: .88rem; }
.uv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.uv-dot--groen { background: var(--c-groen); }
.uv-dot--amber { background: var(--c-amber); }
.uv-dot--rood { background: var(--c-rood); }

/* nieuw-formulier */
.uv-nieuw { border: 1.5px dashed var(--c-lijn-2); border-radius: 16px; background: var(--c-creme); padding: 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 9px; }
.uv-nieuw strong { font-size: .88rem; }
.uv-nieuw__sub { font-size: .74rem; color: var(--c-ink-3); margin: 0 0 4px; }
.uv-nieuw__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.uv-veld { display: flex; flex-direction: column; gap: 4px; }

/* detail */
.uv-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uv-kaart { padding: 18px 20px; }
.uv-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.uv-kaart__kop strong { font-size: .9rem; }
.uv-sub { font-size: .76rem; line-height: 1.55; color: var(--c-ink-3); margin: 0 0 12px; }
.uv-kaart__kop + .uv-sub { margin-top: -6px; }

.uv-kop { display: flex; align-items: center; gap: 14px; }
.uv-kop__tekst { flex: 1; min-width: 0; }
.uv-kop__naam { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uv-kop__naam strong { font-size: 1.1rem; }
.uv-kop__sub { font-size: .76rem; color: var(--c-ink-3); }

.uv-verif { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.uv-verif .kicker { display: block; margin-bottom: 5px; }
.uv-verif__w { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: 600; }

.uv-trij { display: grid; grid-template-columns: 1.6fr 1fr .8fr 1.1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv-trij--kop { border-top: 0; padding: 0 0 8px; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.uv-trij--doc { grid-template-columns: 1.8fr .8fr .9fr 1fr; }
.uv-trij--tarief { grid-template-columns: 1.6fr .9fr .8fr .9fr; }
.uv-trij__naam { font-weight: 700; font-size: .8rem; }
.uv-trij__nr { font-size: .7rem; color: var(--c-ink-3); }
.uv-trij__tot { font-size: .76rem; color: var(--c-ink-2); }
.uv-trij__type { font-size: .72rem; color: var(--c-ink-3); text-transform: capitalize; }
.uv-trij .chip { justify-self: start; }
.uv-artlink { font-size: .64rem; }

.uv-fact { display: flex; gap: 10px; margin-bottom: 11px; }
.uv-fact__optie { flex: 1; padding: 11px 14px; border-radius: 11px; cursor: pointer; text-align: center; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; border: 1.5px solid var(--c-lijn-2); color: var(--c-ink-2); background: #fff; transition: background var(--overgang); }
.uv-fact__optie span { display: block; font-size: .64rem; font-weight: 500; opacity: .75; margin-top: 2px; }
.uv-fact__optie.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-d); color: #fff; }
.uv-hint { font-size: .76rem; line-height: 1.55; color: var(--c-ink-2); padding: 11px 14px; border-radius: 10px; background: var(--c-paneel); }

.uv-wka { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; }
.uv-wka__ic { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .68rem; color: #fff; background: var(--c-rood); }
.uv-wka.is-ok .uv-wka__ic { background: var(--c-groen); }
.uv-wka strong { display: block; font-size: .8rem; }
.uv-wka span:not(.uv-wka__ic) { font-size: .7rem; color: var(--c-ink-3); }

.uv-grek { margin-top: 15px; padding: 14px 16px; border-radius: 12px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); }
.uv-grek .kicker { display: block; color: var(--c-amber); margin-bottom: 8px; }
.uv-grek__vlakken { display: flex; gap: 10px; flex-wrap: wrap; }
.uv-grek__vak { flex: 1; min-width: 130px; padding: 10px 13px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); }
.uv-grek__vak span { display: block; font-size: .68rem; color: var(--c-ink-3); }
.uv-grek__g { font-size: 1.05rem; color: var(--c-amber); }
.uv-grek__rest { font-size: 1.05rem; color: var(--c-groen-d); }
.uv-grek__nr { display: block; font-size: .7rem; color: var(--c-ink-2); margin-top: 8px; }

.uv-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.uv-postcodes { display: flex; flex-wrap: wrap; gap: 7px; }
.uv-pc { font-size: .72rem; font-weight: 600; color: var(--c-ink); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); padding: 5px 10px; border-radius: 8px; }
.uv-max { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: var(--c-paneel); margin-top: 8px; font-size: .78rem; color: var(--c-ink-2); }
.uv-max:first-of-type { margin-top: 0; }
.uv-max strong { font-size: .88rem; color: var(--c-ink); }

.uv-teams { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.uv-team { display: inline-flex; flex-direction: column; padding: 8px 13px; border-radius: 11px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.uv-team strong { font-size: .76rem; }
.uv-team span { font-size: .64rem; color: var(--c-ink-3); }
.uv-team--plus { padding: 9px 13px; border-radius: 11px; border: 1.5px dashed var(--c-lijn-2); background: transparent; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; color: var(--c-groen-d); cursor: pointer; }

.uv-tarief { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--c-ink-3); }
.uv-tarief input { width: 76px; padding: 7px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; font-family: var(--font-mono); font-size: .74rem; color: var(--c-ink); background: #fff; }

.uv-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; }
.uv-score__kop { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); margin-bottom: 5px; }
.uv-balk { height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.uv-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); }
.uv-klachten { padding: 11px 14px; border-radius: 11px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); }
.uv-klachten span { display: block; font-size: .7rem; color: var(--c-terra-d); }
.uv-klachten strong { font-size: 1.3rem; color: var(--c-terra-d); }

.uv-life { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.uv-info { padding: 20px 22px; border-radius: 16px; background: var(--c-ink); color: #fff; }
.uv-info__kicker { color: rgba(255, 255, 255, .75); }
.uv-info p { font-size: .84rem; line-height: 1.65; color: rgba(255, 255, 255, .8); max-width: 820px; margin: 9px 0 0; }
.uv-info strong { color: #fff; }

/* ---- 2.5b · inline bewerken, wizard en contracten ---- */
.uv-kaart__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uv-bewerk__voet { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv-select { appearance: auto; }
.uv-trij--bewerk { grid-template-columns: 1.6fr 1fr .8fr 1.1fr; gap: 8px; padding: 6px 0; }
.uv-trij--team, .uv-trij--team.uv-trij--bewerk { grid-template-columns: 1.2fr 1.2fr .6fr; }
.uv-rijplus { margin-top: 10px; }
.uv-pc__x { border: 0; background: transparent; cursor: pointer; font-size: .62rem; color: var(--c-terra-d); padding: 0 0 0 4px; }

.uv-wiz { border-style: solid; border-color: var(--c-groen); background: var(--c-groen-t); }
.uv-wiz__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uv-wiz__kop strong { font-size: .92rem; }
.uv-wiz__stappen { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.uv-wiz__stap { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; color: var(--c-ink-2); }
.uv-wiz__stap.is-actief { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.uv-wiz__stap .mono { font-size: .64rem; font-weight: 700; }
.uv-wiz__stap.is-klaar:not(.is-actief) { border-color: var(--c-groen); color: var(--c-groen-d); }
.uv-wiz__inhoud { display: flex; flex-direction: column; gap: 9px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; padding: 16px; }
.uv-wiz__types { display: flex; gap: 7px; }
.uv-wiz__vink { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--c-ink); cursor: pointer; }
.uv-wiz__vink input { width: 16px; height: 16px; accent-color: var(--c-groen); }
.uv-wiz__tarieven { display: flex; flex-direction: column; gap: 7px; }
.uv-wiz__tarief { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uv-wiz__voet { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uv-wiz__status { flex: 1; min-width: 200px; font-size: .72rem; color: var(--c-ink-2); }

.uv-trij--ct { grid-template-columns: 1.4fr 1fr .7fr .9fr auto; }
.uv-trij__acties-ct { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.uv-ctnieuw { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.uv-ctnieuw__keuze { flex: 1; min-width: 220px; }
.uv-ct__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.uv-ct__kop h2 { margin: 3px 0 0; font-size: 1.05rem; }
.uv-ct__voet { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }

/* Kwaliteits-scorecard (C5a) + partner-forecast (C5c) */
.uv-scoresub { font-size: 12px; color: var(--c-ink-2); margin: 0 0 8px; }
.uv-scorerij { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.uv-scorerij:last-child { border-bottom: 0; }
.uv-scorerij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }
.uv-scorerij em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.uv-fcrij { display: grid; grid-template-columns: .8fr 1.2fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; }
.uv-fcrij:last-child { border-bottom: 0; }
.uv-fcrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }

/* Klantreviews (uitbreiding 4): registratie-rij in het dossier */
.uv-revform { display: flex; gap: 8px; margin-top: 10px; }
.uv-revform select, .uv-revform input { border: 1px solid var(--c-lijn-2); border-radius: 9px; padding: 7px 10px; font: 500 12.5px var(--font-ui); color: var(--c-ink); background: #fff; }
.uv-revform input { flex: 1; min-width: 0; }

/* Prestatie uit de uitvoering (FT-3.4) — naast de klantreviews telt hoe
   compleet de dossiers binnenkomen; dat is directe werkvoorbereidingstijd. */
.uv-prest { display: flex; flex-wrap: wrap; gap: 10px; }
.uv-prest__cel { flex: 1; min-width: 118px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.uv-prest__cel strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.uv-prest__cel span { display: block; margin-top: 3px; font-size: .68rem; color: var(--c-ink-3); }
.uv-groen { color: var(--c-groen-d); }
.uv-amber { color: var(--c-amber); }
.uv-rood { color: var(--c-rood); }
.uv-sub--let { color: var(--c-amber); margin: 12px 0 0; }
.uv-banner--let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }

/* =====================================================================
   UV3 · register en dossier op echte data (bouwspec Uitvoerders §2).
   Vormtaal uit het beheerplatform: 1px-lijnen, paneel-tinten, de vaste
   diepte-tokens op kaarten. Geen losse schaduw- of gradient-literals.
===================================================================== */
.uv2 { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.uv2-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 16px; }
.uv2-h1 { margin: 4px 0 0; font-size: 1.5rem; letter-spacing: -.02em; }
.uv2-intro { margin: 7px 0 0; max-width: 640px; font-size: .82rem; line-height: 1.6; color: var(--c-ink-2); }
.uv2-rek { flex: 1; }
.uv2-voet { margin: 16px 0 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-3); max-width: 820px; }
.uv2-let { margin: 10px 0 0; font-size: .72rem; line-height: 1.6; color: var(--c-ink-3); }
.uv2-sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 2px; }

/* werkbalk: zoeken + filterlat + export */
.uv2-balk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 12px; }
.uv2-zoek { flex: 1; min-width: 240px; padding: 9px 13px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: var(--radius); font: 500 .8rem var(--font-ui); color: var(--c-ink); background: #fff; }
.uv2-telling { font-size: .72rem; color: var(--c-ink-3); }

/* tabel */
.uv2-vlak { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: #fff; overflow: auto; box-shadow: var(--schaduw-tegel); }
.uv2-tabel { border-collapse: collapse; width: 100%; }
.uv2-tabel th { position: sticky; top: 0; background: #fff; text-align: left; padding: 9px 12px; z-index: 1;
  border-bottom: var(--lijndikte) solid var(--c-lijn-2); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.uv2-tabel td { padding: 10px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn);
  font-size: .78rem; vertical-align: top; }
.uv2-tabel tr:last-child td { border-bottom: 0; }
.uv2-tabel .rechts { text-align: right; }
.uv2-tabel--klein td, .uv2-tabel--klein th { padding: 8px 12px; }
.uv2-rij { cursor: pointer; transition: background var(--overgang); }
.uv2-rij:hover td { background: var(--c-paneel-2); }
.uv2-rij.is-dicht td:first-child { box-shadow: inset 3px 0 0 var(--c-rood); }

/* stand-label: compleet / verloopt / mis — kleur draagt betekenis */
.uv2-stand { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  border-radius: 99px; padding: 2px 10px; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); }
.uv2-stand.is-ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.uv2-stand.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }
.uv2-stand.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); }

/* dossier */
.uv2-dbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.uv2-terug { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); text-decoration: none; }
.uv2-terug:hover { color: var(--c-groen-d); }
.uv2-dnaam { font-size: 1.15rem; letter-spacing: -.02em; }

.uv2-melding { border-radius: var(--radius); padding: 13px 17px; margin-bottom: 12px;
  border: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; line-height: 1.6; }
.uv2-melding b { display: block; margin-bottom: 5px; font-size: .82rem; }
.uv2-melding ul { margin: 0; padding-left: 18px; }
.uv2-melding span { display: block; margin-top: 7px; font-size: .72rem; color: var(--c-ink-2); }
.uv2-melding.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); }
.uv2-melding.is-stop span { color: var(--c-ink-2); }
.uv2-melding.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }

.uv2-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.uv2-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.uv2-kaart { padding: 17px 19px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: #fff; box-shadow: var(--schaduw-tegel); }
.uv2-kkop { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 11px; }
.uv2-kkop b { font-size: .88rem; }

.uv2-rooster { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .78rem; }
.uv2-rooster dt { color: var(--c-ink-3); }
.uv2-rooster dd { margin: 0; font-weight: 600; color: var(--c-ink); }
.uv2-cap { display: flex; align-items: baseline; gap: 9px; padding: 12px 14px; margin-bottom: 11px;
  border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.uv2-cap b { font-size: 1.5rem; letter-spacing: -.02em; color: var(--c-groen-d); }
.uv2-cap span { font-size: .74rem; color: var(--c-ink-2); }

.uv2-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px;
  padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }

/* aanmeldroute */
.uv2-onboard { padding: 15px 19px; margin-bottom: 12px; border-radius: var(--radius);
  background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); }
.uv2-route { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; margin: 0 0 12px; padding: 0; }
.uv2-route li { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-size: .74rem;
  font-weight: 600; color: var(--c-ink-3); }
.uv2-route li .mono { font-size: .64rem; font-weight: 800; }
.uv2-route li.is-af { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); }
.uv2-route li.is-nu { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }

/* tijdlijn */
.uv2-tl { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.uv2-tl li { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 9px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; line-height: 1.55; }
.uv2-tl li:first-child { border-top: 0; }
.uv2-tl .mono { font-size: .66rem; color: var(--c-ink-3); }
.uv2-tl b { text-transform: uppercase; font-size: .6rem; letter-spacing: .06em; color: var(--c-ink-3); margin-right: 6px; }
.uv2-tl em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); margin-top: 2px; }

@media (max-width: 900px) {
  .uv2 { padding: 20px 18px 60px; }
  .uv2-tl li { grid-template-columns: 1fr; gap: 2px; }
}

/* Kolombreedtes: de naam krijgt ruimte, de smalle kolommen breken niet af
   halverwege een woord en de zeven kolommen passen samen in het paneel. */
.uv2-tabel th:nth-child(1) { min-width: 168px; }
.uv2-tabel th:nth-child(2) { white-space: nowrap; }
.uv2-tabel th:nth-child(6) { min-width: 130px; }
.uv2-tabel td .chip, .uv2-tabel td .uv2-stand { white-space: nowrap; }
.uv2-tabel td { padding: 10px 9px; }
.uv2-tabel th { padding: 9px 9px; }

/* Snel naar een andere partij vanuit het dossier (wireframe v4) */
.uv2-spring select { padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  font: 600 .76rem var(--font-ui); color: var(--c-ink); background: #fff; max-width: 220px; }
.uv2 .visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Mensen op de bouw (UV4): een uit-dienst-regel blijft leesbaar maar
   treedt terug — hij is er nog, hij telt alleen niet meer mee. */
.uv2-tabel tr.is-uit td { opacity: .6; }
.uv2-vinkje { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--c-ink-2); }
.uv2-vinkje input { width: 15px; height: 15px; accent-color: var(--c-groen); }

/* ---- Inzet (UV5): bezettingscel, toewijsvoorstel ---- */
.uv2-melding.is-ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.uv2-melding.is-ok span { color: var(--c-ink-2); }
.uv2-naam { border: 0; background: none; font: inherit; font-weight: 700; color: var(--c-ink);
  padding: 0; cursor: pointer; text-align: left; }
.uv2-naam:hover { color: var(--c-groen-d); }

/* Eén weekcel: percentage groot, wat erachter zit klein, afwezigheid apart.
   De cel is een knop — afwezigheid vastleggen hoort waar je hem leest. */
.uv2-cel { display: block; width: 100%; min-width: 84px; padding: 7px 9px; border-radius: 10px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; cursor: pointer;
  font-family: var(--font-ui); text-align: right; transition: background var(--overgang); }
.uv2-cel b { display: block; font-size: .84rem; font-family: var(--font-mono); }
.uv2-cel span { display: block; font-size: .6rem; color: var(--c-ink-3); }
.uv2-cel em { display: block; font-style: normal; font-size: .6rem; font-weight: 700; color: var(--c-amber); }
.uv2-cel.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.uv2-cel.is-vol { background: var(--c-rood-t); border-color: var(--c-rood); }
.uv2-cel.is-vol b { color: var(--c-rood); }
.uv2-cel.is-leeg { background: var(--c-creme); }
.uv2-cel.is-dicht { background: var(--c-paneel); border-style: dashed; color: var(--c-ink-3); }
button.uv2-cel:hover { background: var(--c-paneel-2); }
.uv2-totaal td { border-top: var(--lijndikte) solid var(--c-lijn-2); font-weight: 700; }

.uv2-voorstel { padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-voorstel:first-of-type { border-top: 0; }
.uv2-vkop b { font-size: .84rem; }
.uv2-vkop span { display: block; font-size: .7rem; color: var(--c-ink-3); margin-top: 1px; }
.uv2-kandidaten { list-style: none; margin: 8px 0 0; padding: 0; }
.uv2-kandidaten li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px;
  align-items: center; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-kandidaten li b { font-size: .78rem; }
.uv2-kandidaten li span { font-size: .68rem; color: var(--c-ink-3); }
.uv2-kandidaten li span:first-of-type { grid-column: 1; }
.uv2-afvallers { margin-top: 8px; }
.uv2-afvallers summary { font-size: .7rem; color: var(--c-ink-3); cursor: pointer; }
.uv2-afvallers ul { margin: 6px 0 0; padding-left: 18px; font-size: .7rem; color: var(--c-ink-2); line-height: 1.6; }
.uv2-knoppen a.btn { text-decoration: none; }

/* ---- Prestatie (UV6) ---- */
.uv2-cijfer { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px; font-weight: 800; font-size: .84rem;
  background: var(--c-paneel); color: var(--c-ink-2); }
.uv2-cijfer.is-a { background: var(--c-groen); color: #fff; }
.uv2-cijfer.is-b { background: var(--c-groen-t); color: var(--c-groen-d); }
.uv2-cijfer.is-c { background: var(--c-amber-t); color: var(--c-amber); }
.uv2-cijfer.is-d { background: var(--c-rood); color: #fff; }

.uv2-uitleg { list-style: none; margin: 0; padding: 0; counter-reset: uitleg; }
.uv2-uitleg li { padding: 10px 0 10px 34px; border-top: var(--lijndikte) solid var(--c-lijn); position: relative; }
.uv2-uitleg li:first-child { border-top: 0; }
.uv2-uitleg li::before { counter-increment: uitleg; content: counter(uitleg);
  position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 7px;
  background: var(--c-paneel); color: var(--c-ink-2); font: 800 .66rem var(--font-mono);
  display: flex; align-items: center; justify-content: center; }
.uv2-uitleg li.is-buiten::before { content: "+"; background: var(--c-creme); }
.uv2-uitleg li b { font-size: .8rem; }
.uv2-uitleg li .mono { font-size: .62rem; color: var(--c-ink-3); margin-left: 6px; }
.uv2-uitleg li p { margin: 4px 0 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2); }
.uv2-uitleg li em { display: block; margin-top: 4px; font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.uv2-nooit { margin-top: 11px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-nooit div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .76rem; }
.uv2-nooit span { color: var(--c-ink-3); }
.uv2-nooit b { text-align: right; }

/* Genummerde stappen (tekenroute) — zelfde vorm als de aanmeldroute, maar
   onder elkaar omdat het zinnen zijn en geen labels. */
.uv2-route--stappen { flex-direction: column; align-items: stretch; gap: 6px; }
.uv2-route--stappen li { border-radius: var(--radius); justify-content: flex-start;
  font-weight: 500; color: var(--c-ink-2); text-align: left; line-height: 1.5; }
.uv2-route--stappen li .mono { flex: none; width: 18px; }

/* ---- Geld (UV8) ---- */
.uv2-rooster--geld { margin-top: 12px; padding-top: 11px; border-top: var(--lijndikte) solid var(--c-lijn-2);
  grid-template-columns: 1fr auto; }
.uv2-rooster--geld dd { text-align: right; }
.uv2-mw { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-mw:first-of-type { border-top: 0; }
.uv2-mw b { font-size: .8rem; }
.uv2-mw p { margin: 4px 0 0; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }

/* ---- Beheer (UV9) ---- */
.uv2-poort { padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-poort:first-of-type { border-top: 0; }
.uv2-poort b { font-size: .78rem; }
.uv2-poort p { margin: 3px 0 4px; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }

/* ── cockpit.css ── */
/* =====================================================================
   cockpit.css — Module 2.6 · Casa365 cockpit. Operatie-dashboard:
   veld-signalen, capaciteitsgrafiek, donut en balkkaarten.
   Tokens + bouwstenen; diepte via 1px-lijnen, geen schaduw.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.cp { max-width: 1280px; margin: 0 auto; padding: 26px 32px 72px; }


.cp-kaart { padding: 18px 20px; }
.cp-kaart > strong, .cp-kaart__kop strong { font-size: .9rem; }
.cp-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-kaart__voet { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; color: var(--c-ink-3); }
.cp-sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; }

.cp-duo { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 16px 0; }
.cp-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .cp-duo, .cp-trio { grid-template-columns: 1fr; } }

/* signalen uit het veld */
.cp-veld { border: var(--lijndikte) solid var(--c-rood); border-radius: 16px; background: var(--c-rood-t); padding: 16px 18px; margin-bottom: 16px; }
.cp-veld__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cp-veld__titel { display: flex; align-items: center; gap: 9px; }
.cp-veld__titel strong { font-size: .9rem; }
.cp-puls { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rood); outline: 4px solid var(--c-rood-t); }
.cp-veld__aantal { font-size: .64rem; font-weight: 600; color: var(--c-rood); background: #fff; padding: 2px 8px; border-radius: 99px; }
.cp-veld__sub { font-size: .7rem; color: var(--c-ink-3); }

.cp-signaal { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 9px; }
.cp-signaal:last-child { margin-bottom: 0; }
.cp-signaal > i { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.cp-signaal--terra > i { background: var(--c-terra); }
.cp-signaal--rood > i { background: var(--c-rood); }
.cp-signaal--amber > i { background: var(--c-amber); }
.cp-signaal__inhoud { flex: 1; min-width: 0; }
.cp-signaal__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.cp-signaal__kop strong { font-size: .8rem; }
.cp-signaal__sev { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; color: #fff; }
.cp-signaal--terra .cp-signaal__sev { background: var(--c-terra); }
.cp-signaal--rood .cp-signaal__sev { background: var(--c-rood); }
.cp-signaal--amber .cp-signaal__sev { background: var(--c-amber); }
.cp-signaal__urgent { font-size: .6rem; font-weight: 700; color: var(--c-rood); }
.cp-signaal__meta { font-size: .7rem; color: var(--c-ink-2); }
.cp-signaal__route { margin-top: 4px; font-size: .72rem; font-weight: 600; }
.cp-signaal--terra .cp-signaal__route { color: var(--c-terra-d); }
.cp-signaal--rood .cp-signaal__route { color: var(--c-rood); }
.cp-signaal--amber .cp-signaal__route { color: var(--c-amber); }

/* capaciteit vs. vraag */
.cp-cap__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cp-cap__stats { display: flex; gap: 20px; flex-wrap: wrap; }
.cp-statlabel { display: block; font-size: .68rem; color: var(--c-ink-3); }
.cp-cap__stats strong { font-size: 1.3rem; }
.cp-terra { color: var(--c-terra-d); }
.cp-groen { color: var(--c-groen-d); }

.cp-cap__grafiek { display: flex; align-items: stretch; gap: 14px; }
.cp-cap__as { width: 26px; flex: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .6rem; color: var(--c-ink-3); }
.cp-cap__kolommen { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 8px; }
.cp-cap__kolom { flex: 1; display: flex; flex-direction: column; align-items: center; }
.cp-cap__balken { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cp-cap__tekortlabel { font-size: .64rem; font-weight: 700; color: var(--c-terra-d); margin-bottom: 3px; }
.cp-cap__duo { display: flex; align-items: flex-end; gap: 3px; }
.cp-cap__vraag { display: flex; flex-direction: column; justify-content: flex-end; }
.cp-cap__plan { display: block; width: 15px; border-radius: 4px; background: var(--c-groen); }
.cp-cap__plan.is-gestapeld { border-radius: 0 0 4px 4px; }
.cp-cap__tekort { display: block; width: 15px; border-radius: 4px 4px 0 0; background: var(--c-terra); }
.cp-cap__cap { display: block; width: 15px; border-radius: 4px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); box-sizing: border-box; }
.cp-cap__dag { margin-top: 8px; text-align: center; }
.cp-cap__dag strong { display: block; font-size: .7rem; }
.cp-cap__dag span { font-size: .56rem; color: var(--c-ink-3); }

.cp-cap__legenda { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; color: var(--c-ink-2); }
.cp-cap__legenda span { display: flex; align-items: center; gap: 7px; }
.cp-cap__bezetting { margin-left: auto; color: var(--c-ink-3); }
.cp-blokje { width: 11px; height: 11px; border-radius: 3px; }
.cp-blokje--groen { background: var(--c-groen); }
.cp-blokje--terra { background: var(--c-terra); }
.cp-blokje--zacht { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.cp-streepje { width: 12px; height: 3px; border-radius: 2px; background: var(--c-terra); }
.cp-advies { margin-top: 12px; padding: 13px 15px; border-radius: 12px; font-size: .78rem; line-height: 1.55; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); color: var(--c-terra-d); }

/* grafieken */
.cp-svg { width: 100%; height: auto; display: block; }
.cp-svgtekst { font: 600 8px var(--font-mono); }
.cp-svgtekst--vet { font: 700 10px var(--font-mono); }
.cp-legenda-mini { display: flex; gap: 16px; font-size: .66rem; color: var(--c-ink-3); }
.cp-legenda-mini span { display: flex; align-items: center; gap: 6px; }
.cp-legenda-mini .cp-blokje { width: 9px; height: 9px; }

/* donut */
.cp-donut { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.cp-donut__ring { position: relative; width: 110px; height: 110px; flex: none; }
.cp-donut__midden { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cp-donut__midden strong { font-size: 1.35rem; }
.cp-donut__midden span { font-size: .56rem; color: var(--c-ink-3); }
.cp-donut__legenda { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cp-donut__item { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: var(--c-ink-2); }
.cp-donut__item i { width: 8px; height: 8px; border-radius: 3px; flex: none; }

/* balk-kaarten */
.cp-balken { display: flex; flex-direction: column; gap: 11px; }
.cp-balk__kop { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); margin-bottom: 4px; }
.cp-balk__kop.is-stil { color: var(--c-ink-3); }
.cp-balklijn { height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.cp-balklijn i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); }
.cp-balklijn i.is-warm { background: var(--c-amber); }
.cp-balklijn i.is-stil { background: var(--c-lijn-2); }

/* Wat de keten ophoudt (FT-3.5) — op volgorde van geld, en elke rij is
   een sprong naar het scherm waar je er iets aan doet. */
.cp-blok { padding: 18px 20px; margin-bottom: 18px; }
.cp-blok__kop { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-blok__kop strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.cp-blok__sub { font-size: .64rem; color: var(--c-ink-3); }
.cp-blok--leeg { font-size: .82rem; color: var(--c-groen-d); background: var(--c-groen-t); }
.cp-blokrij { display: grid; grid-template-columns: 62px 1fr auto 20px; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 11px 8px; background: transparent; border: 0;
  border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer;
  font-family: var(--font-ui); transition: background var(--overgang); }
.cp-blokrij:hover { background: var(--c-creme); }
.cp-blokrij__n { font-size: 1.05rem; font-weight: 700; color: var(--c-rood); }
.cp-blokrij__label { font-size: .82rem; color: var(--c-ink); }
.cp-blokrij__bedrag { font-size: .78rem; color: var(--c-ink-2); }
.cp-blokrij__pijl { color: var(--c-ink-3); }
.cp-blokrij:hover .cp-blokrij__pijl { color: var(--c-groen-d); }
.cp-balk__blok { font-size: .6rem; font-weight: 700; color: var(--c-rood); }
.cp-balk__sub { font-size: .62rem; color: var(--c-ink-3); margin-top: 3px; }

/* Omzetkaart (FT-3.5 vervolg): wat we van kosten weten staat eronder,
   met de eerlijke mededeling waarom er geen margecijfer staat. */
.cp-kaart__meta { font-size: .68rem; color: var(--c-ink-3); }
.cp-marge { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cp-marge > div { flex: 1; min-width: 140px; padding: 9px 12px; border-radius: var(--radius);
  background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.cp-marge strong { display: block; font-size: .95rem; margin-top: 2px; }
.cp-sub--let { margin-top: 10px; color: var(--c-ink-3); font-size: .68rem; line-height: 1.55; }

/* Maatregelmix als volle breedte onder de trio-rij; de balken staan naast
   elkaar zodat de verhouding in één oogopslag leesbaar blijft. */
.cp-mix .cp-balken { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; }

/* ── planning-schil.css ── */
/* planning-schil.css — de gedeelde vormtaal van de twee planmodules
   (UP1, 05-08). Verkoopplanning en Uitvoerplanning zijn zusterschermen: ze
   delen de standen-kop, de wortel en de eenvoudige lijstkaart, zodat een
   planner in beide modules dezelfde taal ziet. Wat eigen is aan een module
   staat in verkoopplanning.css respectievelijk uitvoerplanning.css.

   Eerder stond dit impliciet in de CSS van één module — bij het opruimen
   van UP1 bleek dat broos. Vandaar dit expliciete, gedeelde bestand. */

.vp-schil { display: flex; flex-direction: column; min-height: 100%; }
.vp-kop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 0; }
.vp-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.vp-standen { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; overflow: hidden; }
.vp-stand { border: 0; background: #fff; padding: 7px 15px; font-size: .74rem; font-weight: 700;
  color: var(--c-ink-2); font-family: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
.vp-stand.is-actief { background: var(--c-groen); color: #fff; }
.vp-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 14px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

/* eenvoudige lijstkaart met klikbare rijen (verwijzingen, werkvoorraden) */
.vp-lijst { display: flex; flex-direction: column; padding: 14px 18px; }
.vp-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 2px;
  font-size: .78rem; font-family: inherit; color: var(--c-ink); text-decoration: none; cursor: pointer; }
.vp-rij:first-of-type { border-top: 0; }
.vp-rij:hover { background: var(--c-paneel-2); }
.vp-rij__nr { font-size: .62rem; color: var(--c-ink-3); width: 18px; }
.vp-rij__wie { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vp-rij__adres { font-size: .68rem; color: var(--c-ink-3); }

/* ---- UP3 (05-08): de vormtaal die béíde planmodules gebruiken staat
   hier — tweeluik, werkvoorraad-kolom, werkstrook, roosterbasis, popup
   met voorstellen, concept-strook, blokmenu-modalen en het kaartvak.
   Verkoop- en uitvoerplanning zijn zusterschermen; wat écht eigen is
   (uur-agenda + adviseur-kiezer, respectievelijk het m²-bord) staat in
   de module-CSS zelf. ---- */

.vp-v7 { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vp-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 18px 26px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-balk .vp-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.vp-rek { flex: 1; }
.vp-weeknav { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--c-ink-2); }

.vp-vlak { display: grid; grid-template-columns: 310px minmax(0, 1fr); flex: 1; min-height: 0; }

/* ---- links: de planvoorraad ---- */
.vp-kolom { border-right: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column;
  min-height: 0; background: var(--c-creme); }
.vp-kolomkop { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3);
  margin: 0; padding: 14px 16px 2px; font-weight: 700; }
.vp-kolomkop b { color: var(--c-ink); font-size: .9rem; }
.vp-sorteer { font-size: .66rem; color: var(--c-ink-3); font-style: italic; padding: 0 16px 8px; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.vp-items { flex: 1; overflow-y: auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.vp-item { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; font-family: inherit; transition: background 150ms ease, border-color 150ms ease; }
.vp-item:hover { background: var(--c-paneel-2); }
.vp-item.is-sel { border: 2px solid var(--c-groen); background: var(--c-groen-t); }
.vp-item__r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vp-item__r1 b { font-size: .82rem; color: var(--c-ink); }
.vp-item__sub { font-size: .7rem; color: var(--c-ink-2); }
.vp-item__hint { font-size: .66rem; color: var(--c-ink-3); font-style: italic; }
.vp-merk { font-size: .6rem; font-weight: 800; border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.vp-leeg { font-size: .74rem; color: var(--c-ink-3); margin: 6px 2px; }

/* ---- rechts: werkstrook + agenda ---- */
.vp-rechts { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.vp-nu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem;
  padding: 10px 20px; background: var(--c-paneel-2); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-nu__leeg { font-style: italic; color: var(--c-ink-3); }
.vp-nu__hint { font-size: .72rem; color: var(--c-ink-3); font-style: italic; }

.vp-agenda { flex: 1; overflow: auto; padding: 10px 20px 24px; }
.vp-rooster { border-collapse: collapse; width: 100%; table-layout: fixed; }
.vp-rooster th { font-size: .7rem; color: var(--c-ink-3); font-weight: 600; padding: 6px 4px;
  border-bottom: var(--lijndikte) solid var(--c-lijn-2); text-align: left; }
.vp-rooster td { border: var(--lijndikte) solid var(--c-lijn); height: 42px; vertical-align: top; padding: 0; position: relative; }
.vp-vrij { cursor: pointer; }
.vp-vrij:hover { background: var(--c-groen-t); }
.vp-tip { cursor: pointer; background: var(--c-groen-t); box-shadow: inset 0 0 0 2px var(--c-groen); }
.vp-tipsub { position: absolute; bottom: 2px; left: 6px; font-size: .6rem; color: var(--c-groen-d); font-weight: 700; }
.vp-blok { display: block; width: calc(100% - 4px); margin: 2px; padding: 3px 7px; text-align: left;
  font-size: .68rem; font-weight: 700; background: var(--c-paneel); color: var(--c-ink);
  border: 0; border-left: 3px solid var(--c-lijn-2); border-radius: 4px; font-family: inherit; cursor: pointer; }
.vp-blok small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); }
.vp-blok.is-concept, .vp-blok.is-conceptvak { background: var(--c-groen-t); border-left-color: var(--c-groen); color: var(--c-groen-d); }
.vp-blok__notitie { color: var(--c-groen-d); }

/* ---- popup met de drie voorstellen ---- */
.vp-popup { position: absolute; top: 96px; right: 22px; width: 340px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  box-shadow: var(--schaduw-tegel-hover); z-index: 25; padding-bottom: 8px; }
.vp-popup__kop { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px 2px; }
.vp-popup__kop h3 { margin: 0; font-size: .84rem; }
.vp-sluit { border: 0; background: var(--c-paneel); border-radius: 5px; width: 24px; height: 24px;
  font-size: .7rem; cursor: pointer; color: var(--c-ink-2); font-family: inherit; }
.vp-popup__sub { font-size: .66rem; color: var(--c-ink-3); padding: 0 14px 8px; margin: 0; }
.vp-optie { display: block; width: calc(100% - 24px); margin: 0 12px 7px; text-align: left; cursor: pointer;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 9px 12px; font-family: inherit; }
.vp-optie:hover { background: var(--c-paneel-2); }
.vp-optie.is-best { border: 2px solid var(--c-groen); }
.vp-optie b { display: block; font-size: .8rem; }
.vp-best { float: right; font-size: .6rem; font-weight: 800; color: var(--c-groen-d); }
.vp-optie__wie { font-size: .72rem; color: var(--c-ink-2); }
.vp-optie__why { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: normal; margin: 3px 0; }
.vp-optie__klik { display: block; font-size: .64rem; font-weight: 700; color: var(--c-groen-d); }
.vp-popup__voet { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 12px 4px; }

/* ---- concept-strook ---- */
.vp-bevestig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem;
  padding: 11px 20px; border-top: 2px solid var(--c-groen); background: var(--c-groen-t); }
.vp-buiten { font-size: .7rem; color: var(--c-ink-2); font-style: italic; }
.vp-notitielabel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px;
  font-size: .68rem; color: var(--c-ink-2); }
.vp-notitielabel input { flex: 1; padding: 6px 10px; font-size: .74rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
.vp-nietsverstuurd { font-size: .66rem; color: var(--c-ink-2); }

/* ---- modalen ---- */
.vp-blokmenu { display: flex; flex-direction: column; gap: 6px; }
.vp-geschlijst { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; }
.vp-gesch { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: .74rem;
  padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); line-height: 1.5; }
.vp-gesch em { font-style: normal; color: var(--c-ink-3); }

@media (max-width: 1100px) {
  .vp-vlak { grid-template-columns: 1fr; }
  .vp-kolom { border-right: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); max-height: 300px; }
  .vp-popup { position: static; width: auto; margin: 12px 20px; }
}

/* VP5 · kaart: Leaflet-vak (of dezelfde tekening schematisch), filters,
   routekaartje met km + reistijd en de legenda. */
.vp-kaartvlak { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vp-kaartbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px 8px; }
.vp-kaartadv { font-size: .68rem; color: var(--c-ink-3); }
.vp-kaartvak { position: relative; flex: 1; min-height: 420px; margin: 0 20px 20px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; }
.vp-leaflet { position: absolute; inset: 0; }
.vp-kaartsvg { width: 100%; height: 100%; display: block; }
.vp-kaartlabel { font-size: 12px; font-weight: 700; fill: var(--c-ink); font-family: var(--font-ui); }
.vp-kaartpin { cursor: pointer; }
.vp-klegenda { position: absolute; bottom: 12px; left: 12px; z-index: 500; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 12px;
  font-size: .66rem; display: grid; gap: 4px; box-shadow: var(--schaduw-tegel); }
.vp-klegenda i { font-style: normal; display: flex; align-items: center; gap: 7px; color: var(--c-ink-2); }
.vp-pin { width: 11px; height: 11px; border-radius: 99px; display: inline-block; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--c-lijn-2); }
.vp-pin--plan { background: var(--c-groen); }
.vp-pin--gepland { background: var(--c-ink-3); }
.vp-pin--nieuw { background: transparent; border: 2px dashed var(--c-ink); box-shadow: none; }
.vp-kmerk { position: absolute; bottom: 12px; right: 12px; z-index: 500; background: #fff;
  border-radius: var(--radius); padding: 4px 10px; font-size: .62rem; color: var(--c-ink-3); }

/* UP6: het routekaartje hoort bij béíde planmodules — verkoop toont de
   dagroute van de adviseur, uitvoering die van de ploegen. */
.vp-routekaart { position: absolute; top: 12px; right: 12px; z-index: 500; background: #fff;
  border: 2px solid var(--c-groen); border-radius: var(--radius); padding: 10px 14px;
  font-size: .72rem; line-height: 1.6; box-shadow: var(--schaduw-tegel-hover); display: flex; flex-direction: column; }
.vp-routekaart b { font-size: .76rem; }
.vp-routekaart em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

/* UP6: de dagkiezer van de kaart — verkoop kiest de dag van de adviseur,
   uitvoering die van de ploegroutes. */
.vp-kaartdag { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--c-ink-2); margin-left: auto; }
.vp-kaartdag input { padding: 5px 8px; font-size: .74rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }

/* ── uitvoerplanning.css ── */
/* uitvoerplanning.css — wat eigen is aan de uitvoerkant van het planscherm
   (wireframe v4, UP3 · 05-08). De schil (tweeluik, werkvoorraad-kolom,
   popup, concept-strook, kaartvak) komt uit planning-schil.css; hier staat
   het bord zelf: ploegen gegroepeerd per discipline, hele dagen in plaats
   van uren, de m²-vulling per dag, "＋ X m² vrij" bij een dag waar nog een
   klus bij past, en de bruine arcering van een dag waarop het materiaal
   nog niet binnen is. Alleen tokens. */

/* de module-wortel: dezelfde volle-schermschil als de verkoopplanning,
   maar met een breder bord (ploegen × dagen vraagt kolombreedte) */
.up-schil { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ---- lijst: statusmerken en type-chip ---- */
.up-merk { font-size: .6rem; font-weight: 800; border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.up-merk--ok { background: var(--c-ink); color: #fff; }
.up-merk--toez { border: 1px solid var(--c-groen); color: var(--c-groen-d); }
.up-merk--blok { border: 1px solid var(--c-rood); color: var(--c-rood); }
.up-tchip { font-size: .62rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 4px; padding: 0 5px; color: var(--c-ink-3); }
.vp-item.is-blok { opacity: .62; }

/* ---- werkstrook ---- */
.up-nu--blok { background: var(--c-paneel); }
.up-nogdagen { font-size: .72rem; font-weight: 700; color: var(--c-groen-d); }
.up-schakel { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; color: var(--c-ink-2); }
.up-schakel input { accent-color: var(--c-groen); }

/* ---- het bord: ploeg × dag ---- */
.up-bord { padding-top: 12px; }
.up-rooster td.up-cel { height: 58px; }
.up-ploegkop { width: 190px; }
.up-ploeg { padding: 6px 10px; background: var(--c-paneel-2); vertical-align: top; }
.up-ploeg b { font-size: .76rem; display: block; }
.up-ploeg small { font-size: .62rem; color: var(--c-ink-3); }
.up-groep td { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); padding: 0; }
.up-groepknop { width: 100%; text-align: left; background: none; border: 0; font-family: inherit;
  font-size: .76rem; font-weight: 700; color: var(--c-ink); padding: 7px 11px; cursor: pointer; }
.up-groepknop small { color: var(--c-ink-3); font-weight: 400; }
.up-vrij { cursor: pointer; }
.up-vrij:hover { background: var(--c-groen-t); }
.up-tip { cursor: pointer; background: var(--c-groen-t); box-shadow: inset 0 0 0 2px var(--c-groen); }
.up-tipsub { position: absolute; bottom: 3px; left: 6px; font-size: .6rem; font-weight: 700; color: var(--c-groen-d); }
.up-mis { background: repeating-linear-gradient(45deg, #fff, #fff 4px, var(--c-paneel-2) 4px, var(--c-paneel-2) 8px); }
/* materiaal nog niet binnen én "voorraad hard" aan: deze dag kan niet */
.up-voorraaddicht { cursor: not-allowed;
  background: repeating-linear-gradient(-45deg, #fff, #fff 3px, var(--c-amber-t) 3px, var(--c-amber-t) 6px); }

.up-blok { display: block; width: calc(100% - 4px); margin: 2px; padding: 3px 7px; text-align: left;
  font-size: .68rem; font-weight: 700; background: var(--c-paneel); color: var(--c-ink);
  border: 0; border-left: 3px solid var(--c-lijn-2); border-radius: 4px; font-family: inherit; cursor: pointer; }
.up-blok small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); }
.up-blok.is-concept { background: var(--c-groen-t); border-left-color: var(--c-groen); color: var(--c-groen-d); }
.up-blok__notitie { color: var(--c-groen-d); }
.up-concept { display: block; margin: 2px; padding: 3px 7px; font-size: .68rem; font-weight: 700;
  background: var(--c-groen-t); border: 2px dashed var(--c-groen); border-radius: 4px;
  color: var(--c-groen-d); cursor: pointer; }
.up-concept small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); }
.up-vul { display: block; font-size: .58rem; color: var(--c-ink-3); padding: 0 7px 2px; }
/* UP6: de reistijd van een ploegdag staat onder de vulling, in dezelfde
   stille toon — informatie, geen alarm */
.up-route { display: block; font-size: .56rem; color: var(--c-ink-3); padding: 0 7px 3px; }
.up-weekkm { display: block; font-size: .58rem; color: var(--c-ink-3); margin-top: 2px; }
.up-ruimte { position: absolute; bottom: 3px; right: 7px; font-size: .58rem; font-weight: 800; color: var(--c-groen-d); }
.up-redenlabel input { border-color: var(--c-amber); }
.up-knipwarn { font-size: .68rem; font-weight: 700; color: var(--c-amber);
  border: 1px solid var(--c-amber); border-radius: 5px; padding: 1px 8px; }

@media (max-width: 1100px) {
  .up-ploegkop { width: 130px; }
}

/* ── verkoopplanning.css ── */
/* verkoopplanning.css — wat eigen is aan de verkoopkant van het
   planscherm (wireframe v7): de klantscore en statusmerken, de
   belsectie, de adviseur-kiezer, de uur-agenda met dagdeel-dimming,
   de afsprakenlijst en het routekaartje. De gedeelde schil (tweeluik,
   lijst, popup, concept-strook, kaartvak) staat in planning-schil.css.
   Alleen tokens. */

.vp-score { font-family: var(--font-mono); font-size: .62rem; font-weight: 800; color: var(--c-groen-d);
  border: 1.5px solid var(--c-groen); border-radius: 5px; padding: 0 5px; margin-left: 6px; }
.vp-merk--nieuw { background: var(--c-ink); color: #fff; }
.vp-merk--her { border: 1px solid var(--c-groen); color: var(--c-groen-d); }
.vp-merk--stil { border: 1px dashed var(--c-lijn-2); color: var(--c-ink-3); }
.vp-oud { font-size: .64rem; color: var(--c-ink-3); }
.vp-belsectie { border-top: var(--lijndikte) solid var(--c-lijn); padding: 10px 14px 14px; max-height: 170px; overflow-y: auto; }
.vp-belsectie h3 { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin: 0 0 6px; }
.vp-beltaak { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .74rem; padding: 5px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-beltaak:last-child { border-bottom: 0; }
.vp-beltaak small { display: block; font-size: .64rem; color: var(--c-ink-3); }
.vp-nu__tel { font-size: .72rem; color: var(--c-ink-2); }
.vp-nu__acties { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vp-nu__ladder { font-size: .66rem; color: var(--c-ink-3); }

.vp-advregel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px 4px; }
.vp-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--c-ink-3); }
.vp-advkies { position: relative; }
.vp-advknop { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: var(--radius);
  padding: 7px 13px; font-size: .78rem; font-weight: 700; color: var(--c-ink); font-family: inherit;
  min-width: 250px; text-align: left; cursor: pointer; }
.vp-advknop small { color: var(--c-ink-3); font-weight: 400; margin-left: 6px; }
.vp-pijl { float: right; color: var(--c-ink-3); font-size: .7rem; }
.vp-advlijst { position: absolute; top: 40px; left: 0; width: 340px; max-height: 340px; overflow-y: auto;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  box-shadow: var(--schaduw-tegel-hover); z-index: 30; }
.vp-advzoek { width: calc(100% - 20px); margin: 10px; padding: 7px 10px; font-size: .78rem;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); font-family: inherit; }
.vp-advgroep { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-3); padding: 8px 13px 4px; border-top: var(--lijndikte) solid var(--c-lijn); }
.vp-aitem { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: #fff;
  padding: 7px 13px; font-size: .78rem; text-align: left; font-family: inherit; cursor: pointer; }
.vp-aitem:hover { background: var(--c-groen-t); }
.vp-aitem b { flex: 1; font-weight: 600; }
.vp-aitem__m { font-size: .64rem; color: var(--c-ink-3); }
.vp-aitem.is-uit { opacity: .45; cursor: not-allowed; }
.vp-advvoet { border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 13px; font-size: .64rem; color: var(--c-ink-3); }
.vp-advvoet a { color: var(--c-groen-d); font-weight: 700; }
.vp-snel { display: flex; gap: 4px; }
.vp-legenda { margin-left: auto; display: flex; gap: 12px; font-size: .64rem; color: var(--c-ink-3); }
.vp-legenda i { font-style: normal; display: flex; align-items: center; gap: 5px; }
.vp-vk { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.vp-vk--tip { background: var(--c-groen-t); border: 1.5px solid var(--c-groen); }
.vp-vk--dim { background: var(--c-paneel-2); border: 1px dashed var(--c-lijn-2); }
.vp-uurkop { width: 54px; }
.vp-uur { font-size: .66rem; color: var(--c-ink-3); padding: 3px 6px; border: 0; }
.vp-rooster td.is-dim { cursor: pointer;
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--c-paneel-2) 3px, var(--c-paneel-2) 6px); }

/* ---- lijstweergave ---- */
.vp-lijstvlak { flex: 1; overflow-y: auto; padding: 16px 22px 30px; display: flex; flex-direction: column; gap: 12px; }
.vp-lijstbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vp-zoek { flex: 1; max-width: 340px; padding: 7px 11px; font-size: .78rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
.vp-arij { display: grid; grid-template-columns: 150px 1.2fr 1fr 110px 130px 150px; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn);
  padding: 9px 4px; font-size: .76rem; font-family: inherit; cursor: pointer; color: var(--c-ink); }
.vp-arij:hover { background: var(--c-paneel-2); }
.vp-arij--kop { border-top: 0; font-size: .6rem; letter-spacing: .07em; color: var(--c-ink-3);
  text-transform: uppercase; cursor: default; }
.vp-arij--kop:hover { background: none; }
.vp-arij__stil { color: var(--c-ink-2); }
.vp-arij__status { font-size: .68rem; color: var(--c-ink-2); }
.vp-arij__status.is-rood { color: var(--c-rood); }
.vp-arij__status.is-amber { color: var(--c-amber); }

/* VP4 · afsprakenlijst: periode-chips en de notitie-regel in de klantkolom */
.vp-periode { display: flex; gap: 4px; margin-left: auto; }
.vp-arij__notitie { display: block; font-size: .64rem; font-style: normal; color: var(--c-groen-d); }
.vp-arij__status.is-groen { color: var(--c-groen-d); }

/* VP7 · de voorkeursmomenten van de klant. Geen kleur op de wens zelf —
   dat is geen signaal maar een gegeven; kleur bewaren we voor «het kan
   niet». */
.vp-wens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; margin-top: 6px; }
.vp-wens b { font-size: .78rem; }
.vp-wens__m { font-size: .72rem; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 99px; padding: 2px 9px; margin-right: 5px; white-space: nowrap; }
.vp-wens__bron { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.vp-wens__leeg { font-style: normal; font-size: .76rem; color: var(--c-ink-3); }

.vp-optie.is-wens { border-color: var(--c-ink); }
.vp-alt { font-size: .58rem; letter-spacing: .08em; color: var(--c-ink-3); }
.vp-popup__mis { margin: 8px 0 0; font-size: .78rem; color: var(--let-d, var(--c-ink)); }

.vp-wensrij { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 10px; align-items: end; }
.vp-wensrij__n { align-self: center; color: var(--c-ink-3); font-size: .8rem; text-align: center; }

/* VP12 · de korte houdtijd in de popup. Geen kleur: dit is uitleg, geen
   signaal — pas als een moment écht verdwijnt komt er een melding. */
.vp-popup__hold { margin: 0 0 6px; font-size: .72rem; color: var(--c-ink-3); }

/* VP13 · de publicatiestand in de kop en de markering op een blok */
.vp-publicatie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; margin: 0 0 8px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: #fff; font-size: .78rem; color: var(--c-ink-2); }
.vp-publicatie.is-open { border-color: var(--let); }
.vp-publicatie .vp-lbl { flex: none; }
.vp-publicatie .btn, .vp-publicatie .bs-chip { margin-left: auto; }
.vp-blok.is-nagepub { box-shadow: inset 3px 0 0 var(--let); }

/* VP14 · het dagbord: adviseurs als rijen, halve uren als kolommen */
.vp-dagkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.vp-dagsom { color: var(--c-ink-2); }
.vp-dagsom .is-stop { color: var(--stop); }
.vp-seggroep { display: inline-flex; gap: 4px; }
.vp-agenda--dag { padding: 0 0 24px; }
.vp-rooster--dag { table-layout: fixed; min-width: 1100px; }
.vp-rooster--dag thead th { position: sticky; top: 0; background: #fff; z-index: 3; font-size: .66rem; padding: 6px 2px; }
.vp-rooster--dag th.is-half { border-left: 0; }
.vp-rooster--dag td.is-half, .vp-rooster--dag th.is-half { border-left-color: transparent; }
.vp-rooster--dag td { height: 46px; }
.vp-dag__adv { position: sticky; left: 0; background: #fff; z-index: 2; width: 200px; text-align: left; padding: 4px 8px; border-right: var(--lijndikte) solid var(--c-lijn-2); }
.vp-dag__naam { display: flex; align-items: center; gap: 6px; font-size: .74rem; }
.vp-dag__naam b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-dag__naam em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); white-space: nowrap; }
.vp-dag__last { display: flex; gap: 8px; font-size: .62rem; color: var(--c-ink-2); margin-top: 2px; padding-left: 2px; border-left: 3px solid var(--c-lijn-2); }
.vp-dag__last.is-goed { border-left-color: var(--goed); }
.vp-dag__last.is-let { border-left-color: var(--let); }
.vp-dag__last.is-stop { border-left-color: var(--stop); color: var(--stop); }
tr.is-vrijedag td { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--c-paneel) 6px 8px); }
td.is-dicht .vp-cel { cursor: not-allowed; }
.vp-cel { display: block; width: 100%; height: 100%; min-height: 40px; border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; padding: 0 4px; position: relative; }
.vp-cel:disabled { cursor: default; }
.vp-cel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vp-blok--dag { font-size: .64rem; }
.vp-blok__tijd { color: var(--c-ink-3); font-weight: 600; }
tr.is-half td { border-top-style: dashed; }
/* focus-modus: het bord op de volle breedte (zie app.css .app.pb-focus) */
.app.pb-focus .vp-balk { padding-top: 8px; }

/* VP15 · slepen mét reden: het blok is te pakken, de cel zegt vóór het
   loslaten of het kan (goed · let · stop); de ring is een outline, geen
   schaduw */
.vp-blok[draggable="true"] { cursor: grab; }
.vp-blok.is-sleep { opacity: .45; }
td.is-drop-goed { background: var(--goed-t); outline: 2px solid var(--goed); outline-offset: -2px; }
td.is-drop-let { background: var(--let-t); outline: 2px solid var(--let); outline-offset: -2px; }
td.is-drop-stop { background: var(--stop-t); outline: 2px solid var(--stop); outline-offset: -2px; }
.vp-verzetstand { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; font-size: .8rem; font-weight: 700; }
.vp-verzetstand.is-goed { background: var(--goed-t); color: var(--goed); }
.vp-verzetstand.is-let { background: var(--let-t); color: var(--let); }
.vp-verzetstand.is-stop { background: var(--stop-t); color: var(--stop); }

/* VP13b · het controlevenster vóór publiceren */
.vp-pub__waarschuw { background: var(--let-t); color: var(--let); border-radius: 8px; padding: 8px 12px; font-size: .8rem; margin: 0 0 12px; }
.vp-pub__blok { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; }
.vp-pub__blok h4 { margin: 0 0 6px; font-size: .8rem; display: flex; justify-content: space-between; align-items: baseline; }
.vp-pub__blok h4 span { font-weight: 400; color: var(--c-ink-3); font-size: .7rem; }
.vp-pub__tabel { width: 100%; border-collapse: collapse; font-size: .8rem; }
.vp-pub__tabel th { text-align: left; font: 600 .62rem var(--mono, "JetBrains Mono", monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); padding: 6px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); }
.vp-pub__tabel td { padding: 7px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); vertical-align: middle; }
.vp-pub__tabel tr.is-leeg td { color: var(--c-ink-3); }
.vp-pub__sub { display: block; font-size: .66rem; color: var(--c-ink-3); }
.vp-pub__let { color: var(--let); font-size: .72rem; margin-left: 6px; }
.vp-pub__vink { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; cursor: pointer; }
.vp-pub__vink input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.vp-pub__ontvanger { display: inline-flex; align-items: center; gap: 6px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 2px 8px 2px 12px; font-size: .74rem; margin: 3px 6px 3px 0; }
.vp-pub__ontvanger button { border: 0; background: none; color: var(--c-ink-3); cursor: pointer; font-size: .8rem; padding: 0 2px; }
.vp-pub__toevoeg { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.vp-pub__toevoeg input { font: inherit; font-size: .8rem; padding: 6px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; min-width: 240px; }
.vp-pub__voet { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.vp-pub__som { font-size: .78rem; color: var(--c-ink-2); }

/* RE18 · de woning in beeld in het planbord */
.vp-woning { padding: 10px 20px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: #fff; }
.vp-bevestig__woning { flex-basis: 100%; margin-bottom: 4px; }
.vp-bevestig { flex-wrap: wrap; }

/* VP16 · routes per verkoper: kleur = adviseur (identificatie, besluit 22);
   de kleur komt als data uit de regelset (--adv-kleur), niet uit deze css */
.vp-routelijst { position: absolute; top: 12px; right: 12px; width: 320px; max-height: calc(100% - 24px); overflow: auto; z-index: 500;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; font-size: .76rem; }
.vp-routelijst__kop { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-routelijst__kop em { font-size: .64rem; color: var(--c-ink-3); font-style: italic; }
.vp-routelijst .is-stop { color: var(--stop); }
.vp-routerij { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 4px solid var(--adv-kleur); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-family: inherit; }
.vp-routerij:hover { background: var(--c-paneel-2); }
.vp-routerij.is-actief { border-color: var(--c-ink); border-left-color: var(--adv-kleur); background: var(--c-paneel-2); }
.vp-routerij.is-over .vp-routerij__cijfers { color: var(--stop); }
.vp-routerij__pin, .vp-avatarpin { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--adv-kleur); color: #fff; font: 700 .62rem/1 var(--mono, monospace); overflow: hidden; position: relative; border: 2px solid #fff; }
.vp-routerij__pin img, .vp-avatarpin img { width: 100%; height: 100%; object-fit: cover; }
.vp-routerij__wie { display: flex; flex-direction: column; min-width: 0; }
.vp-routerij__wie b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.vp-routerij__wie small { font-size: .64rem; color: var(--c-ink-3); }
.vp-routerij__cijfers { display: flex; flex-direction: column; align-items: flex-end; font-size: .7rem; }
.vp-routerij__cijfers small { font-size: .62rem; color: var(--c-ink-3); }
.vp-routedetail { border-left: 3px solid var(--adv-kleur); padding: 4px 0 4px 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.vp-routestop { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; font-size: .72rem; align-items: start; }
.vp-routestop small { color: var(--c-ink-3); white-space: nowrap; }
.vp-routedetail em { font-size: .62rem; color: var(--c-ink-3); }
.vp-avatarpin-wrap { background: none; border: 0; }
.vp-avatarpin { width: 30px; height: 30px; box-shadow: var(--schaduw-kaart); }
.vp-avatarpin b { position: absolute; right: -4px; bottom: -4px; background: var(--c-ink); color: #fff; font-size: .55rem; border-radius: 99px; padding: 1px 4px; line-height: 1; }
.vp-avatarpin.is-dim, .vp-thuispin.is-dim { opacity: .45; }
.vp-thuispin { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; color: var(--adv-kleur); border: 2px solid var(--adv-kleur); font-size: .8rem; }
.vp-pin--adv { background: var(--c-ink-3); }

/* VP16 · het kaartvak heeft een vaste, schermgebonden hoogte — anders groeit
   de kaart mee met de lange planvoorraad links (2500 px hoog) en ligt de
   routelijst nergens; de lijst hangt absoluut in het vak */
.vp-kaartvak { flex: 0 0 auto; height: clamp(420px, calc(100vh - 260px), 760px); }

/* VP19 · het plangesprek: het script in de volgorde van het gesprek */
.vp-vlak.is-breed { grid-template-columns: minmax(0, 1fr); }
.vp-g { padding: 14px 22px 40px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.vp-g--leeg { align-items: center; justify-content: center; min-height: 240px; }
.vp-g__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.vp-g__kop h2 { margin: 2px 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.vp-g__kop p { margin: 0; font-size: .78rem; color: var(--c-ink-2); }
.vp-g__acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vp-g__stap { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 14px 12px; background: #fff; }
.vp-g__stap h3 { margin: 0 0 8px; font-size: .84rem; display: flex; align-items: center; gap: 8px; }
.vp-g__stap h3 .mono { width: 22px; height: 22px; border-radius: 50%; background: var(--c-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; }
.vp-g__extra { margin-left: auto; }
.vp-g__vraag { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; gap: 6px 14px; align-items: center; padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.vp-g__vraag:first-of-type { border-top: 0; }
.vp-g__tekst { font-size: .8rem; font-weight: 600; }
.vp-g__tekst b { color: var(--stop); }
.vp-g__veld input[type=text], .vp-g__veld input[type=date], .vp-g__veld select { font: inherit; font-size: .8rem; padding: 6px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; width: 100%; max-width: 420px; }
.vp-g__veld input:focus-visible, .vp-g__veld select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.vp-g__janee, .vp-g__meer { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; }
.vp-g__janee label, .vp-g__meer label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.vp-g__mee { font-size: .68rem; color: var(--c-ink-3); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; cursor: pointer; }
.vp-g__mee input { accent-color: var(--accent); }
.vp-g__hint { grid-column: 2 / 4; font-size: .68rem; color: var(--c-ink-3); font-style: italic; }
.vp-g__besl { display: flex; flex-direction: column; gap: 8px; }
.vp-g__vorm { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .76rem; }
.vp-g__vorm.is-dicht { display: none; }
.vp-g__vorm em { font-size: .68rem; color: var(--c-ink-3); }
.vp-g__moment { display: inline-flex; gap: 4px; align-items: center; }
.vp-g__moment .mono { font-size: .64rem; color: var(--c-ink-3); }
.vp-g__moment input, .vp-g__moment select, .vp-g__vorm select { font: inherit; font-size: .76rem; padding: 4px 7px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; }
.vp-g__wacht { background: var(--let-t); color: var(--let); border-radius: 8px; padding: 8px 12px; font-size: .78rem; margin: 0 0 8px; }
.vp-g__sub { font-size: .74rem; color: var(--c-ink-2); margin: 0 0 8px; }
.vp-g__rij { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.vp-g__rij .bs-veld { min-width: 140px; }
.vp-g .vp-optie { margin-bottom: 6px; }
.vp-g__woning { margin: 2px 0; }
.vp-g .vp-bevestig { position: static; margin: 0 0 8px; }

/* FM1 · deurantwoorden en foto's in het gesprek (intern) */
.vp-g__deur { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 8px 10px; background: var(--c-paneel-2); border-radius: 8px; font-size: .74rem; }
.vp-g__deur b { font-weight: 600; color: var(--c-ink-2); }
.vp-g__deur em { color: var(--c-ink-3); font-style: normal; font-size: .66rem; }
.vp-g__fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.vp-g__fotos img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: var(--lijndikte) solid var(--c-lijn); }


/* VA5 · niet thuis: het blok boven het dagbord */
.vp-nt { margin: 0 0 12px; padding: 12px 16px; display: grid; gap: 6px; border-left: 3px solid var(--let); }
.vp-ntrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.vp-ntrij.is-let { border-left: 3px solid var(--stop); padding-left: 10px; }
.vp-ntknoppen { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* ── planwensen.css ── */
/* planwensen.css — VP11 · de twee planner-schermen naast het bord.
   Geen kleurliteral: alles uit casa360-stijl.css. */

.pw-kop { margin-bottom: 18px; }
.pw-kop h1 { margin: 2px 0 6px; }
.pw-kop p { max-width: 76ch; color: var(--ink2); margin: 0; }

.pw-rij { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 90px auto;
  gap: 14px; align-items: center; padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--lijn); }
.pw-rij:last-child { border-bottom: 0; }
.pw-rij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
/* Kleur alleen waar hij betekenis draagt: een wens die binnen twee dagen
   valt en nog niet vastligt. De rest is inkt op paneel. */
.pw-rij.is-dringend { border-left: 3px solid var(--let); }
.pw-wie { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-wie b { font-weight: 700; }
.pw-wie em { font-style: normal; font-size: .78rem; color: var(--ink2); }
.pw-bron { font-size: .72rem !important; color: var(--ink3) !important; }
.pw-momenten, .pw-profiel { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.pw-m { font-size: .72rem; border: var(--lijndikte) solid var(--lijn2);
  border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.pw-waarde { text-align: right; font-size: .8rem; color: var(--ink2); }
.pw-acties { display: flex; justify-content: flex-end; }
.pw-voet { margin-top: 14px; font-size: .8rem; color: var(--ink2); max-width: 82ch; }

@media (max-width: 900px) {
  .pw-rij { grid-template-columns: minmax(0, 1fr); }
  .pw-waarde, .pw-acties { justify-content: flex-start; text-align: left; }
}

/* VP16 · de kaartpin-foto in de adviseurslijst */
.pw-foto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; }

/* VP19 · gespreksvragen-editor */
.pw-vragen .pw-rij { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto auto; align-items: start; }
.pw-inp { font: inherit; font-size: .78rem; padding: 5px 8px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; width: 100%; margin-bottom: 4px; }
.pw-inp--klein { max-width: 160px; font-size: .68rem; }
.pw-inp:focus-visible, .pw-vraag select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.pw-vraag select { font: inherit; font-size: .74rem; padding: 4px 6px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; margin: 0 4px 4px 0; }
.pw-vink { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; }
.pw-vink label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.pw-voet--acties { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* FM2 · postwachtrij (deelt de lijstvorm van planwensen) */
.pq-rij { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.5fr) auto; }
.pw-h3 { font-size: .9rem; margin: 18px 0 6px; }

/* ── sop.css ── */
/* =====================================================================
   sop.css — Module 2.8 (deel 1) · S&OP. Integraal planningsbord,
   forecast, capaciteit vs. vraag, afgeleide behoefte en checklist-
   beheer. Uitsluitend tokens; losse gradients per module toegestaan
   (aanvulling 14-07-2026) mits token-kleuren.
===================================================================== */

.sop { max-width: 1280px; margin: 0 auto; padding: 26px 32px 72px; }
.sop-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sop-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.sop-kop__sub { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 56ch; }
.sop-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sop-tab { font: 700 .74rem var(--font-ui); padding: 8px 13px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); cursor: pointer; transition: background var(--overgang), color var(--overgang); }
.sop-tab:hover { background: var(--c-creme); }
.sop-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.sop-regiorij { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.sop-chip { padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer; font: 600 .74rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); transition: background var(--overgang); }
.sop-chip:hover { background: var(--c-creme); }
.sop-chip.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: #fff; }
.sop-chip--klein { padding: 5px 11px; font-size: .68rem; }
.sop-regelvoet { margin-top: 14px; font-size: .62rem; color: var(--c-ink-3); }
.sop-hint { font-size: .74rem; color: var(--c-ink-3); margin: 12px 0 0; }
.sop-intro { font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; margin: 0 0 14px; line-height: 1.5; }
.sop-sectiekop { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); margin: 24px 0 10px; }
.sop-sectiekop:first-child { margin-top: 0; }

/* signaal-/adviesstrook */
.sop-signaal { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 12px; margin-bottom: 16px; border: var(--lijndikte) solid; font: 600 .78rem var(--font-ui); color: var(--c-ink); }
.sop-signaal > i { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.sop-signaal > span { flex: 1; }
.sop-signaal__knop { font: 700 .7rem var(--font-ui); color: #fff; border: none; border-radius: 7px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }

/* scenario what-if */
.sop-scenario { padding: 16px 20px; margin-bottom: 18px; }
.sop-scenario__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sop-scenbadge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 7px; }
.sop-scenario__rek { flex: 1; }
.sop-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.sop-slider label { display: flex; justify-content: space-between; font: 600 .76rem var(--font-ui); color: var(--c-ink); margin-bottom: 6px; }
.sop-slider input[type="range"] { width: 100%; }
.sop-scenario__voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.sop-scenario__acties { display: flex; gap: 8px; align-items: center; }
.sop-vastlabel { display: inline-flex; align-items: center; gap: 6px; font: 700 .72rem var(--font-ui); color: var(--c-groen-d); }
.sop-vastlabel i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--c-groen); }

/* integraal bord */
.sop-bord { padding: 6px 6px 10px; overflow-x: auto; }
.sop-bord__scroll { display: flex; gap: 0; min-width: 840px; }
.sop-bord__labels { flex: none; width: 200px; position: sticky; left: 0; z-index: 2; background: #fff; padding: 6px 10px 0; }
.sop-bord__labelkop { height: 62px; }
.sop-bord__laag { display: flex; align-items: center; gap: 7px; font: 600 .74rem var(--font-ui); color: var(--c-ink); height: 56px; }
.sop-bord__laag.is-stil { color: var(--c-ink-3); }
.sop-bord__laag .mono { color: var(--c-ink-3); width: 16px; text-align: center; }
.sop-bord__kolom { flex: 1; min-width: 78px; padding: 6px 4px 0; border-left: var(--lijndikte) solid var(--c-lijn); }
.sop-bord__kolomkop { text-align: center; padding: 9px 6px; border-radius: 9px 9px 0 0; border-bottom: 2px solid; }
.sop-bord__kolomkop i { display: block; width: 7px; height: 7px; border-radius: var(--radius-pill); margin: 0 auto 4px; }
.sop-bord__kolomkop strong { display: block; font-size: .74rem; }
.sop-bord__kolomkop span { display: block; font: 500 .56rem var(--font-ui); color: var(--c-ink-3); }
.sop-bord__status { margin-top: 2px; font-size: .54rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sop-bord__cel { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sop-bord__cel:last-child { border-bottom: none; }
.sop-bord__waarde { min-width: 0; }
.sop-bord__waarde strong { display: block; font-size: .84rem; }
.sop-bord__waarde span { font: 600 .54rem var(--font-ui); white-space: nowrap; }
.sop-bord__cel > i { width: 7px; flex: none; border-radius: var(--radius-pill); align-self: flex-end; margin-bottom: 9px; }

.sop-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); }
.sop-legenda span { display: flex; align-items: center; gap: 6px; }
.sop-legenda i { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.sop-legenda__streep { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed var(--c-groen-d); }
.sop-legenda__lijn { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px solid var(--c-groen); }
.sop-legenda__stil { color: var(--c-ink-3); }

/* tabellen (forecast / rolling / materiaal / checklist) */
.sop-tabel { overflow: hidden; }
.sop-rij { display: grid; gap: 10px; padding: 13px 20px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.sop-rij--kop { background: var(--c-paneel); border-top: none; padding: 11px 20px; }
.sop-rij--fc { grid-template-columns: 1.6fr .8fr .8fr 2fr .8fr; }
.sop-rij--roll { grid-template-columns: .8fr .9fr .9fr 2fr .8fr; }
.sop-rij--mat { grid-template-columns: 1.6fr .9fr .8fr .8fr 1.4fr; }
.sop-rij--cl { grid-template-columns: 1fr auto auto; }
.sop-rij__naam { font: 600 .8rem var(--font-ui); }
.sop-rij__sku { display: block; font-size: .6rem; color: var(--c-ink-3); }
.sop-rij__verwacht { text-align: right; font-size: .92rem; color: var(--c-groen-d); }
.sop-rij__stil { color: var(--c-ink-3); }
.sop-rij__actie { text-align: right; }
.sop-fcbalk { display: block; height: 9px; border-radius: var(--radius-pill); background: var(--c-groen-d); }
.sop-fctotaal { display: inline-flex; flex-direction: column; background: var(--c-groen-d); border-radius: 12px; padding: 15px 20px; color: #fff; margin-bottom: 18px; }
.sop-fctotaal strong { font-size: 1.6rem; }
.sop-fctotaal span { font: 600 .7rem var(--font-ui); opacity: .85; }
.sop-rollbalk { position: relative; height: 7px; }
.sop-rollbalk i { position: absolute; top: 0; left: 0; height: 7px; border-radius: var(--radius-pill); display: block; }
.sop-rollbalk__p { width: 100%; background: var(--c-groen-t); }
.sop-rollbalk__w { background: var(--c-groen-d); }

/* capaciteit-grafieken */
.sop-grafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.sop-grafiek { padding: 18px 20px; }
.sop-grafiek strong { font-size: .88rem; }
.sop-grafiek__sub { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 14px; }
.sop-grafiek svg { width: 100%; height: 180px; }
.sop-grafiek__labels { display: flex; justify-content: space-between; font-size: .56rem; color: var(--c-ink-3); margin-top: 4px; }

/* afgeleide behoefte · personeel */
.sop-pers { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sop-pers__cijfers { display: flex; gap: 28px; flex-wrap: wrap; }
.sop-pers__cijfers strong { display: block; font-size: 1.4rem; }
.sop-pers__cijfers span { font: 600 .7rem var(--font-ui); color: var(--c-ink-3); }
.sop-pers__actie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 .78rem var(--font-ui); }

/* checklist-beheer */
.sop-versie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sop-versiechip { font-weight: 700; font-size: .74rem; color: var(--c-groen-d); background: var(--c-groen-t); padding: 4px 11px; border-radius: var(--radius-pill); }
.sop-versie__meta { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.sop-cl-nieuw { padding: 16px 18px; margin-bottom: 16px; }
.sop-cl-nieuw > strong { display: block; font-size: .8rem; margin-bottom: 10px; }
.sop-cl-nieuw__scopes { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.sop-cl-nieuw__rij { display: flex; gap: 9px; align-items: flex-end; }
.sop-cl-nieuw__veld { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sop-cl-nieuw__veld input { padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .8rem var(--font-ui); color: var(--c-ink); background: #fff; }
.sop-scopechip { font: 700 .58rem var(--font-ui); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.sop-verwijder { padding: 6px 11px; border-radius: 8px; border: var(--lijndikte) solid var(--c-rood); background: var(--c-rood-t); color: var(--c-rood); font: 600 .68rem var(--font-ui); cursor: pointer; }

/* Capaciteit-heatmap (C1a) */
.sop-hm { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-bottom: 14px; }
.sop-hm__rij { display: grid; grid-template-columns: 80px repeat(8, 1fr); gap: 5px; align-items: center; }
.sop-hm__rij--kop { color: var(--c-ink-2); font-size: 10.5px; }
.sop-hm__wk { text-align: center; }
.sop-hm__regio { font-size: 12.5px; font-weight: 600; }
.sop-hm__cel { border: 0; border-radius: 8px; padding: 8px 0; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--c-ink); }
.sop-hm__cel--groen { background: color-mix(in srgb, var(--c-groen) 30%, var(--c-paneel)); }
.sop-hm__cel--amber { background: color-mix(in srgb, var(--c-amber) 38%, var(--c-paneel)); }
.sop-hm__cel--rood { background: color-mix(in srgb, var(--c-rood) 30%, var(--c-paneel)); font-weight: 700; }

/* Live pijplijn-voeding (uitbreiding 7) */
.sop-fcbalk.is-knel { background: var(--c-terra); }
.sop-sub { font: 400 11.5px var(--font-ui); color: var(--c-ink-3); margin: 10px 2px 0; }

/* ── veldapps.css ── */
/* =====================================================================
   veldapps.css — Module 2.10 · Veld-apps. Telefoonframes voor de
   adviseur-app (Casa360) en uitvoerder-app (Casa365). Tokens only;
   losse gradients per module toegestaan (aanvulling 14-07-2026).
===================================================================== */

.va { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.va-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.va-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.va-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 56ch; }
.va-tabs { display: flex; gap: 6px; }
.va-tab { font: 700 .76rem var(--font-ui); padding: 8px 14px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); cursor: pointer; }
.va-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.va-groen { color: var(--c-groen-d); }
.va-bag { font-size: .62rem; color: var(--c-ink-3); }

.va-splitsing { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.va-splitsing--uitv { grid-template-columns: 420px minmax(0, 1fr); }
@media (max-width: 1000px) { .va-splitsing, .va-splitsing--uitv { grid-template-columns: 1fr; } }
.va-splitsing > div > .kicker { display: block; margin-bottom: 8px; }

/* ---------- telefoonframe ---------- */
.va-telefoon { border-radius: 32px; background: var(--c-ink); padding: 12px; }
.va-telefoon--uitv { border-radius: 38px; position: sticky; top: 16px; }
.va-scherm { border-radius: 24px; overflow: hidden; background: var(--c-creme); }
.va-scherm--uitv { border-radius: 28px; display: flex; flex-direction: column; height: 720px; }

/* adviseur-app */
.va-appkop { padding: 16px 16px 15px; color: #fff; }
.va-appkop__rij { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.va-wordmark { font: 700 .8rem var(--font-ui); }
.va-wordmark em { font-style: normal; opacity: .7; }
.va-365 { color: var(--c-terra-t); opacity: 1 !important; }
.va-appkop__rij .mono { font-size: .56rem; opacity: .6; }

/* B11 · PWA: meldingen-vlag + outbox-chip in de app-kop */
.va-appkop__rechts { display: flex; align-items: center; gap: 8px; }
.va-belknop { position: relative; background: color-mix(in srgb, #fff 14%, transparent); border: 1px solid color-mix(in srgb, #fff 22%, transparent); color: #fff; border-radius: 99px; padding: 3px 9px; font-size: .68rem; cursor: pointer; }
.va-belknop.is-nieuw { background: color-mix(in srgb, #fff 26%, transparent); }
.va-belknop__tel { margin-left: 5px; font-size: .58rem; font-weight: 800; }
.va-outboxchip { font-size: .58rem; opacity: .85; border: 1px solid color-mix(in srgb, #fff 30%, transparent); border-radius: 99px; padding: 2px 7px; }

/* B12 · identiteits-chip: demo-naam vs aangemelde sessie */
.va-idchip { background: transparent; border: 1px dashed color-mix(in srgb, #fff 40%, transparent); color: #fff; border-radius: 99px; padding: 3px 9px; font: 600 .58rem var(--font-ui); cursor: pointer; opacity: .85; }
.va-idchip.is-aangemeld { border-style: solid; background: color-mix(in srgb, #fff 18%, transparent); opacity: 1; }
.va-meldingen { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin: 10px 0; }
.va-melding { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; background: var(--c-creme); }
.va-melding.is-nieuw { border-color: var(--c-groen); background: var(--c-groen-t); }
.va-melding__glyph { font-size: .8rem; color: var(--c-groen-d); margin-top: 1px; }
.va-melding div { display: flex; flex-direction: column; gap: 2px; }
.va-melding strong { font-size: .74rem; }
.va-melding span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.va-melding em { font-style: normal; font-size: .56rem; color: var(--c-ink-3); }
.va-appkop > strong { display: block; font-size: 1rem; }
.va-appkop > span { font: 500 .66rem var(--font-ui); opacity: .75; }
.va-appkop__stats { display: flex; gap: 8px; margin-top: 12px; }
.va-appkop__stats > div { flex: 1; background: color-mix(in srgb, #fff 14%, transparent); border-radius: 10px; padding: 8px 10px; }
.va-appkop__stats strong { display: block; font-size: .84rem; }
.va-appkop__stats span { font: 500 .56rem var(--font-ui); opacity: .7; }
.va-appbody { padding: 13px 13px 16px; }
.va-dagrij { display: flex; gap: 5px; margin-bottom: 8px; }
.va-dagchip { flex: 1; padding: 7px 0; border-radius: 9px; text-align: center; font: 600 .68rem var(--font-ui); cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.va-dagchip.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.va-afspraken { display: flex; flex-direction: column; gap: 9px; }
.va-afspraken .bs-leeg-rij { border-top: none; background: #fff; border-radius: 12px; }
.va-afspraak { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-groen); background: #fff; cursor: pointer; font-family: var(--font-ui); }
.va-afspraak.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); border-left-width: 3px; }
.va-afspraak__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.va-afspraak__kop strong { font-size: .8rem; }
.va-afspraak__kop em { font: 500 .58rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-left: 6px; }
.va-afspraak > strong { font-size: .8rem; }
.va-afspraak__adres { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-afspraak__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 .6rem var(--font-ui); margin-top: 3px; }
.va-afspraak__meta .mono { background: var(--c-paneel); border-radius: 6px; padding: 2px 6px; }
.va-subsidie { color: var(--c-amber) !important; background: var(--c-amber-t) !important; }
.va-partner { color: var(--c-ink-2); background: var(--c-paneel); border-radius: 6px; padding: 2px 6px; }
.va-adviseurs { display: flex; gap: 8px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.va-advchip { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 700 .74rem var(--font-ui); color: #fff; cursor: pointer; border: none; opacity: .4; }
.va-advchip.is-actief { opacity: 1; outline: 3px solid var(--c-groen); outline-offset: 2px; }

.va-detail { overflow: hidden; }
.va-detail__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px 0; }
.va-detail__kop strong { display: block; font-size: 1.02rem; }
.va-detail__kop span:not(.chip) { font: 500 .74rem var(--font-ui); color: var(--c-ink-3); }
.va-detail__chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.va-detail__chips > span { font: 600 .68rem var(--font-ui); background: var(--c-creme); border-radius: 8px; padding: 5px 10px; }
.va-detail__body { padding: 18px 20px; }
.va-detail__body > .kicker { display: block; margin-bottom: 11px; }
.va-statusgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
@media (max-width: 800px) { .va-statusgrid { grid-template-columns: 1fr 1fr; } }
.va-statusknop { padding: 9px 11px; border-radius: 10px; font: 600 .7rem var(--font-ui); cursor: pointer; text-align: left; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.va-statusknop:hover { background: var(--c-creme); }
.va-statusknop.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; }
.va-notitie { margin-top: 16px; padding: 13px 15px; border-radius: 12px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); font: 500 .72rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.va-leeg { padding: 40px 30px; border-radius: var(--radius); border: 1.5px dashed var(--c-lijn-2); background: var(--c-creme); text-align: center; font: 500 .8rem/1.5 var(--font-ui); color: var(--c-ink-3); }

/* ---------- uitvoerder-app ---------- */
.va-uakop { background: var(--c-ink); color: #fff; padding: 16px 18px 14px; flex: none; }
.va-net { font: 700 .56rem var(--font-mono); padding: 4px 9px; border-radius: var(--radius-pill); cursor: pointer; border: none; background: color-mix(in srgb, var(--c-groen) 28%, transparent); color: var(--c-groen-t); }
.va-net.is-offline { background: var(--c-terra); color: #fff; }
.va-uakop__wie { display: flex; align-items: center; gap: 11px; }
.va-uakop__wie i { width: 40px; height: 40px; border-radius: 12px; background: var(--c-terra); display: grid; place-items: center; font: 800 .78rem var(--font-ui); font-style: normal; color: #fff; flex: none; }
.va-uakop__wie strong { display: block; font-size: .88rem; }
.va-uakop__wie span { font: 500 .62rem var(--font-ui); opacity: .55; }
.va-uabody { flex: 1; overflow-y: auto; padding: 15px 15px 18px; }
.va-uabody > .kicker { display: block; margin: 4px 0 7px; }
.va-uatabs { flex: none; display: flex; background: var(--c-ink); padding: 6px 4px 8px; }
.va-uatab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; cursor: pointer; background: none; border: none; color: color-mix(in srgb, #fff 42%, transparent); }
.va-uatab.is-actief { color: #fff; }
.va-uatab .mono { font-size: .84rem; line-height: 1; }
.va-uatab span:last-child { font: 500 .54rem var(--font-ui); letter-spacing: .02em; }
.va-uatab.is-actief span:last-child { font-weight: 700; }

.va-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 13px; background: var(--c-ink); color: #fff; margin-bottom: 13px; }
.va-route strong { display: block; font-size: .76rem; }
.va-route span { font: 500 .6rem var(--font-ui); opacity: .6; }
.va-route em { font-style: normal; font-size: .58rem; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: var(--c-terra); color: #fff; }
.va-kluslijst { display: flex; flex-direction: column; gap: 9px; }
.va-klus { border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; overflow: hidden; background: #fff; }
.va-klus__kop { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer; border: none; background: var(--c-creme); text-align: left; font-family: var(--font-ui); }
.va-klus__kop.is-open { background: #fff; }
.va-klus__kop > strong { font-size: .78rem; width: 44px; flex: none; }
.va-klus__kop i { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: none; }
.va-klus__wie { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.va-klus__wie strong { font-size: .76rem; }
.va-klus__wie span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.va-klus__kop em { font-style: normal; font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.va-klus__detail { padding: 0 13px 13px; }
.va-klus__velden { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; }
.va-klus__velden > div { display: flex; justify-content: space-between; gap: 10px; font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.va-klus__velden strong { color: var(--c-ink); text-align: right; font-weight: 600; }
.va-klus__detail .kicker { display: block; margin-bottom: 6px; }
.va-mat { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.va-mat span { font: 600 .6rem var(--font-ui); padding: 4px 9px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); }
.va-oranje { width: 100%; padding: 11px; border: none; border-radius: 11px; background: var(--c-terra); color: #fff; font: 700 .74rem var(--font-ui); cursor: pointer; }

.va-wbtitel { font: 700 .7rem var(--font-ui); margin-bottom: 9px; }
.va-stappen { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.va-stap { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); background: #fff; text-align: left; font-family: var(--font-ui); }
.va-stap i { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .68rem; font-style: normal; background: var(--c-paneel); color: var(--c-ink-3); }
.va-stap span { font: 600 .76rem var(--font-ui); color: var(--c-ink-2); }
.va-stap.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.va-stap.is-actief i { background: var(--c-terra); color: #fff; }
.va-stap.is-actief span { color: var(--c-ink); font-weight: 700; }
.va-stap.is-klaar { background: var(--c-groen-t); }
.va-stap.is-klaar i { background: var(--c-groen); color: #fff; }
.va-stap.is-klaar span { color: var(--c-groen-d); }
.va-stapkaart { border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; padding: 14px; background: #fff; margin-bottom: 13px; }
.va-stapkaart > strong { display: block; font-size: .72rem; margin-bottom: 3px; }
.va-stapkaart > span { display: block; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 11px; }
.va-scan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--c-groen-t); margin-bottom: 7px; }
.va-scan strong { display: block; font-size: .68rem; }
.va-scan .mono { font-size: .56rem; color: var(--c-groen-d); }
.va-scan em { font-style: normal; font-weight: 700; color: var(--c-groen); }
.va-scanknop { width: 100%; padding: 12px; border: 1.5px dashed var(--c-terra); border-radius: 11px; background: var(--c-terra-t); color: var(--c-terra-d); font: 700 .7rem var(--font-ui); cursor: pointer; }
.va-scanklaar { text-align: center; padding: 10px; font: 600 .66rem var(--font-ui); color: var(--c-groen-d); }
.va-fotos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.va-foto { aspect-ratio: 1; border-radius: 9px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-lijn); position: relative; }
.va-foto em { position: absolute; top: 4px; left: 4px; font: 600 .5rem var(--font-mono); font-style: normal; text-transform: uppercase; color: #fff; background: color-mix(in srgb, var(--c-ink) 55%, transparent); padding: 2px 4px; border-radius: 4px; }
.va-foto--leeg { background: none; border: 1.5px dashed var(--c-terra); display: grid; place-items: center; color: var(--c-terra); opacity: .6; }
.va-checkrij { display: flex; align-items: center; gap: 9px; font: 600 .7rem var(--font-ui); color: var(--c-groen-d); margin-top: 7px; }
.va-checkrij i { width: 19px; height: 19px; border-radius: 6px; background: var(--c-groen); display: grid; place-items: center; color: #fff; font-size: .6rem; font-style: normal; }
.va-handtekening { border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; padding: 14px; text-align: center; }
.va-handtekening em { font-size: 1.25rem; transform: rotate(-4deg); display: inline-block; }
.va-handtekening span { display: block; font: 500 .56rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; }
.va-afwrij { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.va-afwchip { padding: 7px 11px; border-radius: 9px; cursor: pointer; font: 600 .64rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.va-afwchip.is-actief { font-weight: 700; }
.va-afwmelding { border-radius: 11px; padding: 11px 13px; margin-bottom: 12px; border: var(--lijndikte) solid var(--c-terra); background: #fff; }
.va-afwmelding strong { display: block; font-size: .66rem; margin-bottom: 3px; }
.va-afwmelding span { font: 500 .62rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.va-indienen { width: 100%; padding: 13px; border: none; border-radius: 12px; font: 700 .78rem var(--font-ui); cursor: pointer; background: var(--c-terra); color: #fff; }
.va-indienen.is-uit { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }

.va-verdkop { border-radius: 15px; padding: 16px 17px; background: var(--c-ink); color: #fff; margin-bottom: 14px; }
.va-verdkop .kicker { color: color-mix(in srgb, #fff 55%, transparent); display: block; margin-bottom: 8px; }
.va-verdkop > strong { display: block; font-size: 1.6rem; color: var(--c-terra-t); }
.va-verdkop > span { font: 500 .66rem var(--font-ui); opacity: .65; }
.va-verdkop__duo { display: flex; gap: 9px; margin-top: 14px; }
.va-verdkop__duo > div { flex: 1; padding: 10px 11px; border-radius: 11px; background: color-mix(in srgb, #fff 7%, transparent); }
.va-verdkop__duo strong { display: block; font-size: .84rem; }
.va-verdkop__duo span { font: 500 .54rem var(--font-ui); opacity: .55; }
.va-verdiensten { display: flex; flex-direction: column; gap: 7px; }
.va-verdienste { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; }
.va-verdienste > i { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; }
.va-verdienste > div:first-of-type { flex: 1; min-width: 0; }
.va-verdienste strong { display: block; font-size: .72rem; }
.va-verdienste strong .mono { font-size: .6rem; font-weight: 500; color: var(--c-ink-3); }
.va-verdienste > div:first-of-type > span { font: 600 .6rem var(--font-ui); }
.va-verdienste__bedrag { text-align: right; }
.va-verdienste__bedrag strong { font-size: .8rem; }
.va-verdienste__bedrag span { font: 500 .54rem var(--font-ui); color: var(--c-ink-3); }
.va-voetnoot { margin: 12px 0 0; font: 500 .6rem/1.5 var(--font-ui); color: var(--c-ink-3); text-align: center; }

.va-chat { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.va-bericht { display: flex; justify-content: flex-start; }
.va-bericht.is-mijn { justify-content: flex-end; }
.va-bericht > div { max-width: 78%; padding: 9px 12px; border-radius: 13px 13px 13px 4px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); }
.va-bericht.is-mijn > div { border-radius: 13px 13px 4px 13px; background: var(--c-terra-t); border-color: var(--c-terra); }
.va-bericht span { display: block; font: 600 .5rem var(--font-mono); color: var(--c-ink-3); margin-bottom: 3px; }
.va-bericht p { margin: 0; font: 500 .7rem/1.45 var(--font-ui); }
.va-supportacties { display: flex; gap: 6px; margin-bottom: 10px; }
.va-supportacties button { flex: 1; padding: 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: #fff; font: 700 .62rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.va-chatrij { display: flex; gap: 7px; align-items: flex-end; }
.va-chatveld { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.va-chatveld input { padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 11px; font: 500 .7rem var(--font-ui); background: #fff; color: var(--c-ink); }
.va-stuur { width: auto; padding: 11px 15px; }

.va-score { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 13px; }
.va-scorering { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.va-scorering svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.va-scorering circle { fill: none; stroke-width: 6; }
.va-scorering__spoor { stroke: var(--c-amber-t); }
.va-scorering__waarde { stroke: var(--c-amber); stroke-linecap: round; }
.va-scorering em { font-style: normal; font-weight: 800; font-size: .95rem; color: var(--c-amber); }
.va-score strong { display: block; font-size: .78rem; }
.va-score span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.va-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.va-badge { flex: 1; min-width: 120px; border: var(--lijndikte) solid; border-radius: 12px; padding: 12px; background: #fff; }
.va-badge.is-uit { opacity: .55; }
.va-badge i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .84rem; font-style: normal; background: var(--c-creme); }
.va-badge strong { display: block; font-size: .66rem; margin-top: 7px; }
.va-badge span { font: 500 .54rem var(--font-ui); color: var(--c-ink-3); }
.va-reviews { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.va-review { border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 11px 12px; background: #fff; }
.va-sterren { font: 600 .62rem var(--font-ui); color: var(--c-amber); display: block; margin-bottom: 4px; }
.va-review p { margin: 0; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.va-review em { font: 500 .56rem var(--font-ui); font-style: normal; color: var(--c-ink-3); display: block; margin-top: 5px; }
.va-certs { display: flex; flex-direction: column; gap: 6px; }
.va-cert { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; }
.va-cert i { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; }
.va-cert strong { flex: 1; font-size: .68rem; }
.va-cert span { font: 600 .58rem var(--font-ui); }
.va-kennis { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.va-kennis button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; cursor: pointer; font-family: var(--font-ui); text-align: left; }
.va-kennis span { font: 600 .68rem var(--font-ui); }
.va-kennis em { font-style: normal; color: var(--c-terra); font-weight: 600; }

/* context-paneel rechts van de uitvoerder-app */
.va-uitleg { padding: 22px 24px; margin-bottom: 16px; }
.va-uitleg h2 { margin: 8px 0; font-size: 1.3rem; letter-spacing: -.01em; }
.va-uitleg p { margin: 0; font: 400 .84rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 62ch; }
.va-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 800px) { .va-features { grid-template-columns: 1fr; } }
.va-features .kaart { padding: 16px 18px; }
.va-features strong { display: block; font-size: .8rem; margin-bottom: 5px; }
.va-features p { margin: 0; font: 400 .74rem/1.5 var(--font-ui); color: var(--c-ink-2); }

/* 4.5 · live provisiestatus in de adviseur-app */
.va-provisie { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, #fff 14%, transparent);
  font-size: .6rem; color: #fff; }

/* B9 · ESS-paneel + afrond-editor */
.va-ess { margin-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 8px; }
.va-esstabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.va-essinhoud { display: flex; flex-direction: column; gap: 4px; }
.va-essprov { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px; }
.va-essprov strong { font-size: 1.15rem; color: var(--c-groen-d); }
.va-essprov span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.va-essrij { display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 5px 2px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .64rem var(--font-ui); }
.va-essrij:last-of-type { border-bottom: 0; }
.va-essrij .is-rood { color: var(--c-rood); }
.va-essrij--blok { flex-direction: column; align-items: flex-start; gap: 2px; }
.va-b9editor { padding: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.va-b9rij { display: grid; grid-template-columns: 1fr 70px 76px 90px 26px; gap: 6px; align-items: center; }
.va-b9rij input, .va-b9rij select { font: 500 .68rem var(--font-ui); padding: 7px 8px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); color: var(--c-ink); }

/* B9b · fieldmarketeer-app: wijkkaart, looplijst en het klant-plan-scherm */
.va-kaartje { border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--c-paneel); }
.va-stippen { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0 4px; }
.va-stip { width: 14px; height: 14px; border-radius: 50%; background: var(--c-ink-3); display: inline-block; }
.va-stip.is-afspraak { background: var(--c-groen-d); }
.va-stip.is-niet-thuis { background: var(--c-amber); }
.va-stip.is-geen-interesse { background: var(--c-rood); }
.va-kaartje__legenda { font: 500 .58rem var(--font-ui); color: var(--c-ink-3); }
.va-kaartje__legenda .is-groen { color: var(--c-groen-d); font-style: normal; }
.va-kaartje__legenda .is-amber { color: var(--c-amber); font-style: normal; }
.va-kaartje__legenda .is-rood { color: var(--c-rood); font-style: normal; }
.va-looprij { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 9px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 6px; background: var(--c-vlak); }
.va-looprij.is-klaar { opacity: .72; }
.va-looprij > div { display: flex; flex-direction: column; }
.va-looprij > div strong { font: 600 .7rem var(--font-ui); }
.va-looprij > div span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.va-loopacties { display: flex; gap: 4px; flex-wrap: wrap; }
.va-plandagen { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.va-plandag strong { font: 600 .72rem var(--font-ui); }
.va-planslots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.va-planslot { font: 600 .7rem var(--font-mono); padding: 8px 12px; border-radius: 99px;
  border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel); color: var(--c-ink); cursor: pointer; }
.va-planslot.is-actief { background: var(--c-groen-d); color: var(--c-paneel); border-color: var(--c-groen-d); }
.va-planwie { padding: 8px 0; }
.va-planwie p { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); margin: 4px 0 2px; }

/* ---------- Keukentafel: uitvoerdatum toezeggen (Planning 2.0) ---------- */
.va-keukentafel { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 14px; margin-top: 4px; }
.va-keukentafel p { margin: 6px 0 10px; font: 400 .74rem/1.55 var(--font-ui); color: var(--c-ink-3); }
.va-statusknop--primair { background: var(--c-groen); color: #fff; border-color: var(--c-groen); }
.va-statusknop--primair:hover { background: var(--c-groen-d); }

/* ═══ Afrond-wizard verkoper-veldapp (prototype v3) ═══ */
.vw{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow-y:auto;padding-right:4px}
.vw h3{margin:0;font-size:15px;display:flex;align-items:center;gap:8px}
.vw-sub{font-size:12px;color:var(--c-ink-2);margin:0}
.vw-kop{display:flex;flex-direction:column;gap:6px}
.vw-dots{display:flex;gap:6px}
.vw-dots i{flex:1;height:4px;border-radius:99px;background:var(--c-paneel)}
.vw-dots i.is-af{background:var(--c-groen-t)}
.vw-dots i.is-nu{background:var(--c-groen)}
.vw-blok{background:#fff;border:1px solid var(--c-lijn);border-radius:var(--radius);padding:11px 13px}
.vw-blok .kicker{display:block;margin-bottom:7px}
.vw-chips{display:flex;flex-wrap:wrap;gap:6px}
.vw-chip{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:99px;padding:6px 12px;font:600 12px var(--font-ui);color:var(--c-ink-2);cursor:pointer}
.vw-chip.is-aan{background:var(--c-groen);border-color:var(--c-groen);color:var(--c-creme)}
.vw-veld{display:flex;flex-direction:column;gap:4px}
.vw-veld span{font-size:11px;font-weight:700}
.vw-veld input,.vw-veld select,.vw-veld textarea{border:1px solid var(--c-lijn-2);border-radius:9px;padding:8px 10px;font:500 13px var(--font-ui);background:var(--c-creme);color:var(--c-ink)}
.vw-rij2{display:flex;gap:8px}
.vw-rij2 .vw-veld{flex:1}
.vw-prod{display:grid;grid-template-columns:1fr 54px 50px 64px;gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--c-lijn);font-size:12.5px}
.vw-prod:first-of-type,.vw-prod--kop{border-top:0}
.vw-prod--kop{padding:0 0 2px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}
.vw-prod--kop span{text-align:right}
.vw-prod label{display:flex;gap:8px;align-items:center;font-weight:700;font-size:12.5px}
.vw-prod label input[type=checkbox]{width:18px;height:18px;accent-color:var(--c-groen)}
.vw-prod label input[type=text]{display:block;margin-top:4px;width:100%;border:1px solid var(--c-lijn-2);border-radius:8px;padding:5px 8px;font:500 11.5px var(--font-ui);background:var(--c-creme)}
.vw-prod input[type=number]{width:100%;border:1px solid var(--c-lijn-2);border-radius:8px;padding:7px 5px;font:700 12px var(--font-mono);background:var(--c-creme);text-align:right}
.vw-prijs{text-align:right;font-weight:700;font-size:12px}
.vw-som{border-top:2px solid var(--c-ink);margin-top:8px;padding-top:7px;font-size:12.5px}
.vw-som div{display:flex;justify-content:space-between;align-items:baseline;padding:1px 0}
.vw-tot{font-size:18px}
.vw-fiat{background:var(--c-amber-t);color:var(--c-amber);border-radius:9px;padding:7px 10px;font-size:11.5px;font-weight:600;margin-top:8px}
.vw-noot{background:var(--c-memo);border-radius:9px;padding:8px 10px;font-size:11.5px;color:var(--c-ink-2);margin-top:8px}
.vw-leeg{font-size:12px;color:var(--c-ink-3);font-style:normal}
.vw-uitvrij{padding:7px 0;border-top:1px solid var(--c-lijn)}
.vw-uitvrij:first-of-type{border-top:0;padding-top:0}
.vw-uitvrij strong{display:block;font-size:12px;margin-bottom:5px}
.vw-uitvrij strong em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--c-amber)}
.vw-uitkomst{display:flex;flex-direction:column;gap:7px}
.vw-uknop{display:flex;gap:10px;align-items:center;border:1px solid var(--c-lijn-2);border-radius:var(--radius);background:var(--c-creme);padding:10px 12px;font-weight:700;font-size:13px;text-align:left;cursor:pointer}
.vw-uknop i{font-style:normal;font-size:15px}
.vw-uknop em{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--c-ink-3)}
.vw-uknop.is-aan{border-color:var(--c-groen);background:var(--c-groen-t)}
.vw-uknop.is-rood.is-aan{border-color:var(--c-rood);background:var(--c-rood-t)}
.vw-uknop.is-stil.is-aan{border-color:var(--c-lijn-2);background:var(--c-paneel)}
.vw-fotos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vw-foto{border:1.5px dashed var(--c-lijn-2);border-radius:var(--radius);background:var(--c-creme);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:11.5px;color:var(--c-ink-2);cursor:pointer}
.vw-foto i{font-style:normal;font-size:18px;color:var(--c-groen)}
.vw-foto .mono{font-size:10.5px;color:var(--c-groen-d)}
.vw-foto.heeft{border-style:solid;border-color:var(--c-groen);background:var(--c-groen-t)}
.vw-schaal{display:flex;gap:6px}
.vw-schaal button{flex:1;border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:9px;padding:8px 0;font-weight:700;cursor:pointer}
.vw-schaal button.is-aan{background:var(--c-groen);color:var(--c-creme);border-color:var(--c-groen)}
.vw-sv{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--c-lijn);font-size:12.5px}
.vw-sv:first-of-type{border-top:0}
.vw-sv i{font-style:normal;color:var(--c-groen-d);font-weight:800}
.vw-sv em{display:block;font-style:normal;color:var(--c-ink-3);font-size:11px}
.vw-voet{display:flex;gap:8px;position:sticky;bottom:0;background:linear-gradient(transparent,#fff 35%);padding-top:10px}
.vw-voet .va-statusknop{flex:1}
.vw-cfgknop{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:8px;padding:3px 9px;font-size:13px;cursor:pointer}
.vw-visueel-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vw-vraagrij{display:grid;grid-template-columns:1.5fr 90px 1.2fr auto;gap:7px;align-items:center;padding:6px 0}
.vw-vraagrij input,.vw-vraagrij select{border:1px solid var(--c-lijn-2);border-radius:8px;padding:7px 9px;font:500 12.5px var(--font-ui);background:var(--c-creme)}
.va-afrondknop{width:100%;margin-bottom:8px}

/* ===== FM-veldapp (D2D, prototype v2) — vf-* ===== */
.vf-modus{display:flex;gap:7px;margin-bottom:10px}
.vf-modus button{flex:1;border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:99px;padding:7px 0;font:700 12px var(--font-ui);color:var(--c-ink-2);cursor:pointer}
.vf-modus button.is-aan{background:var(--c-terra-d, var(--c-terra));border-color:var(--c-terra-d, var(--c-terra));color:var(--c-creme)}
.vf-kaart{position:relative;height:225px;background:var(--c-sage-t);border:1px solid var(--c-lijn);border-radius:var(--radius);overflow:hidden;margin-bottom:6px}
.vf-kaart__bron{position:absolute;right:8px;bottom:6px;font-size:9px;color:var(--c-ink-3)}
.vf-pin{position:absolute;width:25px;height:25px;border-radius:99px;border:2px solid #fff;background:var(--c-ink-3);color:#fff;font:800 10.5px var(--font-mono);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);padding:0;cursor:pointer}
.vf-pin.is-te-bezoeken{background:var(--c-terra)}
.vf-pin.is-afspraak{background:var(--c-groen)}
.vf-pin.is-email{background:var(--c-sage)}
.vf-pin.is-niet-thuis{background:var(--c-amber)}
.vf-pin.is-retour{background:var(--c-amber)}
.vf-pin.is-geen-interesse{background:var(--c-ink-3)}
.vf-pin.is-actief{box-shadow:0 0 0 4px color-mix(in srgb, var(--c-groen) 35%, transparent)}
.vf-legenda{font-size:10px;color:var(--c-ink-3);margin:0 0 8px}
.vf-adressen{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.vf-adres{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:1px solid var(--c-lijn);background:#fff;border-radius:var(--radius);padding:9px 11px;cursor:pointer}
.vf-adres i{font-style:normal;width:10px;height:10px;border-radius:99px;flex-shrink:0;background:var(--c-ink-3)}
.vf-adres.is-te-bezoeken i{background:var(--c-terra)}
.vf-adres.is-afspraak i{background:var(--c-groen)}
.vf-adres.is-email i{background:var(--c-sage)}
.vf-adres.is-niet-thuis i,.vf-adres.is-retour i{background:var(--c-amber)}
.vf-adres div{flex:1;min-width:0}
.vf-adres strong{display:block;font-size:12.5px}
.vf-adres span{font-size:10.5px;color:var(--c-ink-3)}
.vf-hint{font-size:10.5px;color:var(--c-ink-3);margin:6px 0 8px}
.vf-terug{border:none;background:none;color:var(--c-ink-2);font:700 12px var(--font-ui);padding:0 0 8px;display:block;cursor:pointer}
.vf-blok{background:#fff;border:1px solid var(--c-lijn);border-radius:var(--radius);padding:12px 13px;margin-bottom:8px}
.vf-blok h4{margin:2px 0 10px;font-size:14.5px}
.vf-feiten{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:4px}
.vf-feiten div{background:var(--c-creme);border:1px solid var(--c-lijn);border-radius:9px;padding:7px 9px}
.vf-feiten span{display:block;font:700 9px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-3)}
.vf-feiten strong{font-size:12.5px}
.vf-feiten em{font-style:normal;font-size:9.5px;color:var(--c-ink-3)}
.vf-register{background:var(--c-amber-t);color:var(--c-amber);border-radius:9px;padding:8px 10px;font-size:11px;font-weight:600;margin-top:7px}
.vf-opener{background:var(--c-creme);border-left:3px solid var(--c-terra);border-radius:0 9px 9px 0;padding:8px 10px;font-size:11.5px;font-style:italic;color:var(--c-ink-2);margin-top:8px}
.vf-groteknop{width:100%;border:none;border-radius:var(--radius);background:var(--gradient-primair, var(--c-groen));color:var(--c-creme);padding:12px;font:800 13.5px var(--font-ui);margin-top:10px;cursor:pointer;box-shadow:var(--schaduw-knop, none)}
.vf-afboekrij{display:flex;gap:7px;margin-top:7px}
.vf-afboekrij button{flex:1;border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:var(--radius);padding:10px;font:700 11.5px var(--font-ui);color:var(--c-ink-2);cursor:pointer}
.vf-afboekrij button.is-rood{color:var(--c-rood)}
.vf-klaarblok{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--c-ink-2)}
.vf-vraagbalk{height:4px;border-radius:99px;background:var(--c-paneel);margin:8px 0 12px;overflow:hidden}
.vf-vraagbalk i{display:block;height:100%;background:var(--c-terra-d, var(--c-terra))}
.vf-vraag{font-size:14.5px;font-weight:800;margin:0 0 10px}
.vf-antwoorden{display:flex;flex-direction:column;gap:7px}
.vf-antwoord{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:var(--radius);padding:11px;font:700 12.5px var(--font-ui);text-align:left;cursor:pointer}
.vf-schaalrij{display:flex;gap:6px}
.vf-schaalrij .vf-antwoord{flex:1;text-align:center}
.vf-oversla{border:none;background:none;color:var(--c-ink-3);font:600 11.5px var(--font-ui);margin-top:8px;cursor:pointer}
.vf-cfgknop{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:7px;padding:1px 7px;font-size:12px;cursor:pointer}
.vf-sub{font-size:11.5px;color:var(--c-ink-2);margin:0 0 10px}
.vf-uitkomst{display:flex;flex-direction:column;gap:7px}
.vf-uitkomst button{display:flex;gap:9px;align-items:center;border:1px solid var(--c-lijn-2);border-radius:var(--radius);background:var(--c-creme);padding:11px;font:700 12.5px var(--font-ui);text-align:left;cursor:pointer}
.vf-uitkomst button i{font-style:normal;font-size:15px}
.vf-uitkomst button em{display:block;font-style:normal;font-weight:400;font-size:10px;color:var(--c-ink-3)}
.vf-provchip{border:1px solid var(--c-creme);background:transparent;color:var(--c-creme);border-radius:99px;padding:3px 10px;font-size:11px;font-weight:800;cursor:pointer;opacity:.92}
.vf-provkaart{background:var(--gradient-primair, var(--c-groen));color:var(--c-creme);border-radius:var(--radius);padding:12px 14px;margin:8px 0;box-shadow:var(--schaduw-tegel, none)}
.vf-provkaart span{font-size:10.5px;opacity:.85;display:block}
.vf-provkaart strong{font-size:22px}
.vf-provrij{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--c-lijn);font-size:11.5px}
.vf-provrij:first-of-type{border-top:0}
.vf-provrij div{flex:1;min-width:0}
.vf-provrij strong{display:block;font-size:11.5px}
.vf-provrij span{font-size:10px;color:var(--c-ink-3)}
.vf-provrij em{font-style:normal;font:800 11.5px var(--font-mono);color:var(--c-groen-d)}
.vf-consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--c-ink-2);margin-top:8px}
.vf-consent input{width:16px;height:16px;accent-color:var(--c-groen);flex-shrink:0;margin-top:1px}
.vf-meekijkkop{background:var(--c-groen);color:var(--c-creme);margin:0 0 4px;padding:14px 22px}
.vf-meekijkkop .kicker{color:var(--c-sage-t)}
.vf-meekijkkop strong{display:block;font-size:15px;margin:2px 0}
.vf-meekijkkop span{font-size:11px;opacity:.85}
.vf-bevestigd{text-align:center;padding:12px 22px 4px}
.vf-bevestigd__vink{font-size:30px;color:var(--c-groen-d);font-weight:800}
.vf-bevestigd h3{margin:6px 0 6px;font-size:16px}
.vf-bevestigd p{font-size:12.5px;color:var(--c-ink-2);margin:3px 0}
.vf-stopvink{display:flex;gap:4px;align-items:center;font:700 10px var(--font-mono);color:var(--c-ink-3)}
.vf-stopvink input{width:14px;height:14px;accent-color:var(--c-groen)}

[data-fe-rij]{grid-template-columns:1.3fr 82px 1fr auto auto}
/* PDOK-kaartlaag: tegels + bron-label leesbaar op de kaart */
.vf-tegel{position:absolute;width:256px;height:256px;pointer-events:none;user-select:none;filter:sepia(.12) brightness(1.02)}
.vf-kaart [data-vf-pdok], .vf-kaart{background:var(--c-sage-t)}
.vf-kaart .vf-kaart__bron{background:color-mix(in srgb, var(--c-creme) 82%, transparent);border-radius:6px;padding:1px 6px}

/* Reviewronde Tim 23-07 · punt 11: uren-tab uitvoerder-app */
.va-urenkop { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.va-urenkop > div { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.va-urenkop span { font-size: .64rem; color: var(--c-ink-3); }
.va-urennav { border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); color: var(--c-ink); font: inherit; padding: 6px 12px; cursor: pointer; }
.va-urendagen { display: flex; flex-direction: column; gap: 6px; }
.va-urendag { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; background: var(--c-paneel); color: var(--c-ink); font: inherit; padding: 9px 12px; cursor: pointer; }
.va-urendag span { font-size: .68rem; color: var(--c-ink-2); }
.va-urendag.heeft-uren { border-color: var(--c-groen-t); }
.va-urendag.is-open { border-color: var(--c-groen-d); }
.va-urenform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px dashed var(--c-lijn); border-radius: 12px; padding: 10px; margin: 4px 0 6px; }
.va-urenform label { display: flex; flex-direction: column; gap: 3px; font-size: .64rem; color: var(--c-ink-3); }
.va-urenform input { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 9px; font: inherit; font-size: .78rem; background: var(--c-paneel); color: var(--c-ink); }
.va-urenform--breed { grid-column: 1 / -1; }
.va-urenform .va-oranje { grid-column: 1 / -1; }
.va-urensignaal { margin-top: 8px; }

/* punt 11 · HR-kaart urenstaten */

/* VP8 · de adviseur bij het voorstel aan de deur. De bewoner mag weten
   wie er straks voor zijn deur staat — dat is geen detail maar de helft
   van de afspraak. */
.va-planadv { display: block; font-style: normal; font-size: .74rem; color: var(--c-ink-3); margin-top: 4px; }
.va-planleeg { font-size: .84rem; color: var(--c-ink-2); margin: 6px 0; }

/* VP13 · dagkoppen, notitie en een geannuleerde afspraak in de adviseur-app */
.va-dagkop { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px 2px; font-size: .68rem; color: var(--c-ink-2); }
.va-afspraak__notitie { display: block; font-size: .72rem; color: var(--c-ink-2); margin: 2px 0; }
.va-afspraak.is-weg { opacity: .55; }
.va-afspraak.is-weg strong { text-decoration: line-through; }

/* VP19 · wat de planner meestuurde uit het gesprek (besluit 29) */
.va-afspraak__gesprek { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--c-ink-2); margin-top: 4px; }
.va-afspraak__gesprek b { font-weight: 600; color: var(--c-ink-3); }

/* FM1/FM2 · foto's aan de deur, handtekening op de tablet, eigen tijd */
.vf-fotorij { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.vf-fotos { display: flex; gap: 6px; flex-wrap: wrap; }
.vf-fotos img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: var(--lijndikte, 1px) solid var(--c-lijn); }
.vf-fotoknop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: 10px; font-size: .8rem; font-weight: 700; cursor: pointer; background: #fff; }
.vf-teken { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.vf-canvas { width: 100%; height: 150px; border: var(--lijndikte, 1px) dashed var(--c-lijn-2); border-radius: 10px; background: #fff; touch-action: none; color: var(--c-ink); }
.vf-tekenrij { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.va-eigentijd { margin-top: 8px; font-size: .8rem; }
.va-eigentijd summary { cursor: pointer; font-weight: 700; }
.va-eigentijd input, .va-eigentijd select { font: inherit; font-size: .8rem; padding: 6px 8px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: 8px; }
.va-planslot[disabled] { opacity: .45; cursor: not-allowed; }

/* FM3 · looproute van vandaag */
.vf-route { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-ink); pointer-events: none; }
.vf-dienstkop { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: 0 0 8px; border: var(--lijndikte, 1px) solid var(--c-lijn); border-radius: 10px; background: #fff; font-size: .8rem; }
.vf-dienstkop.is-leeg { color: var(--c-ink-3); }
.vf-dienstbalk { display: block; height: 6px; border-radius: 99px; background: var(--c-paneel-2); overflow: hidden; }
.vf-dienstbalk span { display: block; height: 100%; background: var(--goed); }
.vf-volgnr { display: inline-block; min-width: 20px; margin-right: 6px; font-size: .62rem; color: var(--c-ink-3); }

/* FM4 · mijn cijfers in de FM-app */
.vf-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.vf-cijferkol { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; padding: 8px; border: var(--lijndikte, 1px) solid var(--c-lijn); border-radius: 8px; font-size: .74rem; }
.vf-cijferkol .kicker { grid-column: 1 / 3; margin-bottom: 4px; }
.vf-cijferkol b { font-size: .88rem; text-align: right; }
.vf-cijferkol b.is-goed { color: var(--goed); } .vf-cijferkol b.is-let { color: var(--let); }
.vf-cijferkol small { color: var(--c-ink-3); }


/* ---- VA2/VA3/VA5 · werkbak, poorten en terugkoppeling in de adviseur-app ---- */
.va-viewschakel { display: flex; gap: 6px; padding: 8px 12px 0; }
.va-viewschakel b { margin-left: 4px; }
.va-werkbak { padding: 8px 12px 12px; display: grid; gap: 10px; }
.va-wbtellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.va-wbtellers > div { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; display: grid; gap: 2px; }
.va-wbtellers strong { font-size: 18px; }
.va-wbtellers span { font-size: 11px; color: var(--ink2); }
.va-wbblok { display: grid; gap: 4px; }
.va-terugkoppel { display: grid; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.va-ntrij { display: flex; gap: 6px; flex-wrap: wrap; }
.va-nt { border-left: 3px solid var(--let); }
.va-nt.is-let { border-left-color: var(--stop); }
.va-nt.is-goed { border-left-color: var(--goed); }
.va-tklijst { display: grid; gap: 2px; }
.vw-fiat-ok { color: var(--goed); font-weight: 600; }
.vw-fiat-nee { color: var(--stop); font-weight: 600; }
.vw-foto.is-verplicht { border-color: var(--let); }
.vw-verplicht { display: block; font-size: 10px; color: var(--let); letter-spacing: .02em; }
.vw-foto.heeft .vw-verplicht { color: var(--goed); }
.vw-teken .vf-canvas { width: 100%; height: 150px; border: 1px dashed var(--lijn2, var(--lijn)); border-radius: var(--radius-klein); background: var(--paneel); touch-action: none; }
.vw-teken .vf-tekenrij { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
input[data-vw-tarief][readonly] { color: var(--ink2); background: var(--paneel); }


/* WF1 · Warmtefonds via Prets in de wizard */
.vw-prets { display: grid; gap: 8px; }
.vw-prets .vf-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; }


/* MK · meekijkstand van de afrond-wizard: de klant kijkt mee, intern gaat pas open als de verkoper dat kiest */
.vw-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vw-meekijk { margin-left: auto; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--lijn); background: var(--paneel); font-size: 11.5px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.vw-meekijk.is-mee { border-color: var(--goed); color: var(--goed); }
.vw-meekijk.is-intern { border-color: var(--let); color: var(--let); }
.vw-meekijk:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.vw-internbalk { margin: 6px 0 10px; padding: 6px 10px; border-radius: var(--radius-klein); background: var(--memo); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }

/* ── inmeetapp.css ── */
/* =====================================================================
   inmeetapp.css — de app van de inmeter (IM3).

   Twee kolommen: links wat op zijn naam staat, rechts het meetblad in een
   telefoonvorm. Groot genoeg om met een handschoen te bedienen — dit
   scherm wordt buiten gebruikt, op een tablet, met koude vingers.
===================================================================== */
.ia-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 18px; }

.ia-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ia-kicker { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 4px; }
.ia-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.ia-lead { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 74ch; margin: 0; }
.ia-wie { font-family: var(--font-mono); font-size: .68rem; color: var(--c-ink-2); white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 4px 11px; }

.ia-schil { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .ia-schil { grid-template-columns: 1fr; } }

/* ---- links: mijn klussen ---- */
.ia-lijst { display: flex; flex-direction: column; gap: 8px; }
.ia-klus { text-align: left; display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 11px 13px; cursor: pointer;
  transition: border-color var(--overgang), box-shadow var(--overgang); }
.ia-klus:hover { box-shadow: var(--schaduw-tegel); }
.ia-klus.is-nu { border-left-color: var(--c-groen); box-shadow: var(--schaduw-tegel); }
.ia-klus__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ia-klus__kop b { font-size: .84rem; }
.ia-klus__kop em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.ia-klus__adres { font-size: .7rem; color: var(--c-ink-2); }
.ia-klus__stand { font-size: .64rem; color: var(--c-ink-3); }

/* ---- rechts: het meetblad ---- */
.ia-telefoon { background: var(--c-ink); border-radius: 28px; padding: 12px; }
.ia-scherm { background: var(--c-paneel-2); border-radius: 20px; overflow: hidden; }
.ia-schermkop { background: #fff; padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn);
  display: flex; flex-direction: column; gap: 2px; }
.ia-schermkop b { font-size: .88rem; }
.ia-schermkop span { font-size: .7rem; color: var(--c-ink-2); }

.ia-posrij { display: flex; gap: 6px; flex-wrap: wrap; padding: 11px 16px 0; }
.ia-pos { border: var(--lijndikte) solid var(--c-lijn); background: #fff; border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: .7rem; font-weight: 700; color: var(--c-ink-2); cursor: pointer; }
.ia-pos.is-klaar { border-color: var(--c-groen); color: var(--c-groen-d); }
.ia-pos.is-nu { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.ia-blad { padding: 13px 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.ia-offerte { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; }
.ia-offerte span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); }
.ia-offerte b { font-size: 1.05rem; }
.ia-offerte em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); }
.ia-uitleg { font-size: .72rem; line-height: 1.6; color: var(--c-ink-2); margin: 0; }

.ia-groep { display: flex; flex-direction: column; gap: 6px; }
.ia-groep h4 { margin: 0; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-ink-3); font-weight: 700; }
.ia-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ia-drie--twee { grid-template-columns: repeat(2, 1fr); }

/* min-width:0 hoort hier: zonder die regel weigert een grid-cel te
   krimpen onder zijn inhoud, en dan valt «2216» weg achter de rand —
   precies de maat waar het om gaat. */
.ia-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ia-veld span { font-size: .62rem; color: var(--c-ink-3); }
/* Ruim en hoog: dit wordt buiten ingevuld, op een tablet. */
.ia-veld input, .ia-veld textarea { font-family: var(--font-mono); font-size: .92rem; padding: 9px 8px;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: #fff; width: 100%; }
.ia-veld textarea { font-family: var(--font-ui); font-size: .78rem; resize: vertical; }
.ia-veld--breed { width: 100%; }

/* De uitkomst komt van de server — hier staat wat er besteld gaat worden. */
.ia-uitkomst { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.ia-uitkomst.is-let { border-color: var(--c-amber); background: var(--c-amber-t); }
.ia-uitkomst > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ia-uitkomst span { font-size: .66rem; color: var(--c-ink-2); }
.ia-uitkomst b { font-size: .86rem; }
.ia-scheef { margin: 3px 0 0; font-size: .7rem; line-height: 1.5; color: var(--c-amber); font-weight: 700; }

.ia-knop { background: var(--gradient-primair); color: #fff; border: 0; border-radius: var(--radius);
  padding: 13px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.ia-knop:hover { background: var(--gradient-primair-hover); }
.ia-knop:disabled { opacity: .55; cursor: progress; }

.ia-leeg { background: #fff; border: var(--lijndikte) dashed var(--c-lijn); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 5px; text-align: center; }
.ia-leeg b { font-size: .86rem; }
.ia-leeg span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.6; }

/* ---- IM4 · inbouwsituatie en bereikbaarheid ---- */
.ia-veld select { font-family: var(--font-ui); font-size: .8rem; padding: 9px 8px;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein);
  background: #fff; width: 100%; }
/* Amber: een signaal dat de maat raakt, geen blokkade. */
.ia-let { margin: 2px 0 0; font-size: .72rem; line-height: 1.55; color: var(--c-amber);
  background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber);
  border-radius: var(--radius-klein); padding: 8px 10px; }
/* De bijzaak is geld: hij hoort op te vallen zonder alarm te slaan. */
.ia-bijzaak { display: flex; flex-direction: column; gap: 3px; margin-top: 2px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn-2);
  border-left: 3px solid var(--c-groen); border-radius: var(--radius); padding: 10px 12px; }
.ia-bijzaak b { font-size: .78rem; }
.ia-bijzaak span { font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); }
.ia-bijzaak em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

/* ── comm.css ── */
/* =====================================================================
   comm.css — Module 3.1 · Gedeelde inbox. Drie kolommen met Gmail-/
   WhatsApp-koppelingenbalk, KPI-stuurstrip, SLA-chips, snelacties en
   memo-gele interne memo's. Tokens only.
===================================================================== */

.cm { max-width: 1400px; margin: 0 auto; padding: 26px 32px 48px; }
.cm-kop { margin-bottom: 14px; }
.cm-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.cm-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; }
.cm-groen { color: var(--c-groen-d); }

/* koppelingenbalk */
.cm-koppelingen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; }
.cm-koppeling { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.cm-koppeling i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); }
.cm-koppeling i.is-groen { background: var(--c-groen); }
.cm-koppeling strong { font-size: .72rem; color: var(--c-ink); }
.cm-koppeling.is-stil { opacity: .7; }
.cm-koppelingen__avg { margin-left: auto; font-size: .58rem; color: var(--c-ink-3); }

/* raster */
.cm-grid { display: grid; grid-template-columns: 330px minmax(360px, 1fr) 290px; overflow: hidden; height: calc(100vh - 320px); min-height: 540px; margin-top: 14px; }
@media (max-width: 1100px) { .cm-grid { grid-template-columns: 1fr; height: auto; } }

/* linkerkolom */
.cm-lijst { display: flex; flex-direction: column; border-right: var(--lijndikte) solid var(--c-lijn); min-width: 0; min-height: 0; }
.cm-lijst__kop { padding: 12px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.cm-zoek { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.cm-zoek input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; font: 600 .76rem var(--font-ui); color: var(--c-ink); background: #fff; }
.cm-boxen, .cm-sorteer { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.cm-sorteer { margin-top: 7px; }
.cm-boxchip { padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; font: 600 .64rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.cm-boxchip .mono { font-size: .56rem; color: var(--c-ink-3); }
.cm-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; }
.cm-lijst__scroll { flex: 1; overflow-y: auto; min-height: 0; }
.cm-lijst__teller { padding: 11px 14px; font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }

.cm-rij { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-left: 3px solid transparent; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.cm-rij:hover { background: var(--c-creme); }
.cm-rij.is-ongelezen { background: color-mix(in srgb, var(--c-groen-t) 35%, #fff); }
.cm-rij.is-actief { border-left-color: var(--c-groen-d); background: var(--c-groen-t); }
.cm-rij__kop { display: flex; align-items: center; gap: 8px; }
.cm-rij__kop strong { flex: 1; min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ongelezen { width: 7px; height: 7px; border-radius: 50%; background: var(--c-groen-d); flex: none; }
.cm-rij__tijd { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); flex: none; }
.cm-rij__onderwerp { font: 600 .72rem var(--font-ui); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rij__snip { font: 400 .68rem var(--font-ui); color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rij__voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-sla { font-size: .6rem; font-weight: 700; }
.cm-label { display: inline-flex; align-items: center; gap: 4px; font-size: .56rem; font-weight: 600; text-transform: uppercase; }
.cm-label i { width: 6px; height: 6px; border-radius: 50%; }
.cm-pot { font-size: .6rem; font-weight: 700; color: var(--c-ink-2); }
.cm-live { margin-left: auto; font-size: .54rem; font-weight: 600; color: var(--c-terra); }
.cm-avatar { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--c-paneel); color: var(--c-ink-2); display: grid; place-items: center; font: 700 .54rem var(--font-ui); flex: none; }
.cm-live + .cm-avatar { margin-left: 0; }
.cm-avatar--leeg { background: none; border: 1.5px dashed var(--c-lijn-2); }
.cm-snel { position: absolute; right: 10px; top: 8px; display: none; gap: 4px; }
.cm-rij:hover .cm-snel { display: flex; }
.cm-snel button { padding: 4px 8px; border-radius: 7px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font: 700 .58rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.cm-snel button:hover { background: var(--c-groen-t); color: var(--c-groen-d); border-color: var(--c-groen); }

/* middenkolom */
.cm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-creme); }
.cm-thread__kop { padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: #fff; }
.cm-thread__titel { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.cm-thread__titel strong { font-size: .9rem; flex: 1; min-width: 0; }
.cm-thread__meta { font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }
.cm-thread__meta .mono { font-size: .62rem; }
.cm-collision { padding: 8px 18px; background: var(--c-amber-t); border-bottom: var(--lijndikte) solid var(--c-amber); font: 600 .7rem var(--font-ui); color: var(--c-amber); }
.cm-wavenster { padding: 8px 18px; background: var(--c-terra-t); border-bottom: var(--lijndikte) solid var(--c-terra); font: 600 .7rem var(--font-ui); color: var(--c-terra-d); }
.cm-thread__scroll { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.cm-bericht { display: flex; flex-direction: column; gap: 4px; max-width: 76%; align-self: flex-start; }
.cm-bericht.is-uit { align-self: flex-end; }
.cm-bericht > div { padding: 11px 14px; border-radius: 13px 13px 13px 4px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); font: 500 .8rem/1.55 var(--font-ui); }
.cm-bericht.is-uit > div { border-radius: 13px 13px 4px 13px; background: var(--c-groen-t); border-color: var(--c-groen); }
.cm-bericht > span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); align-self: flex-start; }
.cm-bericht.is-uit > span { align-self: flex-end; }
/* interne memo — memo-geel (huisstijl: alléén interne notities) */
.cm-memo { align-self: stretch; background: var(--c-memo); border: var(--lijndikte) solid var(--c-amber); border-radius: 11px; padding: 11px 14px; }
.cm-memo__kop { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cm-memo__kop .kicker { color: var(--c-amber); }
.cm-memo__kop strong { font-size: .7rem; color: var(--c-amber); }
.cm-memo__kop span { margin-left: auto; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.cm-memo p { margin: 0; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink); }

/* composer */
.cm-composer { border-top: var(--lijndikte) solid var(--c-lijn); background: #fff; padding: 12px 16px; }
.cm-composer.is-memo { background: var(--c-memo); }
.cm-composer__tabs { display: flex; gap: 5px; margin-bottom: 9px; align-items: center; flex-wrap: wrap; }
.cm-composertab { padding: 6px 13px; border-radius: 8px; cursor: pointer; font: 700 .7rem var(--font-ui); border: var(--lijndikte) solid transparent; background: var(--c-paneel); color: var(--c-ink-2); }
.cm-composertab.is-actief { background: var(--c-ink); color: #fff; }
.cm-composertab--memo.is-actief { background: var(--c-amber); color: #fff; }
.cm-composer__rek { flex: 1; }
.cm-composer__veld { display: flex; flex-direction: column; gap: 4px; }
.cm-composer__veld textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .8rem/1.5 var(--font-ui); color: var(--c-ink); background: #fff; }
.cm-composer.is-memo textarea { border-color: var(--c-amber); }
.cm-composer__voet { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.cm-composer__voet > span { font: 500 .66rem/1.4 var(--font-ui); color: var(--c-ink-3); flex: 1; }

/* rechterkolom */
.cm-context { border-left: var(--lijndikte) solid var(--c-lijn); overflow-y: auto; padding: 16px; min-height: 0; }
.cm-context > .kicker { display: block; margin-bottom: 9px; }
.cm-context__warn { color: var(--c-amber) !important; }
.cm-context__naam { display: block; font-size: 1rem; margin-bottom: 2px; }
.cm-context__fase { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 14px; }
.cm-context__duo { display: flex; gap: 8px; margin-bottom: 14px; }
.cm-context__duo > div { flex: 1; padding: 10px; border-radius: 10px; background: var(--c-groen-t); text-align: center; }
.cm-context__duo > div:last-child { background: var(--c-paneel); }
.cm-context__duo strong { display: block; font-size: .95rem; }
.cm-context__feiten { padding: 11px 13px; border-radius: 10px; background: var(--c-creme); margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.cm-context__feiten > div { display: flex; justify-content: space-between; gap: 8px; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); }
.cm-context__feiten strong { font-weight: 600; color: var(--c-ink); text-align: right; }
.cm-grondslag { font-size: .6rem; color: var(--c-ink-2) !important; }
.cm-context__klantkaart { display: block; text-align: center; margin-bottom: 16px; text-decoration: none; }
.cm-context__uitleg { font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); margin: 0 0 14px; }
.cm-context__koppel { width: 100%; margin: 10px 0 8px; }
.cm-onthoud { display: flex; align-items: center; gap: 8px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.cm-onthoud input { accent-color: var(--c-groen); }
.cm-tijdlijn { display: flex; flex-direction: column; gap: 9px; }
.cm-tijdlijn__rij { display: flex; gap: 9px; }
.cm-tijdlijn__rij i { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .74rem; font-style: normal; color: var(--c-groen-d); background: var(--c-groen-t); }
.cm-tijdlijn__rij strong { display: block; font-size: .72rem; }
.cm-tijdlijn__rij span { display: block; font: 400 .64rem var(--font-ui); color: var(--c-ink-2); }
.cm-tijdlijn__rij em { font: 400 .58rem var(--font-mono); font-style: normal; color: var(--c-ink-3); }
.cm-context .bs-sectie { margin-top: 16px; }

/* ===================== 3.2 · Mijn inbox / Telefonie / Stuur-dashboard ===================== */
.cm--smal { max-width: 860px; }
.cm-tabs { display: flex; gap: 6px; align-items: center; }
.cm-tabs .cm-boxchip { text-decoration: none; }
.cm-caserij { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.cm-mijnlijst { overflow: hidden; }
.cm-mijnrij { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 18px; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font-family: var(--font-ui); }
.cm-mijnrij:hover { background: var(--c-creme); }
.cm-mijnrij__ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: .78rem; font-style: normal; color: var(--c-groen-d); background: var(--c-groen-t); }
.cm-mijnrij__ic.is-memo { color: var(--c-amber); background: var(--c-memo); }
.cm-mijnrij__ic.is-taak { color: var(--c-groen-d); background: var(--c-paneel); }
.cm-mijnrij__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-mijnrij__kop { display: flex; align-items: center; gap: 8px; }
.cm-mijnrij__kop strong { font-size: .78rem; }
.cm-mijnrij__snip { font: 400 .72rem var(--font-ui); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-mijnrij__wie { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.cm-mijnrij__tijd { font: 500 .66rem var(--font-ui); font-style: normal; color: var(--c-ink-3); flex: none; }

.cm--foon { max-width: 1100px; }
.cm-foongrid { display: grid; grid-template-columns: minmax(0, 1.3fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .cm-foongrid { grid-template-columns: 1fr; } }
.cm-foongrid .kicker { display: block; margin-bottom: 8px; }
.cm-dialer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; margin-bottom: 16px; }
.cm-dialer > .mono { font-size: .9rem; color: var(--c-groen-d); padding-bottom: 12px; }
.cm-dialer__veld { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cm-dialer__veld input { border: none; font: 600 .8rem var(--font-ui); color: var(--c-ink); background: transparent; padding: 6px 0; }
.cm-foonlog { overflow: hidden; }
.cm-foonrij { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.cm-foonrij > i { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: .84rem; font-style: normal; color: var(--c-groen-d); background: var(--c-groen-t); }
.cm-foonrij > i.is-gemist { color: var(--c-rood); background: var(--c-rood-t); }
.cm-foonrij__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.cm-foonrij__kop strong { font-size: .78rem; }
.cm-foonrij__kop .mono { font-size: .66rem; color: var(--c-ink-3); }
.cm-opname { font-size: .58rem; color: var(--c-groen-d); }
.cm-foonrij__note { display: block; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.cm-foonrij > div > em { font: 500 .62rem var(--font-mono); font-style: normal; color: var(--c-ink-3); }

.cm-belpaneel { position: sticky; top: 12px; background: var(--c-ink); border-radius: 18px; padding: 22px; color: #fff; display: flex; flex-direction: column; gap: 4px; }
.cm-belpaneel__status { display: flex; align-items: center; gap: 8px; font: 600 .6rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, #fff 65%, transparent); margin-bottom: 14px; }
.cm-belpaneel__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-groen); }
.cm-belpaneel__avatar { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, #fff 12%, transparent); display: grid; place-items: center; font: 800 1.2rem var(--font-ui); margin-bottom: 12px; }
.cm-belpaneel > strong { font-size: 1.1rem; }
.cm-belpaneel__nr { font-size: .76rem; color: color-mix(in srgb, #fff 65%, transparent); margin-bottom: 14px; }
.cm-belpaneel__kaart { background: color-mix(in srgb, #fff 7%, transparent); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.cm-belpaneel__kaart .kicker { color: color-mix(in srgb, #fff 55%, transparent); margin-bottom: 3px; }
.cm-belpaneel__kaart > div { display: flex; justify-content: space-between; gap: 10px; font: 500 .74rem var(--font-ui); }
.cm-belpaneel__kaart span { color: color-mix(in srgb, #fff 60%, transparent); }
.cm-belpaneel__kaart strong { text-align: right; font-weight: 600; }
.cm-belpaneel__verbonden { text-align: center; font: 600 .74rem var(--font-ui); color: var(--c-groen-t); margin-bottom: 12px; }
.cm-belpaneel__acties { display: flex; gap: 10px; }
.cm-belpaneel__acties .btn { flex: 1; }
.cm-ophangknop { background: var(--c-terra); color: #fff; }
.cm-belpaneel--leeg { background: none; border: 1.5px dashed var(--c-lijn-2); color: var(--c-ink-3); text-align: center; align-items: center; gap: 12px; padding: 26px; }
.cm-belpaneel--leeg span { font: 600 .76rem/1.5 var(--font-ui); }

.cm-teams { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cm-team { padding: 16px 18px; }
.cm-team__rij { display: grid; grid-template-columns: 1.4fr repeat(3, .8fr) auto auto; gap: 12px; align-items: center; }
@media (max-width: 900px) { .cm-team__rij { grid-template-columns: 1fr 1fr; } }
.cm-team__rij > div > strong { display: block; font-size: .88rem; }
.cm-team__rij > div > span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.cm-amber { color: var(--c-amber); }
.cm-team__agents { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 13px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); }
.cm-agent { flex: 1; min-width: 160px; }
.cm-agent__kop { display: flex; justify-content: space-between; margin-bottom: 5px; font: 600 .72rem var(--font-ui); }
.cm-agent__kop .mono { font-size: .62rem; font-weight: 500; color: var(--c-ink-3); }
.cm-agent__lijn { height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel); }
.cm-agent__lijn i { display: block; height: 100%; border-radius: var(--radius-pill); }

/* ==== 3.3 · Intern: berichten & meldingen (WhatsApp-vervanger) ==== */
.cm--intern { max-width: 1400px; }
.cm-intgrid { display: grid; grid-template-columns: 260px minmax(340px, 1fr) 300px; overflow: hidden; height: calc(100vh - 220px); min-height: 560px; margin-top: 14px; }
@media (max-width: 1100px) { .cm-intgrid { grid-template-columns: 1fr; height: auto; } }

.cm-intkanalen { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); overflow-y: auto; }
.cm-intkanalen > .kicker { padding: 4px 8px 6px; }
.cm-intkanaal { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: none; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.cm-intkanaal:hover { background: var(--c-paneel); }
.cm-intkanaal.is-actief { background: var(--c-groen-t); }
.cm-intkanaal__av { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font: 700 .68rem var(--font-mono); color: var(--c-groen-d); background: var(--c-paneel); }
.cm-intkanaal__av.is-dm { border-radius: 50%; font-family: var(--font-ui); }
.cm-intkanaal.is-actief .cm-intkanaal__av { color: #fff; background: var(--c-groen-d); }
.cm-intkanaal__naam { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-intkanaal__naam strong { font-size: .74rem; font-weight: 600; }
.cm-intkanaal__naam strong.is-ongelezen { font-weight: 800; }
.cm-intkanaal__naam span { font: 400 .62rem var(--font-ui); color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-intkanaal__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--c-groen-d); color: #fff; font-size: .6rem; font-weight: 700; display: grid; place-items: center; flex: none; }

.cm-intchat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-creme); }
.cm-intchat__kop { padding: 13px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: #fff; }
.cm-intchat__kop strong { display: block; font-size: .9rem; }
.cm-intchat__kop span { font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }
.cm-intchat__feed { flex: 1; overflow-y: auto; min-height: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cm-intsys { align-self: center; max-width: 88%; text-align: center; padding: 10px 15px; border-radius: 12px; font: 600 .7rem/1.5 var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); }
.cm-intsys.is-cel { color: var(--c-groen-d); background: var(--c-groen-t); border-color: var(--c-groen-d); }
.cm-intsys em { display: block; font-style: normal; font-size: .56rem; color: var(--c-ink-3); margin-top: 3px; }
.cm-intmsg { display: flex; gap: 9px; max-width: 74%; align-self: flex-start; }
.cm-intmsg.is-mijn { align-self: flex-end; flex-direction: row-reverse; }
.cm-intmsg__av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 .58rem var(--font-ui); color: #fff; background: var(--c-ink); }
.cm-intmsg.is-mijn .cm-intmsg__av { background: var(--c-groen-d); }
.cm-intmsg__box { padding: 10px 13px; border-radius: 13px 13px 13px 4px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); font: 500 .74rem/1.5 var(--font-ui); }
.cm-intmsg.is-mijn .cm-intmsg__box { border-radius: 13px 13px 4px 13px; background: var(--c-groen-t); border-color: var(--c-groen); }
.cm-intmsg__box.is-mention { border-color: var(--c-amber); }
.cm-intmsg__tag { display: block; font-size: .58rem; font-weight: 700; color: var(--c-amber); margin-bottom: 2px; }
.cm-intmsg__wie { display: block; font: 500 .58rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; }
.cm-intmsg.is-mijn .cm-intmsg__wie { text-align: right; }
.cm-intchat__voet { display: flex; gap: 9px; align-items: center; padding: 12px 16px; border-top: var(--lijndikte) solid var(--c-lijn); background: #fff; }
.cm-intchat__voet input { flex: 1; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .76rem var(--font-ui); color: var(--c-ink); background: #fff; }

.cm-intmeldingen { border-left: var(--lijndikte) solid var(--c-lijn); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.cm-intmeldingen > .kicker { margin-bottom: 2px; }
.cm-melding { display: flex; gap: 11px; padding: 11px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; }
.cm-melding__ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .72rem; }
.cm-melding__ic.is-amber { color: var(--c-amber); background: var(--c-amber-t); }
.cm-melding__ic.is-groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.cm-melding__ic.is-groen-d { color: #fff; background: var(--c-groen-d); }
.cm-melding__ic.is-terra { color: var(--c-terra-d); background: var(--c-terra-t); }
.cm-melding > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-melding strong { font-size: .72rem; }
.cm-melding span { font: 400 .66rem var(--font-ui); color: var(--c-ink-2); }
.cm-melding em { font: 500 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 2px; }
.cm-intmeldingen__uitleg { margin: 4px 0 0; font: 400 .66rem/1.55 var(--font-ui); color: var(--c-ink-3); }

/* ==== 3.3 · Broadcasts & sales-feed ==== */
.cm--bc { max-width: 1200px; }
.cm-bcgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .cm-bcgrid { grid-template-columns: 1fr; } }
.cm-bcgrid .kicker { display: block; margin-bottom: 9px; }
.cm-bclijst { display: flex; flex-direction: column; gap: 9px; }
.cm-bckaart { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 13px 14px; border-radius: 13px; border: 1.5px solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.cm-bckaart.is-actief { border-color: var(--c-ink); background: var(--c-paneel); }
.cm-bckaart__kop { display: flex; align-items: center; gap: 9px; width: 100%; }
.cm-bckaart__ic { font-size: .9rem; color: var(--c-groen-d); }
.cm-bckaart__kop strong { flex: 1; font-size: .8rem; }
.cm-bckaart__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); }
.cm-bckaart__kop i.is-aan { background: var(--c-groen); }
.cm-bckaart .chip { font-size: .56rem; }
.cm-bckaart__doel { font: 400 .64rem var(--font-ui); color: var(--c-ink-3); }
.cm-bcnieuw { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; background: transparent; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); text-align: center; cursor: pointer; }
.cm-bcnieuw:hover { color: var(--c-ink); border-color: var(--c-ink-3); }

.cm-bceditor { padding: 20px; }
.cm-bceditor__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cm-bceditor__kop strong { display: block; font-size: 1rem; }
.cm-bceditor__kop span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); }
.cm-bceditor__kop .chip { border: none; cursor: pointer; font: 600 .66rem var(--font-ui); }
.cm-bceditor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cm-bceditor__grid { grid-template-columns: 1fr; } }
.cm-bcbieb { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.cm-bcveld { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.cm-bcveld.is-aan { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.cm-bcveld__box { width: 19px; height: 19px; border-radius: 5px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--c-lijn-2); font-size: .62rem; color: #fff; }
.cm-bcveld.is-aan .cm-bcveld__box { border-color: var(--c-groen-d); background: var(--c-groen-d); }
.cm-bcveld__lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-bcveld__lbl strong { font-size: .72rem; font-weight: 600; }
.cm-bcveld__lbl .mono { font-size: .58rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-bcveld .chip { font-size: .54rem; flex: none; }

.cm-bcpreview { background: var(--c-ink); border-radius: 14px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.cm-bcpreview > strong { font-size: .8rem; margin-bottom: 2px; }
.cm-bcpreview__regel span { display: block; font: 500 .62rem var(--font-ui); color: color-mix(in srgb, #fff 62%, transparent); }
.cm-bcpreview__regel strong { font-size: .8rem; color: #fff; }
.cm-bcintern { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink); }
.cm-bcintern span { color: var(--c-amber); }
.cm-bctest { width: 100%; margin-top: 12px; justify-content: center; }
.cm-lijstacties { justify-content: flex-end; margin-bottom: 8px; }

/* Eerste-reactie-SLA per kanaal (D4a) */
.cm-eerste { font-size: 10.5px; font-family: var(--font-mono); border-radius: 99px; padding: 1px 8px; border: 1px solid var(--c-lijn); }
.cm-eerste--rood { color: var(--c-rood); border-color: var(--c-rood); font-weight: 700; }
.cm-eerste--terra { color: var(--c-terra); border-color: var(--c-terra); font-weight: 700; }
.cm-eerste--amber { color: var(--c-amber); border-color: var(--c-amber); }
.cm-eerste--groen { color: var(--c-groen-d); }

/* Belscript-paneel (D4c) */
.cm-beluitgaand { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: start; }
.cm-belscript { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--c-paneel); }
.cm-belscript__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cm-belscript__kop select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }
.cm-belscript__stappen { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cm-belscript__stappen button { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--c-ink); padding: 0; }
.cm-belscript__stappen li.is-gehad button { color: var(--c-ink-3); text-decoration: line-through; }
.cm-belscript__stappen li.is-nu button { font-weight: 700; color: var(--c-groen-d); }
.cm-belscript__noot { font-size: 11.5px; color: var(--c-ink-2); }

/* ---- Voorbeeld A: opgeruimde kop + Toezicht-lens + gegroepeerde lijst ---- */
.cm-kop2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-kop2__titel h1 { margin: 1px 0 0; font-size: 1.2rem; }
.cm-kop2__titel .kicker { display: block; }
.cm-seg-wrap { display: inline-flex; background: var(--c-paneel); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.cm-seg { border: 0; background: transparent; font: 600 .66rem var(--font-ui); color: var(--c-ink-2); padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.cm-seg b { font: 700 .58rem var(--font-mono); margin-left: 5px; color: var(--c-ink-3); }
.cm-seg.is-actief { background: #fff; color: var(--c-ink); box-shadow: var(--schaduw-tegel); }
.cm-seg.is-actief b { color: var(--c-groen-d); }
.cm-zoek2 { flex: 1 1 200px; min-width: 160px; }
.cm-zoek2 input { width: 100%; padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: #fff; font: 500 .74rem var(--font-ui); color: var(--c-ink); }
.cm-zoek2 input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.cm-lens { display: inline-flex; background: var(--c-paneel); border-radius: var(--radius-pill); padding: 3px; }
.cm-lensbtn { border: 0; background: transparent; font: 700 .64rem var(--font-ui); color: var(--c-ink-2); padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer; }
.cm-lensbtn.is-actief { background: #fff; color: var(--c-ink); box-shadow: var(--schaduw-tegel); }
.cm-lensbtn--toez.is-actief { background: var(--c-amber); color: #fff; }
.cm-verbind { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.cm-verbind span { display: flex; align-items: center; gap: 6px; font: 600 .64rem var(--font-ui); color: var(--c-ink-2); }
.cm-verbind i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-groen); }

.cm-toezicht { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; padding: 9px 16px;
  background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); font: 600 .72rem var(--font-ui); color: var(--c-ink); }
.cm-toezicht__lbl { font: 700 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c-amber); }
.cm-toezicht__wl b { font-family: var(--font-mono); margin: 0 3px; }
.cm-toezicht__sig { color: var(--c-amber); }
.cm-toezicht button { margin-left: auto; }
.cm-toezicht button[disabled] { opacity: .45; cursor: not-allowed; }

.cm-sec { display: flex; align-items: center; gap: 8px; padding: 10px 15px 5px; font: 700 .58rem var(--font-mono);
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); position: sticky; top: 0; background: #fff; z-index: 1; }
.cm-sec__ic { color: var(--c-rood); }
.cm-sec__badge { font: 700 .54rem var(--font-mono); background: var(--c-amber); color: #fff; padding: 1px 7px; border-radius: var(--radius-pill); }
.cm-sec__n { margin-left: auto; color: var(--c-ink-3); }

.cm-lijst__balk { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.cm-lijst__rek { flex: 1; }
.cm-mini { padding: 5px 10px; font-size: .62rem; }
.cm-sugg { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 0 0 9px; }
.cm-sugg .kicker { align-self: center; }
.cm-suggchip { font: 600 .66rem var(--font-ui); padding: 5px 11px; border-radius: var(--radius-pill);
  border: var(--lijndikte) dashed var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); cursor: pointer; }
.cm-suggchip:hover { background: #fff; }
.cm-suggchip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.cm-kop2--smal { align-items: center; }
.cm-kop2--smal .cm-caserij { margin: 0; }
.cm-mijn-naar { margin-left: auto; text-decoration: none; }
.cm-sec__ic--at { color: var(--c-groen-d); font-family: var(--font-mono); }
.cm-belpaneel__dossier { display: inline-block; margin-top: 8px; font: 700 .66rem var(--font-ui); color: var(--c-groen-d); text-decoration: none; }
.cm-belpaneel__dossier:hover { text-decoration: underline; }

/* ── commout.css ── */
/* =====================================================================
   commout.css — Module 3.4 · Communicatie · Uitgaand (8 schermen).
   Prototype-navy/mauve → tokens; alleen token-kleuren. Prefix co-.
===================================================================== */

.co { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.co-kop { margin-bottom: 14px; }
.co-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.co-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 72ch; }

.co-kaart { padding: 16px 18px; margin-bottom: 16px; }
.co-kaart > .kicker { display: block; margin-bottom: 12px; }
.co-kaart > strong { display: block; font-size: .9rem; }
.co-kaart--breed { margin-top: 2px; }
.co-sub { display: block; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin: 3px 0 13px; }
.co-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 16px; align-items: start; margin-top: 14px; }
.co-grid--half { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .co-grid, .co-grid--half { grid-template-columns: 1fr; } }

/* kanaal-iconen */
.co-kan { font: 600 .74rem var(--font-mono); color: var(--c-lijn-2); }
.co-kan.is-mail { color: var(--c-ink-2); }
.co-kan.is-wa { color: var(--c-groen); }
.co-kan.is-app { font-size: .52rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 5px; padding: 1px 4px; }

/* chips + switch */
.co-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.co-chips--vol { margin-bottom: 14px; }
.co-chips--vol .co-chip { flex: 1; text-align: center; }
.co-chips__scheider { width: 1px; align-self: stretch; background: var(--c-lijn-2); margin: 2px 4px; }
.co-chip { padding: 6px 13px; border-radius: 8px; border: 1.5px solid var(--c-lijn-2); cursor: pointer; font: 600 .7rem var(--font-ui); white-space: nowrap; background: #fff; color: var(--c-ink-2); }
.co-chip.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; }
.co-switch { position: relative; width: 38px; height: 21px; border: none; border-radius: var(--radius-pill); background: var(--c-lijn-2); cursor: pointer; flex: none; }
.co-switch i { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.co-switch.is-aan { background: var(--c-groen-d); }
.co-switch.is-aan i { left: 19px; }
.co-telling { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); margin-left: 6px; }

/* ---- overzicht ---- */
.co-rij { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; }
.co-rij__tijd { font-size: .64rem; color: var(--c-groen-d); width: 104px; flex: none; }
.co-rij > div { flex: 1; min-width: 0; }
.co-rij > div strong { display: block; font-size: .76rem; }
.co-rij > div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-feedrij { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.co-feedrij > .mono { font-size: .62rem; color: var(--c-ink-3); width: 44px; flex: none; }
.co-feedrij > div { flex: 1; min-width: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-feedrij .chip { flex: none; font-size: .58rem; }
.co-meer { display: inline-block; margin-top: 10px; font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.co-kaart--fail { border-color: var(--c-terra); }
.co-fail { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-terra); border-left: 3px solid var(--c-terra); margin-bottom: 9px; }
.co-fail > div { flex: 1; min-width: 0; }
.co-fail strong { display: block; font-size: .76rem; }
.co-fail span { font: 500 .66rem var(--font-ui); color: var(--c-terra-d); }
.co-kanaalrij { margin-bottom: 13px; }
.co-kanaalrij strong { font-size: .76rem; }
.co-kanaalrij span { float: right; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }
.co-balk { height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; margin-top: 5px; }
.co-balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-ink-2); }
.co-balk i.is-groen { background: var(--c-groen); }
.co-balk i.is-amber { background: var(--c-amber); }
.co-wawarn { display: flex; gap: 10px; margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 500 .7rem/1.5 var(--font-ui); }
.co-wawarn span { color: var(--c-amber); flex: none; }

/* ---- journeys ---- */
.co-jgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .co-jgrid { grid-template-columns: 1fr; } }
.co-jgrid .kicker { display: block; margin-bottom: 9px; }
.co-jlijst { display: flex; flex-direction: column; gap: 9px; }
.co-jkaart { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 13px; border: 1.5px solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.co-jkaart.is-actief { border-color: var(--c-ink); background: var(--c-paneel); }
.co-jkaart__kop { display: flex; align-items: center; gap: 9px; width: 100%; }
.co-jkaart__ic { font-size: .9rem; color: var(--c-groen-d); }
.co-jkaart__kop strong { flex: 1; font-size: .76rem; line-height: 1.2; }
.co-jkaart__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); flex: none; }
.co-jkaart__kop i.is-aan { background: var(--c-groen); }
.co-jkaart__voet { display: flex; justify-content: space-between; width: 100%; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-nieuw { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; background: transparent; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); text-align: center; cursor: pointer; }
.co-nieuw:hover { color: var(--c-ink); border-color: var(--c-ink-3); }
.co-nieuw--stap { width: auto; align-self: center; margin-top: 0; padding: 7px 14px; }
.co-jboven { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .co-jboven { grid-template-columns: 1fr; } }
.co-jboven .co-kaart { margin-bottom: 0; }
.co-funnelrij { margin-bottom: 10px; }
.co-funnelrij > div { display: flex; justify-content: space-between; margin-bottom: 4px; font: 600 .72rem var(--font-ui); }
.co-funnelrij .mono { font-size: .64rem; font-weight: 500; color: var(--c-ink-3); }
.co-tweeweg { background: var(--c-ink); border-radius: 14px; padding: 16px 18px; color: #fff; }
.co-tweeweg .kicker { color: color-mix(in srgb, #fff 60%, transparent); display: block; margin-bottom: 8px; }
.co-tweeweg p { margin: 0 0 12px; font: 400 .72rem/1.5 var(--font-ui); color: color-mix(in srgb, #fff 82%, transparent); }
.co-tweeweg .btn { width: 100%; justify-content: center; }
.co-builder { padding: 20px; }
.co-builder__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.co-builder__kop strong { display: block; font-size: .96rem; }
.co-builder__kop span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); }
.co-builder__kop .chip { border: none; cursor: pointer; font: 600 .66rem var(--font-ui); }
.co-stappen { display: flex; flex-direction: column; align-items: stretch; }
.co-stap { border-radius: 13px; padding: 14px 16px; border: 1.5px solid var(--c-lijn); background: #fff; }
.co-stap--trigger { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.co-stap--wacht { border-color: var(--c-lijn-2); background: var(--c-creme); }
.co-stap--split { border-color: var(--c-amber); background: var(--c-amber-t); }
.co-lijn { display: block; width: 2px; height: 16px; background: var(--c-lijn-2); margin: 0 auto; }
.co-stappen > .co-lijn:last-of-type { height: 12px; }
.co-stap__trig { display: flex; align-items: center; gap: 10px; }
.co-stap__trig > span { width: 30px; height: 30px; border-radius: 8px; background: var(--c-groen-d); color: #fff; display: grid; place-items: center; font: 700 .74rem var(--font-mono); flex: none; }
.co-stap__trig--wacht > span { background: var(--c-paneel); color: var(--c-ink-2); }
.co-stap__trig strong { display: block; font-size: .78rem; }
.co-stap__trig div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-stap__berkop { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.co-stap__berkop strong { flex: 1; font-size: .8rem; }
.co-stap__berkop .chip { font-size: .56rem; }
.co-stap__meta { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.co-fallback { font-size: .6rem; color: var(--c-amber); background: var(--c-amber-t); padding: 2px 8px; border-radius: var(--radius-pill); }
.co-stap__cta { margin-top: 9px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); }
.co-stap__cta strong { font-size: .7rem; }
.co-stap__cta .mono { margin-left: auto; font-size: .62rem; color: var(--c-ink-3); }
.co-stap__stats { margin-top: 8px; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }
.co-stap__stats strong { font-family: var(--font-mono); color: var(--c-groen-d); }
.co-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.co-ab > div { padding: 10px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); }
.co-ab strong { display: block; font-size: .72rem; margin-bottom: 4px; }
.co-ab span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-ab b { color: var(--c-groen-d); }
.co-stap__splitkop { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: .78rem; }
.co-stap__splitkop span { color: var(--c-amber); font-family: var(--font-mono); }
.co-split { display: flex; gap: 9px; }
.co-split > div { flex: 1; padding: 9px 12px; border-radius: 9px; font: 600 .72rem var(--font-ui); }
.co-split__ja { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); color: var(--c-groen-d); }
.co-split__nee { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); color: var(--c-ink); }
.co-split span { display: block; font-size: .56rem; margin-bottom: 2px; }

/* ---- automatiseringen ---- */
.co-autokop { font: 500 .76rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 10px; }
/* Zes kolommen sinds IN2: bericht · sleutel · kanaal · 30d · laatst · aan. */
.co-autohead, .co-autorij { display: grid; grid-template-columns: 2.2fr 1.3fr 74px 56px 90px 74px; gap: 12px; align-items: center; }
.co-autohead { padding: 8px 14px; font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); }
.co-fasegroep { margin-bottom: 18px; overflow-x: auto; }
.co-fasegroep .co-autohead, .co-fasegroep .co-autorij { min-width: 660px; }
.co-fasegroep__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.co-fasegroep__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-groen-d); }
.co-fasegroep__kop strong { font-size: .8rem; }
.co-fasegroep__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.co-autorij { padding: 10px 14px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 6px; }
.co-autorij.is-uit { opacity: .55; }
.co-autorij > div strong { display: block; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-autorij > div > span { display: flex; gap: 6px; margin-top: 3px; }
.co-autorij .chip { font-size: .52rem; }
.co-autorij > span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.co-ontv { text-transform: capitalize; }
.co-kans { display: flex; gap: 6px; align-items: center; }
.co-tpllink { background: none; border: none; cursor: pointer; text-align: left; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-groen-d) 35%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-acties { display: flex; align-items: center; gap: 8px; }

/* ---- templates ---- */
.co-tplgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 1100px) { .co-tplgrid { grid-template-columns: 1fr; } }
.co-tplrij { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 10px 11px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.co-tplrij:hover { background: var(--c-creme); }
.co-tplrij.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.co-tplrij > div { flex: 1; min-width: 0; }
.co-tplrij strong { display: block; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-tplrij > div > span { display: flex; gap: 5px; margin-top: 3px; }
.co-tplrij .chip { font-size: .52rem; }
.co-tplrij__kans { display: flex; gap: 4px; flex: none; }
.co-tplnaam { display: block; font-size: .92rem; }
.co-tplmeta { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 12px; }
.co-tabs { display: flex; gap: 5px; margin-bottom: 14px; }
.co-boxchip { padding: 7px 14px; border-radius: 8px; cursor: pointer; font: 600 .7rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.co-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; }
.co-veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.co-veld input, .co-veld textarea, .co-veld select { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink); background: #fff; resize: vertical; }
.co-wastatus { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.co-telling.mono { display: block; text-align: right; font-size: .62rem; margin: -8px 0 10px; }
.co-vars { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.co-var { padding: 5px 10px; border-radius: 7px; border: var(--lijndikte) solid var(--c-groen); background: var(--c-groen-t); cursor: pointer; font-size: .6rem; color: var(--c-groen-d); }
.co-tplacties { display: flex; gap: 9px; flex-wrap: wrap; }
.co-preview { padding: 0; overflow: hidden; margin-bottom: 16px; }
.co-preview > .kicker { display: block; padding: 8px 14px; background: var(--c-paneel); border-bottom: var(--lijndikte) solid var(--c-lijn); margin: 0; }
.co-preview > strong { display: block; padding: 14px 18px 0; font-size: .84rem; }
.co-preview__van { display: block; padding: 2px 18px 0; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-preview > p { margin: 0; padding: 12px 18px 16px; font: 500 .76rem/1.6 var(--font-ui); white-space: pre-wrap; }
.co-preview--wa { background: var(--c-creme); }
.co-wabubbel { margin: 16px; max-width: 88%; background: #fff; border-radius: 2px 12px 12px 12px; padding: 11px 13px; box-shadow: var(--schaduw-tegel); }
.co-wabubbel b { display: block; font-size: .68rem; color: var(--c-groen); margin-bottom: 3px; }
.co-wabubbel p { margin: 0; font: 500 .76rem/1.5 var(--font-ui); white-space: pre-wrap; }
.co-wabubbel em { display: block; text-align: right; font: 500 .58rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 4px; }
.co-preview--plak { position: sticky; top: 12px; }

/* ---- levering ---- */
.co-rij--keten { background: #fff; }
.co-ketenic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font: 600 .84rem var(--font-mono); color: var(--c-groen-d); background: var(--c-groen-t); }
.co-toggelrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.co-toggelrij strong { display: block; font-size: .76rem; }
.co-toggelrij span { font: 400 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-capkop { display: block; font-size: .76rem; margin: 14px 0 9px; }
.co-consentrij { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.co-consentrij strong { flex: 1; font-size: .78rem; }
.co-consentrij .chip { font-size: .56rem; }
.co-consentres { width: 260px; text-align: right; font: 600 .7rem var(--font-ui); }
.co-consentres.is-ok { color: var(--c-groen-d); }
.co-consentres.is-nee { color: var(--c-rood); }

/* ---- handmatig ---- */
.co-mangrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 14px; max-width: 940px; }
@media (max-width: 900px) { .co-mangrid { grid-template-columns: 1fr; } }
.co-mangrid .kicker { display: block; margin-bottom: 8px; }
.co-manverstuur { width: 100%; justify-content: center; margin-top: 4px; }

/* ---- verzendlog ---- */
.co-loghead, .co-logrij { display: grid; grid-template-columns: 52px 1.4fr 74px 1.6fr 66px 100px 86px; gap: 12px; align-items: center; }
.co-loghead { padding: 8px 14px; font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); }
.co-logrij { padding: 11px 14px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 6px; }
.co-logrij > .mono { font-size: .64rem; color: var(--c-ink-3); }
.co-logrij strong { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-logorder { color: var(--c-groen-d); }
.co-logtpl { font: 500 .72rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-logrij .chip { font-size: .58rem; }

/* ---- instellingen ---- */
.co-typerij { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; margin-bottom: 10px; }
.co-typerij.is-trans { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.co-typerij.is-mkt { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); }
.co-typerij > span { font: 700 .78rem var(--font-ui); flex: none; }
.co-typerij.is-trans > span { color: var(--c-groen-d); }
.co-typerij.is-mkt > span { color: var(--c-amber); }
.co-typerij strong { display: block; font-size: .76rem; }
.co-typerij div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-kaart .bs-form { margin-bottom: 12px; }
.co-wakaarten { display: flex; gap: 12px; flex-wrap: wrap; }
.co-wakaart { flex: 1; min-width: 160px; padding: 13px 15px; border-radius: 11px; }
.co-wakaart strong { display: block; font-size: 1.2rem; }
.co-wakaart span { font: 600 .7rem var(--font-ui); }
.co-wakaart.is-groen { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); color: var(--c-groen-d); }
.co-wakaart.is-amber { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); color: var(--c-ink); }
.co-wakaart.is-rood { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); color: var(--c-rood); }

/* WA-goedkeuringsflow (D4b) */
.co-wareden { border: 1px solid var(--c-rood); border-radius: 12px; padding: 9px 12px; font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
.co-waflow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.co-wanoot { font-size: 11.5px; color: var(--c-ink-2); }

/* ---- FT-5.2a · verzendlog server-side (zoek/filter/paginering) ---- */
.co-logbalk { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.co-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: #fff; color: var(--c-ink); font: 500 .74rem var(--font-ui); }
.co-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.co-logbalk .co-telling { margin-left: auto; }
.co-logpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 2px; }
.co-logpag .btn[disabled] { opacity: .4; cursor: not-allowed; }
.co-loglaad { padding: 24px; text-align: center; color: var(--c-ink-3); font: 500 .8rem var(--font-ui); }

/* ---- journeys op de echte keten (IN1) ----
   De trechter met open- en klikpercentages is uit het scherm verdwenen;
   wat ervoor in de plaats komt zijn vier tellingen die wél ergens vandaan
   komen, en twee tabellen: wie erin zit en wat er is gebeurd. Overgeslagen
   staat er als eigen teller, want dat is waar het misgaat. */
.co-uitleg { margin: 0 0 14px; font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 62ch; }
.co-jtellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.co-jtellers > div { padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--c-paneel); }
.co-jtellers strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.co-jtellers span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-jtellers .is-let strong { color: var(--c-amber); }
.co-poortkaart { margin-top: 12px; }
.co-poortkaart p { margin: 6px 0 0; font: 400 .7rem/1.55 var(--font-ui); color: var(--c-ink-2); }
.co-jtabel { width: 100%; }
.co-jtabel td, .co-jtabel th { vertical-align: top; }
.co-jtabel tr.is-let td { background: var(--c-amber-t); }
.co-reden { display: block; margin-top: 3px; font: 400 .64rem/1.45 var(--font-ui); color: var(--c-ink-3); max-width: 44ch; }
.co-leeg { padding: 14px 2px; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); text-align: center; }

/* IN2 · de berichtinventaris. De platform-kolom is weg (dat label stond
   nergens vast); ervoor in de plaats staan de templatesleutel en de datum
   van de laatste verzending — twee dingen die je echt kunt nazoeken. */
.co-tplsleutel { font-size: .64rem; color: var(--c-ink-3); }
.co-onderwerp { color: var(--c-ink-3); }
.co-laatst { font-size: .66rem; color: var(--c-ink-3); }
.co-autorij.is-uit { opacity: .62; }

/* De band die zegt wat een scherm níét dekt. `--let`, want het is een
   openstaand gat en geen blokkade. */
.co-band { margin: 0 0 16px; padding: 12px 15px; border: var(--lijndikte) solid var(--let);
  border-radius: var(--radius); background: var(--let-t);
  font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); }
.co-band strong { color: var(--c-ink); }

/* ── formulieren.css ── */
/* =====================================================================
   formulieren.css — module Formulieren (Communicatie › Uitgaand).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.frm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.frm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.frm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.frm-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }

/* lijst */
.frm-rij { display: grid; grid-template-columns: 1.8fr .9fr .5fr .8fr .6fr; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--c-lijn); background: none; padding: 11px 4px; cursor: pointer; font: inherit; color: var(--c-ink); }
.frm-rij:hover { background: var(--c-creme); }
.frm-rij.is-actief { background: var(--c-groen-t); }
.frm-rij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; cursor: default; }
.frm-rij--kop:hover { background: none; }
.frm-rij__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frm-rij__naam em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.frm-week { font-style: normal; font-size: .66rem; color: var(--c-groen-d); }

/* drawer-inhoud */
.frm-tabs { display: flex; gap: 5px; padding: 4px; background: var(--c-creme); border-radius: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.frm-tab { border: 1px solid transparent; background: none; border-radius: 9px; padding: 7px 12px; font: 600 .74rem var(--font-ui, Manrope); color: var(--c-ink-2); cursor: pointer; }
.frm-tab.is-actief { background: var(--c-paneel); border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; }
.frm-deel { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--c-lijn); padding: 12px 0; }
.frm-deel:first-of-type { border-top: 0; }
.frm-tekst { margin: 0; font-size: .78rem; color: var(--c-ink-2); line-height: 1.55; }
.frm-veldrij { display: flex; gap: 8px; align-items: center; font-size: .8rem; padding: 5px 0; }
.frm-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; }
.frm-code { border: 1px dashed var(--c-lijn); border-radius: 12px; padding: 10px 12px; font-size: .72rem; white-space: pre-wrap; word-break: break-all; background: var(--c-creme); }
.frm-knopjes { display: flex; gap: 8px; flex-wrap: wrap; }
.frm-inzrij { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 0; }
.frm-inzrij:first-child { border-top: 0; }
.frm-inzrij__tijd { font-size: .68rem; color: var(--c-ink-3); }
.frm-inzrij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .78rem; }
.frm-inzrij__wat span { color: var(--c-ink-2); font-size: .72rem; }
.frm-inzrij__wat em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.frm-bronrij { display: grid; grid-template-columns: 1.6fr .8fr .8fr .6fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--c-lijn); font-size: .78rem; align-items: center; }
.frm-bronrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; }
.frm-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; }

@media (max-width: 900px) {
  .frm { padding: 18px 14px 60px; }
  .frm-rij { grid-template-columns: 1fr auto; }
  .frm-rij > span:nth-child(3), .frm-rij > span:nth-child(4), .frm-rij > span:nth-child(5) { display: none; }
}

/* ── verkoopcockpit.css ── */
/* =====================================================================
   verkoopcockpit.css — Verkoopcockpit Buitendienst (spec 27-07, 5.1).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.vkc { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.vkc-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vkc-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.vkc-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.vkc-kopacties { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }

/* entiteit-toggle & datum-nav */
.vkc-ent { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius-pill); }
.vkc-entknop { border: var(--lijndikte) solid transparent; background: none; border-radius: var(--radius-pill); padding: 6px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.vkc-entknop.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); }
.vkc-datum { display: inline-flex; align-items: center; gap: 4px; }
.vkc-datum input { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 6px 9px; font: 600 .74rem var(--font-ui); background: #fff; color: var(--c-ink); }

/* tabs */
.vkc-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius); align-self: flex-start; }
.vkc-tab { border: var(--lijndikte) solid transparent; background: none; border-radius: 9px; padding: 7px 14px; font: 700 .76rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.vkc-tab.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); }

/* triagestrip */
.vkc-triage { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); box-shadow: var(--schaduw-tegel); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.vkc-triage__cellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.vkc-triage__cel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); }
.vkc-triage__cel.is-actief { border-color: var(--c-amber); background: var(--c-amber-t); }
.vkc-triage__cel > b { font-size: 1.15rem; flex: none; }
.vkc-triage__cel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vkc-triage__cel strong { font-size: .76rem; }
.vkc-triage__cel span { font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; }
.vkc-triage__ok { color: var(--c-groen-d); font-weight: 700; }

/* balk + rondesecties */
.vkc-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vkc-balk__notie { font-size: .7rem; color: var(--c-ink-3); }
.vkc-lijst { overflow: hidden; }
.vkc-ronde__kop { padding: 10px 14px 6px; background: var(--c-creme); border-top: var(--lijndikte) solid var(--c-lijn); }
.vkc-ronde:first-child .vkc-ronde__kop { border-top: 0; }
.vkc-rij { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.vkc-rij:hover { background: var(--c-creme); }
.vkc-rij.is-actief { background: var(--c-groen-t); }
.vkc-rij.is-telaat { border-left: 3px solid var(--c-rood); }
.vkc-rij:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.vkc-rij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vkc-rij__wat strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkc-rij__wat span { font-size: .7rem; color: var(--c-ink-3); }
.vkc-rij__bedrag { font-size: .78rem; }

/* blokken: notitieronde, opvolging, retour */
.vkc-blok { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); box-shadow: var(--schaduw-tegel); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.vkc-notrij { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.vkc-notrij:first-of-type { border-top: 0; }
.vkc-notrij > span { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.vkc-notitie { margin: 4px 0 0; padding: 8px 10px; background: var(--c-memo); border-radius: 9px; font-size: .76rem; line-height: 1.5; color: var(--c-ink-2); }

/* drawer-delen */
.vkc-deel { display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--c-lijn); padding: 12px 0; }
.vkc-deel:first-of-type { border-top: 0; }
.vkc-tekst { margin: 0; font-size: .8rem; color: var(--c-ink-2); line-height: 1.55; }
.vkc-laat { color: var(--c-terra-d); }
.vkc-context { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .78rem; }

/* statistieken-tegels */
.vkc-periode { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius-pill); }
.vkc-perknop { border: var(--lijndikte) solid transparent; background: none; border-radius: var(--radius-pill); padding: 6px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.vkc-perknop.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); }
.vkc-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.vkc-teg { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); }
.vkc-teg span { font-size: .68rem; font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.vkc-teg b { font-size: 1.2rem; }
.vkc-teg em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; }
.vkc-teg.is-groen b { color: var(--c-groen-d); }
.vkc-teg.is-amber { border-color: var(--c-amber); background: var(--c-amber-t); }
.vkc-rondetabel { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--c-ink-2); }
.vkc-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; }

@media (max-width: 900px) {
  .vkc { padding: 18px 14px 60px; }
  .vkc-rij { grid-template-columns: 1fr auto; }
  .vkc-rij > .chip:first-of-type, .vkc-rij__bedrag { display: none; }
}

/* ── kozijnoff.css ── */
/* kozijnoff.css — Kozijn-configurator (prototype v6 → app-tokens)
   Layout, dichtheid en interactie volgen het prototype exact; alle
   kleuren lopen via casa360-tokens.css zodat het scherm meekleurt met
   de tenant-huisstijl. De SVG-tekening zelf gebruikt RAL-waarden en
   glasweergave: dat zijn productkleuren (data), geen UI-kleuren.
   Vol-scherm werkscherm: uitgezonderd van de module-wortel-marge. */

.kozf { font-size: 14px; line-height: 1.5; }
.kozf .kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-amber); }
.koz-h1 { font-size: 19px; font-weight: 800; margin: 4px 0 14px; }
.koz-uitleg { font-size: 12.5px; color: var(--c-ink-3); margin: -6px 0 14px; }
.koz-smal { max-width: 640px; margin: 26px auto; padding: 0 20px; }
.koz-breed { max-width: 1180px; margin: 16px auto; padding: 0 20px; }
.koz-lijstwortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.koz-kaart { padding: 20px; }
.koz-kaart h2 { font-size: 14px; font-weight: 800; margin: 0 0 12px; }

/* ---- lijst ---- */
.koz-zoekbalk { display: flex; gap: 8px; align-items: center; margin: 12px 0 10px; }
.koz-zoekbalk input { flex: 1; max-width: 420px; height: 32px; font: 400 .78rem var(--font-ui); color: var(--c-ink);
  padding: 0 12px; border-radius: var(--radius); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); }
.koz-rij { display: grid; grid-template-columns: 130px 1.5fr 70px 100px 120px 130px; gap: 10px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.koz-rij:last-child { border-bottom: 0; }
.koz-rij:hover { background: var(--c-creme); }
.koz-rij--kop { cursor: default; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); }
.koz-rij--kop:hover { background: var(--c-paneel-2); }
.koz-rij__klant strong { display: block; font-size: .78rem; }
.koz-rij__klant span { font-size: .64rem; color: var(--c-ink-3); }
.koz-rij__nr, .koz-rij__versie { font-size: .68rem; }

/* ---- statuschips ---- */
.koz-statuschip { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.koz-st-concept { background: var(--let-t); color: var(--let); }   /* Zand §4: geel is memo, geen status */
.koz-st-verzonden { background: var(--c-sage-t); color: var(--c-groen-d); }
.koz-st-akkoord { background: var(--c-groen-t); color: var(--c-groen-d); }
.koz-st-inmeter { background: var(--c-terra-t); color: var(--c-terra-d); }
.koz-st-definitief { background: var(--c-ink); color: var(--c-creme); }
.koz-statuschip.ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.koz-statuschip.fout { background: var(--c-rood-t); color: var(--c-rood); }
.koz-statuschip.leeg { background: var(--c-lijn); color: var(--c-ink-3); }
.koz-statuschip.nieuw { background: var(--c-terra); color: #fff; }

/* ---- chrome: kop + voet ---- */
.kozf--doc { display: flex; flex-direction: column; min-height: calc(100vh - 0px); }
.koz-kop { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn-2);
  background: var(--c-paneel-2); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.koz-kop__id { font-weight: 700; font-size: 12px; }
.koz-rolwissel { display: flex; gap: 3px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; padding: 2px; }
.koz-rolwissel button { border: none; background: none; padding: 5px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-3); cursor: pointer; }
.koz-rolwissel button.aan { background: var(--c-ink); color: var(--c-creme); }
.koz-stepper { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.koz-stap { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--c-ink-3); border: none; background: none; cursor: pointer; }
.koz-stap .nr { width: 19px; height: 19px; border-radius: 50%; background: var(--c-lijn-2); color: var(--c-ink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.koz-stap.actief { background: var(--c-ink); color: var(--c-creme); }
.koz-stap.actief .nr { background: var(--c-terra); color: #fff; }
.koz-stap.klaar .nr { background: var(--c-groen); color: #fff; }
.koz-beheerknop { border: var(--lijndikte) solid var(--c-lijn-2); background: none; border-radius: 9px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--c-ink-3); cursor: pointer; }
.koz-bewaarstand { font-size: 10px; color: var(--c-ink-3); min-width: 64px; text-align: right; }
.koz-voet { position: sticky; bottom: 0; background: var(--c-paneel-2); border-top: var(--lijndikte) solid var(--c-lijn-2);
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; z-index: 20; margin-top: auto; }
.koz-voet__info { flex: 1; font-size: 12.5px; color: var(--c-ink-3); }
.koz-knop { border: none; border-radius: var(--radius); padding: 11px 22px; font-weight: 800; font-size: 13.5px; cursor: pointer; font-family: var(--font-ui); }
.koz-knop.primair { background: var(--c-ink); color: var(--c-creme); }
.koz-knop.groen { background: var(--c-groen); color: #fff; }
.koz-knop.terra { background: var(--c-terra); color: #fff; }
.koz-knop.stil { background: none; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); }
.koz-knop.klein { padding: 8px 14px; font-size: 12px; }
.koz-knop.breedvol { width: 100%; margin-bottom: 6px; }
.koz-knop:disabled { opacity: .4; cursor: default; }

/* ---- velden ---- */
.koz-veld { margin-bottom: 10px; }
.koz-veld label { display: block; font-size: 11px; font-weight: 700; color: var(--c-ink-3); margin-bottom: 3px; }
.koz-veld input, .koz-veld select, .koz-veld textarea { width: 100%; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 8px; padding: 8px 10px; background: #fff; font-family: var(--font-ui); font-size: 13px; color: var(--c-ink); }
.koz-rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.koz-rij3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.koz-kleurkeuze { display: flex; gap: 6px; flex-wrap: wrap; }
.koz-zwatch { display: flex; align-items: center; gap: 7px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px;
  padding: 6px 10px; background: var(--c-creme); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-ui); color: var(--c-ink); }
.koz-zwatch .bol { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--c-lijn-2); }
.koz-zwatch.aan { border-color: var(--c-ink); background: #fff; }

/* ---- stap 2: werkscherm ---- */
.koz-k2wrap { max-width: 1620px; margin: 0 auto; padding: 12px 20px; }
.koz-positiebalk { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 4px 2px 10px; }
.koz-postab { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--c-lijn-2); background: var(--c-creme);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.koz-postab.actief { border-color: var(--c-ink); background: #fff; }
.koz-postab .merk { font-size: 10.5px; font-weight: 700; background: var(--c-ink); color: var(--c-creme); border-radius: 5px; padding: 1px 6px; }
.koz-postab .pom { font-size: 12px; font-weight: 700; }
.koz-postab .pmaat { font-size: 10px; color: var(--c-ink-3); }
.koz-postab .del { border: none; background: none; color: var(--c-rood); font-size: 14px; padding: 0; cursor: pointer; }
.koz-postab.plus { border-style: dashed; color: var(--c-groen-d); font-weight: 800; font-size: 12.5px; background: none; cursor: pointer; font-family: var(--font-ui); }
.koz-k2grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; gap: 14px; }
@media (max-width: 1100px) { .koz-k2grid { grid-template-columns: 1fr; } }
.koz-paneel { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px; overflow: auto; max-height: calc(100vh - 218px); box-shadow: var(--schaduw-tegel); }
.koz-k2sectie { margin-bottom: 14px; }
.koz-k2kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.koz-k2kop .snr { width: 20px; height: 20px; border-radius: 50%; background: var(--c-ink); color: var(--c-creme); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.koz-k2kop b { font-size: 13px; }
.koz-k2kop .hint { font-size: 10.5px; color: var(--c-ink-3); margin-left: auto; }
.koz-segment { display: flex; gap: 4px; flex-wrap: wrap; }
.koz-segment button { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-2); cursor: pointer; font-family: var(--font-ui); }
.koz-segment button.aan { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }
.koz-vakeditor { background: var(--c-creme); border: 1.5px solid var(--c-terra); border-radius: 10px; padding: 10px; margin-top: 8px; }
.koz-vakeditor .vkop { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.koz-vakeditor .vsub { font-weight: 400; font-size: 10px; color: var(--c-ink-3); }
.koz-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.koz-chip { border: var(--lijndikte) solid var(--c-lijn-2); background: none; border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--c-ink-3); cursor: pointer; font-family: var(--font-ui); }
.koz-chip.aan { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }
.koz-chip.rooster.aan { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.koz-chip:disabled { opacity: .35; cursor: default; }
.koz-tekenvlak { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; min-height: 460px; box-shadow: var(--schaduw-tegel); }
.koz-tekenkop { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px; flex-wrap: wrap; }
.koz-tekenkop h1 { font-size: 15px; font-weight: 800; margin: 0; }
.koz-tekenkop .sub { font-size: 11.5px; color: var(--c-ink-3); }
.koz-tekenkop .tip { margin-left: auto; font-size: 10px; color: var(--c-terra-d); }
.kozf svg text { font-family: var(--font-mono); }
.koz-svgwrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.koz-presets { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.koz-presets button { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); border-radius: 8px; padding: 6px 11px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-2); cursor: pointer; font-family: var(--font-ui); }
.koz-presets button:hover { border-color: var(--c-ink); color: var(--c-ink); }
.koz-prijskolom { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 218px); overflow: auto; box-shadow: var(--schaduw-tegel); }
.koz-tabelinfo { font-size: 11px; color: var(--c-ink-2); margin: 6px 0 2px; }
.koz-buiten { color: var(--c-rood); }
.koz-grootprijs { font-family: var(--font-mono); font-size: 26px; font-weight: 700; margin: 2px 0 0; }
.koz-prijsregel { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px dotted var(--c-lijn-2); }
.koz-prijsregel .l { color: var(--c-ink-2); }
.koz-prijsregel.tot { border-bottom: none; border-top: 2px solid var(--c-ink); margin-top: 6px; padding-top: 8px; font-weight: 800; }
.koz-prijsregel.doorgestreept .r { text-decoration: line-through; color: var(--c-ink-3); font-weight: 400; }
.koz-handbadge { font-size: 9px; font-weight: 700; background: var(--c-terra); color: #fff; border-radius: 5px; padding: 1px 5px; }
.koz-tabelbadge { font-size: 9px; font-weight: 700; background: var(--c-ink); color: var(--c-creme); border-radius: 5px; padding: 1px 5px; }
.koz-margegoed { color: var(--c-groen-d); font-weight: 800; }
.koz-margefout { color: var(--c-rood); font-weight: 800; }
.koz-waarschuw { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-terra); border-radius: 9px; padding: 8px 10px; margin-top: 8px; font-size: 12px; color: var(--c-rood); font-weight: 700; }
.koz-memoblok { background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; padding: 8px 10px; font-size: 12px; }
.koz-sectie { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 10px; margin-top: 12px; }
.koz-plusbalk { width: 100%; max-width: 420px; border: 1px dashed var(--c-lijn-2); border-radius: 9px; background: none; padding: 8px; font-size: 12.5px; font-weight: 700; color: var(--c-groen-d); cursor: pointer; font-family: var(--font-ui); margin-top: 6px; }
.koz-plusbalk:hover { border-color: var(--c-groen); }

/* ---- stap 3: producten — compacte regels (verzoek Michiel 29-07) ---- */
.koz-prodlijst { max-width: 760px; }
.koz-prodrij { display: grid; grid-template-columns: 1fr 120px 90px 66px; gap: 10px; align-items: center;
  padding: 7px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.koz-prodrij:last-child { border-bottom: 0; }
.koz-prodrij .nm { font-size: 12.5px; font-weight: 600; }
/* niet ".pr" — provisie.css claimt die klasse als module-wortel */
.koz-prodrij .stukprijs { font-size: 10.5px; color: var(--c-ink-3); text-align: right; white-space: nowrap; }
.koz-prodrij .tot { font-size: 11px; font-weight: 700; text-align: right; }
.koz-prodrij input { width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 5px 6px; background: #fff; text-align: right; font-family: var(--font-mono); font-size: 12px; }
.koz-prodrij.gekozen { background: var(--c-groen-t); }
.koz-prodrij.gekozen .nm { font-weight: 800; }
/* label alleen voor de schermlezer — geen grid-item */
.koz-verborgenlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.koz-verborgenlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- stap 4: controle ---- */
.koz-controle { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .koz-controle { grid-template-columns: 1fr; } }
.koz-tabelwrap { overflow-x: auto; }
.koz-margetabel, .koz-difftabel { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.koz-margetabel th, .koz-difftabel th { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); text-align: left; padding: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); }
.koz-margetabel td, .koz-difftabel td { padding: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.koz-margetabel td.num, .koz-margetabel th.num, .koz-difftabel td.num, .koz-difftabel th.num { text-align: right; }
.koz-margetabel input { width: 78px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 6px; padding: 4px 5px; background: #fff; text-align: right; font-family: var(--font-mono); font-size: 11px; }
.koz-margetot td, .koz-difftot td { font-weight: 800; }
.koz-difftabel tr.gewijzigd td { background: var(--c-amber-t); }
.koz-difftabel tr.nieuw td { background: var(--c-terra-t); }
.koz-delta { font-weight: 700; }
.koz-delta.plus { color: var(--c-terra-d); }
.koz-delta.min { color: var(--c-groen-d); }
.koz-inmeetcontrole { margin-bottom: 16px; }
.koz-inmeetcontrole.is-afwijkend { border-color: var(--c-terra); }
.koz-inmeetcontrole.is-conform { border-color: var(--c-groen); }
.koz-inmeetacties { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.koz-intern { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; }
.koz-intern summary { font-weight: 800; font-size: 12.5px; cursor: pointer; color: var(--c-ink-2); }
.koz-versierij { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px dotted var(--c-lijn-2); }
.koz-versierij .vnr { font-weight: 700; background: var(--c-lijn); border-radius: 5px; padding: 1px 6px; font-size: 10.5px; }
.koz-versierij .vtijd { color: var(--c-ink-3); font-size: 11px; flex: 1; }
.koz-versierij .vtot { font-size: 11px; }
.koz-versierij button { border: none; background: none; color: var(--c-groen-d); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font-ui); }
.koz-procesregel { font-size: 12.5px; color: var(--c-ink-2); margin-bottom: 12px; }
.koz-proceskn .koz-memoblok { margin-bottom: 6px; }

/* ---- offertevel ---- */
.koz-offertevel { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 40px 48px; box-shadow: var(--schaduw-tegel); }
.koz-ofkop { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--c-ink); padding-bottom: 16px; margin-bottom: 20px; gap: 12px; }
.koz-ofmerk { font-size: 21px; font-weight: 800; margin: 0; }
.koz-ofklant { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; }
.koz-ofmeta { text-align: right; font-size: 11px; color: var(--c-ink-2); line-height: 1.7; }
.koz-ofblok { margin-bottom: 24px; }
.koz-ofblok h3 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.koz-ofkozijn { display: grid; grid-template-columns: 210px 1fr; gap: 16px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px; margin-bottom: 11px; background: var(--c-creme); }
@media (max-width: 700px) { .koz-ofkozijn { grid-template-columns: 1fr; } }
.koz-ofkozijn .specs { font-size: 12px; }
.koz-ofkozijn .specs table { width: 100%; border-collapse: collapse; }
.koz-ofkozijn .specs td { padding: 2px 0; vertical-align: top; }
.koz-ofkozijn .specs td:first-child { color: var(--c-ink-3); width: 110px; }
.koz-ofspecrij { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.koz-merkchip { background: var(--c-ink); color: var(--c-creme); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; }
.koz-ofprijs { margin-left: auto; font-weight: 700; }
.koz-oftotaal { margin-left: auto; width: 320px; max-width: 100%; }
.koz-ofvoet { border-top: var(--lijndikte) solid var(--c-lijn-2); margin-top: 24px; padding-top: 12px; font-size: 10.5px; color: var(--c-ink-3); line-height: 1.7; }
.koz-tek { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; padding: 8px; display: flex; align-items: center; justify-content: center; }

/* ---- inmeting ---- */
.koz-imnr { font-size: 13px; color: var(--c-ink-3); }
.koz-inmeetkop { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 18px; display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; box-shadow: var(--schaduw-tegel); }
.koz-inmeetkop .klant { font-weight: 800; font-size: 15px; }
.koz-inmeetkop .adres { color: var(--c-ink-3); font-size: 12.5px; }
.koz-imref { font-size: 12px; color: var(--c-ink-3); }
.koz-inmeetpos { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; display: grid; grid-template-columns: 230px 1fr; gap: 16px; box-shadow: var(--schaduw-tegel); }
@media (max-width: 800px) { .koz-inmeetpos { grid-template-columns: 1fr; } }
.koz-inmeetpos.klaar { border-color: var(--c-groen); }
.koz-inmeetpos.vervallen { border-color: var(--c-rood); opacity: .75; }
.koz-imkoprij { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.koz-indicatie { font-size: 11px; color: var(--c-ink-3); }
.koz-imvakken { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.koz-vak { background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; padding: 8px; }
.koz-vak .kop { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.koz-vak .kop b { font-size: 12px; }
.koz-vak select { width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 5px 7px; background: #fff; margin-bottom: 5px; font-family: var(--font-ui); font-size: 12px; }

/* ---- beheer ---- */
.koz-beheer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .koz-beheer { grid-template-columns: 1fr; } }
.koz-brij { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; margin-bottom: 7px; font-size: 12.5px; }
.koz-brij span { color: var(--c-ink-2); }
.koz-brij input { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: #fff; text-align: right; font-family: var(--font-mono); }
.koz-catrij { display: grid; grid-template-columns: 1fr 64px 80px 26px; gap: 6px; margin-bottom: 6px; }
.koz-catrij input, .koz-catrij select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 5px 7px; background: #fff; font-size: 12px; font-family: var(--font-ui); }
.koz-catrij input.num { text-align: right; font-family: var(--font-mono); }
.koz-catrij .x { border: none; background: none; color: var(--c-rood); font-size: 15px; cursor: pointer; }
.koz-matrixkies { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.koz-matrixwrap { max-height: 420px; overflow: auto; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; }
.koz-matrix { border-collapse: collapse; font-size: 10.5px; }
.koz-matrix th { position: sticky; top: 0; background: var(--c-paneel-2); padding: 4px 6px; font-weight: 700; color: var(--c-ink-2); text-align: right; z-index: 1; }
.koz-matrix th:first-child { left: 0; z-index: 2; }
.koz-matrix td { padding: 1px; }
.koz-matrix input { width: 58px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 5px; padding: 3px 4px; background: #fff; text-align: right; font-family: var(--font-mono); font-size: 10.5px; }
.koz-hsacties { display: flex; gap: 8px; margin-top: 12px; }

/* ---- toegankelijkheid + beweging ---- */
.kozf button:focus-visible, .kozf input:focus-visible, .kozf select:focus-visible, .kozf textarea:focus-visible {
  outline: var(--focus-ring, 3px solid var(--c-groen)); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .koz-postab, .koz-chip, .koz-stap, .koz-knop, .koz-zwatch { transition: background .16s ease, border-color .16s ease, color .16s ease; }
}

/* ---- print: alleen het offertevel ---- */
@media print {
  .koz-actief .nav, .koz-actief .koz-kop, .koz-actief .koz-voet, .koz-actief .koz-intern,
  .koz-actief .kozf .kicker:first-child, .koz-actief .koz-h1, .koz-actief .koz-inmeetcontrole,
  .koz-actief .koz-controle > div:last-child, .koz-actief #toast { display: none !important; }
  .koz-actief .content { padding: 0 !important; }
  .koz-actief .koz-controle { grid-template-columns: 1fr; }
  .koz-actief .koz-offertevel { border: none; box-shadow: none; padding: 0; }
  .koz-actief .koz-breed { margin: 0; padding: 0; max-width: none; }
}

/* ---- prijsbeheer v2: bulkbalk + compacte cataloguslijst ---- */
.koz-bulkbalk { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--c-lijn-2); border-radius: 9px; flex-wrap: wrap; }
.koz-bulkbalk input { width: 110px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px;
  padding: 6px 8px; background: #fff; text-align: right; font-family: var(--font-mono); }
.koz-bulkbalk span { font-size: 12px; color: var(--c-ink-2); }
.koz-catwrap { max-height: 300px; overflow: auto; }

/* ---- fase 3: maat-slepen, vak-toolbar, preset-start, inmeet/fabriek ---- */
.koz-svgwrap { position: relative; }
.koz-vaktool { position: absolute; display: flex; gap: 4px; align-items: center; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; padding: 4px 6px; box-shadow: var(--schaduw-tegel); z-index: 5; }
.koz-vaktool select { font: 600 11px var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 4px 6px; background: #fff; color: var(--c-ink); max-width: 120px; }
.koz-presethint { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--c-groen-t);
  border: var(--lijndikte) solid var(--c-groen); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; font-size: 12px; color: var(--c-groen-d); }
.koz-presethint button { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 8px;
  padding: 5px 10px; font: 700 11.5px var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.koz-presethint button:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.koz-presethint__x { margin-left: auto; border: none !important; background: none !important; color: var(--c-ink-3) !important; }
.koz-imrij { grid-template-columns: 130px 1.4fr 80px 1fr 130px 130px; }
.koz-imbalk { display: block; height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.koz-imbalk b { display: block; height: 100%; background: var(--c-groen); border-radius: 99px; }
.koz-forij { display: grid; grid-template-columns: 130px 1.4fr 1fr 150px; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.koz-forij:last-child { border-bottom: 0; }
.koz-forij2 { grid-template-columns: 110px 1.3fr 1fr 90px 130px 170px; cursor: default; }
.koz-forij2:hover { background: #fff; }
.koz-foacties { display: flex; gap: 6px; justify-content: flex-end; }

/* ═══ IM7 · de fabrieksorder in de lijst ════════════════════════════
   Het formaat achter de fabrieksnaam (PDF of EOS), en de teller onder de
   leverweek. Rood pas over de norm: daaronder is het een gewone stand
   van zaken, daarboven staat de levertijd op losse schroeven. */
.koz-fofmt { font-style: normal; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .06em; color: var(--c-ink-3); margin-left: 6px; }
.koz-folever { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.koz-fotel { font-style: normal; font-size: .64rem; line-height: 1.4; color: var(--c-ink-3); }
.koz-fotel.is-stop { color: var(--c-rood); font-weight: 700; }

/* ── keten.css ── */
/* keten.css — Verkoopketen (prototype v7 → app-tokens)
   Bouwt voort op de kozf-basis (koz-knop, koz-kaart, koz-prijsregel …)
   uit kozijnoff.css; hier alleen wat de keten zelf nodig heeft. */

.vkk-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

/* ---- tabs + tegels ---- */
.vkk-tabs { display: flex; gap: 6px; margin: 12px 0; }
.vkk-tab { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 7px 16px; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; }
.vkk-tab .mono { font-size: .64rem; }
.vkk-tab.aan { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }
.vkk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vkk-tegel { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; box-shadow: var(--schaduw-tegel); }
.vkk-tegel.aan { border-color: var(--c-ink); }
.vkk-tegel .tt { display: flex; align-items: center; gap: 8px; font-size: .72rem; }
.vkk-tegel .tt .mono { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); }
.vkk-tegel .tgroot { font-size: 1.3rem; font-weight: 700; margin: 4px 0 2px; }
.vkk-tegel .tsub { font-size: .66rem; color: var(--c-ink-3); line-height: 1.6; }

/* ---- categorie-chips + status ---- */
.vkk-cat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.vkk-cat.is-kozijnen { background: var(--c-terra-t); color: var(--c-terra-d); }
.vkk-cat.is-isolatie { background: var(--c-groen-t); color: var(--c-groen-d); }
.vkk-cat.is-overig { background: var(--c-lijn); color: var(--c-ink-2); }
.vkk-st { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.vkk-st-concept { background: var(--let-t); color: var(--let); }   /* Zand §4: geel is memo, geen status */
.vkk-st-verzonden { background: var(--c-sage-t); color: var(--c-groen-d); }
.vkk-st-akkoord { background: var(--c-groen-t); color: var(--c-groen-d); }
.vkk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.vkk-dot.is-groen { background: var(--c-groen); }
.vkk-dot.is-oranje { background: var(--c-amber); }
.vkk-dot.is-rood { background: var(--c-rood); }

/* ---- lijstrijen ---- */
.vkk-rij { display: grid; grid-template-columns: 120px 1.1fr 130px 1.3fr 110px 110px; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .76rem; }
.vkk-oprij { display: grid; grid-template-columns: 110px 1fr 1.2fr 90px 90px 90px 90px 90px 110px; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; }
.vkk-rij:hover, .vkk-oprij:hover { background: var(--c-creme); }
.vkk-rij:last-child, .vkk-oprij:last-child { border-bottom: 0; }
.vkk-rij--kop { cursor: default; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); }
.vkk-rij--kop:hover { background: var(--c-paneel-2); }
.vkk-oprij small { color: var(--c-ink-3); font-size: .62rem; }
.vkk-oprij.m-rood { box-shadow: inset 3px 0 0 var(--c-rood); }
.vkk-oprij.m-oranje { box-shadow: inset 3px 0 0 var(--c-amber); }
.vkk-ms { font-size: .7rem; color: var(--c-ink-2); }

/* ---- offerte-detail ---- */
.vkk-tweekol { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .vkk-tweekol { grid-template-columns: 1fr; } }
.vkk-maatregel { display: grid; grid-template-columns: 1.6fr 150px 100px 100px 26px; gap: 7px; align-items: center; padding: 4px 0; }
.vkk-maatregel--kop { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); padding: 2px 0; }
.vkk-maatregel input, .vkk-maatregel select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px;
  padding: 6px 8px; background: #fff; font-family: var(--font-ui); font-size: 12px; color: var(--c-ink); min-width: 0; }
.vkk-maatregel input.num { text-align: right; font-family: var(--font-mono); }
.vkk-maatregel input:disabled, .vkk-maatregel select:disabled { background: var(--c-creme); color: var(--c-ink-2); }
.vkk-x { border: none; background: none; color: var(--c-rood); font-size: 15px; cursor: pointer; }
.vkk-koflink { color: var(--c-terra-d); font-weight: 700; text-decoration: none; }
.vkk-koflink:hover { text-decoration: underline; }
.vkk-relblok { font-size: 12px; color: var(--c-ink-3); margin-top: 10px; line-height: 1.6; }
.vkk-catknoppen { display: grid; gap: 8px; }
.vkk-catknoppen .koz-knop { text-align: left; }
.vkk-catknoppen .koz-knop span { font-weight: 500; font-size: 11px; }

/* ---- splitsing ---- */
.vkk-splitsrij { display: grid; grid-template-columns: 1fr 110px 110px 150px; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.vkk-splitsrij small { color: var(--c-ink-3); }
.vkk-splitsrij .mono { text-align: right; }
.vkk-ink { color: var(--c-ink-3); font-size: .68rem; }
.vkk-groepsel { display: flex; gap: 4px; justify-content: flex-end; }
.vkk-groepsel button { width: 30px; height: 30px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px;
  background: #fff; font: 700 .72rem var(--font-mono); color: var(--c-ink-3); cursor: pointer; }
.vkk-groepsel button.aan { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }

/* ---- opdracht-detail: facturen ---- */
.vkk-factuurrij { display: grid; grid-template-columns: 110px 1fr 100px 110px 110px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.vkk-factuurrij small { color: var(--c-ink-3); font-size: .62rem; }
.vkk-fb { text-align: right; font-weight: 700; }
.vkk-factuurknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .vkk-tab, .vkk-tegel, .vkk-rij, .vkk-oprij, .vkk-groepsel button { transition: background .16s ease, border-color .16s ease, color .16s ease; }
}

/* ---- verkoopwerkbank (gecombineerde lijsten) ---- */
.vkb-rij { display: grid; grid-template-columns: 140px 130px 1fr 1.2fr 110px 120px; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; }
.vkb-oprij { display: grid; grid-template-columns: 130px 110px 1fr 1.2fr 95px 95px 95px 120px; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; }
.vkb-rij:hover, .vkb-oprij:hover { background: var(--c-creme); }
.vkb-rij:last-child, .vkb-oprij:last-child { border-bottom: 0; }

/* ---- prijsregels-hub ---- */
.pr-schemakop { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; font-size: .78rem; }
.pr-goed { color: var(--c-groen-d); font-weight: 700; }
.pr-fout { color: var(--c-rood); font-weight: 700; }
.pr-schemarij { display: grid; grid-template-columns: 1fr 80px 26px; gap: 6px; margin-bottom: 5px; }
.pr-catrij { display: grid; grid-template-columns: 1fr 140px 90px 26px; gap: 6px; margin-bottom: 5px; }
.pr-uitvrij { display: grid; grid-template-columns: 1fr 26px; gap: 6px; margin-bottom: 5px; max-width: 300px; }
.pr-schemarij input, .pr-catrij input, .pr-catrij select, .pr-uitvrij input {
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: #fff;
  font-family: var(--font-ui); font-size: 12px; color: var(--c-ink); min-width: 0; }
.pr-schemarij input.num, .pr-catrij input.num { text-align: right; font-family: var(--font-mono); }

/* V8 · filterchips en de verkoper in de gecombineerde lijsten */
.vkb-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.vkb-flabel { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; margin-right: 3px; }
.vkb-flabel + .vkb-chip { margin-right: 2px; }
.vkb-chip { border: var(--lijndikte) solid var(--c-lijn); background: #fff; border-radius: 99px;
  padding: 3px 11px; font-size: .68rem; font-family: inherit; cursor: pointer; color: var(--c-ink-2);
  transition: border-color 160ms ease, background 160ms ease; }
.vkb-chip:hover { border-color: var(--c-groen); }
.vkb-chip.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); font-weight: 700; }
.vkb-verk, .vkb-vb { font-style: normal; display: block; font-size: .64rem; color: var(--c-ink-3); line-height: 1.4; }
.vkb-vb { color: var(--c-amber); }

/* ── instroom.css ── */
/* instroom.css — werkruimte Instroom (Scans | Marketing) */
.in-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.in-h1 { font-size: 1.3rem; margin: 2px 0 0; letter-spacing: -.02em; }
.in-uitleg { font-size: .8rem; color: var(--c-ink-3); margin: 6px 0 16px; line-height: 1.55; max-width: 720px; }
.in-zoekbalk { margin: 12px 0 10px; }
.in-zoekbalk input { width: 100%; max-width: 420px; height: 32px; font: 400 .78rem var(--font-ui); color: var(--c-ink);
  padding: 0 12px; border-radius: var(--radius); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); }
.in-rij { display: grid; grid-template-columns: 110px 1.2fr 1.6fr 120px 110px 100px; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.in-rij:last-child { border-bottom: 0; }
.in-rij:hover { background: var(--c-creme); }
.in-rij--kop { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); }
.in-rij--kop:hover { background: var(--c-paneel-2); }
.in-bron { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; background: var(--c-paneel); color: var(--c-ink-2);
  border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.in-wie strong { display: block; font-size: .78rem; }
.in-wie span { font-size: .62rem; color: var(--c-ink-3); }
.in-ctx { font-size: .7rem; color: var(--c-ink-2); }
.in-utm { font-style: normal; font-size: .58rem; color: var(--c-terra-d); background: var(--c-terra-t); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.in-relok { font-size: .66rem; font-weight: 700; color: var(--c-groen-d); }
.in-relnee { font-size: .64rem; color: var(--c-ink-3); }
.in-st { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; }
.in-st.is-nieuw { background: var(--c-amber-t); color: var(--c-amber); }
.in-st.is-op { background: var(--c-groen-t); color: var(--c-groen-d); }
.in-st.is-af { background: var(--c-lijn); color: var(--c-ink-3); }
.in-acties { text-align: right; }

/* ── pijplijnlens.css ── */
/* pijplijnlens.css — pijplijn als berekende lens (V3 fase 4) */
.pl-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 18px; }
.pl-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; }
.pl-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 72ch; margin: -6px 0 0; }

.pl-funnel { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.pl-fase { display: grid; grid-template-columns: 220px 1fr 150px auto; align-items: center; gap: 14px;
  padding: 11px 12px; border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: inherit; text-align: left; cursor: pointer; color: var(--c-ink);
  transition: background var(--overgang), border-color var(--overgang); }
.pl-fase:hover { background: var(--c-paneel); border-color: var(--c-lijn); }
.pl-fase__naam { font-weight: 700; font-size: 13.5px; display: flex; align-items: baseline; gap: 10px; }
.pl-fase__naam b { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-3); font-weight: 600; }
.pl-fase__balk { height: 14px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.pl-fase__balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-sage);
  transition: width 180ms ease; }
.pl-fase:nth-child(3) .pl-fase__balk i { background: var(--c-terra); }
.pl-fase:nth-child(4) .pl-fase__balk i { background: var(--c-groen); }
.pl-fase__n { font-size: 13px; font-weight: 700; text-align: right; }
.pl-fase__sub { font-size: 12px; color: var(--c-ink-2); white-space: nowrap; }
.pl-fase:hover .pl-fase__sub { color: var(--c-groen-d); }

.pl-bronnen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; }
.pl-bron { font-size: 12.5px; color: var(--c-ink-2); border: 1px solid var(--c-lijn); border-radius: var(--radius-pill); padding: 4px 12px; }
.pl-bron b { color: var(--c-ink); margin-right: 4px; }
.pl-voetnoot { font-size: 12px; color: var(--c-ink-2); margin: 0; }
.pl-voetnoot a { color: var(--c-groen-d); }

@media (max-width: 900px) {
  .pl-fase { grid-template-columns: 1fr; gap: 6px; }
  .pl-fase__n { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-fase, .pl-fase__balk i { transition: none; }
}

/* ---- delta-beeld (aanvulling 10-08 · CRM-patroon ②) ---- */
.pl-deltagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.pl-deltablok{padding:14px 16px}
.pl-deltakop{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.pl-deltakop b{font-size:.85rem}
.pl-deltakop span{font-size:.7rem;color:var(--ink3)}
.pl-deltarij{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--grijs);font-size:.78rem}
.pl-deltarij:last-child{border-bottom:0}
.pl-deltarij>span:nth-child(2){flex:1;min-width:0}
.pl-ref{font-size:.72rem;text-decoration:none;color:var(--accent-d)}
.pl-ref:hover{text-decoration:underline}
.pl-fijn{font-size:.7rem;color:var(--ink3);padding:6px 0}
/* te lang in de fase: amber, mét het aantal dagen — kleur draagt nooit alleen */
.pl-deltarij.is-hang .pl-hangdagen{background:var(--let-t);color:var(--let);font-weight:700;
  padding:2px 8px;border-radius:99px;font-size:.7rem}

/* ── wdb.css ── */
/* =====================================================================
   wdb.css — Module 3.5 · Woningdatabase & selectie. Tokens only.
   Prefix wdb-. "Slate"-accent uit het prototype → groen-d/ink-tokens.
===================================================================== */

.wdb { max-width: 1280px; margin: 0 auto; padding: 26px 32px 48px; }
.wdb-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.wdb-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.wdb-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; }
.wdb-kopacties { display: flex; gap: 9px; }
.wdb-groen { color: var(--c-groen-d); }
.wdb-slate { color: var(--c-ink-2); }
.wdb-amber { color: var(--c-amber); }

/* connector-balk (patroon comm-koppelingen) */
.wdb-connectors { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; }
.wdb-connector { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.wdb-connector i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); }
.wdb-connector i.is-groen { background: var(--c-groen); }
.wdb-connector strong { font-size: .72rem; color: var(--c-ink); }
.wdb-connector.is-stil { opacity: .7; }

/* schaal-kaart */
.wdb-schaal { display: flex; align-items: center; gap: 20px; padding: 13px 20px; }
.wdb-schaal > div strong { display: block; font-size: 1.15rem; letter-spacing: -.01em; }
.wdb-schaal > div span { font: 600 .62rem var(--font-ui); color: var(--c-ink-3); }
.wdb-schaal > i { width: 1px; height: 34px; background: var(--c-lijn-2); }

/* database-tabel */
.wdb-werkbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wdb-zoek { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); }
.wdb-zoek span { color: var(--c-ink-3); }
.wdb-zoek input { flex: 1; border: none; background: transparent; font: 500 .78rem var(--font-ui); color: var(--c-ink); }
.wdb-teller { font-size: .64rem; color: var(--c-ink-3); }
.wdb-tabel { overflow: hidden; padding: 0; }
.wdb-rij { display: grid; grid-template-columns: 118px 1.3fr 52px 58px 96px 84px 150px 1.2fr; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 18px; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.wdb-rij:hover { background: var(--c-creme); }
.wdb-rij--kop { cursor: default; background: var(--c-creme); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.wdb-rij--kop:hover { background: var(--c-creme); }
.wdb-rij > .mono { font-size: .68rem; }
.wdb-rij__adres { font: 600 .74rem var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdb-rij > span { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.wdb-rij .chip { font-size: .56rem; }
.wdb-rij__tags { font-size: .6rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdb-rij__tags em { font-style: normal; color: var(--c-lijn-2); }
.wdb-voetnoot { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin-top: 10px; }
.wdb-voetnoot a { color: var(--c-groen-d); font-weight: 700; }

/* woningkaart */
.wdb-detail { margin-top: 14px; padding: 22px 26px; }
.wdb-detail__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 16px; }
.wdb-detail__kop h1 { margin: 4px 0 2px; font-size: 1.25rem; }
.wdb-detail__kop > div > span { font: 500 .76rem var(--font-ui); color: var(--c-ink-2); }
.wdb-detail__legenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.wdb-detail__legenda strong { font-size: .8rem; }
.wdb-detail__legenda .mono { display: inline-flex; align-items: center; gap: 5px; font-size: .6rem; color: var(--c-ink-2); }
.wdb-detail__legenda i, .wdb-veld__bron i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.wdb-detail i.is-bag, .wdb-veld__bron i.is-bag { background: var(--c-groen-d); }
.wdb-detail i.is-3dbag, .wdb-veld__bron i.is-3dbag { background: var(--c-ink-2); }
.wdb-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 11px; margin-bottom: 22px; }
.wdb-veld { padding: 12px 14px; border-radius: 11px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.wdb-veld__lbl { display: block; font: 600 .64rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 4px; }
.wdb-veld strong { display: block; font-size: .86rem; margin-bottom: 7px; }
.wdb-veld__bron { display: inline-flex; align-items: center; gap: 5px; font: 600 .6rem var(--font-mono); color: var(--c-ink-2); }
.wdb-detail__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 20px; }
@media (max-width: 800px) { .wdb-detail__duo { grid-template-columns: 1fr; } }
.wdb-detail__duo strong { display: block; font-size: .8rem; margin-bottom: 9px; }
.wdb-relatie { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.wdb-relatie i { width: 30px; height: 30px; border-radius: 50%; background: var(--c-groen-d); color: #fff; display: grid; place-items: center; font-style: normal; }
.wdb-relatie strong { margin: 0; font-size: .76rem; }
.wdb-relatie span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.wdb-leegrelatie { padding: 12px 14px; border-radius: 10px; background: var(--c-creme); border: 1.5px dashed var(--c-lijn-2); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.wdb-tagwolk { display: flex; flex-wrap: wrap; gap: 7px; }
.wdb-tagwolk .chip { font-size: .58rem; }
.wdb-tls { margin: 10px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.wdb-tl { display: flex; gap: 13px; align-items: flex-start; }
.wdb-tl i { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: .68rem; color: #fff; background: var(--c-ink-3); }
.wdb-tl i.is-slate { background: var(--c-ink-2); }
.wdb-tl i.is-groen { background: var(--c-groen-d); }
.wdb-tl strong { display: block; font-size: .76rem; }
.wdb-tl .mono { font-size: .62rem; color: var(--c-ink-3); }
.wdb-survivorship { padding: 11px 14px; border-radius: 10px; background: var(--c-groen-t); font: 500 .7rem/1.5 var(--font-ui); }

/* bouwer */
.wdb-bouwgrid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .wdb-bouwgrid { grid-template-columns: 1fr; } }
.wdb-paneel { padding: 17px 18px; margin-bottom: 14px; }
.wdb-paneel > .kicker { display: block; margin-bottom: 13px; }
.wdb-paneel > strong { display: block; font-size: .8rem; margin-bottom: 12px; }
.wdb-flabel { display: block; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); margin: 12px 0 7px; }
.wdb-flabel:first-of-type { margin-top: 0; }
.wdb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wdb-chips--vol .wdb-chip { flex: 1; text-align: center; }
.wdb-chip { padding: 6px 12px; border-radius: 8px; font: 600 .7rem var(--font-ui); cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.wdb-chip.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-d); color: #fff; }
.wdb-chip.is-slate.is-actief { border-color: var(--c-ink-2); background: var(--c-ink-2); }
.wdb-chip.is-amber.is-actief { border-color: var(--c-amber); background: var(--c-amber); }
.wdb-bjrij { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wdb-stapper { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px; background: var(--c-paneel); }
.wdb-stapper button { width: 22px; height: 22px; border: none; border-radius: 6px; background: #fff; cursor: pointer; font: 700 .8rem var(--font-ui); color: var(--c-ink-2); }
.wdb-stapper .mono { font-size: .8rem; font-weight: 700; min-width: 38px; text-align: center; }

.wdb-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.wdb-telling { border-radius: 16px; background: var(--c-ink); color: #fff; padding: 20px; box-shadow: var(--schaduw-tegel); }
.wdb-telling .kicker { color: color-mix(in srgb, #fff 60%, transparent); }
.wdb-telling > strong { display: block; font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; margin: 9px 0 3px; }
.wdb-telling > span { font: 600 .74rem var(--font-ui); color: color-mix(in srgb, #fff 78%, transparent); }
.wdb-telling__net { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, #fff 10%, transparent); margin: 12px 0; }
.wdb-telling__net span { font: 600 .66rem var(--font-ui); color: color-mix(in srgb, #fff 72%, transparent); }
.wdb-telling__net strong { font-size: .9rem; }
.wdb-telling p { margin: 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, #fff 16%, transparent); font: 500 .68rem/1.5 var(--font-ui); color: color-mix(in srgb, #fff 62%, transparent); }
.wdb-actie { width: 100%; justify-content: center; }
.wdb-actierij { display: flex; gap: 8px; }
.wdb-actierij .btn { flex: 1; justify-content: center; }
.wdb-paneel--saved { margin-bottom: 0; }
.wdb-doelgroep { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; }
.wdb-doelgroep > span:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wdb-doelgroep strong { font-size: .74rem; }
.wdb-doelgroep em { font-style: normal; font-size: .62rem; color: var(--c-groen-d); white-space: nowrap; }
.wdb-doelgroep__f { display: block; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdb-avg { font-size: .62rem; color: var(--c-ink-3); padding: 0 4px; margin: 0; }

/* brief */
.wdb-briefkolom { max-width: 760px; margin-top: 14px; }
.wdb-brief__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wdb-brief__kop .mono { font-size: 1.1rem; }
.wdb-sups { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 15px; }
.wdb-sup { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.wdb-sup.is-aan { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.wdb-sup i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .62rem; color: #fff; border: 1.5px solid var(--c-lijn-2); }
.wdb-sup.is-aan i { border-color: var(--c-groen-d); background: var(--c-groen-d); }
.wdb-sup span { flex: 1; font: 600 .74rem var(--font-ui); }
.wdb-sup em { font-style: normal; font-size: .7rem; color: var(--c-amber); }
.wdb-brief__som { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: 11px; background: var(--c-ink); color: #fff; }
.wdb-brief__som span { font: 600 .72rem var(--font-ui); color: color-mix(in srgb, #fff 80%, transparent); }
.wdb-brief__som strong { font-size: 1.2rem; }
.wdb-klaar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 13px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.wdb-klaar i { width: 34px; height: 34px; border-radius: 50%; background: var(--c-groen-d); color: #fff; display: grid; place-items: center; font-style: normal; flex: none; }
.wdb-klaar strong { display: block; font-size: .8rem; }
.wdb-klaar span { font: 500 .7rem/1.5 var(--font-ui); color: var(--c-ink-2); }

/* tags */
.wdb-taggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; margin-top: 14px; }
.wdb-taggroep { padding: 0; overflow: hidden; }
.wdb-taggroep__kop { padding: 14px 17px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.wdb-taggroep__kop strong { display: block; font-size: .8rem; }
.wdb-taggroep__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.wdb-tag { padding: 13px 17px 0; }
.wdb-tag:last-child { padding-bottom: 13px; }
.wdb-tag > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wdb-tag .mono { font-size: .72rem; font-weight: 600; }
.wdb-tag .chip { font-size: .52rem; text-transform: uppercase; letter-spacing: .05em; }
.wdb-tag__balk { height: 4px; border-radius: 3px; background: var(--c-paneel); margin-bottom: 5px; }
.wdb-tag__balk i { display: block; height: 100%; border-radius: 3px; background: var(--c-groen); }
.wdb-tag__balk i.is-amber { background: var(--c-amber); }
.wdb-tag__balk i.is-groen-licht { background: var(--c-groen); opacity: .6; }
.wdb-tag__balk i.is-stil { background: var(--c-lijn-2); }
.wdb-tag em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

/* ---- live-laag (vereenvoudiging c, 21-07): landelijk register ---- */
.wdb-rij--live { grid-template-columns: 76px 1.6fr 52px 58px 150px 84px 100px; }
.wdb-zoek--klein { margin-top: 9px; flex: none; }
.wdb-sup.is-stil { opacity: .55; cursor: default; }
.wdb-verfijn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; margin: 2px 0 4px; }
.wdb-verfijn label { display: flex; align-items: center; gap: 7px; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; }
.wdb-verfijn input[type="number"] { width: 72px; padding: 6px 8px; border-radius: 8px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font: 600 .7rem var(--font-ui); color: var(--c-ink); }
.wdb-verfijn__vink { grid-column: 1 / -1; }
.wdb-verfijn input[type="checkbox"] { accent-color: var(--c-groen-d); width: 15px; height: 15px; }

/* ---- uitleveringslog + Postfilter-bewijs (besluit 10-08) ---- */
.wdb-sup.is-vast { cursor: default; opacity: .92; }
.wdb-uitl { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--grijs); font-size: .76rem; flex-wrap: wrap; }
.wdb-uitl > span:nth-child(2) { flex: 1; min-width: 0; }
.wdb-uitl__sup { color: var(--ink3); font-style: normal; margin-left: 8px; }
.wdb-uitl__knop { padding: 4px 10px; font-size: .7rem; }

/* ---- fase 2 · houdbaarheid: verlopen claims doorgestreept, ouderdom erbij ---- */
.wdb-veld.is-verlopen strong { text-decoration: line-through; color: var(--ink3); }
.wdb-veld__oud { font-style: normal; font-size: .62rem; color: var(--ink3); }

/* ---- fase 3 · afgeleide claims: gemarkeerd, nooit een belofte ---- */
.wdb-veld.is-afgeleid strong { color: var(--ink2); }
.wdb-veld.is-afgeleid { border-style: dashed; }

/* ---- fase 4 · dekking van de waarnemingen ---- */
.wdb-dekking { padding: 14px 16px; margin-top: 12px; }
.wdb-dekrij { display: grid; grid-template-columns: 1fr 110px 110px; gap: 10px; padding: 5px 0; border-top: 1px solid var(--grijs); font-size: .76rem; }
.wdb-dekrij--kop { border-top: 0; color: var(--ink3); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.wdb-dekgroei { margin-top: 8px; font-size: .68rem; color: var(--ink3); }

/* ---- fase 6 · raming vóór de knop ---- */
.wdb-raming { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: .78rem; margin-top: 8px; }
.wdb-raming > span:nth-child(odd) { color: var(--ink3); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; align-self: center; }
.wdb-venster { margin-top: 10px; padding: 8px 12px; background: var(--let-t); color: var(--let); border-radius: 8px; font-size: .76rem; }

/* ─── B1 (QUERY-HYGIENE §1) · de gebiedspoort ────────────────────────
   De teller die om een afbakening vraagt is geen fout maar een vraag —
   daarom het let-vlak en niet het stop-vlak. De donkere tellertegel zou
   hier suggereren dat er een uitkomst staat; die is er juist niet. */
.wdb-telling--vraag { background: var(--let-t); color: var(--let-d); box-shadow: none;
  border: var(--lijndikte) solid color-mix(in srgb, var(--let) 34%, transparent); }
.wdb-telling--vraag .kicker { color: var(--let-d); }
.wdb-telling--vraag > strong { color: color-mix(in srgb, var(--let-d) 46%, transparent); }
/* let op de cascade: `.wdb-telling p` is (0,1,1) en wint van een enkele
   klasse — de reden moet daarom óók twee klassen diep staan, anders komt
   hij wit op het amber vlak te staan en is hij onleesbaar. */
.wdb-telling--vraag .wdb-telling__reden { padding-top: 12px; border-top: var(--lijndikte) solid
  color-mix(in srgb, var(--let) 26%, transparent); font: 500 .7rem/1.55 var(--font-ui);
  color: var(--let-d); margin: 0 0 12px; }
.wdb-telling--vraag .btn { width: 100%; justify-content: center; }
/* een telling die seconden kostte: eerlijk melden wat het de anderen kostte */
.wdb-telling .wdb-telling__traag { color: color-mix(in srgb, #fff 82%, transparent);
  border-top: 1px solid color-mix(in srgb, #fff 16%, transparent); }

/* ── cdpsuite.css ── */
/* =====================================================================
   cdpsuite.css — Module 3.6 · CDP. Prototype-slate (blauwtint) →
   ink/groen-tokens. Prefix cdp-/cdps. Tokens only.
===================================================================== */

.cdps { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.cdp-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.cdp-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.cdp-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; }
.cdp-tabs { display: flex; gap: 7px; }
.cdp-boxchip { padding: 6px 15px; border-radius: 8px; cursor: pointer; font: 600 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.cdp-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-ink); color: #fff; font-weight: 700; }
.cdp-groen { color: var(--c-groen-d); }
.cdp-terra { color: var(--c-terra-d); }
.cdp-amber { color: var(--c-amber); }
.cdp-groen-d { color: var(--c-groen-d); }
.cdp-ink { color: var(--c-ink-2); }
.cdp-stil { color: var(--c-ink-3); }

/* kanaal-iconen + balken */
.cdp-kanaalic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: .8rem; }
.cdp-kanaalic.is-terra { color: var(--c-terra-d); background: var(--c-terra-t); }
.cdp-kanaalic.is-groen { color: var(--c-groen-d); background: var(--c-groen-t); }
.cdp-kanaalic.is-groen-d { color: #fff; background: var(--c-groen-d); }
.cdp-kanaalic.is-amber { color: var(--c-amber); background: var(--c-amber-t); }
.cdp-kanaalic.is-ink { color: #fff; background: var(--c-ink-2); }
.cdp-kanaalic.is-stil { color: var(--c-ink-2); background: var(--c-paneel); }
.cdp-balk { height: 9px; border-radius: 5px; background: var(--c-paneel); }
.cdp-balk i { display: block; height: 100%; border-radius: 5px; min-width: 14px; background: var(--c-groen); }
.cdp-balk i.is-terra { background: var(--c-terra); }
.cdp-balk i.is-groen-d { background: var(--c-groen-d); }
.cdp-balk i.is-amber { background: var(--c-amber); }
.cdp-balk i.is-ink { background: var(--c-ink-2); }
.cdp-balk i.is-stil { background: var(--c-lijn-2); }

/* attributie */
.cdp-modusrij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cdp-modusrij > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); flex: 1; min-width: 240px; }
.cdp-modus { display: flex; gap: 6px; background: var(--c-paneel); border-radius: 10px; padding: 4px; min-width: 260px; }
.cdp-modusknop { flex: 1; padding: 8px 6px; border-radius: 8px; cursor: pointer; text-align: center; font: 600 .72rem var(--font-ui); border: none; background: transparent; color: var(--c-ink-2); }
.cdp-modusknop.is-actief { background: var(--c-ink); color: #fff; font-weight: 700; }
.cdp-tabel { padding: 0; overflow: hidden; margin-top: 4px; }
.cdp-attrrij { display: grid; grid-template-columns: 2.2fr 1fr 1.4fr 1fr 1.1fr; gap: 12px; padding: 14px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.cdp-attrrij--kop { padding: 12px 20px; background: var(--c-creme); font-size: .56rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.cdp-bron { display: flex; gap: 11px; align-items: center; min-width: 0; }
.cdp-bron strong { display: block; font-size: .78rem; }
.cdp-bron span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cdp-rechts { text-align: right; font-size: .76rem; }
.cdp-omzet { font-weight: 700; }
.cdp-convkop { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cdp-convkop strong { font-size: .82rem; }
.cdp-convkop .mono { font-size: .64rem; color: var(--c-ink-3); }
.cdp-inzicht { margin-top: 14px; padding: 13px 18px; border-radius: 12px; background: var(--c-groen-t); font: 400 .72rem/1.55 var(--font-ui); color: var(--c-ink-2); }

/* segmentatie */
.cdp-seggrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .cdp-seggrid { grid-template-columns: 1fr; } }
.cdp-facetten { padding: 20px 22px; }
.cdp-facetten__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cdp-facetten__kop strong { font-size: .88rem; }
.cdp-facetgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
@media (max-width: 700px) { .cdp-facetgrid { grid-template-columns: 1fr; } }
.cdp-facet .kicker { display: block; margin-bottom: 8px; }
.cdp-optie { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 8px; cursor: pointer; font: 500 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn); background: #fff; color: var(--c-ink); margin-bottom: 6px; text-align: left; }
.cdp-optie em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.cdp-optie.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); font-weight: 700; }
.cdp-optie.is-actief em { color: var(--c-groen-d); }
.cdp-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.cdp-telling { border-radius: 14px; background: var(--c-ink); padding: 24px; color: #fff; box-shadow: var(--schaduw-tegel); }
.cdp-telling .kicker { color: color-mix(in srgb, #fff 70%, transparent); }
.cdp-telling > strong { display: block; font-size: 2.4rem; line-height: 1.05; margin: 8px 0 2px; font-family: var(--font-mono); letter-spacing: -.02em; }
.cdp-telling > span { font: 500 .76rem var(--font-ui); color: color-mix(in srgb, #fff 82%, transparent); }
.cdp-telling__balk { height: 7px; border-radius: 5px; background: color-mix(in srgb, #fff 20%, transparent); margin-top: 16px; }
.cdp-telling__balk i { display: block; height: 100%; border-radius: 5px; background: #fff; }
.cdp-telling__f { display: block; font: 500 .7rem var(--font-ui); color: color-mix(in srgb, #fff 70%, transparent); margin-top: 10px; }
.cdp-opslaan { width: 100%; margin-top: 16px; justify-content: center; background: #fff; color: var(--c-ink); font-weight: 800; }
.cdp-paneel { padding: 18px 20px; }
.cdp-paneel > strong { display: block; font-size: .82rem; margin-bottom: 13px; }
.cdp-segment { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; padding: 0; margin-bottom: 14px; }
.cdp-segment > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cdp-segment strong { font-size: .74rem; }
.cdp-segment em { font-style: normal; font-size: .7rem; font-weight: 700; }
.cdp-segment .cdp-balk { height: 6px; margin: 6px 0 5px; }
.cdp-segment__voet { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }

/* identiteit */
.cdp-review { text-align: right; }
.cdp-review strong { display: block; font-size: 1.4rem; color: var(--c-terra-d); }
.cdp-review span { font: 600 .58rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.cdp-idlijst { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 18px; }
.cdp-idkaart { padding: 20px 22px; }
.cdp-idkaart__kop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cdp-ring { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c-groen-d) calc(var(--pct) * 1%), var(--c-paneel) 0); }
.cdp-ring.is-amber { background: conic-gradient(var(--c-amber) calc(var(--pct) * 1%), var(--c-paneel) 0); }
.cdp-ring.is-terra { background: conic-gradient(var(--c-terra) calc(var(--pct) * 1%), var(--c-paneel) 0); }
.cdp-ring span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .56rem; font-weight: 700; }
.cdp-idkaart__naam { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdp-idkaart__naam strong { font-size: .9rem; }
.cdp-idkaart__kop > div:last-child > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.cdp-records { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cdp-record { display: flex; gap: 11px; align-items: center; padding: 9px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.cdp-record .cdp-kanaalic { width: 26px; height: 26px; font-size: .68rem; }
.cdp-record > div { flex: 1; min-width: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.cdp-record strong { color: var(--c-ink); }
.cdp-record > .mono { font-size: .6rem; color: var(--c-ink-3); white-space: nowrap; }
.cdp-conflict { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); margin-bottom: 14px; font: 500 .72rem/1.45 var(--font-ui); }
.cdp-conflict span { color: var(--c-amber); }
.cdp-idacties { display: flex; gap: 10px; }
.cdp-verwerkt { font: 600 .74rem var(--font-ui); color: var(--c-groen-d); }

/* Suppressie-preview (B5a) */
.cdp-suppressie { display: flex; flex-direction: column; gap: 4px; }
.cdp-suprij { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); color: var(--c-ink-2); }
.cdp-suprij--basis { color: var(--c-ink); font-weight: 600; }
.cdp-suprij--eind { border-bottom: 0; color: var(--c-groen-d); font-weight: 800; font-size: 13.5px; }
.cdp-supnoot { font-size: 11.5px; color: var(--c-ink-2); margin-top: 4px; }

/* Kanaal-vergelijk (B5c) */
.cdp-kanaalvgl { margin-top: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cdp-kanaalvgl__kop { display: flex; flex-direction: column; gap: 3px; }
.cdp-kvrij { display: grid; grid-template-columns: 1.6fr .7fr .7fr 1.4fr .8fr .8fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.cdp-kvrij:last-child { border-bottom: 0; }
.cdp-kvrij--kop { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.cdp-kvrij.is-beste { background: color-mix(in srgb, var(--c-groen) 10%, transparent); border-radius: 8px; padding-left: 6px; padding-right: 6px; }

/* De parkeerband (02-09). Een scherm met CAC- en omzetcijfers die niemand
   mag geloven, moet dat bovenaan zeggen — niet als grijze voetnoot met een
   groen bolletje ervoor. Kleur is betekenis: dit is «let op», geen «goed». */
.parkeerband {
  display: flex; flex-direction: column; gap: 3px;
  border: var(--lijndikte) solid var(--let); border-left-width: 4px;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px;
  background: var(--kaart);
}
.parkeerband b { font-size: .84rem; color: var(--ink); }
.parkeerband span { font-size: .78rem; color: var(--ink2); max-width: 78ch; }

/* ── marketing.css ── */
/* =====================================================================
   marketing.css — Module 3.7 · Campagnes. Tokens only. Prefix mk-.
   Hergebruikt .co-veld (commout) voor de composer-velden.
===================================================================== */

.mk { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.mk-kop { margin-bottom: 14px; }
.mk-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.mk-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 70ch; }
.mk-groen { color: var(--c-groen-d); }
.mk-terra { color: var(--c-terra-d); }
.mk-sub { display: block; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin: 3px 0 12px; }

.mk-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; margin: 14px 0; }
@media (max-width: 1000px) { .mk-grid { grid-template-columns: 1fr; } }

/* doelgroep */
.mk-doelgroep { padding: 16px 0 0; overflow: hidden; }
.mk-doelgroep__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; }
.mk-doelgroep__kop strong { font-size: .88rem; }
.mk-doelgroep .mk-sub, .mk-doelgroep .mk-chips { padding: 0 18px; }
.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-chip { padding: 7px 13px; border-radius: var(--radius-pill); border: none; cursor: pointer; font: 600 .7rem var(--font-ui); white-space: nowrap; background: var(--c-paneel); color: var(--c-ink-2); }
.mk-chip.is-actief { background: var(--c-ink); color: #fff; font-weight: 700; }
.mk-rij { display: grid; grid-template-columns: 24px 1.3fr 1.6fr 44px 1.2fr; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 18px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.mk-rij:hover { background: var(--c-creme); }
.mk-rij.is-aan { background: var(--c-groen-t); }
.mk-rij--kop { cursor: default; border-top: none; padding-bottom: 8px; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.mk-rij--kop:hover { background: transparent; }
.mk-rij > i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: .62rem; color: #fff; border: 1.5px solid var(--c-lijn-2); }
.mk-rij.is-aan > i { border-color: var(--c-groen-d); background: var(--c-groen-d); }
.mk-rij strong { font-size: .76rem; }
.mk-rij > span { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.mk-score { color: var(--c-groen-d); font-weight: 700; }
.mk-rij .chip { font-size: .56rem; }
.mk-rij em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); }

/* composer */
.mk-composer { padding: 18px 20px; }
.mk-composer > strong { display: block; font-size: .88rem; }
.mk-composer > .kicker { display: block; margin-bottom: 8px; }
.mk-kanalen { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mk-kanaal { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 11px; cursor: pointer; font: 600 .76rem var(--font-ui); border: 1.5px solid var(--c-lijn-2); background: #fff; color: var(--c-ink-3); }
.mk-kanaal .mono { font-size: .8rem; }
.mk-kanaal.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-ink); font-weight: 700; }
.mk-sjablonen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-sjabloon { text-align: left; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: 1.5px solid var(--c-lijn-2); background: #fff; font: 600 .72rem var(--font-ui); color: var(--c-ink-2); }
.mk-sjabloon.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-ink); }
.mk-verstuurrij { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.mk-verstuurrij > span { font: 500 .72rem var(--font-ui); }

/* campagne-lijst */
.mk-campagnes { padding: 16px 0 6px; overflow: hidden; margin-bottom: 16px; }
.mk-campagnes > strong { display: block; font-size: .88rem; padding: 0 20px 10px; }
.mk-camprij { display: grid; grid-template-columns: .9fr 1.6fr .6fr .7fr 1.5fr .8fr; gap: 10px; align-items: center; padding: 12px 20px; border-top: var(--lijndikte) solid var(--c-lijn); }
.mk-camprij--kop { border-top: none; padding: 0 20px 8px; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.mk-camprij strong { font-size: .76rem; }
.mk-camprij > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.mk-camprij .chip { font-size: .58rem; }
.mk-reactie { font-size: .68rem; }

/* ---- Marketingkalender (verzoek 15-07) ---- */
.mkal { display: flex; flex-direction: column; gap: 0; padding: 16px 18px; }
.mkal-kopr { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 12px; }
.mkal-kopr > div { display: flex; flex-direction: column; gap: 3px; }
.mkal-koprij { display: grid; grid-template-columns: 260px repeat(11, 1fr); gap: 4px; border-bottom: 1px solid var(--c-lijn); padding-bottom: 6px; }
.mkal-wk { display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; text-align: center; color: var(--c-ink-2); }
.mkal-wk b { font-size: 11px; }
.mkal-wk.is-nu b { color: var(--c-groen-d); }
.mkal-wk.is-nu { border-left: 2px solid var(--c-groen-d); }
.mkal-rij { display: grid; grid-template-columns: 260px 1fr; gap: 4px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-lijn); }
.mkal-rij:last-child { border-bottom: 0; }
.mkal-info { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.mkal-resultaat { font-size: 11.5px; }
.mkal-spoor { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; align-self: stretch; align-items: center; }
.mkal-balk { border-radius: 99px; font-size: 10.5px; font-weight: 700; text-align: center; padding: 4px 0; color: var(--c-ink); border: 1px solid var(--c-lijn); }
.mkal-balk--loopt { background: color-mix(in srgb, var(--c-amber) 22%, var(--c-paneel)); border-color: var(--c-amber); }
.mkal-balk--gepland { background: color-mix(in srgb, var(--c-ink) 6%, var(--c-paneel)); border-style: dashed; }
.mkal-balk--afgerond { background: color-mix(in srgb, var(--c-groen-d) 18%, var(--c-paneel)); border-color: var(--c-groen-d); }

/* ---- Capaciteit · vooruitblik ---- */
.mcap { display: flex; flex-direction: column; padding: 16px 18px; }
.mcap-rij { display: grid; grid-template-columns: 120px 1fr 64px 190px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); }
.mcap-rij:last-child { border-bottom: 0; }
.mcap-rij.is-nu { background: color-mix(in srgb, var(--c-groen-d) 4%, transparent); }
.mcap-wk { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--c-ink-2); }
.mcap-wk b { font-size: 13px; color: var(--c-ink); }
.mcap-wk i { align-self: flex-start; font-style: normal; }
.mcap-balkwrap { display: flex; flex-direction: column; gap: 4px; }
.mcap-balk { position: relative; height: 14px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 7%, var(--c-paneel)); overflow: hidden; }
.mcap-balk__vul { display: block; height: 100%; border-radius: 99px; }
.mcap-balk__vul--groen { background: var(--c-groen-d); }
.mcap-balk__vul--amber { background: var(--c-amber); }
.mcap-balk__vul--terra { background: var(--c-terra); }
.mcap-doel { position: absolute; right: 5%; top: -2px; bottom: -2px; width: 2px; background: var(--c-ink); opacity: .35; }
.mcap-dekking { font-weight: 800; text-align: right; }
.mcap-dekking--groen { color: var(--c-groen-d); }
.mcap-dekking--amber { color: var(--c-amber); }
.mcap-dekking--terra { color: var(--c-terra); }
.mcap-ok { color: var(--c-groen-d); text-align: center; }
.mcap-regelknop { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--c-ink); padding: 0 2px; }
.mcap-hrlabel { color: var(--c-amber); font-size: 11.5px; }

/* ---- Incentives (verzoek 15-07) ---- */
.minc-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.minc { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-top: 12px; }
.minc-kop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.minc-kop > div { display: flex; flex-direction: column; gap: 3px; }
.minc-koprij { grid-template-columns: 0 repeat(11, 1fr); }
.minc-spoor { grid-template-columns: repeat(11, 1fr); }
.minc-deelnemer { display: grid; grid-template-columns: 22px 1.2fr 1.6fr auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); }
.minc-deelnemer:last-child { border-bottom: 0; }
.minc-rang { font-weight: 800; color: var(--c-groen-d); }
.minc-voortgang { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 7%, var(--c-paneel)); overflow: hidden; }
.minc-voortgang span { display: block; height: 100%; border-radius: 99px; background: var(--c-amber); }
.minc-voortgang span.is-boven { background: var(--c-groen-d); }
.minc-stand { font-size: 11.5px; color: var(--c-ink-2); }
.minc-verdiend { font-weight: 800; }
.minc-app { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; position: sticky; top: 16px; }
.minc-telefoon { border: 1px solid var(--c-lijn); border-radius: 22px; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--c-creme); }
.minc-appkaart { background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--schaduw-tegel); }
.minc-appkaart em { font-style: normal; font-size: 12px; color: var(--c-ink-2); }
.minc-voortgang--app { height: 8px; }
.minc-loonrij { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13.5px; }
.minc-loonrij--totaal { border-bottom: 0; font-weight: 800; padding-top: 10px; }
.mk-abtoggle { border: 1px dashed var(--c-lijn); border-radius: 99px; background: none; font: inherit; font-size: 12.5px; padding: 7px 14px; cursor: pointer; color: var(--c-ink-2); text-align: left; }
.mk-abtoggle.is-aan { border-color: var(--c-groen-d); border-style: solid; color: var(--c-groen-d); font-weight: 600; }
.minc-kopacties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.minc-kandidaten { display: flex; flex-direction: column; gap: 6px; }
.minc-kandidaat { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.minc-kandidaat:has(input:checked) { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, var(--c-paneel)); }
.minc-kandidaat em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.minc-deelnemersblok { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.minc-beloningvelden { display: contents; }

/* IN4 · lege stand van de campagnehistorie. De lijst komt uit het
   verzendlog en is aan het begin van een maand gewoon leeg — dan zegt hij
   dat, en toont hij niet drie voorbeeldregels. */
.mk-leeg { padding: 16px 2px; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); text-align: center; }

/* ── mkacties.css ── */
/* mkacties.css — MARKETING fase 1 · alleen tokens */
.mk-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.mk-h1 { margin: 4px 0 14px; }
.mk-blok { margin: 14px 0; }
.mk-fijn { font-size: .72rem; color: var(--ink3); }
.mk-taak { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--grijs); font-size: .78rem; }
.mk-taak i { color: var(--goed); font-style: normal; }
.mk-taak.is-af { color: var(--ink3); }
.mk-taak em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--ink3); }
.mk-signalen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mk-sig { padding: 8px 12px; border-radius: 8px; font-size: .76rem; }
.mk-sig.is-rood { background: var(--stop-t); color: var(--stop); }
.mk-sig.is-geel { background: var(--let-t); color: var(--let); }
.mk-wortel td.is-rood { color: var(--stop); font-weight: 700; }

/* ---- fase 2 · de kalender (gelift uit wireframe-marketing-kalender-v3) ---- */
.mkk-kaart { padding: 16px 18px; }
.mkk-kiez { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.mkk-tl { position: relative; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--kaart); }
.mkk-kop { display: flex; height: 22px; background: var(--rail); border-bottom: 1px solid var(--lijn); }
.mkk-kop span { flex: 1; font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); display: flex; align-items: center; justify-content: center; }
.mkk-kop span.is-nu { color: var(--accent-d); }
.mkk-net { position: absolute; inset: 0; display: flex; pointer-events: none; }
.mkk-net i { flex: 1; border-right: 1px solid var(--grijs); }
.mkk-baan { position: relative; height: 24px; border-top: 1px solid var(--grijs2); background: var(--kaart); }
.mkk-baan.is-rail { height: 26px; }
.mkk-groep { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px 3px; background: var(--rail); border-top: 1px solid var(--lijn); font-size: .74rem; font-weight: 700; }
.mkk-aant { font-weight: 400; font-size: .66rem; color: var(--ink3); }
.mkk-bar { position: absolute; top: 3px; bottom: 3px; min-width: 8px; border-radius: 5px; font-size: .62rem; color: #fff; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: pointer; }
.mkk-bar span { overflow: hidden; text-overflow: ellipsis; }
.mkk-bar.st-concept { background: var(--ink3); }
.mkk-bar.st-wacht { background: var(--let); }
.mkk-bar.st-gepland { background: var(--accent); }
.mkk-bar.st-klaar { background: var(--accent-d); }
.mkk-bar.st-loopt { background: var(--goed); }
.mkk-bar.st-af { background: var(--grijs2); color: var(--ink2); }
.mkk-bar.st-stop { background: var(--stop); }
.mkk-bar.is-als { outline: 2px dashed var(--accent); outline-offset: 1px; }
.mkk-sig { width: 7px; height: 7px; border-radius: 50%; background: var(--let-t); border: 1px solid #fff; flex: none; margin-right: 4px; }
.mkk-sig.is-rood { background: var(--stop-t); }
.mkk-dicht { position: absolute; top: 22px; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, var(--let-t) 6px 10px); pointer-events: auto; z-index: 1; }
.mkk-nu { position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--accent); z-index: 2; }
.mkk-rail { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; color: #fff; font-size: .6rem; display: flex; align-items: center; padding: 0 6px; overflow: hidden; }
.mkk-rail.is-ok { background: var(--accent); }
.mkk-rail.is-let { background: var(--let); }
.mkk-rail.is-stop { background: var(--stop); }
.mkk-leeg { padding: 20px; color: var(--ink3); font-size: .8rem; }
.mkk-fijn { font-size: .7rem; color: var(--ink3); margin: 10px 2px 0; }
.mkk-taak { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--grijs); font-size: .8rem; }
.mkk-taak.is-laat > span:first-child { color: var(--stop); font-weight: 700; }
.mkk-taak > span:nth-child(2) { flex: 1; }

/* N4 (MARKETING-NAV §7) · de Budget-tab: begroot naast het grootboek */
.mkb-kaart { padding: 16px 18px; margin-top: 14px; }
.mkb-rij { display: grid; grid-template-columns: 80px 1fr 110px; gap: 12px; align-items: center; padding: 7px 0; font-size: .8rem; }
.mkb-rij .mono:first-child { color: var(--ink3); font-size: .68rem; }
.mkb-rij b { text-align: right; }
.mkb-balk { height: 12px; background: var(--grijs); border-radius: 99px; overflow: hidden; }
.mkb-balk i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.mkb-balk i.is-over { background: var(--let); }

/* ── privacy.css ── */
/* privacy.css — module 7.2 · Persoonsdata, privacy & audit (Zand-stijl,
   kleuren uitsluitend via casa360-stijl.css-tokens) */
.pv { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.pv-kop h1 { margin: 2px 0 6px; }
.pv-kop p { max-width: 76ch; color: var(--sub); margin: 0; }

.pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-tabknop { border: 1px solid var(--lijn); background: var(--c-paneel, var(--vlak)); border-radius: 99px;
  padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.pv-tabknop.is-actief { background: var(--ink); border-color: var(--ink); color: var(--c-paneel, var(--vlak)); }
.pv-tabknop:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.pv-gebreken { border-left: 3px solid var(--stop); display: flex; flex-direction: column; gap: 6px; }
.pv-gebrek { color: var(--stop); font-weight: 600; }
.pv-gebrek--slot { color: var(--ink); }
.pv-besluit { display: flex; flex-direction: column; gap: 4px; }
.pv-besluit em { color: var(--sub); font-style: normal; }

.pv-soort { display: flex; flex-direction: column; gap: 8px; }
.pv-soort__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pv-soort__meta { display: block; color: var(--sub); font-size: 0.92em; margin-top: 2px; }
.pv-note { color: var(--sub); font-style: normal; font-size: 0.92em; }
.pv-anon { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; font-size: 0.92em; }
.pv-anon--schijn { border-color: var(--let); }
.pv-tabellen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85em; }
.pv-tabel { border: 1px solid var(--lijn); border-radius: 99px; padding: 2px 9px; color: var(--sub); }
.pv-tabel.is-over { border-color: var(--stop); color: var(--stop); }
.pv-onverdeeld { display: flex; flex-wrap: wrap; gap: 6px; }

.pv-rij { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.pv-rij:last-of-type { border-bottom: 0; }
.pv-rij em { color: var(--sub); font-style: normal; text-align: right; max-width: 58ch; }
.pv-rij--info em { text-align: left; display: block; }
.pv-rij--info { align-items: center; }
.pv-blokkop { display: block; margin-bottom: 8px; }
.pv-voet { display: flex; justify-content: flex-end; }

/* P4 · de rechtenmatrix */
.pv-matrix td, .pv-matrix th { text-align: center; }
.pv-matrix td:first-child, .pv-matrix th:first-child { text-align: left; }
.pv-cel.is-gat { background: var(--stop-t); color: var(--stop); font-weight: 700; }
.pv-dicht { border: 1px solid var(--stop); background: none; color: var(--stop); border-radius: 99px;
  font: inherit; font-size: 0.8em; padding: 1px 7px; margin-left: 5px; cursor: pointer; }
.pv-dicht:focus-visible { outline: 3px solid var(--accent); }
.pv-verzoek { display: flex; flex-direction: column; gap: 7px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.pv-verzoek:last-of-type { border-bottom: 0; }
.pv-verzoek__kop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pv-verzoek.is-over { border-left: 3px solid var(--stop); padding-left: 10px; }
.pv-verzoek__acties { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-termijnbalk { position: relative; height: 20px; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 99px; overflow: hidden; max-width: 420px; }
.pv-termijnbalk i { position: absolute; inset: 0 auto 0 0; background: var(--grijs2); }
.pv-termijnbalk span { position: relative; padding: 0 10px; font-size: 0.8em; line-height: 20px; }
.pv-klok { border-left: 3px solid var(--stop); }
.pv-klok__uren { font-size: 2em; font-weight: 700; }
.pv-klok.is-over .pv-klok__uren { color: var(--stop); }

/* ── bedrijfsvoering.css ── */
/* bedrijfsvoering.css — blok 8 · Contracten & facilitair.
   Alleen tokens uit casa360-stijl.css; module-wortel-marge-norm. */
.ct { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.ct-kop h1 { margin: 2px 0 6px; }
.ct-kop p { max-width: 76ch; color: var(--ink2); margin: 0; }
.ct-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-tabknop { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 99px;
  padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.ct-tabknop.is-actief { background: var(--ink); border-color: var(--ink); color: var(--kaart); }
.ct-tabknop:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.ct-blokkop { display: block; margin-bottom: 8px; }
.ct-filterbalk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-vulling { flex: 1; }
.ct-chip { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 99px;
  padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.ct-chip.is-actief { background: var(--ink); border-color: var(--ink); color: var(--kaart); }
.ct-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.ct-rij { display: grid; grid-template-columns: 200px 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--lijn); }
.ct-rij:last-of-type { border-bottom: 0; }
.ct-rij em { color: var(--ink2); font-style: normal; font-size: 12.5px; }
.ct-rij--verstreken td { background: var(--stop-t); }
.ct-poort { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 9px 12px;
  margin-top: 8px; font-size: 13px; line-height: 1.45; }
.ct-poort--rood { border-color: var(--stop); }
.ct-note { display: block; color: var(--ink2); font-size: 12.5px; font-style: normal; margin-top: 8px; }
.ct-acties { white-space: nowrap; }
.ct-acties .btn { margin: 1px 0; display: block; }
.ct-stil { border-color: var(--stop); }
.ct-lek { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--lijn); }
.ct-lek:last-of-type { border-bottom: 0; }
.ct-lek em { display: block; color: var(--ink2); font-style: normal; font-size: 12.5px; }
.ct-tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ct-komend { display: grid; grid-template-columns: minmax(150px, 1.1fr) 1.4fr 62px 90px; gap: 10px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--lijn); }
.ct-komend:last-of-type { border-bottom: 0; }
.ct-komend em { display: block; color: var(--ink2); font-style: normal; font-size: 12px; }
.ct-baan { height: 12px; border: 1px solid var(--lijn); border-radius: 99px; overflow: hidden; background: var(--kaart); }
.ct-baan i { display: block; height: 100%; }
.ct-baan i.is-rood { background: var(--stop); }
.ct-baan i.is-amber { background: var(--let); }
.ct-baan i.is-groen { background: var(--goed); }
.ct-stappen { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.ct-stap { border: 1px solid var(--lijn); border-radius: 99px; padding: 2px 9px; font-size: 11.5px; color: var(--ink2); }
.ct-stap.is-af { background: var(--ink); border-color: var(--ink); color: var(--kaart); }
@media (max-width: 900px) {
  .ct { padding: 18px 14px 60px; }
  .ct-tweeluik { grid-template-columns: 1fr; }
  .ct-rij { grid-template-columns: 1fr; }
}

/* S4 · middelendossier en klikbare signalen */
.ct-dos-acties { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ct-rij--klik { cursor: pointer; }
.ct-rij--klik:hover { background: var(--vlak2, var(--paneel)); }
.ct-rij--klik:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ct-spring { color: var(--ink2); }

/* ── fm.css ── */
/* =====================================================================
   fm.css — Module 3.8 · D2D-fieldmarketing. Tokens only. Prefix fm-.
   Hergebruikt wdb-chip/wdb-rail/wdb-telling (wdb.css) en co-veld.
===================================================================== */

.fm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.fm-groen { color: var(--c-groen-d); }
.fm-rood { color: var(--c-rood); }
.fm-amber { color: var(--c-amber); }
.fm-hint { font: 500 .66rem/1.5 var(--font-ui); color: var(--c-ink-3); margin: 10px 0 0; }
.fm-terug { border: none; background: transparent; cursor: pointer; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); padding: 0 0 10px; }

/* ---- telefoon-schil (app is leidend) ---- */
.fm-schil { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.fm-telefoon { width: 400px; max-width: 100%; flex: none; border-radius: 40px; background: var(--c-ink); padding: 12px; box-shadow: var(--schaduw-tegel); }
.fm-telefoon > * { background: var(--c-creme); }
.fm-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 6px; border-radius: 30px 30px 0 0; font-size: .66rem; font-weight: 700; }
.fm-inhoud { border-radius: 0 0 30px 30px; padding: 14px 16px 24px; min-height: 520px; }
.fm-naast { flex: 1; min-width: 260px; max-width: 380px; }
.fm-naast h1 { margin: 4px 0 8px; font-size: 1.25rem; }
.fm-naast p { font: 400 .78rem/1.6 var(--font-ui); color: var(--c-ink-2); margin: 0 0 16px; }

.fm-appkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 18px 0; }
.fm-appkop strong { display: block; font-size: 1rem; }
.fm-appkop__sub { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.fm-provchip { border: none; cursor: pointer; padding: 8px 13px; border-radius: 12px; background: var(--c-ink); color: #fff; font-size: .76rem; font-weight: 800; }
.fm-dagbalk { display: flex; gap: 8px; padding: 10px 16px; }
.fm-dagbalk > div { flex: 1; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 9px 11px; }
.fm-dagbalk strong { display: block; font-size: .96rem; color: var(--c-groen-d); }
.fm-dagbalk span { font: 600 .54rem var(--font-ui); color: var(--c-ink-3); }

/* ---- kaart met echte pins ---- */
.fm-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
.fm-togknop { flex: 1; padding: 9px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; cursor: pointer; font: 700 .7rem var(--font-ui); color: var(--c-ink-2); }
.fm-togknop.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.fm-kaart { position: relative; height: 340px; border-radius: 16px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); overflow: hidden; }
.fm-kaart--dash { height: 300px; }
.fm-kaart__weg { position: absolute; background: color-mix(in srgb, #fff 65%, transparent); }
.fm-kaart__weg.is-a { left: 0; right: 0; top: 38%; height: 10px; transform: rotate(-4deg); }
.fm-kaart__weg.is-b { top: 0; bottom: 0; left: 44%; width: 8px; transform: rotate(7deg); }
.fm-kaart__weg.is-c { left: 0; right: 0; top: 72%; height: 7px; transform: rotate(3deg); }
.fm-kaart__bron { position: absolute; right: 10px; bottom: 8px; font-size: .54rem; color: var(--c-ink-3); }
.fm-pin { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #fff; cursor: pointer; display: grid; place-items: center; font: 800 .56rem var(--font-ui); color: #fff; box-shadow: var(--schaduw-tegel); background: var(--c-lijn-2); z-index: 2; }
.fm-pin.is-actief { width: 28px; height: 28px; z-index: 5; }
.fm-pin.is-afspraak { background: var(--c-groen-d); }
.fm-pin.is-email { background: var(--c-groen); }
.fm-pin.is-nietthuis { background: var(--c-amber); }
.fm-pin.is-geeninteresse { background: var(--c-rood); }
.fm-pin.is-dnk { background: var(--c-ink-3); }
.fm-ik { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; }
.fm-ik i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c-ink); border: 3px solid #fff; outline: 4px solid color-mix(in srgb, var(--c-ink) 18%, transparent); }
.fm-fmer { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; background: var(--c-groen-d); color: #fff; font: 800 .6rem var(--font-ui); box-shadow: var(--schaduw-tegel); z-index: 3; }
.fm-fmer.is-actief { background: var(--c-ink); z-index: 5; }

/* ---- app-lijst + woning ---- */
.fm-adressen { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.fm-adres { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 13px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); cursor: pointer; text-align: left; font: inherit; }
.fm-adres i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c-lijn-2); }
.fm-adres.is-afspraak i { background: var(--c-groen-d); }
.fm-adres.is-email i { background: var(--c-groen); }
.fm-adres.is-nietthuis i { background: var(--c-amber); }
.fm-adres.is-geeninteresse i { background: var(--c-rood); }
.fm-adres.is-dnk i { background: var(--c-ink-3); }
.fm-adres > div { flex: 1; min-width: 0; }
.fm-adres strong { display: block; font-size: .74rem; }
.fm-adres > div span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.fm-adres em { font-style: normal; font-size: .56rem; color: var(--c-groen-d); }
.fm-adres .chip { font-size: .5rem; flex: none; }
.fm-woning__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fm-woning__kop strong { display: block; font-size: .92rem; }
.fm-woning__kop span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.fm-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fm-feiten > div { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 9px 11px; }
.fm-feiten span { display: block; font: 600 .56rem var(--font-ui); color: var(--c-ink-3); }
.fm-feiten strong { font-size: .8rem; }
.fm-dnk { padding: 12px 14px; border-radius: 11px; background: var(--c-paneel); border: 1.5px dashed var(--c-lijn-2); font: 600 .72rem var(--font-ui); color: var(--c-ink-2); }
.fm-haakje { padding: 10px 13px; border-radius: 11px; background: var(--c-groen-t); font: 600 .7rem/1.5 var(--font-ui); margin-bottom: 12px; }
.fm-groteknop { width: 100%; justify-content: center; padding: 14px; font-size: .8rem; }
.fm-afboekrij { display: flex; gap: 8px; margin-top: 8px; }
.fm-afboekrij .btn { flex: 1; justify-content: center; }

/* ---- vraagset / afspraak / e-mail / provisie ---- */
.fm-vraagset > .kicker { display: block; margin-bottom: 8px; }
.fm-vraagset > strong { display: block; font-size: .92rem; margin: 10px 0; line-height: 1.4; }
.fm-vraagbalk { height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel); }
.fm-vraagbalk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen-d); }
.fm-antwoorden { display: flex; flex-direction: column; gap: 8px; }
.fm-antwoorden--rij { flex-direction: row; }
.fm-antwoord { width: 100%; text-align: left; padding: 13px 15px; border-radius: 13px; border: 1.5px solid var(--c-lijn-2); background: #fff; font: 600 .78rem var(--font-ui); cursor: pointer; }
.fm-antwoord span { display: block; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.fm-antwoord.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.fm-schaal { display: flex; gap: 7px; }
.fm-schaal .fm-antwoord { text-align: center; font-size: .9rem; font-weight: 800; }
.fm-oversla { display: block; width: 100%; margin-top: 10px; border: none; background: transparent; cursor: pointer; font: 600 .68rem var(--font-ui); color: var(--c-ink-3); text-align: center; padding: 8px; }
.fm-subrij { display: flex; gap: 7px; margin: 10px 0; }
.fm-sub { flex: 1; padding: 10px 8px; border-radius: 11px; cursor: pointer; font: 700 .7rem var(--font-ui); border: 1.5px solid var(--c-lijn-2); background: #fff; color: var(--c-ink-3); }
.fm-sub.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-ink); }
.fm-consent { display: flex; align-items: flex-start; gap: 9px; font: 600 .7rem/1.45 var(--font-ui); margin: 10px 0; cursor: pointer; }
.fm-consent input { width: 17px; height: 17px; accent-color: var(--c-groen-d); flex: none; }
.fm-slots { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.fm-slot { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 13px; border: 1.5px solid var(--c-lijn-2); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.fm-slot.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.fm-slot i { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: #fff; background: var(--c-lijn-2); }
.fm-slot.is-actief i { background: var(--c-groen-d); }
.fm-slot > div { flex: 1; min-width: 0; }
.fm-slot strong { display: block; font-size: .74rem; }
.fm-slot span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.fm-slot .chip { font-size: .5rem; }
.fm-provkaart { border-radius: 16px; background: var(--c-ink); color: #fff; padding: 18px; margin-bottom: 12px; }
.fm-provkaart > span { font: 600 .62rem var(--font-ui); color: color-mix(in srgb, #fff 70%, transparent); }
.fm-provkaart > strong { display: block; font-size: 1.8rem; letter-spacing: -.02em; margin: 6px 0 10px; }
.fm-provkaart > div { display: flex; justify-content: space-between; font: 600 .62rem var(--font-ui); color: color-mix(in srgb, #fff 80%, transparent); }
.fm-provrij { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; margin-bottom: 7px; }
.fm-provrij > .mono { font-size: .6rem; color: var(--c-ink-3); }
.fm-provrij > div { flex: 1; min-width: 0; }
.fm-provrij strong { display: block; font-size: .72rem; }
.fm-provrij > div span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.fm-provrij em { font-style: normal; font-size: .74rem; font-weight: 800; color: var(--c-groen-d); }

/* ---- manager-dashboard + beheer ---- */
.fm-dash { max-width: 1240px; margin: 0 auto; }
.fm-dashkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.fm-dashkop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.fm-dashkop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; }
.fm-dashgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; margin: 14px 0; }
.fm-dashgrid--ll, .fm-dashgrid--vs { grid-template-columns: 1fr 320px; }
.fm-dashgrid--vs { grid-template-columns: 320px 1fr; }
@media (max-width: 1000px) { .fm-dashgrid, .fm-dashgrid--ll, .fm-dashgrid--vs { grid-template-columns: 1fr; } }
.fm-dashkaart, .fm-dashfeed, .fm-bord, .fm-llpaneel { padding: 16px 18px; margin-bottom: 14px; }
.fm-dashkaart > .kicker, .fm-dashfeed > .kicker, .fm-bord > .kicker, .fm-llpaneel > .kicker { display: block; margin-bottom: 12px; }
.fm-fmerdetail { margin-top: 10px; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.fm-fmerdetail strong { color: var(--c-ink); }
.fm-feedrij { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fm-feedrij > .mono { font-size: .62rem; color: var(--c-ink-3); }
.fm-feedrij > div { flex: 1; min-width: 0; }
.fm-feedrij strong { display: block; font-size: .72rem; }
.fm-feedrij > div span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.fm-bordrij { display: grid; grid-template-columns: 28px 1.4fr 90px 70px 84px 1fr 44px 80px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 7px; }
.fm-bordrij--kop { background: transparent; border: none; padding: 0 12px 4px; font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.fm-bordrij.is-ik { background: var(--c-groen-t); border-color: var(--c-groen); }
.fm-bordrij strong { font-size: .74rem; }
.fm-bordrij .mono { font-size: .66rem; }
.fm-rang { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .64rem; font-weight: 800; background: var(--c-paneel); color: var(--c-ink-2); flex: none; }
.fm-convbalk { height: 7px; border-radius: var(--radius-pill); background: var(--c-paneel); }
.fm-convbalk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); }
.fm-lijstrij { display: grid; grid-template-columns: 1.6fr 1fr 110px; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fm-lijstrij--tabel { grid-template-columns: 1.8fr 1fr 130px; }
.fm-lijstrij strong { display: block; font-size: .76rem; }
.fm-lijstrij span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.fm-lijstrij .chip { font-size: .56rem; justify-self: start; }
.fm-vsrij { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 13px; border-radius: 12px; border: 1.5px solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; }
.fm-vsrij.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.fm-vsrij > div { flex: 1; min-width: 0; }
.fm-vsrij strong { display: block; font-size: .74rem; }
.fm-vsrij .mono { font-size: .58rem; color: var(--c-ink-3); }
.fm-vsrij .chip { font-size: .54rem; flex: none; }
.fm-vraagrij { display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fm-vraagrij > div { flex: 1; min-width: 0; }
.fm-vraagrij strong { display: block; font-size: .76rem; }
.fm-vraagrij span { display: block; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-top: 2px; }
.fm-vraagrij .chip { font-size: .54rem; flex: none; }
.fm-histrij { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fm-histrij > .mono { font-size: .64rem; color: var(--c-groen-d); font-weight: 700; }
.fm-histrij > div { flex: 1; min-width: 0; }
.fm-histrij strong { display: block; font-size: .72rem; }
.fm-histrij span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.fm-histrij .chip { font-size: .54rem; }

/* 4.5 · live provisiestatus uit de provisie-suite */
.fm-provstatus { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: .64rem; color: var(--c-ink-2); }

/* Vraagset-beheer (18-07): per vraag bewerken en verplaatsen */
.fm-vskop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fm-vraagacties { display: inline-flex; gap: 4px; flex: none; }
.fm-vraagknop { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; color: var(--c-ink-2); display: inline-flex; align-items: center; justify-content: center; }
.fm-vraagknop:hover:not(:disabled) { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.fm-vraagknop:disabled { opacity: .35; cursor: not-allowed; }

/* FM2 (§2a) · de bewonersweergave — het tweede gezicht: één schoon vlak,
   niets interns in de DOM zolang het toestel omgedraaid is */
.fm--bewoner { display: flex; justify-content: center; padding: 26px; }
.fm-bewoner { max-width: 430px; width: 100%; background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.fm-bewoner__kop { display: flex; flex-direction: column; gap: 2px; }
.fm-bewoner__kop strong { font-size: 1.05rem; }
.fm-bewoner__kop span { font-size: .78rem; color: var(--c-ink-2); }
.fm-bewoner__blok { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fm-bewoner__antwoord { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; border-bottom: var(--lijndikte) solid var(--c-lijn); padding: 4px 0; }
.fm-bewoner__antwoord span { color: var(--c-ink-2); }

/* FM3 (§3) · de eerlijke wachtrijstand van de offline-buffer */
.fm-bufferbalk { margin: 6px 14px 0; padding: 6px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--c-creme); font-size: .68rem; color: var(--c-ink-2); }

/* FM3 · weekraster in het loopschema */
.fm-weekraster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fm-weekdag { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; }
.fm-weekdag label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }

/* ── partners.css ── */
/* =====================================================================
   partners.css — Module 3.8 · PartnerHub. Tokens only. Prefix pn-.
===================================================================== */

.pn { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.pn-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.pn-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.pn-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; }

.pn-tabel { padding: 16px 0 0; overflow: hidden; margin-bottom: 14px; }
.pn-tabel__kop { display: flex; align-items: center; gap: 14px; padding: 0 20px 12px; flex-wrap: wrap; }
.pn-tabel__kop strong { font-size: .9rem; }
.pn-zoek { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1.5px solid var(--c-lijn-2); border-radius: 12px; background: var(--c-creme); }
.pn-zoek span { color: var(--c-ink-3); }
.pn-zoek input { flex: 1; border: none; background: transparent; font: 500 .76rem var(--font-ui); color: var(--c-ink); }
.pn-rij { display: grid; grid-template-columns: 1.5fr 1fr .7fr 1.2fr 1fr; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 12px 20px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.pn-rij:hover { background: var(--c-creme); }
.pn-rij.is-actief { background: var(--c-groen-t); }
.pn-rij--kop { cursor: default; border-top: none; padding: 0 20px 8px; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.pn-rij--kop:hover { background: transparent; }
.pn-rij strong { display: block; font-size: .78rem; }
.pn-rij > div > span { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.pn-rij > div > em { font-style: normal; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.pn-rij .chip { font-size: .58rem; justify-self: start; }
.pn-open { color: var(--c-amber); }

.pn-detail { padding: 0; overflow: hidden; margin-bottom: 16px; }
.pn-detail__kop { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.pn-avatar { width: 46px; height: 46px; border-radius: 13px; background: var(--c-ink); color: #fff; display: grid; place-items: center; font: 700 .9rem var(--font-ui); flex: none; }
.pn-detail__kop > div { flex: 1; min-width: 180px; }
.pn-detail__kop strong { display: block; font-size: 1rem; }
.pn-detail__kop > div span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); }
.pn-sinds { font-size: .62rem; color: var(--c-ink-3); }
.pn-duo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; }
@media (max-width: 900px) { .pn-duo { grid-template-columns: 1fr; } }
.pn-duo > div { padding: 18px 22px; }
.pn-duo > div:first-child { border-right: var(--lijndikte) solid var(--c-lijn); }
.pn-duo .kicker { display: block; margin-bottom: 13px; }
.pn-funnelrij { margin-bottom: 12px; }
.pn-funnelrij > div { display: flex; justify-content: space-between; margin-bottom: 5px; font: 500 .72rem var(--font-ui); }
.pn-funnelrij strong { font-size: .76rem; }
.pn-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); }
.pn-balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); }
.pn-beloningkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pn-model { padding: 15px 17px; border-radius: 14px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); margin-bottom: 12px; }
.pn-model strong { display: block; font-size: .96rem; }
.pn-model span { font: 400 .7rem var(--font-ui); color: var(--c-ink-2); }
.pn-hint { font: 400 .66rem/1.5 var(--font-ui); color: var(--c-ink-3); margin: 8px 0 10px; }
.pn-formvoet { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px; }
.pn-fiatmelding { margin: 10px 0; padding: 11px 14px; border-radius: 11px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 600 .7rem/1.5 var(--font-ui); }
.pn-histkop { margin-top: 6px; }
.pn-versie { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.pn-versie > div { flex: 1; min-width: 0; }
.pn-versie strong { display: block; font-size: .74rem; }
.pn-versie span:not(.chip) { font: 400 .62rem var(--font-ui); color: var(--c-ink-3); }
.pn-versie .chip { font-size: .54rem; flex: none; }
.pn-fiat { background: var(--c-amber); color: #fff; }
.pn-vo { margin-top: 12px; padding: 9px 13px; border-radius: 10px; font: 600 .7rem var(--font-ui); }
.pn-vo.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.pn-vo.is-wacht { background: var(--c-amber-t); color: var(--c-ink); }

/* Widget-generator (B6c) */
.pn-widget { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.pn-widget__code { display: block; font-size: 11.5px; background: color-mix(in srgb, var(--c-ink) 5%, var(--c-paneel)); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: nowrap; }
.pn-widget__acties { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-widget__track { font-size: 11px; color: var(--c-ink-2); }
.pn-widget__sub { font-size: 12px; color: var(--c-ink-2); }

/* B24 · backend-kaart: partner-leads + commissies (poort) */
.pn-bkkaart { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin-bottom: 4px; }
.pn-bkkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pn-bkkop > div { display: flex; flex-direction: column; gap: 2px; }
.pn-bkkop > div > strong { font: 800 1rem var(--font-ui); }
.pn-bkkop > span { font-size: 11px; color: var(--c-ink-2); }
.pn-bkkolom { display: flex; flex-direction: column; gap: 6px; }
.pn-bkrij { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; }
.pn-bkrij > div { display: flex; flex-direction: column; }
.pn-bkrij > div > span { font-size: 11.5px; color: var(--c-ink-2); }
.pn-bkacties { display: flex; gap: 6px; align-items: center; }
.pn-bkpoort { font-size: 11px; color: var(--c-groen-d); }

/* Openstaande fiat: wie hem aanvroeg staat erbij, en je eigen aanvraag
   levert geen knop op (functiescheiding). */
.pn-versie.is-wachtfiat { border-color: var(--c-amber); background: var(--c-amber-t); }
.pn-aanvrager { display: block; font: 600 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 2px; }
.pn-eigenaanvraag { font: 700 .68rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; }

/* ── fin.css ── */
/* =====================================================================
   fin.css — Module 4.1 · Finance cockpit + debiteuren + close.
   Tokens only. Prefix fin-. Hergebruikt wdb-chip en bs-form.
===================================================================== */

.fin { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.fin-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.fin-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 70ch; }
.fin-tabs { display: flex; gap: 6px; }
.fin-tab { padding: 8px 15px; border-radius: 9px; font: 600 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.fin-tab.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; }
.fin-groen { color: var(--c-groen-d); }
.fin-amber { color: var(--c-amber); }
.fin-rood { color: var(--c-rood); }
.fin-sub { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 12px; }
.fin-breed { width: 100%; justify-content: center; margin-top: 12px; }

/* Exact Online-balk */
.fin-exact { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; }
.fin-koppeling { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.fin-koppeling i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); }
.fin-koppeling i.is-groen { background: var(--c-groen); }
.fin-koppeling i.is-amber { background: var(--c-amber); }
.fin-koppeling--link { text-decoration: none; cursor: pointer; }
.fin-koppeling--link:hover strong { color: var(--c-amber); }
.fin-koppeling strong { font-size: .72rem; color: var(--c-ink); }
.fin-koppeling.mono { margin-left: auto; font-size: .6rem; color: var(--c-ink-3); }

/* cockpit */
.fin-pnl { padding: 16px 18px; margin-bottom: 14px; }
.fin-pnl__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.fin-pnl__kop strong { font-size: .84rem; }
.fin-pnl__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.fin-entiteiten { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.fin-entiteit { flex: 1; min-width: 220px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 14px; padding: 14px 16px; }
.fin-entiteit > strong { font-size: .84rem; }
.fin-entiteit__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.fin-entiteit__dot.is-groen { background: var(--c-groen); }
.fin-entiteit__dot.is-terra { background: var(--c-terra); }
.fin-entiteit > div { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; }
.fin-entiteit > div span { display: block; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.fin-entiteit > div strong { font-size: .96rem; }
.fin-entiteit em { display: block; font: 500 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 8px; }
.fin-entiteit--con { background: var(--c-ink); color: #fff; border: none; }
.fin-entiteit--con .kicker { color: color-mix(in srgb, #fff 62%, transparent); }
.fin-entiteit--con > div span { color: color-mix(in srgb, #fff 62%, transparent); }
.fin-entiteit--con em { color: color-mix(in srgb, #fff 70%, transparent); }
.fin-leidend { border-radius: 16px; background: var(--c-ink); color: #fff; padding: 18px 22px; margin: 14px 0; }
.fin-leidend .kicker { color: var(--c-groen); display: block; margin-bottom: 12px; }
.fin-leidend > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .fin-leidend > div { grid-template-columns: 1fr; } }
.fin-leidend > div > div { padding: 13px 15px; border-radius: 12px; background: color-mix(in srgb, #fff 7%, transparent); }
.fin-leidend strong { display: block; font-size: .8rem; margin-bottom: 3px; }
.fin-leidend span { font: 400 .72rem/1.5 var(--font-ui); color: color-mix(in srgb, #fff 72%, transparent); }
.fin-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .fin-duo { grid-template-columns: 1fr; } }
.fin-paneel { padding: 18px 20px; margin-bottom: 14px; }
.fin-paneel > strong { display: block; font-size: .84rem; margin-bottom: 10px; }
.fin-paneel > .kicker { display: block; margin: 14px 0 8px; }
.fin-paneel--blok { border-color: var(--c-amber); }
.fin-paneel--leeg { color: var(--c-ink-3); font: 500 .74rem/1.5 var(--font-ui); }
.fin-pijp { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.fin-pijp > span { width: 96px; flex: none; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); }
.fin-pijpbalk { flex: 1; height: 8px; border-radius: 6px; background: var(--c-paneel); overflow: hidden; }
.fin-pijpbalk i { display: block; height: 100%; border-radius: 6px; background: var(--c-groen); }
.fin-pijp > strong { width: 30px; text-align: right; font-size: .76rem; }
.fin-pijp > em { width: 62px; text-align: right; font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.fin-blok { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 0; border: none; border-top: var(--lijndikte) solid var(--c-amber); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.fin-blok strong { display: block; font-size: .76rem; }
.fin-blok span:not(.chip) { font: 400 .66rem var(--font-ui); color: var(--c-amber); }
.fin-blok .chip { flex: none; font-size: .56rem; }

/* debiteuren */
.fin-buckets { margin-bottom: 12px; align-items: center; }
.fin-regelknop { margin-left: auto; }
.fin-debgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1050px) { .fin-debgrid { grid-template-columns: 1fr; } }
.fin-deblijst { padding: 6px 0; overflow: hidden; }
.fin-debrij { display: grid; grid-template-columns: 42px 1.4fr 90px 110px 120px 1fr 64px; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 16px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; }
.fin-debrij:hover { background: var(--c-creme); }
.fin-debrij.is-actief { background: var(--c-groen-t); }
.fin-debrij--kop { cursor: default; border-top: none; padding: 10px 16px 6px; font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.fin-debrij--kop:hover { background: transparent; }
.fin-debrij strong { font-size: .76rem; }
.fin-debrij > div .mono { display: block; font-size: .6rem; color: var(--c-ink-3); }
.fin-debrij > span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.fin-debrij .chip { font-size: .56rem; }
.fin-prio { width: 34px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--c-paneel); font-size: .62rem; font-weight: 800; color: var(--c-ink-2); }
.fin-extra { display: flex; gap: 5px; flex-wrap: wrap; }
.fin-exactst { font-size: .58rem; color: var(--c-groen-d); }
.fin-debrail { position: sticky; top: 12px; }
.fin-kasweek { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.fin-kasweek > span { width: 44px; flex: none; font: 600 .64rem var(--font-mono); color: var(--c-ink-3); }
.fin-kasweek strong { width: 76px; text-align: right; font-size: .68rem; }
.fin-dossier { border-color: var(--c-groen-d); }
.fin-dossier__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fin-dossier__kop strong { display: block; font-size: .84rem; }
.fin-dossier__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.fin-dossier__cijfers { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-dossier__cijfers span { display: block; font: 600 .56rem var(--font-ui); color: var(--c-ink-3); }
.fin-dossier__cijfers strong { font-size: .8rem; }
.fin-freeze { padding: 11px 13px; border-radius: 10px; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); font: 500 .7rem/1.5 var(--font-ui); margin-bottom: 12px; }
.fin-acties { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.fin-incassoknop { background: var(--c-rood); color: #fff; }
.fin-hist { display: flex; gap: 10px; padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem/1.45 var(--font-ui); color: var(--c-ink-2); }
.fin-hist .mono { flex: none; font-size: .6rem; color: var(--c-ink-3); }

/* close */
.fin-closegrid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .fin-closegrid { grid-template-columns: 1fr; } }
.fin-maand { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; }
.fin-maand.is-actief { border-color: var(--c-ink); background: var(--c-paneel); }
.fin-maand strong { font-size: .78rem; }
.fin-maand .chip { font-size: .56rem; }
.fin-maand em { font-style: normal; font-size: .58rem; color: var(--c-ink-3); }
.fin-close__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fin-closebalk { height: 9px; margin: 8px 0 6px; }
.fin-taak { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; margin-bottom: 7px; }
.fin-taak i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: #fff; border: 1.5px solid var(--c-lijn-2); }
.fin-taak.is-klaar { border-color: var(--c-groen); background: var(--c-groen-t); }
.fin-taak.is-klaar i { border-color: var(--c-groen-d); background: var(--c-groen-d); }
.fin-taak span { font: 500 .72rem/1.45 var(--font-ui); }
.fin-taak[disabled] { opacity: .65; cursor: default; }
.fin-pbc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.fin-pbc i { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: #fff; }
.fin-pbc i.is-ok { background: var(--c-groen-d); }
.fin-pbc i.is-mis { background: var(--c-rood); }
.fin-pbc > span:not(.chip) { flex: 1; font: 500 .7rem/1.4 var(--font-ui); }
.fin-pbc .chip { font-size: .54rem; flex: none; }

/* Aging + actievoorstellen + profielen (D2b, 15-07) */
.fin-aging { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin-bottom: 14px; }
.fin-agingrij { display: grid; grid-template-columns: 140px 1fr 110px; gap: 12px; align-items: center; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; padding: 4px 0; color: var(--c-ink); }
.fin-agingrij.is-actief span:first-child { font-weight: 700; }
.fin-agingbalk { display: block; height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 6%, var(--c-paneel)); overflow: hidden; }
.fin-agingbalk b { display: block; height: 100%; border-radius: 99px; }
.fin-agingbalk .is-groen { background: var(--c-groen); }
.fin-agingbalk .is-amber { background: var(--c-amber); }
.fin-agingbalk .is-terra { background: var(--c-terra); }
.fin-advies { grid-column: 1 / -1; font-size: 11.5px; display: flex; gap: 8px; align-items: center; padding-top: 3px; }
.fin-advies i { font-style: normal; font-size: 9.5px; letter-spacing: .06em; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 7px; color: var(--c-ink-2); }
.fin-advies--amber { color: var(--c-amber); font-weight: 600; }
.fin-advies--rood { color: var(--c-rood); font-weight: 700; }
.fin-advies--groen { color: var(--c-groen-d); }
.fin-advies--stil { color: var(--c-ink-2); }
.fin-profkop { grid-column: 1 / -1; margin-top: 6px; }

/* Werkbon-poort in de close (D3c) */
.fin-wbpoort { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.fin-wbpoort.is-ok { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.fin-wbpoort a { color: inherit; font-weight: 700; }

/* ---- B3b · dagelijkse actielijst (backend) ---- */
.fin-actierij { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fin-actierij:last-child { border-bottom: 0; }
.fin-actierij__prio { font-size: .9rem; font-weight: 700; }
.fin-actierij__prio.is-rood { color: var(--c-rood); }
.fin-actierij__prio.is-amber { color: var(--c-amber); }
.fin-actierij div { display: flex; flex-direction: column; }
.fin-actierij div strong { font: 600 .76rem var(--font-ui); }
.fin-actierij div span { font-size: .62rem; color: var(--c-ink-3); }

/* B16 · declaraties uit de veld-apps */
.fin-declrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; }
.fin-declrij > div { display: flex; flex-direction: column; gap: 2px; }
.fin-declrij strong { font-size: .8rem; }
.fin-declrij span { font-size: .68rem; color: var(--c-ink-2); }
.fin-knop { font: 700 .68rem var(--font-ui); background: var(--c-paneel); border: 1px solid var(--c-lijn-2); color: var(--c-ink); border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.fin-knop:hover { border-color: var(--c-ink); }

/* Close-taken die zichzelf toetsen (FT-4.1): de stand komt uit de
   administratie, dus een openstaande regel is geen vinkje maar werk. */
.fin-taak.is-open { border-color: var(--c-amber); }
.fin-taak.is-open > i { background: var(--c-amber-t); color: var(--c-amber); }
.fin-taak__stand { display: block; font-size: .68rem; color: var(--c-ink-2); margin-top: 3px; font-style: normal; }
.fin-taak__uitleg { display: block; font-size: .64rem; color: var(--c-ink-3); margin-top: 2px; font-style: normal; line-height: 1.5; }
.fin-sub--let { color: var(--c-ink-3); font-size: .68rem; line-height: 1.55; margin-top: 10px; }
.fin-pnlreeks { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }
.fin-pnlstaaf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fin-pnlstaaf i { width: 100%; max-width: 42px; background: var(--c-groen); border-radius: 4px 4px 0 0; }
.fin-pnlstaaf span { font-size: .62rem; color: var(--c-ink-3); }

/* Zoeken + aanmaningsronde op de debiteurenlijst (FT-4.3): met 244 rijen
   vind je een dossier niet meer door te scrollen. */
.fin-zoek { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; }
.fin-zoek input { font: 400 .78rem var(--font-ui); color: var(--c-ink); padding: 6px 11px;
  border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); min-width: 190px; }
.fin-ronde { margin-left: auto; }
.fin-hist__door { font-style: normal; color: var(--c-ink-3); font-size: .66rem; }

/* Facturen per post (19-07-2026): batches die klaarstaan om te printen. */
.fin-postbatch { padding: 12px 0 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; }
.fin-postrij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0;
  border-top: var(--lijndikte) solid var(--c-lijn-2); }
.fin-postrij:first-of-type { border-top: 0; }
.fin-postrij > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.fin-postrij span { font-size: .7rem; color: var(--c-ink-3); }
.btn.is-gedaan { border-color: var(--c-groen); color: var(--c-groen-d); }

/* Zelf kiezen welke facturen op de post gaan (19-07-2026). */
.fin-debrij { grid-template-columns: 28px auto 1.6fr auto auto auto 1fr auto 1.1fr; }
.fin-debrij--kop { grid-template-columns: 28px auto 1.6fr auto auto auto 1fr auto; }
.fin-kies { display: flex; align-items: center; justify-content: center; }
.fin-kies input { cursor: pointer; }
.fin-debrij.is-gekozen { background: var(--c-groen-t); }
.fin-postuitleg { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; }

/* F-GB · opbrengstkoppelingen in de close. Een koppeling is een regel die
   je in één blik moet kunnen lezen: doel, rekening, naam, versie. */
.fin-gb .fin-gbrij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto;
  gap: 4px 10px; align-items: baseline;
  padding: 6px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem;
}
.fin-gb .fin-gbrij:last-of-type { border-bottom: 0; }
.fin-gbrij__naam { color: var(--ink2); }
.fin-gbrij em { color: var(--ink3); font-size: .72rem; }
.fin-gbknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fin-gbgaten { margin-top: 10px; display: grid; gap: 3px; font-size: .74rem; color: var(--ink2); }
.fin-gbgaten em { color: var(--ink); }
@media (max-width: 900px) { .fin-gb .fin-gbrij { grid-template-columns: minmax(0, 1fr) auto; } }

/* F-OHW · de onderbouwing van het onderhanden werk in de close. */
.fin-ohw .fin-ohwrij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 4px 12px; align-items: baseline;
  padding: 6px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem;
}
.fin-ohw .fin-ohwrij:last-of-type { border-bottom: 0; }
.fin-ohwrij--kop { color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.fin-ohwrij em { display: block; color: var(--ink2); font-style: normal; font-size: .72rem; }
.fin-ohw__let { color: var(--let); }

/* ── finmgmt.css ── */
/* =====================================================================
   finmgmt.css — Module 4.7 · Managementlaag (dashboard, marge,
   cashflow, budget). Tokens + bouwstenen; diepte via de vaste laag.
===================================================================== */

.mgmt { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

.mgmt-kop__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mgmt-kop__titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mgmt-kop__titel h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.mgmt-sub { font-size: .8rem; color: var(--c-ink-3); margin: 5px 0 0; max-width: 70ch; }
.mgmt-kop__rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.mgmt-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--c-paneel); }
.mgmt-tabs--los { margin-bottom: 14px; }
.mgmt-tab { padding: 7px 14px; border-radius: 8px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .76rem; font-weight: 600; background: transparent; color: var(--c-ink-3); }
.mgmt-tab.is-actief { background: #fff; color: var(--c-ink); font-weight: 700; box-shadow: var(--schaduw-tegel); }
.mgmt-tab--rand { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); }
.mgmt-tab--rand.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }

.mgmt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mgmt-chip { padding: 9px 15px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; background: var(--c-paneel); color: var(--c-ink-2); }
.mgmt-chip.is-actief { background: var(--c-ink); color: #fff; font-weight: 700; }

.mgmt-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.mgmt-duo--marge { grid-template-columns: 1.55fr 1fr; }
.mgmt-duo--cf { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 980px) { .mgmt-duo, .mgmt-duo--marge, .mgmt-duo--cf { grid-template-columns: 1fr; } }
.mgmt-kolom { display: flex; flex-direction: column; gap: 16px; }
.mgmt-kaart { padding: 18px 20px; }
.mgmt-kaart--strak { padding: 4px 20px; }
.mgmt-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.mgmt-kaart__kop strong { font-size: .92rem; }
.mgmt-leeg { display: grid; place-items: center; min-height: 180px; text-align: center; font-size: .82rem; color: var(--c-ink-2); line-height: 1.7; }

.mgmt-groen { color: var(--c-groen-d); }
.mgmt-rood { color: var(--c-rood); }
.mgmt-amber { color: var(--c-amber); }
.mgmt-stil { color: var(--c-ink-3); }
.mgmt-recht { text-align: right; }
.mgmt-kop { display: block; margin: 12px 0 7px; }

/* P&L */
.mgmt-pnl { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 9px 16px; border-radius: 9px; font-size: .82rem; }
.mgmt-pnl--top, .mgmt-pnl--kosten { border-bottom: var(--lijndikte) solid var(--c-lijn); border-radius: 0; }
.mgmt-pnl--kosten .mgmt-pnl__val { color: var(--c-terra-d); }
.mgmt-pnl--sub { background: var(--c-amber-t); font-weight: 700; padding: 13px 16px; }
.mgmt-pnl--resultaat { background: var(--c-groen-t); font-weight: 800; color: var(--c-groen-d); padding: 13px 16px; }
.mgmt-pnl__pct { min-width: 52px; text-align: right; font-weight: 700; font-size: .74rem; color: var(--c-amber); }
.mgmt-pnl--resultaat .mgmt-pnl__pct, .mgmt-pnl--resultaat .mgmt-pnl__val { color: var(--c-groen-d); }
.mgmt-pnl__val { text-align: right; font-weight: 700; }

/* balkjes & splits */
.mgmt-split { margin-bottom: 13px; }
.mgmt-split__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: .8rem; font-weight: 600; }
.mgmt-split__rij { display: flex; align-items: center; gap: 10px; font-size: .7rem; }
.mgmt-balk { flex: 1; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.mgmt-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); }
.mgmt-balk i.is-rood { background: var(--c-rood); }
.mgmt-balk i.is-amber { background: var(--c-oker); }
.mgmt-balk i.is-stil { background: var(--c-lijn-2); }
.mgmt-balk--mini { width: 52px; flex: none; }

/* marge-tabel */
.mgmt-margerij { display: grid; grid-template-columns: 1.5fr .95fr .8fr .7fr .9fr; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 16px; margin-bottom: 8px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); background: #fff; cursor: pointer; font-family: var(--font-ui); font-size: .78rem; transition: border-color var(--overgang); }
.mgmt-margerij:hover { border-color: var(--c-lijn-2); }
.mgmt-margerij.is-onder { border-color: var(--c-rood); background: var(--c-rood-t); }
.mgmt-margerij.is-actief { border-color: var(--c-groen); }
.mgmt-margerij--kop { border: 0; background: transparent; padding: 0 16px 6px; margin: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.mgmt-margerij strong { font-size: .82rem; }
.mgmt-margerij i { display: block; font-style: normal; font-size: .64rem; font-weight: 700; margin-top: 2px; }
.mgmt-margerij .mono i { font-weight: 400; color: var(--c-ink-3); }
.mgmt-margerij b { font-size: .92rem; }
.mgmt-margerij__meta { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 5px; }
.mgmt-margerij__meta em { font-style: normal; font-size: .68rem; font-weight: 700; }

/* drill-down */
.mgmt-drill { background: var(--c-ink); border-radius: 16px; padding: 18px 19px; color: #fff; }
.mgmt-drill__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.mgmt-drill__kop .kicker { color: rgba(255, 255, 255, .55); }
.mgmt-drill__kop strong { display: block; font-size: 1rem; margin-top: 3px; }
.mgmt-drill__x { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; flex: none; }
.mgmt-drillrij { display: grid; grid-template-columns: 1.3fr .8fr .6fr .7fr; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; margin-bottom: 7px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font-family: var(--font-ui); font-size: .74rem; }
.mgmt-drillrij.is-actief { border-color: var(--c-oker); background: rgba(255, 255, 255, .12); }
.mgmt-drillrij i { display: block; font-style: normal; font-size: .64rem; color: rgba(255, 255, 255, .55); }
.mgmt-drillrij .mgmt-groen { color: var(--c-sage); }
.mgmt-drillrij .mgmt-rood { color: #E8A9A0; }
.mgmt-drillrij .mgmt-stil { color: rgba(255, 255, 255, .5); }
.mgmt-orderdetail { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.mgmt-orderdetail .mgmt-kv { color: rgba(255, 255, 255, .8); }
.mgmt-orderdetail .mgmt-kv b { color: #fff; }
.mgmt-orderdetail .mgmt-rood { color: #E8A9A0 !important; }
.mgmt-orderdetail .mgmt-groen { color: var(--c-sage) !important; }
.mgmt-orderdetail .btn { margin-top: 10px; align-self: flex-start; background: #fff; }

/* norm-beheer */
.mgmt-normrij { display: grid; grid-template-columns: 1.4fr auto auto 1fr; align-items: center; gap: 16px; padding: 13px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; }
.mgmt-normrij:first-child { border-top: 0; }
.mgmt-normrij strong { display: block; }
.mgmt-normrij .mgmt-stil { font-size: .66rem; }
.mgmt-norm__invoer { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--c-ink-2); }
.mgmt-norm__invoer input { width: 64px; padding: 6px 8px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; font-family: var(--font-mono); font-size: .76rem; background: #fff; color: var(--c-ink); }

/* cashflow */
.mgmt-obligo { text-align: right; background: #fff; border: var(--lijndikte) solid var(--c-oker); border-radius: 12px; padding: 11px 16px; }
.mgmt-obligo .kicker { display: block; margin-bottom: 3px; }
.mgmt-obligo b { display: block; font-size: 1.05rem; color: var(--c-amber); }
.mgmt-obligo .mgmt-stil { font-size: .66rem; }
.mgmt-waarschuwing { padding: 13px 16px; border-radius: 12px; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); color: var(--c-rood); font-size: .8rem; font-weight: 600; margin-bottom: 16px; }
.mgmt-cf { display: flex; align-items: flex-end; gap: 5px; }
.mgmt-cf__kolom { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; padding: 0; font-family: var(--font-ui); }
.mgmt-cf__saldo { font-size: .58rem; font-weight: 600; color: var(--c-ink-3); }
.mgmt-cf__kolom.is-actief .mgmt-cf__saldo { font-weight: 800; color: var(--c-ink); }
.mgmt-cf__balkwrap { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 134px; }
.mgmt-cf__balk { width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--c-sage); transition: height var(--overgang); }
.mgmt-cf__balk.is-actief { background: var(--c-groen); }
.mgmt-cf__balk.is-rood { background: var(--c-rood); }
.mgmt-cf__wk { font-size: .6rem; color: var(--c-ink-3); }
.mgmt-cf__kolom.is-actief .mgmt-cf__wk { color: var(--c-ink); font-weight: 700; }

.mgmt-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .78rem; color: var(--c-ink-2); }
.mgmt-kv b { font-size: .8rem; color: var(--c-ink); }
.mgmt-kv--som { border-top: var(--lijndikte) solid var(--c-lijn); margin-top: 10px; padding-top: 12px; font-weight: 600; }
.mgmt-kv--som b, .mgmt-kv--eind b { font-size: 1rem; }
.mgmt-kv--eind { font-weight: 800; color: var(--c-ink); }

/* budget */
.mgmt-budget { padding: 16px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.mgmt-budget:last-child { border-bottom: 0; }
.mgmt-budget__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mgmt-budget__kop strong { font-size: .84rem; }
.mgmt-budget__meta { display: flex; align-items: center; gap: 12px; }
.mgmt-budget__rij { display: grid; grid-template-columns: 62px 1fr 110px auto; align-items: center; gap: 10px; margin-bottom: 5px; }
.mgmt-budget__rij > .mono:first-child { font-size: .62rem; color: var(--c-ink-3); }
.mgmt-budget__rij b { font-size: .74rem; text-align: right; }
.mgmt-illustratief { margin: 0 0 14px; padding: 9px 14px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: var(--c-paneel); color: var(--c-ink-2); font: 500 .68rem var(--font-ui); }

/* IN5 · de band boven de budgetlijst. Drie begrotingsregels hebben geen
   kostenplaats en dus geen realisatie; dat hoort op het scherm te staan,
   niet in een comment. `--let`, want het is een openstaand besluit en
   geen blokkade. */
.mgmt-band { margin: 14px 0 4px; padding: 12px 15px; border: var(--lijndikte) solid var(--let);
  border-radius: var(--radius); background: var(--let-t);
  font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); }
.mgmt-band strong { color: var(--c-ink); }

/* ── facturatie.css ── */
/* =====================================================================
   facturatie.css — module 4.2 · Facturatie klant + Warmtefonds (fac-)
   Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.fac { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.fac-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.fac-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.fac-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 78ch; }

.fac-tabs { display: flex; gap: 6px; }
.fac-tab { padding: 8px 14px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: var(--c-creme); color: var(--c-ink-2); font: 600 .72rem var(--font-ui); cursor: pointer; }
.fac-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }

/* ---- Warmtefonds-strook: altijd in beeld, klikbaar naar finwf ---- */
.fac-wfbalk { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 11px 16px; border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius);
  background: var(--c-amber-t); text-decoration: none; color: inherit; box-shadow: var(--schaduw-tegel); }
.fac-wfbalk:hover { box-shadow: var(--schaduw-tegel-hover); }
.fac-wfbalk.is-hier { cursor: default; }
.fac-wfbalk__merk { display: flex; flex-direction: column; min-width: 220px; }
.fac-wfbalk__merk i { display: none; }
.fac-wfbalk__merk strong { font: 700 .8rem var(--font-ui); color: var(--c-amber); }
.fac-wfbalk__merk em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.fac-wfbalk__cel { display: flex; flex-direction: column; }
.fac-wfbalk__cel span { font: 500 .6rem var(--font-ui); color: var(--c-ink-2); }
.fac-wfbalk__cel strong { font: 700 .78rem var(--font-mono); color: var(--c-ink); }
.fac-wfbalk__cel.is-rood strong { color: var(--c-rood); }
.fac-wfbalk__pijl { margin-left: auto; font: 600 .68rem var(--font-ui); color: var(--c-amber); }

/* ---- mijlpaal-werkvoorraad ---- */
.fac-mijlpalen { padding: 0; overflow: hidden; }
.fac-mijlpaal { display: grid; grid-template-columns: 14px 1.5fr 1fr auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fac-mijlpaal:last-child { border-bottom: 0; }
.fac-mijlpaal__dot { width: 9px; height: 9px; border-radius: 50%; }
.fac-mijlpaal__dot.is-groen { background: var(--c-groen); }
.fac-mijlpaal__dot.is-rood { background: var(--c-rood); }
.fac-mijlpaal__wat { display: flex; flex-direction: column; }
.fac-mijlpaal__wat strong { font: 600 .76rem var(--font-ui); }
.fac-mijlpaal__wat span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.fac-mijlpaal__termijn { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.fac-poortchip { font: 600 .64rem var(--font-ui); color: var(--c-rood); background: var(--c-rood-t);
  padding: 5px 10px; border-radius: var(--radius-pill); }

/* ---- filters + facturenlijst ----
   Eén filterlat: statuspills links, filter/export rechts. De acties stonden
   eerder ín de pill-groep, waardoor de pills meerekten met de knophoogte. */
.fac-flts { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fac-flts__set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fac-flts__acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fac-flts__acties .btn { display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; font-size: .72rem; }
.fac-flt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: #fff; color: var(--c-ink-2); font: 700 .7rem var(--font-ui); cursor: pointer; }
.fac-flt strong { font: 700 .68rem var(--font-mono); color: var(--c-ink-3); }
.fac-flt:hover { background: var(--c-creme); color: var(--c-ink); }
.fac-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.fac-flt.is-actief strong { color: var(--c-groen-d); }
.fac-flt--los { margin-left: 8px; }

.kaart--strak { padding: 0; overflow: hidden; }
.fac-rij { display: grid; grid-template-columns: 30px 96px 1.3fr 1.1fr 96px 150px 110px 120px; gap: 10px;
  align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.fac-rij:last-child { border-bottom: 0; }
.fac-rij:hover { background: var(--c-creme); }
.fac-rij.is-open { background: var(--c-groen-t); }
.fac-rij--kop { cursor: default; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); background: var(--c-paneel); }
.fac-rij--kop:hover { background: var(--c-paneel); }
.fac-vink { width: 18px; height: 18px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 5px;
  background: var(--c-creme); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fac-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); }
.fac-rij__nr { font: 600 .7rem var(--font-mono); color: var(--c-groen-d); }
.fac-rij__klant { display: flex; flex-direction: column; }
.fac-rij__klant strong { font: 600 .76rem var(--font-ui); }
.fac-rij__klant span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.fac-rij__type { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.fac-rij__tot { font-size: .78rem; }
.fac-rij__kanalen { font-size: .62rem; color: var(--c-ink-2); }
.fac-rij__st { justify-self: end; }

/* ---- editor ---- */
.fac-editor { padding: 16px 18px; }
.fac-editor__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fac-editor__kop strong.mono { font-size: .9rem; }
.fac-editor__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-artikelkeuze { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px; border: var(--lijndikte) dashed var(--c-lijn-2);
  border-radius: var(--radius); background: var(--c-creme); }
.fac-artikelkeuze select { flex: 1; }
.fac-artikelkeuze input { width: 84px; }
.fac-regel { display: grid; grid-template-columns: 1fr auto 120px 30px; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fac-regel__wat { display: flex; flex-direction: column; }
.fac-regel__wat strong { font: 600 .74rem var(--font-ui); }
.fac-regel__wat span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.fac-regel__aantal { width: 76px; }
.fac-regel__weg { border: 0; background: none; color: var(--c-rood); font-size: .8rem; cursor: pointer; }
.fac-totalen { max-width: 340px; margin-left: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.fac-totalen > div { display: flex; justify-content: space-between; gap: 16px; font: 600 .74rem var(--font-ui); }
.fac-totalen > div.is-stil { font-weight: 500; color: var(--c-ink-2); }
.fac-totalen > div.is-eind { border-top: var(--lijndikte) solid var(--c-lijn-2); padding-top: 7px; font-size: .84rem; }
.fac-betaalinfo { margin-top: 16px; padding: 13px 15px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); }
.fac-betaalinfo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 9px; }
.fac-betaalinfo__grid > div { display: flex; flex-direction: column; gap: 2px; }
.fac-betaalinfo__grid strong { font: 700 .72rem var(--font-ui); }
.fac-betaalinfo__grid span { font: 500 .64rem var(--font-mono); color: var(--c-ink-2); }
.fac-betaalinfo__grid em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.fac-betaalinfo__grid > div.is-wf { padding: 8px 10px; border-radius: 10px; background: var(--c-amber-t); }
.fac-betaalinfo__voldaan { margin-top: 10px; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); }
.fac-verstuurinfo { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px;
  font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.fac-hint { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-right: auto; }

/* ---- knoppen ---- */
.fac-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; }
.fac-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.fac-knop--primair:hover { background: var(--gradient-primair-hover); }
.fac-knop--rood { background: var(--c-rood); border-color: var(--c-rood); color: #fff; }
.fac-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }

/* ---- termijnen & poorten ---- */
.fac-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.fac-schema { padding: 14px 18px; }
.fac-schema p { margin: 0 0 10px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.fac-termijn { display: grid; grid-template-columns: 56px 1fr 90px auto; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.fac-termijn:last-of-type { border-bottom: 0; }
.fac-termijn__pct { font-size: .92rem; color: var(--c-groen-d); }
.fac-termijn div { display: flex; flex-direction: column; }
.fac-termijn div strong { font: 600 .74rem var(--font-ui); }
.fac-termijn div span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); }
.fac-schema__som { margin-top: 10px; font-size: .66rem; color: var(--c-ink-2); }
.fac-iso { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; }
.fac-iso > strong { font-size: 1.5rem; color: var(--c-groen-d); }
.fac-iso div { display: flex; flex-direction: column; gap: 3px; }
.fac-iso div strong { font: 700 .76rem var(--font-ui); }
.fac-iso div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.fac-poortkaart { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fac-poortkaart em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.fac-poortkaart__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-liq { padding: 14px 18px; }
.fac-liq__rij { display: grid; grid-template-columns: 48px 1.2fr 1fr 90px; gap: 10px; align-items: center;
  padding: 7px 0; font: 500 .7rem var(--font-ui); }
.fac-liq__balk { height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.fac-liq__balk i { display: block; height: 100%; border-radius: var(--radius-pill); }
.fac-liq__balk i.is-in { background: var(--c-groen); }
.fac-liq__balk i.is-uit { background: var(--c-terra); }
.fac-liq__waarschuwing { margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--c-amber-t); color: var(--c-amber); font: 600 .68rem var(--font-ui); }

/* ---- betalingen & reconciliatie ---- */
.fac-betaling { display: grid; grid-template-columns: 110px 92px 1.5fr 60px 100px auto; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.fac-betaling:last-child { border-bottom: 0; }
.fac-betaling__oms { color: var(--c-ink-2); }

/* ---- warmtefonds-scherm ---- */
.fac-wfpijp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; }
.fac-wfstap { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 108px;
  padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); }
.fac-wfstap span { font: 600 .62rem var(--font-ui); color: var(--c-ink-2); text-align: center; }
.fac-wfstap strong { font: 700 .9rem var(--font-mono); }
.fac-wfstap.heeft-dossiers { border-color: var(--c-amber); background: var(--c-amber-t); }
.fac-wfstap.is-rood { border-color: var(--c-rood); background: var(--c-rood-t); }
.fac-wfstap.is-rood strong { color: var(--c-rood); }
.fac-wfstap__pijl { color: var(--c-ink-3); font-size: .8rem; }
.fac-wfgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 22px; align-items: start; }
.fac-wfrij { display: grid; grid-template-columns: 92px 1.2fr 1fr auto 1fr; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.fac-wfrij:last-child { border-bottom: 0; }
.fac-wfrij:hover { background: var(--c-creme); }
.fac-wfrij.is-open { background: var(--c-amber-t); }
.fac-wfrij__id { font: 600 .66rem var(--font-mono); color: var(--c-amber); }
.fac-wfrij div { display: flex; flex-direction: column; }
.fac-wfrij div strong { font: 600 .74rem var(--font-ui); }
.fac-wfrij div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.fac-wfrij__bedrag span { font-family: var(--font-ui); }
.fac-wfrij__meta { font-size: .62rem; color: var(--c-ink-2); }
.fac-wfpaneel { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.fac-wfpaneel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fac-wfpaneel__kop strong { font: 700 .9rem var(--font-ui); display: block; margin-top: 2px; }
.fac-wfpaneel p { margin: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.fac-wfpaneel__cijfers { display: flex; gap: 16px; flex-wrap: wrap; font-size: .64rem; color: var(--c-ink-2); }
.fac-wfpaneel__cijfers strong { color: var(--c-ink); }
.fac-wfpaneel__acties { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .fac-tweekolom, .fac-wfgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .fac-knop, .fac-tab, .fac-flt, .fac-wfbalk { transition: background .16s ease, box-shadow .16s ease, color .16s ease; }
}

/* B3c · termijnplan uit de backend + schema-editor */
.fac-termijn--schema { grid-template-columns: 56px 1fr auto; }
.fac-termijn--b3c { grid-template-columns: 56px 1fr 90px auto auto; }
.fac-b3c-editor { padding: 4px 2px 10px; }
.fac-b3c-rij { display: grid; grid-template-columns: 1fr 64px 150px 150px 28px; gap: 8px; align-items: center; padding: 4px 0; }
.fac-b3c-rij input, .fac-b3c-rij select { font: 500 .7rem var(--font-ui); padding: 7px 9px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); color: var(--c-ink); }
.fac-b3c-rij input.mono { font-family: var(--font-mono); }
.fac-b3c-rij--kop { padding-bottom: 2px; }
.fac-b3c-rij--kop span { font: 700 .58rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }

/* De factureerbare stapel als werkbank (FT-4.2): zoeken, filteren,
   pagineren en een selectie in één keer wegwerken. */
.fac-stapelbalk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 0; }
.fac-zoekveld { flex: 1; min-width: 210px; max-width: 420px; height: 30px; font: 400 .76rem var(--font-ui);
  color: var(--c-ink); padding: 0 12px; border-radius: var(--radius); background: #fff;
  border: var(--lijndikte) solid var(--c-lijn-2); }
/* (de tweede .fac-flt-definitie is vervallen — hij overschreef de eerste
   half en gaf twee verschillende pill-maten op hetzelfde scherm) */
.fac-stapelstand { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; }
.fac-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px;
  border-radius: var(--radius); background: var(--c-groen-t); margin-bottom: 8px; font-size: .78rem; }
.fac-bulk > div { flex: 1; min-width: 200px; }
.fac-bulk strong { font-size: .95rem; }
.fac-kies { display: flex; align-items: center; }
.fac-mijlpaal.is-gekozen { background: var(--c-groen-t); }
.fac-pagineer { display: flex; gap: 8px; justify-content: center; padding: 12px 0 4px; }

/* ═══ F1 · tab «Na oplevering» ════════════════════════════════════════
   Werk dat af is en waar het geld stilstaat. Drie kolommen: wie, hoeveel,
   en wat er moet gebeuren — die laatste is waarom het scherm bestaat. */
.fac-naoprij {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 14px; align-items: center;
  padding: 12px 14px; border-bottom: var(--lijndikte) solid var(--lijn);
}
.fac-naoprij:last-child { border-bottom: 0; }
.fac-naoprij__wie strong, .fac-naoprij__geld strong { display: block; }
.fac-naoprij__wie span, .fac-naoprij__geld span { display: block; font-size: .72rem; color: var(--ink2); }
.fac-naoprij__geld { text-align: right; }
.fac-naoprij__actie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fac-naoprij__uitleg { font-size: .72rem; color: var(--ink2); flex: 1 1 100%; text-align: right; }
.fac-naopnoot { margin-top: 10px; font-size: .74rem; color: var(--ink2); }
@media (max-width: 860px) {
  .fac-naoprij { grid-template-columns: 1fr; }
  .fac-naoprij__geld, .fac-naoprij__actie, .fac-naoprij__uitleg { text-align: left; justify-content: flex-start; }
}


/* FA1/FA2 · checks, batchlijst */
.fac-checks { display: grid; gap: 4px; margin-bottom: 10px; }
.fac-check { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: 5px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.fac-check i { font-style: normal; text-align: center; color: var(--ink2); }
.fac-check.is-ok i { color: var(--goed); }
.fac-check.is-stop i { color: var(--stop); }
.fac-check.is-let i { color: var(--let); }
.fac-check span { display: grid; }
.fac-check small { color: var(--ink2); font-size: 11.5px; }
.fac-hint { color: var(--ink2); font-size: 12.5px; margin: 4px 0 8px; }
.fac-batchlijst { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.fac-batchrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.fac-batchrij span { display: grid; }
.fac-batchrij small { color: var(--ink2); font-size: 11.5px; }
.fac-batchrij.is-blok { opacity: .6; }
.fac-batchrij label { font-size: 12px; white-space: nowrap; }
.fac-batchhist { margin-top: 10px; display: grid; gap: 2px; }
.fac-batchhistrij { font-size: 11.5px; color: var(--ink2); }
/* de batchdialoog vraagt ruimte: nummer, klant en drie kanaalvinkjes naast elkaar */
.bs-modal:has(.fac-batchlijst) { width: min(760px, 94vw); max-width: none; }
.fac-batchlijst { min-width: 0; }
.fac-batchrij span { min-width: 0; }
.fac-batchrij b.mono { margin-right: 6px; }

/* ── sbcred.css ── */
/* =====================================================================
   sbcred.css — module 4.3 · Self-billing + Inkoop & crediteuren (sb-)
   Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.sb { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.sb-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.sb-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.sb-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 76ch; }

.sb-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; }
.sb-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.sb-knop--primair:hover { background: var(--gradient-primair-hover); }
.sb-knop--klein { padding: 5px 10px; font-size: .64rem; }
.sb-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }

/* ---- self-billing tabel ---- */
.sb-rij { display: grid; grid-template-columns: 96px 1.4fr 66px 90px 130px 62px 66px 1.4fr; gap: 10px;
  align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sb-rij:last-child { border-bottom: 0; }
.sb-rij.is-blok { background: var(--c-rood-t); }
.sb-rij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); background: var(--c-paneel); }
.sb-rij__nr { font: 600 .68rem var(--font-mono); color: var(--c-groen-d); }
.sb-rij__wie { display: flex; flex-direction: column; }
.sb-rij__wie strong { font: 600 .76rem var(--font-ui); }
.sb-rij__wie span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); }
.sb-rij__wb { font-size: .64rem; color: var(--c-ink-3); }
.sb-rij__g { font-size: .64rem; color: var(--c-amber); }
.sb-rij__st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sb-rij__detail { font-size: .6rem; color: var(--c-ink-3); }
.sb-poortje { font: 700 .62rem var(--font-mono); padding: 3px 8px; border-radius: var(--radius-pill); text-align: center; }
.sb-poortje.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.sb-poortje.is-fout { background: var(--c-rood-t); color: var(--c-rood); }

/* ---- matching eigen facturen ---- */
.sb-match { display: grid; grid-template-columns: 1.4fr 100px 110px 1.6fr; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sb-match:last-child { border-bottom: 0; }
.sb-match > div { display: flex; flex-direction: column; }
.sb-match strong { font: 600 .76rem var(--font-ui); }
.sb-match > div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.sb-match__norm { font-size: .64rem; color: var(--c-ink-2); }
.sb-match__acties { display: inline-flex; gap: 6px; margin-left: 8px; }

/* ---- crediteuren ---- */
.sb-aprij { display: grid; grid-template-columns: 1.3fr 100px 110px 1.5fr 1.3fr; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sb-aprij:last-child { border-bottom: 0; }
.sb-aprij.is-blok { background: var(--c-rood-t); }
.sb-aprij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); background: var(--c-paneel); }
.sb-koppeling { font-size: .62rem; color: var(--c-ink-2); display: flex; flex-direction: column; }
.sb-koppeling em { font-style: normal; color: var(--c-amber); }
.is-urgent { color: var(--c-terra); font-weight: 700; }
.is-laat { color: var(--c-rood); font-weight: 700; }

/* ---- crediteuren op echte data (FT-4.4): zoek/filter-balk, matchvlag,
   melding & paginering. Alleen tokens, geen losse kleurwaarden. ---- */
.sb-credbalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.sb-credbalk > label.kicker { margin-right: 2px; }
.sb-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 500 .74rem var(--font-ui); }
.sb-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.sb-flt { padding: 6px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: var(--c-creme); color: var(--c-ink-2); font: 600 .66rem var(--font-ui); cursor: pointer; }
.sb-flt:hover { border-color: var(--c-groen-d); }
.sb-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); }
.sb-flt:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.sb-credstand { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); }

.sb-credmelding { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px;
  border: var(--lijndikte) solid var(--c-amber); border-radius: 10px; background: var(--c-amber-t);
  color: var(--c-ink); font: 500 .72rem var(--font-ui); }

.sb-mvlag { font: 700 .6rem var(--font-mono); padding: 2px 7px; border-radius: var(--radius-pill); width: fit-content; }
.sb-mvlag--match { background: var(--c-groen-t); color: var(--c-groen-d); }
.sb-mvlag--mismatch { background: var(--c-rood-t); color: var(--c-rood); }
.sb-mvlag--wacht-ontvangst { background: var(--c-paneel); color: var(--c-ink-2); }
.sb-mvlag--alleen-opdracht,
.sb-mvlag--ongekoppeld { background: var(--c-amber-t); color: var(--c-amber); }

.sb-credpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 0; }
.sb-credpag .sb-knop[disabled] { opacity: .4; cursor: not-allowed; }

.sb-tweekolom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 22px; align-items: start; }
.sb-agingkaart { padding: 8px 16px; }
.sb-aging { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 600 .74rem var(--font-ui); }
.sb-aging:last-child { border-bottom: 0; }
.sb-aging em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.sb-correctie { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.sb-correctie:last-child { border-bottom: 0; }
.sb-correctie div { display: flex; flex-direction: column; }
.sb-correctie strong { font: 600 .74rem var(--font-ui); }
.sb-correctie div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); }
.sb-correctie .is-min { color: var(--c-rood); }

/* ---- betaalbatch ---- */
.sb-batch { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.sb-batch__stappen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-stap { display: flex; align-items: center; gap: 9px; padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); background: var(--c-creme); }
.sb-stap i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 700 .66rem var(--font-mono); font-style: normal; background: var(--c-paneel); color: var(--c-ink-2); }
.sb-stap.is-klaar i { background: var(--c-groen); color: #fff; }
.sb-stap.is-nu { border-color: var(--c-ink); }
.sb-stap.is-nu i { background: var(--c-ink); color: var(--c-creme); }
.sb-stap div { display: flex; flex-direction: column; }
.sb-stap strong { font: 700 .7rem var(--font-ui); }
.sb-stap span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); }
.sb-stap__pijl { color: var(--c-ink-3); }
.sb-batch__cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sb-batch__cijfers > div { display: flex; flex-direction: column; padding: 10px 13px; border-radius: 12px; background: var(--c-creme);
  border: var(--lijndikte) solid var(--c-lijn); }
.sb-batch__cijfers span { font: 500 .62rem var(--font-ui); color: var(--c-ink-2); }
.sb-batch__cijfers strong { font: 700 .9rem var(--font-mono); }
.sb-batch__cijfers > div.is-g { background: var(--c-amber-t); border-color: var(--c-amber); }
.sb-batch__cijfers > div.is-g strong { color: var(--c-amber); }
.sb-batchregel { display: grid; grid-template-columns: 110px 1.2fr 90px 110px 100px; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .7rem var(--font-ui); }
.sb-batchregel:last-child { border-bottom: 0; }
.sb-batch__voet { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sb-rollen { display: flex; align-items: center; gap: 7px; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.sb-rol { padding: 6px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: var(--c-creme); font: 600 .66rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; }
.sb-rol.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.sb-batch__acties { display: flex; gap: 8px; }
.sb-batch em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }

/* ---- donkere uitleg-footer ---- */
.sb-footer { margin: 4px 0 18px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--c-ink); color: var(--c-creme); box-shadow: var(--schaduw-tegel); }
.sb-footer .kicker { color: var(--c-paneel-2); opacity: .75; }
.sb-footer p { margin: 7px 0 0; font: 400 .78rem/1.6 var(--font-ui); max-width: 88ch; opacity: .92; }
.sb-footer strong { color: #fff; }

@media (max-width: 1100px) {
  .sb-tweekolom { grid-template-columns: 1fr; }
  .sb-batch__cijfers { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .sb-knop, .sb-rol { transition: background .16s ease, box-shadow .16s ease, color .16s ease; }
}

/* Inkoop-inbox + betaalbatch (15-07) */
.sb-inboxuitleg { font-size: 12.5px; color: var(--c-ink-2); margin: 4px 0 8px; }
.sb-inboxrij { display: grid; grid-template-columns: 80px 1.6fr .8fr 1fr 1.4fr; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.sb-inboxrij:last-child { border-bottom: 0; }
.sb-inboxrij.is-onduidelijk { background: color-mix(in srgb, var(--c-amber) 6%, transparent); }
.sb-inboxreden { font-size: 11.5px; color: var(--c-amber); font-weight: 600; }
.sb-batchrij { display: grid; grid-template-columns: auto 1.6fr .8fr .8fr 1fr; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; cursor: pointer; }
.sb-batchvoet { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13px; }
.sb-batchkaart { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sb-batchkop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Inkoopfactuur-verwerking (spec 15-07) */
.sb-inboxrij { display: block; padding: 0; }
.sb-inboxkop { display: grid; grid-template-columns: 76px auto 1.6fr .8fr auto; gap: 12px; align-items: center; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 9px 14px; cursor: pointer; color: var(--c-ink); }
.sb-inboxdetail { border-top: 1px dashed var(--c-lijn); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.sb-inboxvelden { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; }
.sb-inboxveld { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.sb-ketenrij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.sb-ketenrij i { color: var(--c-ink-3); font-style: normal; }
.sb-ketenstap { border: 1px solid var(--c-lijn); border-radius: 99px; padding: 3px 10px; }
.sb-checks { display: flex; flex-direction: column; gap: 4px; }
.sb-check { display: flex; gap: 8px; font-size: 12.5px; align-items: baseline; }
.sb-check i { font-style: normal; font-weight: 800; }
.sb-check.is-ok i { color: var(--c-groen-d); }
.sb-check.is-fout { color: var(--c-terra); font-weight: 600; }
.sb-check.is-fout i { color: var(--c-rood); }
.sb-boekklaar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--c-groen-d); }
.sb-controle { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; color: var(--c-amber); }
.sb-exactref { font-size: 10.5px; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 8px; color: var(--c-ink-2); }

/* ---- B3a · rapportage & dashboard ---- */
.sb-rapport { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.sb-rapgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.sb-rapgrid .kicker { display: block; margin-bottom: 8px; }
.sb-raprij { display: grid; grid-template-columns: 130px 1fr 90px; gap: 10px; align-items: center; padding: 5px 0; font: 500 .7rem var(--font-ui); }
.sb-raprij i { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.sb-raprij i b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); }
.sb-raprij strong { text-align: right; }
.sb-rapport > em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.sb-boekregel { display: grid; grid-template-columns: 2fr 70px 90px 90px 1fr; gap: 8px; margin-top: 8px; padding: 8px 10px; border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: 10px; }
@media (max-width: 1100px) { .sb-rapgrid, .sb-boekregel { grid-template-columns: 1fr; } }

/* B3d · server-side betaalbatch: overgeslagen regels mét reden */
.sb-batch__overgeslagen { display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
  padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); }
.sb-batch__overgeslagen span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); }
.sb-hint { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); margin-right: auto; }

/* ============ C+A · inkoopfactuur-invoer (16-07-2026) ============ */
.ci-slim { position: relative; margin: 4px 0 16px; }
.ci-slim > input { width: 100%; box-sizing: border-box; border: 2px solid var(--c-groen-d); border-radius: 16px; padding: 15px 190px 15px 44px; font: inherit; font-size: 16px; background: var(--c-paneel); box-shadow: var(--schaduw-tegel); color: var(--c-ink); }
.ci-slim::before { content: "⌕"; position: absolute; left: 17px; top: 15px; font-size: 19px; color: var(--c-groen-d); }
.ci-slim__hint { position: absolute; right: 16px; top: 20px; font-size: 9.5px; color: var(--c-ink-2); }
.ci-res { border: 1px solid var(--c-groen-d); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: var(--schaduw-tegel); }
.ci-resrij { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--c-lijn); background: var(--c-paneel); font: inherit; font-size: 13px; text-align: left; padding: 11px 16px; cursor: pointer; color: var(--c-ink); }
.ci-resrij:first-child { border-top: 0; }
.ci-resrij:hover { background: var(--c-creme); }
.ci-resrij i { font-style: normal; width: 20px; text-align: center; color: var(--c-groen-d); }
.ci-resrij em { display: block; font-style: normal; font-size: 11px; color: var(--c-ink-2); }
.ci-resrij b { margin-left: auto; font-size: 10px; color: var(--c-ink-2); }
.ci-resrij.is-leeg { color: var(--c-ink-2); cursor: default; font-size: 12px; }
.ci-chip { font-family: var(--font-mono); font-size: 9.5px; border-radius: 99px; padding: 2px 8px; border: 1px solid var(--c-lijn); color: var(--c-ink-2); align-self: flex-start; }
.ci-chip.groen { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); }
.ci-chip.amber { border-color: var(--c-amber); color: var(--c-amber); }
.ci-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.ci-grid.heeft-doc { grid-template-columns: 380px 1fr 300px; }
.ci-kies3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ci-kies { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.ci-kies strong { font-size: 13px; }
.ci-kies em { font-style: normal; font-size: 11px; color: var(--c-ink-2); }
.ci-ruil { position: absolute; top: 10px; right: 12px; border: 0; background: none; font: inherit; font-size: 11px; color: var(--c-groen-d); font-weight: 700; cursor: pointer; }
.ci-leeg { font-size: 12px; color: var(--c-ink-2); padding: 8px 0; }
.ci-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ci-duo label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; color: var(--c-ink-2); }
.ci-duo input, .ci-duo select { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; background: var(--c-paneel); color: var(--c-ink); }
.ci-regels { padding: 14px 16px; }
.ci-regels table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ci-regels th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); padding: 6px 8px; border-bottom: 1px solid var(--c-lijn); }
.ci-regels td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--c-lijn); }
.ci-regels input, .ci-regels select { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; background: var(--c-paneel); width: 100%; box-sizing: border-box; color: var(--c-ink); }
.ci-regels td:nth-child(2) { width: 150px; }
.ci-regels td:nth-child(3) { width: 100px; }
.ci-regels td:nth-child(4) { width: 84px; }
.ci-regels td:nth-child(5) { width: 30px; }
.ci-mini { border: 1px solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); font: inherit; font-size: 11px; padding: 4px 8px; cursor: pointer; color: var(--c-ink-2); }
.ci-mini:hover { color: var(--c-rood); border-color: var(--c-rood); }
.ci-plusregel { display: block; width: 100%; border: 1px dashed var(--c-lijn-2, var(--c-lijn)); border-radius: 10px; background: none; font: inherit; padding: 9px; font-size: 12px; color: var(--c-ink-2); font-weight: 700; margin-top: 10px; cursor: pointer; }
.ci-plusregel:hover { color: var(--c-groen-d); border-color: var(--c-groen-d); }
.ci-btwhint { font-size: 10.5px; color: var(--c-ink-2); margin-top: 8px; }
.ci-link { border: 0; background: none; font: inherit; font-size: inherit; color: var(--c-groen-d); font-weight: 700; cursor: pointer; padding: 0; }
.ci-zij { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 14px; }
.ci-upload { border-style: dashed; padding: 14px; text-align: center; font-size: 12px; color: var(--c-ink-2); cursor: pointer; }
.ci-upload b { display: block; font-size: 18px; color: var(--c-groen-d); }
.ci-upload__mini { display: flex; gap: 8px; align-items: center; margin-top: 10px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 9px; background: var(--c-paneel); }
.ci-upload__mini i { font-style: normal; font-size: 9px; border: 1px solid var(--c-lijn); border-radius: 4px; padding: 4px 5px; }
.ci-upload__mini em { display: block; font-style: normal; font-size: 10px; color: var(--c-ink-2); }
.ci-totalen, .ci-checks { padding: 12px 16px; }
.ci-totrij { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
.ci-totrij.groot { border-top: 1px solid var(--c-lijn); margin-top: 6px; padding-top: 9px; font-weight: 800; font-size: 14px; }
.ci-check { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; color: var(--c-ink-2); }
.ci-check.is-ok { color: var(--c-ink); }
.ci-check i { font-style: normal; color: var(--c-ink-2); }
.ci-check.is-ok i { color: var(--c-groen-d); font-weight: 800; }
.ci-breed { width: 100%; box-sizing: border-box; }
.ci-idnoot { font-size: 9px; color: var(--c-ink-2); text-align: center; }
.ci-doc { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ci-doc__kop { display: flex; justify-content: space-between; align-items: center; }
.ci-doc__pdf { background: var(--c-creme); border: 1px solid var(--c-lijn); border-radius: 10px; padding: 16px 18px; font-size: 11.5px; line-height: 1.6; position: relative; }
.ci-doc__pdf h3 { margin: 0 0 2px; font-size: 14px; }
.ci-doc__pdf table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11px; }
.ci-doc__pdf td { padding: 4px 0; border-bottom: 1px solid var(--c-lijn); }
.ci-doc__pdf td.mono { text-align: right; }
.ci-doc__tag { position: absolute; top: 10px; right: 12px; font-size: 9px; border: 1px solid var(--c-groen); color: var(--c-groen-d); border-radius: 99px; padding: 2px 8px; background: var(--c-groen-t); }
.ci-doc__leeg { font-size: 12px; color: var(--c-ink-2); padding: 20px; text-align: center; }
.ci-btwrij { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; padding: 6px 0; }
.ci-btwrij label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--c-ink-2); }
.ci-btwrij input { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }
@media (max-width: 1100px) { .ci-grid, .ci-grid.heeft-doc { grid-template-columns: 1fr; } .ci-kies3 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .ci-slim__hint { display: none; } .ci-slim > input { padding-right: 16px; } }

/* aparte zoekvelden in de kaarten (verzoek Michiel) */
.ci-kaartzoek { position: relative; margin-top: 4px; }
.ci-kaartzoek input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--c-groen-d); border-radius: 10px; padding: 9px 12px 9px 30px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }
.ci-kaartzoek::before { content: "⌕"; position: absolute; left: 10px; top: 9px; color: var(--c-groen-d); }
.ci-res--kaart { margin-top: 6px; box-shadow: none; }
.ci-res--kaart .ci-resrij { padding: 9px 12px; font-size: 12px; }

/* opdracht per factuurregel */
.ci-regels td:nth-child(2) { width: 120px; }
.ci-regels td:nth-child(3) { width: 150px; }
.ci-regels td:nth-child(4) { width: 100px; }
.ci-regels td:nth-child(5) { width: 84px; }
.ci-regels td:nth-child(6) { width: 30px; }
.ci-opkoppel { border: 1px dashed var(--c-groen-d); border-radius: 8px; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--c-groen-d); padding: 6px 10px; cursor: pointer; width: 100%; }
.ci-opkoppel.is-actief { background: var(--c-groen-t); }
.ci-opchip { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; border: 1px solid var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); border-radius: 99px; padding: 4px 6px 4px 10px; }
.ci-opchip.is-alg { border-color: var(--c-lijn); color: var(--c-ink-2); background: var(--c-creme); }
.ci-opchip__x { border: 0; background: none; font: inherit; font-size: 10px; cursor: pointer; color: inherit; padding: 0 2px; }
.ci-opzoekrij td { padding: 8px 0 12px; background: color-mix(in srgb, var(--c-groen) 5%, transparent); border-radius: 10px; }
.ci-kies2 { grid-template-columns: 1fr 1.2fr; }

/* nieuwe-leverancier-rij in de zoeker (fix 21-07) */
.ci-resrij--nieuw i { color: var(--c-groen-d); font-weight: 700; }
.ci-resrij--nieuw strong { color: var(--c-groen-d); }

/* ═══ SB2 · het bonvak in het zelffactuur-formulier ═══════════════════
   Hier stond een invulveld voor het bedrag. Wat de uitvoerder krijgt is
   geen invoer maar een uitkomst — dus tonen we de rekensom die bij het
   keuren is vastgevroren, en niets om in te tikken. */
.sb-bonvak {
  margin: 12px 0 0; padding: 12px 14px;
  border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--grijs);
}
.sb-bonrij { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .8rem; }
.sb-bonrij span { color: var(--ink2); }
.sb-bonrij.is-eind { border-top: 1px solid var(--lijn); margin-top: 6px; padding-top: 8px; }
.sb-bonrij.is-eind strong { font-size: 1.05rem; }
.sb-bonuitleg { margin-top: 6px; font-size: .72rem; color: var(--ink2); }
.sb-blok { display: block; font-size: .8rem; color: var(--stop); }

/* ── crediteuren.css ── */
/* crediteuren.css — scherm `crediteuren` (bouwspec CREDITEUREN §3).
   Vorm en kleur komen uit casa360-stijl.css; hier staat alleen wat dit
   scherm eigen is: de twee kolommen van de inbox, de betaalrijen en het
   xml-vlak. Geen kleurliteral — de vier betekeniskleuren doen het werk. */

.cred { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

.cred-kop { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.cred-kop h1 { font-size: 22px; margin: 4px 0 0; font-weight: 800; }
.cred-sub { color: var(--ink2); font-size: 12.5px; margin: 3px 0 0; }
.cred-tabs { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.cred-tab { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-pill);
  padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.cred-tab:hover { border-color: var(--lijn2); }
.cred-tab.is-actief { background: var(--ink); border-color: var(--ink); color: var(--kaart); }

.cred-bak { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .cred-bak { grid-template-columns: 1fr; } }

.cred-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); overflow: hidden; }
.cred-kaart--los { margin-top: 14px; }
.cred-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; }
.cred-bakkop b { font-size: 13px; }
.cred-bakkop span { font-size: 11px; color: var(--ink3); }
.cred-leeg { padding: 26px; text-align: center; color: var(--ink3); }
.cred-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius);
  background: var(--stop-t); color: var(--stop); margin-bottom: 14px; }

/* ---- inbox-lijst ---- */
.cred-rij { display: grid; grid-template-columns: 92px minmax(0, 1fr) 120px 118px; gap: 11px; align-items: center;
  padding: 9px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.cred-rij:last-child { border-bottom: 0; }
.cred-rij--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); font-weight: 700; cursor: default; }
.cred-rij:not(.cred-rij--kop):hover { background: var(--vlak); }
.cred-rij.is-gekozen { background: var(--accent-t); }
.cred-naam { font-weight: 700; }
.cred-fijn { color: var(--ink3); font-size: 11px; line-height: 1.45; }
.cred-sig { font-size: 10.5px; line-height: 1.45; margin-top: 3px; color: var(--ink3); }
.cred-sig--stop { color: var(--stop); }

.cred-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px;
  border-radius: var(--radius-pill); white-space: nowrap; }
.cred-pil--goed { background: var(--goed-t); color: var(--goed); }
.cred-pil--let { background: var(--let-t); color: var(--let); }
.cred-pil--stop { background: var(--stop-t); color: var(--stop); }
.cred-pil--acc { background: var(--accent-t); color: var(--accent-d); }
.cred-pil--stil { background: var(--vlak); color: var(--ink2); }
.cred-pillen { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- dossierpaneel ---- */
.cred-paneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart); position: sticky; top: 14px; overflow: hidden;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.cred-paneelkop { padding: 12px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.cred-paneelnaam { font-weight: 800; font-size: 15px; margin-top: 2px; }
.cred-paneellijf { padding: 12px 14px; overflow: auto; }
.cred-paneelvoet { padding: 10px 14px; border-top: 1px solid var(--lijn); background: var(--vlak);
  display: flex; gap: 6px; flex-wrap: wrap; }

.cred-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px; margin-bottom: 9px; }
.cred-tegel--stop { border-color: var(--stop); background: var(--stop-t); }
.cred-tegel--let { border-color: var(--let); background: var(--let-t); }
.cred-tegel--goed { border-color: var(--goed); background: var(--goed-t); }
.cred-tegel--plat { margin: 0; }
.cred-tegel h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); }
.cred-uitleg { background: var(--kaart); margin-bottom: 14px; line-height: 1.55; }
.cred-uitlegblok { padding: 11px 13px; }

.cred-paar { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px;
  align-items: flex-start; line-height: 1.5; }
.cred-paar--streep { border-top: 1px solid var(--lijn); margin-top: 7px; padding-top: 6px; }
.cred-bedrag { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.cred-bedrag.is-stop, .is-stop { color: var(--stop); }
.cred-bedrag.is-let { color: var(--let); }
.cred-bedrag.is-goed, .is-goed { color: var(--goed); }

.cred-pdfblok { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 11px; margin-bottom: 9px; }
.cred-pdf { background: var(--ink); border-radius: var(--radius-klein); aspect-ratio: 1/1.414;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--kaart); gap: 4px; font-size: 11px; }
.cred-pdf__g { font-size: 13px; font-weight: 800; letter-spacing: .05em; }

.cred-veldrij { display: grid; grid-template-columns: 126px minmax(0, 1fr) 74px; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--lijn); font-size: 12px; }
.cred-veldrij:last-of-type { border-bottom: 0; }
.cred-veldrij label { color: var(--ink2); }
.cred-veldrij input { width: 100%; font: inherit; font-family: var(--font-mono); border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 4px 7px; background: var(--kaart); color: var(--ink); }
.cred-veldrij input.is-laag { border-color: var(--let); background: var(--let-t); }
.cred-veldrij input.is-fout { border-color: var(--stop); background: var(--stop-t); }
.cred-knopveld { display: flex; gap: 5px; align-items: center; }
.cred-knopveld input { flex: 1; }
.cred-zeker { font-size: 10px; font-weight: 800; text-align: right; font-family: var(--font-mono); color: var(--ink3); }
.cred-zeker--goed { color: var(--goed); }
.cred-zeker--let { color: var(--let); }
.cred-zeker--stop { color: var(--stop); }

.cred-rblok { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 7px;
  margin-bottom: 6px; background: var(--vlak); }
.cred-rblok.is-mis { border-color: var(--stop); background: var(--stop-t); }
.cred-rblok.is-laag { border-color: var(--let); background: var(--let-t); }
.cred-rA { display: grid; grid-template-columns: minmax(0, 1fr) 54px 82px 26px; gap: 6px; align-items: center; margin-bottom: 5px; }
.cred-rB { display: grid; grid-template-columns: minmax(0, 1fr) 64px 110px; gap: 6px; align-items: center; }
.cred-rblok input, .cred-rblok select { width: 100%; font: inherit; font-size: 11.5px; border: 1px solid var(--lijn);
  border-radius: 4px; padding: 3px 5px; background: var(--kaart); color: var(--ink); }
.cred-rblok select.is-leeg { border-color: var(--stop); }
.cred-num { font-family: var(--font-mono); text-align: right; }
.cred-rvoet { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--ink3);
  margin-top: 4px; line-height: 1.4; }
.cred-weg { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 4px; color: var(--stop);
  font: inherit; font-weight: 800; padding: 0; height: 22px; cursor: pointer; }
.cred-regelknoppen { display: flex; gap: 6px; margin: 2px 0 4px; }

/* ---- betaallijst en de brede tabellen ---- */
.cred-rijb { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 172px 130px 112px; gap: 10px;
  align-items: center; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; }
.cred-rijb:last-child { border-bottom: 0; }
.cred-rijb--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); font-weight: 700; }
.cred-rijb--som { background: var(--vlak); }
.cred-rijb--stil { opacity: .85; }
.cred-rijb.is-gekozen { background: var(--accent-t); }
.cred-rijb.is-verlopen .cred-verv { color: var(--stop); font-weight: 800; }
.cred-rijb.is-nu .cred-verv { color: var(--let); font-weight: 800; }
.cred-rijb input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.cred-rechts { text-align: right; }
.cred-iban { font-size: 11px; }

.cred-selbalk { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--accent-t);
  border-bottom: 1px solid var(--accent); flex-wrap: wrap; }
.cred-groep { padding: 9px 13px; background: var(--vlak); border-bottom: 1px solid var(--lijn);
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cred-groep b { font-size: 12.5px; }
.cred-groep span { font-size: 11px; color: var(--ink3); }
.cred-groepknoppen { margin-left: auto; display: flex; gap: 6px; }
.cred-weigering { padding: 9px 13px; background: var(--stop-t); border-bottom: 1px solid var(--lijn);
  font-size: 11.5px; color: var(--stop); line-height: 1.6; }
.cred-weigering .cred-fijn { color: var(--ink2); }

.cred-rijg { display: grid; grid-template-columns: 70px minmax(0, 1fr) 150px 60px 130px 150px; gap: 10px;
  align-items: center; padding: 7px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; }
.cred-rijl { display: grid; grid-template-columns: minmax(0, 1fr) 110px 180px 80px 170px 60px; gap: 10px;
  align-items: center; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; }
.cred-rijg--kop, .cred-rijl--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.cred-rijg:last-child, .cred-rijl:last-child { border-bottom: 0; }
.cred-rijl:not(.cred-rijl--kop):hover { background: var(--vlak); }

/* ---- vensters ---- */
.cred-mask { position: fixed; inset: 0; background: rgba(20, 20, 20, .45); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; }
.cred-venster { background: var(--kaart); border-radius: var(--radius); width: min(680px, 94vw); max-height: 84vh;
  display: flex; flex-direction: column; box-shadow: var(--schaduw-zwevend); overflow: hidden; }
.cred-vensterkop { padding: 12px 15px; border-bottom: 1px solid var(--lijn); background: var(--vlak);
  display: flex; align-items: center; gap: 10px; }
.cred-vensterkop b { font-size: 14px; }
.cred-x { margin-left: auto; }
.cred-vensterlijf { padding: 13px 15px; overflow: auto; }
.cred-venstervoet { padding: 10px 15px; border-top: 1px solid var(--lijn); background: var(--vlak);
  display: flex; gap: 6px; align-items: center; }
.cred-zoekbalk { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 7px 10px; background: var(--kaart); color: var(--ink); }
.cred-treffers { margin: 10px 0; }
.cred-tref { display: grid; grid-template-columns: minmax(0, 1fr) 130px 80px; gap: 10px; align-items: center;
  padding: 7px 8px; border-bottom: 1px solid var(--lijn); cursor: pointer; border-radius: var(--radius-klein); }
.cred-tref:hover, .cred-tref:focus-visible { background: var(--accent-t); }
.cred-vform { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 12px; }
.cred-vform input, .cred-vform select { font: inherit; font-size: 12px; border: 1px solid var(--lijn);
  border-radius: 4px; padding: 5px 7px; width: 100%; background: var(--kaart); color: var(--ink); }
.cred-xml { background: var(--ink); color: var(--kaart); font-family: var(--font-mono); font-size: 10.5px;
  line-height: 1.5; padding: 11px 13px; border-radius: var(--radius-klein); overflow: auto;
  max-height: 46vh; white-space: pre; }

/* ---- knoppen: eigen klassen, want het platform kent nog geen gedeelde
   knopcomponent buiten de bouwstenen om ---- */
.cred-knop { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein);
  padding: 5px 11px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color var(--overgang), background var(--overgang); }
.cred-knop:hover { border-color: var(--lijn2); background: var(--grijs); }
.cred-knop--zwart { background: var(--ink); color: var(--kaart); border-color: var(--ink); }
.cred-knop--zwart:hover { background: var(--ink); border-color: var(--ink); }
.cred-knop--stop { color: var(--stop); border-color: var(--stop); }
.cred-knop--stop:hover { background: var(--stop-t); border-color: var(--stop); }
.cred-knop--klein { padding: 3px 9px; font-size: 10.5px; }
.cred-knop[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- bankmutaties (fase 5) ---- */
.cred-mutatieveld { width: 100%; font-family: var(--font-mono); font-size: 11.5px; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: 8px 10px; background: var(--kaart); color: var(--ink);
  line-height: 1.6; resize: vertical; }

/* LC · de dossierrijen: naam met de reden eronder, kvk en het aantal
   stukken ernaast. Drie kolommen, want meer heeft deze rij niet nodig. */
.cred-rijl--dos { grid-template-columns: minmax(0, 1fr) 120px 120px; }

/* IK1/IK5 · overzicht: fase-tegels, signalen, brede rijen met opdracht en fase */
.cred-signalen { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.cred-rijb--ov { grid-template-columns: 28px 1.6fr 1fr 1fr .8fr .9fr .8fr; }
.cred-rijb--batch { grid-template-columns: 1fr .8fr 1.2fr .8fr 1.6fr; }
.cred-link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; }
.cred-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cred-rijb .chip--let { color: var(--let); border-color: var(--let); }
.cred-rijb .chip--stop { color: var(--stop); border-color: var(--stop); }
.cred-rijb .chip--goed { color: var(--goed); border-color: var(--goed); }

/* ── subsidie.css ── */
/* =====================================================================
   subsidie.css — module 4.4 · Subsidiebeheer (sub-)
   Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.sub { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.sub-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.sub-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.sub-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 76ch; }
.sub-kop__acties { display: flex; gap: 8px; }
.sub-tabs { margin-bottom: 16px; }

.sub-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; text-decoration: none; display: inline-block; }
.sub-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.sub-knop--primair:hover { background: var(--gradient-primair-hover); }
.sub-knop--rood { background: var(--c-rood); border-color: var(--c-rood); color: #fff; }
.sub-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }
.sub-knop--klein { padding: 5px 10px; font-size: .64rem; }

/* ---- pijplijn (kanban) ---- */
.sub-pijplijn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; margin-bottom: 18px; }
.sub-kolom { display: flex; flex-direction: column; gap: 8px; }
.sub-kolom__kop { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-pill);
  font: 700 .68rem var(--font-ui); }
.sub-kolom__kop i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sub-kolom__kop strong { margin-left: auto; }
.sub-kolom__kop--stil { background: var(--c-paneel); color: var(--c-ink-2); }
.sub-kolom__kop--amber { background: var(--c-amber-t); color: var(--c-amber); }
.sub-kolom__kop--groen-licht { background: var(--c-groen-t); color: var(--c-groen); }
.sub-kolom__kop--groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.sub-kolom__som { text-align: right; font-size: .64rem; color: var(--c-ink-3); padding-right: 4px; }
.sub-kaartje { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 11px 13px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-groen); border-radius: 12px;
  background: var(--c-creme); box-shadow: var(--schaduw-tegel); font: inherit; }
.sub-kaartje:hover { box-shadow: var(--schaduw-tegel-hover); }
.sub-kaartje__kop { display: flex; justify-content: space-between; gap: 8px; }
.sub-kaartje__kop strong { font: 700 .74rem var(--font-ui); }
.sub-kaartje__kop span { font: 700 .7rem var(--font-mono); color: var(--c-groen-d); }
.sub-kaartje__id { font-size: .6rem; color: var(--c-ink-3); }
.sub-kaartje__voet { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sub-kaartje__voet em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.sub-termijn { font: 600 .62rem var(--font-ui); color: var(--c-amber); }
.sub-voetnoot { margin: 6px 0 18px; padding: 11px 15px; border-radius: var(--radius); background: var(--c-paneel);
  font: 500 .72rem/1.55 var(--font-ui); color: var(--c-ink-2); }
.sub-voetnoot .mono { color: var(--c-groen-d); font-weight: 700; margin-right: 6px; }

/* ---- lijst ---- */
.sub-rij { display: grid; grid-template-columns: 120px 1.3fr 1.1fr 1fr 90px auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 11px 16px; border: 0; border-bottom: var(--lijndikte) solid var(--c-lijn);
  background: none; cursor: pointer; font: 500 .72rem var(--font-ui); color: var(--c-ink); }
.sub-rij:last-child { border-bottom: 0; }
.sub-rij:hover { background: var(--c-creme); }
.sub-rij--kop { cursor: default; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); background: var(--c-paneel); }
.sub-rij--kop:hover { background: var(--c-paneel); }
.sub-rij__id { font: 600 .66rem var(--font-mono); color: var(--c-groen-d); }
.sub-rij__wie { display: flex; flex-direction: column; }
.sub-rij__wie strong { font: 600 .76rem var(--font-ui); }
.sub-rij__wie span { font-size: .62rem; color: var(--c-ink-3); }
.sub-rij__risico { font: 600 .66rem var(--font-ui); color: var(--c-rood); }

/* ---- eligibility-poort ---- */
.sub-poortgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 14px; }
.sub-poortkaart { padding: 15px 17px; display: flex; flex-direction: column; gap: 7px; }
.sub-poortkaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.sub-poortkaart__kop strong { font: 700 .82rem var(--font-ui); display: block; }
.sub-poortkaart__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.sub-checkrij { display: flex; align-items: center; gap: 9px; padding: 5px 0; border: 0; background: none;
  font: 500 .72rem var(--font-ui); color: var(--c-ink); text-align: left; cursor: pointer; }
.sub-checkrij[disabled] { cursor: default; }
.sub-check { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 700 .66rem var(--font-mono); flex: none; }
.sub-check.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.sub-check.is-fout { background: var(--c-rood-t); color: var(--c-rood); }
.sub-check.is-open { background: var(--c-amber-t); color: var(--c-amber); }
.sub-poortkaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px;
  padding-top: 9px; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.sub-poortkaart__acties { display: flex; gap: 7px; }

/* ---- regelingen ---- */
.sub-reggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.sub-regeling { padding: 15px 17px; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--c-groen); }
.sub-regeling--amber { border-top-color: var(--c-amber); }
.sub-regeling--terra { border-top-color: var(--c-terra); }
.sub-regeling__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sub-regeling__kop strong { font: 700 .9rem var(--font-ui); display: block; }
.sub-regeling__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.sub-regeling__plafond { display: flex; justify-content: space-between; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); }
.sub-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.sub-balk i { display: block; height: 100%; border-radius: var(--radius-pill); }
.sub-balk i.is-groen { background: var(--c-groen); }
.sub-balk i.is-amber { background: var(--c-amber); }
.sub-balk i.is-rood { background: var(--c-rood); }
.sub-regeling__benut { font-size: .62rem; color: var(--c-ink-3); }
.sub-regeling__stats { font-size: .64rem; color: var(--c-ink-2); padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.sub-regeling__eisen { display: flex; flex-direction: column; gap: 3px; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }

/* ---- drawer-inhoud ---- */
.sub-drawer__chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.sub-bedrag { padding: 13px 15px; border-radius: var(--radius); background: var(--c-groen-t); margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 3px; }
.sub-bedrag span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); }
.sub-bedrag > strong { font: 700 1.4rem var(--font-mono); color: var(--c-groen-d); }
.sub-bedrag em { font: 500 .66rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.sub-bedrag p { margin: 5px 0 0; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.sub-route { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.sub-machtiging { display: flex; align-items: center; gap: 9px; font: 500 .72rem var(--font-ui); }
.sub-zelf { padding: 11px 13px; border-radius: 12px; background: var(--c-amber-t); display: flex; flex-direction: column; gap: 6px; }
.sub-zelf strong { font: 700 .72rem var(--font-ui); color: var(--c-amber); }
.sub-zelf p { margin: 0; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.sub-pakketok { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.sub-risicobalk { padding: 9px 12px; border-radius: 10px; background: var(--c-rood-t); color: var(--c-rood);
  font: 600 .7rem var(--font-ui); margin-bottom: 12px; }
.sub-checks { display: flex; flex-direction: column; margin-bottom: 14px; }
.sub-checks .sub-checkrij { cursor: default; }
.sub-dossier { display: flex; flex-direction: column; gap: 4px; font-size: .64rem; color: var(--c-ink-2); margin-bottom: 14px; }
.sub-tijdlijn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 .64rem var(--font-ui);
  color: var(--c-ink-3); margin-bottom: 14px; }
.sub-tijdlijn i { font-style: normal; }
.sub-tijdlijn .is-klaar { color: var(--c-groen-d); }
.sub-tijdlijn .is-nu { color: var(--c-ink); font-weight: 800; }
.sub-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: .64rem; color: var(--c-ink-2); }
.sub-meta strong { color: var(--c-ink); }
.sub-poorttekst { font: 600 .68rem var(--font-ui); color: var(--c-rood); margin-right: auto; align-self: center; }

@media (max-width: 1100px) {
  .sub-pijplijn { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .sub-knop, .sub-kaartje, .fac-tab { transition: background .16s ease, box-shadow .16s ease, color .16s ease; }
}

/* RVO-doorlooptijd-tracker (D3a) */
.sub-tracker { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.sub-trkfase { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; font-size: 12.5px; align-items: baseline; }
.sub-trkfase i { font-style: normal; }
.sub-trkfase.is-klaar i { color: var(--c-groen-d); }
.sub-trkfase.is-rood { color: var(--c-terra); font-weight: 600; }
.sub-trkfase.is-amber { color: var(--c-amber); font-weight: 600; }
.sub-trksignaal { font-size: 12px; color: var(--c-terra); font-weight: 700; border-top: 1px dashed var(--c-lijn); padding-top: 8px; }
.sub-trksignaal.is-amber { color: var(--c-amber); }

/* ---------- Regelingbeheer (regelset: bewerken bumpt de versie) ---------- */
.sub-regkop { margin-bottom: 14px; }
.sub-regkop__sub { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; max-width: 62ch; }
.sub-regacties { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed var(--c-lijn); padding-top: 9px; }
.sub-regacties > span:last-child { display: flex; gap: 5px; flex-wrap: wrap; }
.sub-regversie { font-size: .62rem; color: var(--c-ink-3); letter-spacing: .02em; }
.sub-regarchief { margin-top: 18px; border-top: 1px solid var(--c-lijn); padding-top: 14px; display: grid; gap: 7px; }
.sub-regarchrij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 13px; }
.sub-regarchrij strong { font: 700 .78rem var(--font-ui); display: block; color: var(--c-ink-2); }
.sub-regarchrij span { font-size: .62rem; color: var(--c-ink-3); }
.sub-reghist { display: grid; gap: 6px; }
.sub-reghistrij { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px;
  border: 1px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; }
.sub-reghistrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.sub-reghistrij strong { font: 700 .76rem var(--font-ui); display: block; }
.sub-reghistrij > div span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }

/* ---- FT-4.5a · server-side zoek/paginering (lijst-tab) + "meer" in de
   pijplijnkolom. Alleen tokens, geen losse kleurwaarden. ---- */
.sub-zoekbalk { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.sub-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 500 .74rem var(--font-ui); }
.sub-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.sub-zoekstand { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); }
.sub-pag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 0; }
.sub-pag .btn[disabled] { opacity: .4; cursor: not-allowed; }
.sub-kolom__meer { display: block; width: 100%; margin-top: 6px; padding: 7px 10px; border: var(--lijndikte) dashed var(--c-lijn-2);
  border-radius: 10px; background: transparent; color: var(--c-ink-2); font: 600 .64rem var(--font-ui); cursor: pointer; text-align: center; }
.sub-kolom__meer:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); }
.sub-kolom__meer:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* ---- SUB A5 · de beschikking en de bezwaartermijn (bouwspec §3, §5.4).
   Drie regels naast elkaar: wat de klant is voorgerekend, wat RVO heeft
   toegekend, en hoeveel tijd er nog is om er iets aan te doen. Alleen
   tokens; de klok gebruikt --let voor «krap» en --stop voor «verlopen»,
   dezelfde betekenis als overal elders. ---- */
.sub-brief { display: grid; gap: 9px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 13px; background: var(--c-paneel); }
.sub-brief__cijfers, .sub-brief__brief { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sub-brief__cijfers span, .sub-brief__brief span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.sub-brief__cijfers strong, .sub-brief__brief strong { font: 700 .78rem var(--font-mono); color: var(--c-ink); display: block; }
.sub-brief__cijfers .is-tekort strong { color: var(--c-amber-d); }
.sub-brief__brief .is-mist { color: var(--c-amber-d); align-self: center; }

.sub-briefklok { display: grid; gap: 3px; border-left: 3px solid var(--c-groen); padding: 7px 11px;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0; background: var(--c-groen-t); }
.sub-briefklok span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.sub-briefklok strong { font-weight: 700; color: var(--c-ink); }
.sub-briefklok__grond { color: var(--c-ink-3); font-size: .62rem; }
.sub-briefklok__tekort { color: var(--c-amber-d); }
.sub-briefklok--krap { border-left-color: var(--c-amber-d); background: var(--c-amber-t); }
.sub-briefklok--dicht { border-left-color: var(--c-rood); background: var(--c-rood-t); }

/* ---- SUB A7 · het fotodossier in het paneel (bouwspec §2, §3).
   Gegroepeerd per maatregel, want de vraag is niet «hoeveel foto's» maar
   «heeft élke maatregel een vóór en een ná». De stip zegt de stand. ---- */
.sub-fotos { display: grid; gap: 11px; }
.sub-fotogroep { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 11px; }
.sub-fotogroep__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sub-fotogroep__kop strong { font: 700 .74rem var(--font-ui); }
.sub-fotostrip { display: flex; flex-wrap: wrap; gap: 7px; }

.sub-foto { position: relative; width: 74px; height: 56px; display: grid; place-items: center;
  border: var(--lijndikte) solid var(--c-lijn-2); border-left-width: 3px; border-radius: var(--radius-klein);
  background: var(--c-paneel); cursor: pointer; }
.sub-foto:hover { border-color: var(--c-groen-d); }
.sub-foto:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.sub-foto__fase { font: 700 .6rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); }
.sub-foto__gps { position: absolute; top: 2px; right: 4px; font-size: .62rem; color: var(--c-amber-d); }
.sub-foto.is-mee { border-left-color: var(--c-groen); }
.sub-foto.is-later { border-left-color: var(--c-amber-d); }
.sub-foto.is-klaar { border-left-color: var(--c-lijn-2); }

.sub-fotoleeg { font: 500 .68rem var(--font-ui); color: var(--c-ink-3); padding: 4px 0; }
.sub-fotovoet { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.sub-fotovoet strong { color: var(--c-ink-2); }

/* ── provisie.css ── */
/* =====================================================================
   provisie.css — module 4.5 · Provisie-suite (pr-)
   Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.pr { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.pr-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.pr-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.pr-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 76ch; }

.pr-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; }
.pr-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.pr-knop--rood { background: var(--c-rood); border-color: var(--c-rood); color: #fff; }
.pr-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; }
.pr-knop--klein { padding: 4px 9px; font-size: .62rem; }

.is-rood { color: var(--c-rood) !important; }
.is-groen { color: var(--c-groen-d) !important; }
.is-amber { color: var(--c-amber) !important; }
.is-goud { color: var(--c-amber); }

/* ---- dashboard ---- */
.pr-tweekolom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 16px; }
.pr-grafiek { padding: 14px 17px; }
.pr-balken { display: flex; align-items: flex-end; gap: 18px; height: 130px; margin-top: 14px; }
.pr-balk { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.pr-balk span { font-size: .6rem; color: var(--c-ink-2); }
.pr-balk i { width: 100%; max-width: 64px; border-radius: 8px 8px 3px 3px; background: var(--c-lijn-2); }
.pr-balk i.is-nu { background: var(--c-amber); }
.pr-balk em { font: 600 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-2); }
.pr-top { display: grid; grid-template-columns: 30px 1fr 90px 70px; gap: 10px; align-items: center; padding: 7px 0; }
.pr-top > span { font-size: .64rem; color: var(--c-ink-3); }
.pr-top strong { font: 600 .74rem var(--font-ui); }
.pr-topbalk { height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.pr-topbalk i { display: block; height: 100%; border-radius: var(--radius-pill); }
.pr-topbalk i.is-ink { background: var(--c-ink); }
.pr-topbalk i.is-amber { background: var(--c-amber); }
.pr-top em { font-style: normal; font-size: .68rem; color: var(--c-amber); text-align: right; }
.pr-telling { margin-left: auto; align-self: center; font-size: .64rem; color: var(--c-ink-3); }

.pr-rij { display: grid; grid-template-columns: 1.4fr 110px 130px 90px 90px 90px 90px auto; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.pr-rij:last-child { border-bottom: 0; }
.pr-rij.is-klikbaar { cursor: pointer; }
.pr-rij.is-klikbaar:hover { background: var(--c-creme); }
.pr-rij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); }
.pr-rij strong { font-size: .74rem; }
.pr-rij__model { font-size: .64rem; color: var(--c-ink-2); }
.pr-voetnoot { margin: 12px 0 16px; font: 500 .68rem/1.55 var(--font-ui); color: var(--c-ink-3); }

/* ---- grootboek ---- */
.pr-ledsel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.pr-ledsel .pr-knop--rood { margin-left: auto; }
.pr-ledrij { display: grid; grid-template-columns: 58px 1.7fr 100px 100px 110px 1.5fr; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .7rem var(--font-ui); }
.pr-ledrij:last-child { border-bottom: 0; }
.pr-ledrij.is-retour { background: var(--c-rood-t); }
.pr-ledrij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); }
.pr-ledrij__ord { font-weight: 600; }
.pr-ledrij__per { font-size: .64rem; color: var(--c-ink-2); }
.pr-saldi { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.pr-saldo { flex: 1; min-width: 240px; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; }
.pr-saldo span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.pr-saldo strong { font-size: 1.1rem; }
.pr-saldo em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }

/* ---- regels ---- */
.pr-regelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-regelkaart { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pr-regelkaart--fm { border-top: 3px solid var(--c-amber); }
.pr-regelkaart__kop { display: flex; align-items: center; gap: 12px; }
.pr-regelkaart__kop i { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font: 700 1rem var(--font-mono); font-style: normal; flex: none; }
.pr-regelkaart__kop i.is-ink { background: var(--c-ink); color: var(--c-creme); }
.pr-regelkaart__kop i.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.pr-regelkaart__kop div { flex: 1; display: flex; flex-direction: column; }
.pr-regelkaart__kop strong { font: 700 .82rem var(--font-ui); }
.pr-regelkaart__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.pr-regelwaarde { display: flex; align-items: baseline; gap: 12px; }
.pr-regelwaarde strong { font-size: 1.35rem; color: var(--c-ink); }
.pr-regelwaarde span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.pr-verdien { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-regelinfo { padding: 10px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn);
  font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.pr-dedup { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 12px; background: var(--c-creme); cursor: pointer; text-align: left; }
.pr-dedup i { width: 44px; height: 24px; border-radius: var(--radius-pill); background: var(--c-lijn-2); position: relative; flex: none; }
.pr-dedup i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.pr-dedup.is-aan i { background: var(--c-groen); }
.pr-dedup.is-aan i::after { left: 23px; }
.pr-dedup strong { font: 700 .72rem var(--font-ui); display: block; }
.pr-dedup span { font: 500 .64rem/1.5 var(--font-ui); color: var(--c-ink-2); }

/* ---- profielen ---- */
.pr-profgrid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.pr-proflijst { display: flex; flex-direction: column; gap: 10px; }
.pr-profkaart { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); font: inherit; }
.pr-profkaart.is-actief { border-color: var(--c-ink); }
.pr-profkaart__kop { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pr-profkaart strong { font: 700 .76rem var(--font-ui); }
.pr-profkaart > span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.pr-profkaart em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); }
.pr-asrij { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.pr-asrij:last-child { border-bottom: 0; }
.pr-asrij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); }
.pr-asrij__prof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-asrij__prof .mono { font-size: .6rem; color: var(--c-ink-3); }
.pr-override { border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: var(--radius-pill); padding: 6px 12px;
  background: none; font: 600 .64rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; justify-self: start; }
.pr-override.is-aan { border-style: solid; border-color: var(--c-amber); background: var(--c-amber-t); color: var(--c-amber); }

/* ---- teams ---- */
.pr-teamgrid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.pr-teamzij { display: flex; flex-direction: column; gap: 8px; }
.pr-teamknop { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; text-align: left;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--c-creme); cursor: pointer; }
.pr-teamknop.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.pr-teamknop strong { font: 700 .74rem var(--font-ui); }
.pr-teamknop span { font: 500 .62rem var(--font-ui); opacity: .75; }
.pr-teamkaart { padding: 15px 18px; margin-bottom: 14px; }
.pr-teamkaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.pr-teamkaart__kop strong { font: 700 .9rem var(--font-ui); display: block; }
.pr-teamkaart__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.pr-lid { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 600 .74rem var(--font-ui); }
.pr-lid:last-of-type { border-bottom: 0; }
.pr-lid__fte { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.pr-step { width: 24px; height: 24px; border-radius: 8px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme);
  font: 700 .8rem var(--font-mono); color: var(--c-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pr-teamkaart__voet { margin-top: 10px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn-2); font-size: .68rem; color: var(--c-ink-2); }
.pr-bereken { padding: 16px 18px; background: var(--c-ink); color: var(--c-creme); }
.pr-bereken .kicker { color: var(--c-paneel-2); opacity: .7; }
.pr-bereken__cellen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0; }
.pr-bereken__cellen > div { display: flex; flex-direction: column; gap: 4px; }
.pr-bereken__cellen span { font: 500 .64rem var(--font-ui); opacity: .75; }
.pr-bereken__cellen strong { font-size: 1rem; }
.pr-bereken__cellen .is-uitkomst strong { font-size: 1.35rem; color: #DCEBC8; }
.pr-bereken .pr-step { background: none; color: var(--c-creme); border-color: rgba(251, 248, 240, .35); }
.pr-formule { font-size: .68rem; opacity: .85; margin-bottom: 8px; }
.pr-bereken em { font: 500 .64rem/1.5 var(--font-ui); font-style: normal; opacity: .7; }

/* ---- uitbetaling → Nmbrs ---- */
.pr-nmbrsbalk { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 17px; margin-bottom: 14px; }
.pr-poorttekst { font: 600 .72rem var(--font-ui); color: var(--c-rood); }
.pr-poorttekst.is-ok { color: var(--c-groen-d); }
.pr-payrij { display: grid; grid-template-columns: 34px 1.4fr 120px 100px 100px 100px 110px; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.pr-payrij:last-child { border-bottom: 0; }
.pr-payrij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); }

@media (max-width: 1100px) {
  .pr-tweekolom, .pr-regelgrid, .pr-profgrid, .pr-teamgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .pr-knop, .pr-teamknop, .pr-profkaart, .fac-flt { transition: background .16s ease, box-shadow .16s ease, color .16s ease; }
}

/* Provisie-simulator (D3b) */
.pr-simulator { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-bottom: 14px; }
.pr-simrij { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: end; }
.pr-simrij input { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; font: inherit; background: var(--c-paneel); color: var(--c-ink); }
.pr-simuit { display: flex; flex-direction: column; gap: 2px; }
.pr-simuit strong { font-size: 22px; color: var(--c-groen-d); }
.pr-simuit em { font-style: normal; font-size: 12px; color: var(--c-ink-2); }
.pr-simnoot { font-size: 11.5px; color: var(--c-ink-2); }

/* Interne navtabs na menu-consolidatie (16-07) */
.pr-navtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-lijn); margin-bottom: 16px; flex-wrap: wrap; }
.pr-navtab { border: 0; background: none; font: inherit; font-size: 13.5px; padding: 9px 14px; cursor: pointer; color: var(--c-ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pr-navtab.is-actief { color: var(--c-ink); font-weight: 600; border-bottom-color: var(--c-groen-d); }

/* B4a · versiehistorie regelsets */
.pr-versierij { display: grid; grid-template-columns: 48px 110px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem var(--font-ui); }
.pr-versierij:last-child { border-bottom: 0; }
.pr-versierij > strong { color: var(--c-groen-d); }

/* PR-B · openstaande bezwaren. Het blok staat bovenaan het dashboard omdat
   het het enige is waar iemand op wacht: een adviseur die denkt dat zijn
   loon niet klopt. */
.pr-bezwaren { padding: 18px 20px; margin-bottom: 16px; border-left: 3px solid var(--let); }
.pr-bezwaar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  padding: 12px 0; border-bottom: var(--lijndikte) solid var(--lijn);
}
.pr-bezwaar:last-child { border-bottom: 0; }
.pr-bezwaar__wat strong { display: block; font: 700 .88rem var(--font-ui); }
.pr-bezwaar__wat span { display: block; font-size: .8rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; }
.pr-bezwaar__wat em { display: block; font-size: .74rem; color: var(--ink3); font-style: normal; margin-top: 4px; }
.pr-bezwaar__acties { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-bezwaar__stil { font-size: .76rem; color: var(--ink3); font-style: normal; }
@media (max-width: 760px) { .pr-bezwaar { grid-template-columns: minmax(0, 1fr); } }

/* ── ctrl.css ── */
/* =====================================================================
   ctrl.css — module 4.6 · Controle & poorten (ctrl-)
   Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.ctrl { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.ctrl-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; }
.ctrl-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: #fff; box-shadow: var(--schaduw-knop); }
.ctrl-knop--fiat { background: var(--c-amber); border-color: var(--c-amber); color: #fff; }
.ctrl-knop--klein { padding: 5px 10px; font-size: .62rem; }
.kicker.is-rood { color: var(--c-rood); }
.kicker.is-amber { color: var(--c-amber); }

/* ---- actielijst ---- */
.ctrl-vandaagkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ctrl-vandaagkop h2 { margin: 3px 0 2px; font-size: 1.15rem; }
.ctrl-sub { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-actie { display: grid; grid-template-columns: 52px 1fr auto 24px; gap: 14px; align-items: center; width: 100%;
  padding: 13px 16px; border: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); background: none;
  text-align: left; cursor: pointer; font: inherit; }
.ctrl-actie:last-child { border-bottom: 0; }
.ctrl-actie:hover { background: var(--c-creme); }
.ctrl-actie__n { font-size: 1.3rem; font-weight: 700; }
.ctrl-actie__n.is-rood { color: var(--c-rood); }
.ctrl-actie__n.is-amber { color: var(--c-amber); }
.ctrl-actie__n.is-groen-licht { color: var(--c-groen); }
.ctrl-actie div { display: flex; flex-direction: column; }
.ctrl-actie div strong { font: 700 .78rem var(--font-ui); }
.ctrl-actie div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-actie em { font-style: normal; color: var(--c-ink-3); }

/* ---- WVB-poort ---- */
.ctrl-donker { padding: 16px 20px; border-radius: var(--radius); background: var(--c-ink); color: var(--c-creme);
  margin-bottom: 16px; box-shadow: var(--schaduw-tegel); }
.ctrl-donker .kicker { color: var(--c-paneel-2); opacity: .7; }
.ctrl-donker strong { display: block; font: 700 .95rem var(--font-ui); margin: 5px 0 4px; }
.ctrl-donker p { margin: 0; font: 400 .76rem/1.55 var(--font-ui); opacity: .85; max-width: 88ch; }
.ctrl-wvbkaart { padding: 15px 18px; margin-bottom: 14px; border-left: 3px solid var(--c-lijn-2); }
.ctrl-wvbkaart.is-groen { border-left-color: var(--c-groen); }
.ctrl-wvbkaart.is-rood { border-left-color: var(--c-rood); }
.ctrl-wvbkaart.is-amber { border-left-color: var(--c-amber); }
.ctrl-wvbkaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.ctrl-wvbkaart__kop strong { font: 700 .82rem var(--font-ui); display: block; }
.ctrl-wvbkaart__kop span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ctrl-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--c-creme);
  border: var(--lijndikte) solid var(--c-lijn); }
.ctrl-check i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 700 .64rem var(--font-mono); font-style: normal; flex: none; }
.ctrl-check.is-groen i { background: var(--c-groen-t); color: var(--c-groen-d); }
.ctrl-check.is-rood i { background: var(--c-rood-t); color: var(--c-rood); }
.ctrl-check.is-amber i { background: var(--c-amber-t); color: var(--c-amber); }
.ctrl-check div { display: flex; flex-direction: column; }
.ctrl-check strong { font: 600 .7rem var(--font-ui); }
.ctrl-check span { font: 500 .62rem/1.4 var(--font-ui); color: var(--c-ink-2); }
.ctrl-poortbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: 10px; font: 600 .72rem var(--font-ui); }
.ctrl-poortbalk.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.ctrl-poortbalk.is-rood { background: var(--c-rood-t); color: var(--c-rood); }
.ctrl-poortbalk.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.ctrl-constraint { display: block; margin-top: 8px; font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-rood); }

/* ---- margekaart ---- */
.ctrl-margetabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ctrl-margetab { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; text-align: left; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 12px; background: var(--c-creme); font: inherit; }
.ctrl-margetab.is-onder { border-color: var(--c-rood); background: var(--c-rood-t); }
.ctrl-margetab.is-actief { border-color: var(--c-ink); }
.ctrl-margetab strong { font: 700 .72rem var(--font-mono); }
.ctrl-margetab span { font: 500 .62rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-margetab em { font-style: normal; font-size: .66rem; font-weight: 700; }
.ctrl-margegrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.ctrl-margekaart { padding: 15px 18px; }
.ctrl-margekaart__kop { margin-bottom: 10px; }
.ctrl-margekaart__kop strong { display: block; font: 700 .84rem var(--font-ui); }
.ctrl-margekaart__kop span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-margerij { display: grid; grid-template-columns: 1fr auto 110px; gap: 10px; align-items: center; padding: 7px 0;
  border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.ctrl-margerij strong { text-align: right; }
.ctrl-margerij.is-som { font-weight: 700; }
.ctrl-margerij.is-kosten strong { color: var(--c-rood); }
.ctrl-margebox { margin-top: 12px; padding: 13px 15px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.ctrl-margebox.is-groen { background: var(--c-groen-t); }
.ctrl-margebox.is-rood { background: var(--c-rood-t); }
.ctrl-margebox span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-margebox strong { font-size: 1.15rem; }
.ctrl-margebox.is-groen strong { color: var(--c-groen-d); }
.ctrl-margebox.is-rood strong { color: var(--c-rood); }
.ctrl-margezij { display: flex; flex-direction: column; gap: 12px; }
.ctrl-paneel { padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; }
.ctrl-paneel.is-rood { border-left: 3px solid var(--c-rood); }
.ctrl-paneel.is-groen { border-left: 3px solid var(--c-groen); }
.ctrl-paneel.is-amber { border-left: 3px solid var(--c-amber); }
.ctrl-paneel strong { font: 700 .76rem var(--font-ui); }
.ctrl-paneel p { margin: 0; font: 500 .68rem/1.55 var(--font-ui); color: var(--c-ink-2); }
.ctrl-paneel .ctrl-knop { align-self: flex-start; }
.ctrl-legenda { display: flex; align-items: center; gap: 8px; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }

/* ---- geldstromen ---- */
.ctrl-intro { margin: 0 0 14px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink-2); max-width: 72ch; }
.ctrl-flowgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctrl-flow { padding: 15px 17px; display: flex; flex-direction: column; gap: 9px; border-top: 3px solid var(--c-lijn-2); }
.ctrl-flow.is-groen { border-top-color: var(--c-groen); }
.ctrl-flow.is-rood { border-top-color: var(--c-rood); }
.ctrl-flow__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ctrl-flow__kop strong { font: 700 .82rem var(--font-ui); display: block; }
.ctrl-flow__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-flow__regel { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--c-paneel);
  font: 600 .68rem/1.45 var(--font-ui); }
.ctrl-flow__regel em { font-style: normal; }
.ctrl-flow__regel .is-groen, em.is-groen { color: var(--c-groen-d); }
.ctrl-flow__regel .is-rood, em.is-rood { color: var(--c-rood); }
.ctrl-flowitem { display: grid; grid-template-columns: 12px 1fr 90px; gap: 10px; align-items: center; padding: 6px 0; }
.ctrl-flowitem i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); }
.ctrl-flowitem i.is-groen { background: var(--c-groen); }
.ctrl-flowitem i.is-rood { background: var(--c-rood); }
.ctrl-flowitem i.is-amber { background: var(--c-amber); }
.ctrl-flowitem i.is-groen-licht { background: var(--c-groen); opacity: .5; }
.ctrl-flowitem div { display: flex; flex-direction: column; }
.ctrl-flowitem strong { font: 600 .72rem var(--font-ui); }
.ctrl-flowitem span { font: 500 .62rem var(--font-ui); }
.ctrl-flowitem span.is-groen { color: var(--c-groen-d); }
.ctrl-flowitem span.is-rood { color: var(--c-rood); }
.ctrl-flowitem span.is-amber { color: var(--c-amber); }
.ctrl-flowitem span.is-groen-licht { color: var(--c-groen); }
.ctrl-flowitem > strong.mono { text-align: right; }
.ctrl-flowreden { padding: 8px 11px; border-radius: 9px; background: var(--c-rood-t); color: var(--c-rood); font: 600 .66rem var(--font-ui); }
.ctrl-flow .ctrl-knop--klein { align-self: flex-start; }

/* ---- afwijkingen ---- */
.ctrl-afwrij { display: grid; grid-template-columns: 44px 1fr auto; gap: 15px; align-items: center; width: 100%;
  padding: 14px 17px; margin-bottom: 12px; text-align: left; cursor: pointer; font: inherit; border: var(--lijndikte) solid var(--c-lijn); }
.ctrl-afwicoon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; }
.ctrl-afwicoon.is-rood { background: var(--c-rood-t); color: var(--c-rood); }
.ctrl-afwicoon.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.ctrl-afwicoon.is-groen-licht { background: var(--c-groen-t); color: var(--c-groen); }
.ctrl-afwrij__mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ctrl-afwrij__mid > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctrl-afwrij__mid > span { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-afwrij__mid em { font-style: normal; font: 600 .66rem var(--font-ui); }
.ctrl-afwrij__mid em.is-rood { color: var(--c-rood); }
.ctrl-afwrij__mid em.is-amber { color: var(--c-amber); }
.ctrl-afwrij__mid em.is-groen-licht { color: var(--c-groen); }
.ctrl-afwrij__badge { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ctrl-afwrij__badge i { width: 22px; height: 22px; border-radius: 50%; border: var(--lijndikte) solid var(--c-lijn-2);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .7rem; color: var(--c-ink-2); }

/* ---- adviesomzet ---- */
.ctrl-advieskop { margin-bottom: 12px; }
.ctrl-advieskop h2 { margin: 4px 0 0; font-size: 1.1rem; }
.ctrl-advrij { display: grid; grid-template-columns: 60px 1.5fr 1.1fr 96px 96px; gap: 12px; align-items: center;
  padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); }
.ctrl-advrij:last-child { border-bottom: 0; }
.ctrl-advrij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); }
.ctrl-advrij > div strong { font: 600 .74rem var(--font-ui); }
.ctrl-advrij__twijfel { color: var(--c-ink-2); font-size: .68rem; }
.ctrl-potbalk { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ctrl-potbalk i { display: block; height: 7px; max-width: 120px; border-radius: var(--radius-pill); background: var(--c-lijn-2); }
.ctrl-potbalk i.is-groen { background: var(--c-groen); }
.ctrl-potbalk i.is-ink { background: var(--c-ink-2); }
.ctrl-potbalk span { font-size: .64rem; }

/* ---- auditlog ---- */
.ctrl-auditkaart { padding: 0; overflow: hidden; max-width: 860px; }
.ctrl-auditkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px;
  border-bottom: var(--lijndikte) solid var(--c-lijn); }
.ctrl-auditkop > div { display: flex; flex-direction: column; gap: 3px; }
.ctrl-audittitel { font: 700 .9rem var(--font-ui); }
.ctrl-auditkop span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-audittijdlijn { padding: 16px 22px; }
.ctrl-audittijdlijn > .kicker { display: block; margin-bottom: 14px; }
.ctrl-auditrij { display: grid; grid-template-columns: 20px 1fr; gap: 13px; }
.ctrl-auditlijn { display: flex; flex-direction: column; align-items: center; }
.ctrl-auditlijn i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ctrl-auditlijn i.is-groen { background: var(--c-groen); outline: 3px solid var(--c-groen-t); }
.ctrl-auditlijn i.is-rood { background: var(--c-rood); outline: 3px solid var(--c-rood-t); }
.ctrl-auditlijn i.is-amber { background: var(--c-amber); outline: 3px solid var(--c-amber-t); }
.ctrl-auditlijn em { width: 2px; flex: 1; background: var(--c-lijn); margin: 3px 0; }
.ctrl-auditrij__body { padding-bottom: 18px; display: flex; flex-direction: column; gap: 3px; }
.ctrl-auditrij__body > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctrl-auditrij__body > div strong { font: 700 .76rem var(--font-ui); }
.ctrl-auditrij__body > div span { font-size: .62rem; color: var(--c-ink-3); }
.ctrl-auditwie { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); }
.ctrl-auditchange { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px;
  padding: 5px 10px; border-radius: 8px; background: var(--c-paneel); font-size: .64rem; }
.ctrl-auditchange s { color: var(--c-ink-3); }
.ctrl-auditreden { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); margin-top: 3px; }

@media (max-width: 1100px) {
  .ctrl-margegrid, .ctrl-flowgrid { grid-template-columns: 1fr; }
  .ctrl-checks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .ctrl-knop, .ctrl-actie, .ctrl-margetab, .ctrl-afwrij { transition: background .16s ease, box-shadow .16s ease; }
}

/* ---- FT-4.6a · auditlog op echte events: zoek/soort-filter/paginering ---- */
.ctrl-auditbalk { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ctrl-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 500 .74rem var(--font-ui); }
.ctrl-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.ctrl-auditstand { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); }
.ctrl-auditsoorten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ctrl-flt { padding: 5px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill);
  background: var(--c-creme); color: var(--c-ink-2); font: 600 .64rem var(--font-ui); cursor: pointer; }
.ctrl-flt strong { font: 700 .64rem var(--font-mono); }
.ctrl-flt:hover { border-color: var(--c-groen-d); }
.ctrl-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); }
.ctrl-flt:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.ctrl-auditdetail { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); display: block; }
.ctrl-auditpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 2px; }
.ctrl-auditpag .ctrl-knop[disabled] { opacity: .4; cursor: not-allowed; }
.ctrl-illustratief { margin: 0 0 14px; padding: 9px 14px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: var(--c-paneel); color: var(--c-ink-2); font: 500 .68rem var(--font-ui); }

/* V3 fase 6 · motor 3: poortenregister */
.prt-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; }
.prt-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.prt-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 80ch; margin: -4px 0 0; }
.prt-lijst { display: flex; flex-direction: column; gap: 10px; }
.prt-kaart { text-align: left; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font-family: var(--font-ui);
  box-shadow: var(--schaduw-tegel); transition: border-color var(--overgang); }
.prt-kaart:hover { border-color: var(--c-lijn-2); }
.prt-kaart.heeft-overrides { border-left: 3px solid var(--c-amber); }
.prt-kaart__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prt-naam { font-size: .74rem; font-weight: 700; color: var(--c-ink); letter-spacing: .04em; }
.prt-bewaakt { font-size: .82rem; color: var(--c-ink); }
.prt-meta { font-size: .62rem; color: var(--c-ink-3); }
.prt-events { display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 9px; margin-top: 3px; }
.prt-event { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; font-size: .74rem; align-items: baseline; }
.prt-event.is-override { color: var(--c-ink); background: var(--c-amber-t); border-radius: 8px; padding: 5px 8px; }
.prt-event em { font-style: normal; color: var(--c-ink-2); }
.prt-event__tijd, .prt-event__door { font-size: .62rem; color: var(--c-ink-3); }
.prt-leeg { font-size: .74rem; color: var(--c-ink-3); }
@media (prefers-reduced-motion: reduce) { .prt-kaart { transition: none; } }

/* ── personeel.css ── */
/* =====================================================================
   personeel.css — module 5.1 · Mensen (personeelsdossier, verlof &
   verzuim, declaraties, hr-signalen, nmbrs-wachtrij).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.pd { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.pd-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pd-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.pd-kop p { margin: 0; max-width: 68ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }

/* ---- knoppen ---- */
.pd-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
  transition: background 160ms, border-color 160ms;
}
.pd-knop:hover { border-color: var(--c-ink-3); }
.pd-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.pd-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); }
.pd-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); }
.pd-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }
.pd-knop.is-dicht { opacity: .55; cursor: not-allowed; }
.pd-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 inherit var(--font-ui); color: var(--c-groen-d); text-decoration: underline; }

.pd-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; }
.pd-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
/* Reconciliatie-banner (FT-5.3a): sluit scherm-roster aan op het HR-register */
.pd-reconcil { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 10px;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--c-creme); font-size: .8rem; color: var(--c-ink-2); }
.pd-reconcil i { font-style: normal; font-weight: 800; }
.pd-reconcil strong { color: var(--c-ink); }
.pd-reconcil .mono { margin-left: auto; color: var(--c-ink-3); white-space: nowrap; }
.pd-reconcil.is-ok { border-color: var(--c-groen-t); }
.pd-reconcil.is-ok i { color: var(--c-groen); }
.pd-reconcil.is-let { border-color: var(--c-amber-t); }
.pd-reconcil.is-let i { color: var(--c-amber); }
.pd-leeg { padding: 18px; text-align: center; font: 600 .8rem var(--font-ui); color: var(--c-ink-3); margin: 0; }
.pd-leeg--rij { padding: 22px; }
.pd-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- dossier-layout ---- */
.pd-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-lijst { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pd-lijst .kicker { padding: 8px 6px 6px; }
.pd-lijst__kop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pd-zoek {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme);
  font: 600 .76rem var(--font-ui); color: var(--c-ink);
}
.pd-medrij {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border-radius: 11px; border: 0; background: none; cursor: pointer;
  transition: background 160ms;
}
.pd-medrij:hover { background: var(--c-creme); }
.pd-medrij.is-actief { background: var(--c-groen-t); }
.pd-medrij i {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-terra-t); color: var(--c-terra-d);
  display: flex; align-items: center; justify-content: center; font: 700 .74rem var(--font-ui);
}
.pd-medrij__wie { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-medrij__wie strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-medrij__wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rood); flex: none; }

.pd-dossier { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pd-doskop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.pd-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 13px; font-style: normal;
  background: var(--c-terra-t); color: var(--c-terra-d);
  display: flex; align-items: center; justify-content: center; font: 700 1.15rem var(--font-ui);
}
.pd-doskop__wie { flex: 1; min-width: 200px; }
.pd-doskop__wie h2 { margin: 0; font-size: 1.15rem; }
.pd-doskop__wie span { font-size: .76rem; color: var(--c-ink-2); }
.pd-nmbrstag { font-size: .64rem; color: var(--c-ink-3); background: var(--c-creme); padding: 4px 10px; border-radius: 6px; }

.pd-onboarding { padding: 14px 16px; border-color: var(--c-groen); background: var(--c-groen-t); display: flex; flex-direction: column; gap: 7px; }
.pd-onboarding__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-onboarding p { margin: 0 0 4px; font-size: .74rem; color: var(--c-ink-2); }
.pd-onbtaak {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 0; background: #fff; font: 600 .78rem var(--font-ui); color: var(--c-ink);
}
.pd-onbtaak i {
  width: 20px; height: 20px; flex: none; border-radius: 6px; font-style: normal;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pd-onbtaak.is-klaar { color: var(--c-ink-3); text-decoration: line-through; }
.pd-onbtaak.is-klaar i { background: var(--c-groen); border-color: var(--c-groen); }

.pd-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; background: var(--c-paneel); border-radius: 12px; }
.pd-tab {
  white-space: nowrap; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: var(--lijndikte) solid transparent; background: none;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.pd-tab.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; }

.pd-tabkaart { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pd-gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.pd-veld strong { font-size: .84rem; }
.pd-tabvoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

.pd-contractkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-contractkop strong { font-size: .95rem; display: block; }
.pd-contractkop span { font-size: .76rem; color: var(--c-ink-2); }
.pd-proeftijd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 11px; background: var(--c-amber-t); font-size: .78rem;
}
.pd-contractacties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pd-hist { display: flex; flex-direction: column; gap: 6px; }
.pd-histrij {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px;
  border-radius: 9px; background: var(--c-creme); font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}

.pd-docs { display: flex; flex-direction: column; gap: 6px; }
.pd-docrij {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 10px; background: var(--c-creme); font-size: .78rem;
}
.pd-docrij span:first-child { flex: 1; min-width: 0; font-weight: 600; }
.pd-docrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.pd-docrij.is-ingenomen span:first-child { color: var(--c-ink-3); text-decoration: line-through; }

.pd-verlofgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pd-saldo { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.pd-saldo strong { font-size: 1.5rem; }
.pd-saldo span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.4; }
.pd-verzuimnote { padding: 13px 16px; font-size: .78rem; border-color: var(--c-terra); }
.pd-avg { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; background: var(--c-paneel); }
.pd-avg i { font-style: normal; font: 800 1rem var(--font-mono); color: var(--c-ink-2); }
.pd-avg strong { display: block; font-size: .8rem; margin-bottom: 2px; }
.pd-avg span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }

.pd-certrij {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); font-size: .8rem;
}
.pd-certrij strong { flex: 1; }
.pd-certrij.is-warn { border-color: var(--c-amber); background: var(--c-amber-t); }

.pd-tijdlijn { display: flex; flex-direction: column; }
.pd-tlrij { display: flex; gap: 13px; }
.pd-tlrij i { width: 11px; flex: none; position: relative; }
.pd-tlrij i::before {
  content: ""; position: absolute; top: 4px; left: 0;
  width: 11px; height: 11px; border-radius: 50%; background: var(--c-terra);
}
.pd-tlrij:not(:last-child) i::after {
  content: ""; position: absolute; top: 17px; bottom: -4px; left: 5px; width: 2px; background: var(--c-terra-t);
}
.pd-tlrij div { padding-bottom: 16px; }
.pd-tlrij strong { display: block; font-size: .8rem; }
.pd-tlrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }

/* ---- verlof & verzuim ---- */
.pd-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.pd-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-blok__kop strong { font-size: .92rem; }
.pd-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }

.pd-vrij {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap;
}
.pd-vrij__wie { flex: 1; min-width: 180px; }
.pd-vrij__wie strong { display: block; font-size: .82rem; }
.pd-vrij__wie span { font-size: .74rem; color: var(--c-ink-2); }

.pd-kal { display: grid; grid-template-columns: 130px repeat(5, 1fr); gap: 6px; align-items: center; }
.pd-kal--kop { font-size: .6rem; color: var(--c-ink-3); text-align: center; }
.pd-kal--kop span:first-child { text-align: left; }
.pd-kal__naam { font: 600 .76rem var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cel {
  height: 30px; border-radius: 6px; font: 700 .64rem var(--font-ui); font-style: normal;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-creme); color: var(--c-lijn-2);
}
.pd-cel.is-v { background: var(--c-groen-t); color: var(--c-groen-d); }
.pd-cel.is-z { background: var(--c-rood-t); color: var(--c-rood); }
.pd-cel.is-l { background: var(--c-paneel); color: var(--c-ink-2); }
.pd-legenda { display: flex; gap: 14px; font: 600 .66rem var(--font-ui); color: var(--c-ink-2); margin-top: 4px; }
.pd-legenda .is-v { color: var(--c-groen-d); }
.pd-legenda .is-z { color: var(--c-rood); }
.pd-legenda .is-l { color: var(--c-ink-3); }

.pd-verzuim {
  padding: 13px 15px; border-radius: 12px; border: var(--lijndikte) solid var(--c-amber);
  background: var(--c-amber-t); display: flex; flex-direction: column; gap: 5px; font-size: .76rem;
}
.pd-verzuim__kop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pd-verzuim__kop strong { font-size: .84rem; }
.pd-verzuim__kop em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); }
.pd-verzuim__fase { font-weight: 700; color: var(--c-amber); }
.pd-verzuim .is-amber { font-style: normal; color: var(--c-amber); font-weight: 700; }
.pd-verzuim__acties { display: flex; gap: 8px; margin-top: 5px; }

.pd-pwlijst { display: flex; flex-direction: column; gap: 7px; }
.pd-pwrij {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 10px; background: var(--c-creme); font-size: .78rem;
}
.pd-pwrij i {
  width: 20px; height: 20px; flex: none; border-radius: 50%; font-style: normal;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pd-pwrij.is-gedaan i { background: var(--c-groen); border-color: var(--c-groen); }
.pd-pwrij.is-volgende { background: var(--c-amber-t); }
.pd-pwrij.is-volgende i { border-color: var(--c-amber); }
.pd-pwrij .mono { font-size: .66rem; color: var(--c-ink-3); width: 44px; flex: none; }
.pd-pwrij strong { display: block; font-size: .78rem; }
.pd-pwrij em.is-amber { font-style: normal; font-size: .68rem; color: var(--c-amber); font-weight: 700; }

.pd-regelset { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pd-regelcellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pd-regelcellen > div {
  padding: 11px 13px; border-radius: 10px; background: var(--c-creme);
  display: flex; flex-direction: column; gap: 2px;
}
.pd-regelcellen span { font-size: .68rem; color: var(--c-ink-3); }
.pd-regelcellen strong { font-size: .88rem; }

/* ---- declaraties ---- */
.pd-declrij {
  display: grid; grid-template-columns: 52px 150px 150px minmax(0, 1fr) 90px 100px 190px;
  gap: 12px; align-items: center; padding: 11px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.pd-declrij:last-child { border-bottom: 0; }
.pd-declrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.pd-declrij__oms { color: var(--c-ink-2); min-width: 0; }
.pd-declrij__acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pd-declrij__bon { cursor: pointer; border: 1px solid var(--c-lijn); background: var(--c-paneel); font: inherit; font-size: .68rem; }
.pd-declrij__bon:hover { border-color: var(--c-groen-d); }
.pd-declrij__btw { display: block; font-style: normal; font-size: .62rem; font-weight: 400; color: var(--c-ink-3); }
.pd-declrij em.mono { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }

/* ---- signalen ---- */
.pd-sigkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-sigtellers { display: flex; gap: 8px; }
.pd-sigtellers .chip { font-size: .72rem; padding: 5px 13px; }
.pd-sorteer { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 10px; }
.pd-flt {
  padding: 7px 13px; border-radius: 8px; cursor: pointer; border: 0; background: none;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.pd-flt.is-actief { background: #fff; color: var(--c-ink); font-weight: 700; }

.pd-signaal {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-left: 4px solid var(--c-lijn-2);
}
.pd-signaal.is-err { border-left-color: var(--c-rood); }
.pd-signaal.is-warn { border-left-color: var(--c-amber); }
.pd-signaal.is-ok { border-left-color: var(--c-groen); }
.pd-signaal i {
  width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  background: var(--c-creme); color: var(--c-ink-2);
}
.pd-signaal.is-err i { background: var(--c-rood-t); color: var(--c-rood); }
.pd-signaal.is-warn i { background: var(--c-amber-t); color: var(--c-amber); }
.pd-signaal.is-ok i { background: var(--c-groen-t); color: var(--c-groen-d); }
.pd-signaal__wat { flex: 1; min-width: 0; }
.pd-signaal__wat strong { display: block; font-size: .82rem; }
.pd-signaal__wat span { font-size: .74rem; color: var(--c-ink-2); }

/* ---- nmbrs ---- */
.pd-koppeling { padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-kopdot { color: var(--c-groen); font-size: .9rem; }
.pd-koppeling div { flex: 1; min-width: 220px; }
.pd-koppeling strong { display: block; font-size: .86rem; }
.pd-koppeling span { font-size: .74rem; color: var(--c-ink-2); }
.pd-koppeling .mono { font-size: .64rem; color: var(--c-ink-3); }

.pd-poortbalk { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pd-poorttekst { font-size: .78rem; color: var(--c-ink-2); }
.pd-poorttekst.is-ok { color: var(--c-groen-d); font-weight: 700; }

.pd-nmrij {
  display: grid; grid-template-columns: 32px 74px 52px 150px 130px minmax(0, 1fr) 96px;
  gap: 12px; align-items: center; padding: 10px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.pd-nmrij:last-child { border-bottom: 0; }
.pd-nmrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.pd-nmrij__detail { color: var(--c-ink-2); min-width: 0; }
.pd-nmrij.is-verzonden { color: var(--c-ink-3); }
.pd-vink {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pd-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); }
.pd-vinkvast { color: var(--c-groen); }

.pd-preview {
  margin: 12px 22px 0; padding: 14px 16px; border-radius: 10px;
  background: var(--c-creme); font-size: .68rem; line-height: 1.6;
  white-space: pre-wrap; max-height: 220px; overflow: auto;
}
.pd-preview:empty { display: none; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .pd-grid, .pd-tweekolom { grid-template-columns: 1fr; }
  .pd-regelcellen { grid-template-columns: 1fr 1fr; }
  .pd-verlofgrid { grid-template-columns: 1fr; }
  .pd-declrij, .pd-nmrij { grid-template-columns: 1fr; gap: 4px; }
  .pd-declrij--kop, .pd-nmrij--kop { display: none; }
}
.pd-lijstacties { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.pd-knop--klein { font-size: 12px; padding: 6px 12px; }

/* Poortwachter-kalender (E1a) */
.pd-pwrij { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); }
.pd-pwrij:last-child { border-bottom: 0; }
.pd-pwrij__wie { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.pd-pwrij__wie em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.pd-pwlijn { position: relative; height: 30px; background: color-mix(in srgb, var(--c-ink) 5%, var(--c-paneel)); border-radius: 99px; }
.pd-pwmijl { position: absolute; top: 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; transform: translateX(-50%); }
.pd-pwmijl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-3); display: block; }
.pd-pwmijl.is-gehad i { background: var(--c-groen-d); }
.pd-pwmijl.is-nu i { background: var(--c-amber); outline: 3px solid color-mix(in srgb, var(--c-amber) 30%, transparent); }
.pd-pwmijl em { font-size: 9px; color: var(--c-ink-2); }
.pd-pwnu { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--c-terra); transform: translateX(-50%); border-radius: 2px; }
.pd-pwvolgende { font-size: 12px; color: var(--c-ink-2); }
.pd-pwvolgende.is-urgent { color: var(--c-terra); font-weight: 700; }
.pd-pwvolgende em { font-style: normal; }

/* ESS-mutaties (E1b) */
.pd-essrij { display: grid; grid-template-columns: 1.1fr auto 1.6fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.pd-essrij:last-child { border-bottom: 0; }
.pd-essrij__wie { display: flex; flex-direction: column; }
.pd-essrij__wie em { font-style: normal; font-size: 11px; color: var(--c-ink-2); }
.pd-essrij__delta { font-size: 12px; }
.pd-essrij__delta s { color: var(--c-ink-3); }
.pd-essrij__acties { display: flex; gap: 6px; }

/* Contract-kalender (E1c) */
.pd-ckmaand { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); }
.pd-ckmaand:last-child { border-bottom: 0; }
.pd-ckrij { display: grid; grid-template-columns: 1.4fr auto auto; gap: 12px; align-items: center; font-size: 13px; }
.pd-ckrij.is-telaat { background: color-mix(in srgb, var(--c-rood) 5%, transparent); border-radius: 8px; padding: 4px 8px; }
.pd-ckrij__wie { display: flex; flex-direction: column; }
.pd-ckrij__wie em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.pd-contractkal { margin-top: 14px; }

/* F3 · systeemtoegang-blok in het dossier (HR leidend) */
.pd-toegang { margin-top: 12px; }
.pd-toegang__kop { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }

/* B6 · HR-zone (server-side afgeschermd) */
.pd-hrrij { display: grid; grid-template-columns: 160px 1fr auto auto auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem var(--font-ui); }
.pd-hrrij:last-child { border-bottom: 0; }

/* B17 · verzuimdossiers (Poortwachter) */
.pd-vzrij { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; }
.pd-vzrij > div { display: flex; flex-direction: column; gap: 2px; }
.pd-vzrij strong { font-size: .8rem; }
.pd-vzrij > div span { font-size: .68rem; color: var(--c-ink-2); }
.pd-vzrij .mono { font-size: .64rem; color: var(--c-ink-2); }
.pd-vzrij.is-telaat { background: var(--c-rood-t); border-radius: 10px; padding: 10px; border-top: none; }

/* B18 · loonwachtrij backend */
.pd-lnrij { display: grid; grid-template-columns: auto 160px auto 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; }
.pd-lnrij strong { font-size: .78rem; }
.pd-lnrij span { font-size: .68rem; color: var(--c-ink-2); }
.pd-poortbalk--strak { margin-top: 10px; border-top: 1px solid var(--c-lijn); padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }

/* punt 9 · ESS-ziek-voormelding in de HR-wachtrij */
.pd-vzrij--voormelding { background: color-mix(in srgb, var(--c-amber-t) 45%, transparent); border-radius: 10px; padding: 10px; }

/* punt 11 · urenstaten-kaart (nmbrsloon) */
.pd-urenrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; }
.pd-urenrij__wie { display: flex; flex-direction: column; gap: 2px; }
.pd-urenrij__wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.pd-urenrij.is-af { opacity: .7; }

/* ── klantreis.css ── */
/* klantreis.css — de reis in één beeld (KR3).
   De stippenbalk is de kern: tien stappen, één blik. Kleur is betekenis —
   groen is gedaan, amber wacht op de klant, terra staat stil bij ons, en
   een grijze stip betekent «nog niet» en níét «in orde». */

.kr-kop { margin-bottom: 18px; }
.kr-kop h1 { margin: 2px 0 6px; }
.kr-kop p { max-width: 82ch; color: var(--ink2); font-size: .84rem; line-height: 1.55; }

.kr-balkje { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; }
.kr-chip {
  appearance: none; background: var(--kaart); color: var(--ink2); cursor: pointer;
  border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill);
  padding: 6px 13px; font: 600 .78rem var(--font-ui);
}
.kr-chip:hover { color: var(--ink); }
.kr-chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--kaart); }

.kr-rij {
  appearance: none; background: none; border: 0; text-align: left; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 16px; align-items: center;
  padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--lijn); font: inherit;
}
.kr-rij:last-child { border-bottom: 0; }
.kr-rij:hover { background: var(--accent-t2); }
.kr-rij__wie b { display: block; font: 700 .88rem var(--font-ui); color: var(--ink); }
.kr-rij__wie em { display: block; font-size: .78rem; color: var(--ink2); font-style: normal; margin-top: 3px; }
.kr-rij__blok { color: var(--let) !important; }

.kr-balk { display: inline-flex; gap: 3px; }
.kr-stip {
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .62rem; font-style: normal;
  background: var(--vlak); color: var(--ink3); border: var(--lijndikte) solid var(--lijn);
}
.kr-stip.is-gedaan { background: var(--goed); border-color: var(--goed); color: #fff; }
.kr-stip.is-loopt { background: var(--kaart); border-color: var(--ink); color: var(--ink); }
.kr-stip.is-wacht { background: var(--let); border-color: var(--let); color: #fff; }

.kr-dossierkop {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  margin: 18px 0 20px;
}
.kr-dossierkop h2 { margin: 2px 0 4px; }
.kr-dossierkop p { margin: 0; color: var(--ink2); font-size: .86rem; }
.kr-dossierkop__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--ink2); }

.kr-reis { display: grid; gap: 0; }
.kr-stap {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  padding: 14px 0; border-bottom: var(--lijndikte) solid var(--lijn);
}
.kr-stap:last-child { border-bottom: 0; }
.kr-stap__stip {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--vlak); color: var(--ink3); border: var(--lijndikte) solid var(--lijn); font-size: .8rem;
}
.kr-stap.is-gedaan .kr-stap__stip { background: var(--goed); border-color: var(--goed); color: #fff; }
.kr-stap.is-loopt .kr-stap__stip { background: var(--kaart); border-color: var(--ink); color: var(--ink); }
.kr-stap.is-wacht .kr-stap__stip { background: var(--let); border-color: var(--let); color: #fff; }
.kr-stap__lijf b { display: block; font: 700 .9rem var(--font-ui); }
.kr-stap__lijf b em { font: 400 .74rem var(--font-ui); color: var(--ink3); font-style: normal; margin-left: 6px; }
.kr-stap__lijf > span { display: block; font-size: .8rem; color: var(--ink2); margin-top: 3px; line-height: 1.5; }
.kr-stap__blok { color: var(--stop) !important; }
.kr-stap__vraag { color: var(--let) !important; }

.kr-voet { margin-top: 16px; font-size: .76rem; color: var(--ink2); max-width: 88ch; line-height: 1.5; }

@media (max-width: 860px) {
  .kr-rij { grid-template-columns: minmax(0, 1fr); }
}

/* De kopregel boven de stippen (02-09). Zonder deze regel is de strip
   tien anonieme bolletjes: het title-attribuut bereikt alleen wie een
   muis heeft, en op een aanraakscherm niemand. */
.kr-rij--kop { cursor: default; padding-top: 10px; padding-bottom: 8px; }
.kr-rij--kop:hover { background: none; }
.kr-kolomkop {
  width: 18px; font-style: normal; font-size: .52rem; letter-spacing: .02em;
  color: var(--ink3); text-align: center; text-transform: uppercase;
}
.kr-legenda {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 12px; font-size: .74rem; color: var(--ink2); line-height: 1.9;
}
.kr-legenda b { font-weight: 700; color: var(--ink); }
.kr-legenda .kr-stip { vertical-align: -4px; margin-right: 2px; }

/* ── klanttaken.css ── */
/* klanttaken.css — Wacht op de klant (KR1).
   Eén rij leest als een zin: wat we vragen, aan wie, hoe lang al. */

.kt-kop { margin-bottom: 18px; }
.kt-kop h1 { margin: 2px 0 6px; }
.kt-kop p { max-width: 78ch; color: var(--ink2); font-size: .84rem; line-height: 1.55; }

.kt-balk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; }
.kt-vulling { flex: 1 1 auto; }
.kt-chip {
  appearance: none; background: var(--kaart); color: var(--ink2); cursor: pointer;
  border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill);
  padding: 6px 13px; font: 600 .78rem var(--font-ui);
  transition: color 160ms, border-color 160ms, background 160ms;
}
.kt-chip:hover { color: var(--ink); }
.kt-chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--kaart); }

.kt-dossierkop { margin: 18px 0 6px; }
.kt-dossierkop h2 { margin: 2px 0 0; }
.kt-blokkop { display: block; padding: 12px 16px 4px; }

.kt-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 6px 14px; align-items: center;
  padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--lijn);
}
.kt-rij:last-child { border-bottom: 0; }
.kt-rij:hover { background: var(--accent-t2); }
.kt-rij.is-af { opacity: .6; }
.kt-rij.is-laat .kt-rij__wacht { color: var(--stop); font-weight: 700; }
.kt-rij__wat { min-width: 0; }
.kt-rij__wat b { display: block; font: 700 .88rem var(--font-ui); }
.kt-rij__wat span { display: block; font-size: .78rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; }
.kt-rij__bron { color: var(--ink3); font-style: italic; }
.kt-rij__wacht { font-size: .78rem; color: var(--ink2); white-space: nowrap; }
.kt-rij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {
  .kt-rij { grid-template-columns: minmax(0, 1fr); }
  .kt-rij__acties { justify-content: flex-start; }
}

/* ── webbestellingen.css ── */
/* webbestellingen.css — KR2. Eén rij zegt wat er gekocht is en of het al
   mag: de poortregel staat in de rij zelf, niet in een tooltip. */
.wb-kop { margin-bottom: 18px; }
.wb-kop h1 { margin: 2px 0 6px; }
.wb-kop p { max-width: 82ch; color: var(--ink2); font-size: .84rem; line-height: 1.55; }

.wb-balk { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; }
.wb-chip {
  appearance: none; background: var(--kaart); color: var(--ink2); cursor: pointer;
  border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill);
  padding: 6px 13px; font: 600 .78rem var(--font-ui);
}
.wb-chip:hover { color: var(--ink); }
.wb-chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--kaart); }

.wb-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 6px 14px; align-items: center;
  padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--lijn);
}
.wb-rij:last-child { border-bottom: 0; }
.wb-rij:hover { background: var(--accent-t2); }
.wb-rij__wat { min-width: 0; }
.wb-rij__wat b { display: block; font: 700 .88rem var(--font-ui); }
.wb-rij__wat > span { display: block; font-size: .78rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; }
.wb-rij__regels { color: var(--ink3); }
.wb-rij__poort { font-style: italic; }
.wb-rij__poort.is-dicht { color: var(--let); font-style: normal; }
.wb-rij__poort.is-open { color: var(--ink3); }
.wb-rij__bedrag { font-size: .88rem; white-space: nowrap; }
.wb-rij__termijn { font-size: .78rem; color: var(--ink2); white-space: nowrap; }
.wb-rij__opd { font-size: .76rem; color: var(--ink2); }
.wb-rij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wb-voet { margin-top: 12px; font-size: .76rem; color: var(--ink2); max-width: 88ch; line-height: 1.5; }

@media (max-width: 980px) {
  .wb-rij { grid-template-columns: minmax(0, 1fr); }
  .wb-rij__acties { justify-content: flex-start; }
}

/* ── werkregels.css ── */
/* werkregels.css — Beheer › Werkregels (A1).
   Kleur en vorm komen uit casa360-stijl.css; hier alleen de indeling die
   dit scherm eigen is: een regel leest als één zin — «als … dan …» —
   dus staat die zin onder elkaar in één blok, met de tellers ernaast. */

.wr-kop { margin-bottom: 18px; }
.wr-kop h1 { margin: 2px 0 6px; }
.wr-kop p { max-width: 74ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; }

.wr-balk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 12px; }
.wr-hint { font-size: .76rem; color: var(--ink2); max-width: 68ch; }
.wr-hint.is-amber { color: var(--let); }
.wr-voetnoot { margin-top: 12px; font-size: .76rem; color: var(--ink2); max-width: 88ch; line-height: 1.5; }

.wr-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 14px; border-bottom: var(--lijndikte) solid var(--lijn); }
.wr-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; font: 600 .82rem var(--font-ui); color: var(--ink2); cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.wr-tab:hover { color: var(--ink); }
.wr-tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); }

/* de regel als zin */
.wr-rij, .wr-taak {
  display: grid; gap: 6px 16px; align-items: center;
  padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--lijn);
}
.wr-rij { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.wr-taak { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.wr-rij:last-child, .wr-taak:last-child { border-bottom: 0; }
.wr-rij:hover, .wr-taak:hover { background: var(--accent-t2); }
.wr-rij--kop { font-size: .7rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }

.wr-rij__wat { min-width: 0; }
.wr-rij__wat b { display: block; font: 700 .88rem var(--font-ui); }
.wr-rij__wat > span { display: block; font-size: .78rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; }
.wr-rij__v { color: var(--ink3); font-size: .72rem; font-weight: 400; }
.wr-rij__als b { display: inline; font-weight: 700; }
.wr-rij__dan { color: var(--ink); }
.wr-rij__uitleg { color: var(--ink3); font-style: italic; }
.wr-rij__uitleg.is-stop { color: var(--stop); font-style: normal; }

.wr-rij__cijfers { display: flex; gap: 10px; font-size: .74rem; color: var(--ink2); white-space: nowrap; }
.wr-rij__cijfers .is-stop { color: var(--stop); }
.wr-rij__cijfers .is-let { color: var(--let); }
.wr-rij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* de proef in het formulier */
.wr-proef:empty { display: none; }
.wr-proefkaart {
  margin: 0 var(--ruimte, 20px) 4px; padding: 12px 14px;
  border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein);
  background: var(--vlak);
}
.wr-proefkaart > b { display: block; font-size: .84rem; margin-bottom: 6px; }
.wr-proeflijst { display: grid; gap: 4px; max-height: 168px; overflow-y: auto; }
.wr-proeflijst div { font-size: .74rem; color: var(--ink2); }
.wr-proeflijst b { color: var(--ink); }

.wr-run {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 4px 14px; align-items: baseline;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem;
}
.wr-run:last-child { border-bottom: 0; }
.wr-run .wr-rij__uitleg { grid-column: 1 / -1; }

.wr-verzendlijst { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.wr-verzendlijst li { font-size: .8rem; }

@media (max-width: 860px) {
  .wr-rij, .wr-taak, .wr-run { grid-template-columns: minmax(0, 1fr); }
  .wr-rij__acties { justify-content: flex-start; }
}

/* ── maatwerkvelden.css ── */
/* maatwerkvelden.css — MW · eigen velden per entiteit.
   Geen kleurliteral: alles komt uit casa360-stijl.css. */

.mw-kop { margin-bottom: 18px; }
.mw-kop h1 { margin: 2px 0 6px; }
.mw-kop p { max-width: 72ch; color: var(--ink2); margin: 0; }

.mw-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--lijn); margin: 20px 0 14px; }
.mw-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px;
  font: inherit; color: var(--ink2); cursor: pointer; transition: color 160ms, border-color 160ms; }
.mw-tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.mw-balk { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.mw-hint { color: var(--ink2); font-size: 13px; }

.mw-rij { display: grid; grid-template-columns: 1fr 92px minmax(180px, 260px) 60px auto;
  gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--lijn); }
.mw-rij:last-child { border-bottom: 0; }
.mw-rij.is-uit { opacity: .55; }
.mw-rij__wat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mw-rij__sleutel { color: var(--ink2); font-size: 12px; font-weight: 400; }
.mw-rij__uitleg { color: var(--ink2); font-size: 13px; }
.mw-rij__poort { display: flex; gap: 4px; flex-wrap: wrap; }
.mw-rij__aantal { color: var(--ink2); text-align: right; font-size: 13px; }
.mw-rij__acties { display: flex; gap: 6px; justify-content: flex-end; }

.mw-voetnoot { margin-top: 14px; color: var(--ink2); font-size: 13px; max-width: 78ch; }

/* het blok op een recordscherm */
.mw-blok { padding: 16px 18px; }
/* Het blok hangt vaak in een smalle aside (opdrachtdossier), dus kop en
   subregel stapelen — naast elkaar breken ze daar in losse woorden. */
.mw-blok__kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.mw-blok__sub { color: var(--ink2); font-size: 13px; }
.mw-blok__voet { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }

@media (max-width: 900px) {
  .mw-rij { grid-template-columns: 1fr; gap: 8px; }
  .mw-rij__aantal { text-align: left; }
  .mw-rij__acties { justify-content: flex-start; }
}

/* ── werving.css ── */
/* =====================================================================
   werving.css — module 5.2 · Werving (ATS, Recruitee-vervanger).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.wv { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.wv-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.wv-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }

/* ---- knoppen (zelfde grammatica als 5.1) ---- */
.wv-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
  transition: background 160ms, border-color 160ms;
}
.wv-knop:hover { border-color: var(--c-ink-3); }
.wv-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.wv-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); }
.wv-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); }
.wv-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }

.wv-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; }
.wv-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.wv-leeg { padding: 18px; text-align: center; font: 600 .8rem var(--font-ui); color: var(--c-ink-3); margin: 0; }
.wv-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wv-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.is-groen { color: var(--c-groen-d); }
.is-rood { color: var(--c-rood); }
.is-goud { color: var(--c-terra-d); }

/* ---- tabs ---- */
.wv-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; background: var(--c-paneel); border-radius: 12px; }
.wv-tab {
  white-space: nowrap; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: var(--lijndikte) solid transparent; background: none;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.wv-tab.is-actief { background: #fff; border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; }

/* ---- vacature-tegels (prototype) ---- */
.wv-vacs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.wv-vac {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer; text-align: left;
}
.wv-vac.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.wv-vac__wat { min-width: 0; display: flex; flex-direction: column; }
.wv-vac__wat strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-vac__wat em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }

/* ---- kanban (prototype: 5 kolommen, slepen) ---- */
.wv-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 11px; overflow-x: auto; }
.wv-kolom { background: var(--c-paneel); border-radius: 14px; padding: 10px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; }
.wv-kolom__kop { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; font-size: .78rem; }
.wv-kolom__kop .mono { font-size: .66rem; color: var(--c-ink-3); background: #fff; padding: 2px 8px; border-radius: 99px; }
.wv-kaart {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 11px 12px; border-radius: 11px; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); font: 500 .74rem var(--font-ui); color: var(--c-ink);
  box-shadow: var(--schaduw-tegel);
}
.wv-kaart.is-anoniem { opacity: .55; font-style: italic; box-shadow: none; }
.wv-kaart__kop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wv-kaart__kop strong { font-size: .8rem; }
.wv-kaart__kop em { font-style: normal; font-size: .66rem; color: var(--c-terra-d); font-weight: 700; }
.wv-kaart__notitie { color: var(--c-ink-2); line-height: 1.4; }
.wv-kaart__voet { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wv-kaart__acties { display: flex; gap: 5px; margin-left: auto; }
.wv-kolomleeg { text-align: center; color: var(--c-ink-3); padding: 10px 0; margin: 0; }
/* FT-5.4a · kandidaat-balk boven het backend-board */
.wv-kdbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.wv-kdbalk__acties { display: flex; gap: 8px; }
.wv-bron, .wv-actie {
  font: 600 .62rem var(--font-ui); font-style: normal; padding: 3px 8px; border-radius: 6px;
  background: var(--c-creme); color: var(--c-ink-3);
}
.wv-actie { background: var(--c-amber-t); color: var(--c-amber); }
.wv-actie.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }

/* ---- vacatures & kanalen ---- */
.wv-vackaart { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.wv-vackaart__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wv-vackaart__kop > div { flex: 1; min-width: 240px; }
.wv-vackaart__kop strong { display: block; font-size: .92rem; }
.wv-vackaart__kop span { font-size: .72rem; color: var(--c-ink-2); }
.wv-kanalen { display: flex; flex-direction: column; }
.wv-kanaal {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 110px 90px 90px 110px;
  gap: 12px; align-items: center; padding: 8px 4px; font-size: .76rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.wv-kanaal:last-child { border-bottom: 0; }
.wv-kanaal--kop { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.wv-kanaal__naam { font-weight: 600; }
.wv-vackaart__voet { font-size: .66rem; color: var(--c-ink-3); }

/* ---- gesprekken & scorecards ---- */
.wv-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.wv-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wv-blok__kop strong { font-size: .92rem; }
.wv-gesprek {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px; flex-wrap: wrap;
  border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn);
}
.wv-gesprek__wie { flex: 1; min-width: 170px; }
.wv-gesprek__wie strong { display: block; font-size: .8rem; }
.wv-gesprek__wie span { font-size: .7rem; color: var(--c-ink-2); }
.wv-gesprek .mono { font-size: .72rem; }
.wv-gesprek__met { font-size: .72rem; color: var(--c-ink-2); }
.wv-scorerij { display: flex; align-items: center; gap: 12px; padding: 9px 4px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.wv-scorerij:last-child { border-bottom: 0; }
.wv-scorerij strong { min-width: 130px; }
.wv-scorerij .is-goud { font-weight: 800; }
.wv-scorerij__wie { flex: 1; font-size: .7rem; color: var(--c-ink-3); }

/* ---- talentpool ---- */
.wv-tprij {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 170px 200px 280px;
  gap: 12px; align-items: center; padding: 11px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.wv-tprij:last-child { border-bottom: 0; }
.wv-tprij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.wv-tprij.is-anoniem { color: var(--c-ink-3); font-style: italic; }
.wv-tprij__acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- rapportage ---- */
.wv-funnel, .wv-tth { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px 44px; gap: 10px; align-items: center; font-size: .76rem; }
.wv-tth { grid-template-columns: 170px minmax(0, 1fr) 60px; }
.wv-funnel__balk { height: 14px; border-radius: 7px; background: var(--c-creme); overflow: hidden; }
.wv-funnel__balk i { display: block; height: 100%; background: var(--c-groen); border-radius: 7px; }
.wv-tth.is-over .wv-funnel__balk i { background: var(--c-amber); }
.wv-funnel em { font-style: normal; color: var(--c-ink-3); font-size: .66rem; }
.wv-bronrij {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 110px 110px 110px 130px;
  gap: 12px; align-items: center; padding: 10px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.wv-bronrij:last-child { border-bottom: 0; }
.wv-bronrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }

/* ---- instellingen ---- */
.wv-regelcellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wv-regelcellen > div { padding: 11px 13px; border-radius: 10px; background: var(--c-creme); display: flex; flex-direction: column; gap: 2px; }
.wv-regelcellen span { font-size: .68rem; color: var(--c-ink-3); }
.wv-regelcellen strong { font-size: .84rem; }
.wv-auto {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn);
  background: #fff; font: 500 .76rem var(--font-ui); color: var(--c-ink);
}
.wv-auto i {
  width: 34px; height: 20px; flex: none; border-radius: 99px; position: relative;
  background: var(--c-lijn-2); transition: background 160ms;
}
.wv-auto i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: left 160ms;
}
.wv-auto.is-aan i { background: var(--c-groen); }
.wv-auto.is-aan i::after { left: 17px; }
.wv-auto span { flex: 1; }
.wv-auto em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.wv-criteria { display: flex; gap: 8px; flex-wrap: wrap; }
.wv-criteria .chip { font-size: .72rem; padding: 5px 12px; }

/* ---- kandidaat-drawer ---- */
.wv-drawerdeel { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.wv-fasen { display: flex; gap: 5px; flex-wrap: wrap; }
.wv-fase {
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  font: 600 .72rem var(--font-ui); color: var(--c-ink-2);
}
.wv-fase.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.wv-fase[aria-disabled="true"]:not(.is-actief) { opacity: .5; cursor: not-allowed; }
.wv-scoreblok { padding: 9px 12px; border-radius: 9px; background: var(--c-creme); font-size: .74rem; }
.wv-scoreblok strong { display: block; font-size: .74rem; }
.wv-scoreblok span { color: var(--c-ink-2); }
.wv-tlrij { display: flex; gap: 10px; font-size: .74rem; padding: 4px 0; }
.wv-tlrij em { font-style: normal; color: var(--c-ink-3); font-size: .66rem; flex: none; width: 44px; }
.wv-notitie { padding: 10px 12px; border-radius: 9px; background: var(--c-memo, var(--c-creme)); font-size: .76rem; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .wv-tweekolom { grid-template-columns: 1fr; }
  .wv-regelcellen { grid-template-columns: 1fr 1fr; }
  .wv-kanaal, .wv-tprij, .wv-bronrij { grid-template-columns: 1fr; gap: 4px; }
  .wv-kanaal--kop, .wv-tprij--kop, .wv-bronrij--kop { display: none; }
}

/* Talentpool-match op vacature (E2a) */
.wv-tpmatch { border-top: 1px solid var(--c-lijn); margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wv-tpmatchrij { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; align-items: center; font-size: 13px; }
.wv-tpmatchrij span { color: var(--c-ink-2); font-size: 12px; }

/* B19 · kandidaat-domein backend */
.wv-kdkaart { padding: 16px 18px; margin-bottom: 14px; }
.wv-kdrij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; }
.wv-kdrij > div { display: flex; flex-direction: column; gap: 2px; }
.wv-kdrij strong { font-size: .8rem; }
.wv-kdrij > div span { font-size: .68rem; color: var(--c-ink-2); }
.wv-kdrij.is-anoniem { opacity: .55; }
.wv-knop--klein { padding: 5px 10px; font-size: .68rem; }

/* Reviewronde Tim 23-07 · kanban slepen + kandidaat-dossier-drawer */
.wv-kaart[draggable="true"] { cursor: grab; }
.wv-kaart.is-sleep { opacity: .45; }
.wv-kolom.is-dropdoel { outline: 2px dashed var(--c-groen-d); outline-offset: -4px; background: color-mix(in srgb, var(--c-groen-d) 6%, var(--c-paneel)); }
.wv-kaart:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.wv-cvchip { margin-left: 6px; font-size: .58rem; letter-spacing: .06em; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 6px; color: var(--c-ink-2); font-style: normal; }
.wv-docrij { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 7px 0; font-size: .74rem; }
.wv-docrij__naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-cvupload { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: .72rem; color: var(--c-ink-2); }
.wv-cvupload input { font-size: .72rem; }
.wv-notitie--meer { white-space: pre-line; }
.wv-matching { margin-top: 14px; }
.wv-matchbalk { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 12px; }
.wv-matchlabel { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--c-ink-2); }
.wv-matchlabel select { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--c-paneel); color: var(--c-ink); }
.wv-matchprofiel { font-size: .76rem; color: var(--c-ink-2); margin: 0 0 8px; }
.wv-matchreden { display: inline-block; font-style: normal; font-size: .68rem; color: var(--c-ink-2); margin-right: 10px; }

/* ═══ W2 · de echte vacatureketen ═══════════════════════════════════
   Een vacature is sinds 23-08 een ding met een aanvraag, een goedkeuring,
   fasen en een bevroren versie. Deze rijen tonen die stand: wat het is,
   waar het staat, en wat je ermee kunt. */
.wv-vacrij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center;
  padding: 12px 15px; border-bottom: var(--lijndikte) solid var(--lijn);
}
.wv-vacrij:last-child { border-bottom: 0; }
.wv-vacrij:hover { background: var(--accent-t2); }
.wv-vacrij__wat b { display: block; font: 700 .86rem var(--font-ui); }
.wv-vacrij__wat span { display: block; font-size: .76rem; color: var(--ink2); }
.wv-vacrij__wat .wv-vacrij__reden { color: var(--ink3); font-style: italic; margin-top: 2px; }
.wv-vacrij__v { color: var(--ink3); font-size: .72rem; }
.wv-vacrij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* de pipeline in de rij: fase met teller, pijltje ertussen.
   De selectors dragen `.wv-vacrij__wat` mee omdat de regel hierboven
   (`.wv-vacrij__wat span`) anders wint: die is specifieker dan een kale
   klasse, en zette elke fase-chip op display:block — vijf balken onder
   elkaar in plaats van een keten. */
.wv-vacrij__wat .wv-vacpijp { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.wv-vacrij__wat .wv-vacpijp i { color: var(--ink3); font-style: normal; font-size: .7rem; }
.wv-vacrij__wat .wv-vacfase {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill);
  padding: 1px 8px; font-size: .7rem; color: var(--ink2); background: var(--kaart);
}
.wv-vacrij__wat .wv-vacfase.is-vol { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.wv-vacrij__wat .wv-vacfase b { font-family: var(--font-mono); }

/* de pipeline-lade */
.wv-pipe { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.wv-pipekolom { flex: 0 0 168px; }
.wv-pipekop {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 700 .74rem var(--font-ui); color: var(--ink2);
  padding: 6px 8px; background: var(--grijs); border-radius: var(--radius-klein); margin-bottom: 6px;
}
.wv-pipekaart {
  background: var(--kaart); border: var(--lijndikte) solid var(--lijn);
  border-radius: var(--radius-klein); padding: 8px 10px; margin-bottom: 6px;
}
.wv-pipekaart b { display: block; font-size: .8rem; }
.wv-pipekaart span { display: block; font-size: .72rem; color: var(--ink2); }
.wv-pipebeoord { color: var(--goed-d) !important; font-weight: 700; }
.wv-pipeleeg { color: var(--ink3); font-size: .74rem; padding: 6px 8px; }
.wv-pipeversies { margin-top: 16px; border-top: var(--lijndikte) solid var(--lijn); padding-top: 10px; }
.wv-pipeversie {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .76rem; color: var(--ink2); padding: 4px 0;
}

/* W2b · rij in de smalle drawer (kanalen, talentpool-leden).
   Bewust géén hergebruik van `.wv-tprij`: dat is een vijfkolomsraster
   voor een tabel over de volle breedte, en in een drawer van 420px
   perst dat elk woord op een eigen regel. */
.wv-kanrij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px; align-items: center;
  padding: 11px 0; border-bottom: var(--lijndikte) solid var(--lijn);
}
.wv-kanrij:last-child { border-bottom: 0; }
.wv-kanrij__wat { min-width: 0; }
.wv-kanrij__wat b { display: block; font: 700 .84rem var(--font-ui); }
.wv-kanrij__wat b .chip { margin-left: 6px; vertical-align: 1px; }
.wv-kanrij__wat span { display: block; font-size: .74rem; color: var(--ink2); margin-top: 2px; }
.wv-kanrij__wat .wv-kanrij__afw { color: var(--let); font-style: italic; }
.wv-kanrij__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.wv-kanrij__rechts b { font-size: .84rem; }
.wv-kanrij.is-anoniem { opacity: .62; }

/* ── doelen.css ── */
/* =====================================================================
   doelen.css — module 5.3 · Doelen & evaluaties + ESS-app.
   Uitsluitend tokens; module-wortel-marge volgens de vaste UI-norm.
===================================================================== */

.hd { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.hd-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.hd-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.hd-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.is-groen { color: var(--c-groen-d); }
.is-rood { color: var(--c-rood); }
.is-terra { color: var(--c-terra-d); }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- knoppen (module-grammatica) ---- */
.hd-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
  transition: background 160ms, border-color 160ms;
}
.hd-knop:hover { border-color: var(--c-ink-3); }
.hd-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.hd-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); }
.hd-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }
.hd-hint { font-size: .72rem; color: var(--c-ink-3); }
.hd-check { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--c-ink-2); cursor: pointer; line-height: 1.4; }
/* FT-5.4c · beoordelingscyclus (backend) */
.hd-bokaart { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.hd-bokop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hd-bokop strong { display: block; font-size: .92rem; }
.hd-borij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border-top: var(--lijndikte) solid var(--c-lijn); padding: 10px 2px; }
.hd-borij__wie { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-borij__wie strong { font-size: .84rem; }
.hd-borij__wie em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); }
.hd-bodoelen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.hd-borij__acties { display: flex; gap: 6px; align-items: center; }
.hd-bovoet { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; margin: 8px 0 0; }

/* ---- views-toggle ---- */
.hd-views { display: flex; gap: 8px; flex-wrap: wrap; }
.hd-view {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.hd-view.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; }

/* ---- dashboard ---- */
.hd-dashkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hd-dashkop p { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 64ch; }
.hd-dashkop .mono { font-size: .68rem; color: var(--c-ink-3); }
.hd-rij {
  display: grid; grid-template-columns: 40px 1.5fr 1fr .8fr .8fr .9fr 1.2fr;
  gap: 12px; align-items: center; padding: 13px 18px; width: 100%;
  border: 0; border-bottom: var(--lijndikte) solid var(--c-lijn);
  background: none; text-align: left; cursor: pointer; font: 500 .78rem var(--font-ui); color: var(--c-ink);
}
.hd-rij:hover:not(.hd-rij--kop) { background: var(--c-creme); }
.hd-rij:last-child { border-bottom: 0; }
.hd-rij--kop { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); cursor: default; background: var(--c-creme); }
.hd-rank { color: var(--c-ink-3); font-weight: 700; }
.hd-wie { min-width: 0; }
.hd-wie strong { display: block; font-size: .8rem; }
.hd-wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.hd-balkcel { display: flex; align-items: center; gap: 9px; }
.hd-balk { flex: 1; height: 9px; border-radius: 6px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.hd-balk b { display: block; height: 100%; border-radius: 6px; }
.hd-balk b.is-groen { background: var(--c-groen); }
.hd-balk b.is-amber { background: var(--c-oker); }
.hd-balk b.is-rood { background: var(--c-rood); }
.hd-balkcel em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); width: 36px; text-align: right; }

/* ---- evaluatie & instellen ---- */
.hd-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.hd-meds { display: flex; flex-direction: column; gap: 7px; }
.hd-med {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 10px 13px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); background: #fff;
}
.hd-med.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.hd-med i {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  font: 700 .74rem var(--font-ui); color: #fff; background: var(--c-lijn-2);
}
.hd-med.is-actief i { background: var(--c-terra); }
.hd-med span { min-width: 0; display: flex; flex-direction: column; }
.hd-med strong { font-size: .8rem; }
.hd-med em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

.hd-evalkolom { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hd-evalkop { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hd-evalkop strong { display: block; font-size: 1.05rem; }
.hd-evalkop span { font-size: .74rem; color: var(--c-ink-2); }
.hd-blok { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.hd-blok > strong { font-size: .86rem; }
.hd-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.hd-metric__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: .78rem; }
.hd-metric__kop strong { font-size: .78rem; }
.hd-metric__badges { display: flex; align-items: center; gap: 10px; }
.hd-dubbelbalk { position: relative; height: 12px; border-radius: 6px; background: var(--c-creme); }
.hd-dubbelbalk b { display: block; height: 100%; border-radius: 6px; }
.hd-dubbelbalk b.is-groen { background: var(--c-groen); }
.hd-dubbelbalk b.is-rood { background: var(--c-rood); }
.hd-dubbelbalk i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--c-ink-2); }
.hd-metric__voet { display: flex; justify-content: space-between; margin-top: 4px; font-size: .64rem; color: var(--c-ink-3); }

.hd-sterren { display: flex; gap: 5px; }
.hd-ster {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 1.5rem; line-height: 1; color: var(--c-lijn);
}
.hd-ster.is-aan { color: var(--c-oker); }
.hd-notitieveld textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; resize: vertical;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px;
  font: 400 .8rem/1.5 var(--font-ui); color: var(--c-ink); background: #fff;
}
.hd-nieuwdoel { display: flex; align-items: center; gap: 10px; font-size: .78rem; }
.hd-nieuwdoel > span:first-child { flex: 1; font-weight: 600; }
.hd-nieuwdoel em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.hd-pijl { color: var(--c-ink-3); flex: none; }
.hd-nieuwdoel input {
  width: 82px; padding: 7px 10px; text-align: center;
  border: var(--lijndikte) solid var(--c-terra); border-radius: 8px;
  font: 700 .76rem var(--font-mono); color: var(--c-ink); background: #fff;
}

.hd-akkoord { padding: 18px 22px; border-color: var(--c-terra); background: var(--c-terra-t); display: flex; flex-direction: column; gap: 6px; }
.hd-akkoord strong { font-size: .84rem; color: var(--c-terra-d); }
.hd-akkoord p { margin: 0 0 8px; font-size: .76rem; color: var(--c-ink-2); }
.hd-akkoord__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

.hd-instellen__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hd-instellen__kop strong { display: block; font-size: .92rem; }
.hd-instellen__kop span:not(.chip) { font-size: .72rem; color: var(--c-ink-3); }
.hd-insmetric > strong { font-size: .8rem; display: block; margin-bottom: 9px; }
.hd-insmetric em { font-style: normal; font-weight: 500; color: var(--c-ink-3); }
.hd-perioden { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.hd-periode {
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.hd-periode.is-actueel { border-color: var(--c-terra); }
.hd-periode > .mono:first-child { font-size: .64rem; color: var(--c-ink-3); }
.hd-periode strong { font-size: .84rem; }
.hd-periode em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.hd-instellen__voet {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn);
}
.hd-instellen__voet span { flex: 1; font-size: .72rem; color: var(--c-ink-3); min-width: 220px; }

/* ============ ESS-app ============ */
.ess-vlak { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.ess-phone {
  width: 390px; max-width: 100%; flex: none;
  border-radius: 44px; background: var(--c-ink); padding: 12px;
  box-shadow: var(--schaduw-tegel-hover);
}
.ess-phone__scherm {
  border-radius: 34px; overflow: hidden; background: var(--c-creme);
  height: 760px; display: flex; flex-direction: column;
}
.ess-statusbalk { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 8px; font: 700 .78rem var(--font-ui); color: var(--c-ink); }
.ess-statusbalk span:last-child { font-size: .66rem; }
.ess-scroll { flex: 1; overflow-y: auto; padding: 8px 20px 26px; }
.ess-datum { font: 500 .76rem var(--font-ui); color: var(--c-ink-3); margin-top: 6px; }
.ess-groet { font: 800 1.35rem var(--font-ui); color: var(--c-ink); letter-spacing: -.01em; margin-bottom: 16px; }
.ess-sectiekop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: .8rem; }
.ess-taken { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ess-taak {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 15px; background: #fff; box-shadow: var(--schaduw-tegel);
}
.ess-vink {
  width: 22px; height: 22px; flex: none; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--c-lijn-2); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ess-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); }
.ess-taak__wat { min-width: 0; }
.ess-taak__wat strong { display: block; font-size: .78rem; }
.ess-taak__wat.is-klaar strong { color: var(--c-ink-3); text-decoration: line-through; }
.ess-taak__wat em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.ess-akkoordkaart {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  padding: 15px 17px; border-radius: 16px; margin-bottom: 14px;
  border: var(--lijndikte) solid var(--c-terra); background: var(--c-terra-t);
  font: 500 .74rem var(--font-ui); color: var(--c-ink-2);
}
.ess-akkoordkaart strong { font-size: .8rem; color: var(--c-terra-d); }
.ess-akkoordkaart em { font-style: normal; font-weight: 700; color: var(--c-groen-d); margin-top: 4px; }

/* verlofkaart — gradient uit token-kleuren (aanvulling 14-07-2026) */
.ess-verlofkaart {
  border-radius: 18px; padding: 17px 19px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--c-groen-t), var(--c-sage-t));
  border: var(--lijndikte) solid var(--c-groen);
  display: flex; flex-direction: column; gap: 2px;
}
.ess-verlofkaart > span { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.ess-verlofkaart strong { font: 800 1.7rem var(--font-ui); color: var(--c-groen-d); margin-bottom: 10px; }
.ess-verlofkaart strong em { font-style: normal; font-size: .84rem; font-weight: 700; }
.ess-cta {
  width: 100%; padding: 13px; border-radius: 13px; border: 0; cursor: pointer;
  background: var(--c-ink); color: #fff; font: 700 .82rem var(--font-ui);
}
.ess-cta--breed { margin: 4px 0 18px; }
.ess-cta.is-dicht { opacity: .5; cursor: not-allowed; }

.ess-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.ess-tegel {
  padding: 14px 15px; border-radius: 14px; border: 0; cursor: pointer; text-align: left;
  background: #fff; box-shadow: var(--schaduw-tegel);
  font: 700 .78rem var(--font-ui); color: var(--c-ink);
}
.ess-tegel em { display: block; font-style: normal; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; }
.ess-signaal {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px;
  border-radius: 15px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker);
  font: 600 .74rem/1.5 var(--font-ui); color: var(--c-amber);
}
.ess-signaal i { font-style: normal; font-size: .9rem; }

.ess-terug { display: inline-flex; border: 0; background: none; cursor: pointer; font: 600 .78rem var(--font-ui); color: var(--c-groen-d); margin: 4px 0 12px; padding: 0; }
.ess-kop2 { font: 800 1.2rem var(--font-ui); color: var(--c-ink); margin-bottom: 14px; }
.ess-kaartje { border-radius: 16px; background: #fff; box-shadow: var(--schaduw-tegel); padding: 15px 16px; margin-bottom: 12px; }
.ess-kaartje > strong { font-size: .78rem; display: block; margin-bottom: 10px; }
.ess-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ess-kal i {
  height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-style: normal; font-size: .7rem; color: var(--c-ink-2);
}
.ess-kal__kop { font-size: .58rem !important; color: var(--c-lijn-2) !important; }
.ess-kal i.is-sel { background: var(--c-groen); color: #fff; font-weight: 700; }
.ess-label { display: block; font: 700 .74rem var(--font-ui); color: var(--c-ink); margin-bottom: 8px; }
.ess-soorten { display: flex; gap: 7px; margin-bottom: 14px; }
.ess-soort {
  flex: 1; text-align: center; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--c-lijn-2); background: #fff;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.ess-soort.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; }
.ess-stepper { display: flex; align-items: center; justify-content: space-between; }
.ess-stepper > strong { margin: 0; }
.ess-stepper span { display: flex; align-items: center; gap: 14px; }
.ess-stepper b { font: 800 1.05rem var(--font-ui); min-width: 24px; text-align: center; }
.ess-stap {
  width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--c-creme); color: var(--c-ink); font: 700 1rem var(--font-ui);
}
.ess-saldona {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-radius: 14px; background: var(--c-groen-t); margin-bottom: 12px;
  font: 600 .76rem var(--font-ui); color: var(--c-groen-d);
}
.ess-saldona strong { font: 800 1rem var(--font-ui); }
.ess-saldona.is-rood { background: var(--c-rood-t); color: var(--c-rood); }
.ess-eerder { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ess-eerder strong { display: block; font-size: .78rem; }
.ess-eerder em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

.ess-bevestiging { text-align: center; padding: 20px 4px; }
.ess-bevestiging i {
  width: 66px; height: 66px; border-radius: 50%; margin: 22px auto 16px;
  background: var(--c-groen-t); color: var(--c-groen-d);
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 1.6rem;
}
.ess-bevestiging strong { display: block; font: 800 1.15rem var(--font-ui); margin-bottom: 8px; }
.ess-bevestiging p { font: 500 .78rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 260px; margin: 0 auto 20px; }
.ess-intrekken {
  display: block; width: 100%; margin-top: 18px; padding: 12px; border-radius: 13px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-rood-t); background: #fff; color: var(--c-rood); font: 700 .76rem var(--font-ui);
}
.ess-declform { display: flex; flex-direction: column; gap: 12px; }
.ess-declform label { display: flex; flex-direction: column; gap: 5px; font: 600 .72rem var(--font-ui); color: var(--c-ink-2); }
.ess-declform input {
  padding: 11px 13px; border-radius: 11px; border: 1.5px solid var(--c-lijn-2);
  font: 600 .8rem var(--font-ui); color: var(--c-ink); background: #fff;
}

.ess-context { flex: 1; min-width: 280px; max-width: 440px; }
.ess-context h2 { font-size: 1.25rem; margin: 6px 0 10px; }
.ess-context > p { font-size: .8rem; line-height: 1.65; color: var(--c-ink-2); margin: 0 0 16px; }
.ess-punt { display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px; margin-bottom: 9px; font: 500 .76rem/1.5 var(--font-ui); color: var(--c-ink-2); }
.ess-punt i { font-style: normal; font-weight: 700; color: var(--c-terra-d); }
.ess-punt strong { color: var(--c-ink); }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .hd-grid, .hd-tweekolom { grid-template-columns: 1fr; }
  .hd-perioden { grid-template-columns: repeat(2, 1fr); }
  .hd-rij { grid-template-columns: 1fr; gap: 4px; }
  .hd-rij--kop { display: none; }
}

/* ESS · Mijn voertuig (15-07) */
.ess-tegel--voertuig em { color: var(--c-groen-d); }
.ess-vtkaart { background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ess-vtstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ess-vtstats div { display: flex; flex-direction: column; gap: 1px; font-size: 11px; }
.ess-vtstats span { color: var(--c-ink-2); }
.ess-vtmelding { background: color-mix(in srgb, var(--c-groen) 12%, var(--c-paneel)); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--c-groen-d); margin-bottom: 8px; }
.ess-veld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-bottom: 8px; }
.ess-veld textarea, .ess-veld input { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--c-paneel); color: var(--c-ink); }
.ess-vtfoto { border: 1px dashed var(--c-lijn); border-radius: 99px; background: none; font: inherit; font-size: 12px; padding: 7px 14px; cursor: pointer; color: var(--c-ink-2); margin-bottom: 8px; width: 100%; }
.ess-cta--stil { background: var(--c-paneel); color: var(--c-ink); border: 1px solid var(--c-lijn); }

/* ---- ESS-berichten (chat + broadcast + meldingen) ---- */
.ess-berkaart { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 14px; background: var(--c-creme); padding: 12px 14px; margin: 4px 0 14px; box-shadow: var(--schaduw-tegel); }
.ess-berkaart__i { font-size: 1.15rem; color: var(--c-groen-d); }
.ess-berkaart__wat { flex: 1; display: flex; flex-direction: column; }
.ess-berkaart__wat strong { font: 800 .92rem var(--font-ui); color: var(--c-ink); }
.ess-berkaart__wat em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.ess-bertabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ess-bertab { flex: 1; border: var(--lijndikte) solid var(--c-lijn); background: #fff; border-radius: 99px; padding: 7px 6px; cursor: pointer; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); }
.ess-bertab.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.ess-bertab b { font-weight: 800; }
.ess-gesprekken { display: flex; flex-direction: column; gap: 8px; }
.ess-gesprek { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: #fff; padding: 10px 12px; }
.ess-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-paneel); font: 800 .74rem var(--font-mono); color: var(--c-ink-2); flex: none; }
.ess-gesprek__wie { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ess-gesprek__wie strong { font-size: .82rem; }
.ess-gesprek__wie em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-berterug { border: 0; background: none; cursor: pointer; font: 600 .74rem var(--font-ui); color: var(--c-groen-d); padding: 0; margin-bottom: 8px; }
.ess-bertitel { font: 800 .9rem var(--font-ui); color: var(--c-ink); margin-bottom: 10px; }
.ess-chat { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.ess-chatbubbel { max-width: 82%; align-self: flex-start; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 7px 11px; font-size: .8rem; color: var(--c-ink); line-height: 1.4; }
.ess-chatbubbel.is-ik { align-self: flex-end; background: var(--c-groen-t); border-color: var(--c-groen-t); }
.ess-chatvan { display: block; font: 700 .6rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 2px; }
.ess-chatform { display: flex; gap: 7px; align-items: center; }
.ess-chatform input { flex: 1; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 9px 13px; font: inherit; font-size: 13px; background: #fff; color: var(--c-ink); }
.ess-chatform .ess-cta { margin: 0; white-space: nowrap; }
.ess-meds, .ess-melds { display: flex; flex-direction: column; gap: 9px; }
.ess-med { border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: #fff; padding: 11px 13px; }
.ess-med.is-plicht { border-color: var(--c-amber-t); }
.ess-med__kop { display: flex; gap: 6px; margin-bottom: 6px; }
.ess-med strong { display: block; font-size: .84rem; margin-bottom: 3px; }
.ess-med p { margin: 0 0 6px; font-size: .76rem; color: var(--c-ink-2); line-height: 1.45; }
.ess-med__voet { font-size: .64rem; color: var(--c-ink-3); }
.ess-meldrij { display: flex; gap: 11px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: #fff; padding: 10px 12px; }
.ess-meldrij.is-nieuw { border-color: var(--c-terra-t); }
.ess-meldrij i { font-style: normal; font-size: 1rem; color: var(--c-terra-d); }
.ess-meldrij > div { display: flex; flex-direction: column; }
.ess-meldrij strong { font-size: .8rem; }
.ess-meldrij em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); }
.ess-berlink { border: 0; background: none; cursor: pointer; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); padding: 0; margin-bottom: 4px; align-self: flex-start; }

/* Reviewronde Tim 23-07 · punt 9: ziek melden in de ESS-app */
.ess-tegel--ziek { border-color: var(--c-amber); }
.ess-ziekstap p { margin: 4px 0 0; font-size: .78rem; color: var(--c-ink-2); }
.ess-ziekvink { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ess-ziekvink input { accent-color: var(--c-groen-d); width: 18px; height: 18px; }
.ess-ziektel { text-decoration: none; border-bottom: 1px solid var(--c-lijn); color: inherit; }

/* ── lms.css ── */
/* =====================================================================
   lms.css — module 5.5 · LMS · assessments · intranet · arbo.
   Uitsluitend tokens; module-wortel-marge volgens de vaste UI-norm.
===================================================================== */

.lm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.lm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.lm-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.lm-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.lm-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; }
.lm-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; }
.lm-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.lm-rek { flex: 1; }

.lm-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
  transition: background 160ms, border-color 160ms;
}
.lm-knop:hover { border-color: var(--c-ink-3); }
.lm-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.lm-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); }
.lm-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); }
.lm-knop--terra { background: var(--c-terra); border-color: var(--c-terra); color: #fff; }
.lm-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.lm-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }

.lm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lm-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.lm-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.lm-flt {
  padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.lm-flt.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.lm-sorteer { display: flex; gap: 4px; }

/* ---- lms: matrix ---- */
.lm-mrij {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) 1.1fr;
  gap: 10px; align-items: center; padding: 12px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.lm-mrij--kop { font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); }
.lm-mrij strong { display: block; font-size: .8rem; }
.lm-mrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.lm-r { text-align: right; }
.lm-leeg { font-style: normal; color: var(--c-lijn-2); }
.lm-reden {
  padding: 8px 16px 12px; font: 600 .72rem var(--font-ui); color: var(--c-rood);
  border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--c-rood-t);
}
.lm-reden:last-child, .lm-mrij:last-child { border-bottom: 0; }

.lm-cursussen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lm-cursus { padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.lm-cursus strong { font-size: .88rem; }
.lm-cursus span { font-size: .7rem; color: var(--c-ink-3); }
.lm-cursus em { font-style: normal; }

.lm-certrij {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.lm-certrij:last-child { border-bottom: 0; }
.lm-certrij > div { flex: 1; min-width: 0; }
.lm-certrij strong { display: block; font-size: .8rem; }
.lm-certrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.lm-certrij .mono { font-size: .7rem; color: var(--c-ink-2); }

/* ---- assessments ---- */
.lm-asgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.lm-askaart { padding: 17px 19px; display: flex; flex-direction: column; gap: 8px; }
.lm-askaart__kop { display: flex; align-items: center; gap: 9px; }
.lm-askaart__kop strong { font-size: .92rem; }
.lm-askaart__sub { font-size: .68rem; color: var(--c-ink-3); }
.lm-comps { display: flex; flex-direction: column; gap: 7px; }
.lm-comp__kop { display: flex; justify-content: space-between; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 3px; }
.lm-comp__balk { height: 5px; border-radius: 3px; background: var(--c-creme); }
.lm-comp__balk b { display: block; height: 100%; border-radius: 3px; background: var(--c-groen); }
.lm-eind {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 10px; background: var(--c-groen-t);
  font: 600 .74rem var(--font-ui); color: var(--c-groen-d);
}
.lm-eind strong { font-size: .95rem; }
.lm-verborgen { font: 500 .74rem var(--font-ui); color: var(--c-ink-3); padding: 6px 0; }
.lm-doelchips { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-askaart__acties { display: flex; gap: 8px; margin-top: 4px; }
.lm-locknote { font: 500 .64rem/1.4 var(--font-ui); color: var(--c-ink-3); padding-top: 8px; border-top: var(--lijndikte) solid var(--c-lijn); }

/* ---- intranet ---- */
.lm-intragrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.lm-intragrid > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.lm-post { padding: 16px 19px; display: flex; flex-direction: column; gap: 6px; }
.lm-post__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lm-post__kop em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.lm-pin { font: 700 .64rem var(--font-ui); color: var(--c-amber); }
.lm-post > strong { font-size: .92rem; }
.lm-post p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--c-ink-2); }
.lm-post__voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lm-post__voet em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.lm-gelezen { font: 700 .72rem var(--font-ui); color: var(--c-groen-d); }
.lm-intrazij { display: flex; flex-direction: column; gap: 14px; }
.lm-pinblok { padding: 16px 18px; background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); display: flex; flex-direction: column; gap: 8px; }
.lm-pinblok .kicker { color: var(--c-lijn); }
.lm-pinrij { font: 600 .76rem var(--font-ui); }
.lm-pinrij em { font-style: normal; font-weight: 500; opacity: .6; }
.lm-unconf { padding: 14px 16px; border-color: var(--c-terra); background: var(--c-terra-t); display: flex; flex-direction: column; gap: 4px; }
.lm-unconf strong { font-size: .8rem; color: var(--c-terra-d); }
.lm-unconf span { font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; }

/* ---- arbo ---- */
.lm-melding { padding: 16px 19px; display: flex; align-items: flex-start; gap: 14px; }
.lm-melding__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lm-melding__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lm-melding__kop strong { font-size: .86rem; }
.lm-onhold {
  font: 700 .62rem var(--font-ui); padding: 3px 9px; border-radius: 6px;
  background: var(--c-rood); color: #fff;
}
.lm-melding__sub { font-size: .72rem; color: var(--c-ink-3); }
.lm-melding__st { font: 600 .74rem var(--font-ui); color: var(--c-ink-2); }
.lm-maatregel {
  font: 500 .76rem/1.45 var(--font-ui); color: var(--c-ink);
  padding: 9px 12px; border-radius: 10px; background: var(--c-groen-t);
}
.lm-tbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lm-toolbox { padding: 16px 19px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.lm-toolbox__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.lm-toolbox__kop strong { font-size: .88rem; }
.lm-toolbox span:not(.chip) { font-size: .7rem; color: var(--c-ink-3); }
.lm-compleet { font-style: normal; font: 700 .72rem var(--font-ui); color: var(--c-groen-d); }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .lm-intragrid { grid-template-columns: 1fr; }
  .lm-mrij { grid-template-columns: 1fr 1fr; }
  .lm-mrij--kop { display: none; }
}

/* ---------- Catalogusbeheer (cursus bewerken / uit catalogus) ---------- */
.lm-cursusacties { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px dashed var(--c-lijn); margin-top: 9px; padding-top: 9px; }
.lm-cursusacties > span:first-child { font-size: .62rem; color: var(--c-ink-3); }
.lm-cursusacties > span:last-child { display: flex; gap: 4px; }
.lm-mini { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 4px 8px;
  font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.lm-mini:hover { background: var(--c-creme); border-color: var(--c-groen); color: var(--c-groen-d); }

/* Reviewronde Tim 23-07 · punt 8: BHV-dekkings-kaart */
.lm-bhv { margin-top: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.lm-bhv--tekort { border-color: var(--c-amber); }
.lm-bhv__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lm-bhv__kop > div { display: flex; flex-direction: column; gap: 3px; }
.lm-bhv__cellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lm-bhv__cellen > div { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; }
.lm-bhv__cellen span:first-child { font-size: .66rem; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.lm-bhv__houders { font-size: .74rem; color: var(--c-ink-2); margin: 0; }
.lm-bhv__actie { font-size: .76rem; border-top: 1px solid var(--c-lijn); padding-top: 9px; }
@media (max-width: 900px) { .lm-bhv__cellen { grid-template-columns: 1fr 1fr; } }

/* ── directie.css ── */
/* =====================================================================
   directie.css — module 5.6 · Directiecockpit + OKR's.
   Uitsluitend tokens; het prototype-blauw is gemapt op ink/oker
   (blauw verboden). Module-wortel-marge volgens de vaste UI-norm.
===================================================================== */

.dc { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.dc-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.dc-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.dc-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.dc-balk { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.dc-sep { width: 1px; height: 22px; background: var(--c-lijn-2); }
.dc-rek { flex: 1; }
.is-groen { color: var(--c-groen-d); }
.is-amber { color: var(--c-amber); }
.is-rood { color: var(--c-rood); }

.dc-knop {
  padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .76rem var(--font-ui);
}
.dc-knop:hover { border-color: var(--c-ink-3); }
.dc-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.dc-knop--goud { background: var(--c-oker); border-color: var(--c-oker); color: var(--c-ink); }
.dc-knop--rood { border-color: var(--c-rood-t); background: var(--c-rood-t); color: var(--c-rood); }
.dc-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; }
.dc-terug { align-self: flex-start; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 8px; padding: 7px 14px; cursor: pointer; font: 600 .76rem var(--font-ui); color: var(--c-ink-2); }

.dc-chip {
  padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 500 .74rem var(--font-ui); color: var(--c-ink-2);
}
.dc-chip.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }

/* ---- status-dot ---- */
.dc-st { display: inline-flex; align-items: center; gap: 5px; font: 600 .66rem var(--font-ui); }
.dc-st b { width: 7px; height: 7px; border-radius: 99px; }
.dc-st.is-groen { color: var(--c-groen-d); } .dc-st.is-groen b { background: var(--c-groen); }
.dc-st.is-amber { color: var(--c-amber); } .dc-st.is-amber b { background: var(--c-oker); }
.dc-st.is-rood { color: var(--c-rood); } .dc-st.is-rood b { background: var(--c-rood); }

/* ---- marge-hero (ink-donker; prototype-blauw gemapt) ---- */
.dc-hero {
  border-radius: 18px; background: var(--c-ink); color: var(--c-creme);
  padding: 22px 26px; display: flex; gap: 24px; flex-wrap: wrap;
}
.dc-hero .kicker { color: var(--c-lijn); }
.dc-hero__links { min-width: 240px; }
.dc-hero__kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dc-hero__kicker em { font: 700 .58rem var(--font-ui); font-style: normal; color: var(--c-oker); background: color-mix(in srgb, var(--c-oker) 20%, transparent); padding: 2px 8px; border-radius: 5px; }
.dc-hero__waarde { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dc-hero__waarde strong { font: 700 2.6rem/1 var(--font-ui); letter-spacing: -.02em; }
.dc-hero__waarde span { font: 700 .84rem var(--font-mono); opacity: .75; }
.dc-hero__waarde .is-op { color: var(--c-sage); opacity: 1; }
.dc-hero__waarde .is-neer { color: var(--c-blush); opacity: 1; }
.dc-hero__euro { font-size: 1.05rem; opacity: .9; margin-top: 6px; }
.dc-hero__sub { font: 500 .72rem var(--font-ui); opacity: .6; margin-top: 4px; }
.dc-hero__doel { margin-top: 14px; max-width: 280px; }
.dc-hero__doelkop { display: flex; justify-content: space-between; font: 600 .66rem var(--font-ui); opacity: .8; margin-bottom: 5px; }
.dc-hero__doelbalk { height: 6px; border-radius: 99px; background: color-mix(in srgb, #fff 15%, transparent); overflow: hidden; }
.dc-hero__doelbalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-oker); }
.dc-hero__doelbalk b.is-ok { background: var(--c-sage); }
.dc-hero__doelnote { display: block; font: 600 .66rem var(--font-ui); color: var(--c-oker); margin-top: 6px; }
.dc-hero__doelnote.is-ok { color: var(--c-sage); }
.dc-hero__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.dc-hero .dc-chip { background: transparent; border-color: color-mix(in srgb, #fff 22%, transparent); color: color-mix(in srgb, #fff 75%, transparent); }
.dc-hero .dc-chip.is-actief { background: var(--c-creme); border-color: var(--c-creme); color: var(--c-ink); }
.dc-hero__rechts { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 11px; }
.dc-hero__dimbalk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dc-hero__dims {
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: 13px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.dc-hero__dims em { font: 500 .62rem var(--font-ui); font-style: normal; opacity: .5; }
.dc-dimrij { display: flex; align-items: center; gap: 12px; font: 600 .76rem var(--font-ui); }
.dc-dimrij > span { min-width: 120px; }
.dc-dimbalk { flex: 1; height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 10%, transparent); overflow: hidden; font-style: normal; }
.dc-dimbalk b { display: block; height: 100%; border-radius: 99px; }
.dc-dimbalk b.is-groen { background: var(--c-sage); }
.dc-dimbalk b.is-amber { background: var(--c-oker); }
.dc-dimbalk b.is-rood { background: var(--c-rood); }
.dc-dimbalk b.is-ink { background: var(--c-ink-2); }
.dc-dimrij strong { min-width: 52px; text-align: right; }
.dc-dimrij .is-groen { color: var(--c-sage); }
.dc-hero__dims .dc-dimrij .is-amber { color: var(--c-oker); }

/* ---- ondergrens-signaal ---- */
.dc-signaal {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: 12px; width: 100%;
  border: var(--lijndikte) solid var(--c-rood); background: var(--c-rood-t);
}
.dc-signaal i {
  width: 30px; height: 30px; border-radius: 8px; flex: none; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  font: 700 .82rem var(--font-ui); color: #fff; background: var(--c-rood);
}
.dc-signaal span { flex: 1; min-width: 0; }
.dc-signaal strong { display: block; font-size: .8rem; color: var(--c-rood); }
.dc-signaal em { font-style: normal; font-size: .72rem; color: var(--c-ink-2); }
.dc-signaal b { font: 600 .72rem var(--font-ui); color: var(--c-rood); white-space: nowrap; }

.dc-geenrecht { padding: 14px 18px; font-size: .78rem; color: var(--c-ink-2); border-color: var(--c-terra); }
.dc-bron {
  display: flex; align-items: center; gap: 9px; padding: 11px 16px;
  border-radius: 11px; background: var(--c-sage-t); border: var(--lijndikte) solid var(--c-sage);
  font: 500 .76rem var(--font-ui); color: var(--c-ink-2);
}
.dc-bron i { font-style: normal; color: var(--c-groen-d); }

/* ---- KPI-blokken ---- */
.dc-blok__kop { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.dc-accent { width: 8px; height: 8px; border-radius: 99px; }
.dc-accent.is-groen { background: var(--c-groen); }
.dc-accent.is-terra { background: var(--c-terra); }
.dc-accent.is-oker { background: var(--c-oker); }
.dc-accent.is-blush { background: var(--c-blush); }
.dc-accent.is-sage { background: var(--c-sage); }
.dc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dc-kpi { padding: 15px 17px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.dc-kpi:hover { border-color: var(--c-ink-3); }
.dc-kpi__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.dc-kpi__kop em { font-style: normal; font-size: .7rem; font-weight: 700; }
.dc-kpi > strong { font-size: 1.35rem; letter-spacing: -.01em; }
.dc-kpi__label { font: 500 .74rem var(--font-ui); color: var(--c-ink-2); }
.dc-kpi__balk { height: 3px; border-radius: 99px; margin-top: 8px; font-style: normal; background: var(--c-creme); overflow: hidden; }
.dc-kpi__balk b { display: block; height: 100%; border-radius: 99px; }
.dc-kpi__balk.is-groen b { background: var(--c-groen); }
.dc-kpi__balk.is-amber b { background: var(--c-oker); }
.dc-kpi__balk.is-rood b { background: var(--c-rood); }
.dc-kpi__bron { font-style: normal; font-size: .58rem; color: var(--c-ink-3); margin-top: 6px; }

/* ---- OKR ---- */
.dc-okr { overflow: hidden; }
.dc-okr__kop {
  display: flex; align-items: center; gap: 15px; padding: 15px 20px; width: 100%;
  border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.dc-ring {
  width: 46px; height: 46px; border-radius: 99px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.dc-ring.is-groen { --ring: var(--c-groen); color: var(--c-groen-d); }
.dc-ring.is-amber { --ring: var(--c-oker); color: var(--c-amber); }
.dc-ring.is-rood { --ring: var(--c-rood); color: var(--c-rood); }
.dc-ring i { width: 36px; height: 36px; border-radius: 99px; background: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .64rem; font-weight: 700; }
.dc-okr__wat { flex: 1; min-width: 0; }
.dc-okr__titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-okr__titel strong { font-size: .92rem; }
.dc-okr__wat > em { font-style: normal; font-size: .72rem; color: var(--c-ink-3); }
.dc-gesignaleerd { font: 700 .7rem var(--font-ui); color: var(--c-groen-d); white-space: nowrap; }
.dc-caret { font-size: .9rem; color: var(--c-ink-3); }
.dc-okr__krs { padding: 0 20px 16px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 11px; padding-top: 12px; }
.dc-kr { display: grid; grid-template-columns: 1.7fr 1fr .6fr auto; gap: 14px; align-items: center; }
.dc-kr__wat strong { display: block; font-size: .8rem; }
.dc-kr__wat em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.dc-cascade { display: block; font: 600 .64rem var(--font-ui); color: var(--c-groen-d); margin-top: 3px; }
.dc-kr__balkcel { display: flex; align-items: center; gap: 9px; }
.dc-kr__balkcel span { font-size: .7rem; font-weight: 700; }
.dc-kr__balk { flex: 1; height: 5px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.dc-kr__balk b { display: block; height: 100%; border-radius: 99px; }
.dc-kr__balk.is-groen b { background: var(--c-groen); }
.dc-kr__balk.is-amber b { background: var(--c-oker); }
.dc-kr__balk.is-rood b { background: var(--c-rood); }
.dc-kr__waarde { text-align: right; font-size: .78rem; }

/* ---- KPI-detail ---- */
.dc-detkop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dc-detkop h2 { margin: 4px 0 6px; font-size: 1.3rem; }
.dc-detwaarde { margin-left: auto; font-size: 2rem; letter-spacing: -.02em; }
.dc-detgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.dc-detzij { display: flex; flex-direction: column; gap: 14px; }
.dc-blokkaart { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.dc-blokkaart > strong { font-size: .86rem; }
.dc-trend { width: 100%; height: 150px; }
.dc-trend polyline.is-groen, .dc-trend circle.is-groen { stroke: var(--c-groen); }
.dc-trend circle.is-groen { fill: var(--c-groen); stroke: none; }
.dc-trend polyline.is-amber { stroke: var(--c-oker); }
.dc-trend circle.is-amber { fill: var(--c-oker); }
.dc-trend polyline.is-rood { stroke: var(--c-rood); }
.dc-trend circle.is-rood { fill: var(--c-rood); }
.dc-trendlabels { display: flex; justify-content: space-between; font-size: .6rem; color: var(--c-ink-3); }
.dc-doelnaam { font: 600 .8rem var(--font-ui); }
.dc-blokkaart em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .dc-detgrid { grid-template-columns: 1fr; }
  .dc-kr { grid-template-columns: 1fr; gap: 6px; }
  .dc-kr__waarde { text-align: left; }
}

/* Alerts + digest (E4a/b) */
.dc-alertbalk { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.dc-alertbalk__kop { display: flex; justify-content: space-between; align-items: center; }
.dc-alert { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dc-alert i { font-weight: 800; color: var(--c-amber); }
.dc-alert.is-ok i { color: var(--c-groen-d); }
.dc-alert span { flex: 1; }
.dc-alert button { margin-left: auto; }
.dc-digestbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.dc-digestbalk__sub { display: block; font-size: 12px; color: var(--c-ink-2); }
.dc-digest { background: color-mix(in srgb, var(--c-ink) 4%, var(--c-paneel)); border-radius: 10px; padding: 14px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; font-family: var(--font-ui); margin: 10px 0 0; }
.dc-digestconfig { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dc-digestchip { font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.dc-alertconfig { display: flex; flex-direction: column; gap: 6px; }
.dc-alertcrij { display: grid; grid-template-columns: 1.6fr .9fr .9fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); }
.dc-alertcrij--kop { font-size: 10.5px; text-transform: uppercase; color: var(--c-ink-2); border-bottom: 0; }
.dc-alertcrij select, .dc-alertcrij input[type=number] { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }
.dc-knop--klein { font-size: 12px; padding: 5px 12px; }

/* B20 · kerncijfers live */
.dc-kckaart { padding: 16px 18px; margin-bottom: 14px; }
.dc-kcgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.dc-kccel { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--c-creme); }
.dc-kccel strong { font-size: .88rem; }
.dc-kccel span { font-size: .62rem; color: var(--c-ink-2); }
@media (max-width: 1200px) { .dc-kcgrid { grid-template-columns: repeat(3, 1fr); } }
.dc-kcketen { margin-top: 14px; }

/* OKR-K (02-09) · de check-in onder de key results. Kleur alleen op het
   vertrouwen — daar zit de betekenis; de rest blijft inkt op paneel. */
.dc-checkin { border-top: var(--lijndikte) solid var(--c-lijn); padding: 14px 18px 4px; }
.dc-checkin__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dc-checkin__rij { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.dc-checkin__rij strong { display: block; font-weight: 600; font-size: .84rem; }
.dc-checkin__rij em { display: block; font-style: normal; font-size: .8rem; color: var(--c-ink-2); margin-top: 2px; }
.dc-checkin__meta { display: block; font-size: .68rem; color: var(--c-ink-3); margin-top: 4px; }
.dc-checkin__leeg { font-size: .82rem; color: var(--c-ink-2); padding: 4px 0 12px; }
.dc-kr__bron { font-size: .66rem; color: var(--c-ink-3); white-space: nowrap; }

/* ── analyse.css ── */
/* =====================================================================
   analyse.css — module 5.7 · Analyse-suite (BI, AI, conversie,
   rapportages, CO₂). Uitsluitend tokens; AI/BI-paars uit het
   prototype gemapt op terra. Module-wortel-marge volgens de norm.
===================================================================== */

.an { max-width: 1280px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.an-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.an-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.an-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.an-hint { font-size: .72rem; color: var(--c-ink-3); }
.an-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.an-rek { flex: 1; }
.is-groen { color: var(--c-groen-d); }
.is-rood { color: var(--c-rood); }
.is-goud { color: var(--c-terra-d); }

.an-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.an-knop:hover { border-color: var(--c-ink-3); }
.an-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.an-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }
.an-knop.is-klaar { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); cursor: default; }
.an-knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.an-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 .74rem var(--font-ui); color: var(--c-terra-d); }

.an-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.an-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.an-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.an-flt {
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 0; background: none; font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.an-flt.is-actief { background: #fff; color: var(--c-ink); font-weight: 700; }
.an-perwissel { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 11px; }
.an-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.an-chip {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .7rem var(--font-ui); color: var(--c-ink-2);
}
.an-chip.is-actief { background: var(--c-terra); border-color: var(--c-terra); color: #fff; font-weight: 700; }
.an-chip.is-lock { opacity: .55; }
.an-zoek {
  padding: 9px 13px; border-radius: 10px; min-width: 220px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  font: 500 .78rem var(--font-ui); color: var(--c-ink);
}

/* ---- BI ---- */
.an-personas { display: flex; gap: 10px; flex-wrap: wrap; }
.an-persona {
  flex: 1; min-width: 220px; text-align: left; cursor: pointer;
  padding: 13px 16px; border-radius: 13px; border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  display: flex; flex-direction: column; gap: 3px;
}
.an-persona.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.an-persona strong { font-size: .84rem; }
.an-persona em { font-style: normal; font-size: .62rem; color: var(--c-terra-d); }
.an-persona span { font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; }

.an-bigrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.an-bizij { display: flex; flex-direction: column; gap: 14px; }
.an-biblok { padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
.an-legendanote { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.an-metricgroep { display: flex; flex-direction: column; gap: 7px; }
.an-bicanvas { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.an-governance {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px;
  border-radius: 13px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra);
}
.an-governance i { font-style: normal; font-weight: 700; color: var(--c-terra-d); }
.an-governance strong { display: block; font-size: .78rem; color: var(--c-terra-d); margin-bottom: 2px; }
.an-governance span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }
.an-governance em { display: block; font-style: normal; font-size: .62rem; color: var(--c-ink-3); margin-top: 4px; }
.an-chart { padding: 20px 22px; min-height: 320px; display: flex; flex-direction: column; gap: 12px; }
.an-chart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-chart__kop strong { font-size: 1rem; }
.an-chart__totaal { font-size: .72rem; color: var(--c-ink-3); }
.an-lock {
  padding: 40px 30px; text-align: center; border: 1px dashed var(--c-rood);
  border-radius: 13px; background: var(--c-rood-t);
}
.an-lock strong { display: block; font-size: .9rem; color: var(--c-rood); margin-bottom: 6px; }
.an-lock p { margin: 0 auto; font-size: .78rem; color: var(--c-ink-2); max-width: 420px; line-height: 1.5; }
.an-rowlevel {
  padding: 9px 13px; border-radius: 9px; font: 600 .72rem var(--font-ui); color: var(--c-groen-d);
  background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen);
}
.an-birijen { display: flex; flex-direction: column; gap: 9px; }
.an-birij {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink); text-align: left;
}
.an-birij.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.an-birij > span { min-width: 130px; }
.an-bibalk { flex: 1; height: 12px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.an-bibalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-terra); }
.an-birij strong { min-width: 80px; text-align: right; }
.an-drill { padding: 14px 16px; border-radius: 12px; background: var(--c-creme); }
.an-drill__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .78rem; }
.an-drillrij {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 8px; background: #fff; margin-bottom: 6px;
  font: 600 .76rem var(--font-ui);
}
.an-cattitel { font-size: .95rem; display: block; }
.an-catgroep { display: flex; flex-direction: column; gap: 10px; }
.an-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 11px; }
.an-catkaart { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.an-catkaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.an-catkaart strong { font-size: .82rem; }
.an-catkaart p { margin: 0; font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; }
.an-catkaart em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.an-levgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.an-levgrid > div { display: flex; flex-direction: column; gap: 10px; }
.an-schedule { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.an-schedule__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.an-schedule strong { font-size: .8rem; }
.an-schedule span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); }
.an-schedule em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.an-schedule .mono { font-size: .62rem; }

/* ---- AI ---- */
.an-aibanner {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-radius: 10px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra);
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.an-aibanner i { font-style: normal; color: var(--c-terra-d); }
.an-aigrid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.an-aileads { display: flex; flex-direction: column; gap: 8px; }
.an-ailead {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; text-align: left;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: #fff;
}
.an-ailead.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.an-aiscore {
  width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font: 800 .8rem var(--font-mono);
}
.an-aiscore.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.an-aiscore.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.an-aiscore.is-stil { background: var(--c-paneel); color: var(--c-ink-2); }
.an-ailead span { min-width: 0; }
.an-ailead strong { display: block; font-size: .8rem; }
.an-ailead em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.an-aidetail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-aikop { padding: 18px 20px; display: flex; align-items: center; gap: 20px; }
.an-aikop__score strong { font-size: 2.2rem; letter-spacing: -.02em; display: block; text-align: center; }
.an-aikop__wie { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.an-aikop__wie strong { font-size: .95rem; }
.an-aikop__wie em { font-style: normal; font-size: .74rem; color: var(--c-ink-3); }
.an-waarom { align-self: flex-start; }
.an-drivers { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--c-creme); }
.an-driver__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; font: 600 .74rem var(--font-ui); color: var(--c-ink-2); }
.an-driver__balk { height: 5px; border-radius: 99px; background: #fff; overflow: hidden; font-style: normal; display: block; }
.an-driver__balk b { display: block; height: 100%; border-radius: 99px; }
.an-driver__balk b.is-groen { background: var(--c-groen); }
.an-driver__balk b.is-rood { background: var(--c-rood); }
.an-nbagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-nba { padding: 16px 17px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; border-color: var(--c-terra); }
.an-nba--groen { border-color: var(--c-groen); }
.an-nba strong { font-size: .88rem; }
.an-nba p { margin: 0; font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }
.an-forecast { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.an-forecast__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-forecast__kop strong { font-size: .88rem; }
.an-fcbalken { display: flex; align-items: flex-end; gap: 18px; padding: 0 6px; }
.an-fcbalk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.an-fcbalk__staaf { width: 100%; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; }
.an-fcbalk__staaf i { display: block; background: var(--c-terra-t); border-radius: 6px 6px 0 0; }
.an-fcbalk__staaf b { display: block; background: var(--c-terra); border-radius: 0 0 4px 4px; }
.an-fcbalk strong { font-size: .72rem; }
.an-fcbalk em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.an-fclegenda { display: flex; align-items: center; gap: 14px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font: 600 .66rem var(--font-ui); color: var(--c-ink-2); flex-wrap: wrap; }
.an-fclegenda b { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.an-fclegenda .is-vol { background: var(--c-terra); }
.an-fclegenda .is-band { background: var(--c-terra-t); }
.an-fclegenda em { font-style: normal; color: var(--c-ink-3); }

/* ---- advconv ---- */
.an-convrij {
  display: grid; grid-template-columns: 1.5fr .7fr .7fr 1.1fr .9fr .7fr;
  gap: 12px; align-items: center; padding: 12px 18px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.an-convrij:last-child { border-bottom: 0; }
.an-uitvrij--kort { grid-template-columns: 1.4fr .6fr 2fr !important; }
.an-convrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); }
.an-convwie { display: flex; align-items: center; gap: 10px; }
.an-convwie i {
  width: 32px; height: 32px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-terra-t); color: var(--c-terra-d);
  display: flex; align-items: center; justify-content: center; font: 700 .7rem var(--font-ui);
}
.an-convwie strong { display: block; font-size: .8rem; }
.an-convwie em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.an-convbalk strong { display: block; margin-bottom: 4px; }
.an-convbalk i { display: block; height: 6px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.an-convbalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); }

/* ---- rapportages ---- */
.an-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.an-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.an-tegel span { font-size: .7rem; color: var(--c-ink-3); }
.an-tegel strong { font-size: 1.25rem; }
.an-tegel.is-groen { border-color: var(--c-groen); background: var(--c-groen-t); }
.an-tegel.is-groen strong, .an-tegel.is-groen span { color: var(--c-groen-d); }
.an-tegel.is-amber { border-color: var(--c-oker); background: var(--c-amber-t); }
.an-tegel.is-amber strong, .an-tegel.is-amber span { color: var(--c-amber); }
.an-repgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.an-repblok { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; }
.an-repblok > strong { font-size: .9rem; }
.an-blokkop { padding: 14px 18px; font: 700 .9rem var(--font-ui); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.an-staafjes { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding-top: 8px; }
.an-staafjes--klein { height: 92px; }
.an-staafje { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.an-staafje i { display: block; width: 100%; max-width: 42px; border-radius: 7px 7px 3px 3px; background: var(--c-groen); font-style: normal; }
.an-staafje em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); }
.an-staafje--duo span { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.an-staafje--duo i { width: 14px; }
.an-staafje--duo i.is-cap { background: var(--c-sage-t); }
.an-bronrij { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px 90px; gap: 8px; align-items: center; font: 500 .76rem var(--font-ui); }
.an-bronrij > span { color: var(--c-ink-2); }
.an-bronrij strong { text-align: right; }
.an-dot { width: 9px; height: 9px; border-radius: 3px; }
.an-dot.is-groen { background: var(--c-groen); } .an-dot.is-sage { background: var(--c-sage); }
.an-dot.is-terra { background: var(--c-terra); } .an-dot.is-oker { background: var(--c-oker); }
.an-bronbalk { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; display: block; }
.an-bronbalk b { display: block; height: 100%; border-radius: 99px; }
.an-bronbalk b.is-groen { background: var(--c-groen); } .an-bronbalk b.is-sage { background: var(--c-sage); }
.an-bronbalk b.is-terra { background: var(--c-terra); } .an-bronbalk b.is-oker { background: var(--c-oker); }
.an-funnelrij { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font: 500 .76rem var(--font-ui); }
.an-funnelbalk { height: 22px; border-radius: 6px; background: var(--c-creme); overflow: hidden; font-style: normal; display: block; }
.an-funnelbalk b {
  display: flex; align-items: center; padding-left: 8px; height: 100%;
  border-radius: 6px; background: var(--c-groen); color: #fff; font: 700 .68rem var(--font-mono);
}
.an-funnelrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.an-dlrij { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.an-dlrij i {
  width: 36px; height: 36px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-groen-t); color: var(--c-groen-d);
  display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 700;
}
.an-dlrij > div { flex: 1; min-width: 0; }
.an-dlrij strong { display: block; font-size: .8rem; }
.an-dlrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.an-uitvrij {
  display: grid; grid-template-columns: 1.6fr .7fr .8fr 1fr .7fr .9fr;
  gap: 10px; align-items: center; padding: 12px 18px; font-size: .78rem;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.an-uitvrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; }

/* ---- co2 ---- */
.an-co2heros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.an-co2hero { padding: 18px 22px; border-color: var(--c-groen); display: flex; flex-direction: column; gap: 5px; }
.an-co2hero strong { font-size: 1.6rem; color: var(--c-groen-d); }
.an-co2hero em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.an-co2rij { display: flex; flex-direction: column; gap: 4px; }
.an-co2rij__kop { display: flex; align-items: center; justify-content: space-between; font: 600 .78rem var(--font-ui); }
.an-co2rij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.an-detzij { display: flex; flex-direction: column; gap: 14px; }
.an-methodiek {
  display: flex; align-items: center; gap: 9px; padding: 12px 16px;
  border-radius: 11px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen);
  font: 500 .76rem var(--font-ui); color: var(--c-ink-2);
}
.an-methodiek i { font-style: normal; color: var(--c-groen-d); font-weight: 700; }
.an-partnerblok { max-width: 720px; }
.an-klantvenster { max-width: 460px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.an-klantkaart {
  border-radius: 16px; padding: 18px 20px;
  background: linear-gradient(135deg, var(--c-groen-t), var(--c-sage-t));
  border: var(--lijndikte) solid var(--c-groen);
  display: flex; flex-direction: column; gap: 6px;
}
.an-klantkaart > span { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.an-klantkaart strong { font: 800 1.5rem var(--font-ui); color: var(--c-groen-d); }
.an-klantkaart strong em { font-style: normal; font-size: .84rem; }
.an-klantkaart p { margin: 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.55; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .an-bigrid, .an-aigrid, .an-repgrid, .an-levgrid, .an-nbagrid { grid-template-columns: 1fr; }
  .an-co2heros { grid-template-columns: 1fr; }
  .an-convrij, .an-uitvrij { grid-template-columns: 1fr; gap: 4px; }
  .an-convrij--kop, .an-uitvrij--kop { display: none; }
}

/* Scenario-vergelijk (E4c) */
.an-scenario { display: flex; flex-direction: column; gap: 4px; }
.an-scrij { display: grid; grid-template-columns: 70px 1.3fr 1.3fr 1.3fr 1fr; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; }
.an-scrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-bottom: 0; }
.an-scbar { position: relative; display: flex; align-items: center; gap: 6px; height: 16px; }
.an-scbar b { display: block; height: 9px; border-radius: 99px; }
.an-scbar em { font-size: 10.5px; color: var(--c-ink-2); white-space: nowrap; }
.an-scbar b.is-budget, .an-sclegenda b.is-budget { background: var(--c-ink-3); }
.an-scbar b.is-forecast, .an-sclegenda b.is-forecast { background: var(--c-amber); }
.an-scbar b.is-real, .an-sclegenda b.is-real { background: var(--c-groen-d); }
.an-scleeg { color: var(--c-ink-3); font-size: 11px; }
.an-sclegenda { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--c-ink-2); }
.an-sclegenda b { display: inline-block; width: 20px; height: 8px; border-radius: 99px; margin-right: 5px; vertical-align: middle; }

/* Reviewronde Tim 23-07 · punt 12a: kruistabel + filterlat in de BI-bouwer */
.an-chart__acties { margin-left: auto; }
.an-kruiswrap { overflow-x: auto; }
.an-kruis { width: 100%; border-collapse: collapse; font-size: .76rem; }
.an-kruis th, .an-kruis td { padding: 7px 10px; border-bottom: 1px solid var(--c-lijn); text-align: right; white-space: nowrap; }
.an-kruis thead th { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.an-kruis tbody th, .an-kruis thead th:first-child { text-align: left; font-weight: 700; }
.an-kruis td { background: linear-gradient(to left, var(--c-groen-t) var(--vul, 0%), transparent var(--vul, 0%)); }
.an-kruis__tot { font-weight: 800; border-left: 1px solid var(--c-lijn); background: none !important; }

/* ── organisaties.css ── */
/* =====================================================================
   organisaties.css — module 6.1 · Organisaties & tenant.
   Uitsluitend tokens; Thermo-slate-blauw uit het prototype gemapt op
   ink (blauw verboden). Module-wortel-marge volgens de vaste norm.
===================================================================== */

.org { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.org-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.org-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.org-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; }
.org-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.org-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.org-rek { flex: 1; }
.org-totaal { font-size: .8rem; color: var(--c-ink-2); }
.org-bloktitel { font-size: .92rem; display: block; margin-bottom: 4px; }

.org-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.org-knop:hover { border-color: var(--c-ink-3); }
.org-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.org-knop--licht { background: color-mix(in srgb, #fff 12%, transparent); border-color: color-mix(in srgb, #fff 25%, transparent); color: #fff; }

.org-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.org-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.org-tab.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; }
.org-flt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.org-flt.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }

.org-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.is-groen.org-dot, .org-dot.is-groen { background: var(--c-groen); }
.org-dot.is-terra { background: var(--c-terra); }
.org-dot.is-ink { background: var(--c-ink); }

/* ---- rechtspersonen ---- */
.org-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.org-kaart { overflow: hidden; }
.org-kaart__balk { display: block; height: 4px; }
.org-kaart__balk.is-groen { background: var(--c-groen); }
.org-kaart__balk.is-terra { background: var(--c-terra); }
.org-kaart__balk.is-ink { background: var(--c-ink); }
.org-kaart__body { padding: 17px 20px; display: flex; flex-direction: column; gap: 13px; }
.org-kaart__kop { display: flex; align-items: center; gap: 13px; }
.org-logo {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font: 800 1.1rem var(--font-ui); color: #fff;
}
.org-logo.is-groen { background: var(--c-groen); }
.org-logo.is-terra { background: var(--c-terra); }
.org-logo.is-ink { background: var(--c-ink); }
.org-kaart__naam { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-kaart__naam strong { font-size: 1rem; }
.org-kaart__kop em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.org-velden { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .74rem; }
.org-velden span { color: var(--c-ink-3); }
.org-velden b { font-weight: 600; color: var(--c-ink); }
.org-velden .mono { font-size: .7rem; }
.org-reeksen { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.org-reeksen > div:not(.org-adminrij) { display: flex; flex-wrap: wrap; gap: 6px; }
.org-reeksen i {
  font-style: normal; font-size: .62rem; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; background: var(--c-creme); color: var(--c-ink-2);
}
.org-adminrij { display: flex; gap: 8px; font-size: .72rem; }
.org-adminrij span { color: var(--c-ink-3); }
.org-adminrij b { font-weight: 600; }

/* ---- tenant & huur ---- */
.org-huurgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.org-huurgrid > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.org-modrij { display: flex; align-items: center; gap: 12px; padding: 12px 15px; }
.org-modrij > div { flex: 1; min-width: 0; }
.org-modrij strong { font-size: .8rem; display: block; }
.org-modrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.org-toggle {
  width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--c-lijn-2); position: relative; transition: background 160ms;
}
.org-toggle i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 160ms; font-style: normal;
}
.org-toggle.is-aan { background: var(--c-groen); }
.org-toggle.is-aan i { left: 21px; }
.org-toggle.is-vast { opacity: .45; cursor: not-allowed; }
.org-huurzij { display: flex; flex-direction: column; gap: 14px; }
.org-huurhero {
  border-radius: 16px; background: var(--c-ink); color: var(--c-creme);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.org-huurhero .kicker { color: var(--c-lijn); }
.org-huurhero strong { font-size: 2rem; line-height: 1; }
.org-huurhero em { font-style: normal; font-size: .74rem; opacity: .8; line-height: 1.5; }
.org-huurformule { font-size: .62rem; opacity: .6; }
.org-notitie { padding: 15px 18px; display: flex; flex-direction: column; gap: 5px; }
.org-notitie strong { font-size: .8rem; }
.org-notitie span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.55; }

/* ---- commissie ---- */
.org-commrij { padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; }
.org-commrij__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org-commrij__kop b { color: var(--c-groen-d); }
.org-commrij__kop > strong { font-size: .95rem; }
.org-ent { font: 700 .76rem var(--font-ui); padding: 3px 10px; border-radius: 6px; color: #fff; }
.org-ent.is-groen { background: var(--c-groen); }
.org-ent.is-terra { background: var(--c-terra); }
.org-ent.is-ink { background: var(--c-ink); }
.org-commrij__voet { font-size: .66rem; color: var(--c-ink-3); }

/* ---- gedeeld vs gescheiden ---- */
.org-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.org-lijstblok { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.org-lijstblok.is-groen { border-color: var(--c-groen); }
.org-lijstblok.is-ink { border-color: var(--c-ink-3); }
.org-lijstblok__kop { display: flex; align-items: center; gap: 9px; }
.org-lijstblok__kop strong { font-size: .92rem; }
.org-lijstblok > em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); margin-bottom: 4px; }
.org-lijstrij { display: flex; gap: 9px; align-items: flex-start; font: 500 .78rem/1.5 var(--font-ui); color: var(--c-ink); }
.org-lijstrij i { font-style: normal; font-weight: 800; flex: none; }
.org-lijstrij i.is-groen { color: var(--c-groen-d); }
.org-lijstrij i.is-ink { color: var(--c-ink-2); }

/* ---- klantreis ---- */
.org-krblok { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.org-krblok.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); }
.org-krblok.is-ink { background: var(--c-paneel); border-color: var(--c-ink-3); }
.org-krstappen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-krstap {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 11px; padding: 9px 13px;
}
.org-krstap i {
  width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.org-krstap i.is-groen { background: var(--c-groen); }
.org-krstap i.is-ink { background: var(--c-ink); }
.org-krstap strong { font-size: .76rem; }
.org-krpijl { color: var(--c-ink-3); font-weight: 700; }
.org-krblok > em { font-style: normal; font-size: .72rem; color: var(--c-ink-2); line-height: 1.55; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .org-huurgrid, .org-tweekolom { grid-template-columns: 1fr; }
}

/* F2-lat (16-07-2026) */
.org-knop--klein { font-size: 11px; padding: 5px 10px; align-self: flex-start; margin-top: 8px; }

/* F2c · white-label preview (klantweergave) */
.org-prev { border: 1px solid var(--c-lijn); border-radius: 12px; overflow: hidden; margin: 10px 0; background: var(--c-paneel); }
.org-prev__browser { font-size: 10.5px; color: var(--c-ink-2); background: var(--c-creme); padding: 7px 12px; border-bottom: 1px solid var(--c-lijn); }
.org-prev__kop { display: flex; gap: 12px; align-items: center; padding: 14px 16px 8px; }
.org-prev__kop strong { font-size: 15px; display: block; }
.org-prev__kop em { font-size: 11.5px; color: var(--c-ink-2); font-style: normal; }
.org-prev__stappen { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; }
.org-prevstap { display: flex; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.org-prevstap.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, transparent); font-weight: 700; }
.org-prevstap i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; border: 1px solid var(--c-lijn); }
.org-prevstap i.is-groen { color: var(--c-groen-d); border-color: var(--c-groen-d); }
.org-prevstap i.is-ink { color: var(--c-ink); border-color: var(--c-ink); }
.org-prevstap i.is-terra { color: var(--c-terra); border-color: var(--c-terra); }
.org-prevstap em.chip { margin-left: auto; }
.org-prev__voet { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--c-ink-2); padding: 10px 16px 14px; border-top: 1px solid var(--c-lijn); margin-top: 6px; }

/* Documenten & opmaak (19-07-2026): links de organisatie, rechts wat vast
   staat en wat vrij is. Het onderscheid is de kern van deze aanpak. */
.org-docgrid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .org-docgrid { grid-template-columns: 1fr; } }
.org-orglijst { padding: 14px; display: grid; gap: 6px; }
.org-orgkies { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme);
  cursor: pointer; transition: border-color var(--overgang); }
.org-orgkies:hover { border-color: var(--c-lijn-2); }
.org-orgkies.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.org-orgkies__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.org-orgkies strong { display: block; font-size: .82rem; }
.org-orgkies span { font-size: .66rem; color: var(--c-ink-3); }
.org-dockaart { padding: 18px 20px; }
.org-dockop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.org-dockop strong { display: block; font-size: 1rem; }
.org-docsub { font-size: .76rem; line-height: 1.6; color: var(--c-ink-3); margin: 8px 0 14px; max-width: 74ch; }
.org-dockern { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 22px; margin-bottom: 12px; }
.org-docrij { display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.org-docrij span { color: var(--c-ink-3); min-width: 140px; }
.org-docrij strong { flex: 1; font-weight: 600; }
.org-docrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.org-docsectie { margin-top: 20px; padding-top: 16px; border-top: var(--lijndikte) solid var(--c-lijn-2); }
.org-docsectie .kicker { display: block; margin-bottom: 8px; }
.org-docsectie .kicker + .kicker, .org-docvinken + .btn { margin-top: 12px; }
.org-docvinken { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.org-docvink { display: flex; align-items: center; gap: 8px; font-size: .78rem; cursor: pointer; }
.org-kleurdot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.org-logovb { display: block; max-width: 180px; }
.org-linkknop { background: transparent; border: 0; padding: 0; cursor: pointer;
  font: 600 .66rem var(--font-ui); color: var(--c-groen-d); text-decoration: underline; }
.org-linkknop:hover { color: var(--c-ink); }
.org-docrij--brief { align-items: flex-start; }
.org-docrij--brief strong { font-weight: 400; font-size: .74rem; line-height: 1.5; color: var(--c-ink-2); }

/* ---- Huisstijl & merk (SaaS fase 2) ---- */
.org-hsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.org-hskaart { padding: 18px; }
.org-hsvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; }
.org-hsvelden--onder { margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); }
.org-hsveld label { display: block; font: 700 .68rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 5px; }
.org-hsveld__rij { display: flex; gap: 7px; align-items: center; }
.org-hsveld__rij input[type="color"] { width: 40px; height: 34px; padding: 2px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; cursor: pointer; }
.org-hsveld__rij input[type="text"] { flex: 1; min-width: 0; font-size: .74rem; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-hsveld input[type="number"], .org-hsveld input[type="text"]:not(.mono) { width: 100%; font: 500 .78rem var(--font-ui); padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-hsveld em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); margin-top: 4px; }
.org-hsveld--breed { grid-column: 1 / -1; }
.org-hsfout { margin-top: 12px; padding: 10px 13px; border-radius: var(--radius); background: var(--c-rood-t); color: var(--c-rood); font: 600 .74rem var(--font-ui); }
.org-hsok { margin-top: 12px; padding: 10px 13px; border-radius: var(--radius); background: var(--c-groen-t); color: var(--c-groen-d); font: 600 .74rem var(--font-ui); }
.org-hsacties { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.org-hsnoot { font-size: .66rem; color: var(--c-ink-3); line-height: 1.5; margin-top: 8px; display: block; }
.org-hsvoorbeeld { padding: 16px; display: grid; gap: 10px; }
.org-hsvb-kaart { padding: 14px 16px; display: grid; gap: 6px; font-size: .8rem; }
.org-hsvb-rij { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.org-hsvb-zone { padding: 11px 14px; font-size: .72rem; }
.org-hslogo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.org-hslogo:last-of-type { border-bottom: 0; }
.org-hslogo > div { flex: 1; }
.org-hslogo strong { display: block; font-size: .76rem; }
.org-hslogo span { font-size: .64rem; color: var(--c-ink-3); }
.org-hslogo__beeld { max-height: 34px; max-width: 120px; object-fit: contain; }
.org-hslogo__leeg { font: 600 .66rem var(--font-ui); color: var(--c-ink-3); }
@media (max-width: 1100px) { .org-hsgrid { grid-template-columns: 1fr; } }

/* ---- Go-live & koppelingen (SaaS fase 3-5) ---- */
.org-glbalk { height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; margin: 10px 0 12px; }
.org-glbalk i { display: block; height: 100%; background: var(--c-groen); border-radius: 99px; }
.org-glitem { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.org-glitem:last-of-type { border-bottom: 0; }
.org-glitem > span { font-weight: 800; color: var(--c-rood); width: 16px; }
.org-glitem.is-ok > span { color: var(--c-groen-d); }
.org-glitem strong { display: block; font-size: .74rem; }
.org-glitem em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.org-glnoot { font-size: .68rem; color: var(--c-ink-2); line-height: 1.55; margin: 8px 0; }
.org-glrij { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.org-glrij input { flex: 1; font: 500 .74rem var(--font-ui); padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-glok { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--c-groen-t); color: var(--c-groen-d); font-size: .72rem; line-height: 1.5; }
.org-gllink { width: 100%; margin-top: 6px; font-size: .68rem; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-glstatus { display: flex; gap: 8px; align-items: center; font-size: .7rem; margin: 8px 0; flex-wrap: wrap; }
.org-glstatus em { font-style: normal; color: var(--c-ink-3); font-size: .62rem; }
.org-glfoutje { font-size: .62rem; color: var(--c-rood); background: var(--c-rood-t); border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; word-break: break-all; }
.org-glpostbus { display: grid; grid-template-columns: 1.4fr .8fr auto; gap: 7px; align-items: center; padding: 5px 0; }
.org-glpostbus--hook { grid-template-columns: 1.3fr 1fr auto auto; }
.org-glpostbus input, .org-glpostbus select { font: 500 .72rem var(--font-ui); padding: 8px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); min-width: 0; }
.org-glvink { display: flex; gap: 5px; align-items: center; font-size: .66rem; color: var(--c-ink-2); white-space: nowrap; }
.org-glsegment { display: flex; gap: 0; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; overflow: hidden; width: fit-content; }
.org-glseg { border: 0; background: #fff; font: 700 .68rem var(--font-ui); color: var(--c-ink-3); padding: 7px 14px; cursor: pointer; }
.org-glseg.is-actief { background: var(--c-groen); color: #fff; }
.org-glsleutel { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .72rem; }
.org-glsleutel:last-of-type { border-bottom: 0; }
.org-glsleutel.is-weg { opacity: .55; }
.org-glsleutel > div { flex: 1; }
.org-glsleutel strong { display: block; font-size: .72rem; }
.org-glsleutel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.org-hsgrid > div > .org-hskaart { margin-bottom: 14px; }

/* ── platformconfig.css ── */
/* =====================================================================
   platformconfig.css — module 6.2 · Beheer & configuratie.
   Uitsluitend tokens; het config-paars uit het prototype gemapt op
   terra (buiten token-set). Module-wortel-marge volgens de norm.
===================================================================== */

.cfg { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.cfg-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.cfg-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.cfg-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.cfg-hint { font-size: .72rem; color: var(--c-ink-3); display: block; }
.cfg-intro { margin: 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.55; }
.cfg-titel { font-size: .95rem; display: block; }
.cfg-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cfg-rek { flex: 1; }
.cfg-smal { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.cfg-centreer { text-align: center; }

.cfg-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.cfg-knop:hover { border-color: var(--c-ink-3); }
.cfg-knop--terra { background: var(--c-terra); border-color: var(--c-terra); color: #fff; }
.cfg-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.cfg-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; }
.cfg-knop--breed { width: 100%; margin-top: 4px; }
.cfg-knop.is-staged { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); }
.cfg-knop.is-dicht { opacity: .5; cursor: not-allowed; }
.cfg-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); }

.cfg-zoek {
  padding: 9px 13px; border-radius: 10px; min-width: 220px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  font: 500 .78rem var(--font-ui); color: var(--c-ink);
}

/* ---- rollen ---- */
.cfg-rollen { display: flex; gap: 9px; flex-wrap: wrap; }
.cfg-rol {
  flex: 1; min-width: 150px; text-align: left; cursor: pointer;
  padding: 11px 14px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.cfg-rol.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.cfg-rol strong { font-size: .8rem; }
.cfg-rol.is-actief strong { color: var(--c-terra-d); }
.cfg-rol em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }

/* ---- tabs & chips ---- */
.cfg-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.cfg-tab.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; }
.cfg-chips { display: flex; gap: 7px; flex-wrap: wrap; }
/* FT-6.4a · live regelsets uit de backend */
.cfg-rsblok { border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--c-creme); padding: 13px 15px; margin: 12px 0; }
.cfg-rskop { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.cfg-rsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px; }
.cfg-rsrij { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; background: #fff; }
.cfg-rsrij strong { font-size: .74rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-rsrij span { font-size: .64rem; color: var(--c-ink-3); white-space: nowrap; }
.cfg-chip {
  padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .7rem var(--font-ui); color: var(--c-ink-2);
}
.cfg-chip.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; }

/* ---- register ---- */
.cfg-entrij {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center; padding: 12px 15px;
}
.cfg-entrij.is-staged { border-color: var(--c-terra); background: var(--c-terra-t); }
.cfg-entrij strong { display: block; font-size: .8rem; }
.cfg-entrij > div > em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.cfg-entrij__sleutel .mono { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .74rem; font-weight: 600; color: var(--c-terra-d); }
.cfg-entrij__sleutel em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.cfg-gevoelig {
  font: 700 .56rem var(--font-ui); padding: 2px 7px; border-radius: 5px;
  color: var(--c-rood); background: var(--c-rood-t);
}
.cfg-ver { font-size: .66rem; color: var(--c-ink-3); font-weight: 700; }

/* ---- changeset ---- */
.cfg-changekaart { padding: 14px 16px; border-left: 4px solid var(--c-terra); display: flex; flex-direction: column; gap: 6px; }
.cfg-changekaart.is-gevoelig { border-left-color: var(--c-oker); }
.cfg-changekaart.is-blok { border-left-color: var(--c-rood); }
.cfg-changekaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cfg-changekaart__kop strong { font-size: .82rem; }
.cfg-changekaart__kop .mono { color: var(--c-terra-d); font-size: .76rem; }
.cfg-blokregel { font: 700 .7rem var(--font-ui); color: var(--c-rood); }
.cfg-gevoeligregel { font: 700 .7rem var(--font-ui); color: var(--c-amber); }
.cfg-impactchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-publiceer { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cfg-fiatblok {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 10px; background: var(--c-amber-t);
  border: var(--lijndikte) solid var(--c-oker);
}
.cfg-fiatblok strong { display: block; font-size: .78rem; color: var(--c-amber); }
.cfg-fiatblok span { font-size: .68rem; color: var(--c-ink-3); }
.cfg-impactnote {
  padding: 12px 14px; border-radius: 10px; font: 600 .76rem var(--font-ui);
  background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); color: var(--c-terra-d);
}
.cfg-oknote { padding: 12px 14px; border-radius: 10px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.cfg-oknote strong { display: block; font-size: .8rem; color: var(--c-groen-d); }
.cfg-oknote span { font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; }
.cfg-leeg {
  padding: 40px; text-align: center; border: 1px dashed var(--c-lijn-2);
  border-radius: 13px; display: flex; flex-direction: column; gap: 5px;
}
.cfg-leeg strong { font-size: .88rem; color: var(--c-ink-2); }
.cfg-leeg span { font-size: .74rem; color: var(--c-ink-3); }

/* ---- toggles ---- */
.cfg-togrij { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.cfg-togrij > div { flex: 1; min-width: 0; }
.cfg-togrij strong { display: block; font-size: .8rem; }
.cfg-togrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.cfg-toggle {
  width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--c-lijn-2); position: relative; transition: background 160ms;
}
.cfg-toggle i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 160ms; font-style: normal;
}
.cfg-toggle.is-aan { background: var(--c-groen); }
.cfg-toggle.is-aan i { left: 21px; }

/* ---- omgevingen & rollback ---- */
.cfg-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cfg-tweekolom > div { display: flex; flex-direction: column; gap: 10px; }
.cfg-envs { display: flex; align-items: center; gap: 12px; }
.cfg-envs b { font-size: 1.1rem; color: var(--c-ink-3); }
.cfg-env {
  flex: 1; text-align: center; padding: 16px; border-radius: 13px;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
}
.cfg-env.is-sandbox { border-color: var(--c-terra); background: var(--c-terra-t); }
.cfg-env.is-live { border-color: var(--c-groen); background: var(--c-groen-t); }
.cfg-env strong { display: block; font-size: .82rem; }
.cfg-env em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.cfg-histrij {
  display: grid; grid-template-columns: 40px 70px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 11px 14px;
}
.cfg-histrij.is-actief { border-color: var(--c-groen); }
.cfg-histrij > strong { font-size: .8rem; }
.cfg-histrij span { display: block; font: 600 .72rem var(--font-ui); color: var(--c-ink-2); }
.cfg-histrij em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); }
.cfg-histacties { display: flex !important; align-items: center; gap: 8px; }

/* ---- audit & lockout ---- */
.cfg-lockout {
  padding: 14px 16px; border-radius: 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood);
}
.cfg-lockout strong { font-size: .8rem; color: var(--c-rood); }
.cfg-lockout span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .cfg-tweekolom { grid-template-columns: 1fr; }
  .cfg-entrij { grid-template-columns: 1fr; gap: 6px; }
}

/* F2-lat (16-07-2026): wijziging oud → nieuw in de changeset */
.cfg-wijziging { font-size: 11.5px; padding: 6px 10px; border: 1px solid var(--c-lijn); border-radius: 9px; background: var(--c-creme); margin: 6px 0; }
.cfg-wijziging b { color: var(--c-terra); }

/* F2a · changeset als code-review (oud/nieuw) */
.cfg-review { padding: 14px 16px; margin-bottom: 12px; }
.cfg-review__kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cfg-reviewrij { display: grid; grid-template-columns: 1.4fr 1fr 1fr 28px; gap: 10px; align-items: center; padding: 9px 0 4px; border-top: 1px solid var(--c-lijn); }
.cfg-reviewrij--kop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-top: 0; padding-bottom: 0; }
.cfg-reviewrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; }
.cfg-oud { font-size: 12px; padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--c-terra) 12%, transparent); color: var(--c-ink); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 55%, transparent); }
.cfg-nieuw { font-size: 12px; padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--c-groen) 16%, transparent); font-weight: 700; }
.cfg-reviewimpact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 2px 0 8px; }

/* F2b · sandbox ↔ productie vergelijk */
.cfg-vergelijk { padding: 12px 14px; margin: 12px 0; }
.cfg-vglrij { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--c-lijn); font-size: 12px; }
.cfg-vglrij--kop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-top: 0; }

/* ---------- Rol- en togglebeheer ---------- */
/* flex-grow 0 + basis: een losse rol rekt niet over de volle breedte uit. */
.cfg-rolwrap { flex: 0 1 210px; min-width: 170px; display: flex; flex-direction: column; gap: 5px; }
.cfg-rolwrap .cfg-rol { width: 100%; }
.cfg-rolwrap.is-actief .cfg-rol { border-color: var(--c-terra); background: var(--c-terra-t); }
.cfg-rolwrap.is-actief .cfg-rol strong { color: var(--c-terra-d); }
.cfg-rolacties { display: flex; gap: 4px; }
.cfg-mini { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 4px 8px;
  font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.cfg-mini:hover { background: var(--c-creme); border-color: var(--c-terra); color: var(--c-terra-d); }
.cfg-rolnieuw { align-self: flex-start; background: transparent; border: 1px dashed var(--c-lijn-2); border-radius: 12px;
  padding: 11px 16px; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; transition: border-color 160ms ease, color 160ms ease; }
.cfg-rolnieuw:hover { border-color: var(--c-terra); color: var(--c-terra-d); }
.cfg-kopregel { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cfg-togacties { display: flex; align-items: center; gap: 6px; }
.cfg-knop--klein { padding: 6px 11px; font-size: .7rem; }
.cfg-toguitleg { display: block; font: 400 .66rem/1.5 var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 3px; max-width: 62ch; }

/* ---- leadbronnen-regelset (21-07): centrale keuzelijst relatie-instroom ---- */
.cfg-lbchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; }
.cfg-lbchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font: 600 .7rem var(--font-ui); color: var(--c-ink); }
.cfg-lbchip--stil { color: var(--c-ink-2); }
.cfg-lbchip button { border: none; background: transparent; cursor: pointer; color: var(--c-ink-3); font: inherit; padding: 0 2px; border-radius: 6px; }
.cfg-lbchip button:hover { color: var(--c-rood); }
.cfg-lbnieuw { display: inline-flex; align-items: center; gap: 6px; }
.cfg-lbnieuw input { padding: 6px 12px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); font: 500 .7rem var(--font-ui); color: var(--c-ink); background: #fff; width: 150px; }
.cfg-lbacties { display: flex; gap: 8px; justify-content: flex-end; }
.cfg-knop--primair { background: var(--gradient-primair, var(--c-groen-d)); color: #fff; border-color: var(--c-groen-d); }

/* UP1 · m²-capaciteit per ploeg (Planregels-blok) */
.cfg-capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; }
.cfg-caprij { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; }
.cfg-caprij strong { font-size: .8rem; display: block; }
.cfg-caprij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.cfg-caplabel { display: flex; align-items: center; gap: 7px; font-size: .66rem; color: var(--c-ink-2); }
.cfg-capinput { width: 96px; padding: 6px 8px; font-size: .76rem; font-family: var(--font-mono);
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
.cfg-caplabel--schakel { font-size: .7rem; font-weight: 600; }
/* UP3: het specialisme per ploeg staat naast de capaciteit — één plek voor
   alles wat het planbord nodig heeft */
.cfg-caprij { flex-wrap: wrap; }
.cfg-capdisc { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-capvink { display: flex; align-items: center; gap: 3px; font-size: .64rem; color: var(--c-ink-2); }
.cfg-capvink input { accent-color: var(--c-groen); }
.cfg-rsvoet { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }

/* NR1 · nummerreeksen (05-09-2026) — zelfde ritme als de capaciteitsrijen */
.cfg-nrgrid { display: grid; gap: 0; }
.cfg-nrkop, .cfg-nrrij { display: grid; grid-template-columns: 1.5fr 1.1fr 120px 130px 84px 100px; gap: 10px; align-items: center; }
.cfg-nrkop { font-size: .64rem; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 0 0 4px; border-bottom: 1px solid var(--c-lijn); }
.cfg-nrrij { padding: 7px 0; border-bottom: 1px solid var(--c-lijn); }
.cfg-nrrij strong { font-size: .8rem; display: block; }
.cfg-nrrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.cfg-nrvolgende { font-size: .78rem; }
.cfg-nrlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cfg-capinput--smal { width: 64px; }
.cfg-capinput--breed { width: 300px; max-width: 100%; }
.cfg-rsvoet--rij { flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) {
  .cfg-nrkop { display: none; }
  .cfg-nrrij { grid-template-columns: 1fr 1fr; }
  .cfg-nrlabel { position: static; width: auto; height: auto; clip: auto; font-size: .64rem; color: var(--c-ink-3); display: block; }
}

/* ── gebruikers.css ── */
/* =====================================================================
   gebruikers.css — module 6.3 · Gebruikers & toegang (RBAC 0.2).
   Uitsluitend tokens; module-wortel-marge volgens de vaste norm.
===================================================================== */

.pm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.pm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.pm-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.pm-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.pm-hint { font-size: .7rem; color: var(--c-ink-3); display: block; }
.pm-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pm-rek { flex: 1; }
.pm-tabelvoet { padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }

.pm-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.pm-knop:hover { border-color: var(--c-ink-3); }
.pm-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.pm-knop--groen { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.pm-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); }
.pm-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; }
.pm-flt {
  padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .72rem var(--font-ui); color: var(--c-ink-2);
}
.pm-flt.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.pm-zoek {
  flex: 1; min-width: 180px; padding: 9px 13px; border-radius: 10px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  font: 500 .78rem var(--font-ui); color: var(--c-ink);
}
.pm-selectveld select {
  padding: 9px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; font: 600 .74rem var(--font-ui); color: var(--c-ink); cursor: pointer;
}
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.pm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pm-dot.is-groen { background: var(--c-groen); } .pm-dot.is-terra { background: var(--c-terra); }
.pm-dot.is-sage { background: var(--c-sage); } .pm-dot.is-oker { background: var(--c-oker); }
.pm-dot.is-blush { background: var(--c-blush); } .pm-dot.is-ink { background: var(--c-ink); }
.pm-streng {
  font: 600 .56rem var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-terra-d); background: var(--c-terra-t); padding: 2px 7px; border-radius: 5px;
}
.pm-bg {
  font: 600 .58rem var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-rood); background: var(--c-rood-t); padding: 2px 6px; border-radius: 4px;
}

/* ---- layout: module-nav links ---- */
.pm-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.pm-nav { padding: 9px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.pm-nav .kicker { padding: 8px 11px 5px; }
.pm-navitem {
  text-align: left; padding: 9px 11px; border-radius: 9px; border: 0; background: none; cursor: pointer;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.pm-navitem:hover { background: var(--c-creme); }
.pm-navitem.is-actief { background: var(--c-ink); color: #fff; font-weight: 700; }
.pm-inhoud { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pm-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.pm-blokkop { padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-blokkop strong { font-size: .88rem; }
.pm-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.pm-blok > strong { font-size: .86rem; }

/* ---- gebruikers ---- */
.pm-urij {
  display: grid; grid-template-columns: 1.7fr 1.6fr .7fr .9fr .8fr .9fr 30px;
  gap: 12px; align-items: center; padding: 11px 18px; width: 100%;
  border: 0; border-top: var(--lijndikte) solid var(--c-lijn);
  background: none; text-align: left; cursor: pointer; font: 500 .76rem var(--font-ui); color: var(--c-ink);
}
.pm-urij:hover:not(.pm-urij--kop) { background: var(--c-creme); }
.pm-urij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); cursor: default; background: var(--c-creme); border-top: 0; }
.pm-uwie { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-uwie i {
  width: 32px; height: 32px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-paneel); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center; font: 700 .68rem var(--font-ui);
}
.pm-uwie strong { display: block; font-size: .8rem; }
.pm-uwie em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.pm-uprofs { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- profielen ---- */
.pm-profgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.pm-profkaart { padding: 15px 17px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.pm-profkaart:hover { border-color: var(--c-ink-3); }
.pm-profkaart__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-profkaart__kop strong { font-size: .88rem; }
.pm-profkaart p { margin: 0; font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; min-height: 34px; }
.pm-profkaart__voet { display: flex; align-items: center; gap: 14px; font-size: .68rem; color: var(--c-ink-3); }
.pm-profkaart__voet strong { font-size: .9rem; color: var(--c-ink); }
.pm-kloon {
  margin-left: auto; font-style: normal; font: 600 .68rem var(--font-ui); color: var(--c-ink-2);
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 6px 11px;
}
.pm-kloon:hover { border-color: var(--c-ink-3); }

/* ---- editor ---- */
.pm-picker { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.pm-editkop { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm-editkop__naam { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.pm-editkop__naam strong { font-size: 1.05rem; }
.pm-editkop > div > span:last-child { font-size: .76rem; color: var(--c-ink-2); }
.pm-editacties { display: flex; gap: 8px; align-items: center; }
.pm-dirty { font-style: normal; font: 600 .7rem var(--font-ui); color: var(--c-terra-d); }
.pm-sod {
  display: flex; gap: 11px; padding: 12px 16px; border-radius: 11px;
  background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker);
}
.pm-sod i { font-style: normal; color: var(--c-amber); font-weight: 700; }
.pm-sod strong { display: block; font-size: .78rem; color: var(--c-amber); }
.pm-sod span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }

.pm-mrij {
  display: grid; grid-template-columns: 200px repeat(6, 1fr);
  gap: 6px; align-items: center; padding: 5px 16px;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-mrij--kop { font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); text-align: center; border-top: 0; padding: 12px 16px 10px; }
.pm-mrij--kop span:first-child { text-align: left; }
.pm-mgroep {
  display: grid; grid-template-columns: 200px repeat(6, 1fr); gap: 6px; align-items: center;
  padding: 7px 16px; background: var(--c-creme); border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-mgroep__naam { display: flex; align-items: center; gap: 8px; font: 700 .72rem var(--font-ui); }
.pm-groepschakel {
  border: 0; background: none; cursor: pointer; color: var(--c-ink-3);
  font-size: .7rem; padding: 2px; border-radius: 6px;
}
.pm-groepschakel:hover { color: var(--c-ink); background: #fff; }
.pm-mlabel { font: 500 .76rem var(--font-ui); }
.pm-eigen { font-style: normal; font-size: .54rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-groen-d); background: var(--c-groen-t); padding: 2px 5px; border-radius: 4px; }
.pm-cel {
  height: 26px; border-radius: 7px; border: 0; cursor: pointer; font: 800 .74rem var(--font-mono);
  display: flex; align-items: center; justify-content: center; background: var(--c-creme);
}
.pm-cel.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.pm-cel.is-sage { background: var(--c-sage-t); color: var(--c-groen-d); }
.pm-cel.is-leeg { color: var(--c-lijn-2); }
.pm-cel.is-vast { cursor: default; }
.pm-legenda { display: flex; gap: 16px; padding: 10px 16px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); font: 500 .68rem var(--font-ui); color: var(--c-ink-2); flex-wrap: wrap; }
.pm-legenda .is-groen { color: var(--c-groen-d); } .pm-legenda .is-sage { color: var(--c-groen-d); } .pm-legenda .is-leeg { color: var(--c-lijn-2); }
.pm-legenda em { font-style: normal; color: var(--c-ink-3); }

.pm-scopewaarde { font: 600 .8rem var(--font-ui); }
.pm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-limietrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; }
.pm-limietrij input {
  width: 120px; padding: 7px 11px; text-align: right;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px;
  font: 600 .74rem var(--font-mono); color: var(--c-ink); background: #fff;
}
.pm-sensrij { display: flex; align-items: flex-start; gap: 12px; }
.pm-sensrij--rand { padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; }
.pm-sensrij > div { flex: 1; min-width: 0; }
.pm-sensrij strong { display: block; font-size: .78rem; }
.pm-sensrij span { font-size: .68rem; color: var(--c-ink-3); }
.pm-toggle {
  width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--c-lijn-2); position: relative; transition: background 160ms;
}
.pm-toggle i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 160ms; font-style: normal;
}
.pm-toggle.is-aan { background: var(--c-groen); }
.pm-toggle.is-aan i { left: 21px; }
.pm-maskpreview {
  padding: 12px 14px; border-radius: 11px; background: var(--c-paneel);
  display: flex; flex-direction: column; gap: 4px; font: 500 .74rem var(--font-ui); color: var(--c-ink-2);
}

/* ---- effectieve rechten ---- */
.pm-effgrid { display: grid; grid-template-columns: 190px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pm-effpick { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; }
.pm-effpick .kicker { padding: 8px 10px 6px; }
.pm-effuser {
  text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.pm-effuser.is-actief { background: var(--c-ink); color: #fff; }
.pm-effmidden { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pm-effkop { padding: 15px 18px; display: flex; gap: 11px; align-items: flex-start; }
.pm-effkop i {
  width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal;
  background: var(--c-paneel); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center; font: 700 .78rem var(--font-ui);
}
.pm-effkop strong { display: block; font-size: .92rem; }
.pm-effkop span { font-size: .7rem; color: var(--c-ink-3); display: block; margin-bottom: 6px; }
.pm-effzij { display: flex; flex-direction: column; gap: 12px; }
.pm-grensrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--c-ink-3); }
.pm-grensrij b { font-weight: 600; color: var(--c-ink); text-align: right; }
.pm-grensrij--top { margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }
/* FT-8.1c · 2FA-methode-keuze */
.pm-2fa { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.pm-2fa .pm-knop.is-actief { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); }
.pm-preset {
  border: 0; cursor: pointer; font: 500 .66rem var(--font-ui);
  color: var(--c-terra-d); background: var(--c-terra-t); padding: 4px 9px; border-radius: 12px;
}
.pm-testuit { display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; font: 500 .74rem/1.5 var(--font-ui); }
.pm-testuit.is-ok { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.pm-testuit.is-nee { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); }
.pm-testuit i { font-style: normal; font-weight: 800; }
.pm-testuit.is-ok i { color: var(--c-groen-d); }
.pm-testuit.is-nee i { color: var(--c-rood); }

/* ---- teams / verzoeken / audit ---- */
.pm-teamrij {
  display: grid; grid-template-columns: 1.2fr 1fr 2fr .6fr;
  gap: 12px; align-items: center; padding: 12px 18px; font-size: .78rem;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-teamrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); border-top: 0; }
.pm-teamrij .mono { font-size: .68rem; color: var(--c-ink-3); }
.pm-verzoek { padding: 14px 18px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 5px; }
.pm-verzoek__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-verzoek__kop em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.pm-verzoek strong { font-size: .82rem; }
.pm-verzoek strong em { font-style: normal; font-weight: 500; color: var(--c-ink-3); font-size: .74rem; }
.pm-verzoek__recht { font: 600 .76rem var(--font-ui); color: var(--c-terra-d); }
.pm-verzoek p { margin: 0 0 6px; font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }
.pm-afgehandeld { font: 600 .74rem var(--font-ui); color: var(--c-groen-d); }
.pm-tot { font-style: normal; font: 600 .7rem var(--font-ui); color: var(--c-amber); }
.pm-tijdbalk { display: block; height: 6px; border-radius: 4px; background: var(--c-creme); overflow: hidden; font-style: normal; margin-bottom: 6px; }
.pm-tijdbalk b { display: block; height: 100%; background: var(--c-oker); border-radius: 4px; }
.pm-auditrij {
  display: grid; grid-template-columns: 120px 1.1fr 1.5fr 1.6fr 90px;
  gap: 12px; align-items: center; padding: 12px 18px; font-size: .76rem;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.pm-auditrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); border-top: 0; }
.pm-auditrij .mono { font-size: .66rem; color: var(--c-ink-3); }
.pm-auditrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); display: block; }
.pm-sodrij { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); }
.pm-sodrij i {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-creme); color: var(--c-ink-2);
  display: flex; align-items: center; justify-content: center;
}
.pm-sodrij > div { flex: 1; min-width: 0; }
.pm-sodrij strong { display: block; font-size: .8rem; }
.pm-sodrij span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; }
.pm-bgblok { border-color: var(--c-rood); display: flex; flex-direction: column; }
.pm-bgblok .pm-knop { margin: 0 18px 16px; align-self: flex-start; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .pm-grid, .pm-effgrid, .pm-tweekolom { grid-template-columns: 1fr; }
  .pm-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .pm-mrij, .pm-mgroep { grid-template-columns: 130px repeat(6, 1fr); }
  .pm-urij, .pm-teamrij, .pm-auditrij { grid-template-columns: 1fr; gap: 4px; }
  .pm-urij--kop, .pm-teamrij--kop, .pm-auditrij--kop { display: none; }
}

/* F3-lat (16-07-2026): gebruiker bewerken — profielkeuze in de modal */
.pm-profkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 8px 0 12px; }
.pm-profvink { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }

/* F3 a/b/c (16-07-2026) */
.pm-inactblok { padding: 12px 16px; margin-bottom: 12px; border-color: var(--c-amber); }
.pm-inactrij { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 13px; }
.pm-inactrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }

.pm-attestrij { display: grid; grid-template-columns: 1.5fr 1.6fr .8fr .9fr 1.2fr; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--c-lijn); font-size: 13px; }
.pm-attestrij--kop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); background: var(--c-creme); border-top: 0; }
.pm-attestrij.is-beoordeeld { opacity: .75; }
.pm-attestrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }
.pm-attestacties { display: flex; gap: 6px; }
.pm-attestvoortgang { display: flex; gap: 10px; align-items: center; min-width: 160px; }
.pm-attestvoortgang .pm-tijdbalk { flex: 1; }
.pm-attestok { border: 1px solid var(--c-groen-d); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--c-groen-d); font-weight: 700; margin-bottom: 12px; }

.pm-simbanner { display: flex; gap: 10px; align-items: center; border: 1px solid var(--c-terra); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.pm-simbanner i { font-style: normal; color: var(--c-terra); font-size: 16px; }
.pm-simrij { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--c-lijn); font-size: 13px; }
.pm-simrij.is-weg { opacity: .45; }
.pm-simrij .pm-dot { margin-right: 6px; }
.pm-masked { color: var(--c-ink-2); letter-spacing: 2px; }
.pm-inactblok.is-rustig { border-color: var(--c-lijn); opacity: .85; }

/* B13 · sessies & apparaten */
.pm-sessies { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pm-sessierij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; background: var(--c-creme); }
.pm-sessierij > div { display: flex; flex-direction: column; gap: 2px; }
.pm-sessierij strong { font-size: .8rem; }
.pm-sessierij span { font-size: .66rem; color: var(--c-ink-2); }
.pm-sessierij em { font-style: normal; color: var(--c-ink-3); }

/* ── datamodel.css ── */
/* =====================================================================
   datamodel.css — module 6.4 · Gouden records (Woning-360, Persoon-360,
   import-monitor, ontdubbelen). Uitsluitend tokens; verrijking-blauw
   uit het prototype gemapt op sage. Module-wortel-marge volgens norm.
===================================================================== */

.dm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.dm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.dm-kop p { margin: 0; max-width: 76ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.dm-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.dm-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dm-rek { flex: 1; }
.dm-leeg { font-size: .74rem; color: var(--c-ink-3); }
.dm-note { font-style: normal; font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; }
.is-terra { color: var(--c-terra-d); }
.is-groen { color: var(--c-groen-d); }

.dm-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.dm-knop:hover { border-color: var(--c-ink-3); }
.dm-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.dm-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; }

.chip--sage { background: var(--c-sage-t); color: var(--c-groen-d); }

/* ---- layout: picker + detail ---- */
.dm-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.dm-picker {
  background: var(--c-creme); border-radius: 14px; padding: 14px;
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px;
}
.dm-picker > em { font-style: normal; font-size: .74rem; color: var(--c-ink-3); margin-bottom: 6px; }
.dm-pickrij {
  text-align: left; cursor: pointer; padding: 11px 13px; border-radius: 11px;
  border: var(--lijndikte) solid transparent; background: #fff;
  display: flex; flex-direction: column; gap: 3px;
}
.dm-pickrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.dm-pickrij > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dm-pickrij strong { font-size: .8rem; }
.dm-pickrij em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }

.dm-detail { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dm-detkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dm-detkop h2 { margin: 4px 0 5px; font-size: 1.3rem; letter-spacing: -.01em; }
.dm-detkop__sub { font-size: .78rem; color: var(--c-ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-detkop__sub .mono { font-size: .66rem; color: var(--c-terra-d); }
.dm-score { padding: 11px 18px; text-align: center; }
.dm-score strong { display: block; font-size: 1.5rem; color: var(--c-groen-d); line-height: 1; }
.dm-resolutie {
  padding: 12px 15px; border-radius: 12px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink-2);
  background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen);
}
/* FT-6.4b · live claims uit het BAG-register */
.dm-live { margin: 14px 0; padding: 14px 16px; }
.dm-live__kop { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.dm-live__kop strong { font-size: .9rem; }
.dm-live__meta { font-size: .64rem; color: var(--c-ink-3); }
.dm-livegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 7px; }
.dm-liverij { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; background: #fff; }
.dm-liverij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.dm-liverij strong { font-size: .76rem; }
.dm-liverij .mono { font-size: .6rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.dm-live__voet { font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; margin: 10px 0 0; }
.dm-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.dm-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }

/* ---- gouden velden ---- */
.dm-veld { padding: 12px 15px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0; }
.dm-veld:hover { border-color: var(--c-ink-3); }
.dm-veld.is-open { border-color: var(--c-groen); }
.dm-veld__kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dm-veld__kop > em { font-style: normal; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra-d); min-width: 104px; }
.dm-veld__kop strong { font-size: .95rem; }
.dm-veld__kop i { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.dm-veld__hist { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); }
.dm-histrij { display: flex; align-items: center; gap: 10px; font-size: .76rem; flex-wrap: wrap; }
.dm-histrij strong { min-width: 66px; }
.dm-histrij > em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); min-width: 150px; }
.dm-histrij > span { font-size: .7rem; color: var(--c-ink-3); flex: 1; }
.dm-histrij.is-actueel strong { color: var(--c-groen-d); }
.dm-histnote { font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; margin-top: 4px; }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dm-dot.is-groen { background: var(--c-groen); }
.dm-dot.is-sage { background: var(--c-sage); }
.dm-dot.is-stil { background: var(--c-lijn-2); }

.dm-persrij {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 10px; background: var(--c-creme);
  border: 0; cursor: pointer; text-align: left; width: 100%;
}
.dm-persrij:hover { background: var(--c-paneel); }
.dm-persrij.is-oud { opacity: .65; }
.dm-persrij strong { display: block; font-size: .8rem; }
.dm-persrij em { font-style: normal; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra-d); }
.dm-persrij i { display: block; font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.dm-persrij b { font: 600 .72rem var(--font-ui); color: var(--c-groen-d); white-space: nowrap; }
.dm-tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---- persoon ---- */
.dm-persveld { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.dm-persveld:last-child { border-bottom: 0; }
.dm-persveld em { font-style: normal; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra-d); display: flex; align-items: center; gap: 8px; }
.dm-persveld strong { font-size: .84rem; }

/* ---- import ---- */
.dm-imprij {
  display: grid; grid-template-columns: .8fr 2fr .9fr .9fr .9fr .8fr 1.3fr;
  gap: 12px; align-items: center; padding: 12px 16px; font-size: .76rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.dm-imprij:last-child { border-bottom: 0; }
.dm-imprij--kop { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); }
.dm-imprij.is-fout { background: var(--c-rood-t); }
.dm-imprij > div { min-width: 0; }
.dm-imprij strong { display: block; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-imprij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.dm-impacties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- merge ---- */
.dm-merge { padding: 15px 18px; display: flex; flex-direction: column; gap: 12px; }
.dm-merge__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-merge__reden { font-size: .74rem; color: var(--c-ink-3); }
.dm-merge__kop strong { font-size: 1rem; }
.dm-merge__kop em { font-style: normal; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.dm-merge__paar { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 10px; align-items: center; }
.dm-merge__paar > b { text-align: center; color: var(--c-ink-3); font-size: 1rem; }
.dm-kandidaat { background: var(--c-creme); border-radius: 11px; padding: 12px 14px; }
.dm-kandidaat strong { display: block; font-size: .8rem; }
.dm-kandidaat em { font-style: normal; font-size: .66rem; color: var(--c-terra-d); }
.dm-merge__acties { display: flex; gap: 9px; }
.dm-merge__klaar { font: 700 .76rem var(--font-ui); color: var(--c-groen-d); }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .dm-grid, .dm-tweekolom { grid-template-columns: 1fr; }
  .dm-picker { position: static; }
  .dm-imprij { grid-template-columns: 1fr; gap: 4px; }
  .dm-imprij--kop { display: none; }
  .dm-merge__paar { grid-template-columns: 1fr; }
}

/* F4-lat: steward-correctie + merge-drempels */
.dm-corrigeer { align-self: flex-start; margin-top: 6px; font-style: normal; cursor: pointer; }

/* F4a/c · bulk-merge + BAG-monitor */
.dm-bulkkop, .dm-bulkrij { display: grid; grid-template-columns: 64px 1.3fr 1.3fr; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; }
.dm-bulkkop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }
.dm-bulkrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; }
.dm-bulkalias { opacity: .65; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 45%, transparent); }
.dm-bagblok { margin-top: 14px; }
.dm-bagkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px 10px; }
.dm-bagrij { display: grid; grid-template-columns: 120px 1.4fr 1.3fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--c-lijn); font-size: 12.5px; }
.dm-bagrij.is-af { opacity: .6; }
.dm-bagrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; }
.dm-bagrij i { display: block; font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.dm-bagraakt { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.dm-bagraakt em { font-style: normal; color: var(--c-ink-2); }

/* ── integraties.css ── */
/* =====================================================================
   integraties.css — module 6.5 · API & integraties + Datakwaliteit.
   Uitsluitend tokens; module-wortel-marge volgens de vaste norm.
===================================================================== */

.ig { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.ig-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.ig-kop p { margin: 0; max-width: 76ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.ig-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.ig-hint { font-size: .72rem; color: var(--c-ink-3); display: block; }
.ig-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; }
.ig-note { font-style: normal; font-size: .66rem; color: var(--c-ink-3); display: block; line-height: 1.5; }
.ig-titel { font-size: .95rem; display: block; }
.ig-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ig-rek { flex: 1; }
.ig-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ig-klaar { font: 700 .76rem var(--font-ui); color: var(--c-groen-d); }
.is-groen { color: var(--c-groen-d); } .is-amber { color: var(--c-amber); } .is-rood { color: var(--c-rood); }

.ig-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.ig-knop:hover { border-color: var(--c-ink-3); }
.ig-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.ig-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.ig-knop--amber { background: var(--c-oker); border-color: var(--c-oker); color: var(--c-ink); }
.ig-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; }
.ig-knop--breed { width: 100%; }
.ig-terug { align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; font: 600 .78rem var(--font-ui); color: var(--c-groen-d); }

.ig-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.ig-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.ig-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ig-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ig-blok > strong { font-size: .86rem; }
.ig-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ig-dot { width: 10px; height: 10px; border-radius: 50%; }
.ig-dot.is-groen { background: var(--c-groen); } .ig-dot.is-amber { background: var(--c-oker); } .ig-dot.is-terra { background: var(--c-terra); }

/* ---- connectoren ---- */
.ig-catgroep { display: flex; flex-direction: column; gap: 10px; }
.ig-conngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ig-conngrid--breed { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ig-conn { padding: 15px 17px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.ig-conn:hover { border-color: var(--c-ink-3); }
.ig-conn__kop { display: flex; align-items: flex-start; gap: 11px; }
.ig-conn__kop i {
  width: 40px; height: 40px; flex: none; border-radius: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font: 700 .74rem var(--font-mono);
}
.ig-conn__kop i.is-groen, .ig-detlogo.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.ig-conn__kop i.is-amber, .ig-detlogo.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.ig-conn__kop i.is-terra, .ig-detlogo.is-terra { background: var(--c-terra-t); color: var(--c-terra-d); }
.ig-conn__kop > span { flex: 1; min-width: 0; }
.ig-conn__kop strong { display: block; font-size: .88rem; }
.ig-conn__kop em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.ig-conn__voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ig-conn__voet em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.ig-herstel {
  display: block; text-align: center; padding: 8px; border-radius: 8px;
  border: var(--lijndikte) solid var(--c-oker); background: var(--c-amber-t);
  font: 700 .74rem var(--font-ui); color: var(--c-amber);
}
.ig-detkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ig-detlogo {
  width: 52px; height: 52px; flex: none; border-radius: 13px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font: 700 .9rem var(--font-mono);
}
.ig-detkop h2 { margin: 0 0 5px; font-size: 1.25rem; }
.ig-detkop span { font-size: .78rem; color: var(--c-ink-2); }
.ig-doel { padding: 14px 17px; font: 400 .8rem/1.6 var(--font-ui); color: var(--c-ink-2); }
.ig-issue {
  display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px;
  border: var(--lijndikte) solid var(--c-oker); border-radius: 13px; background: var(--c-amber-t);
}
.ig-issue i { font-style: normal; color: var(--c-amber); font-weight: 700; }
.ig-issue > div { flex: 1; }
.ig-issue strong { display: block; font-size: .78rem; color: var(--c-amber); }
.ig-issue span { font-size: .74rem; color: var(--c-ink-2); }
.ig-sleutel {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: 9px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn);
  font-size: .7rem; color: var(--c-ink-2); overflow: hidden;
}
.ig-sleutel b { color: var(--c-ink-3); }
.ig-callstrip { display: flex; gap: 2px; align-items: flex-end; }
.ig-callstrip i { width: 14px; height: 22px; border-radius: 3px; font-style: normal; }
.ig-callstrip i.is-ok { background: var(--c-groen-t); }
.ig-callstrip i.is-fout { background: var(--c-rood); height: 26px; }
.ig-foutrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 9px; background: var(--c-rood-t); }
.ig-foutrij strong { display: block; font-size: .74rem; }
.ig-foutrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.ig-quota { display: flex; flex-direction: column; gap: 5px; }
.ig-quota em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.ig-quota i { display: block; height: 6px; border-radius: 3px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.ig-quota b { display: block; height: 100%; background: var(--c-terra); border-radius: 3px; }
.ig-scoperij { display: flex; align-items: flex-start; gap: 12px; }
.ig-scoperij strong { display: block; font-size: .74rem; color: var(--c-terra-d); }
.ig-scoperij span { font-size: .7rem; color: var(--c-ink-3); }
.ig-toggle {
  width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--c-lijn-2); position: relative; transition: background 160ms;
}
.ig-toggle i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 160ms; font-style: normal;
}
.ig-toggle.is-aan { background: var(--c-groen); }
.ig-toggle.is-aan i { left: 21px; }

/* ---- webhooks & breakers ---- */
.ig-eventrij { padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; }
.ig-eventrij__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ig-eventrij strong { font-size: .76rem; color: var(--c-terra-d); }
.ig-eventrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); display: block; margin-top: 5px; }
/* WH (02-09) · de rij draagt nu een echt bericht met een reden en twee
   knoppen. In de smalle rechterkolom van de tweekolom-tab botsten die op
   elkaar; vandaar: stand en tekst naast elkaar, acties op hun eigen regel. */
.ig-whinrij { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px;
  align-items: start; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; }
.ig-whinrij strong { display: block; font-size: .74rem; color: var(--c-terra-d); }
.ig-whinrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.ig-whinrij .st { justify-self: start; margin-top: 2px; }
.ig-whinrij .ig-whacties { grid-column: 2; flex-wrap: wrap; }
.ig-whlogrij { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; }
.ig-whlogrij > div { flex: 1; min-width: 0; }
.ig-whlogrij strong { display: block; font-size: .76rem; color: var(--c-terra-d); }
.ig-whlogrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.ig-breaker { padding: 14px 17px; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.ig-breaker.is-open { border-color: var(--c-rood); background: var(--c-rood-t); }
.ig-breaker strong { display: block; font-size: .84rem; }
.ig-breaker em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); display: block; }
.ig-breakeracties { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }

/* ---- datakwaliteit ---- */
.ig-domeinen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ig-domein { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ig-domein__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ig-domein__kop strong { display: block; font-size: .9rem; }
.ig-domein__kop em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.ig-domein__kop b { font: 800 1.4rem var(--font-ui); }
.ig-dim { display: grid; grid-template-columns: 70px 44px minmax(0, 1fr); gap: 8px; align-items: center; font: 600 .68rem var(--font-ui); color: var(--c-ink-2); }
.ig-dim em { font-style: normal; text-align: right; }
.ig-dim i { display: block; height: 6px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.ig-dim b { display: block; height: 100%; border-radius: 99px; }
.ig-dim b.is-groen { background: var(--c-groen); } .ig-dim b.is-amber { background: var(--c-oker); }
.ig-steward { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 8px; }
.ig-issuerij { padding: 13px 15px; display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; border-left: 4px solid var(--c-lijn-2); }
.ig-issuerij.is-kritiek { border-left-color: var(--c-rood); }
.ig-issuerij.is-hoog { border-left-color: var(--c-oker); }
.ig-issuerij.is-middel { border-left-color: var(--c-terra); }
.ig-issuerij > div { flex: 1; min-width: 0; }
.ig-issuerij__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ig-issuerij__meta em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.ig-issuerij strong { display: block; font-size: .8rem; }
.ig-issuerij > div > span { font-size: .72rem; color: var(--c-ink-2); }
.ig-issuerij__st { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.ig-issuerij__st em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.ig-dupe { padding: 15px 18px; display: flex; flex-direction: column; gap: 12px; }
.ig-dupe__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-dupe__kop strong { font-size: 1rem; }
.ig-dupe__paar { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 10px; align-items: center; }
.ig-dupe__paar > b { text-align: center; color: var(--c-ink-3); }
.ig-kand { background: var(--c-creme); border-radius: 11px; padding: 12px 14px; }
.ig-kand strong { display: block; font-size: .8rem; }
.ig-kand em { font-style: normal; font-size: .66rem; color: var(--c-terra-d); display: block; }
.ig-kand span { font-size: .64rem; color: var(--c-ink-3); }
.ig-dupenote {
  padding: 10px 13px; border-radius: 10px; font: 600 .72rem var(--font-ui);
  background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker); color: var(--c-amber);
}
.ig-poortrij {
  display: grid; grid-template-columns: 170px 110px 200px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 13px 16px; font-size: .76rem;
}
.ig-poortrij.is-blok { border-color: var(--c-rood); background: var(--c-rood-t); }
.ig-poortrij strong { display: block; font-size: .78rem; }
.ig-poortrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.ig-poortcijfers { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: .72rem; }
.ig-poortreden { font-size: .7rem; color: var(--c-ink-2); }
.ig-syncrij { padding: 13px 16px; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.ig-syncrij > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ig-syncrij strong { font-size: .8rem; }
.ig-syncrij span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .ig-tweekolom { grid-template-columns: 1fr; }
  .ig-domeinen { grid-template-columns: 1fr; }
  .ig-poortrij { grid-template-columns: 1fr; gap: 5px; }
}

/* Exact Online-connector (besluit 15-07) */
.ig-exrij { display: grid; grid-template-columns: 1.6fr .9fr .9fr .9fr .8fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; }
.ig-exrij:last-child { border-bottom: 0; }
.ig-exrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }
.ig-maprij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.ig-mapinput { width: 72px; border: 1px solid var(--c-lijn); border-radius: 8px; padding: 4px 8px; font-size: 12px; text-align: right; background: var(--c-paneel); color: var(--c-ink); }
.ig-exgezond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.ig-exgezond div { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--c-ink-2); }
.ig-exgezond strong { font-size: 15px; color: var(--c-ink); }

/* F4-lat: DQ-norm regelset-knop in de tabbalk */
.ig-dqregels { margin-left: auto; }

/* F4b · DQ-trend per domein */
.ig-trend { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ig-spark { width: 100%; height: 36px; }
.ig-spark polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ig-spark.is-groen polyline { stroke: var(--c-groen-d); }
.ig-spark.is-amber polyline { stroke: var(--c-amber); }
.ig-trend__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ig-knik { font-size: 10.5px; color: var(--c-terra); font-style: normal; font-weight: 700; }

/* F5-lat: quota bewerken */
.ig-quotaform { display: flex; gap: 8px; align-items: end; margin-top: 8px; }
.ig-quotaveld { display: flex; flex-direction: column; gap: 4px; }
.ig-quotaveld input { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; width: 110px; background: var(--c-paneel); color: var(--c-ink); }

/* F5 a/c · playground + verbruik */
.ig-pgbalk { display: flex; gap: 10px; align-items: end; margin: 8px 0; flex-wrap: wrap; }
.ig-pgbalk select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12px; background: var(--c-paneel); color: var(--c-ink); max-width: 380px; }
.ig-pgresp { border: 1px solid var(--c-lijn); border-radius: 12px; overflow: hidden; margin-top: 6px; }
.ig-pgresp.is-ok { border-color: var(--c-groen-d); }
.ig-pgresp.is-fout { border-color: var(--c-rood); }
.ig-pgcode { display: block; padding: 6px 12px; font-size: 11px; font-weight: 800; border-bottom: 1px solid var(--c-lijn); }
.ig-pgresp.is-ok .ig-pgcode { color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 10%, transparent); }
.ig-pgresp.is-fout .ig-pgcode { color: var(--c-rood); background: color-mix(in srgb, var(--c-rood) 7%, transparent); }
.ig-pgresp pre, .ig-pgpre { margin: 0; padding: 10px 12px; font-size: 11px; line-height: 1.5; overflow: auto; max-height: 220px; white-space: pre-wrap; }
.ig-pgpre { border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); margin: 6px 0 10px; }
.ig-uurstrip { display: flex; gap: 2px; align-items: flex-end; height: 56px; margin: 8px 0 4px; }
.ig-uurstrip i { flex: 1; background: var(--c-groen); border-radius: 3px 3px 0 0; min-height: 3px; }
.ig-uurstrip i.is-piek { background: var(--c-terra); }
.ig-whacties { display: flex; gap: 6px; align-items: center; }

/* ---- KVK Handelsregister — sleutelbeheer (22-07) ---- */
.ig-kvk { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; margin-bottom: 16px; }
.ig-kvk__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ig-kvk__kop > div { display: flex; flex-direction: column; gap: 3px; }
.ig-kvk__sub { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); max-width: 56ch; }
.ig-kvk__rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ig-kvk__rij input { flex: 1; min-width: 260px; padding: 9px 14px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font: 500 .74rem var(--font-ui); color: var(--c-ink); }
.ig-kvk__noot { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }

/* ── werkstromen.css ── */
/* =====================================================================
   werkstromen.css — module 6.6 · Werkstromen & goedkeuringen +
   Privacy/AVG (workflow · privacy). Alles op tokens; diepte alleen
   via de vaste tokens.
===================================================================== */

.wf { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.wf .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; }
.wf-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.wf-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.wf-kop p { max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.wf .mono { font-family: var(--font-mono); }
.wf-rek { flex: 1; }

/* tabs */
.wf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.wf-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.wf-tab:hover { border-color: var(--c-lijn-2); color: var(--c-ink); }
.wf-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); }

/* kaarten & lagen */
.wf .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; }
.wf .kaart--strak { padding: 6px 0; }
.wf-blok { display: flex; flex-direction: column; gap: 10px; }
.wf-titel { font-size: 15px; font-weight: 800; color: var(--c-ink); display: block; }
.wf-hint { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; display: block; margin-top: 3px; max-width: 640px; }
.wf-note { font-size: 12px; color: var(--c-ink-3); font-style: normal; }
.wf-balk { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.wf-voetnoot { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; padding: 10px 2px 0; border-top: var(--lijndikte) solid var(--c-lijn); margin-top: 4px; }

/* grid-layouts */
.wf-grid { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
.wf-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wf-zij { display: flex; flex-direction: column; gap: 0; }
.wf-hoofd { display: flex; flex-direction: column; gap: 0; }

/* chips-lijstjes / statusketen */
.wf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wf-chip { font: 600 12.5px var(--font-ui); color: var(--c-ink-2); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 6px 13px; cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.wf-chip:hover { border-color: var(--c-lijn-2); }
.wf-chip.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.wf-status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--c-ink); padding: 5px 0; }
.wf-status .chip { margin-left: auto; }
.wf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-lijn-2); flex: none; }
.wf-dot.is-sage { background: var(--c-sage); }
.wf-dot.is-groen { background: var(--c-groen); }
.wf-dot.is-rood { background: var(--c-rood); }

/* simulator */
.wf-simulator { background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wf-guardrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--c-ink); }
.wf-toggle { width: 38px; height: 22px; flex: none; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel-2); cursor: pointer; position: relative; transition: background .16s, border-color .16s; }
.wf-toggle i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); transition: left .16s; }
.wf-toggle.is-aan { background: var(--c-groen); border-color: var(--c-groen-d); }
.wf-toggle.is-aan i { left: 18px; border-color: var(--c-groen-d); }

/* bewaakte overgangen */
.wf-trans { display: flex; flex-direction: column; gap: 8px; }
.wf-trans.is-blok { border-color: var(--c-rood); }
.wf-trans__kop { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-ink); }
.wf-trans__kop b { color: var(--c-ink-3); font-weight: 600; }
.wf-trans__kop .chip { margin-left: auto; }
.wf-trans__naam { font-size: 12.5px; color: var(--c-ink-3); }
.wf-guard { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; border-radius: var(--radius-pill); padding: 4px 12px 4px 8px; border: var(--lijndikte) solid var(--c-lijn); width: fit-content; }
.wf-guard i { font-style: normal; font-weight: 800; }
.wf-guard.is-ok { color: var(--c-groen-d); background: var(--c-groen-t); border-color: var(--c-groen); }
.wf-guard.is-faal { color: var(--c-rood); background: var(--c-rood-t); border-color: var(--c-rood); }
.wf-resultaat { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius); padding: 10px 13px; font-size: 12.5px; line-height: 1.45; }
.wf-resultaat i { font-style: normal; font-weight: 800; font-size: 14px; }
.wf-resultaat strong { display: block; font-size: 13px; }
.wf-resultaat.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.wf-resultaat.is-blok { background: var(--c-rood-t); color: var(--c-rood); }

/* knoppen */
.wf-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); transition: border-color .16s, background .16s; width: fit-content; }
.wf-knop:hover { border-color: var(--c-ink-3); }
.wf-knop--klein { padding: 6px 13px; font-size: 12.5px; }
.wf-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); }
.wf-knop--primair:hover { background: var(--gradient-primair-hover); }
.wf-knop--rood { border-color: var(--c-rood); color: var(--c-rood); }
.wf-knop.is-dicht { opacity: .5; cursor: not-allowed; }

/* bouwer */
.wf-stap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); margin-top: 4px; }
.wf-preview { background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; color: var(--c-ink); line-height: 1.5; }
.wf-regelrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.wf-regelrij:last-child { border-bottom: 0; }
.wf-regelrij strong { display: block; font-size: 13.5px; color: var(--c-ink); }
.wf-regelrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; }

/* goedkeuringen */
.wf-approval { display: flex; flex-direction: column; gap: 7px; }
.wf-approval.is-sod { border-color: var(--c-rood); }
.wf-approval__kop { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-ink); flex-wrap: wrap; }
.wf-approval__wie { font-size: 13px; color: var(--c-ink-2); }
.wf-sodregel { font-size: 12.5px; color: var(--c-rood); background: var(--c-rood-t); border-radius: var(--radius); padding: 8px 12px; line-height: 1.45; }
.wf-klaar { font-size: 12.5px; color: var(--c-groen-d); font-weight: 600; }

/* taken & DSAR & datalekken */
.wf-taak { display: flex; align-items: center; gap: 16px; }
.wf-taak.is-esc { border-color: var(--c-rood); }
.wf-taak__body { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--c-ink-2); }
.wf-taak__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; color: var(--c-ink); }
.wf-slabalk { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; max-width: 420px; }
.wf-slabalk b { display: block; height: 100%; border-radius: var(--radius-pill); }
.wf-slabalk .is-groen { background: var(--c-groen); }
.wf-slabalk .is-amber { background: var(--c-oker); }
.wf-slabalk .is-rood { background: var(--c-rood); }
.wf-escnote { font-size: 12.5px; color: var(--c-rood); font-style: normal; font-weight: 600; }

/* transitielog */
.wf-logrij { display: grid; grid-template-columns: 110px 150px 200px 90px 1fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.wf-logrij:last-child { border-bottom: 0; }
.wf-logrij.is-blok { background: var(--c-rood-t); }
.wf-logrij strong { color: var(--c-ink); }
.wf-logovergang b { color: var(--c-ink-3); font-weight: 600; }
.wf-logreden { line-height: 1.4; }

/* privacy: personen + consent */
.wf-persrij { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 13px; cursor: pointer; font-family: var(--font-ui); transition: border-color .16s, background .16s; }
.wf-persrij:hover { border-color: var(--c-lijn-2); }
.wf-persrij.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); }
.wf-persrij span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-ink); }
.wf-persrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; }
.wf-consrij { display: flex; align-items: center; gap: 14px; }
.wf-consrij > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wf-consrij__kop { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-ink); }
.wf-consrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; }

/* privacy: register / verwerkers / suppressie */
.pv-regrij { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr 1fr .9fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.pv-regrij:last-child { border-bottom: 0; }
.pv-regrij--kop { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.pv-regrij strong { display: block; color: var(--c-ink); font-size: 13px; }
.pv-regrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; }
.pv-vwrij { display: grid; grid-template-columns: 1fr 1.2fr .9fr 1fr .8fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.pv-vwrij:last-child { border-bottom: 0; }
.pv-vwrij--kop { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.pv-vwrij.is-blok { background: var(--c-rood-t); }
.pv-vwrij strong { color: var(--c-ink); }
.pv-suprij { display: grid; grid-template-columns: 1.4fr .6fr 1fr .7fr; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.pv-suprij:last-child { border-bottom: 0; }
.pv-suprij strong { color: var(--c-ink); }
.pv-suprij em { color: var(--c-ink-3); font-style: normal; }

@media (max-width: 1080px) {
  .wf-grid, .wf-tweekolom { grid-template-columns: 1fr; }
}

/* F6 a/b/c (16-07-2026) */
.wf-regelacties { display: flex; gap: 6px; align-items: center; }
.wf-testrij { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.wf-testrij i { font-style: normal; font-weight: 800; color: var(--c-groen-d); }
.wf-testrij em { display: block; font-size: 11.5px; color: var(--c-ink-2); font-style: normal; }
.wf-testrij .wf-note { display: block; font-size: 11px; color: var(--c-terra); }
.wf-persel select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12px; background: var(--c-paneel); color: var(--c-ink); }

/* Mock→echt · live fiat-werklijst uit /api/goedkeuringen */
.wf-livegk { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.wf-gkrij { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; }
.wf-gkrij:first-of-type { border-top: 0; }
.wf-gkrij.is-sod { background: var(--c-rood-t); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.wf-gkrij > em.mono { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.wf-gkrij strong { display: block; font-size: 13px; color: var(--c-ink); }
.wf-gkrij span { display: block; font-size: 11.5px; color: var(--c-ink-2); }

/* ── compliance.css ── */
/* =====================================================================
   compliance.css — module 6.7 · Compliance & audit + Kennisbank +
   CLM (compliance · kennisbank · clmregister · clmsignalen).
   Alles op tokens; diepte alleen via de vaste tokens.
===================================================================== */

.cpl { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.cpl .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; }
.cpl-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.cpl-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.cpl-kop p { max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.cpl .mono { font-family: var(--font-mono); }
.cpl-rek { flex: 1; }
.cpl .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 11px; }
.cpl .kaart--strak { padding: 6px 0; }
.cpl-titel { font-size: 15px; font-weight: 800; color: var(--c-ink); display: block; margin-bottom: 3px; }
.cpl-hint { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; display: block; margin-bottom: 12px; max-width: 640px; }
.cpl-voetnoot { font-size: 12px; color: var(--c-ink-3); line-height: 1.55; display: block; margin-top: 8px; }
.cpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cpl-smal { max-width: 900px; }

/* tabs & chips & knoppen */
.cpl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 16px; }
.cpl-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.cpl-tab:hover { border-color: var(--c-lijn-2); color: var(--c-ink); }
.cpl-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); }
.cpl-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; }
.cpl-chipknop { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 5px 13px; cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.cpl-chipknop:hover { border-color: var(--c-lijn-2); }
.cpl-chipknop.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.cpl-chipknop.is-amber { background: var(--c-amber-t); border-color: var(--c-oker); color: var(--c-ink); }
.cpl-teller { margin-left: auto; font-size: 11px; color: var(--c-ink-3); }
.cpl-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); transition: border-color .16s, background .16s; width: fit-content; }
.cpl-knop:hover { border-color: var(--c-ink-3); }
.cpl-knop--klein { padding: 6px 13px; font-size: 12.5px; }
.cpl-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); }
.cpl-knop--primair:hover { background: var(--gradient-primair-hover); }
.cpl-knop--donker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
.cpl-knop--rood { border-color: var(--c-rood); color: var(--c-rood); }
.cpl-knop--terra { background: var(--c-terra); border-color: var(--c-terra-d); color: var(--c-creme); }
.cpl-knop--sage { background: var(--c-sage-t); border-color: var(--c-sage); color: var(--c-groen-d); }
.cpl-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.cpl-zoek { flex: 1; min-width: 220px; max-width: 420px; padding: 9px 14px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); font: 500 13px var(--font-ui); color: var(--c-ink); }
.cpl-melding { display: block; padding: 11px 15px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; margin-bottom: 13px; }
.cpl-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.cpl-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); }
.cpl-melding.is-signaal { background: var(--c-amber-t); color: var(--c-ink); border: var(--lijndikte) solid var(--c-oker); }
.cpl-melding a { color: inherit; font-weight: 700; }
.cpl-balkje { width: 4px; border-radius: var(--radius-pill); flex: none; align-self: stretch; background: var(--c-lijn-2); }
.cpl-balkje.is-rood { background: var(--c-rood); }
.cpl-balkje.is-terra { background: var(--c-terra); }
.cpl-balkje.is-amber { background: var(--c-oker); }
.cpl-balkje.is-stil { background: var(--c-lijn-2); }
.cpl-balkje.is-ink { background: var(--c-ink-2); }
.cpl-balkje.is-oker { background: var(--c-oker); }
.cpl-balkje.is-groen { background: var(--c-groen); }

/* compliance: signalen / SoD / audit */
.cpl-signaal { display: flex; gap: 13px; align-items: stretch; }
.cpl-signaal > div { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--c-ink-2); }
.cpl-signaal strong { font-size: 13.5px; color: var(--c-ink); }
.cpl-signaal__kop { display: flex; align-items: center; gap: 8px; }
.cpl-signaal__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-st { font-size: 10.5px; color: var(--c-ink-3); align-self: flex-start; }
.cpl-sod { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--c-ink-2); }
.cpl-sod__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cpl-sod__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-sod__regel { font-weight: 600; color: var(--c-ink-2); }
.cpl-sod em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-append { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); font: 700 12px var(--font-ui); color: var(--c-groen-d); }
.cpl-append em { font-weight: 500; font-size: 10.5px; font-style: normal; }
.cpl-auditrij { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--c-ink-2); }
.cpl-auditrij__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cpl-auditrij__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-auditrij__kop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.cpl-bg { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: var(--c-rood); background: var(--c-rood-t); }
.cpl-auditrij__wie { font-size: 11.5px; }
.cpl-auditrij__wie b { color: var(--c-ink); }
.cpl-auditrij__wie i { font-style: normal; color: var(--c-ink-3); }
.cpl-auditrij__wie em { font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.cpl-auditrij__delta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cpl-auditrij__delta b { color: var(--c-groen-d); font-weight: 700; }
.cpl-auditrij__delta em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-oud { font: 600 11px var(--font-ui); padding: 3px 10px; border-radius: 7px; background: var(--c-rood-t); color: var(--c-rood); text-decoration: line-through; }
.cpl-nieuw { font: 600 11px var(--font-ui); padding: 3px 10px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); }
.cpl-wisproef { border: var(--lijndikte) dashed var(--c-rood); border-radius: var(--radius); background: var(--c-rood-t); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cpl-wisproef strong { font-size: 13px; color: var(--c-ink); }
.cpl-wisproef span { font-size: 12px; line-height: 1.55; color: var(--c-ink-2); }
.cpl-geweigerd { font: 700 12px var(--font-ui); color: var(--c-rood); font-style: normal; }
.cpl-bgrij { display: flex; gap: 13px; align-items: flex-start; }
.cpl-bgrij > i { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 15px var(--font-ui); color: var(--c-rood); background: var(--c-rood-t); font-style: normal; }
.cpl-bgrij > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--c-ink-2); }
.cpl-bgrij__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpl-bgrij__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-bgrij__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.cpl-bgrij > div > em { font-size: 11px; color: var(--c-ink-3); font-style: normal; line-height: 1.5; }
.cpl-lek { border-color: var(--c-rood); display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.55; color: var(--c-ink-2); }
.cpl-lek__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cpl-lek__kop strong { font-size: 13px; color: var(--c-ink); }
.cpl-lek a { color: var(--c-groen-d); font-weight: 700; }
.cpl-lekstappen { display: flex; gap: 6px; }
.cpl-lekstappen span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; font: 700 10px var(--font-ui); background: var(--c-paneel-2); color: var(--c-ink-3); }
.cpl-lekstappen .is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.cpl-lekstappen .is-bezig { background: var(--c-amber-t); color: var(--c-ink); }
.cpl-memo { margin-top: 3px; padding: 14px 16px; border-radius: var(--radius); background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 4px; }
.cpl-memo strong { font-size: 12.5px; color: var(--c-ink); }
.cpl-memo span { font-size: 11.5px; line-height: 1.55; color: var(--c-ink-2); }
.cpl-dekking { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cpl-dekking.is-let { border-color: var(--c-oker); }
.cpl-dekking div { display: flex; flex-direction: column; gap: 2px; }
.cpl-dekking strong { font-size: 12.5px; color: var(--c-ink); }
.cpl-dekking span { font-size: 10.5px; color: var(--c-ink-3); }
.cpl-dekking b { font-size: 18px; font-weight: 800; }
.cpl-dekking b.is-groen { color: var(--c-groen-d); }
.cpl-dekking b.is-amber { color: var(--c-oker); }

/* kennisbank */
.kb-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.kb-lijst { display: flex; flex-direction: column; gap: 9px; max-height: 640px; overflow-y: auto; }
.kb-rij { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: var(--font-ui); transition: border-color .16s, background .16s; }
.kb-rij:hover { border-color: var(--c-lijn-2); }
.kb-rij.is-actief { background: var(--c-paneel); border-color: var(--c-groen); box-shadow: var(--schaduw-tegel); }
.kb-rij strong { font-size: 13px; line-height: 1.3; color: var(--c-ink); }
.kb-rij__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kb-rij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-rij__cat { letter-spacing: .08em; text-transform: uppercase; font-size: 9px; color: var(--c-groen-d); }
.kb-artikel { padding: 22px 24px; }
.kb-artikel__meta { font-size: 10px; letter-spacing: .08em; color: var(--c-ink-3); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kb-artikel h2 { font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--c-ink); margin: 0 0 14px; }
.kb-artikel__balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 0; border-top: var(--lijndikte) solid var(--c-lijn); border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 16px; }
.kb-artikel__eig { font-size: 11px; color: var(--c-ink-3); text-align: right; font-style: normal; line-height: 1.5; }
.kb-artikel__body { font-size: 14px; line-height: 1.7; color: var(--c-ink-2); }
.kb-pub { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; font: 700 11.5px var(--font-ui); color: var(--c-ink); padding: 4px; border-radius: var(--radius-pill); }
.kb-pub i { width: 38px; height: 22px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel-2); position: relative; transition: background .16s; }
.kb-pub i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); transition: left .16s; }
.kb-pub.is-aan i { background: var(--c-groen); border-color: var(--c-groen-d); }
.kb-pub.is-aan i::after { left: 18px; }
.kb-verlopen { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: var(--radius); background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); margin-bottom: 16px; font-size: 12px; line-height: 1.45; color: var(--c-terra-d); }
.kb-verlopen i { font-style: normal; font-size: 15px; }
.kb-verlopen span { flex: 1; font-weight: 600; }
.kb-ctx { margin-top: 18px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-ctx .kicker { width: 100%; margin-bottom: 4px; }
.kb-ctx__chip { font: 600 10.5px var(--font-ui); padding: 4px 10px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); }
.kb-padgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kb-pad { display: flex; flex-direction: column; gap: 9px; padding: 18px 19px; }
.kb-pad__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-pad__kop em { font-size: 9px; letter-spacing: .06em; color: var(--c-ink-3); font-style: normal; }
.kb-pad > strong { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.kb-pad > em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-mod { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-ink-2); }
.kb-mod i { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 11px var(--font-ui); color: var(--c-ink-3); background: var(--c-paneel-2); font-style: normal; }
.kb-mod i.is-klaar { color: var(--c-creme); background: var(--c-groen); }
.kb-mod span { flex: 1; font-weight: 600; }
.kb-balk { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; }
.kb-balk b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); transition: width .3s; }
.kb-gap { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.kb-gap.is-gap { border-color: var(--c-oker); }
.kb-gap strong { flex: 1; font-size: 12.5px; color: var(--c-ink); }
.kb-gap em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-top { margin-bottom: 12px; }
.kb-top > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.kb-top span { font: 600 12px var(--font-ui); color: var(--c-ink); }
.kb-top em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.kb-client__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kb-client__kop i { width: 30px; height: 30px; border-radius: 9px; background: var(--c-groen); display: flex; align-items: center; justify-content: center; font: 800 13px var(--font-ui); color: var(--c-creme); font-style: normal; }
.kb-client__kop strong { font-size: 17px; font-weight: 800; color: var(--c-ink); }

/* CLM */
.clm-rij { display: grid; grid-template-columns: 1.7fr 1fr .8fr .9fr 1.1fr; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 12.5px var(--font-ui); color: var(--c-ink-2); text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; cursor: pointer; }
div.clm-rij--kop { cursor: default; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.clm-rij:last-child { border-bottom: 0; }
.clm-rij:hover:not(.clm-rij--kop) { background: var(--c-creme); }
.clm-rij.is-rood { background: var(--c-rood-t); }
.clm-rij.is-amber { background: var(--c-amber-t); }
.clm-naam { display: flex; align-items: center; gap: 9px; }
.clm-naam i { font-style: normal; font-size: 14px; flex: none; }
.clm-naam i.is-groen { color: var(--c-groen-d); } .clm-naam i.is-terra { color: var(--c-terra); } .clm-naam i.is-ink { color: var(--c-ink-2); } .clm-naam i.is-oker { color: var(--c-oker); }
.clm-naam strong { font-size: 13.5px; color: var(--c-ink); }
.clm-naam em.mono { display: block; font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.clm-waarde { color: var(--c-oker); font-weight: 600; }
.clm-rij b.mono { display: block; font-size: 12px; color: var(--c-ink); margin-bottom: 3px; }
.clm-detgrid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 18px; align-items: start; margin-top: 14px; }
.clm-det { padding: 22px 24px; }
.clm-det__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.clm-det__meta i { font-style: normal; font-size: 17px; }
.clm-det__meta i.is-groen { color: var(--c-groen-d); } .clm-det__meta i.is-terra { color: var(--c-terra); } .clm-det__meta i.is-ink { color: var(--c-ink-2); } .clm-det__meta i.is-oker { color: var(--c-oker); }
.clm-det__meta em { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); font-style: normal; }
.clm-det h1 { font-size: 23px; font-weight: 800; line-height: 1.15; color: var(--c-ink); margin: 0 0 4px; }
.clm-det__partij { font-size: 13.5px; color: var(--c-ink-2); }
.clm-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.clm-feiten strong { font-size: 13px; color: var(--c-ink); }
.clm-claus { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); margin-bottom: 8px; font-size: 12.5px; }
.clm-claus i { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-ui); color: var(--c-creme); background: var(--c-groen); font-style: normal; }
.clm-claus span { flex: 1; font-weight: 600; color: var(--c-ink); }
.clm-claus em { font: 700 11px var(--font-ui); color: var(--c-groen-d); font-style: normal; }
.clm-claus.is-mist { border-color: var(--c-rood); background: var(--c-rood-t); }
.clm-claus.is-mist i { background: var(--c-rood); }
.clm-claus.is-mist em { color: var(--c-rood); }
.clm-verpl { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 8px; }
.clm-verpl i { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font: 600 14px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel-2); font-style: normal; }
.clm-verpl div { flex: 1; }
.clm-verpl strong { display: block; font-size: 12.5px; color: var(--c-ink); }
.clm-verpl em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-versie { display: flex; gap: 11px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 12px 15px; margin-bottom: 8px; }
.clm-versie.is-cur { border-color: var(--c-groen); background: var(--c-groen-t); }
.clm-versie b { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; background: var(--c-lijn-2); }
.clm-versie.is-cur b { background: var(--c-groen); }
.clm-versie div { flex: 1; }
.clm-versie__kop { display: flex; align-items: center; justify-content: space-between; }
.clm-versie strong { font-size: 13px; color: var(--c-ink); }
.clm-versie em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-versie span { display: block; font-size: 12px; color: var(--c-ink-2); margin-top: 3px; }
.clm-bijlage { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 8px; font-size: 12.5px; }
.clm-bijlage i { font-style: normal; color: var(--c-ink-3); }
.clm-bijlage span { flex: 1; font-weight: 600; color: var(--c-ink); }
.clm-bijlage em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-zij { display: flex; flex-direction: column; gap: 0; }
.clm-hero { border-radius: var(--radius); padding: 20px 22px; background: var(--c-ink); color: var(--c-creme); margin-bottom: 12px; box-shadow: var(--schaduw-tegel); }
.clm-hero .kicker { color: var(--c-creme); opacity: .55; }
.clm-hero strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.01em; }
.clm-hero strong.is-rood { color: var(--c-blush); }
.clm-hero strong.is-amber { color: var(--c-oker); }
.clm-hero span { display: block; font-size: 12.5px; opacity: .7; margin-top: 3px; }
.clm-hero em { display: block; font-size: 11.5px; font-style: normal; opacity: .75; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-ink-2); }
.clm-blok { display: flex; flex-direction: column; gap: 9px; }
.clm-blok__kop { display: flex; align-items: center; justify-content: space-between; }
.clm-blok strong { font-size: 12.5px; color: var(--c-ink); }
.clm-blok .cpl-knop { width: 100%; text-align: center; }
.clm-tekenaar { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); }
.clm-tekenaar > div { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--c-ink-3); }
.clm-tekenaar__kop { display: flex; align-items: center; gap: 7px; }
.clm-tekenaar__kop strong { font-size: 12.5px; color: var(--c-ink); }
.clm-tekenaar em { font-style: normal; }
.clm-tekenaar > div > em.is-ok { color: var(--c-groen-d); font-weight: 700; }
.clm-bewijs { display: block; padding: 10px 12px; border-radius: 9px; background: var(--c-amber-t); font-size: 11px; line-height: 1.5; color: var(--c-ink-2); }
.clm-bewijs.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }
.clm-signaal { display: flex; align-items: center; gap: 14px; }
.clm-signaal__ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font: 600 15px var(--font-ui); font-style: normal; background: var(--c-paneel-2); color: var(--c-ink-2); }
.clm-signaal__ic.is-rood { color: var(--c-rood); background: var(--c-rood-t); }
.clm-signaal__ic.is-amber { color: var(--c-oker); background: var(--c-amber-t); }
.clm-signaal__ic.is-ink { color: var(--c-ink); background: var(--c-paneel-2); }
.clm-signaal__ic.is-oker { color: var(--c-oker); background: var(--c-amber-t); }
.clm-signaal__body { flex: 1; display: flex; flex-direction: column; gap: 2px; background: none; border: none; cursor: pointer; text-align: left; font: 500 12px var(--font-ui); color: var(--c-ink-2); padding: 0; }
.clm-signaal__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.clm-signaal__kop strong { font-size: 13.5px; color: var(--c-ink); }
.clm-signaal__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.clm-signaal__actie { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.clm-signaal__actie em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.clm-signaal__actie em.is-rood { color: var(--c-rood); font-weight: 700; }

@media (max-width: 1080px) {
  .cpl-grid, .kb-grid, .clm-detgrid { grid-template-columns: 1fr; }
}

/* F7 a/b/c (16-07-2026) */
.kb-nuttig { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--c-lijn); font-size: 12.5px; }
.kb-nuttig__stand { font-size: 10.5px; color: var(--c-ink-2); margin-left: auto; }
.clm-maillog { padding: 12px 16px; margin-top: 12px; }
.clm-maillogrij { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 12.5px; }
.clm-maillogrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }

/* ---------- Redactie & contractbeheer (bewerken/intrekken) ---------- */
.cpl-knop--klein { padding: 5px 10px; font-size: .68rem; }
.clm-detacties { display: flex; gap: 6px; margin: 10px 0 2px; }

/* ── portfolio.css ── */
/* =====================================================================
   portfolio.css — Portfolio (B2B), zes schermen. Op tokens; diepte
   alleen via de vaste tokens. Beheerpatroon-look (geen prototype —
   drietal niet compleet, gemeld in portfolio.js).
===================================================================== */

.pf { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.pf .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; }
.pf-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.pf-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.pf-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.pf .mono { font-family: var(--font-mono); }
.pf .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; }
.pf .kaart--strak { padding: 6px 0; }
.pf-blok { display: flex; flex-direction: column; gap: 10px; }
.pf-tweekolom { display: grid; grid-template-columns: 380px 1fr; gap: 14px; align-items: start; }
.pf-voetnoot { display: block; font-size: 12.5px; color: var(--c-ink-3); line-height: 1.55; margin: 4px 0 10px; }
.pf-melding { padding: 11px 15px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; }
.pf-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); }
.pf-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }

/* knoppen */
.pf-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; }
.pf-knop:hover { border-color: var(--c-ink-3); }
.pf-knop--klein { padding: 6px 13px; font-size: 12.5px; }
.pf-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); }
.pf-knop--primair:hover { background: var(--gradient-primair-hover); }
.pf-knop.is-dicht { opacity: .55; cursor: not-allowed; }

/* cockpit: portefeuilles + complexen */
.pf-pfkop { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-ui); padding: 2px 0; }
.pf-pfkop strong { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.pf-pfkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.pf-draagvlak { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-width: 210px; }
.pf-draagvlak i { flex: 1; display: block; height: 7px; border-radius: var(--radius-pill); background: var(--c-groen); max-width: 120px; }
.pf-draagvlak.is-onder i { background: var(--c-oker); }
.pf-draagvlak b { font-size: 11px; color: var(--c-ink-2); }
.pf-draagvlak.is-onder b { color: var(--c-amber); }
.pf-cxrij { display: grid; grid-template-columns: 1.6fr .9fr .9fr .5fr .6fr .8fr; gap: 12px; align-items: center; padding: 10px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.pf-cxrij--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; }
.pf-cxrij strong { display: block; font-size: 13px; color: var(--c-ink); }
.pf-cxrij em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.pf-fnglyph { font-style: normal; color: var(--c-groen-d); margin-right: 4px; }
.pf-label { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; border-radius: 6px; background: var(--c-oker); color: var(--c-ink); font: 800 13px var(--font-mono); padding: 0 6px; }
.pf-label.is-doel { background: var(--c-groen); color: var(--c-creme); }
.pf-conf { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; font: 800 12px var(--font-mono); }
.pf-conf.is-A { background: var(--c-groen-t); color: var(--c-groen-d); }
.pf-conf.is-B { background: var(--c-sage-t); color: var(--c-groen-d); }
.pf-conf.is-C { background: var(--c-amber-t); color: var(--c-amber); }
.pf-conf.is-D { background: var(--c-rood-t); color: var(--c-rood); }

/* scenario lab */
.pf-scrij { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: var(--font-ui); }
.pf-scrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.pf-scrij strong { font-size: 13.5px; color: var(--c-ink); }
.pf-scrij em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.pf-scrij .chip { align-self: flex-start; margin-top: 3px; }
.pf-parameters { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.pf-param { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-ink-2); }
.pf-param span { width: 74px; flex: none; font-weight: 700; color: var(--c-ink); }
.pf-param select { flex: 1; padding: 9px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 13px var(--font-ui); color: var(--c-ink); }
.pf-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 6px; }
.pf-cijfers > div { background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 13px 15px; }
.pf-cijfers b { display: block; font-size: 19px; font-weight: 800; color: var(--c-ink); margin: 2px 0; }
.pf-cijfers em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.pf-sprongrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); }
.pf-sprongrij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.pf-labels { display: inline-flex; align-items: center; gap: 8px; }
.pf-labels i { font-style: normal; color: var(--c-ink-3); }
.pf-actiebalk { margin-top: 6px; }

/* expert review */
.pf-valrij { display: flex; align-items: center; gap: 14px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; }
.pf-valrij.is-klaar { border-color: var(--c-groen); }
.pf-valrij > div { flex: 1; }
.pf-valrij strong { display: block; font-size: 13px; color: var(--c-ink); }
.pf-valrij em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.pf-expert { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: var(--lijndikte) solid var(--c-lijn); }
.pf-expert:first-of-type { border-top: 0; }
.pf-expert > div { flex: 1; }
.pf-expert strong { display: block; font-size: 13.5px; color: var(--c-ink); }
.pf-expert em { display: block; font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.pf-trigger { color: var(--c-terra-d) !important; }

/* programma's + poorten */
.pf-prkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-prkop strong { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.pf-prkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.pf-prkop .chip { margin-left: auto; }
.pf-poorten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.pf-poort { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); border-radius: 11px; padding: 10px 13px; cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--c-rood); }
.pf-poort i { font-style: normal; font-weight: 800; }
.pf-poort.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.pf-poort:disabled { cursor: default; opacity: .8; }
/* FT-7.3a · auto-poorten (read-only, gevoed door de bron) + bron-label */
.pf-poort { flex-wrap: wrap; }
.pf-poort--auto { cursor: default; }
.pf-poort__bron { width: 100%; font-size: 9.5px; font-weight: 600; font-style: normal; letter-spacing: .02em; opacity: .75; margin-top: 1px; }
.pf-certkies { margin: 4px 0 10px; }
.pf-certkies span { width: 200px; }

/* certificering */
.pf-matrix { display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 10px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.pf-matrix:last-child { border-bottom: 0; }
.pf-matrix--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.pf-matrix strong { display: block; font-size: 13px; color: var(--c-ink); }
.pf-matrix em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.pf-cel { text-align: center; }
.pf-batch { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.pf-batchrij { display: flex; align-items: center; gap: 14px; }
.pf-batchrij > div { flex: 1; }
.pf-batchrij strong { display: block; font-size: 13.5px; color: var(--c-ink); }
.pf-batchrij em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }

/* regelgeving */
.pf-regelrij { display: grid; grid-template-columns: 1.5fr .9fr 1.4fr .7fr .6fr; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.pf-regelrij:last-child { border-bottom: 0; }
.pf-regelrij--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.pf-regelrij strong { display: block; font-size: 13px; color: var(--c-ink); }
.pf-regelrij em.mono { display: block; font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.pf-regelrij b.mono { font-size: 12px; color: var(--c-ink); }

@media (max-width: 1080px) { .pf-tweekolom { grid-template-columns: 1fr; } .pf-matrix { grid-template-columns: 1.4fr repeat(4, 1fr); } }

/* F1-uitbreiding (Fuchs&Eule-model NL, 16-07-2026) */
.pf-actiebalk--boven { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 1a · screening */
.pf-scrrij { display: grid; grid-template-columns: 1.5fr 52px 1.9fr 1fr 70px auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--c-lijn); }
.pf-scrrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-top: 0; }
.pf-scrrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; }
.pf-scrrisicos { display: flex; flex-wrap: wrap; gap: 4px; }

/* 1c · esg */
.pf-esgkop { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; }
.pf-esgkop em { font-size: 11px; color: var(--c-ink-2); font-style: normal; flex: 1; }
.pf-esgrij { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 16px; align-items: center; }
.pf-esgrij .kicker { display: block; margin-bottom: 4px; }

/* 2a · due diligence */
.pf-ddchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 10px 0; }
.pf-ddcheck { display: flex; gap: 8px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); font: inherit; font-size: 12px; text-align: left; padding: 8px 10px; cursor: pointer; color: var(--c-ink); }
.pf-ddcheck i { font-style: normal; font-weight: 800; color: var(--c-ink-2); }
.pf-ddcheck.is-ok { border-color: var(--c-groen-d); }
.pf-ddcheck.is-ok i { color: var(--c-groen-d); }
.pf-ddcheck[disabled] { opacity: .6; cursor: default; }

/* 2b · plannen */
.pf-faserij { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--c-lijn); }
.pf-faserij b { font-size: 13px; color: var(--c-groen-d); }
.pf-faserij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; }

/* 3a · subsidiestraat */
.pf-budgetrij { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--c-lijn); }
.pf-budgetrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; }
.pf-stepper { display: flex; align-items: center; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.pf-stap { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--c-ink-2); }
.pf-stap i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-lijn); display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--c-paneel); }
.pf-stap.is-af { color: var(--c-ink); font-weight: 700; }
.pf-stap.is-af i { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); }
.pf-staplijn { flex: 1 0 18px; height: 1px; background: var(--c-lijn); }

/* 4b · draagvlak */
.pf-dvrij { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 12.5px; }

.pf-expnieuw { align-self: flex-start; margin-bottom: 6px; }

/* FT-7.1b · live BAG-claimlaag (dwarslaag 0.8, bron /api/gebouwen) */
.pf-baglaag { margin: 0 0 16px; padding: 14px 18px; }
.pf-baglaag__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-baglaag__kop strong { font-size: 13px; color: var(--c-ink); }
.pf-baglaag__kop .mono { font-size: 10.5px; color: var(--c-ink-3); }
.pf-bagrij { display: grid; grid-template-columns: 1fr 1.9fr; gap: 14px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; }
.pf-bagrij strong { display: block; font-size: 12.5px; color: var(--c-ink); }
.pf-bagrij em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.pf-bagclaims { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-bagclaim { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; padding: 3px 7px; }
.pf-bagclaim .mono { font-size: 10px; color: var(--c-ink-3); }
.pf-bagclaim .pf-conf { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.pf-bagok { font-style: normal; font-weight: 800; font-size: 9.5px; letter-spacing: .04em; color: var(--c-groen-d); background: var(--c-groen-t); border-radius: 99px; padding: 1px 6px; margin-left: 4px; }

/* FT-7.2a · geleverde adviesproducten uit de documentkluis */
.pf-docs { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); }
.pf-docs .kicker { display: block; margin-bottom: 6px; }
.pf-doc { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-ink); border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 7px 11px; margin: 0 6px 6px 0; background: var(--c-paneel); transition: border-color 150ms, box-shadow 150ms; }
.pf-doc:hover { border-color: var(--c-groen-d); box-shadow: var(--schaduw-tegel-hover); }
.pf-doc i { font-style: normal; color: var(--c-groen-d); font-size: 15px; }
.pf-doc strong { display: block; font-size: 12.5px; }
.pf-doc em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; }

/* ── beveiliging.css ── */
/* beveiliging.js — Mijn beveiliging-drawer (FT-8.1a) · alleen tokens */
.bv-sectie { padding: 16px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.bv-sectie:first-child { border-top: 0; padding-top: 4px; }
.bv-sectie .kicker { display: block; margin-bottom: 8px; }
.bv-sub { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; margin: 0 0 10px; }
.bv-velden { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bv-veld { display: flex; flex-direction: column; gap: 5px; }
.bv-veld span { font-size: 12px; font-weight: 700; color: var(--c-ink); }
.bv-veld input { padding: 10px 12px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13.5px var(--font-ui); color: var(--c-ink); }
.bv-veld input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen); }

.bv-totp { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); }
.bv-secret { margin: 8px 0; }
.bv-secret .kicker { display: block; margin-bottom: 3px; }
.bv-secret code { display: block; padding: 8px 10px; border-radius: 8px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink); word-break: break-all; }
.bv-uri { font-size: 11px !important; color: var(--c-ink-2) !important; }

.bv-sessies { display: flex; flex-direction: column; }
.bv-sesrij { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.bv-sesrij:first-child { border-top: 0; }
.bv-sesrij > div { flex: 1; min-width: 0; }
.bv-sesrij strong { display: block; font-size: 13px; color: var(--c-ink); }
.bv-sesrij .mono { display: block; font-size: 10.5px; color: var(--c-ink-3); }
.bv-dit { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--c-groen-d); background: var(--c-groen-t); border-radius: 99px; padding: 1px 6px; }
.bv-afmeld { color: var(--c-rood); }

/* QR voor de authenticator (04-09): vast formaat, wit vlak zodat elke scanner hem leest */
.bv-qr { width: 196px; height: 196px; padding: 8px; background: #FFFFFF; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); margin: 10px 0 12px; }
.bv-qr svg { width: 100%; height: 100%; display: block; }
.bv-handmatig { margin-top: 6px; }
.bv-handmatig summary { cursor: pointer; font-size: .85rem; color: var(--c-ink-2); }

/* ── mijnzone.css ── */
/* mijnzone.js — «Mijn zone» (VERWIJZING V2) · alleen tokens.
   Sober met opzet: dit scherm hoort niet te verleiden tot openslaan met de
   klant ernaast. Eén accentregel bovenaan die zegt waarom. */
.mz-sectie { padding: 16px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.mz-sectie:first-of-type { border-top: 0; padding-top: 4px; }
.mz-sectie h3 { margin: 0 0 6px; font: 700 14px/1.3 var(--font-ui); color: var(--c-ink); }
.mz-sub { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; margin: 0 0 10px; }
.mz-nb { margin-top: 8px; font-style: italic; }

/* de reden dat dit achter een eigen ingang staat, in één regel */
.mz-waarschuwing {
  margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius, 8px);
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5;
}

.mz-saldo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.mz-saldo__bedrag { font: 700 26px/1.1 var(--font-mono); color: var(--c-ink); }
.mz-saldo__sub { font-size: 12px; color: var(--c-ink-2); }

.mz-rijen { display: flex; flex-direction: column; }
.mz-rij--link { text-decoration: none; color: inherit; }
.mz-rij--link:hover strong { text-decoration: underline; }
.mz-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn);
}
.mz-rij:first-child { border-top: 0; }
.mz-rij__wat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-rij__wat strong { font: 600 13px/1.35 var(--font-ui); color: var(--c-ink); }
.mz-rij__wat .mz-sub { margin: 0; font-size: 11.5px; }
.mz-rij__bedrag { font: 600 13.5px var(--font-mono); color: var(--c-ink); white-space: nowrap; }
/* een teruggedraaide boeking leest anders dan een opbouw — dat verschil
   hoort zichtbaar te zijn zonder dat je de reden hoeft te lezen */
.mz-rij--retour .mz-rij__bedrag { color: var(--c-rood, var(--c-ink-2)); }

.mz-afmeld { margin-left: auto; }

/* Terugkijken per maand. Alleen maanden waarin voor deze persoon iets
   staat — door lege maanden bladeren helpt niemand. */
.mz-maanden { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mz-maand {
  padding: 5px 11px; border-radius: 99px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme);
  font: 600 12px var(--font-ui); color: var(--c-ink-2);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mz-maand:hover { border-color: var(--c-lijn); color: var(--c-ink); }
.mz-maand:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.mz-maand--nu { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
@media (prefers-reduced-motion: reduce) { .mz-maand { transition: none; } }

/* Backoffice in Mijn zone (N1). Compact: dit is geen werkplek maar een
   inhoudsopgave — je komt hier om ergens heen te gaan, niet om te blijven. */
.mz-back { display: flex; flex-direction: column; gap: 12px; }
.mz-backwr strong { display: block; font: 700 12.5px var(--font-ui); color: var(--c-ink); margin-bottom: 5px; }
.mz-backmods { display: flex; flex-wrap: wrap; gap: 5px; }
.mz-backmod {
  border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer;
  padding: 4px 10px; border-radius: 99px; font: 600 11.5px var(--font-ui); color: var(--c-ink-2);
}
.mz-backmod:hover { border-color: var(--accent, var(--c-groen)); color: var(--accent, var(--c-groen)); }
.mz-backmod:focus-visible { outline: 3px solid var(--accent, var(--c-groen)); outline-offset: 1px; }

/* PR-B · bezwaar tegen een provisieboeking. Provisie is loon; als iemand
   denkt dat het niet klopt hoort hij dat te kunnen zeggen op de plek waar
   hij het ziet — niet in een mail die niemand kan volgen. */
.mz-rij__bezwaar { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 2px; }
.mz-bezwaarknop {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 .72rem var(--font-ui); color: var(--ink3); text-decoration: underline;
}
.mz-bezwaarknop:hover { color: var(--ink); }
.mz-bezwaar { font: 600 .72rem var(--font-ui); font-style: normal; color: var(--let); }
.mz-bezwaar--toegekend { color: var(--goed); }
.mz-bezwaar--afgewezen, .mz-bezwaar--ingetrokken { color: var(--ink3); }

.mz-bezwaarlaag {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 23, 26, .5);
}
.mz-bezwaarkaart {
  width: min(460px, 100%); background: var(--kaart); border-radius: var(--radius);
  padding: 22px 24px; display: grid; gap: 12px; box-shadow: var(--schaduw-zwevend);
}
.mz-bezwaarkaart h3 { margin: 0; font-size: 1rem; }
.mz-veld { display: grid; gap: 4px; font: 600 .78rem var(--font-ui); color: var(--ink2); }
.mz-veld textarea, .mz-veld input {
  font: inherit; font-size: .86rem; font-weight: 400; padding: 8px 10px;
  border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein);
  background: var(--kaart); color: var(--ink);
}
.mz-bezwaarvoet { display: flex; gap: 8px; justify-content: flex-end; }

/* ── pwa.css ── */
/* pwa.js — FT-8.3b/c · PWA-schil-affordances (install/update/offline) · tokens */
.pwa-balk {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 900; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: min(92vw, 720px); pointer-events: none;
}
.pwa-chip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px var(--font-ui); border-radius: 99px; padding: 8px 14px;
  border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel);
  color: var(--c-ink); cursor: default; box-shadow: var(--schaduw-knop);
}
button.pwa-chip { cursor: pointer; }
button.pwa-chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.pwa-chip--offline { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }
.pwa-chip--update { background: var(--gradient-primair); border-color: transparent; color: var(--c-creme); }
.pwa-chip--update:hover { background: var(--gradient-primair-hover); }
.pwa-chip--install { background: #fff; }
.pwa-chip--install:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); }

@media (prefers-reduced-motion: reduce) { .pwa-chip { box-shadow: none; } }

/* ── werkdag.css ── */
/* =====================================================================
   werkdag.css — schouw · wvb · signalen · dagboog · meldingen.
   Op tokens; diepte alleen via de vaste tokens.
===================================================================== */

.wd { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.wd .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin: 10px 0 8px; }
.wd-kop { margin-bottom: 18px; }
.wd-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.wd-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.wd .mono { font-family: var(--font-mono); }
.wd .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; }
.wd .kaart--strak { padding: 6px 0; }
.wd-blok { display: flex; flex-direction: column; gap: 9px; }
.wd-blok.is-actief { border-color: var(--c-groen); }
.wd-rek { flex: 1; }
.wd-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wd-sub { font-size: 12px; color: var(--c-ink-3); }
.wd-voetnoot { font-size: 12px; color: var(--c-ink-3); font-style: normal; line-height: 1.5; }
.wd-melding { padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; }
.wd-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); }
.wd-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }

.wd-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; }
.wd-knop:hover { border-color: var(--c-ink-3); }
.wd-knop--klein { padding: 6px 12px; font-size: 12px; }
.wd-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); }
.wd-knop--primair:hover { background: var(--gradient-primair-hover); }
.wd-knop.is-dicht { opacity: .55; cursor: not-allowed; }

/* rijkoppen + checklists */
.wd-rijkop { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-ui); padding: 0; flex-wrap: wrap; }
div.wd-rijkop { cursor: default; }
.wd-rijkop strong { font-size: 14.5px; font-weight: 800; color: var(--c-ink); }
.wd-rijkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.wd-checkrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); }
.wd-checkrij--knop { background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; cursor: pointer; font-family: var(--font-ui); text-align: left; justify-content: flex-start; }
.wd-checkrij--knop i { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--c-paneel-2); color: var(--c-ink-3); }
.wd-checkrij--knop.is-ok i { background: var(--c-groen); color: var(--c-creme); }
.wd-checkrij--knop:disabled { cursor: default; }
.wd-janee { display: flex; gap: 6px; }
.wd-check { width: 32px; height: 28px; border-radius: 8px; border: 1.5px solid var(--c-lijn-2); background: var(--c-creme); cursor: pointer; font: 800 13px var(--font-ui); color: var(--c-ink-3); }
.wd-check.is-ok { background: var(--c-groen); border-color: var(--c-groen-d); color: var(--c-creme); }
.wd-check.is-nee { background: var(--c-rood); border-color: var(--c-rood); color: var(--c-creme); }

/* signalen + meldingen */
.wd-signaal, .wd-melding-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-family: var(--font-ui); padding: 12px 18px; font-size: 13px; color: var(--c-ink); }
.wd-signaal:last-child, .wd-melding-rij:last-child { border-bottom: 0; }
.wd-signaal:hover, .wd-melding-rij:hover { background: var(--c-creme); }
.wd-signaal i, .wd-melding-rij i { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--c-paneel-2); color: var(--c-ink-2); }
.wd-signaal i.is-rood { background: var(--c-rood-t); color: var(--c-rood); }
.wd-signaal i.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.wd-signaal i.is-groen, .wd-melding-rij i.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.wd-melding-rij i.is-terra { background: var(--c-terra-t); color: var(--c-terra-d); }
.wd-signaal span, .wd-melding-rij span { flex: 1; }
.wd-signaal em, .wd-melding-rij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.wd-melding-rij.is-ongelezen { background: var(--c-creme); }
.wd-melding-rij.is-ongelezen span { font-weight: 700; }
.wd-balkje { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.wd-chipknop { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 5px 13px; cursor: pointer; }
.wd-chipknop.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }

/* dagboog */
.wd-doelrij { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); }
.wd-doelrij:first-of-type { border-top: 0; }
.wd-doelrij > div { flex: 1; }
.wd-doelrij strong { display: block; font-size: 13px; color: var(--c-ink); margin-bottom: 5px; }
.wd-balk { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; max-width: 320px; }
.wd-balk b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); }
.wd-doelrij > span.mono { font-size: 12px; color: var(--c-ink-2); }
.wd-lognoot { display: flex; gap: 12px; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); }
.wd-lognoot:first-of-type { border-top: 0; }
.wd-lognoot em { font-size: 11px; color: var(--c-ink-3); font-style: normal; flex: none; padding-top: 2px; }
.wd-logform { display: flex; gap: 9px; margin-top: 6px; }
.wd-logform input { flex: 1; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13px var(--font-ui); color: var(--c-ink); }
.wd-visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1080px) { .wd-tweekolom { grid-template-columns: 1fr; } }

/* Foto-plicht (C2a) + templates (C2b) */
.wd-foto { border: 1px dashed var(--c-lijn); border-radius: 99px; background: none; font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer; color: var(--c-ink-2); white-space: nowrap; }
.wd-foto.is-vast { border-style: solid; border-color: var(--c-groen-d); color: var(--c-groen-d); font-weight: 700; }
.wd-tpl { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.wd-tpl__punt { font-size: 12.5px; color: var(--c-ink-2); }

/* ---------- Toegezegde uitvoerdata (Planning 2.0) ---------- */
.wd-reserveringen { border-color: var(--c-amber); }
.wd-resrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: var(--lijndikte) solid var(--c-lijn); padding: 11px 0; }
.wd-resrij strong { display: block; font: 700 .84rem var(--font-ui); }
.wd-resrij span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.wd-resacties { display: flex; gap: 6px; }
.wd-resleeg { padding: 12px 0; font-size: .78rem; color: var(--c-ink-3); }
.wd-resafgehandeld { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed var(--c-lijn);
  padding-top: 9px; margin-top: 4px; font-size: .66rem; color: var(--c-ink-3); }
.wd-resuitleg { margin: 8px 0 0; font: 400 .7rem/1.55 var(--font-ui); color: var(--c-ink-3); }

/* Akkoordknop: bij een blokkade écht uit, met de reden ernaast in plaats van
   erna — anders leer je pas na de klik dat het niet mag. */
.wd-akkoordrij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wd-knop--primair:disabled { background: var(--c-paneel); color: var(--c-ink-3);
  border-color: var(--c-lijn); cursor: not-allowed; }
.wd-blokkade { font: 700 .74rem var(--font-ui); color: var(--c-rood); }
.wd-vrij { font: 700 .74rem var(--font-ui); color: var(--c-groen-d); }

/* ── voorzieningen.css ── */
/* =====================================================================
   voorzieningen.css — wallboards + facilitair. Op tokens; diepte
   alleen via de vaste tokens.
===================================================================== */

.vz { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.vz .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin: 10px 0 8px; }
.vz-kop { margin-bottom: 18px; }
.vz-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.vz-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.vz .mono { font-family: var(--font-mono); }
.vz .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; }
.vz .kaart--strak { padding: 6px 0; }
.vz-blok { display: flex; flex-direction: column; gap: 9px; }
.vz-voetnoot { display: block; font-size: 12.5px; color: var(--c-ink-3); line-height: 1.55; margin: 4px 0 10px; }
.vz-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 15px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; }
.vz-knop:hover { border-color: var(--c-ink-3); }
.vz-knop--klein { padding: 5px 11px; font-size: 12px; }

/* wallboards */
.vz-tvrij { display: grid; grid-template-columns: 1.3fr 1.1fr 1.4fr .6fr 1fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); }
.vz-tvrij:last-child { border-bottom: 0; }
.vz-tvrij.is-actief { background: var(--c-creme); }
.vz-tvrij--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.vz-tvrij strong { display: block; font-size: 13px; color: var(--c-ink); }
.vz-tvrij em.mono { display: block; font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.vz-tvrij select { width: 100%; padding: 7px 9px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12px var(--font-ui); color: var(--c-ink); margin-bottom: 4px; }
.vz-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.vz-preview { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); background: var(--c-paneel); box-shadow: var(--schaduw-tegel); padding: 15px 17px; margin-bottom: 12px; }
.vz-preview__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vz-preview__kop strong { font-size: 14px; color: var(--c-ink); }
.vz-preview__kop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; flex: 1; }
.vz-unifi { display: flex; align-items: center; gap: 14px; }
.vz-unifi > i { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 16px; background: var(--c-groen-t); color: var(--c-groen-d); }
.vz-unifi > div { flex: 1; }
.vz-unifi strong { display: block; font-size: 14px; color: var(--c-ink); }
.vz-unifi em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.vz-kader169 { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); overflow: hidden; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-ink); }
.vz-kader169 iframe { width: 100%; height: 100%; border: 0; display: block; }

/* facilitair */
.vz-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.vz-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer; }
.vz-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); }
.vz-pand { display: flex; align-items: center; gap: 14px; }
.vz-pand > div { flex: 1; }
.vz-pand strong { display: block; font-size: 14px; color: var(--c-ink); }
.vz-pand em.mono { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.vz-middelrij { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink-2); flex-wrap: wrap; }
.vz-middelrij:last-child { border-bottom: 0; }
.vz-middelrij strong { flex: 1; font-size: 13px; color: var(--c-ink); min-width: 200px; }
.vz-doc { font-style: normal; color: var(--c-ink-3); }
.vz-meldform { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.vz-meldform input { flex: 1; min-width: 220px; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13px var(--font-ui); color: var(--c-ink); }
.vz-meldform select { padding: 10px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 13px var(--font-ui); color: var(--c-ink); }
.vz-koppel { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font-family: var(--font-ui); }
.vz-koppel:hover { border-color: var(--c-lijn-2); }
.vz-koppel strong { font-size: 13.5px; color: var(--c-ink); }
.vz-koppel span { font-size: 12px; color: var(--c-ink-2); }
.vz-koppel em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.vz-visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1080px) { .vz-tvrij { grid-template-columns: 1fr 1fr; } }

/* wallboard-editor */
.vz-eigenbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 10px; }
.vz-eigenbalk .kicker { margin: 0; }
.vz-editor { display: flex; flex-direction: column; gap: 12px; border-color: var(--c-lijn-2); }
.vz-editor__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vz-editor__kop strong { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.vz-editor__naam { display: flex; align-items: center; gap: 10px; max-width: 460px; }
.vz-editor__naam span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); flex: none; }
.vz-editor__naam input { flex: 1; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 13px var(--font-ui); color: var(--c-ink); }
.vz-editor__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.vz-editor__gebied { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); font-style: normal; margin: 10px 0 6px; }
.vz-editor__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-kpichip { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; }
.vz-kpichip:hover { border-color: var(--c-lijn-2); }
.vz-kpichip.is-aan { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.vz-hoog { color: var(--c-rood); font-size: 9px; }
.vz-pub { color: var(--c-groen-d); font-size: 9px; }
.vz-gekozen { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); margin-bottom: 6px; font-size: 12.5px; color: var(--c-ink); }
.vz-gekozen > b { width: 18px; flex: none; font-size: 10px; color: var(--c-ink-3); }
.vz-gekozen > span { flex: 1; font-weight: 600; }
.vz-mini { width: 26px; height: 26px; border-radius: 7px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); cursor: pointer; font: 700 12px var(--font-ui); color: var(--c-ink-2); }
.vz-mini[aria-disabled="true"] { opacity: .35; cursor: default; }
.vz-kader169--klein { margin-top: 4px; }
.vz-editor__voet { display: flex; align-items: center; gap: 10px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; }
.vz-editor__voet .vz-voetnoot { flex: 1; margin: 0; }
@media (max-width: 1080px) { .vz-editor__grid { grid-template-columns: 1fr; } }

/* drempels in de editor + rotatie-paneel */
.vz-gekozen--drempel { flex-direction: column; align-items: stretch; gap: 6px; }
.vz-gekozen__rij { display: flex; align-items: center; gap: 9px; }
.vz-gekozen__rij > b { width: 18px; flex: none; font-size: 10px; color: var(--c-ink-3); }
.vz-gekozen__rij > span { flex: 1; font-weight: 600; }
.vz-drempels { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-top: var(--lijndikte) dashed var(--c-lijn); }
.vz-drempels > em { font-size: 10px; color: var(--c-ink-3); font-style: normal; }
.vz-drempels label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-ink-2); }
.vz-drempels input { width: 84px; padding: 5px 7px; border-radius: 7px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); font: 600 11.5px var(--font-mono); color: var(--c-ink); }
.vz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.vz-dot.is-amber { background: var(--c-oker); }
.vz-dot.is-rood { background: var(--c-rood); }
.vz-eigen { font-size: 9px; color: var(--c-terra-d); }
.vz-standaard { font-size: 9px; color: var(--c-ink-3); }
.vz-rek { flex: 1; }
.vz-rotpaneel { display: flex; flex-direction: column; gap: 10px; border-color: var(--c-lijn-2); }
.vz-rotvoet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 10px; }
.vz-rotvoet label { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); }
.vz-rotvoet select { padding: 7px 9px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12px var(--font-ui); color: var(--c-ink); }
.vz-rotvoet .vz-voetnoot { flex: 1; min-width: 240px; margin: 0; }
.vz-mini--inchip { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; margin-left: 3px; }
.vz-knop.is-rotatie { border-color: var(--c-groen); color: var(--c-groen-d); }

/* eigen mededeling in de editor */
.vz-msg { display: flex; gap: 10px; flex-wrap: wrap; }
.vz-msg label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--c-ink-2); }
.vz-msg label span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.vz-msg input { padding: 8px 11px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12.5px var(--font-ui); color: var(--c-ink); width: 130px; }
.vz-msg__tekst { flex: 1; min-width: 260px; }
.vz-msg__tekst input { width: 100%; }

/* Kantoorinkoop (facilitair · 15-07) */
.vz-inkoopchips { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.vz-chip { border: 1px solid var(--c-lijn); border-radius: 99px; background: var(--c-paneel); font: inherit; font-size: 12.5px; padding: 6px 14px; cursor: pointer; color: var(--c-ink); }
.vz-chip.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, var(--c-paneel)); font-weight: 600; }
.vz-krij { display: grid; grid-template-columns: 1.8fr .9fr 1.1fr .7fr auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.vz-krij:last-child { border-bottom: 0; }
.vz-krij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }
.vz-krij.is-laag { background: color-mix(in srgb, var(--c-amber) 6%, transparent); }
.vz-krij__art { display: flex; flex-direction: column; }
.vz-krij__art em { font-style: normal; font-size: 11px; color: var(--c-ink-2); }
.vz-krij__vrd { display: flex; flex-direction: column; }
.vz-krij__vrd strong.is-laag { color: var(--c-amber); }
.vz-krij__vrd em { font-size: 10.5px; color: var(--c-ink-2); }
.vz-krij__lev { display: flex; flex-direction: column; font-size: 12px; }
.vz-krij__lev em { font-size: 10.5px; color: var(--c-ink-2); }
.vz-mandtel { display: inline-flex; align-items: center; gap: 8px; }
.vz-mand { margin-top: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.vz-mand__kop { display: flex; justify-content: space-between; align-items: center; }

/* Sleutel- & toegangsbeheer (E3c) */
.vz-slsignaal { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 14px; font-size: 12.5px; color: var(--c-amber); font-weight: 600; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vz-slrij { display: grid; grid-template-columns: 1.8fr 1.1fr .9fr auto auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.vz-slrij:last-child { border-bottom: 0; }
.vz-slrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }
.vz-slrij__wat { display: flex; flex-direction: column; }
.vz-slrij__wat em { font-style: normal; font-size: 11px; color: var(--c-ink-2); }

/* Inkoop toevoegen/bewerken (lat ①②⑤) */
.vz-inkoopbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vz-inlinebtn { border: 0; background: none; color: var(--c-groen-d); font: inherit; font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; }

/* F8 a/b · spoed-balk + instellingen-subregel */
.vz-spoed { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-color: var(--c-rood); margin-bottom: 12px; }
.vz-spoed i { font-style: normal; color: var(--c-rood); font-size: 18px; }
.vz-spoed em { display: block; font-size: 11.5px; color: var(--c-ink-2); font-style: normal; }
.vz-spoed .vz-knop { margin-left: auto; }
.vz-balk { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.vz-hint { font-size: 11.5px; color: var(--c-ink-2); }
.vz-rek { flex: 1; }
.vz-subregel { display: block; font-size: 10px; color: var(--c-ink-2); font-style: normal; }
.vz-urlveld { width: 100%; box-sizing: border-box; font-size: 11.5px; }

/* Reviewronde Tim 23-07 · punt 14: accounts & abonnementen */
.vz-acrij { display: grid; grid-template-columns: 1.4fr .8fr auto 1.6fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; }
.vz-acrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; }
.vz-acrij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vz-acrij__wat em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.vz-acrij__toegang { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.vz-acrij.is-uit { opacity: .55; }
.vz-actoegang { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .68rem; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 3px 8px; background: var(--c-paneel); }
.vz-actoegang button { border: 0; background: none; cursor: pointer; color: var(--c-ink-3); font: inherit; padding: 0; }
.vz-actoegang button:hover { color: var(--c-rood); }
.vz-offboard { padding: 14px 16px; border-color: var(--c-terra, var(--c-amber)); display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vz-offboardrij { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--c-lijn); padding-top: 8px; font-size: .78rem; }
@media (max-width: 980px) { .vz-acrij { grid-template-columns: 1fr; gap: 5px; } .vz-acrij--kop { display: none; } }

/* ── dashboard.css ── */
/* dashboard.css — domein-dashboards (02-08, akkoord Michiel).
   Eén stramien voor Relaties · Verkoop · Uitvoering: KPI-strip,
   werkvoorraad-kaart met doorklik, één diagram (staafgroei-norm via de
   balk-klassen), signalen. Alleen tokens — geen losse literals. */
.dash-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.dash-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.dash-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dash-zij { display: flex; flex-direction: column; gap: 14px; }
.dash-lijst, .dash-diagram, .dash-signalen { padding: 14px 18px; display: flex; flex-direction: column; }
.dash-kaartkop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.dash-open { border: 0; background: none; padding: 0; font: inherit; font-size: .7rem; font-weight: 700;
  color: var(--c-groen-d); cursor: pointer; white-space: nowrap; }
.dash-open:hover { text-decoration: underline; }
.dash-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px;
  border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; color: var(--c-ink);
  border-left: 0; border-right: 0; border-bottom: 0; background: none; width: 100%;
  text-align: left; font-family: inherit; cursor: pointer; text-decoration: none; }
.dash-rij:hover { background: var(--c-paneel); }
.dash-rij .chip { flex-shrink: 0; }
.dash-ref { color: var(--c-groen-d); font-weight: 700; font-size: .7rem; }
.dash-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 8px 0 0; }
.dash-balken { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dash-balkrij { display: grid; grid-template-columns: 118px 1fr 44px; gap: 10px; align-items: center; font-size: .72rem; }
.dash-balklbl { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-baan { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; }
.dash-balk { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-sage); }
.dash-balkrij b { text-align: right; font-size: .7rem; }
.dash-signalen { gap: 2px; }
.dash-signaal { font-size: .74rem; color: var(--c-ink-2); padding: 6px 2px; border: 0; background: none;
  text-align: left; font-family: inherit; width: 100%; }
.dash-signaal.is-warm { color: var(--c-amber); font-weight: 600; }
button.dash-signaal { cursor: pointer; color: var(--c-groen-d); }
button.dash-signaal:hover { text-decoration: underline; }
@media (max-width: 1000px) { .dash-raster { grid-template-columns: 1fr; } }