/* Assmble — style sheet of prototype assmble_215 (tools/prototype-split.mjs). */
/* ============================================================
   HUISSTIJL ASSMBLE
   Primair #5B8FDE · Tekst #252D2F · Achtergrond #F4F7FC
   Accent #E8A33D · Succes #3A9D5D · Waarschuwing #D64545
   Typografie Inter
   ============================================================ */
:root{
  /* ---- huisstijl assmble ----
     Deep Navy #0F1F3D · Soft Navy #253A63 · Primary Blue #5B8FDE
     Light Blue #A9C7F2 · Ice #F4F7FC */
  --primair:#5B8FDE;
  --primair-d:#3E72C2;
  --primair-l:#E8F0FC;
  --ink:#0F1F3D;
  --ink-2:#253A63;
  --grafiet:#0F1F3D;
  --rail:#0F1F3D;
  --rail-2:#0A1730;
  --steel:#5F7091;
  --steel-2:#9AAAC6;
  /* ---- één maatvoering voor alle tabellen ----
     Elke lijst in het systeem leest hetzelfde: dezelfde kopregel,
     dezelfde tekstgrootte in de cellen, dezelfde regelhoogte en
     dezelfde maat voor getallen en bijschriften. */
  --tab-kop:10.5px;
  --tab-tekst:12.5px;
  --tab-mono:11.5px;
  --tab-klein:10px;
  --tab-regel:38px;
  --tab-pad:11px;
  --paper:#F4F7FC;
  --card:#FFFFFF;
  --line:#DFE7F3;
  --line-2:#EDF2FA;
  --signal:#E8A33D;
  --signal-l:#FDF3E3;
  --action:#5B8FDE;
  --action-h:#3E72C2;
  --green:#2F9E6B;
  --green-l:#E8F6F0;
  --red:#D9534F;
  --red-l:#FBEDED;
  --amber:#B87600;
  --violet:#5C5AA7;
  --blue:#5B8FDE;
  --navy:#253A63;
  --ijs:#A9C7F2;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r:8px;
  --r-s:6px;
  --shadow:0 1px 2px rgba(37,45,47,.05), 0 4px 14px rgba(37,45,47,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  -webkit-text-size-adjust:100%;
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
button,input,select,textarea{font:inherit;color:inherit}

/* --- micro-label: het "typeplaatje"-motief --------------- */
.plate{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
}
/* De tag is een kenmerk, geen blikvanger: hij staat in
   dezelfde kleur als de gewone tekst, alleen in het vaste lettertype
   zodat cijfers en letters netjes onder elkaar uitkomen. */
.tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.01em;
  color:var(--steel);
  white-space:nowrap;
}
.num{font-family:var(--mono);font-size:12.5px;color:var(--steel)}

/* ============================ LAYOUT ==================== */
/* De zijbalk staat vast aan het scherm en telt daardoor niet meer mee in
   de indeling. Een raster met twee kolommen zette het werkgebied dan in
   de eerste kolom van 232 pixels — vandaar geen raster meer, maar een
   marge links ter breedte van de balk. */
.app{display:block;min-height:100vh}
main{margin-left:232px;min-width:0}

.rail{
  background:var(--rail);
  color:#C7D0D1;
  display:flex;flex-direction:column;
  /* Vast aan het scherm, niet meeschuivend. Met position:sticky bleef de
     balk in sommige gevallen toch meebewegen — bij een lange bladzijde,
     of zodra er ergens een element met een eigen schuifvlak omheen staat.
     Vast betekent vast: de rasterkolom houdt de ruimte bezet, de balk zelf
     staat er los overheen. */
  position:fixed;top:0;left:0;bottom:0;width:232px;z-index:40;
  height:100vh;height:100dvh;
  /* Past het menu niet op het scherm, dan schuift de hele balk mee —
     merk, menu en de gebruiker onderaan. Eerder schoof alleen het
     middenstuk en waren de onderste keuzes op een laag scherm niet te
     bereiken. */
  overflow-y:auto;overscroll-behavior:contain;
}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(169,199,242,.22);border-radius:4px}
.rail::-webkit-scrollbar-track{background:transparent}
/* De balk moet in zijn geheel op het scherm passen; dan staat hij
   werkelijk stil en schuift er nooit iets mee. Vandaar de krappere
   maatvoering: het menu telt vierentwintig keuzes plus vier kopjes. */
/* Het merk staat gecentreerd in de zijbalk in plaats van tegen de
   linkerrand; teken en naam samen als één blok in het midden. */
.brand{padding:18px 15px 15px;display:flex;align-items:center;justify-content:center;
  gap:12px;flex:none;text-align:center}
.brand .merk{flex:none}
.brand b{display:block;font-size:21px;line-height:1.1;color:#fff;font-weight:700;
  letter-spacing:-.01em;text-align:left}
.brand b i{font-style:normal;color:var(--primair)}
.brand b span{display:block;font-weight:400;font-size:11.5px;letter-spacing:.04em;
  color:var(--ijs);margin-top:2px;text-transform:none}
