/* Eyefly Recon-cockpit — gedeelde stijl.
   Kleuren/fonts overgenomen uit de originele tools (_source/eyefly-recon.html)
   zodat de cockpit en de omhulde modules visueel één geheel zijn. */
:root{
  /* Nieuwe huisstijl (prototype = bron van waarheid) */
  --bg:#060510; --surface:#1c1a36;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17);
  --text:#eef0f7; --text-2:#9498b3; --text-3:#5f6484;
  --blue:#2bb3f0; --purple:#9a4fd0; --navy:#2e2276;
  /* B1 (2026-07-04): één merkgradient — de opgehelderde dark-theme-werkkleuren (--blue/--purple),
     zelfde kleuren als de gradient-knoppen/switches. Oud: #00a0e6 → #642085 (logokleuren). */
  --grad:linear-gradient(90deg,#2bb3f0,#9a4fd0);
  --grad-calm:linear-gradient(90deg,#2486c6,#6b3a9c);
  --urgent:#ff5d73; --urgent-dim:rgba(255,93,115,.13);
  --green:#34d39a; --green-dim:rgba(52,211,154,.10);
  --blue-dim:rgba(43,179,240,.12); --amber:#e8a33d;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sidebar-w:246px;
  --shadow:var(--e-1);   /* kaart-elevatie — nu uit de token-schaal (tokens.css) */
  /* Brug: oude variabelenamen → nieuw palet, zodat bestaande schermen meekleuren tijdens de migratie */
  --paper:var(--bg); --panel:var(--surface); --panel-2:#100e20;
  --rail:var(--surface);
  --ink:var(--text); --ink-soft:var(--text-2); --muted:var(--text-3);
  /* --text-1/--surface-1 zijn nooit gedefinieerd geweest, maar wél gebruikt (19 resp. 1 plek: het
     declaratie-/inkoopvenster, OHW, urenbesteding, rapportages). Een var() zonder definitie én zonder
     fallback maakt de HELE declaratie ongeldig: `color` viel daardoor terug op erven (nadruk-tekst
     doofde mee met zijn omgeving) en `background` op transparant (het declaratievenster liet de tabel
     erdoorheen zien). Als brug-alias hier, zodat de bestaande regels bedoeld gaan werken. */
  --text-1:var(--text); --surface-1:var(--surface);
  --r-control:var(--r-sm);   /* idem: 4 plekken vielen terug op border-radius:0 */
  --accent:var(--blue); --accent-bright:#5cc6f5;
  --brand-purple:var(--purple); --heading-purple:#c3a0ea;
  --red:var(--urgent); --warn:var(--amber); --warn-bg:rgba(232,163,61,.10);
  --sel:var(--purple); --sel-bg:rgba(154,79,208,.18); --sel-ink:#e9defb;
  --grad-bp:var(--grad);
  --font-display:'Outfit', system-ui, sans-serif;
  --font-mono:'Outfit', system-ui, sans-serif;
  --font-body:'Outfit', system-ui, sans-serif;
  /* Status/voortgang-pillen — PLATFORM-STANDAARD (zie de .sbal-component verderop).
     Wil je de look van álle status-/stappenbalken wijzigen? Pas hier de tokens aan. */
  --pill-fill:var(--panel-2); --pill-ink:var(--text-3); --pill-line:var(--line-2);
  --pill-done-fill:rgba(52,211,154,.16); --pill-done-ink:#7fe3bd; --pill-done-line:rgba(52,211,154,.55);
  --pill-on-fill:rgba(43,179,240,.18);  --pill-on-ink:#9fd4f2;  --pill-on-line:var(--blue);
  --pill-line-done:var(--green);
}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(123,79,170,.6) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue),var(--purple));border-radius:var(--r-sm);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#9a4fd0;background-clip:padding-box;border:2px solid transparent}
html,body{margin:0;height:100%}
body{
  color-scheme:dark;
  font-family:var(--font-body);
  font-size:var(--fs-md);
  font-variant-numeric:tabular-nums;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex; height:100%; overflow:hidden;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-bright)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.eyebrow{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}

/* ---- sidebar (nieuwe huisstijl) ---- */
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--rail);
  border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:0 22px 48px -26px rgba(0,0,0,.92);
  margin:12px 0 12px 12px;padding:16px 12px 14px;display:flex;flex-direction:column;gap:13px;
  position:sticky;top:12px;height:calc(100vh - 24px);
  transition:width .26s var(--ease),flex-basis .26s var(--ease),padding .26s var(--ease)}
.brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px 14px;border-bottom:1px solid var(--line);margin-bottom:0}
.logo{display:flex;align-items:center;gap:11px;min-width:0}
.logo-bird{height:23px;width:auto;flex:0 0 auto;display:block}
.brand-name{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-name b{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:#fff}
.brand-name small{font-size:var(--fs-micro);letter-spacing:.36em;color:var(--text-3);margin-top:5px;font-weight:600}.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;flex:1;margin-right:-6px;padding-right:6px}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:500;font-size:var(--fs-md);transition:background .16s,color .16s;white-space:nowrap}
/* display:flex overschrijft het hidden-attribuut (UA-stylesheet) → expliciet verbergen, anders
   blijven nav-items voor rollen zonder de module gewoon zichtbaar (rollen-handhaving UI-kant). */
.nav-item[hidden]{display:none}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.nav-item .lbl{overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{color:#fff;background:rgba(154,79,208,.16);box-shadow:inset 2px 0 0 var(--purple),0 0 0 1px rgba(154,79,208,.16)}
.nav-item.active svg{opacity:1;color:var(--heading-purple)}
/* Sectielabel in de nav. Verving de naamloze .nav-sep-lijnen: vijf groepen zonder label dwingen je
   de indeling te onthouden in plaats van hem te lezen. In de ingeklapte rail vallen ze weg (zie
   body.collapsed hieronder) — daar is geen ruimte voor tekst. */
.nav-kop{font-family:var(--font-display);font-size:var(--fs-nano);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);padding:14px 12px 5px;user-select:none}
.nav-kop[hidden]{display:none}
.nav-grp{display:flex;flex-direction:column}
.nav-grp[hidden]{display:none}
/* Houdt de rol maar één sub-weergave over, dan is uitklappen zinloos: de groep gedraagt zich als
   een gewoon menu-item dat direct naar die ene weergave gaat (zie applyNavVisibility). */
.nav-grp.grp-solo .gchev{display:none}
.nav-grp.grp-solo>.grp-body{display:none}
.grp-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:7px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:500;font-size:var(--fs-md);transition:background .16s,color .16s;background:none;border:0;cursor:pointer;font-family:inherit}
.grp-head .gi{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.grp-head .glbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-head .gchev{width:13px;height:13px;flex:0 0 13px;color:var(--text-3);transition:transform .22s var(--ease)}
.grp-head:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-grp.open>.grp-head{color:var(--text)}
.nav-grp.open>.grp-head .gchev{transform:rotate(90deg)}
.grp-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease)}
.nav-grp.open>.grp-body{grid-template-rows:1fr}
.grp-body>div{overflow:hidden;min-height:0}
.nav-sub{display:block;position:relative;padding:7px 12px 7px 40px;border-radius:var(--r-md);color:var(--text-2);font-size:var(--fs-base);transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠ display:block/flex overschrijft het hidden-attribuut — zonder deze twee regels blijft een
   rol-gegate sub-weergave gewoon staan (en klik je op een 403). Zelfde valkuil als bij .nav-item,
   .nav en .pm-item hierboven; die hebben allemaal hun eigen [hidden]-regel. */
.nav-sub[hidden],.grp-head[hidden]{display:none}
.nav-sub::before{content:"";position:absolute;left:22px;top:3px;bottom:3px;width:1px;background:var(--line-2)}
.nav-sub:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-sub.active{color:#fff;background:rgba(154,79,208,.16);box-shadow:inset 2px 0 0 var(--purple),0 0 0 1px rgba(154,79,208,.16)}
.nav-sub.active::before{background:var(--purple)}
/* .nav-foot / .user / .uinfo / .logout zijn 30-08-2026 verwijderd met de zijbalkvoet zelf —
   het gebruikersmenu rechtsboven doet dit al. Geen enkele andere plek gebruikte deze klassen. */
/* ingeklapte rail: labels weg, groepen worden hover-flyouts */
body.collapsed{--sidebar-w:70px}
body.collapsed .sidebar{padding:18px 11px 14px}
body.collapsed .brand{flex-direction:column;gap:13px;padding-bottom:12px}
body.collapsed .brand-name{display:none}body.collapsed .nav{overflow:visible;margin-right:0;padding-right:0}
body.collapsed .nav-kop{display:none}   /* geen ruimte voor tekst in de smalle rail */
body.collapsed .nav-item,body.collapsed .grp-head{justify-content:center;padding:10px 0}
body.collapsed .nav-item{position:relative}
body.collapsed .nav-item .lbl,body.collapsed .grp-head .glbl,body.collapsed .grp-head .gchev{display:none}
/* losse rail-items: het label wordt op hover een KLIKBAAR flyout-paneel (zelfde stijl als de
   groep-flyout). Het label zit in de <a>, dus klikken op het paneel navigeert ook. */
body.collapsed .nav-item:hover .lbl{display:block;position:absolute;left:46px;top:50%;transform:translateY(-50%);min-width:150px;padding:8px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);color:#fff;font-size:var(--fs-base);font-weight:500;white-space:nowrap;text-align:left;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:var(--z-dropdown)}
body.collapsed .nav-item:hover .lbl::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-20px;width:20px}
body.collapsed .sidebar{z-index:var(--z-header)}   /* hef de hele rail (incl. flyout) boven de content — anders schildert de content eroverheen */
body.collapsed .nav-grp{position:relative}
body.collapsed .grp-body{display:none}
body.collapsed .nav-grp:hover>.grp-body{display:block;position:absolute;left:46px;top:0;min-width:188px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:var(--z-dropdown)}
/* onzichtbare hover-brug: overlapt het icoon-vak en geeft verticale speling, zodat het submenu
   open blijft terwijl je de muis er (ook diagonaal) naartoe beweegt */
body.collapsed .nav-grp:hover>.grp-body::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-20px;width:20px}
body.collapsed .nav-grp:hover>.grp-body>div{overflow:visible}
body.collapsed .nav-sub{padding:8px 12px}
body.collapsed .nav-sub::before{display:none}
/* ===================== shell: nav-extra's + werkomgeving + bovenbalk ===================== */
/* nav: scheidingslijn tussen blokken + 'binnenkort'-markering */
/* flex:0 0 1px — NIET laten krimpen: in de flex-kolom .nav (overflow-y:auto) knijpt de layout een
   lege 1px-div anders naar 0 zodra de menulijst hoger is dan de zijbalk (klein scherm) → dividers weg. */
.nav-sep{flex:0 0 1px;height:1px;background:var(--line);margin:9px 10px}
body.collapsed .nav-sep{margin:9px 6px}
.nav[hidden]{display:none}   /* .nav zet display:flex → overschrijft het hidden-attribuut; expliciet verbergen */

/* inklap-knop (los onder het merk, zoals het ontwerp) */
.railtoggle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-md);background:none;color:var(--text-2);font-family:inherit;font-weight:600;font-size:var(--fs-sm);cursor:pointer;transition:border-color .15s,color .15s}
.railtoggle:hover{border-color:var(--text-2);color:var(--text)}
.railtoggle svg{width:16px;height:16px;flex:0 0 16px}
body.collapsed .railtoggle{padding:10px 0}
body.collapsed .railtoggle .lbl{display:none}
.nav-item .soon{margin-left:auto;font-size:var(--fs-nano);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:1px 7px;font-weight:600;flex:0 0 auto}
body.collapsed .nav-item .soon{display:none}

/* werkomgeving-switcher in het merk-blok */
/* BEWUST tweede .brand-blok: alleen het anker voor het uitklap-menu hieronder. De basis (flex,
   padding, onderlijn) staat bovenin bij de app-shell en blijft gelden — niet samenvoegen. */
.brand{position:relative}
.ws-switch{flex:1;display:flex;align-items:center;gap:8px;min-width:0;background:none;border:0;cursor:pointer;padding:5px 6px;border-radius:var(--r-md);font-family:inherit;transition:background .15s}
.ws-switch:hover{background:rgba(255,255,255,.04)}
.ws-switch .logo{flex:1;min-width:0}
.ws-chev{width:13px;height:13px;flex:0 0 13px;color:var(--text-3);transition:transform .2s var(--ease)}
.ws-switch[aria-expanded="true"] .ws-chev{transform:rotate(180deg)}
body.collapsed .ws-switch{justify-content:center}
body.collapsed .ws-chev{display:none}
.ws-menu{position:absolute;top:calc(100% + 4px);left:4px;right:4px;z-index:var(--z-dropdown);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.55);padding:7px}
body.collapsed .ws-menu{left:4px;right:auto;min-width:232px}
.ws-menu-h{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:5px 9px 7px;font-weight:600}
.ws-opt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-md);padding:9px 10px;cursor:pointer;font-family:inherit;transition:background .14s}
.ws-opt:hover{background:rgba(255,255,255,.05)}
.ws-opt b{font-size:var(--fs-base);font-weight:700;color:var(--text)}
.ws-opt span{font-size:var(--fs-2xs);color:var(--text-3);line-height:1.35}
body[data-env="Operations"] .ws-opt[data-env="Operations"],
body:not([data-env="Operations"]) .ws-opt[data-env="Cockpit"]{background:rgba(154,79,208,.16)}

/* bovenbalk */
/* ⚠`space-between` klopt zolang de balk twee kinderen heeft (kruimel · rechterblok). Een DERDE kind
   duwt de kruimel naar het midden van de restruimte — zo zwierf hij op detailpagina's toen de
   terug-chevron ertussen kwam. De chevron staat daarom alleen nog op de telefoon, waar .crumbs
   flex:1 krijgt en de kruimel dus links blijft. Komt er ooit een derde kind bij: geef .crumbs
   margin-right:auto in plaats van deze verdeling op te rekken. */
.shellhead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:12px 12px 0;padding:9px 16px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:0 16px 34px -28px rgba(0,0,0,.85);position:relative;z-index:var(--z-header)}
.crumbs{display:flex;align-items:center;gap:9px;font-size:var(--fs-base);color:var(--text-3);min-width:0}
.crumbs .crsep{opacity:.55}
.crumbs b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* De ouder-kruimel = de weg omhoog op desktop (zie js/kruimel.js). Hij erft de gedempte
   kruimelkleur — hij mag de recordnaam niet overstemmen — maar wordt bij hover/focus vol én
   onderstreept: zonder dat is 'klikbaar' alleen te ontdekken door erop te mikken. */
.crumbs .crumb-up{color:inherit;text-decoration:none;white-space:nowrap;flex:0 0 auto;border-radius:var(--r-sm)}
.crumbs .crumb-up:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.crumbs .crumb-up:focus-visible{outline:2px solid var(--purple, #9a4fd0);outline-offset:2px}
.head-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hsep{width:1px;height:26px;background:var(--line)}
.hwrap{position:relative}

/* globale zoek */
.hsearch{position:relative;width:232px}
.hsearch .hs-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-3);pointer-events:none}
.hsearch input{width:100%;padding:8px 11px 8px 32px;font-family:var(--font-body);font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);color:var(--ink)}
.hsearch input:focus{outline:none;border-color:var(--accent)}
.hsearch-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;z-index:var(--z-dropdown);max-height:62vh;overflow:auto}
.sr-grp{font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);padding:7px 9px 4px;font-weight:600}
.sr-item{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer}
.sr-item:hover{background:rgba(255,255,255,.05)}
.sr-l{font-size:var(--fs-base);color:var(--text);font-weight:500}
.sr-s{font-size:var(--fs-2xs);color:var(--text-3)}
.sr-empty{padding:11px 12px;font-size:var(--fs-sm);color:var(--text-3)}
/* type-badge in de globale zoek (relatie/sale/project duidelijk onderscheiden) */
/* BEWUST tweede .sr-item/.sr-l-blok: de badge hieronder staat absoluut, dus het item wordt anker en
   het label houdt rechts ruimte vrij. Vult de basis drie regels hierboven aan — niet samenvoegen. */
.sr-item{position:relative}
.sr-l{padding-right:58px}
.sr-badge{position:absolute;right:9px;top:8px;font-size:var(--fs-nano);font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-pill);border:1px solid}
.sr-badge.sr-relatie{color:var(--text-2);border-color:var(--line-2)}
/* ⚠Vestiging deelt bewust de neutrale vorm van Relatie (04-09-2026): het is dezelfde soort treffer,
   één niveau dieper. Een eigen kleur zou suggereren dat het een ander soort ding is en zet vijf
   kleuren in één uitklaplijst — vier is al de bovengrens. De groepskop doet het onderscheid. */
.sr-badge.sr-vestiging{color:var(--text-2);border-color:var(--line-2)}
.sr-badge.sr-contact{color:var(--green);border-color:rgba(52,211,154,.5);background:rgba(52,211,154,.12)}
.sr-badge.sr-sale{color:var(--purple);border-color:rgba(154,79,208,.5);background:rgba(154,79,208,.12)}
.sr-badge.sr-project{color:var(--blue);border-color:rgba(43,179,240,.5);background:rgba(43,179,240,.12)}

/* weer-chip */
.weatherchip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill);border:1px solid rgba(232,163,61,.5);background:none;color:#f0c27e;white-space:nowrap;cursor:pointer;font-family:inherit;font-size:var(--fs-sm);font-weight:600}
.weatherchip:hover{border-color:#f0c27e}
.weatherchip[hidden]{display:none}   /* display:inline-flex overschrijft anders het hidden-attribuut */
.weatherchip .wc-ico,.weatherchip .wc-ico svg{display:inline-flex;width:16px;height:16px}

/* icoon-knop (meldingen) */
.hicon{position:relative;width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--line-2);background:none;color:var(--text-2);cursor:pointer;display:grid;place-items:center}
.hicon:hover{border-color:var(--text-2);color:var(--text)}
.hicon svg{width:17px;height:17px}
.bell-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--urgent);box-shadow:0 0 0 2px var(--surface)}

/* gebruikerschip */
.userchip{display:inline-flex;align-items:center;gap:9px;padding:5px 9px 5px 6px;border-radius:var(--r-md);border:1px solid var(--line-2);background:none;cursor:pointer;font-family:inherit}
.userchip:hover{border-color:var(--text-2)}
.uava{width:30px;height:30px;border-radius:var(--r-sm);background:var(--grad-bp);display:grid;place-items:center;color:#fff;font-weight:700;font-size:var(--fs-xs);flex:0 0 30px}
.umeta{text-align:left;line-height:1.15;min-width:0}
.umeta b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.umeta small{display:block;font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.userchip>svg{width:13px;height:13px;color:var(--text-3);flex:0 0 13px}

/* pop-menu's (meldingen + gebruiker) */
.popmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:248px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.55);padding:7px;z-index:var(--z-dropdown)}
.pm-head{font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);padding:6px 9px 7px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-item{display:block;width:100%;text-align:left;padding:8px 9px;border-radius:var(--r-sm);border:0;background:none;cursor:pointer;font-family:inherit;font-size:var(--fs-base);color:var(--text);text-decoration:none}
.pm-item[hidden]{display:none}   /* display:block overschrijft anders het hidden-attribuut (rol-verberging) */
.pm-item:hover{background:rgba(255,255,255,.05)}
.pm-empty{padding:11px 10px;font-size:var(--fs-sm);color:var(--text-3)}
.pm-foot{font-size:var(--fs-2xs);color:var(--text-3);padding:8px 9px 4px;border-top:1px solid var(--line);margin-top:4px}
.pm-item.notif{display:flex;align-items:flex-start;gap:9px}
.nf-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 8px}
.nf-txt{min-width:0}
.nf-txt b{display:block;font-size:var(--fs-sm);font-weight:600}
.nf-txt small{display:block;font-size:var(--fs-xs);color:var(--text-3)}
/* 'Bekijk als persoon'-kiezer in de view-switcher */
.popmenu--wide{min-width:288px}
.pm-head .pm-sub{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-3)}
.pm-sep{height:1px;background:var(--line);margin:6px 2px}
.pm-zoek{width:100%;box-sizing:border-box;margin:2px 0 6px;padding:7px 9px;border:1px solid var(--line);background:var(--panel-2);color:inherit;border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm)}
.pm-personen{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.pm-persoon{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 9px;border-radius:var(--r-sm);border:0;background:none;cursor:pointer;font-family:inherit;color:var(--text)}
.pm-persoon:hover{background:rgba(255,255,255,.05)}
.pm-p-naam{flex:1;min-width:0;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-p-rol{flex:0 0 auto;font-size:var(--fs-2xs);color:var(--text-3);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap}
.pm-p-rol--geen{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.pm-leeg{padding:10px;font-size:var(--fs-sm);color:var(--text-3);text-align:center}
/* chip kleurt paars zolang je als een specifieke persoon kijkt */
.viewas-persoon .viewas-chip{border-color:color-mix(in srgb,var(--purple) 55%,transparent);background:color-mix(in srgb,var(--purple) 14%,var(--surface))}

/* placeholder-scherm (binnenkort) */
.ph-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl)}
.ph-ico{width:54px;height:54px;border-radius:var(--r-xl);background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--text-3);margin-bottom:16px}
.ph-ico svg{width:24px;height:24px}
.ph-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--text)}
.ph-sub{font-size:var(--fs-base);color:var(--text-3);margin-top:6px;max-width:360px}

/* Contactmoment-logboek (relatie-detail) */
.clog-new{display:flex;flex-direction:column;gap:9px;padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.clog-typerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clog-lbl{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.clog-types{display:flex;gap:7px;flex-wrap:wrap}
.clog-with{display:flex;align-items:center;gap:8px;margin-left:auto}
.clog-with[hidden]{display:none}
.clog-sel{width:auto;min-width:140px;padding:6px 10px;font-size:var(--fs-sm);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel-2);color:var(--ink)}
@media(max-width:620px){.clog-with{margin-left:0}}
.cpill{padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--text-2);font-size:var(--fs-xs);cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .12s,color .12s}
.cpill:hover{border-color:var(--text-2);color:var(--text)}
.clog-text{width:100%;min-height:58px;resize:vertical;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:var(--panel-2);color:var(--ink)}
.clog-text:focus{outline:none;border-color:var(--accent)}
.clog-list{display:flex;flex-direction:column}
.clog-item{display:flex;gap:13px}
.clog-rail{display:flex;flex-direction:column;align-items:center;flex:0 0 14px}
.clog-dot{width:11px;height:11px;border-radius:50%;margin-top:3px;box-shadow:0 0 0 3px var(--surface)}
.clog-line{flex:1;width:2px;background:var(--line);margin:3px 0}
.clog-itembody{flex:1;min-width:0;padding-bottom:15px}
.clog-head{display:flex;align-items:baseline;gap:9px}
.clog-type{font-size:var(--fs-sm);font-weight:600}
.clog-meta{font-size:var(--fs-xs);color:var(--text-3)}
.clog-del{margin-left:auto;border:0;background:none;color:var(--text-3);font-size:var(--fs-lg);line-height:1;cursor:pointer;padding:0 2px}
.clog-del:hover{color:var(--urgent)}
.clog-txt{font-size:var(--fs-base);color:var(--text-2);line-height:1.5;margin-top:4px;white-space:pre-wrap}
.clog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.clog-tag{display:inline-flex;align-items:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2xs);font-weight:600;border-radius:7px;padding:2px 9px;text-decoration:none;border:1px solid;transition:background .12s}
.clog-tag--proj{color:var(--green);border-color:color-mix(in srgb,var(--green) 42%,var(--line))}
.clog-tag--sale{color:var(--accent-bright);border-color:color-mix(in srgb,var(--accent-bright) 42%,var(--line))}
.clog-tag:hover{background:rgba(255,255,255,.05)}
.clog-foot{display:flex;align-items:center;gap:12px}
.clog-foot .btn{margin-left:auto}
.clog-plan{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;user-select:none}
.clog-plan input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
.clog-planrow{display:flex;align-items:center;gap:8px;margin-top:6px;padding-left:23px}
.clog-planrow[hidden]{display:none}
.clog-plan-lbl{font-size:var(--fs-xs);color:var(--text-3);font-weight:600;white-space:nowrap}
.clog-planrow input[type=text]{flex:1;min-width:0}
.clog-planrow input[type=date]{flex:0 0 auto;width:160px}
.clog-planrow input{font-family:var(--font-body);font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;background:var(--panel-2);color:var(--ink)}
.clog-planrow input:focus{outline:none;border-color:var(--accent)}
.clog-item--ms .clog-itembody{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;margin-bottom:13px}
.clog-ms-tag{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;font-weight:700}

/* Recente activiteit-feed (activiteitfeed.js) — hergebruikt de clog-tijdlijnrail, items zijn klikbaar */
a.af-item{text-decoration:none;color:inherit;border-radius:var(--r-sm)}
a.af-item:hover .af-txt{color:var(--ink)}
a.af-item:hover .clog-dot{box-shadow:0 0 0 3px var(--surface),0 0 9px currentColor}
.af-item .clog-itembody{padding-bottom:13px}
.af-kop{display:flex;align-items:baseline;gap:9px}
.af-kop b{font-size:var(--fs-sm);font-weight:600}
.af-tijd{font-size:var(--fs-xs);color:var(--text-3)}
.af-txt{font-size:var(--fs-sm);color:var(--text-2);line-height:1.45;margin-top:2px}
.af-koppel{color:var(--accent-bright)}
.af-leeg{font-size:var(--fs-sm);color:var(--text-3);padding:8px 0}
.af-filters{display:flex;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
.af-filters select{flex:1;min-width:0;max-width:220px;font-family:var(--font-body);font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;background:var(--panel-2);color:var(--ink)}

/* Geld-loze rollen (Uitvoering + Inhuur): geld-widgets écht verbergen i.p.v. leeg (€0/—) tonen.
   De server strip't/poort de bedragen al; dit haalt de nu-lege labels/tegels/kolommen weg zodat
   het scherm er niet half-geconfigureerd uitziet. Markeer een geld-element met data-geld. */
body.role-geldloos [data-geld]{display:none !important}

/* Build-stempel in de zijbalkvoet (cache-diagnose) — klein en gedempt */
/* Build-stempel — onderaan élk instellingenscherm (was: de zijbalkvoet). Bewust ingetogen:
   je hoeft 'm niet te zien, je moet 'm kunnen vínden. Selecteerbaar, want hij wordt overgetypt
   in een melding. */
.set-build{margin-top:var(--s-8);padding-top:var(--s-3);border-top:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--text-3);opacity:.65;letter-spacing:.02em;
  user-select:text;cursor:default;font-variant-numeric:tabular-nums}
.set-build:hover{opacity:1}

/* Mijn planning (inhuur/ZZP): eigen beschikbaarheids-grid, 4 weken */
.mp-week{padding:14px 0;border-top:1px solid var(--line)}
.mp-week:first-of-type{border-top:0}
.mp-week-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mp-week-h b{font-size:var(--fs-sm)}
.mp-done{font-size:var(--fs-xs);color:var(--green);font-weight:600}
.mp-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.mp-dag{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);color:var(--text-2);cursor:pointer;font:inherit}
.mp-dag:hover:not([disabled]){border-color:var(--accent)}
.mp-dag[disabled]{opacity:.65;cursor:default}
.mp-dag--vandaag{outline:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.mp-dag-lbl{font-size:var(--fs-2xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.mp-dag-st{font-size:var(--fs-lg);line-height:1;font-weight:700}
.mp-dag.av{border-color:color-mix(in srgb,var(--green) 45%,var(--line));color:var(--green)}
.mp-dag.pa{border-color:color-mix(in srgb,var(--amber,#d99a3a) 45%,var(--line));color:var(--amber,#d99a3a)}
/* 'Niet beschikbaar' = amber arcering, dezelfde als verlof (besluit 21-07: één kleurtaal voor alles
   wat niet inzetbaar is; het ✕-icoon houdt het onderscheid). Was rood — dat las als een fout,
   terwijl een dag niet-beschikbaar opgeven gewoon een geldig antwoord is. Doorgetrokken 29-07 zodat
   dit scherm, het beschikbaarheidsraster en de weekplanning dezelfde taal spreken. Zie .gbk.no. */
.mp-dag.no{border-color:color-mix(in srgb,var(--amber,#d99a3a) 40%,var(--line));color:var(--amber,#d99a3a);
  background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px),var(--panel-2)}
/* Opmerking bij een dag: losse regel onder het statusicoon, zodat je in het grid meteen ziet wáár
   een toelichting staat (volledige tekst in de title). Op één regel afgekapt — een lange opmerking
   mag de tegelhoogte niet uit de rij laten lopen. */
.mp-dag-note-txt{display:flex;align-items:center;gap:3px;max-width:100%;font-size:var(--fs-2xs);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-dag-note-txt svg{flex:none}
@media (max-width:700px){.mp-dagen{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* Sales-tab: 4-metric rij + deal-rijen */
.salesrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.salesrow .sr-lab{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.salesrow .sr-num{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--text);margin-top:4px}
.deal-list{display:flex;flex-direction:column}
.deal-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.deal-row:last-child{border-bottom:0}
a.deal-row.link{text-decoration:none;color:inherit;cursor:pointer;padding-left:10px;padding-right:10px;margin:0 -10px;border-radius:8px;transition:background .12s}
a.deal-row.link:hover{background:rgba(255,255,255,.04)}
a.deal-row.link:hover .deal-t{color:var(--accent)}
.deal-l{flex:1;min-width:0}
.deal-t{font-size:var(--fs-base);font-weight:600;color:var(--text)}
.deal-prog{font-size:var(--fs-xs);color:var(--text-3);margin-left:8px}
.deal-r{text-align:right;flex:0 0 auto}
.deal-v{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;color:var(--text)}
.deal-m{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
@media(max-width:760px){.salesrow{grid-template-columns:repeat(2,1fr)}}
.cp-prim{font-size:var(--fs-nano);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;font-weight:600;margin-left:6px;vertical-align:middle}

@media(max-width:980px){.hsearch{width:160px}}
/* ⚠De 'Bekijk als'-chip is hier BEWUST uitgezonderd. Hij is een .weatherchip (zelfde huid), dus hij
   viel mee weg — maar mobiel.css zette hem onder 700px weer aan, waardoor hij precies tussen 701 en
   820px onzichtbaar was (tablet in portret). Een stand die je eigen schrijfrechten stilzet moet op
   ELKE breedte zichtbaar blijven; zie de toelichting bij .viewas-chip in mobiel.css. */
@media(max-width:820px){.shellhead{padding:10px 14px}.hsearch,.weatherchip:not(.viewas-chip){display:none}}

/* gedeelde pagina-primitieven (nieuwe huisstijl) */
.page-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:5px}
.page-head h1{font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.025em;margin:0;font-family:var(--font-display)}
.page-head .note{color:var(--text-2);font-size:var(--fs-base)}
/* Sale-kop: status-pill + actieknop op de titelregel; alles op één regel, titel kapt af bij krapte */
.page-head.shead{flex-wrap:nowrap;align-items:center}
.page-head.shead h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-head.shead .note,.page-head.shead .badge,.page-head.shead .btn{flex:0 0 auto;white-space:nowrap}
.head-rule{height:2px;background:var(--grad);opacity:.5;border-radius:2px;margin:11px 0 20px}
.empty-state{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:30px 18px;text-align:center;color:var(--text-2);font-size:var(--fs-base)}
/* ---- gedeelde rij-link (.chev / .row-link) ---- */
/* NB: verderop, bij 'gedeelde line-iconen', staat nog een .chev-blok dat display + transition zet.
   Die wint (zelfde gewicht, later in het bestand); pas transitions daar aan, niet alleen hier. */
.chev{width:15px;height:15px;color:var(--text-3);flex:0 0 15px;transition:transform .2s,color .2s}
.row-link:hover .chev{transform:translateX(3px);color:var(--blue)}

/* ---- dashboard v2 (commandopost) ---- */
.db2-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.db2-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-sm);text-decoration:none}
.db2-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
/* Vaste, gelijke blokken: beide kolommen even hoog (stretch); de aandacht-kaart vult zijn kolom
   en de lijst scrolt intern als het maximum wordt overschreden — zo verschuift de layout niet per dag. */
.db2-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:16px}
.db2-grid>.card{display:flex;flex-direction:column;min-height:0;height:100%}
.db2-grid>.card>.body{display:flex;flex-direction:column;flex:1;min-height:0}
.db2-rail{display:flex;flex-direction:column;gap:16px}
.db2-rail>.card{margin-bottom:0}
/* Verlofaanvragen-kaart op het dashboard (beheer/planner) */
.db-vrlcard{margin-bottom:16px;border-left:3px solid var(--blue)}
.db-vrl-list{display:flex;flex-direction:column}
.db-vrl-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-top:1px solid var(--line)}
.db-vrl-row:first-child{border-top:0}
.db-vrl-ic{flex:0 0 auto;color:var(--blue);display:inline-flex}
.db-vrl-ic svg{width:20px;height:20px}
.db-vrl-b{flex:1;min-width:0}
.db-vrl-t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-vrl-m{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-vrl-ok{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:0;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);font:inherit;font-size:var(--fs-xs);font-weight:700;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer}
.db-vrl-ok:hover{background:color-mix(in srgb,var(--green) 30%,transparent)}
.db-vrl-ok:disabled{opacity:.5;cursor:default}
.db-vrl-no{flex:0 0 auto;display:inline-flex;align-items:center;border:1px solid var(--line);background:none;color:var(--text-3);padding:7px 9px;border-radius:var(--r-sm);cursor:pointer}
.db-vrl-no:hover{color:var(--red);border-color:var(--red)}
.db-vrl-no:disabled{opacity:.5;cursor:default}
.db2-attwrap{position:relative;flex:1;min-height:0}
.db2-attlist{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto}
.db2-leadlist{min-height:104px}   /* ~2 lead-slots → rail-hoogte stabiel bij 0-3 leads */
.db2-att{display:flex;align-items:center;gap:13px;padding:12px 4px;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.db2-att:first-child{border-top:0}
.db2-att:hover{background:rgba(255,255,255,.02)}
.db2-att-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 34px;background:rgba(255,255,255,.04)}
.db2-att-ic svg{width:18px;height:18px}
.db2-att-b{flex:1;min-width:0}
.db2-att-t{font-weight:600;font-size:var(--fs-md)}
.db2-att-m{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db2-att-v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--fs-md)}
.db2-att-meer{padding:11px 4px 2px;font-size:var(--fs-xs);color:var(--text-3);border-top:1px solid var(--line)}
.db2-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 10px;color:var(--text-3);text-align:center;font-size:var(--fs-sm)}
.db2-empty svg{width:30px;height:30px;color:var(--green)}
.db2-empty2{color:var(--text-3);font-size:var(--fs-sm);padding:8px 2px}
/* Sales/Projecten-blok — kernparameters: ring (win-rate / op koers) + stat-lijst */
.db2-block{text-decoration:none;color:inherit}
.db2-blockrow{display:flex;align-items:center;gap:16px;margin-top:2px}
.db2-ringwrap{position:relative;flex:0 0 auto;display:grid;place-items:center}
.db2-ringcap{position:absolute;text-align:center;line-height:1.02}
.db2-ringcap b{display:block;font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums}
.db2-ringcap span{font-size:var(--fs-nano);color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.db2-stats{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.db2-stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.db2-stat-l{font-size:var(--fs-sm);color:var(--text-2)}
.db2-stat-v{font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.db2-block .db2-seg{margin-top:14px}
.db2-block>.body>.db2-stats{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.db2-seg{display:flex;gap:2px;height:8px;border-radius:var(--r-pill);overflow:hidden;background:rgba(255,255,255,.05)}
.db2-seg i{display:block;height:100%;min-width:3px}
.db2-seglegend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:var(--fs-2xs);color:var(--text-3)}
.db2-seglegend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* Variant voor een hele VOLZIN in plaats van korte chips (Financieel-dashboard, 'Geld door de keten').
   De nowrap hierboven hoort bij labels als 56 open; op een volzin duwde die de tekst 53px buiten een
   telefoonscherm, waar hij vervolgens werd weggeklipt. Melding Remco 30-07-2026. */
.db2-seglegend--note span{white-space:normal;display:block}
.db2-seglegend i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
/* Komende dagen — full-width weerkaart (7 dagen, prominenter) */
/* LET OP: `margin-bottom:0` haalt het niet — .card{margin-bottom:20px} staat verderop in het bestand
   en wint bij gelijk gewicht. De kaart houdt dus 20px onder zich. Wie dat écht op 0 wil, moet
   .card.db2-weathercard gebruiken; dat is een zichtbare wijziging, geen opruimactie. */
.db2-weathercard{display:block;margin-top:16px;margin-bottom:0}
.db2-week{display:flex;gap:8px}
.db2-wday{flex:1;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 6px 10px;text-align:center;background:var(--panel-2);min-width:0}
.db2-wday.on{border-color:rgba(43,179,240,.45);background:rgba(43,179,240,.08)}
.db2-wday.today{outline:1px solid var(--line-2)}
.db2-wd{font-size:var(--fs-xs);color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.db2-wi{margin:8px 0 5px}.db2-wi svg{width:30px;height:30px}
.db2-wtemp{font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums}
.db2-ww{font-size:var(--fs-2xs);font-weight:600}
.db2-wproj{font-size:var(--fs-2xs);color:var(--text-3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db2-wproj.on{color:#9fd4f2;font-weight:600}
.db2-lead{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.db2-lead:first-child{border-top:0}
.db2-lead:hover{background:rgba(255,255,255,.02)}
.db2-mono{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;background:rgba(154,79,208,.16);color:#cba3e6;flex:0 0 30px}
.db2-lead-age{font-size:var(--fs-xs);font-weight:600;white-space:nowrap}

/* ---- Weekafsluiting-kaart (dashboard Beheer + Financieel) ----
   De zes ketenpunten van #/weekcontrole op het startscherm. De keten zelf is de platform-standaard
   .sbal/.sbal-pill (zie de --pill-*-tokens bovenin); hier alleen de omlijsting. Paarse linkerrand
   omdat het een PROCES is en geen signaal — .db-vrlcard draagt blauw voor 'er ligt iets voor je'. */
.db2-week-af{margin-top:16px;border-left:3px solid var(--purple)}
.db2-week-af--rond{border-left-color:var(--green)}
.db2-week-af .wk-ketenrow{margin-top:2px}
.db2-afrij{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.db2-afmeta{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;min-width:0}
.db2-afmeta b{color:var(--text)}
.db2-afmeta svg{width:15px;height:15px;vertical-align:-3px;color:var(--green)}

/* ---- Eigen weekraster (dashboard Uitvoering + Inhuur) ----
   De vijf werkdagen van je eigen urenweek; klikken opent de urenkalender. Kleur volgt de celtaal
   van de weekmatrix: vlak + waarde, nooit een tekstlabel dat als statuspill leest. */
.db2-mijnweek{display:flex;gap:7px}
.db2-mw{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel-2);padding:9px 5px 8px;text-align:center;text-decoration:none;color:inherit;display:block}
.db2-mw:hover{border-color:var(--line-2);background:rgba(255,255,255,.03)}
.db2-mw.vol{border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.08)}
.db2-mw.deels{border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.08)}
.db2-mw.vrij{opacity:.5}
.db2-mw.today{outline:1px solid var(--line-2)}
.db2-mw-d{font-size:var(--fs-xs);color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.db2-mw-u{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums;margin-top:5px}
.db2-mw-s{font-size:var(--fs-2xs);color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Beschikbaarheidsraster (dashboard Inhuur): 4 weken vooruit, per week doorgegeven of niet ---- */
.db2-besch{display:flex;flex-direction:column;gap:7px}
.db2-bw{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--panel-2);text-decoration:none;color:inherit}
.db2-bw:hover{border-color:var(--line-2)}
.db2-bw-w{font-size:var(--fs-sm);font-weight:700;width:56px;flex:0 0 56px}
.db2-bw-dagen{display:flex;gap:3px;flex:1;min-width:0}
/* De dagbalkjes volgen de KLEURTAAL VAN DE WEEKPLANNING (.gbk), niet die van het
   beschikbaarheidsraster (.zcell) — die twee verschillen namelijk op 'niet beschikbaar'. In de
   weekplanning is dat bewust dezelfde amber arcering als verlof (gebruikerswens 21-07: één
   kleurtaal voor alles wat niet inzetbaar is); het raster en #/planning/mijn kleuren het rood.
   Klassenamen zijn av/pa/no/un, exact BK_CLS uit projectplanning.js.
   ⚠Geen comma-alias op .gbk: dat is een badge met icoon, tekst en een 3px accentrand, en dit is
   een kaal balkje van 16px. Wél dezelfde kleurwaarden — wijzig je .gbk, pas dit dan mee aan. */
.db2-bw-dagen i{flex:1;height:16px;border-radius:var(--r-xs);border:1px solid var(--line);
  background:rgba(255,255,255,.04)}
.db2-bw-dagen i.av{background:rgba(52,211,154,.10);border-color:rgba(52,211,154,.32)}
.db2-bw-dagen i.pa{background:rgba(232,163,61,.10);border-color:rgba(232,163,61,.32)}
.db2-bw-dagen i.no{background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px);border-color:rgba(232,163,61,.32)}
.db2-bw-dagen i.un{background:none;border-color:var(--line)}

/* ⚠`minmax(0,1fr)` en niet `1fr`: een kale `1fr` is `minmax(AUTO,1fr)`, en die auto-ondergrens is
   MIN-CONTENT. Eén brede kaart in de rail (de langste projectnaam/het langste bedrag) trok de kolom
   daarmee naar 424px in een contentbreedte van 351px → 61px overloop op de hele dashboardpagina,
   met de bedragen rechts buiten beeld. Melding Remco 30-07-2026. De 0-ondergrens laat de kolom
   krimpen en de inhoud zelf afbreken. Zelfde valkuil als elders in dit bestand bij .ltable. */
@media(max-width:900px){.db2-grid{grid-template-columns:minmax(0,1fr)}.db2-week{flex-wrap:wrap}.db2-week .db2-wday{flex:1 0 60px}}

/* ---- gedeelde lijst/tabel (.ltable) + CRM-lijst-componenten (redesign) ---- */
.page-head .sub{color:var(--text-2);font-size:var(--fs-base)}
.tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lsearch{margin-left:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;min-width:240px}
.lsearch svg{width:14px;height:14px;color:var(--text-3);flex:0 0 14px}
.lsearch input{background:none;border:0;color:var(--text);font:inherit;outline:none;flex:1}
.lselect{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;color:var(--text);font:inherit;font-size:var(--fs-base);cursor:pointer;max-width:300px}
.ltable{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.ltable table{width:100%;border-collapse:collapse;table-layout:fixed}
.ltable th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:13px 8px 10px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;line-height:1.3;user-select:none}
.ltable th.r,.ltable td.r{text-align:right}
.ltable th .ar{opacity:.6;font-size:var(--fs-micro)}
.ltable td{padding:11px 11px;border-top:1px solid var(--line);font-size:var(--fs-base);vertical-align:middle;overflow-wrap:anywhere}
.ltable tbody tr{cursor:pointer}
.ltable tbody tr:hover td{background:rgba(255,255,255,.025)}
.ltable .val{font-weight:700}
.ltable .tnum{color:var(--text-3);font-size:var(--fs-sm)}
.ltable th.c,.ltable td.c{text-align:center}
/* ---- .ltable, aanvullingen voor declaraties / inkoop / dataportaal ----------------------------
   .ltable was al het huispatroon (crm, facturatie, medewerkers, instellingen, salehub); die drie
   modules hadden hun eigen tabel (.dco-tabel, .ic-tabel, .pa-per) met dezelfde bedoeling maar
   andere maten. Ze verhuizen hierheen, en dat vroeg vier dingen die .ltable nog niet had. */
/* 1. Bedragkolommen krijgen cijfers van gelijke breedte. Zonder dit springen de kommas per rij en
      kun je een kolom niet meer verticaal scannen — juist waar je optelt. */
.ltable td.r,.ltable tfoot td{font-variant-numeric:tabular-nums}
/* 2. Totaalregel. Elke lijst eindigde al met een som, maar elk op een eigen manier opgemaakt. */
.ltable tfoot td{border-top:1px solid var(--line-2);background:rgba(255,255,255,.02);font-weight:700;padding:12px 11px}
.ltable tfoot .lbl{font-weight:600;color:var(--text-3);text-transform:uppercase;font-size:var(--fs-2xs);letter-spacing:.02em}
/* 3. Accentstreep links = de status als KLEUR, zodat je een rij ook kunt scannen zonder de badge
      te lezen. Op de eerste cel i.p.v. de <tr>, want een border op een tr valt weg bij
      border-collapse. Kleur komt uit --acc, per rij gezet. */
.ltable tbody tr>td:first-child{position:relative}
.ltable tbody tr[style*="--acc"]>td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.ltable tbody tr[style*="--acc"]>td:first-child{padding-left:15px}
/* 4. Selectie + bulkbalk: aankruisen in de lijst en in één keer afhandelen. */
.ltable td.sel,.ltable th.sel{width:34px;padding-left:12px;padding-right:0;text-align:center}
.ltable td.sel input,.ltable th.sel input{cursor:pointer;accent-color:var(--accent, var(--groen, #7b5cff));width:15px;height:15px}
.ltable tbody tr.is-gekozen td{background:color-mix(in srgb,var(--accent,#7b5cff) 8%,transparent)}
.lbulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.lbulk .sp{font-size:var(--fs-sm);color:var(--text-2);margin-right:auto}
.lbulk .sp b{color:var(--text);font-variant-numeric:tabular-nums}
/* Een niet-klikbare rij (bv. een subtotaal of een regel zonder detail) hoort geen handje te tonen. */
.ltable tbody tr.geen-klik{cursor:default}
.ltable tbody tr.geen-klik:hover td{background:none}
/* 5. Brede tabel: horizontaal scrollen i.p.v. kolommen platdrukken. `.ltable` is table-layout:fixed
      op 100% breedte — prima bij de 7 kolommen van de facturatielijst, maar declaraties heeft er 12
      en inkoop 9. Zonder dit wordt 'Leverancier' op een smal scherm drie letters per regel. De oude
      module-eigen wrappers (.dco-tabelwrap/.ic-tabelwrap) deden precies dit; het hoort in het
      patroon te zitten, niet per module opnieuw bedacht te worden. */
.ltable--breed{overflow-x:auto}
.ltable--breed table{table-layout:auto;min-width:820px}
.agocell{display:inline-flex;flex-direction:column;line-height:1.05}
.agocell .n{font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.agocell .u{font-size:var(--fs-2xs);color:var(--text-3)}
/* scoringskans-cel in de sales-lijst (percentage of band + dunne balk + basis) */
.skcell .sk{display:flex;flex-direction:column;gap:3px;align-items:center}
.skcell .sk-pct{font-weight:800;font-size:var(--fs-base);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.skcell .sk-band{font-weight:700;font-size:var(--fs-2xs);padding:1px 9px;border-radius:6px;border:1px solid}
.skcell .sk-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;width:82px;max-width:100%}
.skcell .sk-bar i{display:block;height:100%;border-radius:3px}
.skcell .sk-bar.dim i{opacity:.55}
.skcell .sk-basis{font-size:var(--fs-micro);color:var(--text-3)}
.skcell .sk-na{color:var(--text-3);font-weight:700}
.skcell .sk.hoog .sk-pct{color:var(--green)}.skcell .sk.hoog .sk-bar i{background:var(--green)}.skcell .sk.hoog .sk-band{color:#7fe3bd;border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.1)}
.skcell .sk.midden .sk-pct{color:var(--amber)}.skcell .sk.midden .sk-bar i{background:var(--amber)}.skcell .sk.midden .sk-band{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.1)}
.skcell .sk.laag .sk-pct{color:var(--urgent)}.skcell .sk.laag .sk-bar i{background:var(--urgent)}.skcell .sk.laag .sk-band{color:#e3aab1;border-color:rgba(255,93,115,.4);background:rgba(255,93,115,.1)}

/* =========================================================
   Sales-pijplijn (Bord + Lijst) — recon/js/views/lijst.js
   ========================================================= */
.pl-tbar{margin-bottom:16px}
.pl-tbar #pl-view button,.pl-tbar #pl-owner button{white-space:nowrap}
/* snelfilter-chips: staan in dezelfde toolbar-rij als het eigenaar-filter (één balk, geen dubbele) */
.pl-qf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-qf:empty{display:none}
.pl-qf-chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--text-2);background:var(--panel-2);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .14s,border-color .14s,color .14s}
.pl-qf-chip svg{width:13px;height:13px}
.pl-qf-chip:hover{border-color:var(--text-3);color:var(--text)}
.pl-qf-chip .c{font-size:var(--fs-2xs);font-weight:700;background:var(--surface);color:var(--text-3);border-radius:var(--r-pill);padding:0 7px;font-variant-numeric:tabular-nums}
.pl-qf-chip.on{background:rgba(154,79,208,.16);border-color:rgba(154,79,208,.55);color:#e7ddf7}
.pl-qf-chip.on .c{background:rgba(154,79,208,.3);color:#e7ddf7}
.pl-qf-chip.on[data-qf="stil"]{background:rgba(232,163,61,.14);border-color:rgba(232,163,61,.5);color:#f0c27e}
.pl-qf-chip.on[data-qf="stil"] .c{background:rgba(232,163,61,.28);color:#f4d29a}
.pl-qf-clear{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);background:none;border:0;cursor:pointer;font-family:inherit;padding:6px 4px}
.pl-qf-clear:hover{color:var(--text)}
/* avatars: branche-monogram (deal) */
.pl-av{width:24px;height:24px;border-radius:7px;font-size:var(--fs-micro);flex:0 0 24px}

/* --- LIJST (wrapper; de rijen zelf zijn het pl-af-schema verderop) --- */
.pl-listwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.pl-listscroll{overflow-x:auto}

/* afwijs-dialoog (uitkomst markeren op de sale-pagina) */
.afw-card{padding:0;max-width:380px;overflow:hidden}
.afw-head{padding:14px 18px 12px;background:var(--panel-2)}
.afw-head h3{margin:0;font-size:var(--fs-lg)}
.afw-subj{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px}
.afw-grad{height:2px;background:var(--grad-bp)}
.afw-body{padding:16px 18px 18px}
.afw-chips{display:flex;flex-wrap:wrap;gap:7px}
.afw-chip{font-size:var(--fs-sm);padding:6px 12px;border-radius:var(--r-control);border:1px solid var(--line-2);background:transparent;color:var(--text-2);cursor:pointer;font-family:inherit}
.afw-chip:hover{border-color:var(--text-2);color:var(--text)}
.afw-chip.on{border-color:var(--accent);background:var(--blue-dim);color:#9fd4f2;font-weight:600}
.afw-lab{font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:16px 0 6px}
.afw-note{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-control);padding:9px 11px;color:var(--text);font:inherit;font-size:var(--fs-sm);resize:vertical}

/* afgerond: resultatenstrip + lijst */
.pl-afm{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.pl-afm-c{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.pl-afm-c .l{font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pl-afm-c .v{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:700;margin-top:4px}
.pl-afm-c .s{font-size:var(--fs-2xs);color:var(--text-3);margin-top:2px}
.pl-aflist{min-width:600px}
.pl-afth,.pl-afrow{display:grid;grid-template-columns:1fr 110px 104px 30px;align-items:center;gap:12px;padding:11px 16px}
.pl-afth{border-bottom:1px solid var(--line-2);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.pl-afth .r,.pl-afrow .r{text-align:right}
.pl-afrow{border-bottom:1px solid var(--line);cursor:pointer}
.pl-afrow:last-child{border-bottom:0}
.pl-afrow:hover{background:rgba(255,255,255,.03)}
.pl-af-deal{display:flex;align-items:center;gap:10px;min-width:0}
.pl-af-tt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-af-name{font-size:var(--fs-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-af-sub{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.pl-af-val{text-align:right;font-size:var(--fs-base);font-weight:700;color:var(--text)}
.pl-af-date{text-align:right;font-size:var(--fs-xs);color:var(--text-3)}
.pl-af-reopen{width:26px;height:26px;border-radius:var(--r-control);border:1px solid var(--line-2);background:transparent;color:var(--text-3);cursor:pointer;font-size:var(--fs-base);line-height:1}
.pl-af-reopen:hover{border-color:var(--accent);color:var(--accent)}
.pl-af-sp{width:26px}
@media(max-width:760px){.pl-afm{grid-template-columns:1fr}}

/* scoringskans-parameters (Instellingen → Scoringskans) */
.sk-form{display:flex;flex-direction:column;max-width:640px;margin-top:4px}
.sk-grp{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--purple);font-weight:700;margin:20px 0 2px}
.sk-grp:first-of-type{margin-top:10px}
.sk-scope{font-size:var(--fs-micro);letter-spacing:.02em;text-transform:none;font-weight:700;color:var(--text-3);border:1px solid var(--line-2);border-radius:6px;padding:1px 8px}
.sk-frow{display:grid;grid-template-columns:1fr 120px;align-items:start;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.sk-flbl{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:var(--fs-base)}
.sk-fhlp{font-weight:400;font-size:var(--fs-xs);color:var(--text-2);line-height:1.45}
.sk-fex{font-weight:400;font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;border-left:2px solid var(--line-2);padding-left:9px;margin-top:2px}
.sk-frow input{text-align:right;padding:8px 11px;border:1px solid rgba(255,255,255,.14);background:transparent;color:inherit;border-radius:var(--r-sm);font:inherit}
/* stilstand-groep als leesbare zin (vervalperiode + kans-na samengevoegd) */
.sk-verval{max-width:640px;margin-top:8px}
.sk-vlbl{font-size:var(--fs-base);font-weight:600;margin-bottom:4px}
.sk-sent{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:var(--fs-base);color:var(--text-2);margin-top:6px}
.sk-sent input{width:60px;text-align:center;padding:7px 8px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--text);border-radius:var(--r-sm);font:inherit;font-weight:700}
.sk-verval .sk-fex{margin-top:10px}
.gtop{position:relative}
.gtop::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--grad);z-index:3}
.relcell{display:flex;align-items:center;gap:12px}
.relcell .pname{font-weight:600}
.relcell .place{color:var(--text-3);font-size:var(--fs-sm)}
.monogram{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;font-weight:700;font-size:var(--fs-xs);flex:0 0 32px;letter-spacing:.02em}
.brbadge{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:3px 10px;border-radius:7px;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}

/* ---- relatiedetail (redesign) ---- */
.crumb2{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:var(--r-md);padding:7px 13px 7px 10px;margin-bottom:16px;cursor:pointer;text-decoration:none}
.crumb2:hover{color:#fff;border-color:rgba(154,79,208,.5);background:rgba(154,79,208,.12)}
.crumb2 svg{width:14px;height:14px}
.idband{position:relative;display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);padding:18px 20px;overflow:hidden;margin-bottom:18px;flex-wrap:wrap}
/* ⚠MELDING REMCO 01-08-2026: het ⋯-menu op de contactpersoon kwam half achter de kaart eronder.
   Oorzaak is de overflow:hidden hierboven — die houdt de gradient-streep (.gtop::before) binnen de
   afgeronde hoeken, maar knipt óók het menu af, dat op top:calc(100% + 6px) BUITEN de band hangt.
   Alleen opheffen zolang het menu open staat: dicht blijft de streep dus gewoon geklipt. */
.idband:has(.hub-more-menu:not([hidden])){overflow:visible}
.idband .mono-big{width:54px;height:54px;border-radius:var(--r-lg);display:grid;place-items:center;font-weight:800;font-size:var(--fs-2xl);flex:0 0 54px;letter-spacing:.02em}
.idband .who{min-width:0}
.idband .who h1{margin:0;font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em}
.idband .who .sub{color:var(--text-2);font-size:var(--fs-base);margin-top:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.idband .who .pill{font-size:var(--fs-xs);font-weight:600;padding:2px 9px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--text-2)}
.idband .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.idband .qs{text-align:center}
.idband .qs .n{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em}
.idband .qs .l{color:var(--text-3);font-size:var(--fs-xs);margin-top:2px}.cpgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cp2{display:flex;align-items:center;gap:11px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.015);cursor:pointer;text-decoration:none;color:inherit}
.cp2:hover{border-color:rgba(154,79,208,.4);background:rgba(255,255,255,.03)}
.cp2 .nm{font-weight:600;font-size:var(--fs-base)}
.cp2 .fn{color:var(--text-3);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp2 .chev{width:15px;height:15px;color:var(--text-3);flex:0 0 15px}
@media(max-width:760px){.cpgrid{grid-template-columns:1fr}}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.cgrid .card{margin-bottom:0}
.fillcol .body{display:flex;flex-direction:column;height:100%}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
.facts .fact{display:flex;flex-direction:column;min-width:0}
.facts .fact.full{grid-column:1 / -1}
.facts .fact .k{font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:2px}
.facts .fact .v{font-size:var(--fs-base);overflow-wrap:anywhere}
.subhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:15px 0 9px;padding-top:13px;border-top:1px solid var(--line)}
.subhead:first-of-type{border-top:0;padding-top:2px;margin-top:4px}
.locmap{margin-top:auto;padding-top:12px}
.locmap .locmap-ph{height:150px;border:1px dashed var(--line-2);border-radius:var(--r-lg);display:grid;place-items:center;color:var(--text-3);font-size:var(--fs-sm);background:rgba(255,255,255,.015)}
.locmap .locmap-img{position:relative}
.locmap img{width:100%;height:150px;object-fit:cover;border-radius:var(--r-lg);display:block;border:1px solid var(--line)}
.locmap .locmap-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(43,179,240,.35),0 1px 5px rgba(0,0,0,.6)}
.locmap .locmap-cap{position:absolute;left:9px;bottom:9px;background:rgba(6,5,16,.74);border:1px solid var(--line-2);border-radius:7px;padding:3px 9px;font-size:var(--fs-xs);color:var(--text-2)}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}.lrow{display:grid;grid-template-columns:88px minmax(150px,1fr) 112px minmax(0,158px) max-content 26px 84px;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);transition:border-color .15s,box-shadow .15s;color:var(--text);text-decoration:none}
.lrow:hover{border-color:rgba(43,179,240,.45);box-shadow:0 0 0 1px rgba(43,179,240,.18)}
.lrow .snr{color:var(--text-3);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}@media(max-width:1040px){.lrow{display:flex;flex-wrap:wrap;gap:8px 14px}}
/* .badge: één canonieke definitie staat verderop (status badges); dubbele weggehaald bij de token-opschoning */
.badge.muted{border-color:var(--line-2);color:var(--text-2)}
.badge.blue{border-color:rgba(43,179,240,.5);color:#9fd4f2}
.badge.purple{border-color:rgba(154,79,208,.5);color:#cba3e6}
.badge.amber{border-color:rgba(232,163,61,.5);color:#f0c27e}
.badge.green{border-color:rgba(52,211,154,.5);color:#7fe3bd}
.badge.red{border-color:rgba(255,93,115,.45);color:#e3aab1}

/* Instellingen → Sale-statussen & kleuren */
.status-edit{display:flex;flex-direction:column;gap:9px;margin:14px 0 4px}
.se-row{display:grid;grid-template-columns:118px 40px 1fr auto;align-items:center;gap:12px}
.se-row .badge{justify-self:start}
.se-auto{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;justify-self:start}
.se-lbl{padding:8px 11px;border:1px solid rgba(255,255,255,.14);background:transparent;color:inherit;border-radius:7px;font:inherit;width:100%}
.se-cols{display:flex;gap:6px}
.se-sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;background:var(--sw);cursor:pointer;padding:0;opacity:.5;transition:opacity .12s,border-color .12s}
.se-sw:hover{opacity:.85}
.se-sw.on{opacity:1;border-color:var(--text)}

/* Optionele diensten: optie-regel (de oude tab-layout eromheen is vervangen). Hier stond ook nog
   .opt-tag + .opt-tag.doorlopend: die outline-pill had sinds die vervanging geen markup meer, maar
   gaf via zijn `border` wél stil een rand aan de gelijknamige badge verderop (nu .hcalc-opttag). */
.opt-optline{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer}
/* ⚠Nodig omdat deze regel zélf `display` zet: de browserregel [hidden]{display:none} verliest daar
   van, dus `el.hidden = true` verbergt niets. Zie de tab/hub-more-item-les in CLAUDE.md. */
.opt-optline[hidden]{display:none}
/* Een omslagvlag die AAN staat: statusregel i.p.v. schakelaar (zie vlagDefinitief in instellingen.js). */
.vlag-vast{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;
  border:1px solid rgba(52,211,154,.4);background:var(--green-dim);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.vlag-vast-ok{color:var(--green);font-weight:700;flex:none;line-height:1.4}
.opt-optline input{width:16px;height:16px;accent-color:var(--purple);cursor:pointer;flex:none}
.syncs{display:flex;gap:6px}
.sync{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:7px;border:1px solid;white-space:nowrap}
.sync.ok{border-color:rgba(52,211,154,.4);color:#7fe3bd;background:rgba(52,211,154,.06)}
.sync.off{border-color:var(--line-2);color:var(--text-3)}

/* ---- main / views ---- */
main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
/* Optie D: lees-/formulierschermen begrensd (--w-page, gecentreerd); data-dichte views full-width (.view-wide). */
/* ⚠`scrollbar-gutter:stable` (30-08-2026): #view is de scrollende container, dus zodra een scherm
   lang genoeg is verschijnt de scrollbar en wordt de INHOUD 10px smaller. Bij het wisselen tussen
   twee tabbladen — de een lang, de ander kort — schoof daardoor de hele pagina heen en weer.
   Gemeten op facturatie: balkbreedte 1494 (kort) tegen 1484 (lang) bij dezelfde vensterbreedte.
   Met de gutter altijd gereserveerd blijft de inhoudsbreedte gelijk; prijs is 10px marge rechts op
   schermen die niet scrollen. Raakt élke view, en dat is de bedoeling — dit verspringt overal. */
#view{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding:var(--s-4) var(--s-6) 80px;max-width:var(--w-page);margin:0 auto;width:100%}
#view.view-wide{max-width:none}
.view-mount{display:contents}   /* per-navigatie render-mount; transparant voor layout, isoleert verouderde renders (zie route()) */
.viewhead{position:relative;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:13px;margin-bottom:22px}
.viewhead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);opacity:.5;border-radius:2px}
.viewhead h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-4xl);letter-spacing:-.02em;margin:0;line-height:1}
.viewhead .sub{font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);letter-spacing:normal;text-transform:none;color:var(--ink-soft)}
.viewhead .actions{margin-left:auto;display:flex;gap:9px}.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabbar a{padding:9px 16px;font-size:var(--fs-base);font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) 8px 0 0}
.tabbar a:hover{color:var(--ink);background:#1c1f49}
.tabbar a.active{color:#fff;border-bottom-color:var(--accent)}.stepfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.stepfoot .hint{margin-top:6px}
.gegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px}
@media(max-width:700px){.gegrid{grid-template-columns:1fr}}
.gegrid .full{grid-column:1/-1}
.readonlyfld{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-sm);padding:8px 9px;color:var(--ink-soft)}.typeahead{position:relative}
.ta-results{position:absolute;left:0;right:0;top:100%;z-index:var(--z-dropdown);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);margin-top:2px;max-height:220px;overflow:auto;box-shadow:var(--shadow);display:none}
.ta-results.open{display:block}
.ta-item{padding:8px 10px;font-size:var(--fs-sm);cursor:pointer}
.ta-item:hover{background:#1c1f49}
.ta-empty{padding:8px 10px;font-size:var(--fs-sm);color:var(--ink-soft)}
.simnote{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:4px}
.simnote.live{color:var(--green)}

/* ---- cards ---- */
/* kaart-schil (surface/rand/radius/gradient-toprand) = gedeeld met .ph2-card/.ec-card in components.css (D2); hier alleen de delta's */
.card{box-shadow:var(--shadow);margin-bottom:20px}
.card h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.07em;text-transform:uppercase;margin:0;padding:13px 15px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;color:var(--ink)}
.card h2 .n{font-family:var(--font-mono);background:var(--ink);color:var(--paper);width:19px;height:19px;border-radius:5px;display:grid;place-items:center;font-size:var(--fs-2xs)}
.card .body{padding:15px}

/* ---- buttons (één systeem: .btn = primary calm, .btn.ghost/.mini = ghost) ---- */
button{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);border:1px solid rgba(154,79,208,.5);border-radius:var(--r-sm);padding:9px 16px;background:rgba(100,32,133,.22);color:#fff;cursor:pointer;transition:.16s;box-shadow:0 6px 18px -10px rgba(154,79,208,.65);text-decoration:none}
.btn:hover{background:rgba(100,32,133,.34);border-color:rgba(154,79,208,.8)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn:disabled{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--text-3);cursor:default;box-shadow:none}
.btn.ghost,.mini{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);border:1px solid var(--line-2);background:none;box-shadow:none;border-radius:var(--r-sm);padding:7px 12px;cursor:pointer;color:var(--text-2);transition:.15s;text-decoration:none}
.mini[hidden],.btn.ghost[hidden]{display:none}   /* display:inline-flex overschrijft anders het hidden-attribuut (H1) */
.btn.ghost:hover,.mini:hover{border-color:var(--text-2);color:var(--text);background:rgba(255,255,255,.04)}
.btn.ghost:disabled,.mini:disabled{opacity:.5;cursor:default;color:var(--text-3)}
.mini.on{border-color:var(--purple);background:rgba(154,79,208,.16);color:#fff}
/* gedeelde line-iconen */
.ic{flex:0 0 auto;display:inline-block;vertical-align:-2px}
/* Tweede .chev-blok (de basis staat bij 'gedeelde rij-link' bovenin) — bewust, want dit hoort bij de
   icoon-set. De transition MOET hier de kleur meenemen: dit blok overschrijft die van de basis, en
   zonder `color` sprong .row-link:hover .chev hard van grijs naar blauw i.p.v. te faden. */
.chev{display:inline-flex;align-items:center;transition:transform .15s var(--ease),color .2s}
.chev.open{transform:rotate(90deg)}

/* ---- form fields ---- */
label.fld{display:block;font-size:var(--fs-xs);font-weight:600;margin:13px 0 5px}
.row{display:flex;gap:9px;flex-wrap:wrap}.row>div{flex:1;min-width:0}
input,select,textarea{width:100%;font-family:var(--font-mono);font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 9px;background:var(--panel-2);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,179,240,.15)}
/* native dropdown-lijst donker (anders rendert Chrome 'm licht zodra een select een eigen background heeft) */
select{color-scheme:dark}
option,optgroup{background:var(--surface);color:var(--ink)}
.hint{font-size:var(--fs-2xs);color:var(--ink-soft);margin-top:4px;line-height:1.4}
.muted{color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.45}

/* ---- status badges (levensloop) ---- */
/* line-height VAST (niet erven): zonder deze regel erfde de badge de regelhoogte van z'n omgeving
   en was 'ie 22px in de CRM-tabel maar 23,5px in de saleslijst. 3px + 14px + 3px + 2px rand = 22px,
   gelijk aan .ec-badge — de label-band. Zelfde reden bij .tag/.sbal-pill/.vchip/.mw-src hieronder. */
.badge{display:inline-block;font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;line-height:14px;padding:3px 10px;border-radius:var(--r-pill);border:1px solid transparent;background:color-mix(in srgb,currentColor 15%,transparent);white-space:nowrap;text-align:center}
.badge.intake{color:var(--ink-soft)}
.badge.offerte_uit{color:var(--accent-bright)}
.badge.geaccepteerd{color:var(--warn)}
.badge.lopend{color:var(--heading-purple)}
.badge.afgesloten{color:var(--green)}

/* ---- empty/placeholder ---- */
.empty{color:var(--ink-soft);font-size:var(--fs-base);padding:30px 4px;text-align:center}
.placeholder{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:30px 18px;text-align:center;color:var(--text-2);font-size:var(--fs-base)}

/* ---- offerte-formulier: pills (paarse selectie volgens instructiedoc) ---- */
.pillgrp{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.opill{cursor:pointer;border:1.5px solid var(--line);background:var(--panel-2);font-family:inherit;color:var(--ink);text-align:left;transition:border-color .12s,background-color .12s}
.opill-lg{border-radius:var(--r-lg);padding:10px 13px;display:flex;flex-direction:column;gap:2px;min-width:150px}
.opill-rd{border-radius:20px;padding:7px 15px}
.opill .sub{font-size:var(--fs-2xs);color:var(--ink-soft)}
.opill:hover{border-color:var(--text-3)}
.opill.on{border-color:rgba(43,179,240,.55) !important;background-color:rgba(43,179,240,.10) !important;color:var(--ink)}
.opill.on .pt{color:#bfe6fa}
.opill.on .sub{color:#7fc2e8}.inforow{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:7px}
.prodnote{margin-top:6px;display:flex;gap:8px;align-items:center}
.prodnote .pl{font-size:var(--fs-xs);min-width:160px;color:var(--ink-soft)}
.sliderrow{display:flex;align-items:center;gap:12px;margin-top:6px}
.sliderrow input[type=range]{flex:1}
.tag{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-2xs);line-height:13px;padding:2px 8px;border-radius:20px;border:1px solid currentColor;margin-top:6px}
.tag.g{color:var(--green)}.tag.b{color:var(--accent)}.tag.o{color:var(--warn)}.tag.x{color:var(--ink-soft)}/* ---- payload-weergave (fase 1: 'wat fase 2 zou versturen') ---- */
.payload{margin:8px 0}
.payload .plabel{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
pre.pjson{margin:0;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.5;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;overflow:auto;color:var(--ink)}

/* ---- inklapbaar (details) ---- */
details.adv{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2)}
details.adv summary{cursor:pointer;padding:9px 13px;font-size:var(--fs-xs);font-weight:600;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"▸ ";color:var(--accent)}
details.adv[open] summary::before{content:"▾ "}
details.adv .inner{padding:0 13px 13px}

/* ---- intake-view ---- */
.map{height:340px;border-bottom:1px solid var(--line)}

/* ---- Locatie-analyse: split (Invoer/Lagen/Resultaat + permanente kaart, één kaart = analyse + offerte-beeld) ---- */
.loc-split{display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1.3fr);gap:14px;align-items:stretch;height:510px}
.loc-mapcol.card{border-radius:var(--r-xl)}
/* Analyse-resultaat: 2×2-raster zoals het ontwerp i.p.v. flex-wrap */
.loc-pane[data-pane="resultaat"] .stat{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.loc-pane[data-pane="resultaat"] .stat .box{min-width:0;padding:13px 14px}
@media(max-width:760px){.loc-split{grid-template-columns:1fr;height:auto}.loc-mapcol{height:440px}}
.loc-left{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden}
.loc-tabbar{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--line);flex:0 0 auto}
.loc-tab{padding:9px 14px;font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--text-3);cursor:pointer;border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.loc-tab:hover{color:var(--text-2)}
.loc-tab.on{color:var(--text);border-bottom-color:var(--blue)}
.loc-panes{flex:1 1 auto;overflow-y:auto;padding:16px;min-height:0}
.loc-pane{display:none}.loc-pane.on{display:block}
.loc-eyebrow{font-size:var(--fs-2xs);letter-spacing:.15em;text-transform:uppercase;color:var(--blue);font-weight:600;margin:0 0 12px}
.locchk{margin-top:12px;display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer}
.locchk input{width:auto;margin-top:2px;flex:0 0 auto}
.locchk .sub{color:var(--text-3)}

/* Deelgebieden-kiezer van de bewonersbrieven-export (bewonersexport.js → kiesDeelgebieden).
   ⚠MOET SCROLLEN: WS Cazdak heeft 117 deelgebieden, dus een ongelimiteerde lijst duwt de
   Exporteren-knop buiten beeld — precies de fout die de tekenbalk in de locatie-analyse op
   06-09-2026 had (y=1355 terwijl het paneel tot 813 zichtbaar was).
   ⚠En de rij-marge moet KLEINER dan de 12 px van `.locchk` zelf: op 117 rijen is dat anders
   ruim 1.400 px aan lucht. */
.dg-lijst{max-height:min(46vh,340px);overflow:auto;margin-top:10px;padding-right:4px;
  border-top:1px solid var(--line-2)}
.dg-lijst .locchk{margin-top:6px}
.dg-acties{display:flex;align-items:center;gap:8px;margin-top:12px}
.dg-tel{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}

/* De SLEEPHANDLE van een laagrij (intake.js → renderKmzLagen) en de drop-markering.
   Alleen de handle is `draggable`, niet de rij — zie de toelichting daar.
   ⚠`cursor:grab` en tijdens het slepen een duidelijke lijn: zonder markering weet je niet of de
   laag ervóór of erná landt, en dan is de bovenhelft/onderhelft-regel onzichtbaar. */
.kmzdrag{cursor:grab;opacity:.45}
.kmzdrag:hover{opacity:1}
.kmzdrag:active{cursor:grabbing}
.kmzlagen.sleept .kmzrow{transition:none}
.kmzrow.dropvoor{box-shadow:inset 0 2px 0 0 var(--blue)}
.kmzrow.dropna{box-shadow:inset 0 -2px 0 0 var(--blue)}
.loc-lgrp{font-size:var(--fs-2xs);letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:0 0 8px;display:flex;align-items:center}
.loc-lgrp.mt{margin-top:20px}
.loc-lgrp .all{margin-left:auto;font-size:var(--fs-2xs);color:var(--blue);cursor:pointer;letter-spacing:0;text-transform:none;font-weight:600}
.loc-baseopt,.loc-lyr{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;font:inherit;font-size:var(--fs-base);color:var(--text-2);border:1px solid transparent;border-radius:var(--r-md);width:100%;background:none;text-align:left}
.loc-baseopt:hover,.loc-lyr:hover{background:rgba(255,255,255,.03)}
.loc-baseopt .dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 15px}
.loc-baseopt.on{color:var(--text);background:rgba(43,179,240,.06);border-color:rgba(43,179,240,.25)}
.loc-baseopt.on .dot{border-color:var(--blue);box-shadow:inset 0 0 0 3px var(--blue)}
.loc-lyr .sw{width:18px;height:13px;border-radius:3px;flex:0 0 18px;box-sizing:border-box}
/* Swatch-vormen gelijk aan de canvas-/Trello-legenda: gevuld vlak / onderbroken rand / stip */
.loc-lyr .sw.box,.loc-maplegend .li .sw.box{border:1.5px solid}
.loc-lyr .sw.dash,.loc-maplegend .li .sw.dash{border:1.5px dashed;background:transparent!important}
.loc-lyr .sw.dot,.loc-maplegend .li .sw.dot{position:relative;background:transparent!important}
.loc-lyr .sw.dot::after,.loc-maplegend .li .sw.dot::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--dotc)}
.loc-lyr .lt{min-width:0;flex:1}
.loc-lyr .lc{font-size:var(--fs-micro);color:var(--text-3);margin-left:6px;text-transform:uppercase;letter-spacing:.05em}
.loc-lyr .swi{margin-left:auto;width:32px;height:18px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;flex:0 0 32px;transition:background .15s}
.loc-lyr .swi::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#cfd2e6;transition:left .15s}
.loc-lyr.on{color:var(--text)}.loc-lyr.on .swi{background:var(--blue)}.loc-lyr.on .swi::after{left:16px;background:#fff}
.kmzlagen{margin-top:13px}
.kmzlist{display:flex;flex-direction:column;gap:4px;margin:0 0 8px}
/* De rij is een ZOOMKNOP: klikken kadert de kaart op deze laag in. Sinds 08-09-2026 is dit de ENIGE
   plek waar je dat doet — de locatie-tabs over de kaart heen zijn weg (85 pills op TP Dreef 5).
   Sterker dan `.editing` (.06), zodat de twee naast elkaar leesbaar blijven als je een ingezoomde
   laag ook hernoemt. Tint-recept: vulling .10–.15, rand .4–.6. */
.kmzrow{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.02);cursor:pointer;transition:background .12s,border-color .12s}
.kmzrow:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}
.kmzrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kmzrow.gezoomd{border-color:rgba(43,179,240,.55);background:rgba(43,179,240,.12)}
.kmzrow.editing{border-color:var(--blue);background:rgba(43,179,240,.06);cursor:default}
.kmzrow .kmzinp{cursor:text}
/* ⚠ZELFDE BREEDTE ALS DE CHEVRON (`.kmzbtn` = 28px). Een rij mét chevron en een rij met dit icoon
   staan anders 13px uit elkaar en de laagnamen worden een rafelige kolom — gemeten 06-09-2026 in
   beide standen. Het icoon zelf blijft 15px; alleen de plek eromheen is gelijkgetrokken. */
.kmzic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;color:var(--text-3)}
.kmznm{flex:1;min-width:0;font-size:var(--fs-base);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kmzmeta{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap}
.kmzinp{flex:1;min-width:0;font:inherit;font-size:var(--fs-base);height:30px;padding:0 9px;border-radius:7px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text)}
.kmzinp:focus{outline:none;border-color:var(--blue)}
.kmzbtn{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:none;color:var(--text-3);cursor:pointer;transition:.15s}
.kmzbtn:hover{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.kmzbtn.ok:hover{color:var(--green);border-color:var(--green)}
.kmzrow .kmzbtn[data-edit]{opacity:.4}
.kmzrow:hover .kmzbtn[data-edit]{opacity:1}
/* Rol per laag: is dit het vlieggebied (= projectgebied, stuurt analyse + prijs), de scope, of zijn
   het grondslagpunten? De cockpit stelt een rol voor bij het inladen; hier overrule je 'm. */
.kmzrol{flex:0 0 auto;font:inherit;font-size:var(--fs-2xs);height:26px;padding:0 6px;border-radius:7px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2);cursor:pointer;max-width:130px}
.kmzrol:focus{outline:none;border-color:var(--blue)}
.kmzrol:hover{color:var(--text);border-color:var(--blue)}
.kmzrow .kmzbtn.del{opacity:.3}
.kmzrow:hover .kmzbtn.del{opacity:1}
.kmzbtn.del:hover{color:var(--red);border-color:var(--red)}
/* UITGEKLAPTE LAAG — de losse objecten eronder. `.kmzwrap` houdt de rij en zijn objecten bij elkaar
   in de flex-kolom van `.kmzlist`; zonder die wikkel zou de gap van de lijst tussen een rij en zijn
   eigen objecten vallen en lezen ze als losse lagen. */
.kmzwrap{display:flex;flex-direction:column;gap:4px}
.kmzchev{border-color:transparent}
.kmzchev svg{transition:transform .15s var(--ease)}
.kmzchev.uit svg{transform:rotate(90deg)}
.kmzrow.uit{border-color:var(--line-2);background:rgba(255,255,255,.045)}
/* Ingesprongen en rustiger dan een laagrij: dit is een detail ván die laag, geen laag ernaast.
   De inspringing is de breedte van de chevron (28px) plus de rij-gap, zodat de objectnamen onder de
   laagnaam uitlijnen. */
.kmzobjs{display:flex;flex-direction:column;gap:3px;margin-left:37px}
.kmzobj{display:flex;align-items:center;gap:9px;padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.015);cursor:pointer;transition:background .12s,border-color .12s}
.kmzobj:hover{border-color:var(--line-2);background:rgba(255,255,255,.045)}
.kmzobj:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kmzobj__nm{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kmzobj__meta{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap}
/* ⚠EIGEN MATEN: de globale regel `input,select,textarea{width:100%;padding:8px 9px}` raakt deze rij
   niet (er zit geen formulier-element in), maar de knoppen zijn hier wél kleiner dan in een laagrij
   — 24 i.p.v. 28 — zodat een object visueel ondergeschikt blijft aan zijn laag. */
.kmzobj .kmzbtn{width:24px;height:24px}
.kmzobj .kmzbtn.del{opacity:.3}
.kmzobj:hover .kmzbtn.del{opacity:1}
/* ⛔DE LAAG-PRULLENBAK MOET ANDERS OGEN DAN DIE VAN EEN OBJECT. Ze waren identiek en stonden 48 px
   uit elkaar, terwijl deze de héle laag weggooit. Bij meer dan één object draagt hij het AANTAL —
   breder, met het cijfer ernaast — zodat het verschil zichtbaar is vóór de klik en niet pas in het
   bevestigingsvenster. `width:auto` wint van de vaste 28px van .kmzbtn. */
/* MARKERING IN DE LAAGRIJ: deze laag heeft aandacht nodig. Tint-recept uit CLAUDE.md — vulling
   .10–.15, rand .4–.6. Amber = nakijken (blokkeert de analyse), neutraal = mededeling. Staat vlak
   ná de naam, want dáár kijk je als je zoekt wélke laag het is. */
.kmzbev{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:1px solid var(--line-2);border-radius:6px;background:rgba(255,255,255,.04);
  color:var(--text-3);cursor:pointer;transition:.15s}
.kmzbev:hover{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.09)}
.kmzbev.nakijken{color:var(--amber);
  border-color:color-mix(in srgb,var(--amber) 50%,transparent);
  background:color-mix(in srgb,var(--amber) 13%,transparent)}
.kmzbev.nakijken:hover{background:color-mix(in srgb,var(--amber) 22%,transparent)}
/* De bevinding waar je net op klikte, kort oplichten — zie toonBevindingVan. */
.gbrow.gb-wijs{animation:gbwijs 1.6s var(--ease)}
@keyframes gbwijs{
  0%,60%{box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 55%,transparent)}
  100%{box-shadow:0 0 0 2px transparent}}
.kmzbtn.del.kmzdel-laag{width:auto;min-width:28px;gap:3px;padding:0 6px}
.kmzdel-n{font-size:var(--fs-2xs);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
/* Altijd leesbaar: de gewone prullenbak staat op opacity .3 tot je de rij aanraakt, maar een knop
   die vier vormen weggooit mag niet half onzichtbaar zijn. */
.kmzrow .kmzbtn.del.kmzdel-laag{opacity:.75}
.kmzrow:hover .kmzbtn.del.kmzdel-laag{opacity:1}
/* Lagen-acties: een vlieggebied maken uit het projectgebied. Je krijgt er lang niet altijd een
   aangeleverd, en zonder deze knop teken je 'm buiten de cockpit — dan is de dekking een gok. */
.kmzacties{display:flex;align-items:center;gap:8px;margin:2px 0 4px;flex-wrap:wrap}
.kmzact-lbl{font-size:var(--fs-xs);color:var(--text-3)}
.kmzact-inp{width:56px;font:inherit;font-size:var(--fs-xs);height:26px;padding:0 7px;text-align:right;border-radius:7px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text)}
.kmzact-inp:focus{outline:none;border-color:var(--blue)}
/* MEERDERE LAGEN OF VORMEN TEGELIJK KIEZEN (06-09-2026). De kop draagt de aan/uit-knop; die kan niet
   in de balk "Zelf toevoegen", want die rendert maar één keer en het label beweegt hier mee. */
.kmzkop{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.kmzkop .loc-eyebrow{flex:1;min-width:0;margin:0}
/* ⛔EXPLICIETE MAAT — ANDERS SLOOPT DE GLOBALE REGEL DIT. `input,select,textarea{width:100%;
   padding:8px 9px;border:…}` geldt ook voor een checkbox: die vult dan de hele regel, staat
   gecentreerd en duwt de laagnaam buiten het kader. Zie de `.opt-optline input`-regel, waar
   dezelfde valkuil al eerder is opgelost. */
.kmzkies{flex:0 0 auto;width:16px;height:16px;margin:0;padding:0;accent-color:var(--blue);cursor:pointer}
.kmzobj .kmzkies{width:15px;height:15px}
/* De hele rij is in deze stand het klikvlak; de tint zegt wat er straks weggaat. */
.kmzrow.isgekozen,.kmzobj.isgekozen{border-color:rgba(43,179,240,.55);background:rgba(43,179,240,.12)}
.kmzrow.kiezen:hover,.kmzobj.kiezen:hover{border-color:rgba(43,179,240,.4)}
.kmzselhint{margin-top:2px}
/* Rood volgens het tint-recept (vulling .12, rand .5) — er is geen .btn-gevaarvariant in deze
   stylesheet, en een gewone ghost-knop leest niet als "dit gooit iets weg". */
.kmzbulk__del{border-color:rgba(255,93,115,.5);background:rgba(255,93,115,.12);color:#ffb9c3}
.kmzbulk__del:hover{border-color:var(--urgent);background:rgba(255,93,115,.2);color:#fff}
/* REKENGRONDSLAG — waarop de analyse gaat rekenen. Nooit een verborgen stand: hij staat hier én op de
   knop. Rood = geblokkeerd (het vlieggebied dekt het projectgebied niet, of is er kleiner dan). */
.loc-basis{margin-top:14px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-xs);line-height:1.55;border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--text-2)}
.loc-basis.ok{border-color:rgba(52,211,154,.35);background:rgba(52,211,154,.07)}
.loc-basis.warn{border-color:rgba(232,163,61,.40);background:rgba(232,163,61,.07)}
.loc-basis.blok{border-color:rgba(226,59,59,.50);background:rgba(226,59,59,.09);color:var(--text)}
.loc-basis b{color:var(--text)}
.loc-basis .lb-act{margin-top:6px;color:var(--text-3)}
.loc-mapcol{position:relative;min-width:0;padding:0;overflow:hidden}
/* eigen z-index → de kaart vormt een stacking-context; Leaflets panes (tegels/overlays/controls)
   blijven binnenin en dekken de overlay-UI (legenda/badge/status, z-index 6) niet meer af. */
.loc-mapcol .map{position:absolute;inset:0;height:100%;width:100%;border:0;z-index:1}
.loc-offernote{position:absolute;top:12px;right:12px;z-index:6;display:inline-flex;align-items:center;gap:7px;background:rgba(6,5,16,.85);border:1px solid rgba(43,179,240,.32);border-radius:var(--r-md);padding:7px 12px;font-size:var(--fs-xs);color:#9fd4f2;font-weight:600}
.loc-offernote svg{width:13px;height:13px}
.loc-mapcol .status{position:absolute;left:12px;bottom:12px;z-index:6;background:rgba(6,5,16,.84);border:1px solid var(--line-2);border-radius:var(--r-md);padding:7px 13px;font-size:var(--fs-xs);margin:0;max-width:52%}
.loc-maplegend{position:absolute;right:12px;bottom:12px;z-index:6;background:rgba(6,5,16,.88);border:1px solid var(--line-2);border-radius:var(--r-md);padding:9px 12px;min-width:124px}
.loc-maplegend .lh{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:7px}
.loc-maplegend .li{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text-2);padding:2px 0}
.loc-maplegend .li .sw{width:18px;height:12px;border-radius:3px;flex:0 0 18px;box-sizing:border-box}
.loc-maplegend .none{font-size:var(--fs-xs);color:var(--text-3)}
.loc-maplegend .lhint{font-size:var(--fs-micro);color:var(--text-3);line-height:1.35;margin-top:6px;padding-top:6px;border-top:1px solid var(--line);max-width:196px}
/* Basiskaart-hint: het geladen gebied valt buiten de dekking van de gekozen luchtfoto (bv. een Belgisch
   project op de NL-ondergrond) → benoem dat en wijs de juiste basiskaart aan, i.p.v. een grijze kaart
   zonder uitleg. Zweeft midden-boven, onder de locatietabs en de offerte-badge. */
.loc-bmhint{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);background:rgba(6,5,16,.90);border:1px solid rgba(232,163,61,.45);border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-xs);color:var(--text-2);box-shadow:var(--shadow)}
.loc-bmhint b{color:var(--amber)}
.bmhint-btn{flex:0 0 auto;font:inherit;font-size:var(--fs-xs);font-weight:600;color:#100b04;background:var(--amber);border:0;border-radius:var(--r-sm);padding:5px 10px;cursor:pointer;white-space:nowrap}
.bmhint-btn:hover{filter:brightness(1.08)}
/* Instellingen → Kaartlegenda & lijnstijlen */
.kl-list{display:flex;flex-direction:column;margin-top:10px}
.kl-groep{display:flex;flex-direction:column;gap:1px;padding:14px 4px 7px;border-bottom:1px solid var(--line-2)}
.kl-groep:first-child{padding-top:2px}
.kl-groep b{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.kl-groep span{font-size:var(--fs-xs);color:var(--text-3)}
.kl-row{display:flex;align-items:center;gap:14px;padding:9px 4px;border-bottom:1px solid var(--line)}
.kl-row:last-child{border-bottom:0}
/* Zoneregels (Instellingen → Zoneregels)
   Alleen LAYOUT — de invoervelden zijn ec-field/ec-input uit components.js, dus hier geen eigen
   input-stijl meer (dat dupliceerde de componentbibliotheek en liep er stilletjes uit de pas). */
.zr-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-1);border-bottom:1px solid var(--line)}
.zr-lbl{flex:0 0 250px;font-size:var(--fs-base);color:var(--text)}
.zr-row .ec-field{margin:0}
/* Veldlabels alleen op de kop-rij van een groep; de inputs houden hun aria-label. */
.zr-row--kop{align-items:flex-end}
.zr-row--kop .zr-lbl{padding-bottom:var(--s-2)}
.zr-row:not(.zr-row--kop) .ec-field__label{display:none}
.zr-row .ec-field:first-of-type{flex:0 0 90px}   /* dagen */
.zr-row .ec-field:last-of-type{flex:1;min-width:0}   /* route */
.zr-bar{margin-top:var(--s-4)}
.zr-kies{margin:var(--s-1) 0 var(--s-3);align-items:flex-end}
.zr-pick{flex:0 0 420px;max-width:100%;margin:0}
.zr-zone{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);background:var(--panel-2)}
.zr-zone-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)}
.zr-zone-h b{font-size:var(--fs-base)}
.zr-zone-h .ec-btn--icon:hover{color:var(--red)}
.zr-zone-g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2) var(--s-3)}
.zr-zone-g .ec-field{margin:0}
.zr-zone-g .zr-wide{grid-column:1/-1}
@media(max-width:900px){.zr-zone-g{grid-template-columns:1fr 1fr}.zr-lbl{flex-basis:170px}.zr-row{flex-wrap:wrap}}
.kl-sw{flex:0 0 26px;display:flex;align-items:center;justify-content:center}
.kl-sw .sw{width:22px;height:14px;border-radius:3px;box-sizing:border-box;position:relative;display:inline-block}
.kl-sw .sw.box{border:1.6px solid}
.kl-sw .sw.dash{border:1.6px dashed;background:transparent!important}
.kl-sw .sw.dot{background:transparent!important}
.kl-sw .sw.dot::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:var(--dotc)}
.kl-lbl{flex:1;min-width:0;font-size:var(--fs-base);color:var(--text)}
.kl-col{width:44px;height:28px;padding:0;border:1px solid var(--line-2);border-radius:7px;background:none;cursor:pointer}
.kl-style{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.kl-st{background:none;border:0;padding:6px 13px;font:inherit;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;transition:.12s}
.kl-st+.kl-st{border-left:1px solid var(--line-2)}
.kl-st.on{background:var(--blue);color:#fff}
.kl-style-na{font-size:var(--fs-xs);color:var(--text-3);font-style:italic;padding:0 13px}

/* Instellingen-pagina (offerte-instructie / teksten / template) */
.set-meta{font-size:var(--fs-sm);color:var(--ink-soft);margin:2px 0 10px}
.set-meta.override{color:var(--accent)}.set-bar{display:flex;align-items:center;gap:12px;margin-top:14px}
.inforow.warn{color:#f0b860;border-left:3px solid #f0b860;padding-left:10px}
.opvset-toggle{display:flex;align-items:center;gap:9px;font-size:var(--fs-base);color:var(--ink);font-weight:500;cursor:pointer;margin:14px 0 4px;user-select:none}
.opvset-toggle input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.opvset-form{display:flex;flex-direction:column;gap:12px;padding:10px 0 4px 25px;max-width:520px;transition:opacity .15s}
.opvset-frow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.opvset-lbl{font-size:var(--fs-base);color:var(--text-2)}
.opvset-form input{font-family:var(--font-body);font-size:var(--fs-base);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background:var(--panel-2);color:var(--ink)}
.opvset-form input[type=text]{flex:1;max-width:300px}
.opvset-form input[type=number]{width:90px;text-align:right}
.opvset-form input:focus{outline:none;border-color:var(--accent)}

/* tandwiel in de zijbalk-voet */

/* Instellingen — layout met categorie-rail */
/* ==================================================================================================
   Instellingen — ÉÉN navigatie (herontwerp 30-08-2026)
   --------------------------------------------------------------------------------------------------
   Was: een rail met de categorieën + een horizontale tabbalk met de tabbladen van één categorie.
   Twee nav-widgets op hetzelfde niveau, waarvan geen enkele het geheel toonde: de rail wist niet
   wélke instelling open stond, de tabbalk niet wat er buiten de categorie bestond. Na het kiezen
   van een instelling wist je dus niet meer waar je was — en de tabbalk beslaat bij een grote
   categorie ±170px tegen ±40px bij een kleine, dus de inhoud sprong ook nog verticaal.

   Nu draagt de zijkolom alles. `.tabbar`(-groepen) is hier weg; `.tabbar` zelf blijft bestaan voor
   de andere schermen die 'm gebruiken.
   ⚠`.set-rail-lbl` blijft staan: dat is buiten de navigatie om een algemeen small-caps-labeltje
   geworden (5 plekken in instellingen.js). Niet weghalen omdat de rail weg is. */
/* De ROUTE is `wide` (zoals de rest van de cockpit), maar een FORMULIER hoort niet 1400px breed
   te zijn — daarom begrenst de tweede kolom zichzelf. 1120px is precies wat .set-main effectief
   al was binnen de oude 1440px-cap, dus geen enkel bestaand tabblad verspringt; alleen de
   startpagina wint de volle breedte. Zie de leesbreedte-regel bij #view. */
.set-layout{display:grid;grid-template-columns:262px minmax(0,1120px);gap:20px;align-items:start}
/* Een DATA-tabblad (backtest van tien kolommen: Prijsmodel-ijking) is geen formulier en krijgt de
   volle breedte van de route — de 1120px-leesbreedte hierboven blijft de regel voor alle andere
   tabbladen. Melding Remco 07-09-2026: "het instellingen venster is niet erg breed, ik zie de
   kolommen niet goed" — de tabel scrolde binnen 1120px (.ltable--pm heeft min-width 1240px), dus de
   laatste kolommen stonden buiten beeld. Aan te zetten per tabblad met `breed: true` in CATEGORIES
   (instellingen.js); zie docs/instellingen-redesign.md §10. */
.set-layout--breed{grid-template-columns:262px minmax(0,1fr)}
@media(max-width:920px){.set-layout{grid-template-columns:1fr}}
.set-rail-lbl{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding:6px 8px 9px}

.set-zij{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 10px;position:sticky;top:12px;overflow:visible}
.set-zij::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad);border-radius:var(--r-lg) var(--r-lg) 0 0}
@media(max-width:920px){.set-zij{position:static}}
/* Met alle categorieën open zijn het 50+ tabstops vóór de inhoud. */
.set-zij-skip{position:absolute;left:-9999px;top:0;z-index:var(--z-sticky);
  background:var(--blue);color:#04121c;font-weight:600;font-size:var(--fs-sm);
  padding:7px 11px;border-radius:0 0 var(--r-sm) 0;text-decoration:none}
.set-zij-skip:focus{left:0}
.set-zij-terug{display:block;padding:2px 8px 10px;font-size:var(--fs-sm);color:var(--text-2);text-decoration:none}
.set-zij-terug:hover{color:var(--text)}
/* --text-2, niet --text-3: gemeten 5,92:1 tegen 2,91:1 op dit vlak (eis 4,5:1). Deze labels dragen
   navigatiegewicht, dus ze moeten leesbaar zijn — zie docs/instellingen-redesign.md §8. */
.set-zij-sec{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-2);font-weight:600;padding:12px 8px 5px}
.set-zij-sec:first-of-type{padding-top:2px}

.set-zij-cat{width:100%;display:flex;align-items:center;gap:9px;padding:9px;border:0;
  background:none;border-radius:var(--r-sm);color:var(--text-2);font-family:var(--font-display);
  font-size:var(--fs-base);text-align:left;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease)}
.set-zij-cat:hover{background:rgba(255,255,255,.045);color:var(--text)}
.set-zij-cat:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.set-zij-cat[aria-expanded="true"]{color:#fff;font-weight:600}
.set-zij-cat .ico{flex:0 0 16px;width:16px;height:16px;display:grid;place-items:center;color:var(--text-3)}
.set-zij-cat[aria-expanded="true"] .ico{color:var(--purple)}
.set-zij-cat .ico svg{width:15px;height:15px}
.set-zij-cat-lbl{flex:1 1 auto;min-width:0}
.set-zij-tel{flex:0 0 auto;font-size:var(--fs-2xs);font-variant-numeric:tabular-nums;
  color:var(--text-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:0 6px;line-height:16px}
.set-zij-chev{flex:0 0 11px;width:11px;height:11px;color:var(--text-3);transition:transform .2s var(--ease)}
.set-zij-cat[aria-expanded="true"] .set-zij-chev{transform:rotate(90deg)}

/* De grid-truc animeert naar de natuurlijke hoogte, zodat er geen max-height geraden hoeft te
   worden die bij een lange categorie stiekem afkapt. */
.set-zij-kids{display:grid;grid-template-rows:0fr;margin:1px 0 3px 16px;padding-left:9px;
  border-left:1px solid var(--line);transition:grid-template-rows .22s var(--ease)}
.set-zij-kids.open{grid-template-rows:1fr}
.set-zij-bin{overflow:hidden;min-height:0}
@media(prefers-reduced-motion:reduce){.set-zij-kids{transition:none}}
.set-zij-sub{font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-2);font-weight:600;padding:9px 8px 3px}

.set-zij-item{display:flex;align-items:center;gap:8px;padding:9px;border-radius:var(--r-sm);
  color:var(--text-2);text-decoration:none;font-size:var(--fs-base);
  transition:background .13s var(--ease),color .13s var(--ease)}
.set-zij-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.set-zij-item:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.set-zij-item[aria-current="page"]{background:var(--sel-bg);color:#fff;font-weight:600;
  box-shadow:inset 2px 0 0 var(--purple)}
.set-zij-item-lbl{min-width:0}
/* Het SOORT zit in de vorm én de kleur, niet in kleur alleen: een instelling krijgt geen teken,
   een alleen-lezen overzicht een ring, een actie een ruit. Zo blijft het onderscheid staan voor wie
   die kleuren niet onderscheidt (en in grijstinten). De tekst zit erbij in een .vh-span. */
.set-zij-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:transparent}
.set-zij-item.is-lees .set-zij-dot,.set-kaart-sub a.is-lees .set-zij-dot{border:1.5px solid var(--blue)}
.set-zij-item.is-actie .set-zij-dot,.set-kaart-sub a.is-actie .set-zij-dot{
  flex-basis:7px;width:7px;height:7px;background:var(--amber);border-radius:1px;transform:rotate(45deg)}
@media(max-width:920px){
  .set-zij-item,.set-zij-cat{padding:12px 9px}   /* raakmaat op de telefoon */
}

/* Kopregel: de instelling is de h1, de categorie staat erboven. Eerder stond hier altijd
   'Instellingen' — de grootste tekst op het scherm vertelde dus nooit waar je was. */
.set-head{display:flex;align-items:flex-start;gap:var(--s-3);flex-wrap:wrap}
.set-head-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-head-cat{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--purple);font-weight:600}
.set-head h1{margin:0}
.set-head h1:focus{outline:none}
.set-head h1:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-xs)}
.set-head-soort{align-self:center;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;border-radius:var(--r-pill);padding:3px 10px}
.set-head-soort.is-lees{background:var(--blue-dim);color:#9fd4f2;border:1px solid rgba(43,179,240,.5)}
.set-head-soort.is-actie{background:var(--warn-bg);color:#f0c689;border:1px solid rgba(232,163,61,.5)}

/* Instellingen → "Dit toestel" — de meetpagina voor schermgedrag (js/views/toestel.js).
   ⚠Prefix bewust `dtm-` en niet `tm-`: components.css gebruikt `.tm-row`/`.tm-list`/`.tm-nm` al voor
   de termijnenlijst. Een tweede betekenis onder dezelfde prefix is precies hoe een bestaand scherm
   stil kapotgaat.
   Label links, waarde rechts — behalve op een smal scherm, en dat is nu juist waar deze pagina
   gelezen wordt: daar zou de waarde tot een paar tekens knijpen, dus valt hij onder het label. */
.dtm-grid{display:flex;flex-direction:column;margin-top:4px}
.dtm-rij{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.dtm-rij:first-child{border-top:0}
.dtm-lbl{flex:1 1 auto;min-width:0;color:var(--text-2)}
.dtm-val{flex:0 1 auto;min-width:0;text-align:right;font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dtm-rij--nadruk .dtm-lbl{color:var(--text)}
.dtm-rij--nadruk .dtm-val{color:var(--text);font-weight:600}
@media(max-width:520px){
  .dtm-rij{flex-direction:column;gap:1px}
  .dtm-val{text-align:left}
}
.dtm-legenda{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.dtm-leg{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.6}
.dtm-swatch{flex:0 0 18px;width:18px;height:18px;border-radius:5px;border:1px solid rgba(255,255,255,.25);margin-top:3px}
.dtm-leg-tekst{flex:1;min-width:0}

/* Instellingen — startpagina (#/instellingen zonder tabblad): de kaart van het hele menu, zodat je
   ziet wát er is in plaats van middenin één instelling te landen. */
.set-start{display:flex;flex-direction:column;gap:20px}
.set-start-zoek{max-width:520px;width:100%}
.set-start-zoek .set-zoek{padding:10px 14px;font-size:var(--fs-base);margin-bottom:0}
.set-start-zoek .set-zoek-uit{margin:6px 0 0}
/* ⭐GELIJKE HOOGTES, en dat is een bewuste keuze na twee eerdere pogingen.
   De kaarten zijn lijsten van ongelijke lengte (2 t/m 9 items). Drie varianten geprobeerd:
     1. grid + align-items:start  → gat van 244px onder de korte kaart, halflege rijen
     2. kolom-masonry             → geen gaten meer, maar de ONDERRANDEN liepen uiteen; dat leest
                                    nog steeds als rommelig ("niet nette uitgelijnde blokken")
     3. grid + grid-auto-rows:1fr → ELKE kaart even hoog, dus een strak rechthoekig raster
   Variant 3 kost witruimte onder een korte kaart, en dat is de prijs die bewust betaald wordt:
   uitlijning weegt hier zwaarder dan compactheid.
   ⚠DRIE kolommen is geen willekeurig getal: sectie 'Instellingen' heeft 6 kaarten, dus 3×2 is
   exact vol — geen halflege rij. Daarom vaste breekpunten i.p.v. auto-fit: dat zou op een breed
   scherm 4 of 5 kolommen geven en de 6 weer scheef verdelen.
   Bij één kolom vervalt de gelijke hoogte (auto): daar lijnt niets uit en zou het alleen
   witruimte kosten. */
.set-start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
@media(max-width:1180px){.set-start-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.set-start-grid{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Dezelfde twee secties als in de zijkolom, zodat overzicht en navigatie hetzelfde verhaal vertellen. */
.set-start-sec{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-2);font-weight:600;margin-top:var(--s-2)}
.set-start-sec:first-of-type{margin-top:0}
.set-kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.set-kaart-kop{display:flex;align-items:center;gap:12px;padding:13px 15px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line);transition:background .15s}
.set-kaart-kop:hover{background:rgba(255,255,255,.04)}
.set-kaart-kop .ico{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(154,79,208,.16);color:var(--purple)}
.set-kaart-tit{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.15}
.set-kaart-tit em{font-weight:400;font-size:var(--fs-sm);font-style:normal;line-height:1.35;color:var(--text-2)}
.set-kaart-tel{margin-left:auto;flex:0 0 auto;align-self:flex-start;font-size:var(--fs-2xs);font-variant-numeric:tabular-nums;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.set-kaart-lijst{padding:8px 9px 10px;display:flex;flex-direction:column;gap:8px}
.set-kaart-sub{display:flex;flex-direction:column}
.set-kaart-sublbl{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding:3px 6px 4px}
.set-kaart-sub a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-size:var(--fs-base);transition:background .15s,color .15s}
.set-kaart-sub a:hover{background:rgba(255,255,255,.05);color:var(--text)}

/* Alleen voor schermlezers. Nodig omdat het soort (instelling/overzicht/actie) in de VORM van een
   stip zit, en een vorm voor een schermlezer niets is. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* AI-instructie — bewerkbare sectiekaartjes */
.si-card{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden;background:rgba(255,255,255,.02)}
.si-head{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;user-select:none}
.si-head:hover{background:rgba(255,255,255,.03)}
.si-chev{color:var(--muted);width:12px;font-size:var(--fs-xs)}
.si-ttl{font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.si-cbody{padding:0 13px 13px}
.si-ta{width:100%;min-height:120px;resize:vertical;font-size:var(--fs-base);line-height:1.55}
/* AI-instructie per hoofdstuk (standaardtekst-basis + AI-gedrag-badge) */
.aii-card{border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:10px;padding:13px 15px;background:rgba(255,255,255,.02)}
.aii-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.aii-ttl{font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.aii-badge{font-size:var(--fs-xs);padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap;font-weight:600}
.aii-badge.vast{background:rgba(43,179,240,.16);color:#5fc8f5}
.aii-badge.ai{background:rgba(123,59,191,.26);color:#c6a3f0}
.aii-badge.basis{background:rgba(29,158,117,.20);color:#62d1aa}
.aii-basis{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:11px}
.aii-basis-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.aii-basis-lbl{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.aii-basis-link{font-size:var(--fs-xs);color:var(--accent);text-decoration:none;white-space:nowrap}
.aii-basis-link:hover{text-decoration:underline}
.aii-basis-prev{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}
.aii-basis-prev.note{font-style:italic;color:var(--muted)}
.aii-basis-extra{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.aii-instr-lbl{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.aii-overig-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--ink-soft);font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:6px 0;margin-bottom:6px}
.aii-overig-toggle:hover{color:var(--ink)}
.aii-overig-toggle .si-chev{width:12px}/* Calculatie 2-koloms (asset_15): secties links, vaste samenvattingskolom rechts.
   NB max-width van .of-step.calc-step staat één keer verderop (bij de asset_15-sectie). */
.calc-head2{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:2px}
.calc-head2-l{min-width:0}
.calc-head2-l .hint{display:block;margin-top:8px}
#cd-msg:empty{display:none}
.calc-h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-3xl);margin:6px 0 5px;letter-spacing:-.02em}
.calc-head2-l .muted{font-size:var(--fs-sm);max-width:560px}.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:18px;align-items:start}
.calc-left{min-width:0}
.calc-add-secties{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.calc-right{display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
.calc-right .card{margin-bottom:0}@media(max-width:1000px){.calc-grid{grid-template-columns:1fr}.calc-right{position:static}}
.calc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.calc-head h2{font-size:var(--fs-xl);margin:0 0 2px}
.calc-head .muted{font-size:var(--fs-sm);max-width:640px}.calc-empty{font-size:var(--fs-sm);color:var(--muted);padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}.calc-add{background:none;border:none;color:var(--accent);font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:8px 0}.cf-gun{background:var(--accent);color:#06204a}
.cf-lev{background:var(--brand-purple);color:#fff}/* Catalogus (Instellingen → Prijzen & calculatie) */
.cat-tbl{width:100%;border-collapse:collapse;margin:10px 0;font-size:var(--fs-base)}
.cat-tbl th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding:6px 8px;border-bottom:1px solid var(--line)}
.cat-tbl th.num,.cat-tbl td.num{text-align:right}.cat-tbl th.ctr,.cat-tbl td.ctr{text-align:center}
.cat-tbl td{padding:5px 8px;border-bottom:1px solid var(--line)}
.cat-tbl input{padding:6px 8px}
/* Status-afwijkingen: compacte tellerrij boven de opschoonlijst. Bewust géén .ec-kc-kerncijfers —
   dat zijn dashboard-datavisuals; hier is het getal een werkvoorraad, geen prestatie. */
.sa-tellers{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-4) 0}
.sa-teller{flex:1 1 130px;min-width:130px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--panel-2)}
.sa-teller b{display:block;font-size:var(--fs-xl);line-height:1.1;font-variant-numeric:tabular-nums}
.sa-teller span{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);margin-top:2px}
.sa-teller small{display:block;font-size:var(--fs-2xs);color:var(--ink-soft)}
/* De 'geen gevolgen'-groep staat dicht: een lijst die altijd vol staat wordt niet gelezen. */
.sa-ruis{margin-top:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-3)}
.sa-ruis>summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-3);list-style:none}
.sa-ruis>summary::-webkit-details-marker{display:none}
.sa-ruis>summary::before{content:'▸ ';font-size:.9em}
.sa-ruis[open]>summary::before{content:'▾ '}
.sa-ruis>summary:hover{color:var(--text)}
.sa-ruis .cat-tbl{opacity:.72}
/* Tussenkop boven de kruistabel van de interne-uren-rapportage. */
.ri-kop{display:flex;align-items:center;gap:8px;margin:var(--s-6) 0 var(--s-2);font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cat-savebar{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cat-dcard{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px;background:var(--panel-2)}
.cat-dhead{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.cat-dnaam{flex:1;font-weight:600}
.cat-dtoel{width:100%;margin-bottom:8px}
.cat-dmeta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:var(--fs-sm);color:var(--ink-soft)}
.cat-dchk{display:flex;align-items:center;gap:5px}
/* Tarief-regels (abonnement): één regel per periode — Jaar boven, Half jaar eronder. */
.cat-arates{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.cat-arate{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-soft)}
.cat-arate-lbl{display:inline-block;min-width:72px;font-weight:600;color:var(--ink)}
.cat-roval{white-space:nowrap}
.cat-arate b{color:var(--ink);font-weight:600}
.cat-sub{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:8px 0 5px}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px}
.cat-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);padding:4px 9px;border:1px solid var(--line);border-radius:20px;cursor:pointer;color:var(--ink-soft)}
.cat-chip.on{border-color:var(--accent);background:rgba(43,179,240,.12);color:var(--ink)}
.cat-chip.ro{cursor:default}
/* Bewuste bewerk/verwijder-actie (alleen-lezen → potlood/prullenbak; bewerken → vinkje) */
.cat-acties{white-space:nowrap}
.cat-ic{background:transparent;border:1px solid transparent;border-radius:7px;padding:3px 6px;font-size:var(--fs-md);line-height:1;cursor:pointer;opacity:.72;transition:opacity .12s,background .12s,border-color .12s}
.cat-ic:hover{opacity:1;background:var(--panel);border-color:var(--line)}
.cat-ic.del:hover{border-color:var(--red);background:rgba(240,101,92,.12)}
.cat-ic.done{border-color:var(--accent);background:rgba(43,179,240,.12);opacity:1}
.cat-tbl tr.cat-editing td,.cat-dcard.cat-editing{background:rgba(43,179,240,.06)}
.cat-dcard.cat-editing{border-color:rgba(43,179,240,.32)}
.cat-sw{display:inline-block;width:26px;height:14px;border-radius:4px;border:1px solid var(--line);vertical-align:middle}
/* Kleurkiezer per urensoort: het ENIGE bewerkbare veld in die tabel (tarieven blijven vergrendeld).
   Eigen padding-regel nodig omdat `.cat-tbl input` een tekstveld-padding zet — dat geeft het
   kleurvlakje anders een rand van lucht om zichzelf heen. */
.cat-kleur{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.cat-kleur input[type=color]{width:34px;height:22px;padding:0;border:1px solid var(--line);border-radius:5px;background:none;cursor:pointer}
.cat-kleur input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.cat-kleur input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}
.cat-kleur span{font-size:var(--fs-2xs);color:var(--ink-soft);font-variant-numeric:tabular-nums}
/* Geblokkeerde catalogus-rij: bestaat nog als etiket op oude boekingen, maar is niet meer te
   kiezen. Gedempt tonen i.p.v. verbergen — anders lijkt bestaande data uit het niets te komen. */
.cat-tbl tr.cat-geblok td{opacity:.55}
.cat-blokbadge{font-size:var(--fs-2xs);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line-2);white-space:nowrap}
.cat-dnaam-ro{flex:1;font-weight:600}
.cat-dtag{font-size:var(--fs-xs);padding:2px 9px;border-radius:20px;border:1px solid var(--line);color:var(--ink-soft)}
.cat-dro{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:4px}
.tablocked input,.tablocked select,.tablocked textarea,.tablocked button,.tablocked [contenteditable="true"],.tablocked .pillgrp{pointer-events:none;opacity:.62}
/* Systeem B knoppen-hiërarchie (B2): .btn.grad = dé actie van het scherm (max. één — AI-generatie,
   afronden) · .btn = rustige gevulde primair (Nieuwe sale, + Sectie toevoegen) · .btn.cyan =
   secundair met accent · .btn.ghost = tertiair. Geen ID-uitzonderingen meer. */
.btn.grad{background:linear-gradient(90deg,#2bb3f0,#9a4fd0);border:none;color:#fff;font-weight:600;box-shadow:none}
.btn.grad:hover{filter:brightness(1.07);background:linear-gradient(90deg,#2bb3f0,#9a4fd0)}
.btn.cyan{background:none;box-shadow:none;color:#8fd3f5;border-color:rgba(43,179,240,.45)}
.btn.cyan:hover{background:rgba(43,179,240,.09);border-color:rgba(43,179,240,.7)}
.btn[hidden]{display:none}
.cd-locked{opacity:.5;cursor:default}
.cd-veldduur{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2);margin-top:12px}
.cd-veldduur svg{color:var(--blue);flex:0 0 auto}
.cd-kname{font-size:var(--fs-base)}
.cd-kname-txt{display:flex;align-items:center;color:var(--text)}
.cd-knum{text-align:right;font-size:var(--fs-base);height:32px}

/* ===== Calculatie — asset_15 (secties + elementen + projectprijs-kolom) ===== */
.of-step.calc-step{max-width:1500px}
.calc-step .calc-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
.calc-step .calc-right{top:18px}
.c2-extra-h{display:flex;align-items:center;gap:10px;margin:26px 0 13px}
.c2-extra-h>span:first-child{font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;color:var(--text-2);text-transform:uppercase}
.c2-extra-line{flex:1;height:1px;background:var(--line)}
/* --- sectie (Systeem B · lijnlogica: hub-kaart met 3px status-toplijn — groen = in de
   prijs, paars = optioneel, cyaan = doorlopend; rails binnenin = arbeid/kosten) --- */
.c2-sec{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:6px 15px 15px;margin-bottom:16px;overflow:visible;--cac:var(--green)}
.c2-sec[data-status="optioneel"]{--cac:var(--purple)}
.c2-sec[data-status="doorlopend"]{--cac:var(--blue)}
.c2-sec::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--cac);border-radius:var(--r-xl) var(--r-xl) 0 0}
.c2-sec-h{padding:11px 2px 12px;border-bottom:1px solid var(--line)}
.c2-sec:not(.open) .c2-sec-h{border-bottom:none;padding-bottom:6px}
/* Geen zij-padding: de body lijnt zo uit met .c2-sec-h erboven (die heeft 2px). Verderop stond nog
   een tweede .c2-sec-body{padding:14px 16px} uit de vorige calculatie-opzet; die won stil en duwde
   de body 14px naar binnen t.o.v. zijn eigen kop. Weggehaald — laat hier geen tweede blok ontstaan. */
.c2-sec-body{padding:14px 0 0}
.c2-sec-top{display:flex;align-items:flex-start;gap:11px}
.c2-sec-tog{display:flex;align-items:center;gap:7px;cursor:pointer;background:none;border:none;padding:2px 0 0;flex:0 0 auto}
.c2-sec-num{font-size:var(--fs-xs);font-weight:700;background:var(--ink);color:var(--paper);width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:0 0 20px}
.c2-sec-chev{width:13px;height:13px;color:var(--text-3);display:inline-flex;transition:transform .2s;transform:rotate(-90deg)}
.c2-sec-chev.open{transform:rotate(0)}
.c2-sec-chev svg{width:13px;height:13px}
.c2-sec-id{flex:1;min-width:0}
.c2-sec-title{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:4px;padding:1px 0 3px;font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.c2-sec-desc{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:4px;padding:5px 0 3px;margin-top:7px;font-size:var(--fs-sm);font-style:italic;color:var(--text-2)}
/* sectienaam/omschrijving als tekst (klik = in/uitklappen); bewerken via het potlood */
.c2-sec-namerow{display:flex;align-items:center;gap:8px}
.c2-sec-nametxt{font-size:var(--fs-lg);font-weight:700;color:var(--text);cursor:pointer;padding:1px 0 2px}
.c2-sec-edit{background:none;border:none;color:var(--text-3);cursor:pointer;padding:2px;display:inline-flex;flex:0 0 auto;opacity:0;transition:opacity .12s,color .12s}
.c2-sec-h:hover .c2-sec-edit{opacity:1}
.c2-sec-edit:hover{color:var(--text)}
.c2-sec-edit svg{width:13px;height:13px}
.c2-sec-desctxt{font-size:var(--fs-sm);font-style:italic;color:var(--text-2);margin-top:5px}
.c2-sec-editdone{margin-top:9px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);font-size:var(--fs-xs);font-weight:600;padding:5px 13px;border-radius:8px;cursor:pointer}
.c2-sec-editdone:hover{border-color:var(--text-3)}
.cd-kdienst{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:7px;color:var(--text-2);font-size:var(--fs-sm);padding:5px 8px;height:auto}
/* Groepen in een sectie (lijnlogica): label BOVEN een onderscheidbaar blok; het blok draagt
   de domein-rail (verticaal = subonderdeel): cyaan = diensten/arbeid, paars = kosten. */
.c2-gh{display:flex;align-items:baseline;gap:9px;margin:16px 2px 7px}
.c2-sec-body>.c2-gh:first-child{margin-top:0}
.c2-gh.tog{cursor:pointer}
.c2-gh-t{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.c2-gh-t.cy{color:#8fd3f5}
.c2-gh-t.pu{color:#c3a7e6}
.c2-gh-t.gr{color:#7fe3bd}
.c2-gh-s{font-size:var(--fs-xs);color:var(--text-3);flex:1}
.c2-gh-tot{font-size:var(--fs-sm);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}.c2-blok{background:var(--panel-2);border:1px solid var(--line-2);border-left:2px solid var(--line-2);border-radius:var(--r-md);padding:3px 13px}.c2-blok-pu{border-left-color:#9a4fd0}
.c2-blok-gr{border-left-color:var(--green)}
.c2-blok .c2-addrow{border-top:1px solid var(--line);margin-top:4px;padding:10px 2px}
.c2-blok>.c2-kel:first-child,.c2-blok>.c2-kel-sum:first-child{border-top:none}
.c2-blok-pu .c2-el-link.accent{color:#c3a7e6;border-color:rgba(154,79,208,.45)}
.c2-blok-gr .c2-el-link.accent{color:#7fe3bd;border-color:rgba(52,211,154,.45)}
.c2-blok-empty{font-size:var(--fs-sm);color:var(--text-3);padding:8px 2px}
/* kostenpost als leesregel + uitklap-editor */
.c2-kel{border-top:1px solid rgba(255,255,255,.07)}
.c2-kel-sum{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:1px solid rgba(255,255,255,.07);cursor:pointer;border-radius:7px;transition:background .12s}
.c2-kel-sum:hover{background:rgba(255,255,255,.035)}
.c2-kel-sum .c2-el-chev{transform:rotate(-90deg)}
.c2-kel-h{display:flex;align-items:center;gap:9px;padding:9px 2px 4px;cursor:pointer}
.c2-kel-name{flex:1;min-width:0;font-size:var(--fs-md);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2-kchip{font-size:var(--fs-2xs);color:#8fd3f5;background:rgba(43,179,240,.16);padding:2px 9px;border-radius:12px;white-space:nowrap;flex:0 0 auto;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.c2-kel-fields{display:flex;flex-wrap:wrap;gap:10px 14px;padding:4px 2px 10px 25px}
.c2-kfld{display:flex;flex-direction:column;gap:4px;min-width:0}
.c2-kfld-l{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.c2-kfld .cd-knum{width:84px;height:32px;text-align:right}
.c2-kfld .cd-kname,.c2-kfld .cd-kname-txt{min-width:120px}
.c2-kfld .cd-kdienst{min-width:150px}
.c2-kel-eenh{font-size:var(--fs-base);color:var(--text-2);padding:6px 2px}
.c2-sec-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.c2-sec-statusrow{display:flex;align-items:center;gap:10px}
.c2-sec-tot{font-size:var(--fs-md);font-weight:800;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.c2-sec-rm{background:none;border:none;color:var(--text-3);font-size:var(--fs-xs);font-weight:500;cursor:pointer;padding:0}
.c2-sec-rm:hover{color:var(--red)}
.c2-sec-actions{display:flex;align-items:center;gap:12px}
.c2-sec-copy{background:none;border:none;color:var(--text-3);font-size:var(--fs-xs);font-weight:500;cursor:pointer;padding:0}
.c2-sec-copy:hover{color:var(--accent)}
.c2-sec-ctrl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.c2-seg{display:inline-flex;gap:3px;padding:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.c2-seg-r{margin-left:auto}
.c2-seg-b{padding:5px 12px;border-radius:6px;border:1px solid transparent;background:none;color:var(--text-2);font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap}
.c2-seg-b.on{background:var(--blue-dim);color:var(--accent-bright);border-color:rgba(43,179,240,.4)}
/* Sectie-status segmented: In de prijs (groen) | Optioneel (paars) — semantische kleuren */
.c2-sec-seg .c2-seg-b:first-child.on{background:rgba(52,211,154,.14);color:#7fe3bd;border-color:rgba(52,211,154,.42)}
.c2-sec-seg .c2-seg-b:last-child.on{background:rgba(154,79,208,.18);color:#c3a0ea;border-color:rgba(154,79,208,.5)}
.c2-aant{display:inline-flex;align-items:center;gap:6px}
.c2-aant-l{font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.c2-aant-n{width:50px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:var(--fs-base);font-weight:600;text-align:right;padding:4px 6px}
.c2-aant-e{width:78px;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:4px;padding:2px 0;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.c2-aant-edit{background:none;border:none;color:var(--text-3);cursor:pointer;padding:2px;margin-left:-4px;display:inline-flex;flex:0 0 auto;transition:color .12s}
.c2-aant-edit:hover{color:var(--text)}
.c2-aant-edit svg{width:12px;height:12px}
/* inline-bewerkbare velden: schoon in rust, subtiele hint bij hover/focus (geen stippellijn) */
.c2-sec-title:hover,.c2-sec-desc:hover,.c2-el-name:hover,.c2-el-toel:hover,.c2-soort:hover,.c2-aant-e:hover{background:rgba(255,255,255,.045)}
.c2-sec-title:focus,.c2-sec-desc:focus,.c2-el-name:focus,.c2-el-toel:focus,.c2-soort:focus,.c2-aant-e:focus{background:rgba(255,255,255,.06);border-bottom-color:var(--blue)}
/* --- element (dienst) --- */
.c2-el{margin-bottom:0}
.c2-els .c2-el:not(:last-child){border-bottom:1px solid var(--line)}
.c2-el.open{padding:4px 0 12px}
/* dichtgeklapte dienst = rustige, scanbare regel (naam · samenvatting · prijs) */
.c2-el-sum{display:flex;align-items:center;gap:11px;padding:11px 6px;border-radius:8px;cursor:pointer;transition:background .12s}
.c2-el-sum:hover{background:rgba(255,255,255,.04)}
.c2-el-sum .c2-el-chev{transform:rotate(-90deg)}
.c2-el-sum-id{flex:1;min-width:0}
.c2-el-sum-name{font-size:var(--fs-md);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2-el-sum-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.c2-el-sum-meta{font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.c2-el-sumx{background:none;border:none;color:var(--text-3);cursor:pointer;padding:3px;display:inline-flex;flex:0 0 auto;opacity:0;transition:opacity .12s}
.c2-el-sum:hover .c2-el-sumx{opacity:1}
.c2-el-sumx:hover{color:var(--red)}
.c2-el-sumx svg{width:14px;height:14px}
/* vergrendeld catalogus-tarief = platte tekst i.p.v. invoerveld (read-only-onderscheid) */
.c2-tarief.cd-locked{background:transparent;border-color:transparent;opacity:1;color:var(--text-2);cursor:default;font-weight:500}
.c2-el-h{display:flex;align-items:center;gap:8px}
.c2-el.open>.c2-el-h{cursor:pointer;padding:5px 6px;margin:0 -6px;border-radius:8px;transition:background .12s}
.c2-el.open>.c2-el-h:hover{background:rgba(255,255,255,.035)}
.c2-el.open>.c2-el-h:hover .c2-el-chev{color:var(--text)}
.c2-el-chev{width:14px;height:14px;color:var(--text-3);background:none;border:none;cursor:pointer;padding:0;display:inline-flex;flex:0 0 14px;transition:transform .2s,color .12s;transform:rotate(-90deg)}
.c2-el-chev.open{transform:rotate(0)}
.c2-el-chev svg{width:14px;height:14px}
.c2-el-name{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:4px;padding:1px 0 3px;font-size:var(--fs-md);font-weight:600;color:var(--text);cursor:text}
/* dienstnaam/toelichting als tekst + potlood (zelfde werkwijze als de sectienaam) */
.c2-el-id{flex:1;min-width:0}
.c2-el-nametxt{font-size:var(--fs-md);font-weight:600;color:var(--text);cursor:pointer;padding:1px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2-el-toeltxt{font-size:var(--fs-sm);font-style:italic;color:var(--text-2);padding:2px 0;margin-bottom:5px}
/* Doorbelasting (vaste prijs / nacalculatie) bovenaan de open dienst. Rustig zolang het de standaard
   is; zodra het nacalculatie is mag het opvallen — dan betekenen de bedragen eronder iets anders. */
.c2-el-fm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 9px}
.c2-el-fm label{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-3)}
.c2-el-fm select{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;cursor:pointer}
.c2-el-fm.is-nacalc select{border-color:color-mix(in srgb,var(--blue) 55%,transparent);color:var(--blue);font-weight:600}
.c2-el-fm-hint{font-size:var(--fs-xs);color:var(--blue)}

/* ---- Tabblad Tarieven (02-08-2026) — alleen bij nacalculatie ----
   Eén regel per (dienst, urensoort), gegroepeerd op urensoort omdat dát is wat de klant op de
   offerte ziet. Op de design-tokens; geen eigen kleuren. */
#cd-subtabs{margin:0 0 14px}
#cd-subtabs:empty{display:none}
.tar-lijst{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-3)}
.tar-groep{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);background:var(--panel-2)}
/* Tint-recept zoals de planningsbalken/statuscellen: vulling + rand in dezelfde kleur, met radius.
   Amber = 'let op', niet urgent — een tariefconflict houdt je tegen bij het versturen, maar het is
   geen fout in de data. */
.tar-groep.is-bots{background:rgba(232,168,56,.10);border-color:rgba(232,168,56,.45)}
.tar-kop{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.tar-kop b{font-size:var(--fs-sm);color:var(--text)}
.tar-waarschuwing{font-size:var(--fs-2xs);color:var(--amber);font-weight:600}
.tar-zicht{display:inline-flex;align-items:center;cursor:pointer}
.tar-zicht input{cursor:pointer}
.tar-zicht input:disabled{cursor:default;opacity:.45}
.tar-geenuren{font-size:var(--fs-2xs);color:var(--text-3)}
/* Een urensoort die niet op de offerte komt: gedimd, maar wél leesbaar en bewerkbaar — je moet het
   tarief nog kunnen zien en aanpassen, alleen komt de regel niet bij de klant. */
.tar-groep.is-verborgen{opacity:.55}
.tar-groep.is-verborgen .tar-kop b{text-decoration:line-through;text-decoration-thickness:1px}
.tar-rij{display:grid;grid-template-columns:1fr auto 118px;align-items:center;gap:var(--s-3);padding:4px 0}
.tar-rij+.tar-rij{border-top:1px solid var(--line)}
.tar-dienst{font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tar-uren{font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tar-tar{display:inline-flex;align-items:center;gap:5px;justify-self:end;color:var(--text-3);font-size:var(--fs-xs)}
.tar-in{width:84px;font:inherit;font-size:var(--fs-sm);text-align:right;color:var(--text);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font-variant-numeric:tabular-nums}
.tar-in:focus{outline:none;border-color:color-mix(in srgb,var(--blue) 55%,transparent)}
.tar-uitleg{margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
.tar-uitleg.muted{color:var(--text-3)}
/* Tarieven als eigen wizardstap (03-08-2026). Soorten zónder begrote uren stonden grijs TUSSEN de
   rest met een uitgezet vinkje, en dat leest als 'op slot' i.p.v. 'heeft hier geen effect'. Nu een
   eigen kopje met een rustiger blok eronder — zichtbaar anders, niet zichtbaar geblokkeerd. */
.tar-kopje{margin-top:var(--s-5);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);font-weight:700}
.tar-lijst-stil .tar-groep{background:transparent;border-style:dashed}
.tar-toevoeg{margin-top:var(--s-3)}
.tar-toevoeg select{font:inherit;font-size:var(--fs-xs);color:var(--text-2);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;cursor:pointer}
.tar-toevoeg select:focus{outline:none;border-color:color-mix(in srgb,var(--blue) 55%,transparent)}
.tar-weg{margin-left:auto;display:inline-flex;align-items:center;background:none;border:0;cursor:pointer;
  color:var(--text-3);padding:2px;border-radius:var(--r-sm)}
.tar-weg:hover{color:var(--urgent);background:rgba(233,90,90,.12)}
.tar-rij-eigen .tar-dienst{font-style:italic}
/* Melding boven de calculatie zodra de raming uit staat. Tint-recept (amber = 'let op', geen fout);
   zie het tint-recept in CLAUDE.md — vulling .10–.15, rand .4–.6. */
.calc-geenraming{margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);
  background:rgba(232,168,56,.10);border:1px solid rgba(232,168,56,.45)}
/* ⚠`> b` en `> span`, NIET kaal `b`/`span`. Kaal trof ook de `<b>`-accenten BÍNNEN de uitleg
   ('de <b>tarieven</b> die je hier zet'), en die werden dan blok-elementen: elk accent brak de zin
   op een eigen regel. Gezien in een screenshot van Remco 03-08-2026 — een regel die op zichzelf
   klopt, maar in de context van een genest element precies het verkeerde doet. */
.calc-geenraming > b{display:block;font-size:var(--fs-sm);color:var(--text)}
.calc-geenraming > span{display:block;margin-top:3px;font-size:var(--fs-xs);line-height:1.55;color:var(--text-2)}
.calc-geenraming > span b{color:var(--text)}
.tar-schakel{display:flex;align-items:flex-start;gap:var(--s-3);margin-top:var(--s-3);cursor:pointer}
.tar-schakel b{display:block;font-size:var(--fs-sm);color:var(--text)}
.tar-schakel small{display:block;margin-top:3px;font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
.c2-el-h:hover .c2-sec-edit{opacity:1}
.c2-el-tot{width:88px;text-align:right;font-size:var(--fs-md);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.c2-el-berhint{color:var(--text-3);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap;margin-right:6px;opacity:.7}
.c2-el-berhint:empty{display:none}
.c2-el-tot.cd-ovr{color:var(--accent-bright)}
.c2-el-rm{background:none;border:none;color:var(--text-3);font-size:var(--fs-md);cursor:pointer;line-height:1;flex:0 0 auto;padding:0 2px}
.c2-el-rm:hover{color:var(--red)}
.c2-el-rows{padding-left:24px;margin-top:3px}
.c2-el-toel{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:4px;padding:2px 0;margin-bottom:5px;font-size:var(--fs-sm);font-style:italic;color:var(--text-2)}
.c2-row{display:grid;grid-template-columns:minmax(0,1fr) 54px 84px 88px 24px;gap:9px;align-items:center;padding:5px 0}
.c2-row.empty{opacity:.5}
.c2-row.head{padding:1px 0 5px}
.c2-rh{font-size:var(--fs-xs);color:var(--text-3)}
.c2-rh.num{text-align:right}
.c2-row .c2-uren,.c2-row .c2-tarief{width:100%}
.c2-row .c2-bedrag{width:auto;color:var(--text)}.c2-soort{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:4px;padding:2px 0 3px;font-size:var(--fs-base);color:var(--text-2)}
.c2-soort-txt{flex:1;min-width:0;font-size:var(--fs-base);color:var(--text);padding:2px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
select.c2-soort{border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:5px 8px;font-size:var(--fs-base);color:var(--text-2);height:auto}
.c2-uren{width:48px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:var(--fs-base);font-weight:600;text-align:right;padding:5px 6px;font-variant-numeric:tabular-nums}.c2-tarief{width:60px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:var(--fs-base);font-weight:600;text-align:right;padding:5px 6px;font-variant-numeric:tabular-nums}
.c2-bedrag{width:78px;text-align:right;font-size:var(--fs-base);font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.c2-rowx{background:none;border:none;color:var(--text-3);font-size:var(--fs-lg);cursor:pointer;flex:0 0 auto;padding:0 2px}
.c2-rowx:hover{color:var(--red)}
.c2-el-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:11px 0 2px}
.c2-el-link{background:transparent;border:1px solid var(--line-2);color:var(--text-2);font-size:var(--fs-xs);font-weight:500;cursor:pointer;padding:5px 11px;border-radius:8px;transition:border-color .12s,color .12s,background .12s}
.c2-el-link:hover{border-color:var(--text-3);color:var(--text);background:rgba(255,255,255,.03)}
.c2-el-link.accent{color:var(--accent-bright);border-color:rgba(43,179,240,.4)}
.c2-el-link.accent:hover{background:rgba(43,179,240,.08)}
.c2-el-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:9px;font-size:var(--fs-sm)}
.c2-el-ber{color:var(--text-3)}
.c2-el-ber b{color:var(--text-2);font-weight:600}
.c2-el-ovr{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.c2-el-prijs{width:94px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:var(--fs-sm);font-weight:600;text-align:right;padding:4px 6px;font-variant-numeric:tabular-nums}
.c2-addrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.c2-addrow-l{color:var(--text-3);font-size:var(--fs-sm);font-weight:600}
.c2-pill{padding:5px 11px;border-radius:7px;font-size:var(--fs-sm);font-weight:600;color:var(--accent-bright);background:rgba(43,179,240,.1);border:1px solid rgba(43,179,240,.26);cursor:pointer}
.c2-pill:hover{background:rgba(43,179,240,.18)}
.c2-sec-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.c2-stuks{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.c2-stuks-l{color:var(--text-2);font-size:var(--fs-xs);font-weight:500}
.c2-stuks-v{color:var(--text-2);font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums}
.c2-foot-main{display:flex;justify-content:space-between;align-items:center}
.c2-foot-l{color:var(--text-2);font-size:var(--fs-xs);font-weight:600;font-variant-numeric:tabular-nums}
.c2-foot-t{color:var(--text);font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums}
/* --- rechterkolom: projectprijs --- */
.c2-pp .body{padding:17px 18px}
/* lijnlogica: kaartaanduiding in kleur i.p.v. gradient (groen = prijs, neutraal = facturatie) */
.c2-pp{--cac:var(--green)}
.c2-fact{--cac:var(--line-2)}
.c2-pp::before,.c2-fact::before{height:3px;background:var(--cac)}
.c2-pp .chead{margin-bottom:2px}
.c2-pp-sub{font-size:var(--fs-2xs);color:var(--text-3);margin:3px 0 13px}
.c2-cl{margin-bottom:7px}
.c2-cl-h{display:flex;justify-content:space-between;gap:8px}
.c2-cl-h span{color:var(--text);font-size:var(--fs-sm);font-weight:600}
.c2-cl-h b{color:var(--text);font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.c2-cl-sub{display:flex;justify-content:space-between;gap:8px;padding:2px 0 0 10px}
.c2-cl-sub span:first-child{color:var(--text-3);font-size:var(--fs-2xs)}
.c2-cl-sub span:last-child{color:var(--text-2);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.c2-cl-empty{font-size:var(--fs-xs);padding:4px 0}
.c2-pp-div{height:1px;background:var(--line);margin:9px 0 5px}
.c2-pp-tot{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0}
.c2-pp-tot span{color:var(--text);font-size:var(--fs-md);font-weight:700;white-space:nowrap}
.c2-pp-tot b{color:var(--accent-bright);font-size:var(--fs-3xl);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.c2-pp-min{display:flex;justify-content:space-between;padding:3px 0}
.c2-pp-tot + .c2-pp-min{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.c2-pp-min span:first-child{color:var(--text-3);font-size:var(--fs-sm)}
.c2-pp-min span:last-child{color:var(--text-3);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.c2-vhe{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}
.c2-vhe-tog{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:none;border:none;cursor:pointer;padding:0;color:var(--text-2);font-size:var(--fs-xs);font-weight:600}
/* c2-switch is vervallen: alle schakelaars = ec-sw (components.css, D1a-canon) via toggle()/toggleHTML() */
.c2-vhe-body{margin-top:11px}
.c2-vhe-in{display:flex;align-items:center;gap:8px}
.c2-vhe-in>span:first-child{color:var(--text-2);font-size:var(--fs-xs);white-space:nowrap}
.c2-vhe-in input{width:62px;padding:5px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:var(--fs-sm);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.c2-vhe-in .muted{font-size:var(--fs-2xs)}
.c2-vhe-out{margin-top:10px;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--blue-dim);border:1px solid rgba(43,179,240,.28);border-radius:var(--r-md)}
.c2-vhe-out-t{color:var(--accent-bright);font-size:var(--fs-sm);font-weight:700}
.c2-vhe-out-s{color:var(--text-3);font-size:var(--fs-micro);margin-top:2px}
.c2-vhe-out b{color:var(--accent-bright);font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
/* --- sum cards (optioneel / doorlopend) --- */
.c2-sum{display:flex;justify-content:space-between;align-items:center;padding:14px 17px;border-radius:var(--r-xl);border:1px solid}
.c2-sum-t{font-size:var(--fs-sm);font-weight:700}
.c2-sum-s{color:var(--text-2);font-size:var(--fs-2xs);margin-top:2px}
.c2-sum-v{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.c2-sum-opt{border-color:rgba(154,79,208,.14);background:rgba(154,79,208,.03)}
.c2-sum-opt.on{border-color:rgba(154,79,208,.35);background:rgba(154,79,208,.08)}
.c2-sum-opt .c2-sum-t,.c2-sum-opt .c2-sum-v{color:#c3a0ea}
.c2-sum-doorl{border-color:rgba(43,179,240,.14);background:rgba(43,179,240,.03)}
.c2-sum-doorl.on{border-color:rgba(43,179,240,.35);background:rgba(43,179,240,.08)}
.c2-sum-doorl .c2-sum-t,.c2-sum-doorl .c2-sum-v{color:var(--accent-bright)}
/* --- facturatieschema (slider) --- */
.c2-fact .body{padding:15px 17px}
.c2-fact-lbls{display:flex;justify-content:space-between;margin-bottom:9px}
.c2-fact-gun{color:var(--accent-bright);font-size:var(--fs-sm);font-weight:700}
.c2-fact-lev{color:var(--text-2);font-size:var(--fs-sm);font-weight:600}
.c2-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--blue) var(--g,30%),rgba(255,255,255,.12) var(--g,30%));outline:none;cursor:pointer}
.c2-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#eaf6fb;border:2px solid var(--blue);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.c2-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#eaf6fb;border:2px solid var(--blue);cursor:pointer}
@media(max-width:1000px){.calc-step .calc-grid{grid-template-columns:1fr}.calc-step .calc-right{position:static}}
/* --- Extra's & upsell-kaarten (Online portaal / Bewonersbrieven) --- */
.ex-wrap{display:flex;flex-direction:column;gap:13px}
.ex-card{background:rgba(255,255,255,.022);border:1px solid var(--line-2);border-left:2px solid #2bb3f0;border-radius:var(--r-lg);padding:15px 17px;transition:opacity .15s,border-color .15s}
.ex-card.off{opacity:.62;border-left-color:var(--line-2)}
.ex-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ex-title{font-size:var(--fs-md);font-weight:700;color:var(--text)}
.ex-desc{color:var(--text-2);font-size:var(--fs-xs);line-height:1.45;margin-top:3px}
.ex-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.ex-wie{font-size:var(--fs-2xs);font-weight:600;color:var(--text-2)}
.ex-wie.on{color:var(--accent-bright)}
.ex-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px}
.ex-lbl{color:var(--text-2);font-size:var(--fs-xs);font-weight:500}
.ex-eur{color:var(--text-3);font-size:var(--fs-xs)}
.ex-unit{color:var(--text-2);font-size:var(--fs-xs)}
.ex-min{color:var(--text-3);font-size:var(--fs-2xs)}
.ex-num{width:66px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:var(--fs-xs);font-weight:600;text-align:right;padding:4px 6px;font-variant-numeric:tabular-nums}
.ex-num-s{width:52px}
.ex-amount{margin-left:auto;font-size:var(--fs-base);font-weight:800;font-variant-numeric:tabular-nums;color:#c3a0ea}
.ex-amount.in{color:var(--green)}
.ex-seg-auto{margin-left:auto}
.ex-seg-fit{width:fit-content;margin-top:11px}
.ex-note{margin-top:11px;color:var(--text-3);font-size:var(--fs-xs);line-height:1.4}
.ex-calc{margin-top:11px;color:var(--text-2);font-size:var(--fs-xs);line-height:1.4}
.ex-calc b{color:var(--text)}
.ex-opdr{margin-top:13px;color:var(--text-2);font-size:var(--fs-sm);font-weight:500}.sv-text{width:100%;min-height:120px;resize:vertical;font-size:var(--fs-base);line-height:1.55}
/* Beelden per werkgebied */
.wg-row{display:flex;align-items:center;gap:12px;margin:12px 0 16px;flex-wrap:wrap}
.wg-lbl{font-size:var(--fs-sm);color:var(--ink-soft)}
.wg-pills{display:flex;gap:7px;flex-wrap:wrap}
.wg-pill{background:rgba(255,255,255,.05);color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-sm);line-height:1;cursor:pointer;font-family:inherit}
.wg-pill.on{background:var(--accent);color:#06204a;border-color:var(--accent);font-weight:600}
/* Kalibratie-schakelaar in de prijsmodel-ijking. Een uitgezet project blijft STAAN (doorgestreept,
   gedimd) in plaats van uit de lijst te verdwijnen — dezelfde regel als bij de declaratiedoelen:
   markeren, niet weglaten, anders is over een half jaar niet meer te zien waarom het tarief is
   wat het is. */
/* Een VASTE waarde in het parameterraster. Stond eerder als een `disabled` invoerveld tussen de
   vier instelbare velden: niet te onderscheiden van de rest, dus je probeert het en er gebeurt
   niets. Nu een leesregel met een slotje — de plek in het raster blijft, de belofte niet. */
/* Prijs per locatie: op de kaart één regel met een knop, de tabel in een slide-over. Inline liep
   die tabel bij Dreef 5 op tot 51 rijen en duwde hij de rest van de sale-hub weg. */
/* De standaard slide-over is 420 px — genoeg voor een formulier, niet voor een tabel van acht
   kolommen: die viel er volledig achter de horizontale scroll. Deze variant is zo breed als
   het scherm toelaat en houdt op een telefoon gewoon 92vw aan. */
/* Een breed venster voor de locatietabel: de standaardmodal is 440 px en dat is te smal voor
   zes kolommen. `.ec-modal` heeft al max-height + overflow op de body, dus scrollen werkt. */
.ec-modal.ec-modal--breed{max-width:min(1180px,94vw)}
/* De locatietabel in dat paneel: natuurlijke kolombreedtes, scrolt desnoods zelf, en GEEN
   vastgezette laatste kolom — die hoort bij de dertien-koloms backtest, niet hier. */
/* Voet van het locatieblad-venster: de stand links, de acties rechts. De knoppen staan BUITEN de
   scrollende tabel, want bij 52 locaties zou 'Blad opslaan' anders onder de vouw verdwijnen. */
.lb-voet{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.chip-in{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:1px 6px;
  border-radius:5px;color:var(--blue,#3fa9f5);background:rgba(63,169,245,.13);border:1px solid rgba(63,169,245,.42)}
.chip-opt{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:1px 6px;
  border-radius:5px;color:#c3a0ea;background:rgba(154,79,208,.16);border:1px solid rgba(154,79,208,.5)}
.lb-scope{padding:2px 6px !important;min-height:0 !important}
/* Het bedrag per locatie, en dat is sinds 03-09-2026 de kolom 'Gecombineerd' zélf — de losse kolom
   'Eigen bedrag' is weg. Daarom vol breed met een doorzichtige rand: de cel leest als een bedrag
   tot je erin klikt, zoals de rest van de kolom. Hier stond `width:96px` met een zichtbare rand,
   en dat gaf een formulierveld in een kolom die verder uit getallen bestaat.
   ⚠HET VELD IS NOOIT LEEG: het toont het eigen bedrag, en anders het model. De `::placeholder`-
   regel die hier stond had daardoor geen lezer meer — leegmaken zet het model terug (`onblur`),
   dus er is geen stand waarin een placeholder in beeld komt. Zodra er een eigen bedrag staat,
   markeert `.aan` de regel en komt het modelbedrag er als `.lb-model` onder. */
.lb-bedrag{width:100%;text-align:right;font-variant-numeric:tabular-nums;font-size:12px;
  padding:3px 6px;border-radius:var(--r-1,5px);border:1px solid transparent;
  background:transparent;color:var(--text)}
.lb-bedrag:hover{border-color:var(--line)}
.lb-bedrag:focus{outline:none;border-color:var(--blue,#3fa9f5);
  box-shadow:0 0 0 2px rgba(63,169,245,.18)}
.lb-bedrag.aan{border-color:rgba(154,79,208,.55);background:rgba(154,79,208,.08);font-weight:650}
/* ⭐DE INTERNE NOTITIE PER LOCATIE (10-09-2026): hetzelfde recept als het bedragveld — vol breed, een
   doorzichtige rand tot je erin klikt — maar links uitgelijnd, want het is tekst. De volle tekst staat
   in de titel (hover); de kolom is 200 px. Geen `.aan`-stand: een gevulde notitie is zelf zichtbaar. */
.lb-notitie{width:100%;text-align:left;font-size:12px;padding:3px 6px;border-radius:var(--r-1,5px);
  border:1px solid transparent;background:transparent;color:var(--text)}
.lb-notitie::placeholder{color:var(--text-3)}
.lb-notitie:hover{border-color:var(--line)}
.lb-notitie:focus{outline:none;border-color:var(--blue,#3fa9f5);
  box-shadow:0 0 0 2px rgba(63,169,245,.18)}
/* Melding dat de vastgelegde tabel achterloopt. Eigen regel in de voet (flex-basis:100%), zodat
   hij niet met de knoppen om ruimte vecht.
   ⚠Dit blok zet ZELF `display`, dus de browserregel `[hidden]{display:none}` verliest ervan —
   zie de [hidden]-tabel in CLAUDE.md. Vandaar de expliciete uitzondering hieronder; zonder die
   regel zou `el.hidden = true` hier niets verbergen. */
.lb-oud{flex-basis:100%;display:flex;align-items:flex-start;gap:7px;margin-bottom:8px;
  padding:7px 10px;border-radius:var(--r-1,5px);font-size:12px;line-height:1.45;
  color:var(--text);background:rgba(224,138,58,.10);border:1px solid rgba(224,138,58,.45)}
.lb-oud[hidden]{display:none}
/* Het venster 'Calculatie opbouwen uit het prijsmodel'. Zelfde vormtaal als de rest van de
   cockpit: tint-recept voor de gekozen stand, geen nieuwe kleuren. */
.lb-keuze{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:var(--r-md,8px);background:var(--panel-2);
  cursor:pointer;font-size:13px;line-height:1.5}
.lb-keuze:hover{border-color:var(--line-2)}
.lb-keuze.aan{border-color:rgba(43,179,240,.5);background:rgba(43,179,240,.10)}
/* ⚠DE GLOBALE `input,select,textarea{width:100%}` (regel 864) GELDT OOK VOOR EEN RADIO.
   Zonder een eigen maat vult het bolletje de hele regel, staat het gecentreerd, en wordt de
   label-tekst naar een kolom van drie tekens buiten het kader geduwd. Gezien in productie,
   niet bedacht. `.opt-optline input` doet het hierboven al zo — dezelfde maat, zodat de twee
   soorten keuzeregels in de cockpit er hetzelfde uitzien. De padding/border/achtergrond uit
   die globale regel moeten er ook af: die maken van een radio een vak van 34px hoog. */
.lb-keuze input{width:16px;height:16px;min-width:16px;margin:2px 0 0;padding:0;border:0;
  background:none;accent-color:var(--blue);cursor:pointer;flex:none}
.lb-prev{margin-top:14px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-md,8px);background:var(--panel-2);font-size:13px}
.lb-prevrij{display:flex;justify-content:space-between;gap:14px;padding:3px 0;color:var(--text-2)}
.lb-prevrij b{color:var(--text);font-variant-numeric:tabular-nums}
.lb-prevtot{display:flex;justify-content:space-between;padding-top:9px;margin-top:8px;
  border-top:1px solid var(--line);font-weight:700}
.lb-prevtot b{font-variant-numeric:tabular-nums}
/* ⚠Eigen `display`, dus deze heeft een eigen [hidden]-regel nodig — zie de [hidden]-tabel in
   CLAUDE.md; zonder die regel verbergt `el.hidden = true` hier niets. */
.lb-let{display:flex;gap:9px;align-items:flex-start;margin-top:13px;padding:10px 13px;
  border-radius:var(--r-md,8px);font-size:12.5px;line-height:1.5;color:var(--text);
  background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.45)}
.lb-let[hidden]{display:none}
.lb-let svg{flex:0 0 auto;margin-top:2px;color:var(--amber,#e8a33d)}
.lb-oud svg{flex:0 0 auto;margin-top:2px;color:var(--amber,#e08a3a)}
.ltable--loc{overflow-x:auto}
/* ⚠DE SLACK MOET NAAR DE NAAMKOLOM, EN DAT VRAAGT `fixed`. Met `table-layout:auto` verdeelt de
   browser de overgebleven ruimte over ÁLLE kolommen naar rato: het volgnummer werd 170 px breed
   (13% van de tabel) voor twee cijfers, terwijl de locatienaam afbrak. `width:1%` op de smalle
   kolommen hielp niet — in het auto-algoritme is dat een hint die het naast zich neerlegt (gemeten:
   nog steeds 170 px). Met `fixed` + een colgroup gelden de breedtes wél, en krijgt de naamkolom
   alles wat overblijft omdat die als enige geen breedte heeft. */
/* ⚠Acht kolommen sinds 10-09-2026 (# · Locatie · Scope · Belicht · Ligging · € / VHE · Prijs ·
   Notitie): de kolommen Los en Voordeel gingen op 09-09 weg (middag), € / VHE kwam er die avond bij,
   de interne notitie (200 px) op 10-09. 1130 px = de vaste breedtes uit de colgroup (886 px) plus
   dezelfde ~244 px voor de naamkolom die de tabel met zeven kolommen op 930 px overhield. */
.ltable--loc table{table-layout:fixed;min-width:1130px}
/* ⚠GEEN `overflow:hidden;text-overflow:ellipsis` op de cellen. Dat leek netjes, maar twee kolommen
   dragen een KNOP of een INVOERVELD en die werden afgeknipt: er stond letterlijk "In de opdracht…"
   met een beletselteken achter de knop. Een kolom die zijn eigen bediening afkapt is erger dan een
   kolom die een paar pixels te breed is — de breedtes in de colgroup zijn daarom ruim genoeg voor
   het langste label ("In de opdracht", "deelt de rit met 2"). */
.ltable--loc th,.ltable--loc td{white-space:nowrap}
/* de naamkolom mag afbreken; die heeft de ruimte en een adres is geen getal */
.ltable--loc th:nth-child(2),.ltable--loc td:nth-child(2){white-space:normal}
/* ⭐HET MODELBEDRAG ONDER EEN OVERSCHREVEN PRIJS (wens Remco 03-09-2026: "dat je wel
   ziet wat het gecalculeerde tarief was"). Klein en gedempt — het is een referentie, geen tweede
   bedrag dat meetelt. Alleen zichtbaar zodra er een eigen bedrag staat; anders is de kolom gewoon
   het model. */
.lb-model{font-size:var(--fs-2xs);color:var(--text-3);margin-top:2px;font-variant-numeric:tabular-nums}
/* De tussenkop tussen 'In de opdracht' en 'Optioneel' in het locatieblad. Geen eigen kleurtaal:
   dezelfde tint-recept-vulling als de rest van de cockpit, met het subtotaal rechts. */
.lb-groep>td{background:rgba(255,255,255,.035);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line);padding:7px 10px !important;font-size:12px}
.lb-groep__uitleg{color:var(--text-3);margin-left:8px}
.lb-groep__som{float:right;font-weight:650;font-variant-numeric:tabular-nums}
/* Volgnummer per locatie: zo lees je het aantal af zonder te tellen. Smal en gedimd — het is een
   telling, geen gegeven. */
.rp-nr{width:34px;text-align:right;color:var(--text-3);font-variant-numeric:tabular-nums;
  padding-right:4px !important}
tfoot .rp-nr{color:var(--text);font-weight:700}
.ltable--loc th{white-space:nowrap;overflow-wrap:normal}
.ltable--loc td{white-space:nowrap}
.ltable--loc td:first-child{white-space:normal;min-width:170px}
.rp-locregel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 2px;
  padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}
.rp-locregel>span{flex:1;min-width:240px;line-height:1.5}
.rp-loc-uitleg{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;margin-bottom:14px}
/* een locatie zonder eigen 3DBAG-verrijking: ligging wél, m² niet — gedimd, niet verborgen */
tr.rp-loc-geen>td{color:var(--text-3)}
.pm-fld.pm-vast{display:flex;flex-direction:column;gap:3px}
.pm-fld.pm-vast>b{font-size:var(--fs-lg);font-weight:700;color:var(--text);display:flex;
  align-items:center;gap:8px;padding:7px 0 2px}
.pm-slot{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:2px 8px}
.pm-uitleg-klein{font-size:var(--fs-xs);color:var(--text-2);line-height:1.45;font-style:normal}
.ijk-sw{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:var(--fs-xs);
  font-weight:600;color:var(--text-3);background:none;border:0;padding:2px 0;cursor:pointer;white-space:nowrap}
/* ⚠EIGEN NAAM, GEEN .ltable--breed. Die modifier BESTAAT AL (hierboven, min-width 820px) en
   wordt gebruikt door declaraties, facturatie en de weekcontrole; herdefiniëren zou die drie
   schermen stil een sticky kolom en 1240px minimumbreedte geven.
   De backtest-tabel heeft een kolom per grootheid (ruim tien) en past niet in de instellingen-
   kolom (1068 px).
   `.ltable` combineert `table-layout:fixed` met `overflow:hidden`, dus zonder deze modifier
   perst hij zich samen: gemeten rijen van 135 px hoog met woorden die middenin afbreken. Met een
   eigen scroller houdt elke kolom zijn natuurlijke breedte en scrolt alleen de tabel, niet de
   pagina — zoals de huisregel voor brede inhoud voorschrijft. */
.ltable--pm{overflow-x:auto;overflow-y:visible;scrollbar-gutter:stable}
.ltable--pm table{table-layout:auto;min-width:1240px}
.ltable--pm th{white-space:nowrap;overflow-wrap:normal}
/* 8px zijpadding (zoals de koppen al hadden) i.p.v. de 11px van `.ltable td`: met vijftien
   kolommen scheelt dat 90px. Gemeten 07-09-2026 op 2000px na het toevoegen van Begroot en Kosten:
   1.473px tabel voor 1.342px ruimte; met deze padding én €/VHE als één kolom past hij weer. */
.ltable--pm td{white-space:nowrap;padding-left:8px;padding-right:8px}
/* De toelichting in een cel ("+ € 4.600,00 gebied", "vs € 27.867,27", "43 plekken") op een eigen
   regel ónder het getal. Gemeten 07-09-2026 op 2000px met de volle routebreedte (`set-layout--breed`):
   de tabel was 1.446px breed voor 1.342px ruimte — 104px bleef buiten beeld — en de drie kolommen
   met zo'n toelichting waren samen 500px. Op twee regels past hij zonder te scrollen, en de rijen
   waren tóch al twee regels hoog door de projectnamen. */
.ltable--pm td>.tnum{display:block;white-space:nowrap;line-height:1.25;margin-top:2px}
.ltable--pm td:first-child{white-space:normal;min-width:190px}
/* De regel ónder de projectnaam (nummer · sluitdatum, 07-09-2026) mag wél afbreken: als enige
   nowrap-blok in de naamkolom zette hij de min-content van die kolom op zijn volle lengte en groeide
   de tabel van 1.342 naar 1.355px — 13px scroll, gemeten op 2000px. De naam zelf brak al af. */
.ltable--pm td:first-child>.tnum{white-space:normal}
/* De schakelaar is de enige ACTIE in deze tabel en stond door de scroll standaard buiten beeld.
   Vastzetten aan de rechterrand houdt hem altijd bereikbaar; de schaduw laat zien dat er links
   nog inhoud onder door schuift. De achtergrond moet expliciet mee (ook op hover), anders schuift
   de tabel er doorheen. */
.ltable--pm th:last-child,.ltable--pm td:last-child{position:sticky;right:0;
  background:var(--surface);box-shadow:-10px 0 14px -12px rgba(0,0,0,.85)}
.ltable--pm thead th:last-child{z-index:2}
.ltable--pm tbody tr:hover td:last-child{background:linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.025)),var(--surface)}
.ijk-sw i{width:32px;height:18px;border-radius:var(--r-pill);background:var(--line-2);position:relative;
  display:block;flex:0 0 auto;transition:background .15s var(--ease)}
.ijk-sw i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#cfd3e6;transition:left .15s var(--ease),background .15s var(--ease)}
.ijk-sw.on{color:var(--text-2)}
.ijk-sw.on i{background:var(--green)}
.ijk-sw.on i::after{left:16px;background:#06231a}
.ijk-sw:disabled{opacity:.5;cursor:default}
.ijk-sw:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
tr.ijk-uit>td{color:var(--text-3)}
tr.ijk-uit>td:first-child{text-decoration:line-through;text-decoration-color:var(--text-3)}
/* De kopregel van een bundel in de backtest (per opnametype, 07-09-2026). Spant alle kolommen
   behalve de vastgezette schakelaarkolom; die laatste cel krijgt expliciet dezelfde achtergrond —
   de sticky-regel hierboven zet `var(--surface)` op élke laatste cel, en met (0,2,1) tegen (0,2,1)
   wint anders de volgorde in dit bestand. Ook op hover, om dezelfde reden. */
.ltable--pm tr.ijk-groep>td,.ltable--pm tr.ijk-groep>td:last-child,.ltable--pm tbody tr.ijk-groep:hover td:last-child{
  background:var(--panel-2);font-weight:700;padding-top:10px;padding-bottom:8px;border-top:1px solid var(--line-2);white-space:normal}
.ltable--pm tr.ijk-groep>td .pt-sec-sub{font-weight:400}
.wg-sectttl{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:8px}
.wg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.wg-slot{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.02)}
.wg-slot.cover{max-width:200px}
.wg-thumb{background:#14102b}
.wg-thumb img{display:block;width:100%;height:94px;object-fit:cover}
.wg-slot.cover .wg-thumb img{height:auto;aspect-ratio:210/297}
.wg-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px}
.wg-name{font-size:var(--fs-sm);color:var(--ink)}
/* Koppelingen-label (Geconfigureerd / Niet ingesteld): semantisch een badge, dus op de label-band
   van 22px i.p.v. de eigen 17px die 'ie had (maatvoering-audit 07-2026). */
.bdg{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;line-height:14px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap}
.bdg.std{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--muted)}
.bdg.eigen{background:rgba(43,179,240,.16);border-color:rgba(43,179,240,.4);color:var(--accent)}
.wg-acts{display:flex;align-items:center;gap:8px;padding:0 9px 9px;flex-wrap:wrap}
.status{font-family:var(--font-mono);font-size:var(--fs-xs);padding:9px 15px;color:var(--ink-soft);min-height:18px}
.status.err{color:var(--red)}.status.ok{color:var(--green)}.status.warn{color:var(--amber)}
.drop{border:2px dashed var(--line);border-radius:var(--r-lg);padding:20px 14px;text-align:center;cursor:pointer;transition:.15s;background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(43,179,240,.06) 9px,rgba(43,179,240,.06) 18px)}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(43,179,240,.10)}
.drop .big{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md)}
.drop small{display:block;color:var(--ink-soft);margin-top:5px;font-size:var(--fs-xs)}
.filechip{margin-top:11px;font-family:var(--font-mono);font-size:var(--fs-xs);background:var(--ink);color:var(--paper);padding:7px 10px;border-radius:7px;align-items:center;gap:6px}
.result .body{display:flex;flex-direction:column;gap:6px}
.stat{display:flex;gap:12px;flex-wrap:wrap}
.stat .box{flex:1;min-width:120px;border:1px solid var(--line);border-radius:var(--r-md);padding:11px;background:var(--panel-2)}
.stat .box .lab{font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.stat .box .val{font-family:var(--font-mono);font-size:var(--fs-3xl);font-weight:600;line-height:1.1;margin-top:3px}
.stat .box .val small{font-size:var(--fs-sm);color:var(--ink-soft)}
.val.red{color:var(--red)}.val.green{color:var(--green)}.val.amber{color:var(--accent)}.val.blue{color:var(--purple)}
table.zones{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.zones th,table.zones td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.zones th{font-size:var(--fs-2xs);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.pill.oa-geen,.pill.oa-afstemming,.pill.oa-toestemming{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-2xs);padding:2px 7px;border-radius:20px;border:1px solid currentColor}
.pill.oa-geen{color:var(--green)}.pill.oa-afstemming{color:var(--warn)}.pill.oa-toestemming{color:var(--accent)}
.flagbox{border:1px solid var(--warn);background:var(--warn-bg);border-radius:var(--r-md);padding:12px 13px;margin-top:8px}
.flagbox h3{margin:0 0 7px;font-family:var(--font-display);font-size:var(--fs-base);color:var(--warn)}
.flagbox ul{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.5}
.flagbox .pilot{margin-top:8px;font-weight:600;font-size:var(--fs-sm)}

/* ---- Locatie-resultaat: "Waar je rekening mee houdt"-actielijst ---- */
.lr-eyebrow{font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:600;margin:16px 0 9px}
.lr-list{display:flex;flex-direction:column;gap:9px}
.lr-item{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(255,255,255,.03);position:relative;overflow:hidden}
.lr-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.lr-item.red::before{background:var(--urgent)}
.lr-item.amber::before{background:var(--amber)}
.lr-item.blue::before{background:var(--blue)}
/* muted = geraakt maar niet van toepassing: zichtbaar, zonder urgentiekleur */
.lr-item.muted::before{background:var(--line-2, var(--line))}
.lr-item.muted .lr-t{color:var(--text-2)}
.lr-ico{flex:0 0 30px;width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.lr-item.red .lr-ico{background:rgba(255,93,115,.12);color:var(--urgent)}
.lr-item.amber .lr-ico{background:rgba(232,163,61,.12);color:var(--amber)}
.lr-item.blue .lr-ico{background:rgba(43,179,240,.12);color:var(--blue)}
.lr-item.muted .lr-ico{background:rgba(255,255,255,.05);color:var(--text-3)}
.lr-main{flex:1;min-width:0}
.lr-t{font-weight:600;font-size:var(--fs-md)}
.lr-x{font-size:var(--fs-sm);color:var(--text-2);margin-top:3px;line-height:1.45}
.lr-a{font-size:var(--fs-sm);color:var(--text);margin-top:6px}
.lr-a b{font-weight:600}
.lr-lead{flex:0 0 auto;align-self:flex-start;font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:6px;background:rgba(232,163,61,.12);color:#e8a33d;white-space:nowrap}
.lr-ok{display:flex;align-items:center;gap:9px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid rgba(52,211,154,.4);background:rgba(52,211,154,.06);color:#7fe3bd;font-size:var(--fs-base)}
.lr-ok-ic{color:var(--green);display:inline-flex}
textarea.out{width:100%;min-height:200px;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.55;border:1px solid var(--line);border-radius:var(--r-md);padding:13px;background:var(--panel-2);color:var(--ink);resize:vertical}textarea.secbody{min-height:54px;overflow:hidden}
/* Live offerte-preview (hub-template via iframe + Paged.js) */
.op-frame{width:100%;height:78vh;min-height:520px;border:1px solid var(--line);border-radius:var(--r-md);background:#6f7a8a;display:block}
.op-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:-2px 0 10px;padding:6px 8px;background:var(--panel,#14163a);border:1px solid var(--line);border-radius:var(--r-sm)}
.op-tools button{cursor:pointer;border:1px solid var(--line,#2b2e55);background:rgba(255,255,255,.06);color:var(--ink,#eceefb);border-radius:6px;padding:4px 9px;font:inherit;font-size:var(--fs-base);line-height:1.15}
.op-tools button:hover{border-color:var(--accent);color:var(--accent);background:rgba(43,179,240,.12)}
.op-tools button b,.op-tools button i,.op-tools button u{color:inherit}
.op-tools .sep{width:1px;align-self:stretch;background:rgba(255,255,255,.16);margin:2px 4px}/* Offerte-tab: flex-kolom zodat de preview een eigen scroll heeft en de Verstuur-actiebalk
   altijd in beeld blijft (hoogte gezet via JS = viewport minus de chrome erboven). */
.offerte-tab{display:flex;flex-direction:column;min-height:460px}
.offerte-tab .offerte-top{flex:0 0 auto}
.offerte-tab .offerte-preview{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.offerte-tab .op-tools{flex:0 0 auto}
.offerte-tab .op-frame{flex:1 1 auto;min-height:0;height:auto}
.offerte-tab .op-pane{flex:1 1 auto;min-height:0}
.offerte-tab #concept-host:not([hidden]){display:flex;flex-direction:column}
.offerte-tab .op-pane[hidden]{display:none}/* Versie-statusbadges (gebruikt in de versie-dropdown) */
.vb{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap}
.vb-concept{border-color:var(--line-2);color:var(--text-2,#9498b3)}
.vb-verstuurd{border-color:rgba(43,179,240,.5);color:#9fd4f2}
.vb-geaccepteerd{border-color:rgba(52,211,154,.5);color:#7fe3bd}
.vb-afgewezen{border-color:rgba(255,93,115,.45);color:#e3aab1}
.vb-vervangen{border-color:var(--line-2);color:var(--text-3)}

/* ---- Sale-hub (overzichtspagina, landing op #/sale/{id}) ---- */
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:var(--fs-base);text-decoration:none;margin-bottom:12px}
.crumb:hover{text-decoration:underline}
/* sale-lifecycle onderaan de hero — zelfde behandeling als de projecthub-fase-balk (top-border) */
.life{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 2px 0;margin:0}
/* "···"-menu in de hero: unieke/zeldzame acties (opdelen, verwijderen) achter een driepuntje */
.hub-more{position:relative;display:inline-flex}
.btn.hub-more-btn{color:var(--text-3);border-color:transparent;background:none;padding:8px}
.btn.hub-more-btn svg{width:17px;height:17px}
.btn.hub-more-btn:hover,.hub-more-btn[aria-expanded="true"]{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.hub-more-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-dropdown);min-width:196px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.5);padding:6px}
.hub-more-menu[hidden]{display:none}
/* ⛔ELKE CONTAINER MET `overflow:hidden` KNIPT DIT MENU AF — het hangt op top:calc(100% + 6px)
   BUITEN zijn ouder. `.idband` hierboven had het al; `.ec-hero` (components.css) heeft óók
   overflow:hidden, voor de afgeronde hoeken en de ambient-gradient, en knipte daarmee het
   ···-menu van de PROJECTPAGINA af. Gemeten 08-09-2026 (melding Remco, "je ziet dat menu onder
   de ... niet doorloopt"): het menu is 273 px hoog en steekt 18 px onder de hero uit — 'Verwijder
   project' liep er half buiten, en met één item erbij wordt dat ~51 px.
   ⚠Alleen opheffen zolang het menu OPEN staat, anders vervalt de clipping van de hoeken en de
   gradient permanent. Zet een nieuwe container hier bij in plaats van er een eigen regel voor te
   schrijven — dan staan de uitzonderingen op één plek.
   ⛔EN `overflow` ALLEEN IS NIET GENOEG — dat was de tweede helft van dezelfde bug. `.ec-hero__in`
   heeft `z-index:1` en maakt dáármee een STACKING CONTEXT; het menu zit daarbinnen, dus zijn
   `z-index:100` telt alleen bínnen die context en kan nooit boven de tabbalk `.ph2-tabs` uit
   (position:sticky, z-index:20). Gemeten: ná het opheffen van de overflow was 'Verwijder project'
   nog steeds niet aanklikbaar — `elementFromPoint` gaf `DIV.ph2-tabs`. De HERO zelf moet omhoog,
   en alleen zolang het menu openstaat (anders ligt de hero permanent over de sticky tabbalk). */
.ec-hero:has(.hub-more-menu:not([hidden])){overflow:visible;z-index:var(--z-dropdown)}
.hub-more-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);background:none;border:0;border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
/* ⚠Zelfde valkuil als bij `.ec-ftabs__btn` (03-08-2026): `display:flex` wint van de browserregel
   `[hidden]{display:none}`, dus `el.hidden = true` verbergt hier niets. Tweede vindplaats van
   dezelfde fout — meet zichtbaarheid met getComputedStyle, nooit met de hidden-property. */
.hub-more-item[hidden]{display:none}
.hub-more-item svg{width:14px;height:14px;opacity:.8;flex:0 0 auto}
.hub-more-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.hub-more-item.danger:hover{background:rgba(255,93,115,.1);color:var(--urgent)}
.hub-more-item.danger:hover svg{opacity:1}
/* scheidingslijn in het ···-menu: zet het onomkeerbare (opdelen/verwijderen) apart van de
   dagelijkse items, zodat je er niet per ongeluk in doorschiet */
.hub-more-sep{height:1px;background:var(--line);margin:6px 8px}
.life-lbl{color:var(--text-3);font-size:var(--fs-sm)}
.dots{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:var(--fs-xs);flex-wrap:wrap}/* ===== PLATFORM-STANDAARD: status/voortgang als pill-stappen =====
   Gebruik dit overal waar je een status- of stappenbalk toont.
   Markup:  <div class="sbal">
              <span class="sbal-pill done">Stap 1</span><span class="sbal-line done"></span>
              <span class="sbal-pill on">Stap 2</span><span class="sbal-line"></span>
              <span class="sbal-pill future">Stap 3</span>
            </div>
   Statussen: .done (afgerond, groen) · .on (huidig, blauw) · .future/leeg (grijs).
   Klikbare stappen? Maak de pill een <button class="sbal-pill …">. De look/kleuren
   wijzig je centraal via de --pill-*-tokens in :root (niet hier per selector). */
.sbal{display:flex;align-items:center;flex:1;min-width:0;max-width:600px}
.sbal-pill{font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:15px;padding:5px 13px;border-radius:var(--r-pill);border:1px solid var(--pill-line);background:var(--pill-fill);color:var(--pill-ink);white-space:nowrap;cursor:default}
button.sbal-pill,a.sbal-pill{cursor:pointer}
a.sbal-pill{text-decoration:none}
.sbal-pill.done{color:var(--pill-done-ink);border-color:var(--pill-done-line);background:var(--pill-done-fill)}
.sbal-pill.on{color:var(--pill-on-ink);border-color:var(--pill-on-line);background:var(--pill-on-fill)}
.sbal-line{flex:1;height:2px;min-width:14px;margin:0 6px;background:var(--pill-line);border-radius:2px}
.sbal-line.done{background:var(--pill-line-done)}
/* versiechip in de status-balk (sale-hub) */
.vchip{font-size:var(--fs-xs);font-weight:700;line-height:14px;color:#9fd4f2;border:1px solid rgba(43,179,240,.4);background:rgba(43,179,240,.08);border-radius:7px;padding:3px 10px;white-space:nowrap}
.vchip.amber{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.1)}.rpill{font-size:var(--fs-xs);font-weight:600;border-radius:7px;padding:3px 9px;border:1px solid var(--line-2);color:var(--text-2)}
.rpill.red{border-color:rgba(255,93,115,.4);background:rgba(255,93,115,.08);color:#e3aab1}
.rpill.purple{border-color:rgba(154,79,208,.4);background:rgba(154,79,208,.1);color:#cba3e6}
.rpill.green{border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.1);color:#7fe3bd}
.rpill.muted{border-color:var(--line-2);background:rgba(255,255,255,.03);color:var(--text-3)}/* read-only locatie-strip boven de wizard (editor) */
.locstrip{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:11px 14px;margin-bottom:14px}.locstrip .loc-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.locstrip .loc-tx b{font-size:var(--fs-sm);font-weight:600}
.locstrip .loc-tx span{font-size:var(--fs-sm);color:var(--text-3)}
.locstrip .loc-open{margin-left:auto;color:var(--blue);font-size:var(--fs-sm);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.locstrip .loc-open:hover{text-decoration:underline}
.locstrip .loc-mini{width:54px;height:40px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2);flex:0 0 54px}
.locstrip .loc-mini svg{width:100%;height:100%;display:block}
.locstrip .loc-mini-empty{display:grid;place-items:center;background:linear-gradient(180deg,#1b2433,#0d131e);color:var(--text-3)}
/* ---- offerteproces-stapper (open cirkel, ghost-stijl) ---- */
/* offerteproces-stepper = de canon pill-stappen (.sbal-pill), als klikbare links */
.stepflow{display:flex;align-items:center;flex-wrap:wrap;gap:0;position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);padding:10px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.stepflow .sbal-line{max-width:48px;min-width:10px}
/* offerteproces = modal met eigen look-and-feel (asset_11) */
.of-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
.of-modal{width:100%;max-width:1560px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--e-3);display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
/* Gunning-venster: kies optionele diensten bij Maak project */
.gv-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:48px 24px;overflow:auto}
.gv-modal{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--e-3)}
.gv-head{padding:15px 20px;border-bottom:1px solid var(--line-2);background:var(--panel)}
.gv-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-bright)}
.gv-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--text);margin-top:3px}
.gv-sub{font-size:var(--fs-sm);color:var(--text-2);margin-top:5px}
.gv-body{padding:14px 20px;max-height:60vh;overflow:auto}
.gv-sect{font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin:16px 0 8px}
.gv-sect:first-child{margin-top:0}
.gv-list{display:flex;flex-direction:column;gap:3px}
.gv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:var(--r-md);font-size:var(--fs-base)}
.gv-row.vast{background:rgba(255,255,255,.03);color:var(--text-2)}
.gv-row.vast b,.gv-row.opt b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gv-row.opt{border:1px solid var(--line);cursor:pointer}
.gv-row.opt:hover{border-color:var(--accent);background:var(--blue-dim)}
.gv-chk{display:flex;align-items:center;gap:9px;min-width:0}
.gv-chk input{width:auto;flex:0 0 auto}
.gv-empty,.gv-note{font-size:var(--fs-sm);padding:6px 2px}
.gv-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line-2)}
.po-auto{display:block;margin-top:4px;background:none;border:none;color:var(--accent);font-size:var(--fs-xs);cursor:pointer;padding:0;text-align:left}
.po-auto:hover{color:var(--accent-bright)}
.of-mhead{display:flex;align-items:center;gap:13px;padding:13px 22px;background:var(--panel);border-bottom:1px solid var(--line-2);flex:0 0 auto}
.of-ico{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;background:rgba(43,179,240,.14);border:1px solid rgba(43,179,240,.4);color:var(--accent);flex:0 0 32px}
.of-grad{height:2px;background:var(--grad-bp);flex:0 0 auto}
.of-mbody{padding:18px 22px 24px;overflow:auto}
.of-mbody .stepflow{position:static;background:none;width:100%}
.of-mbody .stepflow .sbal-line{max-width:none;min-width:18px}
/* offerteproces-stap: kaderloze inhoud op de modal-body (asset_11) */
.of-step{max-width:840px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:18px}
.of-step.wide{max-width:960px}/* offerteproces-kaart (design A, lijnlogica): horizontale 3px toplijn = het onderdeel,
   verticale rails (c2-panel) = subonderdelen. --cac = domeinkleur: cy=inwinning/analyse,
   pu=verwerking/eindproducten, am=planning, gr=prijs; zonder klasse = neutraal (line-2). */
.of-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;--cac:var(--line-2)}
.of-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--cac);z-index:2}
.of-card.cy{--cac:var(--blue)}
.of-card.pu{--cac:var(--purple)}
.of-card.am{--cac:var(--amber)}
.of-card.gr{--cac:var(--green)}
.of-card>.body{padding:15px 17px}
.of-card .card-fields{display:flex;flex-direction:column;gap:18px}
.chead{display:flex;align-items:center;gap:8px;min-width:0}
.cdot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--cac,var(--line-2));box-shadow:0 0 7px var(--cac,var(--line-2))}
.ctitle{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-lbl{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px}
.slchip{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:600;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 11px;white-space:nowrap}
.slname{font-size:var(--fs-sm);color:var(--text-2);min-width:78px}
/* Regelgeving-stap: resultaat-locatie-analyse-kaart */
.reg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.reg-box{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.reg-box.ok{border-color:rgba(52,211,154,.32)}
.reg-box.warn{border-color:rgba(232,163,61,.38)}
.reg-k{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.reg-v{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--text);margin-top:4px;line-height:1.25}
.reg-s{font-size:var(--fs-2xs);color:var(--text-3);margin-top:2px}
.reg-banner{display:flex;align-items:center;gap:9px;margin-top:13px;padding:10px 13px;border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--text-2)}
.reg-banner.ok{background:var(--green-dim);border:1px solid rgba(52,211,154,.28)}
.reg-banner.warn{background:var(--warn-bg);border:1px solid rgba(232,163,61,.3)}
@media(max-width:780px){.reg-grid{grid-template-columns:1fr 1fr}}
/* Versturen-stap: controle vóór versturen + 2-koloms review + klantdocument (asset_11) */
.of-step.vst-step{max-width:1180px}
.vst{display:flex;flex-direction:column;gap:16px}
/* lijnlogica: 3px toplijn in stap-kleur (cy/pu/gr) i.p.v. gradient; neutraal = line-2 */
.vst-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;--cac:var(--line-2)}
.vst-card.cy{--cac:var(--blue)}
.vst-card.pu{--cac:var(--purple)}
.vst-card.gr{--cac:var(--green)}
.vst-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--cac);z-index:2}
.vst-b{padding:14px 18px 16px}
.vst-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.vst-h-l{display:flex;align-items:center;gap:10px}
.vst-chips{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.vst-chips .tag{margin-top:0}
.vst-checks{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.vst-chk{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.vst-chk-ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700;flex:0 0 18px;margin-top:1px}
.vst-chk-ic.ok{color:#06241a;background:var(--green)}
.vst-chk-ic.warn{color:#3a2a06;background:var(--warn)}
.vst-chk-ic.info{color:#06222a;background:var(--accent)}
.vst-chk-m{flex:1;min-width:0}
.vst-chk-m b{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.vst-chk-m small{display:block;font-size:var(--fs-xs);color:var(--ink-soft);margin-top:1px}
.vst-chk .btn{flex:0 0 auto;padding:4px 9px;font-size:var(--fs-xs)}
.vst-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.vst-col-l,.vst-col-r{display:flex;flex-direction:column;gap:14px}
.vst-col-r{position:sticky;top:8px}
.vst-sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.vst-price-tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:11px;border-top:1px solid var(--line-2);margin-top:9px}
.vst-price-tot .t{font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.vst-price-tot .v{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);color:var(--accent)}
.vst-price-sub{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px;font-size:var(--fs-xs);color:var(--ink-soft)}
.vst-price-sub .v{font-family:var(--font-mono);color:var(--ink);font-weight:600}
.vst-price-sub.vhe .v{color:#b69cff}
.vst-doc{position:relative;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(162deg,#241c3e,#141229 58%,#0e1830);border:1px solid var(--line-2);aspect-ratio:1/1.414;padding:8%;display:flex;flex-direction:column}
.vst-doc-top{display:flex;align-items:flex-start;justify-content:space-between}
.vst-wm{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:#fff;letter-spacing:-.01em}
.vst-wm small{font-weight:400;opacity:.82}
.vst-doc-sub{font-size:var(--fs-nano);letter-spacing:.14em;color:rgba(255,255,255,.5);text-align:right;line-height:1.6}
.vst-doc-aanb{font-size:var(--fs-nano);letter-spacing:.22em;color:#8fb7ff;margin-bottom:8px}
.vst-doc-ttl{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);line-height:1.06;color:#fff;letter-spacing:-.02em}
.vst-doc-line{height:2px;border-radius:2px;background:var(--grad-bp);margin:13px 0 12px;max-width:62%}
.vst-doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vst-doc-meta .k{font-size:var(--fs-nano);letter-spacing:.1em;color:rgba(255,255,255,.45)}
.vst-doc-meta .v{font-size:var(--fs-micro);color:#fff;font-weight:600;margin-top:3px}
.vst-doc-acts{display:flex;gap:8px;margin-top:11px}
.vst-doc-acts .btn{flex:1;justify-content:center}
@media(max-width:900px){.vst-grid{grid-template-columns:1fr}.vst-col-r{position:static}}
@media(max-width:780px){.vst-checks{grid-template-columns:1fr}}
.of-kop{min-width:0;flex:0 1 auto;display:flex;flex-direction:column;gap:2px}
.of-kop h1{margin:0;font-size:var(--fs-xl)}
.of-mhead .of-kop h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* koppelingen-kaart met dot-rijen (sale-hub) */
.kc .kc-h{display:flex;align-items:center;gap:12px;padding:16px 18px 0;font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:600}
.kov{margin-left:auto;font-size:var(--fs-xs);letter-spacing:0;text-transform:none;font-weight:600;border-radius:var(--r-pill);padding:3px 11px;border:1px solid var(--line-2);color:var(--text-3)}
.kov.ok{color:#7fe3bd;border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.07)}
.kov.warn{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.08)}
.kc .kc-b{padding:6px 18px 16px}
.krow{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid var(--line)}
.krow:first-child{border-top:0}
.krow .kdot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.krow .kdot.ok{background:var(--green);box-shadow:0 0 8px rgba(52,211,154,.5)}
.krow .kdot.warn{background:var(--amber);box-shadow:0 0 8px rgba(232,163,61,.5)}
.krow .kdot.off{background:var(--line-2)}
.krow .kmain{min-width:0;flex:1}
.krow .kmain b{font-size:var(--fs-base);font-weight:600}
.krow .kmain small{display:block;color:var(--text-3);font-size:var(--fs-xs);margin-top:2px}
.krow .kstat{font-size:var(--fs-xs);font-weight:600;border-radius:7px;padding:3px 9px;border:1px solid;white-space:nowrap}
.krow .kstat.ok{color:#7fe3bd;border-color:rgba(52,211,154,.4);background:rgba(52,211,154,.07)}
.krow .kstat.warn{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.08)}
.krow .kstat.off{color:var(--text-3);border-color:var(--line-2)}
.koppel-foot{display:flex;align-items:center;gap:12px;margin-top:12px}
.kfoot{font-size:var(--fs-xs);color:var(--text-3);margin-top:13px;line-height:1.5}
/* Bijlagen van een gekoppelde Trello-kaart (bekijk-/downloadlink, alléén tonen) */
.kbijlagen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 0 12px 21px;margin-top:-6px;border-bottom:1px solid var(--line)}
.kbl-lbl{font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.kbl-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);color:var(--blue);font-weight:600;text-decoration:none}
.kbl-link:hover{text-decoration:underline}
.kbl-link svg{width:12px;height:12px}
/* versie-contextbalk in de editor: bewerkbaar (blauw) / bevroren (amber) */
.vbar{display:flex;align-items:center;gap:13px;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:11px 14px;margin-bottom:14px;flex-wrap:wrap}
.vbar.edit{background:rgba(43,179,240,.05);border-color:rgba(43,179,240,.28)}
.vbar.frozen{background:rgba(232,163,61,.05);border-color:rgba(232,163,61,.3)}
.vbadge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;border-radius:var(--r-sm);padding:5px 11px;border:1px solid}
.vbadge.blue{color:#9fd4f2;border-color:rgba(43,179,240,.4);background:rgba(43,179,240,.1)}
.vbadge.amber{color:#f0c27e;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.1)}
.vbar .vtxt{font-size:var(--fs-sm);color:var(--text-2)}
.autosave{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.autosave.saved{color:#7fe3bd}
.autosave.err{color:var(--urgent);font-weight:700}
/* save-foutbalk: mislukte opslag (bv. 409/_rev-conflict) prominent boven de wizard-stap */
.save-fout{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid rgba(255,93,115,.45);background:var(--urgent-dim);border-radius:var(--r-lg);padding:11px 14px;margin-bottom:14px;font-size:var(--fs-sm);color:var(--text)}
.save-fout b{color:var(--urgent)}
.hubgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:stretch;margin-bottom:20px}
.hubgrid .card{margin-bottom:0}.kv{display:grid;grid-template-columns:140px 1fr;gap:7px 12px;font-size:var(--fs-base)}
.kv .k{color:var(--text-3)}
.kv .v{color:var(--ink,#eef0f7)}.thumb{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.thumb img{display:block;width:100%}
/* sale-hub: projectgebied = enige gradient-kaart, groeit mee zodat de kolommen uitlijnen */
.hub-geo{flex:1;display:flex;flex-direction:column}
.hub-geo .body{flex:1;display:flex;flex-direction:column}
.hub-geo .thumb{flex:1;min-height:210px}
.hub-geo .thumb img{height:100%;object-fit:cover}
.hub-btns{display:flex;gap:10px;flex-wrap:wrap}
.thumb-empty{padding:34px 12px;text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
.calc-tot{display:flex;justify-content:space-between;font-size:var(--fs-base);padding:5px 0;color:var(--text-2);font-variant-numeric:tabular-nums}
/* prijs volgens de huisregel: excl. btw leidend — waarde groot en cyaan, label rustig */
.calc-tot.big{align-items:baseline;border-top:1px solid var(--line-2);margin-top:6px;padding-top:10px}
.calc-tot.big>span:first-child{font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.calc-tot.big>span:last-child{font-size:var(--fs-2xl);font-weight:800;color:var(--accent-bright);letter-spacing:-.01em}
/* VHE-referentie = paars (secundair), zonder rail — zelfde semantiek als de Controle-stap */
.calc-tot.vhe{align-items:center;margin-top:10px;padding:9px 12px;border:1px solid rgba(154,79,208,.4);border-radius:var(--r-md);background:rgba(154,79,208,.08)}
.calc-tot.vhe>span:first-child{font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:#c3a0ea;font-weight:600}
.calc-tot.vhe>span:first-child small{display:block;text-transform:none;letter-spacing:0;font-size:var(--fs-xs);font-weight:400;color:var(--text-2);margin-top:2px}
.calc-tot.vhe>span:last-child{color:#e2d1f5;font-weight:800;font-size:var(--fs-xl)}.olist .orow{display:flex;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line)}
.olist .orow:last-child{border-bottom:0}
/* Een projectrij op de relatiepagina is een LINK naar het project (12-09-2026). Zelfde vorm als
   a.deal-row.link hierboven: hover-vlak dat buiten de tekst doorloopt, zodat de hele rij als
   klikvlak leest. Zonder deze hint ziet een link er identiek uit aan de div die het was. */
.olist a.orow.link{cursor:pointer;padding-left:8px;padding-right:8px;margin:0 -8px;border-radius:8px;transition:background .12s}
.olist a.orow.link:hover{background:rgba(255,255,255,.05)}
.olist .ov{font-weight:700;font-family:var(--font-mono,inherit)}
.olist .ometa{color:var(--text-3);font-size:var(--fs-sm)}
.olist .sp{flex:1}
.olist .oacts{display:flex;gap:8px;align-items:center}
@media(max-width:1000px){.hubgrid{grid-template-columns:1fr}}

/* ===== SaleB sale-hub: genummerde stages, kop-acties, AI-samenvatting, klantcontact ===== */
.sb-accept{border:1px solid rgba(52,211,154,.5)!important;background:var(--green-dim)!important;color:#7fe3bd!important}
.sb-accept:hover{background:rgba(52,211,154,.2)!important}
.stg-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.stg-act{margin-left:auto;flex:0 0 auto}.sb-grid{grid-template-columns:1fr 1.5fr}
.hub-geo .sb-thumb{min-height:240px}
.off-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.calc-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;display:flex;flex-direction:column}
/* Kop van de calculatiekaart: eyebrow + prijsvorm-chip op één regel (03-08-2026). */
.calc-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.calc-note{margin-top:9px;font-size:var(--fs-xs);line-height:1.5;color:var(--text-3)}
.off-versies{margin-top:13px;padding-top:11px;border-top:1px solid var(--line)}
.sb-bottom{grid-template-columns:1.3fr 1fr;align-items:start}
.sv-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.sv-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad-bp)}
.sv-top{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.sv-eyebrow{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.sv-acts{margin-left:auto;display:flex;gap:6px;align-items:center}
.sv-ai{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--r-control);border:1px solid transparent;background:var(--grad-bp);color:#fff;font-weight:700;font-size:var(--fs-xs);cursor:pointer;font-family:inherit;white-space:nowrap}
.sv-ai:disabled{opacity:.6;cursor:default}
.sv-body{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.sv-empty{font-size:var(--fs-sm);color:var(--text-3);line-height:1.5}
.sv-busy{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-3)}
.sv-text{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:9px 11px;color:var(--text);font:inherit;font-size:var(--fs-sm);line-height:1.55;resize:vertical}
.sv-editacts{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.sv-hint{font-size:var(--fs-xs);margin-top:6px;color:var(--text-3)}
/* Herkomstregel onder de samenvatting: van de AI (wordt bij het versturen herschreven) of eigen
   tekst (blijft staan). Bewust dezelfde toon als .sv-hint — een mededeling, geen waarschuwing. */
.sv-bron{font-size:var(--fs-2xs);margin-top:8px;color:var(--text-3);line-height:1.45}
@media(max-width:1000px){.sb-grid,.sb-bottom,.off-grid{grid-template-columns:1fr}}
.afw-banner{display:flex;align-items:center;gap:11px;background:var(--urgent-dim);border:1px solid rgba(255,93,115,.4);border-radius:var(--r-lg);padding:11px 14px;margin:0 0 16px;color:#e3aab1}
.raam-note{display:flex;align-items:center;gap:9px;background:rgba(43,179,240,.06);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:11px 14px;margin:0 0 16px;font-size:var(--fs-base);color:var(--text-2)}
.raam-note b{color:var(--text);font-weight:600}
.raam-note a{color:var(--accent)}
.afw-banner svg{flex:0 0 auto;color:var(--urgent)}
.afw-banner-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.afw-banner-t b{color:#e3aab1;font-size:var(--fs-base)}
.afw-banner-t span{color:var(--text-2);font-size:var(--fs-xs)}
.afw-banner-d{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
/* projectgebied: analyse-chips als overlay op het beeld */
.sb-geo-wrap{position:relative;flex:1;display:flex;min-height:240px}
.sb-geo-wrap .thumb{flex:1}
.geo-chips{position:absolute;left:10px;top:10px;display:flex;gap:7px;flex-wrap:wrap;z-index:2}
.geo-chip{display:flex;align-items:center;gap:6px;background:rgba(8,12,20,.72);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:4px 9px}
.geo-chip .gk{font-size:var(--fs-nano);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.geo-chip .gv{font-size:var(--fs-xs);font-weight:700}
/* offerte-kaart: aanpak + eindproducten */
.off-aanpak{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.off-prose{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
@media(max-width:1000px){.off-aanpak{grid-template-columns:1fr}}
/* Afronden-zone op de sale-hub: centraal versturen + samenvatting + koppelingen + download */
.off-afronden{margin-top:10px;padding-top:10px;transition:background .3s}
.off-afronden.afr-flash{background:rgba(124,92,255,.10)}
.afr-h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.afr-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.afr-spacer{flex:1}
.afr-t{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.afr-badge{font-size:var(--fs-2xs);font-weight:600;border-radius:var(--r-pill);padding:2px 9px;border:1px solid var(--line-2);color:var(--text-3)}
.afr-badge.ok{color:#7fe3bd;border-color:rgba(52,211,154,.4)}
.afr-sub{margin:0 0 9px;max-width:620px}
.afr-acts{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.afr-acts .btn{font-size:var(--fs-sm)}
.afr-primary{border:1px solid transparent;background:linear-gradient(100deg,#6d3bf5,#9333ea);color:#fff;font-weight:600}
.afr-primary:hover{filter:brightness(1.07)}
.afr-primary:disabled{opacity:.6;cursor:default;filter:none}
.afr-hint{display:block;margin-top:8px}
.afr-hint:empty{display:none}
.afr-followup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;padding:9px 12px;border-radius:var(--r-md);background:rgba(43,179,240,.08);border:1px solid rgba(43,179,240,.28)}
.afr-fu-l{font-size:var(--fs-xs);font-weight:600;color:var(--accent-bright)}
.afr-fu-titel{font-size:var(--fs-sm);color:var(--text)}
.afr-fu-due{font-size:var(--fs-xs);color:var(--text-3)}

/* ===== Opvolging-scherm (asset_8): acties op urgentie + nieuwe leads + focus ===== */
.opv-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.opv-card{padding:16px}   /* schil = de gedeelde kaart-schil in components.css (D2) */
.opv-card-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.opv-card-sub{font-family:var(--font-body);font-weight:400;font-size:var(--fs-xs);color:var(--text-3);margin-left:auto}.opv-group{margin-bottom:14px}
.opv-group:last-child{margin-bottom:0}
.opv-group-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);margin:4px 0 6px}
.opv-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.opv-count{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-3);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:2px}
.opv-actie,.opv-lead{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:var(--r-md);cursor:pointer;transition:background .12s}
.opv-actie:hover,.opv-lead:hover{background:rgba(255,255,255,.03)}
.opv-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);background:none;cursor:pointer;flex:0 0 auto;display:grid;place-items:center;transition:.12s;padding:0}
.opv-check:hover{border-color:var(--green)}
.opv-check.on{background:var(--green);border-color:var(--green)}
.opv-check.on::after{content:"✓";color:#06241a;font-size:var(--fs-sm);font-weight:700}
.opv-av{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;font-weight:700;font-size:var(--fs-2xs);flex:0 0 auto}
.opv-actie-m{flex:1;min-width:0}
.opv-actie-t{font-size:var(--fs-sm);color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opv-actie-s{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.opv-due{font-size:var(--fs-xs);font-weight:600;flex:0 0 auto;white-space:nowrap}
.opv-empty,.opv-note{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.opv-empty{padding:14px 4px;color:var(--text-3)}
.opv-leads{border-color:rgba(224,90,107,.4)}
.opv-pulse{width:8px;height:8px;border-radius:50%;background:var(--urgent);box-shadow:0 0 10px var(--urgent);flex:0 0 auto}
.opv-lead-list{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.opv-age,.opv-foc-eur{font-size:var(--fs-xs);font-weight:700;flex:0 0 auto}.opv-av-los{background:var(--panel-2)!important;border:1px solid var(--line-2);color:var(--text-3)}
.opv-badge{font-size:var(--fs-2xs);font-weight:600;border-radius:var(--r-pill);padding:2px 9px;flex:0 0 auto;white-space:nowrap}
.opv-badge-sale{background:rgba(43,179,240,.16);color:var(--accent-bright)}
.opv-badge-relatie{background:rgba(154,79,208,.16);color:#c3a0ea}
.opv-badge-los{background:rgba(255,255,255,.06);color:var(--text-3)}
.opv-tchip{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap}
.opv-tchip svg{width:11px;height:11px;opacity:.85}
.opv-qa{margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.opv-qa-row{display:flex;gap:8px;align-items:center}
.opv-qa input{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;color:var(--text);font:inherit;font-size:var(--fs-sm);outline:none}
.opv-qa input:focus{border-color:var(--accent)}
.opv-qa-row #qa-titel{flex:1;min-width:0;font-size:var(--fs-base)}
.opv-qa-row #qa-due{flex:0 0 138px;color-scheme:dark}
.opv-qa-koppelwrap{position:relative;margin-top:8px}
.opv-qa-koppelwrap #qa-koppel{width:100%}
.opv-qa-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:0 16px 40px rgba(0,0,0,.5);padding:5px;max-height:280px;overflow:auto}
.opv-qa-results[hidden]{display:none}
.opv-qa-res{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer}
.opv-qa-res:hover{background:rgba(255,255,255,.05)}
.opv-qa-res-ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;flex:0 0 auto;padding:0}
.opv-chip{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-sm);padding:7px 11px}
.opv-chip button{background:none;border:0;color:inherit;cursor:pointer;font-size:var(--fs-lg);line-height:1;padding:0;opacity:.7}
.opv-chip button:hover{opacity:1}
.opv-cadans{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;padding:9px 12px;border-radius:var(--r-md);background:var(--green-dim);border:1px solid rgba(52,211,154,.3)}
.opv-cadans-l{font-size:var(--fs-xs);font-weight:600;color:#7fe3bd}
.opv-cadans-t{font-size:var(--fs-sm);color:var(--text)}
.opv-cadans-due{font-size:var(--fs-xs);color:var(--text-3)}
/* Opgevolgd (afgevinkte acties) — inklapbaar, met wie/wanneer + ongedaan maken */
.opv-done-sec{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.opv-done-h{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;cursor:pointer;padding:6px 4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);transition:color .12s}
.opv-done-h:hover{color:var(--text-2)}
.opv-done-caret{transition:transform .15s;flex:0 0 auto}
.opv-done-caret.open{transform:rotate(90deg)}
.opv-done-list{margin-top:2px}
.opv-actie--done{opacity:.85}
.opv-actie--done .opv-actie-t{color:var(--text-2);font-weight:500}
.opv-check-static{cursor:default;pointer-events:none}
.opv-undo{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;background:none;border:1px solid var(--line-2);color:var(--text-3);border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-2xs);font-weight:600;cursor:pointer;transition:.12s;font-family:var(--font-body)}
.opv-undo:hover{border-color:var(--amber);color:var(--amber)}
.opv-undo:disabled{opacity:.5;cursor:default}
.opv-zonder{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:var(--r-md);cursor:pointer;transition:background .12s}
.opv-zonder:hover{background:rgba(255,255,255,.03)}
.opv-zonder .opv-foc-eur{color:var(--text)}
.opv-zonder .btn{flex:0 0 auto}
.opv-z-proj{color:var(--text-3);font-weight:400}
.opv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.opv-main,.opv-rail{min-width:0}
@media(max-width:1000px){.opv-cols{grid-template-columns:1fr}}
.opv-rail{display:flex;flex-direction:column;gap:16px}
.opv-zsum{color:var(--urgent)!important}
.opv-dimcard{opacity:.82}
.opv-dimcard .opv-zonder{padding-top:7px;padding-bottom:7px}
.opv-subh{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);margin:14px 0 6px;padding-top:13px;border-top:1px solid var(--line)}
.opv-subh.dim{color:var(--text-3)}
.opv-kans{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;padding:1px 7px;border:1px solid var(--text-3);border-radius:20px;min-width:40px;text-align:center}
.opv-kans-na{color:var(--text-3)}
/* Relatie-acties (CRM-detail, Klantcontact-paneel) */
.rd-actie-add{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.rd-actie-add input{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;color:var(--text);font:inherit;font-size:var(--fs-sm);outline:none}
.rd-actie-add input:focus{border-color:var(--accent)}
.rd-actie-add #ra-titel{flex:1;min-width:0;font-size:var(--fs-base)}
.rd-actie-add #ra-due{flex:0 0 138px;color-scheme:dark}
.rd-actie-list{display:flex;flex-direction:column;gap:2px}
.rd-actie{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.rd-actie:first-child{border-top:0}
.rd-actie-t{font-size:var(--fs-base);color:var(--text)}
.rd-actie-due{font-size:var(--fs-xs);font-weight:600;flex:0 0 auto}

/* Compacte offerte-tab: één actiebalk met versie-dropdown */
.obar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
/* Offerte-stap: AI-genereerknop (werkbalk) + 'Open groot'-overlay (asset_11 STAP5) */
.ofz-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim)}
.ofz-frame{width:100%;height:100vh;border:0;background:transparent;display:block}
.ofz-x{position:fixed;top:18px;right:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:var(--fs-sm);cursor:pointer;font-family:inherit}
.ofz-x:hover{border-color:var(--text-2)}
.vdropwrap{position:relative}
.vdrop{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--r-md);padding:8px 13px;font-size:var(--fs-base);color:var(--text);background:none;cursor:pointer}
.vdrop:hover{border-color:var(--text-2,#9498b3)}
.vdrop b{font-weight:700}
.vdrop .cv{color:var(--text-3);font-size:var(--fs-xs)}
.vmenu{position:absolute;top:44px;left:0;width:300px;background:var(--panel,#1b1934);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:6px;z-index:var(--z-dropdown);box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.vmenu[hidden]{display:none}
.vrow{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer}
.vrow:hover{background:rgba(255,255,255,.05)}
.vrow.cur{background:rgba(43,179,240,.10)}
.vrow .vn{font-weight:700;min-width:24px}
.vrow .vd{color:var(--text-3);font-size:var(--fs-xs);margin-left:auto}
.vrow .dl{color:var(--blue);font-size:var(--fs-xs);margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.vrow .dl:hover{text-decoration:underline}
.vsep{height:1px;background:var(--line);margin:5px 4px}
.vadd{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:var(--r-sm);color:var(--text-2,#9498b3);cursor:pointer;font-size:var(--fs-sm)}
.vadd:hover{color:#9fd4f2}
.btn.ac{border-color:rgba(154,79,208,.45);background:rgba(154,79,208,.12);color:#dcc4ee}
.op-hint{flex:0 0 auto;margin-top:6px;min-height:16px}
.op-tools[hidden]{display:none}
/* Input-tab bijlages */
.in-bijlagen{display:flex;flex-wrap:wrap;gap:10px}
.in-bijlage{position:relative;width:120px}
.in-bijlage img{width:120px;height:90px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);display:block}
.in-bijlage .in-nm{display:block;font-size:var(--fs-2xs);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.in-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:var(--fs-xs);cursor:pointer;line-height:1}
.in-pdf{width:120px;height:90px;border-radius:var(--r-sm);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:rgba(220,70,70,.13);color:#df7676;font-weight:700;font-size:var(--fs-md);letter-spacing:.1em}
/* 'In offerte'-toggle per bijlage + de uitgesloten-staat (bijlage blijft AI-basis, gaat niet naar de klant) */
.in-mee{display:flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--text-3);cursor:pointer;margin-top:3px;user-select:none}
.in-mee input{width:13px;height:13px;margin:0;cursor:pointer;accent-color:var(--accent,#2bb3f0);flex:0 0 auto}
.in-bijlage--uit img,.in-bijlage--uit .in-pdf{opacity:.4;filter:grayscale(.65)}
.in-bijlage--uit .in-nm{opacity:.55}
.in-bijlage--uit .in-mee{color:var(--amber,#e8a33d)}
.in-drop{border:1.6px dashed var(--line);border-radius:var(--r-md);padding:20px 14px;text-align:center;color:var(--muted,#9aa1b4);cursor:pointer;font-size:var(--fs-base);transition:border-color .12s,background .12s,color .12s}
.in-drop:hover,.in-drop.over{border-color:var(--accent);background:rgba(43,179,240,.07);color:var(--ink,#eceefb)}
.in-drop .in-drop-ic{display:inline-block;margin-right:7px;font-size:var(--fs-lg)}

/* ---- sale-stap: samenvatting ---- */
.sumgrid{display:flex;flex-direction:column;gap:6px}
.sumrow{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:6px}
.sumrow:last-child{border-bottom:none}
.sumlab{flex:0 0 150px;color:var(--ink-soft);font-size:var(--fs-xs)}
.sumval{flex:1;font-size:var(--fs-sm);color:var(--ink)}

/* ⚠ HIER STOND EEN TWEEDE MOBIELE LAYOUT — verwijderd, zie css/mobiel.css.
   Het blok (@media max-width:820px) zette body op flex-direction:column en de zijbalk op
   position:static + flex-direction:row, in de hoop dat het menu een horizontale balk zou worden.
   Wat er in de praktijk gebeurde, gemeten op 375×812: de zijbalk werd 363px breed en 691px HOOG
   (de menulijst wikkelt niet, hij stapelt), en de inhoud begon daardoor op y=809 — onder de vouw.
   Je scrolde eerst langs het hele menu voor je iets zag.

   Het overstemde bovendien stil de nieuwe mobiele shell: `aside.sidebar` (0,1,1) is specifieker
   dan `.sidebar` (0,1,0), dus position/width/flex uit dít blok wonnen van css/mobiel.css terwijl
   transform en z-index daar wél vandaan kwamen — een halve layout uit twee bestanden.
   Ook `nav{display:flex;gap:6px}` stond hier: een kale elementselector die élke <nav> raakt,
   inclusief de nieuwe onderbalk. Zie [[reference_css_dubbele_blokken]]. */

/* ===== Online portaal (Diversen) — nieuwe huisstijl ===== */
.search{flex:1;min-width:190px;max-width:380px;border:1px solid var(--line-2);border-radius:var(--r-md);background:rgba(255,255,255,.03);padding:9px 13px;color:var(--text);font-size:var(--fs-base);font-family:inherit}
.search::placeholder{color:var(--text-3)}
.ptbl-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--surface);position:relative}
.ptbl-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:4}
table.ptbl{width:100%;border-collapse:collapse;min-width:960px}
.ptbl thead th{text-align:left;padding:15px 16px 11px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line-2);white-space:nowrap;background:#171430;position:sticky;top:0}
.ptbl thead th.r{text-align:right}
.ptbl tbody tr{border-bottom:1px solid var(--line);transition:background .14s}
.ptbl tbody tr:last-child{border-bottom:0}
.ptbl tbody tr.po-row:hover{background:rgba(255,255,255,.025)}
.ptbl td{padding:11px 16px;vertical-align:middle;font-size:var(--fs-base)}
.ptbl td.r{text-align:right}
.ptbl .pj{display:flex;align-items:center;gap:10px}
.ptbl .pj .cx{width:13px;height:13px;color:var(--text-3);flex:0 0 13px;cursor:pointer;transition:transform .14s,color .14s}
.ptbl .pj .cx.empty{visibility:hidden;cursor:default}
.ptbl .pj .cx.open{transform:rotate(90deg);color:var(--blue)}
.ptbl .pj .nm{font-weight:600;letter-spacing:-.01em}
.ptbl .cli{color:var(--text-2);white-space:nowrap}
.ptbl .dt{color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptbl .vd{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptbl .vd.expired{color:var(--urgent)}
.ptbl .vd.soon{color:var(--amber)}
.ptbl .price{font-variant-numeric:tabular-nums;white-space:nowrap}
.plat{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:3px 10px;border-radius:6px;border:1px solid;white-space:nowrap}
.plat.trendspek{border-color:rgba(43,179,240,.4);color:#9fd4f2;background:rgba(43,179,240,.08)}
.plat.omnibase{border-color:rgba(154,79,208,.45);color:#cba3e6;background:rgba(154,79,208,.10)}
.acts{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.act{border:1px solid var(--line-2);border-radius:7px;padding:5px 11px;font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap;transition:.14s;background:none;cursor:pointer;font-family:inherit}
.act:hover{border-color:var(--text-2);color:var(--text)}
.act.del{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.act.del svg{width:15px;height:15px}
.act.del:hover{border-color:var(--urgent);color:var(--urgent)}
.po-detail td{background:#171430;color:var(--text-2);font-size:var(--fs-sm);line-height:1.5;padding:8px 16px 10px 42px}
.po-detail b{color:var(--text)}
/* Totaalregel onder de portaallijst, met dezelfde opmaak als `.ltable tfoot`: label links,
   som ernaast met cijfers van gelijke breedte. Was een losse telzin. */
.po-count{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:11px 14px;font-size:var(--fs-xs);color:var(--text-3);border-top:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.po-count b{font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.po-count .po-som{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.po-count .po-hint{margin-left:auto}
.po-empty{padding:26px 12px;text-align:center;color:var(--text-3)}
/* portaal 2.0: status/koppel-chips + detail-blok met periodes-historie */
.po-chip{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid;margin-left:8px;white-space:nowrap}
.po-chip.amber{border-color:rgba(245,166,35,.45);color:var(--amber);background:rgba(245,166,35,.08)}
.po-chip.red{border-color:rgba(255,92,92,.4);color:var(--urgent);background:rgba(255,92,92,.08)}
.po-chip.groen{border-color:rgba(52,211,154,.4);color:var(--green);background:rgba(52,211,154,.08)}
.po-chip.grijs{border-color:var(--line-2);color:var(--text-3)}
.po-dgrid{display:flex;flex-wrap:wrap;gap:4px 26px;padding:2px 0 4px}
.po-pertbl{width:100%;border-collapse:collapse;margin-top:8px}
.po-pertbl th{text-align:left;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:5px 10px 5px 0;border-bottom:1px solid var(--line-2)}
.po-pertbl th.r,.po-pertbl td.r{text-align:right}
.po-pertbl td{padding:6px 10px 6px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.po-pertbl tr:last-child td{border-bottom:0}
.po-fs{background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:6px;padding:4px 6px;font:inherit;font-size:var(--fs-sm)}
/* ===== Dataportaal: kolommenlijst + read-first accordion (3e iteratie, mockup-akkoord 2026-07-16) ===== */
.pa-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.pa-bar #po-ftabs{margin-right:auto}
.pa-fsel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text-2);padding:8px 10px;font:inherit;font-size:var(--fs-sm);max-width:200px}
.pa-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-1);overflow-x:auto;position:relative}
.pa-list::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:4}
.pa-scroll{min-width:940px}
/* kop + rij delen exact hetzelfde grid → kolommen staan altijd recht onder elkaar */
.pa-kop,.pa-rij{display:grid;grid-template-columns:30px minmax(210px,2.4fr) minmax(125px,1.3fr) 92px 150px 122px 96px 90px;gap:12px;align-items:center;padding:0 16px 0 0}
/* Kop-typografie gelijk aan `.ltable th` (was --fs-micro/.11em, nu --fs-2xs/.02em): de portaallijst
   is geen <table> — de rijen klappen open — maar hij hoort wél hetzelfde te LEZEN als de andere drie. */
.pa-kop{font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--text-3);font-weight:600;border-bottom:1px solid var(--line-2);padding-top:13px;padding-bottom:9px;background:#171430}
.pa-kop .r,.pa-rij .r{text-align:right}
.pa-kop .srt{cursor:pointer;user-select:none}
.pa-kop .srt:hover{color:var(--text-2)}
.pa-kop .srt.on{color:var(--text)}
.pa-item{border-bottom:1px solid var(--line)}
.pa-item:last-child{border-bottom:0}
.pa-rij{cursor:pointer;min-height:46px}
/* Accentstreep links, zelfde afspraak als .ltable en .wk-drow: de status als kleur, zodat je een
   rij kunt scannen zonder de pil te lezen. Kleur komt per rij uit --acc (zie accVoor in portaal.js). */
.pa-rij[style*="--acc"]{position:relative}
.pa-rij[style*="--acc"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.pa-rij:hover{background:rgba(255,255,255,.025)}
.pa-rij.open{background:rgba(43,179,240,.05)}
.pa-rij .chv{display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.pa-rij .chv svg{width:13px;height:13px;transition:transform .15s}
.pa-rij.open .chv svg{transform:rotate(90deg);color:var(--blue)}
.pa-cel{min-width:0}
.pa-rij .nm{font-weight:650;font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-rij .sub{font-size:var(--fs-2xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-rij .rel{color:var(--text-2);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-rij .dt{color:var(--text-2);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-rij .dt small{display:block;font-size:var(--fs-2xs);color:var(--text-3)}
.pa-rij .pr{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--fs-sm)}
.pa-rij .pr small{color:var(--text-3)}
.pa-rij .qa .btn{visibility:visible}
/* één status-pill (kleur-dot + tekst) — dé status-plek van de rij */
.pa-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:650;padding:3px 10px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap}
.pa-pill i{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.pa-pill.groen{border-color:rgba(52,211,154,.35);color:var(--green);background:rgba(52,211,154,.07)}.pa-pill.groen i{background:var(--green)}
.pa-pill.amber{border-color:rgba(232,163,61,.4);color:var(--amber);background:rgba(232,163,61,.08)}.pa-pill.amber i{background:var(--amber)}
.pa-pill.rood{border-color:rgba(255,93,115,.4);color:var(--urgent);background:rgba(255,93,115,.08)}.pa-pill.rood i{background:var(--urgent)}
.pa-pill.blauw{border-color:rgba(43,179,240,.4);color:var(--blue);background:rgba(43,179,240,.08)}.pa-pill.blauw i{background:var(--blue)}
.pa-pill.grijs{border-color:var(--line-2);color:var(--text-3)}.pa-pill.grijs i{background:var(--text-3)}
/* detailpaneel: actiebalk + twee sub-kaarten. Zat tot 29-07 uitgeklapt IN de rij; staat nu in het
   gedeelde venster (.ec-dlg--werk), gelijk aan declaratie/inkoopfactuur/verkoopfactuur. De basisregel
   blijft staan voor het geval het paneel ooit ergens anders wordt ingebed. */
.pa-exp{background:linear-gradient(180deg,#14112b,#12102a);border-top:1px solid var(--line);padding:14px 18px 18px;cursor:default}
/* In het venster levert de dialoog zelf de achtergrond en de padding al. */
.pa-exp--dlg{background:none;border-top:0;padding:0}
.pa-dlgsub{margin-top:6px;font-size:var(--fs-sm);color:var(--text-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Twee kolommen naast elkaar (koppelingen + looptijd) passen niet in de standaard 620px. Onder de
   940px valt .pa-exp-grid via zijn eigen minmax vanzelf onder elkaar.
   ⚠Bewust BEIDE klassen in de selector: `.ec-dlg--werk{width:min(620px,100%)}` staat in
   components.css, dat ná dit bestand laadt — met één klasse won die en bleef het venster 620px. */
.ec-dlg--werk.ec-dlg--wijd{width:min(940px,100%)}
.pa-exptop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pa-exptop .melding{color:var(--text-2);font-size:var(--fs-sm)}
.pa-exptop .melding b{color:var(--amber)}
.pa-exptop .rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
/* ⛔DE ABONNEMENT-PRULLENBAK MOET NIET OP DE PERIODE-PRULLENBAK LIJKEN. Ze stonden in hetzelfde
   paneel, allebei als `.act.del` met exact hetzelfde ×-glyph en alleen 15px tegen 13px verschil —
   terwijl de bovenste het HELE abonnement mét zijn facturatiehistorie wist en de onderste één
   periode. Precies de valkuil die in de lagenlijst van de locatie-analyse al is opgelost.
   ⚠Eerst kreeg hij hier een rood LABEL in de actiebalk. Dat loste de verwarring op maar maakte een
   zeldzame, onomkeerbare actie even prominent als de dagelijkse — hij concurreerde met de primaire
   knop. Sinds 08-09-2026 zit hij in het ···-menu, áchter een scheidingslijn (`{sep:true}`), waar
   `.hub-more-item.danger` hem al rood zet. Er is dus geen eigen regel meer nodig; de periode-× is
   nu de enige ×-knop in het paneel en kan niet meer met iets anders verward worden. */
/* De primaire actie staat in het Looptijd-paneel, direct boven de periodetabel die hij vult. */
.pa-hoofdactie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.pa-exp-grid{display:grid;grid-template-columns:minmax(290px,5fr) minmax(310px,6fr);gap:14px}   /* items rekken mee → beide sub-kaarten even hoog */
@media (max-width:900px){.pa-exp-grid{grid-template-columns:1fr}}
/* ⭐HET DETAILVENSTER ZET DE TWEE BLOKKEN ONDER ELKAAR (13-09-2026, besluit Remco: "zet de twee
   blokken in deze modal onder elkaar, dan ondervangen we de overloop"). Naast elkaar kreeg het
   Looptijd-blok een periodetabel van 442–447 px — het venster wordt nooit breder dan 940 px, dus dat
   gold op 1000, 1333, 1536 én 1920 px schermbreedte (gemeten in een echte headless Chrome). Daarin
   liep de datum over de kolom Cyclus en stond het potlood van de status voor ~90 % óp de ×-knop.
   ⚠Alleen het DETAILvenster (`paintExp`). Het formulier 'Nieuw abonnement' gebruikt dezelfde grid,
   heeft geen tabel en dus geen overloop — dat blijft naast elkaar.
   ⚠Deze regel moet NA `.pa-exp-grid` staan: gelijke specificiteit, dus de laatste wint. */
.pa-exp-grid--onder{grid-template-columns:1fr}
.pa-sub{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px}
.pa-sub .ey{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pa-sub .ey .rechts{margin-left:auto;text-transform:none;letter-spacing:normal;font-weight:400}
/* read-first definitielijst: waarde als tekst met een potlood erachter; klik = veld ter plekke bewerken */
.pa-kv{display:grid;grid-template-columns:118px 1fr;gap:7px 14px;font-size:var(--fs-base);align-items:center}
.pa-kv .k{color:var(--text-3);font-size:var(--fs-sm)}
.pa-kv .v{display:flex;align-items:center;gap:7px;min-height:26px;min-width:0}
.pa-kv .v a{color:var(--blue);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-kv .v.leeg{color:var(--text-3);font-style:italic}
/* ⭐HET POTLOOD IS ALTIJD ZICHTBAAR (13-09-2026). Het stond op opacity:0 tot je er met de muis
   overheen ging, en Remco zocht het potlood bij de periodestatus tevergeefs — terwijl de kop van het
   Koppelingen-blok letterlijk "klik ✎ om te bewerken" zegt. Een bediening die pas verschijnt als je
   er toevallig overheen beweegt, bestaat niet voor wie hem zoekt. Gedempt in rust, helder bij hover,
   en een eigen klikvlak: het glyph zelf is maar 11 px breed.
   ⚠Gescoped op de twee plekken die hem gebruiken. De `.ed` in offertepreview.js is een ándere klasse
   (de bewerkbare blokken in het voorbeeld-iframe) en hoort hier niet onder te vallen. */
.pa-kv .ed,.pa-edwrap .ed{opacity:.7;color:var(--text-3);cursor:pointer;font-size:var(--fs-xs);line-height:1.2;padding:2px 5px;border-radius:5px;transition:opacity .12s,color .12s,background .12s;flex:0 0 auto}
.pa-kv .v:hover .ed,.pa-edwrap:hover .ed{opacity:1;color:var(--text)}
.pa-kv .ed:hover,.pa-edwrap .ed:hover{background:rgba(255,255,255,.07)}
.pa-edin{background:var(--bg);border:1px solid var(--blue);border-radius:6px;color:var(--text);padding:4px 8px;font:inherit;font-size:var(--fs-base)}
.pa-edin.r{text-align:right;width:90px}
.pa-edin[type=date]{color-scheme:dark}
.pa-edwrap{display:inline-flex;align-items:center;gap:6px}
/* ⛔DE PERIODETABEL MOET EIGEN KOLOMBREEDTES KRIJGEN. `.ltable table` staat op `table-layout:fixed`
   en `.ltable td` op `overflow-wrap:anywhere`; in het smalle Looptijd-paneel kregen alle vijf de
   kolommen daardoor exact dezelfde breedte (gemeten: 5 × 89px) en brak ÉLKE cel over vier regels —
   '14-09-\2026 – 14-\09-2027', het €-teken los van het bedrag, en het potlood onder de waarde.
   Gemeten 08-09-2026 in een echte headless Chrome; de kop van het venster was wél netjes uitgelijnd
   (links 492 = 492, rechts 1392 = 1392), dus dit was het hele euvel. Percentages, geen px: het
   paneel schaalt mee met de vensterbreedte. */
.pa-sub .ltable td,.pa-sub .ltable th{padding:9px 8px}
/* ⚠OP KLASSE, NIET OP POSITIE (13-09-2026). Hier stond `nth-child(1..5)`, en voor een geld-loze rol
   valt de Prijs-kolom weg: dan kreeg Facturatie de nowrap van de prijs en de ×-knop de breedte van
   Facturatie. Elke cel draagt nu zijn eigen `pp-`klasse (periodesHTML in portaal.js).
   De verdeling is herzien nu het Looptijd-blok de volle vensterbreedte heeft: de Cyclus-kolom
   ('jaar') had ruimte over, Facturatie tekort zodra er ook een Akkoord-knop in staat. */
.pa-sub .ltable .pp-per{width:28%;white-space:normal;overflow-wrap:normal}
/* Elke datum blijft heel; op een smal scherm breekt de cel TUSSEN de twee datums, nooit erin. */
.pa-sub .ltable .pp-per .nw{white-space:nowrap}
.pa-sub .ltable .pp-cyc{width:10%}
.pa-sub .ltable .pp-prijs{width:20%;white-space:nowrap}
.pa-sub .ltable .pp-fs{width:34%}
/* De prullenbak heeft geen kop en dus geen eigen breedte nodig — knijp 'm tot de knop. */
.pa-sub .ltable .pp-del{width:8%;padding-left:0}
/* ⛔HET POTLOOD MAG NOOIT OVER DE ×-KNOP HEEN LOPEN. Past bedrag of status plus potlood niet in de
   cel, dan zakt het potlood naar een tweede regel in plaats van uit de cel te steken. Naast elkaar
   stond het met 11 px breedte voor ~90 % óp het klikvlak van 'Periode verwijderen'. */
.pa-sub .ltable .pa-edwrap{flex-wrap:wrap;row-gap:2px}
.pa-acts{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap;align-items:center}
.pa-inline{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:0 0 12px}
.pa-form .pfld,.pa-form2 .pfld{margin-bottom:9px}
.pa-form2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
/* tijdlijn — segment per periode mét jaarlabel; | = vandaag in de lopende periode */
.pa-tl{display:flex;gap:4px;margin:2px 0 5px}
.pa-tl .seg{height:26px;border-radius:7px;flex:1;border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);color:var(--text-2);font-variant-numeric:tabular-nums;background:var(--surface-2)}
.pa-tl .seg.vol{background:rgba(52,211,154,.16);border-color:rgba(52,211,154,.3)}
.pa-tl .seg.nu{background:rgba(43,179,240,.18);border-color:rgba(43,179,240,.5);color:var(--text)}
.pa-tl .seg.nu::after{content:"";position:absolute;top:-5px;bottom:-5px;left:var(--nu,50%);width:2px;background:#fff;border-radius:2px;opacity:.9}
.pa-tl .seg.straks{background:repeating-linear-gradient(45deg,rgba(232,163,61,.14),rgba(232,163,61,.14) 5px,transparent 5px,transparent 10px);border-color:rgba(232,163,61,.4);color:var(--amber)}
.pa-tl-leg{display:flex;gap:14px;font-size:var(--fs-2xs);color:var(--text-3);margin-bottom:10px;flex-wrap:wrap}
.pa-tl-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.pa-beleid{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-3);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.pa-beleid b{color:var(--text-2);font-weight:600}
/* editor-modal */
.po-modal{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.po-card{width:100%;max-width:620px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow);padding:20px 22px}
.po-card h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);margin:0 0 12px}
.po-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
/* ⚠De typeahead-CSS (.po-ac*) stond hier en is 12-09-2026 naar components.css verhuisd
   als `.ec-ta*`, toen de portaal-typeahead een gedeeld component werd (het factuurveld
   'Factureren aan' had dezelfde lijst-én-zoeken nodig). Zie `wireTypeahead` daar. */
.pfld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pfld input,.pfld select,.pfld textarea{background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:7px;padding:8px 10px;font:inherit;font-size:var(--fs-base);text-transform:none;letter-spacing:normal}
.pfld textarea{resize:vertical}
.pfld input[type=date]{color-scheme:dark}
/* Zoek-met-resultaten (typeahead) voor project/opdrachtgever in de portaal-editor */
.po-modal-acts{display:flex;gap:10px;align-items:center;margin-top:18px}
.po-x{background:none;border:0;color:var(--text-2);cursor:pointer;display:flex;padding:5px;border-radius:var(--r-sm)}
.po-x:hover{background:rgba(255,255,255,.06);color:var(--text)}
/* Sluitknop van de offerteproces-modal: netjes als bordered knop in de rechterbovenhoek */
.of-mhead .po-x{margin-left:auto;flex:0 0 30px;width:30px;height:30px;padding:0;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-sm)}
.of-mhead .tag{margin-top:0;flex:0 0 auto}
/* locatie-analyse-overlay: draait in de offerteproces-chrome (of-overlay/of-modal, huisstijl §8);
   alleen de body-specifieke maten zijn nog locatie-eigen. */
.loc-body .loc-split{height:clamp(480px,calc(100vh - 330px),660px)}
/* stepper = volle-breedte-rij BÓVEN de body (geen omkaderende kaart), pills capped + links;
   gebruikt de canon .sbal-pill-component. */
.loc-stepper{display:flex;align-items:center;gap:0;max-width:560px;border-bottom:0;padding:0;margin:0 0 16px}
.loc-stepper .loc-tab{margin:0}
.loc-foot{display:flex;align-items:center;gap:12px;margin:16px -22px -24px;padding:13px 22px;border-top:1px solid var(--line-2)}
.loc-foot .hint{flex:1;text-align:center;margin:0}
/* Overnemen-paneel (spiegel-only Simplicate-sale → bewerkbare cockpit-sale).
   ⚠De schil-klassen (.ov-card/.ov-subj/.ov-badges/.ov-facts/.ov-eyebrow/.ov-prev/.ov-loading/.ov-row)
   zijn 29-07 verwijderd: geen enkele verwijzing meer in recon/js, ook niet dynamisch. Wat hieronder
   staat LEEFT wél (.ov-d/.ov-ddet/.ov-line in de salehub) — niet meeslepen bij een opruimronde. */
/* uitklapbare dienst-opbouw (uren + kosten) in de overnemen-preview */
.ov-d .ov-dhead{cursor:pointer}
.ov-d:first-child .ov-dhead{border-top:0}
.ov-dhead .dn{display:inline-flex;align-items:center;gap:5px}
.ov-dhead .dn svg{opacity:.5;flex:0 0 auto;transition:transform .15s}
.ov-d.open .ov-dhead .dn svg{transform:rotate(90deg)}
.ov-ddet{display:none;padding:0 0 9px 18px}
.ov-d.open .ov-ddet{display:block}
.ov-line{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sm);color:var(--text-2);padding:3px 0}
.ov-line.muted{color:var(--text-3);font-style:italic}
/* calculatie-opbouw op de sale-hub (hergebruikt .ov-d/.ov-ddet/.ov-line) */
.hcalc-list{max-height:300px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:8px;padding-bottom:2px}
.hcalc-d{cursor:pointer}
.hcalc-d>span:first-child{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--text)}
.hcalc-d svg{opacity:.5;flex:0 0 auto;transition:transform .15s}
.ov-d.open .hcalc-d svg{transform:rotate(90deg)}
.hcalc-empty{font-size:var(--fs-sm);color:var(--text-3);padding:6px 0 10px}
.hcalc-opthead{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:8px 0 2px;padding-top:7px;border-top:1px dashed var(--line)}
.hcalc-d.opt>span:first-child{color:var(--text-2)}
.hcalc-d.opt>span:last-child{color:var(--text-2);font-weight:500}
/* Gevulde paarse badge in de calculatie-opbouw. Heette .opt-tag en botste met de outline-pill van
   'Optionele diensten' (bovenin): die staat eerder in het bestand en verloor dus alles behalve zijn
   `border` — precies die rand liep stil om deze badge heen. Eigen naam, geen botsing meer. */
.hcalc-opttag{display:inline-block;font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--purple);background:rgba(154,79,208,.16);padding:1px 6px;border-radius:5px;vertical-align:middle}
/* sale-hub calculatie: bundeling per sectie (uitklapbaar; diensten klappen zelf nog verder uit) */
.hcalc-sec{border-top:1px solid var(--line)}
.hcalc-sec:first-child{border-top:0}
.hcalc-sechead{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;padding:9px 0;font-weight:700;color:var(--text)}
.hcalc-sechead>span:first-child{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hcalc-sechead>span:last-child{font-variant-numeric:tabular-nums;flex:0 0 auto}
.hcalc-sechead svg{opacity:.55;flex:0 0 auto;transition:transform .15s}
.hcalc-sec.open .hcalc-sechead svg{transform:rotate(90deg)}
.hcalc-sec.opt .hcalc-sechead{color:var(--text-2);font-weight:600}
/* add-on-regel (Online portaal/Bewonersbrieven): zelfde opmaak als een sectiekop, maar niet uitklapbaar */
.hcalc-addon{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;font-weight:700;color:var(--text)}
.hcalc-addon>span:first-child{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hcalc-addon>span:last-child{font-variant-numeric:tabular-nums;flex:0 0 auto}
.hcalc-sec.opt .hcalc-addon{color:var(--text-2);font-weight:600}
.hcalc-secbody{display:none;padding:0 0 6px 17px}
.hcalc-sec.open .hcalc-secbody{display:block}
/* voortgangsbalkje (gedeeld: dashboard, sale-hub, instellingen) */
.pbar{height:8px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:6px}
.pbar>i{display:block;height:100%;border-radius:6px}
/* facturatie-werklijst: verstreken termijn + startdatum-check-vlag + Simplicate-link */
.fac-laat{color:var(--urgent);font-weight:600;font-size:var(--fs-sm)}
.fac-chk{display:inline-block;margin-left:6px;font-size:var(--fs-2xs);color:var(--amber);border:1px solid rgba(232,163,61,.4);border-radius:5px;padding:0 5px}
.fac-ext{display:inline-flex;align-items:center;color:var(--text-3);background:none;border:0;padding:0;cursor:pointer}
.fac-ext:hover{color:var(--blue)}
/* Post waarvoor al een cockpit-factuur ligt: gedempt en zonder + Factuur-knop (geen dubbel concept).
   Bewust gedempt en niet verborgen — een concept kan verwijderd worden, dan hoort de post terug. */
.fac-heeft{opacity:.62}
.fac-heeft:hover{opacity:.85}
.fac-fc{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;color:#f0c27e;border:1px solid rgba(232,163,61,.45);background:rgba(232,163,61,.1);text-decoration:none}
.fac-fc:hover{background:rgba(232,163,61,.2)}
/* Handmatige factuur voor dezelfde relatie: zacht signaal (gestippeld), géén blokkade — een
   handmatige factuur heeft geen projectkoppeling, dus de cockpit kán niet weten of het dubbel is. */
.fac-hand{display:inline-block;margin-left:6px;font-size:var(--fs-2xs);color:var(--amber);border:1px dashed rgba(232,163,61,.5);border-radius:5px;padding:0 5px;text-decoration:none}
.fac-hand:hover{background:rgba(232,163,61,.14)}
/* Dit project factureert aan een andere relatie. ⚠BEWUST BLAUW EN NIET AMBER, anders dan de twee
   chips hierboven: dat is geen afwijking die je moet nakijken maar een vastgelegde afspraak. Een
   waarschuwkleur die altijd aan staat is geen signaal meer — zie de `bewust`-les bij de
   integriteitscheck in CLAUDE.md. Tint-recept: .12-vulling + .45-rand, zoals de andere statusvlakken. */
.fac-deb{display:inline-block;margin-left:6px;font-size:var(--fs-2xs);color:#9fd4f2;
  background:rgba(43,179,240,.12);border:1px solid rgba(43,179,240,.45);border-radius:5px;padding:0 5px}
/* Losgeraakte termijn: de factuur is al verstuurd maar niet aan deze termijn gekoppeld. GEVULD amber
   (niet alleen een rand zoals .fac-chk): dit is de enige chip in deze lijst waar je iets mee MOET
   vóór je factureert, en hij staat naast chips die alleen mededelen. */
.fac-los{display:inline-block;margin-left:6px;font-size:var(--fs-2xs);color:var(--amber);font-weight:650;
  background:rgba(232,163,61,.14);border:1px solid rgba(232,163,61,.55);border-radius:5px;padding:0 5px}
/* De bijbehorende regel bóven de tabel. Tint-recept, en bewust binnen de lijstbreedte zodat hij bij
   de tabel hoort en niet bij de hero. */
.fac-losnote{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:9px 12px;
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-1);
  background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.45);border-radius:var(--r-md)}
.fac-losnote svg{flex:0 0 auto;margin-top:2px;color:var(--amber)}
.fac-losnote a{color:var(--amber)}
/* facturatie: tab-balk onder de hero (Te factureren | Openstaand | Alle facturen | Boekhouding) */
.fac-htabs{display:flex;gap:2px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 10px;margin-bottom:12px;box-shadow:var(--e-1)}
.fac-htabs .t{display:flex;gap:8px;align-items:center;padding:12px 15px;color:var(--text-2);font-weight:650;font-size:var(--fs-base);border-bottom:2.5px solid transparent;text-decoration:none}
.fac-htabs .t:hover{color:var(--text)}
.fac-htabs .t.on{color:var(--text);border-image:var(--grad) 1;border-bottom:2.5px solid}
.fac-htabs .t.uit{opacity:.45;cursor:default;margin-left:auto;font-style:italic;font-weight:500}
/* ⚠De teller houdt ZIJN RUIMTE ook als hij nog leeg is (visibility, niet display/hidden). De tabs
   worden async gevuld; met display:none sprong de hele tabbalk breder zodra de cijfers binnenkwamen. */
.fac-htabs .n{font-size:var(--fs-2xs);font-weight:700;background:var(--surface-2);border-radius:var(--r-pill);padding:1px 8px;color:var(--text-2);min-width:26px;text-align:center;visibility:hidden}
.fac-htabs .n.vol{visibility:visible}
.fac-htabs .n.amb{color:var(--amber);background:rgba(232,163,61,.14)}

/* ---- Gedeelde filterbalk (alle vier de facturatie-tabbladen) ----
   ⚠VASTE VOLGORDE: [segmented] [selects] [zoek] ——— [ververs]. Elk tabblad bouwde hiervóór zijn
   eigen balk, waardoor het zoekveld per tabblad op een andere plek stond. Ontbreekt een onderdeel,
   dan blijft de rest staan waar hij stond — de rek-span duwt de ververs-knop altijd naar rechts. */
/* min-height: de balk van Boekhouding heeft geen segmented en geen zoekveld en was daardoor 27px
   i.p.v. 52 — waardoor de lijst op dát tabblad 25px hoger begon dan op de andere drie. */
.fac-tbar{gap:10px 14px;flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:52px}
.fac-tbar__links,.fac-tbar__rechts{display:flex;align-items:center;gap:10px;min-width:0}
.fac-tbar__links{flex:1 1 auto;flex-wrap:wrap}
/* De rechtergroep krimpt NIET mee: zoek en ververs houden hun maat en hun onderlinge volgorde, en
   wikkelen als geheel naar de volgende regel als het niet past. Zonder flex:0 0 auto werd de
   ververs-knop op Openstaand tot 96px samengedrukt (min-width 149) omdat de segmented daar breder is. */
/* `margin-left:auto` naast justify-content: bij het WIKKELEN staat de rechtergroep alleen op zijn
   regel, en dan legt space-between hem links neer. Met de auto-marge blijft hij ook dan rechts. */
.fac-tbar__rechts{flex:0 0 auto;justify-content:flex-end;margin-left:auto}
.fac-tbar__seg:empty{display:none}
.fac-tbar__rek{display:none}
/* Vaste breedte voor het zoekveld — plus een even brede LEGE plek op de tabbladen die er geen
   hebben, zodat de ververs-knop overal op dezelfde x staat. */
.fac-tbar .lsearch,.fac-tbar__zoekplek{flex:0 0 252px;width:252px;margin-left:0}
.fac-tbar__actieplek{flex:0 0 auto;min-width:149px;display:flex;justify-content:flex-end}
/* Smal scherm: de lege reserveringen vervallen — daar is uitlijning minder waard dan ruimte. */
@media (max-width:1180px){
  .fac-tbar__links{flex:1 1 100%}
  .fac-tbar__rechts{flex:1 1 100%;justify-content:flex-start}
  .fac-tbar .lsearch{flex:1 1 200px;width:auto}
  .fac-tbar__zoekplek{display:none}
  .fac-tbar__actieplek:empty{display:none}
}
/* Uitleg hoort ONDER de balk, niet erin: in de balk werd het op smallere schermen twee regels en
   verschoof de knop ernaast mee. */
.fac-hint{font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;margin:-4px 0 12px;max-width:var(--w-prose,900px)}
.fac-hint b{color:var(--text-2);font-weight:650}

/* Openstaand-tab: verhouding-openstaand-balk (in de hero-body) + debiteurenlijst */
/* ⚠VASTE HOOGTE, ook als de balk er niet is. Alleen Openstaand vult 'm; zonder deze reservering
   sprong bij elke tabwissel alles onder de hero op en neer (CLS).
   `overflow:hidden` is nodig, niet cosmetisch: zonder dat lekt de margin-top van .fac-vbar door de
   slot heen naar de hero (margin-collapse) en was de hero op Openstaand alsnog 12px hoger — gemeten
   222 vs 210 px met alleen min-height. Hoogte = 12 + 20 (balk) + 7 + 14 (legenda). */
.fac-vbar-slot{height:53px;overflow:hidden}
.fac-vbar{height:20px;border-radius:8px;overflow:hidden;display:flex;border:1px solid var(--line);margin:12px 0 7px}
.fac-vbar i{display:block;height:100%}
.fac-vleg{display:flex;gap:22px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-2)}
.fac-vleg b{font-variant-numeric:tabular-nums;color:var(--text)}
.fac-vleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.fo-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-1);overflow-x:auto;position:relative}
.fo-list::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:4}
/* Statuskolom 140 → 158px: het nummer mét soort-merkje ('C2026-0129 CREDIT') mat 137px en hield
   maar 3px over — bij een andere reeksprefix liep dat over. De ruimte komt uit de debiteurkolom,
   die flexibel is en 220px minimum houdt. */
.fo-kop,.fo-rij{display:grid;grid-template-columns:158px minmax(220px,2.2fr) 130px 150px minmax(150px,1fr) 60px;gap:12px;align-items:center;padding:0 18px;min-width:898px}
.fo-kop{font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);font-weight:650;border-bottom:1px solid var(--line-2);padding-top:12px;padding-bottom:9px;background:#171430}
.fo-kop .r,.fo-rij .r{text-align:right}
.fo-rij{border-bottom:1px solid var(--line);min-height:52px;cursor:pointer}
.fo-rij:hover{background:rgba(255,255,255,.025)}
.fo-rij:last-child{border-bottom:0}
.fo-rij .dn .d{color:var(--text-2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.fo-rij .dn .n{font-weight:650;font-variant-numeric:tabular-nums}
/* DOCUMENTSOORT achter het nummer (creditnota). Bewust GEEN .pa-pill: die familie staat voor een
   STATUS, en twee pills onder elkaar lazen als twee statussen én maakten die rij een regel hoger
   dan de rest — de lijst verloor zijn ritme. Dit hoort bij de IDENTITEIT van het document, dus
   staat het bij het nummer: klein, in het paars van de huisstijl, lager gewicht, zodat het de
   statuspill niet beconcurreert. Dat het om een creditering gaat blijkt bovendien al uit het
   negatieve bedrag — dit merkje benoemt alleen wát voor document het is. */
.fo-rij .dn .fc-soort{margin-left:6px;padding:1px 5px;border-radius:4px;font-size:var(--fs-micro);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;
  color:#cba3e6;background:rgba(154,79,208,.16);border:1px solid rgba(154,79,208,.32)}
/* Twee verschillende dingen, dus twee verschillende merktekens: CREDIT zegt wat dit document ÍS
   (paars, hierboven), GECREDITEERD zegt wat er MÉT deze factuur is gebeurd. Bewust neutraal grijs —
   het is geen waarschuwing en geen tweede documenttype, maar een afgesloten hoofdstuk. Juist door
   dat kleurverschil lezen ze als twee kanten van hetzelfde paar in plaats van als twee labels die
   om aandacht vechten. */
.fo-rij .dn .fc-soort.is-terug{color:var(--text-3);background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);letter-spacing:.06em}
.fo-rij .deb .rel{font-weight:650}
.fo-rij .deb .rel a{color:var(--text);text-decoration:none}
.fo-rij .deb .rel a:hover{color:var(--blue)}
.fo-rij .deb .prj{font-size:var(--fs-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-rij .bedrag{font-variant-numeric:tabular-nums;font-weight:650;text-align:right}
.fo-rij .verval{font-size:var(--fs-sm);font-weight:650;font-variant-numeric:tabular-nums}
.fo-rij .verval small{display:block;font-weight:400;color:var(--text-3)}
.fo-rij .actie{font-size:var(--fs-sm);color:var(--text-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fo-rij .actie b{color:var(--amber);font-weight:650}
/* Herinneringsknop + -stand in de actiekolom. De knop houdt zijn breedte ook als er (nog) geen
   herinnering uit is, zodat de kolom niet verspringt zodra er één verstuurd wordt. */
.fo-herinner{white-space:nowrap;min-width:104px}
.fo-hstand{font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap}
/* Herinneringsvenster */
.fo-hmeta{font-variant-numeric:tabular-nums;font-weight:650;color:var(--text);margin-bottom:8px}
.fo-hhist{margin:0 0 12px;font-size:var(--fs-xs);color:var(--text-2)}
.fo-hhist summary{cursor:pointer;color:var(--text-3)}
.fo-hhist ul{margin:6px 0 0;padding-left:18px;line-height:1.7}
/* Facturatie · Concepten (W3): de uitklap onder een lijstrij. Alleen nog voor VERSTUURDE facturen
   (read-only samenvatting + PDF); een concept opent het eigen scherm #/factuur/{id}. De
   min-width van 880 px hoorde bij de verdwenen regeltabel en gaf hier alleen horizontale scroll. */
.fc-rij.open{background:rgba(255,255,255,.03)}
.fc-pijl{color:var(--text-3);font-size:var(--fs-sm)}
/* De regeltabel zelf leeft nu in het factuurscherm (views/factuur.js). */
.fc-kop,.fc-regel{display:grid;grid-template-columns:minmax(220px,3fr) 90px 110px 120px 110px 110px 34px;gap:10px;align-items:center}
/* SMALLE tabel: staan aantal/eenheid overal op 1 en leeg, dan komen die kolommen niet op de
   factuur en horen ze hier ook niet te staan (spiegel van factuur.toon_aantalkolommen). Wat
   overblijft is omschrijving + btw + bedrag — en de omschrijving krijgt de vrijgekomen ruimte,
   precies waar de toelichting hem nodig heeft. */
.fc-smal .fc-kop,.fc-smal .fc-regel{grid-template-columns:minmax(260px,1fr) 90px 130px 34px}
/* Omschrijving + toelichting onder elkaar in één cel — zo staan ze ook op de factuur. */
.fc-oms{display:flex;flex-direction:column;gap:4px;min-width:0}
.fc-regel input.fc-toel{font-size:var(--fs-xs);color:var(--text-2);background:transparent;
  border-color:transparent;border-bottom:1px dashed var(--line-2);border-radius:0;padding:3px 2px}
.fc-regel input.fc-toel:focus{background:rgba(255,255,255,.05);border-color:var(--line);
  border-radius:8px;color:var(--text)}
.fc-regel input.fc-toel::placeholder{color:var(--ink-soft);font-style:italic}
/* BEDRAG — het €-teken staat NAAST het veld, niet erin: zo blijft het een schoon getalveld (numNL
   leest geen euroteken) én is in één blik duidelijk dat deze kolom geld is en de btw-kolom niet. */
.fc-bedragcel{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.fc-bedragcel i{font-style:normal;color:var(--text-3);font-size:var(--fs-sm)}
.fc-bedragcel input.bedrag-inp{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:6px 8px;font-family:inherit;font-size:var(--fs-sm);width:100%;min-width:0}
/* BTW-cel is READ-ONLY (het tarief komt van de relatie) — dus geen invoervak-uiterlijk, maar een
   gedempt tekstje. Dat onderscheid maakte het scherm eerder onduidelijk: btw en bedrag zagen er
   allebei uit als iets wat je kunt typen, terwijl alleen het bedrag dat is. */
.fc-btwcel{font-size:var(--fs-xs);color:var(--text-2);text-align:center;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fc-btwcel.leeg{color:var(--text-3)}
/* Specificatieregel: een klein vlaggetje in de omschrijvingscel zegt wát de regel is. Stond eerder
   als het woord 'toelichting' in de BTW-kolom — dubbelzinnig sinds er ook een toelichting-VELD is. */
.fc-specvlag{align-self:flex-start;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:1px 7px;margin-bottom:2px}
.fc-kop{font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);font-weight:650;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
/* Kop boven de cel uitlijnen: btw staat gecentreerd, het bedrag rechts — zoals de cellen zelf. */
.fc-kop span.c{text-align:center}
.fc-kop span.r{text-align:right}
.fc-regel{padding:5px 0;border-bottom:1px solid var(--line)}
.fc-regel input,.fc-regel select{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:6px 8px;font:inherit;font-size:var(--fs-sm);width:100%}
.fc-regel .bedrag{font-variant-numeric:tabular-nums;font-weight:650;text-align:right}
/* Onleesbaar getal in aantal/prijs: markeren en de invoer LATEN STAAN. Stil op 0 zetten is bij een
   factuurregel de gevaarlijkste uitkomst — dan gaat er een regel van € 0,00 de deur uit. */
.fc-regel input.fc-fout{border-color:var(--urgent);background:rgba(240,101,92,.10)}
/* Specificatieregel: staat op de factuur maar telt niet mee in het bedrag. Gedempt en met een
   accentstreep, zodat je in één blik ziet welke regels de klant moet betalen en welke toelichting
   zijn — hetzelfde onderscheid als op de PDF. */
.fc-regel.fc-spec{border-left:2px solid var(--line-2);padding-left:8px;margin-left:-10px}
.fc-regel.fc-spec input{opacity:.72}
.fc-regel.fc-spec .bedrag{color:var(--ink-soft);font-weight:600}
/* white-space:nowrap — in een smalle kolom brak 'Aantal × prijs tonen' over twee regels en werd de
   blokkop twee keer zo hoog. Liever laten wrappen op blokniveau (.fp-bkop) dan binnen het label. */
.fc-spectog{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-2);
  cursor:pointer;white-space:nowrap}
.fc-spectog input:disabled{cursor:not-allowed}
.fc-spectog:has(input:disabled){color:var(--text-3);cursor:default}
.fc-spectog[hidden]{display:none}
.fc-specnoot{color:var(--ink-soft);font-size:var(--fs-2xs)}

/* ---------- Factuurscherm (#/factuur/{id}) ----------
   Eigen pagina i.p.v. een uitklap onder een lijstrij: links samenstellen, rechts het voorbeeld dat
   meeloopt. Onder 1100px stapelen de kolommen — het voorbeeld zakt dan onder de regels. */
.fp-laden{padding:40px 0;text-align:center;color:var(--ink-soft)}
.fp-kruimel{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:10px}
.fp-kruimel a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.fp-kruimel a:hover{color:var(--text)}
.fp-eyb{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.fp-pill{font-size:var(--fs-2xs);font-weight:700;padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(232,163,61,.14);color:var(--amber);border:1px solid rgba(232,163,61,.3)}
.fp-pill.ok{background:rgba(52,211,154,.13);color:var(--green);border-color:rgba(52,211,154,.32)}
/* DOCUMENTSOORT naast de status. Paars = huisstijl, en bewust een andere kleurfamilie dan de
   status-pills (amber = concept, groen = verstuurd): zo lezen ze niet als twee statussen. */
.fp-pill.soort{background:rgba(154,79,208,.16);color:#cba3e6;border-color:rgba(154,79,208,.32)}
/* align-items:start — anders rekt de grid de linkerkolom uit tot de hoogte van het voorbeeld en
   hangt er onder de regeltabel een halve pagina leegte. */
.fp-kols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;margin-top:14px;
  align-items:start;padding-bottom:8px}
@media (max-width:1100px){.fp-kols{grid-template-columns:1fr}}
.fp-links,.fp-rechts{min-width:0}
/* De rechterkolom KLEEFT NIET (meer): het voorbeeld toont de factuur nu op volle hoogte, en dat is
   bijna altijd langer dan het venster. Een kleefkolom zou dan vastzitten met de onderkant van de
   factuur buiten beeld — precies het scrollen-in-een-venstertje dat we kwijt wilden. De pagina
   scrolt nu gewoon langs de hele factuur. */
.fp-rechts{position:static}
.fp-blok{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:15px 17px;margin-bottom:16px}
.fp-bkop{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;row-gap:6px}
.fp-bkop h3{font-size:var(--fs-sm);font-weight:700;margin:0}
.fp-velden{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:620px){.fp-velden{grid-template-columns:1fr}}
.fp-veld{display:block}
.fp-veld span{display:block;font-size:var(--fs-2xs);color:var(--text-2);margin-bottom:4px}
.fp-veld input,.fp-veld textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--text);padding:7px 9px;font:inherit;font-size:var(--fs-sm)}
/* ⚠`.fp-veld span` hierboven is de LABELregel (block + margin-bottom) en die raakt élke span in het
   veld — dus ook een toelichting eronder. Zonder deze regel krijgt zo'n hint de labelopmaak en een
   marge aan de verkeerde kant. Hoger specifiek dan beide, zodat de gedeelde `.hint` weer wint. */
.fp-veld .hint{margin:4px 0 0;color:var(--ink-soft)}
.fp-rbalk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.fp-tot{margin-left:auto;font-size:var(--fs-sm);color:var(--text-2)}
/* Btw is een RELATIE-voorwaarde, geen keuze per factuur — de noot vertelt waar het tarief vandaan
   komt en brengt je in één klik naar de plek waar het wél te wijzigen is. */
/* Doorbelasting: de factuur gaat naar een andere relatie dan waarvoor het project loopt. Over de
   volle breedte onder de velden — het is een zin, geen label. Tint-recept: --warn-bg als vulling
   (rgba(amber,.10)) met een rand op .45.
   ⚠EIGEN [hidden]-REGEL. Deze class zet zelf een `display`, en dan wint die van de browserregel
   [hidden]{display:none} — `el.hidden = true` verbergt dan niets. Zie de rollen-check in CLAUDE.md;
   gemeten met getComputedStyle, niet met de hidden-property. */
/* Merkje in de facturenlijst: de debiteur is een ander dan de relatie van het project. Klein en
   rustig — het is een kenmerk, geen waarschuwing; de uitleg staat op het factuurscherm zelf. */
.fc-anderdeb{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:var(--fs-nano);
  text-transform:uppercase;letter-spacing:.08em;color:var(--amber);background:var(--warn-bg);border:1px solid rgba(232,163,61,.45);vertical-align:middle}
/* Vastgelegde doorbelasting: blauw i.p.v. amber. Zie .fac-deb — een waarschuwing die op élke factuur
   van zo'n project staat, is geen waarschuwing meer. */
.fc-anderdeb.vast{color:#9fd4f2;background:rgba(43,179,240,.12);border-color:rgba(43,179,240,.45)}
.fp-anderdeb{grid-column:1/-1;font-size:var(--fs-2xs);line-height:1.45;color:var(--text-2);
  background:var(--warn-bg);border:1px solid rgba(232,163,61,.45);border-radius:var(--r-sm);padding:7px 9px;display:block}
/* Bij de opdracht VASTGELEGDE doorbelasting: mededeling, geen waarschuwing — zie .fac-deb hierboven. */
.fp-anderdeb.vast{background:rgba(43,179,240,.10);border-color:rgba(43,179,240,.45)}
.fp-anderdeb[hidden]{display:none}
.fp-btwnoot{margin-top:9px;font-size:var(--fs-2xs);color:var(--ink-soft)}
.fp-btwnoot a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;margin-left:4px}
/* De kop van het voorbeeld loopt mee met het papier eronder, zodat het label boven het blad staat
   en niet ergens links in de lege kolomruimte. */
.fp-vbkop{display:flex;align-items:center;gap:9px;margin-bottom:8px;max-width:794px;margin-inline:auto;width:fit-content;min-width:min(100%,794px)}
.fp-vbst{font-size:var(--fs-2xs);color:var(--ink-soft)}
/* Het voorbeeld is een A4 op wit. De DOOS knipt niet meer af: de factuur staat er VOLLEDIG in en de
   pagina scrolt eromheen. Er zat eerst een eigen scrollgebied in met een vaste maximumhoogte — dan
   zit je in een venstertje binnen een venster te scrollen om de onderkant van je eigen factuur te
   zien. De iframe rendert op ware A4-breedte (794 px) en wordt met `zoom` verkleind, en zijn hoogte
   volgt de inhoud (zie factuur.js).
   ⚠`max-width:794px` + centreren: een A4 is 794 px breed op 100%, en groter dan dat renderen heeft
   geen zin — dan blaas je het papier op. Is de kolom bréder (bv. omdat je uitzoomt in de browser),
   dan bleef het blad links plakken met een witte strook ernaast; nu staat het netjes in het midden
   en houdt het altijd de echte papierbreedte. */
.fp-vbdoos{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;box-shadow:var(--e-2);
  overflow:hidden;width:fit-content;max-width:100%;margin-inline:auto}
.fp-vb{display:block;width:794px;height:1200px;border:0;background:#fff}
/* De actiebalk hoort DIRECT ONDER DE REGELS, in de linkerkolom — daar eindigt het samenstellen en
   begint het versturen. Hij stond eerst kleverig onderaan het venster; dat hield 'Versturen' wel in
   beeld maar legde een balk over de regeltabel, precies waar je aan het typen bent. Nu staat hij in
   de flow: niets wordt afgedekt, en omdat de linkerkolom kort is blijft hij vanzelf zichtbaar. */
.fp-voet{margin-top:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:11px 15px}
.fp-vtot{font-size:var(--fs-sm);color:var(--text);font-variant-numeric:tabular-nums}
.fp-vtot span{color:var(--ink-soft);font-size:var(--fs-2xs)}
/* Stappen staan in de HERO (oriëntatie: waar ben ik), niet in de actiebalk (handeling). De pillen
   zelf komen van de PLATFORM-STANDAARD .sbal/.sbal-pill (zie de --pill-*-tokens bovenin) — hier
   alleen de plaatsing. Er stond een eigen .fp-stap-variant met nummerbolletjes; die week zichtbaar
   af van dezelfde balk op projecten en sales. */
.fp-stappen{margin-top:14px;max-width:none;flex-wrap:wrap;row-gap:8px}
.fp-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fc-x{background:none;border:0;color:var(--text-3);font-size:15px;cursor:pointer;line-height:1}
.fc-x:hover{color:var(--urgent)}
.fc-verzendbox{margin-top:12px;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px 16px;background:rgba(154,79,208,.06)}
/* Wat er bij versturen gebeurt, in de volgorde waarin de server het doet — versturen is
   onomkeerbaar, dus dat hoort op het scherm te staan en niet in de documentatie. */
.fc-verzendstap{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
.fc-verzendstap li{font-size:var(--fs-xs);color:var(--text-2);line-height:1.55;padding-left:14px;position:relative}
.fc-verzendstap li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--purple)}
.fc-verzendstap li b:first-child{color:var(--text);font-weight:650;margin-right:4px}
/* Verzendscherm: wat er meegaat en wat er bij de RELATIE is vastgelegd. Zonder dit moest je naar
   de relatiepagina om te zien wat er is afgesproken — en zag je pas achteraf dat je ervan afweek. */
.fv-kop{font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
  font-weight:700;margin:12px 0 6px}
.fv-bijlagen{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:4px}
.fv-bijlagen li{font-size:var(--fs-xs);color:var(--text-2);padding-left:19px;position:relative;line-height:1.5}
.fv-bijlagen li::before{position:absolute;left:0;top:0;font-weight:700}
.fv-bijlagen li.ja::before{content:"✓";color:var(--green)}
.fv-bijlagen li.nee::before{content:"–";color:var(--text-3)}
.fv-bijlagen li.nee{color:var(--ink-soft)}
.fv-bijlagen li b{color:var(--text);font-weight:650;margin-right:5px}
.fv-blok{display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px}
.fv-rij{display:flex;gap:10px;font-size:var(--fs-xs);line-height:1.6}
.fv-rij span{color:var(--text-3);min-width:112px}
.fv-rij b{color:var(--text-2);font-weight:600}
.fv-link{font-size:var(--fs-2xs);color:var(--text-3);text-decoration:underline;
  text-underline-offset:2px;margin-top:4px;align-self:flex-start}
/* Afwijking van wat er is afgesproken: signaleren, niet blokkeren. */
.fv-afw{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.fv-afw li{font-size:var(--fs-xs);color:var(--amber);line-height:1.55;padding-left:18px;position:relative}
.fv-afw li::before{content:"!";position:absolute;left:5px;font-weight:700}
/* Relatiepagina: een facturatievoorwaarde die nog ALLEEN in de Simplicate-spiegel staat. Die
   verdwijnt bij het opzeggen, dus hij hoort zichtbaar anders te zijn dan een cockpit-eigen waarde. */
.ex-sim{font-size:var(--fs-2xs);color:var(--amber);background:rgba(232,163,61,.10);
  border:1px dashed rgba(232,163,61,.38);border-radius:var(--r-pill);padding:1px 9px;white-space:nowrap}
.fc-verzendbox textarea{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:6px 8px;font:inherit;font-size:var(--fs-sm)}
/* Instellingen · Facturatie: live factuurvoorbeeld (A4-iframe op wit) */
.fr-preview{overflow:auto;max-height:740px;background:#fff;border:1px solid var(--line);border-radius:10px}
.fr-preview iframe{display:block;width:820px;height:1180px;border:0;background:#fff;margin:0 auto}
/* Projecten actualiseren — voorbeeld-modal */
.act-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;margin:14px 0;border-top:1px solid var(--line);padding-top:12px}
.act-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:var(--fs-base)}
.act-row .an{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-row .ap{flex:0 0 auto}
.act-rest{font-size:var(--fs-sm);line-height:1.6;margin:0 0 6px;padding-top:10px;border-top:1px solid var(--line)}
/* kerndetails per projecttype (Instellingen-editor) */
.kd-tbl{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:6px}
.kd-hd,.kd-row{display:grid;grid-template-columns:1.6fr 1fr 1.5fr 92px;gap:10px;align-items:center;padding:9px 13px}
.kd-acties{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.kd-move{display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text-3);cursor:pointer;padding:4px;border-radius:6px}
.kd-move:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.06)}
.kd-move:disabled{opacity:.28;cursor:default}
.kd-hd{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);background:rgba(255,255,255,.03)}
.kd-row{border-top:1px solid var(--line)}
.kd-row input,.kd-row select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:7px;color:var(--text);padding:7px 9px;font-size:var(--fs-sm);font-family:inherit}
.kd-del{display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text-3);cursor:pointer;padding:4px}
.kd-del:hover{color:var(--red)}
.kd-foot{display:flex;align-items:center;gap:12px;margin-top:14px}
.kd-auto{display:inline-block;font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--blue);background:rgba(43,179,240,.14);padding:1px 6px;border-radius:5px;vertical-align:middle;margin-left:6px}
/* Kerndetails-totalen-dashboard (kerndetails.js kerndetailsTotalenHTML): ec-kerncijfers +
   woningtypes-verdeelbalk + overige objecten. Feiten uit de analyse, los van de modelberekening. */
.kdt{margin-top:2px}
.kdt-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 18px;margin:8px 0 2px}
.kdt-sec{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin:16px 0 8px}
.kdt-sec-sub{font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-3)}
.kdt-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--panel-2);margin:0 0 9px}
.kdt-bar span{display:block;height:100%;min-width:2px}
.kdt-leg{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:var(--fs-xs);color:var(--text-2)}
.kdt-leg i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.kdt-leg b{color:var(--ink);font-weight:700}
.kdt-sub{font-size:var(--fs-2xs);color:var(--text-3);margin-top:7px}
.kdt-overig{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.kdt-overig b{color:var(--ink)}
/* Projecttype-profiel: aanpak-veld-curatie */
.pt-sec{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pt-sec-h{font-size:var(--fs-base);font-weight:700;margin-bottom:10px}
/* Kop binnen een sectie: pand-data is de invoer van het prijsmodel en staat er dus onder,
   maar wel als eigen blok. Iets kleiner dan .pt-sec-h zodat de rangorde klopt. */
.pt-sub-h{font-size:var(--fs-sm);font-weight:700;margin:0 0 8px}
.pt-sec-sub{font-weight:400;color:var(--text-3);font-size:var(--fs-sm)}
.pt-veld{border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 14px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.pt-veld-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pt-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 18px}
.pt-opt{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);padding:3px 0}
.pt-toon{display:flex;align-items:center;gap:7px;cursor:pointer;min-width:0}
.pt-toon input{width:auto;flex:0 0 auto}
.pt-tcb{width:auto;flex:0 0 auto;cursor:pointer}
.pt-lblinp{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:7px;color:var(--text);padding:5px 9px;font-size:var(--fs-sm);font-family:inherit}
.pt-lblinp:focus{border-color:var(--blue);outline:none}
.pt-orig{flex:0 0 auto;font-size:var(--fs-2xs);color:var(--text-3);font-style:italic}
.pt-defl{display:flex;align-items:center;gap:6px;color:var(--text-3);font-size:var(--fs-xs);white-space:nowrap;cursor:pointer;flex:0 0 auto}
.pt-defl input{width:auto}
.pt-def{color:var(--text-3);font-size:var(--fs-sm)}
.pt-num{width:56px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:7px;color:var(--text);padding:5px 7px;font-size:var(--fs-sm);font-family:inherit}
.pt-num:disabled{opacity:.4}
/* Prijsmodel (concept) */
.pm-actief{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);margin:10px 0}
.pm-actief input{width:auto}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 16px;margin-bottom:6px}
.pm-fld{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.pm-fld>span{color:var(--text-2)}
.pm-fld>span i{color:var(--text-3);font-style:normal;font-size:var(--fs-2xs)}
.pm-fld input,.pm-fld select{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:7px;color:var(--text);padding:6px 8px;font-family:inherit;font-size:var(--fs-sm)}
.pm-chk{flex-direction:row;align-items:center;gap:7px}
.pm-chk input{width:auto}
.pm-sub{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:12px 0 6px}
.pm-preview{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pm-prow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.pm-uit{margin-top:10px;font-size:var(--fs-base)}
.pm-uit b{font-size:var(--fs-lg);color:var(--blue)}
/* Verplicht-melding (Aanpak-tab, Vastgoed) */
.verplicht-notice{background:rgba(232,163,61,.12);border:1px solid rgba(232,163,61,.4);color:var(--amber);border-radius:var(--r-lg);padding:9px 13px;font-size:var(--fs-sm);line-height:1.5}
.verplicht-notice b{color:var(--text)}
/* Database importeren */
.bk-imp{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-sm)}
.bk-imp-conf{display:flex;align-items:center;gap:7px;color:var(--text-2)}
.bk-imp-conf input{width:130px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:7px;color:var(--text);padding:6px 9px;font-family:inherit}
.bk-imp input[type=file]{font-size:var(--fs-sm);color:var(--text-2)}
/* kerndetail-invoer op Gegevens */
.kd-note{font-size:var(--fs-xs);color:var(--text-3);margin-top:10px;line-height:1.5;font-style:italic}
@media(max-width:560px){.po-grid2{grid-template-columns:1fr}}@media(max-width:820px){.plist.sales .prow{grid-template-columns:1fr auto}.prow .pi,.prow .px{display:none}}

/* ---- loginscherm (fase 2) ---- */
body.login-mode .sidebar{display:none}
body.login-mode .shellhead{display:none}
body.login-mode main{max-width:none;padding:0}
body.login-mode #view{max-width:none;padding:0}
/* Loginscherm (variant B, 2026-07-10): donkere scène met ambient-gloed + raster, split-kaart met
   merkpaneel (vogel-beeldmerk als logo én watermerk — zelfde taal als de app-hero's) en het
   loginpaneel met één Microsoft-knop + gast-hint. Op smal klapt het merkpaneel in tot een kop. */
.loginwrap{position:relative;flex:1;display:flex;min-height:100vh;padding:0;overflow:hidden;background:var(--bg)}
/* Beeldvullend (gebruikerswens): de split-kaart ÍS het scherm — merkpaneel links, login rechts. */
.lg-card{position:relative;display:flex;width:100%;min-height:100vh;background:var(--panel);overflow:hidden}
.lg-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2bb3f0,#9a4fd0);z-index:2}
.lg-brand{position:relative;flex:1.15;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:7vh 6vw;overflow:hidden;background:radial-gradient(1100px 700px at 12% 0%,rgba(43,179,240,.15),transparent 58%),radial-gradient(1000px 760px at 96% 100%,rgba(154,79,208,.20),transparent 58%),var(--bg)}
.lg-brand::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.lg-bird-wm{position:absolute;right:-70px;bottom:-80px;width:min(46vw,560px);opacity:.07;pointer-events:none;user-select:none}
.lg-wm{display:flex;align-items:center;gap:12px}
.lg-wm img{width:38px;height:38px;object-fit:contain}
.lg-wm b{display:block;font-weight:800;font-size:clamp(26px,2.3vw,32px);letter-spacing:-.5px;color:var(--ink);line-height:1}
.lg-wm small{display:block;font-size:var(--fs-micro);letter-spacing:.42em;color:var(--text-3);font-weight:600;margin-top:3px}
.lg-tag{color:var(--text-2);font-size:clamp(14px,1.15vw,17px);line-height:1.6;margin:16px 0 0;max-width:32ch}
.lg-feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;position:relative}
.lg-feats li{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-sm)}
.lg-feats svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto}
.lg-login{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:7vh 5vw;border-left:1px solid var(--line)}
.lg-login>*{width:100%;max-width:400px}
.lg-login h1{font-size:var(--fs-xl);font-weight:700;margin:0 0 4px;color:var(--ink)}
.lg-lead{color:var(--text-2);font-size:var(--fs-base);margin:0 0 20px}
.lg-err{background:rgba(224,90,90,.09);border:1px solid rgba(224,90,90,.35);color:var(--red);border-radius:10px;padding:10px 12px;font-size:var(--fs-sm);line-height:1.5;margin:0 0 14px}
.lg-ms{display:flex;align-items:center;justify-content:center;width:100%;background:#fff;color:#1b1f2b;border:0;border-radius:10px;padding:13px 16px;font:inherit;font-weight:600;font-size:var(--fs-base);cursor:pointer;transition:transform .12s,box-shadow .12s}
.lg-ms:hover{box-shadow:0 6px 22px rgba(43,179,240,.28);transform:translateY(-1px)}
.lg-gast{display:flex;gap:10px;align-items:flex-start;background:rgba(43,179,240,.07);border:1px solid rgba(43,179,240,.22);border-radius:10px;padding:11px 12px;margin-top:14px}
.lg-gast svg{width:16px;height:16px;color:#2bb3f0;flex:0 0 auto;margin-top:2px}
.lg-gast p{margin:0;font-size:var(--fs-xs);color:var(--text-2);line-height:1.55}
.lg-gast b{color:var(--ink)}
.lg-foot{display:flex;justify-content:space-between;gap:10px;color:var(--text-3);font-size:var(--fs-2xs);margin-top:22px}
@media (max-width:840px){
  .lg-card{flex-direction:column}
  .lg-brand{padding:24px 26px;gap:0}
  .lg-feats,.lg-bird-wm{display:none}
  .lg-tag{margin-top:10px}
  .lg-login{border-left:0;border-top:1px solid var(--line);padding:28px 26px 26px;justify-content:flex-start}
}
.ms-ruit{display:inline-grid;grid-template-columns:6px 6px;gap:2px;margin-right:9px}
.ms-ruit i{width:6px;height:6px;display:block}
.ms-ruit i:nth-child(1){background:#f25022}.ms-ruit i:nth-child(2){background:#7fba00}
.ms-ruit i:nth-child(3){background:#00a4ef}.ms-ruit i:nth-child(4){background:#ffb900}

/* modal */
.bk-modal{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);align-items:center;justify-content:center}
.bk-modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2xl);width:360px;max-width:calc(100vw - 32px);box-shadow:var(--e-3)}
.bk-modal-hdr{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);padding:14px 16px;border-bottom:1px solid var(--line)}
.bk-modal-body{padding:14px 16px}
.bk-modal-foot{padding:8px 16px 14px;display:flex;gap:8px;justify-content:flex-end}
.bk-modal-status{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.bk-st-btn{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-sm);text-align:left;transition:all .12s}
.bk-st-btn.st-beschikbaar{color:var(--green)}.bk-st-btn.st-gedeeltelijk{color:var(--warn)}
.bk-st-btn.st-niet{color:var(--red)}.bk-st-btn.st-onbekend{color:var(--ink-soft)}
.bk-st-btn.active,.bk-st-btn:hover{border-color:currentColor;background:rgba(255,255,255,.08)}
.bk-notitie-input,.bk-naam-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);padding:8px 10px;font-family:var(--font-display);font-size:var(--fs-base);resize:vertical;min-height:64px;outline:none}
.bk-notitie-input:focus,.bk-naam-input:focus{border-color:var(--accent)}
.bk-naam-input{min-height:unset;resize:none}

/* ===================== Planning (nieuwe huisstijl) ===================== */
/* Gedeeld weekrooster (week.js: weekToolbar + dayHeads), Gantt-component (gantt.js)
   en de drie planningviews. Vervangt de oude .wp-/.gp-/.bk-grid-stijlen. */
/* -- gedeelde week-/planningtoolbar -- */
.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.tb-nav{display:flex;align-items:center;gap:5px}
.tb-arrow{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:.15s;background:none;border:0;cursor:pointer;font-size:var(--fs-xl);line-height:1;font-family:inherit}
.tb-arrow:hover{background:rgba(255,255,255,.06);color:var(--text)}
.tb-arrow svg{width:16px;height:16px}
.tb-week{display:inline-flex;align-items:baseline;gap:9px;padding:0 8px;white-space:nowrap}
.tb-week .tb-wk{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.tb-week .tb-wk-d{font-size:var(--fs-sm);font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
/* relatieve-week-indicator: waar zit ik t.o.v. nu (huidig=blauw / toekomst=paars / verleden=amber) */
.tb-relweek{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);padding:7px 13px;font-size:var(--fs-sm);font-weight:700;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.tb-relweek .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.tb-relweek.now{color:var(--blue);border-color:rgba(43,179,240,.5);background:rgba(43,179,240,.09)}
.tb-relweek.next{color:var(--purple);border-color:rgba(154,79,208,.5);background:rgba(154,79,208,.10)}
.tb-relweek.prev{color:var(--amber);border-color:rgba(232,163,61,.5);background:rgba(232,163,61,.09)}
/* Dezelfde indicator in de uren-hoek (weekcontrole/urenregistratie/urencontrole), compacter omdat
   hij daar in de hero-actiebalk staat. Buiten de huidige week is hij klikbaar → terug naar vandaag. */
.wk-relhost .tb-relweek{padding:5px 11px;font-size:var(--fs-xs);font-family:inherit}
.wk-relhost .tb-relweek.is-klik{cursor:pointer}
.wk-relhost .tb-relweek.is-klik:hover{filter:brightness(1.25)}
.tb-spacer{flex:1 1 auto}/* -- weekplanning: te-plannen-kaarten + algemene blokken + rooster -- */
.plan-sec-lbl{font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px}
.toplan{display:flex;gap:11px;overflow-x:auto;padding-bottom:12px;margin-bottom:6px}
.tp-chip{flex:0 0 234px;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;position:relative;overflow:hidden;background:var(--surface);cursor:grab}
.tp-chip::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.7}
.tp-chip.sel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.tp-chip .tp-id{font-weight:700;font-size:var(--fs-base);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-chip .tp-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-warn{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--urgent)}
.tp-warn svg{width:12px;height:12px}
.blocks{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.blk-chip{border:1px solid rgba(43,179,240,.45);background:rgba(43,179,240,.12);color:#bfe6fb;border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-sm);font-weight:600;cursor:grab;user-select:none;transition:background .12s,border-color .12s}
.blk-chip:hover{background:rgba(43,179,240,.18)}
.blk-chip.sel{box-shadow:0 0 0 1px var(--blue)}
.sched{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--surface)}
.sched-grid{display:grid;min-width:1120px}
.gh{padding:11px 14px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--line-2);background:#171430;position:sticky;top:0;z-index:3}
.gh.today,.gh.today b{color:var(--blue)}
.gh b{color:var(--text);font-weight:700}
.gh-emp{position:sticky;left:0;z-index:5}
.grow-group{grid-column:1 / -1;padding:7px 14px;font-family:var(--font-display);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--purple);background:linear-gradient(90deg,rgba(154,79,208,.16),rgba(154,79,208,.03) 55%,transparent);border-bottom:1px solid var(--line)}
.gemp{padding:11px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line-2);position:sticky;left:0;background:var(--surface);z-index:2}
.gemp .nm{font-weight:700;font-size:var(--fs-base);letter-spacing:-.01em}
.gemp .role{font-size:var(--fs-xs);color:var(--text-2);margin-top:2px}
.gemp .hrs{font-size:var(--fs-xs);color:var(--text-3);margin-top:5px;font-variant-numeric:tabular-nums}
.gemp-del{float:right;background:none;border:0;color:var(--text-3);cursor:pointer;font-size:var(--fs-sm);line-height:1;padding:0 0 0 6px}
.gemp-del:hover{color:var(--urgent)}
.gflag{display:inline-block;font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600;padding:1px 7px;border-radius:var(--r-pill);margin-left:7px;border:1px solid currentColor;vertical-align:1px;white-space:nowrap}
.gflag.ok{color:var(--green)}
.gflag.no{color:var(--urgent)}
.gcell{padding:5px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:46px;display:flex;flex-direction:column;gap:3px;position:relative;min-width:0}
.gcell.today{background:rgba(43,179,240,.04)}
/* Roostervrije dag: duidelijk anders dan een werkdag — donkerder + arcering + tekstlabel
   (kleur + patroon + tekst, niet kleur-alleen). Plannen kan er nog steeds (+-knop blijft). */
.gcell.off{background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.035) 6px,rgba(255,255,255,.035) 12px),rgba(0,0,0,.18)}
.gc-off{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);border:1px dashed var(--line-2);border-radius:var(--r-pill);padding:2px 9px;align-self:flex-start;margin:2px 2px 0;white-space:nowrap}
/* Opgave-mensen (flex/zzp/inhuur) zonder entry: geen 'vrij' — die dag is simpelweg niet doorgegeven. */
.gc-nd{font-size:var(--fs-2xs);color:var(--text-3);opacity:.55;padding:2px 3px;white-space:nowrap}
.gcell.drop{outline:2px dashed var(--blue);outline-offset:-3px;background:rgba(43,179,240,.07)}
.gc-empty{color:var(--text-3);opacity:.4;font-size:var(--fs-base);padding:2px 3px}
.gc-add{margin-top:auto;background:none;border:1px dashed var(--line-2);color:var(--text-3);border-radius:6px;width:100%;line-height:18px;font-size:var(--fs-base);cursor:pointer;opacity:0;transition:opacity .12s}
.gcell:hover .gc-add{opacity:.9}
/* Zelfde maatvoering als .blk (verlof- en werkblokken): een opgave-dag van een ZZP'er hoort in het
   rooster even zwaar te wegen als een blok van vast personeel — anders leest die rij als 'minder'
   (gebruikersfeedback 27-07). Alleen de tekst blijft op één regel met ellipsis, zodat een lange
   opmerking de rijhoogte niet opblaast; de volledige tekst zit in de title. */
.gbk{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;padding:5px 8px;border-radius:var(--r-sm);border-left:3px solid currentColor;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbk.av{color:var(--green);background:rgba(52,211,154,.10);border:1px solid rgba(52,211,154,.32);border-left:3px solid currentColor}
.gbk.pa{color:var(--amber);background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.32);border-left:3px solid currentColor}
/* 'Niet beschikbaar' in dezelfde amber arcering als verlof (gebruikerswens 21-07: één kleurtaal
   voor alles wat niet inzetbaar is; het ✕-icoon houdt het onderscheid met verlof). */
.gbk.no{color:var(--amber);background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px);border:1px solid rgba(232,163,61,.32);border-left:3px solid currentColor}
/* Ook 'onbekend' krijgt een rand: zonder rand was dit blok 2px lager dan de andere en liep de rij
   niet meer gelijk. Neutrale lijn, want er is nog niets opgegeven — alleen een opmerking. */
.gbk.un{color:var(--text-3);border:1px solid var(--line);border-left:3px solid currentColor}
.blk{border-radius:var(--r-sm);padding:5px 8px;font-size:var(--fs-xs);font-weight:600;line-height:1.25;border:1px solid var(--line);border-left:3px solid var(--line-2);background:var(--surface);cursor:grab;overflow-wrap:anywhere;transition:.12s}
.blk:hover{filter:brightness(1.16)}
.blk .b-body{display:block;color:var(--text)}
.blk .b-mat{display:flex;align-items:center;gap:4px;font-size:var(--fs-micro);font-weight:500;color:var(--text-3);margin-top:2px}
.blk .b-mat svg{flex:0 0 auto;opacity:.8}
.blk .b-note{display:block;font-weight:400;font-size:var(--fs-2xs);color:var(--text-2);margin-top:2px}
.blk .b-opt{display:inline-block;margin-top:5px;margin-right:4px;font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--text-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.blk .b-opt.warn{color:var(--amber);border-color:rgba(232,163,61,.5)}
/* Locatie-blokken volgen het tint-recept van de huisstijl: getinte vulling (±.10) +
   getinte rand (±.35) + het linker kleuraccent — zelfde anatomie als de status-blokken
   op de Beschikbaarheid-pagina. */
.blk.loc-buiten{background:rgba(52,211,154,.10);border-color:rgba(52,211,154,.32);border-left-color:var(--green)}
.blk.loc-groningen{background:rgba(43,179,240,.10);border-color:rgba(43,179,240,.32);border-left-color:var(--blue)}
.blk.loc-amersfoort{background:rgba(232,163,61,.10);border-color:rgba(232,163,61,.32);border-left-color:var(--amber)}
.blk.loc-zelf{background:rgba(154,79,208,.12);border-color:rgba(154,79,208,.34);border-left-color:var(--purple)}
.blk.verlof{border-left-color:var(--amber);background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px);cursor:default}
.blk.verlof .b-tag{font-size:var(--fs-2xs);font-weight:600;color:var(--amber);display:block;font-style:italic}
.blk.verlof .b-time{font-family:var(--font-mono);font-size:var(--fs-2xs);color:#e8c98a}
/* Uit dienst: zelfde arcering als verlof (leest als 'niet beschikbaar'), maar GRIJS — verlof is
   tijdelijk, dit is definitief. Zonder kleurverschil zou je een vertrokken collega als vakantieganger
   lezen en volgende week weer verwachten. */
.blk.uitdienst{border-left-color:var(--text-3);background:repeating-linear-gradient(45deg,rgba(148,155,196,.12) 0 6px,rgba(148,155,196,.03) 6px 12px);cursor:default}
.blk.uitdienst .b-tag{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);display:block;font-style:italic}
.sched-addrow{grid-column:1 / -1;display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:#171430}
.sched-addrow input{background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:7px;padding:7px 10px;font:inherit;font-size:var(--fs-sm);width:240px}
/* Read-only weekplanning (niet-beheer): de bewerk-affordances verbergen — de planning is dan puur
   ter inzage. De server (GATE_BEHEER) is de echte grens; dit voorkomt lokkende, 403-gevende knoppen. */
.pp-readonly .gc-add,.pp-readonly .tp-panel,.pp-readonly .sched-addrow,.pp-readonly .gemp-del,.pp-readonly .blk-chip,.pp-readonly .tp-chip{display:none!important}
.pp-readonly .blk{cursor:default}
/* -- weekplanning: unified paneel + Te-plannen-rail (voorstel-layout) -- */
.wp-panel{display:flex;align-items:stretch;position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.wp-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-bp);z-index:8}
/* definitieve weekplanning = vergrendeld: geen sleep/klik-affordance meer */
.wp-locked .tp-chip,.wp-locked .blk-chip,.wp-locked .blk,.wp-locked .gcell{cursor:default}
.wp-locked .wp-rail-body{opacity:.55}
.wp-rail{flex:0 0 240px;width:240px;display:flex;flex-direction:column;background:var(--panel-2);border-right:1px solid var(--line-2)}
.wp-rail-h{padding:11px 14px;border-bottom:1px solid var(--line)}
.wp-rail-t{font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.wp-rail-t em{font-style:normal;color:var(--text-3);margin-left:2px}
.wp-rail-sub{font-size:var(--fs-2xs);color:var(--text-3);margin-top:3px}
.wp-rail-body{flex:1;min-height:0;overflow-y:auto;padding:11px}
.wp-rail-empty{font-size:var(--fs-xs);color:var(--text-3);padding:2px 2px 14px;line-height:1.5}
.wp-tplist{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.wp-schedwrap{flex:1;min-width:0;position:relative;overflow-x:auto}
.wp-schedwrap .sched-grid{min-width:1004px}
.wp-todayline{position:absolute;top:0;width:2px;background:var(--blue);box-shadow:0 0 10px rgba(43,179,240,.6);z-index:4;pointer-events:none}
/* Te-plannen-kaart in de rail: linker werkgebied-accent + grip (gelijk aan de globale gp-bcard) */
.wp-rail .tp-chip{flex:none;width:100%;display:flex;align-items:flex-start;gap:8px;border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-md);padding:10px 11px;overflow:visible;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}
.wp-rail .tp-chip:hover{border-color:var(--line-2);background:var(--panel);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.30)}   /* zelfde hover als .gp-bcard (rail-kaarten één anatomie) */
.wp-rail .tp-chip::before{display:none}
.tp-grip{flex:0 0 auto;margin-top:2px;color:var(--text-3);cursor:grab}
.tp-body{min-width:0;flex:1}
.wp-rail .tp-chip .tp-id{font-size:var(--fs-sm);white-space:normal}
.wp-rail .tp-chip .tp-sub{font-size:var(--fs-xs);margin-top:3px;white-space:normal}
.tp-meta{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
.tp-mat{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-micro);font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.tp-mat svg{flex:0 0 auto;opacity:.85}
.wp-rail .tp-warn{margin-top:0;text-transform:none;letter-spacing:0;font-size:var(--fs-2xs);color:var(--amber)}
.wp-rail .blocks{gap:7px;margin-bottom:4px}
.gantt{display:grid}
.g-h{padding:12px 9px 10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--line-2);border-right:1px solid var(--line);background:#171430;position:sticky;top:0;z-index:3;white-space:nowrap}
.g-h .gd{display:block;color:var(--text-3);font-weight:500;font-size:var(--fs-2xs);margin-top:3px;letter-spacing:0}
.g-h.proj{position:sticky;left:0;z-index:5}
.g-h.now,.g-h.now .gd{color:var(--blue)}
.g-proj{padding:10px 16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line-2);position:sticky;left:0;background:var(--surface);z-index:2;min-height:54px;display:flex;flex-direction:column;justify-content:center}
.g-proj.muted{color:var(--text-3)}
/* Projectnaam in de tijdlijn-rijkop. Stond op één regel met ellipsis in een kolom van ~167px:
   'MGD2 Ter Aar · Herhalingsmeting 2026' werd 'MGD2 Ter Aar · Herhalings…' — en dan weet je bij
   het inplannen niet WELK project je voor je hebt, want juist het onderscheidende deel valt weg.
   Nu twee regels; de rij heeft min-height, geen vaste hoogte, dus die groeit gewoon mee. Past het
   dan nog niet, dan pas afkappen — en de volledige naam staat als title op de rij. */
.g-proj .nm{font-weight:600;font-size:var(--fs-base);letter-spacing:-.01em;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.g-proj .nm .cli{color:var(--text-2);font-weight:400}
.g-proj .rng{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}
.g-track{grid-column:2 / -1;position:relative;border-bottom:1px solid var(--line)}
.g-line{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--line);opacity:.6;pointer-events:none}
.gbar{position:absolute;top:50%;transform:translateY(-50%);height:22px;min-width:12px;border-radius:7px;border:1.5px solid rgba(52,211,154,.7);background:rgba(52,211,154,.13);cursor:pointer;transition:.15s}
.gbar:hover{background:rgba(52,211,154,.22);box-shadow:0 0 0 1px rgba(52,211,154,.5)}
.gbar.past{opacity:.45}.g-legend{display:flex;align-items:center;gap:22px;margin-top:14px;flex-wrap:wrap}
.g-legend .lg{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--text-2)}
.g-legend .sw{width:24px;height:13px;border-radius:4px;border:1.5px solid rgba(52,211,154,.7);background:rgba(52,211,154,.13)}
.g-legend .dot{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.g-legend .note{margin-left:auto;color:var(--text-3);font-size:var(--fs-sm)}.gp-legend{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.gp-lg{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-2)}
.gp-lglabel{font-size:var(--fs-nano);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-right:3px}/* ---- Samengevoegde Planning-kop: compacte hero-huid (ec-hero--slim) ---- */
.pk-id{min-width:120px}
.pk-id .ec-hero__title{white-space:nowrap}
.pk-flex{flex:1}
.pk-metrics{display:flex;gap:22px;align-items:center}
.pk-m{text-align:right}
.pk-mn{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pk-mn small{font-size:var(--fs-xs);color:var(--text-3);font-weight:600}
.pk-mn.cap-ok{color:var(--green)} .pk-mn.cap-full{color:var(--amber,#d99a3a)} .pk-mn.cap-over{color:var(--urgent)}
.pk-ml{font-size:var(--fs-nano);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.pk-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pk-status{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.05em;border-radius:var(--r-pill);padding:4px 11px;border:1px solid}
.pk-status.con{color:var(--amber,#e8a33d);border-color:rgba(232,163,61,.42)}
.pk-status.def{color:var(--green);border-color:rgba(52,211,154,.42)}
.pk-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pk-legend .gp-legend{gap:11px}
/* .pk-tabs (Globaal|Week onder de hero) is weg: die wissel zit sinds 26-07-2026 in het menu, onder
   de Planning-groep. Twee bedieningen voor dezelfde wissel. */
/* capaciteits-stoplicht + klikbare weekkop (→ weekplanning) in de globale planner */
.gp-grid .g-h[data-week]{cursor:pointer;transition:background .12s}
.gp-grid .g-h[data-week]:hover{background:#1c1938}
.gp-hcap{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;letter-spacing:0}
.gp-hcap.cap-ok{color:var(--green)}
.gp-hcap.cap-full{color:var(--amber,#d99a3a)}
.gp-hcap.cap-over{color:var(--urgent)}
.gp-sw{width:13px;height:8px;border-radius:3px;flex:0 0 auto}.gp-grid .g-h{padding:9px 8px 8px}
.gp-weer{display:flex;align-items:center;gap:3px;margin-top:5px;color:var(--text-3);font-weight:500;font-size:var(--fs-micro);letter-spacing:0;text-transform:none}
.gp-weer svg{width:13px;height:13px}
.gp-weer b{font-weight:700;color:var(--text-2)}
.gp-weer i{font-style:normal}
.gp-bar{display:flex;align-items:center}
.gbar-lcut{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:dashed}
.gbar-rcut{border-top-right-radius:0;border-bottom-right-radius:0;border-right-style:dashed}
/* editor */
.gp-frow{display:flex;gap:12px;margin-bottom:12px}
.gp-frow label,.gp-wlbl{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-xs);color:var(--text-2);flex:1}
.gp-wlbl{margin-bottom:16px}
.gp-frow input,.gp-wlbl select{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base)}
.gp-ebtns{display:flex;align-items:center;gap:8px}
/* capaciteit + beschikbaarheid */
.gp-caprow{background:var(--panel-2)}
.gp-cap{display:flex;align-items:center;justify-content:center;gap:1px;min-height:42px;background:var(--panel-2);border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:var(--fs-sm)}
.gp-cap b{font-weight:700;font-size:var(--fs-md);color:var(--text-2)}
.gp-cap span{color:var(--text-3);font-size:var(--fs-xs)}
.gp-cap.cap-ok b{color:var(--green)}
.gp-cap.cap-full b{color:var(--amber)}
.gp-cap.cap-over{background:rgba(255,93,115,.12)}
.gp-cap.cap-over b{color:var(--urgent)}
.gp-subhead{grid-column:1 / -1;position:sticky;left:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;font-size:var(--fs-2xs);letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--text-3);background:var(--panel-2);border-bottom:1px solid var(--line)}
.gp-avleg{display:flex;gap:14px;text-transform:none;letter-spacing:0;font-weight:500}
.gp-avlg{display:inline-flex;align-items:center;gap:5px;color:var(--text-3)}
.gp-avlg .gp-dot{width:8px;height:8px;border-radius:2px}
.gp-avrow{min-height:34px}
.gp-avrow .nm{display:flex;align-items:center;gap:8px;font-weight:500;font-size:var(--fs-sm)}
.gp-avatar{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:var(--fs-micro);font-weight:700;color:var(--text-3);letter-spacing:.02em}
.gp-av{display:flex;align-items:center;justify-content:center;gap:3px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.gp-dot{width:8px;height:8px;border-radius:2px}
.gp-dot.av{background:var(--green)}
.gp-dot.leave{background:var(--amber)}
.gp-dot.pa{background:linear-gradient(90deg,var(--green) 50%,rgba(52,211,154,.15) 50%);box-shadow:inset 0 0 0 1px rgba(52,211,154,.55)}
.gp-dot.no{background:var(--urgent)}
.gp-dot.vr{background:rgba(255,255,255,.10)}
.gp-dot.un{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.gp-dot.vla{background:none;box-shadow:inset 0 0 0 1px var(--amber)}
.gp-dot.ex{background:rgba(52,211,154,.35);box-shadow:inset 0 0 0 1px var(--green)}/* weer in de weekplanning-dagkop */
.gh-weer{display:block;margin-top:4px;font-size:var(--fs-micro);font-weight:600;color:var(--text-3);letter-spacing:0;text-transform:none}
.gh-weer i{font-style:normal;font-weight:500;margin-left:4px;opacity:.8}
/* balk-label (activiteit) + notitie onder de balk — lichte, doorschijnende balk zoals het voorstel */
/* BEWUST: .gp-bar is in drie etappes opgebouwd (basis-flex bovenin, hier de vorm, verderop de
   drag-engine). Geen van de drie zet dezelfde eigenschap — samenvoegen mag, maar is niet nodig. */
.gp-bar{gap:6px;padding:0 10px;overflow:hidden;height:30px;border-radius:7px;box-shadow:none}
.gp-bar:hover{box-shadow:0 0 0 1px rgba(255,255,255,.22);filter:brightness(1.08)}
.gp-barlbl{font-size:var(--fs-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
/* derde .gp-bar-blok: alleen wat de Pointer-drag-engine nodig heeft (zie comment hierboven) */
.gp-bar{cursor:grab;touch-action:none}
.gp-bar.gp-bar-drag{cursor:grabbing;z-index:5;box-shadow:0 0 0 2px rgba(43,179,240,.55);filter:none;transition:none}
/* grijp-zones links/rechts (breed, alleen visueel op hover — de balk vangt de pointer af) */
.gp-rz{position:absolute;top:0;bottom:0;width:12px;pointer-events:none;opacity:0;transition:opacity .12s}
.gp-rz-l{left:0;border-radius:7px 0 0 7px}
.gp-rz-r{right:0;border-radius:0 7px 7px 0}
.gp-bar:hover .gp-rz{opacity:1;background:rgba(255,255,255,.28)}
.gp-dropon{box-shadow:inset 0 0 0 2px rgba(43,179,240,.35)}
.gp-rail.gp-rail-drop{box-shadow:inset 0 0 0 2px rgba(43,179,240,.55);background:rgba(43,179,240,.07)}
/* BEWUST vooruitgeschoven: alleen de drag-eigenschap. De kaart zelf (rand, achtergrond, padding)
   wordt verderop gedefinieerd bij het planner-paneel; die twee bijten elkaar niet. */
.gp-bcard{touch-action:none}
.gp-bcard.gp-bcard-drag{opacity:.55}
/* live sleep-label + undo-toast */
.gp-draglabel{position:absolute;z-index:6;pointer-events:none;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:2px 8px;font-size:var(--fs-2xs);font-weight:600;color:var(--text);white-space:nowrap;box-shadow:var(--e-2)}
.gp-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:var(--z-toast);display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:10px 12px 10px 16px;box-shadow:var(--e-3);font-size:var(--fs-sm);color:var(--text);opacity:0;transition:opacity .2s,transform .2s}
.gp-toast.on{opacity:1;transform:translate(-50%,0)}
.gp-toast button{background:none;border:0;color:var(--blue);font-weight:700;font-size:var(--fs-sm);cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:var(--r-xs)}
.gp-toast button:hover{color:var(--accent-bright)}
.gp-tracknote{position:absolute;top:calc(50% + 16px);display:flex;align-items:center;gap:4px;font-size:var(--fs-micro);line-height:1.1;color:#f0c27e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.gp-tracknote svg{flex:0 0 auto;color:var(--amber)}
.gp-tracknote span{overflow:hidden;text-overflow:ellipsis}
.gp-grid .g-proj{min-height:58px}
.gp-projsub{display:inline-flex;align-items:center;gap:4px}
.gp-projsub svg{flex:0 0 auto;opacity:.75}
.gp-todayline{position:absolute;top:0;width:2px;background:var(--blue);box-shadow:0 0 10px rgba(43,179,240,.6);z-index:4;pointer-events:none}
.gp-grid .g-h.now{box-shadow:inset 0 -2px 0 var(--blue)}
/* aandacht-strook: vooruitgeschoven kaarten */
.gp-aandacht{display:flex;align-items:center;gap:14px;justify-content:space-between;background:rgba(232,163,61,.1);border:1px solid rgba(232,163,61,.4);border-radius:var(--r-lg);padding:11px 16px;margin:4px 0 14px}
.gp-aandacht-t{display:flex;align-items:flex-start;gap:9px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.gp-aandacht-t svg{color:var(--amber);flex:0 0 auto;margin-top:1px}
.gp-aandacht-t b{color:var(--text)}
.gp-aandacht .btn{flex:0 0 auto}
.brbadge.warn{border-color:rgba(232,163,61,.5)!important;color:#f0c27e!important;background:rgba(232,163,61,.12)}
/* capaciteit als gekleurde tegel + n/n (mono) */
/* BEWUST: dit blok zet de capaciteitscel van een rij naar een kolom om — dat IS het herontwerp, geen
   ongeluk. Gevolg: de `gap:1px` in het basisblok hierboven is dood (wordt hier 5px). Wie de tegel
   ooit terugdraait, moet daar zijn — niet hier een derde blok bij zetten. */
.gp-cap{flex-direction:column;gap:5px;padding:8px 0}
.gp-capsq{width:18px;height:18px;border-radius:5px;background:var(--line-2)}
.gp-cap.cap-ok .gp-capsq{background:var(--green)}
.gp-cap.cap-full .gp-capsq{background:var(--amber)}
.gp-cap.cap-over .gp-capsq{background:var(--urgent)}
.gp-capn{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;color:var(--text-3)}
.gp-capn b{font-weight:600}
.gp-cap.cap-ok .gp-capn{color:var(--green)}
.gp-cap.cap-full .gp-capn{color:var(--amber)}
.gp-cap.cap-over .gp-capn{color:var(--urgent)}.gp-blbadge{font-size:var(--fs-2xs);font-weight:600;border:1px solid;border-radius:var(--r-pill);padding:1px 8px}
.gp-bldur{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-micro);font-weight:600;color:var(--text-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.gp-bldur svg{flex:0 0 auto;opacity:.8}/* -- unified planner-paneel: backlog-rail + gantt in één kaart (voorstel-layout) -- */
.gp-panel{display:flex;align-items:stretch;position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden;margin-top:4px}
.gp-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:7}
/* 240 → 290px: bij 240 bleef er na de accentrand, de grip en de padding ~170px over voor de
   naam, en daar past geen enkele volledige projectnaam in. */
.gp-rail{flex:0 0 290px;width:290px;display:flex;flex-direction:column;background:var(--panel-2);border-right:1px solid var(--line-2)}
.gp-rail-h{flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;border-bottom:1px solid var(--line)}
.gp-rail-t{font-weight:700;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.gp-rail-t em{font-style:normal;color:var(--text-3)}
.gp-rail-i{display:inline-flex;color:var(--text-3);cursor:help}
.gp-rail-cards{flex:1;min-height:0;overflow-y:auto;padding:11px;display:flex;flex-direction:column;gap:9px}
.gp-rail-done{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 10px;border:1px dashed var(--line-2);border-radius:var(--r-md);margin-top:2px}
.gp-rail-done .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,154,.12);border:1px solid rgba(52,211,154,.35);color:var(--green)}
.gp-rail-done b{font-size:var(--fs-sm);color:var(--text)}
.gp-rail-done span{font-size:var(--fs-2xs);color:var(--text-3);line-height:1.5}
.gp-bcard{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);padding:10px 11px;cursor:grab}
.gp-bcard:hover{border-color:var(--line-2);background:var(--panel)}
.gp-bcard.sel{box-shadow:0 0 0 1px var(--blue)}
.gp-bc-grip{flex:0 0 auto;margin-top:2px;color:var(--text-3);cursor:grab}
.gp-bc-body{min-width:0;flex:1}
/* Zelfde verhaal op de backlogkaart: één regel in een rail van 240px (waarvan ~170 voor de tekst)
   kapte elke projectnaam af — en dat is nou net de kaart die je moet herkennen om 'm te slepen. */
.gp-bc-name{font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gp-bc-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-bc-meta{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.gp-gantt{flex:1;min-width:0;position:relative;overflow-x:auto;overflow-y:hidden}.gp-gantt::before{display:none}
/* vertikale weekgridlijnen door de project-tracks (kolomranden komen elders van cel-borders) */
.gp-grid .g-track{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/var(--n) - 1px),var(--line) calc(100%/var(--n) - 1px),var(--line) calc(100%/var(--n)))}
.gp-wlbl textarea{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base);resize:vertical}

/* -- beschikbaarheid ZZP -- */
.zpill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;padding:6px 13px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap}
.pk-legend .zpill{padding:2px 10px;font-size:var(--fs-2xs)}   /* compacte status-pills in de hero-voet */
.zpill.av{border-color:rgba(52,211,154,.5);color:#7fe3bd}
.zpill.pa{border-color:rgba(232,163,61,.5);color:#f0c27e}
/* De legenda-pill draagt de arcering zélf, zodat het chipje eruitziet als de cel die het benoemt
   (besluit 21-07 — zie .mp-dag.no). Verschilt van .zpill.pa door de arcering + het ✕-icoon. */
.zpill.no{border-color:rgba(232,163,61,.5);color:#f0c27e;
  background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px)}
.zpill.un{border-color:var(--line-2);color:var(--text-2)}
.zgrid-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--surface);position:relative}
.zgrid-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:6}
.zgrid{display:grid;min-width:980px}
.zh{padding:13px 12px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--line-2);background:#171430;text-align:center;position:sticky;top:0;z-index:3}
.zh .zd{display:block;color:var(--text-3);font-weight:500;font-size:var(--fs-2xs);margin-top:3px}
.zh.emp{position:sticky;left:0;z-index:5;text-align:left}
.zh.now,.zh.now .zd{color:var(--blue)}
.zh.now{box-shadow:inset 0 2px 0 var(--blue)}
.zemp{padding:12px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line-2);position:sticky;left:0;background:var(--surface);z-index:2}
.zemp .top{display:flex;align-items:center;gap:8px}
.zemp .rm{color:var(--text-3);cursor:pointer;font-size:var(--fs-lg);line-height:1}
.zemp .rm:hover{color:var(--urgent)}
.zemp .nm{font-weight:600;font-size:var(--fs-base)}

/* Adresmarker-tooltip (Locatie-kaart) — donkere huisstijl-tooltip bij hover/klik op een stip */
.leaflet-tooltip.adres-tip{background:#1a1633;color:#eef0f7;border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:5px 9px;font:500 12px/1 'Outfit',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.leaflet-tooltip.adres-tip::before{border-top-color:rgba(255,255,255,.16)}
.zemp .ctrl{margin-top:9px}
.zfilled{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:#7fe3bd;border:1px solid rgba(52,211,154,.45);border-radius:var(--r-pill);padding:3px 11px}
.zedit{margin-left:10px;font-size:var(--fs-sm);color:var(--blue);background:none;border:0;cursor:pointer;font-family:inherit}
.zask{font-size:var(--fs-sm);color:#9fd4f2;border:1px solid rgba(43,179,240,.4);background:rgba(43,179,240,.06);border-radius:var(--r-sm);padding:6px 12px;cursor:pointer;font-family:inherit}
.zask:hover{background:rgba(43,179,240,.12)}
/* Cel = afgerond getint statusblok (zelfde tint-recept als de planningsbalken: rgba-vulling + rand). */
.zcell{border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:60px;padding:6px;display:flex;cursor:pointer}
.zcell .zfill{flex:1;min-width:0;border-radius:8px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-xl);font-weight:700;transition:filter .14s,background .14s,border-color .14s}
.zcell .nt{font-size:var(--fs-2xs);font-weight:500;color:var(--text-2);text-align:center;padding:0 4px}
.zcell.av .zfill{background:rgba(52,211,154,.12);border-color:rgba(52,211,154,.4);color:#34d39a}
/* Idem (besluit 21-07): amber arcering i.p.v. rood. Blijft onderscheiden van verlof (.zcell.vl,
   VLAKKE amber) door het patroon, en van 'gedeeltelijk' (.zcell.pa) door patroon + ✕-icoon. */
.zcell.no .zfill{background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px);border-color:rgba(232,163,61,.32);color:var(--amber,#e8a33d)}
.zcell.pa .zfill{background:rgba(232,163,61,.12);border-color:rgba(232,163,61,.45);color:#e8a33d}
.zcell.un .zfill{color:var(--text-3)}
.zcell.un:hover .zfill{background:rgba(255,255,255,.04);border-color:var(--line-2)}
.zcell.av:hover .zfill,.zcell.pa:hover .zfill,.zcell.no:hover .zfill{filter:brightness(1.18)}
.bk-todayline{position:absolute;top:0;width:2px;background:var(--blue);box-shadow:0 0 10px rgba(43,179,240,.6);z-index:4;pointer-events:none}
/* Globale beschikbaarheid: groepsrijen + automatische lagen (rooster/verlof) + handmatige indeling */
.zgrp{grid-column:1/-1;padding:7px 12px;font-size:var(--fs-nano);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);background:#100e20;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.zcell.ro{cursor:default}
.zcell.ro:hover .zfill{filter:none}
.zcell.vr .zfill{background:rgba(255,255,255,.03);border-color:transparent;color:#5b5878;font-size:var(--fs-base)}
.zcell.vl .zfill{background:rgba(232,163,61,.12);border-color:rgba(232,163,61,.45);color:var(--amber,#e8a33d);font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em}
.zcell.vla .zfill{background:none;border:1px dashed rgba(232,163,61,.55);color:var(--amber,#e8a33d);font-size:var(--fs-xs);font-weight:700}
.zcell.gr .zfill{background:none;border:1px dashed rgba(255,93,115,.4);color:#e3aab1;font-size:var(--fs-2xs);font-weight:600}
/* Extra beschikbaar (Team, bovenop het rooster): groen met dashed rand = 'opgave', geen rooster */
.zcell.ex .zfill{background:rgba(52,211,154,.10);border:1px dashed rgba(52,211,154,.55);color:var(--green);font-size:var(--fs-xs);font-weight:700}
.zcell.exd .zfill{background:rgba(232,163,61,.08);border:1px dashed rgba(52,211,154,.45);color:#7fe3bd;font-size:var(--fs-xs);font-weight:700}
.zpill.ex{border-style:dashed;border-color:rgba(52,211,154,.5);color:#7fe3bd}
.bk-tag{font-size:var(--fs-2xs);color:var(--text-3)}
.zpill.vr{border-color:#2c2950;color:#7a7799}
.zpill.vl{border-color:rgba(232,163,61,.5);color:#f0c27e}
.zpill.vla{border-style:dashed;border-color:rgba(232,163,61,.5);color:#f0c27e}
/* Mini-editor bij een cel (klik) + sleep-preview */
.bk-pop{position:fixed;z-index:var(--z-toast);width:250px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:12px;box-shadow:var(--e-3)}
.bk-pop-h{font-size:var(--fs-nano);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.bk-pop .bk-modal-status{grid-template-columns:1fr;gap:5px;margin-bottom:9px}
.bk-pop .bk-pop-note{min-height:0;font-size:var(--fs-sm);padding:7px 9px}
.bk-pop-week{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--text-2);margin:9px 0 10px;cursor:pointer}
.bk-pop .bk-modal-foot{padding:0;border:0;display:flex;gap:8px}
.bk-sum{display:flex;gap:8px;flex-wrap:wrap}
.zcell.zdrag .zfill{filter:brightness(1.3);box-shadow:0 0 0 1px currentColor inset}
.bk-assign{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-lg)}

/* ---- Urenregistratie (#/uren) — read-only weekkalender (huisstijl-tokens + ec-componenten) ---- */
.ur-actions{flex-direction:column;align-items:flex-end;gap:10px}
.ur-emp{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 8px 4px 5px}
.ur-emp-sel{background:none;border:0;color:var(--text);font-family:inherit;font-size:var(--fs-sm);font-weight:600;padding:2px 2px;cursor:pointer;max-width:180px}
.ur-emp-sel:focus{outline:none}
.ur-emp-sel option{background:var(--surface);color:var(--text)}
.ur-nav{display:flex;align-items:center;gap:6px}
.ur-weeklbl{display:flex;flex-direction:column;line-height:1.15;min-width:138px;text-align:center;padding:0 2px}
.ur-weeklbl b{font-size:var(--fs-md);color:var(--text)}
.ur-weeklbl span{font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.ur-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 12px}
.ur-legend{display:flex;align-items:center;gap:16px;font-size:var(--fs-xs);color:var(--text-2)}
.ur-leg{display:inline-flex;align-items:center;gap:6px}
.ur-leg-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.ur-badge{font-size:var(--fs-2xs);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:var(--panel-2);color:var(--text-3);border:1px solid var(--line-2)}
.ur-badge--ok{background:rgba(52,211,154,.14);color:#7fe3bd;border-color:rgba(52,211,154,.45)}
.ur-badge--fwd{background:rgba(91,156,246,.14);color:#9cc3f7;border-color:rgba(91,156,246,.45)}
.ur-cal-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--e-1)}
.ur-cal{min-width:760px}
.ur-headrow{display:grid;grid-template-columns:56px repeat(var(--days),minmax(148px,1fr));border-bottom:1px solid var(--line-2)}
.ur-bodyrow{display:grid;grid-template-columns:56px repeat(var(--days),minmax(148px,1fr))}
.ur-corner{border-right:1px solid var(--line)}
.ur-dhead{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 4px 8px;border-left:1px solid var(--line);text-align:center}
.ur-dhead-add{position:absolute;top:4px;right:4px;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:7px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:color-mix(in srgb,var(--accent) 85%,var(--text-2));cursor:pointer;transition:background .13s var(--ease),color .13s var(--ease),transform .1s}
.ur-dhead:hover .ur-dhead-add{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.ur-dhead-add:hover{background:var(--accent);color:#fff;transform:scale(1.08)}
.ur-dhead-add:active{transform:scale(.96)}
.ur-dhead-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ur-dhead.is-weekend{background:rgba(255,255,255,.015)}
.ur-dhead.is-today{background:linear-gradient(180deg,rgba(43,179,240,.15),transparent)}
.ur-dhead.is-feest{background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 14%,transparent),transparent)}
.ur-dfeest{font-size:var(--fs-2xs);color:var(--amber);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Cockpit-afwezigheid (verlof/verzuim/aanvraag) als chip in de dagkop — de kalender toont zelf
   alleen uren, dus zonder chip was een cockpit-geboekte opname onzichtbaar. */
.ur-dafw{display:inline-flex;align-items:center;font-size:var(--fs-2xs);border-radius:99px;padding:0 7px;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--green);border:1px solid color-mix(in srgb,var(--green) 45%,transparent);background:color-mix(in srgb,var(--green) 12%,transparent)}
.ur-dafw.is-vz{color:var(--amber,#d99a3a);border-color:color-mix(in srgb,var(--amber,#d99a3a) 45%,transparent);background:color-mix(in srgb,var(--amber,#d99a3a) 12%,transparent)}
.ur-dafw.is-todo{border-style:dashed}
.ur-dafw.is-anv{color:var(--text-2);border:1px dashed color-mix(in srgb,var(--text-3) 55%,transparent);background:transparent}
.ur-dname{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700}
.ur-dnum{font-size:var(--fs-lg);font-weight:800;color:var(--text);line-height:1.05}
.ur-dhead.is-today .ur-dnum,.ur-dhead.is-today .ur-dname{color:var(--accent-bright)}
.ur-dtot{font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:1px}
.ur-gutter{position:relative;border-right:1px solid var(--line)}
.ur-hr{position:absolute;right:7px;transform:translateY(-50%);font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.ur-daycol{position:relative;border-left:1px solid var(--line)}
.ur-daycol.is-weekend{background:rgba(255,255,255,.015)}
.ur-daycol.is-today{background:rgba(43,179,240,.05)}
.ur-daycol.is-feest{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.ur-hrline{position:absolute;left:0;right:0;border-top:1px solid var(--line);opacity:.4}
.ur-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--accent-bright);z-index:4}
.ur-now-dot{position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 0 3px rgba(43,179,240,.25)}
.ur-blk{--ur-accent:var(--blue);position:absolute;border-radius:var(--r-sm);padding:4px 8px 5px;overflow:hidden;font-size:var(--fs-xs);line-height:1.28;color:var(--text);background:color-mix(in srgb,var(--ur-accent) 15%,var(--surface-2));border:1px solid color-mix(in srgb,var(--ur-accent) 30%,transparent);border-left:3px solid var(--ur-accent);box-shadow:var(--e-1);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s var(--ease);cursor:default}
.ur-blk:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--ur-accent) 24%,var(--surface-2));box-shadow:var(--e-2);z-index:5}
.ur-blk--intern{--ur-accent:var(--purple)}
.ur-blk--reis{--ur-accent:var(--amber)}   /* reistijd bij inhuur: apart uurtarief */
/* Urensoort stuurt het blok (keuze Remco 27-07): rand, vulling én tijdregel volgen --ur-rol, dat
   per blok als inline style meekomt uit cat_urensoort.kleur. Staat NA --intern/--reis zodat de
   rol wint; wordt alleen gezet bij een boeking MÉT project — zonder project stuurt de urensoort
   niets (daar is de keuze ook weg) en blijft intern paars, reistijd amber. */
.ur-blk--rol{--ur-accent:var(--ur-rol)}
.ur-blk--kort{padding:2px 8px}
.ur-blk-time{display:flex;justify-content:space-between;gap:6px;font-weight:700;white-space:nowrap;color:var(--ur-accent);font-variant-numeric:tabular-nums}
.ur-blk--kort .ur-blk-time{font-size:var(--fs-2xs)}
.ur-blk-time b{color:var(--text-2);font-weight:700}
.ur-blk-org{font-weight:700;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ur-blk--kort .ur-blk-org{font-size:var(--fs-2xs);margin-top:0}
.ur-blk-proj{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ur-blk-rol{display:flex;align-items:center;gap:5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ur-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ur-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:60px 0;color:var(--text-3);font-size:var(--fs-sm)}
/* Urenregistratie — schrijffase: klik = bewerken/boeken, slepen = boeken/verplaatsen/duur wijzigen,
   slotje = vergrendeld (goedgekeurd/verlof) */
.ur-blk--edit{cursor:grab;touch-action:none}
.ur-blk--edit:hover{filter:brightness(1.12)}
.ur-blk--edit:active{cursor:grabbing}
.ur-blk--vast{opacity:.72;cursor:default}
.ur-slot{font-size:10px;flex:0 0 auto;opacity:.8}
/* Onderrand-greep: duur wijzigen door te slepen (verschijnt bij hover op een bewerkbaar blok) */
.ur-blk-grip{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.ur-blk-grip::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:22px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ur-accent) 60%,transparent);opacity:0;transition:opacity .12s var(--ease)}
.ur-blk--edit:hover .ur-blk-grip::after{opacity:.85}
/* Sleep-voorbeeld (ghost) tijdens boeken/verplaatsen/oprekken */
.ur-ghost{pointer-events:none;z-index:7;border-style:dashed;opacity:.92;box-shadow:var(--e-2);transition:none}
.ur-ghost .ur-blk-time{gap:6px}
/* BEWUST tweede .ur-daycol-blok: de schrijffase maakte de dagkolom klikbaar (nieuwe boeking). De
   basis (positie + scheidingslijn) staat bij de read-only weekspiegel hierboven. */
.ur-daycol{cursor:copy}
.ur-daycol:has(.ur-blk:hover){cursor:default}
.ur-ovl{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px}
.ur-modal{width:min(520px,94vw);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--e-3);padding:18px 20px}
.ur-m-title{font-weight:700;font-size:var(--fs-md);margin-bottom:14px}
/* ⚠Elke display-regel hieronder overschrijft het hidden-ATTRIBUUT (author-CSS wint van de
   UA-regel [hidden]{display:none}). Zonder deze vier regels bleven in de uren-editor de
   werkvelden staan als je op 'Verlof boeken' klikte, en stond de lege Dienst-keuze altijd in
   beeld. Zelfde valkuil als bij .nav/.btn/.rp-editor hierboven — zet 'm er meteen bij als je
   een van deze klassen ooit met .hidden schakelt. */
.ur-wv-seg[hidden],.ur-m-lbl[hidden],.ur-m-row[hidden],.ur-km-afw[hidden]{display:none}
/* Werk/Verlof-schakelaar boven in de uren-editor */
.ur-wv-seg{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;margin-bottom:14px}
.ur-wv-seg button{flex:1;border:0;background:none;color:var(--text-2);font:inherit;font-size:var(--fs-sm);font-weight:600;padding:8px 12px;border-radius:var(--r-xs);cursor:pointer;width:auto}
.ur-wv-seg button.is-on{background:var(--accent);color:#fff}
.ur-m-lbl{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);margin-bottom:10px;min-width:0;flex:1}
.ur-m-lbl input,.ur-m-lbl select{display:block;width:100%;margin-top:4px}
.ur-m-row{display:flex;gap:10px;align-items:flex-end}
.ur-m-row .ur-m-lbl{flex:1}
/* Eigen tijdveld (vervangt <input type="time">): tekstinput + kwartierstapper. Erft bewust de
   globale veldbasis, zodat het naast Datum/Notitie in dezelfde rij niet als vreemde eend leest. */
.ec-tijd{position:relative;display:block;margin-top:4px}
/* .ec-tijd .ec-tijd-inp i.p.v. los: de wrapper draagt de marge al, en '.ur-m-lbl input'
   (0,1,1) zou een losse .ec-tijd-inp (0,1,0) overrulen naar margin-top:4px = dubbel. */
.ec-tijd .ec-tijd-inp{margin-top:0;padding-right:38px;font-variant-numeric:tabular-nums}
/* top = (veldhoogte 33 - knoprij 31) / 2 — de knoppen zweven in het veld, niet eronder. */
.ec-tijd-knop{position:absolute;right:4px;top:1px;display:flex;flex-direction:column;gap:1px}
.ec-tijd-knop button{width:26px;height:15px;padding:0;border:0;background:var(--panel-2);color:var(--text-2);border-radius:var(--r-xs);font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ec-tijd-knop button:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text)}
.ec-tijd-knop button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ec-tijd.is-vrij .ec-tijd-inp{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.ec-tijd.is-fout .ec-tijd-inp{border-color:var(--urgent)}
.ec-tijd-hint{display:block;margin-top:3px;font-size:var(--fs-2xs);color:var(--warn)}
.ec-tijd-hint[hidden],.ec-tijd[hidden]{display:none}
/* Touch: knoppen naar 32px (WCAG 2.5.8) en 16px tekst, anders zoomt iOS in bij focus. Op
   pointer:coarse i.p.v. een breedte-query — een touchlaptop is breed én aanraakbaar. */
@media (pointer: coarse){
  .ec-tijd .ec-tijd-inp{font-size:16px;padding-right:74px}
  .ec-tijd-knop{flex-direction:row;gap:4px;top:4px}
  .ec-tijd-knop button{width:32px;height:32px;font-size:15px}
}
/* Datumveld (datumVeld) — typebaar veld + cockpit-kalender-popover; vervangt <input type=date>.
   Het veld-<input> erft de basis input-stijl (border/bg/padding); alleen het kalendericoon en de
   popover zijn eigen. De popover hangt aan <body> (position:fixed) → nooit geclipt in een modal. */
.ec-datum{position:relative;display:block;margin-top:4px}
.ec-datum .dv-field{position:relative;display:block}
.ec-datum .dv-field input{margin:0;padding-right:34px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ec-datum .dv-field.open input{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.ec-datum.is-fout .dv-field input{border-color:var(--urgent)}
.dv-cal{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;background:none;color:var(--text-2);border-radius:var(--r-xs);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.dv-cal:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text)}
.dv-cal svg{width:16px;height:16px;display:block}
.dv-pop{position:fixed;z-index:1100;width:288px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--e-2);padding:12px;animation:dvpop .12s ease-out}
@keyframes dvpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dv-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.dv-chip{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;padding:5px 10px;border-radius:var(--r-pill);cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text-2);transition:border-color .14s,color .14s,background .14s}
.dv-chip:hover{border-color:var(--blue);color:var(--text);background:var(--blue-dim)}
.dv-head{display:flex;align-items:center;gap:5px;margin-bottom:9px}
.dv-mlabel{flex:1;text-align:center;font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--text);text-transform:capitalize;background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:var(--r-xs)}
.dv-mlabel:hover{background:rgba(255,255,255,.06)}
.dv-nav{flex:0 0 auto;width:28px;height:28px;border:0;background:rgba(255,255,255,.04);color:var(--text-2);border-radius:var(--r-xs);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s;padding:0}
.dv-nav:hover{background:rgba(255,255,255,.09);color:var(--text)}
.dv-nav svg{width:14px;height:14px;display:block}
.dv-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.dv-dow span{text-align:center;font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:3px 0}
.dv-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dv-day{aspect-ratio:1;border:0;background:none;color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);border-radius:var(--r-sm);cursor:pointer;font-variant-numeric:tabular-nums;position:relative;padding:0;transition:background .12s,color .12s}
.dv-day:hover{background:rgba(255,255,255,.07)}
.dv-day.other{color:var(--text-3)}
.dv-day.today{box-shadow:inset 0 0 0 1px var(--blue)}
.dv-day.sel{background:var(--purple);color:#fff;font-weight:600;box-shadow:none}
.dv-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.dv-link{background:none;border:0;color:var(--text-2);font-family:var(--font-body);font-size:var(--fs-sm);cursor:pointer;padding:4px 6px;border-radius:var(--r-xs)}
.dv-link:hover{color:var(--text);background:rgba(255,255,255,.05)}
.dv-link.accent{color:var(--blue)}
.dv-link.accent:hover{color:var(--accent-bright)}
@media (pointer:coarse){.ec-datum .dv-field input{font-size:16px}.dv-day{font-size:15px}}
/* Zoek-kiezer (combobox) — leeg starten + typen om te zoeken i.p.v. een select met voorselectie */
.ur-combo{position:relative;margin-top:4px}
.ur-combo-input{margin-top:0}
.ur-combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:236px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-3);padding:4px}
.ur-combo-opt{padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ur-combo-opt:hover,.ur-combo-opt.is-actief{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ur-combo-leeg{padding:8px 10px;font-size:var(--fs-sm);color:var(--text-3)}
.ur-m-dur{font-size:var(--fs-sm);font-weight:700;color:var(--text-2);padding-bottom:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ur-m-err{color:var(--urgent);font-size:var(--fs-xs);margin:2px 0 8px}
/* Afgeleide btw onder de twee bedragvelden van een kosten-declaratie: informatief, en rood zodra
   excl. hoger is dan incl. (de server weigert dat ook). Leeg = geen hoogte, geen lege ruimte. */
.ur-btw-hint{margin:-4px 0 10px;font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums;min-height:0}
.ur-btw-hint:empty{margin:0}
.ur-btw-hint.is-fout{color:var(--bad,#d33);font-weight:600}
.ur-km-afw{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--r-sm,8px);background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn);font-size:var(--fs-2xs);line-height:1.4}
.ur-km-afw svg{flex:0 0 auto;margin-top:1px}
.ur-m-btns{display:flex;gap:10px;align-items:center;margin-top:8px}
/* Budgetregel in de boek-editor: begroot vs geboekt op de gekozen dienst en urensoort. Informatief —
   boeken wordt bewust NIET geblokkeerd (gewerkte uren zijn een feit), de kleur is het enige signaal.
   ⚠Geen display-regel op .ur-bud zelf: die zou het hidden-ATTRIBUUT overschrijven (zie de
   waarschuwing bij .ur-wv-seg hierboven) — vandaar de expliciete [hidden]-regel. */
.ur-bud{margin:2px 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);overflow:hidden}
.ur-bud[hidden]{display:none}
.ur-bud-r{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 10px;font-size:var(--fs-2xs);color:var(--text-2);font-variant-numeric:tabular-nums}
.ur-bud-r+.ur-bud-r{border-top:1px solid var(--line)}
.ur-bud-l{font-weight:700;color:var(--text);flex:0 0 auto}
.ur-bud-r b{color:var(--green);font-weight:700}
.ur-bud-r.is-vol b{color:var(--amber)}
.ur-bud-r.is-over{background:rgba(240,101,92,.09)}
.ur-bud-r.is-over b{color:var(--red)}
/* Declaratieblok onder de urenkalender — cockpit-kaart (elevatie + eyebrow-kop, als de ph2-kaarten) */
.ur-dc{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:14px 16px;box-shadow:var(--e-1)}
.ur-dc-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ur-dc-eyb{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.ur-dc-eyb svg{color:var(--blue)}
.ur-dc-add{display:inline-flex;align-items:center;gap:5px}
.ur-dc-add svg{flex:0 0 auto}
/* Rij = 2-regelig grid: regel 1 = soort + bedrag + bon + verwijderknop (acties ALTIJD in beeld),
   regel 2 = project/aantal klein eronder. De oude one-line-flex had alleen shrink-0-kolommen en
   duwde in de smalle rail het bedrag én de knoppen buiten de kaart ('onzichtbare verwijderknop'). */
/* Kolom erbij voor 'wijzigen'. Die zit NAAST verwijderen en niet in een ···-menu: het zijn de twee
   acties die je op je eigen declaratie hebt zolang de week nog niet is afgetekend, en een typefout
   herstellen hoort niet achter een extra klik te zitten. */
.ur-dc-row{display:grid;grid-template-columns:auto 42px minmax(0,1fr) auto auto auto auto;grid-template-areas:"ic dat soort eur bijl edit del" "ic dat proj num num num num";align-items:center;column-gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.ur-dc-row .ur-dc-ic{grid-area:ic}
.ur-dc-dat{grid-area:dat;color:var(--text-3);font-variant-numeric:tabular-nums}
.ur-dc-soort{grid-area:soort;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-dc-note{color:var(--text-3);font-weight:400}
.ur-dc-proj{grid-area:proj;min-width:0;color:var(--text-3);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-dc-num{grid-area:num;color:var(--text-3);font-size:var(--fs-xs);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ur-dc-eur{grid-area:eur;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ur-dc-del{grid-area:del;background:none;border:0;padding:2px 6px;color:var(--text-3);cursor:pointer;border-radius:var(--r-xs);display:inline-flex}
.ur-dc-del:hover{color:var(--urgent)}
.ur-dc-edit{grid-area:edit;background:none;border:0;padding:2px 6px;color:var(--text-3);cursor:pointer;border-radius:var(--r-xs);display:inline-flex}
.ur-dc-edit:hover{color:var(--blue)}
/* Het slotje (goedgekeurd/gefactureerd) vervangt béide knoppen — daarom over de twee kolommen. */
.ur-dc-row .ur-slot{grid-area:edit/edit/del/del;justify-self:center}
.ur-dc-bijl{grid-area:bijl;background:none;border:0;padding:2px 5px;color:var(--blue);cursor:pointer;border-radius:var(--r-xs);display:inline-flex}
.ur-dc-bijl:hover{background:color-mix(in srgb,var(--blue) 16%,transparent)}
.ur-dc-warn{grid-area:bijl;color:var(--warn);display:inline-flex;justify-self:center}
.ur-dc-bijl-none{grid-area:bijl;width:24px}
/* Bijlage-blok in de kosten-declaratie-editor: bon (voorkeur, btw) of betaalbewijs */
.ur-bijl{margin-top:12px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:color-mix(in srgb,var(--blue) 4%,transparent)}
.ur-bijl-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);margin-bottom:8px}
.ur-req{color:var(--red);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;margin-left:4px}
.ur-bijl-seg{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
.ur-bijl-seg button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--text-3);font:inherit;font-size:var(--fs-2xs);font-weight:600;padding:4px 9px;border-radius:var(--r-xs);cursor:pointer;width:auto}
.ur-bijl-seg button.is-on{background:var(--blue);color:#fff}
.ur-bijl input[type=file]{width:100%;font-size:var(--fs-xs);color:var(--text-2)}
.ur-bijl input[type=file]::file-selector-button{font:inherit;font-size:var(--fs-2xs);font-weight:600;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;margin-right:10px;cursor:pointer}
/* Bijlage kiezen op touch (zie uren.js): twee expliciete knoppen die dezelfde file-input aansturen,
   omdat één input óf de camera afdwingt óf hem wegstopt in het deelmenu. De kale input verdwijnt
   dan — .click() werkt gewoon op een display:none-input. */
.ur-bijl-acties{display:flex;gap:8px}
.ur-bijl-acties[hidden]{display:none}   /* display:flex overschrijft het hidden-attribuut */
.ur-bijl-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel-2);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ur-bijl-act:active{background:rgba(255,255,255,.07)}
.ur-bijl input[type=file].ur-bijl-weg{display:none}
.ur-bijl-bestand{margin-top:8px;font-size:var(--fs-xs);color:var(--text-2);word-break:break-all}
.ur-bijl-bestand[hidden]{display:none}
.ur-bijl-hint{margin-top:8px;font-size:var(--fs-2xs);color:var(--text-3);line-height:1.4}
/* ---- Declaratie-overzicht (#/declaraties) ---- */
.dco-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:16px 0 12px}
.dco-f{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.dco-f input,.dco-f select{width:auto;min-width:150px}
.dco-modus{align-self:flex-end}
.dco-mode{display:flex;align-items:flex-end;gap:12px}
.dco-mode[hidden]{display:none}
.dco-dat{font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.dco-nr{font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap;font-weight:600}
.dco-projnr{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:var(--fs-2xs)}
.dco-proj{color:var(--text-2);max-width:320px}
.dco-note{color:var(--text-3)}
.dco-tar{color:var(--text-3);font-size:var(--fs-2xs)}
.dco-btw{white-space:nowrap}
/* Het btw-% is een AFGELEIDE van de twee bedragen → tekst, geen keuzeveld. Bewerken gebeurt in
   het detailvenster; in de tabel is alles leesbaar en niets per ongeluk aan te passen. */
.dco-btwpct{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.dco-excl{color:var(--text-2)}
.dco-rij{cursor:pointer;transition:background .12s}
.dco-rij:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dco-rij:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Detailvenster van één declaratie: staat op het huiscomponent .ec-dlg--werk (components.css), net
   als het inkoopfactuur-venster. De eigen .dcd-opmaak die hier stond is weg — die zette
   `background:var(--surface-1)`, een token dat niet bestaat, waardoor het venster transparant was. */
.dco-dlgkop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dco-tar--afw{color:var(--warn);font-weight:700}
.dco-tar--afw svg{vertical-align:-1px}
.dco-bijl{background:none;border:0;padding:3px 6px;color:var(--blue);cursor:pointer;border-radius:var(--r-xs);display:inline-flex}
.dco-bijl:hover{background:color-mix(in srgb,var(--blue) 16%,transparent)}
.dco-del{background:none;border:0;padding:3px 6px;color:var(--text-3);cursor:pointer;border-radius:var(--r-xs);display:inline-flex}
.dco-del:hover{color:var(--urgent);background:color-mix(in srgb,var(--urgent) 12%,transparent)}
.dco-warn{color:var(--warn);display:inline-flex}
.dco-dash{color:var(--text-4,var(--text-3))}
.dco-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:3px 9px;border-radius:999px;background:var(--panel-2);color:var(--text-3);border:1px solid var(--line)}
.dco-badge--ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);border-color:transparent}
.dco-badge--fact{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue);border-color:transparent}
.dco-badge--afg{background:color-mix(in srgb,var(--urgent) 16%,transparent);color:var(--urgent);border-color:transparent;cursor:help}
.dco-badge--opnieuw{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);border-color:transparent;cursor:help}
/* Afgekeurde declaratie in de urenweek: de medewerker moet in ZIJN eigen scherm zien dat er iets
   mis is, en waarom — de mail alleen is niet genoeg (die raakt zoek). */
.ur-dc-row--afg{background:color-mix(in srgb,var(--urgent) 6%,transparent)}
.ur-dc-afg{margin-left:6px;font-size:var(--fs-2xs);font-weight:700;color:var(--urgent)}
.ur-dc-opnieuw{margin-left:6px;font-size:var(--fs-2xs);font-weight:700;color:var(--amber)}
/* De 'bijlage ontbreekt'-melding is nu een KNOP (bon nasturen), dus hij moet er klikbaar uitzien. */
button.ur-dc-warn{border:0;background:none;padding:0;cursor:pointer}
button.ur-dc-warn:hover{filter:brightness(1.25)}
/* ---- Weekcontrole (#/weekcontrole) ---- */
.wk-keten .sbal{max-width:none;flex:1 1 auto}          /* bewuste override van .sbal hierboven */
.wk-keten .sbal-pill{cursor:pointer}
.wk-keten .sbal-pill:hover{filter:brightness(1.15)}
.wk-ketenrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ⚠De zesdelige keten past niet op één regel in een smal venster. Gemeten: de rij heeft 671px nodig
   en haalt die pas vanaf ~1020px vensterbreedte; daaronder vielen de laatste punten (Declaraties ·
   Geld · Stand nu) BUITEN de kaart, en die heeft overflow:hidden. Er is geen scrollbalk, dus die
   punten waren niet alleen half zichtbaar maar onbereikbaar — juist de punten die zeggen of de week
   dicht kan. Daarom afbreken over meerdere regels; de verbindingslijntjes vervallen dan, want een
   lijn die op de volgende regel doorloopt suggereert een volgorde die er niet staat. 1080px = de
   tabletgrens uit js/mobielbeleid.js (TAB), met marge boven de gemeten 1020. */
@media(max-width:1080px){
  .wk-keten .sbal{flex-wrap:wrap;gap:6px}
  .wk-keten .sbal-line{display:none}
}
/* Matrix: cellen zijn vierkant en tekstloos — ze mogen nooit als statuspill lezen. */
.wk-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--text-3);margin:-2px 0 12px}
.wk-leg span{display:inline-flex;align-items:center;gap:6px}
.wk-c{width:13px;height:13px;border-radius:5px;display:inline-block;flex:0 0 auto}
.wk-c.ok{background:rgba(52,211,154,.18);border:1px solid var(--green)}
.wk-c.open{background:transparent;border:1px solid var(--line-2)}
.wk-c.verlof{background:rgba(43,179,240,.2);border:1px solid var(--blue)}
.wk-c.komt{background:transparent;border:1px dashed var(--line-2)}
.wk-c.muted{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.wk-mxwrap{overflow-x:auto}
.wk-mx{display:grid;grid-template-columns:210px repeat(7,minmax(40px,1fr)) 92px 172px 190px;column-gap:6px;row-gap:5px;align-items:center;min-width:940px}
.wk-mxh{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-align:center;padding-bottom:2px}
.wk-mxh.we{opacity:.6}
.wk-mxh b{display:block;font-size:var(--fs-xs);color:var(--text-2);letter-spacing:0}
.wk-daybar{height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:4px}
.wk-daybar i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .9s var(--ease)}
.wk-naam{display:flex;align-items:center;gap:9px;min-width:0}
.wk-ava{width:24px;height:24px;flex:0 0 24px;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:800;background:rgba(154,79,208,.16);color:#cba3e6;border:1px solid rgba(154,79,208,.35)}
/* ⚠Was `.wk-naam span:last-child`. Zodra er een tweede element achter de naam kwam (het
   opmerking-teken) verhuisde die opmaak naar het verkeerde element: de naam verloor zijn
   ellipsis en het icoontje kreeg 'm. Een POSITIONELE selector breekt op de dag dat je iets
   toevoegt — vandaar een expliciete klasse. */
.wk-naam .wk-nm{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Een negatief werkverlet-saldo: uren die nog ingehaald moeten worden. Amber, want het is een
   stand om te weten en geen fout — de afschrijving zelf was een bewuste goedkeuring. */
.md-tekort{color:var(--amber)}
/* Een tekort dat met werkverlet is verrekend: afgehandeld, dus GROEN getint en niet in de
   openstaande-punten-lijst. Wel tonen — anders lijkt een tekort van 8 u zomaar verdwenen. */
/* ⚠TINTEN UIT DE TOKENS, NIET UIT LOSSE rgba(). Hier stonden #7fe3bd / rgba(52,211,154,…) /
   rgba(245,180,80,…) — kleuren die er ongeveer als --green en --amber uitzien maar het niet ZIJN
   (amber is #e8a33d, niet 245,180,80). Wie het palet ooit bijstelt, stelt deze drie blokken niet
   mee bij en dan lopen ze stil uit de pas. `color-mix` op de tokens is het bestaande recept in dit
   bestand (zie .clog-tag--proj c.s.). Vulling .10–.15, rand .4–.6 — het tint-recept uit CLAUDE.md. */
.ec-dlg__detail.wk-verrekend{background:color-mix(in srgb,var(--green) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 45%,transparent);
  border-radius:var(--r-sm);padding:7px 9px;color:color-mix(in srgb,var(--green) 72%,#fff)}
/* Wat goedkeuren-met-opmerking met het werkverlet doet — de derde goedkeurroute. Amber getint,
   want het gaat om een bedrag dat verschuift; geen alarm, wel iets om te lezen vóór je aftekent. */
.ur-m-wv{background:color-mix(in srgb,var(--amber) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  border-radius:var(--r-sm);padding:7px 9px}
/* Statuskolom: badge met daaronder de werkverlet-consequentie. Was een kale <div>; die kolom
   draagt sinds 07-09-2026 twee dingen, dus expliciet stapelen i.p.v. op de `align-items:center`
   van het grid leunen. */
.wk-st{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
/* Wat goedkeuren met het werkverlet-potje doet (+ of −). Tint-recept zoals de statuscellen.
   ⚠Amber = gewone afschrijving, groen = bijschrijving, rood pas als het saldo NEGATIEF uitkomt —
   dán is het geen geruilde dag maar een week die niet gevuld is. Alles rood maken maakt de
   markering waardeloos. Het volledige bedrag + saldo staat in de title en in het bevestigvenster. */
/* ⚠ALLEEN HET AFKAPPEN. De kleuren komen van `.ec-badge--green/amber/red` (components.css) — hier
   stonden drie eigen tintregels met rgba-waarden die net naast de tokens lagen. Zie wvChip in
   views/weekcontrole.js: die roept badgeHTML aan met `cls:'wk-wv'`. */
.wk-wv{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block}
/* Er ligt feedback over deze persoon-week. Klein en grijs: het is een geheugensteun, geen alarm. */
.wk-opm{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-2xs);font-weight:700;color:var(--text-3)}
.wk-opm svg{display:block}
.wk-cel{height:28px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700;position:relative;overflow:hidden}
/* Uren geboekt — ongeacht of het dagrooster gehaald is: die vergelijking hoort niet in de cel.
   Het alarm hangt aan de rij (mist X u over de week); dat de uren erin staan is wat telt. */
.wk-cel.ok{background:rgba(52,211,154,.16);border:1px solid rgba(52,211,154,.55);color:#7fe3bd}
/* Roosterdag die voorbij is zonder uren: rustig, GEEN rood — wel waar je gaat kijken. */
.wk-cel.open{background:transparent;border:1px solid var(--line-2)}
.wk-cel.verlof{background:rgba(43,179,240,.18);border:1px solid rgba(43,179,240,.55);color:#9fd4f2}
/* Gewerkt ÉN afwezig op dezelfde dag: half groen, half blauw. Eerder won afwezigheid altijd,
   waardoor een dag met 6 u werk + 2 u verlof als pure verlofdag las. */
.wk-cel.deels{border:1px solid rgba(43,179,240,.55);color:#bfe6d8;
  background:linear-gradient(105deg,rgba(52,211,154,.20) 0 50%,rgba(43,179,240,.20) 50% 100%)}
.wk-cel.muted{background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--text-3)}
.wk-cel.komt{background:transparent;border:1px dashed var(--line-2)}
.wk-uren.wk-mist b{color:var(--urgent)}
.wk-uren{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;text-align:right;color:var(--text-3)}
.wk-uren b{color:var(--text)}
.wk-acties{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.wk-leeg{opacity:.55}
.wk-sub{grid-column:1/-1;margin:16px 0 7px}
.wk-sub:first-of-type{margin-top:2px}
.wk-meer{grid-column:1/-1;padding:8px 2px 2px;font-size:var(--fs-xs);color:var(--text-3);cursor:pointer}
.wk-meer:hover{color:var(--blue)}
.wk-rest{margin-top:11px;font-size:var(--fs-2xs);color:var(--text-3);display:flex;align-items:center;gap:6px}
.wk-skel{display:flex;flex-direction:column;gap:7px}
/* Kaartraster: twee gelijke kaarten, 'Stand nu' over de volle breedte eronder. */
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.wk-grid>.wk-standnu{grid-column:1/-1}
.wk-grid .card{margin-bottom:0}
.wk-grid .card>.body{min-height:210px;display:flex;flex-direction:column}
.wk-kern{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.wk-kern-v{font-size:var(--fs-lg);font-weight:800}
.wk-kern-s{font-size:var(--fs-micro);color:var(--text-3);margin-top:2px}
.wk-goed{display:flex;align-items:center;gap:8px;padding:9px 2px;font-size:var(--fs-xs);color:var(--text-3)}
.wk-goed svg{color:var(--green);flex:0 0 auto}
/* Declaratie-weekcontrole (cutover 2.5): controlelijst per medewerker met signalen + akkoord/afkeuren. */
.wk-badge{font-size:var(--fs-2xs);font-weight:600;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.wk-badge.amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent)}
.wk-badge.green{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.wk-badge.red{color:var(--urgent);background:color-mix(in srgb,var(--urgent) 14%,transparent)}
.wk-badge.blue{color:var(--blue,#3b9ae1);background:color-mix(in srgb,var(--blue,#3b9ae1) 14%,transparent)}
.wk-dprog{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin:6px 0 14px}
.wk-dprog i{display:block;height:100%;border-radius:99px;background:var(--green)}
.wk-dgroep{margin-bottom:14px}
.wk-dpers{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;margin:2px 0 6px}
.wk-dpers .wk-dmut{margin-left:auto;font-weight:400}
.wk-drow{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:0 var(--r-md) var(--r-md) 0;padding:9px 12px;margin-bottom:7px;background:var(--surface)}
.wk-dhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wk-dsoort{font-size:var(--fs-sm);font-weight:600}
.wk-dmut{font-size:var(--fs-2xs);color:var(--text-3)}
.wk-dmeta{font-size:var(--fs-2xs);color:var(--text-2);margin-top:2px}
.wk-dsigs{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.wk-dsig{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:600;padding:2px 7px;border-radius:var(--r-xs)}
.wk-dsig.amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.wk-dsig.red{color:var(--urgent);background:color-mix(in srgb,var(--urgent) 12%,transparent)}
.wk-dafkr{font-size:var(--fs-2xs);color:var(--urgent);margin-top:6px}
.wk-dfoot{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.wk-dbedrag{font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.wk-dacts{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wk-dafk{color:var(--urgent);border-color:color-mix(in srgb,var(--urgent) 40%,transparent)}
.wk-dvoet{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
/* Emmerkopje binnen een kaart met meerdere soorten regels (geld: vervallen/concept/te boeken;
   dataportaal: verlopen/te factureren/zonder relatie). Zonder dit scheidingsteken lezen drie
   verschillende soorten regels als één lijst en zegt de accentkleur links niets meer. */
.wk-demmer{display:flex;align-items:baseline;gap:8px;margin:13px 2px 6px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.wk-demmer .x{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
/* De '+ N meer'-regel is nu een link (was een dode <div>): 'er zijn er nog 6' hoort een uitweg te
   hebben, anders is het een mededeling waar je niets mee kunt. */
a.db2-att-meer{display:block;text-decoration:none;color:var(--text-3)}
a.db2-att-meer:hover{color:var(--text)}
.wk-voet{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}
.wk-voet .rechts{margin-left:auto;display:flex;align-items:center;gap:8px}
.wk-af-ok{font-size:var(--fs-2xs);color:var(--green);display:inline-flex;align-items:center;gap:5px}
.wk-fout{display:flex;align-items:center;gap:12px;padding:14px 2px;font-size:var(--fs-sm)}
.wk-fout b{display:block}
.wk-fout span{display:block;color:var(--text-3);font-size:var(--fs-2xs);margin-top:2px}
.wk-fout>div{flex:1;min-width:0}
.wk-nu2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.wk-nu2.wk-oud{opacity:.5}
.wk-rij{display:flex;align-items:center;gap:11px;padding:8px 2px;border-top:1px solid var(--line)}
.wk-rij:first-child{border-top:0}
.wk-rij .av{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:800;background:rgba(255,255,255,.04);color:var(--text-2);border:1px solid var(--line)}
.wk-rij .b{flex:1;min-width:0}
.wk-rij .t{display:block;font-size:var(--fs-sm);font-weight:600}
.wk-rij .m{display:block;font-size:var(--fs-2xs);color:var(--text-3);margin-top:1px}
.wk-af{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.wk-spark{display:flex;align-items:center;min-width:180px}
.wk-afgeen{font-size:var(--fs-2xs);color:var(--text-3)}
.wk-afb{font-size:var(--fs-2xs);color:var(--text-3)}
.wk-afb b{display:block;color:var(--text-2);font-size:var(--fs-xs);font-weight:600;margin-bottom:2px}
.wk-af .rechts{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wk-afdicht{font-size:var(--fs-xs);color:var(--green);display:inline-flex;align-items:center;gap:6px}
@media(max-width:980px){.wk-grid{grid-template-columns:1fr}}
@media(max-width:720px){.wk-nu2{grid-template-columns:1fr}}
/* ---- Inkoopcontrole (#/inkoopcontrole) ---- */
.ic-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-lg);background:color-mix(in srgb,var(--blue) 5%,var(--surface));color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}
.ic-note>svg{flex:0 0 auto;color:var(--blue);margin-top:2px}
.ic-note b{color:var(--text-1);font-weight:700}
.ic-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 12px}
.ic-zoekwrap{position:relative;display:inline-flex;align-items:center;color:var(--text-3)}
.ic-zoekwrap svg{position:absolute;left:10px;pointer-events:none}
.ic-zoekwrap input{padding-left:32px;min-width:260px}
.ic-los{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;user-select:none}
.ic-los input{width:auto;margin:0}
.ic-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--warn) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);color:var(--text-1);font-size:var(--fs-sm);line-height:1.5}
.ic-alert>svg{flex:0 0 auto;color:var(--warn);margin-top:2px}
.ic-row--los{background:color-mix(in srgb,var(--warn) 7%,transparent)}
.ic-row--los:hover{background:color-mix(in srgb,var(--warn) 13%,transparent)}
.ic-dat,.ic-fnr{font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.ic-proj{color:var(--text-2);max-width:340px}
.ic-projnr{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:var(--fs-2xs);font-weight:600}
.ic-projnr-cel{font-variant-numeric:tabular-nums}
.ic-sep{color:var(--line-2);margin:0 6px}
.ic-dash{color:var(--text-3);opacity:.6}
.ic-type{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.ic-type--inkoop{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.ic-type--kost{background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple)}
.ic-los-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.ic-projlink{color:var(--text-1);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.ic-projlink:hover{color:var(--accent);border-bottom-style:solid}
.ic-sim{display:inline-flex;padding:3px 6px;color:var(--blue);border-radius:var(--r-xs);transition:background .12s;background:none;border:0;cursor:pointer}
.ic-sim:hover{background:color-mix(in srgb,var(--blue) 16%,transparent)}
/* Projectdeel achter een gedeelde factuur: het bedrag dat bij DIT project meetelt (≠ factuurtotaal) */
.ic-deel{margin-left:6px;font-variant-numeric:tabular-nums;font-size:var(--fs-2xs);font-weight:700;padding:1px 7px;border-radius:999px;
  background:rgba(154,79,208,.13);border:1px solid rgba(154,79,208,.5);color:var(--purple)}
/* Verdeling-venster: bedrag per project + de loopsom die op de factuur moet sluiten */
.ic-verdeel{max-width:var(--w-form)}
.ic-verdeel-rijen{display:flex;flex-direction:column;gap:var(--s-2)}
/* Het factuurtotaal staat boven de verdeling en is visueel de kop, niet zomaar nog een regel */
.ic-verdeel-kop{margin-bottom:var(--s-3);border-color:var(--line-2);background:color-mix(in srgb,var(--blue) 7%,var(--surface-2))}
.ic-verdeel-rij{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.ic-verdeel-proj{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--text-1)}
.ic-verdeel-rij input{width:110px;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
  padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text-1)}
.ic-verdeel-rij input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.ic-verdeel-som{margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums}
.ic-verdeel-som.is-goed{background:rgba(52,211,154,.12);border:1px solid rgba(52,211,154,.5);color:var(--green)}
.ic-verdeel-som.is-mis{background:rgba(232,163,61,.12);border:1px solid rgba(232,163,61,.55);color:var(--amber)}
/* Detailvenster inkoopfactuur: de gegevens die de cockpit wél heeft, plus de herkomst. De factuur
   zelf zit niet in de cockpit (project_inkoop bewaart geen PDF) — vandaar de verwijzing naar de bron. */
.ic-rij{cursor:pointer;transition:background .12s}
.ic-rij:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ic-rij:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ic-bron{display:inline-block;padding:2px 8px;border-radius:999px;font-size:var(--fs-2xs);font-weight:600;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-2)}
.ic-bron--exact{background:color-mix(in srgb,var(--blue) 14%,transparent);border-color:color-mix(in srgb,var(--blue) 45%,transparent);color:var(--blue)}
.ic-bron--simimport{background:color-mix(in srgb,var(--purple,#8b5cf6) 14%,transparent);border-color:color-mix(in srgb,var(--purple,#8b5cf6) 45%,transparent);color:var(--purple,#8b5cf6)}
.ic-det{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:4px}
.ic-det-v{background:var(--surface-2);border-radius:var(--r-sm,8px);padding:8px 10px;min-width:0}
.ic-det-v span{display:block;font-size:var(--fs-2xs);color:var(--text-3);margin-bottom:3px}
.ic-det-v b{font-size:var(--fs-sm);color:var(--text-1);font-variant-numeric:tabular-nums}
.ic-det-oms{margin:8px 0 0;font-size:var(--fs-2xs);color:var(--text-2);line-height:1.5}
/* Globale planning: dagraster onder de weekkop + zoomregelaar. De balken lijnen op dagen uit; de
   letters maken zichtbaar wáár in de week een klus valt. Verdwijnen boven 8 weken in beeld. */
.gp-dagen{display:grid;grid-template-columns:repeat(7,1fr);margin-top:3px;font-size:9px;line-height:1.2;color:var(--text-3);letter-spacing:.02em}
.gp-dagen i{font-style:normal;text-align:center}
.gp-dagen i.we{opacity:.45}
.gp-zoom{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s-2)}
.gp-zoom .tb-arrow{font-size:var(--fs-sm);font-weight:700;line-height:1}
.gp-zoom .tb-arrow[disabled]{opacity:.35;cursor:default}
.gp-zoomlbl{font-size:var(--fs-2xs);color:var(--text-2);min-width:58px;text-align:center;font-variant-numeric:tabular-nums}
.ic-det-bron{margin:12px 0 0;font-size:var(--fs-2xs);line-height:1.5}
.ic-det-bron a{display:inline-flex;align-items:center;gap:5px;color:var(--accent);text-decoration:none;font-weight:600}
.ic-det-bron a:hover{text-decoration:underline}
/* Exact↔cockpit-vergelijking in de projectinkoop-kaart: sluiten de bedragen op elkaar aan? */
.ie-vgl{margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);line-height:1.6;font-variant-numeric:tabular-nums}
.ie-vgl.is-goed{background:rgba(52,211,154,.10);border:1px solid rgba(52,211,154,.45);color:var(--text-2)}
.ie-vgl.is-mis{background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.5);color:var(--text-2)}
.ie-vgl b{color:var(--text-1)}
.btn.is-busy>svg{animation:ic-spin 1s linear infinite}
@keyframes ic-spin{to{transform:rotate(360deg)}}
/* Inkoopfacturen-kaart op de projectpagina: Simplicate-deeplink in de kaartkop */
.ph2-eyb-r{display:inline-flex;align-items:center;gap:10px}
.ph2-simlink{display:inline-flex;align-items:center;gap:4px;color:var(--blue);text-decoration:none;font-size:var(--fs-2xs);font-weight:700;letter-spacing:0;text-transform:none;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--blue) 12%,transparent)}
.ph2-simlink:hover{background:color-mix(in srgb,var(--blue) 22%,transparent)}
/* De Simplicate-PDF-link staat naast de Inkoopcontrole-link en moet daar niet mee concurreren:
   de eigen registratie is de plek om te wérken, Simplicate alleen nog om het document te zien. */
.ph2-simlink--dim{background:none;border:1px solid var(--line);color:var(--text-3)}
.ph2-simlink--dim:hover{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)}
/* 'deel' achter een gedeelde inkoopfactuur op de projectpagina */
.ph2-deel{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:0 6px;border-radius:999px;
  background:rgba(154,79,208,.13);border:1px solid rgba(154,79,208,.5);color:var(--purple)}
/* ===================== Rapportages (galerij) ===================== */
.rap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:18px}
.rap-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--e-1);text-decoration:none;color:inherit;transition:transform .14s ease,box-shadow .14s ease,border-color .14s}
.rap-card:hover{transform:translateY(-2px);box-shadow:var(--e-2,0 8px 24px rgba(0,0,0,.28));border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.rap-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rap-card--off{opacity:.55;cursor:default;box-shadow:none}
.rap-card--off:hover{transform:none;box-shadow:none;border-color:var(--line)}
.rap-ic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.rap-card--off .rap-ic{background:var(--surface-2);color:var(--text-3)}
.rap-body{flex:1;min-width:0}
.rap-titel{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-md);color:var(--text-1)}
.rap-tag{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--purple) 18%,transparent);color:var(--purple)}
.rap-tag--soon{background:var(--surface-2);color:var(--text-3)}
.rap-tag--lock{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.rap-oms{margin-top:3px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.45}
.rap-arrow{flex:0 0 auto;color:var(--text-3);transition:transform .14s,color .14s}
.rap-card:hover .rap-arrow{color:var(--accent);transform:translateX(3px)}
/* ===================== Rapportage · Onderhanden werk ===================== */
.ohw-crumb{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
.ohw-crumb:hover{border-bottom-color:currentColor}
.ohw-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-lg);background:color-mix(in srgb,var(--accent) 5%,var(--surface));color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
.ohw-note>svg{flex:0 0 auto;color:var(--accent);margin-top:2px}
.ohw-note b{color:var(--text-1);font-weight:700}
.ohw-tabelwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--e-1)}
.ohw-tabel{width:100%;min-width:1360px;border-collapse:collapse;font-size:var(--fs-sm)}
.ohw-tabel th{text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface-2);position:sticky;top:0;z-index:1}
/* Sorteerbare kolomkoppen: ▾ = klikbaar, ▲/▼ = actieve sortering. */
.ohw-tabel th[data-sort]{cursor:pointer;user-select:none;transition:color .12s}
.ohw-tabel th[data-sort]:hover{color:var(--text-1)}
.ohw-tabel th[data-sort] .srt{margin-left:5px;font-size:9px;opacity:.35;display:inline-block;vertical-align:1px}
.ohw-tabel th[data-sort]:hover .srt{opacity:.7}
.ohw-tabel th.srt-on{color:var(--accent)}
.ohw-tabel th.srt-on .srt{opacity:1;color:var(--accent)}
.ohw-tabel td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ohw-tabel tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ohw-eur{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ohw-proj{min-width:210px;max-width:300px}
.ohw-projnr{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:var(--fs-2xs);font-weight:600}
.ohw-projlink{color:var(--text-1);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.ohw-projlink:hover{color:var(--accent);border-bottom-style:solid}
.ohw-klant{color:var(--text-3);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ohw-vg{width:120px}
.ohw-bar{display:flex;align-items:center;gap:7px}
.ohw-bar__t{flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ohw-bar__fill{display:block;height:100%;border-radius:999px;background:var(--accent)}
.ohw-bar__fill.over{background:var(--warn)}
.ohw-bar__lbl{font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.ohw-ber{border-left:1px solid var(--line)}
.ohw-pos{color:var(--green);font-weight:700}
.ohw-neg{color:var(--warn);font-weight:700}
.ohw-nul{color:var(--text-3)}
.ohw-dash{color:var(--text-3);opacity:.6}
/* De bewerkbare Eigen-OHW-kolom visueel accentueren (dit is de kernactie). */
.ohw-tabel th.ohw-eigen,.ohw-tabel td.ohw-eigen{background:color-mix(in srgb,var(--accent) 7%,transparent);border-left:1px solid color-mix(in srgb,var(--accent) 35%,transparent);text-align:right}
.ohw-tabel tbody tr:hover td.ohw-eigen{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.ohw-inwrap{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm,8px);padding:2px 6px;transition:border-color .12s}
.ohw-inwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.ohw-euro{color:var(--text-3);font-size:var(--fs-xs)}
.ohw-in{width:88px;border:0;background:transparent;color:var(--text-1);font-weight:700;font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums;padding:2px 0}
.ohw-in:focus{outline:none}
.ohw-in::placeholder{color:var(--text-3);font-weight:400;opacity:.7}
.ohw-in--err{color:var(--urgent)}
.ohw-saved{display:inline-flex;color:var(--green);opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.ohw-saved.on{opacity:1;transform:scale(1)}
.ohw-row--eigen td.ohw-eigen{box-shadow:inset 3px 0 0 var(--accent)}
.ohw-opm{min-width:150px}
.ohw-opmin{width:100%;min-width:130px;border:1px solid transparent;background:transparent;color:var(--text-2);font-size:var(--fs-xs);padding:4px 6px;border-radius:var(--r-sm,8px)}
.ohw-opmin:hover{background:var(--surface-2)}
.ohw-opmin:focus{outline:none;background:var(--surface);border-color:var(--accent)}
.ohw-tabel tfoot td{border-bottom:0;border-top:2px solid var(--line-2);padding:12px;background:var(--surface-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ohw-foot-lbl{text-align:right;color:var(--text-3);font-size:var(--fs-xs);font-weight:600}
.ohw-tabel tfoot .ohw-eur b,.ohw-tabel tfoot .ohw-eigen b{font-size:var(--fs-md);color:var(--text-1)}
.gp-toast--ok{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
/* Vorige-periode-kolom + trendsignaal */
.ohw-vor{text-align:right;white-space:nowrap}
.ohw-vorval{display:block;color:var(--text-2);font-variant-numeric:tabular-nums}
.ohw-vh{color:var(--accent);margin-left:3px;font-weight:700}
.ohw-trendwrap{display:block;min-height:14px}
.ohw-trend{display:inline-flex;align-items:center;gap:1px;margin-top:1px;font-size:var(--fs-2xs);font-weight:700;font-variant-numeric:tabular-nums}
.ohw-trend--up{color:var(--green)}
.ohw-trend--down{color:var(--warn)}
.ohw-trend--flat{color:var(--text-3)}
/* Inkoop-kolom, nog-te-ontvangen-invoer, netto-OHW-resultaat + let-op-markering */
.ohw-ink{color:var(--text-2)}
.ohw-inh{color:var(--purple)}   /* inhuur/ZZP-kosten — cockpit-eigen, purperen accent (als de projectpagina) */
.ohw-inh-warn{color:var(--amber)}
.ohw-tabel th.ohw-nto,.ohw-tabel td.ohw-nto{text-align:right}
.ohw-ntoin{width:78px;border:0;background:transparent;color:var(--text-1);font-weight:600;font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums;padding:2px 0}
.ohw-ntoin:focus{outline:none}
.ohw-ntoin::placeholder{color:var(--text-3);font-weight:400;opacity:.6}
.ohw-tabel th.ohw-netto,.ohw-tabel td.ohw-netto{text-align:right;background:color-mix(in srgb,var(--blue) 8%,transparent);border-left:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}
.ohw-tabel tbody tr:hover td.ohw-netto{background:color-mix(in srgb,var(--blue) 13%,transparent)}
.ohw-tabel td.ohw-netto b{font-weight:800}
/* Verliesleidend: het berekende OHW overstijgt de projectwaarde → rode arcering op de OHW-cel. */
.ohw-tabel td.ohw-ber--verlies{background:color-mix(in srgb,var(--urgent) 14%,transparent);box-shadow:inset 3px 0 0 var(--urgent)}
.ohw-tabel td.ohw-ber--verlies .ohw-pos,.ohw-tabel td.ohw-ber--verlies .ohw-neg,.ohw-tabel td.ohw-ber--verlies .ohw-nul{color:var(--urgent)}
.ohw-tabel tbody tr:hover td.ohw-ber--verlies{background:color-mix(in srgb,var(--urgent) 20%,transparent)}
.ohw-verlies-ex{background:color-mix(in srgb,var(--urgent) 14%,transparent);color:var(--urgent);padding:1px 6px;border-radius:5px;font-weight:700;white-space:nowrap}
/* Verliesleidend NIET alleen op kleur duiden (WCAG color-not-only): ook een waarschuwingsicoon. */
.ohw-verlies-ic{display:inline-flex;color:var(--urgent);margin-right:5px;vertical-align:-2px}
/* Afgerond (volledig gefactureerd + werk geboekt) → geleverd = de volle projectwaarde, dus OHW 0.
   Vinkje bij de cel zodat die 0 niet als 'geen data' leest maar als 'klaar, niets meer onderhanden'. */
.ohw-af-ic{display:inline-flex;color:var(--green);margin-left:5px;vertical-align:-1px;opacity:.75;cursor:help}
/* Boven opdracht (07-09-2026): op een afgerond project is méér gefactureerd dan de projectwaarde —
   meerwerk, geleverd en betaald. Geen OHW en geen schuld, wél een signaal dat de calculatie
   achterloopt: amber tint-recept, naast de € 0 in de berekend-cel en als voorbeeld in de uitleg. */
.ohw-boven,.ohw-boven-ex{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;
  color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);cursor:help}
.ohw-boven-ex{margin-left:0;cursor:default}
/* Afgetopt (07-09-2026): de bestede waarde overstijgt de projectwaarde en het OHW is op de projectwaarde
   afgetopt — de overschrijding is verlies, geen activum. Het woord staat bij het bedrag omdat € 9.960
   naast een bestede waarde van € 17.887 anders als rekenfout leest. Zelfde vorm als .ohw-boven, in de
   verlieskleur van de cel. */
.ohw-afgetopt{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;
  color:var(--urgent);background:color-mix(in srgb,var(--urgent) 10%,transparent);border:1px solid color-mix(in srgb,var(--urgent) 45%,transparent);cursor:help}
/* Raamcontract buiten het OHW: neutrale notitie zolang er alleen acquisitie op staat, amber 'nakijken'
   zodra er werk-uren op staan — die horen op een afroepproject. */
.ohw-note--let{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,var(--surface))}
.ohw-note--let>svg{color:var(--amber)}
/* Periode vastgesteld (bevroren) of heropend — de stand van de hele periode in de hero-subregel. */
.ohw-vast,.ohw-heropend{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:5px;font-weight:700;white-space:nowrap}
.ohw-vast{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 45%,transparent)}
.ohw-heropend{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent)}
/* Nacalculatie: de projectwaarde is een raming, dus geen afgerond-regel en geen verliesmarkering.
   Neutrale chip achter de projectnaam — kleur zou hier iets suggereren dat er niet is. */
.ohw-nacalc{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-3);border:1px solid color-mix(in srgb,var(--text-3) 45%,transparent);vertical-align:1px;cursor:help}
/* Projectkolom vastzetten: bij horizontaal scrollen blijft zichtbaar bij wélk project een bedrag hoort. */
.ohw-tabel th:first-child,.ohw-tabel td.ohw-proj{position:sticky;left:0;z-index:2;background:var(--surface)}
.ohw-tabel th:first-child{z-index:3;background:var(--surface-2)}
.ohw-tabel tfoot td:first-child{position:sticky;left:0;z-index:2;background:var(--surface-2)}
.ohw-tabel th:first-child::after,.ohw-tabel td.ohw-proj::after,.ohw-tabel tfoot td:first-child::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line-2)}
.ohw-tabel tbody tr:hover td.ohw-proj{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
/* Inklapbare uitleg: dicht by default, tabel krijgt de ruimte. */
.ohw-note--vouw{padding:0}
.ohw-note--vouw>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:11px 14px}
.ohw-note--vouw>summary::-webkit-details-marker{display:none}
.ohw-note--vouw>summary:hover{color:var(--text-1)}
.ohw-note--vouw>div{padding:0 14px 12px 39px}
/* De uitleg is de VERANTWOORDING van een balanspost → gestructureerd, niet één blok tekst. */
.ohw-uitleg{max-width:78ch}
.ohw-uitleg p{margin:0 0 7px}
.ohw-uitleg .ohw-u-lead{padding-bottom:9px;border-bottom:1px solid var(--line)}
.ohw-uitleg .ohw-u-kop{display:block;margin:13px 0 4px;color:var(--accent);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em}
.ohw-uitleg ul{margin:0 0 7px;padding-left:17px}
.ohw-uitleg li{margin:3px 0}
.ohw-uitleg svg{vertical-align:-2px}
.ohw-uitleg .ohw-u-slot{margin-top:12px;padding-top:9px;border-top:1px solid var(--line);color:var(--text-3)}
.ohw-note-chev{margin-left:auto;display:inline-flex;color:var(--text-3);transition:transform .18s}
.ohw-note--vouw[open] .ohw-note-chev{transform:rotate(180deg)}
.ohw-note--vouw>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm,8px)}
/* Urenbesteding-rapport (declarabiliteit) — deelt .ohw-tabel; smaller + eigen declarabiliteitsbalk. */
.ohw-tabel.ub-tabel{min-width:720px}
.ub-tabel td.ub-mw{font-weight:600;color:var(--text-1)}
.ub-tabel td.ub-decl{font-weight:700}
.ohw-tabel th.ub-graad,.ohw-tabel td.ub-graad{width:160px;text-align:left}
.ub-bar{display:flex;align-items:center;gap:8px}
.ub-bar__t{flex:1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ub-bar__fill{display:block;height:100%;border-radius:999px}
.ub-bar__lbl{font-size:var(--fs-2xs);font-weight:700;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.ub-intern{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-xl,14px);padding:12px 16px;background:var(--surface);box-shadow:var(--e-1)}
.ub-intern-h{display:flex;align-items:center;gap:7px;font-size:var(--fs-2xs);font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ub-intern-h svg{color:var(--purple)}
.ub-intern-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}
.ub-intern-row:first-child{border-top:0}
.ub-intern-row b{font-variant-numeric:tabular-nums;color:var(--text-1)}
/* Boekjaar-perioden-editor (Instellingen) */
.bp-grid{display:grid;grid-template-columns:90px 1fr 1fr;gap:6px 10px;align-items:center;max-width:540px}
.bp-h{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:700}
.bp-p{font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.bp-grid input[type=date]{width:100%;padding:7px 9px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:var(--r-sm);font:inherit}
.ur-dc-ic{display:inline-flex;flex:0 0 auto;align-items:center}
.ur-dc-h b{display:inline-flex;align-items:center;gap:7px}
.ur-dc-h b .ic{color:var(--text-3)}
.ur-dc-foot{display:flex;align-items:center;gap:8px;padding:9px 0 2px;margin-top:2px;border-top:1px solid var(--line-2);font-size:var(--fs-sm);color:var(--text-2)}
.ur-dc-foot b{color:var(--text);font-variant-numeric:tabular-nums}
/* Urenweek — actiebalk (weekstatus + primaire actie 'Week doorgeven') */
/* Urenweek — werkraster: kalender (hoofd) + rechterrail (Deze week + declaraties) */
.ur-work{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.ur-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.ur-rail .ur-dc{margin-top:0}
@media(max-width:1080px){.ur-work{grid-template-columns:1fr}.ur-rail{flex-direction:row;flex-wrap:wrap}.ur-rail>*{flex:1 1 300px}}
.ur-week-card{padding:14px 16px}
.ur-wc-h{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--text);letter-spacing:.02em;margin-bottom:10px}
.ur-wc-wk{margin-left:auto;font-size:var(--fs-2xs);color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.ur-wc-row{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sm)}
.ur-wc-m{color:var(--text-2)}
.ur-wc-row b{font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.ur-wc-d{color:var(--text-3);font-variant-numeric:tabular-nums}
/* '+2' achter de gewerkte uren = verlof/verzuim/feestdag dat het rooster mede vult. Zelfde taal
   als de weekcontrole-matrix (38 +2 / 40), zodat de twee schermen hetzelfde getal hetzelfde tonen. */
.ur-wc-afw{color:var(--green);font-weight:600;font-variant-numeric:tabular-nums}
/* Afwezigheid in de weekkalender (lane-model, herbouw 21-07): een VOLWAARDIG kalender-item dat
   door dezelfde baanverdeling gaat als de werkblokken — zij-aan-zij bij overlap, nooit meer óver
   elkaar. De blok-basis (.ur-blk) levert positie/afmeting; deze variant geeft de streep-look en
   maakt het HELE blok de handgreep (venster). bindKalender laat .ur-blk--afw met rust, dus lege
   tijdsloten blijven boekbaar. Diagonale strepen + gedempte tint, zoals de planningsview. */
.ur-blk--afw{border:1px solid rgba(232,163,61,.32);border-left:3px solid var(--amber);
  background:repeating-linear-gradient(45deg,rgba(232,163,61,.14) 0 6px,rgba(232,163,61,.03) 6px 12px);
  cursor:default}
.ur-blk--afw[data-afw]{cursor:pointer}
.ur-blk--afw[data-afw]:hover{filter:brightness(1.16)}
.ur-blk--afw[data-afw]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ur-blk--afw .ur-blk-org{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;font-style:italic;
  text-transform:uppercase;color:var(--amber)}
/* Blokkade-badges in de weekcontrole-keten: één per bron, elk klikbaar naar de plek waar je het
   wegwerkt. Wrapt op smal, want bij vier bronnen wordt de rij anders te lang. */
.wk-blok{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.wk-blok a{text-decoration:none}
.wk-blok a:hover .ec-badge{filter:brightness(1.18)}
.wk-blok a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-pill)}
/* Verzuim en de geneutraliseerde collega-weergave dragen dezelfde amber arcering als verlof —
   één kleurtaal voor alle afwezigheid, gelijk aan de planning (gebruikerswens 21-07); het LABEL
   maakt het onderscheid (VERLOF/ZIEK/AFWEZIG). is-vz behoeft dus geen eigen kleur meer. */
/* Nog niet doorgeschreven naar Simplicate → gestippelde rand als zacht signaal.
   ⚠Bewust GEEN opacity: dat maakte een stapelcontext die het klik-label ving (oude band-les). */
.ur-blk--afw.is-todo{border-style:dotted}
.ur-wc-prog{height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin:8px 0 5px}
.ur-wc-prog i{display:block;height:100%;border-radius:99px}
.ur-wc-s{font-size:var(--fs-2xs);color:var(--text-3)}
.ur-wc-over{color:var(--green);font-weight:600;margin-top:3px}
/* Goedkeuren/bevriezen van een inhuurweek (alleen beheer): status + knop onder de weekkaart */
.ur-wc-akk{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:var(--s-3);padding-top:10px;border-top:1px solid var(--line)}
.ur-wc-akkst{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:600;color:var(--text-3)}
.ur-wc-akkst.on{color:var(--green)}
.ur-wc-akkst svg{flex:0 0 auto}
.ur-wc-pill{margin:11px 0 10px}
.ur-dg-btn{white-space:nowrap;width:100%}
/* Feedback op de urenweek (railkaart): het verloop van wat Beheer over deze week heeft gezegd.
   Zelfde scheidingslijn-idioom als .ur-wc-akk hierboven, zodat de kaart één kolom blijft. */
.ur-fb{margin-top:var(--s-3);padding-top:10px;border-top:1px solid var(--line)}
.ur-fb-h{font-size:var(--fs-2xs);font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.ur-fb-n{display:inline-block;min-width:16px;padding:0 4px;border-radius:99px;background:var(--panel-2);color:var(--text-3);text-align:center;font-weight:700}
.ur-fb-item{padding:7px 0;border-bottom:1px solid var(--line-2)}
.ur-fb-item:last-of-type{border-bottom:0}
.ur-fb-meta{display:flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--text-3)}
.ur-fb-tekst{font-size:var(--fs-xs);color:var(--text-2);white-space:pre-wrap;margin-top:2px}
.ur-fb-mail{margin-left:auto;color:var(--green);font-weight:600}
.ur-fb-mail.fout{color:var(--urgent)}
/* Het kruisje mag de meta-regel niet oprekken; het staat achter de mailstatus, niet ervoor. */
.ur-fb-x{flex:0 0 auto;border:0;background:none;color:var(--text-3);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.ur-fb-x:hover{color:var(--urgent)}
.ur-fb-mail+.ur-fb-x{margin-left:0}
.ur-fb-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.ur-fb-btns .btn{flex:1 1 auto;white-space:nowrap}
/* Venster: toelichting + mailvinkje. De basisregel input,select,textarea styleert het veld al. */
.ur-m-ta{min-height:84px;resize:vertical;font-family:inherit}
.ur-m-check{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--text-2);margin:9px 0 4px}
.ur-m-check input{width:auto;margin:0}
.ur-badge .ic{vertical-align:-2px;margin-right:3px}
/* Skeleton-rooster tijdens laden */
.ur-skel{display:grid;grid-template-columns:repeat(var(--days,5),1fr);gap:12px;padding:20px 8px}
/* Medewerkers-module: lijst + HRM-dossier */
.md-tblwrap{margin-top:14px}
.md-tbl tbody tr{cursor:pointer}
.md-tbl tbody tr:hover td{background:var(--panel-2)}
.md-nm{display:flex;align-items:center;gap:10px;min-width:0}
.md-av{width:28px;height:28px;font-size:var(--fs-nano)}
.md-nm>span:last-child{display:flex;flex-direction:column;min-width:0}
.md-sub{font-size:var(--fs-2xs);color:var(--text-3)}
.md-sig{display:inline-block;font-size:var(--fs-nano);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);background:rgba(232,163,61,.14);color:#f0c27e;border:1px solid rgba(232,163,61,.45);white-space:nowrap}
.md-sig--hero{font-size:var(--fs-2xs);padding:3px 10px}
/* Verlopen (i.p.v. bijna verlopen) — rood, want dit is geen waarschuwing meer maar een feit. */
.md-sig--rood{background:rgba(220,80,80,.14);color:#f2a3a3;border-color:rgba(220,80,80,.45)}
.md-nm .md-sig{align-self:flex-start;margin:2px 0 1px}
.md-rol{font-size:var(--fs-2xs);color:var(--text-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.md-inbox{margin-top:14px;background:var(--surface);border:1px solid rgba(91,156,246,.35);border-radius:var(--r-lg);padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--fs-sm)}
.md-inbox-item{color:var(--blue);text-decoration:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-2xs)}
.md-inbox-item:hover{border-color:var(--blue)}
.md-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin-top:14px;align-items:start}
.md-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.md-col .md-card{margin-top:0}
@media(max-width:900px){.md-grid{grid-template-columns:1fr}}
.md-card .facts select,.md-card .facts input{width:auto}

/* ---- Getabd dossier (herontwerp voorstel A) ---- */
.md-tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:5px;margin:14px 0;overflow-x:auto}
.md-tab{appearance:none;border:0;background:none;color:var(--text-2);font-family:inherit;font-size:var(--fs-sm);font-weight:600;padding:9px 15px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;display:inline-flex;align-items:center;gap:7px}
.md-tab:hover{color:var(--text)}
.md-tab.on{background:var(--surface-2);color:var(--text)}
.md-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.md-tab-b{background:var(--amber);color:#0b0a17;font-size:var(--fs-2xs);font-weight:700;border-radius:var(--r-pill);padding:1px 7px;line-height:1.5}
.md-pane{display:none}
.md-pane.on{display:block}
.md-panegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.md-panegrid .md-card{margin-top:0}
.md-panegrid>.md-card{height:100%}   /* kaarten in dezelfde rij even hoog (align-items:stretch alléén rekt de flex-kaart niet mee) */
.md-panegrid--rc{grid-template-columns:1fr}   /* Rooster & contract: de gecombineerde kaart is breed → onder elkaar i.p.v. naast een korte kaart */
/* 0-urencontract: benoemde toestand i.p.v. een dag-grid vol streepjes (dat las als ontbrekende data). */
.md-ct-nulroo{border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-size:var(--fs-xs)}
.md-ctblok--nul{border-left-color:var(--text-3)}
/* Persoonsgegevens-editor: twee velden naast elkaar, op smal onder elkaar. */
.md-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.md-pgrid label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);min-width:0}
.md-pgrid input,.md-pgrid select{display:block;width:100%;margin-top:4px}
@media (max-width:760px){.md-pgrid{grid-template-columns:1fr}}
@media(max-width:900px){.md-panegrid{grid-template-columns:1fr}}

/* Aandacht-strip (Overzicht) */
.md-attnlist{display:flex;flex-direction:column;gap:9px}
.md-attn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 13px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;font-family:inherit;color:inherit;transition:border-color .15s}
.md-attn:hover{border-color:var(--line-2)}
.md-attn .bar{width:4px;align-self:stretch;border-radius:2px;flex:none;min-height:30px}
.md-attn .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.md-attn .tx b{font-size:var(--fs-sm)}
.md-attn .tx span{font-size:var(--fs-xs);color:var(--text-2)}
.md-attn .go{margin-left:auto;color:var(--text-3);font-size:18px}
.md-attn--red{border-color:rgba(255,93,115,.35);background:linear-gradient(90deg,var(--urgent-dim),transparent 55%)}
.md-attn--red .bar{background:var(--urgent)}
.md-attn--amber{border-color:rgba(232,163,61,.35);background:linear-gradient(90deg,rgba(232,163,61,.10),transparent 55%)}
.md-attn--amber .bar{background:var(--amber)}
.md-attn--blue{border-color:rgba(43,179,240,.3);background:linear-gradient(90deg,var(--blue-dim),transparent 55%)}
.md-attn--blue .bar{background:var(--blue)}
.md-certmini{font-size:var(--fs-sm);color:var(--text-2)}
.md-certmini b{color:var(--text)}
.md-link{color:var(--blue);font-weight:600;text-decoration:none}
.md-link:hover{text-decoration:underline}

/* Certificaten-tabel */
.md-certwrap{overflow-x:auto}
.md-certtbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.md-certtbl th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:0 8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.md-certtbl th.r,.md-certtbl td.r{text-align:right;white-space:nowrap}
.md-certtbl td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.md-certtbl tr:last-child td{border-bottom:0}
.md-certtbl .dim{color:var(--text-3)}
.md-cert-open{display:flex;flex-direction:column;gap:1px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.md-cert-open:hover .md-cert-t{color:var(--blue);text-decoration:underline}
.md-cert-t{font-weight:600;overflow-wrap:anywhere}
.md-cert-sub{font-size:var(--fs-xs);color:var(--text-3)}
.md-cert-edit{margin-left:6px}
.md-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.md-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.md-pill--ok{color:var(--green);background:var(--green-dim)}
.md-pill--warn{color:#f0c27e;background:rgba(232,163,61,.13)}
.md-pill--bad{color:var(--urgent);background:var(--urgent-dim)}
.md-pill--none{color:var(--text-3);background:rgba(255,255,255,.05)}

/* Certificaat/document toevoegen + datum-venster */
.md-certadd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.md-certadd input[type=text]{flex:1;min-width:120px;font-family:inherit;font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;background:rgba(255,255,255,.03);color:var(--text)}
.md-certadd .md-narrow{flex:0 1 130px}
/* Soort-keuzelijst in de upload-regels: de globale `select{width:100%}` zou 'm de rij uit duwen.
   Het vrije veld ('Anders…') staat er direct achter en verschijnt alleen als je dat kiest. */
.md-certadd select,.md-docup select{flex:0 1 190px;width:auto;font-family:var(--font-body);font-size:var(--fs-sm);padding:7px 9px}
.md-soortvrij{flex:0 1 160px}
.md-soortvrij[hidden]{display:none}
.md-vlabel select{display:block;width:100%;margin-top:4px;font-family:var(--font-body);font-size:var(--fs-sm);padding:7px 9px}
.md-vlabel .md-soortvrij{display:block;width:100%;margin-top:6px}
.md-datef{display:inline-flex;flex-direction:column;gap:3px;font-size:var(--fs-2xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.md-datef input,.md-vlabel input{font-family:inherit;font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px;background:rgba(255,255,255,.03);color:var(--text);color-scheme:dark}
.md-vlabel{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:10px}
.md-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.md-vbar{padding:8px 0;border-top:1px solid var(--line)}
.md-vbar:first-child{border-top:0}
.md-vbar-h{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:5px}
.md-vbar-h b{color:var(--text)}
.md-vbar-t{height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-bottom:4px}
.md-vbar-t i{display:block;height:100%;border-radius:99px}
.md-skel{padding:2px 0}
.md-skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.mw-ww{display:flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--text-3);white-space:nowrap}
.mw-row .mw-ww input{flex:0 0 52px;width:52px;padding:5px 6px;font-variant-numeric:tabular-nums}
.md-ww-auto{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:var(--fs-sm);color:var(--text-2)}
.md-ww-auto input{width:auto}
.bk-assign-t{font-size:var(--fs-nano);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-right:4px}
/* Medewerkers-module (indeling Team/Flex/ZZP) */
.mw-sum{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:2px 0 8px;font-size:var(--fs-sm);color:var(--text-2)}
.mw-sum b{color:var(--text)}
.mw-row{display:flex;align-items:center;gap:12px;padding:8px 2px;border-top:1px solid var(--line)}
.mw-row .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-src{font-size:var(--fs-2xs);line-height:13px;color:var(--text-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap}
.mw-row select{flex:0 0 230px;width:auto;min-width:0}   /* globale select-styling zet width:100% → zou de naam naar 0px drukken */
/* Relaties die écht een Exact-debiteur nodig hebben, lichten op tussen de rest van de lijst.
   'heeft werk' = hard bewijs (gegund/afgesloten project of factuur); 'als klant aangemerkt' = alleen
   het relatietype, en dat wordt in de praktijk niet bijgehouden — vandaar de rustigere tint. */
.mw-row--nodig{background:rgba(43,179,240,.07);border-left:2px solid var(--blue);padding-left:8px}
.mw-row .mw-tag{display:inline-block;margin-left:8px;font-size:var(--fs-2xs);font-weight:700;padding:1px 7px;border-radius:999px;
  background:rgba(43,179,240,.13);border:1px solid rgba(43,179,240,.45);color:var(--blue);vertical-align:middle}
.mw-row .mw-tag--werk{background:rgba(232,163,61,.14);border-color:rgba(232,163,61,.5);color:var(--amber)}
/* Rooster-editor (cockpit-override; Medewerkers-module) */
.bk-vrl{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:12px 14px}
.bk-vrl-h{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.bk-vrl-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.bk-vrl-row .who{font-weight:600}
.bk-vrl-row .per{color:var(--text-2);white-space:nowrap}
.bk-vrl-row .opm{color:var(--text-3);font-size:var(--fs-xs);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-vrl-row .rm{background:none;border:0;padding:0;color:var(--text-3);cursor:pointer;display:inline-flex}
.bk-vrl-row .rm:hover{color:var(--urgent)}
.bk-fld{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);margin-bottom:10px}
.bk-fld input,.bk-fld select{display:block;width:100%;margin-top:4px}
.bk-fldrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.z-empty{grid-column:1 / -1;padding:18px 16px;font-size:var(--fs-base);color:var(--text-3);font-style:italic}

/* -- editor-overlay (weekplanning blok + globale planning balk) -- */
.wp-back{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-overlay)}
/* .wp-editor.card (dubbele klasse = hogere specificiteit): components.css zet .card op
   position:relative en laadt ná dit bestand — zonder de .card-toevoeging verloor position:fixed
   de cascade en belandde de editor onderaan het raster (focus() scrolde de view er dan heen). */
.wp-editor.card{position:fixed;z-index:var(--z-modal);top:50%;left:50%;transform:translate(-50%,-50%);width:min(490px,92vw);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--e-3)}
.wp-editor>.body{padding:18px 20px}
.wp-editor h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);margin:0}
.wp-editor .note{color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}
.wp-editor .inforow{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;background:rgba(43,179,240,.06);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 10px}
.wp-editor .fld{margin:12px 0}
.wp-editor label{display:block;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.wp-editor input[type=text],.wp-editor select{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:7px;padding:8px 10px;font:inherit;font-size:var(--fs-base)}
.wp-locs{display:flex;gap:6px;flex-wrap:wrap}
.wp-locs button{font:inherit;font-size:var(--fs-sm);padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--bg);color:var(--text);cursor:pointer}
.wp-locs button.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}

/* ---- icoon-uitlijning: line-icons netjes in knoppen/acties ----
   BEWUST een tweede blok voor .cat-ic en .act (hun basis staat veel hoger in het bestand): dit is
   één plek waar de hele icoon-set zijn display krijgt. Alleen display/uitlijning hier — kleur,
   rand en padding blijven bij de component zelf staan. Niet samenvoegen met die basis. */
.cat-ic{display:inline-flex;align-items:center;justify-content:center}
.calc-add{display:inline-flex;align-items:center;gap:6px}.in-del{display:inline-flex;align-items:center;justify-content:center}
.zemp .rm{background:none;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
.act{display:inline-flex;align-items:center;gap:5px}
.in-drop-ic{display:flex;justify-content:center;color:var(--text-3);margin-bottom:8px}
.op-tools button{display:inline-flex;align-items:center;gap:5px}

/* ---- richtprijs-kaart (prijsmodel, sale-hub) ---- */
.rp-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8px 26px;margin-top:4px}

/* De .uc-*-tabel van de losse Urencontrole is weg (26-07-2026): die pagina is opgegaan in de
   Weekcontrole, die dezelfde rijen al als matrix toonde. Zie de alias-route in app.js. */
@media (max-width:900px){.rp-grid{grid-template-columns:1fr}}
.rp-prijs{font-size:var(--fs-2xl,26px);font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rp-prijs small{font-size:var(--fs-xs);font-weight:500;color:var(--text-3);letter-spacing:0}
.rp-sub{font-size:var(--fs-sm);color:var(--text-3);margin:2px 0 12px;font-variant-numeric:tabular-nums}
.rp-staaf{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}
.rp-staaf span{display:block;height:100%}
.rp-legenda{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:var(--fs-xs);color:var(--text-3);margin:7px 0 12px;font-variant-numeric:tabular-nums}
.rp-legenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.rp-delta{border-radius:9px;padding:8px 12px;font-size:var(--fs-sm);font-weight:600;background:color-mix(in srgb,var(--green,#3dbb7e) 12%,transparent);color:var(--green,#3dbb7e)}
.rp-delta.amber{background:color-mix(in srgb,var(--orange,#e0a63e) 14%,transparent);color:var(--orange,#e0a63e)}
.rp-delta.muted{background:var(--line);color:var(--text-3);font-weight:500}
.rp-feiten>div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.rp-feiten>div>span:first-child{color:var(--text-3);white-space:nowrap}
.rp-feiten>div>span:last-child{text-align:right}
.rp-feiten .rp-voet{display:block;border-top:1px solid var(--line);padding-top:8px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}
.rp-editor{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.rp-editor[hidden]{display:none}   /* display:flex overschrijft anders het hidden-attribuut (H1) — risico-opslag-editor bleef altijd open */
.rp-editor label{display:flex;align-items:center;gap:7px;color:var(--text-3)}
.rp-editor input[type=number]{width:70px}
.rp-gebieden{margin-top:4px}
.rp-gebsom{margin-top:8px;font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.rp-delta.rood{background:color-mix(in srgb,var(--red,#e05a5a) 13%,transparent);color:var(--red,#e05a5a)}

/* ---- instellingen: rail-zoekveld + dividers + toegang & rollen ---- */
.set-zoek{width:100%;margin-bottom:10px;padding:8px 12px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:9px;font:inherit;font-size:var(--fs-sm)}
.set-zoek:focus{outline:none;border-color:var(--accent,#8b5cf6)}
.set-zoek-uit{margin:-4px 0 10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.set-zoek-uit a{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.set-zoek-uit a:last-child{border-bottom:0}
.set-zoek-uit a:hover{background:rgba(255,255,255,.03)}
.set-zoek-uit a b{font-size:var(--fs-sm);font-weight:600}
.set-zoek-uit a small{font-size:var(--fs-xs);color:var(--text-3)}
.set-zoek-leeg{padding:8px 12px;font-size:var(--fs-xs);color:var(--text-3)}
/* Rollen-matrix: elk recht met een uitleg eronder — zonder die regel is 'Planning beheren' of
   'Financiën & rapportages' een raadsel. Kaartjes i.p.v. een platte rij, zodat label en uitleg
   bij elkaar blijven; onder 900px één kolom. */
.tg-rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px;padding:4px 0 6px;align-items:start}
.tg-mod{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--text-2);min-width:0}
.tg-mod-h{display:inline-flex;align-items:center;gap:7px}
.tg-mod-u{font-size:var(--fs-2xs);color:var(--text-3);line-height:1.45;padding-left:22px}
.tg-mod input{width:auto;flex:0 0 auto}
.tg-geld{font-weight:600}
@media (max-width:900px){.tg-rij{grid-template-columns:1fr}}
/* Arbeidsvoorwaarden (Instellingen → Arbeidsvoorwaarden) */
.av-rij{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:4px 0 6px}
.av-veld{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2)}
.av-veld input[type=checkbox]{width:auto}
.av-jaarbar{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.av-jaarbar b{font-size:var(--fs-md);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.av-fd{display:flex;align-items:center;gap:12px;padding:6px 2px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.av-fd label{display:inline-flex;align-items:center;gap:8px;min-width:170px;color:var(--text)}
.av-fd label input{width:auto}
.av-fd--uit label,.av-fd--uit .av-fd-d{color:var(--text-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-3) 55%,transparent)}
.av-fd-d{color:var(--text-3);font-size:var(--fs-xs)}
.av-fd-half{font-size:var(--fs-2xs);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 12%,transparent);border-radius:99px;padding:1px 8px}
.av-toevoeg{border-top:1px solid var(--line);margin-top:2px;padding-top:10px;gap:8px}
/* Verlofadministratie: boekingen-historie + contractregels-editor in het dossier */
.md-row--dof{opacity:.55}
.md-row--dof span:first-child,.md-row--dof .md-bk-oms{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-3) 55%,transparent)}
.md-wv-tag{font-size:var(--fs-2xs);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 45%,transparent);background:color-mix(in srgb,var(--blue) 12%,transparent);border-radius:99px;padding:0 7px;margin-left:4px}
.md-vz-tag{font-size:var(--fs-2xs);color:var(--amber,#d99a3a);border:1px solid color-mix(in srgb,var(--amber,#d99a3a) 45%,transparent);background:color-mix(in srgb,var(--amber,#d99a3a) 12%,transparent);border-radius:99px;padding:0 7px;margin-left:4px}
.md-bk-oms{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-bk-del{background:none;border:0;padding:0 4px;color:var(--text-3);cursor:pointer;border-radius:var(--r-xs);font-size:var(--fs-md);line-height:1}
.md-bk-del:hover{color:var(--urgent)}
.md-cr{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);flex-wrap:wrap}
.md-cr input[type=date]{width:132px}
.md-cr .ec-datum{width:132px;margin-top:0}
.md-cr-pt{min-width:30px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-3)}
.md-cr-warn{flex:0 0 auto;color:var(--amber);display:inline-grid;place-items:center;cursor:help}
.md-cr-warn svg{width:14px;height:14px;display:block}
.md-cr-docopen,.md-cr-docup{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;background:none;color:var(--text-3);border-radius:var(--r-xs);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.md-cr-docopen:hover,.md-cr-docup:hover{background:rgba(255,255,255,.06);color:var(--text)}
.md-cr-docopen[hidden]{display:none}
.md-cr-docopen svg,.md-cr-docup svg{width:15px;height:15px;display:block}
/* ---- Salarisregel: hetzelfde rij-idioom als de contractregel (.md-cr) ---- */
/* De globale `input,select{width:100%}` zou de twee keuzelijsten de rij uit duwen — hier expliciet
   smal houden. Het periode-label is rustige subtekst: het duidt de regel, het stuurt hem niet. */
.md-sal select{width:auto;flex:0 0 auto;padding:6px 8px;font-family:var(--font-body);font-size:var(--fs-sm)}
/* Afgeleide einddatum: leesveld, geen invoer — het volgt uit de volgende regel of het contracteinde.
   Zelfde breedte-idioom als het datumveld ernaast, zodat de kolom uitlijnt. */
.md-sal-eind{font-variant-numeric:tabular-nums;color:var(--text-2);min-width:92px}
.md-cr--read.md-sal{gap:10px}
/* Het uitgerekende werkelijke bedrag: dít is wat iemand krijgt, dus het mag opvallen naast het
   ingevoerde fulltime-bedrag. Leeg (100% of uurloon) = geen ruimte innemen. */
.md-sal-werk{font-variant-numeric:tabular-nums;color:var(--purple);font-weight:600;white-space:nowrap}
.md-sal-werk:empty{display:none}
/* Salaris hangt per CONTRACT: elk contract een eigen blok, zelfde omkadering als het contractvak
   zodat de hiërarchie 'contract -> salarisregels' meteen leesbaar is. */
.md-salgrp{border:1px solid var(--line-2);border-left:3px solid var(--purple);border-radius:var(--r-md);margin-top:12px;padding:8px 12px 10px}
.md-salgrp:first-child{margin-top:6px}
.md-salgrp--los{border-left-color:var(--amber,#d99a3a)}
.md-salgrp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:4px}
.md-salgrp-nr{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--purple);font-weight:700}
.md-salgrp-nr--warn{color:var(--amber,#d99a3a);display:inline-flex;align-items:center;gap:5px}
.md-salgrp-nr--warn svg{width:13px;height:13px}
.md-salgrp-rows .md-cr:first-child{border-top:0}
.md-salgrp-leeg{margin:4px 0 0}
.md-salgrp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Ingangsdatum buiten het contractvenster: de server weigert 'm, dus wijs 'm hier al aan. */
.md-sal--buiten{box-shadow:inset 3px 0 0 var(--red);padding-left:8px}
.md-sal-koppel{display:flex;align-items:center;gap:8px;padding:0 0 6px 8px;font-size:var(--fs-sm)}
.md-sal-koppel select{width:auto;max-width:280px;padding:6px 8px;font-family:var(--font-body);font-size:var(--fs-sm)}
/* ---- Hiërarchie 'Contract & rooster': contract-blok met genest rooster ---- */
/* Contract-vak: eigen omkadering + accentbalk links (zelfde idioom als .db-vrlcard) zodat contracten
   duidelijk van elkaar te onderscheiden zijn; het volgnummer zit als label in de kop. */
/* Vangnet: in dit blok wisselen we lees-/bewerkstand met het hidden-attribuut. Een display-regel op de
   klasse wint anders van hidden (kostte al 2 bugs: de melding die bleef staan én de dubbele datum). */
.md-ctblok [hidden]{display:none!important}
.md-ctblok{border:1px solid var(--line-2);border-left:3px solid var(--purple);border-radius:var(--r-md);margin-top:14px;overflow:hidden}
.md-ctblok:first-child{margin-top:6px}
.md-ct-nr{display:block;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--purple);font-weight:700;padding:8px 12px 0;background:rgba(154,79,208,.06)}
.md-ctblok>.md-cr{border-top:0;padding:6px 12px 10px;background:rgba(154,79,208,.06)}   /* de contractregel is de blok-kop */
.md-cr--read{border-top:0;padding:9px 12px;background:rgba(154,79,208,.06)}
.md-cr-dates{font-variant-numeric:tabular-nums;font-weight:600}
.md-ct-roo{padding:10px 12px 11px;border-top:1px solid var(--line);background:rgba(255,255,255,.015)}
.md-ct-roolbl{font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:8px}
.md-ct-roo .note{margin:0}
.md-seg{margin-bottom:11px}
.md-seg:last-of-type{margin-bottom:0}
.md-seg-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:2px;flex-wrap:wrap}
.md-seg-van{font-variant-numeric:tabular-nums}
/* 'loopt door uit het vorige contract' = een doorlopend rooster, her-verankerd op de contract-ingang */
.md-seg-doorloop{font-size:var(--fs-xs);color:var(--text-3);font-style:italic;cursor:help}
.md-seg--erf .md-seg-days{opacity:.6}
.md-seg-bron{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--blue);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px}
.md-seg-wk{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--text-3)}
.md-seg-wk.ok{color:var(--green)}
.md-seg-wk.warn{color:var(--amber);font-weight:600}
.md-seg-days{max-width:360px}
.md-seg-b{margin-top:7px}
.md-seg-warn{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-xs);color:var(--amber);background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.35);border-radius:var(--r-sm);padding:6px 9px;margin-top:8px;line-height:1.45}
.md-seg-warn[hidden]{display:none}   /* zonder deze regel wint display:flex van het hidden-attribuut → melding bleef staan */
.md-seg-warn svg{flex:0 0 auto;margin-top:1px}
.md-ct-rooadd{margin-top:2px;font-size:var(--fs-xs);color:var(--blue);background:none;border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:7px 10px;cursor:pointer;width:100%;text-align:left;transition:border-color .15s,background .15s}
.md-ct-rooadd:hover{border-color:var(--accent);background:rgba(43,179,240,.06)}
/* ---- Rooster binnen een contract: periode (van–tot) + inline bewerkbaar dag-schema ---- */
.md-roo{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:8px;background:rgba(255,255,255,.015)}
.md-roo--erf{border-style:dashed;opacity:.85}
.md-roo--nieuw{border-color:rgba(43,179,240,.45);background:rgba(43,179,240,.05)}
.md-roo-h{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.md-roo-per{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.md-roo-van,.md-roo-tot{background:var(--surface-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px;color:var(--text)}
.md-roo-tot{color:var(--text-2);cursor:help}
.md-roo-tm{color:var(--text-3)}
.md-roo-vanlbl{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.md-roo-vanlbl input[type=date],.md-roo-vanlbl .ec-datum{width:132px;margin-top:0}
.md-roo-erf{font-size:var(--fs-2xs);color:var(--text-3);font-style:italic;cursor:help}
.md-roo-blbl{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin:7px 0 3px}
.md-roo-edit{flex:0 0 auto;width:24px;height:24px;padding:0;border:0;background:none;color:var(--text-3);border-radius:var(--r-xs);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.md-roo-edit:hover{background:rgba(255,255,255,.07);color:var(--accent)}
.md-roo-edit svg{display:block}
.md-roo[data-edit="1"] .md-roo-edit{display:none}   /* al in bewerkstand → potlood weg */
.md-roo[data-edit="1"]{border-color:rgba(43,179,240,.45);background:rgba(43,179,240,.04)}
/* Weekkop bij om-de-week: welke week is dit, en hoeveel uur telt díé week (de kop toont het gemiddelde) */
.md-roo-wklbl{display:flex;align-items:baseline;gap:7px;font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:9px 0 4px}
.md-roo-wklbl:first-child{margin-top:2px}
.md-roo-wksom{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-2);font-variant-numeric:tabular-nums}
/* De om-de-week-schakelaar staat vlak bóven de grids die hij stuurt (niet in de kop naast het totaal) */
.md-roo-odw{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-2);cursor:pointer;user-select:none;margin:2px 0 4px}
.md-roo-odw input{width:13px;height:13px;margin:0;cursor:pointer;accent-color:var(--accent,#2bb3f0);flex:0 0 auto}
.md-roo-odw[hidden]{display:none}
.md-ct-rooacts{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.md-ct-rooacts .md-ct-rooadd{flex:1 1 auto;width:auto}
.md-roo-acts{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.md-roo-acts[hidden]{display:none}
.md-roo-del{flex:0 0 auto;width:24px;height:24px;padding:0;border:0;background:none;color:var(--text-3);border-radius:var(--r-xs);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.md-roo-del:hover{background:rgba(255,93,115,.14);color:var(--urgent,#ff5d73)}
.md-roo-del svg{display:block}
/* bewerkbare dag-cellen: zelfde ritme als de lees-grid (.md-roocel), maar met invoer */
.md-rdrow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:376px}
.md-rdc{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px 5px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-2);transition:border-color .15s}
.md-rdc:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(43,179,240,.18)}
.md-rdc>span{font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--text-3);font-weight:600}
.md-rdc input{width:100%;min-width:0;border:0;background:none;color:var(--text);text-align:center;font:inherit;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;padding:1px 0}
.md-rdc input:focus{outline:none}
.md-rdc--vrij input{color:var(--text-3)}
.md-ct-voet{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.md-ct-voet .facts{margin-bottom:0}
.mw-mail{width:230px;padding:6px 10px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:7px;font:inherit;font-size:var(--fs-sm)}
/* HRM-documentenkaart: klikbare rij (openen) + verwijderknop; upload-regel eronder (Beheer) */
.md-doc{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.md-doc-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.md-doc-open:hover .md-doc-t{color:var(--accent,#6b46c1);text-decoration:underline}
.md-doc-t{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-doc-m{font-size:var(--fs-xs);color:var(--text-3)}
.md-docup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.md-docup input[type=text]{flex:1;min-width:120px;padding:6px 10px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:7px;font:inherit;font-size:var(--fs-sm)}
.md-doc-add{cursor:pointer}
.md-doc-del{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;background:none;color:var(--text-3);border-radius:var(--r-xs);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.md-doc-del:hover{background:var(--urgent-dim,rgba(255,93,115,.13));color:var(--urgent)}
.md-doc-del svg{width:15px;height:15px;display:block}
.md-roorow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px}
.md-roocel{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.md-roocel--vrij{opacity:.45}
.md-roocel .md-rood{font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--text-3);font-weight:600}
.md-roocel b{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

/* ---- sjabloonteksten (Instellingen → Standaardteksten offerte) ---- */
/* Zelfde inklap-vorm als `details.adv` hierboven; eigen klasse omdat de inhoud hier direct in
   de <details> staat i.p.v. in een .inner-wrapper. */
.sj-sec{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);padding:0 13px;margin-top:10px}
.sj-sec>summary{cursor:pointer;padding:10px 0;font-size:var(--fs-xs);font-weight:600;list-style:none}
.sj-sec>summary::-webkit-details-marker{display:none}
.sj-sec>summary::before{content:"▸ ";color:var(--accent)}
.sj-sec[open]>summary::before{content:"▾ "}
.sj-sec[open]{padding-bottom:13px}
.sj-sec textarea{font-family:inherit;line-height:1.5}
/* De kerngetallen-kopjes zijn korte losse labels; naast elkaar i.p.v. vier volle regels.
   ⚠De globale regel `input,select,textarea{width:100%}` blijft hier gewoon gelden — binnen een
   grid-cel is dat precies wat je wilt. */
.sj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:6px}

/* ===== BEVINDINGEN OVER DE INGELEZEN GEOMETRIE (intake, engine/geomcontrole.js) =====
   Twee standen, en dat onderscheid is de hele bedoeling: AMBER = nakijken (het kost m² en dus geld),
   NEUTRAAL = mededeling (waar, maar er hoeft niets te gebeuren). Zou alles amber zijn, dan staat het
   paneel op 10 van de 114 projecten permanent te alarmeren voor 11 vlakken die 0–24 m² schelen — en
   dan is het geen signaal meer. Zelfde les als `bewust bewaard` in de integriteitscheck.
   Tint-recept zoals de rest: vulling .10–.15, rand .4–.6, radius uit de tokens. */
.geombev{margin-top:13px}
.gblist{display:flex;flex-direction:column;gap:4px;margin:0 0 8px}
.gb-tel{color:var(--amber);font-weight:600}
.gbrow{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.02)}
.gbrow.nakijken{border-color:rgba(240,180,41,.45);background:rgba(240,180,41,.10)}
.gbrow.klik{cursor:pointer;transition:background .12s,border-color .12s}
.gbrow.klik:hover{border-color:var(--line-2);background:rgba(255,255,255,.06)}
.gbrow.nakijken.klik:hover{border-color:rgba(240,180,41,.6);background:rgba(240,180,41,.15)}
.gbrow.klik:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gbic{flex:0 0 auto;display:flex;margin-top:1px;color:var(--text-3)}
.gbrow.nakijken .gbic{color:var(--amber)}
.gbtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gbtxt b{font-size:var(--fs-sm);font-weight:600}
.gbtxt span{font-size:var(--fs-micro);color:var(--text-3);line-height:1.45}
/* WELKE VORM het is, als de laag er meer dan één heeft. ⚠Eigen regel met hogere specificiteit dan
   `.gbtxt span` hierboven — anders krijgt dit label de opmaak van de uitleglezing eronder en valt
   het weg tegen de tekst waar het juist bovenuit moet steken. */
.gbtxt .gbwaar{align-self:flex-start;margin:1px 0 2px;padding:1px 7px;border-radius:999px;
  font-size:var(--fs-2xs);font-weight:600;color:var(--text-2);
  border:1px solid var(--line-2);background:rgba(255,255,255,.05)}
.gbrow.nakijken .gbwaar{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);
  background:color-mix(in srgb,var(--amber) 14%,transparent)}
/* De markering op een losse vorm in een uitgeklapte laag: iets kleiner dan die op de laagrij, net
   als de knoppen daar (`.kmzobj .kmzbtn`). */
.kmzobj .kmzbev{width:20px;height:20px}
/* Het margeveld in 'Projectgebied maken uit een laag'. ⚠Een kale <input type=number> valt onder de
   globale regel `input,select,textarea{width:100%;padding:8px 9px;border:…}` en wordt dan een vak
   over de volle breedte met het woord 'm' op de volgende regel. Zie de waarschuwing bij .opt-optline. */
.gb-margeveld{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2)}
.gb-margeveld input{width:84px;padding:6px 8px;text-align:right}

/* ===== TEKENEN EN BEWERKEN (intake, Leaflet.draw) ===== */
.tekenacties{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.tekenacties .ta-lbl{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600}
/* De balk is de gewone uitgang uit de tekenstand (Klaar/Annuleren; Escape doet hetzelfde als
   Annuleren), dus hij moet opvallen: blauwe tint volgens het huisrecept.
   ⚠Hier stond "zolang hij staat, wordt de kaart niet opnieuw opgebouwd — zie tekenStand". Dat is
   ONWAAR: er is geen slot, de rest van de bediening hertekent gewoon door. De editor houdt zijn
   geometrie daarom op IDENTITEIT vast en weigert bij het opslaan als die weg is (bewerkVorm in
   intake.js). Dezelfde onwaarheid is 05-09-2026 al in intake.js en CLAUDE.md gecorrigeerd; deze
   derde kopie bleef staan tot 07-09-2026. */
/* ⛔DE KLAAR-KNOP MOET IN BEELD BLIJVEN — anders kun je een bewerkte vorm niet opslaan.
   Deze balk staat ONDERAAN het linkerpaneel, ná de lagenlijst, en `.loc-panes` scrollt. Gemeten
   06-09-2026 met 16 lagen (melding Remco: "ik heb een vorm bewerkt maar kan hem niet opslaan"):
   de balk stond op y=1355 terwijl het paneel tot y=813 zichtbaar was — 542 px onder de rand, en
   `elementFromPoint` gaf 'niets'. De hoekpunten werkten wél, dus je kon slepen en daarna niet
   bewaren. `position:sticky;bottom:0` zet hem vast aan de onderrand zodra zijn natuurlijke plek
   eronder valt; staat hij al in beeld, dan verandert er niets.
   ⚠`z-index` is nodig omdat de lagenlijst eronder doorscrollt, en de achtergrond moet DEKKEND zijn:
   met de doorzichtige tint erdoorheen lees je twee dingen over elkaar. */
.tekenbar{display:flex;align-items:center;gap:9px;margin-top:9px;padding:9px 11px;
  border:1px solid rgba(43,179,240,.5);border-radius:var(--r-md);background:rgba(43,179,240,.12);
  position:sticky;bottom:0;z-index:var(--z-sticky);
  background-color:color-mix(in srgb,var(--panel) 92%,rgba(43,179,240,.12))}
.tekenbar .tb-tekst{font-size:var(--fs-micro);color:var(--text-2);line-height:1.4}
.tekenbar .tb-rek{flex:1}
/* De herstelknop zit in een bevindingsrij; niet laten meerekken met de tekst. */
.gbrow .gbfix{flex:0 0 auto;align-self:center;white-space:nowrap}
/* Leaflet.draw tekent zijn hoekpunt-handvatten met een eigen icoon. Op de donkere cockpit-kaart is
   het standaard lichtblauw slecht te zien; wit met een donkere rand leest op zowel een luchtfoto
   als een straatkaart. Zelfde keuze als bij de grondslagpunten in tekenRol(). */
.leaflet-editing-icon{border-radius:50%;border:2px solid #0b0a16;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ── Bewonersbrieven-tabblad (11-09-2026) ───────────────────────────────────────────────────────
   Twee kolommen: links de brief bewerken, rechts het echte A4 dat de hub rendert. Het voorbeeld is
   op ware grootte gerenderd (794 px = 210 mm) en pas daarna verkleind met `transform` — NOOIT met
   css `zoom`: dat rekent de layout opnieuw uit en dan pagineert het voorbeeld anders dan de PDF
   (zie de offerte-preview, CLAUDE.md). */
.bb-lbl{margin-top:14px;font-size:var(--fs-xs);color:var(--text-3)}
.bb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bb-kat{font:inherit;font-size:var(--fs-xs);color:var(--text-2);background:var(--panel-2);cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:4px 11px}
.bb-kat.on{background:var(--pill-on-fill);border-color:var(--blue);color:var(--pill-on-ink)}
.bb-tel{margin-top:12px;padding:9px 11px;border-radius:var(--r-sm);background:var(--panel-2);
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.bb-tel b{font-size:var(--fs-xl)}
.bb-tel .x{font-size:var(--fs-xs);color:var(--text-2)}
.bb-acties{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
/* De AI-controle staat onderaan bij de uitvoer, vóór de generatieknoppen: nakijken → proefdruk →
   genereren. ⚠De uitleg krijgt `flex:1` mét een `min-width`, zodat hij op een smal scherm onder de
   knop wikkelt in plaats van tot drie tekens te worden samengeknepen. */
/* "deze batch is de deur uit" — administratie, onder de generatieknoppen. In de verzonden stand een
   groene tint, zodat je hem in één oogopslag van de onverzonden batches onderscheidt. */
.bb-verzonden{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line)}
.bb-verzonden .x{flex:1;min-width:220px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.45}
.bb-verzonden.on{padding:10px 12px;border:1px solid rgba(46,204,113,.4);border-radius:var(--r-md);
  background:rgba(46,204,113,.10)}
.bb-vzdat{display:flex;gap:6px;align-items:center;font-size:var(--fs-xs);color:var(--text-3)}
/* ⚠Het datumwidget draagt zelf `margin-top:4px`; zonder deze nul staat het 4 px lager dan de tekst
   ernaast — zelfde reden als bij `.bb-veld .ec-datum`. */
.bb-vzdat .ec-datum{margin-top:0}
/* Het AI-voorstel: per wijziging de tekst mét de diff erin. ⚠Eigen maximumhoogte + scroll, want een
   brief van vijf alinea's past anders niet in het venster en dan valt de knoppenbalk buiten beeld —
   dezelfde fout als de tekenbalk in de locatie-analyse. */
.bb-diff{margin-top:10px;max-height:46vh;overflow:auto}
.bb-diffblok{margin-top:10px;padding:9px 11px;border-radius:var(--r-sm);background:var(--panel-2)}
.bb-diffblok:first-child{margin-top:0}
.bb-diffkop{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:5px}
.bb-difftekst{font-size:var(--fs-sm);line-height:1.5;white-space:pre-wrap}
/* Doorgestreept = eruit, gemarkeerd = erbij. ⚠Niet op kleur alleen: de streep en de onderlijn dragen
   het verschil ook zonder kleurwaarneming (zie `color-not-only` in de a11y-regels). */
.bb-dweg{text-decoration:line-through;color:var(--urgent);background:rgba(232,74,95,.10);border-radius:3px}
.bb-dbij{text-decoration:underline;color:var(--green);background:rgba(46,204,113,.12);border-radius:3px}
.bb-airij{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.bb-aiuitleg{flex:1;min-width:240px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.45}

.bb-brief{margin-top:12px}
/* ⚠Eigen breedte: de globale `input,select,textarea{width:100%}` zou deze keuzelijst anders de hele
   kaartkop laten vullen (dezelfde val als .lb-keuze en .ec-perkies__sel). */
.bb-sel{width:auto;max-width:260px;font-size:var(--fs-sm);padding:4px 8px}
.bb-kolommen{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:18px;margin-top:10px}
.bb-velden{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.bb-veld{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.bb-veld.breed{grid-column:1/-1}
.bb-veld>span{display:block;margin-bottom:3px}
.bb-editor>.bb-veld{margin-top:10px}
/* ⚠HET DATUMWIDGET KOMT NÁÁST DE VERBORGEN `input[type=date]` TE STAAN (app.js vervangt die globaal),
   en `.ec-datum` draagt zelf `margin-top:4px`. Zonder deze nul staat een datumveld 4 px lager dan het
   tekstveld ernaast in dezelfde rij. */
.bb-veld .ec-datum{margin-top:0}
/* De zin die uit de twee datums rolt. Staat er ALTIJD, ook leeg — zo is het geen melding die
   verschijnt maar een regel die meeleest. */
.bb-perzin{margin-top:8px;font-size:var(--fs-xs);color:var(--text-2)}
.bb-perzin b{color:var(--text-1)}
.bb-blok{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.bb-blok .bb-kop{font-family:var(--font-display);font-weight:600}
.bb-blok textarea{margin-top:6px;line-height:1.45;resize:vertical}
.bb-hint{margin-top:12px;font-size:var(--fs-xs);color:var(--text-3)}
.bb-hint code{background:var(--panel-2);border-radius:4px;padding:1px 5px}

.bb-vbkop{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--fs-xs);
  color:var(--text-3);margin-bottom:6px}
.bb-vbkop .bb-ok{color:var(--green)}
.bb-vbkop .bb-let{color:var(--amber)}
/* ⛔`transform:scale` VERANDERT DE LAYOUT NIET, alleen wat je ziet. De iframe beslaat dus nog steeds
   794 px in breedte en de VOLLE documenthoogte; zonder een meeschalende omhulling scrollt de doos
   over die ONgeschaalde maten en klopt er niets van. Vandaar `.bb-vbschaal`: die krijgt van JS de
   GESCHAALDE hoogte (paginas × 526 px + de gaten), terwijl de iframe zelf de echte hoogte houdt.
   ⚠En schalen blijft `transform`, nooit css `zoom` — dat rekent de layout opnieuw uit en dan
   pagineert het voorbeeld anders dan de PDF (zie de offerte-preview). */
.bb-vbdoos{width:372px;height:526px;overflow-y:auto;overflow-x:hidden;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line-2);scrollbar-gutter:stable}
/* ⛔`overflow:hidden` IS HIER DRAGEND, GEEN OPSMUK. `transform` verandert de LAYOUT niet: de iframe
   beslaat nog steeds 794 × (paginas × 1123) px en steekt dus buiten deze doos uit. Zonder deze regel
   scrollt `.bb-vbdoos` over díé ongeschaalde hoogte — gemeten 2273 px waar er 1063 hoort, dus je
   scrolt je door een leeg gat naar beneden en pagina 2 komt nooit in beeld. Gevonden in een échte
   headless Chrome; in de bron was er niets aan te zien. */
.bb-vbschaal{width:372px;height:526px;overflow:hidden}
.bb-vbschaal iframe{width:794px;height:1123px;border:0;transform:scale(.4685);transform-origin:top left}
/* De verzendklaar-bevindingen onder het voorbeeld. ⚠GEEN eigen `display` hier: dit element wordt met
   `el.hidden` verborgen, en een class die zelf display zet wint van `[hidden]{display:none}` — zie de
   [hidden]-tabel in CLAUDE.md. */
.bb-vbbev{margin-top:8px;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-xs);
  line-height:1.45;color:var(--text-2);background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.45)}
.bb-vbbev ul{margin:4px 0 0;padding-left:16px}
.bb-vbnoot{margin-top:8px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.4}
@media (max-width:1100px){
  .bb-kolommen{grid-template-columns:minmax(0,1fr)}
  .bb-vbdoos{width:100%;max-width:372px}
}

/* Uitvoer: voortgang tijdens het renderen + de verzendklaar-uitslag per bestand. */
/* De blokkade-banner: dezelfde tint als `.loc-basis.warn` in de locatie-analyse, want het is
   hetzelfde soort melding — de reden waarom de knop ernaast uit staat. */
.bb-blokkade{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-xs);
  line-height:1.55;color:var(--text-2);border:1px solid rgba(232,163,61,.40);background:rgba(232,163,61,.07)}
.bb-blokkade b{color:var(--text)}
.bb-blokkade ul{margin:5px 0 0;padding-left:16px}
.bb-voortgang{display:flex;align-items:center;gap:10px;margin-top:12px}
.bb-balk{flex:1;height:6px;border-radius:var(--r-pill);background:var(--panel-2);overflow:hidden}
.bb-balk i{display:block;height:100%;background:var(--grad);transition:width .3s var(--ease)}
.bb-check{margin-top:12px;display:grid;gap:8px}
.bb-deel{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--panel-2)}
.bb-deel .x{color:var(--text-3);font-size:var(--fs-xs)}
.bb-deel .bb-ok,.bb-deel .bb-let{margin-left:auto;font-size:var(--fs-xs)}
.bb-ok{color:var(--green)}
.bb-let{color:var(--amber)}
.bb-bev{margin:2px 0 0 11px;padding-left:14px;font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}

/* Verzendingen: de kiezer én de historie. De actieve regel draagt een invoerveld voor de naam, de
   andere een knop om ernaartoe te gaan — zo is er één plek die zegt welke brief je bewerkt. */
.bb-vzlijst{display:grid;gap:8px;margin-top:10px}
.bb-vz{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid transparent}
.bb-vz.on{border-color:var(--blue);background:var(--pill-on-fill)}
.bb-vz .x{color:var(--text-3);font-size:var(--fs-xs)}
.bb-vz .btn{margin-left:auto}
/* ⚠Eigen breedte én een eigen achtergrond: de globale `input,select,textarea{width:100%}` in dit
   bestand zou dit veld anders de hele regel laten vullen en de meta-tekst eruit duwen. Zelfde val
   als .bb-sel, .lb-keuze en .ec-perkies__sel. */
.bb-vz-naam{width:auto;min-width:160px;max-width:260px;font-weight:600;padding:3px 8px;
  font-size:var(--fs-sm);background:var(--panel);border-radius:var(--r-sm)}
.bb-vz-kies{font:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--text-1);cursor:pointer;
  background:none;border:0;padding:3px 0;text-align:left;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:3px}
.bb-vz-kies:hover{text-decoration-color:var(--blue)}
.bb-achter{margin-top:14px}