/* Huisstijl Van Thiel United — tokens uit het dashboardpakket (navy kop, 3 px blauwe onderlijn, Oswald + Open Sans) */
:root{
  --navy:#002E54;--blue:#0693E3;--lblue:#EAF3FC;--steel:#D1DBE5;--orange:#E87722;
  --ink:#1d2433;--muted:#6b7385;--line:#e2e8f0;--bg:#f3f6f9;--card:#fff;
  --green:#2f9e63;--red:#dc3545;
  --shadow:0 1px 2px rgba(0,46,84,.06),0 6px 18px rgba(0,46,84,.06);
  --r:15px;--rb:9px;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;
  background:var(--bg);color:var(--ink);font-family:'Open Sans',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:'Oswald',sans-serif;font-weight:600;color:var(--navy);letter-spacing:.3px}
h2{font-size:17px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
button,input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--blue)}

/* kopbalk */
.top{flex:0 0 auto;background:var(--navy);border-bottom:3px solid var(--blue);color:#fff;padding-top:env(safe-area-inset-top)}
.top .in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.top img.logo{height:44px;width:auto;display:block}
.top .title{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:.5px;text-transform:uppercase;border-left:2px solid rgba(255,255,255,.25);padding-left:16px;line-height:1.15}
.top .title small{display:block;font-family:'Open Sans',sans-serif;font-weight:500;color:#9fc4e8;font-size:11px;letter-spacing:.4px;text-transform:none}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.top .title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:var(--rb);overflow:hidden}
.lang button{background:transparent;color:#cfe3f5;border:0;padding:6px 10px;font-weight:700;font-size:12px;cursor:pointer;letter-spacing:.5px}
.lang button.aan{background:var(--blue);color:#fff}
.ibtn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--rb);height:37px;padding:0 12px;font-weight:700;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ibtn:hover{background:var(--blue);border-color:var(--blue)}
.ibtn svg{width:16px;height:16px}
.ibtn[hidden]{display:none}
.mbtn{background:var(--orange);color:#fff;border:0;border-radius:var(--rb);height:37px;padding:0 14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mbtn:hover{filter:brightness(1.07)}
.mbtn .cnt{background:#fff;color:var(--orange);border-radius:10px;padding:0 7px;font-size:11.5px;font-weight:800;min-width:20px;text-align:center;line-height:18px}

/* scrollgebied */
.wrap{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.wrap .in{max-width:1240px;margin:0 auto;padding:18px 16px 24px}
.grid{display:grid;grid-template-columns:minmax(320px,5fr) minmax(360px,7fr);gap:18px;align-items:start}
.grid>section{min-width:0} /* anders rekt de tabel het hele grid op (mobiel) */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.card .sub{color:var(--muted);font-size:12px;margin:-6px 0 12px}

/* formulier */
.fg{display:grid;grid-template-columns:1fr 130px;gap:6px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.fg:last-of-type{border-bottom:0}
.fg label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--navy)}
.fg .help{grid-column:1/-1;color:var(--muted);font-size:11.5px;margin-top:-2px}
.fg input,.fg select,.gt input,.frm input,.frm textarea{border:1px solid var(--line);background:#fff;border-radius:var(--rb);padding:7px 10px;height:37px;color:var(--ink);font-weight:500;width:100%}
.fg select{font-weight:600;color:var(--navy)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(6,147,227,.15)}
input[type=number]{-moz-appearance:textfield}
.gt{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.gt col.c0{width:26px}.gt col.c2,.gt col.c3{width:22%}.gt col.c4{width:24%}
.gt input{min-width:0}
.gt th{text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:4px 6px 6px 0;font-weight:700}
.gt td{padding:3px 6px 3px 0;vertical-align:middle}
.gt td.nr{color:var(--muted);font-weight:700;width:22px;text-align:right;padding-right:8px}
.gt input{height:34px;padding:5px 8px}
.gt input.num{text-align:right;width:100%}
.gt tr.actief td.nr{color:var(--blue)}
.knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.xbtn{border:1px solid var(--line);background:#fff;border-radius:var(--rb);padding:7px 11px;cursor:pointer;color:var(--navy);font-weight:700;font-size:12px;height:37px;display:inline-flex;align-items:center;gap:6px}
.xbtn:hover{background:var(--lblue);border-color:var(--blue)}
.xbtn.wis{color:var(--red);border-color:#f0c2c6}
.xbtn.wis:hover{background:#fdf1f2;border-color:var(--red)}
.pbtn{background:var(--navy);color:#fff;border:0;border-radius:var(--rb);height:37px;padding:0 16px;font-weight:700;cursor:pointer}
.pbtn:hover{background:var(--blue)}

/* uitkomst */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 17px;box-shadow:var(--shadow);min-height:82px}
.kpi .lbl{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.kpi .big{font-family:'Oswald',sans-serif;font-size:29px;font-weight:600;color:var(--navy);margin-top:4px;line-height:1;white-space:nowrap}
.kpi .big small{font-size:15px;color:var(--muted);font-weight:500;margin-left:3px}
.kpi.hero{background:linear-gradient(135deg,var(--navy),var(--blue));border:none;color:#fff}
.kpi.hero .lbl,.kpi.hero .big,.kpi.hero .big small{color:#fff}
.kop{font-size:12.5px;color:var(--navy);font-weight:600;background:var(--lblue);border:1px solid var(--steel);border-radius:var(--rb);padding:7px 10px;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.fchip{display:inline-flex;align-items:center;gap:7px;background:var(--lblue);border:1px solid var(--steel);border-radius:14px;padding:3px 11px;font-size:11.5px;color:var(--navy);font-weight:600}
.warn{background:#fdf3e7;border:1px solid #f0d9bb;border-left:3px solid var(--orange);border-radius:var(--rb);padding:8px 12px;margin:0 0 10px;font-size:12.5px;color:#7a3e0a}
.rol{overflow-x:auto}
.dt{width:100%;border-collapse:collapse;font-size:13px}
.dt th{background:var(--navy);color:#fff;text-align:left;padding:7px 9px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;white-space:nowrap}
.dt td{padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
.dt tr:nth-child(even) td{background:#f8fbfe}
.dt td.n,.dt th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dt td.code{font-weight:700;color:var(--navy);white-space:nowrap}
.dt td.aant{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--navy);text-align:right}
.dt tr.tot td{font-weight:700;background:var(--lblue);border-top:2px solid var(--steel)}
.dt tr.hout td.code{color:#7a5a2a}
.prijs{display:none}
body.intern .prijs{display:table-cell}
body.intern .dt th:nth-child(4),body.intern .dt td:nth-child(4),body.intern .dt th:nth-child(5),body.intern .dt td:nth-child(5){display:none} /* intern: eenheid en kg/st weg, anders 9 kolommen */
.internbalk{display:none;background:#fff7ed;border:1px dashed var(--orange);color:#7a3e0a;border-radius:var(--rb);padding:6px 10px;font-size:12px;margin-bottom:10px}
body.intern .internbalk{display:block}
.noot{color:var(--muted);font-size:11.5px;margin:10px 0 0;line-height:1.5}
.disc{margin-top:10px;padding:8px 12px;border-left:3px solid var(--blue);background:#f8fbfe;font-size:12.5px;color:var(--navy);font-weight:600}
.acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.toast{color:var(--green);font-weight:700;font-size:12.5px;opacity:0;transition:.3s}
.toast.aan{opacity:1}

/* schets, weergave, groepen, aannames */
.schetskaart{padding:10px 14px 6px}
.schets{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:flex-end;justify-content:center}
.schets figure{margin:0;display:flex;flex-direction:column;align-items:center}
.schets figcaption{font-size:10.5px;color:var(--navy);font-weight:700;margin-top:-6px;white-space:nowrap}
.schets svg{display:block;max-width:100%;height:auto}
.noot.klein{margin:4px 0 0;font-size:11px}
.kophead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.kophead h2{margin:0}
.weergave{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.weergave select{border:1px solid var(--line);background:#fff;border-radius:var(--rb);padding:5px 8px;height:32px;color:var(--navy);font-weight:600;font-size:12.5px;text-transform:none;letter-spacing:0}
.dt tr.grp td{background:var(--lblue);color:var(--navy);font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:5px 9px;border-top:1px solid var(--steel)}
.aannames{margin-top:8px;border:1px solid var(--line);border-radius:var(--rb);padding:6px 10px}
.aannames summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--navy)}
.aannames .noot{margin:6px 0 2px}
.printkop{display:none}
.mr .wijz{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:11px;color:#7a3e0a;background:#fdf3e7;border-radius:6px;padding:3px 8px}
.mr .wijz button{color:var(--blue);font-size:11px;font-weight:700;text-decoration:underline;padding:0}

/* footer */
footer{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;color:var(--muted);font-size:11.5px}

/* onderbalk mobiel (app-shell: position relative, nooit fixed) */
.bnav{position:relative;flex:0 0 auto;display:none;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px;align-items:center;justify-content:space-between}
.bnav .info{font-family:'Oswald',sans-serif;color:var(--navy);font-size:15px;font-weight:600}
.bnav .info small{display:block;font-family:'Open Sans',sans-serif;color:var(--muted);font-size:11px;font-weight:500}

/* mandje (zijpaneel) */
/* het paneel zit ín de overlay: die knipt het gesloten paneel weg zodat het niet in scrollWidth meetelt */
.overlay{position:absolute;inset:0;overflow:hidden;background:rgba(0,46,84,0);pointer-events:none;transition:background .2s;z-index:40}
.overlay.aan{background:rgba(0,46,84,.35);pointer-events:auto}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:#fff;box-shadow:-12px 0 30px rgba(0,46,84,.18);transform:translateX(105%);transition:transform .25s;display:flex;flex-direction:column;pointer-events:auto;visibility:hidden}
.overlay.aan .drawer{transform:none;visibility:visible}
.drawer .dh{background:var(--navy);color:#fff;border-bottom:3px solid var(--blue);padding:12px 16px;display:flex;align-items:center;gap:10px}
.drawer .dh h2{color:#fff;margin:0;font-size:17px}
.drawer .dh .x{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:var(--rb);height:32px;padding:0 10px;cursor:pointer;font-weight:700}
.drawer .db{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px}
.mr{display:grid;grid-template-columns:1fr 70px 30px;gap:4px 8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.mr .c{font-weight:700;color:var(--navy)}
.mr .o{color:var(--muted);font-size:11.5px}
.mr input{width:70px;height:32px;border:1px solid var(--line);border-radius:7px;padding:4px 6px;text-align:right}
.mr button{border:0;background:transparent;color:var(--red);cursor:pointer;font-weight:800;font-size:15px}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:10px}
.frm .w{grid-column:1/-1}
.frm label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.frm textarea{height:70px;resize:vertical}
.frm .chk{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:12.5px}
.frm .chk input{width:auto;height:auto;margin-top:3px}
.err{color:var(--red);font-weight:700;font-size:12.5px;margin-top:6px}
.pl{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pl pre{background:#0f1c2b;color:#d6e6f5;font-size:11px;border-radius:var(--rb);padding:10px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.pl .knoppen{margin-top:8px}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .kpi{padding:9px 12px;min-height:70px}.kpi .big{font-size:22px}
  .top .title small{display:none}
  .top .right .mbtn{display:none}
  .bnav{display:flex}
  .acties .mbtn{display:none}
}
@media (max-width:480px){
  .ibtn span{display:none}.ibtn{padding:0 9px;height:32px}
  .dt th:nth-child(4),.dt td:nth-child(4),.dt th:nth-child(5),.dt td:nth-child(5){display:none}
  .dt tr.tot td:first-child{display:table-cell}
  .dt{font-size:12px}.dt td{padding:5px 5px}.dt th{padding:5px 5px;font-size:10px;letter-spacing:0;white-space:normal}
  .dt td.aant{font-size:15px}
  .top .in{padding:8px 12px;gap:8px}.top img.logo{height:34px}.top .title{font-size:15px;padding-left:8px}
  .top .right{gap:6px}
  .wrap .in{padding:12px 12px 16px}
  .card{padding:12px 12px}
  .fg{grid-template-columns:1fr 110px}
  .gt th{white-space:normal;font-size:9.5px;letter-spacing:.3px;padding-right:4px}
  .gt col.c2,.gt col.c3{width:20%}.gt col.c4{width:21%}
  .gt th:nth-child(2),.gt td:nth-child(2){min-width:90px}
  .kpis{grid-template-columns:1fr 1fr}.kpi.hero{grid-column:1/-1}
}

/* print: A4 met huisstijlkop, hele opzet terug naar normaal (zie AGENTS.md dashboardpakket) */
@media print{
  html,body{height:auto!important;display:block!important;overflow:visible!important;position:static!important;background:#fff}
  .wrap{overflow:visible!important;height:auto!important;flex:none!important}
  .top{position:static;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top .right,.ibtn,.bnav,.knoppen,.acties,.drawer,.overlay,.toast,.invoer,.weergave,.internbalk{display:none!important}
  .printkop{display:block;border-bottom:1px solid var(--steel);padding:0 0 8px;margin:0 0 10px;font-size:12px}
  .printkop b{display:block;font-family:'Oswald',sans-serif;font-size:17px;color:var(--navy);text-transform:uppercase}
  .printkop table{border-collapse:collapse;margin-top:6px}.printkop td{padding:1px 14px 1px 0}
  .grid{display:block}.card{box-shadow:none;break-inside:avoid;border:0;padding:0 0 8px}.kpis{gap:8px}
  .aannames{border:0;padding:0}.aannames summary{display:none}
  .schets{gap:6px 14px}
  .dt th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:12mm}
}