:root{
  --bg:#ffffff; --fg:#17202a; --muted:#5f6b78; --line:#e3e7ec; --card:rgba(255,255,255,.96);
  --accent:#f5c400; --red:#d42a20; --orange:#ee7d10; --green:#1f9d55; --blue:#2463d1; --purple:#7d3cb5;
  --shadow:0 4px 18px rgba(0,0,0,.16);
}
body.dark{ --bg:#141a21; --fg:#e7ecf1; --muted:#9aa6b2; --line:#2b3540; --card:rgba(24,31,39,.96); --shadow:0 4px 18px rgba(0,0,0,.5); }
*{box-sizing:border-box}
html,body{height:100%;margin:0;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg)}
#map{position:fixed;inset:0}
body.dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.6)}
body.dark .leaflet-container{background:#1d242c}
a{color:var(--blue)}
body.dark a{color:#7fb0ff}
.muted{color:var(--muted)}
.hidden{display:none!important}

#top{position:fixed;top:10px;left:10px;z-index:1000;display:flex;gap:8px;align-items:center;background:var(--card);padding:6px 8px 6px 10px;border-radius:12px;box-shadow:var(--shadow)}
.brand{display:flex;gap:8px;align-items:center}
.brand small{display:block;color:var(--muted);font-size:11px;line-height:1}
.logo{width:26px;height:26px;border-radius:7px;background:#1b2430 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 56 30 8h4l8 48' fill='none' stroke='%23f5c400' stroke-width='5'/%3E%3Cpath d='M32 14v6M32 28v6M32 42v6' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/80% no-repeat}
.iconbtn{border:0;background:transparent;color:var(--fg);font-size:20px;width:40px;height:40px;border-radius:10px;cursor:pointer}
.iconbtn:hover,.iconbtn:focus-visible{background:var(--line)}

#panel{position:fixed;top:66px;left:10px;bottom:10px;width:320px;z-index:1000;overflow:auto;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
#panel.closed{display:none}
.card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px}
.card h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.card.small{font-size:12px}
.card p{margin:4px 0}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stat{background:var(--line);border-radius:9px;padding:6px 4px;text-align:center;cursor:pointer;min-height:44px}
.stat b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted)}
#spark{width:100%;height:46px;margin-top:8px}
.sparklabel{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
#langste{margin:8px 0 0;padding-left:18px;font-size:12px}
#langste li{cursor:pointer;padding:2px 0}
#langste li:hover{text-decoration:underline}

.layer{display:flex;align-items:center;gap:8px;padding:5px 2px;border-radius:8px;cursor:pointer;min-height:36px}
.layer:hover{background:var(--line)}
.layer input{width:18px;height:18px;margin:0;accent-color:#1b2430}
body.dark .layer input{accent-color:var(--accent)}
.layer .sw{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:13px;flex:none}
.layer .nm{flex:1}
.layer .ct{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.layer .hint{display:block;font-size:11px;color:var(--muted)}
.subopts{margin:4px 0 0 30px;font-size:12px;display:none}
.subopts.on{display:block}
.subopts label{display:block;padding:3px 0}
.row{display:flex;gap:8px;align-items:center}

#legend{position:fixed;right:10px;bottom:28px;z-index:900;max-width:260px}
.lg{display:flex;align-items:center;gap:6px;margin:2px 0}
.lg i{display:inline-block;width:12px;height:12px;border-radius:50%}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1b2430;color:#fff;padding:8px 14px;border-radius:10px;z-index:2000;opacity:0;transition:opacity .25s;pointer-events:none;font-size:13px}
#toast.on{opacity:.95}

/* markers */
.mk{display:grid;place-items:center;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);font-size:13px;line-height:1}
.mk-ongeval{background:var(--red)}
.mk-pech,.mk-voertuig{background:var(--orange)}
.mk-obstakel{background:#c79100}
.mk-werkvoertuig{background:#e4a400}
.mk-afsluiting{background:#9b1010}
.mk-rijstrook,.mk-maatregel{background:#d88400}
.mk-omleiding{background:var(--blue)}
.mk-spitsstrook{background:var(--green)}
.mk-snelheid{background:#fff;border:3px solid var(--red);color:#111;font-weight:700;font-size:11px}
.mk-file{background:#7a0000}
.brug{display:grid;place-items:center;border-radius:8px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);font-size:14px;background:#3c6e9e}
.brug.open{background:var(--red);animation:pulse 1.6s infinite}
.brug.verwacht{background:var(--orange)}
.brug .lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font:700 9px system-ui;padding:1px 4px;border-radius:4px;margin-top:2px;white-space:nowrap}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,42,32,.7)}70%{box-shadow:0 0 0 12px rgba(212,42,32,0)}100%{box-shadow:0 0 0 0 rgba(212,42,32,0)}}
@media (prefers-reduced-motion:reduce){.brug.open{animation:none}}

.gantry{display:flex;gap:2px;background:#20262d;padding:2px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.5);width:max-content}
.ln{width:20px;height:20px;background:#0b0d10;border-radius:2px;display:grid;place-items:center;font:700 9px/1 system-ui;color:#fff;position:relative}
.ln.speed{background:#0b0d10}
.ln.speed span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff}
.ln.speed.rr span{border:2px solid #e3261b}
.ln.closed{color:#ff2a1a;font-size:16px}
.ln.open{color:#2fe06b;font-size:14px}
.ln.ahead{color:#f7f7f7;font-size:13px}
.ln.end{color:#ddd}
.ln.blink::after{content:"";position:absolute;top:1px;left:1px;width:4px;height:4px;border-radius:50%;background:#ffb300;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.kruis{color:#ff2a1a;background:#0b0d10;border-radius:3px;font:900 13px/16px system-ui;width:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.6)}

.drip{background:#111;border:2px solid #f5c400;border-radius:3px;width:26px;height:16px;display:grid;place-items:center;font:700 7px/1 system-ui;color:#f5c400;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.drip.uit{border-color:#777;color:#999}

.clu{display:grid;place-items:center;border-radius:50%;color:#fff;font:700 11px system-ui;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.truck{display:grid;place-items:center;border-radius:8px;background:#2c3e50;color:#fff;font:700 10px system-ui;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);padding:0 4px;white-space:nowrap}

/* popups */
.leaflet-popup-content{margin:10px 12px;font-size:13px;min-width:200px}
body.dark .leaflet-popup-content-wrapper,body.dark .leaflet-popup-tip{background:#1f2730;color:var(--fg)}
.pp h3{margin:0 0 2px;font-size:15px}
.pp .sub{color:var(--muted);font-size:12px;margin-bottom:6px}
.pp table{border-collapse:collapse;width:100%}
.pp td{padding:2px 0;vertical-align:top}
.pp td:first-child{color:var(--muted);padding-right:10px;white-space:nowrap}
.pp .tag{display:inline-block;padding:1px 6px;border-radius:5px;font-size:11px;font-weight:600;color:#fff;margin-right:4px}
.pp .plan{max-height:130px;overflow:auto;margin-top:6px;font-variant-numeric:tabular-nums;font-size:12px}
.pp img.dripimg{display:block;max-width:100%;image-rendering:pixelated;background:#000;border-radius:4px;margin:6px 0}
.pp .txt{background:#000;color:#f5c400;font:600 12px/1.3 ui-monospace,monospace;padding:6px;border-radius:4px;margin:6px 0;white-space:pre-line}
.pp .gantry{margin:6px 0}
.pp .rel{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-size:12px}

@media (max-width:640px){
  #panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:58vh;padding:0 8px 8px;gap:6px}
  #legend{bottom:auto;top:66px;right:8px}
  .leaflet-bottom.leaflet-left{display:none}
}

/* kleinere iconen bij uitzoomen */
.z-lo .mk,.z-lo .brug:not(.open){transform:scale(.62)}
.z-mid .mk,.z-mid .brug:not(.open){transform:scale(.82)}
.z-lo .brug.open{transform:scale(.85)}