/* Eyefly Cockpit — herbruikbare componentbibliotheek ("Gouden Componenten").
   NIEUWE LAAG naast de bestaande cockpit.css — namespace `ec-` zodat er niets botst
   met bestaande .btn/.card/.badge/.sbal. Geladen NÁ tokens.css + cockpit.css.
   Alles op de centrale tokens (tokens.css + cockpit.css :root); geen hardcoded kleuren
   behalve de kant-en-klare rgba-tinten van het vaste palet (blue/purple/green/amber/urgent).
   Bijbehorende factory-functies: recon/js/components.js. Live overzicht: #/instellingen/componenten. */

/* ====== animaties ====== */
@keyframes ec-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ec-spin{to{transform:rotate(360deg)}}

/* ====== 06 · Button ====== */
.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);border-radius:var(--r-sm);padding:9px 16px;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .1s var(--ease);border:1px solid;text-decoration:none;white-space:nowrap}
.ec-btn[hidden]{display:none}   /* display:inline-flex overschrijft anders het hidden-attribuut (o.a. de #ph2-edit-knop die pas ná het laden bedraad wordt) */
.ec-btn:active{transform:scale(.97)}
.ec-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.ec-btn svg{flex:0 0 auto}
.ec-btn--prim{color:#fff;background:rgba(100,32,133,.28);border-color:rgba(154,79,208,.5);box-shadow:0 6px 18px -10px rgba(154,79,208,.65)}
.ec-btn--prim:hover:not(:disabled){background:rgba(100,32,133,.42);border-color:rgba(154,79,208,.85)}
.ec-btn--ghost{color:var(--text-2);background:none;border-color:var(--line-2)}
.ec-btn--ghost:hover:not(:disabled){color:var(--text);border-color:var(--text-2);background:rgba(255,255,255,.04)}
.ec-btn--mini{font-size:var(--fs-sm);padding:7px 12px;color:var(--text-2);background:none;border-color:var(--line-2)}
.ec-btn--mini:hover:not(:disabled){color:var(--text);border-color:var(--text-2);background:rgba(255,255,255,.04)}
.ec-btn--mini.is-on{border-color:var(--purple);background:rgba(154,79,208,.16);color:#fff}
.ec-btn--icon{padding:0;width:36px;height:36px;color:var(--text-2);background:none;border-color:var(--line-2)}
.ec-btn--icon:hover:not(:disabled){color:var(--text);border-color:var(--text-2);background:rgba(255,255,255,.04)}
.ec-btn--danger{color:#e3aab1;background:rgba(255,93,115,.1);border-color:rgba(255,93,115,.4)}
.ec-btn--danger:hover:not(:disabled){background:rgba(255,93,115,.18);border-color:rgba(255,93,115,.65)}
.ec-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:ec-spin .7s linear infinite;flex:0 0 auto}

/* ====== 05 · Badge ====== */
.ec-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--text-2);background:rgba(255,255,255,.03);white-space:nowrap;line-height:1.4}
.ec-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex:0 0 auto}
/* --lg = de prominente kop-badge (project-health, meerwerk): 27px, gelijk aan de .sbal-pill
   waar 'ie naast staat. Verving inline font-size/padding-overrides op de aanroepplek. */
