/* ============================================================================
   Multilas AI OS — "Command Center"
   Licht thema afgeleid van multilasservices.com: wit + staalblauw-navy +
   MLS-oranje accent. Smalle icoonrail, SAM-commandobalk, kaarten op #f3f5f7.
   ========================================================================== */

:root{
  /* Navy (rail-diepte-referentie, briefing-kaart, donkere knop) */
  --navy:#1b2836;
  --navy-2:#2c3d52;

  /* Tekst */
  --ink:#22303f;      /* primair */
  --ink-dim:#5b6c7e;  /* secundair */
  --muted:#8494a6;    /* muted */
  --faint:#b6c1cc;    /* disabled / placeholder */

  /* Staalblauw + link */
  --steel:#46566a;
  --link:#3d5d8a;
  --link-bg:#e9eff7;
  --arc:var(--link);  /* alias: neutrale/informatieve accentkleur (meters e.d.) */

  /* MLS-oranje */
  --weld:#ff7a18;
  --weld-deep:#e25c00;
  --weld-light:#ffb579;
  --weld-tint:#fff1e6;
  --weld-hover:#fff9f4;
  --weld-tint-ink:#c2550a;
  --weld-glow:rgba(255,122,24,.3);

  /* Rood — te laat */
  --danger:#d64540;
  --danger-ink:#c0403b;
  --danger-ink-2:#8a2f2b;
  --danger-bg:#fdeceb;
  --danger-border:#f3c4c0;

  /* Amber — binnenkort/open */
  --warn:#e8a13c;
  --warn-ink:#a06a00;
  --warn-bg:#fdf3e0;
  --warn-border:#f0dcae;

  /* Groen — betaald/klaar/beste prijs */
  --ok:#2f9e4f;
  --ok-ink:#2f7a45;
  --ok-bg:#e8f5ec;
  --ok-border:#cfe3d4;

  /* Achtergronden */
  --bg-app:#f3f5f7;
  --bg-card:#fff;
  --bg-subtle:#f8fafb;
  --bg-input:#f6f7f9;

  /* Randen */
  --line:#e2e7ed;       /* kaartrand */
  --line-2:#eef1f5;     /* binnenlijnen */
  --line-input:#dde3ea; /* inputs */
  --line-3:#f4f6f8;     /* zeer licht */

  --radius:13px;
  --radius-sm:10px;
  --radius-pill:14px;
  --rail-w:68px;

  --shadow-card:0 1px 3px rgba(20,30,45,.05);
  --shadow-primary:0 3px 10px rgba(255,122,24,.3);
  --shadow-drawer:-24px 0 60px rgba(20,30,45,.25);
  --shadow-bulk:0 14px 44px rgba(20,30,45,.4);
  --shadow-modal:0 24px 60px rgba(20,30,45,.28);
  --shadow-pop:0 20px 54px rgba(20,30,45,.16);

  --mono:ui-monospace,Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Aliassen voor het oude donkere staal-gamma (JS-inline styles die er nog
     naar verwijzen) — gemapt naar hun lichte-thema-equivalent. */
  --steel-700:var(--line-input);
  --steel-600:var(--line);
  --steel-500:var(--steel);
  --steel-400:var(--muted);
  --steel-300:var(--ink-dim);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{color-scheme:light;scrollbar-color:var(--line-input) var(--bg-app)}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:13.5px;
}
.mono{font-family:var(--mono)}
.mono,.dl,table.data td,.meter .m-val{font-variant-numeric:tabular-nums}
.hidden{display:none !important}
a{color:var(--steel);text-decoration:none;transition:color .12s}
a:hover{color:var(--weld);text-decoration:none}
::selection{background:var(--weld-tint);color:var(--weld-tint-ink)}
:focus-visible{outline:2px solid var(--weld);outline-offset:1px}

/* Scrollbars */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-input);border-radius:6px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}

/* ============================ App-layout ================================== */
.app{display:flex;min-height:100vh}

/* Icoonrail: vaste smalle balk, altijd icoon-only (desktop) */
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);
  display:flex;flex-direction:column;align-items:center;
  background:var(--bg-card);
  border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;
  padding:16px 0;
}
.rail-logo{display:flex;align-items:center;justify-content:center;padding-bottom:14px}
.brand-mark{width:34px;height:30px;object-fit:contain;flex:0 0 auto}
.brand-mark-lg{width:64px;height:50px;object-fit:contain}
.rail-logo-txt{display:none}

.nav{display:flex;flex-direction:column;gap:6px;padding:0 12px;flex:1;overflow-y:auto;overflow-x:hidden;width:100%;align-items:center}
.nav-item{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-sm);
  color:var(--ink-dim);
  cursor:pointer;position:relative;flex:0 0 auto;
  transition:background .12s,color .12s;
}
.nav-item svg{width:19px;height:19px;flex:0 0 19px}
.nav-item span{display:none}
.nav-item:hover{background:var(--line-3);color:var(--ink)}
.nav-item.active{background:var(--weld-tint);color:var(--weld-deep)}
.nav-item .ndot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:1.5px solid var(--bg-card)}
.nav-item .nav-badge{
  position:absolute;top:1px;right:1px;
  min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;line-height:1;letter-spacing:.01em;
  border:1.5px solid var(--bg-card);pointer-events:none;
}
.nav-sep{width:28px;height:1px;background:var(--line);margin:6px 0}
.nav-label{display:none}

.rail-foot{padding-top:12px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.rail-foot-top{display:flex;flex-direction:column;align-items:center;gap:10px}
.rail-toggle{display:none}
.lamp{display:flex;align-items:center;justify-content:center}
.lamp span{display:none}
.lamp i{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 8px}
.lamp.ok i{background:var(--ok)}
.lamp.err i{background:var(--danger)}
.lamp.warn i{background:var(--warn)}
@media(prefers-reduced-motion:no-preference){
  .lamp.err i{animation:ledpulse 1.5s ease-in-out infinite}
  @keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.4}}
}
.rail-version{display:none}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--steel);color:#fff;
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;
  text-transform:uppercase;letter-spacing:.02em}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 32px;background:var(--bg-card);border-bottom:1px solid var(--line);
}
.topbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-title h2{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.menu-btn{display:none;background:var(--bg-card);border:1px solid var(--line-input);color:var(--ink-dim);
  width:38px;height:38px;border-radius:var(--radius-sm);align-items:center;justify-content:center;cursor:pointer}
.menu-btn:hover{color:var(--ink);border-color:var(--faint)}
.crumb{font-size:12px;color:var(--muted);margin-top:1px}
.topbar-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.clock{font-size:12.5px;color:var(--ink-dim);padding:7px 12px;border:1px solid var(--line-input);border-radius:var(--radius-sm);background:var(--bg-subtle)}

/* Topbar-inhoud die per route wisselt (normale titel vs. SAM-commandobalk) */
.topbar .dash-only{display:none}
.topbar.dash .normal-only{display:none}
.topbar.dash .dash-only{display:flex}

/* SAM-commandobalk in de topbar (dashboard) */
.sam-cmdbar{flex:1;max-width:720px;align-items:center;gap:9px;
  padding:10px 14px;border:1.5px solid var(--weld-light);border-radius:12px;background:#fffdfb;
  transition:border-color .12s,box-shadow .12s}
.sam-cmdbar:focus-within{border-color:var(--weld);box-shadow:0 0 0 3px var(--weld-tint)}
.sam-cmdbar svg{flex:0 0 auto;color:var(--weld);width:17px;height:17px}
.sam-cmdbar input{flex:1;border:none;background:none;padding:0;font-size:13.5px;color:var(--ink);min-width:0}
.sam-cmdbar input:focus{outline:none;box-shadow:none;border:none}
.sam-cmdbar input::placeholder{color:var(--faint)}
.sam-cmdbar .sc-mic{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;display:inline-flex;padding:2px}
.sam-cmdbar .sc-mic:hover{color:var(--weld)}
.sam-cmdbar .sc-mic svg{width:16px;height:16px}
.sam-cmdbar .pal-kbd{flex:0 0 auto}

/* Lasnaad-strip: uitgefaseerd in het lichte thema (bottom-border op .topbar volstaat) */
.weld-bead{display:none}

.view{padding:24px 32px 60px;max-width:1320px;width:100%}
/* Datadichte pagina's (brede tabellen) laten de leeslimiet los: daar wint het
   overzicht van de regellengte. main.js zet deze klasse per route (`wide`). */
.view.wide{max-width:none;padding-bottom:24px}

/* ============================ Knoppen ===================================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:inherit;font-size:13px;font-weight:620;letter-spacing:.01em;
  padding:9px 15px;border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid var(--line-input);background:var(--bg-card);color:var(--ink);
  transition:background .12s,border-color .12s,box-shadow .12s,filter .12s;
}
.btn:hover{background:var(--bg-subtle);border-color:var(--faint)}
.btn:active{filter:brightness(.97)}
.btn svg{width:16px;height:16px}
.btn-primary{
  background:var(--weld);border-color:var(--weld-deep);color:#fff;
  box-shadow:var(--shadow-primary);
}
.btn-primary:hover{background:var(--weld-deep);border-color:var(--weld-deep)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:var(--navy);border-color:var(--navy)}
.btn-ghost{background:transparent;border-color:var(--line-input);color:var(--ink-dim)}
.btn-ghost:hover{background:var(--bg-subtle);color:var(--ink)}
.btn-outline-accent{background:#fffdfb;border-color:var(--weld-light);color:var(--weld-deep)}
.btn-outline-accent:hover{background:var(--weld-hover);border-color:var(--weld)}
.btn-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-ink-2)}
.btn-danger:hover{background:#fbdcda}
.btn-block{width:100%}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ============================ Panelen / kaarten =========================== */
.panel{
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);position:relative;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line-2);
}
.panel-head h3{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:0}
.panel-head .pipe{display:flex;align-items:center;gap:9px}
.panel-head .pipe::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--weld)}
.panel-body{padding:18px 20px}
.bolts::after{content:none}

/* ============================ KPI panel-meters ============================ */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px}
.meter{
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px 15px;
}
.meter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--weld))}
.meter .m-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.meter .m-val{font-family:var(--mono);font-size:28px;font-weight:700;line-height:1;margin-top:10px;color:var(--ink);letter-spacing:-.02em}
.meter .m-val small{font-size:13px;color:var(--muted);font-weight:500}
.meter .m-sub{font-size:12px;color:var(--ink-dim);margin-top:8px;display:flex;align-items:center;gap:6px}
.meter .m-ico{position:absolute;right:14px;top:14px;color:var(--accent,var(--weld));opacity:.55}
.meter .m-ico svg{width:22px;height:22px}

/* ============================ Statusbalk / legende ======================== */
.stackbar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--line-2)}
.stackbar span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:11px;font-size:12px;color:var(--ink-dim)}
.legend .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:middle}
.legend a{color:inherit;text-decoration:none;transition:color .12s}
.legend a:hover{color:var(--weld)}
a.meter{display:block;text-decoration:none;color:inherit;transition:transform .1s,border-color .12s,box-shadow .12s}
a.meter:hover{transform:translateY(-1px);border-color:var(--faint);box-shadow:0 6px 16px rgba(20,30,45,.1)}
.dl-row{text-decoration:none;color:inherit;border-radius:8px;cursor:pointer;transition:background .12s}
.dl-row:hover{background:var(--weld-hover)}

/* ============================ Tabellen ==================================== */
.tablewrap{overflow-x:auto;border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{
  text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:11px 14px;white-space:nowrap;
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;background:var(--bg-subtle)
}
table.data th:hover{color:var(--ink)}
table.data th.nosort{cursor:default}
table.data th .arr{opacity:0;font-size:9px;margin-left:4px}
table.data th.sorted .arr{opacity:1;color:var(--weld)}
table.data td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink)}
table.data tbody tr{transition:background .1s}
table.data tbody tr:hover{background:var(--bg-subtle)}
table.data tbody tr.clickable{cursor:pointer}
table.data tbody tr:last-child td{border-bottom:none}
.cell-nr{font-family:var(--mono);font-size:12px;color:var(--ink-dim);white-space:nowrap}
.cell-name{font-weight:620;color:var(--ink)}
.cell-muted{color:var(--ink-dim)}
.cell-empty{color:var(--faint);font-style:italic}
.row-actions{display:flex;gap:6px;justify-content:flex-end}

/* ============================ Badges ===================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:3px 10px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:640;
  border:1px solid transparent;
}
.badge .b-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;
  background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line)}
/* Tag die om aandacht vraagt zonder alarm te slaan — bv. "geschat" bij een
   tijdvak dat de app gokt (docs/plan-uren-capaciteit.md). */
.tag.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
/* Facturatiestatus-chip (ui.factuurStatusChip): staat altijd achter een
   fase-badge — in de projectenlijst en in de titelregel van de projectfiche. */
.fact-chip{margin-left:6px;vertical-align:middle;white-space:nowrap}

/* Marge-stoplicht (ui.margeStoplicht, docs/plan-marge-stoplicht.md): verkocht
   vs. gemaakt, per project. Kleuren = de bestaande ok/warn/danger-tokens (geen
   nieuwe hex), "geen budget" hergebruikt .tag (grijze, tekstloze chip). */
.mg-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;
  border-radius:6px;font-size:11.5px;font-weight:600;border:1px solid var(--line);
  background:var(--bg-subtle);color:var(--ink-dim);white-space:nowrap;vertical-align:middle}
.mg-chip.groen{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.mg-chip.oranje{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.mg-chip.rood{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.mg-chip.grijs{color:var(--muted)}
.mg-track{width:46px;height:7px;flex:0 0 auto;border-radius:4px;background:var(--line-2);overflow:hidden}
.mg-fill{display:block;height:100%;border-radius:4px}
.mg-chip.groen .mg-fill{background:var(--ok)}
.mg-chip.oranje .mg-fill{background:var(--warn)}
.mg-chip.rood .mg-fill{background:var(--danger)}
.mg-pct{white-space:nowrap}

.chip-person{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 3px;border-radius:20px;
  background:var(--bg-subtle);border:1px solid var(--line);font-size:11.5px;color:var(--ink-dim)}
.chip-person .av{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;background:var(--steel)}

/* Projectopvolging: de twee afgeleide kolommen (Status/Gefactureerd).
   De stapnaam mag de tabel niet uit elkaar duwen — vandaar de vaste max-breedte
   met ellipsis; de volledige tekst blijft in de tooltip staan. */
.op-status{display:flex;align-items:center;gap:8px;min-width:0}
.op-status .op-stap{font-size:12.5px;color:var(--ink-dim);max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Vrije tekst begrenzen: anders duwen lange omschrijvingen/notities de
   rechterkolommen (Exact) buiten beeld. Volledige tekst in de tooltip.
   De omschrijving mag over twee regels — dat is de kolom waar je op leest —
   de info-notities blijven op één regel. */
/* Tekstcellen: de kolombreedte komt van de tabel (fixed layout), de cel kapt
   enkel netjes af. Volledige tekst staat in de tooltip én in de bewerkmodal. */
.op-oms{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.op-kort,.op-info{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De opvolgingstabel krijgt een eigen scrollvenster i.p.v. mee te scrollen met
   de pagina. Met 130+ rijen loste dat twee ergernissen op: de horizontale
   scrollbalk stond helemaal onderaan de lijst (je moest eerst 130 rijen
   voorbij om hem te kunnen gebruiken) en de koptekst was dan allang uit beeld,
   zodat je niet meer wist in welke kolom je keek. Nu blijft de kop staan en
   zit de balk altijd onderaan het VENSTER.
   Let op: `overflow-x:auto` op .tablewrap maakt het sowieso al een
   scrollcontainer in beide richtingen — sticky op paginaniveau zou daar dus
   niet werken; een eigen hoogte is precies wat sticky wél laat werken.
   De aftrek werd 272 → 325px toen de tab-balk (Projectopvolging · Controlling)
   erboven kwam: die neemt ~53px in (segknop 37px + 16px marge), en zonder de
   correctie ging de pagina zélf mee scrollen — precies wat dit venster vermijdt. */
.op-tabel .tablewrap{max-height:max(320px, calc(100dvh - 325px));overflow:auto}
.op-tabel table.data thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
/* Vaste kolomverhoudingen: samen exact 100%, dus de tabel vult het scherm en
   loopt nooit over. Tegelijk springen de breedtes niet meer bij het filteren —
   met de automatische layout bepaalde de tóévallig langste cel de breedte. */
.op-tabel table.data{table-layout:fixed}
.op-tabel .op-c-nr{width:6.5%}
.op-tabel .op-c-klant{width:9.5%}
.op-tabel .op-c-oms{width:16.5%}
.op-tabel .op-c-datum{width:7.5%}
.op-tabel .op-c-offerte{width:7%}
.op-tabel .op-c-bedrag{width:8.5%}
.op-tabel .op-c-status{width:12.5%}
.op-tabel .op-c-gef{width:6.5%}
.op-tabel .op-c-exact{width:5.5%}
/* NIEUW cyclus 23: de échte Onfact-koppeling (chip met het Onfact-projectnummer). */
.op-tabel .op-c-koppel{width:7.5%}
/* Het vrije veld `onfact_nr` (kolomkop "Ref.") — kromp van 8% → 6% om plaats te
   maken voor .op-c-koppel hierboven; de som blijft exact 100%. */
.op-tabel .op-c-onfact{width:6%}
.op-tabel .op-c-info{width:6.5%}
/* De stapnaam volgt nu de kolom i.p.v. een vaste pixelmaat. `flex:0 1 auto`
   (niet `flex:1`): de tekst krimpt wél mee, maar duwt het poort-vinkje niet
   naar de rechterrand — dat hoort direct achter de stapnaam te staan. */
.op-tabel .op-status .op-stap{max-width:none;flex:0 1 auto}
/* Vinkje bij een dossier waarvan de facturatie-poort groen is maar de workflow
   nog niet volledig af — subtieler dan het groene teller-label. */
.op-poort{color:var(--ok-ink);font-weight:700;font-size:12px}
.op-gef{display:inline-flex;align-items:center;gap:6px}
/* Aankoopfacturen (Zenvoices) — zelfde scrollvenster/kolomlogica als hierboven:
   de pagina hergebruikt bewust `.op-tabel`, enkel de kolombreedtes verschillen. */
/* Samen exact 100% — `table-layout:fixed`, dus een kolom erbij betekent de rest
   versmallen (les van .ctl-tabel: anders komt er horizontale scroll). */
.op-tabel .af-c-sel{width:3%;text-align:center}
.op-tabel .af-c-datum{width:8%}
.op-tabel .af-c-lev{width:13%}
.op-tabel .af-c-nr{width:9%}
.op-tabel .af-c-bedrag{width:10%}
.op-tabel .af-c-check{width:9%}
.op-tabel .af-c-kp{width:13%}
.op-tabel .af-c-proj{width:12%}
.op-tabel .af-c-stand{width:11%}
.op-tabel .af-c-oms{width:12%}
.af-c-sel input{margin:0;cursor:pointer}
/* Het voorstel is nadrukkelijk GEEN koppeling: grijzer dan een echte chip,
   zodat "voorgesteld" en "bevestigd" nooit op elkaar lijken. */
.af-voorstel{color:var(--muted);font-size:12px}
.af-voorstel b{color:var(--ink);font-weight:650}
.af-kop{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px 16px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg-subtle)}
.af-kop>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.af-kop .muted{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.af-kop b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-uitleg{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;
  color:var(--muted);margin:0 0 10px}
.af-uitleg svg{flex:none;width:15px;height:15px;color:var(--arc)}

/* ── Verdeling over meerdere kostenplaatsen (docs/plan-zenvoices-kostenplaats.md)
   Eén factuur die meerdere projecten draagt: per project het bedrag dat er
   effectief geboekt wordt. Bewust geen invulveld — de verdeling volgt uit de
   factuurregels, met de hand overschrijven zou een cijfer geven dat nergens uit
   volgt. */
.af-verdeling{border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  margin:0 0 10px;background:var(--bg-subtle)}
.af-verdeling-kop{font-weight:700;font-size:12.5px;margin-bottom:6px}
.af-verdeling-rij{display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  align-items:baseline;font-size:13px;padding:3px 0}
.af-verdeling-rij>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--muted)}

/* ── Verrijking met het Zenvoices-detail (docs/plan-zenvoices-verrijking.md) ──
   De factuurregels, de uitgelezen referenties en het originele document zitten
   niet in de lijst maar per boeking. Zolang die ontbreken staat er te weinig op
   het scherm om een factuur aan een werf toe te wijzen — vandaar een uitleg met
   knop en een voortgangsbalk, geen stille achtergrondklus. */
.af-kopregel{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.af-selknop{background:none;border:0;padding:0;font:inherit;color:var(--arc);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.af-selknop:hover{color:var(--weld)}
/* De stand van de tijdspanne naast de kopregel: liep de vorige ronde met een
   ander venster dan wat er nu ingesteld staat, dan haalt de volgende ronde
   alles opnieuw op (docs/plan-zenvoices-tijdspanne.md). */
.af-venster{display:inline-flex;align-items:center;padding:1px 9px;
  border:1px solid var(--line);border-radius:99px;background:var(--bg-subtle);
  color:var(--ink-dim)}
.af-detailbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-subtle);font-size:12.5px}
.af-detailbox>svg{flex:none;width:16px;height:16px;color:var(--arc)}
.af-detailbox b{font-weight:700}
.af-voortgang{display:flex;align-items:center;gap:10px;margin-top:8px;
  font-size:12px;color:var(--muted)}
.af-balk{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden;
  min-width:120px}
.af-balk i{display:block;height:100%;width:0;border-radius:99px;background:var(--arc);
  transition:width .25s ease}

/* Het detailblok in het koppelvenster: samenvatting, factuurregels, referenties
   en het originele document. */
.af-detail{margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.af-samenvatting{font-size:13px;line-height:1.45}
.af-regels{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.af-regels table{width:100%;margin:0}
.af-regels th{position:sticky;top:0;z-index:1;background:var(--panel);font-size:11px}
.af-regels td{font-size:12.5px;vertical-align:top}
.af-bijlagen{display:flex;gap:8px;flex-wrap:wrap}
.af-bijlagen .btn{font-size:12.5px;padding:6px 10px}

/* ── Factuur-check onderaannemer (docs/plan-uurlijst-factuur-check.md, F3) ───
   Wat hadden de geboekte uren van die periode × de tariefkaart moeten
   opleveren? De chip in de wachtrij en de uitsplitsing in het koppelvenster
   tonen hetzelfde cijfer — beide zijn PUUR INFORMATIEF: groen betekent "een
   mens kan met vertrouwen op Bevestigen klikken", nooit "is goedgekeurd".
   ⚠ `geen_uren` en `onbekend` houden bewust de neutrale `.tag`-look: een
   datagat is geen afwijking, en rood zou dat signaal uithollen. */
.fc-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle}
.fc-groen{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.fc-oranje{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.fc-rood{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}

.fc-blok{border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  margin:0 0 12px;background:var(--bg-subtle)}
.fc-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.fc-kop b{font-size:12.5px;font-weight:700}
.fc-sub{font-size:12px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.fc-vul{flex:1}
.fc-periode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;
  color:var(--muted);margin-bottom:8px}
.fc-periode input[type=date]{font:inherit;font-size:12px;padding:4px 7px;
  border:1px solid var(--line-input);border-radius:8px;background:var(--bg-input);
  color:var(--ink)}
.fc-periode .btn{font-size:12px;padding:5px 10px}
.fc-tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.fc-tabel th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);
  padding:0 0 4px;border-bottom:1px solid var(--line-2)}
.fc-tabel td{padding:3px 0;border-bottom:1px solid var(--line-3);vertical-align:top}
.fc-tabel tr:last-child td{border-bottom:0}
.fc-tabel .right{text-align:right;white-space:nowrap}
.fc-tot{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;
  font-size:12.5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.fc-tot .muted{font-size:11.5px}
.fc-verschil{font-weight:700}
.fc-ink-groen{color:var(--ok-ink)}
.fc-ink-oranje{color:var(--warn-ink)}
.fc-ink-rood{color:var(--danger-ink)}
.fc-hints{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:12px;
  color:var(--muted);line-height:1.45}
.fc-voet{margin-top:8px;font-size:11.5px;color:var(--muted)}
.fc-melding{font-size:12.5px;line-height:1.5;margin-bottom:8px}
.fc-leer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fc-leer select{flex:1;min-width:150px}
/* Bolletje = handmatige override: deze rij volgt de workflow NIET. */
.op-hand{width:5px;height:5px;border-radius:50%;background:var(--weld);display:inline-block;flex:none}

/* Controlling-tab van dezelfde pagina (docs/plan-opvolging-controlling.md):
   vier klikbare kerncijfers die de lijst eronder omschakelen. Kaart-look en
   accent-mechaniek zijn die van .pipe-col (dashboard-pijplijn) — de tegels zijn
   hier <button>'s, dus de knop-eigen opmaak wordt eerst teruggezet. De accent-
   kleur komt per tegel als inline `--accent` mee (arc → steel → warn → danger). */
.ctl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ctl-kpi{
  display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--line);border-top:3px solid var(--accent,var(--line));
  border-radius:var(--radius);padding:13px 14px;transition:border-color .12s,box-shadow .12s,background .12s;
}
.ctl-kpi:hover{background:var(--bg-subtle)}
/* Actieve tegel: accentrand rondom (de extra 1px komt van de box-shadow, zodat
   de kaart niet verspringt door een dikkere rand). */
.ctl-kpi.on{border-color:var(--accent,var(--weld));box-shadow:0 0 0 1px var(--accent,var(--weld));background:var(--bg-subtle)}
.ctl-kpi .ck-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ctl-kpi .ck-count{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent,var(--ink));letter-spacing:-.02em;margin-top:4px}
.ctl-kpi .ck-sub{font-size:11.5px;color:var(--ink-dim)}
/* Uitsplitsing per Onfact-statuswoord boven de betaalverzoeken-tabel. */
.ctl-status-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px}
.ctl-status-chips .muted{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--muted);cursor:help}
/* "Toestand op …" hoort bij de filterbalk, niet als eigen regel boven de tabel:
   elke regel daar kost hoogte in het scrollvenster hieronder. */
.ctl-toestand{font-size:11.5px;color:var(--ink-dim);white-space:nowrap;cursor:help}

/* De controllingtabellen krijgen exact dezelfde behandeling als .op-tabel
   hierboven, en om exact dezelfde reden (Sam, 2026-08-01: "scrollbalk zit
   onderaan en niet handig"). Met honderden facturen groeide de pagina zelf
   mee: de horizontale scrollbalk hing helemaal onder de laatste rij, de
   kopregel was dan al lang uit beeld, en de tegels — die de lijst nota bene
   omschakelen — scrolden mee weg. Nu scrollt enkel de tabel, blijven de kop en
   de tegels staan, en zit de balk altijd onderaan het VENSTER.
   Deze aftrek (tab-balk ~53px + filterbalk ~51px + tegels ~106px +
   statuschips ~34px + paginamarges) is enkel een veilige BEGINwaarde: het
   aantal regels boven de tabel wisselt (waarschuwingsbalken, statuschips, de
   melding over onbekende factuurkoppelingen), dus opvolging.js meet de exacte
   hoogte en overschrijft ze — zie `ctlPasHoogteAan`. */
.ctl-tabel .tablewrap{max-height:max(280px, calc(100dvh - 400px));overflow:auto}
.ctl-tabel table.data thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
/* Vaste kolomverhoudingen (samen exact 100%) → de tabel vult het scherm zonder
   over te lopen, en de breedtes springen niet meer bij het wisselen van tegel.
   Kopteksten mogen daarbij afbreken: "Wacht op betaling" past niet op één
   regel in 11% breedte, en nowrap zou de kolom weer laten uitzetten. */
.ctl-tabel table.data{table-layout:fixed}
.ctl-tabel table.data th{white-space:normal}
.ctl-tabel .bv-c-nr{width:8%}
.ctl-tabel .bv-c-klant{width:16%}
.ctl-tabel .bv-c-project{width:16%}
.ctl-tabel .bv-c-datum{width:8.5%}
.ctl-tabel .bv-c-verval{width:9%}
.ctl-tabel .bv-c-bedrag{width:9.5%}
.ctl-tabel .bv-c-status{width:9%}
.ctl-tabel .bv-c-wacht{width:11%}
.ctl-tabel .bv-c-factuur{width:13%}
.ctl-tabel .fa-c-nr{width:9%}
.ctl-tabel .fa-c-klant{width:30%}
.ctl-tabel .fa-c-datum{width:9.5%}
.ctl-tabel .fa-c-verval{width:10%}
.ctl-tabel .fa-c-dagen{width:12%}
.ctl-tabel .fa-c-open{width:12.5%}
.ctl-tabel .fa-c-status{width:17%}

/* Betaalradar (derde tab op Opvolging, F9 — docs/plan-kostprijsmeter-
   klantkaart-betaalradar.md). De samenvattingstegels hergebruiken .ctl-kpi/
   .ck-* letterlijk (zelfde kaart-look); .br-tegel zet enkel de knop-cursor en
   -hover van die klasse terug, want deze tegels zijn <div>'s, niet klikbaar. */
.br-tegel{cursor:default}
.br-tegel:hover{background:var(--bg-card)}

.br-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--ink-dim);cursor:pointer;white-space:nowrap}

/* Klantenlijst: elke rij is een native <details> — het open/dicht-klappen
   kost geen regel JS. Geen tabel: een klantrij draagt te ongelijksoortige
   inhoud (naam, bedrag, dagen, actie-chip, een uitklapbare facturenlijst) om
   in kolommen te persen, en flex-wrap voorkomt vanzelf elke horizontale
   overloop op een smal scherm (geen vaste breedtes nodig). */
.br-lijst{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.br-row{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card)}
/* `list-style:none` + zelf `display:flex`: het standaard driehoekje van
   <summary> verdwijnt daarmee (patroon calculatie.js' `.panel.bolts`-
   uitklapkaarten) — enkel `cursor:pointer` blijft over als aanwijzing. */
.br-summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;
  align-items:center;gap:7px 14px;padding:11px 14px}
.br-summary::-webkit-details-marker{display:none}
.br-naam{flex:1 1 160px;min-width:0;font-weight:600;font-size:13.5px}
.br-bedrag{flex:0 0 auto;font-size:13px}
.br-dagen{flex:0 0 auto;font-size:11.5px;white-space:nowrap}
.br-detail{padding:0 14px 14px;border-top:1px solid var(--line-2)}
.br-detail .br-mailknop{margin-top:4px}
.br-weglaat{font-size:12px;margin:10px 2px 0}

/* Facturenlijst binnen de uitklaprij: vaste kolomverhoudingen (samen 100%),
   zelfde `table-layout:fixed`-truc als .op-tabel/.ctl-tabel hierboven — een
   tabel van vier smalle kolommen loopt zo op geen enkele breedte over. De
   `overflow-x:auto`-wrap is een defensieve marge, niet de eerste verdediging. */
.br-fc-wrap{overflow-x:auto;margin:8px 0}
.br-fc-tabel{table-layout:fixed;width:100%}
.br-fc-tabel .br-fc-nr{width:24%}
.br-fc-tabel .br-fc-verval{width:30%}
.br-fc-tabel .br-fc-dagen{width:20%}
.br-fc-tabel .br-fc-open{width:26%}

.dl{font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--ink)}
.dl.over{color:var(--danger-ink);font-weight:680}
.dl.soon{color:var(--warn-ink);font-weight:660}
.dl.none{color:var(--faint)}

/* Waarschuwingsbanner (bv. Onfact nog niet gekoppeld) */
.hazard{
  border-radius:var(--radius-sm);padding:12px 15px;font-size:13px;font-weight:620;
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink);
}
.hazard .inner{display:inline-block}

/* ============================ HUD-strip (compacte statusregel) =========== */
.hud{
  display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin-bottom:16px;
  padding:10px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-dim);
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.hud b{color:var(--ink);font-weight:700;margin-right:2px}
.hud .spacer{flex:1}
.hud-seg{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hud-seg i{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--faint)}
.hud-seg.arc i{background:var(--link)}
.hud-seg.ok i{background:var(--ok)}
.hud-seg.warn i{background:var(--warn)}
.hud-seg.crit i{background:var(--danger)}
.hud-year{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}
.hud-year select{min-width:0;padding:5px 28px 5px 10px;font-size:12px;font-family:var(--mono)}

/* ============================ Toolbar / filters ========================== */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.search{position:relative;flex:1;min-width:200px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;pointer-events:none}
.field, input[type=text], input[type=password], input[type=date], input[type=email], select, textarea{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:var(--bg-input);border:1px solid var(--line-input);border-radius:var(--radius-sm);padding:9px 12px;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
/* ⚠ background-COLOR, nooit de shorthand: `background:` wist de chevron-
   background-image van een select, waardoor een gefocuste select er als een
   tekstveld uitziet (Sams "Alle klanten"-melding, bulkmodal). */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--weld);box-shadow:0 0 0 3px var(--weld-tint);background-color:var(--bg-card)}
