/* ═══════════════════════════════════════════════════════════════════════════
   ENERGIEDASHBOARD v3 — ontwerpsysteem

   Uitgangspunt is een instrumentenpaneel, geen etalage: de meetwaarde is het
   luidste element op het scherm, alles eromheen is stil. Dat betekent één
   neutrale ondergrond, kleur uitsluitend als betekenisdrager (zon, net,
   batterij), en geen decoratie die om aandacht vraagt.

   Ten opzichte van v2 zijn de zwevende gradient-orbs, de regenboog-tekstvulling
   en de grote emoji-iconen weg. Die kostten continu GPU-tijd en maakten het
   aflezen moeilijker.

   Mobiel-first: het basisontwerp is één kolom vanaf 320px, breedere schermen
   krijgen kolommen erbij via een handvol media queries onderaan.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Ontwerptokens ──────────────────────────────────────────────────────── */

:root {
  /* Ondergrond: warm-neutraal donker, geen absoluut zwart — dat oogt hard op
     OLED en laat subtiele scheidingslijnen verdwijnen. */
  --ondergrond:      #0b0d12;
  --vlak:            #12151c;
  --vlak-hoog:       #171b24;
  --rand:            #232833;
  --rand-fel:        #2f3644;

  --tekst:           #e6e9f0;
  --tekst-zacht:     #9aa3b4;
  --tekst-stil:      #626b7d;

  /* Domeinkleuren. Bewust gedempt: ze moeten van elkaar te onderscheiden zijn,
     niet om aandacht schreeuwen. Elk heeft een heldere variant voor tekst en
     een doorschijnende voor vlakken. */
  --zon:             #e8b339;
  --zon-zacht:       rgba(232, 179, 57, 0.12);
  --net:             #e0703c;
  --net-zacht:       rgba(224, 112, 60, 0.12);
  --net-uit:         #3fb37f;
  --net-uit-zacht:   rgba(63, 179, 127, 0.12);
  --bat:             #4a9edd;
  --bat-zacht:       rgba(74, 158, 221, 0.12);
  --huis:            #8b7fd4;
  --huis-zacht:      rgba(139, 127, 212, 0.12);
  --auto:            #b07fd4;
  --auto-zacht:      rgba(176, 127, 212, 0.12);
  --gas:             #d4854a;
  --gas-zacht:       rgba(212, 133, 74, 0.12);
  --water:           #4ab8d4;
  --water-zacht:     rgba(74, 184, 212, 0.12);
  --klimaat:         #58c5b8;
  --klimaat-zacht:   rgba(88, 197, 184, 0.12);

  --goed:            #3fb37f;
  --waarschuwing:    #e8b339;
  --fout:            #e05c5c;

  --r-klein:  6px;
  --r-mid:    10px;
  --r-groot:  14px;

  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;

  --schaduw: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);

  /* Eén vertrouwde systeemstack; cijfers krijgen tabular-nums zodat waarden
     niet zichtbaar verspringen als ze elke seconde wijzigen. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cijfer: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", monospace;

  --nav-hoogte: 52px;
  --zijbalk: 210px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ondergrond);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--nav-hoogte);      /* ruimte voor de mobiele navigatie */
}

/* Alles wat beweegt, beweegt niet als de bezoeker dat liever niet heeft. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ─── Zijbalk ────────────────────────────────────────────────────────────── */

.zijbalk {
  position: fixed; inset: 0 auto 0 0; width: var(--zijbalk);
  z-index: 60;
  display: flex; flex-direction: column;
  background: var(--vlak);
  border-right: 1px solid var(--rand);
  padding: var(--ruimte-4) 0;
  overflow-y: auto;
}

.zb-merk {
  display: flex; align-items: center; gap: var(--ruimte-2);
  padding: 0 var(--ruimte-4) var(--ruimte-5);
  color: var(--tekst); text-decoration: none;
  font-size: .95rem; font-weight: 650; letter-spacing: -.015em;
}
.zb-merk svg { width: 22px; height: 22px; color: var(--zon); flex-shrink: 0; }

