: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}