/* DebiCare Klanten Dashboard - moderne huisstijl */
:root {
  --blue:#33509f; --blue-d:#223887; --blue-050:#eef2fb;
  --peach:#ef8b5e; --peach-d:#e2734a;
  --cream:#fff8ef; --paper:#ffffff; --ink:#2b332f; --ink-soft:#6b756f;
  --line:#ece3d4; --line-2:#f4ecdf;
  --groen:#2e9e6a; --groen-bg:#e7f6ee;
  --oranje:#e0900f; --oranje-bg:#fbf0d9;
  --rood:#d0463a; --rood-bg:#fbe8e6;
  --grijs:#9aa39d; --grijs-bg:#eef0ee;
  --shadow:0 1px 2px rgba(34,56,135,.05), 0 6px 20px rgba(34,56,135,.06);
  --radius:16px; --radius-s:12px;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3 { font-family:"Fredoka",system-ui,sans-serif; color:var(--blue-d); margin:0; font-weight:600; }
a { color:var(--blue); }

/* Topbar + nav */
.topbar { display:flex; align-items:center; gap:1.5rem; padding:.7rem 1.5rem;
  background:var(--blue); color:#fff; box-shadow:var(--shadow); }
.brand { font-family:"Fredoka",sans-serif; font-size:1.15rem; font-weight:700; white-space:nowrap; }
.brand span { opacity:.8; font-weight:500; }
.nav { display:flex; gap:.35rem; margin-left:.5rem; }
.nav a { color:#dfe6fb; text-decoration:none; padding:.4rem .8rem; border-radius:999px; font-weight:700; font-size:.92rem; }
.nav a:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav a.actief { background:#fff; color:var(--blue-d); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.who { font-weight:700; opacity:.95; }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45);
  border-radius:10px; padding:.45rem .9rem; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-ghost:hover { background:rgba(255,255,255,.12); }

.container { width:100%; max-width:1120px; margin:0 auto; padding:1.75rem 1.5rem 3rem; flex:1; }
.dash-head { margin-bottom:1.25rem; }
.dash-head h1 { font-size:1.7rem; }
.muted { color:var(--ink-soft); }
.periode-pill { display:inline-block; background:var(--blue-050); color:var(--blue-d);
  font-weight:700; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; }

.demo-note { font-size:.85rem; background:#fff; border:1px dashed var(--peach); color:var(--ink-soft);
  padding:.6rem .9rem; border-radius:10px; margin:.6rem 0 0; }

/* Hero: bezetting + stoplicht */
.hero { display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:1rem; margin-bottom:1.25rem; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.25rem 1.35rem; }
.hero-bezetting { display:flex; flex-direction:column; gap:.15rem; }
.hero-bezetting .label { font-weight:700; color:var(--ink-soft); font-size:.85rem; }
.hero-graad { display:flex; align-items:center; gap:.7rem; }
.hero-graad .pct { font-family:"Fredoka",sans-serif; font-size:3rem; font-weight:700; line-height:1; color:var(--blue-d); }
.dot { width:18px; height:18px; border-radius:50%; flex:none; box-shadow:0 0 0 4px rgba(0,0,0,.03); }
.dot-lg { width:26px; height:26px; }
.sl-groen{background:var(--groen);} .sl-oranje{background:var(--oranje);}
.sl-rood{background:var(--rood);} .sl-onbekend{background:var(--grijs);}
.hero-sub { color:var(--ink-soft); font-size:.9rem; margin-top:.15rem; }
.bar { height:9px; background:var(--line-2); border-radius:6px; overflow:hidden; margin-top:.6rem; }
.bar > span { display:block; height:100%; border-radius:6px; background:var(--peach); }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; align-content:start; }
.tile { background:var(--blue-050); border-radius:var(--radius-s); padding:.7rem .85rem; }
.tile .t-label { font-size:.75rem; color:var(--blue-d); font-weight:700; opacity:.8; }
.tile .t-val { font-family:"Fredoka",sans-serif; font-size:1.5rem; font-weight:700; color:var(--blue-d); line-height:1.1; }
.tile .t-sub { font-size:.72rem; color:var(--ink-soft); }

/* Signalen */
.signalen { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.25rem; }
.signaal { display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-radius:12px; font-size:.9rem; font-weight:600; }
.signaal.dreigt_over_capaciteit { background:var(--rood-bg); color:#8f2c23; }
.signaal.onderbezetting { background:var(--oranje-bg); color:#8a5a09; }

.section-title { font-size:1.15rem; margin:1.5rem 0 .8rem; }

/* Locatie-kaarten */
.loc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; }
.loc-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; }
.loc-top { height:6px; }
.loc-top.sl-groen{background:var(--groen);} .loc-top.sl-oranje{background:var(--oranje);}
.loc-top.sl-rood{background:var(--rood);} .loc-top.sl-onbekend{background:var(--grijs);}
.loc-body { padding:1.1rem 1.25rem; }
.loc-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.loc-head h3 { font-size:1.05rem; }
.badge { font-size:.72rem; font-weight:800; padding:.2rem .6rem; border-radius:999px; text-transform:uppercase; letter-spacing:.02em; }
.badge.sl-groen{background:var(--groen-bg); color:#1c6b45;}
.badge.sl-oranje{background:var(--oranje-bg); color:#8a5a09;}
.badge.sl-rood{background:var(--rood-bg); color:#8f2c23;}
.badge.sl-onbekend{background:var(--grijs-bg); color:#5c635e;}
.loc-graad { display:flex; align-items:baseline; gap:.5rem; margin:.5rem 0 .1rem; }
.loc-graad .pct { font-family:"Fredoka",sans-serif; font-size:2rem; font-weight:700; color:var(--blue-d); line-height:1; }
.loc-graad .sub { color:var(--ink-soft); font-size:.85rem; }
.mini { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:.8rem 0; }
.mini div { background:var(--line-2); border-radius:10px; padding:.45rem .6rem; }
.mini .m-l { font-size:.68rem; color:var(--ink-soft); font-weight:700; }
.mini .m-v { font-weight:800; color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0; }
.chip { font-size:.75rem; font-weight:700; background:var(--blue-050); color:var(--blue-d);
  border-radius:999px; padding:.22rem .6rem; }
.chip b { color:var(--blue-d); }
/* Bezetting per weekdag: balk = bezettingsgraad van die dag, spoor = capaciteit. */
.week { display:flex; gap:5px; margin:.6rem 0 .2rem; }
.week .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.week .track { width:100%; height:44px; display:flex; align-items:flex-end;
  background:var(--line-2); border-radius:4px; overflow:hidden; }
.week .track i { width:100%; background:var(--blue); opacity:.85;
  border-radius:4px 4px 0 0; min-height:2px; }
.week .n { font-size:.6rem; font-weight:700; color:var(--ink-soft); }
.week .dag { font-size:.62rem; color:var(--ink-soft); }
.week .col.dicht .track { background:repeating-linear-gradient(-45deg,
  var(--line-2) 0 4px, var(--paper) 4px 8px); }
.week .col.dicht .n, .week .col.dicht .dag { opacity:.5; }
.cap-label { font-size:.72rem; color:var(--ink-soft); margin-top:.35rem; }

/* Uitgesloten op de beheerpagina: zichtbaar laten, maar duidelijk uitgezet. */
a.loc-card.uit { opacity:.5; filter:grayscale(1); }
a.loc-card.uit:hover { opacity:.8; filter:grayscale(.5); }
.loc-top.sl-uit { background:var(--line); }
.badge-uit { background:var(--line); color:var(--ink-soft); }
.chip.uit { opacity:.6; }

/* Lijngrafiek (zelf getekende SVG; geen externe library i.v.m. CSP) */
.lijn { width:100%; height:auto; display:block; margin-top:.5rem; }
.lijn .band-groen { fill:var(--groen-bg); }
.lijn .band-oranje { fill:var(--oranje-bg); }
.lijn .band-rood { fill:var(--rood-bg); }
.lijn .as-lijn { stroke:var(--line); stroke-width:1; }
.lijn .trend-lijn { fill:none; stroke:var(--blue); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round; }
.lijn .prog-lijn { fill:none; stroke:var(--ink-soft); stroke-width:2;
  stroke-dasharray:4 3; opacity:.55; }
.lijn .punt { fill:var(--blue); stroke:#fff; stroke-width:2; }
.lijn .as { font-size:7px; fill:var(--ink-soft); }
.lijn-cijfers { margin:.5rem 0 0; font-size:.9rem; color:var(--ink-soft); }
.lijn-cijfers strong { color:var(--blue-d); font-size:1.05rem; }
.delta { font-weight:800; }
.delta.op { color:var(--groen); }
.delta.neer { color:var(--rood); }
.delta.gelijk { color:var(--ink-soft); }
.legenda { font-size:.72rem; color:var(--ink-soft); margin-top:.3rem; }

/* Twee gelijke kolommen (trends, detailblokken) */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
a.loc-card { display:block; text-decoration:none; color:inherit;
  transition:transform .08s ease, box-shadow .12s ease; }
a.loc-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(34,56,135,.13); }

/* Leeftijd in/uitstroom */
.leeftijd { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stroom h4 { margin:.1rem 0 .5rem; font-family:"Fredoka",sans-serif; color:var(--blue-d); font-size:.95rem; }
.stroom-row { display:flex; align-items:center; gap:.5rem; margin:.28rem 0; font-size:.85rem; }
.stroom-row .lab { width:56px; color:var(--ink-soft); font-weight:700; }
.stroom-row .track { flex:1; height:14px; background:var(--line-2); border-radius:7px; overflow:hidden; }
.stroom-row .track i { display:block; height:100%; border-radius:7px; }
.stroom-in .track i { background:var(--groen); }
.stroom-uit .track i { background:var(--peach); }
.stroom-row .n { width:22px; text-align:right; font-weight:800; }

/* Beheer + tabellen + formulieren */
.card-narrow { max-width:520px; margin:2rem auto; }
table.beheer { width:100%; border-collapse:collapse; font-size:.9rem; }
table.beheer th, table.beheer td { text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--line); }
table.beheer th { color:var(--ink-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
input[type=number], input[type=text], select {
  padding:.5rem .6rem; border:1px solid var(--line); border-radius:10px; font-size:1rem; background:#fff; font-family:inherit; width:100%; }
input:focus, select:focus { outline:2px solid var(--blue); border-color:var(--blue); }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--blue); }
label.veld { display:block; margin:1rem 0 .35rem; font-weight:700; color:var(--ink-soft); }
.radio-row { display:flex; gap:1rem; margin:.4rem 0; }
.radio-row label { display:flex; align-items:center; gap:.4rem; font-weight:600; }
.btn { display:inline-block; margin-top:1.2rem; padding:.7rem 1.3rem; border:none; border-radius:12px;
  font-family:"Fredoka",sans-serif; font-size:1rem; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--peach); color:#fff; box-shadow:0 4px 0 var(--peach-d); }
.btn-primary:hover { transform:translateY(1px); box-shadow:0 3px 0 var(--peach-d); }
.flash { padding:.8rem 1rem; border-radius:12px; margin-bottom:1rem; }
.flash-success { background:var(--groen-bg); color:#1c6b45; }
.flash-error { background:var(--rood-bg); color:#8f2c23; }
/* Meekijk-balk: moet opvallen. Je mag nooit twijfelen wiens cijfers je ziet. */
.meekijk-balk { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding:.7rem 1.5rem; background:var(--oranje-bg); color:#8a5a09;
  border-bottom:2px solid var(--oranje); font-size:.9rem; }
.meekijk-balk strong { color:#6d4707; }
.meekijk-balk .btn-ghost { border-color:var(--oranje); color:#8a5a09; }

.klant-kop { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1rem; }

.tenant-note { margin-top:2rem; font-size:.8rem; }
.footer { padding:1.1rem 1.5rem; text-align:center; color:var(--ink-soft); font-size:.85rem; }

@media (max-width:720px){ .hero{grid-template-columns:1fr;} .leeftijd{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;} }