.ec-badge--lg{font-size:var(--fs-xs);line-height:15px;padding:5px 11px}
.ec-badge--blue{color:#9fd4f2;border-color:rgba(43,179,240,.5);background:rgba(43,179,240,.12)}
.ec-badge--purple{color:#cba3e6;border-color:rgba(154,79,208,.5);background:rgba(154,79,208,.14)}
.ec-badge--green{color:#7fe3bd;border-color:rgba(52,211,154,.5);background:rgba(52,211,154,.12)}
.ec-badge--amber{color:#f0c27e;border-color:rgba(232,163,61,.5);background:rgba(232,163,61,.12)}
.ec-badge--red{color:#e3aab1;border-color:rgba(255,93,115,.45);background:rgba(255,93,115,.1)}
.ec-badge--muted{color:var(--text-2);border-color:var(--line-2);background:rgba(255,255,255,.03)}

/* ====== 07 · Chip (selecteerbaar) ====== */
/* Actieve staat + teller volgen de app-canon (pl-qf-chip, saleslijst): paars actief,
   teller als eigen badge — zo is toekomstige adoptie in de views een visuele no-op. */
.ec-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:border-color .14s var(--ease),color .14s var(--ease),background .14s var(--ease)}
.ec-chip:hover{border-color:var(--text-3);color:var(--text)}
.ec-chip.is-on{background:rgba(154,79,208,.16);border-color:rgba(154,79,208,.55);color:#e7ddf7}
.ec-chip__check{display:none}
.ec-chip.is-on .ec-chip__check{display:inline-flex;color:var(--purple)}
.ec-chip__count{font-size:var(--fs-2xs);font-weight:700;background:var(--surface);color:var(--text-3);border-radius:var(--r-pill);padding:0 7px;font-variant-numeric:tabular-nums;font-style:normal}
.ec-chip.is-on .ec-chip__count{background:rgba(154,79,208,.3);color:#e7ddf7}

/* ====== 08 · Toggle-switch (D1a-canon: ✕/✓-slots + paars-getinte thumb) ====== */
/* Woord-schakelaar-anatomie zonder woorden (ontwerpronde 07-2026): track met rand + schuivende
   thumb in de actieve-staat-taal van chip/seg (paars-waas + rand). Standaard 28px (chip-band),
   --sm 22px (badge-band, voor kaartkoppen en dichte regels). Markup: toggle()/toggleHTML(). */
.ec-sw{position:relative;display:inline-flex;align-items:center;height:28px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--panel-2);padding:2px;cursor:pointer;flex:0 0 auto;transition:border-color .18s var(--ease)}
.ec-sw:hover{border-color:var(--text-3)}
.ec-sw__opt{position:relative;z-index:1;width:30px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);border-radius:var(--r-pill);transition:color .18s var(--ease)}
.ec-sw__opt svg{width:12px;height:12px;display:block}
.ec-sw__thumb{position:absolute;z-index:0;top:2px;left:2px;width:30px;height:22px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(152,162,184,.13);transition:left .2s cubic-bezier(.2,.8,.2,1),background .18s var(--ease),border-color .18s var(--ease)}
.ec-sw:not(.is-on) .ec-sw__opt--uit{color:var(--text-2)}
.ec-sw.is-on .ec-sw__thumb{left:32px;background:rgba(154,79,208,.22);border-color:rgba(154,79,208,.6)}
.ec-sw.is-on .ec-sw__opt--aan{color:#fff}
.ec-sw:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ec-sw--sm{height:22px}
.ec-sw--sm .ec-sw__opt{width:25px;height:16px}
.ec-sw--sm .ec-sw__opt svg{width:10px;height:10px}
.ec-sw--sm .ec-sw__thumb{width:25px;height:16px}
.ec-sw--sm.is-on .ec-sw__thumb{left:27px}
.ec-swrow{display:inline-flex;align-items:center;gap:11px}
.ec-swrow__lbl{font-size:var(--fs-base);color:var(--text-2)}

/* ====== 09 · Segmented control + underline-tabs ====== */
/* 9b · PeriodeKiezer: label · boekjaar (segmented) · ‹ periode › — de periodekiezer van de rapportages.
   ⚠De keuzelijst krijgt width:auto: de globale input,select{width:100%} in cockpit.css zou 'm anders
   de hele actiebalk laten vullen. */
.ec-perkies{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec-perkies__lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.ec-perkies__sel{width:auto;min-width:190px}
.ec-perkies__nav{width:30px;height:34px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);color:var(--text-2);font-size:18px;line-height:1;cursor:pointer}
.ec-perkies__nav:hover:not(:disabled){color:var(--text-1);border-color:var(--line-2)}
.ec-perkies__nav:disabled{opacity:.35;cursor:default}
.ec-seg{display:inline-flex;gap:3px;padding:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.ec-seg__btn{font-family:var(--font-display);padding:6px 14px;border-radius:6px;border:1px solid transparent;background:none;color:var(--text-2);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease);white-space:nowrap}
.ec-seg__btn.is-on{background:rgba(154,79,208,.18);color:#fff;border-color:rgba(154,79,208,.4)}
/* Teller in de segmented (optioneel; zelfde vorm als .ec-ftabs__count zodat de twee gelijk lezen).
   inline-flex op de knop is nodig zodra er een tweede kind in zit — anders staat het getal onder
   het label i.p.v. ernaast. */
.ec-seg__btn{display:inline-flex;align-items:center;gap:7px}
.ec-seg__count{font-size:var(--fs-2xs);font-weight:700;color:var(--text-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 6px;font-variant-numeric:tabular-nums}
.ec-seg__btn.is-on .ec-seg__count{color:var(--text);border-color:var(--line-2)}
.ec-seg__count--amber{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.1)}
.ec-seg__count--red{color:#ff8b9c;border-color:rgba(255,93,115,.4);background:rgba(255,93,115,.1)}
.ec-seg__count--green{color:#7fe3c0;border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.1)}
/* ====== 10 · Card + SummaryStrip ====== */
/* Standaard-informatiekaart — ÉÉN schil voor de drie dragers (design-audit D2, huisstijl §8):
   surface + 1px rand + r-xl + gradient-toprandje. De delta's (schaduw/padding/anatomie)
   staan bij de families zelf; convergentie van de anatomie volgt per scherm. */
.card,.ph2-card,.ec-card,.opv-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.card::before,.ph2-card::before,.ec-card::before,.opv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--grad);z-index:2}
.ec-card{box-shadow:var(--e-1)}
.ec-card__h{padding:13px 15px 11px;border-bottom:1px solid var(--line)}
.ec-card__eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ec-card__title{margin:4px 0 0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.ec-card__b{padding:13px 15px;color:var(--text-2);font-size:var(--fs-sm)}
.ec-sumstrip{display:grid;grid-template-columns:repeat(var(--ec-cols,4),1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.ec-sumstrip__cell{padding:12px 15px;border-left:1px solid var(--line)}
.ec-sumstrip__cell:first-child{border-left:0}
.ec-sumstrip__n{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ec-sumstrip__n--ok{color:var(--green)}
.ec-sumstrip__l{color:var(--text-3);font-size:var(--fs-2xs);margin-top:2px}

/* ====== 11 · ProgressBar ====== */
.ec-prog__label{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-2);margin-bottom:5px}
.ec-prog__label b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}
.ec-track{height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden}
.ec-track__fill{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--grad);transition:width .9s var(--ease)}
.ec-track__fill--green{background:var(--green)}
.ec-track__fill--amber{background:var(--amber)}
.ec-track__fill--blue{background:var(--blue)}
.ec-track__fill--red{background:var(--urgent)}

/* ====== 17c · Dialoog (bevestig / meldFout) ====== */
/* Vervangt de systeem-popups van window.confirm/alert. Draait op venster() (Esc + klik-buiten).
   Kop-accentlijn volgt de kaart-signatuur; --gevaar kleurt 'm rood voor wat niet terug kan. */
/* --z-dialoog (boven --z-modal): een bevestiging wordt vanuit een open modal aangeroepen en moet
   dáárbovenop landen — op --z-overlay verdween hij achter het venster dat hem opende (21-07). */
.ec-dlgback{position:fixed;inset:0;z-index:var(--z-dialoog,1020);background:var(--scrim);display:grid;place-items:center;padding:22px}
.ec-dlg{position:relative;width:min(460px,100%);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ec-dlg::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--grad)}
.ec-dlg--gevaar::before{background:linear-gradient(90deg,var(--urgent),var(--purple))}
/* Breder venster voor dialogen met een echte tekstinvoer (mailtekst): op 460px wordt een
   herinneringsbericht een kolom van ~45 tekens en is niet te beoordelen vóór je het verstuurt. */
.ec-dlg--breed{width:min(680px,100%)}
.ec-dlg__kop{padding:17px 19px 0}
.ec-dlg__eyb{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.ec-dlg__titel{margin:5px 0 0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.3}
.ec-dlg__body{padding:9px 19px 0;font-size:var(--fs-base);color:var(--text-2);line-height:1.55}
.ec-dlg__punten{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ec-dlg__punten li{display:flex;gap:9px;font-size:var(--fs-sm);line-height:1.45}
.ec-dlg__punten li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:6px;border-radius:50%;background:var(--line-2)}
.ec-dlg__punten li.let::before{background:var(--amber)}
/* De technische regel onderscheidt zich met een kader + gedempte kleur, niet met een ander lettertype:
   de huisstijl is Outfit-only (--font-mono is daar een alias van). tabular-nums houdt codes uitgelijnd. */
.ec-dlg__detail{margin-top:11px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  font-size:var(--fs-xs);line-height:1.5;color:var(--text-3);font-variant-numeric:tabular-nums;word-break:break-word;white-space:pre-wrap}
.ec-dlg__voet{display:flex;align-items:center;gap:9px;padding:17px 19px;margin-top:15px}
.ec-dlg__rek{flex:1}
.ec-dlg__hint{font-size:var(--fs-xs);color:var(--text-3)}
.ec-dlg__btn{font-family:var(--font-display);font-size:var(--fs-base);font-weight:600;line-height:16px;padding:9px 16px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:.15s}
.ec-dlg__btn--ghost{border:1px solid var(--line-2);background:none;color:var(--text-2)}
.ec-dlg__btn--ghost:hover{border-color:var(--text-2);color:var(--text)}
.ec-dlg__btn--prim{border:1px solid rgba(154,79,208,.5);background:rgba(100,32,133,.32);color:#fff}
.ec-dlg__btn--prim:hover{background:rgba(100,32,133,.45)}
.ec-dlg__btn--gevaar{border:1px solid rgba(255,93,115,.5);background:rgba(255,93,115,.16);color:#ffb3bd}
.ec-dlg__btn--gevaar:hover{background:rgba(255,93,115,.26)}
.ec-dlg__btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* WERKVENSTER-variant: een dialoog waarin je iets invult i.p.v. alleen ja/nee zegt (declaratie,
   inkoopfactuur). Breder, en de body scrollt zodat kop en knoppenbalk altijd in beeld blijven —
   met een bijlage erin wordt zo'n venster snel hoger dan het scherm. BEWUST een modifier: bevestig()
   /meldFout()/keuze() gebruiken .ec-dlg ongewijzigd, dus die kunnen hier niet op stuklopen. */
.ec-dlg--werk{width:min(620px,100%);max-height:calc(100vh - 44px);display:flex;flex-direction:column}
.ec-dlg--werk .ec-dlg__kop{flex:0 0 auto}
.ec-dlg--werk .ec-dlg__body{flex:1 1 auto;overflow:auto;padding-bottom:16px;color:var(--text-2)}
.ec-dlg--werk .ec-dlg__voet{flex:0 0 auto;margin-top:0;border-top:1px solid var(--line)}
/* Formuliervelden in een werkvenster: label boven, veld eronder, altijd volle breedte. */
.ec-dlg__veld{display:block;font-size:var(--fs-2xs);font-weight:600;color:var(--text-2);margin-bottom:10px;min-width:0}
/* ⚠[hidden] verliest van een eigen `display`. Zonder deze regel doet `el.hidden = true` op een
   dialoogveld NIETS — gemeten 01-09-2026: het categorieveld van een declaratie stond zichtbaar mét
   een lege select. Zelfde reden als bij .ec-ftabs__btn en .hub-more-item; per geval meten, want
   .gegrid .full heeft 'm juist niet nodig. */
.ec-dlg__veld[hidden]{display:none}
.ec-dlg__veld>span{display:block;margin-bottom:4px}
.ec-dlg__veld input,.ec-dlg__veld select{display:block;width:100%}
.ec-dlg__veld input[inputmode=decimal]{text-align:right;font-variant-numeric:tabular-nums}
.ec-dlg__rij{display:grid;grid-template-columns:repeat(var(--kol,2),minmax(0,1fr));gap:10px}
.ec-dlg__afgeleid b{display:block;padding:7px 0;font-size:var(--fs-sm);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.ec-dlg__hintregel{font-size:var(--fs-2xs);color:var(--text-3);margin:-4px 0 12px}
.ec-dlg__let{display:flex;align-items:center;gap:6px;margin-bottom:14px;padding:8px 10px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);font-size:var(--fs-2xs)}
.ec-dlg__fout{margin:0 0 10px;padding:8px 10px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--urgent) 12%,transparent);color:var(--urgent);font-size:var(--fs-2xs)}
@media (max-width:560px){.ec-dlg__rij{grid-template-columns:1fr}}

/* ====== 17d · Bijlage-viewer ====== */
/* Eén kader voor élke bijlage in een venster — bonnetje bij een declaratie, factuur uit Exact.
   Zelfde maat, zelfde 'klik voor groot', zelfde faalmelding. PDF komt in een <iframe> (de CSP
   verbiedt <embed> via object-src 'none'), beeld in een <img>; zie bijlageToon() in components.js. */
.ec-bijl{margin:4px 0 14px}
.ec-bijl__kop{display:flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:600;color:var(--text-2);margin-bottom:6px}
.ec-bijl__meta{color:var(--text-3);font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De knop is de canonieke 'groot bekijken' — een klik op het kader werkt niet bij een PDF, want het
   iframe vangt de muis af. Rechts uitgelijnd, dus de meta ernaast mag rekken. */
.ec-bijl__open{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:4px 9px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:none;
  color:var(--text-2);font:inherit;font-size:var(--fs-2xs);font-weight:600;cursor:pointer;transition:.15s}
.ec-bijl__open:hover{border-color:var(--text-2);color:var(--text)}
.ec-bijl__open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ec-bijl__open[hidden]{display:none}
.ec-bijl__vak{height:240px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);
  overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:zoom-in;
  color:var(--text-3);font-size:var(--fs-2xs);text-align:center;padding:0 12px}
.ec-bijl__vak.is-leeg{cursor:default;padding:0 16px;line-height:1.5}
.ec-bijl__vak.is-mis{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.ec-bijl__img{max-width:100%;max-height:240px;object-fit:contain}
.ec-bijl__frame{width:100%;height:240px;border:0;background:#fff}

/* ====== 15 · EmptyState ====== */
.ec-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 18px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--text-2)}
.ec-empty__icon{width:48px;height:48px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text-3);margin-bottom:12px}
.ec-empty__title{font-family:var(--font-display);font-size:var(--fs-md);color:var(--text);font-weight:700}
.ec-empty__text{margin:5px 0 13px;font-size:var(--fs-sm);color:var(--text-3);max-width:300px;line-height:1.5}

/* ====== 14 · Avatar / monogram ====== */
.ec-av{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;flex:0 0 auto;border:1px solid var(--line-2);letter-spacing:.02em}
.ec-av--square{border-radius:var(--r-sm)}
.ec-av--purple{background:rgba(154,79,208,.16);color:#cba3e6}
.ec-av--blue{background:rgba(43,179,240,.16);color:#9fd4f2}
.ec-av--green{background:rgba(52,211,154,.16);color:#7fe3bd}
.ec-av--amber{background:rgba(232,163,61,.16);color:#f0c27e}
.ec-av--muted{background:var(--panel-2);color:var(--text-2)}
.ec-avstack{display:inline-flex}
.ec-avstack .ec-av{margin-left:-8px;box-shadow:0 0 0 2px var(--bg)}
.ec-avstack .ec-av:first-child{margin-left:0}

/* ====== 13 · Status-stappen (voortgang) ====== */
/* Geconvergeerd op de canon .sbal-component in cockpit.css (design-audit D3); de
   statusSteps-factory emit sindsdien .sbal-markup. */

/* ====== 20 · Skeleton-loader ====== */
.ec-sk{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.12) 37%,rgba(255,255,255,.05) 63%);background-size:400% 100%;animation:ec-shimmer 1.25s ease-in-out infinite;border-radius:6px}

/* ====== 18b · RowCard-lijst ====== */
.ec-rowlist{display:flex;flex-direction:column;gap:8px}
.ec-lrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);color:var(--text);text-decoration:none}
.ec-lrow:hover{border-color:rgba(43,179,240,.45);box-shadow:0 0 0 1px rgba(43,179,240,.18);transform:translateY(-1px)}
.ec-lrow__main{flex:1;min-width:0}
.ec-lrow__title{font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-lrow__sub{color:var(--text-3);font-size:var(--fs-xs);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-lrow__del{opacity:0;width:28px;height:28px;border-radius:7px;border:0;background:none;color:var(--text-3);cursor:pointer;transition:.14s var(--ease);display:grid;place-items:center;flex:0 0 auto}
.ec-lrow:hover .ec-lrow__del{opacity:1}
.ec-lrow__del:hover{color:var(--urgent);background:rgba(255,93,115,.1)}

/* ====== 02 · PremiumDataTable ====== */
.ec-tablewrap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.ec-tablewrap::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--grad);z-index:2}
.ec-tabletop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ec-tabletop__t{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.ec-table{width:100%;border-collapse:collapse}
.ec-table th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.03em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:11px 14px 9px;white-space:nowrap;user-select:none}
.ec-table th.is-sortable{cursor:pointer}
.ec-table th.is-sortable:hover{color:var(--text-2)}
.ec-table th .ec-table__ar{opacity:.55;font-size:var(--fs-micro);margin-left:3px}
.ec-table th.ec-al-r,.ec-table td.ec-al-r{text-align:right}
.ec-table th.ec-al-c,.ec-table td.ec-al-c{text-align:center}
.ec-table td{padding:11px 14px;border-top:1px solid var(--line);font-size:var(--fs-base);vertical-align:middle}
.ec-table tbody tr{transition:background .13s var(--ease)}
.ec-table tbody tr.is-clickable{cursor:pointer}
.ec-table tbody tr:hover{background:rgba(43,179,240,.06)}
.ec-table .ec-val{font-weight:700;font-variant-numeric:tabular-nums}
.ec-table .tnum{color:var(--text-3);font-size:var(--fs-sm)}
.ec-table tbody tr[data-id]{cursor:pointer}
.ec-table--wrap th{white-space:normal;line-height:1.3}

/* ====== 03 · EyeflyProjectCard ====== */
.ec-pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:14px 15px;box-shadow:var(--e-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.ec-pcard:hover{transform:translateY(-3px);box-shadow:var(--e-2);border-color:var(--line-2)}
.ec-pcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ec-pcard__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);letter-spacing:-.01em}
.ec-pcard__meta{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.ec-pcard__prog{margin-top:14px}
.ec-pcard__foot{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:var(--fs-xs);color:var(--text-3)}

/* ====== 17 · Modal (gecentreerd) ====== */
.ec-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.ec-overlay.is-open{opacity:1;pointer-events:auto}
.ec-modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2xl);box-shadow:var(--e-3);overflow:hidden;transform:scale(.94);transition:transform .18s var(--ease);max-height:calc(100vh - 48px);display:flex;flex-direction:column}
.ec-overlay.is-open .ec-modal{transform:scale(1)}
.ec-modal__h{padding:15px 18px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ec-modal__b{padding:16px 18px;font-size:var(--fs-base);color:var(--text-2);overflow:auto}
.ec-modal__f{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ====== 04 · RightSlideOverPanel ====== */
.ec-so-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.ec-so-overlay.is-open{opacity:1;pointer-events:auto}
.ec-so{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-modal);width:420px;max-width:92vw;background:var(--surface);border-left:1px solid var(--line-2);box-shadow:var(--e-3);transform:translateX(100%);transition:transform .2s var(--ease);display:flex;flex-direction:column}
.ec-so.is-open{transform:translateX(0)}
.ec-so__h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ec-so__eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ec-so__title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;margin-top:3px}
.ec-so__close{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;background:none;border:1px solid var(--line-2);color:var(--text-2);cursor:pointer;transition:.15s var(--ease);flex:0 0 auto}
.ec-so__close:hover{color:var(--text);background:rgba(255,255,255,.05)}
/* ⚠min-height:0 is niet overbodig. Een flex-item heeft standaard min-height:auto en groeit dus
   met zijn inhoud mee VOORBIJ de container; `overflow:auto` slaat dan nooit aan. Met een lange
   inhoud (een tabel van 40 regels) kon je de onderste rijen niet bereiken. */
.ec-so__b{padding:16px 18px;overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:11px}
.ec-so__f{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px}

/* ====== 18 · Popover / dropdown ====== */
.ec-pop{position:relative;display:inline-block}
.ec-pop__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--e-2);padding:6px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s var(--ease),transform .15s var(--ease);z-index:var(--z-dropdown)}
.ec-pop__menu--right{left:auto;right:0}
.ec-pop.is-open .ec-pop__menu{opacity:1;transform:translateY(0);pointer-events:auto}
.ec-pop__item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border-radius:var(--r-sm);border:0;background:none;cursor:pointer;font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text)}
.ec-pop__item:hover{background:rgba(255,255,255,.05)}
.ec-pop__item--danger{color:#e3aab1}

/* ====== 19 · Toast + ongedaan ====== */
.ec-toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.ec-toast{position:relative;display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--e-2);padding:11px 14px;min-width:260px;max-width:92vw;overflow:hidden;transform:translateY(140%);opacity:0;transition:transform .22s var(--ease),opacity .22s var(--ease);pointer-events:auto}
.ec-toast.is-show{transform:translateY(0);opacity:1}
.ec-toast__msg{font-size:var(--fs-sm);flex:1}
.ec-toast__action{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;color:#9fd4f2;background:none;border:0;cursor:pointer;white-space:nowrap;padding:0}
.ec-toast__bar{position:absolute;left:0;bottom:0;height:2px;background:var(--blue);width:100%}

/* ====== 05b · SmartInputGroup (veld) ====== */
.ec-field{display:flex;flex-direction:column;gap:6px}
.ec-field__label{font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.ec-field__req{color:var(--urgent);margin-left:2px}
.ec-input{font-family:var(--font-body);font-size:var(--fs-base);color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 11px;width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.ec-input::placeholder{color:var(--text-3)}
.ec-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,179,240,.15)}
textarea.ec-input{resize:vertical;min-height:80px;line-height:1.5}
.ec-field__help{font-size:var(--fs-xs);color:var(--text-3)}
.ec-field__error{display:none;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--urgent)}
.ec-field.is-error .ec-input{border-color:var(--urgent);box-shadow:0 0 0 3px rgba(255,93,115,.15)}
.ec-field.is-error .ec-field__error{display:flex}
.ec-field.is-error .ec-field__help{display:none}
.ec-field.is-ok .ec-input{border-color:rgba(52,211,154,.6)}