.zb-nav { list-style: none; flex: 1; padding-top: var(--ruimte-2); }
.zb-nav a {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-4);
  color: var(--tekst-zacht); text-decoration: none;
  font-size: .85rem; font-weight: 500;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.zb-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }
.zb-nav a:hover { color: var(--tekst); background: var(--vlak-hoog); }
.zb-nav a[aria-current] {
  color: var(--tekst); background: var(--vlak-hoog);
  border-left-color: var(--zon);
}

.zb-voet {
  display: flex; align-items: center; gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-4) 0;
  margin-top: var(--ruimte-4);
  border-top: 1px solid var(--rand);
  font-size: .7rem; color: var(--tekst-stil);
}
.zb-punt {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--tekst-stil);
}
.zb-punt[data-status="goed"] {
  background: var(--goed); box-shadow: 0 0 0 3px color-mix(in srgb, var(--goed) 20%, transparent);
}
.zb-punt[data-status="weg"] {
  background: var(--fout); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fout) 20%, transparent);
}

.romp { margin-left: var(--zijbalk); min-height: 100dvh; }

/* Mobiele navigatie onderaan; de zijbalk verdwijnt dan. */
.nav-mobiel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: var(--nav-hoogte);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--ondergrond) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── Pagina-indeling ────────────────────────────────────────────────────── */

.pagina {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--ruimte-4);
  display: flex; flex-direction: column; gap: var(--ruimte-6);
}

.sectie { display: flex; flex-direction: column; gap: var(--ruimte-3); }

.sectie-kop {
  display: flex; align-items: baseline; gap: var(--ruimte-3);
  padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--rand);
}
.sectie-titel {
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tekst-zacht);
}
.sectie-extra { margin-left: auto; font-size: .8rem; color: var(--tekst-stil); }

/* ─── Kern: de grote actuele waarden ─────────────────────────────────────── */

.kern {
  display: grid; gap: var(--ruimte-3);
  grid-template-columns: repeat(2, 1fr);
}

.kern-tegel {
  position: relative;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--r-groot);
  padding: var(--ruimte-4);
  overflow: hidden;
}
/* Dunne kleurstreep als domeinaanduiding — genoeg om te herkennen, te subtiel
   om af te leiden van het getal zelf. */
.kern-tegel::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--kleur, var(--tekst-stil));
}
.kern-label {
  font-size: .72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tekst-zacht);
  display: flex; align-items: center; gap: var(--ruimte-2);
}
.kern-waarde {
  font-family: var(--font-cijfer);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--ruimte-2);
  line-height: 1.1;
  color: var(--kleur, var(--tekst));
}
.kern-eenheid {
  font-size: .8rem; font-weight: 500;
  color: var(--tekst-stil); margin-left: 2px;
}
.kern-sub {
  font-size: .78rem; color: var(--tekst-stil);
  margin-top: var(--ruimte-1); font-variant-numeric: tabular-nums;
}

/* ─── Stroomdiagram ──────────────────────────────────────────────────────── */

.flow {
  position: relative;
  aspect-ratio: 5 / 4;
  max-height: 52vh;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(139,127,212,.05), transparent 70%),
    var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--r-groot);
  overflow: hidden;
}
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-lijn { fill: none; stroke: var(--rand-fel); stroke-width: 1.5; }
.flow-lijn.actief { stroke: var(--kleur); stroke-opacity: .5; }
/* De stippellijn schuift langs de baan: energie die stroomt, zonder dat er per
   deeltje een DOM-knoop of animatieframe aan te pas komt. */
.flow-stroom {
  fill: none; stroke: var(--kleur); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1 14;
  animation: stromen 1.4s linear infinite;
}
/* Eén volledige dash-periode per cyclus (3 streep + 10 gat), anders lijkt de
   stroom te haperen op het moment dat de animatie herstart. */
@keyframes stromen { to { stroke-dashoffset: -13; } }

