:root{
  --bg:#f4f6f8; --panel:#ffffff; --ink:#1c2733; --muted:#6b7b8c;
  --line:#dce3ea; --brand:#1565c0; --brand-d:#0d47a1; --danger:#c62828;
  --sidebar-w:340px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
#app{display:flex;height:100vh;width:100%}

/* ---------- Sidebar ----------
   De zijbalk is opgedeeld in tabbladen: kop (met zoeken) en tabstrook staan
   vast, alleen het actieve tabblad schuift. Zo staat er nooit meer dan één
   onderwerp tegelijk in beeld. */
#sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);height:100%;overflow:hidden;
  background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width .18s ease,flex-basis .18s ease}
#app.side-collapsed #sidebar{width:0;flex-basis:0;border-right:none}
#app.side-collapsed .side-head,#app.side-collapsed .side-tabs,
#app.side-collapsed .side-body,#app.side-collapsed .side-foot{display:none}

.side-head{padding:10px 14px 12px;background:var(--brand);color:#fff;flex:0 0 auto}
.side-brand{display:flex;align-items:baseline;gap:8px}
.side-head h1{margin:0;font-size:19px;letter-spacing:.5px}
.side-head .subtitle{font-size:12px;opacity:.85;flex:1}
.side-collapse{margin-left:auto;background:rgba(255,255,255,.16);border:none;color:#fff;cursor:pointer;
  width:22px;height:22px;border-radius:5px;font-size:14px;line-height:1;flex:0 0 auto}
.side-collapse:hover{background:rgba(255,255,255,.3)}
.side-head .search-wrap{margin-top:9px}
.side-head #search-input{border:none;background:rgba(255,255,255,.95);padding:7px 9px;font-size:13px}

/* Uitklapknop wanneer de zijbalk is ingeklapt.
   z-index moet bóven de Leaflet-controls (die zitten op 1000), anders is de
   knop wel zichtbaar maar vangt het zoomblokje eronder de klik op. De
   zoomknoppen schuiven daarom omlaag zolang de knop er staat. */
#btn-sidebar-show{position:absolute;top:10px;left:10px;z-index:1200;display:none;
  background:var(--brand);color:#fff;border:none;border-radius:6px;padding:7px 11px;
  font-size:13px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#btn-sidebar-show:hover{background:var(--brand-d)}
#app.side-collapsed #btn-sidebar-show{display:block}
#app.side-collapsed .leaflet-top.leaflet-left{margin-top:38px}

/* Tabstrook */
.side-tabs{display:flex;flex:0 0 auto;background:#f7f9fb;border-bottom:1px solid var(--line)}
.side-tabs .tab{position:relative;flex:1 1 0;min-width:0;border:none;background:none;cursor:pointer;
  padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--muted);border-bottom:2px solid transparent}
.side-tabs .tab .ic{font-size:16px;line-height:1}
.side-tabs .tab .tl{font-size:10px;letter-spacing:.01em}
.side-tabs .tab:hover{background:#eef3f8;color:var(--ink)}
.side-tabs .tab.active{color:var(--brand);border-bottom-color:var(--brand);background:#fff;font-weight:600}
.tab-badge{position:absolute;top:3px;right:calc(50% - 18px);min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--brand);color:#fff;font-size:9px;line-height:15px;text-align:center;font-weight:700}

/* Inhoud van het actieve tabblad */
.side-body{flex:1 1 auto;overflow-y:auto;min-height:0}
.tabpane{display:none}
.tabpane.active{display:block}

.side-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:6px 14px;background:#f7f9fb;
  font-size:11px;color:var(--muted);min-height:26px;line-height:14px}

.panel{padding:12px 16px;border-bottom:1px solid var(--line)}
.panel:last-child{border-bottom:none}
.panel h2{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  display:flex;align-items:center;justify-content:space-between}
.sub-chk{padding-left:18px}

/* Uitleg staat dichtgeklapt: de tekst is er als je hem nodig hebt, maar
   vult het paneel niet met woorden die je al kent. */
details.tip{margin-top:8px}
details.tip>summary{font-size:11px;color:var(--brand);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:4px;user-select:none}
details.tip>summary::-webkit-details-marker{display:none}
details.tip>summary::before{content:'ⓘ';font-size:11px}
details.tip>summary:hover{text-decoration:underline}
details.tip p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.45}
details.tip[open]>summary{margin-bottom:2px}

/* Dichtklapbaar blok binnen een paneel (bv. de symbolenlijst) */
details.fold>summary{font-size:12px;color:var(--ink);cursor:pointer;list-style:none;padding:5px 7px;
  background:#f2f6fa;border:1px solid var(--line);border-radius:6px;user-select:none;
  display:flex;align-items:center;gap:5px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:'▸';font-size:10px;color:var(--muted)}
details.fold[open]>summary::before{content:'▾'}
details.fold>summary:hover{background:#e9f0f7}
details.fold[open]>summary{margin-bottom:7px}
details.fold #legend-count{margin-left:auto;color:var(--muted);font-size:11px}
.fld{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.fld input{display:block;width:100%;margin-top:3px;padding:7px 8px;border:1px solid var(--line);border-radius:6px;font-size:14px;color:var(--ink)}
.fullw{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:6px;font-size:14px;background:#fff}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:6px;cursor:pointer}
/* Twee smalle invulvelden naast elkaar (bijv. symboolmaat + teksthoogte). */
.fld-row{display:flex;gap:8px}
.fld-row .fld{flex:1 1 0;min-width:0}
input[type=color]{width:40px;height:26px;padding:0;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.btn{flex:1 1 auto;padding:7px 10px;border:1px solid var(--line);background:#fff;border-radius:6px;
  font-size:13px;cursor:pointer;color:var(--ink);white-space:nowrap}
.btn:hover{background:#eef3f8}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d)}
.btn.danger{color:var(--danger);border-color:#e6b3b3}
.btn.danger:hover{background:#fbeaea}
/* Knop van een gereedschap dat op een kaartklik staat te wachten (klikmodus) */
.btn.on,.btn.primary.on{background:#e65100;border-color:#e65100;color:#fff;animation:btn-pulse 1.6s ease-in-out infinite}
.btn.on:hover,.btn.primary.on:hover{background:#bf360c}
@keyframes btn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(230,81,0,.45)}50%{box-shadow:0 0 0 5px rgba(230,81,0,0)}}
.mini{border:none;background:#eef3f8;border-radius:5px;width:22px;height:22px;cursor:pointer;font-size:15px;line-height:1;color:var(--brand)}
.hint{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.4}

/* ---------- Search ---------- */
.search-wrap{position:relative}
#search-input{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px;color:var(--ink)}
.search-results{list-style:none;margin:2px 0 0;padding:0;position:absolute;left:0;right:0;z-index:20;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;max-height:260px;overflow-y:auto;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.search-results:empty{display:none}
.search-results li{padding:7px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid #f0f3f6}
.search-results li:hover{background:#eef3f8}
.search-results li .typ{font-size:11px;color:var(--muted);margin-left:6px}

/* ---------- Legend ---------- */
.legend-list{display:flex;flex-direction:column;gap:4px}
.legend-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.legend-item .swatch{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center}
.legend-item .lbl{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-item .cnt{font-size:11px;color:var(--muted)}
.legend-item .edit{border:none;background:none;cursor:pointer;color:var(--muted);font-size:14px}
.legend-item .edit:hover{color:var(--brand)}
.legend-item .vis{border:none;background:none;cursor:pointer;font-size:13px;padding:0 2px;opacity:.85}
.legend-item .vis:hover{opacity:1}
.legend-item.is-hidden{opacity:.5}
.legend-item.is-hidden .lbl{text-decoration:line-through}

/* Kopjes in de legendalijst: het blok waar de symbolen eronder bij horen.
   Ze staan er ook als je ze niet zelf hebt gemaakt (bv. "Niet in de legenda"),
   want anders lijkt een uitgezette laag zomaar verdwenen. */
.legend-head{display:flex;align-items:baseline;gap:6px;margin:8px 0 2px;padding:0 2px;border-bottom:1px solid var(--line)}
.legend-head:first-child{margin-top:0}
.legend-head .lh-t{font-size:12px;font-weight:600;color:#33424f}
.legend-head em{font-size:11px;color:var(--muted);font-style:normal}
.legend-head .lh-c{margin-left:auto;font-size:11px;color:var(--muted)}
.legend-head .lh-e{border:none;background:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0 2px}
.legend-head .lh-e:hover{color:var(--brand)}

/* Lagen en groepen met hun naam in de legenda. */
.legend-layers{display:flex;flex-direction:column;gap:3px}
.leglay{display:flex;align-items:center;gap:7px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.leglay .ll-ic{width:18px;flex:0 0 18px;display:flex;align-items:center;justify-content:center;font-size:12px}
.leglay .ll-t{flex:1;min-width:0;font-size:12.5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leglay .ll-t em{display:block;font-size:10.5px;color:var(--muted);font-style:normal;overflow:hidden;text-overflow:ellipsis}
.leglay .ll-m{font-size:10.5px;color:var(--muted);white-space:nowrap}
.leglay .ll-e{border:none;background:none;cursor:pointer;color:var(--muted);font-size:13px}
.leglay .ll-e:hover{color:var(--brand)}
.leglay.is-auto{opacity:.72}
.leglay.is-uit{opacity:.5}
.leglay.is-uit .ll-t{text-decoration:line-through}

/* Weergavekeuze in het venster "In de legenda". */
.lm-grid{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.lm-opt{display:flex;align-items:baseline;gap:7px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px}
.lm-opt:hover{border-color:var(--brand)}
.lm-opt .muted{font-size:11.5px;color:var(--muted)}

/* ---------- Map ---------- */
#map-wrap{flex:1;position:relative}
#map{position:absolute;inset:0}
.leaflet-container{background:#dfe6ec}

/* Feature symbol marker */
.wbv-symbol{background:none;border:none}
.wbv-symbol .lab{font-size:11px;font-weight:600;color:#0b2233;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;white-space:nowrap;text-align:center;margin-top:-2px}

/* Getekend punt: hetzelfde symbool als een feature, maar versleepbaar — dat
   mag je aan de cursor zien. De naam eronder krijgt zijn kleur van het punt. */
.wbv-point{cursor:move}
.wbv-point .lab{font-weight:700}

/* Vrije tekstlabels op de kaart */
.wbv-text{background:none;border:none}
.wbv-text div{font-size:14px;font-weight:700;white-space:nowrap;text-align:center;line-height:22px;cursor:pointer;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}

/* Labeltje midden in een getekend vlak (tooltip in de tooltip-pane, dus het
   komt gewoon mee in de PDF-capture). Geen ballon: alleen de tekst. */
.leaflet-tooltip.wbv-shape-label{background:none;border:none;box-shadow:none;padding:0;white-space:nowrap;
  font-size:12px;font-weight:600;line-height:1.25;text-align:center;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.leaflet-tooltip.wbv-shape-label:before{display:none}

/* ---------- Popup: velden van een getekend object ---------- */
.dp-lab{font-size:11px;color:#6b7b8c;display:block;margin-top:7px}
.dp-hint{color:#9aa8b5}
.dp-f{width:100%;margin-top:3px;padding:5px 7px;border:1px solid #dce3ea;border-radius:5px;font:inherit;font-size:12px;background:#fff}
.dp-meas{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:7px;
  padding:4px 7px;background:#f1f5f9;border-radius:5px;font-size:11px;color:#6b7b8c}
.dp-meas b{font-size:13px;color:#1c2733}
/* De plek van een punt: RD-coördinaat rechts uitgelijnd met de kopieerknop
   ernaast, de graden er klein onder. */
.dp-meas .dp-plek{flex:1 1 auto;text-align:right;font-variant-numeric:tabular-nums}
.dp-plek-kopie{flex:0 0 auto;align-self:center}
.dp-plek-wgs{font-size:10.5px;color:var(--muted);text-align:right;margin:2px 7px 0;
  font-variant-numeric:tabular-nums}

/* Alle hoekpunten van een object, uitklapbaar in de popup. Scrollbaar met een
   vaste hoogte: een afgesneden of ingelezen vorm heeft er zo honderd, en dan
   moet de rest van het venster nog bereikbaar blijven. */
.dp-xy,.dp-km{margin-top:9px;border-top:1px solid #eef2f6;padding-top:7px}
.dp-xy>summary,.dp-km>summary{cursor:pointer;font-size:11.5px;color:#33475b;list-style:none}
.dp-km>summary::-webkit-details-marker,.dp-xy>summary::-webkit-details-marker{display:none}
.dp-xy>summary:before,.dp-km>summary:before{content:'▸ ';color:#8494a4}
.dp-xy[open]>summary:before,.dp-km[open]>summary:before{content:'▾ '}
.dp-xy-lijst{max-height:190px;overflow:auto;margin-top:5px;border:1px solid #e6ecf2;border-radius:6px}
.dp-xy-rij{display:flex;gap:7px;align-items:baseline;padding:3px 6px;font-size:11px}
.dp-xy-rij:nth-child(odd){background:#f7fafc}
.dp-xy-nr{flex:0 0 auto;min-width:20px;text-align:right;color:#8494a4;font-variant-numeric:tabular-nums}
.dp-xy-co{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums;user-select:all}
.dp-xy-co b{display:block;color:#1c2733;font-size:11.5px;white-space:nowrap}
.dp-xy-co i{display:block;color:var(--muted);font-style:normal;font-size:10.5px;white-space:nowrap}
.dp-xy-acts{margin-top:6px}
.dp-xy-acts .btn{font-size:11px;padding:5px 7px}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,25,35,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:10px;max-width:640px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:16px}
.modal .body{padding:16px 18px}
.modal .foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:#fff}
.modal table{width:100%;border-collapse:collapse;font-size:13px}
.modal th,.modal td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.modal select,.modal input[type=text],.modal input[type=number]{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px;width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shape-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.shape-opt{border:2px solid var(--line);border-radius:6px;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#fff}
.shape-opt.sel{border-color:var(--brand)}
.color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:6px}
.color-opt{width:100%;aspect-ratio:1;border-radius:5px;cursor:pointer;border:2px solid transparent}
.color-opt.sel{border-color:#111}
.proj-note{font-size:12px;color:var(--muted);margin:8px 0}

/* Project list */
.prj-list{list-style:none;margin:0;padding:0}
.prj-list li{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line)}
.prj-list .meta{flex:1}
.prj-list .meta .nm{font-weight:600;font-size:14px}
.prj-list .meta .sub{font-size:11px;color:var(--muted)}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast-msg{background:#243342;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:tin .2s ease}
.toast-msg.err{background:var(--danger)}
.toast-msg.ok{background:#2e7d32}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* PDF title block (also used off-screen for capture) */
.leaflet-popup-content{font-size:13px}
.leaflet-popup-content b{color:var(--brand-d)}

/* Kadastrale perceelindeling (WMS, onder zoom 17).
   De service tekent haarfijne lijnen op 1:6000; wordt de afbeelding sterk
   teruggeschaald, dan vallen die weg op de luchtfoto. Alleen dan zetten we
   .kad-thicken erop, die de lijnen ~0,5px verdikt. Bij een lichte verkleining
   (zoom 16, factor 1,5) is verdikken juist te veel van het goede. */
.kadaster-perceel-tiles.kad-thicken {
  filter: drop-shadow(0.5px 0 0 #1a1a1a) drop-shadow(0 0.5px 0 #1a1a1a);
}

/* ---------- Lagenpaneel ---------- */
.layer-panel{display:flex;flex-direction:column;gap:2px}
.lay-group{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#8a99a8;margin:10px 0 3px;display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.lay-group:first-child{margin-top:0}
.lay-group:hover{color:var(--brand)}
.lay-group .caret{font-size:9px;display:inline-block;transition:transform .12s ease}
.lay-group.folded .caret{transform:rotate(-90deg)}
.lay-group .gt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay-group .gc{font-weight:400;color:#aab6c2;font-size:10px}
/* De knopjes in een groepskop pas laten opvallen als je er bent — anders
   trekt de kop meer aandacht dan de lagen zelf. */
.lay-group .lay-eye{font-size:12px}
.lay-group .lay-ren,.lay-group .lay-del{opacity:0;transition:opacity .12s ease}
.lay-group:hover .lay-ren,.lay-group:hover .lay-del{opacity:1}
.lay-eye.deels{opacity:.45}
.lay-row.lay-empty{padding-left:26px}
.lay-row.lay-empty em{font-style:italic;color:#aab6c2;font-size:11px}
.lay-grp,.lay-zoom,.lay-lab,.lay-exp,.lay-leg{cursor:pointer;font-size:11px;padding:0 2px;flex:0 0 auto;opacity:.5}
.lay-grp:hover,.lay-zoom:hover,.lay-lab:hover,.lay-exp:hover,.lay-leg:hover{opacity:1}
.lay-group .lay-zoom,.lay-group .lay-exp,.lay-group .lay-leg{opacity:0;transition:opacity .12s ease}
.lay-group:hover .lay-zoom,.lay-group:hover .lay-exp,.lay-group:hover .lay-leg{opacity:.7}
.lay-group:hover .lay-zoom:hover,.lay-group:hover .lay-exp:hover,.lay-group:hover .lay-leg:hover{opacity:1}
/* Merkje achter een groepsnaam: hoe die groep zich in de legenda gedraagt. */
.lay-group .gm{font-weight:400;text-transform:none;letter-spacing:0;color:#8fa0b0;font-size:10px;white-space:nowrap}
.lay-group .lay-grp{opacity:0;transition:opacity .12s ease}
.lay-group:hover .lay-grp{opacity:.7}

/* Een groep in een groep (consolideer.js). Het streepje links maakt zichtbaar
   hoe diep je zit; zonder dat lijkt een subgroep gewoon de volgende kop. */
.lay-rows{display:flex;flex-direction:column;gap:2px}
.lay-rows .lay-group{margin-left:10px;padding-left:8px;border-left:2px solid #e3e9ef;text-transform:none;
  letter-spacing:0;font-size:11.5px}
.lay-rows .lay-rows{margin-left:10px;padding-left:8px;border-left:2px solid #eef2f6}

/* Keuzemenu achter 📁 (in welke groep hoort deze laag?) */
.grp-menu{position:fixed;z-index:1500;min-width:170px;max-width:260px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(15,25,35,.22);
  padding:4px;font-size:13px}
.grp-menu-item{padding:6px 9px;border-radius:5px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.grp-menu-item:hover{background:#f1f5f9}
.grp-menu-item.actief{font-weight:600;color:var(--brand)}
.grp-menu-item.actief:after{content:' ✓'}
.grp-menu-item.nieuw{color:var(--brand)}
.grp-menu-sep{height:1px;background:var(--line);margin:4px 2px}
.lay-row{display:flex;align-items:center;gap:7px;padding:4px 5px;border-radius:6px;font-size:13px}
.lay-row:hover{background:#f1f5f9}
.lay-row.hidden-row .lay-label{color:#9aa8b5;text-decoration:line-through}
.lay-eye{cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto;opacity:.85;user-select:none}
.lay-eye:hover{opacity:1}
.lay-eye.off{filter:grayscale(1)}
.lay-eye.fixed{cursor:default;opacity:.35}
.lay-row svg{flex:0 0 auto;display:block}
.lay-label{flex:1 1 auto;min-width:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay-label em{display:block;font-style:normal;font-size:11px;color:#8a99a8}
.lay-ren{cursor:pointer;color:#b9c4ce;font-size:12px;padding:0 2px;flex:0 0 auto}
.lay-ren:hover{color:var(--accent,#1565c0)}
.lay-ren-in{flex:1 1 auto;min-width:0;font:inherit;font-size:12px;padding:2px 5px;
  border:1px solid var(--accent,#1565c0);border-radius:4px;background:#fff}
.lay-del{cursor:pointer;color:#b9c4ce;font-size:12px;padding:0 2px;flex:0 0 auto}
.lay-del:hover{color:var(--danger,#e53935)}

/* ---------- Diepteschuif (SIKB) ----------
   Staat in #map-wrap náást #map, zodat html2canvas hem nooit meeneemt in de PDF. */
.depth-ctl{position:absolute;left:12px;bottom:22px;z-index:900;width:246px;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);padding:9px 11px 8px;font-size:12px}
.depth-ctl[hidden]{display:none}
.dc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.dc-title{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
.dc-val{font-size:14px;font-weight:700;color:var(--brand-d);font-variant-numeric:tabular-nums}
.depth-ctl input[type=range]{width:100%;margin:2px 0 0;accent-color:var(--brand)}
.dc-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:5px}
.dc-opts{border-top:1px solid var(--line);padding-top:5px}
.dc-opts .chk{font-size:11.5px;margin-top:3px;color:var(--ink)}
.dc-opts .chk:first-child{margin-top:0}

/* ---------- Laag-indicator rechtsboven ----------
   Ook deze staat in #map-wrap náást #map, dus buiten de PDF-capture. De
   zoomknoppen liggen linksboven, dus rechtsboven vangt niets af; wel dezelfde
   z-index als de coördinaatbalk, boven de Leaflet-controls (1000). */
.laagstatus{position:absolute;right:12px;top:12px;z-index:1100;max-width:290px;min-width:214px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);padding:6px 8px 5px;font-size:11.5px}
.laagstatus[hidden]{display:none}
.ls-kop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.ls-titel{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
.ls-x{border:0;background:none;cursor:pointer;color:#8494a4;font-size:11px;line-height:1;padding:0 1px}
.ls-x:hover{color:var(--brand-d)}
.ls-rij{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;border-radius:4px}
.ls-rij:hover{background:#f2f6fa}
.ls-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ls-st{flex:0 0 auto;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.ls-st.ok{color:#2e7d32}
.ls-st.leeg{color:#b47b00}
.ls-st.fout{color:var(--danger)}
.ls-st.schaal{color:#1565c0}
.ls-leeg{color:var(--muted);font-size:10.5px;padding:2px 0}

/* ---------- Coördinaat-uitlezing ----------
   Ook deze staat in #map-wrap náást #map, dus buiten de PDF-capture.
   z-index boven de Leaflet-controls (1000): de attributieregel ligt in dezelfde
   hoek en zou anders de kopieerknop kunnen afvangen. */
.coord-ctl{position:absolute;right:12px;bottom:26px;z-index:1100;min-width:196px;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);padding:7px 8px 6px;font-size:12px}
.coord-ctl[hidden]{display:none}
.cc-row{display:flex;align-items:center;gap:6px;line-height:1.5}
.cc-lab{flex:0 0 30px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:600}
.cc-val{flex:1 1 auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);
  white-space:nowrap;user-select:all}
.cc-copy,.cc-hide{flex:0 0 auto;border:0;background:none;cursor:pointer;padding:0 2px;
  font-size:12px;line-height:1;color:#8494a4}
.cc-copy:hover,.cc-hide:hover{color:var(--brand-d)}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:3px;padding-top:3px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted)}
/* Aangewezen punt: de uitlezing staat dan stil op dat punt, niet op de cursor. */
.coord-ctl.cc-pinned{border-color:var(--brand);box-shadow:0 4px 16px rgba(21,101,192,.28)}
.coord-ctl.cc-pinned #cc-src{color:var(--brand-d);font-weight:600}
/* Buiten het RD-bereik is de X/Y wel te berekenen maar betekenisloos. */
.coord-ctl.cc-buiten #cc-rd{color:#b9c4ce}

/* ---------- Meetlint tijdens het tekenen ----------
   Loopt met de cursor mee en hangt aan <body>, dus buiten #map: de PDF-export
   rastert alleen #map en kan dit nooit meepakken. `pointer-events:none` want
   het mag geen klik opvangen die voor de kaart bedoeld is. */
.meetlint{position:fixed;z-index:1300;pointer-events:none;
  background:rgba(23,35,47,.92);color:#fff;border-radius:7px;padding:5px 9px;
  font-size:12px;line-height:1.45;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 12px rgba(0,0,0,.28)}
.meetlint b{font-size:14px;font-weight:700}
.meetlint span{color:#b8c7d6;font-size:11px}
.meetlint i{color:#b8c7d6;font-style:normal}

/* ---------- Stapel onderlagen ---------- */
.bm-stack{display:flex;flex-direction:column;gap:5px}
.bm-row{border:1px solid var(--line);border-radius:6px;padding:5px 7px 3px;background:#fbfcfd}
.bm-row+.bm-row{position:relative}
.bm-top{display:flex;align-items:center;gap:4px}
.bm-name{flex:1 1 auto;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-pct{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.bm-btn{border:none;background:none;cursor:pointer;color:#8a99a8;font-size:11px;line-height:1;padding:2px 3px;flex:0 0 auto}
.bm-btn:hover:not(:disabled){color:var(--brand)}
.bm-btn:disabled{opacity:.25;cursor:default}
.bm-btn.bm-del:hover:not(:disabled){color:var(--danger)}
.bm-row input[type=range]{width:100%;margin:1px 0 0;height:14px;accent-color:var(--brand)}

/* ---------- Statusbolletje per kaartlaag ----------
   Vier standen met een eigen kleur én een eigen betekenis; zie layerstatus.js.
   'bezig' pulseert zodat laden zichtbaar anders is dan een uitslag. */
.bm-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:#c3ccd6;border:1px solid rgba(0,0,0,.12);vertical-align:middle}
.bm-dot.ok{background:#2e7d32}
.bm-dot.leeg{background:#f9a825}
.bm-dot.fout{background:var(--danger)}
.bm-dot.schaal{background:#1e88e5}
.bm-dot.bezig{background:#b0bec5;animation:dotpuls 1s infinite}
.bm-dot.onbekend{background:#c3ccd6}
@keyframes dotpuls{0%,100%{opacity:.35}50%{opacity:1}}

/* uitslag van "Alle lagen testen" */
.test-lijst{max-height:52vh;overflow:auto;margin-top:8px}
.test-groep{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin:9px 0 3px}
.test-rij{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:12px}
.test-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.test-extra{flex:0 0 auto;font-size:10.5px;color:var(--muted);max-width:45%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Collecties onderlagen ---------- */
.bms-list{display:flex;flex-direction:column;gap:5px}
.bms-row{border:1px solid var(--line);border-radius:6px;padding:4px 7px 5px;background:#fbfcfd}
/* De collectie die precies aanstaat: eigen rand + tint, zodat je in één
   oogopslag ziet welke stand op de kaart ligt. */
.bms-row.actief{border-color:var(--brand);background:#eef3f8}
.bms-top{display:flex;align-items:center;gap:2px}
.bms-name{flex:1 1 auto;min-width:0;text-align:left;border:none;background:none;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--ink);padding:2px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bms-name:hover{color:var(--brand)}
.bms-row.actief .bms-name{color:var(--brand)}
.bms-row.actief .bms-name:before{content:'✓ '}
.bms-sub{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Externe kaartdiensten in een popup ---------- */
.ext-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:8px 0 2px;
  border-top:1px solid #eef2f6;padding-top:7px}
.ext-lnk{font-size:11.5px;text-decoration:none;color:var(--brand);background:#eef3f8;
  border-radius:5px;padding:3px 7px;white-space:nowrap}
.ext-lnk:hover{background:var(--brand);color:#fff}
.ext-copy{border:none;background:#eef3f8;border-radius:5px;padding:3px 6px;cursor:pointer;font-size:11px;line-height:1.3}
.ext-copy:hover{background:#dbe6f1}
.ext-co{flex:1 0 100%;font-variant-numeric:tabular-nums;margin-top:2px}
/* RD is het werkgetal (veld, rapport, CAD) en staat er daarom voluit en
   leesbaar; de graden zijn bijvangst en blijven klein. */
.ext-rd{font-size:11.5px;color:#1c2733}
.ext-wgs{font-size:10.5px;color:var(--muted)}

/* ---------- Boorprofiel in de popup ---------- */
.sikb-prof{display:flex;gap:8px;margin:2px 0 9px}
.sikb-prof .col{flex:0 0 auto}
.sikb-prof .lgd{flex:1 1 auto;font-size:11px;line-height:1.35;color:#3a4a5a;min-width:0}
.sikb-prof .lgd div{display:flex;gap:5px;align-items:flex-start;margin-bottom:2px}
.sikb-prof .lgd i{flex:0 0 10px;height:10px;border-radius:2px;margin-top:2px;border:1px solid rgba(0,0,0,.25)}
.sikb-prof .lgd b{font-weight:600}
.sikb-prof .lgd span.q{color:#6b7b8c}

/* ---------- Monsterweergave in de popup (grafiek + specificaties) ----------
   Eén serie, dus één kleur; de groepskop draagt de identiteit. #1565c0 is tegen
   de witte popup gevalideerd, #86b6ef is de lichte stap van dezelfde tint. */
.mv{--mv-bar:var(--brand);--mv-bar-licht:#86b6ef}
.mv-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mv-tabs button{border:0;background:none;font:inherit;font-size:12px;color:var(--muted);
  padding:5px 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.mv-tabs button:hover{color:var(--ink)}
.mv-tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
/* De popup valt buiten de modal-opmaak, dus het keuzelijstje krijgt hier zijn vorm. */
.mv-kies{width:100%;padding:4px 6px;border:1px solid var(--line);border-radius:6px;
  font-size:12px;font-family:inherit;background:#fff;color:var(--ink)}
.mv-wrap{display:flex;gap:10px;align-items:flex-start}
.mv-col{flex:0 0 auto;max-width:56px}
.mv-bars{flex:1 1 auto;min-width:0}
.mv-kol{text-align:center}
.mv-schaal{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);
  padding:0 1px;margin-bottom:1px;font-variant-numeric:tabular-nums}
.mv-kol-txt{font-size:9.5px;color:var(--muted);line-height:1.3;margin-top:1px}
.mv-geen{font-size:10px;color:var(--muted);line-height:1.4;text-align:center;padding-top:20px;width:34px}
.mv-grp{margin-bottom:9px}
.mv-gk{font-size:10.5px;color:var(--ink);font-weight:600;margin-bottom:3px}
.mv-row{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.mv-nm{flex:0 0 92px;font-size:11px;color:#37474f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-tr{flex:1 1 auto;min-width:24px;height:8px;background:#eef2f6;border-radius:4px;overflow:hidden}
.mv-bar{display:block;height:8px;background:var(--mv-bar);border-radius:0 4px 4px 0}
/* Onder de detectiegrens: open staaf én een "<" in de waarde — nooit alleen kleur. */
.mv-bar.dl{background:transparent;border:1px solid var(--mv-bar-licht);box-sizing:border-box}
.mv-val{flex:0 0 auto;min-width:48px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums}
.mv-meer{font-size:10.5px;color:var(--muted);margin-top:2px}
.mv-voet{font-size:10px;color:var(--muted);line-height:1.4;margin-top:8px;border-top:1px solid #eef2f6;padding-top:5px}
.mv-dl-uitleg{display:inline-flex;align-items:center;gap:4px;margin-left:6px;white-space:nowrap}
.mv-dl-uitleg i{width:14px;height:8px;border:1px solid var(--mv-bar-licht);border-radius:0 4px 4px 0}
.mv-schakel{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);margin-top:5px}
.mv-schakel input{width:auto;margin:0}
.mv-tabel{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:6px}
.mv-tabel table{width:100%;border-collapse:collapse;font-size:11px}
.mv-tabel td{padding:2px 6px;border-bottom:1px solid #f1f5f9}
.mv-tabel .mv-th{position:sticky;top:0;background:#f4f7fa;text-align:left;padding:3px 6px;
  font-size:10.5px;color:var(--ink);border-bottom:1px solid var(--line)}
.mv-tabel .mv-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Labcertificaat: koppelwizard ---------- */
.q{color:var(--muted);font-size:11px}
.lab-steps{display:flex;gap:6px;margin:-4px 0 14px;flex-wrap:wrap}
.lab-steps span{font-size:11px;color:var(--muted);background:#f1f5f9;border-radius:20px;padding:3px 10px;white-space:nowrap}
.lab-steps span.on{background:var(--brand);color:#fff;font-weight:600}
.lab-steps span.done{background:#dcefe2;color:#1b7a3d}
.modal button.lab-aanwijs{padding:4px 8px;line-height:1.1}

/* ---------- Schuifje: waar komt de klik-informatie terecht? ----------
   Zelfde schakelaar in het tabblad Tekenen én in Inspect; inspect.js houdt
   ze gelijk via de klasse .js-infomode. */
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--ink);user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.sw-track{position:relative;flex:0 0 auto;width:38px;height:21px;border-radius:11px;background:#c8d3de;
  transition:background .15s ease}
.sw-knob{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s ease}
.switch input:checked + .sw-track{background:var(--brand)}
.switch input:checked + .sw-track .sw-knob{transform:translateX(17px)}
.switch input:focus-visible + .sw-track{outline:2px solid var(--brand-d);outline-offset:2px}
.sw-lab{line-height:1.3}

/* ---------- Tabblad Inspect ---------- */
.insp-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding-bottom:6px;
  border-bottom:1px solid var(--line)}
.insp-title{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De inhoud komt uit de popups en rekent soms op ruimte (labgrafiek 400 px);
   liever hier schuiven dan de hele zijbalk laten uitrekken. */
.insp-body{overflow-x:auto}
.insp-body:empty{display:none}
.insp-body .dp{min-width:0 !important}
.insp-body table{max-width:100%}

/* Markering op de kaart bij paneelmodus: zonder merkteken weet je bij een
   reeks vlakken niet meer welke je aan het bewerken bent. */
.wbv-hl{pointer-events:none}
.wbv-hl i{display:block;width:34px;height:34px;border-radius:50%;
  border:3px solid #ff6d00;box-shadow:0 0 0 2px rgba(255,255,255,.75) inset;
  animation:wbvhl 1.4s ease-out infinite}
@keyframes wbvhl{0%{transform:scale(.75);opacity:1}70%{transform:scale(1.15);opacity:.45}100%{transform:scale(.75);opacity:1}}

/* ---------- Instantiecheck (tabblad Teken) ----------
   De uitslag begint bewust met de bronstaat en niet met de uitkomst: eerst
   weten of het antwoord compleet is, dan pas wat het antwoord is. Vandaar dat
   de kop dezelfde bolletjes gebruikt als het lagenpaneel — één visuele taal
   voor "werkt / niets gevonden / stuk". */
.ic-uitslag{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}
.ic-kop{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.ic-sub{font-size:10.5px;color:var(--muted);margin:2px 0 6px}
.ic-let{color:#8a6d00;background:#fffbe6;border-radius:5px;padding:4px 6px;margin:4px 0}

.ic-groep{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin:10px 0 3px}
.ic-groep span{display:block;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:10.5px;color:var(--muted);opacity:.85}

.ic-rij{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:6px;
  padding:5px 7px;margin-bottom:5px;background:#fbfcfd}
/* Beleid bindt niet; het mag er staan, maar hoort niet dezelfde nadruk te
   krijgen als een regel waar je je aan te houden hebt. */
.ic-rij.zacht{border-left-color:#c3ccd6;background:#fff;opacity:.8}
.ic-naam{font-size:12.5px;font-weight:600;color:var(--ink)}
.ic-contact{font-size:11px;color:var(--brand);margin-top:1px}
.ic-grond{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35}

.ic-bronnen{margin-top:9px}
.ic-bronnen summary{cursor:pointer;font-size:11.5px;color:var(--muted)}
.ic-attr{font-size:10px;color:var(--muted);opacity:.8;margin:0 0 4px 15px}

/* ---------- Vergunningcheck (fase C) ----------
   Sluit aan op de opmaak van de instantiecheck hierboven: dezelfde koppen,
   dezelfde bolletjes, dezelfde bronstaat. Het is één gesprek in twee stappen,
   dus het hoort niet als een ander product te ogen. */
.vc-loclijst{max-height:22vh;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:3px}
.vc-loc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);padding:3px 4px;cursor:pointer}
.vc-loc:hover{background:#f7f9fb}
.vc-loc span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-loc em{flex:0 0 auto;font-size:10px;color:var(--muted);font-style:normal}

.vc-acts{max-height:34vh;overflow:auto;margin:2px 0 4px}
.vc-act{display:block;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:6px;
        padding:5px 7px;margin-bottom:4px;cursor:pointer;background:#fff}
.vc-act:hover{background:#f7f9fb}
.vc-act.zacht{border-left-color:#c3ccd6;opacity:.7;cursor:default}
.vc-act input{margin-right:5px;vertical-align:middle}
.vc-act-naam{font-size:12.5px;font-weight:600}
.vc-act-om{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.vc-act-bron{display:block;font-size:10px;color:var(--muted);font-style:normal;opacity:.8}
.vc-overwogen{margin:2px 0 6px}
.vc-overwogen summary{cursor:pointer;font-size:11.5px;color:var(--muted)}

/* Voortgang: bij honderden vragen wil je zien dat je opschiet. */
.vc-balk{height:4px;background:#e8eef4;border-radius:3px;overflow:hidden;margin:2px 0 8px}
.vc-balk i{display:block;height:100%;background:var(--brand);transition:width .2s}

.vc-vraag{border:1px solid var(--line);border-radius:7px;padding:8px;background:#fbfdff}
.vc-vraag-act{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.vc-vraag-tekst{font-size:13px;font-weight:600;margin:2px 0 6px;line-height:1.35}
.vc-vraag-loc{font-size:10.5px;color:var(--muted);margin-bottom:5px}
.vc-ja-nee{display:flex;gap:6px}
.vc-ja-nee .btn{flex:1 1 0}
.vc-tekst-rij{display:flex;gap:6px}
.vc-tekst-rij input{flex:1 1 auto;min-width:0}
.vc-perloc{margin-top:7px;border-top:1px solid var(--line);padding-top:5px}
.vc-perloc summary{cursor:pointer;font-size:11px;color:var(--muted)}
.vc-perloc-rij{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px}
.vc-perloc-rij>span{flex:0 0 82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-perloc-rij em{font-size:10px;color:var(--muted);font-style:normal}

.vc-uitkomst{display:block;cursor:pointer}
.vc-uitkomst input{margin-right:5px}
.vc-verschilt{border-left-color:#f9a825}
.vc-let{display:inline-block;font-size:10px;color:#8a6d00;background:#fffbe6;border-radius:4px;padding:1px 5px;margin-top:3px}
.vc-locs{font-size:10.5px;color:var(--muted);margin-left:5px}
.vc-label{display:inline-block;font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 6px;margin-top:3px;
          background:#eef2f6;color:var(--ink)}
.vc-Vergunningplicht{background:#fdecea;color:#b3261e}
.vc-Meldingsplicht{background:#fff4e5;color:#8a5300}
.vc-Informatieplicht{background:#e8f1fb;color:var(--brand-d)}
.vc-Toestemmingsvrij{background:#e8f5e9;color:#2e7d32}
.vc-Verbod{background:#fdecea;color:#7f1d1d}
.vc-bijl{margin-top:4px}
.vc-bijl summary{cursor:pointer;font-size:11.5px;color:var(--muted)}

/* ---------- Foto's (fase D) ---------- */
.foto-strip{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;align-items:center}
.foto-strip img{width:52px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--line);cursor:pointer}
.foto-strip img:hover{border-color:var(--brand)}
.foto-meer{font-size:11px;color:var(--muted)}
.foto-beheer{max-height:46vh;overflow:auto}
.foto-rij{display:flex;gap:8px;align-items:flex-start;border-bottom:1px solid var(--line);padding:6px 0}
.foto-rij img{width:64px;height:64px;object-fit:cover;border-radius:5px;flex:0 0 auto;border:1px solid var(--line)}
.foto-meta{flex:1 1 auto;min-width:0}
.foto-meta input{width:100%;padding:5px 6px;border:1px solid var(--line);border-radius:5px;font-size:13px}
.foto-sub{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.35;word-break:break-word}
.foto-knoppen{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.foto-lijstje{font-size:12px;color:var(--muted);margin:4px 0 0;padding-left:18px}

/* Groot bekijken: een veldfoto beoordeel je niet op 52 pixels. */
.foto-overlay{position:fixed;inset:0;background:rgba(12,18,24,.92);z-index:4000;display:flex;
              flex-direction:column;align-items:center;justify-content:center}
.foto-groot{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:14px;min-height:0;width:100%}
.foto-groot img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;background:#000}
.foto-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;
          background:rgba(0,0,0,.55);color:#fff;font-size:12.5px}
.foto-titel{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto-titel em{color:#b9c7d4;font-style:normal;font-size:11px;margin-left:6px}
.foto-nav{display:flex;align-items:center;gap:6px}
.foto-teller{color:#b9c7d4;font-size:11.5px;min-width:52px;text-align:center}

/* ---------- Gemeten beschikbaarheid van een kaartlaag (js/laaghistorie.js) ----------
   Twee reeksen onder elkaar: dertig dagstaven en de laatste 48 metingen. De
   kleuren zijn dezelfde als die van de statusbolletjes hierboven (.bm-dot):
   groen = werkend, geel = leeg beeld, rood = storing. Wijzig je ze daar, pas ze
   dan ook aan in KLEUR in js/laaghistorie.js — een SVG-vulling kan die klasse
   niet erven. */
.lh{margin:8px 0 0;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:#fbfcfd}
.lh-kop{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:6px}
.lh-sub{font-weight:400;text-transform:none;letter-spacing:0}
.lh-graf{display:block;width:100%;height:30px}
.lh-strip{display:block;width:100%;height:11px;margin-top:7px}
.lh-as{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:2px}
.lh-leg{display:flex;gap:10px;margin-top:7px;font-size:10.5px;color:var(--muted)}
.lh-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;
  vertical-align:middle}
.lh-tekst{margin:6px 0 0;font-size:11.5px;color:var(--ink);line-height:1.45}
.lh-zwak{color:var(--muted);font-size:10.5px}
.lh-uit{margin:6px 0 0;font-size:11px;color:var(--muted)}
/* Compacte variant in "Alle lagen testen…": alleen de 48-uursstrip + percentage */
.lh-compact{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:10.5px;
  color:var(--muted)}
.lh-compact .lh-strip{margin-top:0;width:96px;height:9px;flex:0 0 auto}

/* ---- CAD-import (js/cad.js) ----
   .muted is de inline-tegenhanger van .hint: kleine grijze bijtekst zonder de
   marges van een alinea. */
.muted{color:var(--muted);font-size:11px;line-height:1.45}
.btn.small{padding:3px 8px;font-size:11px}
.waarschuwing{margin:8px 0;padding:7px 9px;border:1px solid #f0c36d;border-radius:6px;
  background:#fdf6e3;font-size:11.5px;line-height:1.45}
.cad-lagen{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:4px}
.cad-laag{display:flex;align-items:center;gap:6px;padding:3px 5px;font-size:12px;cursor:pointer}
.cad-laag:hover{background:#eef3f8}
.cad-laag .cad-kleur{display:inline-block;width:11px;height:11px;border-radius:2px;
  border:1px solid rgba(0,0,0,.25);flex:0 0 auto}
.cad-laag .muted{margin-left:auto}
/* Lagen die buiten de tekening liggen (tekenkader): standaard uit, dus gedempt */
.cad-laag.cad-buiten{opacity:.62}

/* ---- Labelveld kiezen per importlaag (🏷 in het lagenpaneel) ---- */
.lbl-lijst{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:3px;margin:8px 0}
.lbl-veld{display:flex;align-items:baseline;gap:7px;padding:5px 7px;border-radius:5px;cursor:pointer;font-size:12px}
.lbl-veld:hover{background:#eef3f8}
.lbl-veld input{flex:0 0 auto}
.lbl-veld b{flex:0 0 auto}
.lbl-veld .muted{margin-left:auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.lbl-bewaar{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:4px;cursor:pointer}

/* ---- Wisvak (js/wissen.js) ---- */
.wis-optie{display:flex;align-items:flex-start;gap:7px;font-size:12px;padding:4px 2px;cursor:pointer;line-height:1.4}
.wis-optie input{flex:0 0 auto;margin-top:2px}
#wis-telling{font-size:12.5px;margin:0 0 8px}

/* ---- Noordpijl op de kaart (js/map.js) ---- */
.wbv-noord{background:rgba(255,255,255,.9);padding:2px 4px 0;line-height:0;border-radius:4px}
.wbv-noord svg{display:block}
/* De schaalbalk van Leaflet in dezelfde stijl als de rest van de kaartknoppen */
.leaflet-control-scale-line{background:rgba(255,255,255,.85);border-color:#5a6b7a;color:#1a2733;
  font-size:11px;padding:1px 5px}

/* ---- Meetstaat (meetstaat.js): lengtes en oppervlaktes per soort ----
   Twee tabellen onder elkaar in dezelfde modal, met een kop per soort, regels
   eronder en een totaalregel. De getalkolommen staan rechts uitgelijnd zodat
   de komma's onder elkaar vallen — anders zijn subtotalen niet na te lopen. */
.ms-kop{margin:14px 0 6px;font-size:13px;color:#33475b}
.ms-kop:first-child{margin-top:0}
.ms-tabel{overflow-x:auto}
.ms-tabel table{width:100%;border-collapse:collapse;font-size:12.5px}
.ms-tabel th,.ms-tabel td{padding:4px 7px;border-bottom:1px solid var(--line);text-align:left}
.ms-tabel thead th{font-size:11px;color:#6b7b8c;font-weight:600}
.ms-tabel .ms-n,.ms-tabel .ms-m{text-align:right;white-space:nowrap}
.ms-tabel .ms-n{width:62px}
.ms-tabel tr.ms-grp td{font-weight:600;background:#f4f7fa}
.ms-tabel tr.ms-det td{color:#4a5b6c;padding-left:16px}
.ms-tabel tr.ms-det td:first-child{padding-left:20px}
.ms-tabel tfoot th{border-top:2px solid #b6c3d0;border-bottom:none;font-size:13px}
.ms-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:baseline}
.ms-dot.ms-mix{background:linear-gradient(135deg,#90a4ae 50%,#cfd8dc 50%)}
.ms-keuzes{margin-top:14px}
.ms-fld{margin-top:8px;font-size:12px;color:#6b7b8c}
.ms-noot{font-size:11px;margin:8px 0 0}

/* ---- Lagen bundelen (consolideer.js) ---- */
.cons-voorstel{background:#f4f8fb;border:1px solid #dce6ee;border-radius:7px;padding:10px 12px}
.cons-voorstel p{margin:0 0 8px}
.cons-voorstel p.muted{margin:8px 0 0;font-size:11px}
.cons-hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.cons-lijst{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:7px;
  margin-top:8px;padding:4px 2px}
.cons-lijst table{width:100%;border-collapse:collapse;font-size:12.5px}
.cons-lijst table td{padding:3px 8px;border-bottom:1px solid var(--line)}
.cons-regel{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 8px;cursor:pointer;
  border-radius:4px}
.cons-regel:hover{background:#f2f6fa}
.cons-regel input{flex:0 0 auto}
.cons-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cons-regel .muted{flex:0 0 auto;font-size:11px}
.cons-knopjes{font-size:11px;margin-top:5px}
.cons-knopjes a{color:var(--brand);text-decoration:none}
.cons-knopjes a:hover{text-decoration:underline}
#cons-telling{margin:8px 0 2px;font-size:12px}
#cons-noot{font-size:11px;margin:8px 0 0}

/* Antwoord van de server bij een storing (project.js). Monospace en scrollbaar:
   een PHP-melding is lang en het bestandspad erin is het belangrijkste deel. */
.srv-fout{background:#fdf3f3;border:1px solid #e6c3c3;border-radius:6px;padding:8px 10px;margin:4px 0 10px;
  font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7f1d1d;
  white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto}

/* Klik op de kaart: wat ligt hier (js/klikinfo.js) */
.ki{min-width:230px;font-size:12px}
.ki-laden{color:#6b7b8c}
.ki-sectie{border-top:1px solid #e3e8ee;padding-top:7px;margin-top:7px}
.ki-sectie:first-child{border-top:0;padding-top:0;margin-top:0}
.ki-kop{font-weight:600;color:#1c2733;font-size:12.5px}
.ki-kop .ki-n{font-weight:400;color:#6b7b8c;font-size:11px}
.ki-obj{margin-top:5px;padding:5px 6px;background:#f5f7f9;border-radius:5px}
.ki-props{color:#44525f;font-size:11px;line-height:1.35;word-break:break-word}
.ki-props span{color:#8595a4}
.ki-knoppen{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ki-knoppen .btn{flex:1 1 auto}
.ki-noot{color:#8595a4;font-size:11px;margin-top:3px;line-height:1.35}
.ki-klaar{color:#2e7d32}
.ki-bron{margin-top:8px;font-size:11px;color:#6b7b8c}
.ki-bron summary{cursor:pointer}
.ki-bron ul{padding:0;margin:4px 0 0}
.ki-bron li{list-style:none;margin:2px 0}
.dp-bron{color:#44525f;line-height:1.35}

/* Middelpunt van het gekozen vlak in de coördinaat-uitlezing (coords.js) */
.cc-mid .cc-lab,.cc-mid .cc-val{color:var(--brand-d)}
.cc-midnaam{font-size:10.5px;color:var(--brand-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:260px;margin:0 0 2px 36px}
.dp-meas .dp-mid{flex:1 1 auto;text-align:right;font-variant-numeric:tabular-nums}

/* Rechtsklikmenu: positie + tekenen vanaf hier (map.js) */
.rk{font-size:12px}
.rk-kop{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:#8595a4;margin:8px 0 3px}
.rk-kop:first-child{margin-top:0}
.rk-rd{font-weight:600;font-variant-numeric:tabular-nums;color:#1c2733}
.rk-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:4px}

/* ＋ Onderlaag toevoegen: zoeken, favorieten, laatst gebruikt (js/lagenkiezer.js) */
.lk{border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:4px;box-shadow:0 4px 14px rgba(20,40,60,.10)}
.lk-zoek{display:block;width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);
  padding:7px 9px;font-size:12.5px;border-radius:6px 6px 0 0;outline:none;background:#fbfcfd}
.lk-zoek:focus{background:#fff}
.lk-lijst{max-height:360px;overflow-y:auto;padding:0 0 4px}
.lk-kop{position:sticky;top:0;z-index:1;background:#fff;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding:7px 9px 3px}
.lk-rij{display:flex;align-items:center;gap:3px;padding:3px 8px 3px 4px;cursor:pointer;font-size:12px;line-height:1.35}
.lk-rij:hover,.lk-rij.lk-eerste{background:#eef3f8}
.lk-rij.aan{cursor:default}
.lk-rij.aan .lk-naam{color:var(--muted)}
.lk-ster{flex:0 0 auto;border:0;background:none;cursor:pointer;font-size:14px;line-height:1;color:#b6c1cc;padding:1px 3px}
.lk-ster:hover{color:#f9a825}
.lk-ster.aan{color:#f9a825}
.lk-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-groep{font-size:10.5px;color:var(--muted);margin-left:3px}
.lk-aan{flex:0 0 auto;font-size:10.5px;color:#2e7d32}
.lk-leeg{padding:4px 9px 6px;font-size:11.5px;color:var(--muted);line-height:1.4}
.lk-voet{font-size:10.5px;color:var(--muted);padding:5px 9px;border-top:1px solid var(--line)}
.bm-btn.bm-ster{font-size:13px;color:#b6c1cc}
.bm-btn.bm-ster.aan,.bm-btn.bm-ster:hover{color:#f9a825}

/* Tekstgrootte van de kaartlabels in het 🏷-venster (layers.js) */
.lbl-grootte{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.lbl-grootte > .muted{font-size:11.5px;margin-bottom:4px}
.lbl-gr{display:flex;align-items:baseline;gap:7px;padding:3px 2px;cursor:pointer}
.lbl-gr-vb{font-weight:600;color:#0b2233;white-space:nowrap}

/* Punt op coördinaat: voorbeeld per regel onder het invulvak (puntcoord.js) */
.pc-voorbeeld{margin-top:8px;max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:6px;font-size:12px}
.pc-voorbeeld:empty{display:none}
.pc-leeg{padding:7px 9px;color:var(--muted)}
.pc-rij{display:flex;gap:8px;padding:5px 9px;border-top:1px solid var(--line);line-height:1.35}
.pc-rij:first-child{border-top:0}
.pc-nr{color:var(--muted);min-width:18px;text-align:right;font-variant-numeric:tabular-nums}
.pc-sys{color:var(--muted);font-size:11px;margin-left:4px}
.pc-xy{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#34495e}
.pc-fout{background:#fdecea;color:#a12a1f}
.pc-let{background:#fff6e0}

/* Verplaatsen / draaien (transform.js) */
.tf-ctl{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:1150;background:#fff;
  border:2px solid #ff6d00;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.22);padding:8px 10px;
  font-size:12.5px;min-width:300px;max-width:calc(100% - 32px)}
.tf-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.tf-titel{font-weight:700;color:#bf360c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-rij{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.tf-hoekveld{display:flex;align-items:center;gap:4px;margin-right:auto}
.tf-hoekveld input{width:62px;text-align:right;padding:3px 5px;font-variant-numeric:tabular-nums}
.tf-uitlijn{margin-top:7px;padding:4px 7px;border-radius:6px;background:#f4f6f8;color:var(--muted)}
.tf-uitlijn.tf-vast{background:#e8f5e9;color:#1b5e20;font-weight:600}
.tf-hint{margin-top:5px;font-size:11px;color:var(--muted)}
.tf-greep{background:#ff6d00;color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 5px rgba(0,0,0,.4);
  font-size:17px;line-height:23px;text-align:center;cursor:grab;font-weight:700}
.tf-draaien .tf-greep{cursor:grabbing}
.tf-mid{border:2px solid #ff6d00;border-radius:50%;background:rgba(255,255,255,.8)}
.leaflet-tooltip.tf-hoek{background:#263238;color:#fff;border:0;font-size:12px;padding:4px 8px;white-space:nowrap}
.leaflet-tooltip.tf-hoek b{font-size:14px}
.leaflet-tooltip.tf-hoek.tf-vast{background:#00a844}
.leaflet-tooltip.tf-hoek:before{border-top-color:#263238}
.leaflet-tooltip.tf-hoek.tf-vast:before{border-top-color:#00a844}
.tf-actief .leaflet-interactive{cursor:move}
.tf-kiezen,.tf-kiezen .leaflet-interactive{cursor:crosshair}
.dp-tf{flex-wrap:wrap}
.tf-ctl[hidden]{display:none}
.tf-ctl .btn{flex:0 0 auto;width:auto;padding:3px 9px;font-size:12px}
.tf-kop .btn{padding:3px 12px}

/* Onderlegger (onderlegger.js) */
.leaflet-onderlegger-pane img.ol-beeld{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;max-height:none;
  pointer-events:none;user-select:none;image-rendering:auto}
.ol-bewerken .leaflet-onderlegger-pane img.ol-beeld{outline:0}
.ol-bewerken.ol-boven,.ol-bewerken.ol-boven .leaflet-interactive{cursor:move}
.ol-kiezen,.ol-kiezen .leaflet-interactive{cursor:crosshair}
.ol-hoek{background:#fff;border:2px solid #ff6d00;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:nwse-resize}
.ol-pp{border-radius:50%;color:#fff;font:700 12px/18px system-ui,sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.ol-pp-beeld{background:#ff6d00}
.ol-pp-kaart,.ol-pp-klaar{background:#00a844}
.ol-stap{margin-top:7px;padding:6px 8px;border-radius:6px;background:#fff3e0;color:#6d3200;line-height:1.4}
.ol-stap[hidden]{display:none}
.ol-esc{color:var(--muted);font-size:11px;white-space:nowrap}
.ol-schuif{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ol-schuif input{flex:1;min-width:60px}
.ol-schuif-pan{flex:1}
.ol-lijst{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ol-lijst:empty{display:none}
.ol-item{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fafbfc}
.ol-item.ol-uit{opacity:.6}
.ol-regel{display:flex;align-items:center;gap:6px}
.ol-regel + .ol-regel,.ol-item .ol-schuif{margin-top:5px}
.ol-titel{flex:1;font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-item .btn{flex:0 0 auto;padding:3px 8px;font-size:12px}
.ol-item .ol-uitlijn{margin-left:auto}
.ol-item select{flex:1;min-width:0;font-size:12px;padding:3px}
.ol-item input[type=color]{width:30px;height:24px;padding:0;border:1px solid var(--line)}
.ol-item input[type=color][hidden]{display:none}
.ol-oog input{width:auto;margin:0}
.ol-sub{font-size:11px;color:var(--muted);margin-top:2px}

/* ---------- Menu-indeling (v83): inklapbare panelen, subblokken, keuzeknoppen ---------- */
.panel.fold>.fold-kop{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;margin-bottom:8px}
.panel.fold>.fold-kop::after{content:'▾';margin-left:auto;font-size:12px;color:var(--muted);transition:transform .15s}
.panel.fold.dicht>.fold-kop{margin-bottom:0}
.panel.fold.dicht>.fold-kop::after{transform:rotate(-90deg)}
.panel.fold>.fold-kop:hover{color:var(--ink)}
.panel.fold>.fold-kop:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.panel.fold.dicht>.fold-body{display:none}
.panel .sub{padding:8px 0 10px;border-top:1px dashed var(--line)}
.panel .sub:first-of-type{border-top:0;padding-top:0}
.panel .sub>h3{margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--ink)}
.panel .sub .btn-row{margin-bottom:2px}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:3px}
.seg label{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 4px;font-size:12.5px;cursor:pointer;background:#fff;color:var(--ink)}
.seg label+label{border-left:1px solid var(--line)}
.seg input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.seg label:has(input:checked){background:var(--brand);color:#fff;font-weight:600}
.seg label:has(input:focus-visible){outline:2px solid var(--brand-d);outline-offset:-2px}
.sub-fld{margin-left:22px;margin-top:4px}

/* Werkbalk op de kaart (werkbalk.js) */
.wb-balk{background:#fff;display:flex;flex-direction:column}
.leaflet-bar.wb-balk a.wb-knop{width:32px;height:32px;line-height:32px;font-size:16px;color:#263238;text-align:center;border-bottom:1px solid #e3e8ee}
.leaflet-bar.wb-balk a.wb-knop:hover{background:#eef3f8;color:var(--brand)}
.leaflet-bar.wb-balk a.wb-knop.aan{background:#e65100;color:#fff;border-bottom-color:#e65100}
.wb-streep{height:4px;background:#dfe5eb}
.wb-kleur{display:block;width:32px;height:30px;padding:4px;box-sizing:border-box;cursor:pointer}
.wb-kleur input{width:100%;height:100%;padding:0;border:1px solid #cfd8e0;border-radius:4px;cursor:pointer;background:none}
.leaflet-touch .leaflet-bar.wb-balk a.wb-knop{width:34px;height:34px;line-height:34px}
.insp-head[hidden]{display:none}

/* =====================================================================
 * Look & feel v85 — moderner, rustiger
 * Bewust als laag bovenop de bestaande regels: dezelfde klassen, dus alle
 * onderdelen (ook die hierboven niet genoemd worden) erven de nieuwe tokens.
 * Uitgangspunten: één lettertype (Inter), zachte grijstinten, panelen als
 * kaarten, lijniconen in plaats van emoji, duidelijke focusring, en zwevende
 * kaartbediening met dezelfde glazen stijl.
 * ===================================================================== */
:root{
  --bg:#eef2f6; --panel:#ffffff; --surface:#f6f8fb; --surface-2:#f1f5f9;
  --ink:#0f1b2d; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e2e8f0; --line-2:#d5dde7;
  --brand:#1d64d8; --brand-d:#174fb0; --brand-50:#eaf1fd; --brand-100:#d6e4fb;
  --danger:#dc2626; --danger-50:#fef2f2; --ok:#16a34a; --warn:#d97706;
  --accent:#f26b1d; --accent-d:#d9560c;
  --r-sm:6px; --r:9px; --r-lg:14px;
  --sh-xs:0 1px 2px rgba(15,27,45,.06);
  --sh-sm:0 1px 3px rgba(15,27,45,.08),0 1px 2px rgba(15,27,45,.04);
  --sh-md:0 6px 20px rgba(15,27,45,.12),0 2px 6px rgba(15,27,45,.06);
  --sh-lg:0 24px 60px rgba(15,27,45,.22),0 6px 16px rgba(15,27,45,.08);
  --ring:0 0 0 3px rgba(29,100,216,.28);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Symbols 2",sans-serif;
  --sidebar-w:352px;
}
html,body{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px}
button,input,select,textarea{font-family:inherit}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--brand)}
::selection{background:var(--brand-100)}

/* ---- Zijbalk ---- */
#sidebar{background:var(--surface);border-right:1px solid var(--line);box-shadow:1px 0 0 rgba(15,27,45,.02)}
.side-head{background:var(--panel);color:var(--ink);padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.side-brand{align-items:center;gap:9px}
.side-logo{width:28px;height:28px;border-radius:8px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a74ea,#1a55c2);box-shadow:0 2px 6px rgba(29,100,216,.35)}
.side-logo svg{width:18px;height:18px;fill:#fff}
.side-head h1{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.side-head .subtitle{font-size:12px;color:var(--muted);opacity:1;font-weight:500}
.side-collapse{background:var(--surface-2);color:var(--muted);width:28px;height:28px;border-radius:8px;font-size:16px;transition:background .15s,color .15s}
.side-collapse:hover{background:var(--line);color:var(--ink)}
.side-head .search-wrap{margin-top:12px}
.search-ic{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;
  fill:none;stroke:var(--muted-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;z-index:1}
.side-head #search-input,#search-input{background:var(--surface-2);border:1px solid transparent;border-radius:10px;
  padding:9px 12px 9px 34px;font-size:13.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
#search-input::placeholder{color:var(--muted-2)}
#search-input:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:var(--ring)}
.search-results{top:calc(100% + 6px);border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh-md);padding:4px;margin:0}
.search-results li{border-radius:8px;border-bottom:0;padding:8px 10px}
.search-results li:hover{background:var(--brand-50)}

/* Tabbladen: iconen met label, actieve tab als zachte pil */
.side-tabs{background:var(--panel);border-bottom:1px solid var(--line);padding:6px 8px 8px;gap:2px}
.side-tabs .tab{border-bottom:0;border-radius:10px;padding:7px 0 6px;gap:4px;color:var(--muted);transition:background .15s,color .15s}
.side-tabs .tab .ic{display:flex;height:20px;align-items:center}
.side-tabs .tab .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-tabs .tab .tl{font-size:10.5px;font-weight:500;letter-spacing:0}
.side-tabs .tab:hover{background:var(--surface-2);color:var(--ink)}
.side-tabs .tab.active{background:var(--brand-50);color:var(--brand);font-weight:600}
.side-tabs .tab.active .tl{font-weight:600}
.side-tabs .tab:focus-visible{outline:none;box-shadow:var(--ring)}
.tab-badge{top:2px;right:calc(50% - 21px);min-width:16px;height:16px;line-height:16px;font-size:9.5px;border-radius:8px;
  background:var(--accent);box-shadow:0 0 0 2px var(--panel)}

/* Inhoud: panelen als kaarten */
.side-body{background:var(--surface);padding:10px 10px 14px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.side-body::-webkit-scrollbar{width:8px}
.side-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid var(--surface)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 12px;
  margin-bottom:10px;box-shadow:var(--sh-xs)}
.panel:last-child{border-bottom:1px solid var(--line);margin-bottom:0}
.panel h2{font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:-.005em;color:var(--ink);margin:0 0 10px}
.panel.fold>.fold-kop{margin:-14px -14px 0;padding:14px 14px 10px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.panel.fold.dicht>.fold-kop{padding-bottom:14px;border-radius:var(--r-lg)}
.panel.fold>.fold-kop::after{content:'';width:8px;height:8px;border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg) translate(-2px,-2px);margin-right:4px}
.panel.fold.dicht>.fold-kop::after{transform:rotate(-45deg)}
.panel.fold>.fold-kop:hover{background:var(--surface)}
.panel.fold.dicht{padding-bottom:0}
.panel .sub{border-top:1px solid var(--line);padding:12px 0}
.panel .sub:first-of-type{padding-top:0;border-top:0}
.panel .sub:last-child{padding-bottom:2px}
.panel .sub>h3{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.side-foot{background:var(--panel);border-top:1px solid var(--line);padding:8px 16px;font-size:11.5px;color:var(--muted)}

/* ---- Knoppen ---- */
.btn-row{gap:6px;margin-bottom:6px}
.btn{min-height:34px;padding:7px 12px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r);
  font-size:13px;font-weight:500;color:var(--ink);box-shadow:var(--sh-xs);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--surface);border-color:#c5d0dc}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(29,100,216,.3)}
.btn.primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.danger{color:var(--danger);border-color:#f4c7c7;background:#fff}
.btn.danger:hover{background:var(--danger-50);border-color:#eba9a9}
.btn.small{min-height:28px;padding:4px 9px;font-size:12px;border-radius:7px}
.btn.on,.btn.primary.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.on:hover,.btn.primary.on:hover{background:var(--accent-d);border-color:var(--accent-d)}
@keyframes btn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,107,29,.4)}50%{box-shadow:0 0 0 5px rgba(242,107,29,0)}}
.mini{background:var(--surface-2);border-radius:7px;width:26px;height:26px;color:var(--ink-2);transition:background .15s}
.mini:hover{background:var(--line)}

/* ---- Velden ---- */
.fld{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:10px}
.fld input,.fullw,.modal select,.modal input[type=text],.modal input[type=number],.dp-f,.lk-zoek,
.panel select,.panel input[type=text],.panel input[type=search],.panel textarea{
  border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);font-size:13px;
  padding:8px 10px;transition:border-color .15s,box-shadow .15s}
.fld input{margin-top:5px}
.fld input:focus,.fullw:focus,.modal select:focus,.modal input:focus,.dp-f:focus,.panel select:focus,
.panel input[type=text]:focus,.panel input[type=search]:focus,.panel textarea:focus,.modal textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.chk{font-size:13px;color:var(--ink);gap:8px;margin-top:8px}
.chk input{width:15px;height:15px;margin:0}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:6px}
input[type=color]{border-radius:8px;border:1px solid var(--line-2);height:30px;padding:2px;background:#fff}

/* Uitleg-regels */
details.tip{margin-top:10px}
details.tip>summary{font-size:12px;color:var(--brand);font-weight:500;gap:6px}
details.tip>summary::before{content:'';width:14px;height:14px;flex:0 0 14px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat}
details.tip>summary:hover{text-decoration:none;color:var(--brand-d)}
details.tip[open]{background:var(--surface);border-radius:var(--r);padding:8px 10px;margin-left:-4px;margin-right:-4px}
details.tip p{font-size:12px;color:var(--ink-2);line-height:1.55}
details.fold>summary{background:var(--surface);border-color:var(--line);border-radius:var(--r);padding:7px 10px;font-weight:500}
details.fold>summary:hover{background:var(--surface-2)}

/* Schakelaar en keuzeknoppen */
.sw-track{background:#cbd5e1 !important;transition:background .2s}
.switch input:checked+.sw-track{background:var(--brand) !important}
.seg{background:var(--surface-2);border:0;border-radius:10px;padding:3px;gap:3px}
.seg label{background:transparent;border-radius:8px;padding:6px 4px;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.seg label+label{border-left:0}
.seg label:has(input:checked){background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)}

/* Lagen en legenda */
.lay-row{border-radius:8px;padding:5px 6px}
.lay-row:hover{background:var(--surface)}
.lay-group{color:var(--muted);font-size:11px;letter-spacing:.05em}
.legend-item,.leglay,.bm-row,.ol-item{border-color:var(--line);border-radius:var(--r);background:#fff}
.bm-row{background:var(--surface)}
.legend-head .lh-t{color:var(--ink-2)}

/* ---- Vensters ---- */
.modal-bg{background:rgba(15,27,45,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:wbv-fade .15s ease}
.modal{border-radius:18px;box-shadow:var(--sh-lg);border:1px solid rgba(15,27,45,.06);animation:wbv-pop .18s cubic-bezier(.2,.8,.3,1)}
.modal h3{font-size:17px;font-weight:650;letter-spacing:-.01em;padding:18px 22px 6px;border-bottom:0}
.modal .body{padding:10px 22px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.modal .foot{padding:12px 22px;background:var(--surface);border-top:1px solid var(--line)}
.modal th{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.modal th,.modal td{border-bottom-color:var(--line)}
@keyframes wbv-fade{from{opacity:0}to{opacity:1}}
@keyframes wbv-pop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.prj-list li{border-radius:10px;border-bottom:1px solid var(--line);padding:10px 8px}
.prj-list li:hover{background:var(--surface)}

/* ---- Meldingen ---- */
.toast-msg{background:#0f1b2d;border-radius:12px;padding:11px 16px 11px 14px;font-size:13px;font-weight:500;box-shadow:var(--sh-md);
  display:flex;align-items:center;gap:10px;border-left:4px solid #64748b}
.toast-msg.ok{background:#0f1b2d;border-left-color:#22c55e}
.toast-msg.err{background:#0f1b2d;border-left-color:#ef4444}

/* ---- Kaart: bediening in dezelfde zwevende stijl ---- */
.leaflet-container{font-family:var(--font)}
.leaflet-bar,.leaflet-touch .leaflet-bar{border:0 !important;border-radius:12px;box-shadow:var(--sh-md);overflow:hidden}
.leaflet-bar a,.leaflet-touch .leaflet-bar a{border-bottom:1px solid var(--line);color:var(--ink);transition:background .15s,color .15s}
.leaflet-bar a:hover{background:var(--surface);color:var(--brand)}
.leaflet-bar a:last-child{border-bottom:0}
.leaflet-top.leaflet-left .leaflet-control{margin-left:12px;margin-top:12px}
.leaflet-control-zoom a{font-weight:500}
.leaflet-bar.wb-balk a.wb-knop{display:flex;align-items:center;justify-content:center;width:36px;height:36px;line-height:1;color:var(--ink-2);border-bottom:0}
.leaflet-bar.wb-balk a.wb-knop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leaflet-bar.wb-balk a.wb-knop:hover{background:var(--brand-50);color:var(--brand)}
.leaflet-bar.wb-balk a.wb-knop.aan{background:var(--accent);color:#fff}
.wb-balk{padding:4px;gap:2px}
.leaflet-bar.wb-balk a.wb-knop{border-radius:8px}
.wb-streep{height:1px;background:var(--line);margin:3px 4px}
.wb-kleur{width:36px;height:34px;padding:5px}
.wb-kleur input{border-radius:7px}
.leaflet-control-attribution{border-radius:8px 0 0 0;background:rgba(255,255,255,.85) !important;font-size:10.5px}
.leaflet-control-scale-line{border-color:var(--ink-2) !important;background:rgba(255,255,255,.8) !important;font-family:var(--font)}

.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:var(--sh-lg);padding:2px}
.leaflet-popup-tip{box-shadow:none}
.leaflet-popup-content{font-size:13px;line-height:1.45;color:var(--ink)}
.leaflet-container a.leaflet-popup-close-button{top:8px;right:8px;width:24px;height:24px;border-radius:7px;font-size:18px;line-height:22px;color:var(--muted)}
.leaflet-container a.leaflet-popup-close-button:hover{background:var(--surface-2);color:var(--ink)}
.leaflet-tooltip{border-radius:8px;box-shadow:var(--sh-sm);border-color:var(--line);font-family:var(--font)}
.dp-meas{background:var(--surface-2);border-radius:8px}
.dp-lab{color:var(--muted);font-weight:500}

/* Zwevende panelen op de kaart: licht glas */
.laagstatus,.coord-ctl,.depth-ctl,.tf-ctl{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);border:1px solid rgba(15,27,45,.08);border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.tf-ctl{border:1px solid rgba(242,107,29,.55);padding:10px 12px}
.tf-titel{color:var(--accent-d)}
.tf-uitlijn{background:var(--surface-2);border-radius:8px}
.laagstatus{padding:8px 10px 6px}
.coord-ctl{padding:8px 10px 7px}
.ls-titel,.cc-lab,.dc-title{color:var(--muted);letter-spacing:.05em}
.coord-ctl.cc-pinned{border-color:var(--brand);box-shadow:var(--sh-md),var(--ring)}
#btn-sidebar-show{background:#fff;color:var(--ink);border-radius:10px;box-shadow:var(--sh-md);font-weight:600;padding:8px 12px}
#btn-sidebar-show:hover{background:var(--surface)}
.meetlint{background:rgba(15,27,45,.92);border-radius:9px;box-shadow:var(--sh-md)}
.rk-kop{color:var(--muted);letter-spacing:.04em}
.grp-menu{border-radius:12px;box-shadow:var(--sh-md);padding:5px}
.grp-menu-item{border-radius:7px}
/* v85-bijstelling: twee knoppen naast elkaar moeten blijven passen */
.side-body{padding:8px 8px 12px}
.panel{padding:12px 12px 10px;margin-bottom:8px}
.panel.fold>.fold-kop{margin:-12px -12px 0;padding:12px 12px 10px}
.panel.fold.dicht>.fold-kop{padding-bottom:12px}
.btn{padding:6px 10px;font-size:12.5px;line-height:1.25}
.chk input[type=color]{width:40px;height:28px;margin-left:8px}
.dp-meas b{font-size:12.5px}
.vc-loc input[type=checkbox]{width:15px;height:15px;flex:0 0 15px;margin:0}

/* === Experimenteel (js/experimenteel.js) === */
.exp-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#b45309;background:#fef3c7;border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.exp-editor{margin-top:10px;padding:10px;border:1px solid #fcd34d;background:#fffbeb;border-radius:8px}
.exp-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.exp-maat{font-size:12px;color:#6b7b8c}
.exp-hint{font-size:12px;color:#6b7b8c;margin:4px 0 8px}
.exp-rij{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;margin:6px 0}
.exp-rij input{width:60%}
.exp-zone{border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:6px;margin:6px 0}
.exp-zone-kop{display:flex;gap:4px;align-items:center}
.exp-zone-kop input[type=text]{flex:1;min-width:0}
.exp-zone-kop input[type=color]{width:28px;height:26px;padding:0;border:none;background:none;flex:none}
.exp-zone-velden{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-top:4px}
.exp-zone-velden label{font-size:11px;color:#6b7b8c;display:flex;flex-direction:column;gap:2px}
.exp-zone-velden input,.exp-zone-velden select{width:100%;min-width:0}
.exp-leeg{color:#b91c1c}
.exp-editor input.fout{border-color:#dc2626;background:#fef2f2}
.exp-acties{margin-top:10px}
.exp-zone-kop .btn{flex:none;width:28px;min-width:0;min-height:26px;padding:0;justify-content:center}
.exp-zone-kop input[type=text]{min-width:90px}

/* === Project openen (js/project.js, openProjectDialog) === */
.modal.modal-prj{max-width:900px}
.modal-prj .body{padding-top:4px}
.prj-zoekbalk{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:center;gap:12px;padding:6px 0 12px}
.modal .prj-zoekbalk .prj-zoek{flex:1;padding:10px 12px 10px 36px;font-size:14px;border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7b8c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center}
.prj-teller{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.prj-groep{margin-top:6px}
.prj-kop{margin:14px 0 4px;padding:0 10px;font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:8px}
.prj-aantal{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 7px;letter-spacing:0}
.modal-prj .prj-list li{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:center;gap:14px;padding:8px 10px;border-bottom:1px solid var(--line);border-radius:10px}
.modal-prj .prj-list li:last-child{border-bottom:0}
.prj-meta{all:unset;cursor:pointer;min-width:0;display:flex;flex-direction:column;gap:1px}
.prj-meta .nm{font-weight:600;font-size:14px;color:var(--ink,#0f1b2d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prj-meta .sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prj-meta:hover .nm{color:var(--brand)}
.prj-meta:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.prj-tijd{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prj-knoppen{display:flex;gap:6px;justify-content:flex-end}
.prj-knoppen .btn{flex:none;width:auto;min-width:0}
.prj-knoppen .btn.dup,.prj-knoppen .btn.del{width:34px;padding-left:0;padding-right:0;justify-content:center}
.prj-leeg{color:var(--muted);text-align:center;padding:24px 0}
@media (max-width:640px){
  .modal-prj .prj-list li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .prj-tijd{grid-column:1;grid-row:2;text-align:left}
  .prj-knoppen{grid-column:2;grid-row:1 / span 2}
}
.modal-prj .prj-list li[hidden],.prj-groep[hidden],.prj-leeg[hidden]{display:none!important}
.modal-prj .prj-list li{min-height:58px;box-sizing:border-box}
@media (max-width:640px){
  .prj-zoekbalk{flex-wrap:wrap;gap:4px 12px}
  .prj-teller{width:100%;padding-left:2px}
  .prj-meta .nm{white-space:normal;overflow-wrap:anywhere}
}
.ol-geo{color:#15803d;font-weight:600}

/* === CAD overtekenen (js/cadteken.js) === */
.modal.modal-ct{max-width:1080px}
.ct-zoek{display:flex;gap:8px;align-items:center;margin:6px 0 8px}
.modal .ct-zoek .ct-filter{flex:1}
.ct-zoek .btn{flex:none;width:auto}
.ct-tabel{max-height:42vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.ct-tabel table{font-size:12.5px}
.ct-tabel thead th{position:sticky;top:0;background:#fff;z-index:1}
.ct-tabel td{vertical-align:middle;padding:4px 6px}
.ct-laag{max-width:300px}
.ct-laag b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ct-laag .muted{font-size:11px}
.modal .ct-tabel input[type=text],.modal .ct-tabel select{padding:4px 6px;font-size:12px}
.ct-tabel .ct-naam{min-width:120px}.ct-tabel .ct-diepte{width:60px}
.ct-tabel input[type=color]{width:30px;height:26px;padding:0;border:none;background:none}
.ct-opties{margin:10px 0 4px;display:grid;gap:2px}
.ct-tlijst{max-height:22vh;overflow:auto;display:grid;gap:3px;font-size:12.5px}
.ct-tl{display:flex;gap:6px;align-items:baseline}
.ct-tl .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-uitslag{margin:0 0 10px;padding-left:18px;line-height:1.7}
.cad-tek{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;display:inline-flex;gap:3px;align-items:center}
.cad-laag{display:flex;gap:6px;align-items:center}

/* === Selecteren (js/selectie.js) === */
.sel-balk{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  max-width:calc(100% - 120px);background:#fff;border:1px solid #ffb74d;border-radius:12px;padding:6px 8px;box-shadow:var(--sh-md,0 6px 20px rgba(0,0,0,.15))}
.sel-balk .btn{flex:none;width:auto}
.sel-tel{font-size:12.5px;padding:0 4px;white-space:nowrap}
.sel-kl{display:inline-flex}.sel-kl input{width:30px;height:28px;padding:0;border:none;background:none;cursor:pointer}
.sel-modus .leaflet-interactive{cursor:pointer}
.wbv-sel{filter:drop-shadow(0 0 0 #ff6d00) drop-shadow(0 0 3px #ff6d00) drop-shadow(0 0 3px #ff6d00)}
.sel-uitkomst{margin:10px 0;padding-left:18px;line-height:1.6;font-size:13px}

/* === Mappen-dialoogvenster (js/mappen.js) === */
.modal.modal-mappen{width:min(1100px,96vw);max-width:min(1100px,96vw);max-height:88vh}
.modal.modal-mappen .modal-body{padding:0;overflow:hidden}
.map-shell{display:flex;height:70vh;min-height:300px}

/* Zijbalk: boom */
.map-zijbalk{flex:0 0 400px;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.map-zoekbalk{padding:10px 10px 6px;border-bottom:1px solid var(--line);flex:0 0 auto}
.map-zoek{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.map-boom{flex:1;overflow-y:auto;padding:6px 0}
.map-acties{padding:8px 10px;border-top:1px solid var(--line);flex:0 0 auto}
.map-btn-nieuwe-map{width:100%}

/* Boomknooppunten */
.map-node{font-size:13px}
.map-kop{display:flex;align-items:center;gap:4px;padding:4px 8px;cursor:pointer;border-radius:6px;transition:background .12s;
  margin:1px 4px;min-height:30px}
.map-kop:hover{background:var(--bg)}
.map-map>.map-kop{font-weight:600}
.map-pijl{font-size:10px;color:var(--muted);flex:0 0 12px;text-align:center}
.map-icoon{flex:0 0 18px;font-size:14px}
.map-prj-icoon{flex:0 0 18px;color:var(--brand)}
.map-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-sub{font-size:11px;color:var(--muted);white-space:nowrap;margin-left:2px}
.map-leeg{padding:2px 28px;font-size:12px;color:var(--muted);font-style:italic}

/* Knoppen in boom — verborgen tot hover */
.map-meta-knoppen{display:none;gap:2px;flex:0 0 auto}
.map-kop:hover .map-meta-knoppen,.map-kop:focus-within .map-meta-knoppen{display:flex}
.map-meta-knoppen button{background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;
  width:22px;height:22px;border-radius:5px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.map-meta-knoppen button:hover{background:var(--line);color:var(--ink)}
.map-meta-knoppen .map-btn-del,.map-meta-knoppen .map-btn-del-map{color:#c62828}
.map-meta-knoppen .map-btn-del:hover,.map-meta-knoppen .map-btn-del-map:hover{background:#fce4e4;color:#b71c1c}

/* Kinderen (ingesprongen) */
.map-kinderen{padding-left:18px}

/* Detail-paneel rechts */
.map-detail{flex:1;overflow-y:auto;padding:18px 20px}
.map-detail-leeg{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.map-detail-kop{display:flex;align-items:center;gap:10px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.map-detail-icoon{font-size:28px}
.map-detail-titel{font-size:18px;font-weight:700;flex:1}
.map-detail-pad{font-size:12px;color:var(--muted)}
.map-detail-sectie{margin-bottom:20px}
.map-detail-sectie h4{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.map-beschrijving{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;resize:vertical;font-family:inherit}
.map-beschrijving:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,101,192,.15)}
.map-btn-rij{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.map-hint{font-size:12px;color:var(--muted);margin:4px 0 0}

/* Documenten */
.map-docs-lijst{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.map-doc{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.map-doc-ic{font-size:18px;flex:0 0 22px;text-align:center;margin-top:2px}
.map-doc-info{flex:1;min-width:0}
.map-doc-naam{font-size:13px;font-weight:600;color:var(--brand);text-decoration:none;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-doc-naam:hover{text-decoration:underline}
.map-doc-beschr{display:block;font-size:12px;color:var(--ink);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-doc-meta{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.map-doc-knoppen{display:flex;gap:4px;flex:0 0 auto;padding-top:2px}
.map-doc-knoppen button{background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;
  width:22px;height:22px;border-radius:5px;font-size:12px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.map-doc-knoppen button:hover{background:var(--line);color:var(--ink)}
.map-doc-del{color:#c62828 !important}
.map-doc-del:hover{background:#fce4e4 !important;color:#b71c1c !important}

/* Upload-zone */
.map-upload-zone{border:2px dashed var(--line);border-radius:8px;padding:10px;text-align:center;
  transition:border-color .15s,background .15s;cursor:pointer}
.map-upload-zone.drag-over{border-color:var(--brand);background:rgba(21,101,192,.06)}
.map-upload-zone:hover{border-color:#90a4ae;background:var(--bg)}
.map-upload-label{cursor:pointer;display:block}
.map-upload-knop{pointer-events:none}

/* Radio-keuze verplaatsen */
.map-radio-lijst{max-height:40vh;overflow-y:auto;display:grid;gap:4px;padding:4px 0}
.map-radio-lijst .chk{padding:4px 8px;border-radius:6px;cursor:pointer}
.map-radio-lijst .chk:hover{background:var(--bg)}
.map-radio-lijst input[type=radio]{margin-right:6px}

/* === Tags & partijen (js/tags.js) === */
.fld-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.prj-partijen-lijst{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.prj-partij{display:flex;gap:4px;align-items:center}
.prj-partij-rol{flex:0 0 140px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:12.5px}
.prj-partij-naam{flex:1;padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:12.5px}
.prj-partij-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:0 4px;font-size:13px;line-height:1}
.prj-partij-del:hover{color:var(--danger)}

.prj-tags-wrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:5px 8px;
  border:1px solid var(--line);border-radius:6px;min-height:34px;cursor:text}
.prj-tags-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,101,192,.15)}
.prj-tags-lijst{display:contents}
.prj-tags-input{border:none;outline:none;font-size:13px;min-width:120px;flex:1;background:transparent;padding:0}
.prj-tag{display:inline-flex;align-items:center;gap:3px;background:var(--brand);color:#fff;
  border-radius:12px;padding:2px 8px 2px 10px;font-size:12px;white-space:nowrap}
.prj-tag-del{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;
  font-size:11px;padding:0;line-height:1;display:inline-flex;align-items:center}
.prj-tag-del:hover{color:#fff}

/* Chips in projectoverzicht */
.map-prj-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.map-chips{display:flex;flex-wrap:wrap;gap:3px}
.map-chip{font-size:11px;border-radius:10px;padding:1px 7px;white-space:nowrap;line-height:1.6}
.map-chip-loc{background:#e3f2fd;color:#0d47a1}
.map-chip-jaar{background:#f3e5f5;color:#6a1b9a}
.map-chip-tag{background:#e8f5e9;color:#1b5e20}

/* Beschrijvingsveld in project-tab */
.prj-beschr-fld{margin-top:8px}
.prj-beschr-fld textarea{width:100%;font-size:13px;border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;resize:vertical;font-family:inherit;min-height:56px}
.prj-beschr-fld textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,101,192,.15)}

/* Dark mode */
@media (prefers-color-scheme:dark){
  .map-kop:hover{background:rgba(255,255,255,.06)}
  .map-meta-knoppen button:hover{background:rgba(255,255,255,.12)}
  .map-doc{background:rgba(255,255,255,.04)}
  .map-upload-zone.drag-over{background:rgba(21,101,192,.15)}
}