/* Dashboard Demografie Heusden.
   Overgenomen uit het eenbestandsdashboard; kale elementselectors zijn gescoped
   naar nav#nav en main.dashboard. Kleurvariabelen staan in site.css. */
nav#nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
 display:flex;gap:2px;overflow-x:auto;padding:0 14px}
nav#nav button{background:none;border:0;padding:13px 15px;font-size:13.5px;color:var(--muted);
 cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;font-weight:500}
nav#nav button.on{color:var(--a);border-bottom-color:var(--b);font-weight:600}
main.dashboard{padding:22px 28px 70px;max-width:1500px;margin:0 auto}
section{display:none} section.on{display:block}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
 box-shadow:0 1px 3px rgba(16,35,64,.05)}
.card h3{margin:0 0 3px;font-size:15px}
.card .sub{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.kpi .v{font-size:29px;font-weight:700;color:var(--a);line-height:1.15}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:3px}
.kpi .d{font-size:12.5px;margin-top:7px;font-weight:600}
.up{color:#1a7f52}.down{color:#c0392b}
.chart{position:relative;height:320px}
.chart.tall{height:430px}
.chart.xtall{height:560px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 9px;text-align:right;border-bottom:1px solid var(--line)}
th{background:#f7f9fc;font-weight:600;color:var(--muted);font-size:11.5px;
 text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:#f7fbff}
tr.tot td{font-weight:700;background:#f7f9fc}
.tw{overflow-x:auto}
.pill{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;font-weight:600}
.p1{background:#e6f4ec;color:#1a7f52}.p2{background:#fdecec;color:#c0392b}
.p3{background:#eef3fb;color:var(--b)}.p4{background:#fdf4e3;color:#a8730f}
.note{background:#eef3fb;border-left:4px solid var(--b);padding:12px 15px;border-radius:0 8px 8px 0;
 font-size:13px;margin:14px 0}
.warn{background:#fdf4e3;border-left-color:var(--e)}
.ctrl{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.ctrl button{background:#eef2f7;border:1px solid var(--line);border-radius:7px;padding:6px 13px;
 font-size:12.5px;cursor:pointer;color:var(--muted);font-weight:500}
.ctrl button.on{background:var(--b);color:#fff;border-color:var(--b)}
h2.sec{font-size:20px;margin:4px 0 4px}
p.lead{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:1000px}
.src{font-size:11.5px;color:#8a97ab;margin-top:11px}
ul.tight{margin:6px 0 0;padding-left:19px;font-size:13.5px}
ul.tight li{margin-bottom:5px}
.bignum{font-size:15px;font-weight:700;color:var(--a)}
@media(max-width:640px){main.dashboard{padding:16px 12px 50px}}


/* bronvergelijking + disclaimer, 16 sep 2026 */
.note.bron{border-left-color:var(--e);background:#fdf8ef}
table.bronvgl{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:12.5px}
table.bronvgl th,table.bronvgl td{border-bottom:1px solid #e7ddc9;padding:5px 7px;text-align:right}
table.bronvgl th:first-child,table.bronvgl td:first-child{text-align:left}
table.bronvgl th{font-weight:600;color:#8a6420}
.st{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;
  letter-spacing:.3px;vertical-align:middle}
.st.bere{background:#e7eefb;color:#1f3864}
.st.tebev{background:#fdf0d8;color:#8a6420}
.disclaimer{flex-basis:100%;order:2;opacity:.7;line-height:1.5;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);margin-top:4px}