.flow-knoop {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; text-align: center; width: 80px;
}
.flow-ring {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--vlak-hoog);
  border: 1.5px solid var(--kleur, var(--rand-fel));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kleur, transparent) 8%, transparent);
}
.flow-knoop.centraal .flow-ring { width: 64px; height: 64px; font-size: 1.4rem; }
.flow-knoop.klein .flow-ring { width: 38px; height: 38px; font-size: .9rem; }
.flow-naam { font-size: .66rem; color: var(--tekst-zacht); line-height: 1.2; }
.flow-waarde {
  font-family: var(--font-cijfer); font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tekst);
}
.flow-soc {
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--rand-fel); overflow: hidden; margin-top: 2px;
}
.flow-soc i { display: block; height: 100%; background: var(--kleur); width: 0; transition: width .5s ease; }

/* ─── Kaarten ────────────────────────────────────────────────────────────── */

.kaarten { display: grid; gap: var(--ruimte-3); grid-template-columns: 1fr; }

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--r-groot);
  overflow: hidden;
}
.kaart-kop {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
}
.kaart-icoon {
  width: 32px; height: 32px; border-radius: var(--r-klein);
  display: grid; place-items: center; font-size: 1rem;
  background: var(--kleur-zacht, var(--vlak-hoog));
  flex-shrink: 0;
}
.kaart-naam { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.kaart-status { font-size: .72rem; color: var(--tekst-stil); }
.kaart-badge {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-cijfer); font-size: .85rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kleur, var(--tekst));
  padding: var(--ruimte-1) var(--ruimte-2);
  background: var(--kleur-zacht, var(--vlak-hoog));
  border-radius: var(--r-klein);
}

/* Meetwaarden in een kaart: twee kolommen op mobiel, meer op groot. */
.metrics {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--rand);
}
.metric { background: var(--vlak); padding: var(--ruimte-3) var(--ruimte-4); }
.metric-label {
  font-size: .68rem; color: var(--tekst-stil);
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metric-waarde {
  font-family: var(--font-cijfer); font-size: .92rem; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Laadbalk voor SOC en vergelijkbare percentages. */
.balk { height: 4px; background: var(--rand); overflow: hidden; }
.balk i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--kleur) 55%, transparent), var(--kleur));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ─── Omvormers met strings ──────────────────────────────────────────────── */

.omvormer { padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--rand); }
.omvormer:last-child { border-bottom: 0; }
.omvormer-kop {
  display: flex; align-items: baseline; gap: var(--ruimte-2);
  font-size: .8rem; margin-bottom: var(--ruimte-2);
}
.omvormer-naam { font-weight: 600; }
.omvormer-meta { color: var(--tekst-stil); font-size: .72rem; }
.omvormer-power {
  margin-left: auto; font-family: var(--font-cijfer); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--zon);
}
/* Eén balkje per string: een paneel dat achterblijft valt meteen op. */
.strings { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ruimte-2); }
.string { display: flex; flex-direction: column; gap: 3px; }
.string-balk {
  height: 26px; border-radius: var(--r-klein);
  background: var(--rand); position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.string-balk i {
  display: block; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--zon), color-mix(in srgb, var(--zon) 55%, transparent));
  transition: height .6s cubic-bezier(.4,0,.2,1);
}
.string-label {
  font-size: .62rem; color: var(--tekst-stil); text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ─── Verbruikerslijst ───────────────────────────────────────────────────── */

.verbruikers { display: flex; flex-direction: column; }
.verbruiker {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-4);
  position: relative;
}
/* De balk zit áchter de tekst in plaats van ernaast: scheelt breedte op mobiel
   en houdt de naam volledig leesbaar. */
.verbruiker::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%); background: var(--huis-zacht);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.verbruiker > * { position: relative; }
.verbruiker-naam { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verbruiker-power {
  font-family: var(--font-cijfer); font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tekst-zacht);
}
.verbruiker.onbekend { background: var(--vlak-hoog); }
.verbruiker.onbekend .verbruiker-naam { color: var(--tekst-stil); font-style: italic; }

/* ─── Grafieken ──────────────────────────────────────────────────────────── */