select{
  cursor:pointer;min-width:160px;width:auto;
  -webkit-appearance:none;appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6c7e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
}
select option{background:var(--bg-card);color:var(--ink)}
.search input{padding-left:34px}
.seg{display:flex;border:1px solid var(--line-input);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-card)}
.seg button{background:transparent;border:none;color:var(--ink-dim);font:inherit;font-size:12.5px;font-weight:600;
  padding:8px 13px;cursor:pointer;border-right:1px solid var(--line-input)}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--bg-subtle)}
.seg button.on{background:var(--ink);color:#fff}
.seg button.on:hover{background:var(--ink)}

/* Dropdown-pills (jaar/fase/klant-filters). ⚠ background-COLOR: de shorthand
   wiste hier de chevron van de `select`-regel hierboven, waardoor élke
   filterpill er als een tekstveld uitzag (zelfde fout als select:focus). */
.pill-select{border-radius:var(--radius-pill);background-color:var(--bg-card);min-width:0;padding:7px 26px 7px 13px;font-size:12.5px}

/* ============================ Planning-board ============================= */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:312px;gap:14px;
  overflow-x:auto;align-items:start;padding-bottom:12px}
.board-group{min-width:0}
.group-head{display:flex;align-items:center;gap:10px;margin:6px 2px 10px;position:sticky;top:0}
.group-head .gt{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.group-head .gt .av{width:26px;height:26px;border-radius:50%;background:var(--steel);color:#fff;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px}
.group-head .gc{font-size:11.5px;color:var(--ink-dim);background:var(--bg-subtle);border:1px solid var(--line);padding:1px 8px;border-radius:10px}
.group-head .gline{flex:1;height:1px;background:var(--line)}
.cards-row{display:flex;flex-direction:column;gap:11px}
.task-card{
  background:var(--bg-card);
  border:1px solid var(--line);border-left:3px solid var(--accent,var(--steel));
  border-radius:var(--radius-sm);padding:12px 13px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .12s,transform .1s,box-shadow .12s;
}
.task-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,30,45,.08);border-color:var(--faint)}
.task-card .tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.task-card .tc-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.task-card .tc-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--ink-dim)}
.task-card .tc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.task-card .tc-controls{display:flex;gap:6px;align-items:center}
.task-card select,.task-card input[type=date]{font-size:11.5px;padding:5px 7px;border-radius:7px;min-width:0}
.icon-btn{background:var(--bg-card);border:1px solid var(--line-input);color:var(--ink-dim);
  width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn:hover{color:var(--ink);border-color:var(--faint);background:var(--bg-subtle)}
.icon-btn svg{width:15px;height:15px}

/* ============================ Modal ====================================== */
.modal-bg{position:fixed;inset:0;background:rgba(20,30,45,.4);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:48px 18px;z-index:80;overflow-y:auto}
.modal{
  width:100%;max-width:520px;
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-modal);
  animation:pop .14s ease-out;
}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.modal-head h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px;color:var(--ink)}
.modal-head h3::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--weld)}
.modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:10px}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row label{font-size:12px;font-weight:620;color:var(--ink-dim);letter-spacing:.02em}
.form-row .hint{font-size:11px;color:var(--muted)}
/* Personenkiezer (nieuwe taak): meerdere mensen tegelijk aanvinken. */
.person-pick{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow-y:auto;
  padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-subtle)}
.pp-item{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:20px;
  background:var(--bg-card);border:1px solid var(--line);font-size:12px;color:var(--ink-dim);
  cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s}
.pp-item:hover{border-color:var(--weld-light)}
.pp-item input{margin:0;cursor:pointer;accent-color:var(--weld-deep)}
.pp-item .av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;background:var(--steel)}
.pp-item.on{background:var(--weld-tint);border-color:var(--weld-light);color:var(--weld-tint-ink);font-weight:600}
.pp-item.on .av{background:var(--weld-deep)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* Grid-items krimpen standaard niet onder hun inhoud (min-width:auto): één
   lange projectnaam in een select duwde zo het datumveld de modal uit. */
.form-2>*,.form-3>*{min-width:0}
/* SAM-verbruikspaneel */
.usage-tot{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.usage-chip{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-subtle);font-size:12px;color:var(--ink-dim)}
.usage-chip b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.usage-month{margin-bottom:16px}
.usage-month h4{font-size:12.5px;margin:0 0 6px;color:var(--ink-dim)}
.tier-badge{display:inline-block;padding:1px 7px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.tier-badge.snel{background:var(--link-bg);color:var(--link)}
.tier-badge.standaard{background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line)}
.tier-badge.zwaar{background:var(--weld-tint);color:var(--weld-tint-ink)}

/* ============================ Command palette (Ctrl+K) =================== */
.pal-kbd{font-size:10px;color:var(--ink-dim);border:1px solid var(--line-input);border-radius:5px;
  padding:1px 6px;background:var(--bg-subtle);letter-spacing:.06em}
.pal-bg{position:fixed;inset:0;background:rgba(20,30,45,.4);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:11vh 18px 18px;z-index:95}
.pal{
  width:100%;max-width:620px;
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-modal);
  animation:pop .12s ease-out;
}
.pal-input{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.pal-input svg{width:17px;height:17px;color:var(--weld);flex:0 0 17px}
.pal-input input{
  flex:1;background:none;border:none;padding:0;border-radius:0;
  font-size:15px;color:var(--ink);font-family:var(--sans);
}
.pal-input input:focus{outline:none;box-shadow:none;border:none}
.pal-list{max-height:52vh;overflow-y:auto;padding:7px}
.pal-group{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:9px 11px 4px}
.pal-row{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;color:var(--ink-dim);font-size:13.5px;
}
.pal-row svg{width:16px;height:16px;flex:0 0 16px;color:var(--muted)}
.pal-row .pr-title{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-row .pr-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pal-row .pr-kbd{margin-left:auto;opacity:0}
.pal-row.sel{background:var(--weld-hover);border-color:var(--weld-light)}
.pal-row.sel svg{color:var(--weld-deep)}
.pal-row.sel .pr-kbd{opacity:1}
.pal-empty{padding:26px 14px;text-align:center;font-size:13px;color:var(--muted)}
.pal-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--muted)}
.pal-foot .pal-kbd{margin-right:5px}
.x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:4px;border-radius:6px}
.x:hover{color:var(--ink);background:var(--bg-subtle)}
.preview{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);background:var(--bg-subtle);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto}

/* ============================ Uitschuifpaneel (drawer) =================== */
.drawer-bg{position:fixed;inset:0;background:rgba(20,30,45,.35);z-index:70;opacity:0;transition:opacity .2s}
.drawer-bg.open{opacity:1}
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;max-width:94vw;display:flex;flex-direction:column;
  background:var(--bg-card);border-left:1px solid var(--line);
  box-shadow:var(--shadow-drawer);transform:translateX(100%);transition:transform .22s ease-out}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.drawer-head h3{font-size:18px;font-weight:700;line-height:1.3;word-break:break-word;color:var(--ink)}
.drawer-sub{margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drawer-body{padding:18px 20px;overflow-y:auto;flex:1}
/* Projectpaneel-tabs (review U2): Overzicht · Workflow/Onderhoud · VGM */
.drawer-tabs{position:sticky;top:-18px;z-index:3;display:flex;gap:2px;margin:-18px -20px 16px;padding:12px 20px 0;
  background:var(--bg-card);border-bottom:1px solid var(--line)}
.drawer-tab{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--muted);padding:8px 13px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color .12s,border-color .12s}
.drawer-tab:hover{color:var(--ink)}
.drawer-tab.active{color:var(--weld-tint-ink);border-bottom-color:var(--weld)}
.drawer-tab:focus-visible{outline:2px solid var(--weld);outline-offset:1px;border-radius:5px}
.drawer-pane[hidden]{display:none}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.dl-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:6px}
.dl-meta .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.dl-meta .v{font-size:13.5px;color:var(--ink);margin-top:3px}
.mini-task{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:var(--bg-card)}
.mini-task.clickable{cursor:pointer;transition:border-color .12s,background .12s}
.mini-task.clickable:hover{border-color:var(--weld-light);background:var(--weld-hover)}
.mini-task .mt-title{font-size:13px;font-weight:600;color:var(--ink)}
.mini-task .mt-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.mini-task .mt-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Een documentrij kan bedrag + statuschip + twee icoonknoppen dragen; op een
   telefoon liep die rechterkolom buiten de drawer (de ✕ viel op 320px zelfs
   helemaal uit beeld). Laten terugvallen op een tweede regel i.p.v. overlopen. */
@media (max-width:520px){
  .mini-task .mt-right{flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;min-width:0;row-gap:4px}
}
.mt-done{width:26px;height:26px}
.mt-done:hover{color:var(--ok);border-color:var(--ok-border);background:var(--ok-bg)}
.mt-done svg{width:14px;height:14px}
.phase-block{border:1px solid var(--line);border-radius:9px;margin-bottom:10px;overflow:hidden;background:var(--bg-card)}
.phase-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--bg-subtle);border-bottom:1px solid var(--line);border-left:3px solid var(--pc,var(--weld))}
.phase-name{font-size:13px;font-weight:700;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase-count{font-size:11px;color:var(--ink-dim);background:var(--bg-card);border:1px solid var(--line);padding:1px 7px;border-radius:10px;flex:0 0 auto}
.phase-head .btn{padding:5px 9px;font-size:11.5px}
.phase-head .btn svg{width:13px;height:13px}
.phase-tasks{padding:8px 10px}
.phase-tasks .mini-task{margin-bottom:6px}
.phase-tasks .mini-task:last-child{margin-bottom:0}

/* Actieve filter-chip (bv. "Over deadline ✕") */
.filter-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 9px 7px 13px;border-radius:20px;
  font-size:12.5px;font-weight:640;color:#fff;background:var(--weld);box-shadow:var(--shadow-primary)}
.filter-chip button{background:rgba(0,0,0,.18);border:none;color:#fff;width:18px;height:18px;border-radius:50%;
  cursor:pointer;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.filter-chip button:hover{background:rgba(0,0,0,.3)}

/* "Gepland"-badge op een taakkaart */
.tc-plan{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--link);
  background:var(--link-bg);border:1px solid #d3e0f0;padding:2px 8px;border-radius:7px}
.tc-plan svg{width:13px;height:13px}

/* ============================ Gantt ====================================== */
.gantt-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.gantt-bar .seg button{padding:7px 11px}
.gantt-bar [data-nav]{min-width:34px;font-size:14px}
.g-range{font-size:13.5px;font-weight:700;color:var(--ink);min-width:210px;letter-spacing:.01em}
.gantt{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card)}
.g-grid{min-width:680px}
.gantt.month .g-grid{min-width:1000px}
.g-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line-2)}
.g-row:last-child{border-bottom:none}
.g-label{flex:0 0 200px;width:200px;padding:9px 13px;font-size:12.5px;color:var(--ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line);display:flex;align-items:center}
.g-track{position:relative;flex:1;display:flex;min-height:42px}
.g-cell{flex:1;border-right:1px solid var(--line-2)}
.g-cell:last-child{border-right:none}
.g-cell.we{background:var(--bg-subtle)}
.g-cell.today{background:var(--weld-tint)}
/* Dag met verlof/opleiding (uit de vakantieplanning) — subtiele arcering plus
   een telbadge in de kopregel; wie/wat staat in de tooltip. */
.g-cell.verlof{background:repeating-linear-gradient(135deg,transparent,transparent 5px,var(--bg-subtle) 5px,var(--bg-subtle) 10px)}
.g-cell.today.verlof{background:repeating-linear-gradient(135deg,var(--weld-tint),var(--weld-tint) 5px,var(--bg-subtle) 5px,var(--bg-subtle) 10px)}
.g-verlof{display:inline-flex;align-items:center;gap:2px;font-size:9.5px;font-weight:700;
  color:var(--steel);background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:0 4px;margin-left:3px;white-space:nowrap}
.g-verlof svg{width:9px;height:9px}
.g-headrow{position:sticky;top:0;z-index:2;background:var(--bg-subtle);border-bottom:1px solid var(--line)}
.g-headrow .g-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 0;font-size:12px;color:var(--ink-dim)}
.g-headrow .g-cell b{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.g-headrow .g-cell.today{color:var(--weld-deep);font-weight:700}
.g-bar{position:absolute;top:7px;bottom:7px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:8px;
  background:var(--bg);border:1px solid var(--dot);color:var(--fg);font-size:11.5px;font-weight:620;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:filter .1s,transform .1s,box-shadow .1s}
.g-bar:hover{filter:brightness(.97);transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,30,45,.12)}
.g-bar .d{width:6px;height:6px;border-radius:50%;background:var(--dot);flex:0 0 6px}
.g-bar.cutl{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:dashed}
.g-bar.cutr{border-top-right-radius:0;border-bottom-right-radius:0;border-right-style:dashed}
.g-grouphead{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--bg-subtle);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink)}
.g-grouphead i{font-style:normal;font-size:11px;color:var(--ink-dim);background:var(--bg-card);border:1px solid var(--line);padding:1px 8px;border-radius:10px}
.g-empty{display:flex;align-items:center;justify-content:center;gap:10px;padding:36px;color:var(--muted);font-size:13.5px}
.g-empty svg{width:18px;height:18px}
.g-bar .g-avs{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.g-av{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.55);color:var(--ink);font-size:8px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.7);flex:0 0 16px}
.g-av.more{background:rgba(255,255,255,.75)}
.g-bar .g-ttl{overflow:hidden;text-overflow:ellipsis}

/* ============================ Templates ================================== */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.tpl-card .panel-body{display:flex;flex-direction:column}
.tpl-tasks{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.tpl-task{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  background:var(--bg-subtle);border:1px solid var(--line);border-radius:8px}
.tpl-task-t{font-size:12.5px;font-weight:560;color:var(--ink)}
.tpl-card-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line-2);padding-top:12px;margin-top:auto;flex-wrap:wrap}
.tpl-card-foot .btn svg{width:14px;height:14px}

.tpl-preview{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-subtle);padding:8px;max-height:180px;overflow:auto}
.tpl-prev-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;font-size:12.5px;border-bottom:1px solid var(--line-2)}
.tpl-prev-row:last-child{border-bottom:none}
.tpl-prev-who{width:20px;height:20px;border-radius:50%;background:var(--steel);
  color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px}

.tpl-rows-head{display:grid;grid-template-columns:1fr 150px 124px 30px;gap:8px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:6px;padding:0 2px}
.tpl-row{display:grid;grid-template-columns:1fr 150px 124px 30px;gap:8px;align-items:center;margin-bottom:8px}
.tpl-row input,.tpl-row select{font-size:12.5px;padding:7px 9px}
.tr-del{width:30px;height:30px;font-size:14px}
.tpl-phase-row{grid-template-columns:1fr 30px}
.tpl-phase-item{justify-content:flex-start;gap:10px}
.tpl-phase-n,.tpl-prev-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--bg-subtle);border:1px solid var(--line);color:var(--ink-dim);font-size:10.5px;font-weight:700;flex:0 0 20px}
.tpl-prev-n{width:18px;height:18px;font-size:10px;margin-right:6px;vertical-align:middle}
@media(max-width:600px){
  .tpl-rows-head{display:none}
  .tpl-row{grid-template-columns:1fr 1fr;gap:6px}
  .tpl-row .tr-title{grid-column:1 / -1}
}

/* ============================ Detailpaneel-controls + bulk + drag ======== */
.drawer-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drawer-controls label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.drawer-controls label:last-child{grid-column:1 / -1}

.tc-sel{width:16px;height:16px;accent-color:var(--weld);cursor:pointer;flex:0 0 16px;margin-top:1px}
.tc-title{flex:1;min-width:0}
.tc-open{cursor:pointer;border-bottom:1px dotted transparent}
.tc-open:hover{color:var(--weld-deep);border-bottom-color:var(--weld-deep)}
.task-card.sel{border-color:var(--weld);box-shadow:0 0 0 1px var(--weld-glow)}

.bulk-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--navy);border:1px solid var(--navy-2);border-radius:12px;
  padding:10px 14px;box-shadow:var(--shadow-bulk)}
.bulk-bar .bulk-count{font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.bulk-bar select,.bulk-bar input{font-size:12.5px;padding:7px 9px;min-width:130px;width:auto;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.bulk-bar select option{background:var(--navy);color:#fff}
.bulk-bar .btn-primary{background:var(--weld);border-color:var(--weld-deep)}
/* "ook de N mogelijk dubbelen" — een vinkje, geen invulveld: de regel hierboven
   geeft élke `.bulk-bar input` 130px min-breedte en een eigen achtergrond.
   Enkel dát wordt hier teruggezet; de grootte blijft van de browser (en dus van
   de 20px-tikdoelregel op een telefoon). */
.bulk-bar .af-bulk-dub{display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:#fff;white-space:nowrap;cursor:pointer}
.bulk-bar .af-bulk-dub input{min-width:0;padding:0;background:none;accent-color:var(--weld)}

.g-bar{cursor:grab;touch-action:none}
.g-bar.dragging{opacity:.92;cursor:grabbing;z-index:6;box-shadow:0 8px 24px rgba(20,30,45,.3)}

/* ============================ Toast ====================================== */
.toast-stack{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:90;max-width:380px}
.toast{
  background:var(--bg-card);
  border:1px solid var(--line);border-left:4px solid var(--accent,var(--weld));
  border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-pop);
  font-size:13px;color:var(--ink);animation:slidein .18s ease-out;
}
.toast.ok{--accent:var(--ok)} .toast.err{--accent:var(--danger)} .toast.info{--accent:var(--link)} .toast.warn{--accent:var(--warn)}
.toast .t-title{font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:7px}
.toast .t-body{color:var(--ink-dim);font-size:12.5px}
.toast .t-pre{font-family:var(--mono);font-size:11px;color:var(--ink-dim);margin-top:6px;white-space:pre-wrap;max-height:120px;overflow:auto;background:var(--bg-subtle);border-radius:6px;padding:6px 8px}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* ============================ Login ====================================== */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 500px at 50% -10%,var(--weld-tint),transparent 60%),var(--bg-app);z-index:100}
.login-card{width:100%;max-width:360px;text-align:center;
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:13px}
.login-poweredby{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:-4px 0 -2px}
.login-hero{width:180px;height:180px;margin:2px auto 2px;border-radius:12px;overflow:hidden;
  background:#080b10;border:1px solid var(--line);box-shadow:0 8px 24px rgba(8,11,16,.28)}
.login-hero img{width:100%;height:100%;display:block;object-fit:contain}
.login-card h1{font-size:22px;letter-spacing:-.01em;color:var(--ink);font-weight:700}
.login-card h1 span{color:var(--weld)}
.login-sub{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:-6px}
.login-err{color:var(--danger-ink);font-size:12.5px;min-height:16px}

/* ============================ Diversen =================================== */
.empty-state{text-align:center;padding:54px 20px;color:var(--muted)}
.empty-state svg{width:64px;height:44px;opacity:.6;margin-bottom:12px;display:inline-block}
.loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px;color:var(--muted);font-size:13.5px}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--weld);border-radius:50%;animation:spin .8s linear infinite}
/* Lasboog-loader: gloeiend smeltbad met opspattende vonken (brand-detail, blijft) */
.arcload{position:relative;width:28px;height:26px;flex:0 0 28px;display:inline-block}
.arcload::before{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--weld);
  box-shadow:0 0 10px var(--weld),0 0 20px var(--weld-glow)}
.arcload::after{content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  width:20px;height:2px;border-radius:2px;background:var(--line-input)}
.arcload i{position:absolute;left:50%;bottom:9px;width:3px;height:3px;border-radius:50%;
  background:var(--weld);opacity:0}
@media(prefers-reduced-motion:no-preference){
  .arcload::before{animation:arcflick .8s steps(2,end) infinite}
  .arcload i{animation:spark 1s ease-out infinite}
  .arcload i:nth-child(1){--dx:-10px;animation-delay:0s}
  .arcload i:nth-child(2){--dx:1px;animation-delay:.33s}
  .arcload i:nth-child(3){--dx:10px;animation-delay:.66s}
  @keyframes spark{
    0%{transform:translate(-50%,0);opacity:1}
    100%{transform:translate(calc(-50% + var(--dx)),-15px);opacity:0}
  }
  @keyframes arcflick{
    0%,100%{box-shadow:0 0 10px var(--weld),0 0 20px var(--weld-glow)}
    50%{box-shadow:0 0 6px var(--weld),0 0 12px var(--weld-glow)}
  }
}
@keyframes spin{to{transform:rotate(360deg)}}
.error-box{border:1px solid var(--danger-border);background:var(--danger-bg);border-radius:var(--radius);padding:18px 20px;color:var(--danger-ink-2)}
.error-box h4{font-size:14px;margin-bottom:6px;color:var(--danger-ink-2)}
.error-box .mono{font-size:12px;color:var(--danger-ink);display:block;margin-top:8px;word-break:break-word}
.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin:26px 2px 12px;display:flex;align-items:center;gap:10px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.muted{color:var(--ink-dim)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.spacer{flex:1}

/* Diagnose */
.diag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.diag-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px;background:var(--bg-card)}
.diag-card.ok{border-color:var(--ok-border);background:var(--ok-bg)}
.diag-card.bad{border-color:var(--danger-border);background:var(--danger-bg)}
.diag-card .d-top{display:flex;align-items:center;justify-content:space-between}
.diag-card .d-name{font-weight:700;font-size:13.5px;text-transform:capitalize;color:var(--ink)}
.diag-card .d-meta{font-size:12px;color:var(--ink-dim);margin-top:6px;font-family:var(--mono)}

/* ============================ E-mail ===================================== */
.mail-wrap{display:grid;grid-template-columns:360px 1fr;gap:14px;height:calc(100vh - 172px);height:calc(100dvh - 172px);min-height:460px}
.mail-list{display:flex;flex-direction:column;overflow:hidden;padding:0}
.mail-folders{flex:0 0 auto;margin:10px 12px 8px}
.mail-folders button{flex:1;padding:7px 8px}
.mail-scroll{flex:1;min-height:0;overflow-y:auto}
.mr-del{width:22px;height:22px;padding:0;margin-left:6px;vertical-align:middle}
.mr-del svg{width:12px;height:12px}
.mail-list-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;font-size:12px;color:var(--muted);background:var(--bg-subtle);border-bottom:1px solid var(--line)}
.mail-row{padding:11px 14px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .1s}
.mail-row:hover{background:var(--bg-subtle)}
.mail-row.active{background:var(--weld-hover);box-shadow:inset 3px 0 0 var(--weld)}
.mr-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mr-from{font-size:13px;font-weight:560;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-row.unread .mr-from{color:var(--ink);font-weight:700}
.mr-date{font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.mr-subject{font-size:12.5px;color:var(--ink-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-row.unread .mr-subject{color:var(--ink)}
.mail-row.unread .mr-from::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--weld);margin-right:7px;vertical-align:middle}

.mail-read{display:flex;flex-direction:column;overflow:hidden;padding:0}
.mail-read-head{padding:16px 18px 12px;border-bottom:1px solid var(--line-2)}
.mrh-subject{font-size:17px;font-weight:700;line-height:1.3;word-break:break-word;margin-bottom:8px;color:var(--ink)}
.mrh-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-dim)}
.mrh-to{font-size:12px;margin-top:4px;color:var(--muted)}
.mrh-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mail-atts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.mail-att{display:inline-flex;align-items:center;gap:7px;max-width:230px;padding:6px 10px;border-radius:8px;
  background:var(--bg-subtle);border:1px solid var(--line);color:var(--ink-dim);font-size:12px;text-decoration:none;transition:border-color .12s}
.mail-att:hover{border-color:var(--faint);color:var(--ink);text-decoration:none}
.mail-att svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
.mail-att .ma-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-att .ma-size{color:var(--muted);flex:0 0 auto;font-family:var(--mono);font-size:11px}
.mail-body{flex:1;overflow:auto;min-height:0}
.mail-text{font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--ink-dim);white-space:pre-wrap;word-break:break-word;padding:16px 18px;margin:0}
.mail-frame{width:100%;height:100%;border:none;background:#fff;display:block}
.mail-imgbar{display:flex;align-items:center;gap:8px;padding:8px 18px;font-size:12px;color:var(--warn-ink);
  background:var(--warn-bg);border-bottom:1px solid var(--warn-border)}
.mail-imgbar svg{width:15px;height:15px}
.link-btn{background:none;border:none;color:var(--link);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}

.mail-att-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mail-att-list{display:flex;gap:6px;flex-wrap:wrap}
.mail-att.ma-edit{cursor:default}
.ma-del{background:rgba(20,30,45,.12);border:none;color:var(--ink-dim);width:16px;height:16px;border-radius:50%;
  cursor:pointer;font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ma-del:hover{background:var(--danger-bg);color:var(--danger-ink)}

/* Opmaak-editor (web/js/mailedit.js) — opstelvenster én handtekeningmodal.
   De hoogte van .me-body komt als inline style uit maakEditor(minHeight). */
.me-wrap{border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:var(--bg-card)}
.me-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;
  background:var(--bg-subtle);border-bottom:1px solid var(--line-2)}
/* display:flex hierboven wint van de UA-regel voor [hidden]; zonder deze regel
   blijft de balk zichtbaar in het terugvalpad (bar.hidden = true). */
.me-bar[hidden]{display:none}
.me-bar button{height:26px;min-width:26px;padding:0 6px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:var(--ink-dim);font:inherit;font-size:12.5px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.me-bar button:hover{background:var(--weld-hover);color:var(--ink)}
.me-bar button.on{background:var(--weld-tint);color:var(--weld-deep);border-color:var(--line)}
.me-bar button svg{width:14px;height:14px}
.me-bar select{height:26px;max-width:132px;padding:0 4px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-card);color:var(--ink-dim);font:inherit;font-size:12px;cursor:pointer}
.me-bar input[type=color]{width:28px;height:24px;padding:0;border:none;background:none;cursor:pointer}
.me-body{padding:12px 14px;font-size:13.5px;line-height:1.6;color:var(--ink);
  overflow:auto;outline:none;word-break:break-word}
.me-body blockquote{margin:10px 0;padding-left:12px;border-left:3px solid var(--steel-600);color:var(--muted)}
.me-fallback{font-size:11.5px;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--line-2)}

.acc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;
  border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:var(--bg-card)}
.acc-label{font-size:13.5px;font-weight:600;color:var(--ink)}

/* ============================ Instellingen =============================== */
.settings-wrap{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:8px}
.settings-tab{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--ink-dim);font:inherit;font-size:13.5px;font-weight:560;text-align:left}
.settings-tab svg{width:17px;height:17px;opacity:.85;flex:0 0 17px}
.settings-tab:hover{background:var(--bg-subtle);color:var(--ink)}
.settings-tab.active{background:var(--weld-tint);color:var(--weld-deep);border-color:transparent;font-weight:640}
/* min-width:0 — een 1fr-grid-track krimpt standaard niet onder de intrinsieke
   breedte van zijn inhoud, dus duwde een brede tabel (Gebruikers, AI-toegang)
   de hele pagina zijdelings weg op een telefoon. Met deze regel blijft de kolom
   binnen het scherm en scrollt de tabel binnen haar eigen .tablewrap. */
.settings-body{min-height:340px;min-width:0}

/* Radiokaarten (bv. AI-aanbieder kiezen) */
.radio-card{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:9px;cursor:pointer;background:var(--bg-card);transition:border-color .12s,background .12s}
.radio-card:hover{border-color:var(--faint)}
.radio-card.active{border-color:var(--weld);background:var(--weld-hover)}
.radio-card .rc-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-input);flex:0 0 18px;position:relative}
.radio-card.active .rc-dot{border-color:var(--weld)}
.radio-card.active .rc-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--weld)}
.radio-card .rc-main{flex:1;min-width:0}
.radio-card .rc-name{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.radio-card .rc-meta{font-size:12px;color:var(--muted);margin-top:2px}
.radio-card .rc-active-badge{font-size:10.5px;font-weight:700;color:var(--ok-ink);background:var(--ok-bg);border:1px solid var(--ok-border);padding:1px 8px;border-radius:10px;flex:0 0 auto}

/* ============================ SAM (assistent) =========================== */
.sam-scroll{overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.sam-msg{display:flex;flex-direction:column;gap:3px;max-width:82%;margin-bottom:13px}
.sam-msg.me{align-items:flex-end;align-self:flex-end}
.sam-msg.sam{align-items:flex-start;align-self:flex-start}
.sam-who{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.sam-live{color:var(--ok-ink);font-weight:600}
.sam-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:4px}
/* max-width:100%: zonder klem duwt de intrinsieke breedte van een tabel
   (onbreekbare bedragen) de bubbel voorbij de 82% van .sam-msg en wordt de
   chat zijdelings scrollbaar — mét klem scrolt de tabel binnen .sam-tabelwrap. */
.sam-bubble{padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-width:100%}
.sam-msg.me .sam-bubble{background:var(--steel);color:#fff;border-radius:14px 14px 4px 14px}
.sam-msg.sam .sam-bubble{background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
/* Markdown-tabel in een SAM-antwoord (plan-sam-data-toegang §8, fase 4): eigen
   compacte stijl — bewust NIET table.data (die is voor paginatabellen) — met
   een eigen scrollvenster, want het widget-paneel is smal. white-space:normal
   heft de pre-wrap van de bubbel binnen de tabel op. */
.sam-tabelwrap{overflow-x:auto;max-width:100%;margin:6px 0;white-space:normal}
.sam-tabel{border-collapse:collapse;font-size:12.5px;line-height:1.45}
/* word-break:normal: de bubbel zet break-word en dat zou bedragen middenin
   afbreken — een te brede tabel hoort in de wrap te scrollen, niet te knakken. */
.sam-tabel th,.sam-tabel td{padding:5px 10px;border:1px solid var(--line);text-align:left;vertical-align:top;word-break:normal}
.sam-tabel th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:var(--bg-subtle)}
.sam-tabel td{font-variant-numeric:tabular-nums}
.sam-tabel .ta-r{text-align:right}
.sam-tabel .ta-c{text-align:center}
.sam-typing{display:inline-flex;gap:4px;align-items:center}
.sam-typing span{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:samblink 1.2s infinite}
.sam-typing span:nth-child(2){animation-delay:.2s}.sam-typing span:nth-child(3){animation-delay:.4s}
@keyframes samblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.sam-err{font-size:12.5px;color:var(--danger-ink);padding:0 18px}
.sam-err a{color:var(--link)}

.sam-inputbar{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line-2)}
.sam-input{flex:1;resize:none;max-height:150px;min-height:44px}
.sam-mic{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--line-input);
  background:var(--bg-card);color:var(--ink-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sam-mic:hover{color:var(--ink);border-color:var(--faint);background:var(--bg-subtle)}
.sam-mic svg{width:18px;height:18px}
.sam-mic.recording{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-ink);animation:sampulse 1.1s infinite}
@keyframes sampulse{0%,100%{box-shadow:0 0 0 0 rgba(214,69,64,.3)}50%{box-shadow:0 0 0 6px rgba(214,69,64,0)}}
.sam-send{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:var(--radius-sm)}
.sam-send svg{width:17px;height:17px}
/* Paperclip: uren-Excel inlezen (docs/plan-uren-excel-sam.md) */
.sam-attach{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--line-input);
  background:var(--bg-card);color:var(--ink-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sam-attach:hover{color:var(--ink);border-color:var(--faint);background:var(--bg-subtle)}
.sam-attach svg{width:18px;height:18px}
.sam-panel.sam-drop,.sam-page.sam-drop{outline:2px dashed var(--weld);outline-offset:-6px;background:var(--weld-tint)}
/* Kaart: uren uit Excel */
.sam-xl-wie{font-size:12.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sam-xl-wie .pill-select{max-width:100%}
.sam-xl-subpersoon{flex:1;min-width:120px;max-width:220px;height:30px;font-size:12.5px;padding:0 8px}
.sam-xl-wrap{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg-card);margin-bottom:8px}
.sam-xl-tabel{width:100%;border-collapse:collapse;font-size:12px;white-space:normal}
.sam-xl-tabel th{position:sticky;top:0;background:var(--bg-subtle);text-align:left;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-dim);padding:5px 7px;border-bottom:1px solid var(--line)}
.sam-xl-tabel td{padding:4px 7px;border-bottom:1px solid var(--line-2);vertical-align:top}
.sam-xl-tabel tr:last-child td{border-bottom:0}
.sam-xl-tabel td.sam-xl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sam-xl-tabel tr.onbekend_project td,.sam-xl-tabel tr.ongeldig td{color:var(--ink-dim);background:var(--warn-bg)}
.sam-xl-tabel tr.dubbel td{color:var(--ink-dim)}
.sam-xl-sub{font-size:11px}
.sam-xl-fout{font-size:11px;color:var(--warn-ink)}
.sam-xl-fouten{font-size:12px;margin-bottom:8px;color:var(--danger-ink)}
.sam-xl-fouten ul{margin:4px 0 0 16px;padding:0}
/* Denkniveau-knop */
.sam-tier{flex:0 0 auto;height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;
  border-radius:var(--radius-sm);border:1px solid var(--line-input);background:var(--bg-card);color:var(--ink-dim);
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.sam-tier:hover{border-color:var(--faint);color:var(--ink)}
.sam-tier .ti{font-size:15px;line-height:1}
.sam-tier[data-tier="snel"]{border-color:#c7d7ea;color:var(--link)}
.sam-tier[data-tier="zwaar"]{border-color:var(--weld-light);color:var(--weld-deep)}

.sam-intro{text-align:center;max-width:520px;margin:24px auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.sam-intro h4{font-size:16px;font-weight:700;color:var(--ink)}
.sam-intro p{font-size:13px;color:var(--ink-dim);line-height:1.6;margin:0}
.sam-examples{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:8px}
.sam-ex{text-align:left;white-space:normal;padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg-card);color:var(--ink-dim);font:inherit;font-size:12.5px;cursor:pointer}
.sam-ex:hover{border-color:var(--faint);color:var(--ink);background:var(--bg-subtle)}
.sam-ex.sam-brief{border-color:var(--weld-light);color:var(--weld-tint-ink);font-weight:600;background:var(--weld-tint)}
.sam-ex.sam-brief:hover{border-color:var(--weld);background:var(--weld-hover)}
.sam-badge{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--weld-light),var(--weld));color:#fff;flex:0 0 auto}
.sam-badge svg{width:16px;height:16px}
.sam-badge.lg{width:44px;height:44px;border-radius:12px}.sam-badge.lg svg{width:24px;height:24px}

/* Voorgestelde actie (taak) */
.sam-alles-rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.sam-msg.sam-kaartmsg{margin-top:-4px}
.sam-action{border:1.5px solid var(--weld-light);border-radius:10px;padding:10px 13px;margin-top:4px;background:var(--weld-hover);max-width:100%}
.sam-action-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--weld-tint-ink);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.sam-action-h svg{width:13px;height:13px}
.sam-action-t{font-size:13px;margin-bottom:8px;color:var(--ink)}
.sam-done{color:var(--ok-ink);font-size:12.5px;font-weight:600}
.sam-writeprev{margin:2px 0 8px;padding:8px 10px;max-height:170px;overflow:auto;background:var(--bg-card);border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--ink-dim)}

/* Bronnenspoor onder een SAM-antwoord */
.sam-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--muted)}
.sam-tools svg{width:12px;height:12px;flex:0 0 12px}

