/* Layout: kaart vult het scherm; vaste zijbalk links (op telefoon onder de kaart) */
:root{
  /* Huisstijl gemeente Lingewaard: Open Sans, donkerblauw #283583, blauw #0062AE, magenta #E5006B, vierkante hoeken.
     Bewust één lichte uitstraling, net als lingewaard.nl. Kaartkleuren van de riolering volgen GWSW Geo. */
  --bg:#f4f4f4; --panel:#ffffff; --ink:#333333; --kop:#283583; --muted:#6f6f6f; --line:#e2e8f0;
  --hover:#f2f6fb; --riool:#0062AE; --riool-ink:#ffffff; --melding:#E5006B; --melding-soft:#fdecf3;
  --ok:#2b8a3e; --warn:#b07d00; --mask:#f4f4f4;
  --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. */
#login{position:fixed;inset:0;z-index:5000;background:#f4f4f4;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:#283583}
.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:#283583;font-size:26px;line-height:1;letter-spacing:-.01em}
.lg-woordmerk b{color:#E5006B;font-weight:700}
.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;box-shadow:0 15px 30px rgba(0,0,0,.11),0 5px 15px rgba(0,0,0,.08)}
.lg-tegel{background:#0062AE;color:#fff;padding:36px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.lg-vlinder{width:88px;height:88px;background:#fff;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:28px;font-weight:600;margin:0 0 8px;line-height:1.25;text-wrap:balance}
.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:#283583;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:#283583}
.lg-veld input{border:1px solid #b5b5b5;border-radius:0;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 #0062AE;outline-offset:0}
.lg-veld input:focus{outline:3px solid #0062AE;outline-offset:0;border-color:#0062AE}
.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:#0062AE;font:600 13px 'Open Sans',sans-serif;cursor:pointer;padding:6px 8px}
.lg-fout{background:#fdecf3;border-left:4px solid #E5006B;color:#9a002a;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:#0062AE}
.lg-rollen label:has(input:checked){border:2px solid #0062AE;padding:9px;background:#eef5fb}
.lg-rollen input{margin-top:3px;accent-color:#0062AE}
.lg-rollen b{display:block;color:#283583;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 #0062AE;color:#283583;padding:10px 12px;font-size:14px;margin:0}
.lg-knop{background:#E5006B;color:#fff;border:0;border-radius:0;padding:14px 18px;font:600 16px 'Open Sans',sans-serif;cursor:pointer;width:100%}
.lg-knop:hover{background:#c8005e}
.lg-knop:focus-visible{outline:3px solid #283583;outline-offset:2px}
.lg-noot{font-size:13px;color:#6f6f6f;margin:0;border-top:1px solid #e2e8f0;padding-top:14px}
.lg-voet{background:#0062AE;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 */
body[data-rol="medewerker"] #mSec{order:-2}
body[data-rol="medewerker"] #routeSec{order:-1}
body[data-rol="medewerker"] #mijnSec,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 .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{list-style:none;margin:2px 0 10px;padding:0;display:grid;gap:3px}
.verloop li span:nth-child(-n+2){white-space:nowrap}
.verloop li span:nth-child(3){text-align:right;min-width:0;overflow-wrap:anywhere}
.verloop .actie{white-space:normal!important}
.verloop li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.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 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:100%;max-height:100%;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);color:#fff;border-style:solid;border-color:var(--kop);font-weight:600}
.ph-add.cam:hover{background:var(--kop);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 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:0;max-width:calc(100vw - 70px)}
  .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);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);color:#fff;font-size:12px}
.rnr{display:grid;place-items:center;width:24px;height:24px;background:#283583;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:#0062AE}
.werf{display:grid;place-items:center;width:28px;height:28px;background:#283583;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 #uitlog{margin-left:auto;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{grid-column:1/-1;font-size:11.5px;color:var(--kop);margin:-1px 0 3px}
.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:#eef7f0}
.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-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 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:#c8005e}
.seg button[aria-pressed="true"]{background:var(--kop);border-color:var(--kop);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>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)}
.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);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)}
.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} }