.grafiek-vlak {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r-groot); padding: var(--ruimte-4);
}
.grafiek-hoogte { position: relative; height: 260px; }
.knopgroep { display: flex; gap: var(--ruimte-1); flex-wrap: wrap; }
.knop {
  font: inherit; font-size: .75rem; font-weight: 500;
  padding: var(--ruimte-1) var(--ruimte-3);
  background: var(--vlak-hoog); color: var(--tekst-zacht);
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.knop:hover { color: var(--tekst); border-color: var(--rand-fel); }
.knop[aria-pressed="true"] {
  background: color-mix(in srgb, var(--huis) 18%, transparent);
  border-color: color-mix(in srgb, var(--huis) 45%, transparent);
  color: var(--tekst);
}

/* ─── Tabellen ───────────────────────────────────────────────────────────── */

.tabel { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tabel th {
  text-align: left; font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-stil);
  padding: var(--ruimte-2) var(--ruimte-3); border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.tabel td {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-bottom: 1px solid var(--rand);
  font-variant-numeric: tabular-nums;
}
.tabel tr:last-child td { border-bottom: 0; }
.tabel .num { text-align: right; font-family: var(--font-cijfer); white-space: nowrap; }
.tabel-wrap { overflow-x: auto; }

/* ─── Statussen en details ───────────────────────────────────────────────── */

.leeg { padding: var(--ruimte-5); text-align: center; color: var(--tekst-stil); font-size: .82rem; }

/* Waarde waarvan de onderliggende historie onvolledig is. Zo'n getal is een
   ondergrens, geen totaal — dat moet zichtbaar zijn, niet verzwegen. */
.partieel::after {
  content: '*'; color: var(--waarschuwing);
  font-size: .8em; vertical-align: super; margin-left: 1px;
}
.voetnoot { font-size: .7rem; color: var(--tekst-stil); }

/* Kort oplichten als een waarde verandert: genoeg om het oog te trekken,
   te kort om te storen. */
@keyframes tik { from { background: color-mix(in srgb, var(--huis) 22%, transparent); } }
.tik { animation: tik .7s ease-out; }

.negatief { color: var(--net-uit); }
.positief { color: var(--net); }

/* ─── Grotere schermen ───────────────────────────────────────────────────── */

@media (min-width: 600px) {
  .kern { grid-template-columns: repeat(3, 1fr); }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .grafiek-hoogte { height: 320px; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .nav-mobiel { display: none; }
  .nav {
    display: flex; gap: var(--ruimte-1);
  }
  .nav a {
    font-size: .82rem; font-weight: 500; text-decoration: none;
    color: var(--tekst-stil); padding: var(--ruimte-2) var(--ruimte-3);
    border-radius: var(--r-klein);
  }
  .nav a:hover { color: var(--tekst); background: var(--vlak); }
  .nav a[aria-current] { color: var(--tekst); background: var(--vlak-hoog); }

  .pagina { padding: var(--ruimte-5); }
  .kern { grid-template-columns: repeat(6, 1fr); }
  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .flow { aspect-ratio: 12 / 5; max-height: 58vh; }
}

@media (min-width: 1300px) {
  .kaarten { grid-template-columns: repeat(3, 1fr); }
  .kaart.breed { grid-column: span 2; }
}

/* Sommige schermen staan in de meterkast en worden nooit van dichtbij gelezen;
   daar helpt een groter grondformaat. */
@media (min-width: 1900px) {
  body { font-size: 16px; }
  .pagina { max-width: 1700px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGINA — de foto met zwevende tegels
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  border-radius: var(--r-groot);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  max-height: 68vh;
  background: var(--vlak);
  border: 1px solid var(--rand);
}

.hero-foto { position: absolute; inset: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Donkere sluier boven en onder: zonder dat is witte tekst op een lucht bij
   zonsopgang onleesbaar. Het midden van de foto blijft onaangetast. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,8,14,.80) 0%, rgba(6,8,14,.18) 24%,
                    rgba(6,8,14,.05) 55%, rgba(6,8,14,.55) 100%);
}
/* Alles boven de foto en boven de donkere sluier. Uitdrukkelijk alleen z-index:
   `position: relative` zou de absolute plaatsing van de tegels ongedaan maken. */
.hero > *:not(.hero-foto) { z-index: 2; }
.hero-foto { z-index: 0; }

/* ─── Statusbalk over de foto ─────────────────────────────────────────────── */

.hero-status, .hero-regel2 {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  font-size: .78rem; color: #dfe4ee;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.hero-status { top: 0; }
.hero-regel2 { top: 2.6rem; font-size: .74rem; color: #c3cad8; }

.hs-item { display: flex; align-items: center; gap: 4px; }
.hs-icoon { opacity: .85; }
.hs-scheiding { width: 1px; height: 12px; background: rgba(255,255,255,.22); }
.hs-live {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(63,179,127,.16);
  border: 1px solid rgba(63,179,127,.45);
  color: #7ee0b0; font-size: .68rem; font-weight: 600;
}
.hs-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--goed);
  animation: pols 2s ease-in-out infinite;
}
@keyframes pols { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.hero-regel2 strong { color: #fff; font-weight: 650; }
.hr2-opwek { margin-left: auto; color: var(--zon); font-weight: 650; }

/* ─── Zwevende tegels ─────────────────────────────────────────────────────── */

.tegel {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  min-width: 96px;
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--r-mid);
  /* Glas: doorschijnend genoeg om de foto te tonen, donker genoeg om het getal
     leesbaar te houden tegen zowel lucht als bakstenen gevel. */
  background: rgba(12,16,24,.62);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
  color: #fff;
}
/* Tegels dicht bij de rand naar binnen uitlijnen, anders valt de helft buiten
   de foto — op een telefoon was de nettegel links half onzichtbaar. */
.tegel.links  { transform: translate(0, -50%); }
.tegel.rechts { transform: translate(-100%, -50%); }

.tegel.centraal { min-width: 118px; }
.tegel.klein { min-width: 84px; padding: 5px var(--ruimte-2); }

.tegel-kop {
  display: flex; align-items: center; gap: 5px;
  font-size: .58rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.tegel-icoon { font-size: .72rem; }
.tegel-waarde {
  font-family: var(--font-cijfer);
  font-size: 1.15rem; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  color: var(--kleur, #fff);
  white-space: nowrap;
}
.tegel.centraal .tegel-waarde { font-size: 1.4rem; }
.tegel.klein .tegel-waarde { font-size: .92rem; }
.tegel-sub {
  font-size: .62rem; color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tegel-sub:empty { display: none; }
.tegel-balk {
  height: 3px; border-radius: 2px; margin: 3px 0 2px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.tegel-balk i {
  display: block; height: 100%; width: 0; background: var(--kleur);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ─── Stroomlijnen over de foto ───────────────────────────────────────────── */

.hero-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Over een foto moeten deze lijnen harder werken dan over een egaal vlak: een
   dunne halftransparante streep verdwijnt volledig in een gevel of een lucht.
   Vandaar een donkere onderlaag als contrast en dikkere, grotere stippen. */
.hl-baan {
  fill: none; stroke: rgba(0,0,0,.35); stroke-width: 4; stroke-linecap: round;
}
.hl-stroom {
  fill: none; stroke: var(--kleur); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 3 10;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.7)) drop-shadow(0 0 6px var(--kleur));
  animation: stromen 1.3s linear infinite;
}

/* ═══ Samenvattingskaarten onder de foto ══════════════════════════════════ */

.samenvatting { display: grid; gap: var(--ruimte-3); grid-template-columns: repeat(2, 1fr); }
.sk {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--ruimte-3);
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r-groot); padding: var(--ruimte-3) var(--ruimte-4);
}
.sk::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--kleur);
}
.sk-icoon {
  width: 34px; height: 34px; border-radius: var(--r-klein); flex-shrink: 0;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--kleur-zacht);
}
.sk-label {
  font-size: .64rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tekst-stil);
}
.sk-waarde {
  font-family: var(--font-cijfer); font-size: 1.3rem; font-weight: 650;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.sk-eenheid { font-size: .72rem; color: var(--tekst-stil); margin-left: 3px; }
.sk-rijen { flex: 1; }
.sk-rij {
  display: flex; justify-content: space-between; gap: var(--ruimte-3);
  font-size: .76rem; padding: 1px 0;
}
.sk-rij span:first-child { color: var(--tekst-stil); }
.sk-rij span:last-child {
  font-family: var(--font-cijfer); font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ═══ Panelen ═════════════════════════════════════════════════════════════ */

.paneel {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r-groot); padding: var(--ruimte-4);
}
.paneel-kop {
  display: flex; align-items: center; gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-4); flex-wrap: wrap;
}
.paneel-kop-los { margin-bottom: 0; }
.paneel-kop h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tekst-zacht);
}
.paneel-kop .knopgroep { margin-left: auto; }
.paneel-sub {
  font-size: .74rem; color: var(--tekst-stil);
  font-weight: 400; letter-spacing: 0; text-transform: none;
}