/* Workflow MLS (projectpaneel + dashboard) */
.wf-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line-2)}
.wf-row:last-child{border-bottom:none}
.wf-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;margin-top:2px;
  width:17px;height:17px;flex:0 0 17px;cursor:pointer;border-radius:5px;
  border:1.5px solid var(--line-input);background:var(--bg-card);position:relative;
}
.wf-row input[type=checkbox]:checked{background:var(--ok);border-color:var(--ok)}
.wf-row input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg);
}
.wf-row.optional input[type=checkbox]{border-style:dashed}
.wf-row.nvt input[type=checkbox]{opacity:.5}
.wf-row.current{background:var(--weld-hover);border-left:3px solid var(--weld);margin-left:-3px;padding-left:9px;border-radius:0 6px 6px 0}
.wf-row.current input[type=checkbox]{border-color:var(--weld);border-width:1.5px}
.wf-main{min-width:0;flex:1}
.wf-titel{font-size:13px;color:var(--ink)}
.wf-nr{color:var(--muted);font-size:11px;margin-right:2px}
.wf-row.done .wf-titel,.wf-row.nvt .wf-titel{color:var(--muted);text-decoration:line-through}
.wf-meta{font-size:11px;color:var(--muted);margin-top:1px}
.wf-nvt-btn{background:none;border:1px solid var(--line-input);border-radius:6px;color:var(--muted);font-size:10.5px;padding:2px 7px;cursor:pointer;flex:0 0 auto}
.wf-nvt-btn.on{color:var(--warn-ink);border-color:var(--warn-border);background:var(--warn-bg)}
.wf-optional-chip{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg-subtle);border:1px solid var(--line);padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:middle}
/* Cyclus 61 (docs/plan-workflow-automatisch.md): soort per stap, signaalstip,
   chips "bewijs veranderd"/"Vergeten?" en het voorstelblok. De soortchips
   staan ook in Instellingen › Workflow. */
.wf-soort{font-size:10px;font-weight:600;letter-spacing:.02em;padding:1px 6px;border-radius:8px;border:1px solid var(--line);margin-left:6px;vertical-align:middle;white-space:nowrap;color:var(--muted);background:var(--bg-subtle)}
.wf-soort-vanzelf{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-border)}
.wf-soort-voorstel{color:var(--weld-tint-ink);background:var(--weld-tint);border-color:var(--weld)}
.wf-soort-manueel{color:var(--muted);background:var(--bg-subtle);border-color:var(--line)}
.wf-signaal{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-input);vertical-align:middle;margin-right:2px}
.wf-signaal.aan{background:var(--ok)}
.wf-signaal.uit{background:var(--muted);opacity:.5}
.wf-chip{display:inline-block;font-size:10px;font-weight:600;padding:0 6px;border-radius:8px;border:1px solid var(--line);white-space:nowrap}
.wf-bewijs-veranderd{color:var(--warn-ink);background:var(--warn-bg);border-color:var(--warn-border)}
.wf-vergeten{color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-border)}
.wf-voorstel{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;padding:6px 8px;border:1px dashed var(--weld);border-radius:6px}
.wf-voorstel-tekst{font-size:12px;color:var(--ink);flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
/* Inklapbare stappenlijst in het projectpaneel */
.wf-fold summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-card);font-size:12.5px;font-weight:640;color:var(--ink-dim);
  transition:background .12s,border-color .12s;
}
.wf-fold summary::-webkit-details-marker{display:none}
.wf-fold summary:hover{background:var(--bg-subtle);color:var(--ink)}
.wf-fold summary svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted);transition:transform .15s;transform:rotate(180deg)}
.wf-fold[open] summary svg{transform:rotate(0deg)}
.wf-fold[open] summary{border-radius:10px 10px 0 0;border-bottom-color:transparent}
.wf-fold .wf-huidige{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wf-list{border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;overflow:hidden}
.wf-dash-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-bottom:1px solid var(--line-2);cursor:pointer;border-radius:8px}
.wf-dash-row:last-child{border-bottom:none}
.wf-dash-row:hover{background:var(--bg-subtle)}
.wfbar{flex:1;height:8px;border-radius:5px;background:var(--line-2);min-width:60px;position:relative}
.wfbar i{display:block;height:100%;max-width:100%;border-radius:5px;position:relative;background:var(--weld)}

/* Facturatie-poortbadge */
.gate-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:640}
.gate-badge.warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border)}
.gate-badge.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-border)}

/* ── Werken (docs/plan-werkreferentie.md), tab "Werken" in de projectfiche ──
   Enkel op bestaande tokens: ok/warn/danger/dim-kleuren, geen nieuwe. */
.wk-status-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-pill);
  font:inherit;font-size:11.5px;font-weight:640;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.wk-status-pill.wk-dim{background:var(--bg-subtle);color:var(--ink-dim);border-color:var(--line)}
.wk-status-pill.wk-arc{background:var(--link-bg);color:var(--link);border-color:var(--link)}
.wk-status-pill.wk-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.wk-status-pill.wk-weld{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:var(--weld-light)}
.wk-status-pill.wk-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
/* Vervallen: gedempt + doorstreept — het werk telt niet meer mee, de ref blijft staan */
.wk-status-pill.wk-vervallen{background:var(--bg-subtle);color:var(--faint);border-color:var(--line);text-decoration:line-through}
/* Rode "niet toegewezen"-regel: valt op vóór er gefactureerd wordt */
.wk-toewijs-regel{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--danger-bg);color:var(--danger-ink-2);border:1px solid var(--danger-border);
  border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;font-weight:620;margin-bottom:14px}
.wk-toewijs-regel:hover{border-color:var(--danger)}
.wk-toewijs-lijst{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 8px}
.wk-toewijs-rij{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line-2);
  font-size:12.5px;cursor:pointer}
.wk-toewijs-rij:last-child{border-bottom:none}

/* Actiechips (Labels & spoollijst, NDO-request, VGM-checklist ...) */
.action-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-card);color:var(--ink-dim);font-size:12.5px;font-weight:600;cursor:pointer}
.action-chip:hover{border-color:var(--faint);color:var(--ink);background:var(--bg-subtle)}
.action-chip svg{width:15px;height:15px}

/* Prijsaanvragen (RFQ) */
.rfq-sup{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--ink-dim);margin:2px 4px 2px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg-card)}
.rfq-sup.best{border-color:var(--ok);border-width:1.5px;color:var(--ok-ink);background:var(--ok-bg);font-weight:600}
.rfq-best-label{font-size:9px;font-weight:800;letter-spacing:.05em;margin-right:2px}

/* Twijfels van de calculatie-agent (docs/plan-calc-agent.md).
   Elke twijfel is een werkregel met drie standen: open (nog na te kijken),
   aanvaard (✓ — de aantallen blijven staan) en verworpen (✗ — de gekoppelde
   calculatieregels zijn eruit gehaald, dus ook uit de offerte). */
.tw-rij{display:flex;gap:8px;align-items:flex-start;padding:5px 7px;border-radius:8px;
  border:1px solid transparent;font-size:12.5px}
.tw-rij + .tw-rij{margin-top:2px}
.tw-rij.ok{background:var(--ok-bg);border-color:var(--ok-border)}
.tw-rij.weg{background:var(--danger-bg);border-color:var(--danger-border)}
/* Enkel de verworpen twijfel zélf wordt doorstreept: `text-decoration` erft
   door naar alle nakomelingen en is daar niet meer af te zetten, dus de
   gevolgregel eronder mag er niet in zitten. */
.tw-rij.weg .tw-wat{color:var(--muted);text-decoration:line-through}
.tw-tekst{flex:1;min-width:0;line-height:1.45}
.tw-meta{font-size:11px;color:var(--muted);margin-top:1px}
.tw-knoppen{display:flex;gap:4px;flex:0 0 auto;padding-top:1px}
/* Klein groen/rood vinkje — bewust compact (Sams vraag), maar met een
   aanraakvriendelijke trefzone op een toestel zonder muis. */
.tw-btn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-input);background:var(--bg-card);color:var(--muted);
  border-radius:7px;cursor:pointer;padding:0;line-height:1;font-size:13px;font-weight:700}
.tw-btn:hover{border-color:var(--faint);color:var(--ink)}
.tw-btn svg{width:14px;height:14px}
.tw-btn.ja:hover,.tw-btn.ja.aan{color:var(--ok-ink);border-color:var(--ok-border);background:var(--ok-bg)}
.tw-btn.nee:hover,.tw-btn.nee.aan{color:var(--danger-ink);border-color:var(--danger-border);background:var(--danger-bg)}
.tw-btn.aan{font-weight:800}
.tw-gevolg{font-size:11px;color:var(--muted);margin-top:2px}
.tw-gevolg b{color:var(--ink-dim);font-weight:640}
/* Regelkiezer in het verwerp-venster: wat gaat er uit de calculatie? */
.tw-kies{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.tw-kies:last-child{border-bottom:0}
.tw-kies input[type=text]{width:64px;text-align:right}
.tw-kies-nu{font-size:11px;color:var(--muted);flex:0 0 auto}
@media not all and (any-pointer:fine){
  .tw-btn{width:32px;height:32px;font-size:15px}
  .tw-kies input[type=text]{font-size:16px}
}

/* Volledige SAM-pagina */
.sam-page{display:flex;flex-direction:column;height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:440px}

/* Zwevende widget (op elk tabblad) */
#samWidget{position:fixed;right:22px;bottom:22px;z-index:65}
.sam-fab{display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border-radius:26px;cursor:pointer;
  border:1px solid var(--weld-deep);color:#fff;font:inherit;font-size:14px;font-weight:700;
  background:var(--weld);box-shadow:var(--shadow-primary)}
.sam-fab:hover{background:var(--weld-deep)}
.sam-fab svg{width:19px;height:19px}
.sam-panel{position:fixed;right:22px;bottom:22px;width:390px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);
  display:none;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--line);
  box-shadow:var(--shadow-modal)}
.sam-panel.open{display:flex;animation:pop .16s ease-out}
.sam-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line-2)}
.sam-head-id{display:flex;align-items:center;gap:10px}
.sam-head-id strong{font-size:14px;display:block;letter-spacing:0;color:var(--ink)}
.sam-head-id span{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.sam-panel .sam-scroll{flex:1}
.sam-head .icon-btn{font-size:15px}

/* ============================ Dashboard: ochtendbriefing + pijplijn ====== */
.brief-card{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border-radius:var(--radius);padding:20px 22px;color:#fff;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
}
.brief-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--weld-light);display:flex;align-items:center;gap:8px}
.brief-text{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.92)}
.brief-text b{color:#fff}
.brief-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.brief-actions .btn-primary{box-shadow:none}
.brief-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff}
.brief-ghost:hover{background:rgba(255,255,255,.16)}

.dash-grid{grid-template-columns:1fr 380px;gap:20px;align-items:start}
/* 7 kolommen sinds de facturatiestanden erbij kwamen (plan-project-
   facturatiestatus.md): auto-fit i.p.v. een vast aantal, zodat de rij op een
   smaller scherm netjes doorloopt op een tweede regel i.p.v. samen te knijpen. */
.pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.pipe-col{background:var(--bg-card);border:1px solid var(--line);border-top:3px solid var(--accent,var(--line));border-radius:var(--radius);padding:13px 12px}
.pipe-col .pc-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pipe-col .pc-count{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent,var(--ink));margin-top:6px;letter-spacing:-.02em}
.pipe-col .pc-projects{margin-top:9px;display:flex;flex-direction:column;gap:3px}
.pipe-col .pc-projects span{font-size:11.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe-col .pc-projects span[data-pid]{cursor:pointer}
.pipe-col .pc-projects span[data-pid]:hover{color:var(--weld-deep);text-decoration:underline}
.pipe-stack{margin-top:14px}

.today-list{display:flex;flex-direction:column;gap:2px}
.today-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-2);position:relative;padding-left:12px;cursor:pointer;border-radius:6px}
.today-row:hover{background:var(--bg-subtle)}
.today-row:last-child{border-bottom:none}
.today-row::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;background:var(--line-input)}
.today-row.over::before{background:var(--danger)}
.today-row.week::before{background:var(--warn)}
.today-row .tr-title{font-size:13px;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-row .tr-meta{font-size:11.5px;color:var(--muted);flex:0 0 auto}

.billable-card{border:1.5px solid var(--ok-border);background:var(--ok-bg)}
.billable-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13px;color:var(--ink)}
.billable-row .br-amt{font-family:var(--mono);font-weight:700;color:var(--ok-ink)}

.workload-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.workload-row .wl-name{flex:0 0 52px;font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workload-row .wl-bar{flex:1;height:7px;border-radius:4px;background:var(--line-2);overflow:hidden}
.workload-row .wl-bar i{display:block;height:100%;background:var(--steel)}
.workload-row.top .wl-bar i{background:var(--weld)}
.workload-row .wl-count{flex:0 0 auto;font-size:12px;color:var(--ink-dim);font-family:var(--mono)}

/* ============================ Planbord =================== */
/* Personeelsplanning naast de Gantt: rijen = personen, kolommen = werkdagen.
   .pb-wrap = flex-rij met het rooster (.planbord) en ernaast, rechts, het
   inklapbare zijpaneel "Nog niet ingepland" (.pb-tray — zie verderop).
   Eén plat CSS-grid (.pb-grid): kolom 1 = rijkoppen, kolom 2..n = werkdagen.
   JS zet het aantal dagkolommen inline als --pb-days op .pb-grid en geeft
   maand-/weekcellen inline grid-column:span K mee. De hoekcel van elke
   kopregel (.pb-months/.pb-weeks/.pb-days, telkens kolom 1 — .pb-days
   toont zelf de tekst "Medewerker") is sticky in BEIDE richtingen; dat
   bevriest de hoek zonder extra trucs. */
.pb-wrap{
  display:flex;align-items:stretch;gap:14px;
}
.planbord{
  flex:1 1 auto;min-width:0;
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-card);
}
.planbord .pb-grid{
  display:grid;
  grid-template-columns:minmax(150px,180px) repeat(var(--pb-days),minmax(130px,1fr));
}

/* Kopcellen: allemaal sticky boven op de top-offset van hun eigen kopregel
   (maand/week/dag gestapeld); de hoekcellen zijn bovendien sticky links. */
.pb-months,.pb-weeks,.pb-days,.pb-month,.pb-week,.pb-day{
  position:sticky;
  border-right:1px solid var(--line-2);
  display:flex;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pb-months,.pb-month{top:0;height:28px;border-bottom:1px solid var(--line-2)}
.pb-weeks,.pb-week{top:28px;height:26px;border-bottom:1px solid var(--line-2)}
.pb-days,.pb-day{top:54px;height:40px;border-bottom:1px solid var(--line);box-shadow:0 2px 4px rgba(20,30,45,.04)}
.pb-months,.pb-weeks,.pb-days{
  grid-column:1;left:0;z-index:5;
  background:var(--bg-card);border-right:1px solid var(--line);
  padding:0 13px;font-size:12px;font-weight:700;color:var(--ink-dim);
}
.pb-month,.pb-week,.pb-day{z-index:4;background:var(--bg-subtle);padding:0 10px}
.pb-month{font-size:12px;font-weight:700;color:var(--ink-dim);text-transform:capitalize}
.pb-week{justify-content:center;font-size:11px;font-weight:600;color:var(--muted)}
.pb-day{justify-content:center;font-size:12.5px;font-weight:640;color:var(--ink-dim)}
.pb-day.pb-today,.pb-week.pb-today,.pb-month.pb-today{color:var(--weld-deep);font-weight:700}

/* Rijkop (sticky links): naam (.pb-name) + belasting (.pb-load, klein en
   gedempt) + evt. .pb-empty ("geen planning") als derde, gedempte regel */
.pb-person{
  position:sticky;left:0;z-index:2;
  background:var(--bg-card);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line-2);
  box-shadow:2px 0 4px rgba(20,30,45,.03);
  padding:10px 13px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  overflow:hidden;
}
.pb-name{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-load{font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Personeelsfiche zonder Onfact-login (F-0009): de functie onder de naam. */
.pb-functie{font-size:10.5px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-empty{font-size:10.5px;color:var(--faint);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Dagcel: verticale kaartenstapel, min. 64px hoog */
.pb-cell{
  min-height:64px;
  display:flex;flex-direction:column;gap:6px;
  padding:7px;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--bg-card);
  transition:background .12s;
}
.pb-cell.pb-today{background:var(--weld-tint)}
.pb-cell.pb-open{background:var(--bg-subtle)}
.pb-cell.pb-dragover{background:var(--weld-tint);outline:2px dashed var(--weld);outline-offset:-2px}

/* Kaart — markup exact per contract; --accent wordt inline gezet door JS.
   Kaarten 4+ krijgen van JS zelf de globale .hidden-klasse (toggle via
   "Toon alle" op .pb-more) — hier dus enkel opmaak, geen eigen verberglogica. */
.pb-card{
  background:var(--bg-card);
  border:1px solid var(--line);border-left:3px solid var(--accent,var(--steel));
  border-radius:var(--radius-sm);
  padding:8px 10px;
  display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--shadow-card);
  cursor:grab;
  transition:transform .1s,box-shadow .12s,border-color .12s;
}
.pb-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,30,45,.1);border-color:var(--faint)}
.pb-card.dragging,.pb-chip.dragging{opacity:.45;cursor:grabbing}
.pb-title{
  font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pb-tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.pb-tags:empty,.pb-sub:empty{display:none}
.pb-sub{font-size:11px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:1px}
.pb-time{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-due{
  flex:0 0 auto;font-size:10px;font-weight:700;color:var(--ink-dim);
  background:var(--bg-subtle);border:1px solid var(--line);
  padding:1px 7px;border-radius:8px;white-space:nowrap;
}
.pb-more{
  display:block;width:100%;
  background:none;border:none;border-radius:6px;
  padding:4px 2px;margin-top:1px;
  font:inherit;font-size:11px;font-weight:640;color:var(--link);
  text-align:center;cursor:pointer;
  transition:background .12s;
}
.pb-more:hover{background:var(--link-bg);text-decoration:underline}

/* ---------------------------- Planbord · zijpaneel -------------------------
   "Nog niet ingepland": zijpaneel (<aside class="pb-tray">) rechts van het
   rooster (zie .pb-wrap hierboven) — zelfde rand/radius/achtergrond als
   .planbord. Kop (.pb-tray-head > .pb-tray-title + .pb-tray-toggle) is
   sticky bovenaan het paneel; de chips (.pb-chip, rechtstreeks in .pb-tray)
   staan daaronder verticaal gestapeld (volle breedte), het paneel scrollt
   zelf (overflow-y). Open/dicht wordt op paneelniveau bijgehouden via de
   klasse .pb-tray-closed op .pb-tray zelf (JS bewaart trayOpen in
   state/MEM) — geen per-chip hidden-toggle meer zoals vroeger.
   .pb-tray-count/.pb-tray-vlabel zijn losse kinderen ná de kop die enkel in
   de ingeklapte staat zichtbaar worden. */
.pb-tray{
  flex:0 0 240px;
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-card);
  overflow-y:auto;
  padding-bottom:10px;
  transition:flex-basis .18s ease;
}
.pb-tray-head{
  position:sticky;top:0;z-index:1;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;
  background:var(--bg-card);
  border-bottom:1px solid var(--line-2);
}
.pb-tray-title{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:640;color:var(--ink-dim);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.pb-tray-title svg{width:15px;height:15px;flex:0 0 15px;color:var(--muted)}
.pb-tray-toggle{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;
  background:none;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s,transform .15s;
}
.pb-tray-toggle:hover{background:var(--bg-subtle);border-color:var(--line);color:var(--ink)}

.pb-chip{
  display:flex;align-items:center;gap:6px;
  margin:0 12px;
  padding:7px 11px;border-radius:var(--radius-pill);
  background:var(--bg-subtle);border:1px solid var(--line);
  font-size:12px;color:var(--ink-dim);cursor:grab;
  transition:border-color .12s,background .12s,color .12s;
}
.pb-chip:hover{border-color:var(--weld-light);background:var(--weld-hover);color:var(--ink)}
.pb-tray-empty{
  margin:0 12px;padding:8px 2px;
  font-size:12px;color:var(--faint);font-style:italic;
}

/* Ingeklapt: smalle verticale strook (~36px) — enkel de toggle + de teller
   (.pb-tray-count) + een geroteerd label (.pb-tray-vlabel) blijven
   zichtbaar; koptekst en chips verdwijnen. Het hele paneel is dan één
   klikbare heropenknop. */
.pb-tray-count,.pb-tray-vlabel{display:none}
.pb-tray.pb-tray-closed{
  flex:0 0 36px;
  align-items:center;
  padding:10px 4px;
  cursor:pointer;
  overflow:hidden;
}
.pb-tray.pb-tray-closed .pb-tray-head{
  padding:0;border-bottom:none;background:transparent;
}
.pb-tray.pb-tray-closed .pb-tray-title{display:none}
.pb-tray.pb-tray-closed .pb-tray-toggle{transform:rotate(180deg)}
.pb-tray.pb-tray-closed .pb-chip{display:none}
.pb-tray.pb-tray-closed .pb-tray-count{
  display:flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--radius-pill);
  background:var(--weld-tint);color:var(--weld-deep);
  font-size:10.5px;font-weight:700;font-family:var(--mono);
}
.pb-tray.pb-tray-closed .pb-tray-vlabel{
  display:block;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11.5px;font-weight:650;color:var(--ink-dim);
  white-space:nowrap;
}

/* ---------------------------- Planbord · notities -------------------------
   Losse post-its (persoon+dag, los van een taak — zie planbord.js/taken.js).
   Warme amber-tint (bestaande --warn-variabelen, elders al "In behandeling"/
   binnenkort-taal) i.p.v. de witte .pb-card: in één oogopslag te onderscheiden
   van taakkaarten. Notities tellen niet mee in .pb-load en staan altijd
   volledig zichtbaar bovenaan de cel (ongeacht "Toon alle", dat blijft enkel
   voor taakkaarten — zie de cellHTML-comment in planbord.js). */
.pb-note{
  background:var(--warn-bg);
  border:1px solid var(--warn-border);border-left:3px solid var(--warn);
  border-radius:var(--radius-sm);
  padding:7px 9px;
  cursor:grab;
  transition:transform .1s,box-shadow .12s,border-color .12s;
}
.pb-note:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,30,45,.1);border-color:var(--warn)}
.pb-note.dragging{opacity:.45;cursor:grabbing}
/* Weekendkolommen op het planbord (enkel zichtbaar met het vinkje aan) —
   zelfde subtiele arcering als de Gantt (.g-cell.we). */
.pb-day.pb-we{color:var(--muted)}
.pb-cell.pb-we{background:var(--bg-subtle)}
/* Vinkje "Weekends" in de Gantt-/planbordbalk. */
.wk-toggle{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--ink-dim);white-space:nowrap;cursor:pointer;user-select:none}
.wk-toggle input{width:14px;height:14px;accent-color:var(--weld);cursor:pointer;margin:0}
/* Melding wanneer taken door het verbergen van weekends buiten beeld vallen. */
.g-verborgen{display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 11px;
  font-size:12px;color:var(--ink-dim);background:var(--bg-subtle);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.g-verborgen svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
/* Verlof/opleiding uit de vakantieplanning: afgeleid, dus niet versleepbaar —
   ander (koel) accent zodat het verschil met een eigen notitie meteen zichtbaar is. */
.pb-note-verlof{background:var(--bg-subtle);border-color:var(--line);border-left-color:var(--steel);cursor:pointer}
.pb-note-verlof:hover{border-color:var(--steel)}
.pb-note-verlof .pb-note-text{color:var(--steel)}
.pb-note-text{
  font-size:12px;font-weight:620;color:var(--warn-ink);line-height:1.35;
  white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* ============================ Uren ========================================= */
/* Bannertekst boven de weekweergave: groen zodra Onfact een echte uren-resource
   heeft (GET /api/uren/status), amber in de terugvalmodus (agenda-blok bij een
   taak, of enkel lokaal bij een project-bulk zonder taak — zie plan-uren.md). */
.uren-banner{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;margin-bottom:14px}
.uren-banner svg{width:16px;height:16px;flex:0 0 16px}
.uren-banner.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-border)}
.uren-banner.fallback{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border)}

/* Weektotaal per persoon: rij compacte statchips boven de dagblokken. */
.uren-sums{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.uren-sum-chip{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--line)}
.uren-sum-chip.total{background:var(--navy);border-color:var(--navy-2)}
.uren-sum-chip.total .usc-l,.uren-sum-chip.total .usc-v{color:#fff}
.uren-sum-chip .usc-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.uren-sum-chip .usc-v{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}

/* Urenblad per opdrachtgever (cyclus 44, ADR 0057): web/js/urenblad.js. */
.ub-acties{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ub-hint{font-size:12px}
.ub-meta{font-size:12px;color:var(--ink-dim);margin:4px 0}
.ub-melding{font-size:12.5px;color:var(--muted);margin-top:4px}
.ub-teller{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--warn-ink);
  background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-sm);padding:8px 12px;margin-top:10px}
.ub-blok{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);padding:10px 12px;margin-top:12px}
.ub-blok>summary{cursor:pointer;font-weight:650;color:var(--ink)}
.ub-sub{display:block;font-size:12px;font-weight:400;color:var(--ink-dim);margin-top:2px}
.ub-zonder{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-ink);
  border-radius:var(--radius-sm);padding:10px 12px;margin-top:12px;font-size:13px}
.ub-tabel{font-size:12.5px;margin-top:4px}
.ub-tabel .num{text-align:right;font-family:var(--mono);white-space:nowrap}
table.data.ub-tabel th,table.data.ub-tabel td{padding:7px 6px}
.ub-tabel td:first-child{white-space:nowrap}
/* Klantnummer (cyclus 44, R2): een werk of regel zonder nummer, en de teller "x u zonder klantnummer". */
.ub-chip-nr{display:inline-block;font-size:11px;font-weight:700;line-height:1.4;padding:0 7px;margin-left:4px;
  border-radius:99px;background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border);white-space:nowrap}
.ub-nr{color:var(--warn-ink);font-weight:650}
.ub-nr-totaal{font-size:13px;font-weight:650;color:var(--warn-ink);margin:0 0 10px}
/* Cyclus 51: het subvenster "Nieuwe opdrachtgever" — de werken van de klant om aan te vinken. */
.ub-werklijst{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 8px;margin-top:6px}
.ub-werk{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:3px 0;overflow-wrap:anywhere;font-size:13px;cursor:pointer}
.ub-werk input{flex:0 0 auto}
/* Cyclus 54 (docs/plan-dagvergoeding-en-kilometers.md): km in de regeltabellen en
   het blok Dagvergoeding onderaan het voorbeeld. Enkel de bestaande tokens: dit
   bestand heeft geen eigen donkere set (zie het blok Werftijd), dus licht en
   donker volgen dezelfde variabelen. Oranje = te bevestigen, grijs = telt niet. */
table.data.ub-tabel .ub-km{text-align:right;white-space:nowrap;font-family:var(--mono)}
/* "mee met Ruben Peeters" mag afbreken; enkel een getal blijft op één regel (R1). */
table.data.ub-tabel .ub-km-mee{white-space:normal;min-width:7.5em}
.ub-dv{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);padding:10px 12px;margin-top:12px}
.ub-dv-kop{font-weight:650;color:var(--ink)}
.ub-dv-tabel .ub-dv-data{font-family:var(--mono);font-size:12px;min-width:7.5em}
.ub-dv-dag{white-space:nowrap}
.ub-dv-tabel td:first-child{white-space:normal;min-width:8em}
.ub-dv-tabel tr.ub-dv-bevestig td{background:var(--warn-bg);color:var(--warn-ink)}
.ub-dv-tabel tr.ub-dv-bevestig td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.ub-dv-tabel tr.ub-dv-bevestig .btn{margin-left:6px;vertical-align:middle}
.ub-dv-reden{font-weight:600}
.ub-dv-tabel tr.ub-dv-uit td{background:var(--bg-subtle);color:var(--muted)}
.ub-dv-voet{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:8px;
  margin-top:8px;font-size:13px;color:var(--ink-dim)}
.ub-dv-voet b{font-family:var(--mono);color:var(--ink);font-size:14px}
.ub-dv-hint{font-size:12.5px;color:var(--warn-ink);margin-top:6px}
.ub-dv-buiten{margin-top:8px}
/* Cyclus 55 (docs/plan-materiaal-urenblad.md, M6): het blok Materiaal, vóór de
   dagvergoeding. Zelfde kaart als .ub-dv; "Zonder werk" amber zoals .ub-zonder;
   de chip "bij urenregel · persoon" neutraal (geen waarschuwing). */
.ub-mat{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);padding:10px 12px;margin-top:12px}
.ub-mat-kop{font-weight:650;color:var(--ink)}
.ub-mat-blok{margin-top:8px}
.ub-mat-naam{font-size:13px;font-weight:650;color:var(--ink);margin-top:4px}
.ub-mat-zonder{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-ink);
  border-radius:var(--radius-sm);padding:8px 10px;margin-top:10px;font-size:13px}
.ub-mat-reden{font-weight:600}
.ub-mat-bron{display:inline-block;font-size:11px;font-weight:600;line-height:1.4;padding:0 7px;margin-left:4px;
  border-radius:99px;background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line-input);white-space:nowrap}
.ub-mat-tabel .num{text-align:right;font-family:var(--mono);white-space:nowrap}
.ub-mat-tabel td:nth-child(3){min-width:10em}
.ub-mat-voet{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:8px;
  margin-top:8px;font-size:13px;color:var(--ink-dim)}
.ub-mat-voet b{font-family:var(--mono);color:var(--ink);font-size:14px}
.ub-mat-opslag{text-align:right;font-size:12.5px;color:var(--ink-dim);font-family:var(--mono)}
.ub-mat-teller{margin-top:8px}
/* Klantkaart › historiek: "per werfdag" onder het bedrag — de cellen breken niet
   af en de vaste actiekolom rechts knipte het anders weg (R1). */
