/* SlimHuys v2 — UI styling, in lijn met .agent/v2/templates/. */

:root {
  --mist:#ECFAF3; --munt:#B8EBD2; --blad:#4FCB8E; --slim:#22B36B;
  --spar:#0E7A47; --donker:#04342C; --nacht:#042E1D; --crème:#F7FAF8;
  --steen:#5F5E5A; --grijs:#F1EFE8;
  --line:rgba(4,46,29,0.08); --line-2:rgba(4,46,29,0.14);
  --rood:#A32D2D; --rood-bg:#FCEBEB;
  --info:#185FA5; --info-bg:#E6F1FB;
  --warn-bg:#FAEEDA; --duur:#BA7517;
  --paars:#534AB7; --paars-bg:#EEEDFE;
  --neg:#3B82F6; --neg-soft:#A8C8F2;
  /* Solar-token voor PV-productie-visualisaties (KPI's + chart-shadows).
     Apart van --zon dat als fallback in een combo-chart-export-bar zit. */
  --solar:#F5C84C; --solar-soft:#FCE8A8;
  /* Site-brede heat-palette voor prijsniveaus — overal gelijk aan de
     homepage-heatmap zodat goedkoop=groen, duur=rood, negatief=blauw
     consistent visueel betekenis hebben. */
  --heat-cold:#3B82F6;     /* prijs < 0 → blauw */
  --heat-cheap-1:#9FE1CB;  /* very_low / ≤p25 — lichtmint */
  --heat-cheap-2:#5DCAA5;  /* low / ≤p50 — mint */
  --heat-mid:#FAC775;      /* medium / ≤p75 — geel */
  --heat-warm:#EF9F27;     /* high / ≤p90 — oranje */
  --heat-hot:#D85A30;      /* peak / >p90 — rood */
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body, #app { min-height:100vh; }
/* Safety-net tegen horizontale scroll: voorkomt dat één breed element de
   hele page mee-versleept op kleine viewports. Individuele charts/tables
   regelen hun eigen overflow via .table-scroll / chart-specifieke rules. */
html, body { overflow-x:hidden; max-width:100vw; }
body {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color:var(--nacht);
  background:var(--crème);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:14px;
}
a { color:var(--spar); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ============== APP LAYOUTS ============== */

/* Public layout (auth-pages + landing): topbar + main + footer */
.public-layout { display:flex; flex-direction:column; min-height:100vh; }

header.topbar {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff;
  padding:16px 28px;
}
.topbar-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar nav { display:flex; gap:6px; align-items:center; }
.topbar nav a {
  color:rgba(255,255,255,0.85); padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:500;
}
.topbar nav a:hover { color:#fff; background:rgba(255,255,255,0.06); text-decoration:none; }
.topbar nav a.is-active,
.topbar nav a[aria-current="page"] { color:#fff; background:rgba(255,255,255,0.10); }
.topbar nav a.btn-cta { background:var(--slim); color:#fff; }
.topbar nav a.btn-cta:hover { background:var(--blad); color:var(--donker); }

/* Topbar Leveranciers-menu — knop met ▾ + dropdown-paneel daaronder. */
.topbar nav .nav-menu { position:relative; }
.topbar nav .nav-trigger {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; cursor:pointer;
  color:rgba(255,255,255,0.85); padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:500; font-family:inherit;
}
.topbar nav .nav-trigger:hover,
.topbar nav .nav-menu.is-open .nav-trigger { color:#fff; background:rgba(255,255,255,0.06); }
.topbar nav .nav-caret { transition:transform 0.15s; opacity:0.7; }
.topbar nav .nav-menu.is-open .nav-caret { transform:rotate(180deg); opacity:1; }
/* Panel default verborgen; alleen zichtbaar als parent .is-open heeft. De
   SPA-versie unmount via v-if dus is hier immuun voor; voor server-rendered
   Blade-pages is dit dé show/hide-mechaniek. */
.topbar nav .nav-menu .nav-panel,
.topbar nav .user-menu .nav-panel { display:none; }
.topbar nav .nav-menu.is-open .nav-panel,
.topbar nav .user-menu.is-open .nav-panel { display:flex; }
.topbar nav .nav-panel {
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 24px rgba(4,46,29,0.18);
  min-width:240px; padding:6px; z-index:50;
  flex-direction:column;
}
.topbar nav .nav-panel a {
  color:var(--donker); padding:8px 12px; border-radius:8px;
  font-size:13px; font-weight:500; text-decoration:none;
  background:transparent;
}
.topbar nav .nav-panel a:hover { background:var(--mist); color:var(--donker); }
.topbar nav .nav-panel hr {
  border:0; border-top:1px solid var(--line); margin:6px 4px;
}

/* User-menu — avatar-chip met dropdown voor logged-in state. Hergebruikt
   de generieke .nav-panel-styling; eigen .user-* classes voor specifiek
   item-rendering (header met naam/email, logout-knop). */
.topbar nav .user-menu { position:relative; }
.topbar nav .user-trigger {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; cursor:pointer; padding:4px 8px 4px 4px;
  border-radius:999px; color:rgba(255,255,255,0.85); font-family:inherit;
}
.topbar nav .user-trigger:hover,
.topbar nav .user-menu.is-open .user-trigger { background:rgba(255,255,255,0.06); color:#fff; }
.topbar nav .user-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--munt); color:var(--donker);
  font-size:11px; font-weight:600; letter-spacing:0;
}
.topbar nav .user-menu.is-open .nav-caret { transform:rotate(180deg); }

.topbar nav .user-panel { min-width:230px; }
.topbar nav .user-panel .user-header { padding:10px 12px 6px; }
.topbar nav .user-panel .user-name { font-size:13px; font-weight:600; color:var(--donker); line-height:1.2; }
.topbar nav .user-panel .user-email { font-size:11px; color:var(--steen); margin-top:2px; word-break:break-all; }
.topbar nav .user-panel .user-logout {
  display:block; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer;
  color:var(--rood, #D85A30); padding:8px 12px; border-radius:8px;
  font-size:13px; font-weight:500; font-family:inherit;
}
.topbar nav .user-panel .user-logout:hover { background:#fdecea; }

.logo { display:inline-flex; align-items:center; line-height:1; text-decoration:none; }
.logo:hover { text-decoration:none; }
.logo img { display:block; height:34px; width:auto; }

footer.site-footer {
  padding:18px 28px; border-top:1px solid var(--line);
  color:var(--steen); font-size:12px; background:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
footer.site-footer nav { display:flex; gap:14px; flex-wrap:wrap; }
footer.site-footer a { color:var(--steen); }
footer.site-footer a:hover { color:var(--spar); text-decoration:none; }

/* App layout (ingelogde pages): sidebar + main */
/* App-shell + fixed mini-footer. Footer staat fixed onderaan viewport
   (altijd zichtbaar), shell heeft padding-bottom om content-overlap te
   voorkomen. Sidebar past precies in viewport-minus-footer. */
:root { --mini-footer-h: 48px; }
.app-shell {
  min-height:100vh;
  padding-bottom:var(--mini-footer-h);
}
.app-layout { display:grid; grid-template-columns:232px minmax(0, 1fr); }
.sidebar-cell { background:#fff; border-right:1px solid var(--line); }
.sidebar {
  padding:18px 14px;
  position:sticky; top:0;
  /* viewport minus footer: sidebar staat altijd op dezelfde plek, geen
     layout-shift bij content-load. Op lange pages plakt 'ie aan top via
     sticky; user-foot zit altijd net boven de fixed footer. */
  height:calc(100vh - var(--mini-footer-h));
  display:flex; flex-direction:column; gap:18px;
  overflow-y:auto;
}
.sidebar-foot { margin-top:auto; }
.sidebar .logo { padding:6px 6px 12px; border-bottom:1px solid var(--line); }
.sidebar .logo img { height:32px; }

.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a, .sidebar-nav .nav-btn {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:9px;
  font-size:13px; font-weight:500; color:var(--donker);
  border:0; background:transparent; cursor:pointer; text-align:left;
}
.sidebar-nav a:hover, .sidebar-nav .nav-btn:hover { background:var(--mist); text-decoration:none; }
.sidebar-nav a.is-active, .sidebar-nav .nav-btn.is-active {
  background:var(--mist); color:var(--spar);
}
.sidebar-nav .nav-icon { width:18px; height:18px; flex-shrink:0; opacity:0.75; }
.sidebar-nav a.is-active .nav-icon { opacity:1; }

.sidebar-section { font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--steen); font-weight:500; padding:14px 10px 4px; }
.sidebar-nav .nav-icon { width:18px; height:18px; flex-shrink:0; opacity:0.85; color:var(--steen); }
.sidebar-nav a.is-active .nav-icon { opacity:1; color:var(--spar); }
.sidebar-nav a.is-disabled, .sidebar-nav button.nav-btn.is-disabled {
  color:var(--steen); opacity:0.55; cursor:not-allowed; pointer-events:none;
}
.sidebar-nav .nav-badge {
  margin-left:auto; background:var(--slim); color:#fff;
  font-size:10px; font-weight:500; padding:2px 7px; border-radius:999px;
  line-height:1.3;
}

/* Klikbare user-trigger onderaan de sidebar — opent een dropdown met
   Account / Admin / Uitloggen. Admin & Account horen niet als gewone nav-
   items (zijn user-/sessie-gerelateerd, niet werkruimte). */
.sidebar-foot {
  position:relative;
  padding:8px 0 0; border-top:1px solid var(--line);
}
.sidebar-user-trigger {
  width:100%; padding:8px 8px;
  display:grid; grid-template-columns:32px minmax(0, 1fr) auto;
  gap:10px; align-items:center;
  background:transparent; border:0; border-radius:8px;
  cursor:pointer; font-family:inherit; text-align:left;
}
.sidebar-user-trigger:hover { background:var(--mist); }
.sidebar-foot.is-open .sidebar-user-trigger { background:var(--mist); }
.sidebar-user-trigger .avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--slim), var(--spar));
  color:#fff; font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-user-trigger .meta { font-size:12px; line-height:1.3; min-width:0; }
.sidebar-user-trigger .meta strong {
  display:block; color:var(--donker); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px;
}
.sidebar-user-trigger .meta small {
  display:block; color:var(--steen);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11px;
}
.sidebar-user-trigger .chevron { color:var(--steen); transition:transform 0.15s; }
.sidebar-foot.is-open .chevron { transform:rotate(180deg); }

.sidebar-user-panel {
  position:absolute;
  bottom:calc(100% + 6px); left:8px; right:8px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(4,46,29,0.18);
  padding:6px; z-index:50;
  display:flex; flex-direction:column; gap:2px;
}
.sidebar-user-panel a {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px;
  color:var(--donker); font-size:13px; font-weight:500; text-decoration:none;
}
.sidebar-user-panel a:hover { background:var(--mist); text-decoration:none; }
.sidebar-user-panel hr { border:0; border-top:1px solid var(--line); margin:4px 2px; }
.sidebar-user-panel .user-logout {
  display:block; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer; font-family:inherit;
  color:var(--rood); padding:8px 10px; border-radius:6px;
  font-size:13px; font-weight:500;
}
.sidebar-user-panel .user-logout:hover { background:#fdecea; }

main.app-main { padding:20px 28px 40px; min-width:0; }

/* Radio-cards voor contract-type-keuze (Account → Energiecontract). 3 visuele
   tegels naast elkaar; native radio is gestyled-weg. */
.contract-type-row {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin-top:6px;
}
.contract-type-option {
  display:flex; flex-direction:column; gap:2px;
  padding:14px 14px;
  border:1px solid var(--line-2); border-radius:12px;
  cursor:pointer; background:#fff;
  transition:border-color 0.15s, background 0.15s;
}
.contract-type-option:hover { border-color:var(--slim); }
.contract-type-option.is-active {
  border-color:var(--slim); background:var(--mist);
  box-shadow:0 0 0 3px rgba(34,179,107,0.12);
}
.contract-type-option input[type="radio"] { display:none; }
.contract-type-option .cto-title {
  font-size:14px; font-weight:600; color:var(--donker);
}
.contract-type-option .cto-sub {
  font-size:11px; color:var(--steen); line-height:1.4;
}
@media (max-width:640px) {
  .contract-type-row { grid-template-columns:1fr; }
}

/* ============== ONBOARDING-WIZARD ==============
   Apart layout dat AppLayout (sidebar+main+footer) bypasses. Body krijgt
   .ob-mode-class wanneer /app/onboarding actief is. */
.ob {
  min-height:100vh;
  display:grid;
  grid-template-rows:auto auto 1fr;
  background:var(--crème);
}
.ob-top {
  padding:20px 32px;
  border-bottom:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.ob-top .logo img { height:28px; display:block; }
.ob-progress-info { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--steen); }
.ob-skip {
  background:transparent; border:0; color:var(--steen);
  font-size:13px; cursor:pointer; padding:6px 10px; border-radius:6px;
  font-family:inherit;
}
.ob-skip:hover { color:var(--nacht); background:var(--grijs); }

.stepper-wrap {
  background:#fff; padding:0 32px 18px;
  border-bottom:1px solid var(--line);
}
.ob-stepper {
  max-width:760px; margin:0 auto;
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
}
.step-pill {
  height:4px; border-radius:2px;
  background:var(--grijs);
  transition:background 0.4s;
}
.step-pill.done { background:var(--slim); }
.step-pill.current {
  background:linear-gradient(90deg, var(--slim) 0%, var(--blad) 100%);
  background-size:200% 100%;
  animation:ob-shimmer 2.5s ease-in-out infinite;
}
@keyframes ob-shimmer {
  0%   { background-position:-100% 0; }
  100% { background-position:100% 0; }
}
.step-meta {
  max-width:760px; margin:8px auto 0;
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--steen);
}
.step-meta strong { color:var(--nacht); font-weight:500; }

.ob-main {
  padding:40px 32px 60px;
  overflow-y:auto;
}
.ob-card { max-width:720px; margin:0 auto; }

.step-eyebrow {
  font-size:11px; text-transform:uppercase; letter-spacing:0.7px;
  color:var(--spar); font-weight:500; margin-bottom:8px;
}
.step-h {
  font-size:32px; font-weight:500;
  letter-spacing:-0.6px; margin:0 0 12px;
  line-height:1.2;
}
.step-sub {
  font-size:15px; color:var(--steen);
  line-height:1.6; margin:0 0 32px;
  max-width:560px;
}

.step-actions {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:32px; gap:8px; flex-wrap:wrap;
}
.step-actions-left, .step-actions-right { display:flex; gap:8px; }

/* Welkom-hero (stap 1) */
.welcome-hero {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff;
  padding:40px 36px;
  border-radius:18px;
  margin-bottom:24px;
  position:relative; overflow:hidden;
}
.welcome-hero::before {
  content:''; position:absolute;
  top:-100px; right:-100px;
  width:360px; height:360px;
  background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.welcome-eyebrow {
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--blad); font-weight:500; margin-bottom:10px;
  position:relative; z-index:2;
}
.welcome-h {
  font-size:30px; font-weight:500; line-height:1.2;
  letter-spacing:-0.5px; color:#fff; margin-bottom:12px;
  position:relative; z-index:2;
}
.welcome-sub {
  font-size:14px; color:var(--munt);
  max-width:460px; line-height:1.6; margin-bottom:24px;
  position:relative; z-index:2;
}
.welcome-stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  border-top:1px solid rgba(184,235,210,0.2);
  padding-top:20px; position:relative; z-index:2;
}
.ws-l { font-size:10px; color:var(--munt); text-transform:uppercase; letter-spacing:0.5px; }
.ws-v { font-size:22px; font-weight:500; color:#fff; margin-top:4px; letter-spacing:-0.4px; }

.welcome-list {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;
}
.welcome-item {
  display:flex; align-items:start; gap:12px;
  padding:16px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
}
.welcome-item-icon {
  width:32px; height:32px;
  background:var(--mist); color:var(--spar);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.welcome-item-icon svg { width:16px; height:16px; }
.welcome-item-h { font-size:13px; font-weight:500; }
.welcome-item-s { font-size:11px; color:var(--steen); margin-top:2px; line-height:1.5; }

/* Supplier-pick (stap 2) */
.ob-supplier-card {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin-bottom:16px;
  display:grid; grid-template-columns:56px 1fr auto;
  gap:16px; align-items:center;
  position:relative; cursor:pointer;
  transition:border-color 0.15s, background 0.15s;
}
.ob-supplier-card:hover { border-color:var(--line-2); }
.ob-supplier-card.selected {
  border-color:var(--slim); background:var(--mist);
  box-shadow:0 0 0 3px rgba(34,179,107,0.08);
}
.ob-supplier-logo {
  width:56px; height:56px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:500; color:#fff;
  background:var(--nacht);
}
.ob-supplier-name { font-size:15px; font-weight:500; }
.ob-supplier-meta { font-size:12px; color:var(--steen); margin-top:2px; }
.ob-supplier-rate { text-align:right; font-size:13px; }
.ob-supplier-rate-l { font-size:10px; color:var(--steen); text-transform:uppercase; letter-spacing:0.4px; }
.ob-supplier-rate-v { font-weight:500; color:var(--spar); margin-top:2px; }

.ob-supplier-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.ob-supplier-mini {
  display:grid; grid-template-columns:36px 1fr auto;
  gap:12px; align-items:center;
  padding:10px 14px;
  border:1px solid var(--line); border-radius:10px;
  cursor:pointer; transition:border-color 0.15s; background:#fff;
}
.ob-supplier-mini:hover { border-color:var(--line-2); }
.ob-supplier-mini.selected {
  border-color:var(--slim); background:var(--mist);
}
.ob-supplier-mini-logo {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; color:#fff;
  background:var(--nacht);
}
.ob-supplier-mini-name { font-size:13px; font-weight:500; }
.ob-supplier-mini-meta { font-size:11px; color:var(--steen); margin-top:1px; }
.ob-supplier-mini-rate { font-size:12px; color:var(--spar); font-weight:500; }

.ob-supplier-search {
  width:100%;
  padding:11px 14px 11px 40px;
  background:var(--crème); border:1px solid var(--line-2); border-radius:10px;
  color:var(--nacht); font-size:14px; margin-bottom:14px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%235F5E5A" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21 L16.65 16.65"/></svg>');
  background-repeat:no-repeat; background-position:14px center;
}

/* Device-pick (stap 5) */
.device-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
.device-pick {
  background:#fff; border:2px solid var(--line); border-radius:14px;
  padding:22px 20px; cursor:pointer; transition:all 0.15s;
  display:flex; flex-direction:column; gap:6px;
  text-align:left; font-family:inherit;
  position:relative;
}
.device-pick:hover { border-color:var(--line-2); }
.device-pick.selected {
  border-color:var(--slim); background:var(--mist);
}
.device-pick.selected::before {
  content:'✓'; position:absolute; top:14px; right:14px;
  width:24px; height:24px; border-radius:50%;
  background:var(--slim); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
}
.device-pick-icon {
  width:44px; height:44px; border-radius:11px;
  background:var(--mist); color:var(--spar);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.device-pick-icon svg { width:22px; height:22px; }
.device-pick-h { font-size:15px; font-weight:500; }
.device-pick-s { font-size:12px; color:var(--steen); line-height:1.5; }

/* Done-view (stap 6) */
.done-view { text-align:center; padding:24px 0; }
.done-icon {
  width:88px; height:88px;
  background:var(--mist); color:var(--spar);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.done-icon svg { width:44px; height:44px; }
.done-h {
  font-size:28px; font-weight:500;
  letter-spacing:-0.5px; margin:0 0 10px;
}
.done-s {
  font-size:15px; color:var(--steen); line-height:1.6;
  max-width:480px; margin:0 auto 28px;
}
.done-recap {
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:18px 22px;
  text-align:left; max-width:460px; margin:0 auto 24px;
}
.done-recap-h {
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--steen); margin-bottom:8px;
}
.done-recap-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; font-size:13px;
  border-top:1px solid var(--line);
}
.done-recap-row:first-of-type { border-top:0; }
.done-recap-check {
  width:20px; height:20px; flex-shrink:0;
  background:var(--mist); color:var(--spar);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.done-recap-check.skipped { background:var(--grijs); color:var(--steen); }
.done-recap-check svg { width:12px; height:12px; }

/* Mobile */
@media (max-width:720px) {
  .ob-top { padding:14px 18px; }
  .ob-main { padding:24px 18px 60px; }
  .stepper-wrap { padding:0 18px 14px; }
  .step-h { font-size:24px; }
  .welcome-hero { padding:28px 22px; }
  .welcome-h { font-size:24px; }
  .welcome-stats { grid-template-columns:1fr; gap:10px; padding-top:14px; }
  .welcome-list { grid-template-columns:1fr; }
  .device-grid { grid-template-columns:1fr; }
  .step-meta { font-size:10px; }
}

/* Compacte 1-regel mini-footer fixed onderaan viewport — altijd zichtbaar.
   Shell heeft padding-bottom om content-overlap te voorkomen. */
.app-mini-footer {
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:30;
  background:#fff; border-top:1px solid var(--line);
  padding:10px 28px;
  font-size:12px;
  height:var(--mini-footer-h);
}
.app-mini-footer .mini-inner {
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
}
.app-mini-footer nav { display:flex; gap:14px; flex-wrap:wrap; }
.app-mini-footer a { color:var(--steen); text-decoration:none; }
.app-mini-footer a:hover { color:var(--spar); text-decoration:none; }
.app-mini-footer .mini-meta { color:var(--steen); }
@media (max-width:760px) {
  .app-mini-footer { padding:10px 16px; font-size:11px; }
  .app-mini-footer .mini-inner { gap:8px; }
  .app-mini-footer nav { gap:10px; }
}
main.public-main { flex:1; padding:32px 28px; max-width:1200px; margin:0 auto; width:100%; }

/* Form-card — gecentreerde card voor login/register/forgot */
.form-card {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:28px 32px; width:100%; max-width:400px;
}

/* AUTH SPLIT-SCREEN LAYOUT (login/register/forgot/reset) */
.auth-split {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh;
}
.auth-split-left {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff;
  padding:32px 48px 28px;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.auth-split-left::before {
  content:''; position:absolute; top:-150px; right:-150px;
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(79,203,142,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.auth-split-right {
  background:#fff; padding:32px;
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto;
}
.auth-split-right .form-card {
  border:0; padding:0; box-shadow:none;
  max-width:380px; width:100%;
}

.auth-split-left .logo { margin-bottom:auto; }
.auth-split-left .logo img { height:34px; }

.auth-content { position:relative; z-index:2; max-width:480px; }
.auth-eyebrow {
  color:var(--blad);
  font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
  font-weight:500; margin-bottom:14px;
}
.auth-h {
  font-size:36px; font-weight:500; letter-spacing:-0.6px;
  line-height:1.15; color:#fff; margin-bottom:14px;
}
.auth-sub {
  font-size:15px; color:var(--munt); line-height:1.6;
  margin-bottom:28px;
}

/* Live-tarief card op het donkere paneel */
.live-tariff-card {
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(184,235,210,0.18);
  border-radius:12px;
  padding:14px 18px;
  max-width:420px;
}
.lt-eyebrow {
  font-size:10px; text-transform:uppercase; letter-spacing:0.8px;
  color:var(--blad); font-weight:500;
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.lt-eyebrow::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--blad); box-shadow:0 0 0 4px rgba(79,203,142,0.2);
}
.lt-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0;
  font-size:14px; color:var(--mist);
  border-top:1px solid rgba(184,235,210,0.1);
}
.lt-row:first-of-type { border-top:0; }
.lt-row strong { color:#fff; font-weight:500; }
.lt-row .lt-warn { color:var(--p-piek, #EF9F27); }

.auth-split-foot {
  margin-top:auto; padding-top:24px;
  display:flex; gap:18px; flex-wrap:wrap;
  font-size:11px; color:rgba(255,255,255,0.5);
  position:relative; z-index:2;
}
.auth-split-foot a { color:rgba(255,255,255,0.65); }
.auth-split-foot a:hover { color:#fff; text-decoration:none; }

@media (max-width:880px) {
  .auth-split { grid-template-columns:1fr; }
  .auth-split-left {
    padding:28px 24px 24px;
    min-height:auto;
  }
  .auth-split-left .logo { margin-bottom:18px; }
  .auth-h { font-size:24px; }
  .auth-sub { margin-bottom:18px; font-size:14px; }
  .auth-split-right { padding:32px 24px 48px; }
  .auth-split-foot { padding-top:14px; }
}

/* Onder 720px: het dark-pane neemt te veel ruimte voordat de user bij
   het formulier komt. We comprimeren tot een compacte 'live tarief'-strip
   bovenaan en verbergen de heading + live-tariff-card body — de user
   ziet het login-formulier dan meteen in beeld. */
@media (max-width:720px) {
  .auth-split-left {
    padding:14px 18px;
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:12px;
  }
  .auth-split-left::before { display:none; }
  .auth-split-left .logo { margin:0; flex-shrink:0; }
  .auth-split-left .logo img { height:24px; }
  .auth-eyebrow, .auth-h, .auth-sub, .live-tariff-card, .auth-split-foot {
    display:none;
  }
  .auth-split-right { padding:24px 18px 40px; }
}

/* ============== TYPOGRAFIE ============== */

.page-title { font-size:24px; font-weight:500; letter-spacing:-0.5px; color:var(--donker); margin-bottom:6px; }
.page-sub { color:var(--steen); font-size:13px; margin-bottom:22px; }

.form-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--steen); font-weight:500; margin-bottom:6px; }
.form-title { font-size:22px; font-weight:500; letter-spacing:-0.4px; color:var(--donker); margin-bottom:6px; }
.form-sub { font-size:13px; color:var(--steen); margin-bottom:18px; line-height:1.55; }
.form-bottom { font-size:13px; color:var(--steen); text-align:center; margin-top:18px; }

/* ============== CARDS ============== */

.card {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px;
  margin-bottom:14px;
}
.card .section-h { font-size:15px; font-weight:500; color:var(--donker); margin-bottom:4px; }
.card .section-s { font-size:12px; color:var(--steen); margin-bottom:12px; line-height:1.5; }

.form-grid {
  display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px;
  margin-bottom:18px;
}
.form-grid > .descr .section-h { font-size:14px; font-weight:500; color:var(--donker); }
.form-grid > .descr .section-s { font-size:12px; color:var(--steen); margin-top:4px; line-height:1.5; }

@media (max-width:780px) {
  .form-grid { grid-template-columns:1fr; gap:8px; }
}

/* ============== FORM FIELDS ============== */

.field { display:block; margin-bottom:14px; }
/* Twee-kolom-grid voor gerelateerde velden (Voornaam+Achternaam, Taal+Tijdzone). */
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row .field { margin-bottom:14px; }
@media (max-width:640px) { .field-row { grid-template-columns:1fr; gap:0; } }
/* Footer met Annuleer + Opslaan voor formulieren met dirty-state. */
.form-actions {
  display:flex; justify-content:flex-end; gap:8px;
  margin-top:8px; padding-top:14px; border-top:1px solid var(--line);
}

/* Inlog-historie events op Beveiliging-tab. */
.login-history { display:flex; flex-direction:column; }
.login-event {
  display:grid; grid-template-columns:36px 1fr auto; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.login-event:last-child { border-bottom:0; }
.le-icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.le-icon.le-success, .le-icon.le-magic_link { background:var(--mist); color:var(--spar); }
.le-icon.le-failed, .le-icon.le-pending { background:var(--warn-bg); color:var(--duur); }
.le-title { font-size:14px; font-weight:600; color:var(--donker); }
.le-meta { font-size:12px; color:var(--steen); margin-top:2px; }
.le-badge { font-size:12px; color:var(--steen); white-space:nowrap; }
.le-badge.tone-warn { color:var(--duur); font-weight:500; }
.le-badge.tone-muted { color:var(--steen); }
.field-label {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:6px;
}
.field-label label { font-size:12px; font-weight:500; color:var(--donker); }
.field-label .help-link { font-size:12px; color:var(--spar); }

.field-hint { font-size:12px; color:var(--steen); margin-top:5px; line-height:1.4; }

.input-wrap { position:relative; }
.input, select.input {
  width:100%;
  font:inherit; font-size:14px;
  padding:10px 13px;
  background:var(--crème);
  border:1px solid var(--line-2);
  border-radius:9px;
  color:var(--nacht);
  outline:none; transition:all 0.15s;
}
.input:focus, select.input:focus {
  background:#fff; border-color:var(--slim);
  box-shadow:0 0 0 3px rgba(34,179,107,0.15);
}
.input::placeholder { color:var(--steen); opacity:0.7; }

.input.has-icon-left { padding-left:36px; }
.input.has-icon-right { padding-right:36px; }
.input-icon {
  position:absolute; top:50%; left:12px; transform:translateY(-50%);
  width:16px; height:16px; color:var(--steen); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.input-toggle {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:28px; height:28px; border:0; background:transparent; cursor:pointer;
  color:var(--steen); display:flex; align-items:center; justify-content:center;
  border-radius:6px;
}
.input-toggle:hover { background:var(--grijs); color:var(--donker); }

select.input { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F5E5A' stroke-width='1.5'><path d='m4 6 4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }

/* Manifest-driven koppel-form (resources/js/components/ConnectFlow.vue) */
.connect-form { display:flex; flex-direction:column; gap:10px; }
.connect-field { display:flex; flex-direction:column; gap:4px; }
.connect-help { font-size:11px; color:var(--steen); line-height:1.4; }
.connect-help a { color:var(--spar); font-weight:500; }

/* DeviceCard — generieke card voor vehicles/batteries/chargers (resources/js/components/DeviceCard.vue) */
.device-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.device-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.device-name { font-size:15px; font-weight:600; color:var(--donker); }
.device-sub { font-size:12px; color:var(--steen); margin-top:2px; }
.device-soc strong { font-size:32px; font-weight:500; color:var(--donker); letter-spacing:-1px; line-height:1; }
.device-soc small { font-size:14px; color:var(--steen); margin-left:2px; }
.device-soc-bar { height:8px; background:var(--grijs); border-radius:4px; overflow:hidden; margin-bottom:14px; }
.device-soc-fill { height:100%; background:linear-gradient(90deg, var(--munt), var(--slim)); transition:width 0.3s; }
.device-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 14px; }
.device-stat { display:flex; flex-direction:column; gap:2px; font-size:12px; }
.device-stat-l { color:var(--steen); }
.device-stat strong { color:var(--donker); font-weight:500; font-size:13px; }
.device-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

.device-group { margin-top:24px; }
.device-group:first-of-type { margin-top:14px; }
.device-group-h { font-size:14px; font-weight:600; color:var(--donker); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.device-group-emoji { font-size:18px; }
.device-grid-wrap { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }

/* Checkbox */
.check-row {
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--donker); cursor:pointer;
  user-select:none;
}
.check-row input[type=checkbox] { margin-top:2px; accent-color:var(--slim); cursor:pointer; }
.check-row a { color:var(--spar); }

/* ============== BUTTONS ============== */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:9px;
  font:inherit; font-size:13px; font-weight:500;
  border:0; cursor:pointer; text-decoration:none;
  transition:all 0.15s;
  line-height:1.3;
}
.btn:hover { text-decoration:none; }
.btn[disabled], .btn.is-loading { opacity:0.6; cursor:not-allowed; }
/* Keyboard-focus zichtbaar voor knoppen, links en tabs zodat keyboard-only
   gebruikers (en screen-reader-users) bijhouden waar focus zit. */
.btn:focus-visible, .tab-nav-item:focus-visible, .sidebar-nav a:focus-visible,
.sidebar-nav .nav-btn:focus-visible, .topbar nav a:focus-visible,
.btn-link:focus-visible {
  outline:2px solid var(--slim);
  outline-offset:2px;
}
.btn-primary { background:var(--slim); color:#fff; }
.btn-primary:hover { background:var(--spar); }
.btn-outline { background:#fff; color:var(--nacht); border:1px solid var(--line-2); }
.btn-outline:hover { border-color:var(--slim); color:var(--spar); }
.btn-danger { background:#fff; color:var(--rood); border:1px solid #F09595; }
.btn-danger:hover { background:var(--rood-bg); }
.btn-link { background:transparent; color:var(--spar); padding:4px 0; font-weight:500; }
.btn-link:hover { background:transparent; text-decoration:underline; }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ============== ALERTS ============== */

.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:10px; margin-bottom:14px;
  font-size:13px; line-height:1.5;
  border:1px solid;
}
.alert.info { background:var(--info-bg); border-color:#B5D4F4; color:#052749; }
.alert.warn { background:var(--warn-bg); border-color:#FAC775; color:var(--duur); }
.alert.ok   { background:var(--mist); border-color:var(--munt); color:var(--spar); }
.alert.err  { background:var(--rood-bg); border-color:#E7B5B5; color:var(--rood); }

/* ============== PILLS / BADGES ============== */

.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:500;
}
.pill.ok    { background:var(--mist); color:var(--spar); }
.pill.info  { background:var(--info-bg); color:var(--info); }
.pill.warn  { background:var(--warn-bg); color:var(--duur); }
.pill.err   { background:var(--rood-bg); color:var(--rood); }
.pill.muted { background:var(--grijs); color:var(--steen); }
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============== SECTION-NAV (segmented tabs binnen forms) ============== */

.section-nav {
  display:flex; gap:2px; padding:4px; background:var(--grijs); border-radius:11px;
  margin-bottom:18px; flex-wrap:wrap;
}
.section-nav-item {
  flex:1; min-width:90px;
  font:inherit; cursor:pointer; border:0;
  background:transparent; padding:8px 10px; border-radius:8px;
  font-size:12px; font-weight:500; color:var(--steen);
  transition:all 0.15s; text-decoration:none; text-align:center;
}
.section-nav-item:hover { color:var(--donker); }
.section-nav-item.is-active {
  background:#fff; color:var(--donker);
  box-shadow:0 1px 3px rgba(4,46,29,0.06);
}

/* ============== TAB-NAV (underlined tabs voor account-pagina) ============== */

.tab-nav {
  display:flex; gap:0;
  border-bottom:1px solid var(--line);
  margin-bottom:24px; overflow-x:auto;
}
.tab-nav-item {
  font:inherit; cursor:pointer; border:0; background:transparent;
  padding:10px 16px; font-size:13px; font-weight:500; color:var(--steen);
  white-space:nowrap; text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all 0.15s;
}
.tab-nav-item:hover { color:var(--nacht); text-decoration:none; }
.tab-nav-item.is-active { color:var(--spar); border-bottom-color:var(--slim); }
.tab-nav-item.is-disabled { color:var(--steen); opacity:0.45; cursor:not-allowed; pointer-events:none; }

/* ============== ROW-LIST (sessions, login-history) ============== */

.row-list { display:flex; flex-direction:column; }
.row-item {
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
  align-items:center;
}
.row-item:last-child { border-bottom:0; }
.row-icon {
  width:36px; height:36px; border-radius:9px;
  background:var(--grijs); color:var(--steen);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.row-icon.icon-ok { background:var(--mist); color:var(--spar); }
.row-icon.icon-warn { background:var(--warn-bg); color:var(--duur); }
.row-name { font-size:13px; font-weight:500; color:var(--donker); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row-meta { font-size:12px; color:var(--steen); margin-top:2px; line-height:1.45; }
.row-action { font-size:12px; color:var(--steen); }

/* ============== PROFILE HEADER ============== */

.profile-head {
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--line);
  align-items:center;
}
.profile-avatar {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--slim), var(--spar));
  color:#fff; font-weight:600; font-size:18px;
  display:inline-flex; align-items:center; justify-content:center;
}
.profile-meta-h { font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--donker); }
.profile-meta-s { font-size:12px; color:var(--steen); margin-top:2px; }
.profile-meta-pills { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }

/* ============== PASSWORD STRENGTH ============== */

.pw-strength { margin:8px 0 4px; }
.pw-bar { display:flex; gap:4px; height:4px; margin-bottom:6px; }
.pw-bar-seg { flex:1; background:var(--line-2); border-radius:2px; transition:background 0.2s; }
.pw-bar.s1 .pw-bar-seg:nth-child(-n+1) { background:var(--rood); }
.pw-bar.s2 .pw-bar-seg:nth-child(-n+2) { background:var(--duur); }
.pw-bar.s3 .pw-bar-seg:nth-child(-n+3) { background:var(--blad); }
.pw-bar.s4 .pw-bar-seg { background:var(--slim); }
.pw-label { font-size:11px; color:var(--steen); }
.pw-label strong { color:var(--donker); font-weight:500; }
.pw-checks {
  display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
  margin-top:8px; font-size:11px; color:var(--steen);
}
.pw-check { display:inline-flex; align-items:center; gap:5px; }
.pw-check svg { width:13px; height:13px; flex-shrink:0; }
.pw-check.is-ok { color:var(--spar); }
.pw-check.is-ok svg { color:var(--slim); }
@media (max-width:480px) { .pw-checks { grid-template-columns:1fr; } }

/* Divider met "of" tussen primary auth en alternative */
.divider {
  display:flex; align-items:center; gap:10px;
  margin:18px 0; color:var(--steen);
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px; background:var(--line);
}

/* Auth-success confirmation state (forgot-sent) */
.auth-success {
  text-align:center; padding:8px 0;
}
.auth-success-icon {
  width:64px; height:64px; border-radius:16px;
  background:var(--mist); color:var(--spar);
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.auth-success-icon svg { width:32px; height:32px; }
.auth-success h2 {
  font-size:22px; font-weight:500; letter-spacing:-0.3px;
  color:var(--donker); margin-bottom:8px;
}
.auth-success p {
  font-size:14px; color:var(--steen); line-height:1.55;
  max-width:340px; margin:0 auto 18px;
}

/* ============== QR + BACKUP CODES ============== */

.qr-block {
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:18px; text-align:center;
}
.qr-block img { max-width:200px; height:auto; display:block; margin:0 auto 10px; }

.code-block {
  background:var(--grijs); padding:9px 12px; border-radius:7px;
  font-family:ui-monospace, 'SF Mono', monospace;
  font-size:12px; user-select:all; word-break:break-all;
  text-align:center; color:var(--donker);
}

.backup-codes {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;
  background:var(--mist); padding:14px; border-radius:10px;
  font-family:ui-monospace, 'SF Mono', monospace;
  font-size:13px; margin:10px 0;
  border:1px solid var(--munt);
  color:var(--donker);
}
.backup-codes div { padding:4px 6px; user-select:all; }

/* ============== VERBRUIK & KOSTEN ============== */

/* Insight callout */
.insight {
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  background:var(--mist); border:1px solid var(--munt); border-radius:14px;
  padding:18px 22px; margin-bottom:14px; align-items:flex-start;
}
.insight-icon {
  width:42px; height:42px; border-radius:10px;
  background:var(--slim); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.insight-title { font-size:14px; font-weight:500; color:var(--donker); margin-bottom:4px; }
.insight-body { font-size:13px; color:var(--spar); line-height:1.55; }
.insight-body strong { color:var(--donker); }

/* Period-tabs (top-right action) */
.period-controls {
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.period-tabs {
  display:flex; gap:2px; padding:3px; background:var(--grijs); border-radius:9px;
}
.period-tabs button {
  font:inherit; cursor:pointer; border:0; background:transparent;
  padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:500; color:var(--steen);
}
.period-tabs button.is-active {
  background:#fff; color:var(--donker);
  box-shadow:0 1px 3px rgba(4,46,29,0.06);
}
.period-nav {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--steen);
}
.period-nav-btn {
  font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff;
  width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; color:var(--donker);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.period-nav-btn:hover:not(:disabled) { background:var(--mist); border-color:var(--munt); }
.period-nav-btn:disabled { opacity:0.4; cursor:not-allowed; }
.period-nav-label { min-width:140px; text-align:center; font-weight:500; color:var(--donker); }

/* Day chart-bars (verbruik per dag) */
.day-chart {
  position:relative; height:200px;
  margin:14px 0 4px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:8px;
}
.day-chart.has-right-axis { grid-template-columns:38px 1fr 52px; }
.day-chart-y-right {
  position:relative; padding:6px 0;
}
.day-chart-y-right span {
  font-size:10px; color:var(--duur); text-align:left; padding-left:6px;
  font-variant-numeric:tabular-nums;
}
.day-chart-x.has-right-axis { grid-template-columns:38px 1fr 52px; }
.day-chart-y { display:flex; flex-direction:column-reverse; justify-content:space-between; padding:6px 0; }
.day-chart-y span { font-size:10px; color:var(--steen); text-align:right; padding-right:6px; }
.day-chart-bars {
  position:relative;
  display:grid; gap:2px;
  align-items:stretch;
  border-bottom:1px solid var(--line-2);
  padding:2px 2px 0;
}
.day-chart-bar-lane { position:relative; min-width:0; cursor:pointer; height:100%; }
.day-chart-bar {
  position:absolute; left:0; right:0;
  background:var(--blad);
  border-radius:2px 2px 0 0;
  min-height:1px;
  transition:opacity 0.15s;
}
.day-chart-bar.now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; }
.day-chart-bar.below-zero { border-radius:0 0 2px 2px; }
.day-chart-bar-lane:hover .day-chart-bar { opacity:0.75; }
/* Paired bars: vorig jaar (lichtgroen, links) + dit jaar (donker, rechts).
   Vue zet --bar-bottom + --bar-height per bar; alleen die twee CSS-vars
   herrekenen per data-update. Inline-style writes bij 168 bars zijn anders
   168×2 properties = veel re-render. */
.day-chart-bar-lane.paired .day-bar-prev,
.day-chart-bar-lane.paired .day-bar-current {
  position:absolute; border-radius:2px 2px 0 0;
  min-height:1px; transition:opacity 0.15s;
  bottom:var(--bar-bottom); height:var(--bar-height);
}
.day-chart-bar-lane.paired .day-bar-prev { background:var(--munt); left:5%; right:52%; }
.day-chart-bar-lane.paired .day-bar-current { background:var(--blad); left:52%; right:5%; }
.day-chart-bar-lane.paired .day-bar-current.cost { left:8%; right:8%; }
.day-chart-bar-lane.paired .day-bar-current.now { background:var(--spar); }
.day-chart-bar-lane.paired .day-bar-current.below-zero {
  background:var(--neg); border-radius:0 0 2px 2px;
}
.day-chart-bar-lane.paired:hover .day-bar-prev,
.day-chart-bar-lane.paired:hover .day-bar-current { opacity:0.75; }
/* Cost-overlay-lijn (oranje) over de hele chart. */
.day-chart-cost-line {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; overflow:visible;
  grid-column:1 / -1; grid-row:1;
}
.day-chart-cost-line polyline {
  fill:none; stroke:var(--duur); stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.day-chart-cost-line .cost-seg {
  stroke:var(--duur); stroke-width:3;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.day-chart-cost-line .cost-zero {
  stroke:var(--duur); stroke-width:0.5; stroke-dasharray:2,2;
  opacity:0.5; vector-effect:non-scaling-stroke;
}
/* X-axis-labels matchen 1-op-1 met bar-lanes. */
.day-chart-x-labels-paired {
  display:grid; padding:0 2px;
  font-size:10px; color:var(--steen);
}
.day-chart-x-labels-paired span { text-align:center; min-width:0; white-space:nowrap; overflow:hidden; }
/* kWh / € / Beide-toggle. */
.chart-mode-toggle {
  display:inline-flex; gap:1px; padding:2px;
  background:var(--grijs); border-radius:8px;
}
.chart-mode-toggle button {
  font:inherit; cursor:pointer; border:0; background:transparent;
  padding:5px 12px; border-radius:6px;
  font-size:12px; font-weight:500; color:var(--steen);
}
.chart-mode-toggle button.is-active { background:#fff; color:var(--donker); box-shadow:0 1px 2px rgba(4,46,29,0.08); }
.chart-legend .legend-line {
  display:inline-block; width:14px; height:2px;
  background:var(--duur); margin-right:2px;
  vertical-align:middle;
}
.day-chart .zero-line {
  position:absolute; left:0; right:0;
  height:1px; background:rgba(4,46,29,0.35);
  pointer-events:none; z-index:2;
}
.day-chart-x {
  display:grid; grid-template-columns:38px 1fr; gap:8px;
  font-size:10px; color:var(--steen); margin-top:6px;
}
.day-chart-x-labels { display:grid; grid-template-columns:repeat(6, 1fr); padding:0 2px; }

/* SOLAR-CARD — Mijn-huis Zonnepanelen-card met 12-mnd-chart. */
.solar-card .card-head-icon .ico {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.solar-yearly { text-align:left; padding:8px 0 14px; }
.solar-yearly-value { font-size:32px; font-weight:600; color:var(--duur); letter-spacing:-0.5px; line-height:1; }
.solar-yearly-unit { font-size:14px; font-weight:500; color:var(--steen); margin-left:2px; }
.solar-yearly-sub { font-size:12px; color:var(--steen); margin-top:4px; }
.solar-chart { padding:6px 0; }
.solar-chart-bars {
  display:grid; grid-template-columns:repeat(12, 1fr); gap:4px;
  height:64px;
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.solar-bar-lane { display:flex; align-items:flex-end; height:100%; }
.solar-bar {
  width:100%; background:var(--solar);
  border-radius:3px 3px 0 0; min-height:2px;
  transition:opacity 0.15s;
}
.solar-bar.is-future { background:var(--solar-soft); }
.solar-bar.is-current { background:var(--duur); }
.solar-bar-lane:hover .solar-bar { opacity:0.75; }
.solar-chart-labels {
  display:grid; grid-template-columns:repeat(12, 1fr); gap:4px;
  margin-top:4px; font-size:10px; color:var(--steen); text-align:center;
}
.solar-footer {
  display:flex; gap:18px; flex-wrap:wrap;
  padding:12px 0 0;
  margin-top:10px; border-top:1px solid var(--line);
  font-size:12px; color:var(--steen);
}
.solar-footer strong { color:var(--donker); font-weight:600; }

/* Mini-bar-chart in admin-userlist — PV (boven) + P1 (onder) per dag. */
.admin-flow-chart {
  display:grid; grid-template-columns:repeat(14, 1fr); gap:2px;
  height:60px; border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.admin-flow-bar {
  position:relative; cursor:help;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.admin-flow-pv {
  background:var(--solar); border-radius:2px 2px 0 0;
  min-height:1px; opacity:0.85; margin-bottom:1px;
}
.admin-flow-p1 {
  background:var(--blad); border-radius:2px 2px 0 0;
  min-height:1px;
}
.admin-flow-bar:hover { opacity:0.7; }

/* Impersonation-banner — verschijnt voor admin die als andere user inlogt. */
.impersonation-banner {
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:10px 18px;
  background:var(--paars); color:#fff;
  font-size:13px;
  border-radius:0 0 12px 12px;
  margin:-28px -28px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.impersonation-banner strong { font-weight:600; }
.impersonation-banner .btn { background:#fff; color:var(--paars); border-color:#fff; }
.impersonation-banner .btn:hover { background:rgba(255,255,255,0.85); }

/* Auto-fill-banner bovenaan Account/Woning — trigger detectie uit koppelingen. */
.auto-fill-banner {
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:12px 16px;
  background:var(--mist); border:1px solid var(--munt); border-radius:11px;
  margin-bottom:14px;
}

/* SUPPLIER-CARD — Mijn-huis Energieleverancier-card met logo-tile. */
.supplier-card { padding-bottom:0; }
.supplier-head {
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  gap:14px; align-items:center; margin-bottom:14px;
}
.supplier-logo {
  width:46px; height:46px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
  letter-spacing:-0.3px; flex-shrink:0;
  text-transform:uppercase;
}
.supplier-meta h3 { font-size:17px; font-weight:600; color:var(--donker); margin:0; display:flex; align-items:center; flex-wrap:wrap; }
.supplier-meta .sub { font-size:12px; color:var(--steen); margin-top:3px; }
.supplier-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
@media (max-width:640px) {
  .supplier-head { grid-template-columns:auto 1fr; gap:10px; }
  .supplier-actions { grid-column:1 / -1; justify-content:flex-end; margin-top:6px; }
}
.supplier-highlight {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; margin:0 -2px 12px;
  background:var(--mist); border-radius:9px;
}
.supplier-highlight .hl-label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--spar); font-weight:500; }
.supplier-highlight .hl-value { font-size:18px; font-weight:600; color:var(--donker); letter-spacing:-0.3px; }
.supplier-highlight .hl-sub { font-size:12px; color:var(--steen); margin-left:3px; font-weight:400; letter-spacing:0; }

/* INTEGRATIES-PAGE — categorie-secties met gekleurde kop-iconen. */
.integ-cat { margin-bottom:24px; }
.integ-cat-head {
  display:flex; align-items:center; gap:12px;
  margin-bottom:10px; padding:0 4px;
}
.integ-cat-ico {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.integ-cat-head h2 { font-size:15px; font-weight:600; color:var(--donker); margin:0; }
.integ-cat-head p { font-size:12px; color:var(--steen); margin:2px 0 0; }

/* Compacte legenda boven charts (verbruik/productie/teruglevering). */
.chart-legend {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--steen);
  flex-wrap:wrap;
}
.chart-legend > span:not(.legend-dot) { margin-right:8px; }
.legend-dot { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* Device breakdown (donut + list) */
.donut-wrap {
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:14px 0;
}
.donut-svg { width:160px; height:160px; transform:rotate(-90deg); }
.donut-center {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.donut-center strong { font-size:28px; font-weight:500; color:var(--donker); letter-spacing:-0.5px; line-height:1; }
.donut-center small { font-size:11px; color:var(--steen); margin-top:2px; }

.device-row-bd {
  display:grid; grid-template-columns:14px 1fr auto auto; gap:10px;
  padding:9px 0; align-items:center;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.device-row-bd:last-child { border-bottom:0; }
.device-row-bd .swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.device-row-bd .name { color:var(--donker); }
.device-row-bd .name small { display:block; color:var(--steen); font-size:11px; margin-top:1px; }
.device-row-bd .kwh { color:var(--donker); font-variant-numeric:tabular-nums; }
.device-row-bd .pct { color:var(--steen); min-width:36px; text-align:right; font-variant-numeric:tabular-nums; }

/* Benchmark bar */
.benchmark-bar-wrap {
  position:relative; height:28px; border-radius:7px;
  overflow:hidden; background:var(--grijs);
  margin:14px 0 8px;
}
.benchmark-zone { position:absolute; top:0; bottom:0; }
.benchmark-zone.low  { left:0; width:33.3%; background:rgba(34,179,107,0.15); }
.benchmark-zone.avg  { left:33.3%; width:33.4%; background:rgba(186,117,23,0.18); }
.benchmark-zone.high { left:66.7%; width:33.3%; background:rgba(163,45,45,0.15); }
.benchmark-zone-label {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--steen); font-weight:500;
}
.benchmark-zone.low .benchmark-zone-label { left:8px; }
.benchmark-zone.avg .benchmark-zone-label { left:50%; transform:translate(-50%, -50%); }
.benchmark-zone.high .benchmark-zone-label { right:8px; }
.benchmark-scale {
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--steen); margin-top:4px;
}
.benchmark-stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.bs-l { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--steen); font-weight:500; }
.bs-v { font-size:18px; font-weight:500; color:var(--donker); margin-top:3px; letter-spacing:-0.3px; }

/* Month table */
.month-table { width:100%; border-collapse:collapse; font-size:13px; }
.month-table th {
  font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--steen); font-weight:500;
  padding:10px 12px; text-align:left;
  background:var(--grijs); border-bottom:1px solid var(--line-2);
}
.month-table td {
  padding:11px 12px; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.month-table tr.is-now { background:var(--mist); }
.month-table tr.is-now td { font-weight:500; color:var(--donker); }
.month-table .month-name { font-weight:500; color:var(--donker); }
.month-table .month-name .yr { color:var(--steen); font-size:11px; font-weight:400; margin-left:4px; }
.month-table .num { text-align:right; }
/* Maand-vs-vorige-maand-pijltje naast de Verbruik-cel. Down = verbruik
   gedaald = goed (groen); up = gestegen = waarschuwing (oranje-ish). */
.month-table .mo-trend { font-size:11px; font-weight:500; margin-left:6px; letter-spacing:0; }
.month-table .mo-trend.is-down { color:var(--slim); }
.month-table .mo-trend.is-up { color:var(--steen); }
.trend-pill {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:500;
}
.trend-pill.down { background:var(--mist); color:var(--spar); }
.trend-pill.up { background:var(--rood-bg); color:var(--rood); }
.trend-pill.neutral { background:var(--grijs); color:var(--steen); }

/* Verbruik responsive */
@media (max-width:1100px) {
  .three-two-col { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .month-table .col-hide-mobile { display:none; }
  .day-chart { height:160px; }
}

/* ============== DASHBOARD COMBO-CHART (verbruik + prijs) ============== */

.combo-chart {
  display:grid; grid-template-columns:34px 1fr 38px;
  align-items:stretch; height:240px; margin:14px 0 6px;
  position:relative;
}
.ca-y { display:flex; flex-direction:column-reverse; justify-content:space-between; padding:6px 0; }
.ca-y-l { text-align:right; padding-right:6px; }
.ca-y-r { text-align:left; padding-left:6px; }
.ca-y span { font-size:10px; color:var(--steen); line-height:1; }
.ca-y span small { display:block; color:var(--munt); margin-top:1px; }
.ca-bars {
  position:relative;
  display:grid; grid-template-columns:repeat(24, 1fr);
  align-items:stretch; gap:3px;
  border-bottom:1px solid var(--line-2);
  padding:0 2px;
}
.ca-bar-stack {
  position:relative; min-width:0; height:100%;
}
.ca-bar {
  position:absolute; left:0; right:0;
  min-height:1px;
  transition:opacity 0.15s;
}
.ca-bar.import { background:var(--blad); border-radius:3px 3px 0 0; }
.ca-bar.export { background:var(--zon, #F0997B); border-radius:0 0 3px 3px; }
/* Eigen-zon-verbruik onderaan de stack — flat top als er net-import op
   gestackt wordt, anders zelf ook rounded top. */
.ca-bar.solar { background:var(--solar-soft); border-top:1px solid var(--solar); border-radius:3px 3px 0 0; }
.ca-bar-stack:has(.ca-bar.import) .ca-bar.solar { border-radius:0; }
.ca-bar-stack:hover .ca-bar { opacity:0.75; }
.ca-bar-stack.is-now .ca-bar.import { background:var(--slim); }
.combo-chart .zero-line {
  position:absolute; left:0; right:0;
  height:1px; background:rgba(4,46,29,0.35);
  pointer-events:none; z-index:2;
}
.ca-line-svg {
  position:absolute; inset:0;
  pointer-events:none;
  width:100%; height:100%;
}
.ca-line-svg polyline,
.ca-line-svg path {
  fill:none; stroke:var(--duur); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ca-now-line {
  position:absolute; top:0; bottom:0;
  border-left:2px dashed var(--donker);
  pointer-events:none;
}
.ca-now-line::before {
  content:'NU ' attr(data-time);
  position:absolute; top:-22px; left:-26px;
  background:var(--donker); color:#fff;
  font-size:10px; font-weight:600; letter-spacing:0.3px;
  padding:3px 7px; border-radius:5px;
  white-space:nowrap;
}
.ca-x-axis {
  display:grid; grid-template-columns:34px 1fr 38px; gap:0;
  font-size:10px; color:var(--steen); margin-top:4px;
}
.ca-x-labels { display:grid; grid-template-columns:repeat(8, 1fr); padding:0 2px; }
.ca-x-labels span { text-align:left; }
.combo-legend {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-size:11px; color:var(--steen);
}
.combo-legend-swatch {
  display:inline-flex; align-items:center; gap:5px;
}
.combo-legend-swatch::before {
  content:''; width:14px; height:6px; border-radius:2px;
  display:inline-block;
}
.combo-legend-swatch.kw::before { background:var(--blad); }
.combo-legend-swatch.kw-export::before { background:var(--zon, #F0997B); }
.combo-legend-swatch.solar::before { background:var(--solar); }
.combo-legend-swatch.eur::before { background:var(--duur); height:2px; }

/* APPARATEN IN HUIS (placeholder cards) */
.device-list { display:flex; flex-direction:column; }
.device-row {
  display:grid; grid-template-columns:36px 1fr auto; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line); align-items:center;
}
.device-row:last-child { border-bottom:0; }
.device-row.is-active { background:var(--mist); margin:0 -16px; padding-left:16px; padding-right:16px; border-radius:9px; border-bottom-color:transparent; }
.device-row .ico {
  width:36px; height:36px; border-radius:9px;
  background:var(--mist); color:var(--spar);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.device-row.is-active .ico { background:var(--slim); color:#fff; }
.device-row.muted .ico { background:var(--grijs); color:var(--steen); }
.device-row .name { font-size:13px; font-weight:500; color:var(--donker); }
.device-row .name small { display:block; font-weight:400; color:var(--steen); font-size:11px; margin-top:1px; }
.device-row .power { font-size:13px; font-weight:500; color:var(--donker); }

.add-device-row {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; padding:14px;
  border:1.5px dashed var(--line-2); border-radius:11px;
  font-size:13px; color:var(--spar); cursor:pointer;
}
.add-device-row:hover { background:var(--mist); border-color:var(--munt); }

/* MONTHLY-GRID (Deze maand-card) */
.month-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-bottom:14px;
}
.month-cell .mo-label { font-size:11px; color:var(--steen); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.month-cell .mo-value { font-size:22px; font-weight:500; color:var(--donker); margin-top:3px; letter-spacing:-0.3px; }
.month-cell .mo-value.green { color:var(--spar); }
.month-cell .mo-sub { font-size:11px; color:var(--steen); margin-top:2px; }
.month-cell.solar { background:#FFFBEB; border-radius:8px; padding:10px; border:1px solid var(--solar-soft); }
.month-cell.solar .mo-label { color:var(--duur); }

/* SLIM-SCORE RING */
.score-ring {
  width:120px; height:120px; margin:8px auto 14px;
  position:relative;
}
.score-ring svg { transform:rotate(-90deg); }
.score-ring-bg { fill:none; stroke:var(--mist); stroke-width:10; }
.score-ring-fill { fill:none; stroke:var(--slim); stroke-width:10; stroke-linecap:round; transition:stroke-dasharray 0.4s; }
.score-ring-text {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring-text strong { font-size:28px; font-weight:500; color:var(--donker); letter-spacing:-0.5px; }
.score-ring-text small { font-size:11px; color:var(--spar); font-weight:500; }
.score-stats { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.score-stat { display:flex; justify-content:space-between; }
.score-stat .v.good { color:var(--spar); font-weight:500; }
.score-stat .v.warn { color:var(--duur); font-weight:500; }

/* ============== DASHBOARD KPI-ROW ============== */
.kpi-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:14px; }
.kpi {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 18px;
}
.kpi.highlight { background:var(--mist); border-color:var(--munt); }
.kpi.solar { background:#FFFBEB; border-color:var(--solar-soft); }
/* Sparkline-bars in een KPI-tegel — laatste ~5 min vermogen-trend. */
.kpi-spark {
  display:block; width:100%; height:42px; margin-top:10px;
  overflow:visible;
}
.kpi-spark-zero { stroke:var(--line-2); stroke-width:0.4; stroke-dasharray:1.5,1.5; }
.kpi-spark .is-import { fill:var(--blad); }
.kpi-spark .is-export { fill:var(--duur); }
.kpi.solar .kpi-label { color:var(--duur); }
.kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--steen); font-weight:500; }
.kpi-value { font-size:24px; font-weight:500; letter-spacing:-0.4px; color:var(--donker); margin:6px 0 4px; line-height:1.1; }
.kpi-value .unit { font-size:12px; color:var(--steen); margin-left:3px; font-weight:400; letter-spacing:0; }
.kpi-delta { font-size:11px; color:var(--steen); }
.kpi-delta.up { color:var(--rood); }
.kpi-delta.down { color:var(--spar); }
.kpi-info-btn { background:none; border:none; padding:0 0 0 4px; cursor:pointer; color:var(--steen); opacity:0.6; vertical-align:-2px; transition:opacity 0.15s; }
.kpi-info-btn:hover, .kpi-info-btn[aria-expanded="true"] { opacity:1; color:var(--spar); }
.kpi-info-panel { margin-top:10px; padding:10px 12px; background:var(--crème); border-left:3px solid var(--spar); border-radius:4px; font-size:12px; line-height:1.5; color:var(--donker); }
.kpi-info-panel strong { display:block; margin-bottom:4px; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--spar); }
.kpi-info-panel p { margin:0 0 6px; }
.kpi-info-panel p:last-child { margin-bottom:0; }

@media (max-width:1100px) { .kpi-row { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .kpi-row { grid-template-columns:1fr; } }

/* GREETING + LIVE STATUS */
.greeting-bar {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; margin-bottom:18px; flex-wrap:wrap;
}
.greet-h { font-size:24px; font-weight:500; letter-spacing:-0.4px; color:var(--donker); margin-bottom:2px; }
.greet-sub { font-size:13px; color:var(--steen); }
.greeting-pills { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* TIPS (Slim doen vandaag) */
.tip-list { display:flex; flex-direction:column; gap:10px; }
.tip {
  background:var(--crème); border-left:3px solid var(--slim);
  padding:11px 14px; border-radius:0 9px 9px 0;
  font-size:13px;
}
.tip.do { border-left-color:var(--slim); }
.tip.avoid { border-left-color:var(--duur); }
.tip.plan { border-left-color:var(--info); }
.tip.wait { border-left-color:var(--steen); }
.tip-h { font-weight:500; color:var(--donker); }
.tip-s { font-size:11px; color:var(--steen); margin-top:2px; }

/* ============== MIJN HUIS — HOME-HEADER ============== */
.home-header {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff; border-radius:16px;
  padding:24px 28px; margin-bottom:14px;
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  position:relative; overflow:hidden;
}
.home-header::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
}
.home-header-content { position:relative; z-index:2; }
.home-header h2 { font-size:22px; font-weight:500; color:#fff; letter-spacing:-0.3px; margin-bottom:4px; }
.home-header .home-addr { font-size:13px; color:var(--munt); margin-bottom:18px; }
.home-stats { display:flex; gap:28px; flex-wrap:wrap; }
.home-stat-l { font-size:11px; color:var(--munt); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.home-stat-v { font-size:18px; color:#fff; font-weight:500; margin-top:3px; }
.home-stat-v.label-a { color:var(--blad); }

.home-illu {
  position:relative; z-index:2;
  width:120px; height:100px;
  display:flex; align-items:center; justify-content:center;
  font-size:64px;
  opacity:0.85;
}

/* MIJN HUIS — Card-head met icon */
.card-head-icon {
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.card-head-icon .ico {
  width:36px; height:36px; border-radius:9px;
  background:var(--mist); color:var(--spar);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.card-head-icon h3 { font-size:15px; font-weight:500; color:var(--donker); }
.card-head-icon .sub { font-size:12px; color:var(--steen); margin-top:2px; }
.card-head-icon .right { margin-left:auto; }

/* KV-list (key-value rows) */
.kv-list { display:flex; flex-direction:column; }
.kv-row {
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  padding:10px 0; font-size:13px;
  border-bottom:1px solid var(--line);
}
.kv-row:last-child { border-bottom:0; }
.kv-row .kv-label { color:var(--steen); }
.kv-row .kv-value { color:var(--donker); font-weight:500; text-align:right; }
.kv-row .kv-value.mono { font-family:ui-monospace, 'SF Mono', monospace; font-size:12px; font-weight:400; }
.kv-row .kv-value small { display:block; color:var(--steen); font-weight:400; font-size:11px; margin-top:2px; }

/* Status-pill ok/warn/off */
.status-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:500;
}
.status-pill::before {
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.status-pill.ok { background:var(--mist); color:var(--spar); }
.status-pill.ok::before { background:var(--slim); box-shadow:0 0 0 3px rgba(34,179,107,0.2); animation:pulse 1.6s ease-in-out infinite; }
.status-pill.warn { background:var(--warn-bg); color:var(--duur); }
.status-pill.warn::before { background:var(--duur); }
.status-pill.off { background:var(--grijs); color:var(--steen); }
.status-pill.off::before { background:var(--steen); }

/* METER-LIVE (4 cells) */
.meter-live {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:var(--crème); border-radius:11px; padding:14px 16px;
  margin-top:14px;
}
.meter-live-cell .ml-label { font-size:11px; color:var(--steen); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.meter-live-cell .ml-value { font-size:18px; font-weight:500; color:var(--donker); margin-top:3px; font-variant-numeric:tabular-nums; }
.meter-live-cell .ml-value .ml-unit { font-size:11px; color:var(--steen); font-weight:400; margin-left:2px; }
.meter-live-cell.export .ml-value { color:var(--duur); }

/* MIJN HUIS RESPONSIVE */
@media (max-width:780px) {
  .home-header { grid-template-columns:1fr; padding:20px 22px; }
  .home-illu { display:none; }
  .home-stats { gap:18px; }
}

/* ============== TARIEVEN-PAGINA — HERO STRIP / ALERT / etc. ============== */

.alert-strip {
  display:grid; grid-template-columns:auto 1fr auto; gap:14px;
  padding:14px 18px;
  background:var(--mist); border:1px solid var(--munt); border-radius:12px;
  margin-bottom:14px; align-items:center;
}
.alert-strip-icon {
  width:36px; height:36px; border-radius:9px;
  background:var(--slim); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.alert-strip-h { font-size:13px; font-weight:500; color:var(--donker); }
.alert-strip-s { font-size:12px; color:var(--spar); margin-top:2px; }

.hero-strip {
  display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:12px;
  margin-bottom:14px;
}
.hc { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.hc.now {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff; border-color:transparent;
}
.hc-eyebrow {
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--steen); font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
}
.hc.now .hc-eyebrow { color:var(--blad); }
.hc-eyebrow .live-dot {
  width:7px; height:7px; border-radius:50%; background:var(--blad);
  box-shadow:0 0 0 3px rgba(79,203,142,0.25);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.4; }
}
.hc-big {
  font-size:24px; font-weight:500; letter-spacing:-0.4px;
  color:var(--donker); margin:6px 0 4px; line-height:1.1;
}
.hc.now .hc-big { font-size:30px; color:#fff; }
.hc-big .unit { font-size:13px; color:var(--steen); margin-left:3px; font-weight:400; letter-spacing:0; }
.hc.now .hc-big .unit { color:var(--munt); }
.hc-meta { font-size:11px; color:var(--steen); line-height:1.4; }
.hc.now .hc-meta { color:var(--munt); }
.hc-pill {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:500;
  padding:3px 8px; border-radius:999px;
  margin-top:6px;
}
.hc-pill.up { background:var(--rood-bg); color:var(--rood); }
.hc-pill.down { background:var(--mist); color:var(--spar); }
.hc.now .hc-pill.down { background:rgba(34,179,107,0.2); color:var(--blad); }
.hc.now .hc-pill.up { background:rgba(163,45,45,0.25); color:#FCC; }

/* TABS-segmented (chart-tabs) */
.tabs-row { display:flex; gap:2px; padding:3px; background:var(--grijs); border-radius:10px; }
.tabs-row button {
  font:inherit; cursor:pointer; border:0; background:transparent;
  padding:7px 14px; border-radius:7px;
  font-size:12px; font-weight:500; color:var(--steen);
}
.tabs-row button.is-active {
  background:#fff; color:var(--donker);
  box-shadow:0 1px 3px rgba(4,46,29,0.06);
}
.tabs-row button[disabled] { opacity:0.4; cursor:not-allowed; }

/* DAY-META (4 cellen onder chart) */
.day-meta {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line);
}
.day-meta-cell { font-size:12px; }
.day-meta-l { color:var(--steen); margin-bottom:3px; }
.day-meta-v { font-weight:500; color:var(--donker); }
.day-meta-v.cheap { color:var(--spar); }
.day-meta-v.expensive { color:var(--rood); }
.day-meta-delta { font-size:11px; margin-top:2px; font-weight:500; }
.day-meta-delta.is-down { color:var(--spar); }
.day-meta-delta.is-up { color:var(--rood); }
/* Tomorrow ghost-line over today's bars in vergelijk-mode */
.bars .compare-overlay {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.bars .compare-overlay polyline {
  fill:none; stroke:var(--donker); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:3 3; opacity:0.7;
  vector-effect:non-scaling-stroke;
}

/* TWO-COL grid (Finder + Breakdown) */
.two-col { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; margin-bottom:14px; }

/* FINDER */
.finder-controls {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px;
}
@media (max-width:600px) { .finder-controls { grid-template-columns:1fr; } }
.finder-result {
  background:var(--mist); border:1px solid var(--munt); border-radius:11px;
  padding:14px 16px;
}
.finder-result-l {
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--spar); font-weight:500;
}
.finder-result-h {
  font-size:22px; font-weight:500; color:var(--donker);
  margin:4px 0; letter-spacing:-0.3px;
}
.finder-result-meta { font-size:12px; color:var(--spar); }
.finder-alts {
  margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(34,179,107,0.2);
  display:flex; flex-direction:column; gap:5px;
  font-size:12px; color:var(--steen);
}
.finder-alts strong { color:var(--donker); font-weight:500; }
.finder-empty {
  background:var(--grijs); border:1px solid var(--line);
  padding:14px 16px; border-radius:11px;
  font-size:13px; color:var(--steen);
}

/* BREAKDOWN STACKED BAR */
.bd-bar {
  display:flex; height:24px; border-radius:9px; overflow:hidden;
  margin-bottom:14px; border:1px solid var(--line);
}
.bd-bar > div { transition:filter 0.15s; }
.bd-bar > div:hover { filter:brightness(1.1); }
.bd-list { display:flex; flex-direction:column; gap:8px; }
.bd-li {
  display:grid; grid-template-columns:14px 1fr auto; gap:10px;
  align-items:center; font-size:13px;
}
.bd-li .swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.bd-li .name { color:var(--donker); }
.bd-li .name small { display:block; color:var(--steen); font-size:11px; margin-top:1px; }
.bd-li .val { color:var(--donker); font-weight:500; font-variant-numeric:tabular-nums; }
.bd-total {
  padding-top:10px; margin-top:10px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--steen);
}
.bd-total strong { font-weight:600; color:var(--spar); font-size:16px; font-variant-numeric:tabular-nums; }

/* UURTABEL */
.uurtable { width:100%; border-collapse:collapse; font-size:13px; }
.uurtable th, .uurtable td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.uurtable th {
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--steen); font-weight:500;
  background:var(--grijs); border-bottom:1px solid var(--line-2);
}
.uurtable .num { text-align:right; font-variant-numeric:tabular-nums; }
.uurtable tr.now-row { background:var(--mist); }
.uurtable tr.now-row td { font-weight:500; color:var(--donker); }
.level-tag {
  display:inline-block; padding:2px 9px; border-radius:6px;
  font-size:11px; font-weight:500;
}
.level-tag.lv-very-low { background:var(--heat-cheap-1); color:var(--spar); }
.level-tag.lv-low { background:var(--heat-cheap-2); color:#fff; }
.level-tag.lv-medium { background:var(--heat-mid); color:#7A4F1A; }
.level-tag.lv-high { background:var(--heat-warm); color:#fff; }
.level-tag.lv-peak { background:var(--heat-hot); color:#fff; }
.level-tag.lv-negative { background:var(--heat-cold); color:#fff; }
.vs-bar-track {
  display:inline-block; width:80px; height:6px;
  background:var(--grijs); border-radius:3px; vertical-align:middle;
  position:relative; overflow:visible;
}
.vs-bar-fill {
  position:absolute; top:0; height:6px;
  background:var(--slim); border-radius:3px;
}
.vs-bar-fill.up { background:var(--rood); }
.vs-up { color:var(--rood); font-weight:500; }
.vs-down { color:var(--spar); font-weight:500; }
.uurtable-foot {
  text-align:center; padding:14px 0;
  font-size:12px; color:var(--spar);
  border-top:1px solid var(--line);
}
.uurtable-foot button { background:transparent; border:0; color:var(--spar); font:inherit; cursor:pointer; font-weight:500; }
.uurtable-foot button:hover { text-decoration:underline; }

/* CHART NU-LIJN — NU-badge zweeft boven de chart, gestreepte lijn omlaag. */
.bar-chart .bars { position:relative; overflow:visible; }
.now-line {
  position:absolute; top:0; bottom:0;
  border-left:2px dashed var(--donker);
  pointer-events:none;
  z-index:5;
}
.now-line::before {
  content:'NU'; position:absolute;
  top:-22px; left:50%; transform:translateX(-50%);
  background:var(--donker); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:0.3px;
  padding:3px 8px; border-radius:4px;
  white-space:nowrap;
}

@media (max-width:980px) {
  .two-col, .hero-strip { grid-template-columns:1fr; }
  .day-meta { grid-template-columns:repeat(2, 1fr); }
}

/* ============== BAR CHART ============== */

.bar-chart { padding-top:28px; }
.bar-chart .bars {
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  height:160px;
  gap:1px;
}
.bar-chart .bar-lane { position:relative; min-width:0; cursor:pointer; }
.bar-chart .bar {
  position:absolute; left:0; right:0;
  min-height:1px;
  border-radius:2px 2px 0 0;
  transition:opacity 0.15s;
}
.bar-chart .bar.below-zero { border-radius:0 0 2px 2px; }
.bar-chart .bar-lane:hover .bar { opacity:0.7; }
.bar-chart .bar.bar-now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; }
.zero-line {
  position:absolute; left:0; right:0;
  height:1px; background:rgba(4,46,29,0.35);
  pointer-events:none; z-index:2;
}
.zero-line::after {
  content:'0'; position:absolute; right:-2px; top:-7px;
  font-size:9px; color:var(--steen); background:#fff;
  padding:0 4px; border-radius:3px;
}
.bar-axis { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:6px; font-size:11px; color:var(--steen); }

/* WEEK-OVERZICHT op /app/tarieven — 7 dagen × 24 uur heatmap.
   Day-label-kolom + 24 cell-kolommen. Cellen gekleurd via percentile-
   based heat-mapping (zelfde palet als de homepage-heatmap). */
.weekmap-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.weekmap { display:flex; flex-direction:column; gap:4px; }
.weekmap-axis {
  display:grid; grid-template-columns:54px repeat(24, 1fr);
  font-size:10px; color:var(--steen); margin-bottom:4px;
  align-items:end;
}
.weekmap-axis .weekmap-axis-label { text-transform:uppercase; letter-spacing:0.5px; font-size:10px; }
.weekmap-row {
  display:grid; grid-template-columns:54px repeat(24, 1fr);
  gap:3px; align-items:stretch;
}
.weekmap-day {
  display:flex; flex-direction:column; justify-content:center;
  font-size:12px; line-height:1.2; padding-right:8px;
}
.weekmap-day strong { color:var(--donker); font-weight:500; }
.weekmap-day small { color:var(--steen); font-size:10px; }
.weekmap-cell {
  height:24px; border-radius:4px; cursor:default;
  transition:transform 0.1s;
}
.weekmap-cell:hover { transform:scale(1.08); z-index:2; }
.weekmap-cell.is-now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; }
.weekmap-foot {
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--steen);
}

@media (max-width:720px) {
  .weekmap-axis, .weekmap-row { grid-template-columns:42px repeat(24, 1fr); gap:2px; }
  .weekmap-cell { height:18px; border-radius:3px; }
  .weekmap-day { font-size:11px; padding-right:4px; }
  .weekmap-day small { font-size:9px; }
}

/* Hero mini-bars op homepage — kleinere variant met dezelfde zero-line */
.hpc-mini-bars { position:relative; }
.hpc-mini-bar-lane { position:relative; min-width:0; }
.hpc-mini-bar {
  position:absolute; left:0; right:0;
  min-height:1px; border-radius:1px;
}
.hpc-mini-bar.below-zero { border-radius:0 0 1px 1px; }
.hpc-mini-bar.is-now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; border-radius:2px; }
.hpc-mini-bars .zero-line { background:rgba(4,46,29,0.25); }
.hpc-mini-bars .zero-line::after { display:none; }

@media (max-width:720px) {
  .bar-chart .bars { height:120px; }
}

/* ============== DROPDOWN (custom select replacement) ============== */
.dropdown { position:relative; display:inline-block; }
.dropdown.is-block { display:block; width:100%; }
.dropdown-trigger {
  background:#fff; border:1px solid var(--line-2); border-radius:8px;
  padding:8px 12px 8px 14px; font-size:13px; color:var(--donker);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  min-height:36px; line-height:1; min-width:140px;
  transition:border-color 0.12s, box-shadow 0.12s;
}
.dropdown-trigger.is-block { width:100%; justify-content:space-between; }
.dropdown-trigger:hover { border-color:var(--slim); }
.dropdown.is-open .dropdown-trigger { border-color:var(--slim); box-shadow:0 0 0 3px rgba(34,179,107,0.12); }
.dropdown-label { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropdown-caret { color:var(--steen); flex-shrink:0; transition:transform 0.15s; }
.dropdown.is-open .dropdown-caret { transform:rotate(180deg); color:var(--spar); }
.dropdown-panel {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:100%; max-height:280px; overflow-y:auto;
  background:#fff; border:1px solid var(--line-2); border-radius:10px;
  box-shadow:0 14px 36px rgba(4,46,29,0.14);
  padding:6px; z-index:80;
  display:flex; flex-direction:column; gap:1px;
  animation:dropdownIn 0.12s ease-out;
}
.dropdown-panel.align-left { left:0; right:auto; }
.dropdown-option {
  background:transparent; border:0; cursor:pointer;
  padding:9px 12px; border-radius:6px;
  font-size:13px; color:var(--donker); text-align:left;
  white-space:nowrap;
  display:flex; flex-direction:column; gap:2px;
}
.dropdown-option:hover { background:var(--mist); }
.dropdown-option.is-selected { background:var(--mist); color:var(--spar); font-weight:500; }
.dropdown-option:focus-visible { outline:2px solid var(--slim); outline-offset:1px; }
.dropdown-option-sub { font-size:11px; color:var(--steen); font-weight:400; }
.dropdown.size-sm .dropdown-trigger { padding:6px 10px 6px 12px; font-size:12px; min-height:32px; min-width:120px; }
@keyframes dropdownIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* ============== LOADING STATES ============== */
.skeleton {
  background:linear-gradient(90deg, var(--grijs) 0%, #fafaf6 50%, var(--grijs) 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:8px;
}
.skeleton-line { height:14px; margin:8px 0; }
.skeleton-line.h-large { height:28px; max-width:60%; }
.skeleton-card { padding:18px; }
.skeleton-block { height:160px; margin-top:12px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ============== MODAL (app-confirm-dialog) ============== */
.modal-backdrop {
  position:fixed; inset:0; z-index:200;
  background:rgba(4,46,29,0.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:fadeIn 0.15s ease-out;
}
.modal {
  background:#fff; border-radius:14px; padding:24px 26px;
  max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  animation:scaleIn 0.18s ease-out;
}
.modal-title { font-size:18px; color:var(--donker); margin-bottom:8px; }
.modal-body { font-size:14px; color:var(--steen); margin-bottom:18px; line-height:1.5; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }

/* ============== APP LAYOUT MOBILE ============== */

@media (max-width:780px) {
  .app-layout { grid-template-columns:1fr; }
  .sidebar-cell { border-right:0; border-bottom:1px solid var(--line); }
  .sidebar {
    position:relative; height:auto; flex-direction:row;
    overflow-x:auto; overflow-y:visible; padding:10px 14px; gap:8px;
    border-right:0;
    align-items:center;
  }
  .sidebar .logo { border-bottom:0; padding:0 8px 0 0; flex-shrink:0; }
  .sidebar-nav { flex-direction:row; flex-shrink:0; gap:4px; }
  .sidebar-section { display:none; }
  /* Sidebar-foot blijft beschikbaar — anders kunnen mobiele users niet
     uitloggen. Meta-tekst (naam + e-mail) gaat eraf om ruimte te
     besparen, alleen de avatar + chevron blijven. */
  .sidebar-foot {
    margin-left:auto; margin-top:0; padding:0 0 0 8px;
    border-top:0; border-left:1px solid var(--line);
    flex-shrink:0;
  }
  .sidebar-user-trigger {
    grid-template-columns:32px auto; gap:8px; padding:4px 6px;
  }
  .sidebar-user-trigger .meta { display:none; }
  .sidebar-user-panel {
    left:auto; right:0; min-width:200px;
  }
  .sidebar-nav a, .sidebar-nav .nav-btn { padding:10px 12px; min-height:44px; }
  main.app-main { padding:18px 16px 32px; }
}

/* =================================================================
   PUBLIC HOMEPAGE — marketing landing voor niet-ingelogde bezoekers
   ================================================================= */

.public-home { max-width:1200px; margin:0 auto; padding:0 24px; width:100%; overflow-x:hidden; }
.public-home > section, .public-home > div { max-width:100%; }

/* HERO */
.hero-section {
  display:grid; grid-template-columns:1fr 1.1fr; gap:48px;
  padding:64px 0 56px;
  align-items:center;
}
.hero-eyebrow {
  font-size:12px; text-transform:uppercase; letter-spacing:1px;
  color:var(--slim); font-weight:500; margin-bottom:14px;
}
.hero-h {
  font-size:48px; font-weight:500; letter-spacing:-1px;
  line-height:1.1; color:var(--donker); margin-bottom:18px;
}
.hero-h .hi { color:var(--slim); }
.hero-sub {
  font-size:16px; color:var(--steen); line-height:1.6;
  max-width:560px; margin-bottom:24px;
}
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.btn-large { padding:13px 24px; font-size:14px; }
.hero-trust { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--steen); }
.hero-trust span::before { content:'✓'; color:var(--slim); margin-right:5px; font-weight:600; }

/* ============== LEVERANCIER LANDING PAGE ============== */
/* Server-rendered SEO-pagina (geen Vue) — eigen layout zodat de SPA niet
   over de content heen mount. Brand-consistent met de homepage maar simpeler. */
.leverancier-page { font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; color:var(--donker); background:var(--crème); margin:0; }
/* Server-rendered topbar deelt nu de .topbar-class met de SPA — zie boven.
   Geen aparte .lev-topbar styling meer (was duplicate code met afwijkende
   gradient + dropdown-styling). */

.lev-wrap { max-width:880px; margin:0 auto; padding:48px 24px 64px; }
.lev-hero h1 { font-size:38px; line-height:1.15; letter-spacing:-1px; font-weight:500; margin:0 0 18px; max-width:720px; }
.lev-big { display:flex; align-items:baseline; gap:6px; margin:8px 0 12px; }
.lev-num { font-size:64px; font-weight:500; letter-spacing:-1.5px; line-height:1; color:var(--spar); }
.lev-unit { font-size:20px; color:var(--steen); }
.lev-meta { font-size:16px; color:var(--steen); max-width:640px; line-height:1.55; margin:0 0 22px; }
.lev-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }

.lev-card {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:28px 28px 24px; margin-top:18px;
}
.lev-card h2 { font-size:20px; font-weight:500; letter-spacing:-0.4px; margin:0 0 14px; color:var(--donker); }
.lev-breakdown { width:100%; border-collapse:collapse; font-size:14px; }
.lev-breakdown td { padding:8px 0; border-top:1px solid var(--line); color:var(--donker); }
.lev-breakdown tr:first-child td { border-top:0; }
.lev-breakdown td.num { text-align:right; font-variant-numeric:tabular-nums; }
.lev-breakdown tr.subtotal td { font-weight:500; padding-top:12px; }
.lev-breakdown tr.total td { font-weight:600; font-size:16px; padding-top:12px; border-top:2px solid var(--donker); color:var(--donker); }
.lev-fineprint { font-size:12px; color:var(--steen); margin-top:14px; line-height:1.5; }

.lev-kv { display:grid; grid-template-columns:200px 1fr; gap:10px 18px; font-size:14px; margin:0; }
.lev-kv dt { color:var(--steen); font-weight:500; }
.lev-kv dd { margin:0; color:var(--donker); }

.lev-foot {
  max-width:880px; margin:48px auto 0; padding:24px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13px; color:var(--steen); border-top:1px solid var(--line);
}
.lev-foot nav { display:flex; gap:18px; }
.lev-foot nav a { color:var(--spar); text-decoration:none; }
.lev-foot nav a:hover { text-decoration:underline; }

@media (max-width:600px) {
  .lev-num { font-size:48px; }
  .lev-hero h1 { font-size:28px; }
  .lev-wrap { padding:32px 18px 48px; }
  .lev-card { padding:20px; }
  .lev-kv { grid-template-columns:1fr; gap:4px 0; }
  .lev-kv dt { margin-top:10px; }
}

/* HERO PRICE CARD */
.hero-price-card {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:28px;
}
/* Header-rij van de hero-card: leverancier-dropdown links, daarboven-rechts
   stapelt vandaag/morgen-tabs en het bucket-label. */
.hpc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.hpc-head-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hpc-bucket { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--steen); font-weight:500; }
.hpc-big { font-size:46px; font-weight:500; letter-spacing:-1px; color:var(--donker); margin:8px 0; line-height:1; }
.hpc-big .unit { font-size:18px; color:var(--steen); margin-left:4px; font-weight:400; letter-spacing:0; }
.hpc-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:500; }
/* Segmented control voor Vandaag/Morgen — bedient alleen de bars + stats. */
.hpc-tabs {
  display:inline-flex; background:var(--crème); border-radius:999px; padding:3px;
  gap:2px;
}
.hpc-tabs button {
  border:0; background:transparent; padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:500; color:var(--steen); cursor:pointer;
  transition:background-color 0.15s, color 0.15s;
}
.hpc-tabs button:hover:not(:disabled) { color:var(--donker); }
.hpc-tabs button.is-active { background:#fff; color:var(--donker); box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.hpc-tabs button.is-disabled, .hpc-tabs button:disabled {
  opacity:0.45; cursor:not-allowed;
}
.hpc-mini-bars { display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; align-items:stretch; height:110px; margin:18px 0 14px; }
.hpc-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.hpc-stat-l { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--steen); font-weight:500; }
.hpc-stat-v { font-size:14px; font-weight:500; color:var(--donker); margin-top:2px; }

/* SECTION HEADERS */
section.public-section { padding:48px 0; border-top:1px solid var(--line); }
.section-eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--slim); font-weight:500; margin-bottom:10px; }
.section-title { font-size:34px; font-weight:500; letter-spacing:-0.8px; line-height:1.15; color:var(--donker); margin-bottom:12px; max-width:620px; }
.section-sub { font-size:15px; color:var(--steen); max-width:580px; line-height:1.6; margin-bottom:28px; }

/* HOW-IT-WORKS */
.how-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.how-card {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:28px 24px;
}
.how-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px;
  background:var(--mist); color:var(--spar);
  font-weight:500; font-size:13px; margin-bottom:14px;
}
.how-h { font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--donker); margin-bottom:6px; }
.how-s { font-size:14px; color:var(--steen); line-height:1.6; }

/* HEATMAP */
.heatmap-section {
  background:var(--nacht); color:var(--mist); border-radius:20px;
  padding:42px 36px; margin:32px 0;
}
.heatmap-section .section-title { color:#fff; }
.heatmap-section .section-sub { color:var(--munt); }
.heatmap {
  display:grid; grid-template-columns:60px 1fr; gap:8px;
  margin:24px 0 14px;
}
.heatmap-cols { display:grid; gap:3px; }
.heatmap-row { display:grid; grid-template-columns:repeat(24, 1fr); gap:3px; align-items:stretch; }
.heatmap-cell { height:22px; border-radius:3px; }
.heatmap-day-labels { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--munt); padding-top:1px; }
.heatmap-day-labels span { height:22px; line-height:22px; }
.heatmap-axis { display:grid; grid-template-columns:60px repeat(4, 1fr); gap:8px; font-size:11px; color:var(--munt); margin-top:8px; }
.heatmap-axis div { text-align:left; }
.heatmap-legend { display:flex; align-items:center; gap:10px; margin-top:18px; font-size:11px; color:var(--munt); }
.heatmap-legend-bar { display:flex; height:8px; width:200px; border-radius:4px; overflow:hidden; }
.heatmap-legend-bar div { flex:1; }

/* Heatmap-cell hover state + custom tooltip */
.heatmap-cell { transition:transform 0.1s, box-shadow 0.1s; cursor:pointer; }
.heatmap-cell:hover { transform:scale(1.18); box-shadow:0 0 0 2px #fff inset; z-index:5; position:relative; }

.heat-tooltip {
  position:fixed; z-index:1000;
  background:#042E1D;
  color:#fff;
  border:1px solid rgba(184,235,210,0.18);
  border-radius:10px;
  padding:12px 14px;
  font-size:12px; line-height:1.5;
  min-width:220px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  pointer-events:none;
}
.heat-tooltip .htt-h {
  font-weight:500; color:#fff;
  margin-bottom:8px; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.heat-tooltip .htt-row {
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:3px 0;
  color:rgba(236,250,243,0.75);
}
.heat-tooltip .htt-row .label-dot {
  display:inline-flex; align-items:center; gap:6px;
}
.heat-tooltip .htt-row .label-dot::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--blad); display:inline-block;
}
.heat-tooltip .htt-row.is-tax .label-dot::before { background:#EF9F27; }
.heat-tooltip .htt-row.is-vat .label-dot::before { background:#D85A30; }
.heat-tooltip .htt-row.is-markup .label-dot::before { background:var(--munt); }
.heat-tooltip .htt-row.is-solar .label-dot::before { background:var(--solar); }
.heat-tooltip .htt-row.is-export .label-dot::before { background:var(--zon, #F0997B); }
.heat-tooltip .htt-row.is-produced .label-dot::before { background:var(--solar); }
.heat-tooltip .htt-row.is-solar { padding-left:14px; color:rgba(236,250,243,0.55); }
.heat-tooltip .htt-row.is-solar .label-dot::before { width:5px; height:5px; }
.heat-tooltip .htt-row strong { color:#fff; font-weight:500; }
.heat-tooltip .htt-row.total {
  margin-top:6px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.1);
  color:#fff;
}
.heat-tooltip .htt-row.total strong { font-weight:600; font-size:13px; }

/* LEVERANCIERS-TABEL */
.lev-section { padding:48px 0; }
.lev-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:28px; }
.lev-table-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.lev-table { width:100%; border-collapse:collapse; font-size:13px; }
.lev-table th { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--steen); font-weight:500; padding:12px 16px; text-align:left; background:var(--grijs); border-bottom:1px solid var(--line); }
.lev-table td { padding:12px 16px; border-bottom:1px solid var(--line); }
.lev-table tr:last-child td { border-bottom:0; }
.lev-table .name strong { font-weight:500; color:var(--donker); }
.lev-table .name small { font-size:11px; color:var(--steen); display:block; margin-top:1px; }
.lev-table .num { text-align:right; color:var(--donker); font-variant-numeric:tabular-nums; }
.lev-cta-card { background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%); color:#fff; border-radius:16px; padding:28px; }
.lev-cta-card h3 { font-size:18px; font-weight:500; margin-bottom:6px; }
.lev-cta-card p { font-size:13px; color:var(--munt); margin-bottom:18px; line-height:1.55; }
.lev-cta-card .field-label label { color:var(--mist); }
.lev-cta-card .input { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.15); color:#fff; }
.lev-cta-card .input:focus { background:rgba(255,255,255,0.1); border-color:var(--blad); box-shadow:0 0 0 3px rgba(79,203,142,0.2); }

/* STATS-STRIP */
.stats-strip {
  display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--mist); border-radius:20px; padding:36px;
  text-align:center; margin:24px 0;
}
.stats-strip > div { padding:0 16px; border-right:1px solid rgba(34,179,107,0.15); }
.stats-strip > div:last-child { border-right:0; }
.stat-v { font-size:28px; font-weight:500; letter-spacing:-0.5px; color:var(--donker); margin-bottom:4px; }
.stat-l { font-size:12px; color:var(--spar); }

/* SLIM LADEN TEASER */
.slim-teaser {
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:48px; margin:24px 0;
  align-items:center;
}
.slim-features { list-style:none; padding:0; margin:18px 0; display:grid; gap:8px; }
.slim-features li { font-size:14px; color:var(--donker); display:flex; align-items:center; gap:8px; }
.slim-features li::before { content:'✓'; color:var(--slim); font-weight:600; flex-shrink:0; }
.slim-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.slim-pill { font-size:11px; padding:4px 10px; border-radius:999px; background:var(--mist); color:var(--spar); border:1px solid var(--munt); }
.slim-illu { background:var(--mist); border-radius:16px; padding:32px; height:280px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; }
.slim-illu .bars { display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; height:100%; align-items:stretch; }
.slim-illu .bars > div { position:relative; }
.slim-illu .bar { background:var(--munt); border-radius:1px; min-height:1px; }
.slim-illu .bar.cheap { background:var(--slim); }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; }
.faq-list { display:flex; flex-direction:column; }
details.faq-item { border-bottom:1px solid var(--line); padding:18px 0; }
details.faq-item:last-child { border-bottom:0; }
details.faq-item summary {
  cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; align-items:center;
  font-size:15px; font-weight:500; color:var(--donker);
}
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after {
  content:'+'; color:var(--slim); font-size:22px; font-weight:300; line-height:1; margin-left:14px;
}
details.faq-item[open] summary::after { content:'−'; }
details.faq-item .faq-a { font-size:14px; color:var(--steen); line-height:1.6; padding-top:10px; }

/* CTA-FINAL */
.final-cta { text-align:center; padding:64px 0; border-top:1px solid var(--line); }
.final-cta h2 { font-size:32px; font-weight:500; letter-spacing:-0.5px; color:var(--donker); margin-bottom:18px; }

/* MARKETING FOOTER */
footer.marketing-footer { background:#fff; border-top:1px solid var(--line); padding:48px 0 28px; margin-top:32px; }
.marketing-footer .inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-brand img { height:30px; margin-bottom:12px; }
.footer-brand p { font-size:13px; color:var(--steen); line-height:1.55; max-width:280px; }
.footer-col h4 { font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--donker); font-weight:500; margin-bottom:12px; }
.footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.footer-col a { color:var(--steen); }
.footer-col a:hover { color:var(--spar); text-decoration:none; }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font-size:11px; color:var(--steen); }

/* RESPONSIVE */
@media (max-width:900px) {
  .hero-section { grid-template-columns:1fr; gap:32px; padding:32px 0; }
  .hero-h { font-size:34px; }
  .how-grid { grid-template-columns:1fr; }
  .lev-grid { grid-template-columns:1fr; gap:20px; }
  .stats-strip { grid-template-columns:repeat(2, 1fr); padding:24px 16px; gap:18px 0; }
  .stats-strip > div { border-right:0; padding:8px 0; }
  .slim-teaser { grid-template-columns:1fr; padding:32px 24px; gap:24px; }
  .slim-illu { height:200px; padding:20px; }
  .faq-grid { grid-template-columns:1fr; gap:18px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .heatmap-section { padding:32px 20px; margin:16px 0; }
  .heatmap-cell { height:18px; }
}
@media (max-width:600px) {
  .hpc-mini-bars { height:80px; }
  .hpc-stats { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
  /* Public-home hero: kleinere text + smallere padding zodat hij past op
     iPhone-SE-class viewports zonder horizontale overflow. */
  .public-home { padding:0 16px; }
  .hero-section { padding:24px 0 28px; gap:24px; min-width:0; }
  .hero-section > div { min-width:0; }
  .hero-h { font-size:24px; letter-spacing:-0.5px; word-break:break-word; }
  .hero-sub { font-size:14px; max-width:100%; word-break:break-word; }
  .hero-trust { gap:8px 14px; flex-direction:column; }
  /* Hero-price-card kleiner, anders eet 'ie de schermbreedte op */
  .hero-price-card { padding:18px; max-width:100%; }
  .hero-price-card .hpc-big { font-size:36px; }
  /* Topbar logo iets kleiner zodat alle nav-items ernaast passen */
  header.topbar { padding:10px 14px; }
  .topbar .logo img { height:26px; }
  /* Section-titel verkleinen */
  .section-title { font-size:22px; line-height:1.2; word-break:break-word; }
  .section-eyebrow { font-size:11px; }
  /* Lev-cta-card alleen krijgt mobile-padding (table-card heeft 0) */
  .lev-cta-card { padding:20px; }
}

/* ============================================================
   MOBILE FIXES — onder 720px
   Sluit aan op de bestaande min-width breakpoints; expliciet hier
   gegroepeerd zodat charts/tabellen/headers responsive worden.
   ============================================================ */

/* Tabel-overflow-wrapper: alle tables die niet passen op mobiel
   krijgen horizontale scroll i.p.v. zelf de card op te blazen. */
.table-scroll {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -4px;
}
.table-scroll table { min-width:520px; }

@media (max-width:720px) {
  /* Combo-chart op dashboard: lagere hoogte, kleinere assen */
  .combo-chart { height:200px; grid-template-columns:30px 1fr 36px; }
  .ca-y span { font-size:9px; }
  .ca-y span small { font-size:8px; }

  /* Day-chart op /verbruik: ruimer voor touch */
  .day-chart { height:170px; grid-template-columns:32px 1fr; gap:6px; }

  /* Hero-strip op tarieven en /verbruik kpi-row stapelen tot 2 cols
     i.p.v. 1 kolom, anders ben je eindeloos aan het scrollen. */
  .hero-strip, .kpi-row { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi-value { font-size:20px; }

  /* Two-col layouts (donut+benchmark, etc.) stapelen vanaf 720px,
     niet pas vanaf 980px. */
  .two-col { grid-template-columns:1fr; gap:14px; }

  /* Topbar: verkleinen + nav-padding zodat nav op telefoon past */
  header.topbar { padding:12px 16px; }
  .topbar nav { gap:2px; flex-wrap:wrap; justify-content:flex-end; }
  .topbar nav a { padding:6px 10px; font-size:12px; }
  .topbar nav a.btn-cta { padding:8px 14px; }

  /* Heatmap (homepage): compactere rij-hoogte zodat 24 cellen
     leesbaar blijven op telefoon */
  .heatmap-cell { height:16px; }
  .heatmap-day-labels span { height:16px; line-height:16px; font-size:10px; }
  .heatmap-axis { grid-template-columns:50px repeat(4, 1fr); font-size:10px; }
  .heatmap-cols { gap:2px; }
  .heatmap-row { gap:2px; }

  /* Home-stats banner op /mijn-huis: 3 stats wrappen i.p.v. overflowen */
  .home-stats { flex-wrap:wrap; gap:14px; }
  .home-stats > div { flex:1 1 calc(50% - 7px); min-width:0; }

  /* Kpi-row in /verbruik: wel grid-2-col blijven, maar smaller */
  .month-grid { grid-template-columns:1fr 1fr; gap:10px; }

  /* Touch-targets: minimaal 40px voor alle knoppen op mobiel */
  .btn { min-height:40px; padding:10px 18px; }
  .btn-sm { min-height:36px; padding:8px 14px; font-size:12px; }
  .tab-nav-item { min-height:40px; padding:10px 14px; }
  .period-tabs button, .tabs-row button { min-height:36px; padding:8px 14px; font-size:12px; }
}

@media (max-width:480px) {
  /* Heel klein scherm: stack verder uit */
  .hero-strip, .kpi-row { grid-template-columns:1fr; }
  .home-stats > div { flex:1 1 100%; }
  main.app-main { padding:14px 12px 32px; }
  .card { padding:14px 14px; }

  /* Heatmap nog kleiner */
  .heatmap-cell { height:14px; }
  .heatmap-day-labels span { height:14px; line-height:14px; font-size:9px; }

  /* Combo-chart en day-chart compacter */
  .combo-chart { height:180px; }
  .day-chart { height:150px; }

  /* Topbar logo iets kleiner */
  .topbar .logo img { height:28px; }
}

/* ============== GLOSSARY-TOOLTIP ==============
   Termen krijgen een dotted-underline (visuele hint dat je 'm op kunt
   zoeken). Een gedeelde tooltip-bubble toont de definitie bij hover/click.
   Bubble is global (één per page, gepositioneerd door JS) zodat 'ie altijd
   bovenop andere elementen staat. */
.glossary-term {
  border-bottom:1px dotted currentColor;
  cursor:help;
  position:relative;
}
.glossary-term:hover, .glossary-term:focus { color:var(--spar); outline:none; }
/* Donkere body-pages: dotted-underline in lichte tint */
.blog-post-page .glossary-term:hover,
.blog-post-page .glossary-term:focus { color:var(--spar); }

#glossary-tip {
  position:fixed;
  z-index:9999;
  background:var(--nacht);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 12px 32px rgba(4,46,29,0.35);
  font-size:13px;
  line-height:1.45;
  max-width:320px;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity 0.12s, transform 0.12s;
}
#glossary-tip.is-open {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
#glossary-tip .gt-term {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--blad);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:4px;
}
#glossary-tip .gt-arrow {
  position:absolute;
  width:10px; height:10px;
  background:var(--nacht);
  transform:rotate(45deg);
  z-index:-1;
}

/* ============== BLOG ==============
   Server-rendered onder /blog en /blog/{slug}. De .blog-page en
   .blog-post-page body-class voorkomen lekkage naar de SPA-styling. */

.blog-page,
.blog-post-page { background:var(--crème); }
.blog-post-page { line-height:1.7; font-size:16px; }

/* Reading-progress-bar bovenaan article-pagina */
.blog-progress {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--slim); z-index:200; transition:width 0.1s;
}

/* ----- HERO ----- */
.blog-hero {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff;
  padding:64px 32px 72px;
  position:relative;
  overflow:hidden;
}
.blog-hero::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(79,203,142,0.16) 0%, transparent 70%);
  pointer-events:none;
}
.blog-hero-inner { max-width:1080px; margin:0 auto; position:relative; z-index:2; }
.blog-eyebrow {
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--blad); font-weight:500; margin-bottom:14px;
}
.blog-hero h1 {
  font-size:38px; font-weight:500; line-height:1.15;
  letter-spacing:-0.6px; color:#fff; margin:0 0 12px;
  max-width:720px;
}
.blog-hero p {
  font-size:15px; color:var(--munt);
  line-height:1.6; max-width:600px; margin:0;
}

/* ----- FILTERBAR ----- */
.blog-filterbar {
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 32px;
  position:sticky; top:0; z-index:40;
}
.blog-filter-inner {
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
  overflow-x:auto; flex-wrap:wrap;
}
.blog-filter-l {
  font-size:11px; text-transform:uppercase; letter-spacing:0.7px;
  color:var(--steen); font-weight:500; flex-shrink:0;
}
.blog-filterbar .filter-chip {
  background:transparent; border:1px solid var(--line-2);
  padding:6px 14px; border-radius:999px;
  font-size:12px; color:var(--steen);
  cursor:pointer; font-family:inherit;
  transition:all 0.12s; flex-shrink:0; font-weight:500;
  text-decoration:none;
}
.blog-filterbar .filter-chip:hover { border-color:var(--slim); color:var(--spar); text-decoration:none; }
.blog-filterbar .filter-chip.active { background:var(--nacht); color:#fff; border-color:var(--nacht); }

/* ----- MAIN ----- */
main.blog-main {
  max-width:1080px;
  margin:40px auto 0;
  padding:0 32px 80px;
}

/* Featured */
.blog-featured {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:56px;
  cursor:pointer;
  transition:border-color 0.18s, box-shadow 0.18s;
  text-decoration:none;
  color:inherit;
}
.blog-featured:hover { border-color:var(--slim); box-shadow:0 12px 36px rgba(4,46,29,0.07); text-decoration:none; }
.blog-featured-thumb {
  background:linear-gradient(135deg, var(--nacht) 0%, var(--donker) 100%);
  position:relative; overflow:hidden; min-height:320px;
}
.blog-featured-thumb svg { position:absolute; inset:0; width:100%; height:100%; }
.blog-featured-body {
  padding:32px 36px 32px 0;
  display:flex; flex-direction:column; justify-content:center;
}
.blog-featured-meta {
  display:flex; gap:10px; align-items:center;
  margin-bottom:14px; font-size:11px; color:var(--steen);
}
.blog-featured h2 {
  font-size:28px; font-weight:500;
  letter-spacing:-0.4px; line-height:1.25;
  margin:0 0 14px;
}
.blog-featured-sub {
  font-size:15px; color:var(--steen);
  line-height:1.65; margin:0 0 22px;
}
.blog-author {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--steen);
}

/* Author-init (blog-context — los van .author-* in MyHouse) */
.blog-page .author-init,
.blog-post-page .author-init {
  width:28px; height:28px;
  background:var(--slim); color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:500; flex-shrink:0;
}
.blog-page .author-init.sm,
.blog-post-page .author-init.sm { width:22px; height:22px; font-size:9px; }
.blog-post-page .author-init.lg { width:36px; height:36px; font-size:13px; background:var(--blad); color:var(--donker); }
.blog-post-page .author-init.xl { width:56px; height:56px; font-size:18px; background:var(--slim); color:#fff; }
.blog-author .author-name { font-weight:500; color:var(--nacht); }

/* Grid header */
.blog-grid-h {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:22px;
}
.blog-grid-h h2 { font-size:22px; font-weight:500; letter-spacing:-0.4px; margin:0; }
.blog-grid-h-meta { font-size:13px; color:var(--steen); }

/* Post-grid */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:24px;
}
.blog-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.blog-card:hover {
  border-color:var(--slim);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(4,46,29,0.07);
  text-decoration:none;
}
.blog-thumb {
  aspect-ratio:16 / 10;
  position:relative;
  overflow:hidden;
  background:var(--mist);
}
/* Categorie-getinte thumbs als geen hero_image_url is gezet */
.blog-thumb.thumb-tutorial { background:linear-gradient(135deg, var(--paars-bg) 0%, #DCD9F8 100%); }
.blog-thumb.thumb-product  { background:linear-gradient(135deg, var(--info-bg) 0%, #C9E1F8 100%); }
.blog-thumb.thumb-opinion  { background:linear-gradient(135deg, var(--warn-bg) 0%, #F5DCAB 100%); }
.blog-thumb.thumb-update   { background:linear-gradient(135deg, var(--mist) 0%, var(--munt) 100%); }
.blog-card-body {
  padding:18px 20px 20px;
  display:flex; flex-direction:column; flex:1;
}
.blog-card-meta {
  display:flex; gap:8px; align-items:center;
  margin-bottom:10px; font-size:11px; color:var(--steen);
}
.blog-card-body h3 {
  font-size:16px; font-weight:500;
  line-height:1.35; margin:0 0 10px;
  letter-spacing:-0.2px;
}
.blog-card-sub {
  font-size:13px; color:var(--steen);
  line-height:1.55; margin:0 0 16px; flex:1;
}
.blog-card-foot {
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--steen);
}
.blog-card-foot-author {
  display:flex; align-items:center; gap:8px;
}

/* Empty-state */
.blog-empty {
  text-align:center; padding:48px 24px; color:var(--steen);
}
.blog-empty h2 { font-size:20px; font-weight:500; margin:0 0 8px; color:var(--nacht); }

/* Badges per categorie — gedeeld met .leverancier-page maar ook hier
   gespecificeerd op blog-page om collisions met andere .badge-rules te
   vermijden. */
.blog-page .badge,
.blog-post-page .badge {
  display:inline-block;
  padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:500;
  letter-spacing:0.4px; text-transform:uppercase;
  background:var(--mist); color:var(--spar);
}
.blog-page .badge.product, .blog-post-page .badge.product   { background:var(--info-bg); color:var(--info); }
.blog-page .badge.tutorial, .blog-post-page .badge.tutorial { background:var(--paars-bg); color:var(--paars); }
.blog-page .badge.opinion, .blog-post-page .badge.opinion   { background:var(--warn-bg); color:var(--duur); }
.blog-page .badge.update, .blog-post-page .badge.update     { background:var(--mist); color:var(--spar); }

/* ============== ARTICLE PAGE ============== */

.blog-article-head {
  background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
  color:#fff;
  padding:48px 32px 64px;
  position:relative; overflow:hidden;
}
.blog-article-head::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(79,203,142,0.16) 0%, transparent 70%);
  pointer-events:none;
}
.blog-article-head-inner {
  max-width:760px; margin:0 auto; position:relative; z-index:2;
}
.blog-crumbs {
  display:flex; gap:8px; align-items:center;
  font-size:12px; color:var(--munt);
  margin-bottom:26px; flex-wrap:wrap;
}
.blog-crumbs a { color:var(--munt); text-decoration:none; }
.blog-crumbs a:hover { color:#fff; text-decoration:underline; }
.blog-crumbs .sep { color:var(--munt); opacity:0.5; }
.blog-crumbs .current { color:#fff; font-weight:500; }
.blog-article-meta {
  display:flex; gap:10px; align-items:center;
  margin-bottom:16px; font-size:12px; color:var(--munt);
  flex-wrap:wrap;
}
.blog-article-title {
  font-size:36px; font-weight:500;
  line-height:1.2; letter-spacing:-0.6px;
  color:#fff; margin:0 0 14px;
}
.blog-article-lede {
  font-size:17px; color:var(--munt);
  line-height:1.55; margin:0 0 28px; max-width:640px;
}
.blog-article-author {
  display:flex; align-items:center; gap:12px;
  padding-top:24px;
  border-top:1px solid rgba(184,235,210,0.2);
}
.blog-article-author .author-meta-l { font-size:13px; color:#fff; font-weight:500; line-height:1.3; }
.blog-article-author .author-meta-r { font-size:11px; color:var(--munt); }

/* Hero-image — alleen als post.hero_image_url ingevuld is */
.blog-hero-image {
  max-width:1080px; margin:-32px auto 0;
  padding:0 32px;
  position:relative; z-index:3;
}
.blog-hero-image-inner {
  aspect-ratio:16 / 7;
  border-radius:16px;
  overflow:hidden;
  background:var(--nacht);
}
.blog-hero-image-inner img { width:100%; height:100%; object-fit:cover; display:block; }

/* Article body */
article.blog-article-body {
  max-width:720px;
  margin:56px auto 0;
  padding:0 32px 64px;
  font-size:16px;
  line-height:1.7;
  color:var(--nacht);
}
article.blog-article-body h2 {
  font-size:24px; font-weight:500;
  letter-spacing:-0.4px; margin:48px 0 16px;
  line-height:1.3;
}
article.blog-article-body h3 {
  font-size:18px; font-weight:500;
  margin:32px 0 12px; line-height:1.3;
}
article.blog-article-body p { margin:0 0 22px; }
article.blog-article-body > p:first-of-type::first-letter {
  font-size:56px; font-weight:500;
  float:left; line-height:0.95;
  margin:4px 10px 0 0; color:var(--spar);
}
article.blog-article-body ul,
article.blog-article-body ol { margin:0 0 22px 22px; }
article.blog-article-body li { margin-bottom:8px; }
article.blog-article-body strong { font-weight:600; }
article.blog-article-body em { color:var(--steen); font-style:italic; }
article.blog-article-body a { color:var(--spar); text-decoration:underline; }
article.blog-article-body a:hover { color:var(--donker); }
article.blog-article-body code {
  background:var(--grijs);
  padding:2px 6px; border-radius:4px;
  font-family:ui-monospace, 'SF Mono', monospace;
  font-size:14px; color:var(--nacht);
}
article.blog-article-body pre {
  background:var(--nacht); color:#E1F5EE;
  padding:16px 18px; border-radius:10px;
  overflow-x:auto; margin:0 0 22px;
  font-size:13px; line-height:1.55;
}
article.blog-article-body pre code {
  background:transparent; color:inherit; padding:0;
  font-size:13px;
}
article.blog-article-body blockquote {
  margin:36px 0;
  padding:24px 28px;
  background:var(--mist);
  border-left:4px solid var(--slim);
  border-radius:0 12px 12px 0;
  font-size:18px; line-height:1.55;
  color:var(--donker); font-weight:500;
  letter-spacing:-0.2px;
}
article.blog-article-body blockquote p { margin:0; }
article.blog-article-body img {
  max-width:100%; height:auto;
  border-radius:14px;
  margin:24px 0;
  display:block;
}
article.blog-article-body hr {
  border:0; height:1px;
  background:var(--line);
  margin:40px 0;
}

/* Article foot — share, author-bio */
.blog-article-foot {
  max-width:720px; margin:0 auto;
  padding:0 32px;
}
.blog-share {
  display:flex; align-items:center; gap:16px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:32px 0;
}
.blog-share-l {
  font-size:12px; color:var(--steen);
  font-weight:500; text-transform:uppercase;
  letter-spacing:0.5px;
}
.blog-share-buttons { display:flex; gap:8px; }
.blog-share-btn {
  width:36px; height:36px;
  border-radius:9px;
  background:#fff;
  border:1px solid var(--line-2);
  color:var(--steen);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.12s;
  text-decoration:none;
  font-family:inherit;
}
.blog-share-btn:hover { border-color:var(--slim); color:var(--spar); text-decoration:none; }
.blog-share-btn.copied { border-color:var(--slim); background:var(--mist); color:var(--spar); }
.blog-share-btn svg { width:16px; height:16px; }

.blog-author-bio {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 26px;
  display:flex; gap:16px;
  align-items:flex-start;
  margin:32px 0;
}
.blog-author-bio-h { font-size:15px; font-weight:500; margin:0 0 4px; }
.blog-author-bio-meta { font-size:12px; color:var(--steen); margin-bottom:10px; }
.blog-author-bio-text { font-size:14px; color:var(--steen); line-height:1.6; }

/* CTA-strip onderaan article */
.blog-cta-strip {
  max-width:720px; margin:56px auto 0;
  padding:0 32px;
}
.blog-cta-card {
  background:var(--nacht); color:#fff;
  border-radius:16px;
  padding:32px 36px;
  position:relative; overflow:hidden;
}
.blog-cta-card::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.blog-cta-h {
  font-size:22px; font-weight:500;
  letter-spacing:-0.3px; line-height:1.25;
  margin-bottom:8px;
  position:relative; z-index:1;
}
.blog-cta-s {
  font-size:14px; color:var(--munt);
  line-height:1.55; margin-bottom:22px;
  max-width:460px;
  position:relative; z-index:1;
}
.blog-cta-buttons {
  display:flex; gap:10px; flex-wrap:wrap;
  position:relative; z-index:1;
}

/* Related-posts */
.blog-related {
  background:var(--grijs);
  padding:56px 32px;
  margin-top:64px;
}
.blog-related-inner { max-width:1080px; margin:0 auto; }
.blog-related-h {
  font-size:22px; font-weight:500;
  letter-spacing:-0.4px; margin:0 0 24px;
}
.blog-related-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.blog-related-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
.blog-related-card:hover {
  border-color:var(--slim);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(4,46,29,0.06);
  text-decoration:none;
}
.blog-related-thumb {
  aspect-ratio:16 / 9;
  overflow:hidden;
  position:relative;
  background:var(--mist);
}
.blog-related-thumb.thumb-tutorial { background:linear-gradient(135deg, var(--paars-bg) 0%, #DCD9F8 100%); }
.blog-related-thumb.thumb-product  { background:linear-gradient(135deg, var(--info-bg) 0%, #C9E1F8 100%); }
.blog-related-thumb.thumb-opinion  { background:linear-gradient(135deg, var(--warn-bg) 0%, #F5DCAB 100%); }
.blog-related-thumb.thumb-update   { background:linear-gradient(135deg, var(--mist) 0%, var(--munt) 100%); }
.blog-related-body { padding:14px 16px 16px; }
.blog-related-meta {
  display:flex; gap:8px; align-items:center;
  font-size:11px; color:var(--steen);
  margin-bottom:8px;
}
.blog-related-h3 {
  font-size:14px; font-weight:500;
  line-height:1.4; margin:0 0 6px;
  letter-spacing:-0.1px;
}
.blog-related-sub {
  font-size:12px; color:var(--steen);
  line-height:1.55; margin:0;
}

/* ----- BLOG MOBILE ----- */
@media (max-width:760px) {
  .blog-hero { padding:40px 18px 56px; }
  .blog-hero h1 { font-size:26px; }
  .blog-filterbar { padding:12px 18px; }
  main.blog-main { padding:0 18px 60px; }
  .blog-featured { grid-template-columns:1fr; }
  .blog-featured-thumb { min-height:200px; }
  .blog-featured-body { padding:20px 22px 24px; }
  .blog-featured h2 { font-size:22px; }

  .blog-article-head { padding:32px 18px 48px; }
  .blog-article-title { font-size:26px; }
  .blog-article-lede { font-size:15px; }
  .blog-hero-image { padding:0 18px; margin-top:-24px; }
  article.blog-article-body { padding:0 18px 48px; margin-top:40px; font-size:15px; }
  article.blog-article-body > p:first-of-type::first-letter { font-size:44px; }
  .blog-article-foot { padding:0 18px; }
  .blog-related { padding:36px 18px; }
  .blog-related-grid { grid-template-columns:1fr; }
  .blog-related-card .blog-related-thumb { aspect-ratio:16 / 8; }
  .blog-cta-strip { padding:0 18px; }
  .blog-cta-card { padding:24px 22px; }
}