.duo { display: grid; gap: var(--ruimte-3); grid-template-columns: 1fr; }

/* ─── Inloggen en toegang ─────────────────────────────────────────────────── */

.inlog { max-width: 32rem; margin: 0 auto; text-align: center; }
.inlog-kop svg { width: 2.4rem; height: 2.4rem; color: var(--auto); }
.inlog-kop h1 { font-size: 1.15rem; margin: var(--ruimte-2) 0 var(--ruimte-2); }
.inlog-kop p {
  font-size: .84rem; color: var(--tekst-zacht); line-height: 1.55;
  margin: 0 auto var(--ruimte-4); max-width: 26rem;
}
.inlog-knop {
  display: inline-block; text-decoration: none;
  font-size: .9rem; padding: var(--ruimte-3) var(--ruimte-5);
  background: color-mix(in srgb, var(--auto) 20%, transparent);
  border-color: color-mix(in srgb, var(--auto) 45%, transparent);
  color: var(--tekst);
}
.inlog-knop:hover:not(:disabled) { background: color-mix(in srgb, var(--auto) 30%, transparent); }
.inlog-knop:disabled { opacity: .5; cursor: default; }
.inlog-uitnodiging { margin-top: var(--ruimte-5); text-align: left; }
.inlog-uitnodiging summary {
  cursor: pointer; font-size: .8rem; color: var(--tekst-zacht);
  text-align: center; padding: var(--ruimte-2);
}
.inlog-uitnodiging p { font-size: .78rem; color: var(--tekst-stil); line-height: 1.55; }
.inlog-uitnodiging form { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }
.inlog-uitnodiging input {
  flex: 1 1 12rem; min-width: 0; font: inherit;
  font-family: var(--font-cijfer); letter-spacing: .08em; text-transform: uppercase;
  background: var(--vlak-hoog); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  padding: var(--ruimte-2) var(--ruimte-3);
}
.inlog-melding { margin-top: var(--ruimte-4); font-size: .82rem; color: var(--waarschuwing); }
.inlog-melding.goed { color: var(--goed); }
.inlog-melding.bezig { color: var(--tekst-stil); }
.zb-slot { margin-left: auto; font-size: .7rem; opacity: .6; }
.zb-wie { justify-content: space-between; gap: var(--ruimte-2); }
.zb-uit {
  font: inherit; font-size: .72rem; color: var(--tekst-stil);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.zb-uit:hover { color: var(--tekst); }
.passkey-weg {
  font: inherit; font-size: .7rem; color: var(--tekst-stil);
  background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0;
}
.passkey-weg:hover { color: var(--waarschuwing); }

/* ─── Laadsessies: filter op persoon en periode ───────────────────────────── */

.sessie-filter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ruimte-2) var(--ruimte-3); margin-bottom: var(--ruimte-3);
}
.keuze {
  display: flex; align-items: center; gap: var(--ruimte-2);
  font-size: .75rem; color: var(--tekst-stil); max-width: 100%;
}
.keuze select {
  font: inherit; font-size: .78rem; color: var(--tekst);
  background: var(--vlak-hoog); border: 1px solid var(--rand);
  border-radius: var(--r-klein); padding: var(--ruimte-1) var(--ruimte-2);
  min-width: 0; max-width: 100%;
}
.keuze select:focus-visible { outline: 2px solid var(--huis); outline-offset: 1px; }
.periode-nav { display: flex; align-items: center; gap: var(--ruimte-2); }
.periode-nav .knop { padding: var(--ruimte-1) var(--ruimte-2); min-width: 2rem; }
.periode-nav .knop:disabled { opacity: .35; cursor: default; }
#sessies-label {
  font-size: .8rem; font-weight: 600; color: var(--tekst);
  min-width: 9ch; text-align: center; white-space: nowrap;
}
.per-persoon {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3);
}
.persoon {
  font: inherit; font-size: .74rem; text-align: left; cursor: pointer;
  background: var(--vlak-hoog); color: var(--tekst-zacht);
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  padding: var(--ruimte-2) var(--ruimte-3); line-height: 1.35;
}
.persoon:hover { border-color: var(--rand-fel); color: var(--tekst); }
.persoon b { display: block; color: var(--tekst); font-weight: 600; }
.persoon span { font-family: var(--font-cijfer); font-variant-numeric: tabular-nums; }
.tabel tr.totaalregel td { border-top: 2px solid var(--rand-fel); font-weight: 650; }

