/* TRAX Portal — gedeelde huisstijl.
   Donker #120000, accent #e94e1b, tekst #f9f8f5, toelichting #bfb6ae, zand #e1dcce.
   Ook gebruikt als CSS van het losse sleufrapport (HTML-download), dus de klassen
   van het SleufRapport staan hier ook. */

:root{
  --bg:#120000; --panel:rgba(18,4,4,.86); --panel2:rgba(249,248,245,.045); --line:rgba(249,248,245,.14);
  --ink:#f9f8f5; --mut:#bfb6ae; --acc:#e94e1b; --accsoft:rgba(233,78,27,.16); --sand:#e1dcce;
  --soil:#2b1c14; --soil2:#170d09; --verh:rgba(184,224,95,.22); --verhl:#b8e05f; --water:#4f9fe0;
  --btnink:#120000; --acctext:#e94e1b; --bgt:rgba(249,248,245,.42);
  --head:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--head);font-weight:500;font-size:15px;line-height:1.45;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--acc)}

/* Achtergrond: gloed rechtsonder + geodriehoek-raster linksboven */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 70% at 100% 100%,rgba(242,151,46,.95) 0%,rgba(205,73,5,.85) 22%,rgba(170,47,34,.55) 45%,rgba(50,4,6,0) 75%),
    radial-gradient(ellipse 60% 50% at 0% 0%,rgba(89,16,7,.55),rgba(18,0,0,0) 70%),
    linear-gradient(160deg,#120000 0%,#1a0203 55%,#320406 100%)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23f9f8f5'%3E%3Cpath d='M0 .5H96M.5 0V96M0 96L96 0'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(170deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 70%);mask-image:linear-gradient(170deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 70%)}
body>*{position:relative;z-index:1}

.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
.wrap.narrow{max-width:780px}
main.wrap{flex:1;padding-block:24px 48px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- koppen, labels ---------- */
h1,h2,h3{font-stretch:125%;font-weight:900;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(30px,5vw,52px);line-height:1}
h1 em,h2 em{font-style:normal;color:var(--acc)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.lead{color:var(--mut);font-size:16px;max-width:60ch;margin:8px 0 0}
.note{color:var(--mut);font-size:12.5px}

/* ---------- header ---------- */
header.site{display:flex;align-items:center;gap:14px 22px;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brandblock{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-decoration:none;color:var(--ink)}
.brandblock svg{height:26px;width:auto;display:block}
header.site nav{display:flex;gap:4px;flex-wrap:wrap}
header.site nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mut);padding:8px 10px;border-bottom:2px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a.on{color:var(--ink);border-bottom-color:var(--acc)}
header.site .sp{flex:1}
header.site .who{font-family:var(--mono);font-size:12px;color:var(--mut);text-align:right;line-height:1.3}
header.site .who b{display:block;color:var(--ink);font-weight:700}

/* ---------- knoppen en velden ---------- */
button,.btn{font:inherit;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;line-height:1.2}
button:hover,.btn:hover{border-color:var(--acc);color:var(--ink)}
button.pri,.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--btnink)}
button.pri:hover,.btn.pri:hover{filter:brightness(1.08);color:var(--btnink)}
button.link{background:none;border:0;padding:4px 0;color:var(--mut);text-decoration:underline;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px}
button.link:hover{color:var(--acc)}
button.sm{padding:6px 10px;font-size:11px}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,.drop:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
label{display:block}
label>span,.lbl-t{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{font:inherit;font-size:16px;font-weight:500;background:rgba(18,0,0,.7);color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:10px 11px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
.form{display:grid;gap:14px}
.form .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.form .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.checks{display:grid;gap:6px;max-height:220px;overflow-y:auto;border:1px solid var(--line);padding:10px;border-radius:2px}
.checks label{display:flex;gap:8px;align-items:center;font-size:14px}

/* ---------- meldingen ---------- */
.msg{border-left:3px solid var(--sand);background:var(--panel);padding:9px 13px;font-size:14px}
.msg.err{border-left-color:var(--acc);font-weight:700}
.msg:empty{display:none}

/* ---------- panelen, tabbladen ---------- */
.panel{border:1px solid var(--line);background:var(--panel);border-radius:2px}
.panel.pad{padding:18px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:22px 0 18px;overflow-x:auto}
.tabs button{border:0;border-bottom:2px solid transparent;background:none;border-radius:0;color:var(--mut);padding:10px 14px;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--acc)}
.empty{padding:28px 18px;color:var(--mut);border:1px dashed var(--line);border-radius:2px;text-align:center}
.loading{color:var(--mut);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:24px 0}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding-block:18px;color:var(--mut);font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center}
footer.site .fl{display:flex;align-items:center;gap:10px}
footer.site svg{height:14px;width:auto}

/* ---------- login ---------- */
.login{flex:1;display:grid;place-items:center;padding:40px 16px}
.login .box{width:100%;max-width:420px}
.login .box .brandblock svg{height:40px}
.login h1{font-size:clamp(28px,6vw,40px);margin:34px 0 6px}
.login .panel{padding:22px;margin-top:22px}

/* ---------- dashboard ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.pcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:18px;border-left:3px solid var(--line)}
.pcard:hover{border-color:var(--acc);color:var(--ink)}
.pcard.has-err{border-left-color:var(--acc)}
.pcard h2{font-size:22px;line-height:1.05}
.pcard .meta{font-family:var(--mono);font-size:12px;color:var(--mut)}
.pcard .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:auto}
.pcard .stats>div{background:var(--bg);padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0}
.pcard .stats .v{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1.1}
.pcard .stats .v.datum{font-size:14px;line-height:1.45;white-space:nowrap}
.pcard .stats .v.acc{color:var(--acc)}
.pcard .stats .l{font-size:10.5px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}

/* ---------- projectpagina ---------- */
.phead{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end;justify-content:space-between;padding-bottom:18px}
.phead .meta{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin-top:8px}
.phead .sumgrid{min-width:min(100%,360px)}
.mapwrap{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#120000}
#map{height:clamp(320px,52vh,560px);width:100%}
.maplegend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 12px;font-family:var(--mono);font-size:11.5px;color:var(--mut);border-top:1px solid var(--line);background:var(--panel)}
.maplegend i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border-radius:50%}
.lg-ok{background:#120000;border:2px solid #f9f8f5}
.lg-warn{background:#f9f8f5;border:2px solid #e94e1b}
.lg-err{background:#e94e1b;border:2px solid #120000}
.lg-plan{background:rgba(249,248,245,.25);border:2px dashed var(--ink);border-radius:50%}

/* Leaflet in huisstijl */
.leaflet-container{font-family:var(--head);background:#e1dcce}
.leaflet-bar a,.leaflet-bar a:hover{background:#120000;color:#f9f8f5;border-bottom-color:rgba(249,248,245,.2)}
.leaflet-bar a:hover{color:#e94e1b}
.leaflet-bar,.leaflet-touch .leaflet-bar{border:1px solid rgba(249,248,245,.25);border-radius:2px}
.leaflet-bar a:first-child,.leaflet-bar a:last-child{border-radius:0}
.leaflet-control-layers{background:#120000;color:#f9f8f5;border-radius:2px!important;border:1px solid rgba(249,248,245,.25)!important;font-family:var(--mono);font-size:12px}
.leaflet-control-layers-expanded{padding:8px 12px}
.leaflet-control-layers-separator{border-top-color:rgba(249,248,245,.2)}
.leaflet-control-layers label{display:flex;align-items:center;gap:6px;margin:3px 0}
.leaflet-control-layers-toggle{filter:invert(1)}
.leaflet-control-attribution{font-size:10.5px}
.leaflet-tooltip.ps-tip{background:#120000;color:#f9f8f5;border:0;border-radius:2px;font-family:var(--mono);font-weight:700;font-size:11px;padding:2px 6px;box-shadow:none}
.leaflet-tooltip.ps-tip::before{display:none}
.hide-tips .leaflet-tooltip.ps-tip.perm{display:none}
.leaflet-container.wit{background:#fff}
.tl-grijs{filter:grayscale(1) contrast(1.15)}
.zone-tag{color:#e94e1b;font-size:9px;letter-spacing:.1em;margin-left:4px}
.flag strong{font-weight:800}

/* ---------- SleufRapport (overgenomen, in huisstijl) ---------- */
.app{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:22px;padding-block:22px 10px}
@media(max-width:860px){.app{grid-template-columns:minmax(0,1fr)}}
.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.sumgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.sumgrid div{background:var(--panel);padding:10px 12px}
.sumgrid div div{padding:0;background:none}
.sumgrid .v{font-family:var(--mono);font-weight:700;font-size:20px}
.sumgrid .l{font-size:11px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.filters{display:grid;gap:8px}
.filters input[type=search],.filters select{font-size:16px;padding:9px 10px}
.list{max-height:62vh;overflow-y:auto;display:flex;flex-direction:column}
@media(max-width:860px){.list{max-height:280px}}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:3px solid transparent;border-top:0;border-right:0;border-radius:0;text-align:left;color:var(--ink);font-weight:500;width:100%;text-transform:none;letter-spacing:0;font-size:14px}
.row:hover{background:var(--panel2);border-color:var(--line);border-left-color:transparent}
.row.sel{background:var(--accsoft);border-left-color:var(--acc)}
.row .nm{font-weight:900;font-stretch:125%;font-size:16px}
.row .sub{font-family:var(--mono);font-size:11.5px;color:var(--mut);grid-column:2}
.st{font-family:var(--mono);font-size:12px;font-weight:700;width:22px;height:22px;display:inline-grid;place-items:center;border-radius:2px;border:1px solid var(--line);color:var(--mut)}
.st.warn{border-color:var(--acc);color:var(--acc)}
.st.err{background:var(--acc);border-color:var(--acc);color:var(--btnink)}
.main{min-width:0;display:flex;flex-direction:column;gap:18px}
.dhead{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.dhead h2{font-size:clamp(34px,5vw,56px);line-height:.95}
.dhead .meta{color:var(--mut);font-family:var(--mono);font-size:12.5px;margin-top:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:12px 14px;min-width:0}
.card .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.card .v{font-family:var(--mono);font-weight:700;font-size:20px;margin:3px 0}
.card .s{font-family:var(--mono);font-size:11.5px;color:var(--mut);overflow-wrap:anywhere}
.norms{display:flex;flex-wrap:wrap;gap:8px}
.nm-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:7px 11px;font-size:13px}
.nm-chip i{font-style:normal;font-family:var(--mono);font-weight:700}
.nm-chip.ok i{color:var(--mut)}
.nm-chip.no{border-color:var(--acc)}
.nm-chip.no i{color:var(--acc)}
.nm-chip.na{border-style:dashed}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg button{border:0;border-radius:0;background:transparent}
.seg button.on{background:var(--acc);color:var(--btnink)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:start}.colL,.colR{display:flex;flex-direction:column;gap:18px;min-width:0}@media(max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}}.colR table{min-width:0;font-size:12.5px}.colR td:first-child,.colR td:nth-child(2){white-space:nowrap}.colR td.r{white-space:nowrap}.colR td:last-child{min-width:110px}.colR th,.colR td{padding:7px 8px}
.views{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}.views>.vbox{flex:1 1 100%}
.vbox{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:14px;min-width:0}
.vbox h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.vbox .scroll{overflow-x:auto}
svg.pr{display:block;max-width:100%;height:auto}
svg text{font-family:var(--mono)}
.ax{fill:var(--mut);font-size:10px}
.lbl{fill:var(--ink);font-size:10.5px}
.num{fill:var(--ink);font-size:10px;font-weight:700}
.straat{font-style:italic;letter-spacing:.04em}
svg.pr.licht{background:#f9f8f5;--ink:#120000;--mut:#6b5f58;--line:rgba(18,0,0,.22);--soil:#e6d8c2;--soil2:#cdbfa8;
  --verh:rgba(120,160,30,.25);--verhl:#5f8a0c;--water:#1f6fb5;--bgt:rgba(18,0,0,.55);--bg:#f9f8f5}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--mut);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.sec h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.sb td{background:var(--panel2);font-weight:700}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
.flags{display:flex;flex-direction:column;gap:6px}
.flag{border-left:3px solid var(--sand);padding:6px 12px;background:var(--panel);border-radius:0 2px 2px 0;font-size:14px}
.flag.warn{border-left-color:var(--acc)}
.flag.err{border-left-color:var(--acc);background:var(--accsoft);font-weight:700}
.flag b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;margin-right:8px;color:var(--acc)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
footer.f{border-top:1px solid var(--line);padding-block:20px;color:var(--mut);font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:2px;font-weight:700;font-size:13px;z-index:2000;max-width:calc(100vw - 32px)}
.rep header.top,.rep .noexp{display:none}
body.rep{display:block;padding-inline:clamp(16px,3vw,40px)}

/* ---------- foto's ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.fthumb{display:flex;flex-direction:column;gap:4px;padding:0;border:1px solid var(--line);background:var(--panel2);text-transform:none;letter-spacing:0;font-weight:500;overflow:hidden}
.fthumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#120000}
.fthumb span{display:grid;place-items:center;aspect-ratio:4/3;font-size:11px;color:var(--mut);padding:6px;overflow-wrap:anywhere}
.fthumb small{font-family:var(--mono);font-size:10.5px;color:var(--mut);padding:0 6px 6px;text-align:left}
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(10,0,0,.94);display:flex;flex-direction:column}
.lb-top{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px}
.lb-top .sp{flex:1}
.lb-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px}
.lb-img img{max-width:100%;max-height:100%;object-fit:contain}
.lb-nav{font-size:28px;padding:10px 14px;line-height:1}
.lb-meta{position:absolute;right:0;top:56px;bottom:0;width:min(420px,100%);overflow:auto;background:rgba(18,4,4,.97);border-left:1px solid var(--line);padding:14px 16px;font-size:12.5px}
.lb-meta table{min-width:0;font-size:12px}.lb-meta td{padding:5px 8px;overflow-wrap:anywhere}.lb-meta th{padding:6px 8px}
.lb-meta .grp td{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);padding-top:12px}

/* ---------- beheer ---------- */
.adm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:18px;align-items:start}
@media(max-width:960px){.adm-grid{grid-template-columns:minmax(0,1fr)}}
.tw table.adm{min-width:620px}
.tw table.adm td{vertical-align:middle}
.tw table.adm tr.click{cursor:pointer}
.tw table.adm tr.click:hover td{background:var(--panel2)}
.tw table.adm tr.sel td{background:var(--accsoft)}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:2px;padding:2px 6px;color:var(--mut)}
.tag.acc{border-color:var(--acc);color:var(--acc)}
.drop{border:1.5px dashed var(--mut);border-radius:2px;padding:30px 20px;text-align:center;background:var(--panel);cursor:pointer}
.drop.over,.drop:hover{border-color:var(--acc);background:var(--accsoft)}
.drop b{display:block;font-stretch:125%;font-weight:800;font-size:18px;margin-bottom:6px}
.drop span{color:var(--mut);font-size:14px}
.prevlist{max-height:360px;overflow-y:auto}
.prevlist .pr-row{display:grid;grid-template-columns:auto 80px minmax(0,1fr);gap:10px;align-items:start;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.prevlist .pr-row:last-child{border-bottom:0}
.prevlist .pr-row b{font-stretch:125%;font-weight:900}
.prevlist .pr-row .fl{color:var(--mut);font-size:12.5px}

@media(max-width:600px){
  /* Telefoon: logo en Uitloggen op één regel, menu eronder over de volle breedte, naam weg */
  header.site{gap:10px 14px;padding-block:14px}
  header.site .sp,header.site .who{display:none}
  header.site #btnLogout{margin-left:auto;padding:8px 12px}
  header.site nav{order:3;width:100%;margin:0 -10px}
  .phead .sumgrid{width:100%}
}

/* ---------- print: licht papier ---------- */
@media print{
  :root{--bg:#f9f8f5;--panel:#fff;--panel2:rgba(18,0,0,.04);--line:rgba(18,0,0,.2);--ink:#120000;--mut:#6b5f58;--acc:#e94e1b;--acctext:#b8390f;
    --accsoft:rgba(233,78,27,.10);--sand:#6b5f58;--soil:#e6d8c2;--soil2:#cdbfa8;--verh:rgba(120,160,30,.25);--verhl:#6f9a10;--water:#1f6fb5;--btnink:#fff;--bgt:rgba(18,0,0,.5);color-scheme:light}
  @page{size:A4;margin:14mm 12mm}
  html,body{background:#f9f8f5!important;color:#120000;font-size:11pt}
  body{display:block;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body::before,body::after{display:none!important}
  h1,h2,h3{color:#120000}
  .eyebrow{color:var(--acctext)}
  .noprint,.noexp,header.site,footer.site,.toast,.leaflet-control-container{display:none!important}
  .vbox,.card,.sec,.flag,tr{break-inside:avoid}
  .list{max-height:none}
  .vbox .scroll,.tw{overflow:visible}
  svg.pr{max-width:100%!important}
  body.pp>*:not(#printArea){display:none!important}
  #printArea{display:block!important}
  #printArea .ptrench{break-before:page}
  .fgrid{grid-template-columns:repeat(4,1fr)}
  .fthumb{break-inside:avoid}
  .lightbox{display:none!important}
  .pr-cover{border-bottom:3px solid var(--acc);padding-bottom:10px;margin-bottom:14px}
}
#printArea{display:none}
.pr-cover .brandblock svg{height:30px}

/* ---------- veldweergave (veld.html): telefoon en tablet ---------- */
body.veld{height:100vh;height:100dvh;min-height:0;overflow:hidden}
#veld{position:fixed;inset:0}
#vmap{position:absolute;inset:0;background:#e9e6df}
.vtop{position:absolute;z-index:500;top:calc(env(safe-area-inset-top) + 10px);left:10px;right:10px;display:flex;gap:8px;align-items:stretch}
.vbrand{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:0 10px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vbrand svg{height:18px;width:18px;display:block}
.vtop select{flex:1;width:auto;background:var(--panel);padding:9px 10px}
.vbase{background:var(--panel)}
.vbase button{padding:9px 11px}
.vsheet{position:absolute;z-index:600;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:42%;background:#140404;border-top:1px solid var(--line);padding:0 16px calc(env(safe-area-inset-bottom) + 8px);transition:max-height .2s}
.vsheet.groot{max-height:78%}
.vloc{position:absolute;right:12px;top:-64px;height:52px;padding:0 16px;gap:10px;background:var(--acc);border-color:#120000;color:var(--btnink);font-size:13px}
.vloc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.vloc svg circle:first-child{fill:currentColor;stroke:none}
.vloc:hover{border-color:#120000;color:var(--btnink);filter:brightness(1.08)}
.vloc.zoek svg{animation:vpuls .9s ease-in-out infinite alternate}
.vloc.aan{background:#120000;color:var(--acc);border-color:var(--acc)}
@keyframes vpuls{to{opacity:.25}}
.vgrip{flex:none;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vgrip::before{content:"";width:44px;height:4px;border-radius:2px;background:rgba(249,248,245,.3)}
#vbody{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
#vbody .msg{margin-bottom:10px}
.vkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.vkop h2{font-size:22px}
.vkop .mono{font-size:12px;color:var(--mut)}
.vuitleg{color:var(--mut);font-size:14px;margin:4px 0 10px}
.vlijst{display:flex;flex-direction:column}
.vrij{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 2px;color:var(--ink);font-family:var(--head);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.vrij:hover{color:var(--ink);background:var(--panel2)}
.vrij b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrij small{display:block;font-family:var(--mono);font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vst{width:12px;height:12px;border-radius:2px;border:2px solid var(--ink);background:#120000}
.vst.warn{background:var(--ink);border-color:var(--acc)}
.vst.err{background:var(--acc);border-color:var(--acc)}
.va{font-size:13px;white-space:nowrap}
.vterug{background:none;border:0;padding:4px 0 8px;color:var(--mut)}
.vtag.ok{color:var(--ink)}
.vtag.warn{border-color:var(--acc);color:var(--acc)}
.vtag.err{background:var(--acc);border-color:var(--acc);color:var(--btnink)}
.vproj{color:var(--mut);font-size:13px;margin-bottom:4px}
.vafst{color:var(--acc);font-size:13px;margin:2px 0 8px}
.vafst:empty{display:none}
.vmaten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.vmaten>div{background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:8px 10px}
.vmaten .v{font-weight:700;font-size:16px}
.vmaten .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.vflags{list-style:none;margin:10px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.vflags li{border-left:3px solid var(--sand);background:var(--panel2);padding:7px 10px;font-size:13.5px}
.vflags li.err{border-left-color:var(--acc)}
.vacties{display:flex;gap:8px;margin:8px 0 4px}
.vacties .btn{flex:1;justify-content:center;padding:13px 12px}
.vstat{flex:none;font-size:10.5px;color:var(--mut);padding-top:6px;cursor:pointer}
.vstat:empty{display:none}
.leaflet-tooltip.vlabel{background:rgba(18,0,0,.85);color:#f9f8f5;border:0;border-radius:2px;box-shadow:none;font-family:var(--mono);font-size:11px;padding:2px 5px}
.leaflet-tooltip.vlabel::before{display:none}
body.veld .leaflet-top.leaflet-left{top:calc(env(safe-area-inset-top) + 58px)}
body.veld .leaflet-control-attribution{font-size:9px;margin:0 0 0 10px}
@media(min-width:900px){
  .vsheet,.vsheet.groot{left:auto;right:12px;bottom:12px;width:390px;max-height:calc(100% - 90px);border:1px solid var(--line);border-radius:2px;padding-bottom:10px}
}

/* ---------- planning (planning.html) ---------- */
.plsum{grid-template-columns:repeat(6,minmax(0,1fr));min-width:min(100%,560px)}
@media(max-width:700px){.plsum{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;padding-bottom:30px}
@media(max-width:1000px){.plgrid{grid-template-columns:minmax(0,1fr)}}
.plcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.plkaart{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
@media(max-width:1000px){.plkaart{position:static;order:-1}}
.plkaart #map{height:min(62vh,640px);border:1px solid var(--line);border-radius:2px;background:#e9e6df}
.plblok{padding:0}
.plblok>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;font-stretch:125%;font-size:17px;display:flex;gap:10px;align-items:baseline}
.plblok>summary::-webkit-details-marker{display:none}
.plblok>summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--mut)}
.plblok[open]>summary::after{content:"–"}
.pltel{font-size:12px;font-weight:500;font-stretch:100%;color:var(--mut)}
.plin{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.pl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pl3 .plbreed{grid-column:span 2}
@media(max-width:600px){.pl2,.pl3{grid-template-columns:minmax(0,1fr)}.pl3 .plbreed{grid-column:auto}}
.pl2 .drop{padding:20px 14px}
.plwk{display:flex;flex-wrap:wrap;gap:6px 14px}
.plcheck{display:inline-flex;gap:7px;align-items:center;font-size:14px;cursor:pointer}
.plcheck span{display:inline;margin:0;font-family:var(--head);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
#blokDagen{padding:14px 16px}
.plkop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.plkop h2,.plkop h3{font-size:20px}
.plklein{padding:6px 10px;font-size:11px}
.pldag{border:1px solid var(--line);border-radius:2px;margin-bottom:8px;background:var(--panel2)}
.pldag.on{border-color:var(--acc)}
.pldagkop{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:9px 12px;cursor:pointer}
.pldagkop b{font-weight:800;display:inline-block}
.pldagkop b::first-letter{text-transform:uppercase}
.pldagkop .mono{font-size:12px;color:var(--mut)}
.pldagkop .sp{flex:1}
.pldag:not(.on) .pltabel{display:none}
.pltabel{overflow-x:auto;border-top:1px solid var(--line)}
.pltabel table{min-width:520px;font-size:13px}
.pltabel td,.pltabel th{padding:7px 10px}
.pltabel tr{cursor:pointer}
.pltabel tr:hover td{background:var(--panel2)}
.pltabel tr.sel td{background:var(--accsoft)}
.pltabel tr.st-gemaakt td{color:var(--mut)}
.pltabel tr.st-achter td:last-child{color:var(--acc);font-weight:700}
.pltabel tr.st-weg td{color:var(--mut);text-decoration:line-through}
.pllegenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--mut)}
.pllegenda span{display:inline-flex;gap:6px;align-items:center}
.lg{display:inline-block;width:14px;height:9px;border:1.5px solid #120000;border-radius:1px}
.lg.gemaakt{background:#120000;border-color:#f9f8f5}
.lg.dag{background:#e94e1b}
.lg.open{background:#f9f8f5}
.lg.achter{background:#f9f8f5;border:2px dashed #e94e1b}
.lg.weg{background:rgba(138,138,138,.3);border:1.5px dashed #8a8a8a}
.pldetail{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.pldl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0;font-size:14px}
.pldl dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding-top:2px}
.pldl dd{margin:0}
/* planning: kaartweergave "Kleur per dag" */
.plmodus{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.plmodus .seg button{padding:7px 11px;font-size:11px}
.plsw{display:inline-block;flex:none;width:12px;height:12px;border:1px solid #120000;border-radius:2px;vertical-align:middle}
.pldagkop .plsw,.pldagkop .pldnr{display:none}
.perdag .pldagkop .plsw,.perdag .pldagkop .pldnr{display:inline-block}
.pldnr{font-size:12px;color:var(--mut)}
#legDag{max-height:132px;overflow-y:auto;gap:6px}
.pllegdag{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;background:var(--panel2);border:1px solid var(--line)}
.pllegdag.on{border-color:var(--acc);color:var(--ink)}
.leaflet-tooltip.vlabel.pldaglabel{font-weight:700;font-size:11.5px;pointer-events:none}
.pldagkop .acc,.pltabel small.acc{color:var(--acc)}
/* planning: werkwijze route / vaste dagen */
.plwerkwijze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:600px){.plwerkwijze{grid-template-columns:minmax(0,1fr)}}
.plkeus{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:2px;padding:10px 12px;cursor:pointer;background:var(--panel2)}
.plkeus:has(input:checked){border-color:var(--acc)}
.plkeus span{display:block;margin:0;font-family:var(--head);font-size:13px;letter-spacing:0;text-transform:none;color:var(--mut);line-height:1.4}
.plkeus b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.plgrid.route .alleendagen,.plgrid:not(.route) .alleenroute{display:none !important}
#stapel{margin-bottom:10px}
.plverg{color:#eda100}
.tag.plverg{border-color:#eda100}
.lg.verg{background:#f9f8f5;border:3px solid #eda100}
.plvergkeus{align-self:end}
/* veld-app: planning (graafploeg) */
.vmodus{flex:none;display:flex;margin:0 0 10px}
.vmodus button{flex:1;padding:9px 10px}
.vnr{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 5px;border-radius:14px;background:#f9f8f5;color:#120000;border:2px solid #120000;font-family:var(--mono);font-size:12.5px;font-weight:700;box-sizing:border-box;line-height:1}
.vnr.volgende{background:#e94e1b;color:#120000;min-width:34px;height:34px;border-radius:17px;font-size:14px;box-shadow:0 0 0 3px rgba(233,78,27,.35)}
.vnr.klaar{background:#120000;color:#f9f8f5;border-color:#f9f8f5;opacity:.85}
.vnr.achter{border-color:#e94e1b;border-style:dashed}
.vnr.verg{border-color:#eda100;border-width:3px}
.vnr.sel{box-shadow:0 0 0 4px #f2972e}
.leaflet-marker-icon .vnr,.leaflet-div-icon .vnr{position:relative;left:50%;top:50%;transform:translate(-50%,-50%)}
.vvolg{border:1px solid var(--acc);background:var(--accsoft);border-radius:2px;padding:10px 12px;margin:6px 0 12px}
.vvkop{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.vvnr{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:8px 0 4px;text-align:left;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--head)}
.vvnr b{display:block;font-size:20px;font-weight:800}
.vvnr small{display:block;font-family:var(--mono);font-size:12px;color:var(--mut)}
.vvtxt{font-size:13.5px;margin:2px 0}
.vvtxt.verg,.vdl dd.verg{color:#eda100}
.vdagen{display:flex;flex-direction:column;gap:10px}
.vdkop{display:flex;align-items:center;gap:8px;padding:6px 0 2px;border-bottom:1px solid var(--line)}
.vdkop b{font-size:14px}
.vdkop .mono{font-size:11px;color:var(--mut)}
.vprij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 2px;color:var(--ink);font-family:var(--head);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.vprij:hover{color:var(--ink);background:var(--panel2)}
.vprij.klaar{opacity:.6}
.vprij b{display:block;font-weight:800}
.vprij small{display:block;font-family:var(--mono);font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 10px;font-size:14px}
.vdl dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding-top:2px}
.vdl dd{margin:0}
.vkop h2 .vnr{vertical-align:middle;margin-right:4px}
/* dashboard: voortgang geplande sleuven */
.pvg{margin-top:12px}
.pvgt{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut);margin-bottom:5px}
.pvgt .mono{font-size:11.5px}
.pvgb{height:6px;background:var(--panel2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.pvgb i{display:block;height:100%;background:var(--acc)}
.leaflet-tooltip.vlabel.vlabel-plan{background:rgba(249,248,245,.9);color:#120000;outline:1px dashed #120000}
/* keuzelijst bovenaanzichten (PNG) */
.pngdlg{max-width:560px;width:calc(100% - 32px);color:var(--ink);background:#170606;border:1px solid var(--line);padding:20px}
.pngdlg::backdrop{background:rgba(0,0,0,.6)}
.pnglijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 12px;max-height:50vh;overflow:auto;margin:10px 0;padding:8px;border:1px solid var(--line)}