/* ==========================================================================
   TOC Planner — stijl
   Palet:  achtergrond  #E9EDF2  (koel planbord-grijs)
           oppervlak    #FFFFFF
           inkt         #17202B
           teal         #1F9599  (interactie / Business2Grow)
           drum-oranje  #F26419  (alleen voor de constraint)
           te laat      #C1121F  ·  te vroeg  #2D8A46  ·  neutraal  #98A2B0
   Typografie: Archivo (koppen) · Inter (tekst) · JetBrains Mono (tijden)
   ========================================================================== */

:root{
  /* Business2Grow-merkpalet, afgeleid uit het logo:
     teal #1F9599 · emerald #2CB196 · lichtcyaan #57C2D6 · petrol #20676D · inkt #040507 */
  --bg:#EBF1F1; --surface:#FFFFFF; --ink:#0A1618; --ink-zacht:#596E70;
  --lijn:#CFDEDD; --staal:#1A8388; --staal-donker:#156A6F;
  --drum:#57C2D6; --laat:#C0392B; --vroeg:#2CB196; --neutraal:#8FA3A3;
  --radius:10px;
  --schaduw:0 1px 2px rgba(10,22,24,.06), 0 8px 24px rgba(10,22,24,.08);
  /* merk-accenten voor hergebruik */
  --b2g-teal:#1F9599; --b2g-emerald:#2CB196; --b2g-cyaan:#57C2D6;
  --b2g-petrol:#20676D; --b2g-inkt:#040507;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 "Inter",system-ui,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2{font-family:"Archivo",sans-serif; letter-spacing:-.01em}

/* ---------- topbalk & tabs ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:9px 28px; background:var(--ink); color:#fff; flex-wrap:wrap;
  position:sticky; top:0; z-index:60; min-height:64px;
}
.brand{display:flex; align-items:center; gap:13px}
.brand-tekst{
  display:flex; flex-direction:column; justify-content:space-between;
  align-self:stretch; align-items:center; line-height:1; padding:1px 0;
  /* boven- en onderregel op gelijke hoogte met de witte chip; ruimte ertussen */
}
.brand-titelrij{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; align-self:stretch}
.brand h1{font-size:20px; font-weight:800; margin:0}
.brand-logo{
  height:46px; width:auto; display:block; align-self:center;
  background:#fff; border-radius:8px; padding:5px 7px; box-sizing:content-box;
  /* wit chipje, symbool vult vrijwel de hoogte van de balk; alle drie de
     gebouwen (teal, zwart, groen) blijven zichtbaar op de donkere balk */
}
.brand-sub{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:#8FB9BC; letter-spacing:.12em; text-transform:uppercase}
.brand-copy{
  font-family:"Archivo",sans-serif; font-size:19px; font-weight:800; color:#2CB196;
  letter-spacing:.16em; align-self:center; text-align:center;
}
.brand-sub{font-family:"JetBrains Mono",monospace; font-size:11px; color:#9FB0C2; letter-spacing:.12em; text-transform:uppercase}

.tabs{display:flex; gap:6px}
.tab{
  font:600 13px "Archivo",sans-serif; letter-spacing:.02em;
  color:#C7D2DD; background:transparent; border:1px solid transparent;
  padding:8px 16px; border-radius:8px; cursor:pointer; transition:background .15s,color .15s;
}
.tab:hover{background:rgba(255,255,255,.08); color:#fff}
.tab.is-active{background:var(--staal-donker); color:#fff}
.tab:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* ---------- schermen & panelen ---------- */
main{flex:1; width:min(1180px,100%); margin:0 auto; padding:26px 20px 0}
.scherm{display:none; gap:22px; flex-direction:column}
.scherm.is-active{display:flex}

/* ---- Instellingen: zijmenu met VIERKANTE tegels + sub-pagina ernaast ---- */
.instel-layout{display:flex; gap:20px; align-items:flex-start}
.instel-zijmenu{
  flex:0 0 150px; display:flex; flex-direction:column; gap:10px;
  position:sticky; top:80px;
}
.instel-tegel{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  aspect-ratio:1 / 1; width:100%; text-align:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--lijn); border-radius:14px;
  padding:6px; font:600 13px "Archivo",sans-serif; color:var(--ink);
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.instel-tegel:hover{border-color:var(--staal); background:#F4F8FB}
.instel-tegel.is-active{
  border-color:var(--staal); background:#EAF1F7;
  box-shadow:0 0 0 2px var(--staal) inset;
}
.instel-tegel-icoon{font-size:90px; line-height:1; flex:0 0 auto}
.instel-tegel-naam{flex:0 0 auto; line-height:1.15; font-size:12.5px}
.instel-inhoud{flex:1; min-width:0; display:flex; flex-direction:column; gap:22px}
.instel-subpagina{display:none; flex-direction:column; gap:22px}
.instel-subpagina.is-active{display:flex}
.paneel{
  background:var(--surface); border:1px solid var(--lijn); border-radius:var(--radius);
  box-shadow:var(--schaduw); padding:24px 26px;
}
.paneel h2{margin:0 0 6px; font-size:19px; font-weight:700}
.uitleg{color:var(--ink-zacht); margin:0 0 18px; max-width:70ch}
.uitleg strong{color:var(--drum)}

/* ---------- formulieren ---------- */
.invoerrij{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:20px}
.invoerrij label,
.invoerrij .veld-als-label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-zacht)}
.invoerrij input,.invoerrij select{
  font:14px "Inter",sans-serif; color:var(--ink);
  border:1px solid var(--lijn); border-radius:7px; padding:9px 11px; background:#FBFCFD; min-width:150px;
}
.invoerrij input:focus,.invoerrij select:focus{outline:2px solid var(--staal); outline-offset:0; border-color:var(--staal)}
.invoerrij input[type="number"]{min-width:110px; font-family:"JetBrains Mono",monospace}
.checkbox-label{flex-direction:row !important; align-items:center; gap:8px; padding-bottom:10px; font-size:14px !important; color:var(--ink) !important}
.checkbox-label input{min-width:0; width:17px; height:17px; accent-color:var(--staal)}

.knop{
  font:600 14px "Archivo",sans-serif; border:none; border-radius:8px;
  padding:10px 18px; cursor:pointer; transition:background .15s,transform .05s;
}
.knop:active{transform:translateY(1px)}
.knop-primair{background:var(--staal-donker); color:#fff}
.knop-primair:hover{background:#126063}
.knop-groot{background:var(--b2g-emerald); color:#063; font-size:15px; padding:12px 26px; color:#04372E}
.knop-groot:hover{filter:brightness(.95)}
.knop-stil{background:transparent; color:var(--ink-zacht); border:1px solid var(--lijn)}
.knop-stil:hover{background:var(--bg)}
.knop:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.actiebalk{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

/* ---------- tabellen ---------- */
.tabel{width:100%; border-collapse:collapse; font-size:14px}
.tabel th{
  text-align:left; font:600 11px "Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-zacht); padding:8px 10px; border-bottom:2px solid var(--lijn);
}
.tabel td{padding:9px 10px; border-bottom:1px solid var(--lijn)}
.tabel .mono{font-family:"JetBrains Mono",monospace; font-size:13px}
.tabel .verwijder{
  background:none; border:none; color:var(--laat); cursor:pointer; font-size:15px; padding:2px 6px; border-radius:5px;
}
.tabel .verwijder:hover{background:#FBECEC}
.badge-drum{
  display:inline-block; font:600 10px "JetBrains Mono",monospace; letter-spacing:.1em;
  color:#fff; background:var(--drum); border-radius:4px; padding:2px 7px; margin-left:8px; vertical-align:middle;
}
.belasting-balk{position:relative; background:var(--bg); border-radius:5px; height:9px; width:130px; display:inline-block; vertical-align:middle; overflow:hidden}
.belasting-balk i{position:absolute; inset:0 auto 0 0; background:var(--staal); border-radius:5px}
.belasting-balk.is-drum i{background:var(--drum)}
.leeg-melding{color:var(--ink-zacht); font-style:italic; margin:14px 2px}
.foutmelding{background:#FBECEC; color:var(--laat); border:1px solid #EFC4C8; border-radius:8px; padding:12px 16px; margin-top:14px; font-weight:500}

/* ---------- resultaat & legende ---------- */
.resultaat-kop{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
.resultaat-kop-sticky{
  position:sticky; top:64px; z-index:50;
  background:var(--surface); padding:12px 0; margin:0 0 4px;
  box-shadow:0 6px 12px -8px rgba(10,22,24,.25);
}
.legende{display:flex; align-items:center; gap:9px}
.legende-label{font:600 11px "Archivo",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-zacht)}
.legende-strip{width:170px; height:12px; border-radius:6px;
  background:linear-gradient(90deg,#1F7A3B,#7CC08F,#C8CFD8,#E08A93,#C1121F)}

/* ---------- gantt ---------- */

.gantt-as{display:flex; border-bottom:1px solid var(--lijn); position:sticky; top:0; z-index:20; background:var(--surface); width:max-content; min-width:100%}
.gantt-as-hoek{position:sticky; left:0; z-index:21; background:var(--surface)}
.gantt-dag{
  flex:0 0 auto; text-align:center; font:600 10.5px "JetBrains Mono",monospace;
  color:var(--ink-zacht); padding:4px 0 6px; border-left:1px solid var(--lijn);
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.gantt-dag-naam{display:block; line-height:1.1}
.gantt-dag-datum{display:block; line-height:1.1; font-weight:500; color:var(--neutraal)}
.gantt-dag.is-weekend{color:#B9C2CC}
.gantt-dag.is-weekend .gantt-dag-datum{color:#C6CED6}

.gantt-rij{display:flex; align-items:stretch; min-height:46px; border-bottom:1px solid var(--lijn); position:relative; width:max-content; min-width:100%}
.gantt-rijlabel{
  /* flex-basis alleen is niet genoeg: zonder min-width/max-width mag een
     flex-item groeien als de inhoud niet past. Het spoor schuift dan mee naar
     rechts en alle balken op die rij staan niet meer uitgelijnd met de tijdas. */
  flex:0 0 190px; width:190px; min-width:190px; max-width:190px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:6px 12px 6px 4px; font-weight:600; overflow:hidden;
  position:sticky; left:0; z-index:15; background:var(--surface);
}
.gantt-rijlabel small{font-weight:400; color:var(--ink-zacht); font-family:"JetBrains Mono",monospace; font-size:11px}
.gantt-spoor{position:relative; flex:0 0 auto}
.gantt-rij.is-drum .gantt-spoor{
  background:repeating-linear-gradient(45deg, rgba(87,194,214,.07) 0 8px, transparent 8px 16px);
}
.gantt-rij.is-drum .gantt-rijlabel{
  color:var(--drum);
  background:
    repeating-linear-gradient(45deg, rgba(87,194,214,.07) 0 8px, transparent 8px 16px),
    var(--surface);
}

.gantt-raster{position:absolute; top:0; bottom:0; border-left:1px dashed var(--lijn)}
.gantt-raster.is-weekend{background:rgba(10,22,24,.035); border-left-color:var(--lijn)}

.gantt-balk{
  position:absolute; top:9px; height:26px; border-radius:6px;
  color:#fff; font:600 11.5px "Inter",sans-serif; line-height:26px;
  padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); cursor:default;
}
.gantt-balk .balk-afw{font-family:"JetBrains Mono",monospace; font-size:10px; opacity:.9; margin-left:6px}
.gantt-deadline{position:absolute; top:5px; bottom:5px; width:0; border-left:2px solid var(--ink); opacity:.55}
.gantt-deadline::after{content:"▾"; position:absolute; top:-13px; left:-5px; font-size:10px; color:var(--ink)}

/* ---------- tooltip ---------- */
.tooltip{
  position:fixed; z-index:50; background:var(--ink); color:#fff; border-radius:8px;
  padding:10px 13px; font-size:12.5px; line-height:1.5; max-width:320px; pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.tooltip .tt-lever{color:#B9D4E8; font-weight:600}
.tooltip .mono{font-family:"JetBrains Mono",monospace}
.tooltip .t-laat{color:#FF8B94} .tooltip .t-vroeg{color:#8FE0A5}

/* ---------- voettekst & responsief ---------- */
/* voettekst: merkregel (logo + copyright + titel + sub) op één regel, gecentreerd */
.voettekst{padding:20px 20px 4px; margin:0 auto; text-align:center}
.voet-merk{
  display:flex; align-items:center; justify-content:center; gap:13px; flex-wrap:wrap;
}
.voet-logo{
  height:46px; width:auto; display:block;
  /* transparante achtergrond: het symbool staat direct op de paginakleur */
}
.voet-copy{font-family:"Archivo",sans-serif; font-size:19px; font-weight:800; color:#2CB196; letter-spacing:.16em}
.voet-titel{font-family:"Archivo",sans-serif; font-size:20px; font-weight:800; color:var(--ink)}
.voet-sub{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--ink-zacht); letter-spacing:.12em; text-transform:uppercase}

@media (max-width:760px){
  .topbar{padding:12px 16px}
  main{padding:18px 12px 0}
  .paneel{padding:18px 16px}
  .invoerrij label{flex:1 1 100%}
  .invoerrij input,.invoerrij select{min-width:0; width:100%}
  .gantt-rijlabel{flex-basis:120px}
  .gantt-as{margin-left:120px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ==========================================================================
   Aanvullingen: zoom, balkranden, uurlijnen, taakbewerking
   ========================================================================== */

/* ---------- zoomknoppen ---------- */
.resultaat-tools{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.zoom-groep{display:flex; border:1px solid var(--lijn); border-radius:8px; overflow:hidden}
.zoom-knop{
  font:600 14px "JetBrains Mono",monospace; color:var(--ink);
  background:var(--surface); border:none; padding:6px 13px; cursor:pointer;
}
.zoom-knop + .zoom-knop{border-left:1px solid var(--lijn)}
.zoom-knop:hover{background:var(--bg)}
.zoom-knop:focus-visible{outline:2px solid var(--staal); outline-offset:-2px}
.zoom-reset{font-size:11.5px; min-width:58px; color:var(--ink-zacht)}

/* ---------- duidelijk onderscheiden taakbalken ---------- */
.gantt-balk{
  border:1px solid rgba(10,22,24,.55);
  box-shadow:0 0 0 1.5px #fff, inset 0 -2px 0 rgba(0,0,0,.16);
}
.gantt-balk.is-smal{padding:0}

/* ---------- uurhulplijnen bij inzoomen ---------- */
.gantt-uurlijn{position:absolute; top:0; bottom:0; border-left:1px dotted rgba(10,22,24,.14); pointer-events:none}
.gantt-uurlabel{
  position:absolute; top:100%; transform:translateX(-50%);
  font:500 9px "JetBrains Mono",monospace; color:#AAB4BF; pointer-events:none;
}
.gantt-dag{position:relative}

/* ---------- taak bewerken ---------- */
.tabel .bewerk{
  background:none; border:none; color:var(--staal); cursor:pointer;
  font-size:14px; padding:2px 6px; border-radius:5px;
}
.tabel .bewerk:hover{background:#EAF1F7}
.tabel td.acties{white-space:nowrap; text-align:right}
tr.is-bewerken td{background:#FDF1E8}
#taak-toevoegen.is-bijwerken{background:var(--drum)}

/* ---------- verouderde planning ---------- */
.planning-verouderd{
  background:#FFF7E6; color:#8A5A00; border:1px solid #F0DCAE;
  border-radius:8px; padding:10px 14px; margin:4px 0 14px; font-weight:500;
}

/* ==========================================================================
   Aanvullingen: beeldvullend planningsscherm + drag & drop
   ========================================================================== */

/* invoerschermen blijven gecentreerd, het planningsscherm vult het beeld */
main{width:100%; max-width:none}
#scherm-resources, #scherm-taken{width:min(1180px,100%); margin-inline:auto}
#scherm-resultaat{width:100%}
/* het planningsscherm loopt tot de vensterranden: de fixed zijbalk sluit dan
   exact aan op left:0 en de content begint direct rechts ervan */
body:has(#scherm-resultaat.is-actief) main{padding-left:0; padding-right:0; padding-top:0}
#scherm-resultaat .paneel-planning{border-radius:0; box-shadow:none}

.uitleg-slepen{font-size:13px}
.uitleg-slepen strong{color:var(--ink)}

/* ---------- sleepgedrag ---------- */
.gantt-balk{cursor:grab}
.gantt-balk.is-slepen{
  position:fixed; z-index:70; cursor:grabbing; opacity:.92;
  box-shadow:0 10px 28px rgba(0,0,0,.35), 0 0 0 1.5px #fff; pointer-events:none;
}
.gantt-rij.is-doel .gantt-spoor{
  outline:2px dashed var(--staal); outline-offset:-2px;
  background-color:rgba(31,149,153,.06);
}
body.sleept{cursor:grabbing; user-select:none}

/* ---------- vastgezette orders ---------- */
.gantt-balk.is-vast{border:2px solid var(--ink)}
.balk-pin{margin-right:4px; font-size:10px}
.gantt-balk.is-conflict{outline:2px solid var(--drum); outline-offset:1.5px}
.tooltip .t-vast{color:#FFC98A}
.tooltip .t-conflict{color:#FFB3A0; font-weight:600}

/* ==========================================================================
   Aanvullingen: keten-selectie met gestippelde pijlverbindingen
   ========================================================================== */
.gantt-verbindingen{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:visible}
.gantt-balk.is-gedimd{opacity:.32; filter:saturate(.45)}
.gantt-balk.is-selectie{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--staal), inset 0 -2px 0 rgba(0,0,0,.16);
  z-index:6;
}

/* ==========================================================================
   Aanvullingen: doelen-scherm (optimalisatiegewichten)
   ========================================================================== */
#scherm-doelen{width:min(1180px,100%); margin-inline:auto}
.doel{padding:18px 0; border-bottom:1px solid var(--lijn)}
.doel:last-of-type{border-bottom:none}
.doel-kop{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:8px}
.doel-kop label{font:700 15px "Archivo",sans-serif}
.doel-waarde{
  font:600 14px "JetBrains Mono",monospace; color:#fff; background:var(--staal);
  border-radius:6px; padding:2px 10px; min-width:34px; text-align:center;
}
.doel input[type="range"]{
  width:100%; max-width:520px; accent-color:var(--staal); height:22px; cursor:pointer;
}
.doel-uitleg{color:var(--ink-zacht); font-size:13.5px; margin:8px 0 0; max-width:72ch}
.strategie{
  margin-top:18px; padding:12px 16px; border-radius:8px; font-weight:500;
  background:#EEF4F9; color:var(--staal-donker); border:1px solid #D3E1EC;
}

/* ==========================================================================
   Aanvullingen: klantenorders & productcatalogus
   ========================================================================== */
#scherm-orders{width:min(1180px,100%); margin-inline:auto}
.product-kaart{
  border:1px solid var(--lijn); border-radius:8px; background:#FBFCFD;
  padding:12px 16px; margin-bottom:10px;
}
.product-kaart h3{margin:0 0 9px; font:700 14.5px "Archivo",sans-serif}
.product-kaart h3 small{font:500 12px "JetBrains Mono",monospace; color:var(--ink-zacht); margin-left:8px}
/* kop met titel + acties */
.product-kop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.product-kop h3{margin:0 0 9px}
.product-titel{display:flex; align-items:flex-start; gap:8px; min-width:0}
.product-uitklap{
  background:none; border:none; cursor:pointer; font-size:13px; color:var(--staal);
  padding:2px 4px; line-height:1.4; flex:0 0 auto;
}
/* Bewerken-knop valt op als primaire actie op de kaart */
.knop-mini.product-uitklap{
  background:#EAF1F7; border:1px solid var(--staal); color:var(--staal); font-weight:700;
  padding:3px 10px;
}
.knop-mini.product-uitklap:hover{background:var(--staal); color:#fff}
.knop-mini.product-uitklap.is-open{background:var(--staal); color:#fff}
.product-acties{display:flex; gap:6px; flex:0 0 auto}
.knop-mini{
  background:var(--surface); border:1px solid var(--lijn); border-radius:6px; cursor:pointer;
  font:600 11px "Inter",sans-serif; color:var(--ink); padding:3px 8px; white-space:nowrap;
}
.knop-mini:hover:not(:disabled){border-color:var(--staal); background:#F4F8FB}
.knop-mini:disabled{opacity:.4; cursor:not-allowed}
.product-verwijder:hover:not(:disabled){border-color:#C0392B; color:#C0392B; background:#FDF3F2}
/* stap-editor */
.stap-editor{margin-top:12px; padding-top:12px; border-top:1px dashed var(--lijn)}
.stap-editor-kop{font:700 12.5px "Archivo",sans-serif; margin-bottom:9px}
.stap-editor-kop small{font:500 11.5px "Inter",sans-serif; color:var(--ink-zacht); margin-left:8px}
.stap-rij{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px}
.stap-nr{
  flex:0 0 22px; text-align:center; font:700 11px "JetBrains Mono",monospace;
  color:var(--ink-zacht); background:var(--bg); border-radius:5px; padding:3px 0;
}
.stap-naam{flex:1 1 auto; min-width:120px; padding:4px 8px; border:1px solid var(--lijn); border-radius:6px; font-size:12.5px}
.stap-resource{flex:0 0 auto; padding:4px 8px; border:1px solid var(--lijn); border-radius:6px; font-size:12.5px; background:#fff}
.stap-duur{flex:0 0 58px; padding:4px 6px; border:1px solid var(--lijn); border-radius:6px; font-size:12.5px}
.stap-rij-acties{display:flex; gap:4px; flex:0 0 auto}
.stap-toevoegen{margin-top:9px}
/* eenheid-kantelpunt-instelling */
.kantel-instel{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:11px;
  padding:8px 10px; background:#EEF4F8; border:1px solid #D4E3EC; border-radius:8px; font-size:12.5px;
}
.kantel-label{font-weight:600}
.kantel-modus, .kantel-stap{padding:4px 8px; border:1px solid var(--lijn); border-radius:6px; font-size:12.5px; background:#fff}
.kantel-punt-keuze{display:inline-flex; align-items:center; gap:6px; color:var(--ink-zacht)}
/* WIP-drempel per stap */
.stap-drempel-veld{flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--ink-zacht); min-width:62px}
.stap-drempel{flex:0 0 46px; width:46px; padding:4px 6px; border:1px solid var(--lijn); border-radius:6px; font-size:12.5px}
.stap-drempel-leeg{color:#C3CCD4; padding-left:16px}
/* proces-stap subtiel anders getint dan discrete stap */
.stap-rij.is-proces .stap-nr{background:#E8EEF9; color:#4A6394}
/* aantal-badge in de ordertabel */
.order-aantal-badge{
  font:700 10px "JetBrains Mono",monospace; color:#2C6E8F; background:#E4F0F6;
  border-radius:4px; padding:1px 5px; margin-left:4px;
}
.stappen{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.stap-chip{
  font:500 12px "Inter",sans-serif; background:var(--bg);
  border:1px solid var(--lijn); border-radius:6px; padding:3px 9px; white-space:nowrap;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.stap-chip:hover{border-color:var(--staal); background:#EAF1F7}
.stap-chip small{font-family:"JetBrains Mono",monospace; color:var(--ink-zacht); margin-left:5px}
.stap-pijl{color:#AAB4BF; font-size:11px}
/* KOOP (klantorderontkoppelpunt) in de productcatalogus */
.koop-hint{margin:0 0 8px; font-size:11.5px; color:var(--ink-zacht); font-style:italic}
.stap-chip.is-na-koop{background:#F3EEFA; border-color:#C9B6E8}   /* ná KOOP: ordergestuurd */
.stap-chip.is-koop{border-color:#7E4FBF; box-shadow:inset 0 0 0 1px #7E4FBF}
.koop-vlag{
  display:inline-block; margin-left:6px; font:700 8.5px "Archivo",sans-serif;
  letter-spacing:.06em; color:#fff; background:#7E4FBF; border-radius:3px; padding:1px 5px; vertical-align:middle;
}
.stap-pijl.is-koop-grens{color:#7E4FBF; font-weight:700}
/* WIP-drempel-indicatie op de pijl tussen twee stappen */
.pijl-drempel{
  display:inline-block; font:700 8.5px "JetBrains Mono",monospace; color:#2C6E8F;
  background:#E4F0F6; border-radius:3px; padding:0 3px; margin-left:2px; vertical-align:middle;
}
.order-intern-badge{
  font:700 8.5px "Archivo",sans-serif; letter-spacing:.05em; color:#5A6673;
  background:#EDF0F3; border:1px solid var(--lijn); border-radius:3px; padding:1px 5px; margin-left:6px;
}
.order-intern-veld{display:flex; align-items:center; gap:6px; font-size:13px}
/* KOOP-groep in de filterbalk: de twee toggles altijd naast elkaar op één rij */
.koop-groep{align-items:center; flex-wrap:wrap}
.koop-toggles{display:flex; gap:16px; flex-wrap:nowrap; width:100%}
.koop-toggle{display:flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; cursor:pointer}
/* ná-KOOP werkorders in de Gantt (als KOOP-weergave aan staat) */
.gantt-balk.is-na-koop{box-shadow:inset 0 0 0 2px #7E4FBF}
.t-koop{color:#7E4FBF; font-weight:600}
.t-voorkoop{color:var(--ink-zacht)}
/* leesbaar op de donkere tooltip-achtergrond (licht i.p.v. donker) */
.tooltip .t-koop{color:#C9A6F0; font-weight:600}
.tooltip .t-voorkoop{color:#8FE0A5; font-weight:600}
/* interne (voorraad)orders onderscheiden (als IO-weergave aan staat). Moet
   opvallen over ELKE balkkleur (groen/rood/grijs), dus: een dikke donkere rand
   en een stevige diagonale arcering. Het "◆ IO"-merkje staat in de balktekst
   (via JS), want overflow:hidden op de balk zou een hoek-label wegknippen. */
.gantt-balk.is-intern{
  box-shadow:inset 0 0 0 2.5px #12263A, 0 0 0 1px #12263A;
  background-image:repeating-linear-gradient(135deg, rgba(18,38,58,.42) 0 4px, transparent 4px 9px) !important;
}
.gantt-balk.is-intern .balk-io{
  font:700 8.5px "Archivo",sans-serif; letter-spacing:.03em; background:#12263A; color:#fff;
  padding:1px 4px; border-radius:3px; margin-right:5px;
}
.knop-keten{
  background:none; border:1px solid var(--lijn); color:var(--staal); cursor:pointer;
  font:600 12px "Archivo",sans-serif; border-radius:6px; padding:4px 10px;
}
.knop-keten:hover{background:#EAF1F7}

/* ==========================================================================
   Aanvullingen: klant/order-filter boven de Gantt + dashboard
   ========================================================================== */
.filter-groep{display:flex; gap:8px; flex-wrap:wrap}
.filter-groep select{
  font:13.5px "Inter",sans-serif; color:var(--ink); background:#FBFCFD;
  border:1px solid var(--lijn); border-radius:8px; padding:7px 10px; max-width:230px;
}
.filter-groep select:focus{outline:2px solid var(--staal); border-color:var(--staal)}
.filter-status{
  margin:2px 0 12px; padding:9px 14px; border-radius:8px; font-weight:500;
  background:#EEF4F9; color:var(--staal-donker); border:1px solid #D3E1EC;
}
.filter-status .t-laat{color:var(--laat); font-weight:600}
.filter-status .t-vroeg{color:var(--vroeg); font-weight:600}

/* ---------- dashboard ---------- */
#scherm-dashboard{width:min(1180px,100%); margin-inline:auto}
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-top:6px}
.kpi{
  border:1px solid var(--lijn); border-radius:10px; background:#FBFCFD; padding:14px 16px;
  display:flex; flex-direction:column; gap:3px;
}
.kpi .kpi-label{font:600 10.5px "Archivo",sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-zacht)}
.kpi .kpi-waarde{font:700 26px "Archivo",sans-serif; letter-spacing:-.02em}
.kpi .kpi-sub{font-size:12px; color:var(--ink-zacht)}
.kpi.is-goed .kpi-waarde{color:var(--vroeg)}
.kpi.is-slecht .kpi-waarde{color:var(--laat)}
.kpi.is-drum .kpi-waarde{color:var(--drum)}

.dash-res{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--lijn)}
.dash-res:last-child{border-bottom:none}
.dash-res .dash-res-naam{flex:0 0 200px; font-weight:600}
.dash-res .dash-res-balk{
  flex:1; height:18px; background:var(--bg); border-radius:6px; position:relative; overflow:hidden;
}
.dash-res .dash-res-balk i{
  position:absolute; inset:0 auto 0 0; border-radius:6px; background:var(--staal);
}
.dash-res.is-drum .dash-res-balk i{background:var(--drum)}
.dash-res .dash-res-balk i.is-over{background:var(--laat)}
.dash-res .dash-res-info{flex:0 0 190px; font:12.5px "JetBrains Mono",monospace; color:var(--ink-zacht); text-align:right}

/* dubbele resourcebalk: actueel boven, sim onder */
.dash-res-dubbel{align-items:flex-start}
.dash-res-dubbel .dash-res-naam{padding-top:4px}
.dash-res-regels{flex:1; display:flex; flex-direction:column; gap:5px}
.dash-res-lijn{display:flex; align-items:center; gap:10px}
.dash-res-bron{
  flex:0 0 52px; font:600 10.5px "JetBrains Mono",monospace; color:var(--ink-zacht);
  text-transform:uppercase; letter-spacing:.03em;
}
.dash-res-bron-sim{color:var(--staal)}
.dash-res-lijn .dash-res-balk{
  flex:1; height:15px; background:var(--bg); border-radius:5px; position:relative; overflow:hidden;
}
.dash-res-lijn .dash-res-balk i{position:absolute; inset:0 auto 0 0; border-radius:5px; background:var(--staal)}
.dash-res-lijn .dash-res-balk.is-sim i{background:var(--neutraal)}
.dash-res-dubbel.is-drum .dash-res-balk.is-actueel i{background:var(--drum)}
.dash-res-dubbel.is-drum .dash-res-balk.is-sim i{background:#F0A87A}
.dash-res-lijn .dash-res-balk i.is-over{background:var(--laat)}
.dash-res-lijn .dash-res-info{flex:0 0 190px; font:12px "JetBrains Mono",monospace; color:var(--ink-zacht); text-align:right}
.dash-res-lijn .dash-res-info.is-sim{color:var(--staal)}

/* bubbeldiagram: KPI-tabel links van de Y-as */
.bubbel-layout{display:flex; align-items:flex-start; gap:18px}
.bubbel-kpi{flex:0 0 auto; padding-top:8px}
.bubbel-svg{flex:1; min-width:0}
.kpi-tabel{border-collapse:collapse; font-size:13px; white-space:nowrap}
.kpi-tabel th, .kpi-tabel td{padding:7px 12px; text-align:right; border-bottom:1px solid var(--lijn)}
.kpi-tabel thead th{
  font:600 11px "JetBrains Mono",monospace; color:var(--ink-zacht); text-transform:uppercase;
  letter-spacing:.03em; border-bottom:2px solid var(--lijn);
}
.kpi-tabel tbody th{text-align:left; font-weight:600; color:var(--ink)}
.kpi-tabel td{font-family:"JetBrains Mono",monospace; color:var(--ink)}
.kpi-tabel .kpi-sim{color:var(--staal)}
@media (max-width:900px){ .bubbel-layout{flex-direction:column} .bubbel-kpi{width:100%} }

/* planning-header: KPI-regels van actueel + sim onder elkaar */
.planning-kop-links{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; min-width:0}
.planning-kpi-header{display:flex; flex-direction:column; gap:2px; min-width:0}
.resultaat-kop-sticky .resultaat-tools{align-items:center}

/* ==========================================================================
   Planningspagina: vaste verticale zijbalk links, Gantts rechts
   De zijbalk is `fixed` (niet `sticky`) zodat hij bij verticaal scrollen
   volledig stil blijft staan. De content krijgt een marge ter breedte van de
   balk zodat er niets onder verdwijnt.
   ========================================================================== */
:root{ --zijbalk-breedte:296px; --topbar-hoogte:64px; }
.paneel-planning{display:block; padding:0}
.planning-zijbalk{
  position:fixed; top:var(--topbar-hoogte); left:0; z-index:50;
  width:var(--zijbalk-breedte);
  height:calc(100vh - var(--topbar-hoogte));
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:16px;
  padding:16px 16px 18px; border-right:1px solid var(--lijn);
  background:var(--surface);
}
/* subtiele scrollbar in de zijbalk */
.planning-zijbalk::-webkit-scrollbar{width:8px}
.planning-zijbalk::-webkit-scrollbar-thumb{background:#D4DBE3; border-radius:4px}
.planning-zijbalk::-webkit-scrollbar-track{background:transparent}

.planning-content{margin-left:var(--zijbalk-breedte); min-width:0; padding:16px 18px 18px 20px}

/* kop + KPI's onder elkaar */
.planning-zijbalk .planning-kop-links{display:flex; flex-direction:column; align-items:stretch; gap:10px}
.planning-zijbalk .planning-kop-links h2{margin:0}
.planning-zijbalk .planning-kpi-header{gap:8px}
.planning-zijbalk .kpi-regel-rij{flex-direction:column; align-items:stretch; gap:3px; font-size:12px}
.planning-zijbalk .kpi-bron{
  flex:none; font:600 10px "JetBrains Mono",monospace; letter-spacing:.06em;
  padding-bottom:2px; border-bottom:1px solid var(--lijn);
}
.planning-zijbalk .kpi-regel{display:flex; flex-direction:column; gap:1px; line-height:1.4}
.kpi-item{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.kpi-label{color:var(--ink-zacht); font-size:11.5px}
.kpi-waarde{font:600 12px "JetBrains Mono",monospace; color:var(--ink); text-align:right}
.kpi-waarde .t-laat{color:var(--laat)}
.kpi-waarde .t-vroeg{color:var(--vroeg)}

/* sliderblokken onder elkaar, volle breedte van de balk */
.planning-zijbalk .toolbar-sim-doelen{margin:0; display:block}
.planning-zijbalk .sim-doelen-groepen{flex-direction:column; gap:14px; align-items:stretch}
.planning-zijbalk .sim-doelen-groepen .doel-groep{gap:5px}
.planning-zijbalk .sim-doelen-groepen .slider-rij{
  gap:10px; padding:12px 8px 12px; justify-content:space-around;
}
.planning-zijbalk .sim-doelen-groepen .vslider{width:auto; flex:1 1 0; min-width:0; gap:4px}
.planning-zijbalk .sim-doelen-groepen .vslider input[type="range"].v{height:118px}
.planning-zijbalk .sim-doelen-groepen .vslider-w{font-size:12px; min-height:15px}
.planning-zijbalk .sim-doelen-groepen .vslider label{font-size:10px}
.planning-zijbalk .sim-doelen-groepen .doel-groep-titel{font-size:10px}

/* tools onder elkaar */
.planning-zijbalk .resultaat-tools{
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  padding-top:14px; border-top:1px solid var(--lijn);
}
.planning-zijbalk .filter-groep{flex-direction:column; gap:8px}
.planning-zijbalk .filter-groep select{width:100%; min-width:0}
.planning-zijbalk .zoom-groep{justify-content:center}
.planning-zijbalk .knop-stapel{gap:8px}
.planning-zijbalk .knop-stapel .zoom-knop{width:100%; justify-content:center}
.planning-zijbalk .frozen-toolbar{justify-content:center}
.planning-zijbalk .legende{flex-direction:column; gap:6px; align-items:stretch}
.planning-zijbalk .legende-strip{width:100%}
.planning-zijbalk .legende-label{text-align:center}

/* smallere schermen: zijbalk boven de content i.p.v. links */
@media (max-width:1100px){
  .paneel-planning{display:block}
  .planning-zijbalk{
    position:static; width:auto; height:auto; max-height:none; overflow:visible;
    border-right:none; border-bottom:1px solid var(--lijn); border-radius:var(--radius) var(--radius) 0 0;
  }
  .planning-zijbalk .sim-doelen-groepen{flex-direction:row; flex-wrap:wrap}
  .planning-content{margin-left:0; padding:0 16px 16px}
}

/* generieke tool-onderdelen (gebruikt in de planning-zijbalk) */
.resultaat-tools .filter-groep{flex-direction:column; gap:6px}
.resultaat-tools .filter-groep select{min-width:148px}
.knop-stapel{display:flex; flex-direction:column; gap:6px}
.kpi-regel-rij{display:flex; align-items:baseline; gap:10px; font-size:13px}
.kpi-bron{
  flex:0 0 68px; font:600 10.5px "JetBrains Mono",monospace; color:var(--ink-zacht);
  text-transform:uppercase; letter-spacing:.03em;
}
.kpi-bron-sim{color:var(--staal)}
.kpi-regel{color:var(--ink-zacht)}
.kpi-regel strong{color:var(--ink)}
.kpi-regel .t-laat{color:var(--laat)}
.kpi-regel .t-vroeg{color:var(--vroeg)}

/* uitleg-popup: leesbare inhoud */
#uitleg-popup-inhoud{font-size:14px; line-height:1.6; color:var(--ink-zacht)}
#uitleg-popup-inhoud strong{color:var(--ink)}
#uitleg-popup-inhoud em{color:var(--staal); font-style:normal; font-weight:600}
#uitleg-popup-inhoud .uitleg-scheiding{border:none; border-top:1px solid var(--lijn); margin:14px 0}
#uitleg-popup-inhoud .uitleg-kop{font:600 13px "Archivo",sans-serif; color:var(--ink); margin:0 0 4px}

/* ---------------- optimalisatiedoelen: 3 groepen verticale sliders ---------------- */
.doel-groepen{display:flex; gap:22px; align-items:stretch; margin:18px 0 8px}
.doel-groep{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
}
.doel-groep-titel{
  margin:0; font:600 12px "Archivo",sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-zacht); text-align:center; order:1;
}
/* het kader komt om de sliders, de titel staat er los boven */
.slider-rij{
  display:flex; gap:14px; align-items:flex-end; justify-content:center; order:2; width:100%;
  padding:16px 12px 14px; border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--bg);
}
.vslider{display:flex; flex-direction:column; align-items:center; gap:8px; width:56px}
.vslider input[type="range"].v{
  writing-mode:vertical-lr; direction:rtl;         /* modern verticaal */
  -webkit-appearance:slider-vertical; appearance:slider-vertical; /* fallback */
  width:8px; height:180px; padding:0; margin:0; cursor:pointer;
  accent-color:var(--staal);
}
.vslider-w{
  font:600 13px "JetBrains Mono",monospace; color:var(--ink);
  min-height:16px;
}
.vslider label{
  font:600 11.5px "Inter",sans-serif; color:var(--ink); text-align:center;
  display:flex; align-items:center; gap:3px; line-height:1.2;
}
/* mini-i-knop naast een slider-label */
.info-knop.info-mini{
  width:15px; height:15px; margin-left:2px; font-size:9px; vertical-align:1px;
}
/* de middelste groep (concurrerende doelen) licht accentueren */
.doel-groep:nth-child(2) .slider-rij{border-color:var(--staal); background:rgba(31,149,153,.04)}
@media (max-width:720px){ .doel-groepen{gap:14px} .doel-groepen .vslider input[type="range"].v{height:140px} }
.status-chip{
  display:inline-block; font:600 11px "Archivo",sans-serif; letter-spacing:.04em;
  border-radius:20px; padding:3px 11px; color:#fff;
}
.status-chip.is-laat{background:var(--laat)}
.status-chip.is-optijd{background:var(--vroeg)}
.status-chip.is-krap{background:#C77F0A}
#dash-orders tbody tr{cursor:pointer}
#dash-orders tbody tr:hover td{background:#F2F6FA}

/* ==========================================================================
   Aanvullingen: bubbeldiagram klantenorders + detail-popup
   ========================================================================== */
#dash-bubbel{width:100%}
#dash-bubbel svg{width:100%; height:auto; display:block}
.bub-as{stroke:var(--lijn); stroke-width:1}
.bub-raster{stroke:var(--lijn); stroke-width:1; stroke-dasharray:2 4; opacity:.7}
.bub-aslabel{font:600 10.5px "JetBrains Mono",monospace; fill:var(--ink-zacht)}
.bub-astitel{font:700 11px "Archivo",sans-serif; fill:var(--ink-zacht); letter-spacing:.06em; text-transform:uppercase}
.bub-diagonaal{stroke:var(--ink); stroke-width:1.6; stroke-dasharray:7 5; opacity:.55}
.bub-zone{font:700 12px "Archivo",sans-serif; letter-spacing:.05em; text-transform:uppercase; opacity:.5}
.bub-bubbel{stroke:#fff; stroke-width:1.5; cursor:pointer; transition:opacity .12s}
.bub-bubbel:hover{opacity:.82; stroke:var(--ink)}
.bub-nr{font:600 9.5px "JetBrains Mono",monospace; fill:var(--ink); pointer-events:none}

/* ---------- popup ---------- */
.popup-achtergrond{
  position:fixed; inset:0; z-index:90; background:rgba(10,22,24,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.popup-achtergrond[hidden]{display:none} /* hidden-attribuut moet winnen van display:flex */
.popup-kaart{
  background:var(--surface); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.35);
  max-width:720px; width:100%; max-height:85vh; overflow:auto; padding:22px 26px;
}
.popup-kop{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:4px}
.popup-kop h3{margin:0; font:800 19px "Archivo",sans-serif}
.popup-kop h3 small{display:block; font:500 13px "Inter",sans-serif; color:var(--ink-zacht); margin-top:3px}
.popup-sluit{
  background:none; border:1px solid var(--lijn); border-radius:8px; cursor:pointer;
  font-size:15px; padding:5px 11px; color:var(--ink-zacht); flex:0 0 auto;
}
.popup-sluit:hover{background:var(--bg)}
.popup-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:12px 0 16px;
  font-size:13.5px; color:var(--ink-zacht);
}
.popup-meta strong{color:var(--ink); font-family:"JetBrains Mono",monospace; font-weight:600}
.popup-acties{display:flex; gap:10px; margin-top:16px}

/* ---- logboek ---- */
.popup-kaart-breed{max-width:560px}
.knop-logboek{margin-bottom:8px; font-size:12.5px; padding:5px 12px}
.logboek-acties{display:flex; justify-content:flex-end; margin:4px 0 14px}
.logboek-leeg{color:var(--ink-zacht); font-size:13.5px; text-align:center; padding:24px 0}
.logboek-item{
  border:1px solid var(--lijn); border-radius:9px; padding:11px 14px; margin-bottom:10px;
  background:var(--bg); cursor:pointer; transition:border-color .12s, box-shadow .12s;
}
.logboek-item:hover{border-color:var(--staal); box-shadow:0 2px 8px rgba(0,0,0,.07)}
.logboek-item:focus-visible{outline:2px solid var(--staal); outline-offset:2px}
.logboek-item-kop{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.logboek-bron{
  font:700 9.5px "JetBrains Mono",monospace; letter-spacing:.08em; color:#fff;
  border-radius:4px; padding:2px 7px;
}
.logboek-bron-sim{background:var(--staal)}
.logboek-bron-act{background:var(--ink-zacht)}
.logboek-datum{font-size:12.5px; color:var(--ink-zacht); font-family:"JetBrains Mono",monospace}
/* badge die aangeeft of het volledige plan bewaard is (exact) of herberekend wordt */
.logboek-badge{
  font:700 9px "Archivo",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px; border:1px solid var(--lijn); color:var(--ink-zacht);
}
/* het viewer-venster: breder, met eigen Gantt en actieknoppen */
.popup-kaart-viewer{max-width:min(1100px, 94vw); width:1100px}
.logboek-viewer-melding{
  margin:0 0 12px; padding:8px 13px; border-radius:8px; font-size:13px;
  background:#FDF3E7; color:#8A5200; border:1px solid #F0D9B5;
}
.logboek-viewer-acties{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
#gantt-logboek-wrap{max-height:60vh; overflow:auto}
.logboek-verwijder{
  margin-left:auto; background:none; border:1px solid var(--lijn); border-radius:6px;
  cursor:pointer; font-size:12px; padding:2px 8px; color:var(--laat);
}
.logboek-verwijder:hover{background:rgba(193,18,31,.08)}
.logboek-kpis{display:flex; flex-direction:column; gap:2px; font-size:12.5px; line-height:1.4}
.logboek-params{
  margin-top:8px; padding-top:7px; border-top:1px dashed var(--lijn);
  display:flex; flex-direction:column; gap:4px;
}
.logboek-groep{display:flex; gap:8px; align-items:baseline; font-size:11.5px; line-height:1.4}
.logboek-groep-titel{
  flex:0 0 auto; width:150px; font:700 9.5px "Archivo",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-zacht); text-align:right; white-space:nowrap;
}
.logboek-groep-waarden{font-family:"JetBrains Mono",monospace; color:var(--ink)}

/* Vangnet: het hidden-attribuut wint altijd, ongeacht andere display-regels */
[hidden]{display:none !important}

/* ==========================================================================
   Aanvullingen: actuele planning + simulatie (dubbele Gantt)
   ========================================================================== */
.gantt-wrap{overflow:auto; margin-top:6px; padding-bottom:6px; max-height:88vh; position:relative}
.gantt{position:relative; width:max-content; min-width:100%; font-size:13px}
.gantt-blok-kop{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin:22px 0 4px; padding-top:14px; border-top:2px solid var(--lijn);
}
.gantt-blok-kop:first-of-type{margin-top:8px; padding-top:0; border-top:none}
.gantt-titel{margin:0; font:800 16px "Archivo",sans-serif}
.gantt-titel small{font:500 12.5px "Inter",sans-serif; color:var(--ink-zacht); margin-left:8px}
.gantt-titel-sim::before{
  content:"SIM"; font:700 9.5px "JetBrains Mono",monospace; letter-spacing:.1em;
  color:#fff; background:var(--staal); border-radius:4px; padding:2px 7px;
  margin-right:9px; vertical-align:2px;
}
#simulatie-actualiseren:disabled{opacity:.4; cursor:not-allowed}
/* de drie sim-knoppen als groep rechts uitgelijnd, netjes naast elkaar; de
   sim-vergelijk ervoor duwt de groep naar rechts (margin-left:auto) */
.sim-knoppen{display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0}
#gantt-sim-wrap{background:repeating-linear-gradient(-45deg, rgba(31,149,153,.03) 0 10px, transparent 10px 20px)}

/* doelen-parameters achter de Gantt-titels */
.gantt-doelen{
  font:500 11.5px "JetBrains Mono",monospace; color:var(--ink-zacht);
  background:var(--bg); border:1px solid var(--lijn); border-radius:6px;
  padding:3px 9px; margin-left:10px; vertical-align:2px; white-space:nowrap;
}
.gantt-doelen:empty{display:none}

/* i-knop voor de info-popup */
.info-knop{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; margin-left:10px; vertical-align:3px;
  font:italic 700 12.5px Georgia,serif; color:#fff; background:var(--staal);
  border:none; cursor:pointer; transition:background .15s;
}
.info-knop:hover{background:var(--staal-donker)}
.info-knop:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* compacte doelen-sliders boven de simulatie-gantt */
.sim-doelen{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.sim-doelen label{
  display:flex; align-items:center; gap:7px;
  font:600 11px "Archivo",sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-zacht);
}
.sim-doelen input[type="range"]{width:110px; accent-color:var(--staal); cursor:pointer}
.sim-doelen output{
  font:600 12px "JetBrains Mono",monospace; color:#fff; background:var(--staal);
  border-radius:5px; padding:1px 7px; min-width:24px; text-align:center;
}
@media (max-width:900px){ .sim-doelen input[type="range"]:not(.v){width:80px} }

/* sim-doelen: layout wordt bepaald door de planning-zijbalk hierboven */
.sim-doelen-groepen{display:flex}

/* vergelijking simulatie t.o.v. actuele planning */
.sim-vergelijk{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.verg-label{font:600 10.5px "Archivo",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-zacht)}
.verg-chip{
  font:500 12px "Inter",sans-serif; border-radius:14px; padding:3px 10px;
  border:1px solid var(--lijn); background:#FBFCFD; color:var(--ink-zacht); white-space:nowrap;
}
.verg-chip b{font-family:"JetBrains Mono",monospace; font-weight:600; margin-left:2px}
.verg-chip.is-beter{background:#EAF6EE; border-color:#BFE3CB; color:var(--vroeg)}
.verg-chip.is-slechter{background:#FBECEC; border-color:#EFC4C8; color:var(--laat)}

/* statusregel van de automatische optimalisatie */
.opti-status{
  margin:2px 0 10px; padding:9px 14px; border-radius:8px; font-size:13.5px;
  background:#FDF3E7; color:#8A5200; border:1px solid #F0D9B5;
}
/* melding van de optimale sim als het optimum op een ander punt ligt dan de
   snelle sim vond (of dat het dat punt juist bevestigt) */
.opti-beter{
  display:inline-block; margin-top:4px; font-weight:600; color:#0A6E96;
}

/* ==========================================================================
   Verticale daglijnen: één dunne lijn per dag, doorlopend van de tijdas tot
   de onderkant van de Gantt, zodat dag-begin/-einde duidelijk afleesbaar is.
   De weekend-arcering en daglabels op de as blijven als oriëntatie.
   ========================================================================== */
.gantt-dag{border-left:1px solid var(--lijn)}
.gantt-raster{border-left:1px solid var(--lijn)}
.gantt-deadline, .gantt-uurlijn{display:none}

/* ==========================================================================
   Aanvullingen: bubbeldiagram-modus (orders/werkorders) + volledig scherm
   ========================================================================== */
.modus-knop.is-active{background:var(--staal); color:#fff}
.paneel.bubbel-vol{
  position:fixed; inset:12px; z-index:85; margin:0; overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
body.heeft-bubbel-vol{overflow:hidden}
.paneel.bubbel-vol #dash-bubbel svg{max-height:calc(100vh - 210px)}

/* werkorder-bubbels: kleiner nummerlabel + tooltip boven het volledig scherm */
.bub-nr-klein{font-size:8px}
.tooltip{z-index:100} /* moet boven het bubbeldiagram in volledig scherm (z-index 85) liggen */

/* hover in werkorder-modus: alle werkorders van dezelfde klantenorder zwart omcirkeld */
.bub-bubbel.is-familie{stroke:var(--staal); stroke-width:1.75}

/* processtap-pijlen tussen de werkorders van de gehoverde klantenorder */
.bub-familie-pijlen{pointer-events:none}
.bub-pijl{stroke:var(--staal); stroke-width:1.2; stroke-dasharray:4 3.5; fill:none; opacity:.85}

/* bulk-capaciteit en gekopieerde/uitgeweken markeringen */
.bulk-rij{margin-top:16px; padding-top:16px; border-top:1px solid var(--lijn); margin-bottom:0}
.gantt-balk .balk-afw + *{display:inline}

/* KPI-regel per plan (actueel én simulatie) */
.plan-stats{
  margin:2px 0 8px; font-size:13px; color:var(--ink-zacht);
}
.plan-stats strong{color:var(--ink); font-family:"JetBrains Mono",monospace; font-weight:600}
.plan-stats .t-laat{color:var(--laat); font-weight:600}
.plan-stats .t-vroeg{color:var(--vroeg); font-weight:600}

/* klantenorders: status-select en inactieve orders (Geleverd/Geannuleerd) */
.order-status{
  font:13px "Inter",sans-serif; color:var(--ink); background:#FBFCFD;
  border:1px solid var(--lijn); border-radius:6px; padding:5px 8px;
}
tr.is-inactief td{opacity:.5}
tr.is-inactief .order-status{opacity:1}

/* resource-overlap kolom leesbaar houden */
#res-tabel td:nth-child(4){white-space:nowrap}

/* ==========================================================================
   Inhaaklijntjes voor overlap / transfer batches in de Gantt
   ========================================================================== */
.gantt-overlaplijnen{position:absolute; top:0; left:0; pointer-events:none; z-index:6; overflow:visible}
.overlap-haak{fill:none; stroke:#C56A1A; stroke-width:1.8; stroke-linejoin:round; opacity:1}
.overlap-tick{stroke:#C56A1A; stroke-width:1.3; stroke-dasharray:2.5 2.5; opacity:.5}
.overlap-toggle.is-actief{background:#C56A1A; color:#fff; border-color:#C56A1A}

/* notitie wanneer werkcenters de globale overlap overschrijven */
.doel-noot{margin:6px 0 0; padding:7px 11px; border-radius:7px; font-size:12.5px;
  background:#FBF0E4; color:#8A5200; border:1px solid #EBD3B5}

/* popup-toggle: actieve staat net als de overlap-toggle, maar in staalblauw */
.popup-toggle.is-actief{background:var(--staal); color:#fff; border-color:var(--staal)}

/* plan-bron-schakelaar (actueel/simulatie) in het dashboard-bubbelpaneel */
.bron-knop.is-active{background:var(--staal); color:#fff}
.bron-knop:disabled{opacity:.4; cursor:not-allowed}

/* sleepbare klantenorder-bubbels in de simulatie */
.bub-sleepbaar{cursor:ew-resize}
.bub-sleepbaar:hover{stroke:var(--staal); stroke-width:2}

/* prioriteitsorders: ster op de bubbel, badge en hint in de popup */
.bub-prioriteit{stroke:#D4A017; stroke-width:2.5}
.bub-ster{font-size:15px; fill:#D4A017; paint-order:stroke; stroke:#fff; stroke-width:2.5}
.prio-badge{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:10px;
  background:#FBF0D0; color:#8A6D00; font-size:12px; font-weight:600; vertical-align:middle}
.popup-hint{margin:10px 0 0; padding:8px 12px; border-radius:7px; font-size:12.5px;
  background:#FBF0D0; color:#8A6D00; border:1px solid #EBD9A5}

/* ==========================================================================
   Frozen period: gearceerde band + grenslijn over de Gantt
   ========================================================================== */
#gantt-actueel, #gantt-sim { position: relative; }
.gantt-frozen-band{
  position:absolute; top:23px; bottom:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(-45deg,
    rgba(31,149,153,.07) 0, rgba(31,149,153,.07) 7px,
    rgba(31,149,153,.13) 7px, rgba(31,149,153,.13) 14px);
}
.gantt-frozen-lijn{
  position:absolute; top:23px; bottom:0; width:0; z-index:4; pointer-events:none;
  border-left:2px dashed var(--staal);
}
.gantt-frozen-lijn::after{
  content:"❄ frozen"; position:absolute; top:1px; left:-2px;
  font-size:10px; font-weight:700; color:var(--staal); white-space:nowrap;
  background:var(--surface); padding:0 3px; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.08);
}
/* bevroren werkorder-balken: subtiele blauwe rand + vries-icoon */
.gantt-balk.is-bevroren{outline:1.5px solid var(--staal); outline-offset:-1.5px}
.balk-vries{margin-right:3px}

/* frozen-period-veld in de Planning-toolbar */
.frozen-toolbar{
  display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--ink-zacht);
  padding:5px 10px; border:1px solid var(--lijn); border-radius:8px; background:#FBFCFD; white-space:nowrap;
}
.frozen-toolbar input{
  width:44px; text-align:center; font:600 13px "JetBrains Mono",monospace;
  border:1px solid var(--lijn); border-radius:5px; padding:2px 4px;
}

/* toast-melding (bv. prioriteit geweigerd) */
.toast-melding{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  max-width:min(560px,90vw); padding:12px 20px; border-radius:10px; z-index:200;
  background:#17202B; color:#fff; font-size:13.5px; line-height:1.45;
  box-shadow:0 12px 32px rgba(0,0,0,.28); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast-melding.zichtbaar{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------------- omsteltijden (setup-matrix) ---------------- */
.paneel-omstel .omstel-matrix-wrap{overflow-x:auto; margin-top:4px}
.omstel-tabel{border-collapse:collapse; width:auto; min-width:min(100%,520px)}
.omstel-tabel th{
  background:var(--bg); color:var(--ink-zacht); font-weight:600; font-size:12px;
  padding:6px 8px; text-align:center; white-space:nowrap; border:1px solid var(--lijn);
}
.omstel-tabel thead th{position:sticky; top:0; z-index:1}
.omstel-tabel tbody th{
  text-align:right; position:sticky; left:0; background:var(--bg); z-index:1;
  max-width:180px; overflow:hidden; text-overflow:ellipsis;
}
.omstel-tabel th.omstel-hoek{
  left:0; top:0; z-index:2; color:var(--staal); font-size:11px; text-align:left;
}
.omstel-tabel td{border:1px solid var(--lijn); padding:0; text-align:center}
.omstel-tabel td.is-diagonaal{background:repeating-linear-gradient(
  135deg, #F1F4F8, #F1F4F8 5px, #E6EBF1 5px, #E6EBF1 10px)}
.omstel-tabel td input{
  width:58px; border:none; background:transparent; text-align:center;
  padding:7px 4px; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink);
}
.omstel-tabel td input:focus{outline:2px solid var(--staal); outline-offset:-2px; background:#fff}
.omstel-tabel td input::placeholder{color:#C2CAD3}
.omstel-noot{margin-top:8px}

/* gearceerd omstelblokje vóór een werkorder in de Gantt (setup-tijd) */
.gantt-omstel{
  position:absolute; top:8px; bottom:8px; z-index:2; border-radius:3px;
  background:repeating-linear-gradient(
    135deg, rgba(87,194,214,.30), rgba(87,194,214,.30) 4px,
    rgba(87,194,214,.10) 4px, rgba(87,194,214,.10) 8px);
  border:1px solid rgba(87,194,214,.55); pointer-events:auto;
}

/* ---------- stap 3a: resourcebibliotheek & werkcenter-samenstelling ---------- */

/* type-badges: man / machine / tool / materiaal */
.type-badge{
  display:inline-block; font-size:11.5px; font-weight:600; white-space:nowrap;
  padding:2px 8px; border-radius:20px; border:1px solid transparent;
}
.type-man      {background:rgba(31,149,153,.10);  color:var(--staal-donker); border-color:rgba(31,149,153,.30)}
.type-machine  {background:rgba(10,22,24,.07);    color:var(--ink);          border-color:rgba(10,22,24,.20)}
.type-tool     {background:rgba(87,194,214,.10);  color:#1A6D7A;             border-color:rgba(87,194,214,.35)}
.type-materiaal{background:rgba(45,138,70,.10);   color:#1E5F31;             border-color:rgba(45,138,70,.32)}

/* kwalificatie-tags */
/* Middelen: tabs per soort (mensen / machines / gereedschappen / materiaal) */
.mid-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px;
  border-bottom:1px solid var(--lijn);
}
.mid-tab{
  background:none; border:1px solid transparent; border-bottom:none; cursor:pointer;
  font:600 13.5px "Archivo",sans-serif; color:var(--ink-zacht);
  padding:9px 16px; border-radius:9px 9px 0 0; margin-bottom:-1px;
  transition:color .12s, background .12s, border-color .12s;
  display:inline-flex; align-items:center; gap:8px;
}
.mid-tab-icoon{font-size:22px; line-height:1}

/* Onderhoud & Stilstand: reden kiezen door op het woord te klikken */
.stil-veld{min-width:280px}
.stil-kop{display:flex; gap:6px; margin-bottom:5px}
.stil-modus{
  border:1px solid var(--lijn); background:var(--surface); cursor:pointer;
  font:700 11px "Archivo",sans-serif; padding:3px 10px; border-radius:6px;
  letter-spacing:.03em; transition:all .12s;
}
.stil-modus.is-onderhoud{color:#1B7A5A}
.stil-modus.is-stilstand{color:#B3372B}
.stil-modus.is-onderhoud.is-active{background:#1B7A5A; color:#fff; border-color:#1B7A5A}
.stil-modus.is-stilstand.is-active{background:#B3372B; color:#fff; border-color:#B3372B}
.stil-invoer{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.stil-invoer input{padding:4px 6px; border:1px solid var(--lijn); border-radius:6px; font-size:12.5px}
/* dropdown: dicht tenzij je hem opent, zodat de rij nooit uitloopt */
.stil-dropdown{position:relative; display:block; margin-top:6px}
.stil-knop{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  background:var(--surface); border:1px solid var(--lijn); border-radius:6px; cursor:pointer;
  padding:5px 9px; font:500 12px "Inter",sans-serif; color:var(--ink); text-align:left;
}
.stil-knop:hover{border-color:var(--staal)}
.stil-knop.is-open{border-color:var(--staal); box-shadow:0 0 0 2px rgba(26,131,136,.15)}
.stil-pijl{color:var(--ink-zacht); font-size:10px}
.stil-telling{
  display:inline-block; font:700 10px "Archivo",sans-serif; padding:1px 6px; border-radius:4px; margin-right:4px;
}
.stil-telling.is-onderhoud{background:rgba(27,122,90,.12); color:#1B7A5A}
.stil-telling.is-stilstand{background:rgba(179,55,43,.12); color:#B3372B}
.stil-lijst{
  position:absolute; top:calc(100% + 4px); left:0; z-index:40; min-width:100%; width:max-content; max-width:320px;
  display:flex; flex-direction:column; gap:3px; max-height:170px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--lijn); border-radius:8px; padding:6px;
  box-shadow:0 8px 22px rgba(10,22,24,.14);
}
.stil-leeg{font-size:11.5px; color:var(--neutraal); font-style:italic}
.stil-regel{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font:600 11px "JetBrains Mono",monospace; padding:3px 7px; border-radius:5px; border:1px solid;
}
.stil-regel.is-onderhoud{background:rgba(27,122,90,.10); color:#1B7A5A; border-color:rgba(27,122,90,.40)}
.stil-regel.is-stilstand{background:rgba(179,55,43,.10); color:#B3372B; border-color:rgba(179,55,43,.40)}
.stil-regel-tekst{white-space:nowrap}
.stil-weg{background:none; border:none; cursor:pointer; color:inherit; font-size:14px; line-height:1; padding:0 1px; flex:0 0 auto}
.stil-weg:hover{opacity:.6}
.mid-tab:hover{color:var(--ink); background:#F2F7F7}
.mid-tab.is-active{
  color:var(--staal-donker); background:var(--surface);
  border-color:var(--lijn); border-bottom:1px solid var(--surface);
}

/* Zones (sharing): fysieke cel waarin werkcenters samen bewaakt kunnen worden */
.zone-beheer{border-top:1px dashed var(--lijn); padding-top:12px; margin-top:4px; align-items:flex-end}
.zone-lijst{display:flex; flex-wrap:wrap; gap:5px; align-items:center; flex:1 1 auto}
.zone-leeg{font-size:11.5px; color:var(--neutraal); font-style:italic}
.zone-chip{
  display:inline-flex; align-items:center; gap:5px;
  font:600 11.5px "Inter",sans-serif; padding:3px 8px; border-radius:6px;
  background:rgba(26,131,136,.10); color:var(--staal-donker); border:1px solid rgba(26,131,136,.35);
}
.zone-chip small{font-family:"JetBrains Mono",monospace; font-size:9.5px; opacity:.75}
.zone-weg{background:none; border:none; cursor:pointer; color:inherit; font-size:13px; line-height:1; padding:0}
.zone-weg:hover{opacity:.6}
.zone-tag{
  display:inline-block; font:600 10.5px "Inter",sans-serif; padding:1px 6px; border-radius:4px;
  background:rgba(26,131,136,.10); color:var(--staal-donker); border:1px solid rgba(26,131,136,.30);
}
/* SHARING: hover over een werkorder die één persoon samen met andere werkcenters
   bedient -> de bron krijgt een volle rand, de gelijktijdige WO's een zachtere.
   Zo zie je in één oogopslag welke werkcenters die persoon nu tegelijk doet. */
.gantt-balk.is-sharing-bron{
  box-shadow:inset 0 0 0 2.5px #2CB196, 0 0 0 2px rgba(44,177,150,.55);
  z-index:6;
}
.gantt-balk.is-sharing-samen{
  box-shadow:inset 0 0 0 2px #2CB196, 0 0 0 1px rgba(44,177,150,.35);
  z-index:5;
}
.tooltip .t-sharing{color:#7FE3C6; font-weight:600}

/* sharing: deze persoon kan meerdere werkcenters gelijktijdig bedienen */
.sharing-badge{
  display:inline-block; font:700 9.5px "JetBrains Mono",monospace; margin-left:6px;
  padding:1px 5px; border-radius:4px; vertical-align:middle;
  background:rgba(44,177,150,.14); color:#177A66; border:1px solid rgba(44,177,150,.45);
}
/* werkcenter dat gedeeld mag worden (vraagt geen onafgebroken aandacht) */
.deel-tag{
  display:inline-block; font:700 11px "JetBrains Mono",monospace;
  color:#177A66; margin-left:3px;
}

.tag-kwal{
  display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; margin:1px 2px 1px 0;
  border-radius:5px; background:var(--bg); color:var(--ink-zacht); border:1px solid var(--lijn);
}
.tag-kwal.is-fout{background:rgba(193,18,31,.08); color:var(--laat); border-color:rgba(193,18,31,.35)}
/* pool-markering: dit onderdeel wordt uit de kwalificatie-pool bemand */
.tag-pool{
  display:inline-block; font:700 9.5px "Archivo",sans-serif; letter-spacing:.06em;
  padding:2px 6px; border-radius:5px; text-transform:uppercase;
  background:rgba(44,177,150,.14); color:#177A66; border:1px solid rgba(44,177,150,.45);
}

/* onderdeel-alternatief (uitwijk) in de samenstellingstabel */
.tag-alt{
  display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; margin:1px 2px 1px 0;
  border-radius:5px; white-space:nowrap;
  background:rgba(10,110,150,.07); color:var(--vroeg); border:1px solid rgba(10,110,150,.28);
}

/* levensduur: verbruikt / totaal */
.levensduur-balk{
  position:relative; background:var(--bg); border-radius:5px; height:9px; width:90px;
  display:inline-block; vertical-align:middle; overflow:hidden;
}
.levensduur-balk i{position:absolute; inset:0 auto 0 0; background:var(--vroeg); border-radius:5px}
.levensduur-balk.is-waarschuwing i{background:var(--drum)}
.levensduur-balk.is-kritiek i{background:var(--laat)}

/* statuslabels in de samenstellingstabel */
.sam-status{font-size:12px; font-weight:600; white-space:nowrap}
.sam-status.is-constraint{color:var(--drum)}
.sam-status.is-fout      {color:var(--laat)}
.sam-status.is-materiaal {color:var(--vroeg)}

/* teller: hoe vaak een middel gebruikt wordt / hoeveel onderdelen een wc heeft */
.middel-gebruik{
  margin-left:7px; font-size:11px; color:var(--ink-zacht);
  background:var(--bg); border:1px solid var(--lijn); border-radius:5px; padding:0 5px;
}
/* interne constraint achter de capaciteit in de werkcentertabel */
.cap-bron{
  margin-left:7px; font-size:11px; font-weight:600; color:var(--drum);
  background:rgba(87,194,214,.09); border:1px solid rgba(87,194,214,.30);
  border-radius:5px; padding:0 5px; white-space:nowrap;
}

/* de samenstellingsvelden verbergen zich per type; geen sprongen in de rij */
.paneel-middelen .invoerrij label[hidden],
.paneel-middelen .invoerrij .veld-als-label[hidden]{display:none}
#sam-info{margin-top:12px}

/* ---------- stap 3a: onderdeelrijen in de Gantt ---------- */

/* labelkop: knop + naam + badges op één regel, de <small> eronder */
.gantt-labelkop{display:flex; align-items:center; gap:5px; min-width:0}
.gantt-rijnaam{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* uitklapknop voor de onderdelen van een werkcenter */
.gantt-uitklap{
  flex:0 0 auto; width:16px; height:16px; padding:0; line-height:1;
  border:1px solid var(--lijn); border-radius:4px; background:var(--surface);
  color:var(--ink-zacht); font-size:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
.gantt-uitklap:hover{background:var(--bg); color:var(--ink)}
.gantt-uitklap.is-open{transform:rotate(90deg); background:var(--staal); color:#fff; border-color:var(--staal)}

/* de onderdeelrij zelf: lager, ingesprongen, visueel ondergeschikt */
.gantt-rij.is-onderdeel{min-height:30px; background:rgba(10,22,24,.015)}
.gantt-rijlabel.is-onderdeel{
  font-weight:500; font-size:12.5px; color:var(--ink-zacht);
  padding-left:14px; background:var(--surface);
}
.gantt-rijlabel.is-onderdeel small{font-size:10.5px}
.gantt-tak{flex:0 0 auto; color:var(--neutraal); font-size:11px; margin-right:1px}
/* het type-badge in het rijlabel toont alleen het icoon: compact houden */
.gantt-rijlabel.is-onderdeel .type-badge{padding:1px 5px; font-size:11px}

/* bezettingsbalk van een onderdeel: schaduw van de werkcenterbalk */
.gantt-onderdeelbalk{
  /* z-index 4: boven de niet-beschikbaar-arcering (z-index 3), zodat een
     bezettingsbalk altijd zijn eigen popup houdt. */
  position:absolute; top:7px; bottom:7px; border-radius:4px; z-index:4;
  background:var(--neutraal); opacity:.55; pointer-events:auto;
}
.gantt-onderdeelbalk.type-man    {background:var(--staal)}
.gantt-onderdeelbalk.type-machine{background:var(--ink-zacht)}
.gantt-onderdeelbalk.type-tool   {background:#C97A3D}

/* alternatief-rij (F4): een middel dat werk overneemt als het primaire bezet is.
   Subtiel onderscheiden met een gestippelde toon en een ↷-vlag, zodat meteen
   duidelijk is dat dit een uitwijk is en geen vast onderdeel. */
.gantt-rij.is-alternatief{background:rgba(201,122,61,.05)}
.gantt-rijlabel.is-alternatief{font-style:italic}
.gantt-rijlabel .alt-vlag{margin-left:4px; color:#C97A3D; font-weight:700}
.gantt-onderdeelbalk.is-uitwijk{
  opacity:.85; border:2.5px dashed #C97A3D; box-shadow:0 0 0 1px rgba(201,122,61,.35);
}

/* materiaal: beschikbaar / nog niet beschikbaar (z-index 4: zie onderdeelbalk) */
.gantt-materiaal{position:absolute; top:11px; bottom:11px; pointer-events:auto; z-index:4}
.gantt-materiaal.is-wel{
  background:rgba(45,138,70,.20); border-top:2px solid var(--vroeg); border-radius:3px;
}
.gantt-materiaal.is-niet{
  background:repeating-linear-gradient(45deg,
    rgba(152,162,176,.18) 0 4px, transparent 4px 8px);
  border-top:2px dashed var(--neutraal); border-radius:3px;
}

/* hover over een werkorder: het hele werkcenter (rij + onderdelen) oplicht */
.gantt-rij.is-wc-hover{background:rgba(31,149,153,.07)}
.gantt-rij.is-wc-hover .gantt-rijlabel{background:rgba(31,149,153,.10)}
.gantt-rij.is-wc-hover.is-onderdeel{background:rgba(31,149,153,.10)}
.gantt-rij.is-wc-hover .gantt-onderdeelbalk{opacity:.85}
.gantt-rij.is-wc-hover::after{
  content:""; position:absolute; inset:0 0 0 0; pointer-events:none;
  box-shadow:inset 3px 0 0 var(--staal);
}
/* de drum blijft herkenbaar, ook tijdens hover */
.gantt-rij.is-drum.is-wc-hover::after{box-shadow:inset 3px 0 0 var(--drum)}

/* omstelzone op een onderdeelrij: de resource is bezet met omstellen,
   niet met produceren — zelfde arcering als de werkcenter-omstelzone */
.gantt-onderdeel-omstel{
  position:absolute; top:9px; bottom:9px; border-radius:3px; pointer-events:auto;
  background:repeating-linear-gradient(45deg,
    rgba(87,194,214,.30) 0 3px, rgba(87,194,214,.08) 3px 7px);
  border:1px solid rgba(87,194,214,.50);
}
.gantt-rij.is-wc-hover .gantt-onderdeel-omstel{
  background:repeating-linear-gradient(45deg,
    rgba(87,194,214,.45) 0 3px, rgba(87,194,214,.14) 3px 7px);
}
/* materiaal- en onderdeelelementen reageren op de muis (popup) */
.gantt-onderdeelbalk:hover{opacity:.9}

/* ---------- rollen: omstellen / productie ---------- */

/* klikbare rolbadges in de samenstellingstabel */
.rol-cel{white-space:nowrap}
.rol-badge{
  font:inherit; font-size:11px; font-weight:600; cursor:pointer;
  padding:2px 7px; margin:1px 3px 1px 0; border-radius:20px;
  background:var(--bg); color:var(--neutraal);
  border:1px solid var(--lijn); transition:all .12s ease;
}
.rol-badge:hover{border-color:var(--staal); color:var(--ink)}
.rol-badge.is-aan{background:rgba(31,149,153,.12); color:var(--staal-donker); border-color:rgba(31,149,153,.45)}
.rol-badge.is-aan[data-rol="omstel"]{background:rgba(87,194,214,.12); color:#1A6D7A; border-color:rgba(87,194,214,.45)}
.rol-badge:focus-visible{outline:2px solid var(--ink); outline-offset:1px}

/* status: dit onderdeel doet alleen de omstelling */
.sam-status.is-omsteller{color:#1A6D7A}

/* markering in het Gantt-rijlabel */

/* uitgeschakelde rolvinkjes (materiaal) */
.checkbox-label.is-uit{opacity:.45; cursor:not-allowed}
.checkbox-label.is-uit input{cursor:not-allowed}

/* ---------- stap 3b-1: kalenders ---------- */

/* werkdagen-kiezer in het bibliotheek-formulier */
.dagen-kiezer{display:flex; gap:2px; padding-top:2px}
.dagen-kiezer label{
  flex-direction:row !important; margin:0; cursor:pointer; position:relative;
}
.dagen-kiezer input{position:absolute; opacity:0; width:0; height:0; min-width:0}
.dagen-kiezer span{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:30px; font-size:11px; font-weight:600;
  border:1px solid var(--lijn); border-radius:6px; background:#FBFCFD;
  color:var(--neutraal); transition:all .1s ease; user-select:none;
}
.dagen-kiezer label:hover span{border-color:var(--staal)}
.dagen-kiezer input:checked + span{background:var(--staal); color:#fff; border-color:var(--staal)}
.dagen-kiezer input:focus-visible + span{outline:2px solid var(--ink); outline-offset:1px}

/* kalendertekst onder de beschikbaarheid in de bibliotheektabel */
.kal-tekst{font-size:11px; color:var(--ink-zacht); font-weight:400}

/* niet-beschikbare uren op een onderdeelrij: nachten, weekends, pauzes */
.gantt-niet-beschikbaar{
  /* z-index 3: bóven het dagraster (dat na deze blokken in het DOM kan komen en
     de hover anders opslokt), maar ONDER de bezettingsbalken — een balk moet
     altijd zijn eigen popup houden. Zonder dit werkte de hover "soms wel, soms
     niet", afhankelijk van de teken-volgorde van de rij. */
  position:absolute; top:0; bottom:0; pointer-events:auto; z-index:3;
  background:repeating-linear-gradient(45deg,
    rgba(152,162,176,.13) 0 3px, transparent 3px 7px);
}
.gantt-niet-beschikbaar.is-verlof{
  background:repeating-linear-gradient(45deg,
    rgba(193,18,31,.13) 0 3px, transparent 3px 7px);
}
/* Stilstand van een machine: gepland onderhoud is groen, een defect/reparatie
   rood. Dichtere arcering dan een nacht/pauze, zodat het gat opvalt als iets
   dat IETS BETEKENT in plaats van gewoon 'buiten werktijd'. */
.gantt-niet-beschikbaar.is-onderhoud{
  background:repeating-linear-gradient(45deg,
    rgba(45,106,79,.30) 0 4px, rgba(45,106,79,.09) 4px 8px);
}
.gantt-niet-beschikbaar.is-stilstand{
  background:repeating-linear-gradient(45deg,
    rgba(193,18,31,.32) 0 4px, rgba(193,18,31,.10) 4px 8px);
}
/* AFGELEID gat: dit middel is zelf niet stuk, maar kan niet werken omdat een
   ander middel in hetzelfde werkcenter stilstaat (de lasser zonder lasapparaat).
   Bewust neutraal grijs en niet rood/groen: de reparatie hoort bij de MACHINE,
   niet bij de mens. Wel dichter gearceerd dan een nacht, want dit is verloren
   capaciteit binnen werktijd. */
.gantt-niet-beschikbaar.is-geenmachine{
  background:repeating-linear-gradient(45deg,
    rgba(90,100,115,.26) 0 4px, rgba(90,100,115,.07) 4px 8px);
}

/* gesegmenteerde onderdeelbalk: ronde hoeken alleen aan de buitenkanten,
   zodat je ziet dat het werk doorloopt na de onderbreking */
.gantt-onderdeelbalk.is-deel{border-radius:0}
.gantt-onderdeelbalk.is-deel.is-eerste{border-radius:4px 0 0 4px}
.gantt-onderdeelbalk.is-deel.is-laatste{border-radius:0 4px 4px 0}
.gantt-onderdeelbalk.is-deel.is-eerste.is-laatste{border-radius:4px}

/* conflict: de scheduler plande dit blok buiten de kalender van de resource.
   Zwijgend weglaten zou de planner misleiden — daarom zichtbaar markeren. */
.gantt-onderdeel-omstel.is-buiten-kalender,
.gantt-onderdeelbalk.is-buiten-kalender{
  background:repeating-linear-gradient(45deg,
    rgba(193,18,31,.32) 0 3px, rgba(193,18,31,.08) 3px 7px) !important;
  border:1.5px dashed var(--laat) !important;
  opacity:1;
}

/* de interne constraint van een werkcenter: lichtrood gekleurde onderdeelrij.
   Bewust geen badge in het label — dat zou het label verbreden en het spoor
   naar rechts schuiven, waardoor de balken niet meer op de tijdas uitlijnen. */
.gantt-rij.is-onderdeel.is-constraint{background:rgba(193,18,31,.055)}
.gantt-rij.is-onderdeel.is-constraint .gantt-rijlabel{background:rgba(193,18,31,.075)}
.gantt-rij.is-onderdeel.is-constraint .gantt-rijnaam{color:var(--laat); font-weight:600}
/* tijdens hover blijft de constraint herkenbaar rood, niet blauw */
.gantt-rij.is-onderdeel.is-constraint.is-wc-hover{background:rgba(193,18,31,.10)}
.gantt-rij.is-onderdeel.is-constraint.is-wc-hover .gantt-rijlabel{background:rgba(193,18,31,.13)}

/* labelkop mag nooit uitzetten: naam kort af met ellipsis */
.gantt-labelkop{min-width:0; overflow:hidden}
.gantt-rijlabel small{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- pauze-editor: expliciete van–tot tijden ---------- */
.pauze-veld{min-width:230px}
.pauze-editor{display:flex; flex-direction:column; gap:4px; padding-top:2px}
.pauze-editor:empty{display:none}
.pauze-rij{display:flex; align-items:center; gap:4px}
.pauze-rij input[type="time"]{
  width:86px; min-width:0; padding:4px 6px; font-size:12.5px;
  border:1px solid var(--lijn); border-radius:6px; background:#FBFCFD; color:var(--ink);
}
.pauze-rij input[type="time"]:focus{border-color:var(--staal); outline:none}
.pauze-tot{color:var(--neutraal); font-size:12px}
.pauze-weg{
  flex:0 0 auto; width:22px; height:22px; padding:0; line-height:1; cursor:pointer;
  border:1px solid var(--lijn); border-radius:5px; background:var(--surface);
  color:var(--neutraal); font-size:11px;
  display:inline-flex; align-items:center; justify-content:center;
}
.pauze-weg:hover{background:rgba(193,18,31,.08); color:var(--laat); border-color:rgba(193,18,31,.35)}
.knop-mini{
  align-self:flex-start; margin-top:4px; padding:3px 9px; font-size:11.5px; font-weight:600;
  border:1px solid var(--lijn); border-radius:6px; background:var(--bg);
  color:var(--ink-zacht); cursor:pointer;
}
.knop-mini:hover{border-color:var(--staal); color:var(--ink); background:var(--surface)}

/* volgorde-optimalisatie: klikbare info in de planstatistiek */
.opt-info{
  cursor:help; border-bottom:1px dotted var(--neutraal); padding-bottom:1px;
}
.opt-info:hover{border-bottom-color:var(--staal)}

/* Overtijd: een werkorder die in overuren aan het einde van de dag is
   afgemaakt in plaats van doorgeschoven naar de volgende dag. Een klein
   gearceerd staartje rechts markeert dat visueel. */
.gantt-balk.heeft-overtijd { position: relative; }
.gantt-balk.heeft-overtijd::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.55) 0 2px,
    rgba(255,255,255,0) 2px 4px
  );
}

/* ============ Reken-indicator: SVG-zandloper naast de i-knop ============ */
.reken-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--staal, #2E5570);
  vertical-align: middle;
  animation: reken-infade 0.2s ease;
}
@keyframes reken-infade { from { opacity: 0; } to { opacity: 1; } }

.zandloper {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  color: var(--staal, #2E5570);
  animation: zl-kantel 1.8s cubic-bezier(.65,0,.35,1) infinite;
  transform-origin: 50% 50%;
}
.zandloper .zl-frame {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.zandloper .zl-glas {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.65;
}
.zandloper .zl-zand-boven,
.zandloper .zl-zand-onder {
  fill: currentColor;
}
/* het zand loopt leeg (boven krimpt) en vult (onder groeit) per kanteling */
.zandloper .zl-zand-boven { animation: zl-leeg 1.8s ease-in-out infinite; transform-origin: 12px 5px; }
.zandloper .zl-zand-onder { animation: zl-vul  1.8s ease-in-out infinite; transform-origin: 12px 19px; }

@keyframes zl-kantel {
  0%, 42%   { transform: rotate(0deg); }
  50%, 92%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}
@keyframes zl-leeg {
  0%   { transform: scaleY(1); }
  42%  { transform: scaleY(0.15); }
  50%  { transform: scaleY(1); }      /* na kantel weer vol (is nu onder) */
  100% { transform: scaleY(1); }
}
@keyframes zl-vul {
  0%   { transform: scaleY(0.2); }
  42%  { transform: scaleY(1); }
  50%  { transform: scaleY(0.2); }
  100% { transform: scaleY(0.2); }
}
.reken-tekst { opacity: 0.85; }

.reken-klaar {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  font-size: 0.58em;
  font-weight: 600;
  color: var(--groen, #2E7D4F);
  vertical-align: middle;
  animation: reken-infade 0.25s ease;
}
.reken-klaar::before { content: "✓"; margin-right: 5px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .zandloper { animation-duration: 3.6s; }
  .zandloper .zl-zand-boven, .zandloper .zl-zand-onder { animation: none; }
}

/* Rondleiding-keuzelijst: ziet eruit als een knop, gedraagt zich als een menu */
.rondleiding-kies{
  font:600 13px "Archivo",sans-serif; cursor:pointer;
  padding:8px 12px; border-radius:8px; border:1px solid var(--lijn);
  background:var(--surface); color:var(--ink);
}
.rondleiding-kies:hover{border-color:var(--staal); background:#F4F8FB}

/* ---------------- Uitlegpaneel van de rondleiding ----------------
   Blijft zichtbaar naast de Gantt (en over tabs heen, want het staat los van de
   schermen), is te verslepen aan de kop en te sluiten met het kruisje. */
.demo-uitleg{
  position:fixed; top:80px; right:22px; z-index:70; width:390px; max-width:calc(100vw - 32px);
  max-height:78vh; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--staal);
  border-radius:12px; box-shadow:0 12px 34px rgba(10,22,24,.22);
}
/* zodra de gebruiker hem versleept, sturen left/top de positie (right vervalt) */
.demo-uitleg.is-versleept{right:auto}
.demo-uitleg-kop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; background:var(--staal-donker); color:#fff;
  border-radius:11px 11px 0 0; cursor:grab; user-select:none;
}
.demo-uitleg-kop:active{cursor:grabbing}
.demo-uitleg-titel{font:800 13px "Archivo",sans-serif; letter-spacing:.01em}
.demo-uitleg-sluit{
  background:none; border:none; color:#fff; cursor:pointer; font-size:19px;
  line-height:1; padding:0 2px; opacity:.85;
}
.demo-uitleg-sluit:hover{opacity:1}
.demo-uitleg-tekst{
  padding:11px 13px 13px; overflow-y:auto; font-size:12.5px; line-height:1.5; color:var(--ink);
}
.demo-uitleg-tekst p{margin:0 0 9px}
.demo-uitleg-tekst p:last-child{margin-bottom:0}
/* accenten in het uitlegpaneel: de instructies en waarschuwingen springen eruit */
.demo-uitleg-tekst p.is-toegevoegd{
  font-weight:600; color:var(--staal-donker);
  background:rgba(26,131,136,.07); border-left:3px solid var(--staal);
  padding:7px 9px; border-radius:0 6px 6px 0;
}
.demo-uitleg-tekst p.is-stappen{
  background:rgba(44,177,150,.09); border-left:3px solid var(--b2g-emerald);
  padding:8px 10px; border-radius:0 6px 6px 0; line-height:1.6;
}
.demo-uitleg-tekst p.is-letop{
  background:rgba(179,55,43,.07); border-left:3px solid #B3372B; color:#8E2C22;
  padding:7px 9px; border-radius:0 6px 6px 0;
}