/* © 2026 Twan Sanders, met bijdragen van Hein Verbaarschot. MeldBeter, alle rechten voorbehouden. Zie LICENSE. */
/* Lettertypen van de eigen server (geen Google): Open Sans (variabel, 400-700) en JetBrains Mono. Licentie: web/vendor/fonts/OFL-*.txt */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(/vendor/fonts/open-sans-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/vendor/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts/jetbrains-mono-600.woff2) format('woff2')}
/* Layout: kaart vult het scherm; vaste zijbalk links (op telefoon onder de kaart) */
:root{
  --mb-bouw:'e28afd270b43';
  /* Huisstijl gemeente Lingewaard: Open Sans, donkerblauw #283583, blauw #0062AE, magenta #E5006B, vierkante hoeken.
     Standaard licht, net als lingewaard.nl; donker kan per gebruiker in het profiel (html[data-theme=dark]). Kaartkleuren van de riolering volgen GWSW Geo. */
  --bg:#f4f4f4; --panel:#ffffff; --ink:#333333; --kop:var(--hs-kop,#283583); --muted:#6f6f6f; --line:#e2e8f0;
  --hover:#f2f6fb; --riool:var(--hs-blauw,#0062AE); --riool-ink:#ffffff; --melding:var(--hs-accent,#E5006B); --melding-soft:color-mix(in srgb,var(--melding) 9%,#fff);
  --ok:#2b8a3e; --warn:#b07d00; --mask:#f4f4f4; --kop-vlak:var(--hs-kop,#283583); --zacht:#eef7f0;
  --font-ui:'Open Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* Inlogscherm in de huisstijl van gemeente Lingewaard: Open Sans, donkerblauw #283583,
   blauw #0062AE, magenta #E5006B, vierkante hoeken. Bewust één (lichte) uitstraling. */
/* Inlogscherm: altijd in de huisstijl van MeldBeter zelf (niet die van de gemeente); na inloggen geldt de huisstijl van de omgeving */
#login{--kop:#0a3d66;--riool:#0C6CB4;--melding:#0C6CB4;--mb-licht:#30B4F0;--mb-donker:#0a3d66;position:fixed;inset:0;z-index:5000;background:#f5f9fc;color:#444;font-family:'Open Sans',system-ui,'Segoe UI',Arial,sans-serif;display:flex;flex-direction:column;overflow:auto;color-scheme:light}
#login *{box-sizing:border-box}
.lg-top{background:#fff;border-bottom:1px solid #e2e8f0;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center;gap:12px}
.lg-merk{display:flex;flex-direction:column;line-height:1.05;color:var(--kop)}
.lg-merk small{font-size:12px;letter-spacing:.02em}
.lg-merk b{font-size:22px;font-weight:600}
.lg-intern{font-size:13px;color:#6f6f6f}
.lg-woordmerk{display:flex;align-items:center;gap:10px;color:#7c7c7c;font-size:26px;line-height:1;letter-spacing:-.02em;font-weight:600}
.lg-woordmerk b{color:#0C6CB4;font-weight:800}
.brand-app h1 b{color:var(--melding)}
.lg-logo{display:block;height:60px;width:auto;max-width:none}
.lg-main{flex:1;display:grid;place-items:center;padding:32px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.lg-kaart{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);width:min(860px,100%);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,.11),0 5px 15px rgba(0,0,0,.08)}
.lg-tegel{background:linear-gradient(150deg,#0C6CB4 0%,#0a3d66 100%);color:#fff;padding:36px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.lg-vlinder{width:88px;height:88px;background:#fff;border-radius:16px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.lg-vlinder img{display:block;width:66px;height:66px}
.lg-tegel h2{font-size:32px;font-weight:600;margin:0 0 10px;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.lg-tegel h2 b{color:var(--mb-licht);font-weight:800}
.lg-omg{margin-top:14px!important;padding-top:12px;border-top:1px solid rgba(255,255,255,.25);font-size:14px!important}
.lg-omg b{font-weight:700}
.lg-tegel p{margin:0;font-size:15px;line-height:1.6;opacity:.92}
.lg-tegel ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.lg-tegel li{display:flex;gap:8px;align-items:center}
.lg-tegel li::before{content:"";width:8px;height:8px;background:#fff;flex:none}
.lg-form{padding:36px 36px 32px;display:grid;gap:18px;align-content:start}
.lg-form h1{margin:0;color:var(--kop);font-size:30px;font-weight:400;line-height:1.2}
.lg-form .sub{margin:-8px 0 4px;color:#6f6f6f;font-size:15px}
.lg-veld{display:grid;gap:6px}
.lg-veld label{font-size:14px;font-weight:600;color:var(--kop)}
.lg-veld input{border:1px solid #c3ced9;border-radius:6px;padding:12px 12px;font:16px 'Open Sans',system-ui,sans-serif;color:#333;background:#fff;width:100%}
.lg-veld select{border:1px solid #b5b5b5;border-radius:0;padding:12px;font:16px 'Open Sans',system-ui,sans-serif;color:#333;background:#fff;width:100%}
.lg-veld select:focus{outline:3px solid var(--riool);outline-offset:0}
.lg-veld input:focus{outline:3px solid var(--riool);outline-offset:0;border-color:var(--riool)}
.lg-ww{position:relative}
.lg-ww input{padding-right:84px}
.lg-ww button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--riool);font:600 13px 'Open Sans',sans-serif;cursor:pointer;padding:6px 8px}
.lg-fout{background:#fdecf3;border-left:4px solid #c0004f;color:#9a002a;padding:10px 12px;font-size:14px;margin:0}
.lg-goed{background:#e8f5ea;border-left:4px solid #3b9a4a;color:#1f5f2a;padding:10px 12px;font-size:14px;margin:0}
.lg-rollen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lg-rollen label{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid #b5b5b5;cursor:pointer;background:#fff}
.lg-rollen label:hover{border-color:var(--riool)}
.lg-rollen label:has(input:checked){border:2px solid var(--riool);padding:9px;background:#eef5fb}
.lg-rollen input{margin-top:3px;accent-color:var(--riool)}
.lg-rollen b{display:block;color:var(--kop);font-size:14px}
.lg-rollen small{display:block;color:#6f6f6f;font-size:12px;line-height:1.35}
@media (max-width:420px){ .lg-rollen{grid-template-columns:1fr} }
.lg-info{background:#eef5fb;border-left:4px solid var(--riool);color:var(--kop);padding:10px 12px;font-size:14px;margin:0}
.lg-knop{background:var(--melding);color:#fff;border:0;border-radius:6px;padding:14px 18px;font:600 16px 'Open Sans',sans-serif;cursor:pointer;width:100%}
.lg-knop:hover{background:color-mix(in srgb,var(--melding) 85%,#000)}
.lg-knop:focus-visible{outline:3px solid var(--kop);outline-offset:2px}
/* tweede knop (passkey): omlijnd in plaats van gevuld */
.lg-knop.lg-knop-alt{background:transparent;color:var(--kop);box-shadow:inset 0 0 0 2px var(--kop)}
.lg-knop.lg-knop-alt:hover{background:color-mix(in srgb,var(--kop) 8%,transparent)}
.lg-noot{font-size:13px;color:#6f6f6f;margin:0;border-top:1px solid #e2e8f0;padding-top:14px}
.lg-noot a{color:var(--riool);font-weight:600}
.lg-voet{background:var(--mb-donker);color:#fff;font-size:13px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.lg-voet{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.lg-maker{text-align:center;opacity:.95}
.lg-rechts{text-align:right}
@media (max-width:720px){ .lg-voet{grid-template-columns:1fr;text-align:center;gap:4px} .lg-rechts{text-align:center} }
@media (max-width:720px){ .lg-kaart{grid-template-columns:1fr} .lg-tegel{padding:24px} .lg-tegel ul{display:none} .lg-form{padding:24px} }
/* Gebruikersbalk in de app */
.userbalk{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--hover);flex-wrap:wrap}
.userbalk .wie{font-weight:600;font-size:13px}
.userbalk .rolchip{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--riool);color:var(--riool-ink)}
.userbalk button{margin-left:auto}

html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--font-ui);display:flex;overflow:hidden}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--riool);outline-offset:2px}

/* Zijbalk */
.side{width:340px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;z-index:2}
.brand{padding:16px 18px 14px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.brand-mark{width:34px;height:34px;border-radius:50%;background:var(--riool);display:grid;place-items:center;flex:none}
.brand-mark svg{width:20px;height:20px}
.brand h1{font-size:16px;margin:0;line-height:1.2;letter-spacing:-.01em}
.brand p{margin:0;color:var(--muted);font-size:12.5px}
.scroll{overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column}
.scroll>.sec{flex:none}
/* Aannemer: alleen wat nodig is, meldingen en route bovenaan */
/* medewerker: route bovenaan (de lijst kan lang zijn, bijv. na een inspectieronde), daaronder de meldingen */
body[data-rol="medewerker"] #routeSec{order:-2}
body[data-rol="medewerker"] #mSec{order:-1}
body[data-rol="medewerker"] #mSec .alleen-desk{display:none}
.agroep{display:grid;gap:4px}
.agroep h3{margin:4px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--kop);display:flex;align-items:center;gap:6px}
.agroep h3 .n{font:600 12px var(--font-mono);color:var(--muted)}
.agroep h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--st-open)}
.agroep.bezig h3::before{background:var(--st-bezig)} .agroep.gereed h3::before{background:var(--st-gereed)}
.agroep summary{cursor:pointer;list-style:none}
.agroep summary::-webkit-details-marker{display:none}
.agroep>summary h3::after{content:"▾";margin-left:auto;color:var(--muted);font-size:13px;transition:transform .15s}
.agroep:not([open])>summary h3::after{transform:rotate(-90deg)}
.agroep .aobj{margin:2px 0 2px 8px} .agroep .aobj>summary{display:flex;align-items:center;gap:6px;padding:4px 2px;font-weight:600;font-size:13px;color:var(--ink)}
.agroep .aobj>summary::before{content:"▸";color:var(--muted);width:10px} .agroep .aobj[open]>summary::before{content:"▾"}
.agroep .aobj>summary .n{font:600 12px var(--font-mono);color:var(--muted);margin-left:auto}
.agroep .aurgent{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--melding);margin:4px 0 0;font-weight:700}
.agroep .amitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;padding:8px 10px;border:1px solid var(--line);border-left:4px solid var(--st-open);cursor:pointer;background:var(--panel)}
.agroep.bezig .amitem{border-left-color:var(--st-bezig)} .agroep.gereed .amitem{border-left-color:var(--st-gereed)}
.agroep .amitem:hover{background:var(--hover)}
.amitem b{font-size:13.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amitem .no{font:600 11.5px var(--font-mono);color:var(--muted);text-align:right;white-space:nowrap}
.amitem small{grid-column:1/-1;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amitem .lab{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap}
.aleeg{font-size:12.5px;color:var(--muted);margin:0 0 4px}
.rolbalk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--hover)}
.rolbalk label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.rolbalk select{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:3px 6px;font-size:13px;font-weight:600}
.rolbalk .tip{flex-basis:100%;font-size:11.5px}
/* Verloop: inklapbaar, per stap een blok (geen smalle kolommen meer, dus ook op de telefoon leesbaar) */
.verloopblok{margin:4px 0 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.verloopblok>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:7px 0}
.verloopblok>summary::-webkit-details-marker{display:none}
.verloopblok>summary::before{content:'▸';color:var(--riool);font-size:12px;width:10px}
.verloopblok[open]>summary::before{content:'▾'}
.verloopblok>summary .eyebrow{margin:0}
.vl-laatst{flex:1 1 160px;min-width:0;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verloop{list-style:none;margin:0 0 8px;padding:0 0 0 10px;display:grid;gap:6px;max-height:260px;overflow:auto}
.verloop li{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;border-left:2px solid var(--line);padding-left:8px;min-width:0}
.vl-kop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.vl-dat{white-space:nowrap}
.vl-wie{margin-top:1px;overflow-wrap:break-word}
.sec{padding:14px 18px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sec-h h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;font-weight:600}
.count{font:600 12px var(--font-mono);color:var(--muted)}

.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer}
.seg button:hover{background:var(--hover)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}

.drop{border:1.5px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--riool);background:var(--hover);color:var(--ink)}
.drop strong{color:var(--riool)}
.drop small{display:block;margin-top:4px;font:11.5px var(--font-mono)}

.layers{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.layer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:8px}
.layer input[type=checkbox]{accent-color:var(--riool);width:16px;height:16px;margin:0}
.layer .nm{min-width:0}
.layer .nm b{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .nm span{font:11.5px var(--font-mono);color:var(--muted)}
.swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.layer select{font-size:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:2px 4px}
.iconbtn{border:0;background:transparent;cursor:pointer;color:var(--muted);padding:2px 4px;border-radius:4px;font-size:15px;line-height:1}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.empty{color:var(--muted);font-size:13px;margin:0}
.layer.vast{grid-template-columns:auto 1fr auto;align-items:start}
.layer.vast input[type=checkbox]{margin-top:2px}
.layer .nm label{cursor:pointer}
.zoomnote{display:block;font-size:11.5px;color:var(--warn);font-family:var(--font-ui)!important}
.legwrap{margin-top:4px}
.legwrap summary{cursor:pointer;font-size:12px;color:var(--riool);font-weight:600;list-style:none;display:inline-flex;gap:6px;align-items:center}
.legwrap summary::-webkit-details-marker{display:none}
.legwrap summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.legwrap[open] summary::before{transform:rotate(90deg)}
.legwrap summary .n{font:11px var(--font-mono);color:var(--muted)}
.legend{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.legend li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:6px;font-size:12px;color:var(--ink)}
.legend .n{font:11px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.legend svg{display:block}


.mlist{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.mitem{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.mitem:hover{background:var(--hover);border-color:var(--line)}
.mitem .no{font:600 12.5px var(--font-mono)}
.mitem .wat{grid-column:1/-1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;align-self:start}
.chip.open{color:var(--melding)} .chip.bezig{color:var(--warn)} .chip.gereed{color:var(--ok)}
.prio-spoed{color:var(--melding);font-weight:700}

.btnrow{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:6px 11px;font-size:13px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--riool);border-color:var(--riool);color:var(--riool-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.alert{background:var(--melding);border-color:var(--melding);color:#fff}
.btn.danger{color:var(--melding)}
.tip{font-size:12.5px;color:var(--muted);margin:0}
.tip kbd{font:11px var(--font-mono);border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* Kaart */
.mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--bg)}
.toast{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:1000;background:var(--ink);color:var(--panel);padding:8px 14px;border-radius:8px;font-size:13px;max-width:min(520px,calc(100% - 32px));box-shadow:0 6px 24px rgba(0,0,0,.25)}
.mapdrop{position:absolute;inset:0;z-index:999;background:color-mix(in srgb,var(--riool) 18%,transparent);border:3px dashed var(--riool);display:grid;place-items:center;font-weight:700;font-size:18px;color:var(--ink);pointer-events:none}
.rdbox{background:var(--panel);color:var(--ink);font:12px var(--font-mono);padding:3px 8px;border-radius:6px;border:1px solid var(--line);font-variant-numeric:tabular-nums}

/* Leaflet-aanpassingen */
.leaflet-container{font:inherit;background:var(--bg)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink)}
.leaflet-popup-content-wrapper{border-radius:10px}
.leaflet-popup-content{margin:14px 16px;width:auto!important;min-width:250px;max-width:320px}
.leaflet-bar a{background:var(--panel);color:var(--ink);border-color:var(--line)}
.leaflet-bar a:hover{background:var(--hover)}
.leaflet-control-attribution{background:color-mix(in srgb,var(--panel) 85%,transparent)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-control-scale-line{background:color-mix(in srgb,var(--panel) 80%,transparent);color:var(--ink);border-color:var(--muted)}
.mask-pane{pointer-events:none}

.pop .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.pop h3{margin:2px 0 8px;font-size:15px;line-height:1.25;word-break:break-word}
.props{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:8px}
.props td{padding:3px 0;border-top:1px solid var(--line);vertical-align:top}
.props td:first-child{color:var(--muted);padding-right:10px;white-space:nowrap;font-family:var(--font-mono);font-size:11.5px}
.props td:last-child{word-break:break-word}
.propscroll{max-height:200px;overflow:auto;margin-bottom:8px}
.obs{font:11.5px/1.5 var(--font-mono);margin:0 0 10px;padding:6px 8px;background:var(--hover);border-radius:6px;max-height:140px;overflow:auto;white-space:pre}
.mform{display:grid;gap:8px}
.mform label{display:grid;gap:3px;font-size:12px;color:var(--muted);font-weight:500}
.mform select,.mform textarea,.pop select{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:6px 8px;font-size:13px;color:var(--ink)}
.mform textarea{resize:vertical;min-height:64px}
.loc{font:11.5px var(--font-mono);color:var(--muted)}
.mhead{display:flex;justify-content:space-between;align-items:center;gap:8px}

.pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--melding);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pin.bezig{background:var(--warn)} .pin.gereed{background:var(--ok)}
.pin-wrap{background:none;border:0}

/* Meldingsformulier */
.form-dlg{position:fixed;inset:0;z-index:1500;background:rgba(10,20,16,.5);display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;padding:16px}
.form-box{background:var(--panel);color:var(--ink);border-radius:14px;width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.form-head{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.form-head h3{margin:0;font-size:17px}
.form-head .loc{margin-top:3px}
.form-body{padding:14px 18px;overflow:auto;display:grid;gap:14px;min-height:0;flex:1 1 auto;align-content:start}
.form-head,.form-foot{flex:none}
.fld{display:grid;gap:5px}
.fld>label,.fld>.lab{font-size:12.5px;font-weight:600;color:var(--ink)}
.fld .req{color:var(--melding)}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 10px;font-size:14px;color:var(--ink);width:100%}
.fld textarea{resize:vertical;min-height:76px}
.fld input[readonly]{background:var(--hover);color:var(--muted);font-family:var(--font-mono);font-size:13px}
.fld .hint{font-size:12px;color:var(--muted)}
.fld.invalid input,.fld.invalid select,.fld.invalid textarea,.fld.invalid .photos{border-color:var(--melding);box-shadow:0 0 0 2px var(--melding-soft)}
.fld .err{font-size:12px;color:var(--melding);font-weight:500}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-radius:10px;padding:2px}
.ph{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--hover);border:1px solid var(--line);max-width:100%}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:14px;line-height:24px;padding:0}
.ph-add{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:9px;display:grid;place-items:center;text-align:center;color:var(--muted);cursor:pointer;font-size:12px;gap:2px;align-content:center;max-width:100%}
.ph-add:hover{border-color:var(--riool);color:var(--ink);background:var(--hover)}
.ph-add b{font-size:22px;line-height:1;font-weight:400}
.form-foot{padding:12px 18px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.form-foot .btn{padding:9px 16px;font-size:14px}
.addr-row{display:flex;gap:6px}
.addr-row input{flex:1;min-width:0}
.pthumbs{display:flex;gap:6px;margin:4px 0 10px}
.pthumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px;cursor:zoom-in;border:1px solid var(--line)}
.lightbox{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.lightbox img{max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);width:auto;height:auto;object-fit:contain;border-radius:6px}

/* Exportvenster (alleen als downloaden niet lukt) */
.dlg{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.dlg-box{background:var(--panel);border-radius:12px;padding:16px;width:min(640px,100%);display:grid;gap:10px}
.dlg-box textarea{width:100%;height:260px;font:12px var(--font-mono);border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg);color:var(--ink)}

/* ---- Veldversie (telefoon) ---- */
.sheet-kop,.tabbar,.fab{display:none}
.vizier{position:absolute;inset:0;z-index:900;pointer-events:none}
.viz-kruis{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.viz-balk{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.25);padding:12px;pointer-events:auto;display:grid;gap:8px}
.viz-balk p{margin:0;font-weight:600;color:var(--kop)}
.viz-balk .btn{flex:1}
.ph-add.cam{background:var(--kop-vlak);color:#fff;border-style:solid;border-color:var(--kop-vlak);font-weight:600}
.ph-add.cam:hover{background:var(--kop-vlak);color:#fff}
@media (min-width:761px){ .fab{display:flex;align-items:center;gap:6px;position:absolute;right:20px;bottom:64px;z-index:950;background:var(--melding);color:#fff;border:0;padding:0 18px;height:48px;font:700 14px var(--font-ui);box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer} .fab[hidden]{display:none} }
@media (max-width:760px){
  body{display:block}
  .mapwrap{position:fixed;left:0;right:0;top:0;bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .side{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));width:auto;height:min(78%,calc(100% - 130px));z-index:1300;
    border-right:0;border-top:4px solid var(--riool);box-shadow:0 -10px 30px rgba(0,0,0,.2);transform:translateY(calc(100% + 80px));transition:transform .25s ease,visibility .25s;visibility:hidden}
  body:not([data-tab="kaart"]) .side{transform:none;visibility:visible}
  .sheet-kop{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 18px;border-bottom:1px solid var(--line);font-weight:700;color:var(--kop);font-size:16px}
  .sheet-kop .iconbtn{font-size:26px;width:44px;height:44px}
  body[data-tab="meldingen"] .side [data-tab]:not([data-tab="meldingen"]),
  body[data-tab="route"] .side [data-tab]:not([data-tab="route"]),
  body[data-tab="team"] .side [data-tab]:not([data-tab="team"]),
  body[data-tab="menu"] .side [data-tab]:not([data-tab="menu"]){display:none}
  .alleen-desk{display:none}
  .brand{padding-block:10px}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:1400;background:var(--panel);border-top:1px solid var(--line);
    height:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .tabbar button{border:0;background:none;display:grid;justify-items:center;align-content:center;gap:2px;font:600 11.5px var(--font-ui);color:var(--muted);position:relative;cursor:pointer}
  .tabbar button[hidden]{display:none}
  .tabbar svg{width:24px;height:24px}
  .tabbar button[aria-current="page"]{color:var(--kop);box-shadow:inset 0 3px 0 var(--riool)}
  .tbadge{position:absolute;top:6px;left:calc(50% + 6px);background:var(--melding);color:#fff;font:700 11px var(--font-ui);min-width:18px;height:18px;line-height:18px;padding:0 5px;text-align:center}
  .fab{display:flex;align-items:center;gap:6px;position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:20px;z-index:950;background:var(--melding);color:#fff;border:0;padding:0 18px;height:56px;font:700 15px var(--font-ui);box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer}
  .fab[hidden]{display:none}
  body.vizier-aan .leaflet-marker-pane,body.vizier-aan .leaflet-popup-pane{opacity:.45}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body.vizier-aan .toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .rdbox{display:none}
  .btn{min-height:44px;padding:10px 14px}
  .fld input[type=text],.fld input[type=email],.fld select,.fld textarea,.dubbel,.dubbel li,.samenbalk,.keer,.mat-rij input,.mat-rij select,.tijd input,.tijd select,.mform select,.pop select{font-size:16px;min-height:44px}
  .leaflet-bar a,.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
  .ikctl a{display:grid;place-items:center}
  .lc-knop{width:44px;height:44px}
  .lc-item label{padding:11px 8px;font-size:15px}
  .lc-item input,.rcheck input{width:20px;height:20px}
  .mtegel{padding:10px}
  .mitem{padding:12px 10px}
  .mcat>summary,.mobj>summary{padding:12px}
  .leaflet-popup-content{min-width:min(300px,calc(100vw - 70px));max-width:calc(100vw - 70px)}   /* niet laten krimpen tot het langste woord */
  .form-dlg{padding:0;place-items:stretch}
  .form-box{width:100%;height:100%;max-height:none}
  .form-head{padding-top:max(16px,env(safe-area-inset-top,0px))}
  .form-foot{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .form-foot .btn{flex:1}
  .ph button{width:32px;height:32px;line-height:32px;font-size:18px}
}
.ikctl a{display:grid;place-items:center;color:var(--kop)}

@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

/* Afhandelformulier */
.mat{display:grid;gap:6px}
.mat-rij{display:grid;grid-template-columns:minmax(0,1fr) 72px 72px auto;gap:6px;align-items:center}
.mat-rij input,.mat-rij select{border:1px solid var(--line);padding:7px 8px;font-size:14px;background:var(--panel);color:var(--ink);width:100%;min-width:0}
.tijd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tijd label{font-size:12.5px;color:var(--muted)}
.tijd input,.tijd select{border:1px solid var(--line);padding:7px 8px;font-size:14px;background:var(--panel);color:var(--ink);width:80px}
/* Lagenmenu rechtsboven */
.lagenctl{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--font-ui);color:var(--ink);max-width:calc(100vw - 32px)}
.lc-knop{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);background:var(--panel);color:var(--kop);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lc-knop:hover,.lc-knop[aria-expanded="true"]{background:var(--kop-vlak);color:#fff}
.lc-paneel{width:300px;max-width:100%;max-height:min(70vh,560px);overflow:auto;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.lc-kop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 6px;font-weight:600;color:var(--kop);font-size:14px}
.lc-lijst{list-style:none;margin:0;padding:0 6px 6px}
.lc-item{display:flex;align-items:center;gap:4px}
.lc-item label{flex:1;display:flex;align-items:center;gap:8px;padding:6px 6px;cursor:pointer;font-size:13.5px;min-width:0}
.lc-item label:hover{background:var(--hover)}
.lc-item input{accent-color:var(--riool);width:16px;height:16px;margin:0;flex:none}
.lc-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-zoom{display:none;margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.lc-item.dim .lc-naam{color:var(--muted)}
.lc-item.dim .lc-zoom{display:inline}
.lc-leg{border-top:1px solid var(--line);padding:8px 12px 10px}
.lc-leg summary{cursor:pointer;font-weight:600;color:var(--riool);font-size:13px}
.lc-leggroep{margin-top:8px}
.lc-leggroep b{font-size:12px;color:var(--kop);display:block;margin-bottom:2px}
.lc-leggroep .legend li{grid-template-columns:24px 1fr}
/* Route medewerker */
.rstart{font-size:13px;line-height:1.4}
.rcheck{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.rcheck input{accent-color:var(--riool);width:16px;height:16px;margin:0}
.rlijst{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rstap{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start;padding:6px 8px;font-size:13px}
.rstap b{display:block;color:var(--kop)}
.rstap small{display:block;color:var(--muted);font-size:12px}
.rstap.mitem{grid-template-columns:26px 1fr}
.rb{display:grid;place-items:center;width:24px;height:24px;color:var(--kop);font-weight:700}
.rb.n{background:var(--kop-vlak);color:#fff;font-size:12px}
.rnr{display:grid;place-items:center;width:24px;height:24px;background:var(--kop-vlak);color:#fff;font:700 12px var(--font-ui);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.werf.gh{background:var(--riool)}
.werf{display:grid;place-items:center;width:28px;height:28px;background:var(--kop-vlak);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#rNav .btn{display:inline-block;text-decoration:none}
/* Tijdelijke rolkeuze en toewijzen */
.userbalk{align-items:flex-end}
.ikben{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;flex:1;min-width:0}
.ikben .wie{font-weight:700;color:var(--kop)}
.ikben .orgnaam{flex-basis:100%;font-size:12px;color:var(--muted)}
.testrol{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;flex-basis:100%;min-width:0}
.userbalk .profielknop{align-self:center}
.testnoot{order:2;flex:1;flex-basis:auto!important}
.testrol label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--kop);font-weight:600}
.testrol select{border:1px solid var(--line);background:var(--panel);padding:4px 6px;font-size:13px;min-width:0;width:100%}
.testnoot{flex-basis:100%;font-size:11.5px;margin:2px 0 0}
.keuze{display:grid;gap:6px}
.keuze label{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);cursor:pointer}
.keuze label:has(input:checked){border-color:var(--riool);background:var(--hover)}
.keuze input{margin-top:3px;accent-color:var(--riool)}
.keuze b{display:block;color:var(--kop)}
.keuze small{display:block;color:var(--muted);font-size:12px}
.tag{font-size:10.5px;font-weight:600;border:1px solid var(--muted);color:var(--muted);padding:0 4px;margin-left:4px}
.verloop .actie{font-size:11.5px;color:var(--kop);margin-top:1px;overflow-wrap:break-word}
.mitem .toe{color:var(--riool);font-size:12px}
/* Dubbele meldingen */
.dubbel{border:1px solid var(--melding);border-left:5px solid var(--melding);background:var(--melding-soft);padding:12px;display:grid;gap:8px}
.dubbel.info{border-color:var(--ok);border-left-color:var(--ok);background:var(--zacht)}
.dubbel-kop{display:grid;gap:2px}
.dubbel-kop b{color:var(--kop);font-size:14.5px}
.dubbel-kop span{font-size:13px}
.dubbel ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dubbel li{display:grid;gap:6px;background:var(--panel);border:1px solid var(--line);padding:8px 10px}
.dtekst{font-size:13px;line-height:1.4}
.dtekst small{display:block;color:var(--muted);font-size:12px}
.dubbel .btn{justify-self:start}
.samenbalk{border:2px solid var(--riool);background:var(--hover);padding:10px 12px;font-size:13.5px;line-height:1.45}
.samenbalk b{color:var(--kop)}
.aanv{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;font-size:12.5px}
.aanv li{border-left:3px solid var(--line);padding-left:8px}
.keer{font:700 10.5px var(--font-ui);background:var(--melding);color:#fff;padding:1px 5px;margin-left:4px;vertical-align:1px}
/* Meldingenoverzicht */
.mstatus{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mtegel{display:grid;gap:0;justify-items:start;padding:8px 10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;text-align:left;border-left:4px solid currentColor}
.mtegel .n{font-size:22px;font-weight:700;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.mtegel .l{font-size:11.5px;color:var(--muted);font-weight:600}
.mtegel.open{color:var(--melding)} .mtegel.bezig{color:var(--warn)} .mtegel.gereed{color:var(--ok)}
.mtegel:hover{background:var(--hover)}
.mtegel[aria-pressed="true"]{background:var(--hover);box-shadow:inset 0 0 0 2px currentColor}
.mboom{display:grid;gap:6px}
.mfilter{margin:0;font-size:12.5px;color:var(--muted)}
.linkbtn{border:0;background:none;color:var(--riool);font-weight:600;cursor:pointer;padding:0;font-size:inherit;text-decoration:underline}
.mcat{border:1px solid var(--line)}
.mcat>summary,.mobj>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px}
.mcat>summary::-webkit-details-marker,.mobj>summary::-webkit-details-marker{display:none}
.mcat>summary::before,.mobj>summary::before{content:"";border-left:5px solid var(--kop);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s;flex:none}
.mcat[open]>summary::before,.mobj[open]>summary::before{transform:rotate(90deg)}
.mcat>summary{background:var(--hover);font-weight:700;color:var(--kop)}
.mobj{border-top:1px solid var(--line)}
.mobj>summary{padding-left:22px;font-weight:600;color:var(--ink);font-size:13.5px}
.mobj>summary:hover,.mcat>summary:hover{background:var(--hover)}
.mnaam{flex:1;min-width:0}
.mtel{display:flex;gap:4px}
.dot{font:600 11px var(--font-ui);min-width:20px;text-align:center;padding:1px 5px;color:#fff;font-variant-numeric:tabular-nums}
.dot.open{background:var(--melding)} .dot.bezig{background:var(--warn)} .dot.gereed{background:var(--ok)}
.mobj .mlist{padding:0 6px 6px 22px}
/* ---- Huisstijl Lingewaard in de kaartomgeving ---- */
.brand{justify-content:space-between;align-items:flex-end;border-bottom:4px solid var(--riool)}
.brand-app{text-align:right}
.brand-logo{display:block;height:40px;width:auto;max-width:none;align-self:center}
.brand-gemeente{display:block;height:36px;width:auto;max-width:90px;object-fit:contain;align-self:center;margin:0 auto}
.brand-app h1{color:var(--kop);font-size:15px;font-weight:600}
.brand-app p{font-size:12px}
.sec-h h2{color:var(--kop);letter-spacing:.06em}
.side{border-right:1px solid var(--line)}
.mat-rij input,.mat-rij select,.tijd input,.tijd select,.testrol select,.keuze label,.lagenctl,.lc-knop,.btn,.drop,.layer,.mitem,.seg button,.iconbtn,.layer select,.rdbox,.toast,.dlg-box,.dlg-box textarea,.form-box,.fld input[type=text],.fld input[type=email],.fld select,.fld textarea,.fld input[type=number],
.photos,.ph,.ph-add,.pthumbs img,.obs,.mform select,.mform textarea,.pop select,.leaflet-popup-content-wrapper,.leaflet-bar,.leaflet-bar a,.userbalk .rolchip,.chip{border-radius:0!important}
.btn{font-weight:600}
.btn.primary{background:var(--riool);border-color:var(--riool)}
.btn.alert{background:var(--melding);border-color:var(--melding)}
.btn.alert:hover{background:color-mix(in srgb,var(--melding) 85%,#000)}
.seg button[aria-pressed="true"]{background:var(--kop-vlak);border-color:var(--kop-vlak);color:#fff}
.drop strong{color:var(--riool)}
.drop:hover,.drop.over{border-color:var(--riool)}
.pop h3,.form-head h3{color:var(--kop)}
.fld>label,.fld>.lab{color:var(--kop)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--riool);outline-offset:0}
.form-foot .btn.primary{background:var(--melding);border-color:var(--melding)}
/* Team TWB: bezettingsbord */
.tbord{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tkaart{border:1px solid var(--line);border-left:5px solid var(--st-gereed);padding:9px 10px;display:grid;gap:6px;background:var(--panel)}
.tkaart.n-oranje{border-left-color:var(--st-bezig)} .tkaart.n-rood{border-left-color:var(--st-open)}
.tkaart.gekozen{box-shadow:inset 0 0 0 2px var(--riool)}
body.slepen .tkaart{outline:1px dashed var(--muted);outline-offset:-3px}
.tkaart.over{background:var(--hover);outline:2px dashed var(--riool)!important}
.tk-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tk-kop b{color:var(--kop);font-size:14px}
.tk-niveau{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--st-gereed-ink)}
.n-oranje .tk-niveau{color:var(--st-bezig-ink)} .n-rood .tk-niveau{color:var(--st-open-ink)}
.tk-balk{height:6px;background:var(--hover)} .tk-balk span{display:block;height:100%;background:var(--st-gereed)}
.n-oranje .tk-balk span{background:var(--st-bezig)} .n-rood .tk-balk span{background:var(--st-open)}
.tk-tel{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--muted)}
.tk-tel b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.tk-tel .rood,.tk-tel .rood b{color:var(--melding)}
.tk-nu{font-size:12px;color:var(--ink);line-height:1.35}
.tk-nu b{font-family:var(--font-mono);font-size:11.5px}
.tk-nu.leeg{color:var(--muted)}
.tkaart .btn{padding:3px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:default}
.tinfo{font-size:12.5px;color:var(--muted);margin:0}
/* Werkvoorraad */
.wv-acties{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.wv-bulk{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--hover);border:1px solid var(--riool);padding:8px}
.wv-bulk .btn.danger{padding:5px 10px;font-size:13px}
.wv-insp{margin:6px 0 0;font-size:13px;color:var(--muted)}
.wv-insp .linkbtn{font-size:13px}
.wv-bulk>span{font-weight:600;color:var(--kop);font-size:13px}
.wv-bulk select{border:1px solid var(--line);background:var(--panel);padding:5px 6px;font-size:13px;flex:1;min-width:150px}
.wv{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wv-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 8px;padding:8px;border:1px solid var(--line);background:var(--panel);cursor:grab}
.wv-item.terug{border-left:4px solid var(--melding);background:var(--melding-soft)}
.wv-item input[type=checkbox]{margin:2px 0 0;accent-color:var(--riool);width:16px;height:16px}
.wv-tekst{display:grid;gap:1px;font-size:12.5px;cursor:pointer;min-width:0}
.wv-tekst>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wv-tekst small{color:var(--muted);font-size:12px}
.wv-kop{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.wv-kop b{font:600 12.5px var(--font-mono);margin-right:2px}
.wv-doe{grid-column:2;display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px}
.wv-doe select{border:1px solid var(--line);background:var(--panel);padding:5px 6px;font-size:12.5px;min-width:0;width:100%}
.prio{font:700 10px var(--font-ui);padding:1px 5px;border:1px solid currentColor;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.prio.p-spoed{color:#fff;background:var(--melding);border-color:var(--melding)} .prio.p-normaal{color:var(--riool)} .prio.p-laag{color:var(--muted)}
.laat,.terugvlag{font:700 10px var(--font-ui);color:#fff;background:#9a002a;padding:2px 5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.laat.bijna{background:var(--warn)}
.terugvlag{background:var(--ink)}
.mitem .no .prio,.mitem .no .laat,.mitem .no .terugvlag{margin-left:4px;vertical-align:1px}
.props .prio,.props .laat{margin-right:4px}
.terugtxt{color:#9a002a;font-weight:600;font-size:12px;white-space:normal!important}
.terugbox{border-left:4px solid var(--melding);background:var(--melding-soft);padding:8px 10px;display:grid;gap:2px;font-size:12.5px;margin:0 0 10px}
.terugbox b{color:#9a002a} .terugbox small{color:var(--muted);font-size:11.5px}
.suggestie{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--hover);border-left:3px solid var(--riool);padding:6px 8px;font-size:12.5px}
.suggestie b{color:var(--kop)}
.prioseg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prioseg label{display:flex;gap:6px;align-items:flex-start;padding:8px;border:1px solid var(--line);cursor:pointer}
.prioseg label:has(input:checked){border-color:var(--riool);background:var(--hover)}
.prioseg input{margin-top:2px;accent-color:var(--riool)}
.prioseg b{display:block;color:var(--kop);font-size:13px} .prioseg small{display:block;color:var(--muted);font-size:11.5px}
.fld input[type=datetime-local]{border:1px solid var(--line);padding:8px 10px;font-size:14px;background:var(--panel);color:var(--ink);width:100%;border-radius:0}
.vak-aan,.vak-aan .leaflet-interactive{cursor:crosshair!important}
/* Adres zoeken */
.zoekbalk{position:absolute;top:10px;left:64px;width:min(440px,calc(100% - 140px));z-index:950;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.18);padding:0 6px 0 12px;color:var(--kop)}
.zoekbalk:focus-within{outline:3px solid var(--riool);outline-offset:0}
.zoekbalk input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px;padding:11px 0;color:var(--ink)}
.zoeklijst{position:absolute;top:100%;left:-1px;right:-1px;margin:0;padding:0;list-style:none;background:var(--panel);border:1px solid var(--line);border-top:0;box-shadow:0 8px 18px rgba(0,0,0,.18);max-height:min(60vh,380px);overflow:auto}
.zoeklijst li{display:flex;gap:10px;align-items:baseline;padding:9px 12px;cursor:pointer;font-size:14px;color:var(--ink);border-top:1px solid var(--line)}
.zoeklijst li[aria-selected="true"],.zoeklijst li:hover{background:var(--hover)}
.zoeklijst .zt{flex:none;width:62px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--riool)}
.zoeklijst .zinfo{cursor:default;color:var(--muted);font-size:13px}
.zoekpin.plek{background:var(--riool)}
.zstat{display:block;font-size:12px;font-weight:600;margin-top:1px}
.zstat.bezig{color:var(--st-bezig-ink)} .zstat.open{color:var(--kop)}
.werkbalk{position:absolute;top:58px;left:64px;width:min(440px,calc(100% - 140px));z-index:940;font-size:13px}
.werkknop{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.14);padding:7px 12px;cursor:pointer;color:var(--ink)}
.werkknop::before{content:"Lopend werk";font-weight:700;color:var(--kop);margin-right:6px}
.werkknop::after{content:"";margin-left:auto;border-left:5px solid var(--kop);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.werkknop[aria-expanded="true"]::after{transform:rotate(90deg)}
.wdot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:6px}
.wdot.bezig{background:var(--st-bezig)} .wdot.open{background:var(--kop-vlak)}
.werklijst{background:var(--panel);border:1px solid var(--line);border-top:0;box-shadow:0 8px 18px rgba(0,0,0,.16);max-height:min(50vh,360px);overflow:auto;padding:6px 8px 8px}
.werkgroep>b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--kop);margin:6px 4px 4px}
.werkgroep ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.werkitem{display:grid;gap:1px;width:100%;text-align:left;border:0;background:none;padding:6px;cursor:pointer;color:var(--ink);font-size:12.5px}
.werkitem:hover{background:var(--hover)}
.werkitem .no{font:600 12px var(--font-mono)}
.werkitem small{color:var(--muted);font-size:12px}
body.vizier-aan .werkbalk{display:none}
@media (max-width:760px){ .werkbalk{top:62px;left:64px;right:64px;width:auto} .werkknop{min-height:40px} }
.zoekpin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--kop-vlak);border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.4)}
.zbuur{border-left:4px solid var(--st-bezig);background:var(--hover);padding:8px 10px;margin:0 0 10px;font-size:12.5px;display:grid;gap:4px}
.zbuur ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.zbuur .chip{margin:0 4px}
body.vizier-aan .zoekbalk{display:none}
@media (max-width:760px){ .zoekbalk{left:64px;right:64px;width:auto} .zoekbalk input{font-size:16px;padding:12px 0} .zoeklijst li{padding:12px} }
/* Statuskleuren: rood = open, oranje = in behandeling, groen = gereed */
:root{--st-open:#d7191c;--st-bezig:#f28c00;--st-gereed:#2e9e41;--st-open-ink:#b3141a;--st-bezig-ink:#a95c00;--st-gereed-ink:#237a33}
.pin{position:relative;width:24px;height:24px;background:var(--st-open);border:2.5px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.8),0 3px 8px rgba(0,0,0,.45)}
.pin::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.pin.bezig{background:var(--st-bezig)} .pin.gereed{background:var(--st-gereed)}
.chip.open{color:var(--st-open-ink)} .chip.bezig{color:var(--st-bezig-ink)} .chip.gereed{color:var(--st-gereed-ink)}
.dot.open{background:var(--st-open)} .dot.bezig{background:var(--st-bezig)} .dot.gereed{background:var(--st-gereed)}
.mtegel.open{color:var(--st-open)} .mtegel.bezig{color:var(--st-bezig)} .mtegel.gereed{color:var(--st-gereed)}
/* Annulering */
.annulrij{margin-top:8px;text-align:right}
.annulbox{margin-top:10px;border:1px solid var(--muted);border-left:4px solid var(--ink);background:var(--hover);padding:8px 10px;display:grid;gap:4px;font-size:12.5px}
.annulbox small{color:var(--muted);font-size:11.5px}
.annulvlag{font:700 10px var(--font-ui);color:#fff;background:var(--ink);padding:2px 5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;margin-left:4px;vertical-align:1px}
.ann{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ann-item{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-left:4px solid var(--ink)}
.ann-item .btn{padding:3px 9px;font-size:12px}
.annlog summary{cursor:pointer;font-size:12.5px;color:var(--riool);font-weight:600}
.annlog ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:12px}
/* Venster: breed, links in de voet */
.form-box.breed{width:min(760px,100%)}
.form-foot .links{margin-right:auto}
.beheer{width:100%;border-collapse:collapse;font-size:13px}
.beheer th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--kop);padding:4px 6px;border-bottom:2px solid var(--line)}
.beheer td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.beheer td small{display:block;color:var(--muted);font-size:11.5px}
.beheer tr.uit td{color:var(--muted)}
.beheer .mono{font-family:var(--font-mono);font-size:12px}
.form-body .sec-h{margin-top:4px}
.rechtenbox{background:var(--hover);border-left:3px solid var(--riool);padding:6px 8px;font-size:12.5px}
.rechtenbox b{color:var(--kop)}
.fld input[type=password]{border:1px solid var(--line);padding:8px 10px;font-size:14px;background:var(--panel);color:var(--ink);width:100%;border-radius:0}
.fld input[readonly]#uGebr{font-family:var(--font-mono)}
@media (max-width:760px){ .fld input[type=password]{font-size:16px;min-height:44px} .beheer{font-size:14px} .beheer thead{display:none} .beheer tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line);padding:6px 0} .beheer td{border:0;padding:2px 6px} }
.vakselectie{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:150px;overflow:auto;font-size:12.5px}
.vakselectie li{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vakselectie b{font:600 12px var(--font-mono)}
@media (max-width:760px){ .wv-doe select,.wv-bulk select,.fld input[type=datetime-local]{font-size:16px;min-height:44px} .tkaart .btn{min-height:40px;padding:6px 12px} .prioseg{grid-template-columns:1fr} .wv-item input[type=checkbox]{width:22px;height:22px} .wv-doe{grid-template-columns:120px minmax(0,1fr)} }
.userbalk .rolchip{background:var(--kop-vlak)}
.mitem .no{color:var(--kop)}
.layer .nm b{color:var(--kop)}
.leaflet-popup-content-wrapper{box-shadow:0 15px 30px rgba(0,0,0,.11),0 5px 15px rgba(0,0,0,.08)}
.pin{border-radius:50% 50% 50% 0}
.chip{padding:1px 7px}
.chip.open{color:var(--melding)}

/* Logboek */
.lb-filter{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.lb-filter .fld{margin:0}
.beheer.lb td:first-child{white-space:nowrap}
.lb-w{margin:4px 0 0;padding-left:16px;font-size:12.5px}
.lb-w li span{color:var(--muted)}
@media (max-width:760px){ .lb-filter{grid-template-columns:1fr 1fr} }

/* Tekeningen (PDF) */
.tekls{display:flex;flex-wrap:wrap;gap:6px}
.tekbtn,.tekadd{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;cursor:pointer;text-align:left}
.tekbtn svg,.tekadd svg{flex:none;color:var(--melding)}
.tekbtn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.tekbtn:hover,.tekadd:hover{border-color:var(--riool);background:var(--hover)}
.tekadd{border-style:dashed;color:var(--muted)}
.tekweg{border:0;background:none;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.tekweg:hover{color:var(--melding)}

/* RIBX-inspecties omzetten naar meldingen */
.insp-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 12px;font-size:13px}
.insp-codes label{display:flex;gap:6px;align-items:baseline;cursor:pointer}
.insp-obj{max-height:300px;overflow:auto;border:1px solid var(--line);padding:4px 8px}
.insp-o summary{cursor:pointer;padding:5px 0;font-size:13.5px}
.insp-o ul{list-style:none;margin:0 0 6px;padding:0 0 0 14px;font-size:12.5px}
.insp-o li label{display:flex;gap:6px;align-items:baseline;padding:2px 0;cursor:pointer}
.insp-opties{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wi-kol{border:1px solid var(--line);padding:6px 10px;margin:0 0 10px} .wi-kol summary{cursor:pointer;font-size:13.5px}
.wi-kolgrid{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);gap:6px 10px;align-items:center;font-size:13px;margin:6px 0 4px}
.wi-filters{display:grid;grid-template-columns:1fr 1fr 180px;gap:10px}
.wi-stip{display:inline-block;width:10px;height:10px;border-radius:50%;background:#9aa0a6;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);vertical-align:-1px} .wi-stip.aan{background:var(--melding)}
@media (max-width:760px){ .insp-opties,.wi-filters{grid-template-columns:1fr} .wi-kolgrid{grid-template-columns:max-content minmax(0,1fr)} }

/* Aannemer: geen RD-coördinaten in beeld */
body[data-rol="medewerker"] .rdbox{display:none}
/* Telefoon: zoomknoppen weg zolang een popup open is, zodat ze er niet overheen vallen */
@media (max-width:760px){ body.popup-open .leaflet-top.leaflet-left{display:none} }
.zaak{font-family:inherit;font-size:11px;font-weight:600;color:var(--riool);border:1px solid var(--riool);padding:0 4px;margin-left:6px;white-space:nowrap}
.lg-link{background:none;border:0;padding:0;margin:-4px 0 0;color:var(--riool);font:600 14px 'Open Sans',sans-serif;text-decoration:underline;cursor:pointer;align-self:flex-start}
.lg-hulp{background:#eef4fb;border-left:4px solid var(--riool);padding:10px 12px;font-size:14px;margin:0;color:var(--kop)}

/* Archief */
.ar-blok>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.ar-blok>summary::-webkit-details-marker{display:none}
.ar-blok>summary h2::before{content:'▸ ';color:var(--riool)}
.ar-blok[open]>summary h2::before{content:'▾ '}
.ar-datum,.pd-velden{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ar-lijst{max-height:340px;overflow:auto;margin-top:6px}
.pin.archief{background:#8a8f98!important;opacity:.9}
body[data-rol="medewerker"] #arSec{display:none}
/* Meldingen per periode */
.pd-info{font-size:13px;margin-top:8px}
.pd-hot{margin:4px 0 0;padding-left:20px;font-size:13px}
.pd-hot li{margin:2px 0}

/* Testomgeving: altijd zichtbaar dat dit niet de echte omgeving is */
.testbalk{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;background:#b07d00;color:#fff;font:700 12px var(--font-ui);letter-spacing:.06em;padding:3px 12px;pointer-events:none}

/* Materialen en materieel bij afhandelen */
.mat-let{grid-column:1/-1;font-size:12px;color:var(--warn);margin:-2px 0 2px}
.mat-let.tarief-info{color:var(--muted)}
.vr-vink{font-size:15px;font-weight:600;color:var(--kop);padding:4px 0}
.vr-vink input{width:20px;height:20px}
#aVoorrijden{margin-top:6px}
.mat-bron{margin:0 0 6px}
.mat-kop{font-size:12px;font-weight:600;color:var(--muted);margin:6px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.mat-snel{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chipknop{border:1px solid var(--line);background:var(--panel);color:var(--kop);font:600 12.5px var(--font-ui);padding:6px 9px;cursor:pointer;min-height:34px}
.chipknop:hover{border-color:var(--riool);background:var(--hover)}
.chipknop.aan{background:var(--riool);border-color:var(--riool);color:#fff}
.mat-alle{margin:6px 0 4px}
.mat-alle>summary{cursor:pointer;color:var(--riool);font-weight:600;font-size:13px;padding:4px 0}
.mtl-rij{grid-template-columns:minmax(0,1fr) 72px auto auto}
.mtl-rij .eenh{font-size:13px;color:var(--muted)}

/* ---------- Prijzen en termijnen ---------- */
.tm-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tm-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:grid;gap:4px}
.tm-item .btnrow{gap:6px} .tm-item .btn{padding:4px 9px;font-size:12px}
.tm-item.ingetrokken{opacity:.7} .tm-item.ingetrokken .tm-kop b{text-decoration:line-through}
.tm-kop{display:flex;gap:6px;align-items:baseline;font-size:13.5px}
.tm-akk{justify-self:start;display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:10px;margin-top:2px}
.tm-akk.wacht{background:color-mix(in srgb,#e0a400 18%,transparent);color:color-mix(in srgb,#9a6b00 85%,var(--ink))}
.tm-akk.ok{background:color-mix(in srgb,#2b8a3e 15%,transparent);color:color-mix(in srgb,#2b8a3e 85%,var(--ink))}
.tm-akk.nee{background:color-mix(in srgb,#c0262d 13%,transparent);color:color-mix(in srgb,#c0262d 85%,var(--ink));white-space:normal}
.tm-akkblok{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:8px}
.tm-akkblok.ok{background:color-mix(in srgb,#2b8a3e 9%,transparent);border-color:color-mix(in srgb,#2b8a3e 35%,var(--line))}
.tm-akkblok.nee{background:color-mix(in srgb,#c0262d 8%,transparent);border-color:color-mix(in srgb,#c0262d 35%,var(--line))}
.tm-akkblok h3{margin:0;font-size:14px;color:var(--kop)}
.tm-bedrag{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--kop)}
.tm-h4{margin:14px 0 2px;font-size:14px;color:var(--kop)}
.tm-fout{border:1px solid var(--melding);background:var(--melding-soft);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:13px}
.tm-fout ul{margin:6px 0 0;padding-left:18px}
.tm-let{margin:4px 0;font-size:13px;border-left:3px solid var(--melding);padding:2px 0 2px 8px}
.tm-scroll{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.beheer .r{text-align:right} .beheer .nowrap,.nowrap{white-space:nowrap}
.tm-velden{grid-template-columns:repeat(3,minmax(0,1fr))}
.tm-totaal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;background:var(--hover);border-radius:8px;padding:8px 10px}
.tm-totaal div{display:grid;font-size:12px;color:var(--muted)} .tm-totaal b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.tm-totaal .tm-tot b{color:var(--kop);font-size:15px} .tm-totaal .tm-let{grid-column:1/-1}
.tm-alles{font-size:12.5px;gap:4px;color:var(--muted)}
.tm-meld{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tm-meld>li{border-bottom:1px solid var(--line);padding:6px 0}
.tm-rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;cursor:pointer;font-size:13px}
.tm-rij input{margin-top:3px;width:17px;height:17px;accent-color:var(--riool)}
.tm-wat small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-regels{margin:2px 0 0 27px;font-size:12.5px} .tm-regels summary{cursor:pointer;color:var(--riool);font-weight:600}
.tm-regels .beheer{font-size:12.5px;margin-top:4px}
.tm-mis{color:var(--melding);font-weight:600}
.tm-prijs{width:84px;padding:3px 6px;border:1px solid var(--melding);border-radius:6px;font:inherit;text-align:right;background:var(--panel);color:var(--ink)}
.tm-prijs.fout{background:var(--melding-soft)}
.tm-af{margin:0 0 8px;border-left:3px solid var(--riool);padding-left:8px}
@media (max-width:760px){ .tm-velden{grid-template-columns:1fr 1fr} .tm-velden .fld:first-child{grid-column:1/-1} .tm-totaal{grid-template-columns:1fr 1fr} .tm-totaal .tm-tot{grid-column:1/-1} .tm-prijs{font-size:16px;width:78px} .tm-regels{margin-left:0} .tm-regels .beheer tr{grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center} .tm-regels .beheer td{padding:2px 4px} }

/* werkvoorraad ingedeeld per categorie en object */
.wv-boom{display:grid;gap:8px}
.wv-boom .wv-obj .wv{padding:6px 6px 8px 22px}
.wv-boom summary .tag{margin-left:2px}
.wv-n{min-width:22px;text-align:center;font-weight:700;font-size:12px;background:var(--kop-vlak);color:#fff;padding:1px 6px}
.wv-groepsel{display:flex;align-items:center;gap:6px;padding:6px 10px 0 22px;font-size:12.5px;color:var(--muted);cursor:pointer}
.wv-groepsel input{accent-color:var(--riool);width:16px;height:16px;margin:0}
.tag.rood{color:var(--melding);border-color:var(--melding)}

/* tweestapsverificatie */
.lg-stappen{margin:0;padding-left:20px;font-size:14px;color:#333;display:grid;gap:4px}
.lg-qr,.ts-qr{display:grid;place-items:center;padding:8px;background:#fff;border:1px solid var(--line);width:max-content;margin:0 auto}
.lg-qr svg,.ts-qr svg{display:block;width:200px;height:200px}
.lg-sleutel{font-size:13px;color:var(--muted)} .lg-sleutel summary{cursor:pointer;color:var(--riool);font-weight:600}
.lg-sleutel code,.ts-sleutel{display:block;margin-top:6px;font:600 15px var(--font-mono);letter-spacing:.08em;word-break:break-all;color:var(--kop);background:var(--hover);padding:6px 8px;user-select:all}
.lg-herstel,.ts-herstel{margin:0;padding:10px 10px 10px 34px;columns:2;column-gap:24px;font:600 16px var(--font-mono);background:var(--hover);border:1px solid var(--line)}
.lg-herstel li,.ts-herstel li{padding:2px 0}
.lg-rij{display:flex;gap:18px}
.lg-check{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#333} .lg-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--riool)}
.ts-status{display:flex;gap:8px;align-items:center;font-weight:600} .ts-status .chip{font-size:12px}
.lg-knop:disabled{opacity:.45;cursor:default}

/* profiel */
.profielknop{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.profielknop .ikben{flex:1;min-width:0}
.profielknop:hover .wie,.profielknop:focus-visible .wie{text-decoration:underline}
.userbalk .profielknop{margin-left:0}
.avatar{width:34px;height:34px;flex:none;border-radius:50%;background:var(--kop-vlak);color:#fff;display:grid;place-items:center;font:700 13px var(--font-ui);letter-spacing:.02em}
.avatar.groot{width:52px;height:52px;font-size:18px}
.pf-label{font-size:12.5px;font-weight:600;color:var(--riool);white-space:nowrap}
.pf-kop{display:flex;gap:14px;align-items:center}
.pf-kop small{display:block;color:var(--muted);font-family:var(--font-mono);font-size:12px;margin-bottom:4px}
.pf-kop .rolchip{font-size:11px;font-weight:600;padding:1px 8px;background:var(--kop-vlak);color:#fff}
.pf-lijst{display:grid;border:1px solid var(--line)}
.pf-rij{display:flex;align-items:center;gap:10px;padding:12px;border:0;border-bottom:1px solid var(--line);background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.pf-rij:last-child{border-bottom:0} .pf-rij:hover{background:var(--hover)}
.pf-rij span:first-child{flex:1;font-weight:600}
.pf-pijl{color:var(--muted);font-size:18px;line-height:1}
.pf-st .chip{font-size:11px}
/* prijslijsten: onderbouwing en indexeren */
#plLijst .tm-scroll{max-height:300px}
.pl-tabel .pl-ond{min-width:180px;max-width:280px}
.pl-tabel .pl-ond .mis{color:var(--melding);font-style:italic}
.pl-tabel small.pl-ix{display:inline-block;margin-top:2px;padding:0 5px;border:1px solid var(--kop);border-radius:3px;color:var(--kop);font-size:11px}
.ix-velden{grid-template-columns:repeat(3,minmax(0,1fr))}
/* staartposten bij een prijslijst */
.st-rijen{display:grid;gap:6px}
.st-rijen:empty{display:none}
.st-rij{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.st-rij .ix-pct input{max-width:80px}
.st-weg{font-size:18px;line-height:1;padding:0 4px;text-decoration:none}
.st-knoppen{gap:4px 16px;flex-wrap:wrap}
.pl-tabel .pl-st small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;white-space:nowrap}
.tm-staart{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.ix-pct{display:flex;align-items:center;gap:6px}
.ix-pct input{width:100%;max-width:110px;text-align:right}
@media (max-width:760px){ .ix-velden{grid-template-columns:1fr 1fr} .pl-tabel .pl-ond{max-width:none} }
#plLijst .tm-scroll{max-width:100%}
.pl-tabel .pl-acties{display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:nowrap}
.pl-tabel td:nth-child(6){min-width:90px}
@media (max-width:760px){ .pl-tabel .pl-acties{flex-direction:row;flex-wrap:wrap;gap:4px 12px;grid-column:1/-1} }
@media (max-width:760px){
  .ix-tabel tr{grid-template-columns:auto 1fr 1fr 1fr;column-gap:6px}
  .ix-tabel td:nth-child(2){grid-column:2/-1}
  .ix-tabel td:nth-child(3){color:var(--muted)}
  .ix-tabel td:nth-child(4)::before{content:'nu ';color:var(--muted);font-size:11px}
  .ix-tabel td:nth-child(5)::before{content:'nieuw ';color:var(--muted);font-size:11px}
  .ix-tabel td:nth-child(5){font-weight:600}
  .ix-tabel td:nth-child(6)::before{content:'+ ';color:var(--muted)}
  .ix-tabel tr:last-child td[colspan]{grid-column:1/-1}
}
/* achtergrond kiezen in het lagenmenu (plaatjes, zoals Google) */
.lc-basis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:2px 12px 6px}
.lc-basis button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12px;color:var(--ink)}
.lc-basis img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--line);border-radius:8px;background:var(--hover);display:block}
.lc-basis button:hover img{border-color:var(--muted)}
.lc-basis button[aria-pressed="true"] img{border-color:var(--riool);box-shadow:0 0 0 1px var(--riool)}
.lc-basis button[aria-pressed="true"] span{color:var(--riool);font-weight:600}
.lc-kad{padding:4px 12px 0;font-size:13.5px}
.lc-tip{margin:2px 12px 6px;font-size:11.5px;color:var(--muted)}
.lc-kop2{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
@media (max-width:760px){ .lc-basis button{font-size:12.5px} }
/* support */
.userbalk{flex-wrap:nowrap}
.userbalk .profielknop{flex:1;width:auto;min-width:0}
.supportknop{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;margin-left:4px!important;padding:4px 6px;border:1px solid var(--line);background:var(--panel);color:var(--riool);font:600 11.5px var(--font-ui);cursor:pointer}
.supportknop:hover,.supportknop:focus-visible{border-color:var(--riool);background:var(--hover)}
.sbadge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--melding);color:#fff;font-size:11px;line-height:18px;text-align:center}
.sup-soort{display:flex;flex-wrap:wrap;gap:8px}
.sup-keuze{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);cursor:pointer;font-weight:400!important}
.sup-keuze:has(input:checked){border-color:var(--riool);background:var(--hover);color:var(--riool);font-weight:600!important}
.sup-keuze input{accent-color:var(--riool);margin:0}
.sup-thumb{display:block;max-width:220px;max-height:160px;margin-top:6px;border:1px solid var(--line)}
.sup-thumb.groot{max-width:100%;max-height:360px;margin:8px 0}
.sup-lijst{list-style:none;margin:0;padding:0;border:1px solid var(--line)}
.sup-lijst li{padding:10px 12px;border-bottom:1px solid var(--line)}
.sup-lijst li:last-child{border-bottom:0}
.sup-klik li{cursor:pointer} .sup-klik li:hover,.sup-klik li:focus-visible{background:var(--hover)}
.sup-kop{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sup-kop .chip{font-size:11px;flex:none}
.sup-antwoord{margin-top:6px;padding:8px 10px;border-left:3px solid var(--riool);background:var(--hover);font-size:13px}
.sup-antwoord b{display:block;font-size:12px;color:var(--kop)}
.sup-beheer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--riool);background:var(--hover)}
.sup-filter{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sup-filter select{border:1px solid var(--line);padding:6px 8px;font:inherit}
.sup-tekst{white-space:normal;padding:10px 12px;border:1px solid var(--line);background:var(--hover);margin-bottom:8px}
.sup-ctx{margin:6px 0 10px;font-size:12px} .sup-ctx summary{cursor:pointer;color:var(--riool);font-weight:600}
.sup-ctx td{word-break:break-all}
.chip.uit{color:var(--muted)}
/* vertreklocatie per groep */
.werf.vt{background:#6b4fa0}
.vt-nu{margin:2px 0 6px;font-size:13.5px}
.vt-zoek{position:relative}
.vt-zoek input{width:100%;border:1px solid var(--line);padding:8px 10px;font:inherit}
.vt-lijst{position:absolute;z-index:5;left:0;right:0;top:100%;list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 14px rgba(0,0,0,.12);max-height:220px;overflow:auto}
.vt-lijst li{padding:8px 10px;cursor:pointer;font-size:13.5px} .vt-lijst li:hover,.vt-lijst li:focus{background:var(--hover)}

/* ---------- Categorieën ---------- */
.dl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 3px;border-radius:50%;background:var(--dc);color:#fff;font:700 10.5px/1 var(--font-ui,Arial);letter-spacing:-.03em;flex:none;vertical-align:middle}
.dl.lang{border-radius:10px;font-size:9.5px}
.dl.groot{min-width:26px;height:26px;font-size:12px}
.pin:has(.pl)::after{display:none}
.pin .pl{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(45deg);color:#fff;font:800 10px/1 var(--font-ui,Arial);letter-spacing:-.04em;text-shadow:0 0 2px rgba(0,0,0,.35)}
.pin .pl.lang{font-size:8px}
.dkeuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dkeuze button{display:flex;align-items:center;gap:7px;padding:8px 8px;border:1.5px solid color-mix(in srgb,var(--dc) 35%,var(--panel));background:color-mix(in srgb,var(--dc) 9%,var(--panel));cursor:pointer;font:600 13px var(--font-ui,Arial);color:var(--ink);text-align:left;min-height:42px}
.dkeuze button:hover{border-color:var(--dc)}
.dkeuze button[aria-pressed="true"]{border-color:var(--dc);background:color-mix(in srgb,var(--dc) 20%,var(--panel));box-shadow:inset 0 0 0 1px var(--dc)}
.fld.invalid .dkeuze button{border-color:var(--melding)}
.dfilter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.dfilter button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--panel);padding:3px 9px 3px 4px;cursor:pointer;font:600 12.5px var(--font-ui,Arial);color:var(--muted)}
.dfilter button[aria-pressed="true"]{border-color:var(--dc);background:color-mix(in srgb,var(--dc) 12%,var(--panel));color:var(--ink)}
.dfilter button small{font-weight:400;color:var(--muted)}
.mhead .dl{margin-right:2px}
@media (max-width:760px){ .dkeuze{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Donker thema (keuze per gebruiker in Mijn profiel) ----------
   Alleen de app zelf; inlogscherm, afdrukken en termijnstaten blijven licht. De kaart wordt iets gedimd. */
:root[data-theme="dark"]{
  --bg:#13161b; --panel:#1c2027; --ink:#e3e6eb; --kop:color-mix(in srgb,var(--hs-kop,#283583) 40%,#fff); --kop-vlak:color-mix(in srgb,var(--hs-kop,#283583) 82%,#fff); --muted:#9aa3af; --line:#333a46;
  --hover:#262c36; --riool:color-mix(in srgb,var(--hs-blauw,#0062AE) 72%,#fff); --melding:var(--hs-accent,#E5006B); --melding-soft:color-mix(in srgb,var(--melding) 22%,#13161b); --ok:#4cbf68; --warn:#e2a72e; --mask:#13161b; --zacht:#1d2f23;
  --st-open-ink:#ff6b6e; --st-bezig-ink:#ffaa45; --st-gereed-ink:#5fd277;
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .leaflet-container{background:#22262d}
:root[data-theme="dark"] .leaflet-tile-pane{filter:brightness(.82) contrast(1.06)}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,:root[data-theme="dark"] .leaflet-popup-tip{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] .leaflet-bar a,:root[data-theme="dark"] .leaflet-bar a:hover{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .leaflet-control-attribution,:root[data-theme="dark"] .leaflet-control-scale-line{background:rgba(28,32,39,.85);color:var(--muted)}
:root[data-theme="dark"] .leaflet-control-attribution a{color:var(--kop)}
:root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--bg);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#7d8592}
:root[data-theme="dark"] .lg-qr,:root[data-theme="dark"] .ts-qr{background:#fff}
.thema-keuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 6px}
.thema-keuze button{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 6px;font:600 13px var(--font-ui);cursor:pointer}
.thema-keuze button[aria-pressed="true"]{border-color:var(--riool);background:var(--hover);box-shadow:inset 0 0 0 1px var(--riool)}

/* ---------- Gebruikers en groepen: per organisatie ---------- */
.gb-blok{margin:0 0 18px}
.gb-groep{border:1px solid var(--line);background:var(--panel);margin:0 0 8px}
.gb-gkop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 10px;background:var(--hover);border-bottom:1px solid var(--line)}
.gb-gkop .linkbtn{margin-left:auto}
.gb-gkop .rolchip{font-size:11px;font-weight:600;padding:1px 8px;background:var(--kop-vlak);color:#fff}
.gb-cats{display:inline-flex;gap:3px;align-items:center}
.gb-leden{list-style:none;margin:0;padding:2px 10px}
.gb-leden li{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.gb-leden li:last-child{border-bottom:0}
.gb-leden li.uit{color:var(--muted)}
.gb-naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-naam .mono{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-left:4px}
.gb-st{font-size:12px;color:var(--muted)}
.gb-plus{justify-content:flex-start}
.gb-aan{border:1px solid var(--line);margin:0 0 8px;background:var(--panel)}
.gb-aan>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;cursor:pointer;font-size:14px}
.gb-aan>summary .tip{margin-left:auto}
.gb-aan[open]>summary{border-bottom:1px solid var(--line)}
.gb-aan .gb-groep{margin:8px 10px}
.gb-aan.uit>summary b{color:var(--muted)}
.gb-aanvoet{display:flex;gap:16px;justify-content:space-between;padding:4px 10px 8px}
@media (max-width:760px){ .gb-leden li{flex-wrap:wrap;gap:2px 10px} .gb-naam{flex-basis:100%;white-space:normal} }
.keuze.kort{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px} .keuze.kort label{padding:6px 8px} .keuze.kort span{display:flex;align-items:center;gap:6px}
.gb-team{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border:1px solid var(--kop);color:var(--kop);letter-spacing:.03em}
.gb-teams{font-size:13px;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rgrens{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel);color:var(--riool);border:2px solid var(--riool);font:700 13px/1 var(--font-ui);box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* gebruiker: toegang via uitnodiging of wachtwoord */
.toegang{display:grid;gap:8px}
.toegang label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;background:var(--panel)}
.toegang label:has(input:checked){border-color:var(--riool);background:var(--hover)}
.toegang input{margin-top:3px;accent-color:var(--riool);flex:none}
.toegang b{display:block;color:var(--kop);font-size:14px}
.toegang small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px}

/* gebruikersbeheer: mail bij toewijzing per aannemer */
.gb-mailst{margin:0 0 10px}
.gb-mail{margin:6px 10px 4px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}

/* uitdraai binnen de app (als app op het beginscherm): venster over het hele scherm met Terug */
.druk-laag{position:fixed;inset:0;z-index:2500;background:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.druk-kop{display:flex;align-items:center;gap:10px;padding:8px max(10px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--panel)}
.druk-kop b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--kop);font-size:14px}
.druk-kop .btn{min-height:40px}
.druk-laag iframe{flex:1;width:100%;border:0;background:#fff}

/* exporteren / meldingenexport: keuze tussen bestandstypes */
.exp-keuze{display:grid;gap:8px}
.exp-optie{display:block;text-align:left;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:12px 14px;cursor:pointer;color:var(--ink);font:inherit}
.exp-optie:hover:not(:disabled){border-color:var(--riool);background:var(--hover)}
.exp-optie:disabled{opacity:.55;cursor:not-allowed}
.exp-optie b{display:block;color:var(--kop);font-size:15px;margin-bottom:2px}
.exp-optie small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
/* sterktemeter bij een nieuw wachtwoord (inlogscherm en profiel) */
.ww-meter{display:grid;gap:4px;margin-top:4px}
.ww-balk{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ww-balk i{height:5px;border-radius:3px;background:#dde3ea}
.ww-tekst{font-size:12.5px;color:#6f6f6f;line-height:1.35}
.ww-meter[data-score="0"] .ww-balk i:nth-child(1),.ww-meter[data-score="1"] .ww-balk i:nth-child(1){background:#d7191c}
.ww-meter[data-score="0"] .ww-tekst,.ww-meter[data-score="1"] .ww-tekst{color:#b3141a}
.ww-meter[data-score="2"] .ww-balk i:nth-child(-n+2){background:#7cb342}
.ww-meter[data-score="3"] .ww-balk i:nth-child(-n+3){background:#2e9e41}
.ww-meter[data-score="4"] .ww-balk i{background:#1b7a33}
.ww-meter[data-score="2"] .ww-tekst,.ww-meter[data-score="3"] .ww-tekst,.ww-meter[data-score="4"] .ww-tekst{color:#237a33;font-weight:600}
:root[data-theme="dark"] .ww-balk i{background:#3a414c}
:root[data-theme="dark"] .ww-tekst{color:#9aa3ad}
/* tweestap koppelen: knop voor de telefoon, sleutel met kopieerknop */
.ts-koppel{display:grid;gap:10px}
.ts-open{display:block;text-align:center;background:#0C6CB4;color:#fff;font-weight:600;font-size:16px;padding:13px 16px;border-radius:6px;text-decoration:none}
.ts-open:focus-visible{outline:3px solid #30B4F0;outline-offset:2px}
.ts-sleutelrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ts-sleutelrij .ts-sleutel{flex:1 1 220px;margin:0;word-break:normal;overflow-wrap:anywhere}
.ts-kopie{font:600 14px 'Open Sans',system-ui,sans-serif;color:#0C6CB4;background:none;border:1px solid #0C6CB4;border-radius:6px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.ts-tip{font-size:13px;color:#6f6f6f;margin:0;line-height:1.45}
.ts-koppel .lg-qr{margin:0 auto}
/* teamkaart van de uitvoerder: aan welke categorieën een medewerker werkt */
.tk-cat{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:4px 0 6px;font-size:12.5px}

/* herhaalmelding in de melding (zelfde object, afgelopen 12 maanden) */
.herhaal{margin:8px 0;padding:8px 10px;border-left:3px solid var(--kop);background:color-mix(in srgb,var(--kop) 7%,transparent);font-size:13px;border-radius:0 6px 6px 0}
.herhaal.vaak{border-left-color:#e0a400;background:color-mix(in srgb,#e0a400 13%,transparent)}
.herhaal-lijst{margin-top:4px;line-height:1.6}
/* inspectie inlezen: prioriteit per urgentie of risico uit het bestand */
.in-urg{display:grid;gap:4px;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.in-urgrij{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px;align-items:center;font-size:13.5px;margin:0}
.in-urgrij+.in-urgrij{border-top:1px dashed var(--line);padding-top:4px}
.form-dlg .in-urgrij select{padding:4px 8px;min-height:0;height:auto}
@media (max-width:520px){ .in-urgrij{grid-template-columns:minmax(0,1fr) 120px} }
.eig-let{display:inline-block;margin-top:4px;color:#9a6b00;background:color-mix(in srgb,#e0a400 15%,transparent);padding:2px 6px;border-radius:4px;font-family:var(--font-ui,inherit)}
/* vaste kaartlagen */
.lc-pin{color:var(--muted)}
.lc-pin:hover{color:var(--riool)}
.lc-beheer{padding:6px 8px 2px;font-size:13px;border-top:1px solid var(--line);margin-top:4px}
.kl-kolommen{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel)}
.kl-kolommen .rcheck{display:flex;align-items:center;gap:6px;font-size:13.5px;min-width:0}
.kl-kolommen .rcheck span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-kolommen small{color:var(--muted);margin-left:auto;font-size:11.5px}
.kl-lijst{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.kl-rij{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--panel)}
.kl-rij.weg{opacity:.75}
.kl-kop{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.kl-kop b{color:var(--kop)}
.kl-acties{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kl-acties .btn{padding:5px 10px;font-size:13px}
.kl-versies{list-style:none;margin:8px 0 0;padding:0;font-size:13px}
.kl-versies li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed var(--line)}
.kl-sub{margin:14px 0 6px;font-size:14px;color:var(--kop)}
.kl-grootte{margin:4px 0 0;font-size:13px;color:var(--muted);border-radius:8px}
.kl-grootte.groot{color:var(--ink);background:rgba(232,177,60,.16);border:1px solid #e8b13c;padding:8px 10px}
.kl-grootte.te-groot{color:var(--ink);background:rgba(229,0,107,.12);border:1px solid var(--melding);padding:8px 10px}
/* versie */
.lg-versie{opacity:.75}
.pf-versie{margin:14px 0 0;font-size:12px;color:var(--muted);text-align:center}
/* licentie op alleen lezen: geen nieuwe meldingen (src/licentie.ts) */
body.alleen-lezen #fabMeld{display:none!important}
.nieuwe-versie{position:fixed;z-index:1500;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--riool);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:8px 8px 8px 14px;font-size:14px;max-width:calc(100vw - 32px)}
.nieuwe-versie .btn{padding:6px 12px;font-size:14px;white-space:nowrap}
@media (max-width:720px){ .nieuwe-versie{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:calc(100vw - 32px)} .nieuwe-versie span{flex:1} }
/* slim afhandelen: kaart onderin */
.slimkaart{position:fixed;z-index:1450;left:50%;transform:translateX(-50%);bottom:24px;width:min(380px,calc(100vw - 24px));background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-top:4px solid var(--riool);box-shadow:0 12px 32px rgba(0,0,0,.25);padding:14px 16px 16px;display:grid;gap:4px}
.sk-x{position:absolute;right:6px;top:6px;font-size:20px}
.sk-eyebrow{margin:0;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sk-titel{margin:0;font-size:16px;font-weight:700;color:var(--kop)}
.sk-kop{margin:0;font-size:17px;font-weight:700;color:var(--kop);padding-right:24px}
.sk-sub{margin:0 0 6px;font-size:13.5px;color:var(--muted)}
.sk-spoed{color:var(--melding)}
.sk-hoofd{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;background:var(--melding);color:#fff;font:700 16px var(--font-ui);cursor:pointer;text-decoration:none;margin-top:6px}
.sk-hoofd.sk-foto{background:var(--riool)}
.sk-tweede{width:100%;min-height:46px;border:2px solid var(--melding);background:transparent;color:var(--melding);font:700 15px var(--font-ui);cursor:pointer;margin-top:10px}
.sk-later{justify-self:center;margin-top:6px;font-size:14px}
.sk-werk{display:flex;flex-wrap:wrap;gap:6px}
.sk-chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 10px;font-size:13.5px;cursor:pointer;border-radius:999px!important}
.sk-chip[aria-pressed="true"]{background:var(--riool);border-color:var(--riool);color:#fff}
.sk-fotos{display:flex;gap:6px}
.sk-fotos img{width:56px;height:56px;object-fit:cover;border:1px solid var(--line)}
.sk-toast{margin:0 26px 6px 0;background:var(--ink);color:var(--panel);padding:8px 10px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sk-toast .linkbtn{color:#9fd3ff}
@media (max-width:760px){ .slimkaart{bottom:calc(68px + env(safe-area-inset-bottom,0px))} }
.pf-loc{font-size:12.5px;color:var(--muted);margin:-4px 0 4px 26px;line-height:1.45}
/* passkeys in het profiel, en de beveiligingsinstellingen */
.pk-lijst{list-style:none;margin:6px 0;padding:0;display:grid;border:1px solid var(--line)}
.pk-lijst li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-top:1px solid var(--line)}
.pk-lijst li:first-child{border-top:0}
.pk-lijst li>span{display:grid}
.pk-lijst small{color:var(--muted);font-size:12px}
.bv-rij{display:flex;align-items:center;gap:8px}
.bv-rij input{width:90px}

/* mededeling van MeldBeter (beheerportaal) */
.nieuwe-versie.mededeling{max-width:min(640px,calc(100vw - 24px))}
.mededeling-onderhoud{border-left:4px solid #b07d00}
.mededeling-let-op{border-left:4px solid var(--melding)}

.rcheck.uit{opacity:.5;cursor:default}

/* meldingen per periode: keuzelijst met meerdere vinkjes (soort melding, object) */
.pd-keuzes{margin-top:8px}
.mkeuze{position:relative}
.mkeuze>summary{list-style:none;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 28px 8px 10px;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.mkeuze>summary::-webkit-details-marker{display:none}
.mkeuze>summary::after{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
.mkeuze[open]>summary{border-color:var(--riool)}
.mk-paneel{position:absolute;left:0;right:-60px;top:calc(100% + 4px);z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);max-height:300px;overflow:auto;padding:6px 0;min-width:220px}
.pd-keuzes .fld:last-child .mk-paneel{left:-60px;right:0}
.mk-kop{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 12px 3px}
.mk-optie{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13.5px;cursor:pointer}
.mk-optie:hover{background:var(--hover)}
.mk-optie input{accent-color:var(--riool);width:16px;height:16px;margin:0;flex:none}
.mk-optie span{flex:1}
.mk-optie small{color:var(--muted)}
.mk-wis{display:block;padding:4px 12px 6px;font-size:13px}
.mk-leeg{padding:8px 12px;color:var(--muted);font-size:13px;margin:0}

/* ---------- Zachte stijl (04-11, keuze Twan): ronder, lichter en vriendelijker, Apple-achtig ----------
   Zijbalk als rustig vlak met afgeronde kaarten per onderdeel, knoppen als pil, zachte schaduwen in plaats van harde
   lijnen. Kleuren van de huisstijl blijven gelijk. Werkt ook in het donkere thema (tokens hieronder). */
:root{--r-s:10px;--r-m:14px;--r-l:18px;--zij-bg:#f2f3f6;--vlak:#f4f6f9;--vlak-2:#eef1f5;--vlak-rand:#e4e8ee;
  --schaduw:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.06);--schaduw-hoog:0 10px 30px rgba(16,24,40,.16)}
:root:not([data-theme="dark"]){--line:#e8ebf0;--hover:#f3f6fa}
:root[data-theme="dark"]{--zij-bg:#13161b;--vlak:#232831;--vlak-2:#2a303a;--vlak-rand:#363d49;
  --schaduw:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25);--schaduw-hoog:0 10px 30px rgba(0,0,0,.45)}
body{-webkit-font-smoothing:antialiased}
/* zijbalk: vlak met kaarten; de lijst schuift zacht weg onder de vaste kaarten bovenin (geen harde rand) */
.side{background:var(--zij-bg);border-right:0;box-shadow:1px 0 0 rgba(0,0,0,.04)}
.brand{background:var(--panel);border-bottom:0;margin:10px 10px 0;border-radius:var(--r-l);box-shadow:var(--schaduw)}
.userbalk{background:var(--panel);border-bottom:0;margin:8px 10px 0;border-radius:var(--r-l);box-shadow:var(--schaduw);padding:10px 12px;align-items:center}
.scroll{padding:10px 0 4px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
.sec{background:var(--panel);border-bottom:0;margin:0 10px 10px;border-radius:var(--r-l);box-shadow:var(--schaduw);padding:16px}
.sec-h h2{text-transform:none;letter-spacing:-.01em;font-size:15px;color:var(--ink);font-weight:700}
/* profielblok compact: initialen, naam, rol, Profiel en Support op één regel; geen organisatie- en groepsregel meer */
.ikben .orgnaam{display:none}
.ikben{gap:3px 8px}
.userbalk .rolchip{border-radius:999px}
.supportknop{flex-direction:row!important;gap:5px!important;padding:6px 11px!important;border:0!important;border-radius:999px!important;background:var(--vlak-2)!important;font-size:13px}
/* knoppen als pil */
.btn{border-radius:999px;padding:8px 15px;font-weight:600;border-color:transparent;background:var(--vlak-2)}
.btn:not(.primary):not(.alert):hover{background:var(--vlak-rand)}
/* gekleurde knoppen houden bij hover hun eigen kleur (iets donkerder), anders valt de witte tekst weg op lichtgrijs */
.btn.primary:hover,.btn.alert:hover{filter:brightness(.92)}
.btn.primary{box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn.danger{background:var(--melding-soft)}
/* invoer */
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea,.mkeuze>summary{border-radius:var(--r-s);border-color:var(--vlak-rand);background:var(--vlak)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--riool);box-shadow:0 0 0 3px color-mix(in srgb,var(--riool) 18%,transparent);background:var(--panel)}
.mk-paneel{border-radius:var(--r-m);border:0;box-shadow:var(--schaduw-hoog)}
/* status-tegels en categorie-knoppen */
.mtegel{border-radius:var(--r-m);border:0;border-left:0;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--vlak-2);position:relative;padding:10px 12px 14px}
.mtegel::before{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:3px;background:currentColor;opacity:.75}
.mtegel[aria-pressed="true"]{background:var(--panel);box-shadow:inset 0 0 0 2px currentColor}
.dfilter button{border-radius:999px;border-width:1px;padding:4px 11px 4px 4px;background:var(--vlak)}
.dfilter button .dl{border-radius:999px}
/* lijsten */
.mcat{border:0;border-radius:var(--r-m);background:var(--vlak);overflow:hidden}
.mcat>summary{background:transparent}
.mobj{border-top:1px solid var(--vlak-2)}
.mitem{border-radius:var(--r-s)}
.mitem:hover{background:var(--panel);border-color:transparent;box-shadow:var(--schaduw)}
.chip{border:0;background:color-mix(in srgb,currentColor 12%,var(--panel))}
.dot{border-radius:999px;padding:1px 7px}
/* kaart: zoekbalk als pil, zwevende knoppen */
.zoekbalk{border-radius:999px;border:0;box-shadow:var(--schaduw-hoog);padding-left:16px}
.zoekbalk:focus-within{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--riool) 25%,transparent),var(--schaduw-hoog)}
.zoeklijst{border-radius:var(--r-m);overflow:hidden}
.werkknop,.werklijst{border-radius:var(--r-m)!important;border:0!important;box-shadow:var(--schaduw-hoog)!important}
.leaflet-bar{border:0!important;border-radius:var(--r-m)!important;overflow:hidden;box-shadow:var(--schaduw-hoog)!important}
.leaflet-bar a{border-bottom-color:var(--vlak-2)!important}
.lc-knop{border-radius:var(--r-m)!important;border:0!important;box-shadow:var(--schaduw-hoog)}
.lc-paneel{border-radius:var(--r-l);border:0;box-shadow:var(--schaduw-hoog);padding:4px}
.lc-item label{border-radius:var(--r-s)}
.fab{border-radius:999px!important;box-shadow:0 8px 20px color-mix(in srgb,var(--melding) 40%,transparent)!important}
.viz-balk{border-radius:var(--r-l)!important;box-shadow:var(--schaduw-hoog)!important;border:0!important}
.viz-balk .btn{border-radius:999px!important}
/* vensters en meldingen */
.form-dlg,.dlg{backdrop-filter:blur(3px)}
.form-box,.dlg-box{border-radius:22px;box-shadow:var(--schaduw-hoog)}
.form-head,.form-foot{border-color:var(--vlak-2)}
.toast{border-radius:var(--r-m)}
.leaflet-popup-content-wrapper{border-radius:var(--r-l)!important;box-shadow:var(--schaduw-hoog)!important}
/* zachte stijl: werkvoorraad, keuzelijsten en labels in de zijbalk */
.rolchip,#uRol{border-radius:999px!important;padding:1px 9px!important}
.wv-item{border:0;border-radius:var(--r-m);background:var(--panel);box-shadow:var(--schaduw)}
.wv-item.terug{border-left:0;box-shadow:inset 3px 0 0 var(--melding),var(--schaduw)}
.wv-n,.tag{border-radius:999px!important}
.wv-bulk{border-radius:var(--r-m);border:0;box-shadow:inset 0 0 0 1.5px var(--riool)}
.side select,.side input[type=text],.side input[type=search],.side input[type=date],.side input[type=number],.wv-bulk select{border-radius:var(--r-s)}
.side .tbord>li,.tkaart{border-radius:var(--r-m)}
.sheet-kop{border-bottom:0}

/* telefoon: zoekbalk zonder eigen invoervlak (iOS kleurt het veld in het donkere thema) en lopend werk op één regel */
.zoekbalk input{-webkit-appearance:none;appearance:none;background:transparent!important;border-radius:0;box-shadow:none;text-overflow:ellipsis}
.zoekbalk input::placeholder{text-overflow:ellipsis}
.werkknop .kort{display:none}
.werkknop{white-space:nowrap}
@media (max-width:760px){
  .werkknop{font-size:13.5px;gap:5px;padding:8px 12px}
  .werkknop .lang{display:none}
  .werkknop .kort{display:inline}
  .werkknop::before{margin-right:4px}
}

.ar-lijst{margin:10px 0;padding-left:18px;display:grid;gap:4px}

/* ---------- Oudere browsers zonder color-mix() (Safari tot 16.1, Chrome tot 110) ----------
   Daar valt een custom property met color-mix in zijn geheel weg; die krijgen hier een vaste kleur, met de standaard huisstijl.
   Losse regels krijgen een eenvoudige variant als ze anders hun achtergrond of focusrand kwijt zijn. Bewust als laatste in dit bestand. */
@supports not (color:color-mix(in srgb,red,blue)){
  :root{--melding-soft:#fde8f2}
  :root[data-theme="dark"]{--kop:#a9aecd;--kop-vlak:#4f5999;--riool:#478ec5;--melding-soft:#41112d}
  .mapdrop{background:rgba(0,98,174,.18)}
  .tm-akk.wacht{background:rgba(224,164,0,.18);color:#9a6b00}
  .tm-akk.ok{background:rgba(43,138,62,.15);color:#2b8a3e}
  .tm-akk.nee{background:rgba(192,38,45,.13);color:#c0262d}
  .tm-akkblok.ok{background:rgba(43,138,62,.09);border-color:#2b8a3e}
  .tm-akkblok.nee{background:rgba(192,38,45,.08);border-color:#c0262d}
  .dkeuze button{border-color:var(--dc);background:var(--panel)}
  .dkeuze button[aria-pressed="true"],.dfilter button[aria-pressed="true"]{background:var(--hover)}
  .herhaal{background:rgba(40,53,131,.07)}
  .herhaal.vaak{background:rgba(224,164,0,.13)}
  .eig-let{background:rgba(224,164,0,.15)}
  .fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:0 0 0 3px rgba(0,98,174,.18)}
  .zoekbalk:focus-within{box-shadow:0 0 0 3px rgba(0,98,174,.25),var(--schaduw-hoog)}
  .chip{background:var(--hover)}
}

/* aanvullingen op een termijn (aannemer voegt regels toe, beheerder beoordeelt) */
.tm-aanv td{background:color-mix(in srgb,#e0a400 12%,transparent)}
.tm-aanv-tag{display:inline-block;font-size:11px;font-weight:700;padding:0 6px;border-radius:8px;background:color-mix(in srgb,#e0a400 25%,transparent);color:color-mix(in srgb,#9a6b00 85%,var(--ink));margin:2px 4px 2px 0}
.tm-aanvlijst{list-style:none;margin:4px 0 0 27px;padding:0;display:grid;gap:4px;font-size:12.5px}
.tm-aanvlijst li{padding:4px 8px;border-radius:6px;background:color-mix(in srgb,#e0a400 12%,transparent)}
.tm-aanvlijst li.afgewezen{background:color-mix(in srgb,#c0262d 9%,transparent)}
.tm-aanvlijst small,.tm-beoordrij small{display:block;color:var(--muted)}
.tm-nieuw{margin:4px 0 0 27px;display:grid;gap:6px}
.tm-plus{margin:4px 0 0 27px}
.tm-nieuwrij{display:grid;grid-template-columns:120px 1fr 110px 1fr 32px;gap:6px;align-items:center;padding:6px;border-radius:8px;background:color-mix(in srgb,#e0a400 10%,transparent)}
.tm-nieuwrij input,.tm-nieuwrij select{width:100%;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:14px}
.tm-aant{display:flex;align-items:center;gap:4px}.tm-eenh{font-size:12px;color:var(--muted)}
.tm-beoord{border-top:1px solid var(--line);padding:8px 0;display:grid;gap:6px}
.tm-beoordrij{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:8px;border-radius:8px;background:color-mix(in srgb,#e0a400 10%,transparent)}
.tm-beoordrij.af{background:color-mix(in srgb,#c0262d 8%,transparent)}
.tm-beoordrij [data-k="reden"]{grid-column:1/-1;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font:inherit}
.tm-beoordkeus{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
@media (max-width:760px){ .tm-nieuwrij{grid-template-columns:1fr 1fr 32px} .tm-nieuwrij [data-k="omschrijving"],.tm-nieuwrij [data-k="toelichting"]{grid-column:1/-1} .tm-beoordrij{grid-template-columns:1fr} }

/* navigeren in de app */
.navbalk{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 20px));z-index:1000;display:flex;align-items:center;gap:10px;background:#1a3a5c;color:#fff;border-radius:var(--r-l,14px);padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav-pijl{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.nav-tekst{flex:1;min-width:0;display:grid}
.nav-tekst b{font-size:17px;line-height:1.25}
.nav-tekst span{font-size:13px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbalk .iconbtn{color:#fff;font-size:18px}
.navbalk .btn{flex:none}
body.nav-aan .zoekbalk,body.nav-aan .werkbalk{display:none}

/* Kleur per categorie (--dc van .dl, .dkeuze en .dfilter). Zelfde sleutels als DISC in js/app.js. */
.dc-riool{--dc:#0062AE} .dc-wegen{--dc:#7d6650} .dc-groen{--dc:#4f9a3a} .dc-bomen{--dc:#1e6b3c}
.dc-verlichting{--dc:#d99a00} .dc-spelen{--dc:#9b4fb5} .dc-kunstwerken{--dc:#5a6d80} .dc-afval{--dc:#00838F}

/* Hulpclasses voor wat eerder in style-attributen stond (de CSP staat geen inline stijl toe). Met !important, want een
   style-attribuut won ook van elke andere regel, zoals .leaflet-popup-content p. Te combineren: "m0 mb8" is margin:0 0 8px. */
.m0{margin:0!important}
.mt0{margin-top:0!important} .mt6{margin-top:6px!important} .mt8{margin-top:8px!important} .mt10{margin-top:10px!important}
.mb6{margin-bottom:6px!important} .mb8{margin-bottom:8px!important} .mb10{margin-bottom:10px!important}
.p24{padding:24px!important} .px10-pb8{padding:0 10px 8px!important} .w90{width:90px!important} .fw400{font-weight:400!important}
.klein-grijs{font-size:12px!important;color:var(--muted)!important}