/* ─── Zelfvoorzieningsring ────────────────────────────────────────────────── */

.perdag { display: grid; gap: var(--ruimte-4); grid-template-columns: 1fr; }
.zelfv { position: relative; width: 150px; margin: 0 auto; }
.zelfv-ring { width: 100%; transform: rotate(-90deg); }
.zr-baan { fill: none; stroke: var(--rand); stroke-width: 9; }
.zr-vul {
  fill: none; stroke: var(--goed); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1);
}
.zelfv-tekst {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.zelfv-getal {
  font-family: var(--font-cijfer); font-size: 1.9rem; font-weight: 650;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.zelfv-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tekst-stil);
}

/* ─── Saldering ───────────────────────────────────────────────────────────── */

.sald-rij {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--ruimte-3); padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--rand); font-size: .84rem;
}
.sald-rij:last-of-type { border-bottom: 0; }
.sald-rij b {
  font-family: var(--font-cijfer); font-weight: 650;
  font-variant-numeric: tabular-nums; font-size: .95rem;
}
.sald-balk {
  height: 8px; border-radius: 4px; overflow: hidden; display: flex;
  background: var(--rand); margin: var(--ruimte-3) 0;
}
.sald-balk i { display: block; height: 100%; transition: width .8s ease; }
.sald-uitleg {
  font-size: .74rem; color: var(--tekst-stil); line-height: 1.5;
  margin-top: var(--ruimte-3);
}

