/* Verduurzaming Den Haag — dashboardstijl (hergebruikt design-tokens). */
.dh-kern { display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px; margin-top:16px; }
@media (max-width:1100px){ .dh-kern { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .dh-kern { grid-template-columns:repeat(2,1fr); } }
.dh-kern .stat-value { font-size:26px; }
.dh-bron, .dh-toelichting { font-size:13px; color:var(--color-text-muted); }
.dh-fig { margin-top:44px; }
.dh-fig h3 { margin-bottom:4px; }

/* horizontale staafjes met spoor (zoals dm-bars, compacter) */
.dh-bars { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.dh-bar-rij { display:grid; grid-template-columns:minmax(120px, 180px) 1fr 52px;
  gap:10px; align-items:center; font-size:13px; }
.dh-bar-naam { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-bar-spoor { background:var(--color-surface-2); border-radius:6px; height:16px;
  overflow:hidden; }
.dh-bar-spoor i { display:block; height:100%;
  background:linear-gradient(90deg, var(--color-navy), #2a7ab0); border-radius:6px; }
.dh-bar-waarde { font-variant-numeric:tabular-nums; text-align:right;
  color:var(--color-text); font-weight:600; font-size:12.5px; }
.dh-kolommen { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:680px){ .dh-kolommen { grid-template-columns:1fr; } }
.dh-kolom h4 { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-muted); margin:10px 0 0; }

/* anker: uw woning */
.dh-form { margin-top:14px; }
.dh-formulier { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.dh-veld span { display:block; font-size:12px; color:var(--color-text-muted);
  margin-bottom:4px; }
.dh-veld input { min-height:var(--control-h); padding:8px 12px; font-size:15px;
  border:1px solid var(--color-divider-strong); border-radius:var(--radius-md);
  background:var(--color-surface); color:var(--color-text); outline:none; }
.dh-formfout { color:var(--color-danger); font-size:13.5px; margin-top:10px; }
.dh-anker { margin-top:20px; background:var(--color-surface);
  border:1px solid var(--color-divider); border-radius:var(--radius-md);
  padding:18px 20px; }
.dh-anker-kop { display:flex; justify-content:space-between; gap:14px;
  align-items:flex-start; flex-wrap:wrap; }
.dh-anker h3 { margin:0; }
.dh-anker-sub { font-size:12.5px; color:var(--color-text-muted); margin:4px 0 0; }
.dh-label { font-family:var(--font-heading); font-weight:700; font-size:20px;
  padding:8px 16px; border-radius:var(--radius-md); color:#fff; }
.dh-anker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:16px 0 0; }
.dh-anker-grid dt { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-muted); }
.dh-anker-grid dd { margin:2px 0 0; font-size:14.5px; font-weight:600; }
.dh-wijk-context { margin-top:16px; border-top:1px dashed var(--color-divider);
  padding-top:12px; font-size:13.5px; line-height:1.65; }
.dh-wijk-context b { color:var(--color-navy); }
.dh-details { margin-top:14px; }
.dh-details summary { cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--color-navy); }

/* -- de kaart: datalagen naar keuze ------------------------------------------ */
.dh-laag-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.dh-laag-chip { border:1px solid var(--color-divider-strong); background:var(--color-surface);
  color:var(--color-navy); border-radius:999px; padding:7px 14px; font-size:13px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.dh-laag-chip i { width:10px; height:10px; border-radius:3px; display:inline-block;
  background:var(--color-divider-strong); }
.dh-laag-chip.actief { background:var(--color-navy); color:#fff; border-color:var(--color-navy); }
.dh-laag-chip.actief i { background:#fff; }
.dh-kaart-kop { display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; margin-top:14px; }
.dh-niveau { display:flex; gap:2px; background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:var(--radius-md); padding:3px; }
.dh-niveau-knop { border:none; background:transparent; cursor:pointer; font-size:12.5px;
  font-weight:600; color:var(--color-text-muted); padding:5px 12px;
  border-radius:var(--radius-sm); }
.dh-niveau-knop.actief { background:var(--color-navy); color:#fff; }
.dh-legenda { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11.5px;
  color:var(--color-text-muted); }
.dh-legenda i { width:16px; height:12px; border-radius:2px; display:inline-block;
  border:1px solid rgba(0,0,0,.08); }
.dh-kaart-wrap { margin-top:10px; background:var(--color-surface-2);
  border:1px solid var(--color-divider); border-radius:var(--radius-md); padding:8px; }
.dh-kaart-wrap svg { width:100%; height:auto; display:block; }
#dh-kaart path { stroke:#fff; stroke-width:.6; cursor:pointer; transition:opacity .15s; }
#dh-kaart path.zonder { fill:#e5e7eb; cursor:default; }
#dh-kaart path:hover { stroke:var(--color-navy); stroke-width:1.4; }
#dh-kaart path.geselecteerd { stroke:var(--color-navy); stroke-width:2; }
.dh-kaart-tip { position:absolute; pointer-events:none; background:var(--color-navy); color:#fff;
  font-size:12px; padding:6px 10px; border-radius:6px; z-index:30; max-width:230px;
  box-shadow:var(--shadow-md); }
.dh-kaart-detail { margin-top:12px; background:var(--color-surface);
  border:1px solid var(--color-divider); border-left:4px solid var(--color-navy);
  border-radius:var(--radius-md); padding:14px 16px; }
.dh-kaart-detail h4 { margin:0 0 2px; font-size:15px; color:var(--color-navy); }
.dh-kaart-detail .dh-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-top:10px; }
.dh-kaart-detail dt { font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-muted); }
.dh-kaart-detail dd { margin:2px 0 0; font-size:14px; font-weight:600; }
#inhoud { position: relative; }

/* energielabel-chip: verwijst naar de Klimaatmonitor (nog geen data) */
.dh-laag-chip-label i { background:repeating-linear-gradient(45deg,
  var(--color-divider-strong) 0 3px, var(--color-surface) 3px 6px); }
.dh-laag-chip-label { border-style: dashed; }
.dh-laag-chip-label:hover { border-color: var(--color-navy); }

/* -- energielabels & registratie -------------------------------------------- */
.dh-label-feiten { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; margin-top:16px; }
.dh-feit { background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:var(--radius-md); padding:14px 16px; }
.dh-feit b { display:block; font-family:var(--font-heading); font-size:24px;
  color:var(--color-navy); }
.dh-feit span { font-size:12px; color:var(--color-text-muted); line-height:1.5; }
.dh-tijdlijn-wrap { margin-top:26px; background:var(--color-surface);
  border:1px solid var(--color-divider); border-radius:var(--radius-md); padding:16px 18px; }
.dh-tijdlijn-wrap h4 { margin:0 0 14px; font-size:14px; }
.dh-tijdlijn { display:flex; align-items:flex-end; gap:6px; height:150px; }
.dh-tijdlijn-segment { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  gap:3px; position:relative; min-width:0; height:100%; }
.dh-tijdlijn-segment .stapel { display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden; }
.dh-tijdlijn-segment i { display:block; }
.dh-tijdlijn-segment .jaar { font-size:10px; text-align:center; color:var(--color-text-muted);
  margin-top:4px; }
.dh-tijdlijn-segment .tip { position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:4px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; }
.dh-tijdlijn-segment:hover .tip { opacity:1; }
.dh-label-uitleg { margin-top:22px; }
.dh-label-uitleg h4 { font-size:14px; margin:0 0 8px; }
.dh-label-uitleg ul { margin:0; padding-left:20px; font-size:13.5px; line-height:1.7;
  color:var(--color-text); }
.dh-label-uitleg li { margin:4px 0; }
/* label-registratieblok in het anker */
.dh-registratie { margin-top:14px; border-top:1px dashed var(--color-divider); padding-top:12px; }
.dh-registratie h5 { margin:0 0 8px; font-size:12px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--color-text-muted); }
.dh-registratie-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px; }
.dh-registratie-grid dt { font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-text-muted); }
.dh-registratie-grid dd { margin:2px 0 0; font-size:13.5px; font-weight:600; }
.dh-geldigheid { display:inline-block; margin-top:10px; font-size:12.5px;
  padding:4px 10px; border-radius:999px; }
.dh-geldigheid.straks { background:rgba(217,145,24,.12); color:#a86408; }
.dh-geldigheid.ruim { background:rgba(46,125,79,.1); color:var(--color-success, #2e7d4f); }
.dh-geldigheid.verlopen { background:rgba(163,50,38,.1); color:#a33226; }

/* -- echte labeldata: verdeling + registraties per maand + pc4 ---------- */
.dh-label-verdeling { display:flex; gap:3px; align-items:flex-end; height:170px; margin-top:8px; }
.dh-label-verdeling .klasse { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0; position:relative; height:100%; }
.dh-label-verdeling .klasse i { display:block; border-radius:3px 3px 0 0; }
.dh-label-verdeling .klasse .k { font-size:10px; text-align:center; color:var(--color-text-muted);
  margin-top:4px; white-space:nowrap; }
.dh-label-verdeling .klasse .n { font-size:10.5px; text-align:center; font-weight:600;
  margin-bottom:3px; }
.dh-label-verdeling .klasse .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; }
.dh-label-verdeling .klasse:hover .tip { opacity:1; }
.dh-registraties { display:flex; gap:1px; align-items:flex-end; height:130px; margin-top:8px; }
.dh-registraties .m { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0; position:relative; height:100%; }
.dh-registraties .m i { display:block; background:linear-gradient(180deg, #2a7ab0, var(--color-navy));
  border-radius:2px 2px 0 0; }
.dh-registraties .m .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; }
.dh-registraties .m:hover .tip { opacity:1; }

/* -- dekking per gebied: gestapelde met/zonder-balken -------------------- */
.dh-dekking-lijst { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.dh-dekking-rij { display:grid; grid-template-columns:46px 1fr 118px; gap:10px;
  align-items:center; font-size:12.5px; }
.dh-dekking-rij .code { color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.dh-dekking-spoor { display:flex; height:16px; border-radius:4px; overflow:hidden;
  background:#e5e7eb; }
.dh-dekking-spoor i.met { background:linear-gradient(90deg,#2c8650,#4faf6a); }
.dh-dekking-rij .tekst { text-align:right; color:var(--color-text-muted); }
.dh-dekking-rij .tekst b { color:var(--color-text); }
/* groei-lijn (cumulatief) */
#dh-groei-svg { width:100%; height:auto; display:block; margin-top:8px; }
/* jaar-stapels */
.dh-jaar-stapels { display:flex; gap:6px; align-items:flex-end; height:180px; margin-top:10px; }
.dh-jaar-stapel { flex:1; display:flex; flex-direction:column-reverse; justify-content:flex-end;
  min-width:0; position:relative; height:100%; border-radius:3px 3px 0 0; overflow:hidden; }
.dh-jaar-stapel i { display:block; width:100%; }
.dh-jaar-stapel .j { font-size:10px; text-align:center; color:var(--color-text-muted);
  margin-top:4px; position:absolute; top:100%; left:0; right:0; }
.dh-jaar-stapel { margin-bottom:16px; }
.dh-jaar-stapel .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s; z-index:5; }
.dh-jaar-stapel:hover .tip { opacity:1; }

/* -- woningmarkt: bezit-stapel, bouwjaar, gebouwen ----------------------- */
.dh-bezit-stapel { display:flex; height:34px; border-radius:6px; overflow:hidden; margin-top:12px; }
.dh-bezit-stapel i { display:block; height:100%; position:relative; }
.dh-bezit-stapel i span { position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap; }
.dh-bouwjaar { display:flex; gap:5px; align-items:flex-end; height:150px; margin-top:10px; }
.dh-bouwjaar .bj { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0; position:relative; height:100%; }
.dh-bouwjaar .bj i { display:block; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#1d5f92,var(--color-navy)); }
.dh-bouwjaar .bj .k { font-size:9.5px; text-align:center; color:var(--color-text-muted);
  margin-top:4px; white-space:normal; line-height:1.25; }
.dh-bouwjaar .bj .n { font-size:10.5px; text-align:center; font-weight:600; margin-bottom:3px; }
.dh-bouwjaar .bj .tip { position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--color-navy); color:#fff; font-size:10.5px;
  padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; z-index:5; }
.dh-bouwjaar .bj:hover .tip { opacity:1; }

/* -- pagina-indeling: hoofdstukken --------------------------------------- */
.dh-hoofdstuk { display:flex; align-items:center; gap:12px; margin:56px 0 6px;
  font-size:22px; }
.dh-hoofdstuk span { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--color-navy);
  color:#fff; font-size:15px; font-family:var(--font-heading); flex-shrink:0; }
.dh-hoofdstuk-intro { margin:0 0 18px 46px; color:var(--color-text-muted);
  font-size:14px; max-width:640px; }
.dh-hoofdstuk:first-of-type { margin-top:8px; }
/* gelijk ritme voor alle datablokken */
.dh-tijdlijn-wrap { margin-top:18px; }
.dh-fig { margin-top:26px; }
section { margin-top:30px; }

/* -- linker sidebar (à la ChatGPT) ---------------------------------------- */
.dh-pagina { display:flex; gap:0; max-width:1120px; margin:0 auto; }
.dh-sidebar { width:220px; flex-shrink:0; padding:48px 0 96px 24px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  border-right:1px solid var(--color-divider); }
.dh-sidebar-kop { font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-text-muted); margin:0 12px 12px; font-weight:700; }
.dh-sidebar-link { display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; text-decoration:none;
  color:var(--color-text-muted); font-size:13.5px; line-height:1.4;
  transition:background .15s, color .15s; }
.dh-sidebar-link:hover { background:var(--color-surface-2); color:var(--color-text); }
.dh-sidebar-link.actief { background:var(--color-navy); color:#fff; }
.dh-sidebar-num { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:700;
  background:var(--color-surface-2); color:var(--color-text-muted); flex-shrink:0; }
.dh-sidebar-link.actief .dh-sidebar-num { background:rgba(255,255,255,.2); color:#fff; }
.dh-inhoud-wrap { flex:1; min-width:0; }
@media (max-width:900px) {
  .dh-pagina { display:block; }
  .dh-sidebar { display:none; }
}