.woordmerk{font-weight:700;letter-spacing:-.01em;line-height:1.1}
.woordmerk span{display:block;font-weight:400}
/* het volledige logo: beeldmerk met de naam ernaast of eronder */
.merklogo{display:inline-flex;align-items:center;gap:12px}
.merklogo.onder{flex-direction:column;gap:14px}
.merkwoord{flex:none}
.nav{padding:2px 10px 6px;flex:1 0 auto}
.nav button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;color:#AEBABB;text-align:left;
  padding:4px 10px;border-radius:var(--r-s);cursor:pointer;font-size:12.5px;font-weight:500;
  line-height:1.5;
  transition:background .12s,color .12s;
}
.nav button:hover{background:#253A63;color:#fff}
.nav button svg{width:17px;height:17px;flex:none}
.nav button.on{background:var(--primair);color:#fff;font-weight:600}
.nav button.on .ico{opacity:1}
.nav .ico{width:17px;height:17px;flex:none;opacity:.75}
.nav .count{margin-left:auto;font-size:11px;font-weight:600;color:#8A9799;
  background:#253A63;border-radius:9px;padding:1px 7px;min-width:22px;text-align:center}
.nav button.on .count{background:rgba(255,255,255,.18);color:#fff}
.nav .sep{padding:7px 12px 2px;font-size:9px;letter-spacing:.12em;color:#69777A;line-height:1.2}
.rail-foot{padding:8px 13px;border-top:1px solid #253A63;display:flex;align-items:center;gap:10px;
  flex:none;position:sticky;bottom:0;background:var(--rail-2);z-index:2}
.rail-foot .avatar{width:30px;height:30px;background:var(--primair);color:#fff;font-family:var(--sans);font-weight:600;font-size:11px}
.rail-foot .naam{font-size:12.5px;font-weight:600;color:#fff;line-height:1.2}
.rail-foot .rol{font-size:11px;color:#8A9799}

main{min-width:0;display:flex;flex-direction:column;min-height:100vh}

.topbar{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:11px 24px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:20;
}
.topbar .paginanaam{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.sitenaam{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primair);
  background:var(--primair-l);border-radius:12px;padding:3px 9px}
.sitenaam.let{color:var(--amber);background:var(--signal-l)}
.zoekbalk{position:relative;flex:1;max-width:400px;margin-left:12px}
.zoekbalk input[type=text]{width:100%;border:1px solid var(--line);border-radius:20px;
  padding:8px 16px 8px 36px;background:var(--paper);font-size:13px}
.zoekbalk input[type=text]:focus{background:#fff;border-color:var(--primair);outline:none}
.zoekbalk .lens{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:12px}
.bel{position:relative;background:none;border:0;cursor:pointer;padding:4px;border-radius:var(--r-s);line-height:0}
.bel:hover{background:var(--paper)}
.bel .telling{position:absolute;top:-1px;right:-2px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;
  border-radius:9px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 4px}
.railfoto{border:0;background:none;padding:0;cursor:pointer;line-height:0;border-radius:50%;
  transition:box-shadow .15s}
.railfoto:hover{box-shadow:0 0 0 2px var(--primair)}

/* een profielfoto vult dezelfde ronde plek als de initialen */
img.avatar.metfoto{object-fit:cover;background:var(--line-2);padding:0;border:0;
  box-shadow:inset 0 0 0 1px rgba(15,31,61,.08)}
.foto-kiezer{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foto-voorbeeld{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 2px 8px rgba(15,31,61,.14)}
.foto-galerij{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.foto-galerij button{border:2px solid transparent;background:none;padding:0;cursor:pointer;
  border-radius:50%;line-height:0}
.foto-galerij button:hover{border-color:var(--primair)}
.foto-galerij img{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block}

.avatar{width:30px;height:30px;border-radius:50%;background:var(--primair);color:#fff;
  display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:11.5px;flex:none}
select.userpick{border:1px solid var(--line);background:#fff;border-radius:var(--r-s);padding:6px 9px;font-size:13px}

/* Het werkgebied vult de hoogte van het scherm. Schermen die zich als
   een venster gedragen — de chat, de stamboom, de tabel, de tekeningen —
   groeien mee tot onderaan in plaats van te blijven hangen op een vaste
   maat met een lege ruimte eronder. */
.wrap{padding:22px 26px;width:100%;min-width:0;flex:1;display:flex;flex-direction:column;min-height:0}
/* De schermnaam staat al in de balk bovenaan; hem er nog een keer groot
   onder zetten kost alleen ruimte. Titels binnen een kaart of een
   detailscherm blijven staan. */
.wrap>h1,.wrap>.schermkop{display:none}
.wrap>.vullend,.wrap>.schermkop+.vullend{flex:1;min-height:0}
/* De onderste kaart van een scherm rekt uit tot onderaan. Is er meer
   inhoud dan ruimte, dan gebeurt er niets; is er ruimte over, dan hangt
   de lijst niet meer als een strookje boven een leeg vlak. */
.wrap>.card:last-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.wrap>.card:last-child>header{flex:none}
.wrap>.card:last-child>.empty{flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
@media(min-width:1500px){ .wrap{padding:26px 34px} }
@media(min-width:1900px){ .wrap{padding:28px 44px} }
/* lopende tekst blijft leesbaar, de rest vult het scherm */
p.sub{max-width:105ch}
h1{font-size:22px;letter-spacing:-.025em;margin:0 0 3px;font-weight:700}
h2{font-size:15px;letter-spacing:-.012em;margin:0 0 10px;font-weight:700}
.sub{color:var(--steel);font-size:13px;margin:0 0 18px}

/* ============================ COMPONENTS ================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:0}
.card>header{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.card>header h2{margin:0}
.card .body{padding:16px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(min-width:1600px){.g2{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g2{grid-template-columns:minmax(0,1fr)}}

.kpi{padding:14px 16px}
.kpi .v{font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:8px}
.kpi.alert .v{color:var(--red)}

.btn{
  border:1px solid var(--primair);background:var(--primair);color:#fff;
  padding:8px 15px;border-radius:var(--r-s);cursor:pointer;font-size:13px;font-weight:600;
  letter-spacing:-.005em;transition:background .12s;
}
.btn:hover{background:var(--primair-d);border-color:var(--primair-d)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);font-weight:500}
.btn.ghost:hover{background:var(--paper);border-color:var(--steel-2)}
.btn.go{background:var(--primair);border-color:var(--primair)}
.btn.go:hover{background:var(--primair-d)}
.btn.accent{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn.accent:hover{background:#E9A600;border-color:#E9A600}
.btn.danger{background:#fff;color:var(--red);border-color:#EBC7C7}
.btn.danger:hover{background:var(--red-l)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.nav button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px}

table{width:100%;border-collapse:collapse;font-size:var(--tab-tekst)}
th{font-size:var(--tab-kop);letter-spacing:.06em;text-transform:uppercase;color:var(--steel);
  text-align:left;padding:0 var(--tab-pad);height:34px;border-bottom:1px solid var(--line);
  font-weight:700;line-height:1.3}
td{padding:8px var(--tab-pad);min-height:var(--tab-regel);border-bottom:1px solid var(--line-2);
  vertical-align:middle;font-size:var(--tab-tekst);line-height:1.35}
/* Alles in een regel leest hetzelfde: één lettertype, één maat, één
   gewicht, geen kapitalen. Een nummer, een tag, een datum, een naam en
   een statuskaartje horen in dezelfde lijst niet elk hun eigen letter te
   krijgen; alleen de kleur en het randje van een kaartje blijven staan.
   Het moet-teken staat er omdat sommige cellen hun maat rechtstreeks in
   de opmaak meekrijgen; anders ontsnapt daar de ene helft aan. */
table tbody td,table tbody td *{
  font-family:var(--sans) !important;
  font-size:var(--tab-tekst) !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  line-height:1.35 !important}
/* de kaartjes houden hun kleur en vorm, alleen niet hun eigen letter */
table tbody td .chip,table tbody td .pri,table tbody td .tag{padding:1px 8px}
table tbody td .plate{background:none;border:0;padding:0}
table tbody td .btn{padding:4px 10px}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--paper)}
tbody tr:last-child td{border-bottom:0}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pri{font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;border:1px solid var(--line);color:var(--steel)}
.pri.P1{background:var(--red-l);border-color:#EBC7C7;color:var(--red)}
.pri.P2{background:var(--signal-l);border-color:#F2DCA8;color:var(--amber)}

.sla{font-family:var(--mono);font-size:11px;color:var(--steel)}
.sla.over{color:var(--red);font-weight:600}

label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-bottom:5px}
label.f>span em{color:var(--red);font-style:normal}
/* Een verplicht veld is te herkennen aan een streepje links van het
   invoerveld; een woord erbij maakte het formulier onrustig. */
label.f:has([required]) input,label.f:has([required]) select,label.f:has([required]) textarea,
label.f.moet input,label.f.moet select,label.f.moet textarea{border-left:2px solid #F3C9C9}
label.f:has([required]) input:focus,label.f.moet input:focus{border-left-color:var(--primair)}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:9px 11px;background:#fff;font-size:13.5px}
input:focus,select:focus,textarea:focus{border-color:var(--primair)}
textarea{min-height:78px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

.empty{padding:34px 20px;text-align:center;color:var(--steel)}
.empty b{display:block;color:var(--ink);margin-bottom:4px}

/* ---- detail ---- */
.dl{display:grid;grid-template-columns:132px 1fr;gap:9px 14px;align-items:baseline}
.dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.dl dd{margin:0}

.actions{display:flex;flex-wrap:wrap;gap:8px}
.hint{font-size:12.5px;color:var(--steel);background:var(--paper);border-left:3px solid var(--primair);padding:10px 13px;border-radius:0 var(--r-s) var(--r-s) 0}

.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 16px 22px;border-left:1px solid var(--line-2);margin-left:5px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li:before{content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:#fff;border:2px solid var(--steel-2)}
.tl li.now:before{border-color:var(--action);background:var(--signal)}
.tl .when{font-family:var(--mono);font-size:11px;color:var(--steel)}
.tl .what{font-weight:500}
.tl .note{color:var(--steel);font-size:13px;margin-top:2px;white-space:pre-wrap}

/* ---- functieschema ---- */
.chartbox{overflow:visible;background:
  linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/100% 24px,
  var(--card);
  border:1px solid var(--line);border-radius:var(--r)}
svg.chart{display:block;width:100%;height:auto}
svg .lane{fill:#fff}
svg .lane.alt{fill:#f5f8f9}
svg .lane-line{stroke:var(--line-2);stroke-width:1}
svg .lane-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;fill:var(--steel)}
svg .lane-role{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--ink)}
svg .box{fill:#fff;stroke:var(--steel-2);stroke-width:1.25}
svg .box.done{fill:var(--primair-l);stroke:var(--primair)}
svg .box.now{fill:var(--signal-l);stroke:var(--signal);stroke-width:2.4}
svg .box.end{stroke-dasharray:none;fill:#f2f4f5}
svg .box-t{font-size:12.5px;font-weight:600;fill:var(--ink);text-anchor:middle}
svg .box-s{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--steel);text-anchor:middle}
svg .edge{fill:none;stroke:var(--steel-2);stroke-width:1.4}
svg .edge.opt{stroke-dasharray:4 4;stroke:#b9c3ca}
svg .edge.done{stroke:var(--action);stroke-width:2.2}
svg .edge-label{font-family:var(--mono);font-size:9.5px;fill:var(--steel);text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;letter-spacing:.02em}
svg .edge{stroke-linejoin:round;stroke-linecap:round}
svg .edge-label.done{fill:var(--action);font-weight:700}

.legend{display:flex;flex-wrap:wrap;gap:16px;padding:12px 16px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);align-items:center}
.legend i{width:14px;height:11px;border:1.25px solid var(--steel-2);background:#fff;display:inline-block;margin-right:6px;vertical-align:-1px}
.legend i.now{background:var(--signal-l);border-color:var(--signal)}
.legend i.done{background:var(--primair-l);border-color:var(--primair)}

.mailkop{background:#f4f7f8;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;font-size:13px;display:grid;gap:4px}

.aiform{border:1px solid #CBE0E2;background:linear-gradient(180deg,var(--primair-l),#fff 60%);
  border-radius:10px;margin:0 0 16px;overflow:hidden}
.aiform-kop{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid #CBE0E2}
.aiform-kop b{font-size:12.5px;color:var(--primair)}
.aiform-inhoud{padding:11px 12px;display:grid;gap:9px;font-size:12.5px;line-height:1.5}
.ai-tip{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ai-neem{margin-left:auto;background:var(--primair);color:#fff;border:0;border-radius:14px;
  padding:4px 11px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.ai-neem:hover{background:var(--primair-d)}
.ai-blok{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:9px 11px}
.ai-blok b{font-size:11.5px}
.ai-klein{color:var(--steel);font-size:11.5px}
.ai-waarschuwing{background:var(--signal-l);border:1px solid #F2DCA8;border-radius:var(--r-s);padding:9px 11px}

.bd-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);gap:16px;align-items:start}
.bd-voortgang{height:12px;background:var(--line-2);border-radius:6px;overflow:hidden}
.bd-voortgang>div{height:100%;background:linear-gradient(90deg,var(--primair),var(--green));border-radius:6px;transition:width .4s}
.bd-fase{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;
  overflow:hidden;box-shadow:var(--shadow)}
.bd-fasekop{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.bd-bol{min-width:34px;height:22px;border-radius:11px;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:700;padding:0 7px}
.bd-stap{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--line-2);cursor:pointer}
.bd-stap:last-child{border-bottom:0}
.bd-stap:hover{background:var(--paper)}
.bd-stap.actief{background:var(--primair-l);box-shadow:inset 3px 0 0 var(--primair)}
.bd-vink{width:20px;height:20px;border-radius:50%;border:1.8px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.bd-vink.af{background:var(--green);border-color:var(--green)}
.bd-tekst{min-width:0;flex:1}
.bd-titel{font-size:13.5px;font-weight:600}
.bd-stap.af .bd-titel{color:var(--steel)}
.bd-tijd{white-space:nowrap}
.bd-buddy{position:sticky;top:74px}
.bd-kop{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--primair-l);
  border-bottom:1px solid #CBE0E2}
.bd-kop b{font-size:15px;line-height:1.25;display:block}
.bd-waarom p{font-size:13.5px;line-height:1.6;margin:5px 0 0}
.bd-tip{background:var(--signal-l);border:1px solid #F2DCA8;border-radius:var(--r-s);padding:9px 11px;
  font-size:12.5px;line-height:1.5;margin:12px 0}
.bd-stand{font-size:12.5px;background:var(--paper);border-radius:var(--r-s);padding:8px 11px}
.bd-navig{display:flex;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
@media(max-width:1000px){.bd-raster{grid-template-columns:1fr}.bd-buddy{position:static}}

/* ---- rondleiding ---- */
.tour-laag{position:fixed;inset:0;z-index:150;background:rgba(22,38,45,.62);animation:tourIn .25s}
@keyframes tourIn{from{opacity:0}to{opacity:1}}
.tour-gat{position:absolute;border-radius:8px;box-shadow:0 0 0 9999px rgba(22,38,45,.62);
  border:2px solid var(--signal);transition:all .25s cubic-bezier(.4,0,.2,1)}
.tour-bel{position:absolute;width:330px;background:#fff;border-radius:12px;padding:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.32);transition:all .25s cubic-bezier(.4,0,.2,1)}
.tour-bel b{display:block;font-size:15px;margin:4px 0 6px}
.tour-bel p{font-size:13px;line-height:1.55;margin:0;color:var(--steel)}
.tour-knoppen{display:flex;gap:7px;margin-top:14px}
.tour-knoppen .btn:last-child{margin-left:auto}

/* ---- de taalschakelaar in de bovenbalk ---- */
/* ---- het weer in de balk ---- */
.weer{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 12px 5px 10px;cursor:pointer;
  color:var(--steel);font-family:inherit;white-space:nowrap}
.weer:hover{border-color:var(--primair);color:var(--ink)}
.weer b{font-size:13.5px;font-weight:600;color:var(--ink)}
.weer .weer-wind{font-size:11.5px;letter-spacing:.02em}
.weer .weer-pijl{color:var(--primair)}
.weer.oud{opacity:.65}
.weer .weer-uit{font-size:11.5px}
@media(max-width:1100px){.weer .weer-wind{display:none}}
@media print{.weer{display:none}}

.taalkeuze{display:inline-flex;margin-left:8px;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:var(--paper)}
.taalkeuze button{border:0;background:transparent;padding:5px 11px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--steel);cursor:pointer;font-family:inherit}
.taalkeuze button:hover{color:var(--ink)}
.taalkeuze button.on{background:var(--primair);color:#fff}

/* ---- ble., de assistent ---- */
/* ble. staat rechtsonder klaar; hij steekt een klein stukje boven zijn
   ronde plaatje uit, zodat de helm zichtbaar blijft */
.ai-knop{position:fixed;right:22px;bottom:22px;z-index:90;width:64px;height:64px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);box-shadow:0 6px 22px rgba(15,31,61,.2);
  cursor:pointer;display:grid;place-items:center;padding:0;overflow:visible;
  transition:transform .18s,box-shadow .18s}
.ai-knop .ai-fig{width:50px;filter:drop-shadow(0 3px 6px rgba(15,31,61,.22));
  transition:transform .2s}
.ai-knop:hover .ai-fig{transform:translateY(-2px) scale(1.06)}
.ble-heel{margin:0 auto;filter:drop-shadow(0 8px 20px rgba(15,31,61,.18))}
.ai-knop:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 28px rgba(22,38,45,.28)}
.ai-knop.open{transform:scale(.9);opacity:.6}
.ai-context{margin-top:8px;padding-top:7px;border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--steel-2);line-height:1.5}
.ai-context b{color:var(--steel);font-weight:600}
.ai-knop.opzij{right:auto;left:22px}
@media(max-width:620px){.ai-knop.opzij{left:14px;bottom:14px}}
.ai-knop .ai-fig{animation:aiWiegen 4s ease-in-out infinite}
@keyframes aiWiegen{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(7deg)}}
.ai-punt{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--signal);
  border:2px solid #fff;animation:aiPuls 2s infinite}
@keyframes aiPuls{0%,100%{box-shadow:0 0 0 0 rgba(255,183,3,.6)}70%{box-shadow:0 0 0 8px rgba(255,183,3,0)}}
.ai-paneel{position:fixed;right:22px;bottom:96px;z-index:91;width:min(380px,calc(100vw - 44px));
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(22,38,45,.28);
  display:none;flex-direction:column;overflow:hidden;max-height:min(620px,calc(100vh - 140px))}
.ai-paneel.open{display:flex;animation:aiIn .26s cubic-bezier(.2,.9,.3,1.1)}
@keyframes aiIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ai-kop{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line-2);
  background:var(--primair-l)}
.ai-kop b{font-size:14px}
.ai-sluit{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;color:var(--steel);cursor:pointer}
.ai-gesprek{flex:1;overflow-y:auto;padding:14px 15px;display:grid;gap:12px;align-content:start}
.ai-bericht{display:flex;gap:8px;align-items:flex-end}
.ai-bericht.ik{justify-content:flex-end}
.ai-mini{flex:none;line-height:0}
.ai-bel{background:var(--paper);border-radius:12px 12px 12px 3px;padding:10px 13px;font-size:13px;line-height:1.5;
  max-width:84%;overflow-wrap:anywhere}
.ai-bericht.ik .ai-bel{background:var(--primair);color:#fff;border-radius:12px 12px 3px 12px}
.ai-voorstellen{display:flex;gap:6px;flex-wrap:wrap;padding:0 15px 10px}
.ai-voorstellen button{background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px 11px;
  font-size:11.5px;cursor:pointer;color:var(--primair);font-weight:600}
.ai-voorstellen button:hover{background:var(--primair-l);border-color:var(--primair)}
.ai-invoer{display:flex;gap:7px;padding:11px 13px;border-top:1px solid var(--line-2);background:var(--paper)}
.ai-invoer input[type=text]{border-radius:20px;padding:8px 14px}
@media(max-width:620px){.ai-paneel{right:12px;left:12px;width:auto;bottom:88px}.ai-knop{right:14px;bottom:14px}}
@media print{.ai-knop,.ai-paneel{display:none!important}}

/* ---- openingspagina met login ---- */
/* Het vak staat gecentreerd, maar bij weinig hoogte (een telefoon in
   liggende stand, of een browser met een balk eroverheen) moet het
   gewoon te schuiven zijn. Met flex en marge rondom blijft de bovenkant
   bereikbaar; met place-items:center valt die buiten beeld. */
.inlog{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;
  align-items:flex-start;padding:24px;overflow:auto;-webkit-overflow-scrolling:touch;
  /* Een rustig donker verloop van Deep Navy naar Soft Navy. Het blauw van
     het logo moet ertegen afsteken; een blauwe achtergrond zou het juist
     laten wegvallen. */
  background:radial-gradient(130% 100% at 20% 0%, #253A63 0%, #16294A 45%, #0F1F3D 100%)}
.inlog>.inlog-vak{margin:auto;position:relative;z-index:1}
.inlog.weg{animation:inlogWeg .55s cubic-bezier(.6,0,.35,1) forwards}
@keyframes inlogWeg{to{opacity:0;transform:scale(1.04);visibility:hidden}}
.inlog-scheiding{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--steel)}
.inlog-scheiding:before,.inlog-scheiding:after{content:"";flex:1;height:1px;background:var(--line)}
.inlog-scheiding span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.inlog-vak{position:relative;width:min(400px,100%);text-align:center;color:#fff}
.inlog-merk{display:inline-block;animation:merkIn .8s cubic-bezier(.2,.9,.3,1.2) both;
  margin-bottom:6px}
.inlog-merk .merklogo{gap:20px}
.inlog-merk img{filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
@keyframes merkIn{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
.inlog-titel{font-size:27px;font-weight:700;line-height:1.05;letter-spacing:.02em;margin:14px 0 4px;
  animation:omhoog .6s .25s both}
.inlog-titel span{font-weight:400}
.inlog-claim{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin:0 0 26px;animation:omhoog .6s .38s both}
.inlog-kaart{background:rgba(255,255,255,.97);border-radius:14px;padding:24px 22px 20px;text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.28);color:var(--ink);animation:omhoog .65s .5s both}
@keyframes omhoog{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.inlog-kaart .btn{width:100%;padding:11px;font-size:14px;margin-top:4px}
.inlog-rij{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 14px}
.inlog-vink{display:flex;gap:7px;align-items:center;font-size:12.5px;cursor:pointer}
.inlog-vink input{width:15px;height:15px;accent-color:var(--primair)}
/* de ingang naar het beheerportaal staat los onder de kaart: wel bereikbaar,
   maar niet even nadrukkelijk als het gewone aanmelden */
.inlog-portaal{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  margin:18px auto 0;padding:9px 22px;background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;cursor:pointer;
  font-family:inherit;transition:background .15s,border-color .15s}
.inlog-portaal:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.inlog-portaal span:first-child{display:block;font-size:12.5px;font-weight:600}
.inlog-portaal .plate{color:var(--ijs);font-size:9.5px;letter-spacing:.06em}

/* Het opkomen van het scherm zat op .app zelf. Een element met een
   animatie die verschuift, wordt het ankerpunt voor alles wat eronder
   'vast aan het scherm' staat — ook als de animatie allang klaar is.
   Daardoor schoof de zijbalk toch mee bij het scrollen. De animatie zit
   nu op het werkgebied, waar hij niets in de weg zit. */
main{animation:appIn .5s .05s both}
@keyframes appIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .inlog *,.app,main{animation:none!important}
  .inlog-merk .merk .mk-2{opacity:1}
}

/* ---- beheerportaal: eigen jas, zodat je nooit twijfelt waar je bent ---- */
body.portaal-beheer{background:#EDEFEE}
body.portaal-beheer .rail{background:#0A1730}
body.portaal-beheer .nav button.on{background:var(--signal);color:var(--ink)}
body.portaal-beheer .nav button.on .count{background:rgba(22,38,45,.18);color:var(--ink)}
body.portaal-beheer .rail-foot .avatar{background:var(--signal);color:var(--ink)}
body.portaal-beheer .brand b i{color:#fff}
body.portaal-beheer .topbar{border-bottom-color:var(--ink);box-shadow:inset 0 -3px 0 var(--signal)}
.sitenaam.beheer{color:var(--ink);background:var(--signal)}

/* ---- eenmalige aanmelding ---- */
.sso-knop{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:11px 13px;cursor:pointer;text-align:left;transition:.12s}
.sso-knop:hover{border-color:var(--primair);background:var(--primair-l)}
.sso-knop b{display:block;font-size:13.5px}
.sso-knop>span:last-child{flex:1;text-align:center}
.win-logo{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:20px;height:20px;flex:none}
.win-logo.groot{width:26px;height:26px;gap:3px}
.win-logo i{display:block;border-radius:1px}
.win-logo i:nth-child(1){background:#F25022}
.win-logo i:nth-child(2){background:#7FBA00}
.win-logo i:nth-child(3){background:#00A4EF}
.win-logo i:nth-child(4){background:#FFB900}
.sso-kop{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.sso-account{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);padding:11px 13px;margin-bottom:14px}
.sso-account .avatar{width:40px;height:40px;font-size:14px}
.sso-account .naam{font-weight:600;font-size:13.5px}
.sso-account .mail{font-size:12px;color:var(--steel);word-break:break-all}
.sso-account .aan{margin-left:auto;flex:none}
.sso-stappen{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;min-height:104px}
.sso-stappen li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--steel-2);
  opacity:0;transform:translateY(4px);animation:stapIn .3s forwards}
.sso-stappen li.bezig{color:var(--ink)}
.sso-stappen li.klaar{color:var(--ink)}
@keyframes stapIn{to{opacity:1;transform:none}}
.sso-vink{width:16px;height:16px;border-radius:50%;flex:none;margin-top:1px;display:grid;place-items:center;
  border:1.5px solid var(--line);font-size:9px;color:#fff;font-weight:700}
li.klaar .sso-vink{background:var(--green);border-color:var(--green)}
li.bezig .sso-vink{border-color:var(--primair);border-right-color:transparent;animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
.sso-stappen .detail{display:block;font-size:11px;color:var(--steel-2)}
.sso-terug{background:none;border:0;color:var(--primair);font-size:12.5px;font-weight:600;cursor:pointer;
  width:100%;padding:10px 0 0}
.inlog-kaart.sso .btn:disabled{opacity:.5}

/* ---- dashboard in huisstijl ---- */
.kpikaart{padding:16px 18px 14px;cursor:pointer;position:relative;transition:border-color .12s,box-shadow .12s}
.kpikaart:hover{border-color:var(--primair);box-shadow:0 2px 4px rgba(37,45,47,.06),0 8px 20px rgba(0,109,119,.10)}
.kpi-kop{display:flex;align-items:flex-start;gap:10px}
.kpi-ico{margin-left:auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--primair-l);color:var(--primair)}
.kpi-ico .ico{width:18px;height:18px}
.kpikaart.rood .kpi-ico{background:var(--red-l);color:var(--red)}
.kpikaart.rood .v{color:var(--red)}
.kpikaart.accent .kpi-ico{background:var(--signal-l);color:var(--amber)}
.kpikaart .v{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:8px 0 6px}
.kpi-link{font-size:12px;font-weight:600;color:var(--primair)}

.donutrij{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.donut-getal{text-anchor:middle;font-family:var(--sans);font-size:26px;font-weight:700;fill:var(--ink)}
.donut-label{text-anchor:middle;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;fill:var(--steel)}
.donutlijst{flex:1;min-width:170px;display:grid;gap:7px}
.donutregel{display:flex;align-items:center;gap:9px;font-size:13px}
.donutregel b{margin-left:auto;font-variant-numeric:tabular-nums}
.bol{width:9px;height:9px;border-radius:50%;flex:none}

.staven{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:8px;min-height:0}
.staaf{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.staafbalk{width:100%;max-width:46px;background:var(--primair);border-radius:5px 5px 2px 2px;min-height:3px;flex:none}
.staafgetal{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.staaf .plate{font-size:10px}

.strook{display:grid;gap:4px}
.strookrij{display:grid;grid-template-columns:58px repeat(7,1fr);gap:3px;align-items:center}
.strookrij.kop{margin-top:2px}
.strooknaam{font-size:11.5px;font-weight:600;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strookcel{height:22px;background:var(--paper);border-radius:4px;display:grid;place-items:center}
.strookrij.kop .strookcel{background:none;height:auto}
.strookbalk{width:100%;height:100%;background:var(--primair);color:#fff;border-radius:4px;
  display:grid;place-items:center;font-size:10.5px;font-weight:600}
.strookbalk.vol{background:var(--red)}
@media(max-width:1000px){#dashrij1{grid-template-columns:1fr!important}}

/* Het dashboard is een raster van vier kolommen. Tegels in dezelfde rij
   worden even hoog, zodat er geen gaten onder de kortste tegel vallen en
   het geheel rustig oogt. De kaart erin rekt mee. */
.vast-redenen{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.dashraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  align-items:stretch;grid-auto-flow:row dense}
.dashraster>.dw{display:flex}
.dashraster>.dw>.card{flex:1;display:flex;flex-direction:column;min-width:0}
.dashraster>.dw>.card>.body:last-child{flex:1}
.dashraster>.dw>.kpirij{flex:1}
@media(min-width:1600px){
  .dashraster{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dw.span3{grid-column:span 4}
}
@media(min-width:2100px){
  .dashraster{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dw.span3{grid-column:span 5}
}
.dw{min-width:0;position:relative}
/* De kengetallenrij besloeg vier kolommen. Op een breed scherm telt het
   raster er vijf, waardoor er een tegel naast kwam te staan en de vier
   kaarten werden uitgerekt tot de hoogte daarvan. Zij staan nu altijd
   alleen op hun eigen regel, op hun eigen hoogte. */
.dashraster>.dw[data-w="kpi"]{grid-column:1/-1;align-self:start}
/* Een tegel uitrekken tot de rechterrand leverde juist een gat in het
   midden op. De rij loopt liever door tot waar hij komt. */
.dw.span1{grid-column:span 1}
.dw.span2{grid-column:span 2}
.dw.span3{grid-column:span 3}
.dw.span4{grid-column:span 4}
@media(max-width:1150px){
  .dashraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dw.span3,.dw.span4{grid-column:span 2}
}
@media(max-width:760px){
  .dashraster{grid-template-columns:1fr}
  .dw.span1,.dw.span2,.dw.span3,.dw.span4{grid-column:span 1}
}
.dw>.card{height:100%}
.dw.indelen{outline:1px dashed var(--steel-2);outline-offset:3px;border-radius:12px}
.dw.indelen:hover{outline-color:var(--primair)}
.dw.sleept{opacity:.4}
.dw.over{outline:2px solid var(--primair);outline-offset:3px}
.dw-balk{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  border-radius:8px 8px 0 0;padding:5px 9px;font-size:11.5px;cursor:grab}
.dw-greep{letter-spacing:-2px;opacity:.6}
.dw-naam{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-maat{margin-left:auto;display:flex;align-items:center;gap:4px}
.dw-maat button,.dw-weg{background:rgba(255,255,255,.14);border:0;color:#fff;width:20px;height:20px;
  border-radius:4px;cursor:pointer;line-height:1;font-size:13px;display:grid;place-items:center}
.dw-maat button:disabled{opacity:.3;cursor:not-allowed}
.dw-maat b{min-width:12px;text-align:center}
.dw-grip{position:absolute;right:-4px;top:34px;bottom:8px;width:9px;cursor:col-resize;border-radius:4px;
  background:linear-gradient(var(--primair),var(--primair));opacity:.25}
.dw-grip:hover{opacity:.7}
.kpirij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1150px){
  .dashraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dw.span3{grid-column:span 2}
  .kpirij{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .dashraster{grid-template-columns:minmax(0,1fr)}
  .dw.span2,.dw.span3{grid-column:span 1}
  .kpirij{grid-template-columns:minmax(0,1fr)}
}

/* werkorders als lijst binnen een tegel */
.wolijst{display:grid;align-content:start;flex:1}
.wolijst .wo-meer{margin-top:auto}
.dashraster .card>.body{display:flex;flex-direction:column}
/* de lijsten in een tegel vullen de kaart; de voetregel zakt naar onder */
.dashraster .body>.wolijst{margin:0 -16px -14px}
.dashraster .wolijst{border-top:1px solid var(--line-2)}
.dashraster>.dw>.card>.wolijst{margin-bottom:0}
.dashraster .wolijst .wo-regel:first-child{border-top:0}
.wo-regel{padding:11px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;min-width:0}
.wo-regel:last-child{border-bottom:0}
.wo-regel:hover{background:var(--paper)}
.wo-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wo-titel{font-weight:600;font-size:13.5px;line-height:1.35;margin:3px 0 5px;overflow-wrap:anywhere}
.wo-voet{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0}
/* De statuschip stond direct achter de tag en begon daardoor op elke regel
   ergens anders. Nu staan de chips rechts uitgelijnd, zodat ze onder
   elkaar op één lijn eindigen. De tag krimpt mee en kapt af. */
.wo-voet>.tag{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wo-voet>.chip{order:3;flex:none;margin-left:auto}
.wo-voet>.plate{order:2;flex:none;margin-left:auto;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:38%}
.wo-voet>.plate~.chip{margin-left:0}
.wo-voet>.tag{flex:0 0 auto}
.wo-voet>.chip{flex:0 0 auto}
.wo-voet>.plate{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:right}
.wo-kop .sla{margin-left:auto}
.wo-meer{padding:9px 16px}
.dashraster>*{min-width:0}
.dashraster .card{overflow:hidden}
.dashraster table{width:100%}
.dashraster td,.dashraster th{word-break:break-word}
.rechtentabel td:first-child,.rechtentabel th:first-child{text-align:left;min-width:230px}
.rechtentabel input{width:16px;height:16px;accent-color:var(--primair)}
.rechtentabel th{white-space:nowrap}

.stroomkiezer{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.stroomkiezer button{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 13px;cursor:pointer;text-align:left;min-width:150px;box-shadow:var(--shadow)}
.stroomkiezer button:hover{border-color:var(--primair)}
.stroomkiezer button.on{border-color:var(--primair);border-width:2px;padding:8px 12px;background:var(--primair-l)}
.sk-naam{display:block;font-size:13.5px;font-weight:600}
.stroomkiezer .plate{font-size:9.5px}

/* ---- instellingen ---- */
.insgrid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:18px;align-items:start}
@media(min-width:1500px){ .insgrid{grid-template-columns:270px minmax(0,1fr)} }
.insmenu{display:grid;gap:2px;position:sticky;top:74px}
/* ---- de inrichtingswizard ---- */
/* de voortgangsbalk en de opmaak van één vraag */
/* de inrichtingschecklist */
.inr-lijst{border-top:1px solid var(--line)}
.inr-stap-rij{border-bottom:1px solid var(--line-2)}
.inr-stap-rij.open{background:var(--paper)}
.inr-stap-kop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
  border:0;padding:12px 18px;cursor:pointer}
.inr-stap-kop:hover{background:var(--primair-l)}
.inr-bol{width:9px;height:9px;border-radius:50%;flex:none}
.inr-nr{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--steel);
  font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.inr-stap-kop b{display:block;font-size:13px}
.inr-nu{flex:none;width:230px;text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.inr-nu *{white-space:nowrap}
.inr-stand{flex:none;width:70px;text-align:right;font-size:11px;font-weight:700}
.inr-chevron{flex:none;color:var(--steel-2);font-size:11px}
.inr-uitleg{padding:0 18px 16px 71px}
.inr-waarom{font-size:13px;line-height:1.55;color:var(--ink);max-width:70ch;margin-bottom:10px}
.inr-uitleg ul{margin:0 0 12px;padding-left:18px;font-size:12.5px;color:var(--steel);
  line-height:1.7;max-width:70ch}
@media(max-width:900px){.inr-nu{display:none}.inr-uitleg{padding-left:18px}}

/* De lagentabel heeft veel smalle kolommen; met vaste breedtes houden de
   invoervelden hun ruimte en blijft de tabel binnen de kaart. */
.lagentabel{table-layout:fixed;width:100%}
.lagentabel th,.lagentabel td{box-sizing:border-box;padding:7px 5px;vertical-align:middle}
.lagentabel input[type=text],.lagentabel input[type=number],.lagentabel select{width:100%;
  font-size:12px;padding:5px 6px;box-sizing:border-box}
.lagentabel .kol-nr{width:30px}
.lagentabel .kol-teken{width:132px}
.lagentabel .kol-naam{width:150px}
.lagentabel .kol-uitleg{width:auto}
.lagentabel .kol-soort{width:118px}
.lagentabel .kol-modus{width:96px}
.lagentabel .kol-code{width:88px}
.lagentabel .kol-cijfers{width:58px}
.lagentabel .kol-vb{width:74px}
.lagentabel .kol-gebruik{width:62px;text-align:right}
.lagentabel .kol-knop{width:104px}
.lagentabel .kol-knop .btn{padding:3px 7px}

/* het pictogram bij een laag: de keuzelijst met het teken ernaast */
/* het teken staat v\u00f3\u00f3r de keuzelijst, zodat zichtbaar is wat er gekozen is */
.lagentabel td.kol-teken{display:flex;align-items:center;gap:6px}
.laag-icoonkeuze{flex:1;min-width:0;font-size:11.5px;padding:4px 5px}
.laag-icoon{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;
  color:var(--primair)}
.laag-icoon .ico{width:17px;height:17px}

/* de lagen van de stamboom in de wizard */
.insinhoud table{max-width:100%}
.insinhoud .plate{overflow-wrap:anywhere}
.lg-kop,.lg-regel{display:grid;grid-template-columns:24px 20px minmax(0,1fr) 130px 230px 78px;
  gap:9px;align-items:center}
.lg-kop{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-2);padding:0 8px 6px}
.lg-lijst{display:grid;gap:5px}
.lg-regel{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--card)}
.lg-regel.uit{opacity:.5}
.lg-nr{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--steel);
  font-size:11px;font-weight:700;display:grid;place-items:center}
.lg-naam input{width:100%;font-weight:600;font-size:12.5px}
.lg-werk{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--steel);
  white-space:nowrap}
.lg-code{display:flex;gap:5px}
.lg-code select,.lg-code input{font-size:11.5px;padding:4px 6px}
.lg-code input{width:64px;font-family:var(--mono)}
.lg-aantal{text-align:right;white-space:nowrap}
@media(max-width:1100px){.lg-kop{display:none}
  .lg-regel{grid-template-columns:28px 24px 1fr;row-gap:6px}
  .lg-werk,.lg-code,.lg-aantal{grid-column:3}}

/* de drie beginrichtingen met hun keten in beeld */
.inr-kaart{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  margin-bottom:10px;cursor:pointer;background:var(--card)}
.inr-kaart:hover{border-color:var(--primair)}
.inr-kaart.aan{border-color:var(--primair);background:var(--primair-l)}
.inr-kop{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.inr-kop b{font-size:14px}
.inr-kop .plate{margin-left:auto;white-space:nowrap}
.inr-tekst{font-size:12.5px;color:var(--steel);line-height:1.5;margin-bottom:11px}
.inr-keten{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap;margin-bottom:11px}
.inr-stap{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;background:var(--card);min-width:0}
.inr-stap b{font-size:11.5px;white-space:nowrap}
.inr-stap .plate{font-size:9.5px}
.inr-stap.start{border-color:var(--primair)}
.inr-stap.eind{border-color:var(--green)}
.inr-pijl{display:grid;place-items:center;color:var(--steel-2);font-size:13px}
.inr-voet{display:grid;gap:4px;font-size:11.5px;color:var(--steel);border-top:1px solid var(--line-2);
  padding-top:9px}
.inr-voet b{color:var(--ink);margin-right:5px}
.wiz-balk{height:4px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-bottom:14px}
.wiz-balk>div{height:100%;background:var(--primair);border-radius:2px;transition:width .25s}
.wiz-kaart{margin-bottom:14px}
.wiz-uitleg{font-size:13.5px;line-height:1.55;color:var(--ink);max-width:70ch}
.wiz-gevolg{margin-top:10px;font-size:12px;color:var(--steel);border-left:3px solid var(--primair);
  padding-left:10px}
.wiz-gevolg b{color:var(--primair);text-transform:uppercase;font-size:10px;letter-spacing:.08em;
  margin-right:6px}
.wiz-voorbeeld{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--primair);
  background:var(--primair-l);border-radius:9px;padding:12px 16px;display:inline-block}
.wiz-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.wiz-keuze{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;cursor:pointer;background:var(--card)}
.wiz-keuze:hover{border-color:var(--primair)}
.wiz-keuze.aan{border-color:var(--primair);background:var(--primair-l)}
.wiz-keuze.vast{opacity:.6;cursor:default}
.wiz-keuze b{font-size:13px}
.wiz-inhoud{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.wiz-inhoud ul{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--steel);line-height:1.7}
.wiz-inhoud b{font-size:12.5px}
@media(max-width:860px){.wiz-inhoud{grid-template-columns:1fr}}
.wiz-voet{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wiz-lijst{display:grid;gap:6px}
.wiz-regel{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;
  padding:8px 11px}
.wiz-regel b{flex:1;font-size:12.5px}
.wiz-kop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wiz-kop b{font-size:16px}
.wiz-rollen{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.wiz-rol{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;cursor:pointer;background:var(--card)}
.wiz-rol:hover{border-color:var(--primair)}
.wiz-rol.aan{border-color:var(--primair);background:var(--primair-l)}
.wiz-rol.vast{opacity:.75;cursor:default}
.wiz-rol b{font-size:13px}
/* de rolkoppen schuin, anders lopen ze over elkaar heen bij acht rollen */
.wiz-tabel{table-layout:fixed;width:100%}
.wiz-tabel th.wiz-rolkop{width:52px;height:118px;vertical-align:bottom;padding:0 0 8px;
  position:relative}
.wiz-tabel th.wiz-rolkop span{display:block;transform:rotate(-60deg);transform-origin:left bottom;
  position:absolute;bottom:10px;left:50%;white-space:nowrap;font-size:11px;font-weight:600;
  color:var(--ink)}
.wiz-tabel td{padding:9px 4px}
.wiz-tabel input[type=checkbox]{width:16px;height:16px}
.wiz-vraag{max-width:420px}
.wiz-vraag b{font-size:12.5px}
.insmenu-kop{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel-2);padding:15px 12px 4px}
.insmenu-kop:first-child{padding-top:2px}
.insmenu button{text-align:left;background:none;border:0;border-left:3px solid transparent;
  padding:8px 12px;border-radius:0 var(--r) var(--r) 0;cursor:pointer;font-size:13.5px;color:var(--steel)}
.insmenu button:hover{background:#eef2f4;color:var(--ink)}
.insmenu button.on{background:var(--card);border-left-color:var(--action);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.insvink{padding:8px 0;border-top:1px solid var(--line-2)}
.insvink:first-child{border-top:0}
.insvink label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px}
.insvink input{width:16px;height:16px;accent-color:var(--action);margin-top:2px;flex:none}
.card.waarschuwing{border-color:var(--red)}
@media(max-width:900px){.insgrid{grid-template-columns:1fr}.insmenu{position:static;display:flex;flex-wrap:wrap}
  .insmenu button{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;border-radius:var(--r) var(--r) 0 0}
  .insmenu button.on{border-left:0;border-bottom-color:var(--action)}}

/* ---- documenten op A4 ---- */
.printbalk{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
.a4{background:#fff;border:1px solid var(--line);box-shadow:0 3px 16px rgba(16,24,32,.10);
  width:100%;max-width:820px;margin:0 auto;padding:20mm 18mm 14mm;font-size:11.5px;line-height:1.4;color:var(--ink)}
.doc-kop{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:start;
  border-bottom:2.5px solid var(--ink);padding-bottom:10px}
.doc-merk{display:flex;gap:10px;align-items:center}
.doc-logo{width:40px;height:40px;border-radius:8px;background:var(--primair);display:grid;place-items:center;flex:none}
.doc-bedrijf{font-size:14px;font-weight:700;letter-spacing:-.01em}
.doc-titel{text-align:right;padding-right:14px;border-right:1px solid var(--line)}
.doc-t1{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.doc-t2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:2px}
.doc-beheer{width:auto;border-collapse:collapse}
.doc-beheer th{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  text-align:left;padding:1px 10px 1px 0;border:0;font-weight:500}
.doc-beheer td{padding:1px 0;border:0;font-size:11px}
.doc-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0 2px;border-bottom:1px solid var(--line-2)}
.doc-sectie{display:flex;align-items:baseline;gap:9px;background:var(--primair-l);border-left:3px solid var(--primair);
  padding:4px 9px;margin:12px 0 7px}
.doc-nr{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--primair)}
.doc-nl{font-size:11.5px;font-weight:700;letter-spacing:.01em}
.doc-en{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.doc-raster2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.doc-raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.doc-raster4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
.doc-veld{padding:3px 0;border-bottom:1px dotted #c9d2d7;min-width:0}
.doc-veld.breed{grid-column:1/-1}
.doc-label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.doc-label i{font-style:normal;color:var(--steel-2);text-transform:none;letter-spacing:.04em}
.doc-waarde{display:block;margin-top:1px;white-space:pre-wrap;word-break:break-word}
.doc-hokken{display:grid;grid-template-columns:1fr 1fr;gap:1px 18px}
.doc-hokken.drie{grid-template-columns:repeat(3,1fr)}
.doc-hok{display:flex;gap:6px;align-items:flex-start;padding:1.5px 0;color:#8b979f}
.doc-hok.aan{color:var(--ink);font-weight:500}
.vak{width:12px;height:12px;border:1.4px solid var(--steel);border-radius:1px;flex:none;margin-top:1.5px;
  display:grid;place-items:center;font-size:9px;line-height:1;color:var(--ink);font-weight:700}
.doc-hok.aan .vak{border-color:var(--ink);background:#fffbe8}
.doc-leeg{color:var(--steel);font-style:italic;padding:3px 0}
.doc-tabel{width:100%;border-collapse:collapse;margin-top:2px}
.doc-tabel th{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
  text-align:left;padding:4px 7px;border-bottom:1px solid var(--steel-2);font-weight:500}
.doc-tabel td{padding:4px 7px;border-bottom:1px solid var(--line-2);font-size:11px;vertical-align:top}
.doc-tabel.klein td{font-size:10px;padding:3px 7px}
.handen{gap:0 18px;margin-top:8px}
.doc-hand{border:1px solid var(--steel-2);padding:8px 10px}
.doc-lijnen{display:grid;gap:9px;margin-top:7px}
.doc-lijn{border-bottom:1px solid var(--ink);min-height:19px;padding-top:2px;font-size:12px}
.doc-lijnenblok{margin-top:2px}
.doc-schrijf{border-bottom:1px dotted var(--steel-2);height:17px}
.doc-voet{display:flex;justify-content:space-between;gap:12px;margin-top:14px;border-top:1px solid var(--ink);
  padding-top:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--steel)}
body.afdrukmodus{background:#dfe4e7}
body.afdrukmodus .wrap{max-width:none}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff!important}
  .rail,.topbar,.printbalk,#modal-root,.toast{display:none!important}
  .app{display:block}
  main{display:block}
  .wrap{padding:0!important;max-width:none!important;width:auto!important}
  .a4{border:0;box-shadow:none;max-width:none;width:auto;margin:0;padding:14mm 13mm}
  .doc-sectie{break-after:avoid;page-break-after:avoid;background:#E8F0FC!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc-logo{background:#5B8FDE!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc-hand,.doc-tabel tr,.doc-hokken,.doc-raster2,.doc-raster3,.doc-raster4{break-inside:avoid;page-break-inside:avoid}
  .chip,.pri,.tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.filterbalk{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-2);background:var(--paper)}
.filterbalk input[type=text],.filterbalk select{width:auto}
.filterinfo{padding:8px 16px;border-bottom:1px solid var(--line-2)}
.chip.soortCOR{color:var(--amber);border-color:currentColor;background:#fff}
.chip.soortPRE{color:var(--action);border-color:currentColor;background:#fff}
.chip.soortPRO{color:var(--violet);border-color:currentColor;background:#fff}

.tafelwrap{position:relative;height:440px;margin:16px 0 6px}
@media(min-width:1400px){
  .tafelwrap{height:520px}
  .tafel{width:400px;height:196px}
  .stoel{width:200px}
}
@media(min-width:1900px){
  .tafelwrap{height:560px}
  .tafel{width:460px;height:210px}
  .stoel{width:220px}
  .stoel-avatar{width:40px;height:40px;font-size:13px}
  .stoel-rol{font-size:14px}
}
.tafel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:300px;height:158px;border-radius:80px;background:var(--primair-l);border:1px solid #CBE0E2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 26px;text-align:center;
  box-shadow:inset 0 1px 0 #fff, 0 2px 10px rgba(16,24,32,.06)}
.tafel-titel{font-size:12.5px;color:var(--steel);line-height:1.4}
.stoel{position:absolute;transform:translate(-50%,-50%);width:176px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:9px 8px;box-shadow:var(--shadow)}
.stoel-avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:12px;margin:0 auto 6px}
.stoel-rol{font-size:13px;font-weight:600;line-height:1.2}
.stoel.geweest{border-color:var(--primair);background:var(--primair-l)}
.stoel.geweest .stoel-avatar{background:var(--primair);color:#fff}
.stoel.aanzet{border-color:var(--signal);border-width:2px;box-shadow:0 0 0 4px rgba(255,183,3,.28), var(--shadow)}
.stoel.aanzet .stoel-avatar{background:var(--signal);color:var(--ink)}
.stoel-merk{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--signal);color:var(--ink);border-radius:2px;padding:2px 6px;display:inline-block;margin-top:5px}
.beurt{display:flex;align-items:center;gap:12px}
.beurt-avatar{width:44px;height:44px;border-radius:50%;background:var(--signal);color:var(--ink);
  display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:15px;flex:none}
@media(max-width:820px){
  .tafelwrap{height:auto;display:grid;gap:8px}
  .tafel{position:static;transform:none;width:auto;height:auto;padding:14px;border-radius:var(--r);margin-bottom:4px}
  .stoel{position:static;transform:none;width:auto;display:flex;align-items:center;gap:10px;text-align:left}
  .stoel-avatar{margin:0}
  .stoel-merk{margin-top:0;margin-left:auto}
}

.fasen{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
.fase{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:5px 10px}
.fase.gehad{background:var(--primair-l);border-color:var(--primair)}
.fase.gehad .plate{color:var(--action)}
.fase.nu{background:var(--signal);border-color:var(--signal)}
.fase.nu .plate{color:var(--ink);font-weight:700}

.healthbalken{display:grid;gap:5px;margin-top:12px}
.healthrij{display:grid;grid-template-columns:150px 1fr 22px;align-items:center;gap:8px}
.healthrij .pb-bar{margin:0}
.healthrij .num{text-align:right}
.adviesl{margin:0;padding-left:18px;font-size:13px;color:var(--ink)}
.adviesl li{margin-bottom:4px}

/* ---- planbord ---- */
.planbord{padding:0 0 6px}
.pb-rij{display:flex;border-top:1px solid var(--line-2);min-width:0}
.pb-rij:first-child{border-top:0}
.pb-kop{position:sticky;top:0;background:var(--card);z-index:2}
.pb-naam{width:172px;flex:none;padding:10px 12px;border-right:1px solid var(--line);background:var(--paper)}
.pb-datum{font-size:13px;font-weight:600;margin-top:2px}
.pb-week{font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:5px}
.pb-week.vol{color:var(--red);font-weight:700}
.pb-cel{flex:1 1 0;min-width:0;padding:8px;border-right:1px solid var(--line-2);min-height:74px}
.pb-cel.vandaag{background:var(--signal-l)}
.pb-cel.vol{background:var(--red-l)}
.pb-cel.over{background:var(--primair-l);outline:2px dashed var(--primair);outline-offset:-3px}
.pb-bar{height:4px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-bottom:7px}
.pb-bar>div{height:100%;background:var(--action)}
.pb-cel.vol .pb-bar>div{background:var(--red)}
.kaart{background:#fff;border:1px solid var(--line);border-left:3px solid var(--primair);border-radius:var(--r-s);
  padding:6px 8px;margin-bottom:6px;cursor:grab;box-shadow:var(--shadow)}
.kaart:hover{border-color:var(--steel-2)}
.kaart.sleept{opacity:.4}
.kaart-kop{display:flex;align-items:center;gap:6px}
.kaart-uren{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--steel)}
.kaart-titel{font-size:12.5px;font-weight:500;line-height:1.35;margin:3px 0 5px}
.kaart-voet{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

.verhouding{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--line-2)}
.verhouding .deel.pre{background:var(--action)}
.verhouding .deel.cor{background:var(--amber)}
.vlek{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.vlek.pre{background:var(--action)}
.vlek.cor{background:var(--amber)}
.chip.soortpre{color:var(--action);border-color:currentColor;background:#fff;font-size:9.5px;padding:1px 5px}

.boomgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
@media(min-width:1600px){ .boomgrid{grid-template-columns:minmax(0,1fr) 430px} }
@media(min-width:2100px){ .boomgrid{grid-template-columns:minmax(0,1fr) 520px} }
.boom{padding:8px 4px 14px;overflow-y:auto;overflow-x:hidden;min-width:0;min-height:0;height:100%}
/* het kaartje dat verschijnt als u even op een object blijft staan */
.boomkaartje{position:fixed;z-index:300;width:min(340px,88vw);background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(15,31,61,.18);
  padding:12px 14px;font-size:12.5px;pointer-events:none;animation:bkIn .12s ease both}
@keyframes bkIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* het beeld in het kaartje is vierkant: de foto's zijn vierkant aangeleverd
   en een liggend kader sneed er boven en onder iets af */
.boomkaartje .bk-foto{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);margin-bottom:10px;background:var(--paper)}
.boomkaartje .bk-kop{margin-bottom:9px}
.boomkaartje .bk-kop b{display:block;font-size:14.5px;margin:3px 0 1px}
.boomkaartje .bk-rij{display:flex;gap:10px;padding:3px 0;align-items:baseline}
.boomkaartje .bk-rij>span{flex:0 0 40%;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel)}
.boomkaartje .bk-rij>div{flex:1;min-width:0;overflow-wrap:anywhere}
.boomkaartje .bk-voet{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2);
  color:var(--steel-2);font-size:11px}
@media(hover:none){.boomkaartje{display:none}}
/* de takken lopen door met een lijn in de kleur van het niveau */
.takkids{margin-left:19px;padding-left:13px;border-left:1.5px solid var(--line);position:relative}
.takkids:before{content:"";position:absolute;left:-1.5px;bottom:0;width:1.5px;height:13px;background:var(--card)}
.tak>.knoop{position:relative}
.takkids>.tak>.knoop:before{content:"";position:absolute;left:-13px;top:50%;width:9px;height:1.5px;
  background:var(--line)}
.knoop{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;cursor:pointer;border-radius:7px;
  transition:background .12s}
.knoop:hover{background:var(--paper)}
.knoop.on{background:var(--primair-l);box-shadow:inset 0 0 0 1px rgba(0,109,119,.28)}
/* ---- verwijzingen naar een werkorder of bestelling in een gesprek ---- */
.chat-tag{display:inline-flex;align-items:center;gap:5px;background:var(--primair-l);
  border:1px solid #cbe0e2;border-radius:5px;padding:1px 7px;font-family:var(--mono);
  font-size:12px;color:var(--action);cursor:pointer;vertical-align:baseline;line-height:1.5}
.chat-tag:hover{background:#fff;border-color:var(--action)}
.chat-tag .tagnaam{font-family:var(--sans);font-size:11.5px;color:var(--steel);font-weight:500}
.chat-onderwerpen{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line);
  background:var(--paper)}
.chat-onderwerpen .plate{width:100%;margin:0 0 2px}

/* De tegels komen bij het openen kort na elkaar omhoog. Dat leest als
   een pagina die zich opbouwt in plaats van een blok dat er ineens
   staat. Wie beweging heeft uitgezet, ziet alles meteen. */
.dashraster>.dw{animation:tegelOp .42s cubic-bezier(.22,.85,.3,1) both}
.dashraster>.dw:nth-child(1){animation-delay:0s}
.dashraster>.dw:nth-child(2){animation-delay:.05s}
.dashraster>.dw:nth-child(3){animation-delay:.1s}
.dashraster>.dw:nth-child(4){animation-delay:.15s}
.dashraster>.dw:nth-child(5){animation-delay:.2s}
.dashraster>.dw:nth-child(6){animation-delay:.25s}
.dashraster>.dw:nth-child(n+7){animation-delay:.3s}
@keyframes tegelOp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dashraster>.dw{animation:none}}

/* ---- de kaarten van het dashboard rusten op één lijn ---- */
.dashraster .card>header{min-height:52px;align-items:center}
.dashraster .card>header h2{font-size:14px;line-height:1.25}
.dashraster .card>.body{padding:16px 18px}
/* een tegel die weinig te melden heeft vult toch zijn plek */
.dashraster .card .empty{min-height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
/* de tekeningen krijgen dezelfde bodemruimte, zodat de onderranden uitlijnen */
.dashraster .meterrij,.dashraster .ring,.dashraster .staafjes,
.dashraster .kostenrij,.dashraster .balkenlijst{margin-bottom:2px}
.dashraster .legenda{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2)}

/* ---- visualisaties op het dashboard ---- */
.meterrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
@media(max-width:820px){.meterrij{grid-template-columns:1fr}}
.meter-bij{font-size:11.5px;color:var(--steel);margin-top:2px}
.groot-getal{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.groot-getal{font-size:32px;font-weight:700;color:var(--ink);line-height:1}
.groot-getal span{font-size:12.5px;font-weight:400;color:var(--steel)}
.groot-getal b{font-family:var(--mono);font-size:11.5px;font-weight:600}
.groot-getal b.op{color:var(--green)}
.groot-getal b.af{color:var(--red)}
.kostenrij{display:flex;align-items:flex-end;gap:8px;height:104px;padding-top:4px}
.kostenmaand{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:5px;height:100%;min-width:0}
.kostenbalk{width:100%;max-width:36px;display:flex;flex-direction:column-reverse;border-radius:4px;
  overflow:hidden;transition:height .5s cubic-bezier(.3,.9,.4,1)}
.kostenbalk span{display:block;width:100%}
.balkenlijst{display:grid;gap:9px}
.balkrij{display:grid;grid-template-columns:minmax(0,1fr) 1.4fr 28px;gap:10px;align-items:center}
.balknaam{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balkspoor{height:10px;border-radius:999px;background:var(--line-2);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(15,31,61,.1)}
.balkvul{display:block;height:100%;border-radius:999px;
  background:linear-gradient(180deg, var(--primair) 0%, var(--primair-d) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:width .5s cubic-bezier(.3,.9,.4,1)}
.balkrij b{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--ink)}
.kpi-cijfer{display:flex;align-items:baseline;gap:9px}
.kpi-trend{font-size:11.5px;font-weight:600;font-family:var(--mono)}
.kpi-trend.goed{color:var(--green)}
.kpi-trend.slecht{color:var(--red)}
.kpi-spark{margin:2px -4px 0;opacity:.95}
.spark{display:block;width:100%;height:32px}
.ring{display:block;margin:0 auto}
/* de segmenten draaien vanuit de bovenkant open */
.ring-deel{animation:ringVul .8s cubic-bezier(.22,.85,.3,1) forwards}
@keyframes ringVul{to{stroke-dasharray:var(--deel)}}
@media(prefers-reduced-motion:reduce){.ring-deel{animation:none;stroke-dasharray:var(--deel)}}
.ring-getal{font-family:var(--sans);font-size:24px;font-weight:700;fill:var(--ink)}
.ring-label{font-family:var(--sans);font-size:10px;fill:var(--steel);letter-spacing:.04em;
  text-transform:uppercase}
.meter{display:block;margin:0 auto}
/* de boog loopt bij het openen van nul naar zijn waarde */
.meter-vul,.meter-glans{animation:meterVul 1.15s .12s cubic-bezier(.22,.85,.3,1) forwards}
.meter-glans{animation-delay:.2s}
@keyframes meterVul{to{stroke-dashoffset:var(--meter-rest)}}
.meter-streef{opacity:0;animation:meterStreef .4s 1s forwards}
@keyframes meterStreef{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .meter-vul,.meter-glans{animation:none;stroke-dashoffset:var(--meter-rest)}
  .meter-streef{opacity:1;animation:none}
}
.meter-getal{font-family:var(--sans);font-size:26px;font-weight:700;fill:var(--ink)}
.meter-teken{font-size:14px;fill:var(--steel)}
.meter-label{font-family:var(--sans);font-size:10.5px;fill:var(--steel);letter-spacing:.04em;
  text-transform:uppercase}
.staafjes{display:flex;align-items:flex-end;gap:6px;padding:6px 2px 0}
/* de staven groeien vanaf de bodem omhoog, elk een tikje later */
.staaf-bar{transform-origin:bottom;animation:staafGroei .55s cubic-bezier(.22,.85,.3,1) both}
.staaf:nth-child(1) .staaf-bar{animation-delay:.05s}
.staaf:nth-child(2) .staaf-bar{animation-delay:.11s}
.staaf:nth-child(3) .staaf-bar{animation-delay:.17s}
.staaf:nth-child(4) .staaf-bar{animation-delay:.23s}
.staaf:nth-child(5) .staaf-bar{animation-delay:.29s}
.staaf:nth-child(6) .staaf-bar{animation-delay:.35s}
@keyframes staafGroei{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}
.kostenbalk{animation:staafGroei .6s .1s cubic-bezier(.22,.85,.3,1) both;transform-origin:bottom}
.balkvul{animation:balkVul .7s .15s cubic-bezier(.22,.85,.3,1) both;transform-origin:left}
@keyframes balkVul{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stapel span{animation:balkVul .7s .15s cubic-bezier(.22,.85,.3,1) both;transform-origin:left}
@media(prefers-reduced-motion:reduce){
  .staaf-bar,.kostenbalk,.balkvul,.stapel span{animation:none}
}
.staaf{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;
  height:100%;min-width:0}
.staaf-n{font-family:var(--mono);font-size:11px;color:var(--steel);line-height:1}
.staaf-bar{width:100%;max-width:34px;border-radius:5px 5px 2px 2px;
  transition:height .5s cubic-bezier(.3,.9,.4,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(15,31,61,.16)}
.staaf-l{font-size:10.5px;color:var(--steel-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%}
.stapel{display:flex;border-radius:999px;overflow:hidden;background:var(--line-2)}
.stapel span{display:block;transition:width .5s cubic-bezier(.3,.9,.4,1)}
.legenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.legenda span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--steel)}
.legenda i{width:9px;height:9px;border-radius:3px;flex:none}
.legenda b{font-family:var(--mono);color:var(--ink);font-weight:600}

/* ---- de kaart van een object: velden in groepen, twee kolommen ---- */
.dos-kolommen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start}
@media(max-width:1100px){.dos-kolommen{grid-template-columns:1fr}}
.dos-links,.dos-rechts{display:grid;gap:14px;min-width:0}
.veldgroep{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px 16px 10px;
  position:relative}
.vg-kop{position:absolute;top:-8px;left:12px;background:#fff;padding:0 6px;font-size:11.5px;
  font-weight:600;color:var(--action);letter-spacing:.02em}
.vg-rij{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;
  padding:3px 0}
.vg-rij>span{font-size:12.5px;color:var(--steel)}
.vg-rij>div{min-width:0}
.vg-rij input,.vg-rij select{width:100%;border:1px solid transparent;background:var(--paper);
  padding:6px 8px;border-radius:5px;font-size:13.5px;font-family:inherit;color:var(--ink)}
.vg-rij input:hover,.vg-rij select:hover{border-color:var(--line);background:#fff}
.vg-rij input:focus,.vg-rij select:focus{border-color:var(--primair);background:#fff;outline:none;
  box-shadow:0 0 0 3px var(--primair-l)}
.vg-rij.vast>div{font-size:13.5px;padding:6px 8px}
.vg-rij .plate{display:block;padding-left:8px;margin-top:1px}
.veldgroep.beeld{min-height:180px}
.beeld-leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:28px 0;color:var(--steel-2)}
.beeld-leeg svg{width:42px;height:42px}
.dos-acties{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 6px}

/* ---- velden die u direct in het scherm aanpast ---- */
.dos-veld.bew>div{padding:0}
.dos-veld.bew input,.dos-veld.bew select{width:100%;border:1px solid transparent;background:transparent;
  padding:5px 7px;border-radius:5px;font-size:13.5px;font-family:inherit;color:var(--ink)}
.dos-veld.bew input:hover,.dos-veld.bew select:hover{border-color:var(--line);background:#fff}
.dos-veld.bew input:focus,.dos-veld.bew select:focus{border-color:var(--primair);background:#fff;
  outline:none;box-shadow:0 0 0 3px var(--primair-l)}
.dos-veld.bew input::placeholder{color:var(--steel-2)}
.dos-veld.bew .plate{padding-left:7px}
.rij-ico{display:inline-flex;vertical-align:-3px;margin-right:7px;color:var(--steel)}
.rij-ico svg{width:16px;height:16px}
.knoop-cond{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:11.5px;
  font-weight:600;font-family:var(--mono);border:1px solid currentColor;border-radius:999px;
  padding:0 7px;line-height:1.7}
.knoop-cond .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
/* de foto vooraan een tabelregel, op de plek van het pictogram */
.rij-foto{width:30px;height:30px;object-fit:cover;border-radius:5px;border:1px solid var(--line);
  background:var(--paper);margin-right:9px;vertical-align:middle;flex:none}
.instabel td b{vertical-align:middle}
.knoop-foto{flex:none;width:26px;height:26px;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);background:var(--paper);margin:-3px 0}
.knoop.on .knoop-foto{border-color:var(--primair)}
.knoop-ico{display:flex;flex:none;color:var(--steel);width:17px;height:17px}
.knoop-ico svg{width:17px;height:17px}
.knoop.on .knoop-ico{color:var(--primair)}
.tak.niv0>.knoop .knoop-ico,.tak.niv1>.knoop .knoop-ico{color:var(--action)}
.knoop-stip{width:7px;height:7px;border-radius:50%;background:var(--steel-2);flex:none}
.knoop.heeftkids .knoop-stip{width:9px;height:9px;border:1.5px solid var(--steel);background:var(--card);
  box-sizing:border-box}
.knoop.on .knoop-stip{background:var(--primair);border-color:var(--primair)}
.knoop-naam{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink)}
.tak.niv0>.knoop .knoop-naam{font-size:15px;font-weight:700}
.tak.niv1>.knoop .knoop-naam{font-size:14px;font-weight:600}
.tak.niv3>.knoop .knoop-naam,.tak.niv4>.knoop .knoop-naam{font-size:12.5px;color:var(--steel)}
.tak.niv0>.knoop{padding-top:8px;padding-bottom:8px}
.knoop-soort{font-size:10.5px;font-weight:600;flex:none;white-space:nowrap}
.knoop-kids{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--steel);
  background:var(--paper);border-radius:9px;padding:1px 7px;flex:none}
.knoop .niv{margin-left:auto;white-space:nowrap;font-size:9.5px;color:var(--steel-2)}
.chev{background:none;border:0;color:var(--steel-2);cursor:pointer;font-size:11px;padding:2px 4px;
  transition:transform .12s;flex:none;line-height:1}
.chev:hover{color:var(--primair)}
.chev.open{transform:rotate(90deg)}
.chev.leeg{width:19px;display:inline-block}
.takbadge{font-family:var(--sans);font-weight:700;font-size:10px;background:var(--signal);color:var(--ink);
  border-radius:9px;padding:1px 7px;flex:none}

/* ---- de documentontwerper ---- */
.doc-balk{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:10px 12px;margin-bottom:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);position:sticky;top:8px;z-index:6}
.doc-balk .btn.aan{background:var(--action);color:#fff;border-color:var(--action)}
.doc-scheider{width:1px;height:20px;background:var(--line);margin:0 3px}
.doc-kleur{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--steel)}
.doc-kleur input{width:30px;height:26px;padding:1px;border:1px solid var(--line);border-radius:5px}
.doc-werkblad{background:#eef1f3;padding:22px;border-radius:var(--r);overflow:auto}
.a4.ontwerp{margin:0 auto;box-shadow:0 6px 26px rgba(20,40,50,.13)}
.a4.ontwerp .doc-blok{position:relative;border:1px dashed transparent;border-radius:5px;
  padding:2px 4px;margin:0 -4px;transition:border-color .12s,background .12s}
.a4.ontwerp .doc-blok:hover{border-color:#c8d3d8;background:#fbfdfd}
.a4.ontwerp .doc-blok.sel{border-color:var(--action);background:#f4fbfc}
.a4.ontwerp .doc-blok.uit{opacity:.42}
.a4.ontwerp .doc-blok.sleept{opacity:.45}
.a4.ontwerp .doc-blok.doel{border-color:var(--action);border-style:solid;
  box-shadow:0 -3px 0 -1px var(--action) inset}
.doc-greep{position:absolute;top:-11px;right:4px;display:none;gap:3px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 4px;z-index:3}
.a4.ontwerp .doc-blok:hover .doc-greep,.a4.ontwerp .doc-blok.sel .doc-greep{display:flex}
.doc-greeptitel{font-size:10px;color:var(--steel);padding:0 5px;white-space:nowrap;cursor:grab}
.doc-mini{font-size:10px;line-height:1;padding:3px 6px;border:1px solid var(--line);background:#fff;
  border-radius:4px;color:var(--steel);cursor:pointer}
.doc-mini:hover{border-color:var(--action);color:var(--action)}
.doc-mini.uit{color:#b0592f;border-color:#e6c3b2}
.doc-mini.weg{margin-left:6px;border:0;color:#b0592f;font-size:12px;padding:0 4px}
.doc-toevoeg{list-style:none;margin-top:4px}
.a4.ontwerp .bewerk,.a4.ontwerp [contenteditable]{outline:0;border-radius:3px;
  padding:0 2px;margin:0 -2px;cursor:text}
.a4.ontwerp .bewerk:hover,.a4.ontwerp [contenteditable]:hover{background:#eef7f9;
  box-shadow:0 0 0 1px #c3dee4}
.a4.ontwerp .bewerk:focus,.a4.ontwerp [contenteditable]:focus{background:#fff;
  box-shadow:0 0 0 2px var(--action)}
.a4.ontwerp .bewerk:empty::before,.a4.ontwerp [contenteditable]:empty::before{
  content:attr(data-leeg);color:#a8b4ba;font-style:italic}
.a4.ontwerp .doc-merk.klikbaar{cursor:pointer;border-radius:5px}
.a4.ontwerp .doc-merk.klikbaar:hover{box-shadow:0 0 0 2px var(--action)}
.a4.ontwerp .doc-merk.leeg .doc-logo{border:1px dashed var(--line);display:flex;
  align-items:center;justify-content:center}
/* ---- de ingelezen tekening op het scherm ---- */
.pid-stappen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pid-stap{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px;
  border:1px solid var(--line);font-size:12.5px;background:#fff;color:var(--steel)}
.pid-stap .pid-stapnr{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;background:var(--line);color:var(--steel)}
.pid-stap.af{border-color:#bfded4;color:var(--ink)}
.pid-stap.af .pid-stapnr{background:var(--groen);color:#fff}
.pid-stap.nu{border-color:var(--signal);color:var(--ink);font-weight:600}
.pid-stap.nu .pid-stapnr{background:var(--signal);color:#fff}
.pid-controle{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;
  background:#fff;border:1px solid var(--line);border-radius:7px}
.pid-controle b{font-family:var(--mono);font-size:15px;display:block}
.pid-uitleg{font-size:12.5px;line-height:1.55;color:var(--steel);border-top:1px solid var(--line);
  padding-top:9px;margin-top:2px}
.pid-uitleg b{display:inline;font-family:inherit;font-size:inherit;color:var(--ink)}
/* ---- de mappen in het documentenregister ---- */
/* ---- opbouw en codering ---- */
.laagnr{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--primair);
  color:#fff;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
tr.laag-plek .laagnr{background:var(--groen)}
.codebalk{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap}
.codedeel{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border:1px solid var(--line);
  border-radius:7px;background:#fff;min-width:82px}
.codewaarde{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--action)}
.codenaam{font-size:11.5px;font-weight:600}
.codestreep{display:flex;align-items:center;color:var(--steel)}
.codegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:7px}
.codekaart{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:7px;background:#fff}
.codekaart b{font-family:var(--mono);font-size:13px;color:var(--action);min-width:34px}
.codekaart .ico{color:var(--steel);display:flex}
.uitleg-vak{padding:12px 14px;border-radius:8px;border:1px solid var(--line)}
.uitleg-vak.plek{background:#f2f9f5;border-color:#c9e3d4}
.uitleg-vak.object{background:var(--primair-l);border-color:#cbe0e2}
.doc-mappen{display:flex;gap:8px;flex-wrap:wrap}
.doc-map{display:flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:var(--ink)}
.doc-map svg{color:var(--steel);flex:none}
.doc-map:hover{border-color:var(--primair);background:var(--paper)}
.doc-map.on{border-color:var(--action);background:var(--primair-l);font-weight:600}
.doc-map.on svg{color:var(--action)}
.doc-mapn{font-family:var(--mono);font-size:11px;color:var(--steel);background:var(--paper);
  border-radius:10px;padding:1px 7px}
.doc-map.on .doc-mapn{background:#fff}
.pid-waar{margin-top:8px;padding:9px 11px;background:var(--paper);border-radius:6px}
.pid-waar ul{margin:6px 0 0;padding-left:17px}
.pid-waar li{margin-bottom:5px}
.pid-commando{display:flex;gap:8px;align-items:center;margin:5px 0;padding:6px 9px;background:#fff;
  border:1px solid var(--line);border-radius:5px}
.pid-controle .plate{display:block}
.pid-boven{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pid-boven .plate{margin-right:auto}
.pid-zoom{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:7px;
  padding:2px 4px;background:#fff}
.pid-zoom .btn{min-width:26px;padding:3px 7px}
.pid-zoomstand{font-family:var(--mono);font-size:11.5px;color:var(--steel);min-width:42px;
  text-align:center}
.pid-scroll{overflow:auto;background:#eef1f3;border:1px solid var(--line);border-radius:var(--r);
  padding:10px;display:flex;justify-content:center}
.pid-doek{position:relative;background:#fff;flex:0 0 auto;
  box-shadow:0 2px 10px rgba(20,40,50,.1)}
.pid-doek iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pid-onder{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pid-onder .plate{margin-right:auto}
tr.waarschuw td{background:#fdf6f2}
.tabel-compact{width:100%;border-collapse:collapse}
.tabel-compact th{font-size:var(--tab-kop);color:var(--steel);text-align:left;font-weight:700;
  padding:0 8px 6px 0;white-space:nowrap}
.tabel-compact td{padding:0 8px 8px 0;vertical-align:top}
.tabel-compact td:last-child,.tabel-compact th:last-child{padding-right:0;text-align:right}
.tabel-compact select,.tabel-compact input{width:100%;margin:0}
.minikpi{border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;background:#fff}
.minikpi .v{font-family:var(--mono);font-size:20px;line-height:1.1;margin-top:4px}
@media(max-width:900px){.boomgrid{grid-template-columns:1fr}}

.formsec{border-top:1px solid var(--line-2);margin:16px 0 10px;padding-top:10px}
.formsec:first-child{border-top:0;margin-top:0;padding-top:0}

/* ---- teken-editor ---- */
.editorgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.editorgrid>#chart-holder{min-width:0;overflow:visible}
.panel{border-left:1px solid var(--line);background:var(--paper);padding:14px;overflow-y:auto;
  min-height:0;height:100%}
.panel .f{margin-bottom:10px}
.panel .hint{font-size:12.5px;line-height:1.6}
.checks{display:grid;gap:5px}
.checks label{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.checks input{width:15px;height:15px;accent-color:var(--action);flex:none}
.veldrij{display:grid;grid-template-columns:1fr 1fr auto auto;gap:5px;align-items:center;margin-bottom:5px}
.veldrij input[type=text],.veldrij select{padding:5px 7px;font-size:12px}
.veldrij>label{display:flex;gap:4px;align-items:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--steel);cursor:pointer}
.veldrij>label input{width:14px;height:14px;accent-color:var(--action)}
.paneltrans{display:grid;gap:4px}
.paneltrans button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:6px 9px;font-size:12.5px;cursor:pointer}
.paneltrans button:hover{background:var(--paper);border-color:var(--primair)}
.chartbox.bewerken svg{user-select:none;-webkit-user-select:none;touch-action:none}
svg g.node.edit{cursor:grab}
svg g.node.edit:active{cursor:grabbing}
svg .box.sel{stroke:var(--violet);stroke-width:2.5}
svg .edge.sel{stroke:var(--violet);stroke-width:2.4}
svg .edge-label.sel{fill:var(--violet);font-weight:700}
svg .edge-hit{stroke:transparent;stroke-width:18;fill:none;cursor:pointer}
svg text[data-trans]{cursor:pointer}
svg circle.handle{fill:#fff;stroke:var(--primair);stroke-width:2;cursor:crosshair}
svg circle.handle:hover{fill:var(--signal);stroke:var(--ink)}
svg circle.handle.on{fill:var(--violet);stroke:var(--violet)}
@media(max-width:900px){.editorgrid{grid-template-columns:1fr}.panel{border-left:0;border-top:1px solid var(--line)}}

/* ---- matrix ---- */
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
/* De rechtenmatrix heeft acht rolkolommen; met vaste breedtes past hij
   binnen de kaart en houden de vinkjes hun kolom. De laatste kolom
   ("alles") liep er anders overheen. */
/* Op een smal scherm past een matrix met acht kolommen niet; hij mag
   dan zijwaarts schuiven binnen zijn kaart in plaats van de hele pagina
   breder te maken. */
.insinhoud table.matrix{max-width:100%}
@media(max-width:900px){
  /* :has wordt niet overal gedragen; de tabel zelf krijgt daarom een
     eigen schuifgebied via een blokweergave */
  .insinhoud table.matrix{display:block;overflow-x:auto;min-width:0;max-width:100%;
    white-space:nowrap}
  .insinhoud table.matrix thead,.insinhoud table.matrix tbody{display:table;width:max-content;
    min-width:100%}
}
.rechtentabel{table-layout:fixed;width:100%}
.rechtentabel th:first-child,.rechtentabel td:first-child{width:auto;min-width:180px}
.rechtentabel th:not(:first-child),.rechtentabel td:not(:first-child){width:72px}
/* zonder border-box telt de celopvulling bij de breedte op en loopt de
   tabel alsnog buiten de kaart */
.rechtentabel th,.rechtentabel td{box-sizing:border-box}
/* de rolkoppen schuin: acht namen naast elkaar passen niet horizontaal */
.rechtentabel thead th:not(:first-child){height:104px;vertical-align:bottom;padding:0 0 8px;
  position:relative;overflow:visible}
.rechtentabel thead th:not(:first-child) span.kop{position:absolute;bottom:8px;left:50%;
  transform:rotate(-58deg);transform-origin:left bottom;white-space:nowrap;font-size:10.5px;
  font-weight:600;color:var(--ink)}
.rechtentabel thead th .plate{display:none}
.rechtentabel td{padding:8px 4px}
.matrix input{width:16px;height:16px;accent-color:var(--action)}
.matrix .from-to{font-family:var(--mono);font-size:11px;color:var(--steel)}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;background:rgba(16,24,32,.5);display:grid;place-items:center;padding:20px;z-index:60}
.modal{background:var(--card);border-radius:var(--r);width:min(560px,100%);max-height:88vh;overflow:auto;box-shadow:0 20px 50px rgba(16,24,32,.3)}
.modal header{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.modal header h2{margin:0}
.modal .body{padding:18px}
.modal footer{padding:12px 18px;border-top:1px solid var(--line-2);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
.x{margin-left:auto;background:none;border:0;font-size:19px;line-height:1;color:var(--steel);cursor:pointer;padding:2px 4px}
pre.json{background:var(--ink);color:#cfe6ec;padding:14px;border-radius:var(--r);overflow:auto;max-height:52vh;
  font-family:var(--mono);font-size:11.5px;line-height:1.5}

/* ---- installatiedetail en QR ---- */
.knoop-kks{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border-radius:var(--r-s);
  padding:9px 11px;margin-bottom:12px}
.knoop-qr{margin-left:auto;line-height:0}
.qr{display:block;border-radius:2px}
.insinhoud{min-width:0}
.tafel-status{font-size:11.5px;color:var(--steel);margin-top:2px}
.belico{position:relative}

/* ---- P&ID ---- */
.pidbox{overflow:hidden;background:
  linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/100% 26px,
  linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/26px 100%, #fff;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.pid{width:100%;height:auto;display:block;aspect-ratio:880 / 380}
.pid-vorm{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.pid-vorm.werk{fill:var(--signal-l);stroke:var(--signal);stroke-width:2}
.pid-vorm.actief{fill:var(--primair-l);stroke:var(--primair);stroke-width:2.4}
.pid-lijn{fill:none;stroke:var(--ink);stroke-width:1.4}
.pid-leiding{fill:none;stroke:var(--steel-2);stroke-width:1.6}
.pid-naam{font-size:10px;font-weight:600;fill:var(--ink);text-anchor:middle}
.pid-kks{font-family:var(--mono);font-size:9px;fill:var(--primair);text-anchor:middle;letter-spacing:.02em}
.pid-sym{font-size:14px;font-weight:700;fill:var(--ink);text-anchor:middle}
.pid-stroom{font-size:9.5px;font-weight:600;fill:var(--steel);letter-spacing:.04em}
.pid-punt{fill:var(--signal);stroke:var(--ink);stroke-width:1.2}
.pid-punt-t{font-size:9px;font-weight:700;fill:var(--ink);text-anchor:middle}
.pid-el{cursor:pointer}
.pid-el:hover .pid-vorm{stroke:var(--primair);stroke-width:2.4}
.pid-el:hover .pid-kks{fill:var(--ink);font-weight:700}





/* ================================================================
   VORMGEVING — karakter op de plekken waar het telt
   ----------------------------------------------------------------
   Vier dingen, bewust beperkt: één cijferletter voor de grote
   getallen en de koppen; beweging bij het opbouwen van een scherm;
   één eigen tint per domein; en één lichtbron voor alle kaarten.
   De rest blijft stil, want karakter werkt alleen naast rust.
   ================================================================ */

/* De cijferletter is er weer uit: hij trok te veel aandacht naar de
   getallen en verstoorde het rustige beeld. De maatvoering van de
   koppen en de grote getallen blijft wel staan. */
.kpi-cijfer .v{font-size:38px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  font-weight:700}
.groot-getal{font-size:28px;line-height:1;letter-spacing:-.025em;font-weight:700}
.groot-getal span,.groot-getal b{font-weight:400;letter-spacing:0}
.groot-getal b{font-family:var(--mono);font-weight:600}
h1{font-size:23px;letter-spacing:-.025em;font-weight:700}

/* ---- één lichtbron: licht van boven, schaduw eronder ---- */
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(15,31,61,.05),
  0 10px 28px -14px rgba(15,31,61,.22);border-color:#E3EAF5}
.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(15,31,61,.06),
  0 14px 34px -14px rgba(15,31,61,.28)}
.card>.body .tabelvak,.card .kb-uit{border-radius:8px;background:#F8FAFD;
  box-shadow:inset 0 1px 3px rgba(15,31,61,.06)}
.kpikaart{transition:transform .18s,box-shadow .18s}
.kpikaart:hover{transform:translateY(-2px)}

/* ---- beweging bij het opbouwen ---- */
@keyframes tegel-op{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes staaf-op{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lijn-teken{to{stroke-dashoffset:0}}
@keyframes punt-op{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.dashraster>.dw{animation:tegel-op .42s cubic-bezier(.2,.7,.2,1) both}
.dashraster>.dw:nth-child(1){animation-delay:.02s}.dashraster>.dw:nth-child(2){animation-delay:.07s}
.dashraster>.dw:nth-child(3){animation-delay:.12s}.dashraster>.dw:nth-child(4){animation-delay:.17s}
.dashraster>.dw:nth-child(5){animation-delay:.22s}.dashraster>.dw:nth-child(6){animation-delay:.27s}
.dashraster>.dw:nth-child(7){animation-delay:.32s}.dashraster>.dw:nth-child(8){animation-delay:.37s}
.dashraster>.dw:nth-child(n+9){animation-delay:.42s}
svg.grafiek .g-staaf{transform-box:fill-box;transform-origin:bottom;
  animation:staaf-op .55s cubic-bezier(.2,.7,.2,1) both}
svg.grafiek .g-staaf:nth-of-type(2){animation-delay:.05s}svg.grafiek .g-staaf:nth-of-type(3){animation-delay:.1s}
svg.grafiek .g-staaf:nth-of-type(4){animation-delay:.15s}svg.grafiek .g-staaf:nth-of-type(5){animation-delay:.2s}
svg.grafiek .g-staaf:nth-of-type(6){animation-delay:.25s}svg.grafiek .g-staaf:nth-of-type(n+7){animation-delay:.3s}
svg.grafiek .g-lijn{stroke-dasharray:1200;stroke-dashoffset:1200;animation:lijn-teken .9s ease-out .15s forwards}
svg.grafiek circle{animation:punt-op .3s ease-out .7s both;transform-box:fill-box;transform-origin:center}
.kpi-cijfer .v{transition:none}
@media (prefers-reduced-motion:reduce){
  .dashraster>.dw,svg.grafiek .g-staaf,svg.grafiek .g-lijn,svg.grafiek circle{animation:none!important;
    stroke-dashoffset:0!important}
}

/* ---- één tint per domein ---- */
:root{--d-uitvoering:#5B8FDE;--d-uitvoering-l:#E8F0FC;
  --d-onderhoud:#1F8A8A;--d-onderhoud-l:#E3F4F4;
  --d-veiligheid:#D9822B;--d-veiligheid-l:#FBEEDF;
  --d-middelen:#5C5AA7;--d-middelen-l:#EBEAF6;
  --d-geld:#2F9E6B;--d-geld-l:#E8F6F0;
  --d-beheer:#5F7091;--d-beheer-l:#EDF0F6}
body[data-domein]{--dom:var(--d-uitvoering);--dom-l:var(--d-uitvoering-l)}
body[data-domein="onderhoud"]{--dom:var(--d-onderhoud);--dom-l:var(--d-onderhoud-l)}
body[data-domein="veiligheid"]{--dom:var(--d-veiligheid);--dom-l:var(--d-veiligheid-l)}
body[data-domein="middelen"]{--dom:var(--d-middelen);--dom-l:var(--d-middelen-l)}
body[data-domein="geld"]{--dom:var(--d-geld);--dom-l:var(--d-geld-l)}
body[data-domein="beheer"]{--dom:var(--d-beheer);--dom-l:var(--d-beheer-l)}
/* het actieve menu-item en de kop van het scherm dragen de domeintint */
.nav button.on{background:linear-gradient(90deg,var(--dom),color-mix(in srgb,var(--dom) 70%,#0F1F3D))!important;
  box-shadow:0 6px 16px -8px var(--dom)}
h1{position:relative;padding-left:14px}
h1::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:2px;
  background:var(--dom)}
.kpi-ico{background:var(--dom-l);color:var(--dom)}
.kpikaart.rood .kpi-ico{background:var(--red-l);color:var(--red)}
.kpikaart.accent .kpi-ico{background:var(--signal-l);color:var(--signal)}
.kpikaart.groen .kpi-ico{background:var(--green-l);color:var(--green)}

/* ---- aanwezigheid ---- */
.aw-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding:11px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.aw-kop{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);
  margin-right:2px}
.aw-persoon{background:none;border:0;padding:0;cursor:pointer;line-height:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;width:52px}
.aw-persoon:hover .aw-wrap{transform:translateY(-1px)}
.aw-persoon.zelf{cursor:default}
.aw-naam{font-size:10.5px;line-height:1.2;color:var(--steel);max-width:52px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.aw-persoon:hover .aw-naam{color:var(--ink)}
.aw-wrap{transition:transform .12s}
.aw-rest{margin-left:auto}
.aw-wrap{position:relative;display:inline-block;line-height:0}
.aw-stip{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;
  border:2px solid var(--card);background:var(--steel)}
.aw-wrap>.aw-stip{position:absolute;right:-1px;bottom:-1px}
.aw-stip.nu{background:var(--green)}
.aw-stip.recent{background:var(--signal)}
.aw-stip.weg,.aw-stip.onbekend{background:#C3CEE2}
.aw-tekst{font-size:11px;color:var(--steel);margin-left:6px}
.ov-item>.aw-stip{margin-right:-6px;align-self:center;position:relative;z-index:1}

/* ---- grafieken ---- */
.grafiek{width:100%;height:auto;display:block;overflow:visible}
.g-raster{stroke:var(--line);stroke-width:1}
.g-as{fill:var(--steel);font-size:9px;text-anchor:end;font-variant-numeric:tabular-nums}
.g-label{fill:var(--steel);font-size:9.5px;text-anchor:middle;letter-spacing:.04em}
.g-staaf{transition:opacity .12s}
.g-vlak{cursor:default}
.g-vlak.klik{cursor:pointer}
.g-vlak:hover~.g-label{fill:var(--ink)}
svg.grafiek:hover .g-staaf{opacity:.55}
svg.grafiek .g-vlak:hover{fill:rgba(91,143,222,.07)}
.g-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;padding-left:2px}
.g-legenda span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--steel)}
.g-legenda i{width:9px;height:9px;border-radius:2px;display:inline-block}
.gtip{position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:translateY(3px);
  transition:opacity .1s,transform .1s;background:var(--ink);color:#fff;border-radius:7px;
  padding:7px 10px;font-size:11.5px;line-height:1.45;max-width:240px;
  box-shadow:0 6px 18px rgba(15,31,61,.28)}
.gtip.aan{opacity:1;transform:translateY(0)}
.gtip b{color:#fff}
.gtip .tip-kop{font-weight:600;margin-bottom:3px}
.gtip .tip-rij{display:flex;justify-content:space-between;gap:14px}
.gtip .tip-rij span{color:#B9C7DF}

/* ---- projectplanning ---- */
.prj-plan{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.prj-rij{display:grid;grid-template-columns:210px minmax(0,1fr);border-top:1px solid var(--line);
  align-items:stretch}
.prj-rij:first-child{border-top:0}
.prj-kop .prj-baan{height:26px;background:var(--paper)}
.prj-naam{padding:9px 11px;border-right:1px solid var(--line);min-width:0;display:flex;
  flex-direction:column;justify-content:center;gap:2px}
.prj-naam .plate{white-space:normal;line-height:1.35}
.prj-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--primair);
  cursor:pointer;text-align:left;font-variant-numeric:tabular-nums}
.prj-link:hover{text-decoration:underline}
.prj-baan{position:relative;min-height:38px;overflow:hidden}
.prj-lijn{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.prj-maand{position:absolute;top:5px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);padding-left:6px;white-space:nowrap;overflow:hidden}
.prj-nu{position:absolute;top:0;bottom:0;width:2px;background:var(--red);opacity:.55}
.prj-beoogd{position:absolute;top:12px;height:14px;border:1px dashed var(--primair);border-radius:5px;
  background:var(--primair-l)}
.prj-fase{position:absolute;top:10px;height:18px;border-radius:5px;background:#9DB4D4;
  display:flex;align-items:center;padding:0 7px;overflow:hidden}
.prj-fase.nu{background:var(--primair)}
.prj-fase span{font-size:10px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prj-job{position:absolute;top:9px;height:20px;border-radius:5px;background:var(--action);
  display:flex;align-items:center;padding:0 7px;cursor:pointer;overflow:hidden}
.prj-job.klaar{background:var(--green)}
.prj-job:hover{filter:brightness(1.08)}
.prj-job span{font-size:10px;color:#fff;white-space:nowrap;overflow:hidden}
@media (max-width:760px){
  .prj-rij{grid-template-columns:120px minmax(0,1fr)}
  .prj-plan{overflow-x:auto}
}

/* ---- kanbanbord ---- */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  padding:14px 16px;align-items:start;background:var(--paper)}
.kb-kolom{min-width:0;background:#EDF2FA;border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;max-height:70vh}
.kb-kolom.eind{background:#E9EDEB;opacity:.9}
.kb-kolom.mag{border-color:var(--primair);border-style:dashed}
.kb-kolom.over{border-color:var(--primair);border-width:2px;background:var(--primair-l)}
.kb-kolom.magniet{border-color:var(--red);border-width:2px;background:var(--red-l)}
.kb-kolomkop{padding:11px 13px 9px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-kolomkop b{font-size:12.5px}
.kb-telling{background:var(--ink);color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700}
.kb-kolomkop .plate{width:100%;font-size:9.5px}
.kb-lijst{padding:10px;display:grid;gap:9px;overflow-y:auto;min-height:70px}
.kb-kaart{background:#fff;border:1px solid var(--line);border-left:3px solid var(--primair);border-radius:8px;
  padding:10px 11px;cursor:grab;box-shadow:var(--shadow)}
.kb-kaart:hover{border-color:var(--primair)}
.kb-kaart.sleept{opacity:.4}
.kb-kop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kb-soort{font-size:9.5px;padding:1px 7px;color:var(--steel);border-color:var(--line);background:#fff}
.kb-soort.investering{color:var(--primair)}
.kb-soort.modificatie{color:var(--violet)}
.kb-soort.verbetering{color:var(--green)}
.kb-titel{font-weight:600;font-size:13px;line-height:1.35;margin:5px 0 6px;overflow-wrap:anywhere}
.kb-tag{margin-bottom:7px}
.kb-budget{margin-bottom:7px}
.kb-budget .pb-bar{margin-bottom:3px}
.kb-voet{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kb-voet .avatar{width:24px;height:24px;font-size:10px}
.kb-stroom{margin-left:auto}
.kb-leeg{font-size:11.5px;color:var(--steel-2);line-height:1.4;padding:6px 4px}

/* ---- maandplanning ---- */
.maandbord{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mp-dagkoppen,.mp-week{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr))}
.mp-dagkoppen{background:var(--paper);border-bottom:1px solid var(--line)}
.mp-dagkop{padding:8px 10px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel)}
.mp-week{border-bottom:1px solid var(--line-2)}
.mp-week:last-child{border-bottom:0}
.mp-weeknr{background:var(--paper);border-right:1px solid var(--line-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:8px 4px}
.mp-weeknr b{font-size:11px;color:var(--steel)}
.mp-weeknr .plate{font-size:9.5px}
.mp-weekmeter{width:6px;flex:1;min-height:34px;background:var(--line-2);border-radius:3px;
  display:flex;align-items:flex-end;overflow:hidden}
.mp-weekmeter>div{width:100%;border-radius:3px;transition:height .3s}
.mp-cel{border-right:1px solid var(--line-2);padding:7px 8px 8px;min-height:118px;display:flex;flex-direction:column;
  gap:5px;transition:background .15s}
.mp-cel:last-child{border-right:0}
.mp-cel.buiten{background:#FBFCFB}
.mp-cel.buiten .mp-nr{color:var(--steel-2);font-weight:500}
.mp-cel.weekend{background:#F5F7F6}
.mp-cel.vandaag{background:var(--primair-l);box-shadow:inset 0 2px 0 var(--primair)}
.mp-cel.vol{background:var(--red-l)}
.mp-cel.over{outline:2px dashed var(--primair);outline-offset:-3px;background:var(--primair-l)}
.mp-kop{display:flex;align-items:center;gap:6px}
.mp-nr{font-size:13px;font-weight:700}
.mp-vandaag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primair)}
.mp-uren{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink)}
.mp-uren i{font-style:normal;font-weight:400;color:var(--steel-2)}
.mp-meter{height:4px;background:var(--line-2);border-radius:2px;position:relative}
.mp-meter.leeg{opacity:.4}
.mp-meter>div{height:100%;border-radius:2px;transition:width .3s}
.mp-over{position:absolute;right:0;top:-14px;font-size:9px;font-weight:700;color:var(--red)}
.mp-stop{display:flex;align-items:center;gap:5px;background:var(--ink);color:#fff;border-radius:4px;
  font-size:9.5px;font-weight:700;padding:3px 7px;cursor:pointer;letter-spacing:.03em}
.mp-stop .ico{width:11px;height:11px}
.mp-werk{display:flex;flex-direction:column;gap:3px;min-width:0}
.mp-item{display:flex;align-items:center;gap:5px;background:var(--signal-l);border-radius:4px;
  padding:3px 6px 3px 0;font-size:10.5px;cursor:grab;overflow:hidden;transition:.12s}
.mp-item:hover{filter:brightness(.97)}
.mp-item.soortPRE{background:var(--primair-l)}
.mp-item.soortPRO{background:#EDECF6}
.mp-item.reeks{border-radius:0}
.mp-item.reeks.start{border-radius:4px 0 0 4px}
.mp-item.reeks.eind{border-radius:0 4px 4px 0}
.mp-streep{width:3px;align-self:stretch;min-height:15px;border-radius:2px;flex:none}
.pri-P1{background:var(--red)} .pri-P2{background:var(--signal)}
.pri-P3{background:var(--primair)} .pri-P4{background:var(--steel-2)}
.mp-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-weight:500}
.mp-u{font-family:var(--mono);font-size:9.5px;color:var(--steel);flex:none}
.mp-meer{background:none;border:0;font-size:10px;color:var(--primair);font-weight:600;cursor:pointer;
  text-align:left;padding:1px 4px}
.mp-nav{display:flex;align-items:center;gap:7px}
.mp-nav b{min-width:132px;text-align:center;font-size:14px}
.segment{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:2px}
.segment button{background:none;border:0;padding:5px 13px;border-radius:6px;font-size:12.5px;font-weight:600;
  color:var(--steel);cursor:pointer}
.segment button.on{background:var(--card);color:var(--primair);box-shadow:var(--shadow)}
.wachtrij{display:grid;max-height:320px;overflow-y:auto}

/* het pijltje waarmee u vanaf het planbord de werkorder opent */
.mp-open,.pb-open{border:0;background:transparent;color:var(--steel-2);cursor:pointer;
  font-size:12px;line-height:1;padding:2px 3px;border-radius:4px;opacity:0;flex:none;
  transition:opacity .12s,color .12s,background .12s}
.mp-item:hover .mp-open,.kaart:hover .pb-open{opacity:1}
.mp-open:hover,.pb-open:hover{color:var(--primair);background:#fff}
.kaart-kop{display:flex;align-items:center;gap:6px}

/* ---- een onderhoudsmodel opstellen ---- */
.po-kolommen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start}
@media(max-width:1100px){.po-kolommen{grid-template-columns:1fr}}
.po-links,.po-rechts{display:grid;gap:14px;min-width:0}
.po-rij{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px;align-items:start;
  padding:5px 0}
.po-rij>span{font-size:12.5px;color:var(--steel);padding-top:7px}
.po-rij>div{min-width:0}
.po-rij input,.po-rij select,.po-rij textarea{width:100%;border:1px solid var(--line);
  background:#fff;padding:7px 9px;border-radius:5px;font-size:13.5px;font-family:inherit;
  color:var(--ink)}
.po-rij textarea{resize:vertical;line-height:1.5}
.po-rij input:focus,.po-rij select:focus,.po-rij textarea:focus{border-color:var(--primair);
  outline:none;box-shadow:0 0 0 3px var(--primair-l)}
.po-rij .plate{margin-top:5px;line-height:1.5}
.po-duo{display:flex;gap:8px;align-items:center}
.po-duo input{max-width:110px}
.po-duo select{max-width:160px}
.po-eenheid{font-size:12.5px;color:var(--steel);white-space:nowrap}

/* de installatie zoeken in de stamboom */
.po-kiezer input{width:100%;border:1px solid var(--line);background:#fff;padding:9px 11px;
  border-radius:6px;font-size:13.5px;font-family:inherit}
.po-kiezer input:focus{border-color:var(--primair);outline:none;box-shadow:0 0 0 3px var(--primair-l)}
/* de eerstvolgende beurten volgens de ingestelde regel */
/* de health-kaart in een werkorder */
.wohc-kop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.wohc-score{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1;text-align:center}
.wohc-score span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;
  color:var(--steel);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.wohc-kop .min0{flex:1;min-width:170px}
.wohc-kop .rd-balk{margin-bottom:5px}
.wohc-domeinen{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.wohc-dom{background:var(--paper);border-radius:6px;padding:7px 9px;min-width:0}
.wohc-dom span{display:block;font-size:11px;color:var(--steel);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wohc-dom b{font-family:var(--mono);font-size:16px;line-height:1.2}
.wohc-dom i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--steel-2);
  margin-left:5px}

/* een tabel die zich laat instellen */
.slimtabel{display:flex;flex-direction:column;min-width:0}
.st-balk{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.st-vak{overflow-x:auto}
/* De breedtes liggen vast. De tabel krijgt in de opmaak een exacte
   breedte mee en een vulkolom die de rest opvult; zo valt er voor de
   browser niets te herverdelen en verspringt er niets tijdens het typen. */
.st-tabel{margin:0;table-layout:fixed;min-width:100%}
.st-tabel col.st-vul{width:auto}
.st-tabel th.st-vul,.st-tabel td.st-vul{padding:0;border-left:0}
.st-tabel th.st-vul{background:transparent}
.st-tabel thead th{user-select:none;position:relative;padding-right:14px;height:34px}
.st-kop{cursor:pointer;display:inline-block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.st-kop:hover{color:var(--primair)}
.st-tabel tbody td{overflow:hidden;text-overflow:ellipsis;height:var(--tab-regel)}
/* Het greepje ligt precies op de scheiding tussen twee kolommen, half
   links en half rechts ervan, zodat de cursor op het lijntje blijft
   staan tijdens het slepen. */
.st-greep{position:absolute;top:0;right:-5px;width:11px;height:100%;cursor:col-resize;
  display:block;z-index:2;touch-action:none}
.st-greep:before{content:"";position:absolute;top:20%;left:50%;transform:translateX(-50%);
  width:1px;height:60%;background:var(--line);transition:background .12s,width .12s}
.st-greep:hover:before{background:var(--primair);width:3px}
/* de laatste kolom heeft geen scheiding aan de rechterkant nodig */
.st-tabel thead th:last-child .st-greep{right:0;width:9px}
body.st-sleept{cursor:col-resize;user-select:none}
body.st-sleept .st-greep:before{background:var(--primair);width:3px}
/* de koppen mogen niet afkappen wat er overheen steekt */
.st-tabel thead th{overflow:visible}
.st-pijl{margin-left:5px;color:var(--primair);font-size:var(--tab-mono)}
.st-tabel tr.st-zoek th{padding:0 6px 8px;background:var(--paper)}
.st-tabel tr.st-zoek input{width:100%;min-width:70px;border:1px solid var(--line);
  background:var(--paper);padding:5px 9px;border-radius:6px;height:28px;
  font-size:var(--tab-tekst);font-family:inherit;color:var(--ink);font-weight:400}
.st-tabel tr.st-zoek input:focus{border-color:var(--primair);outline:none;
  box-shadow:0 0 0 2px var(--primair-l)}
.st-tabel tr.st-zoek input::placeholder{color:var(--steel-2);font-size:var(--tab-mono)}

/* de kolommen van de werkorderlijst kiezen */
.kol-lijst{display:grid;gap:2px;max-height:340px;overflow:auto;border:1px solid var(--line);
  border-radius:6px;padding:6px}
.kol-rij{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:5px;cursor:pointer}
.kol-rij:hover{background:var(--paper)}
.kol-rij.vast{opacity:.7;cursor:default}
.kol-rij input{width:16px;height:16px;accent-color:var(--primair);flex:none}
.kol-rij>span:first-of-type{flex:1;font-size:13.5px}
.kol-pijl{display:flex;gap:2px}
.kol-pijl button{border:1px solid var(--line);background:#fff;border-radius:4px;width:24px;
  height:22px;cursor:pointer;font-size:11px;line-height:1;color:var(--steel)}
.kol-pijl button:hover{border-color:var(--primair);color:var(--primair)}
.kol-weergaven{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kol-weergave{display:inline-flex;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;overflow:hidden}
.kol-weergave button{border:0;background:none;padding:5px 11px;cursor:pointer;font-size:12.5px;
  font-family:inherit;color:var(--ink)}
.kol-weergave button:hover{background:var(--primair-l)}
.kol-weergave .weg{padding:5px 9px;color:var(--steel-2);border-left:1px solid var(--line)}
.kol-weergave .weg:hover{color:var(--red);background:var(--red-l)}
.wo-titel{font-size:12.5px;color:var(--steel);margin-top:2px}

/* de domeinen van een health check in het modelscherm */
.po-domeinen{width:100%;margin:0}
.po-domeinen td,.po-domeinen th{padding:8px 10px}
.po-domeinen tr.uitgezet{opacity:.45}
.po-domeinen input[type=checkbox]{width:17px;height:17px;accent-color:var(--primair)}
.po-norm{width:100%;max-width:78px;border:1px solid var(--line);background:#fff;
  padding:5px 7px;border-radius:5px;font-size:13px;font-family:var(--mono);text-align:right}
.po-norm:focus{border-color:var(--primair);outline:none;box-shadow:0 0 0 3px var(--primair-l)}

/* de conditie en trend van een object */
.trend-kop{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.trend-lijn{flex:1;min-width:180px;max-width:340px}

.po-voorbeeld{display:flex;flex-wrap:wrap;gap:6px}
.po-voorbeeld span{background:var(--primair-l);border:1px solid #cbe0e2;border-radius:5px;
  padding:3px 9px;font-size:12px;color:var(--action);font-family:var(--mono)}

/* de zoekbalk en de tabel waarin u de installatie kiest */
/* de lijst met installaties waarop een model staat */
.po-lijst{display:grid;gap:8px}
.po-lijst .po-gekozen{margin:0}
.po-lijst .po-gekozen>button:last-child{font-size:17px;line-height:1;padding:2px 9px}

.po-zoekbalk{display:flex;align-items:center;gap:10px}
.po-zoekbalk input{flex:1}
.po-zoekbalk .plate{white-space:nowrap}
.po-tabel{margin-top:10px;max-height:320px;overflow:auto;border:1px solid var(--line);
  border-radius:6px}
.po-tabel table{width:100%;margin:0}
.po-tabel thead th{position:sticky;top:0;background:var(--paper);z-index:1}
.po-tabel tbody tr{cursor:pointer}
.po-tabel tbody tr:hover{background:var(--primair-l)}
.po-tabel .plate{display:block;margin-top:1px}
.po-gekozen .min0{min-width:0;flex:1}
.po-gekozen .plate{display:block;margin-top:1px}
.po-laag{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-2);
  background:#fff;border:1px solid var(--line);border-radius:4px;padding:2px 6px;flex:none}
.po-gekozen{display:flex;align-items:center;gap:11px;background:var(--primair-l);
  border:1px solid #cbe0e2;border-radius:6px;padding:10px 12px}

/* ---- werkwijze bij een beoordelingspunt ---- */
.hc-hoe{margin-top:1px}
.hc-hoe>summary{font-size:11.5px;color:var(--steel);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:5px;padding:1px 0}
.hc-hoe>summary::-webkit-details-marker{display:none}
.hc-hoe>summary:before{content:"\25b8";color:var(--steel-2);font-size:9px;transition:transform .15s;
  flex:none}
.hc-hoe[open]>summary:before{transform:rotate(90deg)}
.hc-hoe>summary:hover{color:var(--primair)}
.hc-werkwijze{margin:7px 0 4px;padding:10px 12px;background:var(--paper);border-radius:6px;
  border-left:2px solid var(--primair);font-size:12.5px;line-height:1.55;color:var(--ink-2);
  max-width:640px}
.hc-norm{margin-top:7px;padding-top:6px;border-top:1px solid var(--line-2);font-size:11.5px;
  color:var(--steel);font-family:var(--mono)}

/* ---- werk verslepen naar de planning ---- */
.wr-regel[data-wo],[data-wo]{cursor:grab}
[data-wo]:active{cursor:grabbing}
.sleept{opacity:.45}
/* zolang er iets in de hand is, lichten de dagen op waar het heen kan */
body.sleepbezig .dropzone{outline:1px dashed var(--primair);outline-offset:-3px;
  background:var(--primair-l)}
body.sleepbezig .dropzone.weekend,body.sleepbezig .dropzone.buiten{outline:none;background:none}
.dropzone.over{outline:2px solid var(--primair);outline-offset:-3px;
  background:var(--primair-l);box-shadow:inset 0 0 0 100vmax rgba(91,143,222,.08)}

.wr-regel{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid var(--line-2);cursor:grab}
.wr-regel:last-child{border-bottom:0}
.wr-regel:hover{background:var(--paper)}
.wr-mid{min-width:0;flex:1}
.wr-titel{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-uren{font-family:var(--mono);font-size:12px;font-weight:700;flex:none}
.wr-uren.laat{color:var(--red)}

.cap-kop{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.cap-kop b{font-size:13px}
.cap-kop .plate{margin-left:auto}
.cap-balk{height:9px;background:var(--line-2);border-radius:5px;position:relative}
.cap-balk>div{height:100%;border-radius:5px;transition:width .35s}
.cap-kop{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.cap-kop .plate{margin-left:auto;text-align:right}
/* het percentage stond boven de balk en liep over de uren heen; nu staat
   het eronder, aan dezelfde rechterkant */
.cap-pct{position:absolute;right:0;top:12px;font-size:10.5px;font-weight:700;color:var(--steel)}
.cap-rij{margin-bottom:22px}
.cap-pct.over{color:var(--red)}

/* ---- OTAP-straat ---- */
.otap{display:flex;align-items:stretch;padding:16px;background:var(--paper);flex-wrap:wrap;gap:0 0}
.otap-kaart{flex:1 1 176px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.otap-kaart.hier{border-color:var(--primair);border-width:2px;padding:12px}
.otap-kaart.leeg{background:#F4F6F5;border-style:dashed;justify-content:center;text-align:center}
.otap-kop{display:flex;align-items:center;gap:8px}
.otap-kop b{font-size:13.5px}
.otap-letter{width:24px;height:24px;border-radius:6px;color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:700;flex:none}
.otap-versie{font-family:var(--mono);font-size:19px;font-weight:700;margin:8px 0 2px}
.otap-rij{display:flex;gap:8px;justify-content:space-between;font-size:12px;padding:3px 0;
  border-top:1px solid var(--line-2);margin-top:6px}
.otap-open{margin-top:9px;background:var(--signal-l);border:1px solid #F2DCA8;border-radius:var(--r-s);
  padding:5px 8px;font-size:11.5px}
.otap-achter{margin-top:6px;font-size:11.5px;color:var(--amber);font-weight:600}
.otap-pijl{flex:0 1 68px;min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0 4px}
.otap-lijn{width:100%;height:2px;background:var(--steel-2);position:relative}
.otap-lijn:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--steel-2)}
.otap-lijn.gelijk{background:var(--green)}
.otap-lijn.gelijk:after{border-left-color:var(--green)}

/* ---- API-console ---- */
.apilijst{display:grid;gap:4px;margin-bottom:14px}
.apilijst button{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:7px 10px;cursor:pointer;text-align:left;font-size:12.5px}
.apilijst button:hover{border-color:var(--primair)}
.apilijst button.on{border-color:var(--primair);background:var(--primair-l)}
.api-m{font-family:var(--mono);font-size:10px;font-weight:700;border-radius:3px;padding:2px 6px;color:#fff;
  flex:none;min-width:46px;text-align:center}
.api-m.GET{background:var(--primair)}
.api-m.POST{background:var(--green)}
.api-m.PATCH{background:var(--amber)}
.api-antwoord{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.api-kop{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--paper);border-bottom:1px solid var(--line)}
.api-antwoord .json{margin:0;border-radius:0;max-height:400px}

/* ---- labels ---- */
.lb-formaten{display:flex;gap:10px;flex-wrap:wrap}
.lb-formaten button{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px;cursor:pointer;text-align:left;display:grid;gap:3px}
.lb-formaten button:hover{border-color:var(--primair)}
.lb-formaten button.on{border-color:var(--primair);border-width:2px;padding:11px;background:var(--primair-l)}
.lb-vorm{display:block;border:1.5px solid var(--steel-2);border-radius:2px;margin-bottom:6px;background:#fff}
.lb-formaten b{font-size:13.5px}
.lb-voorbeeld{display:flex;gap:12px;flex-wrap:wrap;background:var(--paper);padding:14px;
  border-radius:var(--r-s);overflow:hidden}
.lb-voorbeeld .label{max-width:100%}
.label{background:#fff;border:1px solid var(--ink);border-radius:2px;display:flex;align-items:center;gap:6px;
  padding:2mm;overflow:hidden;box-sizing:border-box}
.lb-qr{flex:none;line-height:0}
.lb-tekst{min-width:0;flex:1}
.lb-kks{font-family:var(--mono);font-weight:700;letter-spacing:.02em;line-height:1.15;overflow-wrap:anywhere}
.lb-tag{font-family:var(--mono);color:var(--primair);line-height:1.2;overflow-wrap:anywhere}
.lb-naam{font-weight:600;line-height:1.2;margin-top:1px}
.lb-regel{color:var(--steel);line-height:1.25}
.lb-merk{color:var(--steel-2);letter-spacing:.04em;text-transform:uppercase}
.lb-voet{display:flex;align-items:center;gap:1.6mm;margin-top:auto;padding-top:1.4mm;
  border-top:.3mm solid var(--line-2);width:100%;min-width:0}
.lb-voet .lb-merk{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-teken{flex:none;display:block;width:auto}
.lb-tekst{display:flex;flex-direction:column;flex:1;min-width:0;height:100%}
.lb-bordje .lb-tekst{width:100%}
.lb-graveer .lb-voet{display:none}
.lb-klein{width:25mm;height:15mm;padding:1mm;gap:1mm}
.lb-klein .lb-kks{font-size:6.5pt}
.lb-klein .lb-merk,.lb-klein .lb-naam{display:none}
.lb-standaard{width:50mm;height:30mm}
.lb-standaard .lb-kks{font-size:9pt} .lb-standaard .lb-tag{font-size:6.5pt}
.lb-standaard .lb-naam{font-size:7pt} .lb-standaard .lb-merk{font-size:4.5pt}
.lb-groot{width:90mm;height:50mm;gap:3mm}
.lb-groot .lb-kks{font-size:14pt} .lb-groot .lb-tag{font-size:9pt}
.lb-groot .lb-naam{font-size:11pt} .lb-groot .lb-regel{font-size:7.5pt} .lb-groot .lb-merk{font-size:5.5pt}
.lb-graveer{width:80mm;height:40mm;border-width:2px;justify-content:center;text-align:center}
.lb-graveer .lb-kks{font-size:15pt} .lb-graveer .lb-tag{font-size:9pt}
.lb-graveer .lb-naam{font-size:10pt} .lb-graveer .lb-merk{display:none}
.lb-bordje{width:105mm;height:74mm;flex-direction:column;align-items:flex-start;justify-content:center;gap:3mm;padding:5mm}
.lb-bordje .lb-kks{font-size:20pt} .lb-bordje .lb-tag{font-size:11pt}
.lb-bordje .lb-naam{font-size:14pt} .lb-bordje .lb-regel{font-size:9pt} .lb-bordje .lb-merk{font-size:7pt}
.labelvel{padding:10mm}
.lb-velkop{display:flex;justify-content:space-between;font-size:8pt;color:var(--steel);
  border-bottom:1px solid var(--line);padding-bottom:3mm;margin-bottom:4mm}
.lb-raster{display:flex;flex-wrap:wrap;gap:2mm}

/* ---- mededelingen ---- */
.med-balk{display:flex;align-items:center;gap:12px;border:1px solid;border-left-width:4px;border-radius:var(--r-s);
  padding:11px 14px;margin-bottom:14px;font-size:13px}
.med-balk b{margin-right:5px}
.med-balk span{color:var(--steel)}
.med-balk .btn{margin-left:auto;flex:none}
.med-balk-merk{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  border-radius:10px;padding:3px 9px;flex:none}
.med-paneel{position:fixed;right:22px;top:66px;z-index:92;width:min(380px,calc(100vw - 44px));
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 46px rgba(22,38,45,.26);
  max-height:min(560px,calc(100vh - 100px));display:flex;flex-direction:column;overflow:hidden}
.med-paneelkop{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line-2);
  background:var(--paper)}
.med-lijst{overflow-y:auto;padding:12px 14px;display:grid;gap:11px}
.med-gelezen{opacity:.55}
.med-kaart{border:1px solid var(--line);border-left:4px solid var(--primair);border-radius:var(--r-s);
  padding:11px 13px;background:#fff}
.med-kop{display:flex;gap:10px;align-items:flex-start}
.med-kop b{font-size:13.5px;line-height:1.3;display:block}
.med-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.med-ico .ico{width:15px;height:15px}
.med-weg{margin-left:auto;background:none;border:0;font-size:18px;line-height:1;color:var(--steel-2);cursor:pointer;padding:0 2px}
.med-tekst{font-size:12.5px;line-height:1.55;margin:8px 0 0;color:var(--ink)}
.med-link{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--primair)}

/* ---- bijlagen ---- */
.bl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:10px}
.bl-tegel{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;cursor:pointer;background:#fff}
.bl-tegel:hover{border-color:var(--primair)}
.bl-tegel img{width:100%;height:92px;object-fit:cover;display:block;background:var(--paper)}
.bl-doc{height:92px;display:grid;place-items:center;background:var(--paper);color:var(--steel)}
.bl-doc .ico{width:28px;height:28px}
.bl-info{padding:6px 8px}
.bl-naam{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- scannen ---- */
.scan-vak{position:relative;background:var(--ink);border-radius:10px;overflow:hidden;aspect-ratio:4/3;
  display:grid;place-items:center;max-width:460px;margin:0 auto}
.scan-vak video{width:100%;height:100%;object-fit:cover;display:none}
.scan-vak.aan video{display:block}
.scan-kader{position:absolute;inset:16%;border:2px solid var(--signal);border-radius:12px;pointer-events:none}
.scan-tekst{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:12.5px;
  text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ---- veldweergave ---- */
/* in de veldweergave is er geen zijbalk, dus ook geen marge ervoor */
body.veldmodus .rail,body.veldmodus .topbar{display:none}
body.veldmodus main{margin-left:0}
body.veldmodus .app{grid-template-columns:1fr}
body.veldmodus .wrap{padding:0;max-width:640px;margin:0 auto}
body.veldmodus{background:var(--paper)}
.veld{padding:0 0 90px}
.veld-kop{display:flex;align-items:center;gap:11px;background:var(--rail);color:#fff;padding:14px 16px;
  position:sticky;top:0;z-index:10}
.veld-kop b{font-size:15px;line-height:1.2}
.veld-rol{font-size:11.5px;color:#8A9799}
.veld-uit{margin-left:auto;background:rgba(255,255,255,.12);border:0;color:#fff;width:34px;height:34px;
  border-radius:8px;cursor:pointer;font-size:15px}
.veld-knoppen{display:grid;gap:10px;padding:14px 14px 4px}
.veld-groot{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 14px;
  background:var(--primair);color:#fff;border:0;border-radius:12px;padding:16px 18px;cursor:pointer;text-align:left;
  box-shadow:var(--shadow);min-height:76px;align-items:center}
.veld-groot.licht{background:#fff;color:var(--ink);border:1px solid var(--line)}
.veld-groot b{font-size:16px;grid-column:2}
.veld-groot span:last-child{font-size:12.5px;opacity:.8;grid-column:2}
.veld-ico{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);
  display:grid;place-items:center}
.veld-groot.licht .veld-ico{background:var(--primair-l);color:var(--primair)}
.veld-ico .ico{width:22px;height:22px}
.veld-blok{margin:16px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.veld-titel{padding:12px 16px;border-bottom:1px solid var(--line-2);font-weight:700;font-size:13.5px;
  display:flex;align-items:center;gap:8px}
.veld-titel span{margin-left:auto;background:var(--primair);color:#fff;border-radius:10px;padding:1px 9px;font-size:11.5px}
body.veldmodus .wo-regel{padding:14px 16px}
body.veldmodus .wo-titel{font-size:15px}
/* Op de tablet in het veld wordt met handschoenen bediend. Alles wat je
   kunt aanraken krijgt daarom een grotere raakvlakte; de aanbevolen maat
   is ongeveer 44 pixels. */
body.veldmodus .btn,body.veldmodus button.btn{min-height:46px;padding:12px 18px;font-size:14.5px}
body.veldmodus .btn.sm{min-height:42px;padding:10px 15px;font-size:13.5px}
body.veldmodus input,body.veldmodus select,body.veldmodus textarea{min-height:46px;font-size:15px}
body.veldmodus input[type=checkbox],body.veldmodus input[type=radio]{width:22px;height:22px;min-height:0}
body.veldmodus .chip,body.veldmodus .tag{font-size:12.5px}
body.veldmodus table td,body.veldmodus table th{padding:12px 10px}
body.veldmodus .modal{width:100%;max-height:100vh;border-radius:0}
body.veldmodus .overlay{padding:0;align-items:flex-start}
body.veldmodus input,body.veldmodus select,body.veldmodus textarea{font-size:16px;padding:12px}
body.veldmodus .btn{padding:12px 18px;font-size:14.5px}
body.veldmodus .meld-boven{grid-template-columns:1fr}
body.veldmodus .meld-scan{padding:14px 16px}
body.veldmodus .meld-scan b{font-size:15px}
body.veldmodus .meld-ico{width:40px;height:40px}
body.veldmodus .meld-ico svg{width:20px;height:20px}
body.veldmodus .meld-scanner video{max-height:46vh}
body.veldmodus .modal .body{padding:16px}
body.veldmodus .modal footer{position:sticky;bottom:0;background:var(--card);
  border-top:1px solid var(--line-2);padding:12px 16px;z-index:2}

/* ---- overleg ---- */
.ov-raster{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  flex:1;min-height:min(520px,calc(100vh - 220px));overflow:hidden;border-radius:10px}
.ov-lijst{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:var(--card)}
.ov-zoek{display:flex;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line-2);background:var(--paper)}
.ov-zoek input[type=text]{flex:1;border-radius:20px;padding:8px 14px;font-size:12.5px;background:var(--card)}
.ov-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  border-bottom:1px solid var(--line-2);padding:11px 13px;cursor:pointer;text-align:left;transition:background .12s}
.ov-item:hover{background:var(--paper)}
.ov-item.on{background:var(--primair-l);box-shadow:inset 3px 0 0 var(--primair)}
.ov-lijst>.ov-item:last-child{border-bottom:0}
.ov-teken{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:14px;background:var(--paper);color:var(--steel);border:1px solid var(--line)}
.ov-teken.kanaal{background:var(--primair-l);color:var(--primair);border-color:transparent}
.ov-teken.object{background:var(--signal-l);color:var(--amber);border-color:transparent}
.ov-teken.direct{border:0}
.ov-mid{min-width:0;flex:1;display:block}
.ov-naam{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-laatst{display:block;font-size:12px;color:var(--steel);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:2px}
.ov-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.ov-badge{background:var(--primair);color:#fff;border-radius:11px;min-width:20px;text-align:center;
  padding:1px 7px;font-size:11px;font-weight:700}
.ov-tijd{font-size:10.5px;color:var(--steel-2)}
.ov-paneel{display:flex;flex-direction:column;min-width:0;background:#F1F3F1}
.ov-kop{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--card);flex:none}
.ov-kop b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.min0{min-width:0;flex:1}
.ov-stroom{flex:1;overflow-y:auto;padding:16px 18px 10px;display:flex;flex-direction:column;gap:2px;
  background-image:radial-gradient(var(--line) .8px, transparent .8px);background-size:22px 22px;background-color:#F1F3F1}

/* datumscheiding */
.b-dag{text-align:center;margin:12px 0 8px}
.b-dag span{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px 12px;
  font-size:10.5px;font-weight:600;color:var(--steel);letter-spacing:.03em}

/* berichtbellen */
.bericht{display:flex;gap:8px;align-items:flex-end;max-width:min(680px,78%);position:relative;margin-top:8px}
.bericht.vervolg{margin-top:2px}
.bericht.eigen{margin-left:auto;flex-direction:row-reverse}
.b-avatar{width:30px;height:30px;font-size:10.5px;flex:none;margin-bottom:2px}
.b-plek{width:30px;flex:none}
.b-kolom{min-width:0}
/* de tekstballon in het gesprek; niet te verwarren met het belletje in
   de balk, dat dezelfde naam draagt */
.bericht .bel{background:var(--card);border-radius:10px 10px 10px 3px;padding:7px 10px 5px;position:relative;
  box-shadow:0 1px 2px rgba(22,38,45,.12);min-width:88px}
.bericht.vervolg .bel{border-radius:10px}
.bericht.eigen .bel{background:#D9F2EE;border-radius:10px 10px 3px 10px}
.bericht.eigen.vervolg .bel{border-radius:10px}
.bericht.aanmij .bel{box-shadow:0 1px 2px rgba(22,38,45,.12), inset 3px 0 0 var(--signal)}
.bericht.gemarkeerd .bel{animation:belMark 1.4s ease}
@keyframes belMark{0%,100%{box-shadow:0 1px 2px rgba(22,38,45,.12)}30%{box-shadow:0 0 0 3px var(--signal)}}
.b-van{font-size:11.5px;font-weight:700;margin-bottom:2px}
.b-tekst{font-size:13.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.verwijzing{background:var(--primair-l);color:var(--primair);border-radius:3px;padding:0 4px}
.b-voet{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:2px;
  font-size:10px;color:var(--steel-2);line-height:1}
.b-vink{letter-spacing:-1px;font-weight:700}
.b-vink.gelezen{color:var(--primair)}
.b-citaat{background:rgba(0,109,119,.08);border-left:3px solid var(--primair);border-radius:5px;
  padding:5px 8px;margin-bottom:5px;font-size:12px;cursor:pointer;max-width:320px}
.b-citaat span{font-weight:700;font-size:11.5px;display:block}
.b-citaat div{color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-foto{display:block;border-radius:7px;max-width:280px;max-height:220px;object-fit:cover;cursor:pointer;
  margin:-2px -3px 5px}
.b-bestand{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:6px;padding:8px 10px;
  margin-bottom:5px;font-size:12.5px}
.b-bestand .ico{width:18px;height:18px;color:var(--steel);flex:none}
.b-reacties{display:flex;gap:4px;margin:-6px 0 0 6px;position:relative;z-index:1}
.bericht.eigen .b-reacties{justify-content:flex-end;margin-right:6px}
.b-reactie{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1px 7px;
  font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:3px;box-shadow:var(--shadow)}
.b-reactie span{font-size:10px;font-weight:700;color:var(--steel)}
.b-reactie.mijn{border-color:var(--primair);background:var(--primair-l)}
.b-acties{display:none;align-items:center;gap:4px;align-self:center}
.bericht:hover .b-acties{display:flex}
.b-acties>button{background:var(--card);border:1px solid var(--line);border-radius:50%;width:26px;height:26px;
  cursor:pointer;font-size:12px;color:var(--steel);box-shadow:var(--shadow)}
.b-acties>button:hover{border-color:var(--primair);color:var(--primair)}
.b-kiezer{display:none;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:3px 5px;box-shadow:0 4px 14px rgba(22,38,45,.16)}
.b-acties:hover .b-kiezer{display:flex}
.b-kiezer button{background:none;border:0;font-size:15px;cursor:pointer;padding:1px 2px;
  transition:transform .12s;line-height:1}
.b-kiezer button:hover{transform:scale(1.35)}
.b-leeg{margin:auto;text-align:center;color:var(--steel);display:grid;gap:6px;justify-items:center;padding:30px}
.b-leeg b{font-size:14.5px;color:var(--ink)}
.b-leeg span{font-size:12.5px;max-width:260px;line-height:1.5}

/* invoerbalk */
.b-antwoordbalk{display:flex;align-items:center;gap:8px;padding:8px 14px 0;background:var(--card)}
.b-antwoordbalk .b-citaat{flex:1;margin:0}
.b-antwoordbalk>button{background:none;border:0;font-size:19px;color:var(--steel-2);cursor:pointer}
.b-invoer{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);
  border-top:1px solid var(--line-2);flex:none}
.b-invoer input[type=text]{flex:1;border-radius:20px;padding:10px 16px;background:var(--paper);font-size:13.5px}
.b-invoer input[type=text]:focus{background:var(--card)}
.b-knop{background:var(--paper);border:1px solid var(--line);border-radius:50%;width:36px;height:36px;flex:none;
  cursor:pointer;color:var(--steel);display:grid;place-items:center;font-size:17px}
.b-knop:hover{border-color:var(--primair);color:var(--primair)}
.b-knop .ico{width:17px;height:17px}
.b-verstuur{background:var(--primair);border:0;border-radius:50%;width:38px;height:38px;flex:none;color:#fff;
  cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.12s}
.b-verstuur:hover{background:var(--primair-d);transform:scale(1.06)}

/* samenvatting op het werkorderdetail */
.ov-kort{display:grid;gap:10px;padding-top:12px;padding-bottom:12px}
.ov-regel{display:flex;gap:9px;align-items:flex-start}
.ov-regel .avatar{width:26px;height:26px;font-size:10px;flex:none}
.ov-regel .ov-tekst{font-size:12.5px;color:var(--steel);line-height:1.5}
.ov-regel .ov-van{font-size:11.5px;font-weight:700;display:flex;gap:8px}
.ov-regel .ov-van span{font-weight:400;color:var(--steel-2)}
.ov-meer{background:none;border:0;color:var(--primair);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:2px 0;text-align:left}
.ov-leeg{font-size:12.5px;color:var(--steel);line-height:1.5}

/* ---- gespreksvenster ---- */
.chatvenster{position:fixed;right:22px;bottom:22px;z-index:95;width:380px;height:520px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 52px rgba(22,38,45,.3);display:flex;flex-direction:column;overflow:hidden}
.chatvenster.groot{width:min(560px,calc(100vw - 44px));height:min(680px,calc(100vh - 60px))}
.chat-kop{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--rail);color:#fff;flex:none}
.chat-kop .ov-teken{width:32px;height:32px;background:rgba(255,255,255,.16);color:#fff;font-size:12px;border:0}
.chat-titel{min-width:0;flex:1}
.chat-titel b{display:block;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-titel .plate{color:#8A9799;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-knop{background:rgba(255,255,255,.12);border:0;color:#fff;width:26px;height:26px;border-radius:7px;
  cursor:pointer;font-size:13px;line-height:1;flex:none}
.chat-knop:hover{background:rgba(255,255,255,.24)}
.chat-stroom{padding:13px 14px 8px}
.chatvenster .bericht{max-width:88%}
.chatvenster .b-foto{max-width:210px}

.ai-knop.opzij{right:auto;left:22px}

@media(max-width:1000px){
  .pb-cel{padding:5px 4px}
  .pb-kaart{font-size:10px}
  .mp-dagkoppen,.mp-week{grid-template-columns:34px repeat(7,minmax(0,1fr))}
  .mp-cel{padding:5px 5px 6px;min-height:96px}
  .mp-dagkop{padding:6px 5px;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mp-item{font-size:9.5px;padding-right:4px}
  .mp-u{display:none}
  .ov-raster{grid-template-columns:1fr}
  .ov-lijst{border-right:0;border-bottom:1px solid var(--line);max-height:220px}
}
@media(max-width:620px){
  .mp-titel{display:none}
  .mp-item{justify-content:center;padding:2px}
  .mp-uren{font-size:9px}
}
@media(max-width:620px){
  .chatvenster,.chatvenster.groot{right:0;left:0;bottom:0;width:auto;height:min(78vh,560px);border-radius:14px 14px 0 0}
  .med-paneel{right:12px;left:12px;width:auto}
  .ai-knop.opzij{left:14px;bottom:14px}
}
body.veldmodus .chatvenster{right:0;left:0;bottom:0;width:auto;height:78vh;border-radius:14px 14px 0 0}
@media print{
  .med-balk,.med-paneel,.chatvenster{display:none!important}
  .labelvel{page-break-after:always}
  .label{border-color:#0F1F3D!important}
}

.klantlogo{display:block;object-fit:contain;max-width:190px}
.logo-vak{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);padding:14px;margin-top:12px}
.logo-voorbeeld{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;
  display:grid;place-items:center;min-width:120px;min-height:66px}
.logo-voorbeeld img{max-width:170px;max-height:46px;object-fit:contain;display:block}
.doc-logo.eigen{background:#fff!important;padding:2mm 3mm}
.doc-logo.eigen img{height:11mm;max-width:44mm;object-fit:contain;display:block}
.lb-merk img{max-height:4mm;max-width:22mm;object-fit:contain;display:block;margin-top:1mm}
.lb-groot .lb-merk img{max-height:6mm;max-width:32mm}
.lb-bordje .lb-merk img{max-height:9mm;max-width:44mm}
.doc-adres{border:1px solid var(--doc-lijn);padding:3mm;font-size:9pt;line-height:1.5}
.doc-adres b{font-size:10.5pt}
.doc-lijst{margin:0;padding-left:5mm;font-size:9pt;line-height:1.6}
.doc-tabel tfoot td{font-size:9pt;padding:1.5mm 2mm;border-top:1px solid var(--doc-lijn)}

.ideeraster{display:grid;gap:10px;padding:14px 16px;background:var(--paper)}
@media(min-width:1500px){ .ideeraster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:2100px){ .ideeraster{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ideekaart{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer;box-shadow:var(--shadow);transition:.12s}
.ideekaart:hover{border-color:var(--primair);transform:translateY(-1px)}
.ik-stem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:none;
  width:52px;border:1px solid var(--line);border-radius:8px;padding:6px 0;background:var(--paper);cursor:pointer}
.ik-stem:hover{border-color:var(--primair);background:var(--primair-l)}
.ik-stem.aan{background:var(--primair);border-color:var(--primair);color:#fff}
.ik-stem b{font-size:16px;line-height:1}
.ik-pijl{font-size:11px;opacity:.7}
.ik-stem.groot{width:72px;margin-left:auto;padding:10px 0}
.ik-stem.groot b{font-size:24px}
.ik-mid{min-width:0;flex:1}
.ik-kop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ik-titel{font-size:14.5px;font-weight:600;margin:6px 0 4px;line-height:1.3}
.ik-tekst{font-size:12.5px;color:var(--steel);line-height:1.5;margin-bottom:8px}
.ik-voet{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ik-voet .avatar{width:24px;height:24px;font-size:9.5px}

.chartgroot{margin:0 -4px}
.chartgroot .chartbox{border-radius:var(--r-s)}
body.chart-groot .modal{width:min(1100px,100%)}
.vs-blok{border-top:1px solid var(--line-2)}
.vs-kop{display:flex;align-items:center;gap:12px;padding:11px 16px 8px;flex-wrap:wrap}
.vs-kop b{font-size:14px}
.vs-bedrag{margin-left:auto;text-align:right}
.vs-bedrag b{font-size:16px}
.vs-merk{display:block;width:9px;height:9px;border-radius:50%;background:var(--primair)}
.vs-merk.voorstel{background:var(--signal)}
.vs-extra{background:var(--signal-l)}
.vs-voet{display:flex;gap:8px;padding:10px 16px 14px;flex-wrap:wrap}

.rg-balk{display:flex;align-items:center;gap:6px;padding:4px 0 12px}
.rg-bol{flex:1;height:5px;border-radius:3px;background:var(--line-2)}
.rg-bol.af{background:var(--primair)}
.rg-bol.nu{background:var(--signal);box-shadow:0 0 0 3px var(--signal-l)}
.rg-acteur{display:flex;align-items:center;gap:13px}
.rg-acteur .avatar.groot{width:46px;height:46px;font-size:15px}.obj-fotos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.obj-foto{position:relative;margin:0}
.obj-foto.hoofd img{width:150px;height:150px}
.obj-foto figcaption{position:absolute;left:5px;bottom:5px;background:rgba(15,31,61,.72);color:#fff;
  border-radius:5px;padding:1px 6px;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase}
.obj-fotoknoppen{position:absolute;top:4px;right:4px;display:none;gap:3px}
.obj-foto:hover .obj-fotoknoppen{display:flex}
.obj-fotoknoppen button{width:22px;height:22px;border:0;border-radius:6px;cursor:pointer;
  background:rgba(15,31,61,.78);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center}
.obj-fotoknoppen button:hover{background:var(--primair)}
@media(hover:none){.obj-fotoknoppen{display:flex}}
.obj-fotos img{width:92px;height:92px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  cursor:pointer;transition:.12s}
.obj-fotos img:hover{border-color:var(--primair);transform:scale(1.04)}
.obj-meer{width:64px;height:64px;border-radius:7px;border:1px dashed var(--line);display:grid;place-items:center;
  font-size:12px;color:var(--steel)}.rd-balk{height:7px;background:var(--line-2);border-radius:4px;overflow:hidden}
.rd-balk>div{height:100%;background:var(--primair);border-radius:4px;transition:width .3s}
/* de rondelijst in het bewerkscherm */
.rb-lijst{display:grid;gap:6px}
.rb-punt{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--card)}
.rb-nr{flex:none;width:20px;height:20px;border-radius:50%;background:var(--primair-l);
  color:var(--primair);font-size:11px;font-weight:700;display:grid;place-items:center}
.rb-punt b{font-size:12.5px}
.rd-punten{display:grid}
.rd-punt{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line-2);align-items:flex-start}
.rd-punt.af{background:#F6FAF8}
.rd-punt.afwijking{background:var(--red-l)}
.rd-nr{width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;color:var(--steel)}
.rd-punt.af .rd-nr{background:var(--primair);border-color:var(--primair);color:#fff}
.rd-punt.afwijking .rd-nr{background:var(--red);border-color:var(--red);color:#fff}
.rd-mid{flex:1;min-width:0}
.rd-taak{font-size:13.5px;font-weight:600;line-height:1.35}
.rd-meet{margin-top:8px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.rd-meet label{display:block}
.rd-meet label span{display:block;font-size:11px;color:var(--steel);margin-bottom:3px}
.rd-meet input{width:150px;font-family:var(--mono);font-size:15px;padding:8px 10px}
.rd-grens{font-size:11px;color:var(--steel-2);padding-bottom:9px}
.rd-opm{margin-top:6px;font-size:12.5px;color:var(--ink);background:#fff;border-radius:var(--r-s);
  padding:7px 10px;border-left:3px solid var(--red)}
.rd-knoppen{display:grid;gap:5px;flex:none}
.mp-blok{margin-bottom:14px}
.mp-kop2{display:flex;align-items:center;gap:8px}
.mp-kop2 b{font-size:13.5px}
.mp-grafiek{width:100%;height:44px;margin-top:6px;display:block}
@media(max-width:620px){
  .rd-punt{flex-wrap:wrap}
  .rd-knoppen{width:100%;grid-template-columns:1fr 1fr;gap:8px}
  .rd-meet input{width:100%}
}

.obj-kaart{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
.obj-kop{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.obj-kop b{font-size:13.5px;display:block}
.obj-kop .btn{margin-left:auto}
.obj-merk{width:32px;height:32px;border-radius:9px;color:#fff;display:grid;place-items:center;flex:none}
.obj-merk svg,.obj-merk .ico{width:17px;height:17px}
.obj-merkfoto{padding:0;border:1px solid var(--line);overflow:hidden;cursor:zoom-in;
  background:var(--paper)}
.obj-merkfoto img{width:100%;height:100%;object-fit:cover;display:block}
.dos-kop .obj-merkfoto{width:52px;height:52px;border-radius:11px}
.obj-kenmerken{margin:0 0 10px}
.obj-kenmerken dt{font-size:11px}
.obj-teller{background:#fff;border-radius:var(--r-s);padding:8px 11px;margin-bottom:10px;font-size:13px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.obj-teller b{font-family:var(--mono);font-size:15px}
.obj-teller .btn{margin-left:auto}
.obj-keuringen{display:grid;gap:6px}
.obj-keuring{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:8px 11px;font-size:12.5px}
.obj-keuring b{font-size:12.5px}
.obj-keuring .dot{width:9px;height:9px;flex:none}
.obj-keuring .btn{margin-left:auto}

.imp-bijlagevak{background:var(--primair-l);border:1px solid #CBE0E2;border-radius:10px;padding:14px;margin-top:6px}
.imp-bijlagen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.imp-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:3px 10px 3px 4px;font-size:11.5px;max-width:240px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-chip img{width:20px;height:20px;object-fit:cover;border-radius:50%;flex:none}
.imp-chip .ico{width:14px;height:14px;color:var(--steel);flex:none;margin-left:4px}

/* ---- de importmodule -------------------------------------------
   Links een vaste kolom met de soorten en hun stand, rechts het werk.
   Zo is altijd te zien waar u bent en wat er nog moet. */
/* de drie stappen op het startscherm */
.imp-weg{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.imp-stap-vak{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);border-radius:11px;padding:14px}
.imp-stap-vak b{font-size:13px}
.imp-stap-vak .btn{align-self:flex-start;margin-top:auto}
.imp-pijl{display:grid;place-items:center;color:var(--steel-2);font-size:18px}
@media(max-width:860px){.imp-pijl{display:none}}
.imp-vlak{display:flex;gap:16px;align-items:flex-start}
.imp-zij{flex:none;width:230px;position:sticky;top:78px;display:grid;gap:4px}
.imp-zij-kop{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-2);padding:2px 4px 6px}
.imp-soort{display:flex;align-items:center;gap:9px;text-align:left;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  cursor:pointer}
.imp-soort:hover{border-color:var(--primair)}
.imp-soort.bezig{border-color:var(--primair);background:var(--primair-l)}
.imp-soort.wacht{opacity:.55;cursor:not-allowed}
.imp-nr{flex:none;width:20px;height:20px;border-radius:50%;background:var(--line-2);
  color:var(--steel);font-size:11px;font-weight:700;display:grid;place-items:center}
.imp-soort.gevuld .imp-nr{background:var(--groen-l, #E7F5EE);color:var(--green)}
.imp-soort.bezig .imp-nr{background:var(--primair);color:#fff}
.imp-soort-tekst{min-width:0;flex:1}
.imp-soort-tekst b{display:block;font-size:12.5px}
.imp-vink{color:var(--green);font-weight:700}
.imp-werk{flex:1;min-width:0}
.imp-kop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.imp-kop b{font-size:15px}
.imp-stapnr{margin-left:auto;font-size:11px;color:var(--steel-2)}
/* het kiezen van een bestand */
.imp-kies{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.imp-drop{flex:1;min-width:220px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;border:2px dashed var(--line);border-radius:12px;padding:22px;
  cursor:pointer;text-align:center}
.imp-drop:hover{border-color:var(--primair);background:var(--primair-l)}
.imp-drop input{display:none}
.imp-drop-ico{width:26px;height:26px;color:var(--primair)}
.imp-of{display:grid;place-items:center;color:var(--steel-2);font-size:11px}
.imp-plakvak{flex:1;min-width:260px}
.imp-plakvak textarea{width:100%;font-family:var(--mono);font-size:11.5px}
.imp-velden{display:flex;flex-wrap:wrap;gap:6px}
.imp-veld{font-size:11px;border:1px solid var(--line);border-radius:12px;padding:2px 9px;
  color:var(--steel)}
.imp-veld.moet{border-color:var(--primair);color:var(--primair);font-weight:600}
@media(max-width:860px){.imp-vlak{flex-direction:column}.imp-zij{width:100%;position:static}}
.imp-stappen{display:flex;gap:6px;flex-wrap:wrap}
.imp-stap{display:flex;align-items:center;gap:7px;flex:1;min-width:110px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12.5px;color:var(--steel)}
.imp-stap span{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--steel);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.imp-stap.af{color:var(--ink)}
.imp-stap.af span{background:var(--green);color:#fff}
.imp-stap.nu{border-color:var(--primair);background:var(--primair-l);color:var(--primair);font-weight:600}
.imp-stap.nu span{background:var(--primair);color:#fff}
.imp-doelen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.imp-doelen button{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;
  cursor:pointer;text-align:left;display:grid;gap:5px;box-shadow:var(--shadow)}
.imp-doelen button:hover{border-color:var(--primair);transform:translateY(-1px)}
.imp-doelen b{font-size:14.5px}
.imp-ico{width:36px;height:36px;border-radius:10px;background:var(--primair-l);color:var(--primair);
  display:grid;place-items:center;margin-bottom:4px}
.imp-ico .ico,.imp-ico svg{width:19px;height:19px}
.imp-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.imp-velden>div{background:var(--paper);border-radius:var(--r-s);padding:9px 11px;font-size:12.5px}
.imp-mini{width:34px;height:34px;object-fit:cover;border-radius:5px;display:block}

.tabelvak{min-width:0;max-width:100%;overflow:auto;max-height:72vh}
.tabelvak table thead th{position:sticky;top:0;z-index:2;background:var(--paper)}
table.smal{table-layout:auto;width:100%}
/* smal betekent krappere marges, niet kleinere letters */
table.smal th,table.smal td{padding:5px 7px;overflow-wrap:anywhere}
table.smal th{height:30px}
.matrix.smal th{white-space:normal;line-height:1.25}

.bd-lijst{min-width:0}
.lb-locatie{text-align:left}
.lb-locatie .lb-kks{color:var(--ink)}

/* ---- melden met scan en foto ---- */.meld-gekozen{display:flex;align-items:flex-start;gap:14px;background:var(--primair-l);border-radius:10px;
  padding:14px}
.meld-gekozen b{font-size:15px;display:block}
.meld-keuzeknoppen{display:grid;gap:10px}
.meld-keuzeknoppen .meld-scan{width:100%}
.meld-lijst{display:grid;gap:3px;max-height:52vh;overflow-y:auto;margin-top:4px}
.meld-lijst button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  border-radius:8px;padding:8px 11px;cursor:pointer;text-align:left}
.meld-lijst button:hover{background:var(--primair-l)}
.ml-merk{width:26px;height:26px;border-radius:8px;color:#fff;display:grid;place-items:center;flex:none}
.ml-merk svg,.ml-merk .ico{width:14px;height:14px}
.ml-mid{min-width:0;flex:1;display:block}
.ml-naam{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-mid .num{font-size:11px;display:block}
.ml-mid .plate{display:block}

.meld-boven{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.meld-scan{display:flex;align-items:center;gap:11px;background:var(--primair);color:#fff;border:0;
  border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;width:100%}
.meld-scan.licht{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.meld-scan b{display:block;font-size:13.5px;line-height:1.25}
.meld-scan .plate{display:block;color:inherit;opacity:.75;margin-top:1px}
.meld-scan>span:last-child{min-width:0}
.meld-ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.18);display:grid;
  place-items:center;flex:none}
.meld-scan.licht .meld-ico{background:var(--primair-l);color:var(--primair)}
.meld-ico svg,.meld-ico .ico{width:18px;height:18px;stroke-width:1.9}
.meld-gescand{background:var(--primair-l);border-radius:var(--r-s);padding:9px 12px;margin-bottom:12px;font-size:13px}
.meld-gescand .plate{display:block;margin-top:2px}
.meld-foto{position:relative;display:inline-block}
.meld-foto img{width:64px;height:64px;object-fit:cover;border-radius:7px;border:1px solid var(--line);display:block}
.meld-foto button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;border:2px solid #fff;cursor:pointer;font-size:11px;line-height:1;padding:0}
.meld-scanner{background:var(--ink);border-radius:10px;overflow:hidden;margin-bottom:12px}
.meld-scanner video{width:100%;max-height:230px;object-fit:cover;display:block;background:#0A1730}
.meld-scanner .melding{color:#fff;font-size:12.5px;padding:10px 12px;text-align:center}
.meld-zoek{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
.meld-treffers{display:grid;gap:5px;max-height:190px;overflow-y:auto;margin-top:9px}
.meld-treffers button{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:8px 11px;cursor:pointer;font-size:12.5px}
.meld-treffers button:hover{border-color:var(--primair);background:var(--primair-l)}
@media(max-width:620px){.meld-boven{grid-template-columns:1fr}}

/* ---- voorgestelde bestelling bij een ingelezen factuur ---- */
.fac-match{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.fac-match:hover{border-color:var(--primair)}
.fac-match.on{border-color:var(--primair);border-width:2px;padding:9px 11px;background:var(--primair-l)}
.fac-kop{display:flex;align-items:center;gap:8px}
.fac-kop b{font-size:14px}

/* ---- codeboeken ---- *//* ---- stamboom ---- */
.boomkiezer{position:relative;display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:0 12px 0 12px;min-width:260px;flex:1;max-width:380px}
.boomkiezer:focus-within{border-color:var(--primair);background:#fff;box-shadow:0 0 0 3px rgba(0,109,119,.12)}
.bk-ico{display:grid;place-items:center;color:var(--steel-2);flex:none}
.bk-ico svg{width:15px;height:15px}
.boomkiezer input{flex:1;border:0;background:none;padding:8px 0;font-size:12.5px;min-width:0}
.boomkiezer input:focus{outline:none;box-shadow:none;background:none}
.bk-weg{background:none;border:0;font-size:17px;line-height:1;color:var(--steel-2);cursor:pointer;padding:0 2px}
.bk-lijst{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 34px rgba(22,38,45,.18);z-index:30;max-height:340px;overflow-y:auto;
  padding:5px}
.bk-lijst button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:8px 9px;border-radius:7px;cursor:pointer;text-align:left}
.bk-lijst button:hover{background:var(--primair-l)}
.bk-merk{width:28px;height:28px;border-radius:8px;color:#fff;display:grid;place-items:center;flex:none}
.bk-merk svg,.bk-merk .ico{width:15px;height:15px}
.bk-mid{min-width:0;display:block}
.bk-tag{font-family:var(--mono);font-size:11px;color:var(--primair);display:block}
.bk-naam{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-leeg{padding:12px;font-size:12.5px;color:var(--steel)}
.knoop-merk{width:22px;height:22px;border-radius:6px;color:#fff;display:grid;place-items:center;flex:none;
  opacity:.9}
.knoop-merk svg,.knoop-merk .ico{width:12px;height:12px}
.knoop-kkscode{font-family:var(--mono);font-size:11px;color:var(--steel-2);flex:none}
.knoop{position:relative}
.knoop:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;
  border-radius:0 3px 3px 0}
.knoop.on:before{background:var(--primair)}
.schermkop{flex:none;margin-bottom:12px}
.schermkop h1{margin-bottom:2px}
.schermkop .sub{margin:0}

/* het installatiescherm vult het beeld */
/* De stamboom loopt door zolang hij duurt; de bladzijde schuift mee.
   Eerder zat de boom in een eigen schuifvak van één schermhoogte,
   waardoor bij tweehonderd objecten steeds maar een deel te zien was. */
.boomkaart{display:flex;flex-direction:column;flex:1;min-height:420px}
/* De knoppenbalk boven de stamboom blijft staan; de boom schuift eronder
   door. Bij tweehonderd objecten scrolde die balk anders meteen weg en
   was er geen weg terug naar de tabel. */
.boomkaart>header{position:sticky;top:61px;z-index:6;background:var(--card);
  border-bottom:1px solid var(--line)}
/* in de tabel schuift de inhoud binnen de kaart, dus daar plakt de balk
   aan de bovenkant van de kaart zelf */
.boomkaart.tabelvenster>header{top:0}
@media(max-width:860px){.boomkaart>header{top:0}}
.boomkaart.tabelvenster{max-height:calc(100vh - 108px);overflow:hidden}
.tabelvenster .instabelvak{flex:1;min-height:0;overflow:auto}
.boomkaart>.boomvol{overflow:visible}
.boomkaart .boom{overflow:visible;height:auto}
.boomkaart>header{flex:none}
.boomkaart>.boomgrid{flex:1;min-height:0}
.boomkaart>.instabelvak{flex:1;min-height:0}
.boomkaart>.body{flex:none}
body.installatiescherm .wrap{display:flex;flex-direction:column;min-height:0}
body.installatiescherm .boomkaart{flex:1}

.cb-boom{display:grid}
.cb-tak{border-top:1px solid var(--line-2)}
.cb-kop,.cb-kop2{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  padding:10px 16px;cursor:pointer;text-align:left;font-size:13.5px}
.cb-kop:hover,.cb-kop2:hover{background:var(--paper)}
.cb-kop{font-weight:600}
.cb-kop2{padding-left:34px;font-size:12.5px;border-top:1px solid var(--line-2)}
.cb-kop.uit,.cb-kop2.uit,.cb-regel.uit,.cb-tegel.uit{opacity:.5}
.cb-pijl{width:12px;color:var(--steel-2);font-size:10px;flex:none}
.cb-code{font-family:var(--mono);font-size:11.5px;font-weight:700;background:var(--primair-l);color:var(--primair);
  border-radius:4px;padding:2px 7px;flex:none;letter-spacing:.02em}
.cb-blad{background:var(--paper);padding:6px 16px 10px 52px;display:grid;gap:3px}
.cb-regel{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:3px 0}
.cb-regel .plate{margin-left:auto}
.cb-groep{border-top:1px solid var(--line-2)}
.cb-groepkop{display:flex;align-items:center;gap:9px;padding:10px 16px 8px;font-size:13.5px}
.cb-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;padding:0 16px 12px}
.cb-tegel{display:flex;align-items:flex-start;gap:8px;background:var(--paper);border-radius:var(--r-s);
  padding:7px 10px;font-size:12px;line-height:1.35}
.kks-uitslag{background:var(--ink);border-radius:10px;padding:14px 16px;margin-bottom:14px;color:#fff}
.kks-code{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:.06em;color:var(--signal)}
.kks-delen{display:grid;gap:3px;margin-top:8px;font-size:12px;color:#CBD8DA}
.kks-delen b{font-family:var(--mono);color:#fff;margin-right:6px}

/* ---- asset health check ---- */
.ahc-kop{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ahc-titel h1{font-size:22px}
.ahc-asset{display:grid;grid-template-columns:170px minmax(0,1.2fr) minmax(0,1fr);gap:16px;padding:16px}
.ahc-foto{background:var(--paper);border-radius:10px;overflow:hidden;display:grid;place-items:center;min-height:150px}
.ahc-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ahc-geenfoto{display:grid;place-items:center;gap:6px;color:var(--steel-2);font-size:11.5px}
.ahc-geenfoto svg,.ahc-geenfoto .ico{width:30px;height:30px}
.ahc-gegevens{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);
  border-radius:var(--r-s);overflow:hidden;align-content:start}
.ahc-cel{background:var(--card);padding:7px 10px;min-width:0}
.ahc-cel span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--steel)}
.ahc-cel b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ahc-scores{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.ahc-totaal{text-align:center;background:var(--paper);border-radius:10px;padding:10px 14px}
.ahc-groot{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1.1}
.ahc-domeinen{display:grid;gap:5px;min-width:0}
.ahc-dom{display:grid;grid-template-columns:96px 1fr 38px 34px;gap:8px;align-items:center;font-size:12px}
.ahc-dom>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--steel)}
.ahc-dom b{font-family:var(--mono);font-size:13px;text-align:right}
.ahc-kpi{font-family:var(--mono);font-size:11px;color:var(--steel-2);text-align:right}
.ahc-kpi.haalt{color:var(--green)}
.ahc-balk{height:8px;background:var(--line-2);border-radius:4px;position:relative}
.ahc-balk>div{height:100%;border-radius:4px;transition:width .3s}
.ahc-balk>i{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink);opacity:.55}
.ahc-voortgang{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ahc-voortgang .rd-balk{flex:1;min-width:180px}
.ahc-domeinkaart{margin-bottom:12px}
.ahc-domeinkaart header h2{display:flex;align-items:center;gap:8px}
.ahc-nr{width:22px;height:22px;border-radius:6px;background:var(--ink);color:#fff;display:grid;
  place-items:center;font-size:11px;font-weight:700}
.ahc-tabel{table-layout:fixed;width:100%}
.ahc-tabel td{vertical-align:top}
.ahc-tabel th,.ahc-tabel td{overflow-wrap:anywhere}
/* de kaart mag niet buiten het scherm lopen */
.ahc-domeinkaart{max-width:100%;overflow:hidden}
.ahc-domeinkaart .tabelvak{overflow-x:auto}
.ahc-domeinkaart .tabelvak table{min-width:860px}
/* de norm per domein in de instellingen */
.norm-tabel{width:100%;margin:0}
.norm-tabel td,.norm-tabel th{padding:9px 10px;vertical-align:top}
.norm-tabel .plate{line-height:1.5}
.ahc-select{width:76px;font-family:var(--mono);font-size:15px;font-weight:700;text-align:center;padding:5px 6px;
  border-width:2px}
.ahc-meet{font-family:var(--mono);font-size:14px;font-weight:700}.hc-herkomst{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.hc-herkomst b{font-size:13px;display:block}
.hc-herkomst .plate{display:block}

.hc-cyclus .body{padding:12px 14px}
.cyc-rij{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.cyc-stap{flex:1 1 170px;display:flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-width:0}
.cyc-bol{width:24px;height:24px;border-radius:50%;background:var(--primair);color:#fff;display:grid;
  place-items:center;font-size:11.5px;font-weight:700;flex:none}
.cyc-mid{min-width:0;flex:1}
.cyc-mid b{font-size:12.5px;display:block}
.cyc-mid .plate{display:block;line-height:1.35;white-space:normal}
.cyc-aantal{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--primair);flex:none}
.cyc-pijl{align-self:center;color:var(--steel-2);font-size:14px;flex:none}
@media(max-width:900px){.cyc-pijl{display:none}}

/* ---- installatietabel ---- */
.instabelvak{overflow:auto;min-height:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);position:relative}
.instabel{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%}
.instabel th,.instabel td{box-sizing:border-box}
.instabel thead th{position:sticky;top:0;z-index:3;background:var(--paper);text-align:left;
  height:34px;padding:0 var(--tab-pad);font-size:var(--tab-kop);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-2);cursor:pointer;white-space:nowrap;overflow:hidden;
  vertical-align:middle}
.instabel thead th>span{display:inline-block;max-width:calc(100% - 16px);overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle}
.instabel thead th:hover{color:var(--primair);background:#EEF3F2}
.ins-sort{margin-left:4px;color:var(--primair);font-size:var(--tab-mono)}
.instabel .ins-filterrij th{top:34px;z-index:2;height:40px;padding:0 6px;background:var(--card);cursor:default;
  border-bottom:1px solid var(--line)}
.ins-filterrij input{width:100%;font-size:var(--tab-tekst);padding:5px 9px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line);height:28px}
.ins-filterrij input::placeholder{color:var(--steel-2);font-size:var(--tab-mono)}
.ins-filterrij input:focus{background:#fff;border-color:var(--primair);outline:none;
  box-shadow:0 0 0 3px rgba(0,109,119,.12)}
.instabel tbody td{height:var(--tab-regel);padding:0 var(--tab-pad);font-size:var(--tab-tekst);
  border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle;background:var(--card)}
.instabel tbody tr{cursor:pointer}
.instabel tbody tr:nth-child(even) td{background:#FAFCFC}
.instabel tbody tr:hover td{background:var(--primair-l)}
/* de nadruk zit in de inhoud (een <b> om de omschrijving), zodat elke
   tabel dezelfde regels volgt */

/* ---- installatiedossier ---- */
.dos-kop{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dos-kop .obj-merk{width:44px;height:44px;border-radius:12px}
.dos-kop .obj-merk svg,.dos-kop .obj-merk .ico{width:22px;height:22px}
.dos-knoppen{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.dos-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.dos-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;
  font-size:13px;font-weight:600;color:var(--steel);cursor:pointer;white-space:nowrap}
.dos-tabs button:hover{color:var(--ink)}
.dos-tabs button.on{color:var(--primair);border-bottom-color:var(--primair)}
.dos-blok{display:grid;gap:1px;background:var(--line-2);border-radius:var(--r-s);overflow:hidden}
.dos-veld{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:12px;background:var(--card);
  padding:9px 12px;font-size:13px;align-items:baseline}
.dos-veld>span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--steel)}
@media(max-width:1000px){
  .ahc-asset{grid-template-columns:1fr}
  .ahc-scores{grid-template-columns:1fr}
}
@media(max-width:700px){
  .dos-veld{grid-template-columns:1fr;gap:2px}
  .instabelvak{max-height:none}
}

.cb-tak2{border-top:1px solid var(--line-2)}
.dos-inhoud{min-width:0}
.vs-merk.aangevraagd{background:var(--primair)}
.vermeld{color:var(--primair);font-weight:700}

/* ---- markering en chips bij de health check ---- */.sein-lijst{display:grid;gap:8px}
.sein{display:flex;align-items:flex-start;gap:11px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:12px;cursor:pointer;text-align:left;width:100%}
.sein:hover{border-color:var(--primair);background:var(--primair-l)}
.sein b{font-size:13.5px;display:block;margin-bottom:2px}
.sein .plate{display:block;white-space:normal;line-height:1.45}
.sein-merk{width:30px;height:30px;border-radius:9px;background:var(--primair);color:#fff;display:grid;
  place-items:center;flex:none}
.sein-merk svg,.sein-merk .ico{width:16px;height:16px}

/* Het chipje van een uitgezette actie stond op één regel met de tekst
   ernaast; werd de kolom smal, dan brak de tekst binnen het chipje af en
   stond er "vastgele / gd" onder elkaar. Nu breekt er niets meer af: het
   chipje is zo breed als het moet zijn en de kolom heeft een ondergrens. */
.hc-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:3px 11px 3px 8px;font-size:11px;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.hc-chip:hover{border-color:var(--primair);background:var(--primair-l)}
.hc-chip b{font-family:var(--mono);font-size:11px;white-space:nowrap}
.hc-chip span:last-child{color:var(--steel);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hc-chip .dot{width:7px;height:7px;flex:none}
/* de chipjes en de knop onder elkaar, netjes links uitgelijnd */
.hc-acties{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.hc-acties .btn{white-space:nowrap}
/* de kolom is zo breed als het langste chipje; afbreken hoeft niet meer */
td:has(> .hc-acties){min-width:230px;white-space:nowrap}
/* de status hoort volledig leesbaar te zijn, anders zegt het chipje niets */
.hc-chip span:last-child{max-width:none}
.wo-health{display:inline-flex;align-items:center;gap:4px;background:var(--primair-l);color:var(--primair);
  border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;letter-spacing:.03em}.wis-snel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.wis-lijst{display:grid;gap:6px}
.wis-regel{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;cursor:pointer}
.wis-regel:hover{border-color:var(--primair)}
.wis-regel.aan{border-color:var(--primair);background:var(--primair-l)}
.wis-regel.zwaar.aan{border-color:var(--red);background:var(--red-l)}
.wis-regel input{margin-top:3px;flex:none}
.wis-mid{flex:1;min-width:0}
.wis-mid b{font-size:13.5px;display:inline-block}
.wis-mid .plate{display:block;white-space:normal;line-height:1.45;margin-top:2px}
.wis-let{display:inline-block;margin-left:8px;background:var(--red-l);color:var(--red);border-radius:4px;
  padding:1px 7px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wis-aantal{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--steel);flex:none}
.wis-voet{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-2)}
.wis-voet b{font-family:var(--mono);font-size:17px;display:block}
.wis-voet .btn{margin-left:auto}
.wis-blijft{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.wis-blijft span{background:var(--paper);border-radius:var(--r-s);padding:8px 11px;font-size:12px;color:var(--steel)}
.wis-blijft b{display:block;font-family:var(--mono);font-size:15px;color:var(--ink)}

/* ---- simulatie ---- */
.simbalk{position:fixed;right:22px;bottom:22px;z-index:96;width:370px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 52px rgba(22,38,45,.3);overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.simbalk.groot{width:min(520px,calc(100vw - 44px))}
.sim-kop{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--rail);color:#fff;flex:none}
.sim-kop b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-kop .plate{color:#8A9799}
.sim-merk{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;
  place-items:center;flex:none}
.sim-merk svg,.sim-merk .ico{width:16px;height:16px;flex:none}
.sim-balk{height:3px;background:#26333d;flex:none}
.sim-balk>div{height:100%;background:var(--signal);transition:width .3s}
.sim-lijf{padding:13px;overflow-y:auto;display:grid;gap:11px}
.sim-acteur{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.sim-acteur .avatar{width:30px;height:30px;font-size:11px}
.sim-acteur b{font-size:13px;display:block}
.sim-titel{font-size:15px;font-weight:700;line-height:1.3}
.sim-uitleg{font-size:12.5px;color:var(--steel);line-height:1.5;margin-top:3px}
.sim-uitkomst{background:var(--primair-l);border-radius:8px;padding:9px 11px;display:grid;gap:2px}
.sim-uitkomst b{font-size:12.5px}
.sim-uitkomst span:last-child{font-size:12px;color:var(--ink);line-height:1.45}
.sim-klaar{background:#EAF6F0;border-radius:8px;padding:11px;display:grid;gap:4px}
.sim-klaar b{font-size:14px}
.sim-log{display:grid;gap:7px;border-top:1px solid var(--line-2);padding-top:10px}
.sim-logregel{display:flex;gap:9px;align-items:flex-start;font-size:12px}
.sim-nr{width:19px;height:19px;border-radius:50%;background:var(--paper);color:var(--steel);display:grid;
  place-items:center;font-size:10.5px;font-weight:700;flex:none}
.sim-voet{display:flex;gap:7px;padding:11px 13px;border-top:1px solid var(--line-2);background:var(--paper);
  flex:none;flex-wrap:wrap}
.sim-keuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sim-keuze button{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:13px;cursor:pointer;text-align:left}
.sim-keuze button:hover{border-color:var(--primair);transform:translateY(-1px)}
.sim-keuze .sim-merk{background:var(--primair);color:#fff}
.sim-keuze b{font-size:13.5px;display:block;margin-bottom:3px}
.sim-keuze .plate{display:block;white-space:normal;line-height:1.4}
@media(max-width:620px){
  .simbalk,.simbalk.groot{right:0;left:0;bottom:0;width:auto;border-radius:14px 14px 0 0}
}
.hc-verloop{font-size:11px;color:var(--steel);margin-top:4px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.hc-verloop b{font-family:var(--mono);color:var(--ink)}
.hc-effectbalk{display:flex;height:26px;border-radius:6px;overflow:hidden;font-size:11.5px;font-weight:700}
.hc-effectbalk>div{display:grid;place-items:center;color:#fff;min-width:22px}
.hc-lijn{width:90px;height:24px;display:block}
.sim-nu{display:block}

/* basismaat voor elk pictogram; plekken met een eigen maat overschrijven dit */
.ico{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.btn .ico{width:15px;height:15px}
.chip .ico,.plate .ico{width:13px;height:13px}
.sim-merk .ico,.obj-merk .ico,.bk-merk .ico,.knoop-merk .ico{width:auto;height:auto}

body.kiesbreed .modal{width:min(1180px,100%)}
.meldkies{min-width:0}
.meldkies-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.meldkies-kop input{flex:1;min-width:220px;font-size:12.5px;padding:8px 12px}
.meldkies-vak{max-height:56vh;border-radius:8px;border:1px solid var(--line)}.segment-knop{background:none;border:0;padding:8px 16px;font-size:13px;font-weight:600;color:var(--steel);
  cursor:pointer;border-radius:8px}
.segment-knop:hover{color:var(--ink)}
.segment-knop.on{background:var(--card);color:var(--primair);box-shadow:0 1px 3px rgba(22,38,45,.14)}#teken-root .overlay-teken{z-index:140}
#teken-root .modal{width:min(940px,100%)}

.tk-balk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--paper);border-radius:10px;
  padding:9px 11px;margin-bottom:10px}
.tk-groep{display:flex;gap:4px;align-items:center}
.tk-knop{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:6px 11px;
  font-size:12px;font-weight:600;color:var(--steel);cursor:pointer}
.tk-knop:hover{border-color:var(--primair);color:var(--primair)}
.tk-knop.on{background:var(--primair);border-color:var(--primair);color:#fff}
.tk-kleur{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.tk-kleur.on{border-color:var(--ink);transform:scale(1.14)}
.tk-vlak{background:var(--ink);border-radius:10px;padding:8px;display:grid;place-items:center;
  max-height:58vh;overflow:auto}
.tk-vlak canvas{max-width:100%;height:auto;border-radius:6px;cursor:crosshair;touch-action:none;display:block}
.gm-foto{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.bl-tegel{position:relative}
.bl-teken{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(22,38,45,.72);color:#fff;font-size:13px;cursor:pointer;display:grid;place-items:center;
  z-index:2}
.bl-teken:hover{background:var(--primair)}
.bl-paar{display:inline-flex;align-items:center;gap:3px}
.bl-pen{border:1px solid var(--line);background:var(--card);border-radius:50%;width:24px;height:24px;
  cursor:pointer;color:var(--steel);font-size:12px;line-height:1;display:grid;place-items:center}
.bl-pen:hover{border-color:var(--primair);color:var(--primair);background:var(--primair-l)}

.wo-spoed{display:inline-flex;align-items:center;background:var(--red-l);color:var(--red);border-radius:4px;
  padding:1px 6px;font-size:10px;font-weight:700;letter-spacing:.03em;font-family:var(--sans)}
.stemlijst{display:grid;gap:5px;max-height:32vh;overflow-y:auto;margin-bottom:6px}
.stemregel{display:flex;align-items:center;gap:10px;width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:9px 12px;cursor:pointer;text-align:left}
.stemregel:hover{border-color:var(--primair);background:var(--primair-l)}
.stemregel.on{border-color:var(--primair);background:var(--primair-l);box-shadow:inset 0 0 0 1px var(--primair)}
.stemregel b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stemregel .plate{display:block}
.stem-merk{margin-left:auto;flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--paper);color:var(--steel);border-radius:5px;padding:3px 8px}
.stem-merk.top{background:var(--green);color:#fff}
#popup-root{position:fixed;top:74px;right:18px;z-index:150;display:grid;gap:9px;width:min(380px,calc(100vw - 32px))}
.popup{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--primair);border-radius:12px;padding:12px 13px;
  box-shadow:0 14px 34px rgba(16,24,32,.20);transform:translateX(24px);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .26s}
.popup.aan{transform:none;opacity:1}
.popup b{font-size:13.5px;display:block;margin-bottom:2px}
.popup .plate{display:block;white-space:normal;line-height:1.45}
.popup-merk{width:30px;height:30px;border-radius:9px;background:var(--primair);color:#fff;display:grid;
  place-items:center;flex:none}
.popup-merk svg,.popup-merk .ico{width:16px;height:16px}
.popup-knoppen{display:grid;gap:5px;justify-items:end;flex:none}
.popup-x{border:0;background:none;color:var(--steel-2);font-size:17px;line-height:1;cursor:pointer;padding:2px 4px}
.popup-x:hover{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--r);font-size:13px;z-index:80;box-shadow:0 8px 24px rgba(16,24,32,.35)}
.toast b{color:var(--signal)}

/* de telefoonopmaak staat onderaan bij elkaar, zie MOBIEL */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.wiz-balk{display:flex;gap:6px;flex-wrap:wrap;background:var(--paper);border-radius:12px;padding:10px 12px;
  margin-bottom:16px}
.wiz-stap{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--steel-2);padding:5px 10px;
  border-radius:8px}
.wiz-stap.nu{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(22,38,45,.12)}
.wiz-stap.klaar{color:var(--primair)}
.wiz-bol{width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--steel);display:grid;
  place-items:center;font-size:11px;font-weight:700;flex:none}
.wiz-stap.nu .wiz-bol{background:var(--primair);color:#fff}
.wiz-stap.klaar .wiz-bol{background:var(--primair-l);color:var(--primair)}
.wiz-voet{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-2)}
.wiz-voet .plate{margin:0 auto}
.wiz-profielen{display:grid;gap:10px}
.wiz-profiel{display:grid;gap:3px;text-align:left;background:var(--card);border:2px solid var(--line);
  border-radius:12px;padding:14px 16px;cursor:pointer}
.wiz-profiel:hover{border-color:var(--primair)}
.wiz-profiel.aan{border-color:var(--primair);background:var(--primair-l)}
.wiz-profiel b{font-size:15px}
.wiz-uitleg{font-size:12.5px;color:var(--steel);line-height:1.5;margin-top:4px}
.wiz-opties{display:grid;gap:8px;margin-bottom:14px}
.wiz-optie{display:grid;gap:2px;text-align:left;background:var(--card);border:2px solid var(--line);
  border-radius:10px;padding:11px 14px;cursor:pointer}
.wiz-optie:hover{border-color:var(--primair)}
.wiz-optie.aan{border-color:var(--primair);background:var(--primair-l)}
.wiz-optie b{font-size:13.5px}
.wiz-optie .plate{display:block;white-space:normal}
.wiz-modules{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wiz-module{display:flex;align-items:flex-start;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;cursor:pointer}
.wiz-module.aan{border-color:var(--primair);background:var(--primair-l)}
.wiz-module b{font-size:12.5px;display:block}
.wiz-module .plate{display:block;white-space:normal;line-height:1.4}
.wiz-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.wiz-chip{background:var(--primair);color:#fff;border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:600}
.wiz-chip.licht{background:var(--paper);color:var(--steel)}
.wiz-lijst{margin:4px 0 8px;padding-left:18px;font-size:12.5px;color:var(--steel);line-height:1.6}

#wizard-root .overlay-wiz{z-index:160;align-items:flex-start;padding:4vh 16px}
.wizvenster{background:var(--card);border-radius:18px;width:min(720px,100%);max-height:92vh;overflow:auto;
  box-shadow:0 26px 70px rgba(16,24,32,.42);display:flex;flex-direction:column}
.wizkop{display:flex;align-items:flex-start;gap:12px;padding:20px 24px 12px}
.wizkop h2{margin:2px 0 0;font-size:20px}
.wizkop .x{margin-left:auto;background:none;border:0;font-size:22px;color:var(--steel-2);cursor:pointer;
  line-height:1}
.wizkop .x:hover{color:var(--ink)}
.wizvoortgang{height:4px;background:var(--line);margin:0 24px;border-radius:2px;overflow:hidden}
.wizvoortgang div{height:100%;background:var(--primair);transition:width .3s}
.wizblokken{display:flex;gap:14px;flex-wrap:wrap;padding:10px 24px 0;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--steel-2)}
.wizblokken .nu{color:var(--primair);font-weight:700}
.wizbody{padding:18px 24px 6px;flex:1}
.wiznr{font-family:var(--mono);font-size:11.5px;color:var(--steel-2);margin-bottom:6px}
.wizvraag{font-size:22px;line-height:1.3;margin:0 0 8px}
.wizuitleg{font-size:13.5px;color:var(--steel);line-height:1.6;margin:0 0 16px}
.wizopties{display:grid;gap:9px}
.wizoptie{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--card);
  border:2px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;width:100%}
.wizoptie:hover{border-color:var(--primair);background:var(--primair-l)}
.wizoptie.aan{border-color:var(--primair);background:var(--primair-l)}
.wizoptie b{font-size:14.5px;display:block;margin-bottom:2px}
.wizoptie .plate{display:block;white-space:normal;line-height:1.45}
.wizbol{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;
  font-size:12px;color:#fff;flex:none;margin-top:1px}
.wizoptie.aan .wizbol{background:var(--primair);border-color:var(--primair)}
.wizinvoer{width:100%;font-size:16px;padding:12px 14px;border:2px solid var(--line);border-radius:10px;
  font-family:var(--sans);color:var(--ink);background:var(--card)}
.wizinvoer:focus{outline:none;border-color:var(--primair)}
.wizbedrag{display:flex;align-items:center;gap:10px}
.wizbedrag span{font-size:20px;color:var(--steel)}
.wizsnel{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.wizsnel button{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 12px;
  font-size:12px;font-weight:600;color:var(--steel);cursor:pointer;font-family:var(--sans)}
.wizsnel button:hover{border-color:var(--primair);color:var(--primair)}
.wizvoet{display:flex;align-items:center;gap:12px;padding:14px 24px 20px;border-top:1px solid var(--line-2);
  margin-top:14px}
.wizvoet .plate{margin:0 auto;text-align:center}
.wizbd h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);margin:0 0 8px}
.wizbd-blok{margin-bottom:20px}
.wizbd-tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.wizbd-tabel td{padding:5px 8px;border-bottom:1px solid var(--line-2)}
.wizbd-tabel td:first-child{color:var(--steel);width:46%}
.wizketen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wizketen-stap{display:grid;gap:1px;background:var(--paper);border-radius:10px;padding:9px 12px;min-width:120px}
.wizketen-stap b{font-size:12.5px}
.wizketen-bol{width:18px;height:18px;border-radius:50%;background:var(--primair);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:700;margin-bottom:3px}


/* ---- schermdemonstratie ---- */
.demo-cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;
  transition:transform var(--demo-snel,1s) cubic-bezier(.33,.9,.35,1);filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.demo-ballon{position:fixed;z-index:119;max-width:320px;background:var(--ink);color:#fff;border-radius:10px;
  padding:10px 13px;font-size:13px;line-height:1.5;box-shadow:0 12px 32px rgba(16,24,32,.4);pointer-events:none;
  transition:left .5s ease, top .5s ease}
.demo-ballon .plate{color:var(--signal);display:block;margin-bottom:3px}
.demo-doel{outline:2px solid var(--signal)!important;outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 6px rgba(255,183,3,.22)!important;transition:box-shadow .2s}
.demo-klik{transform:scale(.96);transition:transform .12s}.demo-rol{position:fixed;inset:0;z-index:130;background:rgba(16,24,32,.62);display:grid;place-items:center;
  opacity:0;transition:opacity .28s}
.demo-rol.aan{opacity:1}
.dr-kaart{background:var(--card);border-radius:18px;padding:26px 34px;box-shadow:0 26px 60px rgba(16,24,32,.45);
  text-align:center;max-width:min(620px,calc(100vw - 48px));transform:translateY(10px);transition:transform .28s}
.demo-rol.aan .dr-kaart{transform:none}.dk-kaart{max-width:min(720px,calc(100vw - 48px))}
.dk-vraag{font-size:19px;margin:10px 0 4px}
.dk-opties{display:grid;gap:10px;margin-top:14px}
.dk-optie{display:grid;justify-items:center;gap:3px;background:var(--paper);border:2px solid var(--line);
  border-radius:12px;padding:14px 18px;cursor:pointer;text-align:center}
.dk-optie:hover{border-color:var(--primair);background:var(--primair-l)}
.dk-optie b{font-size:15px}
.dk-optie .plate{display:block;white-space:normal;line-height:1.45}
@media(min-width:620px){.dk-opties{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}

.dr-rij{display:flex;align-items:center;justify-content:center;gap:26px;margin:16px 0 4px;flex-wrap:wrap}
.dr-persoon{display:grid;justify-items:center;gap:3px;min-width:150px;padding:14px 16px;border-radius:12px}
.dr-persoon.af{background:var(--paper);opacity:.6}
.dr-persoon.aan{background:var(--primair-l);box-shadow:inset 0 0 0 2px var(--primair)}
.dr-persoon .avatar{width:52px;height:52px;font-size:17px;margin-bottom:5px}
.dr-persoon b{font-size:15px}
.dr-persoon>span{font-size:12.5px;color:var(--steel)}
.dr-persoon.aan>span:nth-of-type(1){color:var(--primair);font-weight:700}
.dr-pijl{font-size:26px;color:var(--steel-2)}
.dr-tekst{font-size:14px;color:var(--ink);margin-top:12px;line-height:1.5}.demo-knoppen{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.demo-teller{font-family:var(--mono);font-size:11.5px;color:var(--steel);padding:0 4px;white-space:nowrap}
.demo-tempo{display:inline-flex;background:var(--paper);border-radius:8px;padding:2px;gap:2px}
.demo-tempo button{border:0;background:none;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;
  color:var(--steel);cursor:pointer}
.demo-tempo button:hover{color:var(--ink)}
.demo-tempo button.on{background:var(--primair);color:#fff}

.demo-nu{display:flex;align-items:center;gap:7px;margin:4px 0 5px}
.demo-nu .avatar{width:22px;height:22px;font-size:9px}
.demo-nu b{font-size:12px;display:block}
.demo-nu .plate{display:block;line-height:1.2}

.demobalk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:118;display:flex;
  align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:30px;
  padding:8px 12px 8px 8px;box-shadow:0 16px 40px rgba(22,38,45,.26);
  /* de balk brak in tweeën en liep dan door de ballon heen; breder en
     netjes afbreken houdt alles op één regel of onder elkaar uitgelijnd */
  max-width:min(880px,calc(100vw - 32px));flex-wrap:wrap;justify-content:center;row-gap:8px}
.demo-knoppen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.demobalk b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demobalk .sim-merk{background:var(--primair);color:#fff}
.demo-voortgang{height:4px;background:var(--line-2);border-radius:2px;margin-top:4px;min-width:120px}
.demo-voortgang>div{height:100%;background:var(--primair);border-radius:2px;transition:width .4s}
@media(max-width:620px){.demobalk{left:12px;right:12px;transform:none;max-width:none}}

/* ================================================================
   KOLOMBREEDTES VOOR ALLE TABELLEN
   ----------------------------------------------------------------
   Elke tabel met een kopregel krijgt vaste kolombreedtes (colgroup),
   een greepje per kolom en een lege vulkolom aan het eind. Daardoor
   herverdeelt de browser niets meer als er minder regels overblijven
   tijdens het typen, en staan kop en cellen altijd precies onder elkaar.
   ================================================================ */
/* kopteksten breken niet af; zo krijgt elke kolom minstens de maat van haar kop */
thead th{white-space:nowrap}
table.kb-tabel{table-layout:fixed;width:100%;min-width:100%}
table.kb-tabel th,table.kb-tabel td{box-sizing:border-box}
table.kb-tabel td{overflow-wrap:anywhere;min-width:0}
table.kb-tabel th.kb-vul,table.kb-tabel td.kb-vul{padding:0;border-left:0;border-right:0}
table.kb-tabel thead th{overflow:visible}
/* Het greepje staat binnen de kop, tegen de rechterrand; zo blijft het
   ook bereikbaar in tabellen met plakkende koppen. */
table.kb-tabel thead th>.kb-greep{position:absolute;top:0;right:0;width:12px;height:100%;
  cursor:col-resize;display:block;z-index:4;touch-action:none}
table.kb-tabel thead th>.kb-greep:before{content:"";position:absolute;top:20%;right:0;
  width:1px;height:60%;background:var(--line);transition:background .12s,width .12s}
table.kb-tabel thead th>.kb-greep:hover:before{background:var(--primair);width:3px}
body.kb-sleept{cursor:col-resize;user-select:none}
body.kb-sleept .kb-greep:before{background:var(--primair);width:3px}
.kb-vak{overflow-x:auto;max-width:100%;min-width:0}
/* de installatietabel heeft een randje per cel; de vulkolom niet */
.instabel td.kb-vul,.instabel th.kb-vul{border-right:0;background:transparent}
.instabel tbody tr:nth-child(even) td.kb-vul,.instabel tbody tr:hover td.kb-vul{background:transparent}
@media print{.kb-greep{display:none}}
/* ---- filteren op waarde, zoals in een spreadsheet ---- */
.kb-trechter{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:16px;height:16px;
  display:none;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;z-index:5;
  color:var(--steel-2);background:var(--paper)}
table.kb-tabel thead th:hover>.kb-trechter,table.kb-tabel thead th.kb-aan>.kb-trechter,
.st-tabel thead th:hover>.kb-trechter,.st-tabel thead th.kb-aan>.kb-trechter{display:flex}
.st-tabel thead th>.kb-trechter{right:10px;top:12px;transform:none}
.kb-trechter:hover{color:var(--primair);background:var(--primair-l)}
table.kb-tabel thead th.kb-aan>.kb-trechter,.st-tabel thead th.kb-aan>.kb-trechter{color:var(--primair)}
table.kb-tabel thead th.kb-aan,.st-tabel thead th.kb-aan{color:var(--primair)}
.kb-paneel{position:fixed;z-index:400;width:266px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 14px 40px rgba(16,32,40,.18);padding:9px;font-size:12.5px}
.kb-paneel .kb-zoek{width:100%;padding:6px 9px;font-size:12.5px;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);margin-bottom:7px}
.kb-paneel .kb-zoek:focus{outline:none;border-color:var(--primair);background:#fff}
.kb-lijst{max-height:230px;overflow:auto;border:1px solid var(--line-2);border-radius:7px;padding:5px}
.kb-lijst label{display:flex;gap:7px;align-items:center;padding:3px 4px;border-radius:5px;cursor:pointer}
.kb-lijst label:hover{background:var(--paper)}
.kb-lijst input{width:14px;height:14px;accent-color:var(--action);flex:none}
.kb-lijst span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-lijst i{font-style:normal;color:var(--steel-2);font-size:11px;font-family:var(--mono)}
.kb-paneel .kb-voet{display:flex;gap:6px;align-items:center;margin-top:8px}
.kb-paneel .kb-voet .plate{margin-right:auto}
.kb-leeg{color:var(--steel-2);padding:10px 4px;text-align:center}
/* Op een aanraakscherm bestaat er geen muisaanwijzer die ergens overheen
   gaat; het trechtertje en het greepje staan er dan gewoon. */
@media(hover:none){
  table.kb-tabel thead th>.kb-trechter,.st-tabel thead th>.kb-trechter{display:flex}
  .kb-greep:before,.st-greep:before{background:var(--line);width:2px}
  .kb-greep,.st-greep{width:16px}
}
@media print{.kb-trechter,.kb-paneel{display:none !important}}



/* ================================================================
   MOBIEL — de hele toepassing op een telefoon
   ----------------------------------------------------------------
   Op een klein scherm past een tabel met vijftien kolommen niet, en
   een menu van tweehonderd pixels breed evenmin. Daarom: het menu
   schuift uit vanaf de zijkant, de balk breekt in twee regels, de
   kaarten staan onder elkaar en elke tabelregel wordt een kaartje met
   de kolomnaam ervoor. Alles blijft bereikbaar; niets wordt verborgen
   omdat het scherm klein is.
   ================================================================ */
.rail-veld{display:none}
.terug-teken{display:none}
/* ---- strokenplanning ----------------------------------------
   Links een vaste kolom met de namen, rechts een tijdlijn die
   horizontaal schuift. De balken liggen in hetzelfde raster als de
   dagvakken, zodat ze altijd op de dag uitkomen. */
.strokenkaart{display:flex;flex-direction:column;flex:1;min-height:0}
.strokenlijf{display:flex;min-height:0;flex:1;border-top:1px solid var(--line)}
/* de wachtrij links: alles wat nog geen datum heeft */
.strokenwacht{flex:none;width:250px;border-right:1px solid var(--line);display:flex;
  flex-direction:column;min-height:0;background:var(--paper)}
.sw-kop{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12px;font-weight:700;
  border-bottom:1px solid var(--line)}
.sw-lijst{overflow-y:auto;flex:1;padding:6px}
.sw-item{display:flex;gap:8px;align-items:flex-start;padding:7px 8px;border-radius:8px;
  background:var(--card);border:1px solid var(--line);margin-bottom:6px;cursor:grab;font-size:12px}
.sw-item:hover{border-color:var(--primair)}
.sw-item.sleept{opacity:.4}
.sw-tekst{min-width:0}
.sw-tekst b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-voet{padding:8px 12px;border-top:1px solid var(--line);font-size:10.5px}
.strokenvak{overflow:auto;flex:1;min-width:0}
.strokenkop,.strokenrij{display:flex;min-width:min-content}
.strokenkop{position:sticky;top:0;z-index:3;background:var(--card);
  border-bottom:1px solid var(--line)}
.strokenrij{border-bottom:1px solid var(--line-2);min-height:34px}
/* om en om een lichte band, zodat het oog de regel makkelijk volgt over
   de hele breedte van de tijdlijn */
.klusrij.band{background:#F4F6FA}
.klusrij.band .stroken-naam{background:#F4F6FA}
/* de dagvakken laten de band van de regel doorschijnen */
.klusrij .stroken-vak{background:transparent}
/* de weekendtint komt van het laagje hierboven; de vakken zelf blijven leeg */
.klusrij:hover{background:rgba(91,143,222,.10)}
.klusrij:hover .stroken-naam{background:#EAF1FC}
.stroken-balk.sleept,.sw-item.sleept{opacity:.35}
/* ---- prestatie: het verloop per week en de verdeling per soort ---- */
.pf-verloop{display:flex;align-items:flex-end;gap:6px;height:120px}
.pf-week{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:5px}
.pf-week .pf-staaf{width:100%;max-width:44px;background:linear-gradient(180deg,#7FA8E8,#5B8FDE);
  border-radius:5px 5px 0 0;min-height:2px;transition:height .25s}
.pf-week:hover .pf-staaf{background:var(--primair)}
.pf-week span{font-size:9.5px;color:var(--steel-2);white-space:nowrap}
.pf-balk{display:flex;width:100%;border-radius:5px;overflow:hidden;background:var(--line-2)}
.pf-balk>div{height:100%}

/* de leverancierslijst bij een installatie */
.lev-rij{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.lev-rij:last-of-type{border-bottom:0}
.lev-rij.voorkeur{background:rgba(91,143,222,.06);border-radius:8px;padding-left:6px}
.lev-ster{border:0;background:none;color:var(--steel-2);cursor:pointer;font-size:15px;line-height:1;
  padding:2px 4px}
.lev-rij.voorkeur .lev-ster{color:var(--signal)}
.lev-ster:hover{color:var(--signal)}
.lev-ster:disabled{cursor:default}
.lev-naam{flex:1;min-width:0}
.lev-naam b{font-size:12.5px}
.lev-rol{flex:none;width:150px}
.lev-rol select{font-size:11.5px;padding:4px 6px}
.lev-info{flex:none;width:130px;text-align:right}
@media(max-width:860px){.lev-rij{flex-wrap:wrap}.lev-rol,.lev-info{width:auto;text-align:left}}
.klapknop{border:0;background:none;color:var(--steel);cursor:pointer;font-size:11px;
  padding:0 2px;line-height:1}
.klapknop:hover{color:var(--primair)}
.groepsrij.dicht{background:var(--card)}
.strokenkop .stroken-tijd{cursor:ew-resize}
/* de greep om een klus hoger of lager te zetten */
.klusnaam{cursor:grab}
.klusrij.verplaats{outline:2px solid var(--primair);outline-offset:-2px}
body.sleepbezig{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.sleepbezig .stroken-klus,body.sleepbezig .sw-item{pointer-events:none}
.strookschim{position:fixed;z-index:400;pointer-events:none;background:var(--ink);color:#fff;
  border-radius:6px;padding:4px 9px;font-size:11.5px;max-width:260px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 22px rgba(15,31,61,.28)}
.strokenrij:hover{background:rgba(91,143,222,.04)}
.stroken-naam{flex:none;width:250px;padding:7px 12px;position:sticky;left:0;z-index:2;
  background:var(--card);border-right:1px solid var(--line);display:flex;align-items:center;gap:8px}
/* De kolom met de omschrijving is vervallen; de tekst staat nu naast de
   balk. Op de kopregel gebruiken we dezelfde plek voor de bezetting. */
.stroken-stand{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:120px;
  justify-content:flex-end}
.stroken-stand .belasting{width:120px}
.stroken-klus.klus{cursor:pointer}
.stroken-klus.klus:hover b{color:var(--primair)}
.stroken-klus b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klusrij .stroken-klus,.klusrij .stroken-naam{overflow:hidden}
.klusnaam{padding-left:22px}
.klusnaam .num{font-size:10.5px;color:var(--steel-2)}
/* De regel van de uitvoerder is de kop van een blok en mag dat laten
   zien: een donkere band met lichte tekst, zodat de groepen het beeld
   ordenen en de klussen eronder rustig blijven. */
/* De regel van de uitvoerder is een rustige grijze band met een stevige
   lijn erboven. Donkerblauw gaf wel contrast, maar trok het beeld naar
   zich toe; het gaat om de balken. De selectors staan een niveau
   specifieker omdat de gewone opmaak van de naamkolom verderop staat. */
.strokenrij.groepsrij{background:#E4E8EF;border-top:2px solid #C3CBD9;
  border-bottom:1px solid #D3D9E4}
.strokenrij.groepsrij .stroken-naam{background:#E4E8EF}
.strokenrij.groepsrij .stroken-naam b{font-size:13px;font-weight:700;color:var(--ink)}
/* ook op de kopregel geldt hetzelfde laagje */
.groepsrij .stroken-naam,.groepsrij .stroken-klus{background:var(--paper)}
.groepsrij .stroken-naam b{font-size:13px}
.klusrij{min-height:30px}
/* de werkbelasting van deze uitvoerder in de zichtbare periode */
.belasting{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--steel)}
.belasting .bl-bar{flex:1;height:7px;border-radius:4px;background:var(--line-2);overflow:hidden}
.belasting .bl-bar>div{height:100%;background:#2BC07A;border-radius:4px}
.belasting.vol .bl-bar>div{background:#FF5A4E}
.belasting.vol span{color:var(--red);font-weight:600}
.strokenrij:hover .stroken-naam{background:var(--card)}
.stroken-tijd{display:grid;grid-auto-rows:26px;position:relative;align-content:start;
  min-width:0;flex:1}
.strokenkop,.strokenrij{align-items:stretch}
.strokenvak .stroken-vak{grid-row:1 / -1}
.stroken-vak.doelwit{background:var(--primair-l);box-shadow:inset 0 0 0 1px var(--primair)}
/* dagen waarop iemand er niet is: vakantie, verlof, ziekte of cursus */
/* Afwezig: gestreept in de kleur van de reden. De arcering ligt als een
   laagje bóven het vak, want de belastingsstaafjes worden in hetzelfde
   vak getekend en dekten de streepjes anders af — vandaar dat de dagen
   met werk niet gearceerd leken. */
.stroken-vak.afwezig{box-shadow:inset 0 -2px 0 var(--afwkleur, var(--steel))}
/* de uren die een dienst beslaat, licht in de kleur van die dienst */
.stroken-vak.indienst{background:color-mix(in srgb, var(--dienstkleur, var(--primair)) 14%, transparent)}
.stroken-vak.afwezig::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--afwkleur, var(--steel)) 26%, transparent) 0 5px,
    color-mix(in srgb, var(--afwkleur, var(--steel)) 8%, transparent) 5px 10px)}
/* de dienst van die dag als klein merkje in het vak */
.dienst-merk{position:absolute;right:3px;top:2px;z-index:5;color:#fff;font-size:9px;font-weight:800;
  border-radius:4px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 3px;
  pointer-events:none}
.afw-label{position:absolute;left:3px;top:2px;z-index:5;color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:1px 6px;
  white-space:nowrap;pointer-events:none}
.groepsrij .stroken-vak{position:relative}
/* het aanstrepen van een periode */
/* het aangestreepte vak moet boven de belastingsstaafjes uitkomen,
   anders zie je de keuze niet op dagen waar al werk staat */
.stroken-vak.gekozen{background:rgba(91,143,222,.38);
  box-shadow:inset 0 0 0 1px var(--primair);z-index:4}
.stroken-vak{position:relative}
.groepsrij .stroken-vak{cursor:cell}
/* de belasting per dag in de kopregel van een uitvoerder */
/* De belastingsstaafjes liggen over de dagvakken heen. Zonder deze regel
   vangen zij de muis op en kon er niet worden aangestreept op dagen waar
   al werk stond — precies de dagen die u wilt aanwijzen. */
.dagbelasting{position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:24px;margin:1px 2px;border-radius:4px;background:var(--line-2);overflow:hidden;
  pointer-events:none}
.dagbelasting .db-vul{position:absolute;left:0;right:0;bottom:0;background:var(--green);opacity:.55}
.dagbelasting.vol .db-vul{background:var(--red);opacity:.65}
.dagbelasting.geenwerk .db-vul{background:var(--steel-2)}
.dagbelasting span{position:relative;font-size:9.5px;font-weight:700;color:var(--ink-2);
  line-height:24px}
.stroken-maand{grid-row:1;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--steel);padding:5px 6px;white-space:nowrap;
  border-left:1px solid var(--line-2)}
.stroken-dag{grid-row:2;padding:3px 0 5px;text-align:center;font-size:10px;color:var(--steel-2);
  border-left:1px solid var(--line-2);line-height:1.25}
.stroken-dag b{display:block;font-size:11px;color:var(--ink-2);font-weight:600}
.stroken-dag{position:relative}
.stroken-dag.weekend{background:rgba(15,31,61,.10);color:var(--steel)}
.stroken-dag.weekend b{color:var(--steel)}
.stroken-dag.vandaag{background:rgba(91,143,222,.16);color:var(--primair);
  box-shadow:inset 2px 0 0 var(--primair)}
.stroken-dag.vandaag b{color:var(--primair)}
.stroken-vak{grid-row:1;border-left:1px solid rgba(15,31,61,.05);min-height:8px}
/* Alleen de regels kleuren om en om; het weekend krijgt geen eigen vlak
   meer maar een fijne lijn, en de dagafkorting in de kop zegt de rest. */
.stroken-vak.weekend{box-shadow:inset 1px 0 0 rgba(15,31,61,.10),
  inset -1px 0 0 rgba(15,31,61,.10)}
/* vandaag: een blauwe kolom met een streep aan de linkerkant */
.stroken-vak.vandaag{box-shadow:inset 2px 0 0 var(--primair)}
.stroken-balk{border:0;background:var(--balk, var(--primair));color:#fff;
  border-radius:5px;margin:3px 1px;padding:2px 8px;cursor:grab;
  display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;
  font-size:11.5px;font-weight:600;text-align:left;min-width:0;width:100%}
.stroken-balk:active{cursor:grabbing}
.stroken-balk{box-shadow:0 1px 3px rgba(15,31,61,.22)}
.stroken-balk:hover{filter:brightness(1.12);box-shadow:0 3px 10px rgba(15,31,61,.28)}
.stroken-balk .sb-nummer{font-family:var(--mono);font-size:10.5px;opacity:.95;flex:none}
.stroken-balk .sb-titel{overflow:hidden;text-overflow:ellipsis}
/* de omschrijving naast een smalle balk */
.sb-label{align-self:center;padding:0 9px;font-size:12px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
@media(max-width:860px){.stroken-naam{width:150px}.stroken-stand{min-width:0}}

/* de balk tijdens het aanwijzen van de plek in de stamboom */
/* De terugknop stond los in het werkgebied en rekte daardoor over de
   volle breedte uit; een knop hoort zijn eigen maat te houden. */
.wrap>[data-actie$="erug"],.wrap>[data-actie^="terug"],.wrap>[data-actie$="Terug"]{
  display:inline-flex;width:auto;align-self:flex-start}
.kiesbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  background:var(--primair-l);border:1px solid var(--primair);border-radius:10px;padding:10px 14px}
.kiesbalk b{font-size:13.5px}
.kiesbalk>span{flex:1;min-width:220px;font-size:12.5px;color:var(--steel)}
body.kiesplek .knoop{cursor:copy}
body.kiesplek .knoop:hover{background:var(--primair-l);outline:1px solid var(--primair)}
.kb-kolombalk{display:flex;justify-content:flex-end;padding:0 0 8px}
.card>header>.kb-kolomknop{margin-left:auto}
.card>header>.kb-kolomknop~.kb-kolomknop{display:none}
.mob-filter{display:none;align-items:center;gap:7px;margin:0 0 9px;width:100%;justify-content:center}
.menuknop{display:none;background:none;border:0;padding:6px;margin-left:-4px;border-radius:8px;
  color:var(--ink);cursor:pointer;line-height:0}
.menuknop:hover{background:var(--paper)}
.railscherm{display:none}

@media(max-width:860px){
  main{margin-left:0}
  .menuknop{display:block}
  /* het menu schuift over het scherm en gaat weer dicht na een keuze */
  .rail{position:fixed;top:0;left:0;bottom:0;width:min(286px,86vw);height:100vh;z-index:70;
    transform:translateX(-100%);transition:transform .22s ease;flex-direction:column;
    box-shadow:0 0 40px rgba(15,31,61,.35)}
  body.menu-uit .rail{transform:none}
  .railscherm{position:fixed;inset:0;background:rgba(15,31,61,.45);z-index:65;display:none}
  body.menu-uit .railscherm{display:block}
  .nav{display:block;padding:6px 10px}
  .nav button{width:100%;padding:11px 12px;font-size:14.5px}
  .nav .sep{display:block}
  .nav .count{display:inline-block}
  .rail-foot{display:flex}

  /* de balk: bovenin het hoognodige, de zoekregel eronder */
  .topbar{padding:9px 12px;gap:9px;flex-wrap:wrap}
  .topbar .paginanaam{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .paginanaam .sitenaam{display:none}
  .menuknop{order:1;flex:none}
  .topbar .paginanaam{order:2;flex:0 1 auto;min-width:0}
  .topbar .who{order:3;gap:4px;margin-left:auto;flex:0 0 auto}
  .topbar .who>*{flex:0 0 auto}
  .topbar .who .bel{width:34px;height:34px;display:grid;place-items:center}
  .zoekbalk{order:4;flex:1 0 100%;max-width:none;margin:0}
  .zoekbalk input[type=text]{font-size:16px;padding:10px 14px 10px 36px}
  .userpick,#poort,#veldknop{display:none}
  .weer{padding:4px 9px;gap:5px}
  .weer .weer-wind{display:inline}
  .weer b{font-size:13px}
  .topbar .bel{padding:3px}
  .rail-foot{flex-wrap:wrap;gap:8px}
  .terugknop .terug-tekst{display:none}
  .terugknop .terug-teken{display:inline;font-size:15px}
  .rail-veld{display:flex;width:100%}
  .rail-veld .btn{width:100%;justify-content:center}

  .wrap{padding:14px 12px}
  h1{font-size:19px}
  p.sub,.sub{font-size:12.5px;margin-bottom:12px}
  .card>header{padding:12px 13px;flex-wrap:wrap}
  .card .body{padding:13px}
  .grid{gap:11px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{grid-template-columns:1fr}

  /* alles wat langer is dan het scherm mag opzij schuiven in plaats van
     de bladzijde breed te maken */
  .segment,.dos-tabs,.wiz-balk,.st-balk{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .segment::-webkit-scrollbar,.dos-tabs::-webkit-scrollbar{height:0}
  .segment button,.dos-tabs button{white-space:nowrap;flex:none}
  .actions{flex-wrap:wrap}
  .btn{min-height:38px}
  input,select,textarea{font-size:16px}
  .insgrid{grid-template-columns:1fr}
  .insmenu{position:static;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:6px}
  .insmenu button{white-space:nowrap;flex:none}

  /* vensters komen van onderen op, zoals een telefoon dat doet */
  .overlay{padding:0;place-items:end center}
  .modal{width:100%;max-width:none;max-height:92vh;border-radius:16px 16px 0 0}
  .modal .body{padding:14px}
  .modal footer{padding:11px 14px;gap:8px}
  .modal footer .btn{flex:1;justify-content:center}

  /* het filtervenster van een kolom wordt een blad onderaan */
  .kb-paneel.onder{left:0 !important;right:0;top:auto !important;bottom:0;width:auto;
    border-radius:16px 16px 0 0;padding:12px 12px 16px;max-height:76vh;overflow:auto}
  .kb-paneel.onder .kb-lijst{max-height:46vh}
  .kb-paneel.onder .kb-zoek{font-size:16px;padding:9px 11px}
  .kb-paneel.onder label{padding:7px 4px}

  .ai-knop{right:12px;bottom:12px}
  /* een open venster heeft het hele scherm nodig */
  body.venster-open .ai-knop,body.venster-open .demobalk{display:none !important}
  /* de maandplanning blijft leesbaar en schuift zijwaarts mee */
  .maandbord{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mp-dagkoppen,.mp-week{min-width:620px}
  .kanban,.gantt,.matrixvak{overflow-x:auto}
  /* knoppen in een kaartkop onder elkaar in plaats van half afgekapt */
  .card>header{gap:7px}
  .card>header>.btn,.card>header>.segment{flex:1 1 auto}
  .card>header h2{flex:1 0 100%}
  .toast{left:12px;right:12px;transform:none;bottom:calc(14px + env(safe-area-inset-bottom))}
  /* met het menu open schuift de bladzijde eronder niet mee */
  body.menu-uit{overflow:hidden}
  .modal footer,.kb-paneel.onder{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .rail{padding-bottom:env(safe-area-inset-bottom)}
  /* een lijst met veel knoppen eronder blijft bereikbaar */
  .wrap{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* ---- tabellen als kaartjes ---- */
@media(max-width:520px){
  .weer .weer-wind{display:none}
  .topbar .paginanaam{font-size:14px}
}
@media(max-width:760px){
  /* De kopregel verdwijnt; elke regel wordt een kaartje waarin de
     kolomnaam vóór de waarde staat. Zo blijft elke kolom leesbaar
     zonder dat er opzij geschoven hoeft te worden. */
  table.mob-tabel{display:block;width:100% !important;min-width:0 !important;table-layout:auto !important;
    border-collapse:collapse;background:none}
  table.mob-tabel colgroup,table.mob-tabel thead{display:none}
  table.mob-tabel tbody{display:block}
  table.mob-tabel tbody tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:9px 11px;margin-bottom:9px;box-shadow:var(--shadow)}
  table.mob-tabel tbody tr:hover td,table.mob-tabel tbody tr:nth-child(even) td{background:none}
  table.mob-tabel tbody td{display:flex;align-items:baseline;gap:10px;width:auto !important;
    height:auto !important;min-height:0;padding:3px 0;border:0;white-space:normal;overflow:visible;
    text-overflow:clip;background:none}
  table.mob-tabel tbody td{overflow-wrap:anywhere;word-break:break-word}
  table.mob-tabel tbody td>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
  table.mob-tabel tbody td>.mob-waarde{flex:1 1 auto;display:block;text-align:left}
  /* een lange assetcode breekt liever af dan dat het kaartje uitsteekt */
  table.mob-tabel tbody td,table.mob-tabel tbody td *{white-space:normal !important}
  table.mob-tabel tbody td:before{content:attr(data-kop);flex:0 0 38%;max-width:38%;
    font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);
    line-height:1.5;overflow-wrap:anywhere}
  table.mob-tabel tbody td:first-child{border-bottom:1px solid var(--line-2);padding-bottom:6px;
    margin-bottom:4px}
  table.mob-tabel tbody td:first-child,table.mob-tabel tbody td:first-child *{font-weight:600 !important}
  table.mob-tabel tbody td.kb-vul,table.mob-tabel tbody td.st-vul,
  table.mob-tabel tbody td.mob-leeg{display:none}
  table.mob-tabel tbody tr.kb-melding td,table.mob-tabel tbody tr td[colspan]{display:block}
  table.mob-tabel tbody tr.kb-melding td:before,table.mob-tabel tbody td[colspan]:before{content:none}
  .instabelvak,.st-vak,.kb-vak,.tabelvak{overflow:visible;max-height:none;border:0}
  .instabel{border-collapse:collapse}
  /* de knop waarmee de filters van een tabel op te roepen zijn */
  .mob-filter{display:flex}
}


/* ================================================================
   DONKER THEMA
   ----------------------------------------------------------------
   Alle kleuren komen uit de variabelen hierboven; hieronder krijgen
   die andere waarden. Papier en kaart wisselen van plaats, de lijnen
   worden lichter in plaats van donkerder, en de accentkleuren worden
   iets zachter omdat fel blauw op donker hard aankomt. De zijbalk was
   al donker en blijft dat, met een klein verschil zodat het paneel er
   niet in wegvalt.

   De losse plekken waar #fff hardhandig in de opmaak staat, worden
   onderaan teruggezet; dat is minder werk dan honderd regels
   herschrijven en het resultaat is hetzelfde.
   ================================================================ */
body.donker{
  --primair:#7BA7EA;
  --primair-d:#5B8FDE;
  --primair-l:#1B2C4C;
  --ink:#E8EEF9;
  --ink-2:#C3D0E6;
  --grafiet:#E8EEF9;
  --rail:#0B1424;
  --rail-2:#070F1C;
  --steel:#9DACC7;
  --steel-2:#7385A5;
  --paper:#0F1829;
  --card:#16223A;
  --line:#2A3A58;
  --line-2:#212F4A;
  --signal:#E8A33D;
  --signal-l:#37290F;
  --action:#5B8FDE;
  --action-h:#7BA7EA;
  --green:#4FBE8B;
  --green-l:#12301F;
  --red:#F07470;
  --red-l:#3A1A1A;
  --amber:#D9922B;
  --violet:#8A87D6;
  --blue:#7BA7EA;
  --navy:#C3D0E6;
  --ijs:#33507F;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.32);
  color-scheme:dark;
}
/* wit dat in de opmaak vastligt, terug naar de kaartkleur */
body.donker .card,body.donker .modal,body.donker table tbody tr,
body.donker .veldgroep,body.donker .minikpi,body.donker .obj-kaart,
body.donker .kb-paneel,body.donker .paneltrans button,body.donker .weer,
body.donker .segment,body.donker .empty,body.donker .meldkies{background:var(--card)}
body.donker input,body.donker select,body.donker textarea{
  background:var(--paper);color:var(--ink);border-color:var(--line)}
body.donker input:focus,body.donker select:focus,body.donker textarea:focus{
  background:var(--card);border-color:var(--primair)}
body.donker .btn{background:var(--card);border-color:var(--line);color:var(--ink)}
body.donker .btn.go,body.donker .btn.primary{background:var(--action);border-color:var(--action);color:#0B1424}
body.donker .btn.ghost{background:transparent}
body.donker .btn:hover{border-color:var(--primair)}
body.donker .segment button.on{background:var(--primair);color:#0B1424}
body.donker .tag,body.donker .num{color:var(--steel-2)}
body.donker thead th{background:var(--paper)}
body.donker .instabel thead th{background:var(--paper)}
body.donker table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
body.donker table tbody tr:hover td{background:rgba(123,167,234,.08)}
body.donker .hint{background:var(--paper)}
body.donker .plate{color:var(--steel)}
body.donker .inlog{background:var(--rail-2)}
body.donker .topbar{background:var(--card);border-color:var(--line)}
body.donker .zoekbalk input{background:var(--paper)}
body.donker .pb-bar{background:var(--line-2)}
body.donker img.foto,body.donker .obj-fotos img{border-color:var(--line)}
body.donker .kb-trechter{background:var(--paper)}
body.donker .chip{background:var(--card)}
body.donker .doc-balk .btn.aan{color:var(--card)}
/* de zijbalk was al donker; iets dieper zodat het scherm ernaast opvalt */
body.donker .rail{background:var(--rail)}

/* ================================================================
   ACHTERGRONDEN
   ----------------------------------------------------------------
   Het lichte verloop ligt achter het werkgebied, het donkerblauwe
   achter de zijbalk. Beide zitten als afbeelding in het bestand zelf,
   zodat het programma ook zonder internet zijn eigen gezicht houdt.
   In het donkere thema neemt het blauwe verloop ook het werkgebied
   over; het lichte zou daar uit de toon vallen.
   ================================================================ */
:root{
  --bg-donker:url("../assets/ui/bg-donker.jpg");
}
/* Het verloop achter het werkgebied: van bijna wit linksboven naar
   lichtblauw rechtsonder. Het is met de opmaak zelf getekend en niet als
   afbeelding, zodat het op elk scherm haarscherp blijft en niets weegt.
   De kleuren zijn overgenomen uit het aangeleverde beeld. */
main{
  background:
    radial-gradient(120% 100% at 8% 0%, #F7FAFF 0%, rgba(247,250,255,0) 55%),
    linear-gradient(128deg, #F2F7FE 0%, #E6EFFE 28%, #D5E5FD 55%, #C0D8FD 78%, #ADCDFD 100%);
  background-attachment:fixed}
/* Alleen het beeld; de plaatsbepaling staat bovenaan bij de opbouw van
   het scherm. Hier stond eerder position:relative, waardoor de balk zijn
   vaste plek verloor en toch meeschoof. */
.rail{background-image:var(--bg-donker);background-size:cover;background-position:center;
  background-repeat:no-repeat}
/* De overgang van donkerblauw naar lichtblauw krijgt een dunne strip in
   de accentkleur: bovenaan vol, naar onderen uitdovend, zodat de balk
   niet zomaar tegen het werkgebied aan staat. */
.rail:after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;
  background:linear-gradient(180deg, var(--primair) 0%, rgba(91,143,222,.55) 45%,
    rgba(91,143,222,.18) 100%);pointer-events:none}
/* in het donkere thema werken lichte vlakken averechts */
body.donker .klusrij.band{background:rgba(255,255,255,.03)}
body.donker .klusrij.band .stroken-naam{background:#18243C}
body.donker .stroken-vak.weekend{box-shadow:inset 1px 0 0 rgba(0,0,0,.3),
  inset -1px 0 0 rgba(0,0,0,.3)}
body.donker .stroken-vak.weekend::before{background:rgba(0,0,0,.28)}
body.donker .stroken-dag.weekend{background:rgba(0,0,0,.22)}
body.donker .strokenrij.groepsrij{background:#1B2942}
body.donker .strokenrij.groepsrij .stroken-naam{background:#1B2942}
body.donker .rail:after{background:linear-gradient(180deg, var(--primair) 0%,
  rgba(123,167,234,.45) 45%, rgba(123,167,234,.12) 100%)}
@media(max-width:860px){.rail:after{width:3px}}
/* de bovenbalk laat het verloop erdoorheen schemeren */
.topbar{background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px)}
body.donker main{
  background:
    radial-gradient(120% 100% at 8% 0%, #17253E 0%, rgba(23,37,62,0) 55%),
    linear-gradient(128deg, #131F33 0%, #101B2E 45%, #0C1728 100%);
  background-attachment:fixed}
body.donker .topbar{background:rgba(22,34,58,.86)}
body.donker .rail{background-image:var(--bg-donker)}
.inlog{background-image:var(--bg-donker);background-size:cover;background-position:center}
/* De film vult het scherm achter het inlogvak. Hij ligt achter alles,
   vangt geen klikken en wordt onbewerkt getoond. */
.inlog-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.inlog-video.aan{opacity:1}
/* Het merk staat direct boven het inlogvak en komt tegelijk met het vak
   in beeld; de vertraging zit op het hele inlogvak, dus daar hoeft hier
   niets extra's voor te gebeuren. */
.inlog-logo{display:block;width:min(320px,60vw);height:auto;margin:0 auto 22px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
@media(max-width:520px){.inlog-logo{width:min(240px,66vw);margin-bottom:18px}}
/* Geen laag over de film: hij is te zien zoals hij is. */
.inlog>*:not(.inlog-video){position:relative;z-index:2}
/* De eerste twee seconden is alleen de film te zien: geen logo, geen
   claim, geen inlogvak. Daarna komt alles samen in beeld. */
.inlog>*:not(.inlog-video):not(noscript){opacity:0;
  transform:translateY(10px);transition:opacity .8s ease,transform .8s ease}
.inlog.tonen>*:not(.inlog-video){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .inlog-video{display:none}
  .inlog>*:not(.inlog-video){opacity:1;transform:none;transition:none}
}
@media print{main,.rail{background-image:none}}

/* ================================================================
   NOTITIEBLOK
   ----------------------------------------------------------------
   Het notitieblok hangt als aparte laag over het programma heen. Het
   staat buiten het schermgebied en wordt dus niet opnieuw getekend
   wanneer er een ander scherm wordt geopend: de notities blijven
   staan waar ze stonden.

   De laag zelf vangt geen muisklikken op; alleen het blok zelf doet
   dat. Zo blijft de rest van het programma gewoon bedienbaar.
   ================================================================ */
#notitie-root{position:fixed;inset:0;z-index:170;pointer-events:none}
#notitie-root .nb{position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  width:352px;height:486px;min-width:296px;min-height:200px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 54px rgba(15,31,61,.22), 0 2px 6px rgba(15,31,61,.10);
  overflow:hidden;font-size:13px;color:var(--ink)}
#notitie-root .nb.opgevouwen{height:auto!important;min-height:0}
#notitie-root .nb.opgevouwen .nb-balk,
#notitie-root .nb.opgevouwen .nb-lijst,
#notitie-root .nb.opgevouwen .nb-greep{display:none}

.nb-kop{display:flex;align-items:center;gap:9px;padding:9px 8px 9px 13px;
  background:linear-gradient(180deg,var(--rail),var(--rail-2));color:#fff;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.nb-kop.sleept{cursor:grabbing}
.nb-kop b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.nb-kop .nb-aantal{font-family:var(--mono);font-size:11px;color:var(--ijs)}
.nb-kop .nb-rechts{margin-left:auto;display:flex;gap:1px}
.nb-ico{border:0;background:none;color:#fff;opacity:.78;cursor:pointer;
  padding:5px;border-radius:6px;line-height:0}
.nb-ico:hover{opacity:1;background:rgba(255,255,255,.15)}

.nb-balk{display:flex;align-items:center;gap:6px;padding:8px 10px;
  border-bottom:1px solid var(--line-2);background:var(--paper)}
.nb-zoek{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;
  padding:6px 9px;font:inherit;font-size:12.5px;background:#fff;color:var(--ink)}
.nb-zoek:focus{outline:none;border-color:var(--primair)}
.nb-tab{border:1px solid var(--line);background:#fff;color:var(--steel);border-radius:7px;
  padding:5px 9px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}
.nb-tab:hover{border-color:var(--steel-2)}
.nb-tab.aan{background:var(--primair-l);border-color:var(--primair);color:var(--primair-d);font-weight:600}

.nb-lijst{flex:1;overflow:auto;padding:10px;display:grid;gap:9px;align-content:start;
  background:var(--paper)}
.nb-leeg{color:var(--steel);text-align:center;padding:30px 16px;line-height:1.65;font-size:12.5px}

.nb-blad{border-radius:10px;padding:9px 10px 8px;border:1px solid;
  box-shadow:0 1px 2px rgba(15,31,61,.07)}
.nb-blad.gedaan{opacity:.55}
.nb-tekst{white-space:pre-wrap;word-break:break-word;line-height:1.5;min-height:19px;cursor:text}
.nb-blad.gedaan .nb-tekst{text-decoration:line-through}
.nb-invoer{display:block;width:100%;border:0;background:rgba(255,255,255,.6);border-radius:7px;
  padding:7px 8px;resize:none;font:inherit;line-height:1.5;color:var(--ink);min-height:64px;
  overflow:hidden}
.nb-invoer:focus{outline:2px solid rgba(91,143,222,.5);outline-offset:0}

.nb-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.nb-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  background:rgba(255,255,255,.74);border:1px solid rgba(15,31,61,.13);
  border-radius:20px;padding:2px 8px;font-size:11px}
.nb-chip .soort{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)}
.nb-chip .code{font-family:var(--mono);font-size:10.5px;font-weight:600}
.nb-chip .naam{color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:118px}
.nb-chip.link{cursor:pointer}
.nb-chip.link:hover{border-color:var(--primair);background:#fff}
.nb-chip.zoek{opacity:.6}
.nb-chip button{border:0;background:none;cursor:pointer;padding:0 0 0 2px;color:var(--steel);
  line-height:0;margin-right:-3px}
.nb-chip button:hover{color:var(--red)}

.nb-voet{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:6px;
  border-top:1px dashed rgba(15,31,61,.15)}
.nb-voet .plate{font-size:9.5px;letter-spacing:.05em}
.nb-acties{margin-left:auto;display:flex;gap:1px}
.nb-mini{border:0;background:none;cursor:pointer;padding:4px;border-radius:5px;
  color:var(--steel);line-height:0}
.nb-mini:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.nb-mini.rood:hover{color:var(--red)}
.nb-mini.aan{color:var(--green)}

.nb-gereed{border:1px solid rgba(15,31,61,.15);background:rgba(255,255,255,.8);color:var(--ink);
  border-radius:6px;padding:3px 9px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.nb-gereed:hover{background:#fff}

.nb-kleuren{display:flex;gap:6px;align-items:center}
.nb-kleur{width:16px;height:16px;border-radius:50%;border:1px solid rgba(15,31,61,.22);
  cursor:pointer;padding:0}
.nb-kleur.aan{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3.5px var(--ink-2)}

.nb-kiezer{margin-top:8px;background:rgba(255,255,255,.82);border:1px solid rgba(15,31,61,.14);
  border-radius:8px;padding:8px}
.nb-kiezer select,.nb-kiezer .nb-zoek2{width:100%;border:1px solid var(--line);border-radius:6px;
  padding:5px 7px;font:inherit;font-size:12px;background:#fff;color:var(--ink)}
.nb-kiezer select{margin-bottom:6px}
.nb-kiezer select:focus,.nb-kiezer .nb-zoek2:focus{outline:none;border-color:var(--primair)}
.nb-treffers{margin-top:6px;display:grid;gap:1px;max-height:152px;overflow:auto}
.nb-tref{display:block;width:100%;text-align:left;border:0;background:none;padding:5px 6px;
  border-radius:6px;cursor:pointer;font:inherit;font-size:12px;color:var(--ink)}
.nb-tref:hover{background:var(--primair-l)}
.nb-tref .code{font-family:var(--mono);font-size:11px;font-weight:600}
.nb-tref span{color:var(--steel);display:block;font-size:11px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nb-geenTref{color:var(--steel);font-size:11.5px;padding:7px 6px}

.nb-greep{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none}
.nb-greep::after{content:'';position:absolute;right:4px;bottom:4px;width:7px;height:7px;
  border-right:2px solid var(--steel-2);border-bottom:2px solid var(--steel-2);opacity:.85}

/* Op een telefoon heeft slepen geen zin: daar hoort het blok onderaan
   het scherm, over de volle breedte. */
@media (max-width:720px){
  #notitie-root .nb{left:0!important;right:0;top:auto!important;bottom:0!important;
    width:auto!important;height:min(72vh,540px)!important;border-radius:14px 14px 0 0}
  #notitie-root .nb.opgevouwen{height:auto!important}
  .nb-kop{cursor:default}
  .nb-greep{display:none}
}
@media print{#notitie-root{display:none!important}}


/* ---- cloud mode (js/cloud/session.js): login with e-mail and password, site choice, sign out ---- */
.asmb-cloud #sso-start,.asmb-cloud .inlog-scheiding,.asmb-cloud #inlog-portaal,.asmb-cloud #userpick{display:none!important}
.cloud-form{display:block}
.cloud-kop{margin:0 0 14px;font-size:17px;color:var(--ink,#0F1F3D)}
.cloud-melding{font-size:12.5px;line-height:1.45;color:var(--muted,#5B6B82);margin:2px 0 10px;min-height:1px}
.cloud-melding.fout{color:var(--red,#B42318)}
.cloud-melding.goed{color:var(--green,#067647)}
.cloud-link{background:none;border:0;padding:6px 0;color:var(--primair,#1F5FBF);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}
.cloud-sites{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.cloud-site{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:11px 12px;border:1px solid var(--line,#D6DEE8);
  border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:var(--ink,#0F1F3D)}
.cloud-site:hover,.cloud-site:focus-visible{border-color:var(--primair,#1F5FBF)}
.cloud-acties{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;width:100%}

/* ---- field mode without a connection (js/cloud/offline.js): status line, notice on a work order, outbox ---- */
.veld-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:9px 14px;border:1px solid var(--line,#D6DEE8);
  border-radius:10px;background:#F4F7FB;font-size:13px;line-height:1.4;color:var(--ink,#0F1F3D)}
.veld-status.zonder{background:#FFF7E6;border-color:#F5C26B}
.veld-status.fout{border-color:var(--red,#B42318)}
.veld-status-tekst{flex:1 1 auto;min-width:0}
body.veldmodus .veld-status{margin:10px 12px}
.veld-wacht{margin:0 0 12px;padding:9px 14px;border-radius:10px;background:#FFF7E6;border:1px solid #F5C26B;font-size:13px;line-height:1.4}
.veld-wacht.fout{background:#FEF3F2;border-color:#FDA29B;color:var(--red,#B42318)}
.veld-wachtrij{width:100%;border-collapse:collapse;font-size:13px}
.veld-wachtrij th,.veld-wachtrij td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line,#D6DEE8);vertical-align:top}
.veld-reden{color:var(--red,#B42318);margin-top:2px}