/* ─── kWh-prijs ───────────────────────────────────────────────────────────── */

.prijsblok {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--ruimte-3); padding: var(--ruimte-3) 0;
  border-bottom: 1px solid var(--rand);
}
.prijsblok:last-child { border-bottom: 0; }
.pb-label { font-size: .8rem; }
.pb-sub { font-size: .68rem; color: var(--tekst-stil); }
.pb-waarde {
  font-family: var(--font-cijfer); font-size: 1.25rem; font-weight: 650;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ═══ Schermformaten ══════════════════════════════════════════════════════ */

/* Op smalle telefoons past "Teruggeleverd 0,78 kWh" niet naast een tweede
   kaart; dan liever één kolom dan een afgekapte eenheid. */
@media (max-width: 430px) {
  .samenvatting { grid-template-columns: 1fr; }
}

@media (min-width: 700px) {
  .samenvatting { grid-template-columns: repeat(4, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }
  .perdag { grid-template-columns: 170px 1fr; align-items: center; }
}

@media (max-width: 899px) {
  .zijbalk { display: none; }
  .romp { margin-left: 0; }
  /* Een 3:2-foto met zeven tegels wordt op een telefoon onleesbaar; een hoger
     formaat geeft de tegels de ruimte die ze nodig hebben. */
  .hero { aspect-ratio: 4 / 5; max-height: none; }
  /* Eigen posities en uitlijning voor de staande uitsnede. */
  .tegel { left: var(--mx); top: var(--my); transform: translate(-50%, -50%); }
  .tegel.mlinks  { transform: translate(0, -50%); }
  .tegel.mrechts { transform: translate(-100%, -50%); }
  .tegel { min-width: 76px; padding: 4px var(--ruimte-2); }
  .tegel-waarde { font-size: .9rem; }
  .tegel.centraal .tegel-waarde { font-size: 1.05rem; }
  .tegel-kop { font-size: .5rem; }
  .tegel-sub { font-size: .54rem; }
  .hero-status { font-size: .66rem; gap: var(--ruimte-2); }
  .hero-regel2 { top: 2.1rem; font-size: .64rem; }
  .hs-zon { display: none; }
  /* Staat al als tegel op de foto; hier botst hij met de Live-badge. */
  .hr2-opwek { display: none; }

  /* Twee kaarten naast elkaar op 375px: labels mogen inkorten, het getal niet. */
  .sk { padding: var(--ruimte-3); gap: var(--ruimte-2); }
  .sk-icoon { width: 28px; height: 28px; font-size: .85rem; }
  .sk-label { font-size: .58rem; }
  .sk-waarde { font-size: 1.1rem; }
  .sk-rij { font-size: .68rem; gap: var(--ruimte-1); }
  .sk-rij span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sk-rij span:last-child { white-space: nowrap; }
}

@media (min-width: 900px) {
  .nav-mobiel { display: none; }
  body { padding-bottom: 0; }
}

/* ─── Mobiele onderbalk en uitklapmenu ───────────────────────────────────── */

/* De balk toont vier pagina's plus "Meer". De overige pagina's zitten in het
   uitklapmenu; zonder dat waren ze op een telefoon onbereikbaar. */
.nav-mobiel a, .nav-mobiel .nav-meer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none;
  color: var(--tekst-stil); font-size: .62rem; font-weight: 500;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 0; min-width: 0;
}
.nav-mobiel svg { width: 19px; height: 19px; flex-shrink: 0; }
.nav-mobiel span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-mobiel a[aria-current], .nav-mobiel .nav-meer[aria-current] {
  color: var(--tekst); box-shadow: inset 0 2px 0 var(--zon);
}
.nav-mobiel .nav-meer[aria-expanded="true"] { color: var(--tekst); }

.meer-scherm {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4, 6, 12, .6);
  animation: vervaag .18s ease-out;
}
@keyframes vervaag { from { opacity: 0; } }