table.data.tk-hist .kt-hist-werfdag{display:block;line-height:1.3}
/* Klantkaart › Oude vinkjes nakijken: rood = de kost van de onderaannemer stijgt. */
.kt-ctl-tabel tr.kt-ctl-stijgt td{background:var(--danger-bg);color:var(--danger-ink-2)}
.kt-ctl-tabel tr.kt-ctl-stijgt td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.kt-ctl-tag{display:inline-block;font-size:11px;font-weight:700;padding:0 7px;border-radius:99px;white-space:nowrap;
  background:var(--danger-bg);color:var(--danger-ink-2);border:1px solid var(--danger-border)}
/* Urenlijst: kolom Km ("190", "mee met Ruben") en de chip "niet op werf" (T7). */
td.ur-km{font-size:12.5px;color:var(--ink-dim);white-space:nowrap}
td.ur-km>div{white-space:normal}
.wt-vlag.ur-chip-werf{cursor:default;margin-left:0;background:var(--bg-subtle);color:var(--ink-dim);
  border-color:var(--line-input);border-style:dashed}
/* Venster "Kilometers aanvullen" (web/js/km_aanvullen.js, T11; R1: geen
   inline-stijlen meer, alles hier). */
.ka-filter{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}
.ka-hint{font-size:12.5px;line-height:1.5;margin:8px 0 10px}
.ka-leeg{font-size:13px}
.ka-rijen .tablewrap{max-height:52vh;overflow:auto}
.ka-tabel{font-size:12.5px}
table.data.ka-tabel th,table.data.ka-tabel td{padding:7px 6px;vertical-align:middle}
.ka-tabel .ka-uren{text-align:right}
.ka-tabel td.ka-datum{white-space:nowrap}
.ka-tabel input.ka-km{width:84px;max-width:100%;text-align:right;font-family:var(--mono)}
.ka-tabel input.ka-km:disabled{background:var(--bg-subtle);color:var(--muted)}
.ka-tabel select.ka-mee{width:auto;max-width:230px;min-width:0}
.ka-tabel td.ka-status{font-size:12.5px;min-width:120px;max-width:240px;overflow-wrap:anywhere}
.ka-ok{color:var(--ok-ink);font-weight:600}
.ka-fout{color:var(--danger)}
@media (max-width:600px){
  /* De vier filtervelden: op een telefoon twee per rij, het project vooraan breed. */
  .ka-filter{grid-template-columns:1fr 1fr}
  .ka-filter>.form-row:first-child{grid-column:1 / -1}
  .ub-dv-voet{justify-content:flex-start}
  .ub-mat-voet{justify-content:flex-start}
  .ub-mat-opslag{text-align:left}
}
@media (max-width:700px){
  /* Elke regel is hier een kaart (ui.mobielTabellen → .mob-cards): "Reed mee
     met" staat zo altijd in beeld. Geen intern scrollvenster in het venster. */
  .ka-rijen .tablewrap{max-height:none}
  table.data.ka-tabel.mob-cards td{padding:3px 8px}
  table.data.ka-tabel.mob-cards td.ka-status{min-width:0;max-width:none;text-align:left;justify-content:flex-start}
  .ka-tabel.mob-cards select.ka-mee{max-width:62%}
}

/* Dagblokken (maandag..zondag): mini-paneel met kop (naam + dagtotaal) + tabel. */
.uren-day{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden}
.uren-day.today{border-color:var(--weld-light)}
.uren-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 15px;background:var(--bg-subtle);border-bottom:1px solid var(--line-2)}
.uren-day.today .uren-day-head{background:var(--weld-tint)}
.udh-name{font-size:12.5px;font-weight:700;color:var(--ink);text-transform:capitalize}
.udh-sum{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-dim)}
.uren-day .tablewrap{border-radius:0}

/* Onfact-statuschip per rij (ok groen/agenda blauw/lokaal grijs/fout rood) +
   herkansingsknop ("Opnieuw" → /sync, enkel bij fout/lokaal). */
.uren-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:640;cursor:pointer;border:1px solid transparent}
.uren-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.uren-chip.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.uren-chip.agenda{background:var(--link-bg);color:var(--link);border-color:#c7d7ea}
.uren-chip.lokaal{background:var(--bg-subtle);color:var(--muted);border-color:var(--line)}
.uren-chip.fout{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.uren-chip.enkel_os{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
/* Interne activiteit (docs/plan-uren-categorieen.md): een chip in de
   "wat"-kolom i.p.v. een taak/project — neutraal en met een streepjesrand,
   zodat ze meteen leest als "hangt aan geen enkel project". */
.uren-chip.cat{background:var(--bg-subtle);color:var(--ink-dim);border-color:var(--line);
  border-style:dashed;cursor:default}
/* Onderaannemer-rij: geen statuschip (er is bewust geen Onfact-doorzetting),
   wél een label + de afgeleide kost met het gesnapshotte tarief in de tooltip. */
.uren-chip.sub{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:var(--weld-light);cursor:default}
/* Afgerekend in een maandafrekening: chip draagt het nummer van de
   concept-aankoopfactuur in Onfact (docs/plan-sub-aankoopfactuur.md). */
.uren-chip.sub-af{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border);cursor:help}
/* Urenregel aangepast + geschiedenis + tariefverschil bij een nieuwe datum
   (docs/plan-uren-bewerken.md). */
.uren-chip.gewijzigd{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:var(--weld-light);cursor:help;margin-left:6px}
.uren-gesch{display:flex;flex-direction:column;gap:6px;font-size:12px}
.uren-gesch-item{padding:6px 10px;border-radius:8px;background:var(--bg-subtle);border:1px solid var(--line);color:var(--ink)}
.uren-gesch-item .ug-tijd{font-family:var(--mono);color:var(--muted);margin-right:6px}
/* Project aanpassen (docs/plan-project-bewerken.md) */
.form-row.np-gewijzigd input,.form-row.np-gewijzigd select,.form-row.np-gewijzigd textarea{border-color:var(--weld);box-shadow:0 0 0 1px var(--weld)}
.np-was{font-size:11.5px;color:var(--muted);margin-top:4px}
.np-klant-vast{font-size:13.5px;color:var(--ink);padding:6px 0 4px}
.np-blok{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--bg-subtle);font-size:12.5px;color:var(--ink)}
.np-blok.volgt{background:var(--ok-bg);border-color:var(--ok-border)}
.np-blok-kop{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:6px}
.np-blok ul{margin:0;padding-left:18px}
.np-blok li{margin:3px 0}
.np-blok label{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink)}
.np-sub{display:block;font-size:11.5px;color:var(--muted)}
.np-tarief{margin-top:8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--weld-tint);color:var(--weld-tint-ink);border:1px solid var(--weld-light);font-size:12.5px}
.np-res{display:flex;flex-direction:column;gap:6px;font-size:13px}
.np-res-rij{padding:7px 10px;border-radius:8px;border:1px solid var(--line)}
.np-res-rij.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.np-res-rij.fout{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.np-res-rij.onbekend{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.pf-meta-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.pf-klant-edit{width:24px;height:24px;padding:0;vertical-align:middle;margin-left:4px}
.pf-klant-edit svg{width:13px;height:13px}
.pf-omschrijving{margin:2px 0 8px}
.pf-omschrijving .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.pf-omschrijving .v{font-size:13px;color:var(--ink-dim);overflow-wrap:anywhere;white-space:pre-line;margin-top:3px}
.pf-gesch{margin-bottom:6px}
/* Een woord zonder breekpunt (200-tekens-naam, afgekapte omschrijving) mag de fiche niet breder trekken; enkel de projectfiche, de uren-geschiedenis blijft zoals ze was. */
.pf-gesch .uren-gesch-item{overflow-wrap:anywhere}
.uren-tarief-diff{font-size:12.5px;margin:-4px 0 12px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--weld-tint);border:1px solid var(--weld-light)}
.uren-table tr[data-rij]{cursor:default}
.uren-kost{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink);cursor:help}
/* Totaalregel bij een actief onderaannemer-filter (uren + kost). */
.uren-subtot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-6px 0 16px;
  padding:9px 14px;border-radius:var(--radius-sm);background:var(--weld-tint);border:1px solid var(--weld-light)}
.uren-subtot .ust-l{flex:1;min-width:0;font-size:12.5px;color:var(--ink)}
.uren-subtot .ust-v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink)}
.uren-subtot .ust-v.kost{font-size:16px}
/* Live kostpreview in de boekmodal (uren × uurtarief). */
.uren-subkost{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-4px 0 12px;padding:8px 12px;border-radius:var(--radius-sm);
  background:var(--weld-tint);border:1px solid var(--weld-light)}
.uren-subkost .usk-l{font-size:12.5px;color:var(--ink)}
.uren-subkost .usk-v{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink)}
.uren-retry{background:none;border:none;color:var(--danger-ink);cursor:pointer;padding:2px;margin-left:4px;
  display:inline-flex;vertical-align:middle}
.uren-retry svg{width:13px;height:13px}
.uren-retry:hover{color:var(--danger-ink-2)}

/* Boekmodal: taak-typeahead (client-side filter over de gecachete takenlijst). */
.uren-suggest{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:20;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);max-height:220px;overflow-y:auto}
.uren-suggest-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.uren-suggest-item:last-child{border-bottom:none}
.uren-suggest-item:hover{background:var(--weld-hover)}
.uren-suggest-item .usi-title{font-size:12.5px;font-weight:600;color:var(--ink)}
.uren-suggest-item .usi-sub{font-size:11px;color:var(--muted);margin-top:1px}

/* Bulkmodal: dynamische regels (persoon + uren) + per-regel-fouten eronder. */
.uren-bulk-row{display:grid;grid-template-columns:1fr 96px auto;gap:8px;align-items:center;margin-bottom:6px}
.uren-bulk-err{grid-column:1 / -1;font-size:11.5px;color:var(--danger-ink);margin:-2px 0 6px}
.uren-bulk-err:empty{display:none}

/* Ruwe Onfact-respons (foutdetail-modal — zelfde bedoeling als .t-pre in de toast). */
.uren-raw{font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  background:var(--bg-subtle);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  max-height:260px;overflow:auto;color:var(--ink-dim)}

/* ── Uurlijst (docs/plan-uurlijst-factuur-check.md) ───────────────────────── */
/* Boekmodal: "Begin → Einde". ⚠ input[type=time] staat NIET in de algemene
   .field-regel hierboven, dus het krijgt hier zijn eigen veldopmaak — anders
   staat er een kaal browserveld tussen gestileerde velden. Die eigen regel is
   specifieker dan de 16px-regel in het touch-blok onderaan; daarom staat
   `.uren-tijdvak input[type=time]` dáár ook uitdrukkelijk in de lijst. */
.uren-tijdvak{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.uren-tijdvak input[type=time]{width:auto;flex:0 0 auto;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:var(--bg-input);border:1px solid var(--line-input);border-radius:var(--radius-sm);padding:8px 10px;
  transition:border-color .12s,box-shadow .12s,background .12s}
.uren-tijdvak input[type=time]:focus{outline:none;border-color:var(--weld);box-shadow:0 0 0 3px var(--weld-tint);background:var(--bg-card)}
.ut-pijl{color:var(--muted);font-size:14px}
.ut-duur{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink-dim)}
.ut-duur.warn{color:var(--warn-ink);font-family:inherit;font-weight:600}

/* Boekmodal: extra's van de tariefkaart (dagvergoeding · km · materieel). Ze
   staan bewust vlak boven de kostpreview: aanvinken → het bedrag eronder
   beweegt mee. */
.sub-extras{margin:-4px 0 8px;padding:9px 12px;border-radius:var(--radius-sm);
  background:var(--bg-subtle);border:1px solid var(--line)}
.se-kop{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--muted);margin-bottom:6px}
.se-optie{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);
  cursor:pointer;padding:3px 0}
.se-optie input[type=checkbox]{margin:0;flex:0 0 auto;accent-color:var(--weld-deep);cursor:pointer}
.se-optie i{font-style:normal}
.se-km{display:flex;align-items:center;gap:8px;padding:4px 0}
.se-km label{font-size:12.5px;color:var(--ink);flex:1;min-width:0}
.se-km input{width:110px;flex:0 0 110px}

/* Kostpreview als UITSPLITSING (basis/za/zo + aangevinkte extra's + totaal).
   De oude ééndimensionale vorm (.usk-l + .usk-v naast elkaar) blijft staan voor
   wie geen kaart heeft; `.detail` zet er een blokweergave van. */
.uren-subkost.detail{display:block}
.usk-kop{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--weld-light)}
.usk-regel{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:2px 0}
.usk-lbl{font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.usk-som{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);white-space:nowrap}
.usk-bed{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.usk-regel.usk-tot{margin-top:5px;padding-top:6px;border-top:1px solid var(--weld-light)}
.usk-regel.usk-tot .usk-lbl{font-weight:700}
.usk-regel.usk-tot .usk-bed{font-size:16px}
.usk-hint{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--weld-tint-ink)}
.usk-hint svg{width:13px;height:13px;flex:0 0 13px}

/* Weekherinnering: dezelfde amberkleur als .fallback, maar met een eigen naam —
   dit gaat over de eigen uurlijst, niet over de Onfact-koppeling. */
.uren-banner.week{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border)}

/* De uurlijst zelf: één tabel ma–zo voor één persoon, zoals Robins Excel. */
.uw-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:8px}
.uw-persoon{font-size:14px;font-weight:700;color:var(--ink)}
.uw-week{font-family:var(--mono);font-size:12px;color:var(--muted)}
.uren-uurlijst .uw-dag{font-size:12px;font-weight:700;color:var(--ink-dim);text-transform:capitalize;
  white-space:nowrap}
.uren-uurlijst tr.uw-leeg td{color:var(--faint)}
/* Automatisch herkende supplementen (za/zo, overuren, dagvergoeding, materieel,
   km) — nooit iets wat iemand zelf moet typen. */
.uw-extra{display:inline-block;margin:1px 4px 1px 0;padding:2px 8px;border-radius:var(--radius-pill);
  font-size:10.5px;font-weight:640;background:var(--weld-tint);color:var(--weld-tint-ink);
  border:1px solid var(--weld-light);white-space:nowrap}
/* Componenttotalen onder de tabel. Bedragen komen ENKEL uit de respons — staat
   er geen bedrag in, dan blijft die kolom leeg (de server bepaalt wie geld ziet). */
.uw-totalen{margin-top:12px;padding:12px 15px;border-radius:var(--radius);
  background:var(--bg-card);border:1px solid var(--line)}
.uw-tot-kop{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--muted);margin-bottom:6px}
.uw-tot-regel{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;padding:3px 0}
.uwt-l{font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.uwt-a{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);white-space:nowrap}
.uwt-b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;
  min-width:0}
.uw-tot-regel.uw-tot-som{margin-top:5px;padding-top:7px;border-top:1px solid var(--line)}
.uw-tot-regel.uw-tot-som .uwt-l{font-weight:700}
.uw-tot-regel.uw-tot-som .uwt-b{font-size:15px}

/* Weekstatus-venster (beheer): wie heeft zijn week vol? */
.ws-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.ws-week{font-size:12.5px;font-weight:700;color:var(--ink-dim);min-width:180px;text-align:center}
.ws-rij{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-2)}
.ws-rij:last-child{border-bottom:none}
.ws-vink{width:16px;flex:0 0 16px;display:inline-flex;color:var(--ok)}
.ws-vink svg{width:16px;height:16px}
.ws-naam{flex:1;min-width:0;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.ws-open{font-size:11.5px;color:var(--warn-ink);text-align:right}
.ws-rij.vol .ws-open{color:var(--ok-ink)}

/* Instellingen → AI-toegang (docs/plan-agent-api.md): een blok tekst om te
   kopiëren met de knop ernaast — de eenmalig getoonde sleutel en de drie
   configuratieregels. Het blok zelf is een gewone .uren-raw. */
.pat-cfg{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.pat-cfg pre{flex:1;min-width:0;margin:0}
/* claude.ai/Cowork koppelt via een browserlogin: geen regel om te kopiëren maar
   stappen om te volgen (docs/plan-agent-api.md fase 4). */
.pat-stappen{margin:0 0 6px;padding-left:20px;font-size:12.5px;line-height:1.7;color:var(--ink-dim)}
.pat-stappen li{margin-bottom:3px}
.pat-stappen .mono{word-break:break-all}

/* Dashboardkaart "Lasproductie" (web/js/lasproductie.js): wie heeft wat gelast
   en gefit, per dag of per project, uit WeldDossier. Volgt .panel en table.data. */
.lp-card .panel-head{flex-wrap:wrap;gap:8px}
.lp-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-nav input[type=date]{font:inherit;font-size:12.5px;padding:3px 6px;border:1px solid var(--line-input);
  border-radius:var(--radius-sm);background:var(--bg-card);color:var(--ink)}
.lp-tabel td{vertical-align:top}
.lp-tabel td.lp-dag{white-space:nowrap}
.lp-tabel tfoot td{font-weight:700;border-top:2px solid var(--line-2)}
.lp-soort{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;
  background:var(--bg-subtle);color:var(--ink-dim)}
.lp-soort.lp-lasser{background:var(--warn-bg);color:var(--warn-ink)}
.lp-soort.lp-fitter{background:#e8eef6;color:var(--link)}
.lp-soort.lp-lasser_fitter{background:#efe8f6;color:#5b3d8a}
.lp-chips{display:flex;flex-wrap:wrap;gap:4px}
.lp-chip{font-size:11.5px;padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;white-space:nowrap}
.lp-na{margin-left:4px;background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.lp-kies{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:10px}
.lp-kies select{flex:1;min-width:0;max-width:420px}
.lp-register{font-size:13px;margin-bottom:10px}
.lp-balk{height:6px;border-radius:3px;background:var(--line-2);margin-top:6px;overflow:hidden}
.lp-balk i{display:block;height:100%;background:var(--weld)}
.lp-hint,.lp-fout{font-size:12.5px}
.lp-link{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:12.5px}
.lp-link svg{width:13px;height:13px}
/* Rapportages (cyclus 56): drie blokken in "Per project" en de tab "Controle".
   Op een smal scherm staan de blokken onder elkaar, binnen de kaart. */
.lp-blokken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
@media (max-width:640px){.lp-blokken{grid-template-columns:1fr}}
.lp-blok{border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.lp-blok h4,.lp-sectie h4{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.lp-blok b{font-size:18px}
.lp-blok .lp-toon{margin-top:6px}
.lp-sub,.lp-uitleg,.lp-telling,.lp-herstel-periode,.lp-nietgekoppeld{font-size:12px;color:var(--muted)}
.lp-sub{margin-top:2px}
.lp-kost{color:var(--ink-dim)}
.lp-uitleg,.lp-herstel-periode{margin-bottom:8px}
.lp-telling,.lp-nietgekoppeld{margin-top:8px}
.lp-sectie + .lp-sectie{margin-top:18px}
.lp-periode{font-size:12.5px;white-space:nowrap}
#lpSpoolLijst{margin-bottom:12px}
.lp-stand{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;
  background:var(--bg-subtle);color:var(--ink-dim)}
.lp-stand.lp-transport{background:var(--ok-bg);color:var(--ok-ink)}
.lp-stand.lp-keuring{background:var(--warn-bg);color:var(--warn-ink)}
.lp-tabel td.lp-pct-hoog{color:var(--warn-ink);font-weight:700}
.lp-blok-fout{color:var(--danger-ink);font-size:12px}

/* Dashboardkaart "Interne uren" (docs/plan-uren-categorieen.md): uren + kost
   per categorie voor één maand, met maandnavigatie en het interne uurtarief.
   Volgt de gewone .panel-opmaak; hieronder enkel de rijen en de navigatie. */
.intern-nav{display:flex;align-items:center;gap:4px}
.intern-nav .icon-btn{font-size:16px;line-height:1;padding:2px 7px}
.intern-maand{font-size:12.5px;font-weight:700;color:var(--ink-dim);min-width:96px;text-align:center;
  text-transform:capitalize}
.intern-rows{display:flex;flex-direction:column;gap:2px}
.intern-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:5px 0;font-size:13px;border-bottom:1px solid var(--line-2)}
.intern-rows.geen-tarief .intern-row{grid-template-columns:1fr auto}
.intern-row:last-child{border-bottom:none}
.intern-row .ir-l{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intern-row .ir-u{font-size:12.5px;color:var(--ink-dim);min-width:62px;text-align:right}
.intern-row .ir-k{font-size:13px;font-weight:700;color:var(--ink);min-width:84px;text-align:right}
.intern-row.total{margin-top:4px;border-top:1px solid var(--line);border-bottom:none;font-weight:700}
.intern-row.total .ir-l,.intern-row.total .ir-u{color:var(--ink)}
.intern-row.jaar{border-bottom:none;font-size:12px}
.intern-row.jaar .ir-l,.intern-row.jaar .ir-u,.intern-row.jaar .ir-k{color:var(--muted);font-weight:600}
.intern-prompt{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;padding:9px 11px;
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;
  background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border)}
.intern-prompt svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px}
.intern-tarief{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line-2)}
.intern-tarief label{font-size:12px;font-weight:640;color:var(--ink-dim)}
.intern-tarief input{width:88px;padding:5px 9px;font-size:13px;font-family:var(--mono);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--ink)}
.intern-tarief .it-u{font-size:11.5px;color:var(--muted)}

/* ==================== Tariefkaart onderaannemers (tk-) =================== */
/* docs/plan-tariefkaart-onderaannemers.md — Instellingen → Onderaannemers.
   Een onderaannemer heeft een reeks tariefperiodes; de tabel toont enkel het
   tarief dat vandaag geldt (alleen-lezen), het venster "Tariefkaart" bevat de
   kop, de historiek en het formulier. Percentages zijn TOESLAGEN, dus overal
   waar er één staat, staat het afgeleide EUR/u er pal naast. */

/* Cel "Huidig tarief" in de tabel */
.tk-cel{display:flex;flex-direction:column;gap:2px;align-items:flex-start;line-height:1.35}
.tk-cel b{font-size:13.5px;color:var(--ink)}
.tk-eh{font-size:11px;color:var(--muted);margin-left:1px}
.tk-sub{font-size:11px;color:var(--muted)}
.tk-acties{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}
/* Op een smal scherm mag de naamkolom niet tot enkele pixels samengeknepen
   worden — de tabel scrollt liever binnen haar eigen .tablewrap. */
.sub-naam{min-width:150px}

/* Venster: kop met de kaart die vandaag geldt */
.tk-root{display:flex;flex-direction:column;gap:14px}
.tk-kop{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-subtle);padding:13px 15px}
.tk-kop-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tk-basis{font-size:22px;font-weight:700;color:var(--ink);line-height:1.15}
.tk-basis .tk-eh{font-size:12px}
.tk-vanaf{font-size:12px;color:var(--ink-dim);margin-top:2px}
.tk-vandaag{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:transparent;flex:0 0 auto}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tk-chip{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:var(--radius-pill);
  font-size:11.5px;color:var(--muted);background:var(--bg-card);border:1px solid var(--line)}
.tk-chip.aan{color:var(--ink);border-color:var(--line-input)}
.tk-chip-l{font-weight:700;color:var(--ink-dim);text-transform:lowercase}
.tk-chip-eur{color:var(--ink-dim)}
.tk-melding{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding:8px 10px;
  border-radius:var(--radius-sm);font-size:12px;line-height:1.5;
  background:var(--bg-card);color:var(--ink-dim);border:1px solid var(--line)}
.tk-melding.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.tk-melding svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px}
.tk-opm{margin-top:9px;font-size:12px;color:var(--ink-dim);white-space:pre-wrap}

/* Historiek */
.tk-sectie-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tk-sectie-kop h4{font-size:13px;font-weight:700;color:var(--ink)}
.tk-uitleg{font-size:12px;line-height:1.6;color:var(--ink-dim);margin:0}
/* ⚠ `table.data th/td` weegt zwaarder dan `.tk-hist th/td` (twee elementen
   tegenover één), dus deze regels moeten de tabelklasse meenemen — anders
   veranderen padding en lettergrootte niets. */
table.data.tk-hist{font-size:12px}
table.data.tk-hist th,table.data.tk-hist td{padding:7px 8px}
table.data.tk-hist th{font-size:10.5px;letter-spacing:.03em}
table.data.tk-hist td{white-space:nowrap}
.tk-nu{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:transparent}
/* De knoppenkolom blijft altijd in beeld: past de historiek niet in de breedte
   van het venster (lange materieelnamen, een smal scherm), dan scrollt de tabel
   binnen haar .tablewrap — maar Bewerken/Verwijderen mogen daarbij nooit
   wegschuiven. Vandaar een vastgezette laatste kolom met eigen achtergrond. */
.tk-hist th:last-child,.tk-hist td:last-child{position:sticky;right:0;background:var(--bg-card);
  border-left:1px solid var(--line-2)}
.tk-hist th:last-child{background:var(--bg-subtle)}
.tk-hist tbody tr:hover td:last-child{background:var(--bg-subtle)}

/* Formulier (nieuwe periode of een bestaande bewerken) */
.tk-form{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);
  padding:14px 15px;display:flex;flex-direction:column;gap:12px}
.tk-form-kop{font-size:13px;font-weight:700;color:var(--ink)}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tk-grid.drie{grid-template-columns:1fr 1fr 1fr}
.tk-pct-in{display:flex;align-items:center;gap:7px}
.tk-pct-eh{font-size:12px;color:var(--muted);flex:0 0 auto}
.tk-afg{font-size:11.5px;color:var(--weld-tint-ink);font-weight:600}
.tk-mat{display:flex;flex-direction:column;gap:6px}
.tk-mat-rij{display:grid;grid-template-columns:1fr 104px auto auto;gap:7px;align-items:center}
.tk-mat-eh{font-size:11.5px;color:var(--muted);white-space:nowrap}
.tk-mat-add{align-self:flex-start}
.tk-form-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.tk-form-wrap:empty{display:none}

/* Smal scherm: alles onder elkaar, zodat het venster nooit zijdelings scrolt.
   De historiektabel blijft in haar eigen .tablewrap scrollen. */
@media (max-width:700px){
  .tk-grid,.tk-grid.drie{grid-template-columns:1fr}
  .tk-mat-rij{grid-template-columns:1fr 92px auto}
  .tk-mat-eh{display:none}
  .tk-acties{justify-content:flex-start;flex-wrap:wrap}
}

/* docs/plan-verkooptarieven-regiefactuur.md — Instellingen → Klanttarieven.
   De verkoopzijde van de tariefkaart hierboven: kop, historiek, formulier en de
   meldingen hergebruiken de .tk-*-klassen volledig; hieronder enkel wat er niet
   al bestaat. Verschil met een onderaannemer: er is niet één basistarief maar
   één per FUNCTIE, dus de kaart-van-vandaag toont een tabelletje functie →
   EUR/u (met per aanstaande toeslag een eigen kolom) i.p.v. één groot bedrag. */

/* Chips in een tabelcel staan niet ónder een bedrag maar zijn de cel zelf. */
.tk-chips.kt-inline{margin-top:0}
.kt-extra{font-size:12px;color:var(--ink-dim)}

/* Kaart van vandaag: functie → basis → za/zo/overuren. Het aantal kolommen komt
   uit de JS (enkel toeslagen > 0 krijgen er een), vandaar de inline
   grid-template-columns daar. */
.kt-fn-tab{display:grid;gap:2px 10px;margin-top:11px;font-size:12px;align-items:baseline}
.kt-fn-h{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding-bottom:3px;border-bottom:1px solid var(--line)}
.kt-fn-tab .right{text-align:right}
.kt-fn-n{color:var(--ink);font-weight:600}
.kt-fn-toe{color:var(--ink-dim)}

/* Functietarieven-editor in het formulier — zelfde opbouw als .tk-mat-rij, maar
   met een eigen klasse: een functietarief is geen materieelpost, en de twee
   moeten los van elkaar kunnen bewegen. */
