:root{
  --blauw:#003671;--blauw2:#18223B;--blauw3:#005099;--blauw-soft:#e3ebf3;
  --geel:#C3C000;--geel2:#D6D333;--logo-bg:#B7BE19;
  --wit:#ffffff;--bg:#f2f4f7;
  --t1:#18223B;--t2:#526169;--t3:#8a929c;
  --rand:rgba(0,54,113,.12);
  --groen:#2e7d32;--groen-bg:#e8f4ea;
  --oranje:#8a5200;--oranje-bg:#fdf2e0;
  --rood:#8a1a1a;--rood-bg:#fde8e8;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Barlow',system-ui,sans-serif;background:var(--bg);color:var(--t1);overflow-x:hidden}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
.cond{font-family:'Barlow Condensed',sans-serif}

/* LOGIN */
#scherm-login{position:fixed;inset:0;z-index:1000;background:var(--blauw2);display:flex;align-items:center;justify-content:center}
#scherm-login::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-50deg,transparent,transparent 48px,rgba(255,255,255,.016) 48px,rgba(255,255,255,.016) 49px)}
.login-box{position:relative;z-index:1;background:#fff;border-radius:14px;padding:2.5rem;width:400px;max-width:94vw;box-shadow:0 32px 80px rgba(10,25,60,.45)}
.login-logo{padding-bottom:1.4rem;margin-bottom:1.6rem;border-bottom:3px solid var(--geel2);display:flex;justify-content:center}
.login-logo-img{max-width:240px;height:auto;display:block;border-radius:6px}
.login-logo-blok{width:50px;height:50px;background:var(--geel2);border-radius:10px;display:flex;align-items:center;justify-content:center}
.login-logo-txt .r1{font-size:13px;color:var(--blauw2);display:block;line-height:1.1}
.login-logo-txt .r2{font-size:23px;font-weight:900;color:var(--blauw2);display:block;line-height:1;font-family:'Barlow Condensed',sans-serif}
.login-h{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900;color:var(--blauw)}
.login-sub{font-size:12px;color:var(--t3);margin-bottom:1.4rem}
.l-fg{display:flex;flex-direction:column;gap:4px;margin-bottom:.85rem}
.l-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3)}
.l-inp{padding:10px 13px;border:1.5px solid var(--rand);border-radius:7px;font-size:14px;width:100%}
.l-inp:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(26,58,107,.1)}
.l-err{font-size:11px;color:#c43030;margin-bottom:.85rem;padding:8px 12px;background:#fde8e8;border-radius:6px;display:none}
.l-btn{width:100%;padding:12px;background:var(--blauw);color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:.85rem}
.l-btn:hover{background:var(--blauw2)}
.l-or{display:flex;align-items:center;gap:.75rem;margin:.7rem 0}
.l-or::before,.l-or::after{content:'';flex:1;height:1px;background:var(--rand)}
.l-or span{font-size:10px;color:var(--t3)}
.l-ms{width:100%;padding:10px;background:#fff;color:#444;border:1.5px solid var(--rand);border-radius:7px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.l-ms:hover{border-color:#0078d4;color:#0078d4}


#app{display:none}

/* NAV */
.nav{position:sticky;top:0;z-index:600;background:var(--blauw2);height:62px;display:flex;align-items:stretch;box-shadow:0 2px 16px rgba(20,46,88,.25);border-bottom:3px solid var(--logo-bg)}
.nav-logo{background:var(--logo-bg);width:138px;display:flex;align-items:center;justify-content:center;padding:6px 10px}
.nav-logo-img{height:48px;width:auto;display:block}
.nav-logo-txt{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:900;color:var(--blauw2);line-height:1.1}
.nav-logo-txt b{font-size:21px;display:block}
.nav-midden{flex:1;display:flex;align-items:center;padding:0 1.4rem;gap:.7rem}
.nav-bar{display:inline-block;width:1px;height:26px;background:rgba(255,255,255,.18);border-radius:2px;margin:0 .35rem;flex-shrink:0}
.nav-home-stam{margin-left:0}
.nav-rechts{display:flex;align-items:center;padding:0 1.2rem;border-left:1px solid rgba(255,255,255,.14);position:relative}
.proj-wrap{position:relative}
.proj-knop{display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:6px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);max-width:360px}
.proj-knop:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.14)}
.proj-nr{font-size:10px;font-weight:700;background:var(--geel);color:var(--blauw2);padding:2px 8px;border-radius:3px;white-space:nowrap}
.proj-naam{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.proj-dd{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1.5px solid var(--rand);border-radius:10px;box-shadow:0 8px 32px rgba(26,58,107,.16);min-width:380px;max-height:460px;overflow:hidden;display:none;flex-direction:column;z-index:700}
.proj-dd.open{display:flex}
.pd-zoek-wrap{padding:.7rem 1rem;border-bottom:1px solid var(--rand)}
.pd-zoek{width:100%;padding:7px 10px;border:1.5px solid var(--rand);border-radius:6px;font-size:13px}
.pd-zoek:focus{outline:none;border-color:var(--blauw)}
.pd-lijst{overflow-y:auto}
.pd-item{display:flex;align-items:center;gap:10px;padding:.6rem 1rem;cursor:pointer;border-bottom:.5px solid var(--rand)}
.pd-item:hover,.pd-item.actief{background:#f0f4ff}
.pd-item-nr{font-size:10px;font-weight:700;background:var(--blauw);color:#fff;padding:2px 8px;border-radius:3px}
.pd-item.actief .pd-item-nr{background:var(--geel);color:var(--blauw2)}
.pd-item-naam{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-item-meta{font-size:10px;color:var(--t3);margin-top:1px}
.pd-footer{padding:.6rem 1rem;border-top:1px solid var(--rand);background:#fafafa}
.user-knop{display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:6px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
.user-knop:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.14)}
.u-av{width:28px;height:28px;border-radius:50%;background:var(--geel);color:var(--blauw2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.u-naam{font-size:12px;font-weight:600;color:#fff}
.user-menu{position:absolute;top:calc(100% + 6px);right:1.2rem;background:#fff;border:1.5px solid var(--rand);border-radius:10px;box-shadow:0 8px 32px rgba(26,58,107,.16);min-width:210px;z-index:700;display:none}
.user-menu.open{display:block}
.um-header{padding:.85rem 1rem;border-bottom:1px solid var(--rand)}
.um-naam{font-size:13px;font-weight:700;color:var(--blauw)}
.um-rol{font-size:10px;color:var(--t3);margin-top:2px}
.um-item{display:flex;align-items:center;gap:8px;padding:.6rem 1rem;font-size:12px;font-weight:500;color:var(--t2)}
.um-item:hover{background:#f5f7ff}
.um-uitlog{color:#c43030}

/* PROJECTKOP */
.proj-kop{background:var(--blauw2);padding:14px 2rem;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pk-nr{background:#fff;color:var(--blauw);font-weight:800;font-size:13px;padding:3px 10px;border-radius:4px;border:1px solid rgba(255,255,255,.25)}
.pk-mid{flex:1;min-width:180px}
.pk-naam{color:#fff;font-size:15px;font-weight:600}
.pk-meta{color:rgba(255,255,255,.55);font-size:12px;margin-top:2px}
.pk-asbest{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;display:flex;align-items:center;gap:5px}
.pk-asbest.ja{background:rgba(220,120,120,.2);color:#f0b4b4}
.pk-asbest.nee{background:rgba(120,200,150,.18);color:#9fd8b8}
.pk-pct{text-align:right}
.pk-pct b{color:var(--geel);font-size:22px;font-weight:800;display:block;line-height:1}
.pk-pct span{color:rgba(255,255,255,.45);font-size:11px}

/* HOOFD */
.hoofd{max-width:1180px;margin:0 auto;padding:1.5rem 2rem 4rem}
.rol-bar{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.rol-av{width:34px;height:34px;border-radius:50%;background:var(--blauw);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.rol-h{font-size:16px;font-weight:700}
.rol-sub{font-size:12px;color:var(--t3)}
.rol-actie{margin-left:auto}

/* tools-grid is nu een verticale container van fase-blokken;
   binnen elk fase-blok zit de echte tegels-grid (.fase-tegels).
   De .rivier eronder is een verticale lijn die door alle blokken
   loopt — visuele 'productielijn' van het project. */
.tools-grid{display:flex;flex-direction:column;gap:1.4rem;position:relative;padding-left:54px}

/* Rivier: één doorlopende verticale lijn links, met ankerbollen per fase.
   Onderdelen worden door JS in elk fase-blok geprikt (.fase-anker), de lijn
   zelf is een pseudo-element op de tools-grid zodat hij doorloopt zonder
   gaten tussen de blokken. */
.tools-grid::before{
  content:'';position:absolute;left:23px;top:10px;bottom:36px;width:2px;
  background:#e2e7ee;
  border-radius:2px;z-index:0}
.tools-grid.heeft-actief::before{
  /* Tot aan de huidige fase invullen met blauw, daarna grijs.
     --rivier-pct wordt door JS gezet op basis van faseIdx. */
  background:linear-gradient(180deg,var(--blauw) 0%,var(--blauw) var(--rivier-pct,0%),#dde3ec var(--rivier-pct,0%),#dde3ec 100%)}

/* Ankerbol per fase — gepositioneerd absoluut links van het fase-blok */
.fase-anker{position:absolute;left:-42px;top:14px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;z-index:2}
.fase-anker .fa-bol{width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:3px solid #d0d8e2;transition:all .25s;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}
.fase-blok.af .fase-anker .fa-bol{background:var(--fk,var(--blauw));border-color:var(--fk,var(--blauw))}
.fase-blok.af .fase-anker .fa-bol::before{content:'\ea5e';font-family:'tabler-icons';font-weight:400}
.fase-blok.huidig .fase-anker{left:-58px;top:2px;width:64px;height:64px}
.fase-blok.huidig .fase-anker .fa-bol{display:none}
.fase-blok.huidig .fase-anker .fa-kraan{display:block}
.fase-anker .fa-kraan{display:none;filter:drop-shadow(0 3px 9px rgba(26,58,107,.28))}

.fase-blok{background:transparent;border:none;border-radius:0;padding:0;position:relative;margin-bottom:1.1rem;box-shadow:none}
.fase-blok.af{opacity:.92}
.fase-blok.af:hover{opacity:1;transition:opacity .2s}
.fase-bed{background:var(--fbed,#eef1f5);border-radius:14px;padding:14px 16px 16px}
.fase-kop{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem;padding:0 2px .6rem;border-bottom:1.5px solid rgba(0,0,0,.1);position:relative}
.fase-blok.huidig .fase-kop{border-bottom-color:var(--geel)}
.fase-nr{font-size:11px;font-weight:600;color:#fff;background:var(--fk,#003671);padding:3px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;font-family:'Barlow Condensed',sans-serif}
.fase-blok.huidig .fase-nr{background:var(--geel);color:var(--blauw2)}
.fase-tekst{flex:1;min-width:0}
.fase-titel{font-size:16px;font-weight:800;color:var(--ftitel,var(--blauw));display:flex;align-items:center;gap:.6rem;font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.fase-huidig{font-size:9.5px;font-weight:700;color:var(--blauw2);background:var(--geel);padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;font-family:'Barlow',sans-serif}
.fase-af-lbl{font-size:9.5px;font-weight:700;color:var(--ftitel,#8a92a0);background:rgba(255,255,255,.55);padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;font-family:'Barlow',sans-serif}
.fase-sub{font-size:11.5px;color:var(--ftitel,var(--t3));opacity:.72;margin-top:3px}
.fase-tel{font-size:10px;font-weight:700;color:var(--ftitel,var(--t3));opacity:.65;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.fase-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}

.tool-kaart{background:var(--wit);border:1px solid rgba(26,58,107,.08);border-radius:12px;padding:1.25rem 1.3rem;cursor:pointer;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column;gap:.35rem;position:relative;overflow:hidden;min-height:158px;box-shadow:0 4px 14px rgba(26,58,107,.09),0 1px 3px rgba(26,58,107,.05)}
.tool-kaart::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--fk,var(--blauw));transform:scaleX(0);transform-origin:left;transition:transform .2s}
.tool-kaart:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(26,58,107,.15)}
.tool-kaart:hover::before{transform:scaleX(1)}
/* Projectmap-banner \u2014 dwarsdoorsnede over alle fasen, eigen plek bovenaan */
.pmap-banner{
  background:#fff;border:1.5px solid var(--blauw);border-left:5px solid var(--blauw);
  border-radius:10px;padding:14px 18px;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:14px}
.pmb-icoon{width:42px;height:42px;border-radius:9px;background:#e9eff6;color:var(--blauw);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.pmb-tekst{flex:1;min-width:0}
.pmb-titel{font-size:14px;font-weight:800;color:var(--blauw);font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em;text-transform:uppercase}
.pmb-sub{font-size:12px;color:var(--t2);margin-top:2px;font-weight:600}
.pmb-uitleg{font-size:11px;color:var(--t3);margin-top:4px;line-height:1.5}
.pmb-knop{flex-shrink:0}

/* Project-dashboard \u2014 compact overzicht per fase */
.proj-dashboard{background:#fff;border:1.5px solid var(--rand);border-radius:10px;overflow:hidden}
.pdb-kop{padding:11px 16px;background:#f6f8fb;font-size:13px;font-weight:800;color:var(--t1);
  border-bottom:1px solid var(--rand);font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.pdb-kop i{color:var(--blauw)}
.pdb-kop-sub{font-size:10px;font-weight:500;color:var(--t3);text-transform:none;letter-spacing:0;margin-left:6px}
.pdb-tabel{width:100%;border-collapse:collapse}
.pdb-tabel td{padding:9px 12px;border-bottom:1px solid var(--rand);font-size:12px;vertical-align:middle}
.pdb-tabel tr:last-child td{border-bottom:none}
.pdb-nr{width:28px;text-align:center;color:#fff;font-weight:900;font-family:'Barlow Condensed',sans-serif;font-size:13px}
.pdb-titel{font-weight:700;width:170px;color:var(--t1)}
.pdb-content{color:var(--t2);line-height:1.5}
.pdb-voet{padding:10px 14px;border-top:1px solid var(--rand);font-size:11px;color:var(--t3);background:#fafbfd}
.pdb-voet i{color:var(--geel);margin-right:5px}

/* Mini-samenvatting op tegel */
.tk-mini{font-size:11px;font-weight:700;color:var(--t1);background:#f6f8fb;padding:5px 8px;border-radius:5px;line-height:1.4;margin-top:2px}

/* Demo-tegel: lichtere achtergrond voor mini */
.tool-kaart.demo .tk-mini{background:#fafbfd;color:var(--t2)}

/* Documentenlijst-modal (pmapBekijken) */
.pmap-doc-modal{background:#fff;border-radius:12px;width:min(720px,100%);
  max-height:calc(100vh - 120px);display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
.pdm-kop{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--rand);background:#f6f8fb;gap:12px}
.pdm-code{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;
  color:var(--blauw);letter-spacing:.01em;text-transform:uppercase}
.pdm-sub{font-size:12px;color:var(--t2);margin-top:2px}
.pdm-lijst{overflow-y:auto;flex:1;padding:8px}
.pdm-voet{padding:10px 20px;background:#fafbfd;font-size:11px;color:var(--t3);
  border-top:1px solid var(--rand)}
.pdo-rij{display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:8px;cursor:pointer;transition:background .12s;border:1px solid transparent}
.pdo-rij:hover{background:#f0f4fa;border-color:var(--blauw)}
.pdo-ico{width:34px;height:34px;background:#e9eff6;color:var(--blauw);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pdo-tekst{flex:1;min-width:0}
.pdo-naam{font-weight:600;font-size:13px;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdo-meta{font-size:11px;color:var(--t3);margin-top:2px}
.pdo-knop{background:#fff;border:1px solid var(--rand);border-radius:6px;
  padding:6px 9px;cursor:pointer;color:var(--blauw);font-size:14px;flex-shrink:0}
.pdo-knop:hover{background:var(--blauw);color:#fff;border-color:var(--blauw)}
.pdo-knop.pdo-del:hover{background:#a8202a;border-color:#a8202a}
.tool-kaart.uit{background:#f6f8fb;opacity:.7;cursor:default}
.tool-kaart.uit:hover{transform:none;box-shadow:0 1px 3px rgba(26,58,107,.07)}
.tool-kaart.uit:hover::before{transform:scaleX(0)}
.tool-kaart.uit .tk-ico,.tool-kaart.demo .tk-ico,.tool-kaart.park .tk-ico{background:#eef1f5;color:#9aa0ac}
.tool-kaart.demo{opacity:.78}
.tool-kaart.demo:hover{opacity:1}
.tool-kaart .tk-slot{position:absolute;top:10px;right:10px;font-size:13px;color:var(--t3)}
.tk-kop{display:flex;align-items:center;gap:.6rem;margin-bottom:.15rem}
.tk-ico{font-size:20px;color:var(--fk,var(--blauw));flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--ftint,#e9eff6);border-radius:9px}
.tk-ico i{display:block}
.tk-titel{font-size:14.5px;font-weight:800;line-height:1.2;color:var(--t1)}
.tk-sub{font-size:11.5px;color:#9aa0ac;line-height:1.4}
.tk-data{font-size:12px;font-weight:600;color:var(--t2);line-height:1.4;margin-top:.15rem}
.tk-data-leeg{font-weight:500;color:#b3b8c2}
.tk-voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:.65rem}
.tk-status{font-size:10px;font-weight:700;padding:3px 10px 3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.03em}
.tk-stip{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.tk-open{font-size:11px;font-weight:700;color:var(--fk,var(--blauw));display:inline-flex;align-items:center;gap:4px;white-space:nowrap;opacity:.55;transition:opacity .18s}
.tool-kaart:hover .tk-open{opacity:1}
.tk-open i{font-size:14px}
.st-klaar{background:var(--groen-bg);color:var(--groen)}
.st-bezig{background:var(--oranje-bg);color:var(--oranje)}
.st-open{background:var(--ftint,#e9eff6);color:var(--fk,var(--blauw))}
.st-soon{background:#eef0f4;color:var(--t3)}

/* DEMO-modus: watermerk diagonaal + duidelijke uitleg-balk bovenaan.
   Demo-schermen zijn schermafdrukken van toekomstige modules \u2014 ze
   tonen hoe de tool eruit gaat zien, maar slaan niets op en doen niets. */
.demo-uitleg{
  background:linear-gradient(90deg,#fff4d6 0%,#fef9e5 100%);
  border:1px solid #e8d585;border-radius:8px;
  padding:12px 16px;margin-bottom:1rem;
  font-size:12px;color:#7a5a00;
  display:flex;align-items:center;gap:10px}
.demo-uitleg i{font-size:18px;color:var(--geel)}
.demo-uitleg b{color:#5a4400}

.demo-host{position:relative;overflow:hidden}
.demo-host::after{
  content:'DEMO';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-28deg);
  font-family:'Barlow Condensed',sans-serif;
  font-size:14rem;font-weight:900;
  color:rgba(60,80,120,.07);
  letter-spacing:.15em;
  pointer-events:none;
  z-index:1;
  white-space:nowrap}
.demo-host > *{position:relative;z-index:2}

/* Demo-inputs: niet-bewerkbaar maar wel zichtbaar gevuld */
.demo-host input,.demo-host select,.demo-host textarea{
  background:#fafbfd;color:var(--t2);cursor:not-allowed}
.demo-host .btn{cursor:not-allowed;opacity:.85}

.keten-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:1.6rem 0 .6rem}
.keten{display:flex;gap:6px;flex-wrap:wrap}
.kt{flex:1;min-width:96px;background:#fff;border:1.5px solid var(--rand);border-radius:8px;padding:9px 8px;text-align:center;cursor:pointer;transition:border-color .15s}
.kt:hover{border-color:var(--blauw)}
.kt i{font-size:17px;color:var(--t3)}
.kt-naam{font-size:10px;color:var(--t2);margin-top:4px;line-height:1.3}
.kt-bar{height:3px;border-radius:2px;margin-top:6px;background:var(--rand)}
.kt-bar.klaar{background:var(--groen)}
.kt-bar.bezig{background:var(--geel)}

/* TOOL-SCHERM */
#scherm-tool{display:none}
#scherm-hoofd{display:none}
.tool-top{background:var(--blauw2);padding:.95rem 2rem;display:flex;align-items:center;gap:1rem;border-bottom:3px solid var(--logo-bg)}
.tool-terug{display:flex;align-items:center;gap:7px;padding:7px 16px;border-radius:7px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);font-size:12px;font-weight:700;color:#fff}
.tool-terug:hover{background:rgba(255,255,255,.14)}
.tool-naam{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.tool-body{max-width:980px;margin:0 auto;padding:2rem}

/* CALCULATIE */
.calc-sectie{background:#fff;border:1.5px solid var(--rand);border-radius:10px;margin-bottom:1rem;overflow:hidden}
.cs-kop{display:flex;align-items:center;gap:10px;padding:.75rem 1.1rem;background:#f6f8fb;border-bottom:1px solid var(--rand)}
.cs-naam{font-size:13px;font-weight:800;color:var(--blauw)}
.cs-tot{margin-left:auto;font-size:13px;font-weight:800;color:var(--blauw2)}
.cs-add{font-size:11px;font-weight:700;color:var(--blauw);border:1px solid var(--rand);background:#fff;padding:4px 10px;border-radius:5px}
.cs-add:hover{border-color:var(--blauw)}
table.regels{width:100%;border-collapse:collapse}
table.regels th{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--rand)}
table.regels td{padding:4px 6px;border-bottom:.5px solid var(--rand)}
table.regels input,table.regels select{border:1px solid var(--rand);border-radius:5px;padding:6px 7px;font-size:12px;width:100%}
table.regels input:focus,table.regels select:focus{outline:none;border-color:var(--blauw)}
.r-oms{min-width:200px}.r-num{width:78px;text-align:right}.r-eh{width:74px}
.r-tot{font-size:12px;font-weight:700;color:var(--blauw2);text-align:right;white-space:nowrap}
.r-del{color:#c43030;background:none;border:none;font-size:14px;padding:4px}
.staart{background:#fff;border:1.5px solid var(--rand);border-radius:10px;padding:1.1rem;margin-top:1rem}
.staart-rij{display:flex;align-items:center;padding:7px 0;border-bottom:.5px solid var(--rand);font-size:13px}
.staart-rij:last-child{border-bottom:none}
.staart-rij .lbl{color:var(--t2)}
.staart-rij .val{margin-left:auto;font-weight:700;color:var(--blauw2)}
.staart-rij.totaal{font-size:16px;border-top:2px solid var(--blauw);margin-top:6px;padding-top:12px}
.staart-rij.totaal .lbl,.staart-rij.totaal .val{font-weight:900;color:var(--blauw)}
.staart-inp{width:70px;border:1px solid var(--rand);border-radius:5px;padding:4px 6px;font-size:12px;text-align:right;margin:0 8px}

.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;font-size:12px;font-weight:700;border:1.5px solid var(--rand);background:#fff;color:var(--t1)}
.btn:hover{border-color:var(--blauw);color:var(--blauw)}
.btn-b{background:var(--blauw);color:#fff;border-color:var(--blauw)}
.btn-b:hover{background:var(--blauw2);color:#fff;border-color:var(--blauw2)}
.btn-g{background:var(--geel2);color:var(--blauw2);border-color:var(--geel2)}
.btn-g:hover{background:var(--geel);color:var(--blauw2)}
.actie-balk{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--rand)}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(20,46,88,.55);backdrop-filter:blur(4px);z-index:800;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:2rem;width:560px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(26,58,107,.22)}
.modal-h{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:900;color:var(--blauw);margin-bottom:1.2rem}
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:.75rem}
.fl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.fi{padding:8px 11px;border:1.5px solid var(--rand);border-radius:6px;font-size:13px;width:100%}
.fi:focus{outline:none;border-color:var(--blauw)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.modal-btns{display:flex;gap:8px;margin-top:1.2rem}

.leeg{text-align:center;padding:4rem 2rem;color:var(--t3)}
.leeg i{font-size:40px;opacity:.4;display:block;margin-bottom:1rem}
.tag-info{display:flex;align-items:flex-start;gap:8px;padding:.7rem 1rem;border-radius:7px;background:#e9eff6;color:var(--blauw2);font-size:12px;line-height:1.5;margin-bottom:1.2rem;border:1px solid var(--rand)}
.tag-info>i{flex-shrink:0;margin-top:1px}
.tag-info>span{flex:1}
.tag-info i{flex-shrink:0;margin-top:1px}

/* NAV HOME-KNOP */
.nav-home{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:6px;border:none;background:transparent;font-size:12px;font-weight:600;color:rgba(255,255,255,.78);position:relative}
.nav-home:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-home i{font-size:15px}
.nav-home.actief{color:#fff}
.nav-home.actief::after{content:'';position:absolute;left:13px;right:13px;bottom:-2px;height:2px;background:var(--geel);border-radius:2px}

/* HOME */
#scherm-home{display:none}
.hero{background:var(--blauw2);padding:3rem 2rem;position:relative;overflow:hidden;border-bottom:3px solid var(--logo-bg)}
.hero-textuur{position:absolute;top:0;right:0;bottom:0;width:34%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 13px);pointer-events:none}
.hero-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative}
.hero-tag{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--geel);margin-bottom:.45rem;display:flex;align-items:center;gap:9px}
.hero-tag::before{content:'';width:26px;height:3px;background:var(--geel)}
.hero-h{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.7rem,3.2vw,2.2rem);font-weight:900;text-transform:uppercase;color:#fff;line-height:.9;margin:0}
.hero-h span{color:var(--geel)}
.hero-stats{display:flex;align-items:center;gap:1.9rem;flex-shrink:0}
.hs{display:flex;flex-direction:column;align-items:center}
.hs-sep{width:1px;height:44px;background:rgba(255,255,255,.15)}
.hs-n{font-family:'Barlow Condensed',sans-serif;font-size:2.6rem;font-weight:900;color:var(--geel);line-height:1}
.hs-l{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px}
/* WERKOMGEVING — kraan toont fase-voortgang (geen eindeloze animatie) */
.werk-baan{position:relative;background:#dde5ef;border-bottom:1px solid var(--rand);padding:2.1rem 3rem 1.7rem;min-height:96px}
.wf-lijn{position:absolute;left:3rem;right:3rem;top:2.45rem;height:3px;background:var(--rand);border-radius:2px}
.wf-lijn-v{height:100%;background:linear-gradient(to right,var(--blauw3),var(--wf-actief,var(--blauw)));border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.wf-kraan{position:absolute;top:2.45rem;transform:translate(-50%,-62%) scale(.65);transition:left .6s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 6px rgba(0,54,113,.22));pointer-events:none;z-index:2;transform-origin:center}
.wf-stappen{display:flex;justify-content:space-between;position:absolute;left:3rem;right:3rem;top:2.85rem}
.wf-stap{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;flex:1}
.wf-stip{width:9px;height:9px;border-radius:50%;background:var(--rand);border:2px solid var(--wit);box-shadow:0 0 0 1.5px var(--rand)}
.wf-stap.af{color:var(--blauw)}
.wf-stap.af .wf-stip{background:var(--blauw3);box-shadow:0 0 0 1.5px var(--blauw3)}
.wf-stap.nu{color:var(--blauw)}
.wf-stap.nu .wf-stip{background:var(--wf-actief,var(--blauw));box-shadow:0 0 0 2.5px var(--wf-actief-soft,rgba(26,58,107,.18))}

/* OMZET-BANNER — calculatie → project */
.omzet-banner{border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.1rem;border:1.5px solid var(--rand)}
.omzet-banner.wacht{background:#eef3f9;border-color:var(--rand)}
.omzet-banner.kan{background:var(--groen-bg);border-color:#90c8a8}
.ob-t{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:5px}
.omzet-banner.wacht .ob-t{color:var(--blauw2)}
.omzet-banner.kan .ob-t{color:var(--groen)}
.ob-s{font-size:12px;color:var(--t2);line-height:1.6;margin-bottom:.9rem}
/* Twee paden naar 'project aanmaken': offerte akkoord OF stamkaart compleet.
   Compact lijstje boven de actieknop zodat zichtbaar is welk pad open staat. */
.ob-paden{display:flex;flex-direction:column;gap:5px;margin-bottom:.9rem;
  padding:8px 12px;background:rgba(255,255,255,.55);border-radius:7px;
  border:1px solid rgba(0,0,0,.05)}
.ob-pad{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:8px}
.ob-pad i{font-size:14px;width:14px;flex-shrink:0}
.omzet-banner.kan .btn-b{background:var(--groen);border-color:var(--groen)}
.omzet-banner.kan .btn-b:hover{background:#155a30}

/* fase-label op projectkaart en projectkop */
.pl-faselabel{font-size:9px;font-weight:800;padding:3px 9px;border-radius:4px;display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.04em}
.pk-fase{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* vergrendelde tool */
.tk-slot{position:absolute;top:.7rem;right:.7rem;width:22px;height:22px;border-radius:50%;background:var(--rand);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:11px}
.tool-kaart.uit .tk-status.st-soon{background:#eef0f4;color:var(--t3)}

/* Dossier-export banner onderaan projectpagina */
.dossier-export{background:#fff;border:1.5px solid var(--rand);border-left:5px solid var(--blauw);
  border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-top:1.5rem}
.de-icoon{width:42px;height:42px;border-radius:9px;background:#e9eff6;color:var(--blauw);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.de-tekst{flex:1;min-width:0}
.de-titel{font-size:14px;font-weight:800;color:var(--blauw);font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em;text-transform:uppercase}
.de-sub{font-size:12px;color:var(--t2);margin-top:3px;line-height:1.5}

/* Tegel-documenten (per tegel een eigen documentenlijst bovenaan toolscherm) */
.tegel-docs{background:#fff;border:1.5px solid var(--rand);border-radius:10px;
  margin-bottom:1.2rem;overflow:hidden}
.td-kop{display:flex;justify-content:space-between;align-items:center;
  padding:11px 16px;background:#f6f8fb;border-bottom:1px solid var(--rand);gap:10px}
.td-kop-titel{font-size:13px;font-weight:700;color:var(--t1);display:flex;
  align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.02em;text-transform:uppercase}
.td-kop-titel i{color:var(--blauw)}
.td-kop-aantal{background:var(--blauw);color:#fff;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:10px;margin-left:4px}
.td-lijst{padding:6px}
.td-rij{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;
  border:1px solid transparent;transition:background .1s}
.td-rij:hover{background:#f6f8fb;border-color:var(--rand)}
.td-ico{width:30px;height:30px;background:#e9eff6;color:var(--blauw);border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.td-tekst{flex:1;min-width:0}
.td-naam{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-meta{font-size:10px;color:var(--t3);margin-top:2px}
.td-leeg{text-align:center;color:var(--t3);font-size:12px;padding:24px 10px;line-height:1.5}

.home-wrap{max-width:1180px;margin:0 auto;padding:1.75rem 2rem 4rem}
.home-balk{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.home-h{font-size:17px;font-weight:800;color:var(--t1)}
.home-sub{font-size:12px;color:var(--t3);margin-top:1px}
.home-zoek-wrap{margin-left:auto;position:relative;display:flex;align-items:center;flex:1;max-width:380px;min-width:240px}
.home-zoek-wrap i{position:absolute;left:11px;font-size:15px;color:var(--t3)}
.home-zoek-wrap input{padding:9px 13px 9px 34px;border:1.5px solid var(--rand);border-radius:8px;font-size:13px;width:100%}
.home-zoek-wrap input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(0,54,113,.1)}
.home-filters{display:flex;gap:7px;margin-bottom:1rem;flex-wrap:wrap}
.hf{font-size:11px;font-weight:700;padding:6px 13px;border-radius:20px;border:1.5px solid var(--rand);background:#fff;color:var(--t2)}
.hf:hover{border-color:var(--blauw)}
.hf.on{background:var(--blauw);color:#fff;border-color:var(--blauw)}

.proj-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1rem}
.pl-kaart{background:var(--wit);border:1px solid rgba(0,54,113,.08);border-radius:12px;padding:1.1rem 1.2rem;cursor:pointer;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;box-shadow:0 4px 14px rgba(0,54,113,.09),0 1px 3px rgba(0,54,113,.05)}
.pl-kaart::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--fase-c,var(--blauw))}
.pl-kaart:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,54,113,.15)}
.pl-del{position:absolute;top:.7rem;right:.7rem;width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s;z-index:3}
.pl-kaart:hover .pl-del{opacity:1}
.pl-del:hover{background:var(--rood-bg);color:var(--rood)}
.pl-top{display:flex;align-items:flex-start;gap:9px;margin-bottom:.6rem;padding-right:30px}
.pl-nr{font-size:11px;font-weight:800;background:var(--blauw);color:#fff;padding:3px 9px;border-radius:4px;flex-shrink:0}
.pl-asbest{font-size:9px;font-weight:700;padding:3px 9px;border-radius:20px;display:flex;align-items:center;gap:4px;margin-left:auto}
.pl-asbest.ja{background:var(--rood-bg);color:var(--rood)}
.pl-asbest.nee{background:var(--groen-bg);color:var(--groen)}
.pl-disc-rij{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;justify-content:flex-end}
.pl-disc{font-size:9px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pl-disc.asbest{background:var(--rood-bg);color:var(--rood)}
.pl-disc.sloop{background:var(--blauw-soft);color:var(--blauw)}
.pl-disc.bodem{background:#efe7d8;color:#7a5a00}
.pl-faselabel{border-radius:20px !important}
.pl-naam{font-size:15px;font-weight:800;color:var(--t1);line-height:1.3;margin-bottom:.35rem}
.pl-meta{font-size:11px;color:var(--t3);line-height:1.6;margin-bottom:.8rem}
.pl-voet{display:flex;align-items:center;gap:10px;padding-top:.7rem;border-top:1px solid var(--rand)}
.pl-fase{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--fase-bg,#e9eff6);color:var(--fase-c,var(--blauw))}
.pl-prog{flex:1;height:5px;background:var(--rand);border-radius:3px;overflow:hidden}
.pl-prog-v{height:100%;background:var(--blauw3);border-radius:3px}
.pl-pct{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:900;color:var(--blauw);min-width:34px;text-align:right}
.pl-open{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--blauw);margin-top:.7rem}

/* AI-ANALYSE TOOL 1 */
.ctab-bar{display:flex;gap:4px;margin-bottom:1.2rem;border-bottom:2px solid var(--rand)}
.ctab{display:flex;align-items:center;gap:7px;padding:10px 18px;font-size:13px;font-weight:700;color:var(--t3);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px}
.ctab:hover{color:var(--blauw)}
.ctab.on{color:var(--blauw);border-bottom-color:var(--blauw)}
.ctab i{font-size:15px}
.ai-best{display:flex;align-items:center;gap:11px;padding:9px 14px;border-bottom:.5px solid var(--rand)}
.ai-best>i{font-size:20px;color:var(--blauw);flex-shrink:0}
.ai-best-info{flex:1;min-width:0}
.ai-best-naam{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-best-type{font-size:11px;color:var(--t3);margin-top:1px}
.ai-uit{padding:1.2rem 1.4rem;font-size:13px;line-height:1.7;color:var(--t2);max-height:620px;overflow-y:auto}
.ai-uit p{margin:.5rem 0}
.ai-uit .ai-h{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:900;color:var(--blauw);margin:1.4rem 0 .5rem;padding-bottom:4px;border-bottom:2px solid var(--rand)}
.ai-uit .ai-h:first-child{margin-top:0}
.ai-uit .ai-h2{font-size:13px;font-weight:800;color:var(--blauw2);margin:1rem 0 .35rem}
.ai-uit ul{margin:.4rem 0 .7rem;padding-left:1.3rem}
.ai-uit li{margin:.25rem 0}
.ai-uit b{color:var(--t1)}

@media(max-width:720px){
  .hoofd,.tool-body,.home-wrap{padding:1rem}
  .r-oms{min-width:140px}
  .nav-midden{padding:0 .5rem;gap:.5rem}
  .nav-bar{margin:0 .15rem;height:24px;width:2px}
  .nav-home span{display:none}
  .proj-naam{max-width:90px}
  .hero{padding:1rem 1rem}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .hero-stats{gap:1.5rem}
  .home-zoek-wrap{margin-left:0;width:100%}
  .home-zoek-wrap input{width:100%}
  .proj-lijst{grid-template-columns:1fr}
}

/* ──────────────────────────────────────────────────────────────────────────
   GEPARKEERDE TEGEL (status: niet de gangbare werkwijze, maar beschikbaar)
   Visueel: grijzer dan demo (volle verzadiging weg), klikbaar, kleur op
   hover keert terug zodat de werkvoorbereider weet dat hij erin kan.
   ────────────────────────────────────────────────────────────────────────── */
.tool-kaart.park{
  opacity:.55;
  background:#f4f6f9;
  filter:grayscale(.55);
}
.tool-kaart.park:hover{
  opacity:.85;
  filter:grayscale(.2);
  background:#fff;
}
.tool-kaart.park .tk-ico{
  background:#e8eaee;
  color:var(--t3);
}
.tool-kaart.park .tk-titel{color:var(--t2)}
.st-park{background:#e8eaee;color:var(--t2)}

/* ──────────────────────────────────────────────────────────────────────────
   UPLOAD-TEGEL SCHERM (docupload / begroting / offerte)
   ────────────────────────────────────────────────────────────────────────── */
.up-zone{
  background:#fff;border:1.5px dashed var(--blauw);border-radius:12px;
  padding:1.3rem 1.5rem;margin-bottom:1.2rem;
}
.up-zone-h{font-size:16px;font-weight:800;color:var(--blauw);margin-bottom:4px}
.up-zone-sub{font-size:12px;color:var(--t2);margin-bottom:8px;line-height:1.5}
.up-zone-svms{
  font-size:11px;color:#5a4400;background:#fef9e5;border-radius:6px;
  padding:6px 10px;margin-bottom:14px;display:inline-flex;align-items:center;gap:6px
}
.up-zone-svms i{color:var(--geel)}
.up-cat-rij{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.up-cat-rij .fl{margin:0;font-weight:600;color:var(--t2);font-size:13px}
.up-knop-rij{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.up-formaten{font-size:11px;color:var(--t3)}

.up-lijst{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.up-rij{
  background:#fff;border:1px solid var(--rand);border-radius:8px;
  padding:10px 12px;display:flex;align-items:center;gap:12px;
}
.up-rij-oud{opacity:.65;background:#fafbfd}
.up-ico{
  width:36px;height:36px;border-radius:8px;background:#e9eff6;color:var(--blauw);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0
}
.up-tekst{flex:1;min-width:0}
.up-naam{font-size:13px;font-weight:700;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-meta{font-size:11px;color:var(--t3);margin-top:2px}
.up-leeg{
  text-align:center;padding:1.5rem;color:var(--t3);font-size:13px;
  background:#fafbfd;border:1px dashed var(--rand);border-radius:8px;margin-bottom:1rem
}
.up-leeg i{font-size:22px;display:block;margin-bottom:6px}

.up-oud{margin-top:1rem;background:#fafbfd;border-radius:8px;padding:8px 12px}
.up-oud summary{
  cursor:pointer;font-size:12px;color:var(--t2);font-weight:600;
  padding:4px 0;user-select:none
}
.up-oud[open] summary{margin-bottom:8px}

/* Voorstellen-blok onder upload-lijst */
.sg-blok{
  background:#f6f8fb;border:1px solid var(--rand);border-radius:10px;
  padding:14px 16px;margin-top:1.2rem
}
.sg-kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sg-kop i{color:var(--blauw);font-size:16px}
.sg-kop b{color:var(--t1);font-size:13px}
.sg-sub{font-size:11px;color:var(--t3);font-weight:400}
.sg-tabel{display:flex;flex-direction:column;gap:4px}
.sg-rij{
  display:grid;grid-template-columns:1.2fr 1.5fr 1fr .6fr;gap:10px;
  padding:6px 8px;background:#fff;border-radius:6px;font-size:12px;align-items:center
}
.sg-rij.sg-th{
  background:transparent;font-weight:700;color:var(--t3);
  text-transform:uppercase;font-size:10px;letter-spacing:.4px;padding-bottom:2px
}
.sg-veld{font-weight:600;color:var(--t1)}
.sg-waarde{color:var(--t1)}
.sg-bron{color:var(--t3);font-size:11px}
.sg-vert{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;
  text-align:center;text-transform:uppercase;letter-spacing:.3px
}
.sg-hoog{background:var(--groen-bg);color:var(--groen)}
.sg-mid{background:#fff4d6;color:#7a5a00}
.sg-laag{background:#f4e4e4;color:#a33}

/* Afsluit-blok onderaan upload-scherm — geeft de mens een afsluitmoment
   en een duidelijke 'terug naar project'-actie, zodat hij niet via de
   kleine pijl linksboven hoeft te navigeren. */
.up-afsluit{
  margin-top:1.5rem;background:var(--groen-bg);
  border:1.5px solid #90c8a8;border-radius:12px;
  padding:14px 18px;display:flex;align-items:center;gap:16px
}
.up-af-sam{flex:1;display:flex;align-items:flex-start;gap:12px;min-width:0}
.up-af-ico{font-size:26px;color:var(--groen);flex-shrink:0;margin-top:1px}
.up-af-titel{font-size:14px;font-weight:800;color:var(--groen);
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em;
  text-transform:uppercase}
.up-af-sub{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.5}
.btn-klaar{
  background:var(--groen);color:#fff;border:none;font-weight:700;
  padding:10px 18px;font-size:13px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  flex-shrink:0;transition:background .15s
}
.btn-klaar:hover{background:#155a30}
.btn-klaar i{font-size:16px}

/* Mobiel: knop onder de samenvatting i.p.v. ernaast */
@media (max-width:640px){
  .up-afsluit{flex-direction:column;align-items:stretch}
  .btn-klaar{justify-content:center}
}

/* Banner bovenaan elke fase-2 demo-tegel: signaal dat fase 1-uploads
   beschikbaar zijn als bron voor deze module. */
.bron-banner{
  background:linear-gradient(90deg,#e9eff6 0%,#f6f8fb 100%);
  border:1px solid #cad6e8;border-radius:8px;
  padding:10px 14px;margin-bottom:1rem;
  font-size:12px;color:var(--blauw);
  display:flex;align-items:center;gap:10px;line-height:1.5
}
.bron-banner i{font-size:16px;color:var(--blauw);flex-shrink:0}
.bron-banner b{color:var(--blauw)}

/* ──────────────────────────────────────────────────────────────────────────
   UPLOAD-TEGEL — aanvullingen voor één-tegel-werkwijze
   ────────────────────────────────────────────────────────────────────────── */

/* Drop-zone hover (drag-over) */
.up-zone{transition:all .15s ease}
.up-zone.drag{
  background:#e9eff6;border-color:var(--blauw);
  box-shadow:0 0 0 4px rgba(26,58,107,.08)
}
.up-zone-h{display:flex;align-items:center;gap:8px}
.up-zone-h i{font-size:22px;color:var(--blauw)}

/* Gegroepeerde lijst per categorie */
.up-groep{
  background:#fff;border:1px solid var(--rand);border-radius:10px;
  padding:.7rem .9rem;margin-bottom:.8rem
}
.up-groep-kop{
  display:flex;align-items:center;gap:8px;
  padding-bottom:.55rem;margin-bottom:.55rem;
  border-bottom:1px solid var(--rand)
}
.up-groep-kop i{font-size:18px;color:var(--blauw)}
.up-groep-naam{font-weight:700;color:var(--t1);font-size:13px;flex:1}
.up-groep-tel{
  background:#e9eff6;color:var(--blauw);font-weight:700;font-size:11px;
  padding:2px 8px;border-radius:10px
}

/* Onbekend-groep: licht-rode waarschuwing zodat correctie opvalt */
.up-groep-warn{border-color:#e8c4c4;background:#fdf4f4}
.up-groep-warn .up-groep-kop{border-bottom-color:#e8c4c4}
.up-groep-warn .up-groep-kop i{color:#a33}
.up-groep-warn .up-groep-tel{background:#f4dada;color:#a33}

/* Categorie-dropdown per rij — compact, blijft naast knoppen */
.up-cat-sel{
  font-size:12px;padding:5px 8px;border:1px solid var(--rand);
  border-radius:6px;background:#fff;color:var(--t1);max-width:200px;
  cursor:pointer
}
.up-cat-sel:focus{outline:none;border-color:var(--blauw)}

/* Toast rechtsonder voor niet-blokkerende meldingen */
.up-toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--blauw);color:#fff;
  padding:11px 18px;border-radius:8px;
  font-size:13px;font-weight:600;
  box-shadow:0 8px 22px rgba(26,58,107,.25);
  opacity:0;transform:translateY(8px);
  transition:opacity .2s,transform .2s;
  pointer-events:none;z-index:1000;max-width:380px
}
.up-toast.on{opacity:1;transform:translateY(0)}

/* ──────────────────────────────────────────────────────────────────────────
   V&G-PLAN & RI&E TOOL
   ────────────────────────────────────────────────────────────────────────── */

.vg-statusbar{
  position:sticky;top:0;z-index:50;
  background:#fff;border:1px solid var(--rand);border-radius:10px;
  padding:12px 16px;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.vg-stat-titel{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.vg-stat-tellers{display:flex;gap:14px;flex-wrap:wrap}
.vg-stat-tel{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.vg-stat-ok{color:var(--groen)}
.vg-stat-warn{color:#7a5a00}
.vg-stat-fout{color:#a33}
.vg-stat-acties{display:flex;gap:8px}

.vg-doc{display:flex;flex-direction:column;gap:1.4rem}

.vg-sec{
  background:#fff;border:1px solid var(--rand);border-radius:10px;
  padding:1.2rem 1.4rem;
}
.vg-sec-h{
  font-size:14px;font-weight:700;color:var(--blauw);
  margin:0 0 .9rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--rand);
  display:flex;align-items:center;gap:10px
}
.vg-sec-nr{
  background:var(--blauw);color:#fff;
  padding:2px 10px;border-radius:4px;font-size:11px;font-weight:800
}
.vg-sub{
  font-size:12px;font-weight:700;color:var(--t2);
  margin:1rem 0 .5rem;text-transform:uppercase;letter-spacing:.4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.vg-rol-std{
  font-size:10px;font-weight:600;color:var(--blauw);
  background:#e9eff6;padding:2px 7px;border-radius:3px;text-transform:none;letter-spacing:0
}

/* Velden met kleurcodering */
.vg-veld{
  margin-bottom:.65rem;padding:.6rem .8rem;border-radius:6px;
  border-left:3px solid transparent;background:#fafbfd;transition:all .15s
}
.vg-veld.vg-ok    { border-left-color:var(--groen); background:#f4f8ee }
.vg-veld.vg-check { border-left-color:#e0a900;       background:#fffaeb }
.vg-veld.vg-leeg  { border-left-color:#a33;          background:#fdf4f4 }
.vg-veld.vg-opt   { border-left-color:#bbb;          background:#fafbfd }
.vg-veld-lbl{
  display:block;font-size:12px;font-weight:600;color:var(--t2);
  margin-bottom:4px
}
.vg-req{color:#a33;font-weight:700}
.vg-inp{
  width:100%;padding:6px 10px;
  border:1px solid var(--rand);border-radius:5px;
  font-size:13px;font-family:inherit;color:var(--t1);
  background:#fff;box-sizing:border-box
}
.vg-inp:focus{outline:none;border-color:var(--blauw)}
textarea.vg-inp{resize:vertical;min-height:60px}
select.vg-inp{cursor:pointer}
.vg-veld-bron{font-size:10px;color:var(--t3);margin-top:3px;font-style:italic}
.vg-veld.vg-check .vg-veld-bron{color:#7a5a00;font-weight:600;font-style:normal}
.vg-veld.vg-leeg .vg-veld-bron{color:#a33;font-weight:600;font-style:normal}

.vg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.vg-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
@media (max-width:680px){
  .vg-grid-2,.vg-grid-3{grid-template-columns:1fr}
}

/* Standaardtekst-uitklap */
.vg-vast{
  background:#fafbfd;border:1px solid var(--rand);border-radius:6px;
  margin:.5rem 0;padding:0
}
.vg-vast summary{
  cursor:pointer;padding:8px 12px;font-size:12px;
  color:var(--t2);font-weight:600;user-select:none;
  display:flex;align-items:center;gap:8px
}
.vg-vast summary i{color:var(--t3)}
.vg-vast[open] summary{border-bottom:1px solid var(--rand)}
.vg-vast-tekst{
  padding:10px 14px;font-size:12px;color:var(--t2);
  line-height:1.6;max-height:300px;overflow-y:auto
}
.vg-vast-tekst p{margin:6px 0}

.vg-info-mini{
  font-size:11px;color:var(--t3);background:#fafbfd;
  padding:6px 10px;border-radius:5px;margin:6px 0;line-height:1.5
}
.vg-pill{
  background:#fef9e5;color:#7a5a00;padding:1px 7px;
  border-radius:3px;font-size:10px;font-weight:700
}
.vg-pill-mut{
  background:#eaeaea;color:var(--t3);padding:1px 7px;
  border-radius:3px;font-size:10px;font-weight:600
}

/* Sloopstappen */
.vg-stap-rij{
  background:#fafbfd;border:1px solid var(--rand);border-radius:6px;
  padding:.6rem .8rem;margin-bottom:.4rem
}
.vg-check{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.vg-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--blauw);cursor:pointer}
.vg-stap-titel{font-size:13px;font-weight:600;color:var(--t1)}
.vg-stap-tekst{font-size:11px;color:var(--t3);margin-top:4px;margin-left:24px;line-height:1.5}

/* Tabellen */
.vg-tbl{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:12px}
.vg-tbl th{
  background:#dfe680;padding:6px 8px;text-align:left;
  border:1px solid #b5b800;font-weight:700;font-size:11px
}
.vg-tbl td{border:1px solid var(--rand);padding:3px 4px;vertical-align:middle}
.vg-tbl .vg-inp{margin:0}
.vg-btn-del{padding:5px 8px;color:#a33;font-size:12px}

/* RI&E rijen */
.vg-rie-rij{
  display:flex;align-items:flex-start;gap:10px;
  background:#fafbfd;border:1px solid var(--rand);border-radius:6px;
  padding:.6rem .8rem;margin-bottom:.4rem
}
.vg-rie-rij.uit{opacity:.5;background:#f4f4f4}
.vg-rie-vlds{flex:1;display:grid;grid-template-columns:1fr 1.5fr 2fr;gap:.5rem}
@media (max-width:780px){.vg-rie-vlds{grid-template-columns:1fr}}

/* Onderaannemers */
.vg-oa-rij{
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.5rem;
  margin-bottom:.4rem
}
@media (max-width:680px){.vg-oa-rij{grid-template-columns:1fr}}

/* Export-balk onderaan */
.vg-export-balk{
  position:sticky;bottom:0;z-index:50;
  background:#fff;border:1px solid var(--rand);border-radius:10px;
  padding:12px 16px;margin-top:1rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;box-shadow:0 -2px 8px rgba(0,0,0,.04)
}
.vg-versie-info{font-size:12px;color:var(--t2)}
.vg-versie-info i{color:var(--blauw)}
.vg-export-knoppen{display:flex;gap:8px}



/* ============================================================================
   V&G-PLAN V2 — bewerkbare pagina (stap 3.2)
   ============================================================================ */

.vg-bar {
  position:sticky; top:0; z-index:50;
  background:#fff; border:1px solid var(--rand); border-radius:10px;
  padding:10px 14px; margin-bottom:1rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.vg-bar-status { display:flex; gap:8px; flex-wrap:wrap; }
.vg-bar-acties { display:flex; gap:8px; flex-wrap:wrap; }
.vg-bar-pill {
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:20px;
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; border:1px solid var(--rand);
}
.vg-bar-pill.ok   { color:var(--groen); border-color:#bfe5c0; background:#f5fbf5; }
.vg-bar-pill.warn { color:#a33; border-color:#e8b6b6; background:#fdf5f5; }
.vg-bar-pill.vg-bar-klik { cursor:pointer; transition:filter .15s; }
.vg-bar-pill.vg-bar-klik:hover { filter:brightness(.96); }
.vg-bar-pill.mut  { color:var(--t3); }
.vg-bar-reset { color:#a33; }

/* ── Draaiende spinner ────────────────────────────────────────────────────
   Wordt als class op een Tabler-ti-loader gezet. Geeft de gebruiker
   zichtbaar bewijs dat er iets gebeurt — niet alleen een statische tekst. */
@keyframes vg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vg-spin { display:inline-block; animation: vg-spin 1s linear infinite; }

/* ── Overlay — vervangt browser-alerts ────────────────────────────────────
   Twee varianten via extra class: .bezig (spinner+statustekst, niet sluitbaar)
   en .uitleg (stilstaand uitlegblok met sluit-knop). Standaard verborgen,
   klasse .aan maakt zichtbaar. */
.vg-overlay {
  position: fixed; inset: 0; background: rgba(15,30,58,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9000; padding: 20px;
  backdrop-filter: blur(2px);
}
.vg-overlay.aan { display: flex; }
.vg-ov-kaart {
  background: #fff; border-radius: 14px; padding: 28px 32px;
  max-width: 480px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  text-align: center;
}
.vg-ov-spin { font-size: 44px; color: var(--blauw); margin-bottom: 12px; }
.vg-ov-ico  { font-size: 38px; color: var(--blauw); margin-bottom: 10px; }
.vg-overlay.uitleg .vg-ov-ico { color: #c8a200; }
.vg-ov-titel {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 22px; font-weight: 800; color: var(--blauw);
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.2;
  margin-bottom: 10px;
}
.vg-ov-sub   { font-size: 13px; color: var(--t3); line-height: 1.5; }
.vg-ov-tekst { font-size: 13px; color: var(--t2); line-height: 1.6; text-align: left; }
.vg-ov-hoe {
  font-size: 12px; color: var(--t1); background: #f6f8fb;
  border-left: 3px solid var(--blauw); padding: 10px 14px;
  border-radius: 4px; margin-top: 14px; text-align: left;
  line-height: 1.6; font-family: 'Inter', sans-serif;
}
.vg-ov-acties {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 18px; flex-wrap: wrap;
}

/* Documentwrapper — geeft het bewerkblok het uiterlijk van een A4-pagina */
.vg-doc-wrap {
  max-width: 920px; margin: 0 auto;
}
.vg-doc-edit {
  background:#fff; padding: 48px 60px;
  border:1px solid var(--rand); border-radius:6px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  min-height: 600px;
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 14px; line-height: 1.55; color:#222;
  outline: none;
}
.vg-doc-edit:focus { outline:2px solid #b8c8e6; outline-offset:2px; }

/* Document-typografie */
.vg-doc-edit h1 {
  font-size: 28px; color: var(--blauw);
  margin: 0 0 6px; font-weight:700; letter-spacing:-.5px;
}
.vg-doc-edit .vg-sub { color:#666; font-size:16px; margin: 0 0 14px; }
.vg-doc-edit h2 {
  font-size: 18px; color: #18223B;
  margin: 28px 0 10px; padding-bottom:5px;
  border-bottom:2px solid #C3C000;
  display:flex; align-items:center; gap:10px;
  font-weight:700;
}
.vg-doc-edit h3 {
  font-size: 14px; color: var(--blauw);
  margin: 16px 0 6px; font-weight:700;
}
.vg-doc-edit h4 {
  font-size: 13px; color: #2a4a70;
  margin: 10px 0 4px; font-weight:700;
}
.vg-doc-edit .vg-nr {
  background: var(--blauw); color:#fff;
  padding: 2px 9px; border-radius:3px;
  font-size: 12px; font-weight:800; flex-shrink:0;
}
.vg-doc-edit p { margin: 0 0 9px; }
.vg-doc-edit ul { margin: 4px 0 12px 22px; padding:0; }
.vg-doc-edit li { margin-bottom: 4px; }
.vg-doc-edit table {
  border-collapse: collapse; width:100%;
  margin: 8px 0 14px; font-size:13px;
}
.vg-doc-edit th, .vg-doc-edit td {
  border: 1px solid #d4d8e0; padding: 6px 9px;
  vertical-align: top; text-align: left;
}
.vg-doc-edit th {
  background:#18223B; color:#fff; font-weight:500;
  font-size: 12px;
}
.vg-doc-edit table.vg-info th { background:#18223B; width: 30%; }

/* VDZ voorblad — zelfde stijl als de PDF/Word-export */
.vg-doc-edit .vgz-kop {
  background:#18223B; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 0;
}
.vg-doc-edit .vgz-merk { display:flex; align-items:center; gap:10px; }
.vg-doc-edit .vgz-kop-logo {
  height:44px; width:auto; display:block;
}
.vg-doc-edit .vgz-merk-naam {
  color:#fff; font-size:19px; font-weight:600; letter-spacing:.2px;
}
.vg-doc-edit .vgz-doctype {
  color:#C3C000; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}

/* Licht voorblad-kopblok — beeldmerk + naam op wit, zoals de hoofdstukken.
   Geen donkerblauwe balk. */
.vg-doc-edit .vgz-kop-licht {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 4px;
}
.vg-doc-edit .vgz-kop-licht .vgz-kop-logo { height:52px; }
.vg-doc-edit .vgz-kop-licht .vgz-merk-naam {
  color:#18395E; font-size:22px; font-weight:600; letter-spacing:.2px;
}
.vg-doc-edit .vgz-kop-licht .vgz-doctype {
  color:#8a7f00; font-weight:700;
}

/* Running header met het beeldmerk — bovenaan ELKE hoofdstukpagina. */
.vg-doc-edit .vgz-runhead {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:0 0 8px; margin:0 0 14px;
  border-bottom:2px solid #C3C000;
}
.vg-doc-edit .vgz-runhead-merk { display:flex; align-items:center; gap:7px; }
.vg-doc-edit .vgz-runhead-logo { height:24px; width:auto; display:block; }
.vg-doc-edit .vgz-runhead-naam {
  font-size:13px; font-weight:600; color:#18395E; letter-spacing:.2px;
}
.vg-doc-edit .vgz-runhead-r {
  font-size:10px; color:#6a7681; text-align:right; line-height:1.35;
}
.vg-doc-edit .vgz-runhead-r span { color:#98a0aa; }
.vg-doc-edit .vgz-baan { height:4px; background:#C3C000; margin:0 0 22px; }
.vg-doc-edit .vgz-titel {
  font-size:26px; font-weight:700; color:#18223B; line-height:1.25;
  margin:16px 0 4px; letter-spacing:-.4px;
}
.vg-doc-edit .vgz-norm { font-size:14px; color:#526169; margin:0 0 12px; }
.vg-doc-edit .vgz-projbalk {
  font-size:15px; color:#18223B; padding:9px 13px;
  background:#f2f4f7; border-left:3px solid #C3C000; margin:0 0 18px;
}
.vg-doc-edit table.vgz-info { margin-top:4px; }
.vg-doc-edit table.vgz-info td { border:none; padding:5px 0; }
.vg-doc-edit table.vgz-info td.lbl { color:#526169; width:30%; }
.vg-doc-edit table.vgz-info td.val { color:#18223B; }
.vg-doc-edit .vgz-sectiekop {
  font-size:12px; font-weight:700; color:#18223B;
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid #18223B; padding-bottom:5px; margin:20px 0 10px;
}
.vg-doc-edit .vgz-hand { border-bottom:1px solid #8a929c; height:26px; }
.vg-doc-edit .vgz-toc-rij {
  display:flex; justify-content:space-between;
  font-size:14px; padding:4px 0; border-bottom:1px dotted #cdd2da;
}
.vg-doc-edit .vgz-toc-rij .t { color:#18223B; }
.vg-doc-edit .vgz-toc-rij .t.sub { padding-left:18px; color:#526169; font-size:13px; }
.vg-doc-edit .vgz-toc-rij .pg { color:#8a929c; }
.vg-doc-edit .vgz-voet {
  margin-top:18px; padding-top:8px; border-top:1px solid #cdd2da;
  font-size:11px; color:#526169;
}
/* Elk hoofdstuk als een 'pagina': op scherm gescheiden door witruimte + lijn,
   bij printen door een echte paginabreuk (zie @media print onderaan). */
.vg-doc-edit section.vg-hfd {
  margin-bottom: 34px; padding-bottom: 26px;
  border-bottom: 1px solid #e2e6ee;
}
.vg-doc-edit section.vg-hfd:last-child { border-bottom: none; }
.vg-doc-edit section.vg-voorblad {
  padding: 0 0 40px;
  border-bottom: 2px solid #c9d4e8;
  margin-bottom: 34px;
}
/* De voorblad-sectie heeft zijn eigen kop; geen dubbele lijn. */
.vg-doc-edit section.vg-voorblad .vgz-runhead { display:none; }
.vg-doc-edit .vg-logo {
  width: 200px; height: auto; display: block; margin: 0 0 22px;
}

/* ── Compacte tabellen voor het bodem-V&G-plan ──────────────────────────
   Kleinere padding + regelhoogte zodat het plan fors minder pagina's telt. */
.vg-doc-edit section.vg-hfd table { margin: 6px 0 12px; font-size: 12px; }
.vg-doc-edit section.vg-hfd th,
.vg-doc-edit section.vg-hfd td {
  padding: 3px 7px; line-height: 1.35;
}
.vg-doc-edit section.vg-hfd th { font-size: 11px; }
.vg-doc-edit section.vg-hfd h2 { margin-top: 4px; }
.vg-doc-edit section.vg-hfd h3 { margin: 11px 0 4px; }
.vg-doc-edit section.vg-hfd h4 { margin: 8px 0 3px; }
.vg-doc-edit section.vg-hfd p  { margin: 0 0 7px; }
.vg-doc-edit section.vg-hfd ul { margin: 3px 0 9px 20px; }
.vg-doc-edit section.vg-hfd li { margin-bottom: 3px; }
.vg-doc-edit .vg-leeg {
  color:#aaa; font-style:italic;
  background:#faf6ee; border:1px dashed #e6d9b8;
  padding: 8px 12px; border-radius:4px;
  font-size:12px;
}

/* Print- en exportstijl */
@page { size: A4; margin: 16mm 15mm; }

@media print {
  .vg-bar { display:none; }
  .vg-doc-wrap { max-width: none; }
  .vg-doc-edit { box-shadow:none; border:none; padding:0; }

  /* Elk hoofdstuk begint op een nieuwe pagina. */
  .vg-doc-edit section.vg-hfd {
    break-before: page; page-break-before: always;
    border-bottom: none; padding-bottom: 0; margin-bottom: 0;
  }
  /* Voorblad zelf niet vooraf laten breken. */
  .vg-doc-edit section.vg-voorblad { break-before: auto; page-break-before: avoid; }

  /* Tabellen en rijen niet midden op een paginagrens afbreken. */
  .vg-doc-edit table { page-break-inside: auto; }
  .vg-doc-edit tr, .vg-doc-edit img { page-break-inside: avoid; }
  .vg-doc-edit thead { display: table-header-group; }
  /* Koppen niet los onderaan een pagina. */
  .vg-doc-edit h2, .vg-doc-edit h3, .vg-doc-edit h4 { page-break-after: avoid; }
  /* Kleur/achtergrond van kop en tabellen meeprinten. */
  .vg-doc-edit th, .vg-doc-edit .vgz-kop,
  .vg-doc-edit .vgz-runhead, .vg-doc-edit .vgz-baan {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ============================================================================
   LOGBOEK SLOOPWERKEN (stap 4)
   ============================================================================ */

/* ── Tab-balk ─────────────────────────────────────────────────────────── */
.lb-tabs {
  display: flex; gap: 4px; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rand);
}
.lb-tab {
  background: transparent; border: none;
  padding: 10px 18px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--t2);
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s, border-color .15s;
}
.lb-tab:hover { color: var(--t1); }
.lb-tab.on   { color: var(--blauw); border-bottom-color: var(--blauw); }
.lb-tab i    { font-size: 16px; }

/* ── Topbalk (statusinfo + acties) — vergelijkbaar met vg-bar ─────── */
.lb-bar {
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.lb-bar-status { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lb-bar-acties { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Doc-stijl (klaarzetten + week) ──────────────────────────────── */
.lb-doc-wrap { max-width: 920px; margin: 0 auto; }
.lb-doc {
  background: #fff; padding: 40px 50px;
  border: 1px solid var(--rand); border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 14px; line-height: 1.55; color: #222;
}
.lb-doc h1 { font-size: 26px; color: var(--blauw); margin: 0 0 4px; font-weight: 700; }
.lb-doc .lb-sub { color: #666; font-size: 14px; margin: 0 0 18px; }
.lb-doc h2 {
  font-size: 16px; color: var(--blauw); margin: 22px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid #c9d4e8;
}
.lb-doc h3 { font-size: 13px; color: var(--blauw); margin: 12px 0 4px; }
.lb-doc table {
  border-collapse: collapse; width: 100%;
  margin: 6px 0 14px; font-size: 13px;
}
.lb-doc th, .lb-doc td {
  border: 1px solid #d4d8e0; padding: 5px 9px;
  vertical-align: top; text-align: left;
}
.lb-doc th { background: #eef2f8; color: var(--blauw); font-weight: 700; font-size: 12px; }
.lb-doc table.lb-info th { background: #dde6f3; width: 32%; }
.lb-doc table.lb-week td a { color: var(--blauw); text-decoration: none; }
.lb-doc table.lb-week td a:hover { text-decoration: underline; }
.lb-doc table.lb-week-cont td.lb-num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-doc table.lb-week-cont .lb-totaal td { background: #f6f8fc; }
.lb-doc [contenteditable="true"]:focus {
  outline: 2px solid #b8c8e6; outline-offset: -1px; background: #fafcff;
}
.lb-doc select {
  border: 1px solid var(--rand); padding: 3px 6px; border-radius: 4px;
  font: inherit; background: #fff;
}

/* VGM-checklist grid */
.lb-vgm-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 16px; margin-bottom: 12px;
}
.lb-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 4px 0; cursor: pointer;
}
.lb-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
.lb-hint { font-size: 12px; color: var(--t3); font-style: italic; margin: 4px 0 8px; }

/* Lege staat */
.lb-leeg {
  text-align: center; padding: 60px 20px; color: var(--t2);
  background: #fff; border: 1px dashed var(--rand); border-radius: 8px;
}
.lb-leeg p { margin: 12px 0; font-size: 14px; }
.lb-leeg-sub { font-size: 12px; color: var(--t3); }
.lb-opmerk {
  background: #fffbf0; border: 1px solid #f0d674; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #5a3d00;
}

/* Overig-blok */
.lb-overig-blok { margin-bottom: 16px; }
.lb-overig-h {
  font-weight: 700; font-size: 13px; color: var(--blauw); margin-bottom: 4px;
}
.lb-overig-lijst { margin: 0 0 0 18px; padding: 0; font-size: 13px; }
.lb-overig-lijst li { margin-bottom: 3px; }
.lb-overig-leeg { color: var(--t3); font-style: italic; font-size: 12px; }

.lb-overzicht {
  background: #f5faff; border: 1px solid #c2d4ed; border-radius: 8px;
  padding: 14px 18px; margin-bottom: 16px; max-width: 920px; margin: 0 auto 16px;
}
.lb-overzicht h3 { margin: 0 0 6px; font-size: 13px; color: var(--blauw); }
.lb-overzicht p { margin: 0; font-size: 13px; line-height: 1.55; }
.lb-aandacht {
  background: #fffbf0; border: 1px solid #f0d674; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #5a3d00;
}
.lb-week-fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin: 10px 0;
}
.lb-week-foto { position: relative; }
.lb-week-foto img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rand); }
.lb-foto-bij { font-size: 11px; color: var(--t3); margin-top: 3px; text-align: center; }

/* ── Vandaag-view (mobiel-first) ─────────────────────────────────── */
.lb-vandaag {
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.lb-datum-rij {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 12px 16px;
}
.lb-datum-btn {
  background: #fff; border: 1px solid var(--rand);
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 18px; color: var(--blauw); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-datum-btn:hover:not(:disabled) { background: #f0f4fb; }
.lb-datum-btn:disabled { opacity: .3; cursor: not-allowed; }
.lb-datum-tekst {
  font-size: 15px; font-weight: 600; color: var(--blauw);
  text-transform: capitalize;
}

.lb-blok {
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: 18px 18px 22px;
}
.lb-blok-h {
  font-size: 14px; font-weight: 700; color: var(--blauw);
  margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.lb-h-mut { color: var(--t3); font-weight: 400; font-size: 12px; }

/* Grote spraakknop */
.lb-spraak-knop {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; padding: 32px 20px; background: var(--blauw); color: #fff;
  border: none; border-radius: 12px; cursor: pointer; font-size: 15px;
  font-weight: 600; transition: background .15s, transform .1s;
}
.lb-spraak-knop:hover { background: #0f3568; }
.lb-spraak-knop:active { transform: scale(.98); }
.lb-spraak-knop i { font-size: 48px; }
.lb-spraak-knop.on { background: #c33; animation: lb-pulse 1.2s ease-in-out infinite; }
@keyframes lb-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(204, 51, 51, .5); }
  50%     { box-shadow: 0 0 0 12px rgba(204, 51, 51, 0); }
}

.lb-tekst-knop {
  width: 100%; margin-top: 10px;
  background: transparent; border: none; color: var(--blauw);
  font-size: 13px; cursor: pointer; padding: 8px;
}
.lb-tekst-knop:hover { text-decoration: underline; }

.lb-omschr {
  background: #f5faff; border: 1px solid #c2d4ed; border-radius: 6px;
  padding: 12px 14px; font-size: 14px; line-height: 1.5; margin-bottom: 10px;
}
.lb-rij-knop { display: flex; gap: 8px; flex-wrap: wrap; }

/* Container-grid */
.lb-cont-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lb-cont-knop {
  background: #f8f9fb; border: 2px solid var(--rand); border-radius: 10px;
  padding: 16px 8px; cursor: pointer; text-align: center;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .15s;
}
.lb-cont-knop:hover { background: #fff; border-color: #b8c8e6; }
.lb-cont-knop.aan { background: #e8f5e9; border-color: #66bb6a; }
.lb-cont-naam { font-size: 13px; font-weight: 600; color: var(--t1); }
.lb-cont-ton  { font-size: 18px; font-weight: 700; color: var(--blauw); }
.lb-cont-knop.aan .lb-cont-ton { color: #2e7d32; }

/* Foto-grid */
.lb-foto-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 10px;
}
.lb-foto { position: relative; }
.lb-foto img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rand); }
.lb-foto-x {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
}
.lb-foto-knop {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}

/* Bijzonderheden */
.lb-bijz { padding: 4px 0; }
.lb-bijz-tekst {
  width: 100%; margin-top: 6px;
  border: 1px solid var(--rand); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
  resize: vertical; min-height: 60px;
}
.lb-bijz-tekst:focus { outline: 2px solid #b8c8e6; outline-offset: -1px; }

.lb-vandaag-status {
  text-align: center; padding: 12px;
  font-size: 12px; color: var(--t3);
}
.lb-vandaag-status i { color: var(--groen); margin-right: 4px; }

/* Mobile breakpoint: nog grotere knoppen */
@media (max-width: 720px) {
  .lb-tabs { overflow-x: auto; }
  .lb-tab { padding: 10px 12px; font-size: 12px; }
  .lb-tab span, .lb-tab i { font-size: 14px; }
  .lb-cont-grid { grid-template-columns: repeat(2, 1fr); }
  .lb-cont-knop { padding: 20px 10px; }
  .lb-cont-naam { font-size: 14px; }
  .lb-cont-ton { font-size: 22px; }
  .lb-spraak-knop { padding: 40px 20px; font-size: 16px; }
  .lb-spraak-knop i { font-size: 60px; }
  .lb-doc { padding: 20px 18px; }
  .lb-doc h1 { font-size: 22px; }
  .lb-vgm-grid { grid-template-columns: 1fr; }
  .lb-bar { padding: 8px 10px; }
  .lb-bar-acties .btn { font-size: 12px; padding: 6px 10px; }
}

/* ============================================================================
   PERSONEEL — LOGBOEK + MEDEWERKERS-STAMTABEL
   ============================================================================ */

/* Team-chips in Vandaag-view */
.lb-team-hint {
  font-size: 11px; color: var(--t3); margin-bottom: 8px;
  display: flex; align-items: center; gap: 4px;
}
.lb-team-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.lb-team-chip {
  background: #f8f9fb; border: 1.5px solid var(--rand); border-radius: 22px;
  padding: 10px 16px; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--t1);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s;
  min-height: 40px;
}
.lb-team-chip:hover { border-color: #b8c8e6; }
.lb-team-chip.aan {
  background: #e8f5e9; border-color: #66bb6a; color: #1b5e20;
  font-weight: 600;
}
.lb-team-chip.aan i { font-size: 14px; color: #2e7d32; }
.lb-team-chip.gister:not(.aan) {
  background: #fff8e1; border-color: #ffd54f;
}
.lb-team-fn {
  font-size: 10px; color: var(--t3); margin-left: 4px;
  text-transform: lowercase; font-weight: 400;
}
.lb-team-chip.aan .lb-team-fn { color: #4e7d2e; }
.lb-team-onder { margin-top: 4px; }
.lb-team-leeg { font-size: 13px; color: var(--t2); padding: 8px 0; }
.lb-team-leeg-zoek {
  font-size: 13px; color: var(--t3); padding: 12px;
  background: #f8f9fb; border-radius: 8px; text-align: center;
  border: 1px dashed var(--rand);
}

/* Toolbar boven team-chips: zoekbalk + actieknoppen */
.lb-team-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.lb-team-zoekwrap {
  position: relative; flex: 1 1 240px; min-width: 200px;
}
.lb-team-zoekicon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--t3); font-size: 16px; pointer-events: none;
}
.lb-team-zoek {
  width: 100%; box-sizing: border-box;
  padding: 10px 36px 10px 36px;
  border: 1.5px solid var(--rand); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: #fff;
  min-height: 40px;
}
.lb-team-zoek:focus { outline: none; border-color: var(--blauw); background: #fafcff; }
.lb-team-zoekx {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  color: var(--t3); padding: 6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; min-width: 28px;
}
.lb-team-zoekx:hover { color: var(--blauw); background: rgba(26,58,107,.06); }
.lb-team-knop {
  background: var(--blauw); color: #fff; border: none; border-radius: 8px;
  padding: 10px 14px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  transition: background .12s;
}
.lb-team-knop:hover { background: var(--blauw2); }
.lb-team-knop-wis {
  background: #fff; color: var(--t2); border: 1.5px solid var(--rand);
}
.lb-team-knop-wis:hover { background: #f7f9fc; border-color: #a33; color: #a33; }

/* Sectie-koppen binnen team-blok */
.lb-team-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--t3); margin: 4px 0 8px;
}
.lb-team-overig {
  margin-top: 8px;
}
.lb-team-overig summary {
  cursor: pointer; font-size: 12.5px; color: var(--blauw);
  padding: 8px 0; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500;
}
.lb-team-overig summary:hover { color: var(--blauw2); }
.lb-team-overig[open] summary { margin-bottom: 4px; }

.lb-link {
  background: none; border: none; color: var(--blauw);
  cursor: pointer; font-size: 12px; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.lb-link:hover { text-decoration: underline; }

/* Externe chips (onderaannemers, bezoekers) */
.lb-chip-rij {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.lb-ext-chip {
  position: relative;
  background: #f0f4fb; border: 1px solid #c2d4ed; border-radius: 6px;
  padding: 8px 36px 8px 12px;
}
.lb-ext-naam { font-size: 13px; font-weight: 600; color: var(--t1); }
.lb-ext-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }
.lb-ext-x {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--t3);
}
.lb-ext-x:hover { background: rgba(0,0,0,.05); color: #a33; }

.lb-add-knop {
  background: transparent; border: 1.5px dashed var(--rand); border-radius: 6px;
  padding: 10px 14px; font-family: inherit; font-size: 13px;
  color: var(--blauw); cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lb-add-knop:hover { border-color: var(--blauw); background: #f5faff; }

/* Week-overzicht: team-tabel */
.lb-doc table.lb-week-team th.lb-num-h {
  text-align: center; font-size: 11px; padding: 4px;
}
.lb-doc table.lb-week-team td.lb-num { text-align: center; }
.lb-doc table.lb-week-team td.lb-mut { color: var(--t3); font-size: 12px; }

/* ── MEDEWERKERS-STAMTABEL ──────────────────────────────────────────────── */

.mw-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 1rem; flex-wrap: wrap; gap: 12px;
}
.mw-titel { font-size: 15px; font-weight: 700; color: var(--blauw); }
.mw-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }

.mw-leeg {
  text-align: center; padding: 60px 20px; color: var(--t2);
  background: #fff; border: 1px dashed var(--rand); border-radius: 8px;
}
.mw-leeg p { margin: 12px 0; font-size: 14px; }
.mw-leeg-sub { font-size: 12px; color: var(--t3); }

.mw-tabel-wrap {
  background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  overflow: hidden;
}
.mw-tabel {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.mw-tabel th, .mw-tabel td {
  border-bottom: 1px solid var(--rand); padding: 8px 12px;
  text-align: left; vertical-align: middle;
}
.mw-tabel th {
  background: #f7f9fc; color: var(--blauw); font-weight: 700;
  font-size: 12px;
}
.mw-tabel tr:last-child td { border-bottom: none; }
.mw-tabel td[contenteditable="true"]:focus {
  outline: 2px solid #b8c8e6; outline-offset: -1px; background: #fafcff;
}
.mw-tabel select {
  border: 1px solid var(--rand); padding: 4px 8px; border-radius: 4px;
  font: inherit; background: #fff; max-width: 100%;
}
.mw-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.mw-toggle input[type="checkbox"] { width: 16px; height: 16px; }
.mw-mut { color: var(--t3); font-size: 12px; }
.mw-x {
  background: transparent; border: none; cursor: pointer;
  color: var(--t3); padding: 6px; border-radius: 4px;
}
.mw-x:hover { color: #a33; background: rgba(170,51,51,.08); }

.mw-functies {
  margin-top: 20px; background: #fff; border: 1px solid var(--rand);
  border-radius: 8px; padding: 12px 16px;
}
.mw-functies summary {
  cursor: pointer; font-weight: 600; color: var(--blauw); font-size: 13px;
}
.mw-functies-veld {
  width: 100%; min-height: 140px; margin-top: 8px;
  border: 1px solid var(--rand); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
}
.mw-hint { font-size: 12px; color: var(--t3); margin: 6px 0; }

/* Mobile: medewerkers-tegel tabel scrollt horizontaal */
@media (max-width: 720px) {
  .mw-tabel-wrap { overflow-x: auto; }
  .mw-tabel { min-width: 600px; }
  /* Team-chips groter voor handschoen-aanrakingen, en in tweekoloms grid */
  .lb-team-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .lb-team-chip {
    font-size: 14px; padding: 12px 14px;
    min-height: 48px;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lb-team-fn { display: none; } /* op mobiel verbergen voor ruimte */
  /* Toolbar: zoek vol-breedte, knoppen onder zoek */
  .lb-team-toolbar { flex-direction: column; align-items: stretch; }
  .lb-team-zoekwrap { flex: none; min-width: 0; }
  .lb-team-knop { width: 100%; justify-content: center; }
}

/* Presentielijst (klaarzetten-view) */
.lb-presentie-extern {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--rand);
}
.lb-presentie-h {
  font-size: 12px; font-weight: 600; color: var(--t2);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px;
}

/* Auto-polijst spinner */
.lb-overzicht-laden {
  background: #fdf6e3; border-color: #f0d674;
}
.lb-overzicht-laden h3 {
  display: flex; align-items: center; gap: 8px;
  color: #7a4b00;
}
.lb-spinner {
  display: inline-block;
  animation: lb-spin 1s linear infinite;
}
@keyframes lb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.lb-overzicht-fout {
  background: #fef3f2; border-color: #f5b7b1;
}
.lb-overzicht-fout h3 { color: #a33; }
.lb-mut { color: var(--t3); font-size: 12px; }

/* Klikbare cellen in week-view */
.lb-cel-bewerk {
  cursor: pointer;
  transition: background .15s;
}
.lb-cel-bewerk:hover {
  background: #f0f6ff !important;
  outline: 1px dashed #b8c8e6;
  outline-offset: -1px;
}
.lb-leeg-cel {
  color: var(--t3);
  font-style: italic;
  font-size: 12px;
}
.lb-edit-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--t3);
  font-style: italic;
  margin-left: 8px;
}

/* ============================================================================
   MOBIEL "MIJN WERK VANDAAG" — telefoon-eerst lay-out
   ============================================================================ */

#scherm-mobiel {
  min-height: 100vh;
  background: linear-gradient(180deg, #f5f8fc 0%, #fff 200px);
  padding: 20px 16px 40px;
  max-width: 560px;
  margin: 0 auto;
}

.mb-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.mb-h-naam {
  font-size: 24px; font-weight: 700; color: var(--blauw);
  letter-spacing: -.5px;
}
.mb-h-init {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--blauw); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

.mb-datum {
  color: var(--t2); font-size: 14px;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 6px;
  text-transform: capitalize;
}
.mb-datum i { color: var(--blauw); }

.mb-h2 {
  font-size: 13px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 12px;
}

.mb-projlijst {
  display: flex; flex-direction: column; gap: 12px;
}
.mb-proj-knop {
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: 16px 18px;
  text-align: left; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  font-family: inherit;
  transition: transform .1s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.mb-proj-knop:active {
  transform: scale(.98);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.mb-proj-h {
  display: flex; align-items: baseline; gap: 10px;
}
.mb-proj-nr {
  background: #f0f4fb; color: var(--blauw);
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.mb-proj-naam {
  font-size: 15px; font-weight: 600; color: var(--t1);
  line-height: 1.3;
}
.mb-proj-loc {
  font-size: 12px; color: var(--t3);
  display: flex; align-items: center; gap: 4px;
}
.mb-proj-loc i { font-size: 13px; }
.mb-proj-status {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}
.mb-pill {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px;
  background: #f0f4fb; color: var(--blauw);
  display: inline-flex; align-items: center; gap: 4px;
}
.mb-pill i { font-size: 12px; }
.mb-pill.ok   { background: #e8f5e9; color: #2e7d32; }
.mb-pill.warn { background: #fff8e1; color: #b8860b; }

.mb-leeg {
  background: #fff; border: 1px dashed var(--rand); border-radius: 8px;
  padding: 32px 20px; text-align: center;
  color: var(--t2); font-size: 14px; line-height: 1.5;
}

.mb-acties {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--rand);
  display: flex; flex-direction: column; gap: 4px;
}
.mb-link {
  background: transparent; border: none;
  padding: 12px 8px; cursor: pointer;
  font-size: 14px; color: var(--blauw);
  display: flex; align-items: center; gap: 10px;
  font-family: inherit;
  text-align: left;
}
.mb-link:active { background: #f0f4fb; border-radius: 6px; }
.mb-link i { font-size: 18px; color: var(--t3); }

.mb-voet {
  margin-top: 24px; text-align: center;
  color: var(--t3); font-size: 11px;
}

/* ============================================================================
   TABLET-AANPASSINGEN — 640px tot 1024px
   ============================================================================ */

@media (min-width: 640px) and (max-width: 1024px) {
  /* Compactere navbar */
  .nav-midden { flex-wrap: wrap; gap: 6px; }
  .nav-home span { display: none; }
  .nav-home { padding: 8px 10px; }

  /* Tegelgrid: 2 kolommen i.p.v. 3-4 */
  .tegel-grid { grid-template-columns: 1fr 1fr; }

  /* Voortgangsbalk inkrimpen */
  .werk-baan { font-size: 11px; }

  /* V&G en Logboek doc-wrap iets compacter */
  .vg-doc-edit { padding: 24px 28px; }
  .lb-doc { padding: 24px 28px; }
}

/* ============================================================================
   ALGEMENE MOBIEL-VERBETERINGEN — onder 640px
   ============================================================================ */

@media (max-width: 640px) {
  /* Navbar volledig versimpelen */
  .nav-midden {
    gap: 4px;
  }
  .nav-home, .nav-home span { font-size: 13px; }
  .nav-home { padding: 6px 8px; }
  .proj-knop { padding: 6px 10px; max-width: 220px; }
  .proj-nr { font-size: 11px; padding: 2px 6px; }
  .proj-naam { font-size: 12px; max-width: 130px; }

  /* Datum-rij in Vandaag-view: grotere tap-targets */
  .lb-datum-btn {
    width: 44px; height: 44px;
  }
  .lb-datum-tekst {
    font-size: 16px;
  }

  /* Bijzonderheden-blok: meer ruimte rondom vinkjes */
  .lb-bijz .lb-check {
    padding: 10px 4px;
    min-height: 44px;
  }
  .lb-bijz .lb-check input[type="checkbox"] {
    width: 22px; height: 22px;
  }
  .lb-bijz .lb-check span {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Container-knoppen nog groter */
  .lb-cont-knop {
    padding: 22px 8px;
    min-height: 72px;
  }
  .lb-cont-naam { font-size: 14px; }
  .lb-cont-ton  { font-size: 22px; }

  /* Spraakknop nog royaler */
  .lb-spraak-knop {
    padding: 48px 16px;
    min-height: 160px;
  }
  .lb-spraak-knop i { font-size: 64px; }
  .lb-spraak-knop span { font-size: 15px; line-height: 1.4; }

  /* Foto's: 2 kolommen i.p.v. 3 op smal scherm */
  .lb-foto-grid { grid-template-columns: 1fr 1fr; }
  .lb-foto img { height: 110px; }

  /* Team-chips grotere tap-target */
  .lb-team-chip {
    padding: 8px 12px;
    min-height: 38px;
    font-size: 13px;
  }

  /* Logboek-tabs scrollbaar zonder dat ze elkaar overlappen */
  .lb-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lb-tab {
    flex-shrink: 0;
    padding: 12px 14px;
  }

  /* Bar-acties verticaal stacken */
  .lb-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .lb-bar-acties .btn {
    padding: 10px 14px;
    font-size: 13px;
    min-height: 40px;
  }
  .lb-bar-acties {
    justify-content: stretch;
  }
  .lb-bar-acties .btn { flex: 1; }

  /* Tool-top met terug-knop: grotere tap-target */
  .tool-terug {
    padding: 12px 14px;
    min-height: 44px;
    font-size: 14px;
  }

  /* Modals goed passen op telefoon */
  .modal {
    width: 92vw;
    max-width: 92vw;
    margin: 5vh auto;
    padding: 20px 18px;
  }
  .modal-h { font-size: 15px; }

  /* Verberg login-bg-cover op smal scherm */
  .login-bg { background-size: cover; }

  /* Footer-knoppen op exporten en accordering */
  .vg-export-bar, .lb-vandaag-status {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ============================================================================
   ALGEMENE MOBIEL-AANPASSINGEN — alle schermen onder 640px
   Toegevoegd in stap 7: hele site mobiel-bruikbaar maken.
   Strategie: CSS-only overrides waar mogelijk. Voor structuur-wijzigingen
   die niet via CSS kunnen (bv. navbar omklappen) zit aanvullende JS.
   ============================================================================ */

@media (max-width: 640px) {

  /* ── BODY ─────────────────────────────────────────────────────── */
  body { font-size: 14px; }

  /* ── NAVBAR ───────────────────────────────────────────────────── */
  .nav {
    padding: 8px 12px;
    flex-wrap: wrap;
    min-height: 56px;
  }
  .nav-logo-img { max-height: 28px; }
  .nav-midden {
    order: 3;
    width: 100%;
    margin-top: 8px;
    gap: 4px;
    flex-wrap: wrap;
  }
  .nav-rechts { gap: 4px; }
  .nav-bar { display: none; }
  .nav-home span { display: none; }
  .nav-home {
    padding: 8px 10px;
    min-height: 38px;
    min-width: 38px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-home i { font-size: 18px; }

  /* Project-kiezer compact maken */
  .proj-wrap { flex: 1; min-width: 0; }
  .proj-knop {
    padding: 8px 10px;
    width: 100%;
    max-width: none;
    min-height: 38px;
  }
  .proj-nr { font-size: 11px; padding: 2px 6px; }
  .proj-naam {
    font-size: 13px;
    max-width: none;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .proj-dd {
    left: 0; right: 0;
    width: auto;
    max-width: 100vw;
    margin: 0 8px;
  }

  /* User-menu */
  .user-knop { padding: 6px 8px; }
  .u-naam { display: none; }

  /* ── HOME / OVERZICHT ─────────────────────────────────────────── */
  #scherm-home {
    padding: 0;
  }
  .hero {
    padding: 20px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hero-geel {
    width: 100%;
    text-align: left;
  }
  .hero-h1 { font-size: 24px; line-height: 1.2; }
  .hero-sub { font-size: 13px; }
  .hero-stats {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .hero-stat {
    flex: 1;
    padding: 12px 10px;
    min-height: 70px;
  }
  .hero-stat-getal { font-size: 24px; }
  .hero-stat-label { font-size: 11px; }

  /* Zoek- en filterbalk */
  .home-zoekbar {
    padding: 12px 16px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .home-zoekbar .zoek { flex: 1; }
  .zoek {
    padding: 10px 12px 10px 36px;
    font-size: 14px;
  }
  .zoek-ico { left: 12px; }
  #home-filters {
    flex-wrap: wrap;
    gap: 6px;
  }
  .hf {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
  }

  /* Projectkaarten in het overzicht: één kolom */
  .home-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 16px 80px;
  }
  .hcard {
    padding: 14px;
  }
  .hcard-h {
    font-size: 14px;
  }
  .hcard-nr { font-size: 11px; padding: 2px 7px; }
  .hcard-naam { font-size: 14px; }
  .hcard-sub { font-size: 12px; }

  /* Nieuw-project floating knop iets royaler */
  .home-fab {
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  /* ── PROJECTPAGINA (scherm-hoofd) ─────────────────────────────── */
  #scherm-hoofd { padding: 0 0 40px; }
  #proj-kop {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .proj-kop-tekst { width: 100%; }
  .proj-kop-nr { font-size: 13px; }
  .proj-kop-naam {
    font-size: 18px;
    line-height: 1.25;
  }
  .proj-kop-sub { font-size: 12px; }

  /* Werkbaan / fasebalk */
  .werk-baan {
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 11px;
    gap: 4px;
  }
  .wb-stap {
    flex-shrink: 0;
    padding: 6px 10px;
    min-width: 80px;
    font-size: 11px;
  }
  .wb-stap-titel { font-size: 11px; line-height: 1.2; }
  .wb-stap-num { font-size: 10px; }

  /* Tegelgrid: één kolom, royale tegels */
  .tegel-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  /* Rivier compacter op mobiel — smallere insprong, kleinere ankers */
  .tools-grid{padding-left:38px}
  .tools-grid::before{left:14px}
  .fase-anker{left:-32px;width:30px;height:30px}
  .fase-anker .fa-bol{width:18px;height:18px;border-width:3px}
  .fase-blok.huidig .fase-anker{left:-44px;top:8px;width:54px;height:54px}
  .tegel-fase {
    padding: 14px;
  }
  .tegel-fase-h {
    font-size: 11px;
    padding: 4px 10px;
  }
  .tegel-fase-titel {
    font-size: 15px;
  }
  .tegel-fase-sub { font-size: 12px; }
  .tegel-fase-tel { font-size: 11px; }

  /* De tegels zelf */
  .tegel {
    padding: 14px;
    min-height: 90px;
  }
  .tegel-ico {
    font-size: 24px;
    margin-bottom: 6px;
  }
  .tegel-titel {
    font-size: 13px;
    line-height: 1.25;
  }
  .tegel-sub {
    font-size: 11px;
    line-height: 1.3;
  }
  .tegel-status {
    font-size: 10px;
    padding: 2px 7px;
  }

  /* ── TOOL-PAGINA (V&G, Logboek, Stamkaart, etc.) ────────────── */
  #scherm-tool {
    padding: 0 0 40px;
  }
  .tool-top {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 40;
    border-bottom: 1px solid var(--rand);
  }
  .tool-terug {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 40px;
    flex-shrink: 0;
  }
  .tool-terug i { font-size: 16px; }
  .tool-naam {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    text-align: right;
  }
  .tool-body {
    padding: 16px 12px;
  }

  /* ── DOCUMENTEN-TEGEL (lijst van geüploade docs) ───────────── */
  .doc-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .doc-kaart {
    padding: 10px 12px;
    gap: 10px;
  }
  .doc-naam {
    font-size: 13px;
    max-width: none;
  }
  .doc-meta {
    font-size: 11px;
  }
  .doc-ico { font-size: 26px; }
  .doc-acties .btn {
    padding: 6px 10px;
    font-size: 11px;
    min-height: 32px;
  }

  /* Upload-zone */
  .upload-zone {
    padding: 28px 20px;
    text-align: center;
  }
  .upload-zone-ico { font-size: 32px; }
  .upload-zone-h { font-size: 14px; }
  .upload-zone-sub { font-size: 12px; }

  /* ── STAMKAART ────────────────────────────────────────────── */
  .stam-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stam-blok {
    padding: 14px;
  }
  .stam-blok-h {
    font-size: 13px;
  }
  .stam-veld {
    padding: 8px 0;
  }
  .stam-veld-l {
    font-size: 11px;
  }
  .stam-veld-v {
    font-size: 13px;
  }
  .stam-veld input, .stam-veld select {
    font-size: 14px;
    padding: 8px 10px;
    min-height: 40px;
  }

  /* ── PROJECTKENNIS-TEGEL ─────────────────────────────────── */
  .kennis-h {
    font-size: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .kennis-h .btn { font-size: 12px; padding: 8px 12px; }
  .kennis-blok {
    padding: 12px;
    margin-bottom: 10px;
  }
  .kennis-blok-h {
    font-size: 13px;
  }
  .kennis-veld {
    padding: 6px 0;
    flex-direction: column;
    gap: 2px;
  }
  .kennis-veld-l {
    font-size: 11px;
    min-width: 0;
  }
  .kennis-veld-v {
    font-size: 13px;
  }

  /* ── V&G PLAN: leesbaar op mobiel, niet "edit-on-mobile" ──── */
  /* Het V&G plan wordt op mobiel als "alleen lezen" getoond,
     met inschakelbare bewerk-modus. Tabellen scrollen horizontaal. */
  .vg-bar {
    padding: 8px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .vg-bar-status { flex-wrap: wrap; }
  .vg-bar-acties {
    flex-wrap: wrap;
    gap: 6px;
  }
  .vg-bar-acties .btn {
    flex: 1;
    min-width: 100px;
    padding: 8px 10px;
    font-size: 12px;
    min-height: 38px;
  }
  .vg-doc-wrap {
    max-width: 100%;
  }
  .vg-doc-edit {
    padding: 20px 16px;
    font-size: 13px;
    line-height: 1.5;
  }
  .vg-doc-edit h1 { font-size: 22px; }
  .vg-doc-edit h2 {
    font-size: 16px;
    margin: 22px 0 8px;
  }
  .vg-doc-edit h3 { font-size: 13px; }
  .vg-doc-edit table {
    font-size: 12px;
  }
  .vg-doc-edit th, .vg-doc-edit td {
    padding: 5px 7px;
  }
  /* Brede tabellen op mobiel: omsluiten in scroll-wrapper als ze niet passen */
  .vg-doc-edit table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── MEDEWERKERS-TABEL ───────────────────────────────────── */
  .mw-intro { padding: 12px 14px; font-size: 13px; }
  .mw-acties {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .mw-acties .btn { width: 100%; }
  .mw-tabel-wrap {
    overflow-x: auto;
  }
  .mw-tabel {
    min-width: 480px;
    font-size: 13px;
  }
  .mw-tabel th, .mw-tabel td {
    padding: 8px 10px;
  }
  .mw-inp, .mw-sel {
    font-size: 13px;
    padding: 8px 10px;
    min-height: 38px;
  }
  .mw-x {
    padding: 6px 10px;
    min-height: 36px;
  }

  /* ── MODALS (nieuw project, weegbon, etc.) ──────────────── */
  .modal-bg {
    padding: 16px;
    align-items: flex-start;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    margin: 16px auto;
    padding: 20px 18px;
    overflow-y: auto;
  }
  .modal-h {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .fg { margin-bottom: 12px; }
  .fl { font-size: 12px; }
  .fi {
    font-size: 14px;
    padding: 10px 12px;
    min-height: 40px;
  }
  .g2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .modal-knoppen {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-knoppen .btn {
    width: 100%;
    padding: 12px;
    min-height: 44px;
  }

  /* ── DROPDOWN / POPOVER MENUs ─────────────────────────── */
  .user-menu {
    right: 8px;
    left: 8px;
    width: auto;
    min-width: 0;
  }

  /* ── ALGEMENE KNOPPEN: minimum tap-target 44px ─────────── */
  .btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* ── TOAST ───────────────────────────────────────────── */
  .up-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    font-size: 13px;
    text-align: center;
  }
}

/* ============================================================================
   TABLET: 640-1024px — compactere desktop-versie
   ============================================================================ */
@media (min-width: 640px) and (max-width: 1024px) {
  /* Navbar: iconen zonder labels, behalve Overzicht */
  .nav-home span { display: none; }
  .nav-home { padding: 8px 12px; }
  .nav-home[title="Naar overzicht"] span { display: inline; }

  /* Tegelgrid: 2 kolommen */
  .tegel-grid { grid-template-columns: 1fr 1fr; }

  /* Home-grid: 2 kolommen */
  .home-grid { grid-template-columns: 1fr 1fr; }

  /* Doc-grid: 2 kolommen */
  .doc-grid { grid-template-columns: 1fr 1fr; }

  /* Stamkaart: 2 kolommen waar het past */
  .stam-grid { grid-template-columns: 1fr 1fr; }

  /* V&G en Logboek doc-wrap iets compacter */
  .vg-doc-edit { padding: 28px 32px; }
  .lb-doc { padding: 28px 32px; }
}

/* ============================================================================
   TOGGLE "MIJN WERK VANDAAG" — knop in navbar
   Zichtbaar voor alle gebruikers, niet alleen op telefoon. Tablet-gebruikers
   die snel in het Logboek willen kunnen 'm tappen.
   ============================================================================ */

.nav-mobiel-knop {
  background: transparent;
  border: none;
  padding: 7px 13px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.nav-mobiel-knop:hover { background: rgba(255,255,255,.1); color:#fff; }
.nav-mobiel-knop i { font-size: 15px; }

@media (max-width: 640px) {
  .nav-mobiel-knop span { display: none; }
  .nav-mobiel-knop {
    padding: 8px;
    min-width: 38px;
    justify-content: center;
  }
}

/* ============================================================================
   WERKVOORBEREIDING CLUSTERS — sluit aan op bestaande VDZ-stijl
   ============================================================================
   Hergebruikt: .vg-bar, .vg-bar-pill, .lb-tabs/.lb-tab, .btn, .btn-b
   Nieuwe klassen: .wp-info-blok, .wp-rij, .wp-team-* \u2014 alle gebaseerd
   op de bestaande tegel/blok-stijl (.fase-blok / .tool-kaart).
   ============================================================================ */

/* ── Info-blok: zelfde stijl als .fase-blok zonder gekleurde streep ───── */
.wp-info-blok {
  background: var(--wit);
  border: 1.5px solid var(--rand);
  border-radius: 14px;
  padding: 1.4rem 1.6rem 1.5rem;
  margin-bottom: 1rem;
}
.wp-info-blok.wp-leeg-blok {
  background: #fafbfc;
  border-style: dashed;
  border-color: #d9dee6;
}
.wp-info-blok .wp-h {
  margin: 0 0 .7rem;
  font-size: 16px;
  font-weight: 800;
  color: var(--blauw);
  font-family: 'Barlow Condensed',sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.wp-info-blok .wp-p {
  margin: 0 0 .8rem;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
}
.wp-info-blok .wp-p:last-child { margin-bottom: 0; }
.wp-info-blok .wp-p.wp-leeg { color: var(--t3); font-style: italic; }
.wp-info-blok .wp-p.wp-hint { color: var(--t3); font-size: 12px; }
.wp-info-blok.wp-leeg-blok .wp-p { color: var(--t3); }

.wp-info-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.wp-blok-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}
.wp-blok-h .wp-h { margin: 0; }

/* ── Meldingen-lijst: rijen als nette kaarten ─────────────────────────── */
.wp-lijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wp-rij {
  background: var(--wit);
  border: 1.5px solid var(--rand);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  transition: border-color .15s, background .15s;
}
.wp-rij:hover { border-color: #b8c8e6; }
.wp-rij.wp-status-verleend {
  background: #f5fbf5;
  border-color: #cde6cf;
}
.wp-rij.wp-status-todo {
  background: #fdf6f6;
  border-color: #e8c5c5;
}
.wp-rij.wp-status-aangevraagd {
  background: #fdfaf3;
  border-color: #e8d6a5;
}

.wp-rij-naam {
  flex: 1 1 240px;
  min-width: 200px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wp-opt {
  font-size: 10px;
  color: var(--t3);
  font-weight: 500;
  background: #f0f2f5;
  padding: 2px 6px;
  border-radius: 3px;
}
.wp-x {
  background: none;
  border: none;
  color: var(--t3);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
}
.wp-x:hover { color: #a33; }

.wp-rij-velden {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.wp-sel, .wp-inp {
  padding: 7px 10px;
  border: 1.5px solid var(--rand);
  border-radius: 5px;
  font-size: 12px;
  background: var(--wit);
  font-family: inherit;
  font-weight: 600;
  color: var(--t1);
}
.wp-sel:focus, .wp-inp:focus {
  outline: none;
  border-color: var(--blauw);
}
.wp-inp { font-weight: 400; width: 140px; }
.wp-inp-date { width: 145px; }
.wp-rij.wp-status-verleend .wp-sel { background: #e8f4ec; color: #2d7a4a; border-color: #a5d6ac; }
.wp-rij.wp-status-todo .wp-sel { background: #fef0f0; color: #a33; border-color: #f0c5c5; }
.wp-rij.wp-status-aangevraagd .wp-sel { background: #fdf2dc; color: #8a5200; border-color: #e8c87a; }


/* ── Mobiel ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wp-info-blok { padding: 1.2rem 1.2rem 1.3rem; }
  .wp-rij { padding: 12px 14px; gap: 10px; }
  .wp-rij-velden { width: 100%; }
  .wp-sel, .wp-inp { flex: 1 1 auto; min-width: 0; width: auto; }
  .wp-inp-date { flex: 1 1 100%; }
}
/* ============================================================================
   MATERIEEL-STAMTABEL  (stap 30)
   --------------------------------------------------------------------------
   Plak deze regels onderaan css/stijl.css.
   ========================================================================= */

/* ── Container die alle overzicht-onderdelen omvat als 1 witte kaart ──── */
.mat-tegel {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Header-strook bovenaan */
.mat-bar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mat-titel { font-size: 16px; font-weight: 600; color: var(--blauw); }
.mat-sub { font-size: 12px; color: var(--t3); margin-top: 3px; }
.mat-bar-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mat-zoek-wrap { position: relative; }
.mat-zoek-icoon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--t3); font-size: 14px;
  pointer-events: none;
}
.mat-zoek-inp {
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--rand);
  border-radius: 6px; font-size: 13px;
  font-family: inherit; width: 240px;
  box-sizing: border-box; background: #fff;
}
.mat-zoek-inp:focus { outline: none; border-color: var(--blauw); }
.mat-toevoeg-knop {
  background: var(--blauw); color: #fff;
  border: 1px solid var(--blauw);
  padding: 7px 14px; font-size: 12px;
  font-weight: 600; font-family: inherit;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.mat-toevoeg-knop:hover { background: var(--blauw2); }

/* Filter-strook eronder */
.mat-filter {
  padding: 10px 20px;
  background: #f7f9fc;
  border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 12px;
}
.mat-filter-knoppen {
  display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.mat-filter-lbl { color: var(--t3); font-size: 11px; margin-right: 2px; }
.mat-filterknop {
  background: #fff; border: 1px solid var(--rand);
  color: var(--t2);
  padding: 4px 12px; font-size: 11px;
  border-radius: 999px; cursor: pointer;
  font-family: inherit;
}
.mat-filterknop:hover { border-color: var(--blauw); color: var(--blauw); }
.mat-filterknop.on { background: var(--blauw); color: #fff; border-color: var(--blauw); }
.mat-filterknop.mat-rood { background: #fcebeb; color: #791f1f; border-color: #f09595; }
.mat-filterknop.mat-rood.on { background: #c33; color: #fff; border-color: #c33; }
.mat-filterknop.mat-oker { background: #faeeda; color: #633806; border-color: #ef9f27; }
.mat-filterknop.mat-oker.on { background: #d27a0a; color: #fff; border-color: #d27a0a; }

.mat-machinist-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 4px;
}
.mat-machinist-lbl { color: var(--t3); font-size: 11px; }
.mat-machinist-sel,
.mat-coord-sel {
  border: 1px solid var(--rand); padding: 3px 8px;
  font-size: 11px; border-radius: 4px;
  font-family: inherit; background: #fff;
  color: var(--t1);
}
.mat-mail-knop {
  background: #e9eff6; color: var(--blauw);
  border: 1px solid var(--blauw); padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; margin-left: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.mat-mail-knop:hover { background: var(--blauw); color: #fff; }

.mat-coord {
  color: var(--t3); font-size: 11px;
  display: inline-flex; align-items: center; gap: 5px;
}
.mat-coord-sel { margin-left: 4px; }

/* Lege staat */
.mat-leeg {
  text-align: center; padding: 60px 20px; color: var(--t2);
}
.mat-leeg p { margin: 12px 0; font-size: 14px; }
.mat-leeg-sub { font-size: 12px; color: var(--t3); }

/* Tabel */
.mat-tabel {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; table-layout: fixed;
}
.mat-tabel th {
  text-align: left; padding: 9px 12px;
  font-weight: 600; font-size: 11px;
  color: var(--t3); background: #f7f9fc;
  border-bottom: 1px solid var(--rand);
}
.mat-tabel td {
  border-bottom: 1px solid var(--rand);
  padding: 10px 12px;
  vertical-align: middle;
}
.mat-tabel tr:last-child td { border-bottom: none; }
.mat-tabel tr.mat-rij { cursor: pointer; transition: background .12s; }
.mat-tabel tr.mat-rij:hover { background: #f9fbfd; }
.mat-tabel tr.mat-rij-rood { background: #fcebeb; }
.mat-tabel tr.mat-rij-rood:hover { background: #fbe0e0; }
.mat-tabel tr.mat-rij-oker { background: #faeeda; }
.mat-tabel tr.mat-rij-oker:hover { background: #f5e3c4; }
.mat-tabel tr.mat-rij-open { background: #e9eff6 !important; }

.mat-chev { color: var(--t3); width: 30px; text-align: center; padding: 10px 0 !important; }
.mat-rij-open .mat-chev { color: var(--blauw); }

.mat-naam { font-weight: 600; color: var(--t1); font-size: 12.5px; }
.mat-naam-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }
.mat-cel-mut { color: var(--t2); font-size: 12px; }
.mat-cel-mini { font-size: 10.5px; color: var(--t3); margin-top: 2px; }

.mat-keur-datum { font-size: 12px; }
.mat-keur-cel.mat-keur-verlopen .mat-keur-datum { color: #791f1f; font-weight: 600; }
.mat-keur-cel.mat-keur-verlopen .mat-cel-mini { color: #993356; }
.mat-keur-cel.mat-keur-bijna .mat-keur-datum { color: #633806; font-weight: 600; }
.mat-keur-cel.mat-keur-bijna .mat-cel-mini { color: #854f0b; }

/* Status-pillen */
.mat-pil {
  display: inline-block; font-size: 10.5px;
  padding: 2px 9px; border-radius: 999px; font-weight: 600;
}
.mat-pil-rood   { background: #f09595; color: #4a1b0c; }
.mat-pil-oker   { background: #ef9f27; color: #412402; }
.mat-pil-groen  { background: #c0dd97; color: #173404; }
.mat-pil-grijs  { background: #e6e6e6; color: #555;    }

/* Vandaag-pil (recente inzet) */
.mat-vandaag-pil {
  display: inline-block; font-size: 10.5px;
  padding: 2px 8px; border-radius: 4px;
  background: #e9eff6; color: var(--blauw);
  font-weight: 600;
}

/* Voet van de tegel */
.mat-voet {
  padding: 10px 20px;
  background: #f7f9fc;
  border-top: 1px solid var(--rand);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--t3);
}
.mat-teller { font-size: 11.5px; color: var(--t3); }
.mat-voet-rechts a {
  color: var(--blauw); text-decoration: none;
  margin-left: 12px;
}
.mat-voet-rechts a:hover { text-decoration: underline; }
.mat-voet-rechts i { vertical-align: -2px; }

/* Soorten-paneel (verborgen tot Soorten beheren wordt geklikt) */
.mat-soorten-paneel {
  background: #fff; border: 1px solid var(--rand);
  border-radius: 10px; padding: 14px 18px;
  margin-bottom: 1rem;
}
.mat-soorten-h {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: var(--blauw); font-size: 13px;
  margin-bottom: 6px;
}
.mat-soorten-sluit {
  background: none; border: none; cursor: pointer;
  color: var(--t3); padding: 2px 6px;
}
.mat-soorten-sluit:hover { color: var(--blauw); }

/* Stamkaart (uitgevouwen rij) */
.mat-stam-rij { background: #eef3fa !important; }
.mat-stam-td  { padding: 0 !important; border-bottom: 2px solid var(--rand) !important; }
.mat-stam     { padding: 14px 18px 18px; background: #eef3fa; }
.mat-stam-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.mat-stam-titel {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  font-weight: 700; color: var(--blauw);
}
.mat-stam-titel i { color: var(--blauw); }

.mat-blok {
  background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px;
}
.mat-blok-h {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--t3); margin-bottom: 10px;
}
.mat-blok-h-sub { text-transform: none; letter-spacing: 0; font-size: 10px; color: var(--t3); }

.mat-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; }
.mat-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px 14px; }
.mat-veld { display: flex; flex-direction: column; gap: 3px; }
.mat-veld > span {
  font-size: 11px; color: var(--t3);
}
.mat-veld input, .mat-veld select {
  border: 1px solid var(--rand); padding: 5px 8px; font-size: 12.5px;
  border-radius: 4px; font-family: inherit; background: #fff;
  width: 100%; box-sizing: border-box;
}
.mat-veld input:focus, .mat-veld select:focus {
  outline: none; border-color: var(--blauw); background: #fafcff;
}

.mat-notitie {
  width: 100%; min-height: 60px; box-sizing: border-box;
  border: 1px solid var(--rand); border-radius: 4px;
  font-family: inherit; font-size: 12.5px; padding: 6px 8px; background: #fff;
}

.mat-keur-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.mat-keur-tabel th, .mat-keur-tabel td {
  border-bottom: 1px solid var(--rand); padding: 6px 8px;
  text-align: left; vertical-align: middle;
}
.mat-keur-tabel th {
  background: #f7f9fc; color: var(--t3); font-weight: 600;
  font-size: 10.5px; text-transform: none;
}
.mat-keur-tabel tr:last-child td { border-bottom: none; }
.mat-keur-inp {
  border: 1px solid var(--rand); padding: 4px 6px; font-size: 12px;
  border-radius: 4px; font-family: inherit; background: #fff;
  width: 100%; box-sizing: border-box;
}
.mat-keur-inp:focus { outline: none; border-color: var(--blauw); background: #fafcff; }
.mat-keur-inp-mini { margin-top: 3px; font-size: 11px; color: var(--t3); }
.mat-keur-leeg {
  padding: 12px; background: #f7f9fc; color: var(--t3);
  font-size: 12px; border-radius: 4px; border: 1px dashed var(--rand);
}
.mat-keur-let { display: block; margin-top: 4px; color: #a06400; font-style: italic; font-size: 11px; }
.mat-x-mini {
  background: transparent; border: none; cursor: pointer;
  color: var(--t3); padding: 4px; border-radius: 4px;
}
.mat-x-mini:hover { color: #a33; background: rgba(170,51,51,.08); }

.mat-bw-houder { font-size: 12px; }
.mat-bw-laden { color: var(--t3); padding: 8px 0; font-size: 12px; }
.mat-bw-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.mat-bw-tabel th, .mat-bw-tabel td {
  border-bottom: 1px solid var(--rand); padding: 7px 8px;
  text-align: left; vertical-align: middle;
}
.mat-bw-tabel th {
  background: #f7f9fc; color: var(--t3); font-weight: 600;
  font-size: 10.5px;
}
.mat-bw-tabel tr.mat-bw-oud td { color: var(--t3); }
.mat-bw-tabel tr:last-child td { border-bottom: none; }
.mat-bw-knop {
  background: transparent; border: 1px solid var(--rand); cursor: pointer;
  color: var(--t2); padding: 3px 6px; border-radius: 4px;
  margin-left: 2px; font-size: 11px;
}
.mat-bw-knop:hover { border-color: var(--blauw); color: var(--blauw); }
.mat-bw-knop-x:hover { color: #a33; border-color: #a33; background: rgba(170,51,51,.06); }
.mat-bw-voet { margin-top: 6px; font-size: 11px; color: var(--t3); }

.mat-inzet {
  background: #e9eff6; color: var(--blauw2); padding: 8px 12px;
  border-radius: 6px; font-size: 12px; display: flex; gap: 10px;
  align-items: center; border: 1px solid var(--rand);
}
.mat-inzet i { color: var(--blauw); font-size: 14px; }

.mat-soorten {
  margin-top: 18px; background: #fff; border: 1px solid var(--rand);
  border-radius: 8px; padding: 10px 14px;
}
.mat-soorten summary {
  cursor: pointer; font-weight: 600; color: var(--blauw); font-size: 13px;
}
.mat-hint { font-size: 12px; color: var(--t3); margin: 6px 0; }
.mat-soorten-wrap { overflow-x: auto; margin-top: 6px; }
.mat-soorten-tabel {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.mat-soorten-tabel th, .mat-soorten-tabel td {
  border-bottom: 1px solid var(--rand); padding: 6px 8px; text-align: left;
}
.mat-soorten-tabel th { background: #f7f9fc; color: var(--t3); font-weight: 600; font-size: 11px; }

/* Mobile: stamtegel scrollt horizontaal, stamkaart-grid 1 kolom */
@media (max-width: 720px) {
  .mat-tabel-wrap { overflow-x: auto; }
  .mat-tabel { min-width: 760px; }
  .mat-grid-3, .mat-grid-4 { grid-template-columns: 1fr 1fr; }
  .mat-stam { padding: 10px 12px 14px; }
}
@media (max-width: 480px) {
  .mat-grid-3, .mat-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   MATERIEEL-STAMTABEL — STAP 31 (uitgebreid dossier)
   ========================================================================= */

/* Brandstof-totaal onder tankbeurten-tabel */
.mat-tank-totaal {
  margin-top: 6px; padding: 6px 10px;
  background: #f7f9fc; border-radius: 4px;
  font-size: 11.5px; color: var(--t2);
  border: 1px dashed var(--rand);
}

/* Foto-galerij */
.mat-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.mat-foto-tegel {
  position: relative; background: #fff; border: 1px solid var(--rand);
  border-radius: 6px; padding: 6px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mat-foto-tegel:hover {
  border-color: var(--blauw);
  box-shadow: 0 2px 8px rgba(26,58,107,.08);
}
.mat-foto-img {
  width: 100%; height: 110px; object-fit: cover;
  border-radius: 4px; display: block; background: #f0f3f7;
}
.mat-foto-leeg {
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 28px;
}
.mat-foto-info {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 10.5px; color: var(--t3);
}
.mat-foto-omschr {
  margin-top: 3px; font-size: 11px; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mat-foto-pil {
  background: var(--rand); color: var(--t2);
  padding: 1px 6px; border-radius: 999px; font-size: 9.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.mat-foto-pil-rood {
  background: #fcebeb; color: #791f1f;
}
.mat-foto-weg {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.85);
  color: #a33; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.mat-foto-tegel:hover .mat-foto-weg { opacity: 1; }
.mat-foto-weg:hover { background: #a33; color: #fff; }
.mat-foto-datum { font-size: 10.5px; }

/* Vaste documenten — 6 slots */
.mat-vdoc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.mat-vdoc {
  background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  padding: 14px 12px; text-align: center; transition: all .15s;
}
.mat-vdoc-leeg {
  border: 1px dashed var(--rand); cursor: pointer;
  background: #fafbfd; color: var(--t3);
}
.mat-vdoc-leeg:hover {
  border-color: var(--blauw); background: #f0f4ff; color: var(--blauw);
}
.mat-vdoc-vol {
  background: #f7faf3; border-color: #c0dd97;
}
.mat-vdoc-icon { font-size: 22px; color: inherit; display: block; margin-bottom: 4px; }
.mat-vdoc-vol .mat-vdoc-icon { color: #5a8430; }
.mat-vdoc-naam {
  font-size: 12px; font-weight: 600; color: var(--blauw);
  margin-bottom: 2px;
}
.mat-vdoc-bestand {
  font-size: 10.5px; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.mat-vdoc-uploadtip {
  font-size: 10.5px; color: var(--t3); font-style: italic;
}
.mat-vdoc-acties {
  display: flex; justify-content: center; gap: 4px;
}

@media (max-width: 720px) {
  .mat-foto-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .mat-vdoc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .mat-vdoc-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   MOBIEL-VEILIGHEIDSNET — STAP 32
   ----------------------------------------------------------------------------
   Globale fallbacks voor alle schermen zodat niets door de viewport-rand
   gaat op telefoons. Geen functionele wijzigingen, alleen styling.
   Per scherm kan later mobiel-first verfijning komen.
   ========================================================================= */

@media (max-width: 720px) {
  /* Body-padding zodat content niet tegen schermrand plakt */
  body, .hoofd, .tool-body, .home-wrap {
    min-width: 0;
  }

  /* Iedere knop minimaal 38px hoog voor touch-vriendelijkheid */
  button, .btn, .btn-b, .btn-g {
    min-height: 38px;
    padding-top: 8px; padding-bottom: 8px;
  }

  /* Voorkom dat tekstvelden uit het scherm vallen */
  input[type="text"], input[type="email"], input[type="number"],
  input[type="date"], input[type="password"], input[type="tel"],
  select, textarea {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* iOS zoomt niet in als font >= 16px */
  }

  /* Tabellen die niet specifiek mobiel zijn gemaakt: horizontaal scrollen */
  .scherm-tool table:not(.mobile-ok),
  .hoofd table:not(.mobile-ok) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Dialogen en pop-ups passen op het scherm */
  .modal, .popup, .dialog,
  [role="dialog"], [class*="-modal"], [class*="-popup"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 12px !important;
    box-sizing: border-box;
  }

  /* Project-dropdown was 380px — wordt vol-breedte op mobiel */
  .proj-dd {
    min-width: calc(100vw - 32px) !important;
    left: 50% !important;
    transform: translateX(-50%);
  }

  /* Hero-stats wrappen netjes */
  .hero-stats {
    flex-wrap: wrap;
    gap: 1rem !important;
  }
  .hero-btns {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Drie/vier-koloms grids → één kolom */
  .mat-grid-3, .mat-grid-4 { grid-template-columns: 1fr !important; }

  /* Cards en blokken niet te krap */
  .fase-blok, .tool-kaart, .mat-blok, .wp-info-blok {
    padding: 12px !important;
  }

  /* Filterbalk: knoppen mogen wrappen */
  .mat-filter, .lb-filters, .vg-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Stamkaart-acties (Mail/Verwijder/Sluiten) wrappen op de header */
  .mat-stam-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mat-stam-h > div:last-child {
    flex-wrap: wrap;
  }
}

/* Hele kleine schermen — extra inkrimpen */
@media (max-width: 480px) {
  /* Nav blijft één blok, header-tekst kan inkrimpen */
  .nav-logo-txt b { font-size: 16px; }

  /* Filter-knoppen vol-breedte voor duim-aanrakingen */
  .mat-filterknop {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
  }

  /* Tabel-rijen in stamtegel: meer ruimte tussen rijen */
  .mat-tabel td { padding: 12px 10px; }

  /* Stamkaart-titel mag kleiner */
  .mat-stam-titel { font-size: 13px; }
  .mat-stam-titel span { word-break: break-word; }

  /* Hero kleiner */
  .hero h1 { font-size: 1.8rem !important; }
  .hero p { font-size: 0.95rem !important; }

  /* Modal-dialogs vol-scherm */
  .modal, .popup, .dialog,
  [role="dialog"] {
    border-radius: 8px !important;
  }
}

/* Touch-screens: hover-effects subtieler maken */
@media (hover: none) and (pointer: coarse) {
  .nav-home:hover, .mat-rij:hover, .btn:hover {
    transform: none;
  }
}

/* ============================================================================
   PROJECT-PLOEG — STAP 35
   ---------------------------------------------------------------------------
   Per-project ploeg ipv bedrijfsbrede lijst. Picker-modal voor toevoegen +
   X-knopje op chip om uit ploeg te halen.
   ============================================================================ */

/* Chip-wrap: chip + optionele kleine X erachter */
.lb-team-chip-wrap {
  position: relative; display: inline-flex; align-items: stretch;
}
.lb-team-chip-x {
  background: #fff; border: 1.5px solid var(--rand); border-left: none;
  border-radius: 0 22px 22px 0;
  padding: 0 10px; cursor: pointer;
  color: var(--t3); font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -1.5px; min-height: 40px;
  transition: all .12s;
}
/* Chip die direct gevolgd wordt door X-knop verliest zijn rechter-radius */
.lb-team-chip-wrap .lb-team-chip:has(+ .lb-team-chip-x) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* Fallback voor browsers zonder :has() — kleine compromis maar geen show-stopper */
.lb-team-chip-x:hover {
  color: #a33; border-color: #a33; background: #fff5f5;
}
.lb-team-chip-x i { font-size: 14px; }

/* Lege project-ploeg uitleg */
.lb-team-leeg-uitleg {
  background: #f8f9fb; border: 1px dashed var(--rand);
  border-radius: 8px; padding: 16px;
  font-size: 13px; color: var(--t2); line-height: 1.6;
}
.lb-team-leeg-uitleg p:first-child { margin-top: 0; }
.lb-team-leeg-uitleg p { margin: 0 0 8px; }

/* Picker-modal */
.lb-picker-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.lb-picker-modal {
  background: #fff; border-radius: 12px;
  width: min(520px, 100%); max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.lb-picker-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--rand);
  background: #f6f8fb;
}
.lb-picker-titel {
  font-size: 15px; font-weight: 700; color: var(--blauw);
}
.lb-picker-sub {
  font-size: 11.5px; color: var(--t3); margin-top: 2px;
}
.lb-picker-x {
  background: transparent; border: none; cursor: pointer;
  color: var(--t2); padding: 6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.lb-picker-x:hover { background: rgba(26,58,107,.08); color: var(--blauw); }
.lb-picker-zoekwrap {
  position: relative; padding: 12px 16px;
  border-bottom: 1px solid var(--rand);
}
.lb-picker-zoekwrap .lb-team-zoekicon {
  left: 28px; top: 50%; transform: translateY(-50%);
}
.lb-picker-zoekwrap .lb-team-zoek {
  padding-left: 36px;
}
.lb-picker-lijst {
  flex: 1; overflow-y: auto; padding: 8px;
}
.lb-picker-rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 10px 12px; cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  min-height: 44px;
}
.lb-picker-rij:hover {
  background: #f0f4fa; border-color: var(--blauw);
}
.lb-picker-naam {
  font-size: 13.5px; color: var(--t1); font-weight: 600;
}
.lb-picker-functie {
  font-size: 11.5px; color: var(--t3); margin-top: 2px;
}
.lb-picker-plus {
  font-size: 18px; color: var(--blauw); flex-shrink: 0;
}

@media (max-width: 720px) {
  .lb-team-chip-x { min-height: 48px; padding: 0 12px; }
  .lb-team-chip-x i { font-size: 16px; }
  .lb-team-chips:has(.lb-team-chip-wrap) {
    /* Verlaat grid bij wrap-chips zodat X-knop ernaast past */
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .lb-picker-modal {
    width: 100%; max-height: 90vh;
    border-radius: 12px 12px 0 0;
    align-self: flex-end;
  }
  .lb-picker-overlay { align-items: flex-end; padding: 0; }
}

/* ── Meldingen & vergunningen — uitklapbare kaarten (wpmeld, stap 33) ───── */
.wp-kaart{background:#fff;border:1.5px solid var(--rand);border-radius:12px;margin-bottom:12px;overflow:hidden}
.wp-head{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;user-select:none}
.wp-head:hover{background:#f7f9fc}
.wp-chev{transition:transform .15s;color:var(--t3)}
.wp-kaart.open .wp-chev{transform:rotate(90deg)}
.wp-kaart.open .wp-body{display:block}
.wp-kaart.clo .wp-body{display:none}
.wp-body{padding:2px 18px 18px;border-top:1px solid rgba(0,54,113,.1)}
.wp-sectiekop{font-size:12px;font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 4px}
.wp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(0,54,113,.08);font-size:13px}
.wp-row:last-child{border-bottom:none}
.wp-lbl{color:var(--t3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;flex:0 0 210px}
.wp-val{color:var(--t1);font-weight:600;text-align:right;flex:1;min-width:0;word-break:break-word}
.wp-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;white-space:nowrap}
.wp-mini{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px}
@media(max-width:640px){.wp-lbl{flex-basis:130px}.wp-head{flex-wrap:wrap;gap:8px}}

/* ── Disciplinekeuze bij nieuw project (verplicht taggen) ───────────────── */
.disc-keuze{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
@media(min-width:560px){.disc-keuze{grid-template-columns:1fr 1fr 1fr}}
.disc-optie{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px solid var(--lijn,#d7dde5);border-radius:8px;cursor:pointer;background:#fff;transition:border-color .12s,background .12s}
.disc-optie:hover{border-color:var(--blauw3)}
.disc-optie input{position:absolute;opacity:0;width:0;height:0}
.disc-vink{flex:0 0 34px;width:34px;height:34px;border-radius:7px;background:var(--blauw-soft);color:var(--blauw);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .12s,color .12s}
.disc-tekst{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.disc-tekst b{font-size:13px;color:var(--t1);font-weight:700}
.disc-tekst span{font-size:11px;color:var(--t3)}
.disc-optie:has(input:checked){border-color:var(--blauw);background:var(--blauw-soft)}
.disc-optie:has(input:checked) .disc-vink{background:var(--blauw);color:#fff}
.disc-optie:has(input:focus-visible){box-shadow:0 0 0 3px rgba(26,58,107,.18)}
.disc-fout{margin-top:8px;font-size:12px;font-weight:600;color:var(--rood);background:var(--rood-bg);padding:7px 10px;border-radius:6px}

/* ── Disciplinekolommen binnen een fase ─────────────────────────────────── */
.disc-sectie{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin:18px 2px 9px}
.disc-kopr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:8px}
.disc-kop{padding:9px 12px;border-radius:9px;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800}
.disc-kop.disc-asbest{background:var(--rood-bg);color:var(--rood)}
.disc-kop.disc-sloop{background:var(--groen-bg);color:var(--groen)}
.disc-kop.disc-bodem{background:#faeeda;color:#854f0b}
.disc-kop.disc-uit{filter:blur(2px);opacity:.5}
.disc-rij{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:8px}
.disc-cel{background:#fff;border:1px solid var(--rand);border-radius:8px;padding:10px 11px;border-left-width:3px;cursor:pointer;transition:background .12s,box-shadow .12s}
.disc-cel:hover{background:var(--blauw-soft);box-shadow:0 2px 8px rgba(0,54,113,.08)}
.disc-cel.dc-asbest{border-left-color:#d85a30}
.disc-cel.dc-sloop{border-left-color:#1d9e75}
.disc-cel.dc-bodem{border-left-color:#ba7517}
.disc-cel .dc-titel{font-size:12px;font-weight:700;line-height:1.25;color:var(--t1)}
.disc-cel .dc-sub{font-size:10px;color:var(--t3);margin-top:2px}
.disc-cel.dc-accent .dc-titel{color:var(--rood)}
.disc-cel-leeg{background:transparent;border:1px dashed var(--rand);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#c2c7d0;min-height:44px}
.disc-blur{filter:blur(2.5px);opacity:.5;pointer-events:none;user-select:none}
@media(max-width:680px){.disc-kopr,.disc-rij{grid-template-columns:1fr}.disc-cel-leeg{display:none}}

/* ── API-sleutel invoerveld in de V&G-overlay ───────────────────────────── */
.vg-ov-sleutel{margin:14px 0 4px;text-align:left}
.vg-ov-sleutel #vg-sleutel-input{width:100%;box-sizing:border-box;padding:11px 13px;font-size:14px;border:1px solid var(--rand);border-radius:9px;font-family:ui-monospace,Menlo,Consolas,monospace}
.vg-ov-sleutel #vg-sleutel-input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-soft)}
.vg-sleutel-toon{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);margin-top:8px;cursor:pointer}
.vg-sleutel-fout{font-size:12px;color:#b3261e;margin-top:8px;min-height:1em}

/* ── Asbest bron-selectie (§1.9) ─────────────────────────────────────────── */
.asb-bron-modal{max-width:780px;width:94vw;max-height:88vh;display:flex;flex-direction:column}
.asb-bron-modal .asb-sub{color:#555;font-size:13px;line-height:1.5;margin:.2rem 0 1rem}
.asb-bron-acties-top{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.asb-bronlijst{overflow:auto;flex:1;padding-right:4px}
.asb-bronrij{border:1px solid #e2e2e2;border-radius:8px;padding:12px;margin-bottom:12px;background:#fafafa}
.asb-bronrij-kop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.asb-bronrij-kop strong{font-size:14px}
.asb-mini-x{margin-left:auto;border:none;background:#eee;border-radius:5px;width:26px;height:26px;cursor:pointer;font-size:16px;line-height:1}
.asb-mini-x:hover{background:#e0c4c4;color:#a32d2d}
.asb-vlag{font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:99px;font-weight:600}
.asb-vlag.ok{background:#d8efd8;color:#246b24}
.asb-vlag.mid{background:#fdf0cf;color:#8a6d18}
.asb-vlag.laag{background:#f3dada;color:#9a3030}
.asb-bronrij-velden{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.asb-bronrij-velden label,.asb-tekstkeuze{display:flex;flex-direction:column;font-size:12px;color:#444;gap:3px}
.asb-bronrij-velden input,.asb-bronrij-velden select,.asb-tekstkeuze select{
  padding:7px 8px;border:1px solid #ccc;border-radius:5px;font-size:13px;background:#fff}
.asb-tekstkeuze{margin-bottom:8px}
.asb-preview{font-size:12px;color:#555;line-height:1.5;background:#fff;border:1px dashed #ddd;border-radius:6px;padding:8px 10px}
.asb-bron-voet{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;border-top:1px solid #eee;padding-top:12px}
.asb-leeg{color:#888}
.asb-bron{margin:10px 0 16px}
.asb-bron h4{margin:0 0 4px;font-size:14px}
.asb-agent{margin-top:6px}
@media(max-width:560px){.asb-bronrij-velden{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════
   WERKBRIEFING BODEMSANERING (bodem-briefing.js)
   Verschijnt vóór het genereren van het V&G-plan.
   ════════════════════════════════════════════════════════════════════════ */

.bb-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(16, 22, 36, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.bb-kaart {
  background: #fff; border-radius: 12px; width: 100%; max-width: 880px;
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(10, 16, 30, .3); overflow: hidden;
}

/* bezig-stand */
.bb-bezig { padding: 64px 28px; text-align: center; color: #6a7681; }
.bb-bezig i { font-size: 30px; color: #18395E; }
.bb-bezig p { margin: 14px 0 0; font-size: 14.5px; }
.bb-spin { display: inline-block; animation: bb-draai 1s linear infinite; }
@keyframes bb-draai { to { transform: rotate(360deg); } }

/* kop */
.bb-kop { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 12px; }
.bb-merk { display: flex; align-items: center; gap: 10px; }
.bb-merk img { height: 40px; width: auto; display: block; }
.bb-merk .bb-nm { font-size: 18px; font-weight: 600; color: #18395E; }
.bb-stap { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #8a7f00; font-weight: 700; }
.bb-baan { height: 4px; background: #C3C000; }

.bb-titel { padding: 18px 22px 2px; }
.bb-titel h1 { margin: 0 0 4px; font-size: 22px; color: #18223B; letter-spacing: -.3px; }
.bb-titel p { margin: 0; color: #6a7681; font-size: 14px; }
.bb-proj {
  display: inline-block; margin-top: 11px; font-size: 13px; background: #f5f6f8;
  border-left: 3px solid #C3C000; padding: 6px 11px; border-radius: 0 4px 4px 0; color: #18223B;
}

.bb-scroll { overflow-y: auto; flex: 1; }
.bb-sectie { padding: 20px 22px; border-top: 1px solid #eef0f3; }
.bb-sectie:first-child { border-top: none; }
.bb-sk { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.bb-sk h2 { margin: 0; font-size: 15px; color: #18223B; font-weight: 700; }
.bb-tel { font-size: 11px; color: #9aa2ac; font-weight: 600; }
.bb-sub { margin: 0 0 14px; font-size: 13.5px; color: #6a7681; }

.bb-rij { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bb-veld { flex: 1; min-width: 200px; }
.bb-kaart label { display: block; font-size: 12.5px; font-weight: 600; color: #43505f; margin-bottom: 5px; }
.bb-opt { font-weight: 400; color: #9aa2ac; }
.bb-kaart input[type=text], .bb-kaart input[type=date], .bb-kaart textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #dfe3ea; border-radius: 7px;
  font: 14px 'Segoe UI', Arial, sans-serif; color: #2a3038; background: #fff;
}
.bb-kaart input:focus, .bb-kaart textarea:focus {
  outline: none; border-color: #18395E; box-shadow: 0 0 0 3px rgba(24, 57, 94, .09);
}
.bb-kaart textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.bb-hint { margin-top: 5px; font-size: 12px; color: #98a0aa; }

/* het voorstel */
.bb-voorstel { border: 2px solid #B0C90E; border-radius: 11px; background: #fbfdf3; overflow: hidden; }
.bb-vs-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: #f4f9e4; border-bottom: 1px solid #e0ebc0;
}
.bb-vs-links { display: flex; align-items: center; gap: 11px; }
.bb-dot { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; }
.bb-vs-nm { font-size: 18px; font-weight: 700; color: #18223B; line-height: 1.2; }
.bb-vs-nm small {
  display: block; font-size: 11px; font-weight: 600; color: #6f8a3a;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px;
}
.bb-vs-vink {
  font-size: 12px; font-weight: 700; color: #4a7a2c; background: #e6f2cd;
  border: 1px solid #cfe3a0; border-radius: 20px; padding: 5px 12px; white-space: nowrap;
}
.bb-vs-body { padding: 14px 16px; }
.bb-vs-red { font-size: 13.5px; color: #3d4a2a; line-height: 1.6; margin: 0 0 12px; }
table.bb-bewijs { border-collapse: collapse; width: 100%; font-size: 12.5px; background: #fff; border-radius: 7px; overflow: hidden; }
table.bb-bewijs td { padding: 7px 11px; border-bottom: 1px solid #eef1e6; vertical-align: top; }
table.bb-bewijs tr:last-child td { border-bottom: none; }
table.bb-bewijs td.l { color: #6a7681; width: 44%; }
table.bb-bewijs td.v { color: #18223B; font-weight: 600; }
table.bb-bewijs td.v.acc { color: #4a7a2c; }
table.bb-bewijs td.v .bron { display: block; font-weight: 400; font-size: 11.5px; color: #9aa2ac; margin-top: 1px; }
.bb-vs-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: #f7faee; border-top: 1px solid #e6eed2;
}
.bb-kl { font-size: 12.5px; color: #6a7681; }
.bb-lnk {
  background: none; border: none; color: #18395E; font: 600 13px 'Segoe UI', Arial;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.bb-lnk:hover { color: #0f2540; }

/* geen voorstel — agent twijfelt */
.bb-onzeker {
  background: #fff8e6; border: 1px solid #e8d9a8; border-radius: 9px;
  padding: 13px 15px; margin-bottom: 13px; font-size: 13.5px; color: #5a4a1a; line-height: 1.55;
}
.bb-onzeker-t { font-weight: 700; color: #3a3000; margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.bb-onzeker p { margin: 0 0 5px; }
.bb-onzeker-v { color: #6b5a24; font-style: italic; }

/* klassenlijst */
.bb-klassen { display: none; flex-direction: column; gap: 7px; }
.bb-klassen.bb-open { display: flex; }
.bb-anders.open .bb-klassen { display: flex; }
.bb-kl2 {
  display: flex !important; gap: 10px; align-items: flex-start; border: 1.5px solid #dfe3ea;
  border-radius: 8px; padding: 10px 12px; cursor: pointer; background: #fff; margin: 0 !important;
}
.bb-kl2:hover { border-color: #b9c2cf; background: #fcfcfd; }
.bb-kl2 input { margin: 2px 0 0; flex-shrink: 0; width: 16px; height: 16px; accent-color: #18395E; }
.bb-nm2 { font-weight: 700; font-size: 13px; color: #18223B; display: flex; align-items: center; gap: 7px; margin-bottom: 1px; }
.bb-om2 { font-size: 12.5px; color: #6a7681; line-height: 1.45; display: block; }
.bb-dot2 { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bb-kl2.sel { border-color: #18395E; background: #f4f7fb; }

.bb-anders { display: none; margin-top: 13px; border: 1px solid #dfe3ea; border-radius: 9px; padding: 14px; background: #fff; }
.bb-anders.open { display: block; }
.bb-anders h4 { margin: 0 0 3px; font-size: 13.5px; color: #18223B; }
.bb-aw { margin: 0 0 11px; font-size: 12.5px; color: #6a7681; }
.bb-reden { margin-top: 11px; }

/* vinkjes */
.bb-vink { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bb-vk {
  display: flex !important; align-items: center; gap: 7px; border: 1.5px solid #dfe3ea;
  border-radius: 20px; padding: 7px 13px; font-size: 13px; cursor: pointer;
  background: #fff; color: #43505f; margin: 0 !important; font-weight: 400 !important;
}
.bb-vk:hover { border-color: #b9c2cf; }
.bb-vk input { width: 15px; height: 15px; accent-color: #18395E; margin: 0; }
.bb-vk.sel { border-color: #B0C90E; background: #fbfdf3; color: #18223B; font-weight: 600 !important; }

/* voet */
.bb-voet {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 22px; background: #f5f6f8; border-top: 1px solid #dfe3ea;
}
.bb-li { font-size: 12.5px; color: #6a7681; }
.bb-knoppen { display: flex; gap: 9px; }
.bb-btn {
  padding: 10px 20px; border-radius: 8px; border: 1px solid #dfe3ea; background: #fff;
  color: #43505f; font: 600 14px 'Segoe UI', Arial; cursor: pointer;
}
.bb-btn:hover { background: #f0f2f5; }
.bb-btn.pri { background: #18223B; border-color: #18223B; color: #fff; }
.bb-btn.pri:hover { background: #233054; }

@media (max-width: 640px) {
  .bb-overlay { padding: 0; }
  .bb-kaart { max-height: 100vh; border-radius: 0; }
  .bb-voet { flex-direction: column; align-items: stretch; }
  .bb-knoppen { justify-content: stretch; }
  .bb-btn { flex: 1; }
}

/* ── BUILD-LABEL rechtsonder + wijzigingenpaneel ─────────────────────────── */
#vdz-build:hover { background: #fff !important; color: #18395E !important; border-color: #c9d0d8 !important; }

#vdz-wijzig {
  position: fixed; bottom: 32px; right: 8px; z-index: 9999;
  width: 340px; max-height: 60vh; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dfe3ea; border-radius: 9px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .16); overflow: hidden;
  font: 13px/1.5 'Segoe UI', system-ui, Arial, sans-serif; color: #2a3038;
}
#vdz-wijzig .vw-titel {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; background: #18223B; color: #fff;
  font-size: 12.5px; font-weight: 600;
}
#vdz-wijzig .vw-x {
  background: none; border: none; color: #9aa8bd; font-size: 19px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
#vdz-wijzig .vw-x:hover { color: #fff; }
#vdz-wijzig .vw-lijst { overflow-y: auto; padding: 4px 0; }
#vdz-wijzig .vw-rij { padding: 10px 13px; border-bottom: 1px solid #f0f2f5; }
#vdz-wijzig .vw-rij:last-child { border-bottom: none; }
#vdz-wijzig .vw-rij.nu { background: #fbfdf3; border-left: 3px solid #B0C90E; }
#vdz-wijzig .vw-kop {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
  font-size: 11.5px; color: #8a929c;
}
#vdz-wijzig .vw-kop b { color: #18223B; font-size: 12.5px; }
#vdz-wijzig .vw-kop em {
  font-style: normal; color: #6f8a3a; font-weight: 600;
  background: #eef5da; border-radius: 10px; padding: 1px 7px; font-size: 10.5px;
}
#vdz-wijzig .vw-rij p { margin: 0; font-size: 12.5px; color: #4a5563; line-height: 1.5; }

/* ── CROW 400: rekentabel + blootstelling in de werkbriefing ────────────── */
table.bb-reken { border-collapse: collapse; width: 100%; font-size: 12.5px; background: #fff; border-radius: 7px; overflow: hidden; margin-bottom: 11px; }
table.bb-reken th { background: #eef1e6; color: #4a5a35; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 9px; text-align: left; }
table.bb-reken td { padding: 7px 9px; border-bottom: 1px solid #f0f2ea; vertical-align: middle; }
table.bb-reken tr:last-child td { border-bottom: none; }
table.bb-reken tr.maat { background: #f7fbec; }
table.bb-reken tr.maat td.s { font-weight: 700; }
table.bb-reken td.s { color: #18223B; }
table.bb-reken td.g { color: #4a5563; white-space: nowrap; }
table.bb-reken td.g small { color: #9aa2ac; font-size: 10.5px; }
table.bb-reken td.i { font-weight: 700; color: #4a7a2c; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.bb-reken td.i.over { color: #c0392b; }
table.bb-reken td.k { text-align: right; }
table.bb-reken .pil { display: inline-block; color: #fff; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
table.bb-reken .vl { font-size: 10px; background: #fdebd0; color: #8a5a1a; border-radius: 8px; padding: 1px 6px; font-weight: 600; }
table.bb-reken .cmr { font-size: 10px; background: #fadbd8; color: #922b21; border-radius: 8px; padding: 1px 5px; font-weight: 700; }

.bb-vluchtig { background: #fef5e7; border: 1px solid #f0d5a8; border-radius: 8px; padding: 10px 13px; font-size: 12.5px; color: #7d5a1c; line-height: 1.55; margin-bottom: 10px; }
.bb-vluchtig b { color: #6b4a12; }
.bb-mist { background: #f4f6f8; border: 1px solid #e2e6ea; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: #6a7681; margin-bottom: 10px; }
.bb-mist b { color: #4a5563; }
.bb-mist i { color: #9aa2ac; font-style: italic; }
.bb-bron { font-size: 11.5px; color: #9aa2ac; }

.bb-kaart select { width: 100%; padding: 9px 11px; border: 1px solid #dfe3ea; border-radius: 7px; font: 14px 'Segoe UI', Arial, sans-serif; color: #2a3038; background: #fff; }
.bb-kaart select:focus { outline: none; border-color: #18395E; box-shadow: 0 0 0 3px rgba(24,57,94,.09); }

.bb-bloot-uit { margin-top: 6px; }
.bb-bloot { border: 1.5px solid; border-radius: 9px; padding: 12px 14px; }
.bb-bloot-kop { display: flex; align-items: baseline; gap: 11px; margin-bottom: 7px; }
.bb-bloot-pct { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bb-bloot-lb { font-size: 12.5px; color: #4a5563; font-weight: 600; }
.bb-bloot-lb small { display: block; font-weight: 400; color: #9aa2ac; font-size: 11.5px; margin-top: 2px; }
.bb-bloot p { margin: 0; font-size: 12.5px; color: #5a6472; line-height: 1.55; }