/* ====== referentiepagina #/instellingen/componenten ====== */
.ec-gallery{display:flex;flex-direction:column;gap:26px;max-width:var(--w-page)}
.ec-gsec__h{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:14px}
.ec-gsec__h b{color:var(--green)}
.ec-gsec__h em{font-style:normal;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--text-3);font-size:var(--fs-xs)}
.ec-grow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ec-gcols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:720px){.ec-gcols{grid-template-columns:1fr}}

                                                                        
.ec-ring{display:block}
.ec-spark{display:block;width:100%;height:auto}
.ec-minibars{display:flex;flex-direction:column;gap:7px}
.ec-minibar{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text-2)}
.ec-minibar__lbl{width:64px;flex:0 0 64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-minibar__tr{flex:1;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}
.ec-minibar__tr i{display:block;height:100%;width:0;border-radius:var(--r-pill);transition:width 1s var(--ease)}

/* ====== prefers-reduced-motion: schakel entree-/voortgangsanimaties uit ====== */
@media (prefers-reduced-motion: reduce){
  .ec-ring circle,.ec-ring-fg,.ec-bu-line,.ec-track__fill,.ec-minibar__tr i,.ec-vgl__tr i{transition:none!important;animation:none!important}
  .ec-toast,.ec-so,.ec-modal,.ec-overlay,.ec-so-overlay,.ec-pop__menu{transition:none!important}
}

/* ====== Project-hub redesign (#/project) — hero + 6 blokken + expressieve laag ====== */
.ph2-crumb{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);text-decoration:none;margin-bottom:12px}
.ph2-crumb:hover{color:var(--text)}
/* heroPanel — één gedeeld hero-paneel (project-hub, projecten-kanban, toekomstige pagina's).
   Neutrale basis + health-tint-varianten (--green/--amber/--red). Bijpassende factory: heroPanelHTML(). */