.kt-fn{display:flex;flex-direction:column;gap:6px}
.kt-fn-rij{display:grid;grid-template-columns:1fr 104px auto auto;gap:7px;align-items:center}
.kt-fn-eh{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* Blok "Functies" onderaan de tab */
.kt-blok{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.kt-fnv{width:100%;max-width:240px}

@media (max-width:700px){
  .kt-fn-rij{grid-template-columns:1fr 92px auto}
  .kt-fn-eh{display:none}
  /* De functietabel in de kop wordt op een telefoon te smal voor vijf kolommen.
     Ze valt dan uiteen in een blokje per functie — en omdat de koprij dan weg
     is, draagt elke waarde haar eigen label mee (`data-k`), net zoals
     ui.mobielTabellen dat met data-label doet. Een kolom zonder kop zou anders
     een bedrag zonder betekenis zijn. */
  .kt-fn-tab{grid-template-columns:1fr!important;gap:1px}
  .kt-fn-h{display:none}
  .kt-fn-tab .right{text-align:left}
  .kt-fn-n{margin-top:9px;padding-top:7px;border-top:1px solid var(--line)}
  .kt-fn-tab [data-k]::before{content:attr(data-k) " · ";color:var(--muted);
    font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
}

/* ============================ Onderhoud ==================================== */
/* Onderhoudsprojecten in de projectfiche (detail.js + onderhoud.js): vervangt
   daar de 16-stappen-workflowsectie zodra het project als onderhoudsproject is
   aangevinkt. WO-nummers/tarieven/kosten hergebruiken table.data; hieronder
   enkel wat er niet al bestaat — zie de Uren-sectie hierboven als referentie
   voor de statuschip/tabel/waarschuwingsopbouw. */
.onderhoud-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:620;
  color:var(--ink-dim);margin:16px 2px 2px;cursor:pointer;width:fit-content}
.onderhoud-toggle input{cursor:pointer}

.onderhoud-block{margin-bottom:20px}
.onderhoud-block-head{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.onderhoud-table{font-size:12.5px}
.onderhoud-table th{white-space:nowrap}
/* Het werkvenster "Materiaal — <werk>": datum, aantal × prijs en bedragen breken nooit af ("€ / 251,00"); de omschrijving wel. */
.wm-lijst td.mono{white-space:nowrap}

/* Losse toevoeg-rijen (WO/tarief/kosten): flexbox i.p.v. een vaste grid, want
   het aantal velden verschilt per blok (2 of 3 invoervelden + knop). */
.onderhoud-add-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:8px 0 4px}
.onderhoud-add-row .form-row{flex:1 1 160px;margin:0}
.onderhoud-add-row .form-row.small{flex:0 1 110px}
.onderhoud-add-row button{flex:0 0 auto}

/* input[type=number]/[type=month] krijgen elders in de app geen basisstijl
   (de gedeelde regel dekt enkel text/password/date/email/select/textarea) —
   hier wel nodig, zelfde kleuren/radius als die gedeelde regel. */
.onderhoud-add-row input[type=number],
.onderhoud-month{
  width:100%;font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--bg-input);border:1px solid var(--line-input);border-radius:var(--radius-sm);padding:8px 10px;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.onderhoud-add-row input[type=number]:focus,
.onderhoud-month:focus{outline:none;border-color:var(--weld);box-shadow:0 0 0 3px var(--weld-tint);background:var(--bg-card)}
.onderhoud-tarief-input{
  width:110px;font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--bg-input);border:1px solid var(--line-input);border-radius:var(--radius-sm);padding:7px 9px;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.onderhoud-tarief-input:focus{outline:none;border-color:var(--weld);box-shadow:0 0 0 3px var(--weld-tint);background:var(--bg-card)}

/* Waarschuwingsblok — ontbrekend tarief (blokkeert de factuurknop) en de
   dubbele-facturatie-guard (-strong: dikkere rand, dwingender). Rood (--danger)
   i.p.v. amber (--warn): dit blokkeert een geldgerelateerde actie, geen gewone
   "nog niet klaar"-melding zoals de workflow-gate. */
.onderhoud-warnbox{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:var(--radius-sm);background:var(--danger-bg);border:1px solid var(--danger-border);
  color:var(--danger-ink-2);font-size:12.5px;line-height:1.65;margin-bottom:14px}
.onderhoud-warnbox svg{width:18px;height:18px;flex:0 0 18px;color:var(--danger-ink);margin-top:1px}
.onderhoud-warnbox b{color:var(--danger-ink-2)}
.onderhoud-warnbox-strong{border-width:2px;border-color:var(--danger-ink)}

/* Grand-totaal in het maandoverzicht — zelfde donkere "belangrijk totaal"-
   behandeling als .uren-sum-chip.total. */
.onderhoud-total{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:14px;padding:14px 18px;border-radius:var(--radius);background:var(--navy)}
.onderhoud-total .ot-l{font-size:12.5px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.onderhoud-total .ot-v{font-family:var(--mono);font-size:20px;font-weight:700;color:#fff}

/* ============================ Onderhoud v2 ================================ */
/* Excel-export/-import (onderhoud.js): de import-preview-modal (bijgewerkt-
   diff, PO-invoer in het maandoverzicht) en de v2-boekvelden in uren.js —
   hergebruikt .onderhoud-block/-table/-tarief-input/-warnbox hierboven. */
.onderhoud-diff-veld{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:12px;line-height:1.7}
.odv-label{color:var(--ink-dim);font-weight:620;min-width:96px}
.odv-arrow{color:var(--faint)}
.onderhoud-diff-oud{color:var(--danger-ink);text-decoration:line-through;text-decoration-color:var(--danger-border)}
.onderhoud-diff-nieuw{color:var(--ok-ink);font-weight:660}

.onderhoud-po-input{font-size:12.5px;padding:6px 9px}
.onderhoud-tmap-select{min-width:0;width:100%;font-size:12.5px;padding:6px 24px 6px 8px;background-position:right 7px center}

/* Compacte km/wacht/materiaal-indicatoren op de Uren-weekpagina (rijen die
   deze v2-velden hebben) — tekstchips onder de omschrijving, geen extra kolom. */
.onderhoud-mini-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.onderhoud-mini-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:620;
  padding:2px 7px;border-radius:var(--radius-pill);background:var(--weld-tint);color:var(--weld-tint-ink)}

/* ================ Onderhoud — centrale overzichtspagina =================== */
/* views/onderhoud_overzicht.js: sidebar-pagina "Onderhoud" met alle
   onderhoudsprojecten + hun maandtotalen (klik op een rij → projectfiche,
   waar de sectie hierboven de facturatie zelf afhandelt). Losstaande
   "oo-"-prefix: geen enkele classnaam overlapt met de .onderhoud-* hierboven. */
.oo-monthinput{border-radius:var(--radius-pill);background:var(--bg-card);
  border:1px solid var(--line-input);padding:7px 13px;font-size:12.5px;color:var(--ink-dim)}

/* Facturatiestatus-chip: grijs (nog niet) / groen (gefactureerd) / rood (fout) —
   zelfde kleurtaal als .uren-chip, met een eigen classnaam. */
.oo-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:640;border:1px solid transparent;white-space:nowrap}
.oo-chip svg{width:12px;height:12px;flex:0 0 auto}
.oo-chip.oo-nvt{background:var(--bg-subtle);color:var(--muted);border-color:var(--line)}
.oo-chip.oo-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.oo-chip.oo-fout{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.oo-chip.oo-klaar{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:var(--weld-light);font-weight:640}
/* Maandafsluiting-banner (review I2) */
.oo-afsluit{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:14px;padding:13px 16px;
  background:var(--bg-card);border:1px solid var(--line);border-left:3px solid var(--weld);border-radius:10px}
.oo-afsluit .a-main{font-size:14px;color:var(--ink)}
.oo-afsluit .a-main b{color:var(--weld-tint-ink)}
.oo-afsluit .a-sec{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.oo-afsluit .a-sec svg{width:13px;height:13px;flex:0 0 auto}
.oo-afsluit .a-sum{margin-left:auto;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink)}

/* Waarschuwingsbadge naast de chip: iemand boekte die maand uren zonder
   ingesteld tarief. Puur signalerend hier — amber (--warn), geen blokkade
   zoals .onderhoud-warnbox (deze pagina heeft geen factuurknop om te blokkeren). */
.oo-warnbadge{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:3px 9px;
  border-radius:var(--radius-pill);font-size:11px;font-weight:640;white-space:nowrap;
  background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border)}
.oo-warnbadge svg{width:12px;height:12px;flex:0 0 auto}

/* Somrij onderaan de tabel — zelfde donkere "belangrijk totaal"-taal als
   .uren-sum-chip.total / .onderhoud-total hierboven, hier als tfoot-rij. */
.oo-sumrow td{background:var(--navy);color:#fff;font-weight:700;border-bottom:none}

/* ============================ Verlof (vakantierooster) =================== */
/* Rooster: rijen = personen (of info-rijen als "Feestdagen"/"Ziek"), kolommen
   = dagen van de getoonde maand + een totaalkolom rechts. Eén <table> met een
   sticky eerste kolom (naam) zodat je bij veel dagkolommen horizontaal kan
   scrollen zonder de namen te verliezen — zelfde sticky-truc als .pb-person
   (planbord) en .g-headrow (gantt) voor de sticky kopregel. */
.vl-range{font-size:13.5px;font-weight:700;color:var(--ink);min-width:150px}
.vl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card)}
.vl-table{border-collapse:separate;border-spacing:0;font-size:12.5px;width:100%}
.vl-table th,.vl-table td{border-bottom:1px solid var(--line-2)}
.vl-table thead th{
  position:sticky;top:0;z-index:3;background:var(--bg-subtle);
  color:var(--ink-dim);font-weight:700;padding:7px 4px;text-align:center;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.vl-table thead th.vl-th-name{position:sticky;left:0;top:0;z-index:4;text-align:left;padding:9px 13px;width:170px}
.vl-daycol{width:30px}
.vl-daycol b{display:block;font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:700}
.vl-daycol span{display:block;font-size:12px}
.vl-th-tot{min-width:64px}
.vl-daycol.we,.vl-cell.we{background:var(--bg-subtle)}
.vl-daycol.today,.vl-cell.today{border-left:2px solid var(--weld);border-right:2px solid var(--weld)}
.vl-daycol.today{color:var(--weld-deep)}
.vl-name-cell{
  position:sticky;left:0;z-index:2;background:var(--bg-card);
  border-right:1px solid var(--line);padding:9px 13px;
  box-shadow:2px 0 4px rgba(20,30,45,.03);width:170px;overflow:hidden;
}
.vl-row.vl-mine .vl-name-cell{border-left:3px solid var(--weld)}
.vl-row.vl-info .vl-name-cell{background:var(--bg-subtle)}
.vl-naam{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-func{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-row.vl-info .vl-naam{font-style:italic;font-weight:600;color:var(--ink-dim)}
.vl-cell{width:30px;height:36px;text-align:center;cursor:default;position:relative}
.vl-cell.editable{cursor:pointer}
.vl-cell.editable:hover{background:var(--weld-hover)}
.vl-fill{display:none}
.vl-cell.on .vl-fill{display:block;position:absolute;inset:4px;border-radius:5px;background:var(--weld);transition:background .1s}
.vl-cell.on.editable:hover .vl-fill{background:var(--weld-deep)}
.vl-tot{text-align:center;font-family:var(--mono);font-weight:700;color:var(--ink-dim)}

/* "Personen beheren"-modal (enkel bij mag_alles): compacte rijenlijst met
   inline velden + volgorde-pijltjes. Opslaan/verwijderen is per rij een
   expliciete knop (geen auto-save-op-blur — te verrassend voor een
   admin-only beheerlijst). */
/* Zeven kolommen sinds cyclus 14: het personeelsnummer van SD Worx staat
   tussen Functie en Soort (zonder nummer valt de persoon uit de export). */
.vlp-head,.vlp-row{display:grid;grid-template-columns:1.3fr 66px 1fr 90px 96px 150px 120px;gap:8px;align-items:center}
.vlp-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:0 2px 6px}
.vlp-list{max-height:360px;overflow-y:auto;overflow-x:auto}
.vlp-row{padding:6px 2px;border-bottom:1px solid var(--line-2)}
.vlp-row:last-child{border-bottom:none}
.vlp-row input,.vlp-row select{font-size:12px;padding:6px 8px;min-width:0}
.vlp-actions{display:flex;gap:4px;justify-content:flex-end}
.vlp-actions .icon-btn{width:26px;height:26px}
.vlp-actions .icon-btn svg{width:13px;height:13px}
.vlp-actions [data-act="down"] svg{transform:rotate(180deg)}

/* Verlof — aanvragen & soorten (cyclus 14) */
/* Roostercel: goedgekeurd blijft het gevulde blokje, maar draagt nu de code
   van de verlofsoort (V, Z, F …); aangevraagd is een gestippelde omtrek —
   zichtbaar anders zonder een tweede kleurtaal te openen. */
.vl-cell.on .vl-fill{display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;letter-spacing:.02em}
.vl-cell.pending .vl-fill{display:flex;align-items:center;justify-content:center;
  position:absolute;inset:4px;border-radius:5px;background:transparent;
  border:2px dashed var(--weld);color:var(--weld-deep);font-size:9px;font-weight:700}
.vl-cell.pending.editable:hover .vl-fill{border-color:var(--weld-deep)}

/* Legende onder het rooster: één staaltje per soort, zelfde vorm als de cel. */
.vl-legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:var(--muted);margin:0 6px}
.vl-legend-item{display:inline-flex;align-items:center;gap:5px}
.vl-swatch{width:14px;height:14px;border-radius:4px;display:inline-flex;align-items:center;
  justify-content:center;font-size:8px;font-weight:700;color:#fff}
.vl-swatch.pending{background:transparent;border:2px dashed var(--weld)}
/* Teller naast een knop/tab ("Aanvragen 3") — zelfde rode taal als .nav-badge. */
.vl-count{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;
  align-items:center;justify-content:center;margin-left:4px}

/* Aanvraagkaarten (lijst in het venster "Aanvragen"): kop met naam + status
   rechts, meta eronder, knoppen rechts uitgelijnd. */
.va-list{display:flex;flex-direction:column;gap:10px}
.va-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card);padding:10px 12px}
.va-card-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.va-meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.va-status{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:9px;margin-left:auto}
.va-status.aangevraagd{background:var(--weld-tint);color:var(--weld-deep)}
.va-status.goedgekeurd{background:rgba(16,185,129,.15);color:#0f766e}
.va-status.geweigerd{background:rgba(239,68,68,.15);color:#b91c1c}
.va-status.ingetrokken{background:var(--bg-subtle);color:var(--muted)}
.va-actions{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}

/* "Verlofsoorten beheren": zelfde rijenraster als .vlp-* hierboven. */
.vs-head,.vs-row{display:grid;grid-template-columns:1.4fr 60px 110px 90px 70px 70px 90px;gap:8px;align-items:center}
.vs-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:0 2px 6px}
.vs-row{padding:6px 2px;border-bottom:1px solid var(--line-2)}
.vs-row:last-child{border-bottom:none}
.vs-row input,.vs-row select{font-size:12px;padding:6px 8px;min-width:0}
/* Kleurkiezer, vinkje en keuzerondje zijn geen tekstvelden: de padding van
   hierboven maakt er anders een leeg blok van. Ze staan als rasterkind zelf
   gecentreerd in hun kolom. */
.vs-row input[type=color]{padding:2px;height:28px;width:100%;cursor:pointer}
.vs-row input[type=checkbox],.vs-row input[type=radio]{
  width:16px;height:16px;padding:0;justify-self:center;cursor:pointer}
/* Vier knoppen in de kolom van 90px: iets krapper dan de .vlp-actions-maat. */
.vs-row .vlp-actions{gap:2px}
.vs-row .vlp-actions .icon-btn{width:21px;height:21px}
.vs-row .vlp-actions .icon-btn svg{width:12px;height:12px}

/* SD Worx-paneel in Instellingen: diagnoseregels met een ja/nee/deels-oordeel. */
.sdw-panel{display:flex;flex-direction:column;gap:12px}
.sdw-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.sdw-row:last-child{border-bottom:none}
.sdw-ok{color:#0f766e;font-weight:700}
.sdw-nee{color:#b91c1c;font-weight:700}
.sdw-deels{color:var(--weld-deep);font-weight:700}

/* ==================== Mapkiezer + projectsprong verkenner ================ */
/* folderpicker.js: keuze-venster over dezelfde /api/folders/browse als de
   verkenner. Mappen zijn knoppen (klik = erin), bestanden staan er enkel ter
   oriëntatie bij — je kiest altijd de map waar je ín staat. */
.fp-melding{margin-bottom:9px;padding:7px 10px;border-radius:var(--radius-sm);font-size:12px;line-height:1.5;
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.fp-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12.5px;min-width:0}
.fp-filter{margin-bottom:8px}
.fp-list{max-height:300px;overflow-y:auto;border:1px solid var(--line-input);border-radius:var(--radius-sm);background:var(--bg-card)}
.fp-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 10px;font:inherit;font-size:13px;border:none;border-bottom:1px solid var(--line-2);background:none;color:var(--ink)}
.fp-row:last-child{border-bottom:none}
.fp-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-row svg{width:16px;height:16px;flex:0 0 auto}
.fp-dir{cursor:pointer;color:var(--ink)}
.fp-dir svg:first-child{color:var(--weld)}
.fp-dir:hover{background:var(--bg-subtle)}
.fp-file{color:var(--muted);font-size:12.5px}
.fp-go{flex:0 0 auto;color:var(--muted);display:inline-flex}
.fp-go svg{transform:rotate(180deg)}
.fp-leeg{padding:12px 10px;font-size:12.5px;color:var(--muted)}
.fp-huidig{margin-top:9px;font-size:12px;color:var(--ink-dim)}
.fp-huidig .mono{color:var(--ink);word-break:break-all}
/* Projectbalk boven de verkennerlijst: kies een project → spring naar de map. */
.vk-projectbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.vk-projectbar label{font-size:12px;font-weight:600;color:var(--ink-dim)}
.vk-projectbar select{min-width:250px;max-width:100%;font-size:13px;padding:7px 10px}

/* Slepen vanaf de PC (cyclus 22, fase 1). De overlay ligt over het hele paneel
   en vangt zelf geen muis (`pointer-events:none`) — anders zou ze de
   dragleave/drop van het paneel eronder wegnemen. Enkel bestaande tokens. */
.vk-dropping{outline:2px dashed var(--weld);outline-offset:-4px;position:relative}
.vk-drop-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--weld) 8%,transparent);
  pointer-events:none;font-size:15px;z-index:5}
tr.vk-drop-target td{background:var(--weld-tint)}
/* Voortgangsbalk van een lopende upload — dun, in de naamcel. */
.vk-progress{height:4px;background:var(--bg-subtle);border-radius:2px;overflow:hidden;margin-top:4px}
.vk-progress i{display:block;height:100%;background:var(--weld);transition:width .15s}
tr.vk-row-fout td{color:var(--danger-ink)}
/* De reden van een mislukte upload staat in de NAAMcel: "Grootte"/"Gewijzigd"
   dragen `col-hide` en verdwijnen op een smal scherm. */
.vk-fout-reden{font-size:12px;color:var(--danger-ink);margin-top:3px}

/* De kop van de verkenner. `.panel-head` wikkelt niet, en de titel met de
   NAS-badge plus de vijf werkbalkknoppen zijn samen ~480px breed: op een gsm
   (390px) werd de knoppenrij dus naar rechts BUITEN het scherm geschoven —
   `document.scrollWidth` was 480 bij een `innerWidth` van 390, dus de hele
   pagina kreeg een horizontale schuifbalk (gemeten, cyclus 22). De knoppenrij
   draagt zelf al `flex-wrap:wrap`; het is de kop eromheen die moet mogen
   wikkelen, en de badge die over twee regels mag. */
.vk-head{flex-wrap:wrap;row-gap:8px}
.vk-head .pipe{flex-wrap:wrap;min-width:0}
.vk-head .badge{white-space:normal}

/* Meervoudige keuze (fase 2): keuzebalk, vinkjes, inline hernoemen. */
.vk-selbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:8px 10px;background:var(--weld-tint);border-radius:8px}
tr.vk-sel td{background:var(--weld-tint)}
/* De HELE cel is het klikdoel van het vinkje (niet enkel het 13×13-vakje erin),
   dus mag er geen tekstselectie ontstaan wanneer je er twee keer op tikt. */
.vk-checkcel{width:28px;user-select:none}
/* Het vinkje blijft flauw tot je met de muis over de rij gaat of ze gekozen is
   — anders roept een lijst van 200 bestanden om aandacht met 200 vakjes. */
.vk-check{opacity:.35}
tr:hover .vk-check,tr.vk-sel .vk-check,.vk-check:checked{opacity:1}
.vk-rename{font:inherit;width:100%;padding:4px 6px}

/* Slepen BINNEN de verkenner (fase 3): verplaatsen/kopiëren, klembord.
   De gesleepte rijen blijven staan maar vervagen — ze wegnemen zou de lijst
   onder de muis laten verspringen terwijl je nog aan het slepen bent. */
tr.vk-dragging td{opacity:.45}
/* Kruimelchip, "Omhoog" en de projectbalk zijn óók sleepdoelen; zij hebben
   geen tabelcel om te tinten (dat doet `tr.vk-drop-target td`), dus krijgen ze
   dezelfde streepjesrand als het paneel. */
.vk-chip.vk-drop-target,#vk_up.vk-drop-target,.vk-projectbar.vk-drop-target{
  outline:2px dashed var(--weld);outline-offset:2px;border-radius:6px}

/* Voorvertoning in een uitschuifpaneel (fase 4). De hoogte is vast en in
   `dvh`: een <iframe> zonder hoogte klapt tot 150px dicht, en de kop plus de
   knoppenbalk van `ui.drawer` nemen samen ~190px. Een afbeelding mag wél
   krimpen (`height:auto`), anders wordt een 1×1-icoon over de volle hoogte
   uitgerekt. */
.vk-preview{width:100%;height:calc(100dvh - 190px);border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg-subtle)}
img.vk-preview{height:auto;max-height:calc(100dvh - 190px);object-fit:contain}
/* Alles wat de app niet inline mag tonen (zie `_inline_toegestaan`): geen
   grijze leegte, maar de reden plus de weg eromheen. */
.vk-preview-leeg{padding:40px;text-align:center;color:var(--muted)}

/* De KERN losstaand gemount (cyclus 24, `mountVerkenner`): op de pagina staat
   ze in `.panel-body` en heeft ze geen eigen positionering nodig, maar een
   ingebedde mount (bv. de projectfiche-tab) mag als ankerpunt dienen. */
.vk-host{position:relative}
/* Ingebed in de projectfiche (560px breed, geen gsm): compactere werkbalk en
   tabel, maar de kolommen Grootte/Gewijzigd (`.col-hide`) blijven zichtbaar —
   op dat formaat is er nog plaats genoeg en zijn ze wél nuttig. */
.vk-ingebed .vk-toolbar .btn{padding:5px 8px}
.vk-ingebed table.data th,.vk-ingebed table.data td{padding:6px 6px;font-size:13px}
.vk-ingebed th.col-hide,.vk-ingebed td.col-hide{display:table-cell}
.vk-ingebed table.data th:nth-child(3){width:70px}
.vk-ingebed table.data th:nth-child(4){width:84px}
.vk-ingebed table.data th:nth-child(5){width:92px}
.vk-ingebed .icon-btn{width:26px;height:26px}
.vk-ingebed .vk-crumb{font-size:12.5px}
/* De pane "Bestanden" op de projectfiche — voorkomt een te lage tabel wanneer
   de gemounte verkenner nog aan het laden is. */
.pf-bestanden{min-height:240px}

/* ============================ CEO-cockpit ================================ */
/* views/cockpit.js — docs/plan-ceo-dashboard.md. Alles hier draagt het
   voorvoegsel `.cp-`; bestaande klassen (.panel, .panel-head, .section-title,
   .toolbar, .tag, .onderhoud-warnbox) worden gewoon hergebruikt, en de kleuren
   komen uit de bestaande tokens — geen enkele nieuwe kleurvariabele. */
.cp-topbar .cp-toestand{font-size:11.5px;color:var(--ink-dim);white-space:nowrap;cursor:help}

/* ── Dichtheid ──────────────────────────────────────────────────────────────
   Dit scherm is een instrumentenbord, geen rapport: wat onder de vouw valt,
   wordt in de praktijk niet gelezen. De cockpit krijgt daarom kortere kop- en
   blokmarges dan de rest van de app. Alles hieronder hangt aan `.cp-body`
   (de wrapper rond #cpBody), zodat geen enkele andere pagina meebeweegt. */
.cp-body .section-title{margin:15px 2px 9px}
.cp-body .section-title:first-child{margin-top:0}
.cp-body .panel-head{padding:11px 16px}
.cp-body .panel-body{padding:14px 16px}
/* In een kolom van 318px brak "17-08 → 23-08" af tot "17-08 → 23-" + "08" en
   duwde zo de hele kop op twee regels. De hint blijft dus op één regel en de
   titel wijkt desnoods met een beletselteken — een datumbereik dat middenin
   afbreekt is sowieso onleesbaar. */
.cp-body .panel-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-body .cp-hint{white-space:nowrap}

/* KPI-tegels: zelfde kaart-look als .ctl-kpi. Het zijn <button>'s (klikken
   drilt door naar de onderliggende rijen), dus de knop-eigen opmaak wordt
   eerst teruggezet. auto-fit met een minimum van 200px laat de vier tegels op
   een telefoon netjes stapelen. */
.cp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.cp-kpi{
  display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left;font:inherit;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px 10px;box-shadow:var(--shadow-card);transition:border-color .12s,box-shadow .12s,background .12s;
}
.cp-kpi:hover{background:var(--bg-subtle)}
.cp-kpi .cp-lab{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.cp-kpi .cp-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;
  letter-spacing:-.02em;margin-top:3px;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.cp-kpi .cp-sub{font-size:11.5px;line-height:1.35;color:var(--ink-dim)}
/* Status en toelichting delen één regel zolang ze samen passen, en wikkelen
   anders netjes naar twee — dat scheelt op elke tegel een volle regel zonder
   dat er ooit tekst afgeknipt wordt. */
.cp-voet{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin-top:5px}
.cp-voet .cp-chip{margin-top:0}
/* Boven de rode drempel: rand rondom + rood cijfer. De extra 1px komt van de
   box-shadow, zodat de kaart niet verspringt door een dikkere rand. */
.cp-kpi.alarm{border-color:var(--danger-border);box-shadow:0 0 0 1px var(--danger-border)}
.cp-kpi.alarm .cp-val{color:var(--danger-ink)}

/* Chips dragen ALTIJD tekst (kleur alleen is geen signaal) — het icoontje is
   extra houvast, geen vervanging. */
.cp-chip{margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;border-radius:var(--radius-pill);padding:2.5px 10px;
  border:1px solid var(--line);background:var(--bg-subtle);color:var(--ink-dim)}
.cp-chip svg{width:12px;height:12px;flex:none;stroke-width:2.2}
.cp-chip.ok{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-border)}
.cp-chip.warn{color:var(--warn-ink);background:var(--warn-bg);border-color:var(--warn-border)}
.cp-chip.danger{color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-border)}

/* Drie kolommen, elk met een eigen leesvraag: links de CIJFERS (hoe draait
   het jaar), midden de SIGNALEN (wat vraagt vandaag een beslissing), rechts
   TEAM & KOSTEN (wie werkt er, wat kost het). Ze staan in grid-areas i.p.v.
   drie losse kolommen, zodat "signalen" en "team" op een smaller scherm onder
   elkaar in één rechterkolom schuiven zónder dat de HTML verandert — en op een
   telefoon gewoon stapelen. */
.cp-grid{display:grid;gap:12px;align-items:start;margin-top:12px;
  grid-template-columns:minmax(0,1fr) 318px 318px;
  grid-template-areas:"cijfers signalen team"}
