:root{
  --bg:#0f1418; --panel:#161d23; --line:#26313a;
  --ink:#e8eef3; --ink-dim:#93a3b1;
  --stroom:#f5a524; --gas:#3b82f6; --water:#14b8a6; --gepland:#6b7c8c;
  --accent:#f5a524;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column;
}

/* ---- kop ---- */
.topbar{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{display:flex; align-items:center; gap:10px}
.brand h1{margin:0; font-size:19px; letter-spacing:-.01em}
.dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(245,165,36,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(245,165,36,0)}
  100%{box-shadow:0 0 0 0 rgba(245,165,36,0)}
}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }
.tagline{margin:0; color:var(--ink-dim); font-size:13px}
.meta{margin-left:auto; color:var(--ink-dim); font-size:13px; font-variant-numeric:tabular-nums}

/* ---- layout ---- */
.layout{flex:1; display:grid; grid-template-columns:360px 1fr; min-height:0}
.panel{border-right:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; min-height:0}
#map{height:100%; background:#0b0f12}

/* ---- filters ---- */
.filters{display:flex; gap:6px; flex-wrap:wrap; padding:12px; border-bottom:1px solid var(--line)}
.chip{
  border:1px solid var(--line); background:transparent; color:var(--ink-dim);
  padding:5px 11px; border-radius:999px; font-size:13px; cursor:pointer;
}
.chip:hover{color:var(--ink)}
.chip.is-on{background:var(--ink); color:#0f1418; border-color:var(--ink); font-weight:500}

/* ---- lijst ---- */
.list{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1}
.item{padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer}
.item:hover{background:#1c242b}
.item.is-active{background:#1c242b; box-shadow:inset 3px 0 0 var(--accent)}
.item .row{display:flex; align-items:center; gap:8px}
.item .place{font-weight:600}
.item .tag{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 6px; border-radius:4px; color:#0f1418; font-weight:700;
}
.tag.elektriciteit{background:var(--stroom)}
.tag.gas{background:var(--gas); color:#fff}
.tag.water{background:var(--water); color:#04211d}
.tag.gepland{background:var(--gepland); color:#fff}
.item .sub{color:var(--ink-dim); font-size:13px; margin-top:3px}
.empty{padding:24px 14px; color:var(--ink-dim)}

/* ---- popup ---- */
.leaflet-popup-content{margin:12px 14px; font:14px/1.5 system-ui,sans-serif}
.leaflet-popup-content h3{margin:0 0 6px; font-size:15px}
.leaflet-popup-content dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px}
.leaflet-popup-content dt{color:#667; font-size:12px}
.leaflet-popup-content dd{margin:0; font-size:13px}
.leaflet-popup-content a{color:#0b62c4}

/* ---- voet ---- */
.foot{padding:12px 20px; border-top:1px solid var(--line); background:var(--panel);
      color:var(--ink-dim); font-size:12px}
.foot p{margin:0 0 4px; max-width:80ch}

@media (max-width:820px){
  .layout{grid-template-columns:1fr; grid-template-rows:280px 1fr}
  .panel{order:2; border-right:none; border-top:1px solid var(--line)}
  #map{order:1}
  .meta{margin-left:0; width:100%}
}

/* tweede filterrij: netbeheerders, visueel ondergeschikt aan de eerste */
.filters--sub{border-bottom:1px solid var(--line); padding-top:0}
.filters--sub .chip{font-size:12px; padding:4px 9px}

/* ---------------------------------------------------------------
   Kaartmarkers met toestand
   Vier vormen: zwaailamp (storing), busje (monteur onderweg),
   moersleutel (ter plaatse), pion (gepland werk).
   Alleen de zwaailamp beweegt - zie ook prefers-reduced-motion onderaan.
   --------------------------------------------------------------- */
.mk{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--mk); color:#0f1418;
  box-shadow:0 1px 4px rgba(0,0,0,.5), 0 0 0 2px rgba(15,20,24,.55);
  cursor:pointer;
}
.mk svg{width:15px; height:15px; fill:currentColor; stroke:currentColor}
.mk--klein {width:22px; height:22px}
.mk--klein svg{width:13px; height:13px}
.mk--groot {width:34px; height:34px}
.mk--groot svg{width:19px; height:19px}

/* gas en water zijn donker genoeg voor witte glyphs */
.mk--gas, .mk--water{color:#fff}
/* Gepland werk hoort achtergrond te zijn. Een glyph op 22px trekt te veel
   aandacht en leest bovendien als waarschuwingsbord; een kleine stip niet.
   De popup vertelt alsnog precies wat het is. */
.mk--gepland{
  width:13px !important; height:13px !important;
  background:transparent;
  border:2px solid var(--gepland);
  box-shadow:0 0 0 1.5px rgba(15,20,24,.5);
  opacity:.65;
}
.mk--gepland svg{display:none}
.mk--gepland:hover{opacity:1; background:var(--gepland)}

/* de zwaailamp: een ring die uitdijt en vervaagt */
.mk--pulse::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--mk);
  animation:mk-pulse 2s ease-out infinite;
}
@keyframes mk-pulse{
  0%   {transform:scale(1);   opacity:.9}
  100% {transform:scale(2.9); opacity:0}
}
.leaflet-marker-icon:hover .mk{filter:brightness(1.15)}

/* toestandsregel in de popup */
.pop-state{
  margin:0 0 8px; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:#5b6b7a;
}
.pop-state--storing{color:#b4530a}

/* ---- legenda ---- */
.legend{display:flex; flex-wrap:wrap; gap:10px 14px; padding:10px 12px;
        border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-dim)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  background:var(--stroom); color:#0f1418; flex:none;
}
.legend i svg{width:11px; height:11px; fill:currentColor; stroke:currentColor}
.legend i.is-gepland{
  background:transparent; border:2px solid var(--gepland);
  width:13px; height:13px;
}
.legend i.is-gepland svg{display:none}

@media (prefers-reduced-motion:reduce){
  .mk--pulse::before{animation:none; opacity:.45}
}