.ec-hero{position:relative;border-radius:var(--r-2xl);overflow:hidden;padding:16px 18px;margin-bottom:12px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(43,179,240,.07),rgba(154,79,208,.12)),var(--surface);box-shadow:0 22px 50px -28px rgba(0,0,0,.8);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ec-hero--green{border-color:rgba(52,211,154,.30);background:linear-gradient(135deg,rgba(52,211,154,.10),rgba(43,179,240,.05) 42%,rgba(154,79,208,.13)),var(--surface);box-shadow:0 22px 50px -26px rgba(52,211,154,.4)}
.ec-hero--amber{border-color:rgba(232,163,61,.32);background:linear-gradient(135deg,rgba(232,163,61,.10),rgba(43,179,240,.04) 42%,rgba(154,79,208,.13)),var(--surface);box-shadow:0 22px 50px -26px rgba(232,163,61,.38)}
.ec-hero--red{border-color:rgba(255,93,115,.34);background:linear-gradient(135deg,rgba(255,93,115,.10),rgba(43,179,240,.04) 42%,rgba(154,79,208,.13)),var(--surface);box-shadow:0 22px 50px -26px rgba(255,93,115,.4)}
.ec-hero__amb{position:absolute;inset:0;z-index:0;background:radial-gradient(460px 230px at 8% -10%,rgba(43,179,240,.12),transparent 60%),radial-gradient(440px 250px at 102% 120%,rgba(154,79,208,.18),transparent 62%)}
.ec-hero--green .ec-hero__amb{background:radial-gradient(460px 230px at 8% -10%,rgba(52,211,154,.16),transparent 60%),radial-gradient(440px 250px at 102% 120%,rgba(154,79,208,.20),transparent 62%)}
.ec-hero__amb::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;-webkit-mask:radial-gradient(circle at 22% 15%,#000,transparent 70%);mask:radial-gradient(circle at 22% 15%,#000,transparent 70%)}
.ec-hero__mark{position:absolute;right:12px;top:14px;z-index:0;opacity:.06;pointer-events:none}
.ec-hero__in{position:relative;z-index:1}
.ec-hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ec-hero__eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9fd4f2}
.ec-hero__title{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;margin:4px 0 0}
.ec-hero__sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px}
.ec-hero__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Compacte hero-variant voor werk-schermen (Planning): zelfde huid, ~halve hoogte. */
.ec-hero--slim{padding:11px 16px 10px}
.ec-hero--slim .ec-hero__title{font-size:var(--fs-2xl);margin-top:2px}
.ec-hero--slim .ec-hero__top{align-items:center}
.ec-hero--slim .ec-hero__mark{width:130px;top:8px;right:8px}
.ec-hero__foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.07);margin-top:10px;padding-top:9px}
.ec-hero__foot .toolbar{margin:0}
/* Datavisual: kerncijfer (ec-kc) — gegeneraliseerd uit de project-hub-metrics; de ph2-selectors
   blijven staan voor de nog niet gemigreerde hero's (lijst.js/projectenbord.js) en convergeren later. */