.cp-kolom{display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-k-cijfers{grid-area:cijfers}
.cp-k-signalen{grid-area:signalen}
.cp-k-team{grid-area:team}
.cp-hint{font-size:11.5px;color:var(--muted)}

/* Lege staat binnen een paneel: één regel, geen illustratie. De grote
   `ui.emptyState` (54px padding + tekening) is voor een lege PAGINA — in een
   paneel van 300px kost ze een halve schermhoogte om "er is niets" te zeggen. */
.cp-leeg{font-size:12.5px;color:var(--muted);padding:1px 0}

/* Maandgrafiek (inline SVG). De kleuren staan hier en niet als fill-attribuut
   in de SVG: `fill="var(--…)"` als presentatie-attribuut werkt niet overal. */
.cp-chartbox{overflow-x:auto}
.cp-chart{display:block;width:100%;min-width:520px;height:auto}
.cp-raster line{stroke:var(--line-2);stroke-width:1}
.cp-tick text{font-family:var(--mono);font-size:10.5px;fill:var(--muted);text-anchor:end}
.cp-bar{fill:var(--arc)}
.cp-bar.lopend{opacity:.45}          /* de lopende maand is nog niet af */
.cp-hit{fill:transparent}            /* brede hover-zone voor de tooltip */
.cp-maand{font-family:var(--mono);font-size:10.5px;fill:var(--ink-dim);text-anchor:middle}
.cp-maand.nu{fill:var(--ink);font-weight:700}
.cp-dlabel{font-family:var(--mono);font-size:10.5px;fill:var(--ink);text-anchor:middle}

/* Legende voor de gecombineerde staaf+lijn-grafiek: verplicht zodra er twee
   reeksen zijn. Staaf → blokje (mirrors de balkvorm), lijn → kort streepje
   ("line key", geen vlak) — de vorm in de legende herkent zo de vorm in de
   grafiek, niet enkel de kleur. */
.cp-legende{display:flex;gap:16px;margin-bottom:8px;font-size:11.5px;color:var(--ink-dim)}
.cp-leg-item{display:inline-flex;align-items:center;gap:6px}
.cp-leg-staaf{width:10px;height:10px;border-radius:2px;background:var(--arc);flex:none}
.cp-leg-lijn{width:14px;height:2px;border-radius:1px;background:var(--weld-deep);flex:none}

/* Cumulatieve lijn, op haar eigen rechter as (`grafiekHTML`: het jaartotaal is
   een veelvoud van de hoogste maandstaaf, dus ze kan niet dezelfde lineaire as
   delen met de staven). `--weld-deep` i.p.v. `--weld`: enkel die haalt de
   3:1-contrastdrempel voor een dunne lijn op een witte kaart (dataviz-skill,
   validate_palette.js). Kort streepje als rechteras-tikmerk i.p.v. een volle
   lijn — anders ontstaat er een verwarrend tweede rooster naast het bestaande. */
.cp-tick-cum text{font-family:var(--mono);font-size:10.5px;fill:var(--muted);text-anchor:start}
.cp-tick-cum-mark{stroke:var(--line-2);stroke-width:1}
.cp-cum-lijn{fill:none;stroke:var(--weld-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-cum-eind{fill:var(--weld-deep);stroke:var(--bg-card);stroke-width:2}
.cp-cum-label{font-family:var(--mono);font-size:10.5px;font-weight:700;fill:var(--ink);text-anchor:middle}

/* Dekkingsmeter (reekstabel + urendiscipline). Bewust NIET `.meter`: die klasse
   bestaat al als KPI-kaart op het dashboard. */
.cp-meter{display:flex;align-items:center;gap:8px;min-width:110px}
.cp-track{display:block;flex:1;height:6px;border-radius:var(--radius-pill);background:var(--link-bg);overflow:hidden}
.cp-fill{display:block;height:100%;border-radius:var(--radius-pill);background:var(--arc)}
.cp-fill.ok{background:var(--ok)}
.cp-fill.warn{background:var(--warn)}
.cp-fill.danger{background:var(--danger)}
.cp-pct{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);width:38px;text-align:right}
.cp-reeks{display:flex;align-items:center;gap:8px;font-weight:600}
.cp-dot{width:9px;height:9px;border-radius:3px;flex:none}
/* Deze tabel wordt met de hand geschreven (geen ui.makeTable), dus er valt niets
   te sorteren: geen klikcursor op de koppen. En de koppen mogen WEL afbreken —
   "Gefactureerd t.o.v. gecalculeerd" op één regel duwde de laatste kolom buiten
   het paneel, precies de kolom met de dekkingsmeter erin. Let op de dubbele
   klasse: `table.data th` is specifieker dan `.cp-reeks-tabel th` en zou anders
   winnen. */
table.data.cp-reeks-tabel{font-size:12.5px}
table.data.cp-reeks-tabel td{white-space:nowrap}
table.data.cp-reeks-tabel th{white-space:normal;cursor:default}
table.data.cp-reeks-tabel th:hover{color:var(--muted)}
/* In drie kolommen is de cijferkolom smaller dan vroeger. Krappere cellen en
   een reeksnaam die mág afbreken houden de zes kolommen binnen het paneel;
   zonder dit valt de dekkingsmeter in een horizontale scrollbalk. */
table.data.cp-reeks-tabel th,table.data.cp-reeks-tabel td{padding:6px 7px}
table.data.cp-reeks-tabel td:first-child{white-space:normal}
/* Zes kolommen in een kolom van ~560px. De kopregels waren de duurste breedte
   van de tabel: één woord als "ONDERAANNEMERS" in kapitalen mét letterafstand
   kan niet afbreken en zette in z'n eentje de kolombreedte. Gewone schrijfwijze
   zonder letterafstand scheelt ~25% en leest in een tabel bovendien beter dan
   geschreeuw. Zonder dit viel de dekkingsmeter in een horizontale scrollbalk. */
table.data.cp-reeks-tabel th{font-size:10.5px;letter-spacing:0;text-transform:none}
.cp-reeks-tabel .cp-meter{min-width:66px;gap:5px}
.cp-reeks-tabel .cp-pct{width:32px}

/* Signalenlijst: gekleurde streep links, bedrag rechts. Aanklikbare regels zijn
   een echte <button> (toetsenbord + screenreader werken dan vanzelf mee), dus
   de knop-eigen opmaak wordt hier eerst teruggezet. */
/* De exceptielijst is het langste blok van het scherm (tot twaalf regels). Ze
   krijgt daarom haar eigen scrollvenster i.p.v. de hele pagina langer te maken
   — hetzelfde patroon als .op-tabel/.ctl-tabel. Bij één kolom (telefoon) valt
   die begrenzing weg: daar is de pagina zelf de scroll. */
.cp-att-body{padding:6px 14px 10px;max-height:max(320px, calc(100dvh - 470px));overflow:auto}
.cp-att{display:flex;flex-direction:column}
.cp-att-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  padding:8px 2px;border-bottom:1px solid var(--line-2);background:none;border-left:0;border-right:0;border-top:0;
  font:inherit;color:var(--ink)}
.cp-att-row:last-child{border-bottom:0}
.cp-att-row .cp-stripe{width:4px;align-self:stretch;border-radius:2px;flex:none;background:var(--faint)}
.cp-att-row.danger .cp-stripe{background:var(--danger)}
.cp-att-row.warn .cp-stripe{background:var(--warn)}
.cp-att-row.klik{cursor:pointer;border-radius:0 6px 6px 0}
.cp-att-row.klik:hover{background:var(--bg-subtle)}
.cp-att-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Eén regel per veld: een projectnaam die over drie regels wikkelt maakt van
   twaalf signalen een halve meter scherm. De volledige tekst zit in de tooltip
   van de rij, en het projectnummer — het deel waarop je herkent — staat vooraan
   en blijft dus altijd staan. */
.cp-att-t{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-att-d{font-size:11.5px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-att-amt{margin-left:auto;font-size:12px;white-space:nowrap;color:var(--ink);padding-top:1px}
.cp-att-meer{padding:7px 2px 0;font-size:11.5px;color:var(--muted)}

/* Urendiscipline + onderhoud: één groot cijfer met (bij uren) een meter ernaast. */
.cp-disc{display:flex;align-items:center;gap:14px}
.cp-groot{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.cp-groot.ok{color:var(--ok-ink)}
.cp-groot.warn{color:var(--warn-ink)}
.cp-groot.danger{color:var(--danger-ink)}
.cp-meter-groot{flex:1}
.cp-disc-sub{font-size:11.5px;color:var(--ink-dim);margin-top:6px}
.cp-disc-namen{margin-top:4px;color:var(--muted)}
.cp-disc-namen .cp-naam{white-space:nowrap}

/* Verlof & opleiding deze week: eenvoudige lijst, geen tabel — bewust simpel,
   dit paneel telt niets, het toont enkel wie/wat. Info-rijen (bv.
   "OPLEIDINGEN") krijgen de bestaande `.tag`-pil i.p.v. een naam in vetjes,
   zodat niemand die rijnaam voor een medewerker aanziet. */
.cp-verlof-lijst{display:flex;flex-direction:column}
.cp-verlof-rij{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:7px 2px;border-bottom:1px solid var(--line-2)}
.cp-verlof-lijst .cp-verlof-rij:last-child{border-bottom:0}
.cp-verlof-naam{font-weight:600;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-verlof-dagen{font-size:11.5px;color:var(--ink-dim);overflow-wrap:anywhere}
/* Scheidingslijn tussen de persoonsrijen en de info-rijen, enkel als beide
   groepen er staan (aparte sibling-selector i.p.v. een JS-conditie). */
.cp-verlof-lijst + .cp-verlof-infolijst{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}

/* Weekstrip: zeven vakjes ma→zo naast de naam, in plaats van "ma · di · wo" in
   tekst. Even hoog als één regel tekst, maar je ziet meteen de VORM van de week
   — aaneengesloten verlof, losse dagen, of iedereen op dezelfde vrijdag weg.
   De namen van de dagen staan één keer in de kopregel, niet per rij opnieuw.
   Vaste kolombreedtes (geen 1fr): zo staan de vakjes van elke rij exact onder
   elkaar én onder hun letter in de kop. */
.cp-week{display:flex;flex-direction:column}
.cp-week-rij{display:grid;grid-template-columns:minmax(0,1fr) repeat(7,15px);gap:0 3px;align-items:center;
  padding:5px 2px;border-top:1px solid var(--line-2)}
.cp-week-kop{display:grid;grid-template-columns:minmax(0,1fr) repeat(7,15px);gap:0 3px;align-items:center;
  padding:0 2px 4px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cp-week-kop span{text-align:center}
.cp-week-dag{height:15px;border-radius:3px;background:var(--line-2)}
/* Weekend: enkel een contour, zodat een vrije zaterdag niet als verlof leest. */
.cp-week-dag.we{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.cp-week-dag.aan{background:var(--arc);box-shadow:none}
.cp-week-lijst + .cp-week-lijst{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
.cp-week-lijst + .cp-week-lijst .cp-week-rij:first-child{border-top:0}

/* Overhead: maand naast jaar in één tabelletje. Vroeger stond de maand als
   rijen en het jaar als een volzin eronder — dezelfde hoogte, maar je kon de
   twee periodes niet naast elkaar lezen. */
/* Vaste kolombreedtes: twee bedragkolommen naast elkaar in een paneel van
   318px is krap, en een jaartotaal als "€ 969.153,27" liep zonder dit buiten de
   kaart. De bedragen staan daarom een tikje kleiner dan de labels. */
.cp-ov{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;margin-top:11px}
.cp-ov col.cp-ov-lab{width:34%}
.cp-ov th{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:right;padding:0 0 5px 8px;white-space:nowrap}
.cp-ov th:first-child{text-align:left;padding-left:0}
.cp-ov td{padding:6px 0;border-top:1px solid var(--line-2);color:var(--ink);vertical-align:top}
.cp-ov td+td{text-align:right;padding-left:8px;white-space:nowrap}
.cp-ov .cp-ov-bedrag{font-family:var(--mono);font-variant-numeric:tabular-nums;display:block;font-size:11.5px}
.cp-ov .cp-ov-tel{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.cp-ov tr.tot td{font-weight:700;border-top:1px solid var(--line)}

/* Twee kolommen: "signalen" en "team" schuiven onder elkaar in de rechterkolom
   (exact de indeling van vóór deze verdichting), de cijferkolom loopt door over
   beide rijen. */
/* Grens op 1359px: de zes kolommen van de reekstabel hebben minimaal ~500px
   nodig, en bij drie kolommen is de cijferkolom `viewport − 792px` breed (68px
   rail + 64px paginamarge + 2×318px + 2×12px tussenruimte). Vanaf 1360px blijft
   daar genoeg over; daaronder zou de tabel in een horizontale scrollbalk vallen
   en dat weegt niet op tegen de gewonnen hoogte. Meet dit opnieuw als er een
   kolom bijkomt in die tabel — het is een gemeten grens, geen rond getal. */
@media(max-width:1359px){
  .cp-grid{grid-template-columns:minmax(0,1fr) 340px;
    grid-template-areas:"cijfers signalen" "cijfers team"}
}
/* Eén kolom vanaf dezelfde grens als vroeger (1040px): daaronder is er voor de
   reekstabel niets meer over naast een zijkolom. De exceptielijst laat haar
   eigen scrollvenster hier los — bij één kolom is de pagina zelf de scroll, en
   een scrollgebied in een scrollgebied is op een telefoon onwerkbaar. */
@media(max-width:1039px){
  /* Te smal voor een zijkolom náást de reekstabel, maar nog ruim genoeg om de
     kleine panelen twee aan twee te zetten: de cijferkolom loopt over de volle
     breedte, "signalen" en "team" staan ernaast elkaar. Dat scheelt hier een
     volle schermhoogte tegenover alles onder elkaar. */
  .cp-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"cijfers cijfers" "signalen team"}
  .cp-att-body{max-height:none;overflow:visible}
}
@media(max-width:699px){
  .cp-grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"cijfers" "signalen" "team"}
  /* Op een telefoon is er geen ruimte om titel én periode op één regel te
     houden; dan liever twee regels dan een afgekapte paneelnaam. */
  .cp-body .panel-head{flex-wrap:wrap;row-gap:2px}
  .cp-body .panel-head h3{white-space:normal;overflow:visible}
  .cp-body .cp-hint{white-space:normal}
}

/* ── Manuele nacalculatie ─────────────────────────────────────────────────
   Het manuele blok (web/js/nacalc.js) en het bestaande, volledig afgeleide
   blok staan sámen in de tab Nacalculatie van de projectfiche. Welk van de
   twee bovenaan komt, is puur CSS: staat het vinkje "Manuele nacalculatie
   gebruiken" UIT, dan zet nacalc.js' onStand de klasse `nc-auto-eerst` op de
   wrapper en wisselt de `order`. Zo hoeft detail.js niets te herrenderen. */
.nc-wrap{display:flex;flex-direction:column;min-width:0}
.nc-slot{min-width:0}
.nc-slot-manueel{order:1}
.nc-slot-auto{order:2}
.nc-wrap.nc-auto-eerst .nc-slot-manueel{order:2}
.nc-wrap.nc-auto-eerst .nc-slot-auto{order:1}

.nc-blok{display:flex;flex-direction:column;min-width:0}
.nc-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px 12px}
.nc-vink{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:620;color:var(--ink);cursor:pointer}
.nc-vink input{width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.nc-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nc-updated{font-size:11.5px;color:var(--muted)}
.nc-uitleg{font-size:11.5px;color:var(--ink-dim);line-height:1.5;margin-top:5px}

/* Botsing met een andere opslag (HTTP 409): de toast verdwijnt, deze balk niet
   — ze draagt de knop waarmee je verse gegevens haalt. */
.nc-conflict{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding:9px 11px;border-radius:var(--radius-sm);line-height:1.45;
  background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-ink-2);font-size:12.5px}
.nc-conflict svg{width:14px;height:14px;vertical-align:-2px}
.nc-fout{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:4px;
  padding:11px 12px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.45;
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.nc-fout svg{width:14px;height:14px;vertical-align:-2px}
.nc-fout-detail{font-size:11.5px;color:var(--ink-dim);overflow-wrap:anywhere}

.nc-rubs{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.nc-rub{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);overflow:hidden}
.nc-rub-kop{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--ink-dim);
  padding:8px 11px;background:var(--bg-subtle);border-bottom:1px solid var(--line-2)}
/* Kost links, Gefactureerd rechts — maar enkel wanneer er écht plaats is: de
   projectfiche is een lade van 560px, dus in de praktijk vallen ze onder
   elkaar en houdt elke regel zijn volle breedte. De 1px `gap` op een gekleurde
   achtergrond tekent de scheidingslijn in béíde richtingen (horizontaal bij
   gestapeld, verticaal bij naast elkaar) zonder aparte regel per stand. */
.nc-rub-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:var(--line-2)}
.nc-zij{background:var(--bg-card);padding:10px 11px 11px;min-width:0}
.nc-zij-kop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.nc-zij-t{font-size:12px;font-weight:700;color:var(--ink)}
.nc-zij-tot{font-size:12.5px;font-weight:700;color:var(--ink)}
.nc-zij-voet{margin-top:3px}
.nc-leeg{font-size:12px;color:var(--muted);padding:2px 1px 5px}

/* Regelvorm zoals de facturatie-regels-editor in detail.js, met één kolom
   extra voor het live berekende bedrag. `minmax(0,1fr)` (niet `1fr`) houdt de
   omschrijvingskolom krimpbaar — anders duwt de min-content-breedte van een
   <input> de rij breder dan de lade en scrolt de pagina zijwaarts. */
.nc-koppen,.nc-regel{display:grid;grid-template-columns:minmax(0,1fr) 66px 88px 88px 26px;
  gap:5px;align-items:center}
.nc-koppen{font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:var(--muted);margin-bottom:4px;padding:0 2px}
.nc-regel{margin-bottom:5px}
.nc-regel input{font-size:12.5px;padding:6px 8px;border-radius:8px;min-width:0}
.nc-bedrag{font-size:12px;color:var(--ink);text-align:right;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-regel .icon-btn{width:26px;height:26px;font-size:13px;line-height:1}

.nc-notitie{margin-top:14px}
.nc-notitie label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:5px}
.nc-notitie textarea{font-size:12.5px;resize:vertical}

.nc-tot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}
.nc-tot-c{min-width:0}
.nc-tot-c .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.nc-tot-c .v{font-size:15px;font-weight:700;color:var(--ink);margin-top:3px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Een regel waarvan aantal × prijs overloopt telt niet mee in de totalen. Dat
   mag nooit stil gebeuren: deze balk zegt het, en het opslaan weigert met
   dezelfde uitleg (app/nacalc.py#keur_regels). */
.nc-onbekend{display:flex;align-items:flex-start;gap:7px;margin-top:10px;
  padding:9px 11px;border-radius:var(--radius-sm);font-size:12px;line-height:1.45;
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.nc-onbekend svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.nc-acties{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}

@media(max-width:700px){
  /* Kost en Gefactureerd altijd onder elkaar, en elke regel op twee rijen:
     omschrijving + ✕ boven, aantal · prijs · bedrag eronder. Vijf kolommen
     naast elkaar passen niet op een telefoon. */
  .nc-rub-body{grid-template-columns:1fr}
  .nc-koppen{display:none}
  .nc-regel{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto 26px;gap:5px 6px;
    margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line-2)}
  .nc-regel:last-child{border-bottom:0;padding-bottom:0}
  .nc-regel input[data-veld="omschrijving"]{grid-column:1 / span 3}
  .nc-regel .nc-rm{grid-column:4;grid-row:1}
  .nc-tot{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}
  .nc-tot-c .v{font-size:14px}
}

/* ── Overnemen-venster (nacalc.js#openOvernameModal) ──────────────────────
   Voorstellen uit de uren, de onderaanneming, de aankoopfacturen en de
   gekoppelde facturen. Enkel de LIJST scrolt: de profielkeuze bovenaan en het
   live totaal onderaan blijven staan, zodat je altijd ziet met welk uurtarief
   je rekent en wat je op het punt staat over te nemen. */
.nov{display:flex;flex-direction:column;gap:11px;min-width:0}

.nov-prof{padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-subtle)}
.nov-prof-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--muted);margin-bottom:6px}
.nov-prof-keuze{display:flex;flex-wrap:wrap;gap:6px 18px}
.nov-radio{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);cursor:pointer}
.nov-radio input{width:15px;height:15px;flex:0 0 auto;cursor:pointer}
.nov-prof-p{font-size:11.5px;font-weight:600;color:var(--ink-dim)}
/* Geen kost per uur bekend: dat moet opvallen, want de urenregels komen dan
   zonder prijs binnen. Nooit € 0,00 tonen. */
.nov-prof-p.leeg{color:var(--warn-ink)}
.nov-prof-h{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45}

.nov-waarsch{display:flex;gap:8px;padding:9px 11px;border-radius:var(--radius-sm);
  font-size:12px;line-height:1.45;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.nov-waarsch svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.nov-waarsch ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}

.nov-lijst{max-height:46vh;max-height:46dvh;overflow:auto;display:flex;flex-direction:column;gap:9px}
/* ⚠ `flex:0 0 auto` is hier geen opsmuk: een flexkind in een kolom met een
   begrensde hoogte KRIMPT standaard, dus zonder deze regel persen de groepen
   zichzelf plat i.p.v. de lijst te laten scrollen — en dan valt de onderregel
   van een regel ("tarief van de onderaannemer…") stil weg onder `overflow:hidden`. */
.nov-groep{flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-card);overflow:hidden}
.nov-groep-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 10px;
  padding:7px 11px;background:var(--bg-subtle);border-bottom:1px solid var(--line-2)}
.nov-groep-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--ink-dim)}
.nov-groep-m{font-size:11.5px;color:var(--muted)}
.nov-leeg{font-size:12px;color:var(--muted);padding:8px 11px}
/* Bron weggevallen (Onfact plat, Zenvoices niet gekoppeld): balk i.p.v. rijen —
   de andere groepen blijven gewoon bruikbaar. */
.nov-bronfout{display:flex;gap:7px;align-items:flex-start;margin:9px;padding:8px 10px;
  border-radius:var(--radius-sm);font-size:12px;line-height:1.45;
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.nov-bronfout svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px}

.nov-regel{display:grid;grid-template-columns:18px minmax(0,1fr) 52px 80px 82px auto 104px;
  gap:4px 7px;align-items:center;padding:7px 11px;border-bottom:1px solid var(--line-2)}
.nov-regel:last-child{border-bottom:0}
.nov-vink{width:16px;height:16px;cursor:pointer}
.nov-vink:disabled{cursor:not-allowed;opacity:.5}
.nov-oms{font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.nov-aantal{font-size:12px;color:var(--ink-dim);text-align:right;white-space:nowrap}
.nov-prijs{font-size:12.5px;padding:5px 7px;border-radius:8px;min-width:0}
.nov-bedrag{font-size:12px;color:var(--ink);text-align:right;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nov-regel .nov-zij{white-space:nowrap}
.nov-regel select{font-size:12px;padding:5px 6px;border-radius:8px;min-width:0}
.nov-sub{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;line-height:1.4}
.nov-sub:empty{display:none}
.nov-uitleg{color:var(--warn-ink)}
.nov-uitleg svg{width:12px;height:12px;vertical-align:-2px}
.nov-hint{color:var(--muted)}

.nov-som{font-size:12.5px;color:var(--ink);padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--bg-subtle);border:1px solid var(--line)}
.nov-som-n{color:var(--muted);font-size:11.5px}

@media(max-width:700px){
  /* Zeven kolommen passen niet op een telefoon: omschrijving boven, dan
     aantal · prijs · bedrag, dan zijde + rubriek, en de uitleg onderaan. */
  .nov-regel{grid-template-columns:18px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:5px 7px}
  .nov-vink{grid-column:1;grid-row:1}
  .nov-oms{grid-column:2 / -1;grid-row:1}
  .nov-aantal{grid-column:2;grid-row:2;text-align:left}
  .nov-prijs{grid-column:3;grid-row:2}
  .nov-bedrag{grid-column:4;grid-row:2}
  .nov-regel .nov-zij{grid-column:2;grid-row:3;justify-self:start}
  .nov-regel select{grid-column:3 / -1;grid-row:3}
  .nov-sub{grid-column:2 / -1;grid-row:4}
}

/* ── Leveranciersoffertes bij de nacalculatie (voorvoegsel nof) ────────────
   docs/plan-nacalc-offertes.md — het uploadvenster en het controlevenster
   (web/js/nacalc_offerte.js, nieuw) plus het lijstje "Ingelezen offertes" en
   de dubbeltelling-waarschuwing die in het bestaande overnamevenster
   verschijnt (web/js/nacalc.js). Zelfde variabelen en maten als hierboven
   bij .nc-*/.nov-* — geen nieuwe kleuren, licht en donker werken vanzelf. */

/* Uploadvenster */
.nof-intro{font-size:12.5px;color:var(--muted);line-height:1.6}
.nof-drop{border:1.5px dashed var(--line-input);border-radius:9px;padding:10px;background:var(--bg-subtle)}
.nof-files{margin-top:8px}
.nof-file{display:flex;align-items:center;gap:8px;font-size:12px}
.nof-file>*:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.nof-file>*:last-child{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
.nof-waarschuw{font-size:11.5px;color:var(--warn-ink);margin-top:6px}
.nof-optie{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.nof-optie input{width:16px;height:16px;flex:0 0 auto}
.nof-optie-h{font-size:11.5px;color:var(--ink-dim);line-height:1.5}

/* Voortgang & fout */
.nof-voortgang{display:flex;flex-direction:column}
.nof-prow{display:flex;gap:8px;align-items:baseline;font-size:12.5px;padding:3px 0;border-bottom:1px solid var(--steel-700)}
.nof-prow:last-child{border-bottom:0}
.nof-prow-naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nof-prow-status{font-size:11.5px;font-weight:600}
.nof-prow[data-status="wacht"] .nof-prow-status{color:var(--ink-dim)}
.nof-prow[data-status="bezig"] .nof-prow-status{color:var(--weld)}
.nof-prow[data-status="klaar"] .nof-prow-status{color:var(--ok-ink)}
.nof-prow[data-status="fout"] .nof-prow-status{color:var(--danger-ink)}
.nof-prow-fout{font-size:11px;color:var(--danger-ink);padding-bottom:3px}
.nof-fout{border:1px solid var(--danger-border);background:var(--danger-bg);border-radius:9px;padding:10px 12px;color:var(--danger-ink)}
.nof-fout svg{width:14px;height:14px;vertical-align:-2px}

/* Controlevenster */
.nof-kop{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;border-bottom:1px solid var(--line);
  padding-bottom:8px;margin-bottom:10px}
.nof-kop-t{font-size:13.5px;font-weight:700;color:var(--ink)}
.nof-kop-m{font-size:11.5px;color:var(--muted)}
.nof-waarsch{display:flex;gap:8px;padding:9px 11px;border-radius:var(--radius-sm);
  font-size:12px;line-height:1.45;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.nof-waarsch svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.nof-waarsch ul{margin:0;padding-left:16px}
.nof-waarsch li{font-size:11.5px;line-height:1.5}
.nof-rub{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-bottom:10px}
.nof-rub select{min-width:150px}
.nof-lijst{display:flex;flex-direction:column}
.nof-regel{display:grid;grid-template-columns:18px 1fr 74px 96px 92px;gap:8px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--steel-700)}
.nof-regel:last-child{border-bottom:0}
.nof-vink{width:16px;height:16px;cursor:pointer}
.nof-vink:disabled{cursor:not-allowed;opacity:.5}
.nof-oms{font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.nof-aantal{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink-dim)}
.nof-prijs{width:100%;font-size:12.5px;padding:5px 7px;border-radius:8px;min-width:0}
.nof-bedrag{font-family:var(--mono);font-size:12.5px;font-weight:600;text-align:right}
.nof-sub{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.nof-uitleg{font-size:11px;color:var(--warn-ink)}
.nof-uitleg svg{width:12px;height:12px;vertical-align:-2px}
.nof-hint{font-size:11px;color:var(--muted)}
.nof-leeg{font-size:12px;color:var(--muted);padding:8px 2px}
.nof-som{font-size:12.5px;padding-top:8px;border-top:1px solid var(--line);margin-top:6px}
.nof-som-n{font-size:11.5px;color:var(--muted)}

/* Lijstje "Ingelezen offertes" */
.nof-blok{margin-top:14px}
.nof-items{display:flex;flex-direction:column;gap:6px}
.nof-item{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-card);padding:7px 10px}
.nof-item-t{font-size:12.5px;font-weight:620;color:var(--ink);flex:1;min-width:0}
.nof-item-m{font-size:11.5px;color:var(--muted)}
.nof-item-acties{display:flex;gap:6px;flex:0 0 auto}
.nof-chip{font-size:10.5px;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--ink-dim)}

/* Dubbeltelling-waarschuwing, in het bestaande overnamevenster */
.nof-dubbel{border:1px solid var(--danger-border);background:var(--danger-bg);border-radius:9px;
  padding:9px 11px;margin-bottom:10px}
.nof-dubbel-kop{display:flex;gap:8px;font-size:12.5px;font-weight:620;color:var(--danger-ink)}
.nof-dubbel-kop svg{width:14px;height:14px;vertical-align:-2px}
.nof-dubbel-uitleg{font-size:11.5px;line-height:1.5;margin-top:4px}
.nof-dubbel-groep{margin-top:7px}
.nof-dubbel-vink{display:flex;gap:8px;align-items:center;font-size:12px;cursor:pointer}
.nof-dubbel-vink input{width:16px;height:16px;flex:0 0 auto}
.nof-dubbel-regels{font-size:11.5px;color:var(--ink-dim);margin:3px 0 0 24px}
.nof-dubbel-regels summary{cursor:pointer;font-size:11px;color:var(--muted)}

@media(max-width:700px){
  /* Vijf kolommen passen niet op een telefoon: vinkje + omschrijving boven,
     aantal/prijs/bedrag elk op hun eigen regel eronder. .nof-prijs naar 16px,
     anders zoomt iOS bij het aantikken in (zie de bestaande 16px-regels
     hierboven bij @media not all and (any-pointer:fine)). */
  .nof-regel{grid-template-columns:18px 1fr}
  .nof-aantal,.nof-prijs,.nof-bedrag{grid-column:2 / -1}
  .nof-sub{grid-column:1 / -1}
  .nof-prijs{font-size:16px}
}

/* ============================ Responsief ================================= */
@media(max-width:860px){
  .rail{display:none}
  .menu-btn{display:none}
  .col-hide{display:none}
  /* Onderaan ruimte voor de vaste onderbalk + de home-indicator; links/rechts
     de veilige zone respecteren (viewport-fit=cover laat de pagina anders
     onder de afgeronde hoeken lopen in liggende stand). */
  .view{padding:18px max(16px,env(safe-area-inset-left)) calc(84px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))}
  .form-2,.form-3{grid-template-columns:1fr}
  .mail-wrap{grid-template-columns:1fr;height:auto}
  .mail-list{max-height:46vh}
  .mail-read{min-height:60vh}
  /* Alle knoppen van de opmaakbalk moeten op één telefoonbreedte passen. */
  .me-bar{gap:2px}
  .settings-wrap{grid-template-columns:1fr}
  .settings-nav{flex-direction:row;flex-wrap:wrap;position:static}
  .sam-panel{width:calc(100vw - 24px);right:12px;bottom:calc(82px + env(safe-area-inset-bottom));height:calc(100dvh - 190px)}
  #samWidget{display:none}
  .board{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}
  /* Mobiel: 7 standen worden 4 rijen van 2 — smaller dan 2 kolommen wordt het
     cijfer onleesbaar klein, en auto-fit zou hier op één kolom uitkomen. */
  .pipeline{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
  /* De topbalk draagt op mobiel het zoeken en het vernieuwen; die mogen niet
     wegscrollen zodra je een lijst doorloopt. */
  .topbar{padding:12px 16px;position:sticky;top:0;z-index:55}
  .sam-cmdbar{max-width:none}
  .planbord .pb-grid{grid-template-columns:110px repeat(var(--pb-days),minmax(130px,1fr))}
  .vl-table thead th.vl-th-name,.vl-name-cell{width:120px}
  .pb-wrap{flex-direction:column}
  .pb-tray{
    flex:0 0 auto;width:100%;max-height:160px;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
    padding:6px 12px 11px;
  }
  .pb-tray-head{flex:1 1 100%}
  .pb-chip,.pb-tray-empty{margin:0}
  .pb-tray.pb-tray-closed{
    flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
    max-height:none;height:auto;padding:8px 12px;
  }
  .pb-tray.pb-tray-closed .pb-tray-vlabel{writing-mode:horizontal-tb;transform:none}

  /* Bottom-nav: vervangt de icoonrail op mobiel, SAM als verhoogde FAB */
  .bottomnav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:flex-end;justify-content:space-around;
    background:var(--bg-card);border-top:1px solid var(--line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(20,30,45,.06);
  }
  .bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0;
    background:none;border:none;color:var(--ink-dim);font:inherit;font-size:10px;padding:4px 2px;cursor:pointer;position:relative}
  .bn-item svg{width:21px;height:21px}
  .bn-item.active{color:var(--weld-deep)}
  .bn-item .ndot{position:absolute;top:0;right:22%;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--bg-card)}
  .bn-fab{flex:0 0 56px;width:56px;height:56px;border-radius:50%;margin-top:-14px;
    background:linear-gradient(180deg,#ffb020,var(--weld) 55%,var(--weld-deep));
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(255,122,24,.4);border:none;cursor:pointer}
  .bn-fab svg{width:24px;height:24px}
  .bn-fab.active{box-shadow:0 0 0 3px var(--weld-tint),0 8px 20px rgba(255,122,24,.45)}
  /* Meldingen hoorden hier achter de onderbalk (bottom:20px) — nu erboven. */
  .toast-stack{right:12px;left:12px;max-width:none;bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media(min-width:861px){
  .bottomnav{display:none}
}
@media(max-width:600px){
  .topbar{padding:10px 14px;gap:8px}
  .topbar-title h2{font-size:16px}
  .crumb{display:none}
  .clock{display:none}
  #refreshBtn span,#paletteBtn span,#paletteBtn .pal-kbd{display:none}
  .hud{gap:10px 14px;padding:9px 12px;font-size:11px}
}

/* ================== Inklapbare filterbalk (ui.mobielFilters) ============== */
/* Op de desktop bestaat het omhulsel enkel in de DOM: `display:contents` laat
   de filters gewoon flex-items van .toolbar blijven — identieke opmaak. */
.tb-filters{display:contents}
.tb-toggle{display:none}
.tb-n{display:none}
@media(max-width:860px){
  .tb-toggle{display:inline-flex}
  .tb-toggle .tb-n{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--weld);color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center}
  .tb-toggle .tb-n.aan{display:inline-flex}
  .tb-filters{display:none}
  .tb-filters.open{display:flex;flex-wrap:wrap;gap:10px;width:100%}
  .tb-filters.open > *{flex:1 1 160px;min-width:0}
  .tb-filters.open .search{flex:1 1 100%}
}

/* =============== Tabellen als kaarten op een smal scherm ================== */
/* Zie ui.mobielTabellen(): die zet data-label per cel en pas dán de klasse
   `mob-cards`. Zonder labels blijft de tabel dus gewoon een tabel. */
@media(max-width:700px){
  table.data.mob-cards,
  table.data.mob-cards tbody,
  table.data.mob-cards tfoot,
  table.data.mob-cards tr,
  table.data.mob-cards td{display:block;width:auto}
  table.data.mob-cards thead{display:none}
  table.data.mob-cards tfoot tr{border-top:2px solid var(--line);background:var(--bg-subtle)}
  /* Kolommen die op een smal scherm al verborgen waren (.col-hide) én cellen
     zonder inhoud blijven weg — anders wint de blokweergave hierboven van
     `.col-hide{display:none}` en wordt de kaart onnodig lang. */
  table.data.mob-cards .col-hide,
  table.data.mob-cards td.mob-leeg{display:none}
  table.data.mob-cards{font-size:13px}
  table.data.mob-cards tbody tr{padding:7px 5px;border-bottom:1px solid var(--line)}
  table.data.mob-cards tbody tr:last-child{border-bottom:none}
  table.data.mob-cards td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:3px 8px;border-bottom:none;text-align:right;white-space:normal;
  }
  table.data.mob-cards td::before{
    content:attr(data-label);flex:0 0 34%;text-align:left;
    font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);
  }
  /* Cellen zonder kopje (actiekolommen) tonen enkel hun inhoud, rechts. */
  table.data.mob-cards td:not([data-label]){justify-content:flex-end}
  table.data.mob-cards td:not([data-label])::before{content:none}
  table.data.mob-cards tr.mob-vol td{display:block;text-align:center}
  table.data.mob-cards tr.mob-vol td::before{content:none}
  /* Vaste kolombreedtes en interne scrollvensters slaan nergens meer op zodra
     de rijen kaarten zijn — anders scrol je in een venster ín de pagina. */
  .op-tabel table.data.mob-cards,.ctl-tabel table.data.mob-cards{table-layout:auto}
  .op-tabel .tablewrap,.ctl-tabel .tablewrap{max-height:none}
}

/* ============================ Blad (sheet) =============================== */
/* Van onderaf opkomend paneel (ui.sheet) — o.a. het "Meer"-menu van de
   onderbalk. Hoogte in dvh, want met de wegschuivende adresbalk van Safari
   zou 100vh de onderste knoppen onbereikbaar maken. */
.sheet-bg{position:fixed;inset:0;background:rgba(20,30,45,.4);backdrop-filter:blur(2px);z-index:85;
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.sheet-bg.open{opacity:1}
.sheet{
  width:100%;max-width:520px;background:var(--bg-card);
  border:1px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0;
  box-shadow:var(--shadow-modal);
  max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(100%);transition:transform .2s ease-out;
}
.sheet-bg.open .sheet{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 10px;border-bottom:1px solid var(--line-2)}
.sheet-head h3{font-size:15px;font-weight:700;color:var(--ink)}
.sheet-body{overflow-y:auto;padding:10px 12px 16px;-webkit-overflow-scrolling:touch}
.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet-item{display:flex;align-items:center;gap:10px;padding:13px 12px;text-decoration:none;
  border:1px solid var(--line);border-radius:10px;background:var(--bg-card);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:620;text-align:left;cursor:pointer;min-width:0}
.sheet-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-item svg{width:19px;height:19px;color:var(--muted);flex:0 0 19px}
.sheet-item.active{border-color:var(--weld-light);background:var(--weld-hover);color:var(--weld-tint-ink)}
.sheet-item.active svg{color:var(--weld-deep)}
.sheet-item.wide{grid-column:1/-1}
.sheet-sec{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:14px 4px 7px}
.sheet-user{padding:2px 4px 6px}
.sheet-user b{font-size:14px;color:var(--ink)}
.sheet-user div{font-size:12px;color:var(--muted);margin-top:2px}

/* ===================== Touchbediening (telefoon/tablet) ==================== */
/* `not all and (any-pointer:fine)` = er is nergens een muis of trackpad, dus
   ook geen fysiek toetsenbord om Esc/Ctrl+K mee te bedienen. Bewust NIET
   `pointer:coarse`: een laptop met aanraakscherm heeft die wél en moet de
   desktopbediening houden. De ouderwetse `not all and (...)`-schrijfwijze is
   gekozen omdat `not (any-pointer:fine)` pas in nieuwe browsers werkt. */
@media not all and (any-pointer:fine){
  /* 1 · Toetsenbordtaal weg: toetshints en de voetregel van het zoekpalet
     beloven toetsen die er niet zijn (de ✕-knop in palette.js neemt het over). */
  .pal-kbd,.pal-foot,.sleep-hint{display:none!important}
  .pal-input .x{display:inline-flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 auto}
  .pal-row{padding:13px 11px;gap:12px}
  .pal-list{max-height:60vh;max-height:60dvh}

  /* 2 · iOS zoomt bij het aantikken van een veld met een lettergrootte onder
     16px in — en zoomt daarna niet vanzelf terug. Elk invoerveld gaat hier dus
     naar 16px. De specifiekere regels moeten stuk voor stuk mee, anders winnen
     die van de algemene. */
  .field,input[type=text],input[type=password],input[type=date],input[type=time],
  input[type=email],input[type=number],select,textarea,
  .pal-input input,.sam-cmdbar input,.hud-year select,.pill-select,
  .task-card select,.task-card input[type=date],.tpl-row input,.tpl-row select,
  .bulk-bar select,.bulk-bar input,.intern-tarief input,.onderhoud-po-input,
  .onderhoud-tmap-select,.vlp-row input,.vlp-row select,.vs-row input,.vs-row select,
  .vk-projectbar select,
  .nov-prijs,.nov-regel select,.tk-pct-veld,.tk-mat-naam,.tk-mat-prijs,
  .nc-regel input,.nc-notitie textarea,
  .uren-tijdvak input[type=time],.se-km input,
  .fc-periode input[type=date]{font-size:16px}

  /* 3 · Tikdoelen: een vinger heeft ±44px nodig. */
  .btn{padding:11px 16px}
  .btn-sm{padding:9px 12px}
  .icon-btn{width:40px;height:40px}
  .icon-btn svg{width:17px;height:17px}
  .seg button{padding:11px 14px}
  input[type=checkbox]{width:20px;height:20px}
  .x{font-size:26px;padding:8px}
  .mt-done{width:36px;height:36px}
}
@media (any-pointer:fine){
  .touch-hint{display:none}
}

/* ── Gefotografeerde documenten in de projectfiche (voorvoegsel df) ─────────
   docs/plan-mobiel-documenten.md — het blok in de tab Overzicht plus het
   upload-, lees- en verwijdervenster (web/js/documentfoto.js). Enkel bestaande
   kleurvariabelen (--ok/--warn/--danger); licht en donker werken vanzelf. */
.df-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.df-hint{font-size:11.5px;color:var(--muted);line-height:1.5;flex:1;min-width:160px}
.df-wrap{overflow-x:auto}
.df-tabel,.df-tabel2{font-size:12.5px;width:100%}
.df-sub{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.df-melding{max-width:230px}
.df-melding span{overflow-wrap:anywhere}
.df-notitie{color:var(--ink-dim)}
.df-knoppen{white-space:nowrap;text-align:right}
.df-knoppen>*{vertical-align:middle}
.df-knoppen>*+*{margin-left:5px}
.df-wd{font-size:11px;color:var(--muted);white-space:nowrap}
/* Statuschips: dezelfde tinten als elders in de app (.tag/.mg-chip). */
.df-chip{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;
  background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line);white-space:normal}
.df-neutraal{background:var(--bg-subtle);color:var(--ink-dim);border-color:var(--line)}
.df-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.df-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.df-fout{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
/* Waarschuwing (bv. een afwijkend projectnummer): amber regel ónder de rij,
   blokkeert niets. Als eigen tabelrij met colspan, zodat ui.mobielTabellen ze
   op een telefoon als volle regel toont (.mob-vol). */
.df-wrij>td{padding-top:0!important}
.df-warnregel{display:inline-flex;gap:6px;align-items:flex-start;font-size:11.5px;color:var(--warn-ink)}
.df-warnregel svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px}
/* Uploadvenster */
.df-intro{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.df-typehint{font-size:11.5px;color:var(--ink-dim);margin:-4px 0 10px}
.df-drop{border:1.5px dashed var(--line-input);border-radius:9px;padding:10px;background:var(--bg-subtle)}
.df-files{margin-top:8px}
.df-file{display:flex;align-items:center;gap:8px;font-size:12px}
.df-file>*:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.df-file>*:last-child{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
.df-file svg{width:13px;height:13px;vertical-align:-2px}
.df-waarschuw{font-size:11.5px;color:var(--warn-ink);margin-top:6px}
.df-hint2{font-size:11.5px;color:var(--ink-dim);line-height:1.5;margin-top:8px}
/* Leesvenster */
.df-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px;margin-bottom:12px}
.df-meta-k{color:var(--muted);white-space:nowrap}
.df-meta-v{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.df-pad{font-size:11.5px;color:var(--ink-dim)}
.df-melding-groot{font-size:13px;line-height:1.6;margin-bottom:10px}
.df-waarschuwdoos{display:flex;gap:8px;padding:9px 11px;border-radius:var(--radius-sm);margin-bottom:12px;
  font-size:12px;line-height:1.45;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}
.df-waarschuwdoos svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.df-subtitel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:14px 0 6px}
.df-vgl-kop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:11.5px;margin:10px 0 6px}
.df-rij-afwijking td{background:var(--warn-bg)}
.df-rij-onbekend td{color:var(--ink-dim)}
.df-leeg{font-size:12.5px;color:var(--muted);padding:6px 2px}
.df-onzeker ul{margin:0;padding-left:18px}
.df-onzeker li{font-size:12px;line-height:1.5;color:var(--warn-ink)}
@media(max-width:700px){
  /* Kaartweergave: de tabel is dan geen tabel meer, dus vaste breedtes en
     rechts uitgelijnde knoppenkolommen slaan nergens meer op. */
  .df-melding{max-width:none}
  .df-knoppen{white-space:normal;text-align:left}
  .df-meta{grid-template-columns:1fr;gap:2px 0}
  .df-meta-v{margin-bottom:6px}
}

/* ── Adres-suggestielijst (docs/plan-mail-adresboek.md, contract H) ──────────
   Eén lijst voor élk e-mailveld van de app (mailvenster, verzendvensters,
   weekrapport). Gemodelleerd naar .uren-suggest hierboven — zelfde plaatsing en
   z-index (20, relatief binnen de modal, die zelf al de bovenste laag is) —
   maar met een tweede regel: naam + adres + bron-pil op één lijn, de context
   (klant, werf, "laatst door …") op een eigen regel eronder.
   De pil-tekst komt kant-en-klaar uit het antwoord (`label`); er staat hier
   bewust geen tweede vertaaltabel. */
.adr-suggest{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:20;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);max-height:260px;overflow-y:auto}
.adr-item{padding:7px 12px;cursor:pointer;border-bottom:1px solid var(--line-2);
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.adr-item:last-child{border-bottom:none}
.adr-item:hover,.adr-item.is-actief{background:var(--weld-hover)}
.adr-naam{font-size:12.5px;font-weight:600;color:var(--ink)}
.adr-adres{font-size:11.5px;color:var(--muted)}
.adr-bron{margin-left:auto;font-size:10.5px;color:var(--weld-tint-ink);background:var(--weld-tint);
  border-radius:999px;padding:1px 7px}
.adr-context{flex-basis:100%;font-size:11px;color:var(--muted)}
/* Melding onder de lijst — vandaag enkel "koppel je postbus opnieuw" wanneer
   Outlook-suggesties extra toestemming vragen. Nooit een fout-toast: je mail
   werkt gewoon, er zijn enkel geen Outlook-namen bij. */
.adr-melding{padding:7px 12px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line-2)}
/* Tikdoel op een toestel zonder muis: 7px padding geeft ±30px hoog, te weinig
   voor een vinger. ⚠ Deze regel staat hier en NIET in het centrale touch-blok
   hierboven: dat blok komt eerder in het bestand, en bij gelijke specificiteit
   wint de laatste regel — de basisregel hierboven zou 'm dus overschrijven
   (in de browser gemeten: padding bleef 7px). De velden zelf hebben dit niet
   nodig, die staan als input[type=text]/[type=email] al in de 16px-lijst. */