.meer-blad {
  position: fixed; left: 0; right: 0; bottom: var(--nav-hoogte); z-index: 90;
  background: var(--vlak);
  border-top: 1px solid var(--rand);
  border-radius: var(--r-groot) var(--r-groot) 0 0;
  padding: var(--ruimte-2) 0 var(--ruimte-3);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .5);
  max-height: 70vh; overflow-y: auto;
  animation: omhoog .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes omhoog { from { transform: translateY(100%); } }

/* Greepje bovenaan: maakt zichtbaar dat het paneel hoort bij de balk eronder. */
.meer-greep {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--rand-fel); margin: 0 auto var(--ruimte-2);
}
.meer-blad a {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  color: var(--tekst-zacht); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  border-left: 3px solid transparent;
}
.meer-blad a svg { width: 19px; height: 19px; flex-shrink: 0; }
.meer-blad a[aria-current] {
  color: var(--tekst); background: var(--vlak-hoog); border-left-color: var(--zon);
}

/* Op een breed scherm bestaat de onderbalk niet, dus het menu ook niet. */
@media (min-width: 900px) {
  .meer-blad, .meer-scherm { display: none !important; }
}

/* Merkje achter een verbruiker die een hele meterkastgroep meet in plaats van
   één apparaat. Zonder dat lijkt "Groep 1" gewoon een stekker. */
.v-merk {
  font-size: .58rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tekst-stil);
  border: 1px solid var(--rand-fel); border-radius: 3px;
  padding: 0 4px; margin-left: 6px; vertical-align: 1px;
}