.ph2-metrics,.ec-kcrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;min-height:52px}
.ph2-metric,.ec-kc{display:flex;align-items:center;gap:10px}
.ph2-metric .ec-ring,.ec-kc .ec-ring{flex:0 0 auto}
.ec-kc-link{display:block;text-decoration:none;color:inherit;transition:transform .12s var(--ease)}
.ec-kc-link:hover{transform:translateY(-1px)}
.ph2-mv,.ec-kc__v{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.ph2-mv.big,.ec-kc__v.big{font-size:var(--fs-2xl)}
.ph2-mk,.ec-kc__k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.ph2-ms,.ec-kc__s{font-size:var(--fs-2xs);color:var(--text-3);margin-top:1px}.ec-kc__trend{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-2xs);font-weight:700;padding:1px 7px;border-radius:var(--r-pill);margin-top:3px;border:1px solid}.ec-kc__trend.up{color:var(--green);border-color:rgba(52,211,154,.5);background:rgba(52,211,154,.12)}.ec-kc__trend.down{color:var(--amber);border-color:rgba(232,163,61,.5);background:rgba(232,163,61,.12)}
.ph2-fase{display:flex;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);min-height:20px}
.ph2-fase .fl{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-right:12px}
.ph2-fase .loc{margin-left:auto;font-size:var(--fs-2xs);color:var(--text-3)}
.ph2-fase .ph2-fase-warn{color:var(--amber)}
/* meta-pills in de hero (identiteit/scope) — géén losse balk meer */
.ph2-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.ph2-meta:empty{display:none}
.ph2-meta .m{display:inline-flex;align-items:center;gap:7px;max-width:340px;padding:5px 11px 5px 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.03);font-size:var(--fs-xs);color:var(--text-2);text-decoration:none;transition:border-color .14s var(--ease),color .14s var(--ease)}
.ph2-meta a.m:hover{border-color:var(--line-2);color:var(--text)}
.ph2-meta .m svg{color:var(--text-3);flex:0 0 auto}
.ph2-meta .m .ec-av{flex:0 0 auto}
.ph2-meta .m .mk{color:var(--text-3)}
.ph2-meta .m b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.ph2-meta .m.val b{color:var(--green)}
.ph2-meta .m.warn{border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.ph2-meta .m.warn .mk,.ph2-meta .m.warn svg{color:var(--amber)}
.ph2-meta .m.warn b{color:var(--amber)}
/* body-grid + kaarten — gelijke hoogte per rij (stretch) */
.ph2-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.ph2-grid>.ph2-card{height:100%}
/* Was: de 'rail' onderaan het projectdetail (opdrachtbon · delen · termijnen · verloop). Die kaarten
   zitten sinds de tabbladen (26-07-2026) in hun eigen tabblad; deze regel blijft alleen nog staan
   voor de ontwerpmockups in recon/_ontwerp/. */
.ph3-onder{margin-top:12px}

/* ---- projectdetail: tabbladen (26-07-2026) ---------------------------------------------------
   De pagina was tien kaarten van gelijk gewicht in één scroll (2,5 scherm), met de acties —
   opdrachtbon, projectdelen, termijnen — helemaal onderaan. Vier tabbladen groeperen ze op
   onderwerp; het Overzicht opent met de signaalrij. Elke tab is nu ~1 scherm en een elfde kaart
   maakt de pagina niet langer. */
.ph2-tabs{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:4px;
  margin:0 0 14px;padding:5px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--e-1)}
.ph2-tab{font-family:var(--font-display);display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:1px solid transparent;border-radius:var(--r-sm);background:none;
  color:var(--text-2);font-size:var(--fs-base);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease)}
.ph2-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.ph2-tab[aria-selected="true"]{background:rgba(154,79,208,.18);color:#fff;border-color:rgba(154,79,208,.4)}
.ph2-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* telbadge = het aantal dat aandacht vraagt. Kleur draagt de betekenis nooit alléén: het getal
   staat er altijd bij (zie color-not-only). */
.ph2-tabn{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);font-size:var(--fs-2xs);
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  background:var(--warn-bg);color:var(--amber);border:1px solid rgba(232,163,61,.45)}
/* ⚠Zonder deze regel wint display:inline-flex hierboven van het hidden-attribuut (auteur-CSS gaat
   vóór de UA-regel [hidden]{display:none}) en stond op ELK project een amberkleurige '0' op alle
   vier de tabs — precies de "vaste 0 leest als een probleem dat er niet is" die verfSignalen()
   probeert te voorkomen. Melding Remco 31-07-2026; zie de andere [hidden]-regels in cockpit.css. */