@media not all and (any-pointer:fine){
  .adr-item{padding:11px 12px}
}

/* ==================== CRM (deals, docs/plan-crm.md) ==================== */
/* Alle klassen hieronder liggen BOVENOP bestaande klassen uit dit bestand —
   `.crm-board` op `.board`, `.crm-col` op `.board-group`, `.crm-card` op
   `.task-card`, `.crm-rij` op `.today-row`, `.crm-log` op `.today-list`,
   `.crm-tabs` op `.seg`. Ze voegen enkel toe; geen enkele bestaande regel
   is hier gewijzigd. Kleuren komen uitsluitend uit de variabelen bovenaan. */

/* Het bord: vier fasekolommen + de kolom Afgesloten, samen even breed i.p.v.
   de vaste 312px van het planningsbord — met vier fases past alles zo op één
   scherm zonder horizontaal te slepen. */
.crm-board{grid-auto-columns:minmax(230px,1fr)}
/* Een kolom is een sleepdoel. .crm-dragover licht op zodra een kaart erboven
   hangt, zodat je ziet wáár ze zal landen. */
.crm-col{border-radius:var(--radius-sm);transition:background .12s,box-shadow .12s}
.crm-col.crm-dragover{background:var(--bg-subtle);box-shadow:inset 0 0 0 2px var(--line-input);
  outline:2px dashed var(--faint);outline-offset:-2px}

/* De dealkaart. De linkerrand krijgt de fasekleur via --accent (zie .task-card). */
.crm-card{cursor:grab;user-select:none}
.crm-card:active{cursor:grabbing}
.crm-card.dragging{opacity:.5}
/* Rotting: te lang stil. Oranje rand — geen rode, want er is niets kapot. */
.crm-card.rot{border-color:var(--warn-border);box-shadow:inset 0 0 0 1px var(--warn-border)}
/* Geselecteerd (toetsenbordfocus of aangeklikt) — dezelfde taal als .active. */
.crm-card.sel{border-color:var(--weld);box-shadow:0 0 0 2px var(--weld-glow)}

/* Initialen van de eigenaar, rechtsboven op de kaart. */
.crm-av{width:24px;height:24px;border-radius:50%;background:var(--steel);color:#fff;
  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px}

/* De regel "→ volgende actie" onderaan de kaart. */
.crm-actie{font-size:11.5px;color:var(--ink-dim);display:flex;align-items:center;gap:6px;min-width:0}
.crm-actie .crm-actie-pijl{opacity:.7;flex:0 0 auto}

/* Het lint op de kaart: een signaal uit Onfact dat om een beslissing vraagt
   (offerte aanvaard) of waarschuwt (offerte vervallen). */
.crm-lint{font-size:11px;font-weight:600;border-radius:6px;padding:4px 8px;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.crm-lint.aanvaard{color:var(--ok-ink);background:var(--ok-bg);border:1px solid var(--ok-border)}
.crm-lint.vervallen{color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-border)}

/* Het samenvattingspaneel in de kolom Afgesloten (gewonnen/verloren, 12 mnd). */
.crm-afgesloten{padding:12px 13px;display:flex;flex-direction:column;gap:8px}
.crm-afgesloten .crm-af-rij{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.crm-afgesloten .crm-af-voet{font-size:11.5px;color:var(--muted)}

/* Een rij op de tab Vandaag: titel + meta links, knoppen rechts. Klikken
   gebeurt op de knoppen, niet op de rij zelf — vandaar cursor:default. */
.crm-rij{flex-wrap:wrap;gap:10px 14px;padding:11px 4px 11px 14px;cursor:default}
.crm-rij .crm-rij-tekst{flex:1 1 260px;min-width:0}
.crm-rij .crm-rij-meta{font-size:12px;color:var(--ink-dim);margin-top:2px}
.crm-rij .crm-rij-acties{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap}

/* Het actieblok in de deal-drawer: rood wanneer de actie te laat is, amber
   wanneer ze vandaag valt, neutraal daarbuiten. */
.crm-actiepaneel .panel-body{padding:12px 14px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap}
.crm-actiepaneel.te_laat{border-color:var(--danger-border);background:var(--danger-bg)}
.crm-actiepaneel.te_laat .crm-actiepaneel-wanneer{color:var(--danger-ink-2)}
.crm-actiepaneel.vandaag{border-color:var(--warn-border);background:var(--warn-bg)}
.crm-actiepaneel.vandaag .crm-actiepaneel-wanneer{color:var(--warn-ink)}
.crm-actiepaneel .crm-actiepaneel-titel{font-weight:600;font-size:13.5px}
.crm-actiepaneel .crm-actiepaneel-wanneer{font-size:12px;color:var(--ink-dim)}

/* Logboek in de drawer (notities, fasewissels, mails). */
.crm-log .crm-log-rij{cursor:default}
.crm-log .crm-log-rij .tr-title{white-space:normal}

/* Fasebadge (drawer + lijsten); de kleur van de fase komt via --accent mee. */
.crm-fase-badge{background:var(--bg-subtle);color:var(--ink-dim);border-color:var(--line)}
.crm-fase-badge .b-dot{background:var(--accent,var(--steel))}

/* Verliesredenen, laatste 12 maanden. */
.crm-verlies-tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.crm-verlies-tabel th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
.crm-verlies-tabel td{padding:7px 8px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.crm-verlies-tabel tr:last-child td{border-bottom:none}
.crm-verlies-tabel .right{text-align:right;font-family:var(--mono)}

/* De uitlegkop boven de inbox ("x offertes staan nog niet op het bord"). */
.crm-inbox-kop .panel-body{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap}
.crm-inbox-kop .crm-inbox-tekst{font-size:13px;color:var(--ink-dim)}
.crm-inbox-kop .crm-inbox-tekst b{color:var(--ink)}
.crm-inbox-kop .crm-inbox-keuze{display:flex;gap:8px;align-items:center}

/* De tabs Bord · Vandaag · Inbox; de telbolletjes zijn `.vl-count`. */
.crm-tabs button{display:inline-flex;align-items:center}

@media (max-width:700px){
  /* Op een telefoon staan de kolommen onder elkaar i.p.v. naast elkaar, en
     springen de knoppen van een Vandaag-rij naar een eigen regel. */
  .crm-board{grid-auto-flow:row;grid-auto-columns:auto}
  .crm-rij .crm-rij-acties{flex-basis:100%}
}

/* ============ Inkooporders (docs/plan-bijlagen-inkooporders.md §2) ======== */
/* De drieweg-blik per order: besteld · geleverd · gefactureerd. Uit = grijs
   (nog niet gebeurd), aan = groen, afwijkend bedrag = oranje. Bewust géén
   rood: een verschil tussen besteld en gefactureerd vraagt om een blik, het is
   geen bewezen fout — en er wordt nooit automatisch goedgekeurd. */
.io-chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.io-chip{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10.5px;
  font-weight:600;white-space:nowrap;background:var(--bg-subtle);color:var(--faint);
  border:1px solid var(--line)}
.io-chip.on{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.io-chip.afwijk{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
/* De PDF ligt nog niet op de NAS (nas == "wacht") — best effort, de scheduler
   herkanst. Zeggen, nooit stil laten. */
.io-nas{font-size:10.5px;line-height:1.3;color:var(--muted);margin-top:3px;max-width:190px}
.io-afgeleid{font-size:10.5px;color:var(--muted);margin-top:3px}
.io-wd{font-size:10.5px;margin-top:3px}
.io-wd-wacht{color:var(--warn-ink)}
.io-wd-fout{color:var(--danger-ink);font-weight:560}
.io-acties{align-items:center;flex-wrap:nowrap}
.io-statuskeuze{padding:4px 7px;font-size:11.5px;width:auto;min-width:104px}
/* Eén bestelregel in het aanmaakvenster: omschrijving · aantal · eenheid ·
   prijs · bedrag · wissen. */
.io-regel{display:grid;grid-template-columns:minmax(0,2.6fr) .7fr .8fr .8fr 92px auto;
  gap:6px;align-items:center;margin-bottom:6px}
.io-regel .io-rbedrag{font-size:12px;color:var(--ink-dim);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.io-regelvoet{display:flex;align-items:center;gap:10px;margin-top:6px}
.io-totaal{font-size:13px;color:var(--ink-dim)}
.io-totaal b{font-family:var(--mono);font-size:14px;color:var(--ink)}
.io-bron{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-2);font-size:12.5px}
.io-bijlage{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg-subtle);font-size:12.5px}
.io-bijlage svg{flex:none;width:15px;height:15px;color:var(--ink-dim)}

@media (max-width:700px){
  /* Op een telefoon past de zesdelige regelrooster niet naast elkaar: twee
     kolommen, met de omschrijving over de volle breedte. */
  .io-regel{grid-template-columns:1fr 1fr 92px auto}
  .io-regel>[data-rf="omschrijving"]{grid-column:1/-1}
  .io-nas{max-width:none}
}

/* ── Startpagina (docs/plan-startpagina.md) ─────────────────────────────── */
/* Eén raster van drie kolommen; de brede blokken (brief, prikbord) overspannen
   er twee. De volgorde ligt in de DOM (de gebruiker kiest ze in "Aanpassen"),
   niet in CSS. Onder 720 px wordt alles één kolom. */
.start-kop{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px}
.start-groet{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.start-datum{font-size:13px;margin-top:2px}
.start-kop-acties{display:flex;gap:8px;flex-wrap:wrap}
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.start-breed{grid-column:span 2}
/* Het to-do-blok is het hoogste blok: het overspant twee rijen, zodat het prikbord
   (twee kolommen breed) ernaast meteen onder taken en deals komt, i.p.v. onder de
   volle hoogte van de to-do-lijst (2026-11-06). */
.start-blok[data-blok="todo"]{grid-row:span 2}
/* ⚠ Zonder min-width:0 krijgt een rasteritem de MIN-CONTENT van zijn inhoud als
   ondergrens: één lang woord zonder spaties (een to-do, een brieftekst) rekt de
   hele kolom uit en de pagina scrolt horizontaal. Zelfde reden als de
   minmax(0,1fr) hierboven én in de mobiele regel onderaan. */
.start-blok{min-width:0}
.start-blok .panel-body{padding:14px 16px;min-width:0}
.start-open{font-size:12.5px;color:var(--weld);white-space:nowrap}
.start-open:hover{text-decoration:underline}

/* Brief: hergebruikt de .brief-card van het dashboard, zonder eigen kleuren. */
.start-brief{padding:16px 18px;min-width:0}
.start-brief-text{overflow-wrap:anywhere;word-break:break-word}
.start-brief-meta{color:rgba(255,255,255,.7);font-size:12px;align-self:center}

/* Snelle links: tegels met het route-icoon. */
.start-tegels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.start-tegel-link{display:flex;align-items:center;gap:9px;padding:10px 12px;
  border:1px solid var(--line-input);border-radius:10px;background:var(--bg-card);
  color:var(--ink);font-size:13px;font-weight:600}
.start-tegel-link:hover{border-color:var(--weld);background:var(--bg-subtle)}
.start-tegel-link svg{flex:none;color:var(--ink-dim)}
.start-tegel-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Rijen (taken, deals). */
.start-rij{display:flex;align-items:center;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--line-2);font-size:13px;cursor:pointer}
.start-rij:last-child{border-bottom:0}
.start-rij:hover{background:var(--bg-subtle)}
.start-rij-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  overflow-wrap:anywhere}
.start-groep+.start-groep{margin-top:8px}
.start-groep-kop{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* To-do's. */
.start-todo-form{display:flex;gap:8px;margin-bottom:10px}
.start-todo-form #stTodoInput{flex:1;min-width:0}
/* Het datumveld krijgt van `input[type=date]` width:100% en nam als flex-item de hele
   rij: het invulveld hield 4 px over (cyclus 59 R3). Compact houden. */
.start-todo-form #stTodoDatum{flex:none;width:auto}
/* De lijst krijgt een eigen schuifbalk. Zonder grens maakt een lange to-do van het
   lasdossier (label, tekst, vak "Wat moet je doen?") de hele rij van het raster
   hoog, en zakt het prikbord eronder ver weg (2026-11-06). */
.start-todo-lijst{max-height:380px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* Een rij is geen label: enkel het vinkvak vinkt af. De tekst is meerregelig, maar
   houdt overflow-wrap:anywhere + min-width:0 (250 tekens zonder spatie op 390 px). */
.start-todo{display:flex;align-items:flex-start;gap:9px;padding:8px 2px;
  border-bottom:1px solid var(--line-2);font-size:13px}
.start-todo:last-child{border-bottom:0}
.start-todo .st-todo-klaar{margin-top:3px;flex:none;cursor:pointer}
.start-todo-inhoud{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.start-todo-tekst{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;
  color:inherit;text-decoration:none;line-height:1.45}
a.start-todo-tekst:hover{text-decoration:underline}
.start-todo-kop{font-weight:700}
.start-todo-bron{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}
.start-todo-doe{background:var(--bg-subtle);border:1px solid var(--line-2);border-left:3px solid var(--weld);
  border-radius:6px;padding:6px 8px;font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.start-todo-vanzelf{font-size:11.5px;color:var(--ink-dim)}
.start-todo-open{align-self:flex-start}
.start-todo-deadline{white-space:nowrap}
.start-todo .st-todo-del{flex:none}
.start-todo.klaar .start-todo-tekst{text-decoration:line-through;color:var(--muted)}

/* Prikbord. */
.start-prik-voet{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:8px 0 14px}
.start-prik-item{padding:9px 0;border-bottom:1px solid var(--line-2)}
.start-prik-item:last-child{border-bottom:0}
.start-prik-kop{display:flex;align-items:center;gap:9px;font-size:12.5px}
.start-prik-kop .icon-btn{margin-left:auto}
.start-prik-tekst{font-size:13.5px;line-height:1.55;margin-top:3px;word-break:break-word;
  overflow-wrap:anywhere;min-width:0}

/* De waarschuwing onder "Mijn taken" (naam-terugval, geen koppeling). */
.start-waarschuwing{margin-top:10px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--warn-border);background:var(--warn-bg);
  color:var(--warn-ink);font-size:12.5px}

/* Tegels met één groot getal (uren, mail, verlof). */
.start-tegel .start-getal{font-size:30px;font-weight:800;font-family:var(--mono);color:var(--ink)}
.start-tegel .start-onder{font-size:12.5px;margin-top:2px}
.start-tegel .start-open{display:inline-block;margin-top:10px}

/* Het venster "Startpagina aanpassen". */
.start-modal-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.start-modal-kop{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.start-blokrij{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:13px}
.start-blokrij label{flex:1;display:flex;align-items:center;gap:8px;cursor:pointer}
.start-links-raster{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.start-linkkeuze{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.start-linkkeuze svg{flex:none;width:15px;height:15px;color:var(--ink-dim)}
.start-linkkeuze span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start-max{grid-column:1/-1;font-size:12px}

@media (max-width:720px){
  /* ⚠ `1fr` is `minmax(auto,1fr)`: de auto-ondergrens laat één lang woord de
     enige kolom breder maken dan het scherm (gemeten: 2.925 px op 390 px). */
  .start-grid{grid-template-columns:minmax(0,1fr)}
  .start-breed{grid-column:auto}
  .start-blok[data-blok="todo"]{grid-row:auto}
  .start-modal-kolommen{grid-template-columns:1fr}
}

/* Personeel (docs/plan-personeel-aanmaken.md) — Instellingen › Personeel en de
   vensters "Nieuwe medewerker" en "Bewerken" (web/js/views/personeel.js). */
.pers-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pers-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-dim);margin-bottom:8px;cursor:pointer}
.pers-k{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;vertical-align:middle;flex:none}
.pers-k.ja{background:var(--ok-bg);color:var(--ok)}
.pers-k.nee{background:var(--bg-subtle);color:var(--faint)}
.pers-k.fout{background:var(--danger-bg);color:var(--danger)}
/* Onfact, login en verlof zijn extra's: een grijs vinkje, geen groen. */
.pers-k.extra{background:var(--bg-subtle);color:var(--ink-dim)}
.pers-fout{color:var(--danger);font-weight:600;cursor:help;white-space:nowrap}
.pers-acties{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.pers-tabel tr.pers-uit td{color:var(--muted)}
.pers-tabel tr.pers-nieuw td{background:var(--weld-tint)}
.pers-hint{background:var(--bg-subtle);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;
  font-size:12.5px;color:var(--ink-dim);margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pers-zonder-item{display:inline-flex;gap:6px;align-items:center}
.pers-zonder-fout{font-size:12.5px;margin-top:10px}
/* Het venster: stappenbalk, banden, samenvatting, resultaat. */
.pers-stepper{display:flex;margin:-4px 0 14px;font-size:12px}
.pers-stepper div{flex:1;text-align:center;padding-bottom:8px;border-bottom:3px solid var(--line);color:var(--muted)}
.pers-stepper div.on{color:var(--ink);font-weight:600;border-color:var(--weld)}
.pers-stepper div.done{color:var(--ok);border-color:var(--ok)}
.pers-stepper div.skip:not(.on){color:var(--faint);border-color:var(--line-2)}
.pers-paneel{display:grid;gap:12px}
.pers-twee{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pers-seg{align-self:flex-start;flex-wrap:wrap}
.pers-band{border-radius:8px;padding:8px 10px;font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--bg-subtle);color:var(--ink-dim)}
.pers-band.ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-ink)}
.pers-band.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-ink)}
.pers-band.danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-ink)}
.pers-band.info{background:var(--link-bg);border-color:transparent;color:var(--link)}
.pers-band .btn{margin-left:auto}
.pers-band-sub{font-weight:400}
.pers-keuze{display:grid;gap:6px;font-size:13px}
.pers-keuze label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;cursor:pointer}
.pers-som{display:grid;grid-template-columns:120px 1fr;gap:4px 10px;font-size:13px;margin:0}
.pers-som dt{color:var(--muted)}
.pers-som dd{margin:0}
.pers-extra{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
.pers-extra summary{cursor:pointer;color:var(--ink-dim);font-weight:600}
.pers-extra label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;color:var(--ink-dim);cursor:pointer}
.pers-extra-veld{display:grid;gap:4px;margin:6px 0 0 24px}
.pers-extra-al{display:flex;gap:8px;align-items:center;margin-top:8px;color:var(--muted)}
.pers-res{display:grid;gap:6px}
.pers-res-regel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.pers-res-regel.fout{border-color:var(--danger-border);background:var(--danger-bg)}
.pers-res-tekst{flex:1 1 200px;min-width:0}
.pers-res-tag{color:var(--muted);font-size:11.5px;margin-left:auto}
.pers-ww{margin-top:10px;display:grid;gap:6px;padding:10px;border:1px solid var(--warn-border);background:var(--warn-bg);border-radius:8px;font-size:13px}
.pers-ww-code{font-size:15px;padding:6px 10px;background:var(--bg-card);border:1px solid var(--line);border-radius:6px;user-select:all;word-break:break-all}
/* .btn en .pers-twee zetten zelf display; zonder deze regel wint dat van [hidden]. */
.pers-modal .btn[hidden],.pers-paneel[hidden],.pers-twee[hidden],.pers-extra-veld[hidden]{display:none}
.pers-modal .modal-foot .pers-terug{margin-right:auto}
@media (max-width:560px){
  .pers-twee{grid-template-columns:1fr}
  .pers-som{grid-template-columns:1fr}
  .pers-som dd{margin-bottom:6px}
}

/* ── VGM-registraties (docs/plan-vgm-mobiel.md) ──────────────────────────────
   Kantoor: het blok "MOS-meldingen" in de projectfiche (tab VGM) en
   "Meldingen zonder project" in Instellingen › VGM-documenten. Eén rijvorm
   (web/js/vgm_meldingen.js); de chips volgen de kleuren van .tag/.mg-chip. */
.vgm-reg-blok{margin-top:4px}
.vgm-reg-lijst{border:1px solid var(--line);border-radius:10px;background:var(--bg-card);overflow:hidden}
.vgm-reg-rij{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.vgm-reg-rij:last-child{border-bottom:none}
.vgm-reg-rij .btn{flex:0 0 auto}
.vgm-reg-main{min-width:0;flex:1}
.vgm-reg-titel{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink)}
.vgm-reg-nr{font-weight:650}
.vgm-reg-omschr{font-size:12.5px;color:var(--ink-dim);margin-top:2px;overflow-wrap:anywhere}
.vgm-reg-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.vgm-reg-pdf{font-weight:600}
.vgm-reg-ernst,.vgm-reg-status{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:600;
  background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line);white-space:nowrap}
.vgm-reg-ernst.midden{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.vgm-reg-ernst.hoog{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.vgm-reg-status.nieuw{background:var(--link-bg);color:var(--link);border-color:transparent}
.vgm-reg-status.in_behandeling{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.vgm-reg-status.afgesloten{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.vgm-reg-waarschuwing,.vgm-reg-fout{display:flex;align-items:flex-start;gap:6px;margin-top:5px;font-size:12px;line-height:1.45}
.vgm-reg-waarschuwing{color:var(--warn-ink)}
.vgm-reg-fout{color:var(--danger-ink);padding:8px 10px;border:1px solid var(--danger-border);background:var(--danger-bg);border-radius:8px}
.vgm-reg-waarschuwing svg,.vgm-reg-fout svg{width:13px;height:13px;flex:0 0 13px;margin-top:2px}
.vgm-reg-leeg{font-size:13px;padding:6px 2px}
.vgm-reg-teller{color:var(--ink-dim);font-weight:600}
.vgm-reg-samenvatting{display:grid;gap:4px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg-subtle);font-size:13px}
.vgm-reg-veld{display:grid;grid-template-columns:110px 1fr;gap:8px}
.vgm-reg-veld .k{color:var(--muted)}
.vgm-reg-veld .v{white-space:pre-wrap;overflow-wrap:anywhere}
/* Toolboxen en werkplekinspecties (cyclus 33, fase 2/3): de kop met
   "+ Nieuwe toolbox", de chips "Getekend (x / y)" en "<n> NOK open", het
   venster "Nieuwe toolbox (Form 19)" en "NOK-punten afvinken". */
.vgm-reg-kop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vgm-reg-kop .section-title{flex:1}
.vgm-reg-getekend,.vgm-reg-nok{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:600;
  background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line);white-space:nowrap}
.vgm-reg-getekend.vol,.vgm-reg-nok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.vgm-reg-nok.open{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.vgm-tb-twee{display:grid;grid-template-columns:160px 1fr;gap:12px}
.vgm-tb-vast{font-size:12.5px;color:var(--ink-dim);padding:7px 10px;margin-bottom:6px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg-subtle)}
.vgm-tb-vast .k{color:var(--muted);margin-bottom:2px}
.vgm-tb-vast ol{margin:0;padding-left:18px}
.vgm-tb-iedereen{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;margin:4px 0 2px;cursor:pointer}
.vgm-tb-iedereen input{margin-top:3px;flex:0 0 auto}
.vgm-tb-fout[hidden]{display:none}
.vgm-nok-lijst{display:grid;gap:6px}
.vgm-nok-rij{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-card);font-size:13px;cursor:pointer}
.vgm-nok-rij input{margin-top:3px;flex:0 0 auto}
.vgm-nok-tekst{min-width:0;overflow-wrap:anywhere}
.vgm-nok-tekst small{display:block;color:var(--danger-ink);font-size:12px;margin-top:2px}
@media (max-width:560px){
  .vgm-reg-rij{flex-wrap:wrap}
  .vgm-reg-veld{grid-template-columns:1fr;gap:0}
  .vgm-tb-twee{grid-template-columns:1fr;gap:0}
}
/* ── Feedbackvenster (cyclus 34, docs/plan-feedback.md) ── */
.fb-venster .fb-lbl{font-size:12px;font-weight:620;color:var(--ink-dim);letter-spacing:.02em}
.fb-venster .form-row label i,.fb-venster .fb-lbl i{font-style:normal;font-weight:400;color:var(--muted)}
.fb-venster textarea{min-height:110px;resize:vertical}
.fb-soort{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fb-soort button{display:flex;align-items:center;gap:9px;text-align:left;min-width:0;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  background:var(--bg-subtle);border:1.5px solid var(--line-input);border-radius:var(--radius-sm);padding:11px 12px;
  transition:background .12s,border-color .12s}
.fb-soort button svg{width:20px;height:20px;flex:none;color:var(--ink-dim)}
.fb-soort button:hover{border-color:var(--faint)}
.fb-soort button[aria-pressed="true"]{border-color:var(--weld);background:var(--weld-tint);color:var(--weld-tint-ink)}
.fb-soort button[aria-pressed="true"] svg{color:var(--weld)}
.fb-soort button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.fb-drop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  border:1.5px dashed var(--line-input);border-radius:var(--radius-sm);padding:10px}
.fb-beelden{display:flex;flex-wrap:wrap;gap:12px}
.fb-beelden:empty{display:none}
.fb-thumb{position:relative;width:64px;display:flex;flex-direction:column;gap:3px}
.fb-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--bg-subtle)}
.fb-thumb span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-thumb-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  border:none;background:var(--ink);color:var(--bg-card);font-size:14px;line-height:20px;padding:0;cursor:pointer;text-align:center}
.fb-thumb-x:hover{background:var(--danger)}
.fb-thumb-x:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.fb-hint{font-size:12px;color:var(--muted);min-width:0}
.fb-chk{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer}
.fb-venster .form-row label.fb-chk{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:0}
.fb-chk input{margin-top:3px;accent-color:var(--weld)}
.fb-watmee{font-size:12.5px;color:var(--ink-dim)}
.fb-watmee summary{cursor:pointer;color:var(--link)}
.fb-watmee ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
@media (max-width:640px){
  .fb-soort{grid-template-columns:1fr}
}
/* Smalle topbalk: net als Zoeken en Vernieuwen enkel het icoon (title blijft). */
@media (max-width:600px){
  #feedbackBtn span,#feedbackBtnDash span{display:none}
}

/* ── Meerwerkopdracht (cyclus 43, docs/plan-meerwerkopdracht.md) ───────────── */
/* Statuschips en de kleur per status; alles via de bestaande variabelen zodat light/dark meeloopt. */
.mw-chip{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);background:var(--bg-subtle);color:var(--ink-dim)}
.mw-st-concept{background:var(--bg-input);color:var(--ink-dim)}
.mw-st-wacht{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.mw-st-getekend{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.mw-st-afgesloten{background:var(--link-bg);color:var(--link)}
.mw-st-vervallen{background:transparent;color:var(--muted);text-decoration:line-through}
.mw-prijs-regie{background:var(--bg-subtle);color:var(--ink-dim)}
.mw-prijs-calculatie{background:var(--weld-tint);color:var(--weld-tint-ink);border-color:var(--weld-light)}
.mw-rij-dood{opacity:.6}
.mw-rij-dood .mt-title{text-decoration:line-through}
.mw-nummer{font-size:12px;color:var(--ink-dim);margin-right:4px}
.mw-bedrag{font-size:13px;font-weight:600;color:var(--ink)}
/* Het venster: labels, keuzerondjes, het materiaalraster en de foto's. */
.mw-label{display:block;font-size:12px;font-weight:620;color:var(--ink-dim);letter-spacing:.02em}
.mw-radios{display:flex;gap:18px;flex-wrap:wrap}
.mw-radios label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:0}
.mw-blok-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 6px;font-size:13px}
.mw-calc-notitie{margin:0 0 6px}
.mw-calc-notitie:empty{display:none}
.mw-mat-rij{display:grid;grid-template-columns:minmax(0,2fr) 84px 96px 120px 36px;gap:6px;align-items:center;
  margin-bottom:6px;padding:4px;border-radius:8px}
.mw-mat-rij input,.mw-mat-rij select{min-width:0;width:100%}
.mw-mat-rij.mw-leeg{background:var(--danger-bg);box-shadow:0 0 0 1px var(--danger-border)}
.mw-mat-rij.mw-leeg .mw-mat-prijs{border-color:var(--danger)}
.mw-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mw-foto{position:relative;width:84px;height:84px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-subtle)}
.mw-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mw-foto .mw-foto-weg{position:absolute;top:4px;right:4px;width:26px;height:26px;padding:0}
@media (max-width:600px){
  .mw-mat-rij{grid-template-columns:1fr 1fr}
  .mw-mat-rij .mw-mat-oms{grid-column:1 / -1}
  .mw-mat-rij .mw-mat-weg{justify-self:end}
}

/* ── Het document (cyclus 43 T9, docs/plan-meerwerkopdracht.md §Schermen › OS) ─
   De A4-kaart met de opdracht zoals de klant ze ziet, en rechts de knoppen per
   status. Kleuren via de variabelen van `.mw-doc`, zodat light en dark meelopen. */
.mw-venster{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:start}
.mw-venster-doc,.mw-venster-rechts{min-width:0}
.mw-doc{
  --mw-paper:#fff;--mw-ink:#1f2a37;--mw-muted:#5f6b7a;--mw-line:#d6dde6;--mw-soft:#f5f7fa;
  --mw-warn-bg:#fdf3e0;--mw-warn-ink:#8a5300;--mw-warn-bar:#e08a1e;--mw-danger-ink:#8a2f2b;--mw-ok-ink:#2f7a45;
  background:var(--mw-paper);color:var(--mw-ink);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 1px 2px rgba(20,30,45,.06),0 8px 24px rgba(20,30,45,.10);
  padding:34px 40px;margin:0 auto;max-width:720px;width:100%;box-sizing:border-box;
  font-size:13px;line-height:1.45;
}
@media (min-width:1100px){.mw-doc{min-height:975px}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mw-doc{
    --mw-paper:#1b2531;--mw-ink:#e6ecf3;--mw-muted:#9aa8b8;--mw-line:#33404f;--mw-soft:#222e3c;
    --mw-warn-bg:#3a2a12;--mw-warn-ink:#ffb866;--mw-warn-bar:#e08a1e;--mw-danger-ink:#ff9b92;--mw-ok-ink:#8fd6a6;
  }
}
:root[data-theme="dark"] .mw-doc{
  --mw-paper:#1b2531;--mw-ink:#e6ecf3;--mw-muted:#9aa8b8;--mw-line:#33404f;--mw-soft:#222e3c;
  --mw-warn-bg:#3a2a12;--mw-warn-ink:#ffb866;--mw-warn-bar:#e08a1e;--mw-danger-ink:#ff9b92;--mw-ok-ink:#8fd6a6;
}
.mw-doc-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--mw-ink)}
.mw-doc-soort{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mw-muted)}
.mw-doc-nr{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.mw-doc-meta,.mw-doc-project{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;margin:0}
.mw-doc-meta dt,.mw-doc-project dt{color:var(--mw-muted)}
.mw-doc-meta dd,.mw-doc-project dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.mw-doc-blok{border-top:1px solid var(--mw-line);padding:14px 0}
.mw-doc h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mw-muted);margin:0 0 8px}
.mw-doc h5.mw-doc-sub{font-size:12px;font-weight:700;margin:12px 0 4px}
.mw-doc-titel{font-size:15px;font-weight:700;margin-bottom:4px;overflow-wrap:anywhere}
.mw-doc-tekst{white-space:pre-wrap;overflow-wrap:anywhere}
.mw-doc-muted{color:var(--mw-muted)}
.mw-doc p{margin:4px 0}
.mw-doc-prijs,.mw-doc-totaal{font-size:14px}
.mw-doc-totaal{font-size:16px;font-weight:700;text-align:right;margin:10px 0 0}
.mw-doc-afgerekend{font-weight:600}
.mw-doc-tabel-scroll{overflow-x:auto;margin:6px 0}
.mw-doc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.mw-doc-table th,.mw-doc-table td{padding:5px 6px;border-bottom:1px solid var(--mw-line);text-align:left;vertical-align:top}
.mw-doc-table th{font-size:11px;color:var(--mw-muted);font-weight:700}
.mw-doc-table .num{text-align:right;white-space:nowrap}
.mw-doc-table tfoot td{font-weight:700;border-bottom:none;border-top:1px solid var(--mw-ink)}
.mw-doc-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mw-doc-fotos img{display:block;width:96px;height:96px;object-fit:cover;border:1px solid var(--mw-line);border-radius:4px}
.mw-doc-waarschuwing{background:var(--mw-warn-bg);color:var(--mw-warn-ink);border-left:3px solid var(--mw-warn-bar);
  padding:6px 10px;border-radius:4px;margin:6px 0;font-weight:600;overflow-wrap:anywhere}
/* Het akkoordvak: een schrijflijn onder de handtekening, en een stippellijn als er niets staat. */
.mw-doc-akkoord{display:flex;flex-direction:column;gap:6px}
.mw-doc-hand-vak{border-bottom:1px solid var(--mw-ink);padding-bottom:4px;min-height:40px}
.mw-doc-hand-vak.mw-doc-leeg{border:1px dashed var(--mw-line);border-radius:4px;display:flex;align-items:center;
  justify-content:center;min-height:0;padding:0}
.mw-doc-leeg-tekst{color:var(--mw-muted);font-size:12px;font-style:italic;padding:14px 0}
.mw-doc-hand{display:block;width:100%;height:auto;aspect-ratio:4 / 1;overflow:visible}
.mw-doc-hand polyline{fill:none;stroke:var(--mw-ink);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.mw-doc-velden{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;font-size:12.5px}
.mw-doc-velden span:nth-child(odd){color:var(--mw-muted)}
.mw-doc-velden em{font-style:normal}
/* Rechts: de status, de drie regels (PDF, NAS, mail) en de knoppen. */
.mw-doc-kolom{display:flex;flex-direction:column;gap:12px}
.mw-doc-status{display:flex;gap:6px;flex-wrap:wrap}
.mw-doc-regels{display:flex;flex-direction:column;gap:4px}
.mw-doc-regel{font-size:12px;color:var(--ink-dim);overflow-wrap:anywhere}
.mw-doc-regel span:first-child{font-weight:700;color:var(--ink);margin-right:6px}
.mw-doc-regel.mw-doc-fout{color:var(--danger-ink-2)}
.mw-doc-regel.mw-doc-fout span:first-child{color:var(--danger-ink-2)}
.mw-doc-regel.mw-doc-wacht{color:var(--warn-ink)}
.mw-doc-regel.mw-doc-wacht span:first-child{color:var(--warn-ink)}
.mw-doc-acties{display:flex;flex-direction:column;gap:8px}
.mw-doc-acties .btn{justify-content:center}
.mw-doc-uitleg{font-size:12.5px;color:var(--ink-dim);margin:0;line-height:1.45}
.mw-doc-melding{margin-bottom:12px}
.mw-doc-ok{border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;font-weight:620;
  background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-ink)}
@media (max-width:760px){
  .mw-venster{grid-template-columns:minmax(0,1fr)}
  .mw-doc{padding:22px 18px;min-height:0}
  .mw-doc-table{font-size:11.5px}
  .mw-doc-table th,.mw-doc-table td{padding:4px 3px}
}
.mw-doc-nummer{font-size:15px;font-weight:700}
/* Afrekening opmaken (cyclus 43, web/js/meerwerk_afrekening.js): het venster boven de opdracht. */
.mw-afr{display:flex;flex-direction:column;gap:14px;font-size:13px}
.mw-afr h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 6px}
.mw-afr-blok{border-top:1px solid var(--line);padding-top:12px}
.mw-afr-tabel-scroll{overflow-x:auto}
.mw-afr-tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.mw-afr-tabel th,.mw-afr-tabel td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mw-afr-tabel th{font-size:11px;color:var(--ink-dim);font-weight:700}
.mw-afr-tabel .num{text-align:right;white-space:nowrap}
.mw-afr-tabel tfoot td{font-weight:700;border-bottom:none;border-top:1px solid var(--ink)}
.mw-afr-tabel .mw-afr-groep td{font-weight:700}
.mw-afr-tabel .mw-afr-comp td:first-child{padding-left:18px;color:var(--ink-dim)}
.mw-afr-vergelijk{margin:8px 0 0;font-size:12.5px;color:var(--ink-dim)}
.mw-afr-vergelijk.warn{color:var(--warn-ink);font-weight:700}
.mw-afr-hint{font-size:12px;color:var(--ink-dim);margin:6px 0 0;line-height:1.45}
.mw-afr-balk{background:var(--warn-bg);color:var(--warn-ink);border-left:3px solid var(--warn-border);
  padding:6px 10px;border-radius:4px;margin:0 0 6px;font-weight:600;overflow-wrap:anywhere}
.mw-afr-balk.fout{background:var(--danger-bg);color:var(--danger-ink-2);border-left-color:var(--danger-border)}
.mw-afr-kop,.mw-afr-rij{display:grid;grid-template-columns:minmax(0,2.4fr) 76px 84px 96px 120px 32px;gap:6px;align-items:center}
.mw-afr-kop span:nth-child(5){text-align:right}
.mw-afr-kop{font-size:11px;color:var(--ink-dim);font-weight:700;margin-bottom:4px}
.mw-afr-rij{margin-bottom:6px}
.mw-afr-rij input,.mw-afr-rij select{min-width:0;width:100%;box-sizing:border-box}
.mw-afr-bedrag{display:flex;flex-direction:column;text-align:right;white-space:nowrap}
.mw-afr-fout{font-size:11.5px;color:var(--danger-ink-2);font-weight:600;white-space:normal}
.mw-afr-fout[hidden]{display:none}
.mw-afr-totaal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:10px;font-size:15px}
.mw-afr-totaal b{font-size:17px}
.mw-afr-uitleg{font-size:12.5px;color:var(--ink-dim);margin:0 0 10px;line-height:1.45}
.mw-afr-label{display:block;font-size:12px;font-weight:700;margin-bottom:4px}
.mw-afr textarea{width:100%;box-sizing:border-box;resize:vertical}
@media (max-width:760px){
  .mw-afr-kop{display:none}
  .mw-afr-rij{grid-template-columns:repeat(3,minmax(0,1fr)) 32px}
  .mw-afr-rij .mw-afr-oms{grid-column:1 / 4}
  .mw-afr-rij .mw-afr-bedrag{grid-column:1 / 4;grid-row:auto;flex-direction:row;gap:8px;justify-content:flex-start;text-align:left}
  .mw-afr-rij button{grid-column:4;grid-row:1}
}

/* ── Werftijd en werfplekken (cyclus 45, docs/plan-geolocatie.md) ─────────────
   Enkel de bestaande tokens (ink, line, warn, ok, weld, steel): de rest van dit
   bestand heeft geen eigen donkere set, dus dit blok volgt die keuze mee. */
/* Vlaggenchip op een urenregel en in de werftijd-tabel. `warn` = aandacht. */
.wt-vlag{display:inline-flex;align-items:center;gap:6px;margin:4px 4px 0 0;padding:3px 10px;
  border-radius:var(--radius-pill);font-size:11px;font-weight:640;white-space:nowrap;cursor:help;
  background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line)}
.wt-vlag.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
/* Uren › Werftijd: filterbalk, tabel en het zijpaneel met tijdlijn en kaartje. */
.wt-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.wt-tabel{width:100%}
.wt-tabel tr.wt-klik{cursor:pointer}
.wt-tabel tr.wt-klik:hover td{background:var(--bg-subtle)}
.wt-drawer-kaart{height:260px;width:100%;margin:10px 0;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-subtle);overflow:hidden}
/* De dagbalk: 0–100 % is het venster van de dag; blokken en streepjes staan
   absoluut in dezelfde balk (left/width in % via de style-attribuut). */
.wt-tijdlijn{position:relative;height:34px;margin:10px 0 4px;border-radius:var(--radius-sm);
  background:var(--line-3);border:1px solid var(--line);overflow:hidden}
.wt-balk{position:absolute;top:0;bottom:0;background:var(--ok-bg);
  border-left:2px solid var(--ok);border-right:2px solid var(--ok)}
.wt-blok{position:absolute;top:8px;bottom:8px;border-radius:6px;background:var(--steel);opacity:.75}
.wt-streep{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--weld)}
/* Reistijd (vertrek/thuis): gestippeld, zodat die nooit lijkt op werftijd. */
.wt-rit{position:absolute;top:50%;height:0;border-top:2px dashed var(--muted)}
/* Instellingen › Werfplekken: kop, schakelaars, lijst en het kaartje. */
.wp-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wp-switch{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);
  font-size:13px;color:var(--ink);cursor:pointer}
.wp-switch input{accent-color:var(--weld)}
.wp-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.wp-kaart{height:300px;width:100%;margin-top:10px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-subtle);overflow:hidden}

/* ── Facturen (docs/plan-facturen-scherm.md) — Onfacts factuurlijst in de OS ── */
.fx-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:18px}
.fx-tegel{display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  box-shadow:var(--shadow-card);font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.fx-tegel:hover{border-color:var(--faint)}
.fx-tegel.on{border-color:var(--fx-kleur);box-shadow:0 0 0 2px color-mix(in srgb,var(--fx-kleur) 25%,transparent)}
.fx-tegel-tekst{display:flex;flex-direction:column;gap:4px;min-width:0}
.fx-tegel-bedrag{font-size:28px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-tegel-label{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-dim);line-height:1.35}
.fx-tegel-icoon{flex:none;width:58px;height:58px;border-radius:50%;background:var(--fx-kleur);color:#fff;
  display:flex;align-items:center;justify-content:center}
.fx-tegel-icoon svg{width:26px;height:26px}
.fx-paneel{padding:0;overflow:hidden}
.fx-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.fx-titel{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:650}
.fx-titel svg{width:20px;height:20px;color:var(--ink-dim)}
.fx-telling{font-size:12.5px}
.fx-zoek{min-width:220px}
.fx-btn-filter{background:var(--warn);border-color:var(--warn);color:#fff}
.fx-btn-filter:hover{filter:brightness(.95);color:#fff}
.fx-btn-acties{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.fx-btn-acties:hover{filter:brightness(1.1);color:#fff}
.fx-tabel .panel{border:0;border-radius:0;box-shadow:none;margin:0}
.fx-tabel table.data{min-width:1500px}
.fx-tabel td{vertical-align:middle;white-space:nowrap}
.fx-tabel thead th{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);font-weight:650;white-space:nowrap}
.fx-tabel th.fx-sel,.fx-tabel td.fx-sel{width:34px;padding-right:0}
.fx-nr{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fx-nr svg{width:15px;height:15px;color:var(--danger)}
.fx-st{display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:650;color:#fff;white-space:nowrap;background:var(--steel)}
.fx-st-concept{background:var(--navy-2)}
.fx-st-verzonden{background:var(--warn)}
.fx-st-vervallen{background:var(--danger)}
.fx-st-betaald{background:var(--ok)}
.fx-proj{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;
  padding:3px 9px;border-radius:4px;background:var(--link);color:#fff;font-size:12.5px;font-weight:560}
.fx-proj-link:hover .fx-proj{filter:brightness(1.1)}
.fx-detail-kop .fx-proj{max-width:100%}
.fx-top{min-width:240px;max-width:420px;line-height:1.35}
.fx-top>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-top-2{color:var(--muted)}
.fx-act{white-space:nowrap}
.fx-split{display:inline-flex}
.fx-split .btn{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.fx-split .btn:hover{filter:brightness(1.12);color:#fff}
.fx-split .fx-bekijk{border-top-right-radius:0;border-bottom-right-radius:0}
.fx-split .fx-pijl{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(255,255,255,.25);padding-left:8px;padding-right:8px}
.fx-bekijk svg{width:14px;height:14px}
.fx-pop{position:absolute;z-index:120;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);padding:6px}
.fx-pop-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;font:inherit;font-size:13.5px;
  color:var(--ink);text-align:left;border-radius:7px;cursor:pointer}
.fx-pop-item:hover{background:var(--bg-subtle)}
.fx-pop-item svg{width:15px;height:15px;color:var(--ink-dim)}
.fx-pop-item.gevaar,.fx-pop-item.gevaar svg{color:var(--danger-ink)}
.fx-pop-sep{height:1px;background:var(--line-2);margin:5px 4px}
.fx-filters{padding:8px 8px 4px}
.fx-f-kop{font-size:12px;font-weight:650;color:var(--ink-dim);margin-bottom:6px}
.fx-f-st{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.fx-f-st label{display:flex;align-items:center;gap:6px;cursor:pointer}
.fx-f-voet{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.fx-detail-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px;margin-bottom:12px}
.fx-klantblok .k,.fx-tekstblok .k{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:4px}
.fx-klantblok{line-height:1.5}
.fx-tekstblok{background:var(--bg-subtle);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:10px 12px;margin:10px 0;font-size:13.5px}
.fx-nota{background:var(--warn-bg);border-color:var(--warn-border)}
.fx-regels tr.fx-sectie td,.fx-e-tabel tr.fx-sectie td{font-weight:650;background:var(--bg-subtle)}
.fx-totalen{margin-left:auto;max-width:320px;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.fx-totalen>div{display:flex;justify-content:space-between;gap:16px}
.fx-totalen .groot{font-size:15.5px;border-top:1px solid var(--line);padding-top:6px}
.fx-detail-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.fx-gevaar{color:var(--danger-ink)!important}
.btn.fx-gevaar-vol{background:var(--danger);border-color:var(--danger);box-shadow:none}
.fx-e-rij{margin-top:2px}
.fx-e-tabel{margin:6px 0 8px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.fx-e-tabel td{vertical-align:top;padding:6px}
.fx-e-tabel input,.fx-e-tabel select,.fx-e-tabel textarea{width:100%}
.fx-e-tabel .fe-tekst{margin-top:4px;font-size:12.5px;resize:vertical;min-height:30px}
.fx-e-tabel input.right{text-align:right}
.fx-e-tabel .fe-tot{padding-top:14px;white-space:nowrap}
.fx-e-plus{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fx-e-tot{font-size:13px;color:var(--ink-dim)}
@media (max-width:760px){
  .fx-kop{padding:12px}
  .fx-zoek{min-width:0;flex:1 1 100%;order:5}
  .fx-tegel-bedrag{font-size:23px}
  .fx-tegel-icoon{width:46px;height:46px}
  .fx-tabel table.data{min-width:0}
  .fx-detail-kop{grid-template-columns:1fr}
  .fx-top{min-width:0}
  .fx-proj{max-width:58vw}
}

/* ── Werflassen op de projectfiche (cyclus 57) ─────────────────────────────── */
.wlk{display:flex;flex-direction:column;gap:14px;padding:18px 20px;margin-bottom:14px;background:var(--bg-card);border:2px solid var(--weld-tint-ink);border-radius:var(--radius)}
.wlk-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.wlk-kop h3{margin:0;font-size:18px;line-height:24px;font-weight:700;color:var(--ink)}
.wlk-dag{font-size:13.5px;color:var(--ink-dim)}
.wlk-groot{font-size:30px;line-height:36px;font-weight:700;color:var(--ink)}
/* De gaten krimpen mee: bij veel lassen op een smalle fiche mogen ze de balk niet opeten. */
.wlk-balk{display:grid;grid-template-columns:repeat(var(--wlk-n),minmax(0,1fr));column-gap:min(4px,calc(30% / var(--wlk-n)));margin-top:10px}
.wlk-seg{height:14px;border-radius:3px}
.wlk-seg.gelast{background:var(--ok)}
.wlk-seg.gefit{background:var(--link)}
.wlk-seg.open{background:var(--line-input)}
.wlk-legende{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:13.5px;color:var(--ink-dim)}
.wlk-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.wlk-tegel{padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;line-height:20px;color:var(--ink);overflow-wrap:anywhere}
.wlk-tegel.vt{background:var(--warn-bg)}
.wlk-tegel.ndo{background:var(--link-bg)}
.wlk-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.wlk-fout{margin-bottom:12px;font-size:13px}
@media (max-width:480px){
  .wlk{padding:14px}
  .wlk-groot{font-size:26px;line-height:32px}
  .wlk-tegels{grid-template-columns:minmax(0,1fr)}
  .wlk-knoppen .btn{flex:1 1 100%}
}
/* Maandafrekening (ADR 0071): de labels Regie en Vaste prijs, info-regels grijs, het totaal. */
.ma-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1.5;padding:0 8px;
  border-radius:4px;white-space:nowrap}
.ma-regie{background:color-mix(in srgb,var(--link) 15%,transparent);color:var(--link);border:1px solid color-mix(in srgb,var(--link) 35%,transparent)}
.ma-vast{background:transparent;color:var(--ink-dim);border:1px solid var(--line-input)}
.ma-kop{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.ma-info td{color:var(--ink-dim)}
.ma-subtotaal td{font-weight:650;border-top:1px solid var(--line)}
.ma-totaal{border-top:2px solid var(--ink);margin-top:16px;padding-top:8px}
.ma-totaal h3{margin:0 0 6px;font-size:15px}
.ma-trij{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.ma-trij span:last-child{font-family:var(--mono);white-space:nowrap}
.ma-trij.ma-groot{font-weight:700;font-size:15px;border-bottom:none}
/* De keuze "Dagvergoeding verdelen" (ADR 0068 aanvulling): .form-row zet display:flex en wint anders van [hidden]. */
#ktf_verdeling_wrap[hidden]{display:none}

/* ── Instellingen › Feedback (feedback opvolgen, views/feedback_overzicht.js) ── */
.fbo-tabel .fbo-rij{cursor:pointer}
.fbo-tabel .fbo-rij:hover td{background:var(--bg-subtle)}
.fbo-status{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;
  color:var(--kl);border:1px solid var(--kl);background:var(--bg-card);white-space:nowrap}
.fbo-soort{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;white-space:nowrap}
.fbo-soort svg{width:13px;height:13px}
.fbo-bug{color:var(--danger)}
.fbo-idee{color:var(--steel)}
.fbo-mail{font-size:11.5px;color:var(--muted);white-space:nowrap}
.fbo-mail-fout{color:var(--danger);font-weight:600}
.fbo-mail-ok{color:var(--ok-ink, #22a06b)}
.fbo-notitie-kort{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.fbo-waarschuwing{padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg-subtle);
  border-left:3px solid var(--weld);font-size:12.5px;line-height:1.6;margin-bottom:10px}
.fbo-waarschuwing svg{width:14px;height:14px;vertical-align:-2px}
.fbo-kop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.fbo-tekst{white-space:pre-wrap;line-height:1.6;font-size:13.5px;margin-top:12px;padding:10px 12px;
  background:var(--bg-subtle);border-radius:var(--radius-sm);max-height:320px;overflow:auto;overflow-wrap:anywhere}
.fbo-beelden{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fbo-beeld img{max-width:200px;max-height:140px;border:1px solid var(--line);border-radius:var(--radius-sm);display:block}

/* Venster Uren boeken: namen bij een onderaannemer (ACD · Jan). */
.ub-namen-chips{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:6px;font-size:11.5px}
.ub-namen-chips:empty{display:none}
.ub-naam-chip{font:inherit;font-size:12px;padding:1px 9px;border-radius:20px;border:1px solid var(--line-input);
  background:var(--bg-card);color:var(--ink);cursor:pointer}
.ub-naam-chip:hover{border-color:var(--link);color:var(--link)}

/* ── Instellingen › Klantportaal (cyclus 60) ── */
/* views/klantportaal.js, ontwerp .factory/c60/ontwerp/Zicht.dc.html. Kleuren via de variabelen (light/dark loopt mee). */
.kp-wrap{display:flex;flex-direction:column;gap:16px;min-width:0}
.kp-tabbladen{align-self:flex-start;max-width:100%;overflow-x:auto}
.kp-tabbladen button{padding:8px 14px}
.kp-titelrij{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}
.kp-h1{margin:0;font-size:24px;font-weight:700;color:var(--ink)}
.kp-lead{margin:4px 0 0;font-size:14px}
.kp-acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kp-zacht{color:var(--ink-dim);font-size:13px}
.kp-stand{font-size:13px;color:var(--ink-dim);overflow-wrap:anywhere}
.kp-aan{color:var(--ok-ink)}
.kp-uit{color:var(--danger-ink)}
.kp-waarschuwing{padding:8px 12px;border-radius:var(--radius-sm);background:var(--warn-bg);border-left:3px solid var(--warn);
  font-size:12.5px;line-height:1.6}
.kp-waarschuwing svg{width:14px;height:14px;vertical-align:-2px}
.kp-kaart{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-width:0}
.kp-groep{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.kp-kicker,.kp-kop{font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim)}
.kp-groep-naam{font-weight:700;font-size:17px;color:var(--ink)}
.kp-ent{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--bg-subtle);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;color:var(--ink);overflow-wrap:anywhere}
.kp-plus{font:inherit;font-size:13px;background:none;border:1px dashed var(--faint);border-radius:8px;padding:5px 10px;
  color:var(--link);cursor:pointer}
.kp-plus:hover{border-color:var(--link)}
.kp-x{font:inherit;background:none;border:0;color:var(--muted);cursor:pointer;padding:0 2px;font-size:15px;line-height:1}
.kp-x:hover{color:var(--danger)}
.kp-raster{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.kp-links{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px}
.kp-rechts{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.kp-personen{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kp-personen .kp-kop{padding:12px 16px;border-bottom:1px solid var(--line)}
.kp-persoon{font:inherit;width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;
  border-top:1px solid var(--line);background:var(--bg-card);color:var(--ink);cursor:pointer;text-align:left}
.kp-persoon:first-of-type{border-top:0}
.kp-persoon:hover{background:var(--bg-subtle)}
.kp-persoon.kp-aan-sel{background:var(--weld-tint)}
.kp-persoon.kp-inactief{opacity:.55}
.kp-init{width:34px;height:34px;border-radius:50%;background:var(--bg-subtle);border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-weight:650;font-size:12.5px;color:var(--steel);flex:none}
.kp-persoon-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.kp-persoon-naam{font-weight:650;overflow-wrap:anywhere}
.kp-persoon-sub{font-size:12.5px;color:var(--ink-dim);overflow-wrap:anywhere}
.kp-leeg{padding:14px 16px;color:var(--muted);font-size:13px}
.kp-leeg-groot{color:var(--ink-dim);font-size:14px;text-align:center;padding:28px 18px}
.kp-kop-persoon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.kp-persoon-titel{font-size:19px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.kp-mailregel{margin-top:2px;overflow-wrap:anywhere}
.kp-teller{font-size:13.5px;color:var(--steel);background:var(--bg-subtle);border-radius:999px;padding:7px 13px;white-space:nowrap}
.kp-teller strong{color:var(--ink)}
.kp-instel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 22px}
.kp-instel .form-row{min-width:200px}
.kp-vink{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;min-height:32px}
.kp-vink input{width:17px;height:17px;margin:0;accent-color:var(--ink);flex:none}
.kp-regel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  display:flex;flex-direction:column;gap:14px;min-width:0}
.kp-veld{display:flex;flex-direction:column;gap:7px}
.kp-veld-kop{font-size:12.5px;font-weight:650;color:var(--steel)}
.kp-pillen{display:flex;flex-wrap:wrap;gap:6px}
.kp-pil{font:inherit;font-size:13px;font-weight:600;border-radius:999px;padding:7px 13px;min-height:34px;cursor:pointer;
  background:var(--bg-card);color:var(--steel);border:1px solid var(--line-input)}
.kp-pil:hover{border-color:var(--ink-dim)}
.kp-pil.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.kp-vinkjes{display:flex;flex-wrap:wrap;gap:4px 18px}
.kp-projecten{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kp-teken{padding-top:12px;border-top:1px solid var(--line)}
.kp-regel-voet{display:flex;justify-content:flex-end}
.kp-regel-acties{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.kp-regel-acties #kpRegelPlus{margin-right:auto}
.kp-gewijzigd{font-size:12.5px;color:var(--weld-tint-ink);font-weight:600}
.kp-voetnoot{margin:0}
.kp-zonder-email h4{margin:0 0 4px;font-size:15px}
.kp-zonder-email p{margin:0 0 10px}
.kp-kiezer{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto;margin-top:10px}
.kp-kies{font:inherit;display:flex;justify-content:space-between;gap:10px;text-align:left;padding:8px 10px;border-radius:8px;
  border:1px solid transparent;background:none;color:var(--ink);cursor:pointer}
.kp-kies:hover{background:var(--bg-subtle)}
.kp-kies.on{border-color:var(--weld);background:var(--weld-tint)}
.kp-kies:disabled{cursor:default;color:var(--muted)}
.kp-kies-rij{padding:4px 6px}
.kp-groep-acties{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.kp-zeker{border-color:var(--danger-border)!important;color:var(--danger-ink)!important;background:var(--danger-bg)!important}
/* Van klanten (T13) */
.kp-acties-lijst{display:flex;flex-direction:column;gap:14px;min-width:0}
.kp-acties-blok h4.kp-acties-kop{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px}
.kp-teller-klein{font-size:12px;font-weight:650;color:var(--steel);background:var(--bg-subtle);border:1px solid var(--line);
  border-radius:999px;padding:1px 9px}
.kp-acties-uitleg{margin:0 0 10px}
.kp-acties-tabel td{vertical-align:top}
.kp-acties-tabel .row-actions{flex-direction:column;align-items:stretch;justify-content:flex-start}
.kp-acties-tabel .row-actions .btn{white-space:nowrap}
.kp-acties-tabel .mono{white-space:nowrap}
.kp-nowrap{white-space:nowrap}
.kp-breek{overflow-wrap:anywhere}
.kp-voorwaarden{max-width:260px;overflow-wrap:anywhere;white-space:pre-wrap;font-size:12.5px;color:var(--ink-dim)}
.kp-voorwaarden-blok{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--line);background:var(--bg-subtle);
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.kp-chip{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--bg-subtle);color:var(--ink-dim);border:1px solid var(--line)}
.kp-chip.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.kp-chip.wacht{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.kp-chip.fout{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-border)}
.kp-acties-sub h5{margin:10px 0 6px;font-size:13px;color:var(--steel)}
.kp-po-fout{margin:10px 0 14px;padding:8px 12px;border:1px solid var(--danger-border);border-radius:8px;background:var(--danger-bg);
  display:flex;flex-direction:column;gap:6px;min-width:0}
.kp-po-fout-rij{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;min-width:0}
.kp-po-fout-rij .btn{margin-left:auto}
.kp-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kp-lijst li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;padding:6px 0;border-top:1px solid var(--line);
  overflow-wrap:anywhere}
.kp-lijst li:first-child{border-top:0}
.kp-lijst li.kp-vraag{flex-direction:column;align-items:flex-start}
.kp-vraag-tekst{white-space:pre-wrap;color:var(--ink)}
/* Orderbevestigingen (T13): de lijst en het venster web/js/orderbevestiging.js */
.kp-ob-kop{margin:0 0 10px}
.kp-ob-rij{display:flex;flex-wrap:wrap;gap:0 14px}
.kp-ob-rij .form-row{flex:1 1 150px;min-width:0}
.kp-ob-offerte{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-bottom:10px}
.kp-ob-offerte .form-row{flex:1 1 260px;margin-bottom:0}
.kp-ob-regels input{width:100%;min-width:0;box-sizing:border-box}
.kp-ob-regels .kp-ob-oms{min-width:180px}
.kp-ob-regels .kp-ob-getal{width:90px;text-align:right}
.kp-ob-regels .kp-ob-eenheid{width:70px}
.kp-ob-num{text-align:right;white-space:nowrap}
.kp-ob-bedrag{font-variant-numeric:tabular-nums}
.kp-ob-totaal-label{text-align:right;font-weight:650}
.kp-ob-totaal{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.kp-ob-uitofferte{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;margin-bottom:10px;
  border-radius:var(--radius-sm);background:var(--weld-tint);font-size:13px}
.kp-ob-uitofferte[hidden]{display:none}
/* De lijst naast de projectkiezer (R5): vier kolommen, de knoppen onder de titel. De titel krijgt een
   redelijke minimumbreedte, zodat `overflow-wrap:anywhere` (van .kp-breek) enkel een woord breekt dat
   breder is dan de cel, nooit "offert e". */
.kp-ob-lijst td{vertical-align:top}
.kp-ob-lijst td.kp-ob-titel{min-width:12em}
.kp-ob-knoppen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kp-ob-knoppen .btn{white-space:nowrap}
#kpObLijst .kp-kop-persoon{margin-bottom:12px}
@media (max-width:700px){
  /* Kaartweergave (ui.mobielTabellen): geen vaste maximumbreedte meer en de knoppen rechts. */
  table.data.mob-cards td.kp-voorwaarden{max-width:none}
  table.data.mob-cards td.kp-ob-titel{min-width:0}
  table.data.mob-cards .kp-ob-knoppen{justify-content:flex-end}
  table.data.mob-cards.kp-acties-tabel .row-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
}
@media (max-width:640px){
  .kp-kop-persoon{flex-direction:column;align-items:flex-start}
  .kp-regel-acties{justify-content:flex-start}
  .kp-groep-acties{margin-left:0}
}