.ph2-tabn[hidden]{display:none}
.ph2-tab[aria-selected="true"] .ph2-tabn{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
/* houder voor een kaart die pas ná een async fetch komt: display:contents laat de kaart zélf het
   grid-item worden, zodat hij net als de andere kaarten meerekt in de rij. */
.ph2-holder{display:contents}
/* status-pills bij de KOP (projectstatus + gezondheid). Stonden tussen de knoppen, terwijl het
   over het project gaat en niet over een actie. */
.ph2-koppills{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
/* signaalrij op het Overzicht: wat vraagt nú actie. Rijen i.p.v. kaarten — als kaart zou het
   belangrijkste weer hetzelfde gewicht krijgen als alle andere kaarten. */
.ph2-sig{display:grid;gap:8px;margin-bottom:14px}
.ph2-sig-it{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-base)}
.ph2-sig-it.ok{border-left-color:var(--green)}
.ph2-sig-it .t{flex:1;min-width:0}
.ph2-sig-it .t b{display:block;font-weight:600}
.ph2-sig-it .t span{display:block;color:var(--text-3);font-size:var(--fs-2xs)}
@media (max-width:720px){
  .ph2-tabs{overflow-x:auto}
  .ph2-sig-it{flex-wrap:wrap}
}
/* Factuurtermijnen-kaart (cutover 2.4) */
.tm-list{display:flex;flex-direction:column}
.tm-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.tm-row:first-child{border-top:0}
.tm-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-dt{color:var(--text-3);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
.tm-bd{font-variant-numeric:tabular-nums;font-weight:500}
/* Naar wie de facturen van dit project gaan. De afwijkende stand krijgt het tint-recept in blauw —
   mededeling, geen waarschuwing (zie .fac-deb / .fc-anderdeb.vast in cockpit.css). */
.tm-deb{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel-2);font-size:var(--fs-2xs);color:var(--text-2);line-height:1.45}
.tm-deb.afw{border-color:rgba(43,179,240,.45);background:rgba(43,179,240,.10)}
.tm-deb>span{flex:1;min-width:0}
.tm-edit-row{display:flex;align-items:center;gap:6px}
.tm-edit-row input{background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:6px;padding:6px 8px;font:inherit;font-size:var(--fs-sm)}
.pv-list{display:flex;flex-direction:column}
.pv-it{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.pv-it:first-child{border-top:0;padding-top:0}
.pv-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:5px}
.pv-b{min-width:0}
.pv-t{font-size:var(--fs-sm);color:var(--text)}
.pv-m{font-size:var(--fs-2xs);color:var(--text-3);margin-top:1px}
.pv-add{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pv-add input{flex:1;min-width:0}
.bon-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:var(--fs-sm);margin-top:10px}
.bon-kv .k{color:var(--text-3)}
.bon-kv .v{text-align:right;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bon-file{color:var(--blue);cursor:pointer}
.bon-file:hover{text-decoration:underline}
/* Blokkenregel (definitief 2026-07): de ph2-kaart is de STANDAARD-informatiekaart —
   vlak en rustig, met het dunne merk-gradientrandje bovenlangs als enige accent
   (zelfde drager als .card). Rails horen alleen bij calculatie-subgroepen en pb2-kanban. */
.ph2-card{padding:14px 15px}   /* schil = de gedeelde kaart-schil bovenin dit bestand (D2) */
.ph2-card.spot{box-shadow:var(--e-1);border-color:var(--line-2)}
.ph2-eyb{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:11px}
.ph2-eyb .x{color:var(--text-3);letter-spacing:0;font-weight:600;text-transform:none;font-size:var(--fs-2xs)}
.ph2-muted{color:var(--text-3);font-size:var(--fs-sm)}.ec-vgl{margin-bottom:12px}.ec-vgl:last-child{margin-bottom:0}.ec-vgl__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}.ec-vgl__n{font-size:var(--fs-sm);font-weight:600}.ec-vgl__tr{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}.ec-vgl__tr i{display:block;height:100%;border-radius:var(--r-pill);width:0;transition:width 1s var(--ease)}.ec-vgl__s{font-size:var(--fs-2xs);color:var(--text-3);margin-top:4px}
/* burn-up */
.ph2-bu{width:100%;height:150px;display:block;margin-top:2px}
.ph2-bu-wrap{position:relative}
.ph2-bu-budget{position:absolute;right:10px;font-size:var(--fs-2xs);font-weight:700;color:var(--amber);letter-spacing:.01em;pointer-events:none;text-shadow:0 1px 4px var(--bg),0 0 2px var(--bg)}
.ph2-bu-x{position:absolute;bottom:1px;font-size:var(--fs-2xs);font-weight:600;color:var(--text-2);pointer-events:none}
.ph2-bu-x0{left:8px}
.ph2-bu-x1{right:10px}
.ec-bu-line{filter:drop-shadow(0 0 5px rgba(154,79,208,.5))}
.ph2-bu-lg{display:flex;gap:14px;margin-top:9px;font-size:var(--fs-2xs);color:var(--text-3);flex-wrap:wrap}
.ph2-bu-lg span{display:inline-flex;align-items:center;gap:5px}
.ph2-bu-lg i{width:12px;height:2px;border-radius:2px;display:inline-block}.ec-factop{display:flex;align-items:center;gap:13px;margin-bottom:10px}.ec-factop__v{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums}.ec-factop__s{font-size:var(--fs-micro);color:var(--text-3)}
.ec-factop__s2{font-size:var(--fs-micro);color:var(--text-2);margin-top:3px}
.ph2-frow{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.ph2-frow:first-of-type{border-top:0}
.ph2-frow .lead{flex:0 0 auto;display:inline-flex;color:var(--text-3)}
.ph2-frow .qd{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.ph2-frow .fn{flex:1;min-width:0}
.ph2-frow .fn b{font-weight:600}
.ph2-frow .fn span{color:var(--text-3);font-size:var(--fs-2xs);display:block}
.ph2-frow .fv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px}
/* Tweede bedrag op dezelfde regel, subtieler: INCL. btw naast het leidende excl.-bedrag. Beide zijn
   waar; dit maakt zichtbaar wélke grondslag je leest zonder er een tweede regel van te maken. */
.ph2-frow .fv .fsub{color:var(--text-3);font-size:var(--fs-2xs);font-weight:600}
.ph2-frow.tot{border-top:1px solid var(--line-2);font-weight:700}
/* Tussenkop binnen een projectkaart (bv. Inhuur/ZZP-blok in de uren-kaart) */
.ph2-sub{margin-top:var(--s-3);padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
/* Inklapbare groep in de uren-kaart (per week / per persoon). <details> levert het openklappen,
   de toetsenbordbediening en aria-expanded; hier alleen de browser-marker weg, een rand tussen de
   groepen (de .ph2-frow-regel haalt die er bij :first-of-type af) en de chevron die meedraait. */
.ph2-ugrp>summary::-webkit-details-marker{display:none}
.ph2-ugrp>summary::marker{content:''}
.ph2-ugrp>summary{border-top:1px solid var(--line)}
.ph2-ugrp>summary .lead{transition:transform .18s ease-out}
.ph2-ugrp[open]>summary .lead{transform:rotate(180deg)}
.ph2-ugrp>div.ph2-frow{padding-left:22px}
/* Filterrij in de uren-kaart: de globale select-stijl is width:100% met mono-font en te fors voor
   twee keuzelijsten naast elkaar in een halfbrede kaart. */
.ph2-filt{display:flex;gap:8px;margin:0 0 6px}
.ph2-filt select{flex:1;min-width:0;font-family:var(--font-body);font-size:var(--fs-2xs);padding:5px 8px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){.ph2-ugrp>summary .lead{transition:none}}
/* Declaratie-bon-knop op de projectpagina */
.ph2-bon{background:none;border:0;padding:3px 6px;color:var(--blue);cursor:pointer;border-radius:var(--r-xs);display:inline-flex;flex:0 0 auto}
.ph2-bon:hover{background:color-mix(in srgb,var(--blue) 16%,transparent)}
.ph2-bonwarn{color:var(--warn,var(--amber));display:inline-flex;flex:0 0 auto}
.ph2-bon-none{flex:0 0 24px}
/* skeletons in de hero terwijl live-data laadt */
.ph2-skrow{display:flex;gap:14px}
.ph2-skrow .ec-sk{flex:1}

/* ---- Geld-tab (04-09-2026) -------------------------------------------------------------------
   De tab was drie kaarten van gelijk gewicht zonder rangorde, en het belangrijkste getal — het
   VERSCHIL tussen opdracht en gefactureerd — stond er niet. Nu: één geldbalk bovenaan (vier
   bedragen met elk één definitie + een balk waarin het verschil een eigen segment is), daaronder
   facturen naast termijnen, en onderin één kostenkaart.
   ⚠`.ph2-grid--fr` geeft de facturen meer ruimte dan de termijnen: de factuurregel draagt twee
   bedragen plus een badge, de termijnregel één. Op 1fr/1fr brak de factuurregel af. */
.ph2-grid--fr{grid-template-columns:1.45fr 1fr;align-items:start}
.ph2-grid--fr>.ph2-card{height:auto}

/* Geldbalk: vier cellen met een 1px-voeg ertussen (de gap TOONT de achtergrondkleur, vandaar
   background op de grid zelf i.p.v. borders per cel — anders krijg je dubbele lijnen). */
.ph2-gb{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px}
.ph2-gb .cel{background:var(--surface);padding:11px 13px 12px;min-width:0}
.ph2-gb .lab{font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--text-3)}
.ph2-gb .num{font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:4px 0 2px}
.ph2-gb .num.g{color:var(--green)}.ph2-gb .num.a{color:var(--amber)}.ph2-gb .num.dim{color:var(--text-3)}
.ph2-gb .sub{font-size:var(--fs-micro);color:var(--text-3);line-height:1.35}

/* De balk. Segmenten zijn absoluut gepositioneerd (left+width in %) zodat ze samen exact de
   CONTENT-box vullen; `overflow:hidden` houdt ze binnen de afronding. */
.ph2-bar{position:relative;height:10px;border-radius:var(--r-pill);background:var(--panel-2);
         border:1px solid var(--line);overflow:hidden}
.ph2-bar i{position:absolute;top:0;bottom:0;display:block}
.ph2-bar .f-ok{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 75%,transparent),var(--green))}
/* Arcering, niet vlak: 'boven de opdracht' is een ANDERE soort bedrag dan de rest van de balk —
   kleur alleen zou het als 'gewoon een volgend stuk' laten lezen. */
.ph2-bar .f-over{background:repeating-linear-gradient(45deg,var(--amber) 0 5px,color-mix(in srgb,var(--amber) 62%,transparent) 5px 10px)}
.ph2-bar .f-open{background:color-mix(in srgb,var(--blue) 30%,transparent)}
.ph2-barwrap{position:relative;padding-top:4px}
.ph2-barmark{position:absolute;top:0;bottom:0;width:2px;background:var(--text);opacity:.55;border-radius:2px}
.ph2-barlbl{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:var(--fs-micro);color:var(--text-3)}
.ph2-barlbl b{color:var(--text-2);font-weight:600}
.ph2-leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:var(--fs-micro);color:var(--text-3)}
.ph2-leg span{display:inline-flex;align-items:center;gap:5px}
.ph2-leg i{width:11px;height:8px;border-radius:2px;display:inline-block;flex:0 0 11px}

/* Signaalregel onder de balk (alleen bij iets dat aandacht vraagt). */
.ph2-sig{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:9px 11px;
         border-radius:var(--r-sm);font-size:var(--fs-2xs);line-height:1.5}
.ph2-sig.amber{border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
               background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--amber)}
.ph2-sig.blue{border:1px solid color-mix(in srgb,var(--blue) 42%,transparent);
              background:color-mix(in srgb,var(--blue) 9%,transparent);color:var(--blue)}
.ph2-sig b{color:var(--text)}
.ph2-sig>svg{flex:0 0 13px;margin-top:1px}
.ph2-sig .btn{margin-left:auto;flex:0 0 auto;align-self:center}

/* Kolomkop boven een lijst — zonder dit moet je raden wat het tweede bedrag op een regel is. */
.ph2-kolkop{display:flex;align-items:center;gap:9px;padding:0 0 6px;font-size:var(--fs-nano);
            letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-3)}
.ph2-kolkop .fn{flex:1;min-width:0}
.ph2-kolkop .fv{flex:0 0 auto}

/* Concepten: gestippeld, want ze zijn er nog niet echt — ze tellen niet mee in gefactureerd. */
.ph2-concept{border:1px dashed color-mix(in srgb,var(--blue) 50%,transparent);
             background:color-mix(in srgb,var(--blue) 6%,transparent);
             border-radius:var(--r-sm);padding:2px 10px 4px;margin-top:11px}
.ph2-concept .ph2-sub{margin-top:8px;padding-top:0;border-top:0;color:var(--blue);
                      display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph2-concept .ph2-sub .r{letter-spacing:0;text-transform:none;font-weight:600;color:var(--text-3)}
.ph2-concept .ph2-frow:first-of-type{border-top:0}

/* Factuurstroom-merkteken ('aanvullend' = meerwerk/naheffing).
   ⛔`display:inline-block` MOET op de SPECIFIEKERE selector staan, niet op `.ph2-stroom` alleen.
     `.ph2-frow .fn span{…display:block}` is (0,2,1) en wint van een kale `.ph2-stroom` (0,1,0) —
     die selector raakt élke span onder `.fn`, dus óók deze chip. Gemeten in een echte browser vóór
     deze regel: de chip was 420px breed, een paarse balk over de hele kaart. Dezelfde familie als de
     `[hidden]`-valkuil verderop: een globale regel die stil wint van een lokale. */
.ph2-frow .fn .ph2-stroom{display:inline-block}
.ph2-stroom{display:inline-block;vertical-align:1px;margin-left:6px;font-size:var(--fs-nano);
            font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;
            border-radius:var(--r-xs);color:var(--sel-ink,#e9defb);
            background:color-mix(in srgb,var(--purple) 20%,transparent);
            border:1px solid color-mix(in srgb,var(--purple) 45%,transparent)}

/* Lege kostenkaart: één regel met een icoon i.p.v. een halve kaart naast een gat. */
.ph2-leeg{display:flex;align-items:center;gap:11px;color:var(--text-3);font-size:var(--fs-sm)}
.ph2-leeg>svg{flex:0 0 15px;opacity:.6}
/* Sectiekop in de kostenkaart: naam links, subtotaal + eventuele link rechts. */
.ph2-sub.rij{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph2-sub.rij .r{display:inline-flex;align-items:center;gap:9px;letter-spacing:0;text-transform:none;
                font-weight:600;font-size:var(--fs-2xs);color:var(--text-3)}
.ph2-sub.rij:first-child{margin-top:0;padding-top:0;border-top:0}

@media(max-width:820px){.ph2-grid,.ph2-grid--fr{grid-template-columns:1fr}.ph2-metrics,.ec-kcrow{grid-template-columns:1fr 1fr}
  .ph2-gb{grid-template-columns:1fr 1fr}}

/* Lijstbalk: filterTabs links + lijst-filter (.lsearch) rechts op één regel (tabs onder,
   filter naar rechts). Wrapt netjes op smalle schermen. */
.ec-listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ec-listbar>.lsearch{margin-left:0}
/* Filters links bij elkaar, de actie rechts. Zonder deze groepering trekt space-between élk kind
   los uit elkaar, en krijgt een tabblad met vier filters een heel ander ritme dan een met twee —
   zichtbaar zodra je twee tabbladen van dezelfde pagina naast elkaar legt. */
.ec-listbar__groep{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;flex:1}
.ec-listbar__groep>.lsearch{margin-left:0}

/* ====== 09c · filterTabs (onderstreepte filter-standaard mét tellers) ====== */
.ec-ftabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ec-ftabs__btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);padding:10px 13px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text-3);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:color .14s var(--ease)}
/* ⚠⚠`display:inline-flex` WINT VAN DE BROWSER-REGEL `[hidden]{display:none}` — dus `btn.hidden =
   true` verbergt hier NIETS. Gemeten in de browser 03-08-2026 met een geld-loze rol: de
   Tarieven-tab stond er nog, 77×39 px en aanklikbaar (naar een leeg paneel), terwijl `.hidden`
   keurig `true` was. Precies waarom CLAUDE.md zegt dat je zichtbaarheid met `getComputedStyle`/
   `offsetParent` meet en nooit met de `hidden`-property. */
.ec-ftabs__btn[hidden]{display:none}
.ec-ftabs__btn:hover{color:var(--text-2)}
.ec-ftabs__btn.is-on{color:var(--text);background-image:var(--grad);background-repeat:no-repeat;background-position:bottom;background-size:100% 2px}
.ec-ftabs__count{font-size:var(--fs-2xs);font-weight:700;color:var(--text-3);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 7px;font-variant-numeric:tabular-nums}
.ec-ftabs__btn.is-on .ec-ftabs__count{color:var(--text);border-color:var(--line-2)}
.ec-ftabs__count--amber{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.1)}
.ec-ftabs__count--green{color:#7fe3bd;border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.1)}
.ec-ftabs__count--red{color:#e3aab1;border-color:rgba(255,93,115,.4);background:rgba(255,93,115,.1)}
.ec-ftabs__count--blue{color:#9fd4f2;border-color:rgba(43,179,240,.4);background:rgba(43,179,240,.1)}

/* ====== Projecten-kanban redesign (#/projecten) — hero via de gedeelde .ec-hero ====== */
.pb2-filterbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pb2-fbright{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pb2-fbright .lsearch{margin-left:0}
.pb2-sync{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.pb2-scroll{overflow-x:auto;padding-bottom:6px;margin:0 -2px}
.pb2-board{display:grid;gap:12px;align-items:start;padding:0 2px}
.pb2-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;min-width:0;box-shadow:var(--e-1)}
.pb2-col-top{height:3px;background:var(--col-ac,var(--blue))}
.pb2-col-h{padding:11px 13px 10px;border-bottom:1px solid var(--line)}
.pb2-col-hr{display:flex;align-items:center;gap:8px}
.pb2-col-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--col-ac,var(--blue));box-shadow:0 0 7px var(--col-ac,var(--blue))}
.pb2-col-t{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb2-col-cnt{font-size:var(--fs-xs);font-weight:700;color:var(--text-3);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 8px;font-variant-numeric:tabular-nums}
.pb2-col-sub{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-2xs);color:var(--text-3)}
.pb2-col-sub b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}
.pb2-col-body{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:44px}
.pb2-empty{color:var(--text-3);font-size:var(--fs-sm);text-align:center;padding:8px 0}
.pb2-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 12px;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease);position:relative;overflow:hidden}
.pb2-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pcac,var(--line-2))}
.pb2-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(0,0,0,.85);border-color:var(--line-2)}
/* lichte triage-nadruk (stage-accent ::before blijft intact): stil = amber rand, groot = feller bedrag */
.pb2-card.is-stil{border-color:rgba(232,163,61,.42);background:linear-gradient(90deg,rgba(232,163,61,.055),var(--surface-2) 62%)}
.pb2-card.is-stil:hover{border-color:rgba(232,163,61,.62)}
.pb2-card.is-groot .pb2-c-val{font-size:var(--fs-base);color:#fff}
.pb2-c-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.pb2-c-title{flex:1;font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.pb2-c-rel{display:flex;align-items:center;gap:8px;min-width:0}
.pb2-c-mono{width:24px;height:24px;border-radius:var(--r-xs);background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-size:var(--fs-micro);font-weight:700;color:var(--text-2);flex:0 0 24px}
.pb2-c-rl{font-size:var(--fs-2xs);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* geld-ankerregel: bedrag als blikvanger + scoringskans-chip (getinte .badge) ernaast */
.pb2-c-money{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:11px}
.pb2-c-val{font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
/* leeftijd in de voet: klok-icoon + dagen, kleurt amber/rood bij stilstand (via inline color) */
.pb2-c-age{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.pb2-c-age svg{width:11px;height:11px;opacity:.85}
.pb2-c-bars{display:flex;gap:12px;margin-top:10px}
.pb2-c-bar{flex:1;min-width:0}
.pb2-c-bh{display:flex;justify-content:space-between;font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.pb2-c-bh b{font-weight:700;font-variant-numeric:tabular-nums}
.pb2-c-tr{height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}
.pb2-c-tr i{display:block;height:100%;border-radius:var(--r-pill)}
.pb2-c-foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.pb2-c-ownav{width:22px;height:22px;border-radius:50%;background:rgba(154,79,208,.16);color:#cba3e6;display:grid;place-items:center;font-size:var(--fs-micro);font-weight:700;flex:0 0 22px}
.pb2-dl{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--text-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:3px 8px;background:none;cursor:pointer;font-family:inherit}
.pb2-dl:hover{border-color:var(--line-2);color:var(--text-2)}
.pb2-dl.laat{color:#e3aab1;border-color:rgba(255,93,115,.4)}
.pb2-dl.soon{color:#f0c27e;border-color:rgba(232,163,61,.4)}
.pb2-dl.ok{color:#7fe3bd;border-color:rgba(52,211,154,.35)}
.pb2-dl-src{color:var(--text-3);opacity:.6}
.pb2-dl-inp{font-size:var(--fs-2xs);padding:2px 6px;border:1px solid var(--blue);border-radius:var(--r-xs);background:var(--panel-2);color:var(--text);font-family:inherit;color-scheme:dark}

/* ===== Instelvorm — de gedeelde vorm van een instellingen-tabblad (views/instelvorm.js) =====
   Eén opslaan-balk per tabblad die onderin plakt zodra er iets gewijzigd is, en één regel-editor
   voor lijstjes (branches, afwijsredenen, documentsoorten...). Zie docs/instellingen-redesign.md. */
.iv-balk{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:var(--s-3);
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);backdrop-filter:blur(6px);
  box-shadow:0 -6px 18px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:transform .18s ease-out}
/* Bewust ALLEEN transform in de transitie: zichtbaarheid en dekking schakelen direct. Een balk die
   je pas ziet als een transitie is afgelopen, is onzichtbaar zodra die niet loopt (browser-pane,
   prefers-reduced-motion, achtergrondtab) — en dit is de enige plek waar je kunt opslaan. Het
   schuifje is versiering; de zichtbaarheid niet. */
.iv-balk.is-aan{opacity:1;visibility:visible;transform:none}
.iv-balk-tekst{font-size:var(--fs-sm);color:var(--text-3)}
.iv-balk-melding{font-size:var(--fs-sm);flex:1}
.iv-balk-melding.is-ok{color:var(--green)}
.iv-balk-melding.is-fout{color:var(--red)}
.iv-balk-tekst+.iv-balk-melding:empty{flex:1}
.iv-balk>.btn,.iv-balk>.ec-btn{margin-left:auto}
@media (prefers-reduced-motion:reduce){.iv-balk{transition:none}}

.iv-regels{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-3) 0 0}
.iv-regels-lijst{display:flex;flex-direction:column;gap:var(--s-2)}
.iv-regel{display:flex;align-items:center;gap:var(--s-3)}
.iv-regel>.ec-input,.iv-regel>select{flex:1;min-width:0}
.iv-regel-kop{font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--text-3);
  padding-bottom:var(--s-1);border-bottom:1px solid var(--line)}
.iv-regel-kop>span{flex:1}
.iv-regel .iv-regel-actie{flex:0 0 auto}
.iv-regel-kop .iv-regel-actie{flex:0 0 92px}
.iv-regels-leeg{font-size:var(--fs-sm);color:var(--text-3);padding:var(--s-2) 0}
.iv-kleur{width:40px;height:34px;flex:0 0 40px;padding:2px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:none;cursor:pointer}
.iv-schakelrijen{display:flex;flex-direction:column;margin:var(--s-3) 0 0}
.iv-schakelrij{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:13px 2px;border-bottom:1px solid var(--line)}
.iv-schakelrij:last-child{border-bottom:0}
.iv-schakelrij-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.iv-schakelrij-t b{font-size:var(--fs-base);color:var(--text)}
.iv-schakelrij-t small{font-size:var(--fs-xs);color:var(--text-3)}
.iv-schakelrij .ec-sw{flex:0 0 auto}

/* ═══ TYPEAHEAD (ec-ta) — keuzelijst die óók doorzoekbaar is ══════════════════════════════
   Verhuisd uit cockpit.css (.po-ac*, de portaal-variant) toen het een gedeeld component werd;
   zie de toelichting bij `wireTypeahead` in components.js. */
.ec-ta{position:relative}
/* ⚠EXPLICIETE BREEDTE OP DE INPUT. De globale regel `input,select,textarea{width:100%}` in
   cockpit.css geldt hier ook; zonder deze regel valt het veld in een flex-context stil terug op
   zijn intrinsieke breedte. Zelfde val als bij .lb-keuze en de checkbox-maten. */
.ec-ta>input{width:100%}
.ec-ta__res{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown,100);
  max-height:240px;overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--e-3,var(--shadow));padding:4px}
.ec-ta__res[hidden]{display:none}
.ec-ta__item{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);
  padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:var(--fs-base);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-ta__item small{color:var(--text-3);text-transform:none;letter-spacing:normal}
.ec-ta__item:hover,.ec-ta__item.is-actief{background:rgba(154,79,208,.16)}
.ec-ta__leeg{padding:8px 10px;color:var(--text-3);font-size:var(--fs-sm);text-transform:none;letter-spacing:normal}