:root {
  --bg:#101820;
  --panel:#172331;
  --panel2:#0f141a;
  --text:#f2f6fa;
  --muted:#c8d3df;
  --border:#2d4054;
  --ok:#2ecc71;
  --bad:#ff4d4d;
  --check:orange;
  --idle:#686764;
  --blue:#2563eb;
  --yellow:#fff3a0;
}

* { box-sizing:border-box; }

html, body {
  width:100%;
  min-height:0;
  height:auto;
  margin:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  line-height:1.35;
}

body, div, span, p, td, th, label, button {
  color:var(--text);
}

/* HOOFDSCHERM */

.dashboard, #dashboard, .scherm, .main,
.container, .pagina, #pagina-scherm {
  width:100%;
  max-width:none;
  min-height:0;
  height:auto;
  margin:0;
  padding:8px;
  padding-bottom:8px;
  background:var(--bg);
  color:var(--text);
}

.dashboard-kop {
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 14px;
}

.dashboard-kop h1 { margin:0; }

.p1-logo {
  width:64px;
  height:64px;
  object-fit:contain;
  flex:0 0 auto;
}

.topbar {
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-size:16px;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.topbar-datumtijd {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:16px;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1.2;
}

.topbar-datumtijd > span {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

#clock_small {
  min-width:8ch;
  font-variant-numeric:tabular-nums;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
}

.p1-icon {
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#1b2733,#101820);
  border:1px solid var(--border);
  font-size:24px;
  box-shadow:inset 0 0 10px rgba(255,255,255,0.04);
}

.title {
  font-size:28px;
  font-weight:bold;
  color:#ffffff;
}

.subtitle {
  color:var(--muted);
  font-size:18px;
  margin-top:2px;
}

.gewijzigd { outline:2px solid #ffcc00; }

.licht-op {
  background:transparent !important;
  font-weight:900 !important;
  filter:brightness(1.8);
}

.import-getal { color:red; }
.export-getal { color:green; }
.euro-teken { color:rgb(62,166,201); }

.batterij-getal {
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* MENU */

.menu, #menu, .menu-balk {
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:#0b121a;
  border-top:1px solid #374151;
  border-bottom:1px solid #374151;
  position:sticky;
  top:0;
  z-index:100;
}

.menu-knop, .menu button {
  min-width:120px;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid #40576e;
  background:#26384a;
  color:#ffffff;
  cursor:pointer;
  font-size:17px;
  font-weight:700;
  font-family:inherit;
}

.menu-knop:hover, .menu-knop.actief, .menu button:hover {
  background:#35506a;
  color:#ffffff;
}

.menu-knop.actief { border-color:#60a5fa; }

/* BLOKKEN EN REGELS */

.block, .blok, .card, .tegel, .panel, .vak, .bottom-card {
  width:100%;
  max-width:100%;
  min-height:0;
  margin-bottom:8px;
  padding:10px 12px;
  background:linear-gradient(180deg,#172331,#0f141a);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:none;
  line-height:1.45;
  font-size:17px;
}

.block:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 14px rgba(0,0,0,0.55);
}

.block-title, .blok-titel, .card-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:6px;
  color:#ffffff;
  font-size:20px;
  font-weight:700;
}

.title-left, .title-right {
  display:flex;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px;
}

.title-right {
  color:var(--muted);
  justify-content:flex-start;
}

.title-time {
  color:#dce7f3;
  margin-left:3px;
}

.row, .block .row, .blok .row, .card .row {
  display:flex;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:4px 0;
  line-height:1.45;
}

.row span, .block .row span {
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
}

.row.compact { gap:10px; }
.full-row { grid-column:1 / -1; width:100%; }
.k, .label, .veld-label, .data-label { color:var(--muted); }

.v, .waarde, .value, .data-waarde, .meter-waarde {
  color:#ffffff;
  font-weight:700;
}

.waarde.import-getal { color:red; }
.waarde.export-getal { color:green; }
.euro-teken { color:rgb(62,166,201); }
.down { color:#ff6969; font-weight:bold; }
.up { color:#72ff72; font-weight:bold; }

.bottom-grid {
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}

/* LEDS */

.led {
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--idle);
  display:inline-block;
  margin-right:3px;
  box-shadow:inset 0 0 4px #000;
  transition:all 0.2s ease;
}

.led.ok {
  background:var(--ok);
  box-shadow:0 0 8px var(--ok);
}

.led.bad, .led.alarm {
  background:var(--bad);
  box-shadow:0 0 8px var(--bad);
  animation:blink 0.8s infinite;
}

.led.idle { background:var(--idle); box-shadow:none; }

.led.check {
  background:var(--check);
  box-shadow:0 0 8px var(--check);
  animation:blink 0.7s infinite;
}

@keyframes blink {
  0% { opacity:1; }
  50% { opacity:0.25; }
  100% { opacity:1; }
}

/* KLOK / TOPBAR */

.clockbox {
  width:auto;
  min-width:150px;
  margin-left:0;
  background:rgba(20,25,32,0.85);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 10px;
  box-shadow:0 0 10px rgba(0,0,0,0.35);
  backdrop-filter:blur(4px);
}

.clock-time {
  font-size:25px;
  font-weight:bold;
  display:flex;
  align-items:center;
  gap:6px;
}

.clock-quarter {
  margin-top:2px;
  font-size:18px;
  color:var(--muted);
}

#prijzen_smiley { font-size:25px; margin-left:10px; }

/* KWARTIER ZANDLOPER */

.topbar {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

body { position:relative; }

#kwartier_zandloper {
  position:absolute;
  top:16px;
  right:24px;
  width:70px;
  height:90px;
  object-fit:contain;
  margin:0;
  transform-origin:center;
  z-index:10;
}

.kwartier_zandloper.actief {
  opacity:1;
  animation:zandloperPuls 0.8s ease-in-out 3;
}

@keyframes zandloperPuls {
  0% { transform:scale(1) rotate(0deg); }
  50% { transform:scale(1.35) rotate(180deg); }
  100% { transform:scale(1) rotate(360deg); }
}

/* LIVE DAGRESULTAAT EN KWARTIER-COUNTDOWN */

.topbar {
  position:relative;
  min-height:50px;
  padding:30px 145px 2px 5px;
}

.topbar-live {
  position:absolute;
  top:0;
  right:4px;
  width:145px;
  height:25px;
}

.dagresultaat-live {
  position:absolute;
  top:8px;
  right:39px;
  margin:0;
  font-size:14px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  transform-origin:center bottom;
  will-change:transform, filter;
}

.dagresultaat-live.positief { color:#f4c542; animation:none; }
.dagresultaat-live.negatief { color:#ff6969; animation:none; }
.dagresultaat-live.neutraal { color:var(--muted); animation:none; }

@keyframes dagobertVrolijk {
  0%, 68%, 100% { transform:translateY(0) rotate(0); }
  76% { transform:translateY(-3px) rotate(-2deg); }
  84% { transform:translateY(0) rotate(2deg); }
  92% { transform:translateY(-1px) rotate(0); }
}

@keyframes dagobertSomber {
  0%, 100% {
    transform:translateY(1px) rotate(0);
    filter:saturate(0.82);
  }
  50% {
    transform:translateY(4px) rotate(-1deg);
    filter:saturate(0.58);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dagresultaat-live.positief,
  .dagresultaat-live.negatief {
    animation:none;
  }
}

.kwartier-widget {
  position:absolute;
  top:-42px;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}

#kwartier_zandloper {
  position:static;
  width:32px;
  height:34px;
  opacity:0.75;
  object-fit:contain;
  margin:0;
}

.kwartier-countdown {
  margin-top:1px;
  color:var(--muted);
  font:700 11px/1 Consolas, monospace;
  white-space:nowrap;
}

.kwartier_zandloper.actief {
  opacity:1;
  animation:zandloperDubbel 1.6s ease-in-out 1;
}

@keyframes zandloperDubbel {
  0% { transform:scale(1) rotate(0deg); }
  50% { transform:scale(1.18) rotate(360deg); }
  100% { transform:scale(1) rotate(720deg); }
}

/* GRAFIEK KLEIN HOOFDSCHERM */

.grafiek-block {
  width:100%;
  max-width:100%;
  min-height:260px;
  padding:10px;
  border-top:0 solid #2a3440;
  align-items:flex-start;
}

.grafiek-wrap {
  width:100%;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#0e141b;
  border:none;
  overflow:hidden;
}

.grafiek-img, #grafiek-klein {
  display:block;
  width:520px;
  max-width:95%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:left center;
  margin-top:8px;
  border:none;
  border-radius:0;
}

img { max-width:100%; }

/* ZICHTBAARHEID */

.hidden { display:none !important; }

/* MELDINGEN */

.healthbar { font-size:18px; gap:4px; }
.healthbar .led { margin:0 4px 0 1px; }

.meldingen, .meldingen-popup-lijst {
  scrollbar-color:#202a33 #0f141a;
}

.melding-row {
  padding:3px 0;
  border-bottom:1px solid #223140;
}

.melding-row:first-child {
  font-weight:bold;
  color:#ffffff;
}

.dashboard-meetstatus {
  position:fixed;
  z-index:1200;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  width:calc(100% - 6px);
  max-width:354px;
  min-width:0;
  padding:3px 6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--panel2);
  font-size:13px;
  line-height:1.2;
  pointer-events:none;
}

.dashboard-meetstatus:empty { display:none; }
.dashboard-meetstatus.alarm { color:var(--yellow); }
.dashboard-meetstatus.hervat { color:var(--ok); }

.meldingen::-webkit-scrollbar,
.meldingen-popup-lijst::-webkit-scrollbar {
  width:10px;
}

.meldingen::-webkit-scrollbar-track,
.meldingen-popup-lijst::-webkit-scrollbar-track {
  background:#0f141a;
}

.meldingen::-webkit-scrollbar-thumb,
.meldingen-popup-lijst::-webkit-scrollbar-thumb {
  background:#202a33;
  border-radius:6px;
}

.meldingen::-webkit-scrollbar-thumb:hover,
.meldingen-popup-lijst::-webkit-scrollbar-thumb:hover {
  background:#2b3540;
}

/* POPUP-SCHERM */

#popup-scherm, .popup-scherm {
  display:none;
  position:fixed;
  left:4px;
  right:4px;
  top:58px;
  bottom:4px;
  z-index:99999;
  background:#111827;
  color:#ffffff;
  border:none;
  border-radius:0;
  padding:6px;
  box-shadow:none;
  overflow:hidden;
}

.popup-inhoud {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  background:#172331;
  border:1px solid #40576e;
  border-radius:10px;
  padding:10px;
  color:#ffffff;
  overflow:hidden;
}

.popup-kop {
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:white;
  font-size:18px;
  font-weight:600;
  border-bottom:1px solid #334155;
  margin-bottom:6px;
}

.popup-sluit {
  display:block;
  min-width:42px;
  height:30px;
  background:#7f1d1d;
  color:white;
  border:none;
  border-radius:6px;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  z-index:100000;
}

.popup-deel {
  display:none;
  width:100%;
  height:calc(100% - 44px);
}

.grafiek-keuze-wrap, .opdracht-keuze-wrap {
  max-width:760px;
  margin:34px auto 0;
  padding:24px;
  background:#111827;
  border:1px solid #40576e;
  border-radius:10px;
}

.grafiek-keuze-wrap label, .opdracht-keuze-wrap label {
  display:block;
  margin-bottom:14px;
  color:#ffffff;
  font-size:20px;
}

.grafiek-keuze-select, .opdracht-keuze-select {
  display:block;
  width:100%;
  min-height:52px;
  padding:10px 14px;
  color:#ffffff;
  background:#172331;
  border:1px solid #5f7891;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}

.grafiek-keuze-select:focus, .opdracht-keuze-select:focus {
  border-color:#56c2ff;
  outline:2px solid rgba(86,194,255,0.3);
}

.grafiek-keuze-status {
  min-height:24px;
  margin-top:14px;
  color:#b9d9ee;
  font-size:16px;
}

.grafiek-keuze-status.fout { color:#ff8d8d; }

.opdracht-resultaat {
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-height:24px;
  margin-top:14px;
  color:#b9d9ee;
  font-size:16px;
}

.opdracht-resultaat .led {
  flex:0 0 auto;
  margin-top:5px;
}

#opdracht_status {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.grafiek-groot-wrap {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#grafiek-groot, .grafiek-groot {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border:none;
}

.meldingen-popup-lijst {
  width:100%;
  height:100%;
  overflow-y:auto;
  color:white;
  font-size:18px;
  line-height:1.4;
  background:var(--panel2);
  border:none;
  border-radius:0;
  padding:8px;
  font-family:Consolas, monospace;
}

#debug-popup-tekst {
  width:100%;
  height:100%;
  overflow:auto;
  color:white;
  font-size:18px;
  white-space:pre-wrap;
  background:var(--panel2);
  border:none;
  border-radius:0;
  padding:8px;
}

.melding-popup {
  position:fixed;
  top:18px;
  right:18px;
  z-index:10000;
  min-width:280px;
  max-width:420px;
  background:#1f2937;
  color:#ffffff;
  border:1px solid #374151;
  border-left:6px solid #f59e0b;
  border-radius:10px;
  padding:12px 14px;
  box-shadow:0 10px 25px rgba(0,0,0,0.45);
  font-size:15px;
}

.melding-popup.hidden { display:none; }
.melding-popup-titel { font-weight:700; margin-bottom:5px; color:#fbbf24; }
.melding-popup-tekst { line-height:1.35; color:#e5e7eb; }
.melding-popup.alarm { border-left-color:#ef4444; }
.melding-popup.alarm .melding-popup-titel { color:#f87171; }
.melding-popup.ok { border-left-color:#22c55e; }
.melding-popup.ok .melding-popup-titel { color:#4ade80; }

#popup-scherm.open, .popup-scherm.open {
  display:block !important;
}

.popup-deel.open { display:block !important; }

/* FINANCIEEL */

#popup-financieel { overflow-y:auto; padding:8px; }

.financieel-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:12px;
  align-items:start;
}

.financieel-sectie {
  min-width:0;
  padding:14px;
  background:#111827;
  border:1px solid #40576e;
  border-radius:10px;
}

.financieel-sectie h3 {
  margin:0 0 10px;
  color:#ffffff;
  font-size:19px;
}

.financieel-regel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-bottom:1px solid #26384a;
}

.financieel-regel:last-child { border-bottom:0; }

.financieel-label {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--muted);
}

.financieel-bedrag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:lightblue;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.financieel-tijd { text-align:right; white-space:nowrap; }

/* INSTELLINGEN */

#popup-instellingen { padding:8px; }
.instelling-regel { margin-bottom:12px; }

.instelling-invoer {
  display:flex;
  align-items:center;
  gap:8px;
}

#gemiddelde_importprijs, #gemiddelde_exportprijs {
  width:150px;
  padding:6px 8px;
  font-size:17px;
  color:#000000;
  background:#ffffff;
  border:1px solid #8fa1b3;
  border-radius:4px;
}

#instellingen_opslaan {
  display:inline-block;
  margin-top:10px;
  padding:8px 18px;
  font-size:17px;
  font-weight:bold;
  color:#ffffff;
  background:#2563eb;
  border:1px solid #60a5fa;
  border-radius:6px;
  cursor:pointer;
  opacity:1;
}

#instellingen_opslaan:hover { background:#355fd4; }

#instellingen-melding {
  display:inline-block;
  margin-left:12px;
  color:#ffffff;
}

/* COMPACTE SCHERMINDELING VOOR TELEFOON EN LAPTOP */

html, body {
  min-width:0;
  font-size:15px;
  line-height:1.25;
}

body > .dashboard-kop,
body > .topbar,
body > .menu-balk,
body > #pagina-scherm {
  width:100%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

.dashboard-kop {
  min-height:42px;
  margin-top:2px !important;
  margin-bottom:2px !important;
  padding:2px 5px;
  gap:7px;
  font-size:21px;
  line-height:1.1;
}

.p1-logo { width:38px; height:38px; }

.topbar {
  min-height:25px;
  padding:3px 145px 3px 5px;
  gap:2px;
  border-bottom:0;
  font-size:14px;
  line-height:1.2;
}

#kwartier_zandloper { width:32px; height:34px; }

.menu, #menu, .menu-balk {
  min-height:0;
  gap:3px;
  padding:3px 4px;
  background:#102633;
  border-color:#29495c;
  overflow:hidden;
}

.menu-knop, .menu button {
  flex:1 1 0;
  min-width:0;
  padding:6px 1px;
  border-color:#2f7188;
  border-radius:5px;
  background:#15546b;
  color:#e9f8ff;
  font-size:11.5px;
  line-height:1.1;
}

.menu-knop:hover, .menu-knop.actief, .menu button:hover {
  background:#237896;
  color:#ffffff;
}

.dashboard, #dashboard, .scherm, .main,
.container, .pagina, #pagina-scherm {
  min-height:0;
  height:auto;
  padding:3px;
  padding-bottom:3px;
}

.block, .blok, .card, .tegel, .panel, .vak, .bottom-card {
  min-height:0;
  height:auto;
  margin-bottom:3px;
  padding:5px 6px;
  border-radius:6px;
  line-height:1.25;
  font-size:15px;
}

.block:hover { transform:none; box-shadow:none; }

.block-title, .blok-titel, .card-title {
  gap:3px 8px;
  margin-bottom:2px;
  font-size:17px;
  line-height:1.2;
}

.row, .block .row, .blok .row, .card .row {
  gap:2px 8px;
  margin:1px 0;
  line-height:1.25;
}

.row span, .block .row span { gap:2px; }

.meter-regel, .p1-totalen { align-items:center; }

.led {
  width:9px;
  height:9px;
  margin-right:1px;
}

.grafiek-block {
  min-height:0;
  height:auto;
  padding:4px 5px;
}

.grafiek-wrap {
  width:100%;
  min-height:0;
  height:auto;
  display:block;
  background:transparent;
  overflow:hidden;
}

.grafiek-img, #grafiek-klein {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none;
  margin:0;
  object-fit:contain;
  object-position:center;
}

.periode-label { min-width:43px; color:var(--muted); }

.uur-combinatie {
  flex-wrap:nowrap;
  gap:2px 4px;
  font-size:15px;
  white-space:nowrap;
}

.uur-combinatie .periode-label { min-width:auto; }

.dag-combinatie {
  flex-wrap:nowrap;
  gap:2px 4px;
  white-space:nowrap;
}

.dag-combinatie .periode-label { min-width:auto; }

.jaar-combinatie {
  flex-wrap:nowrap;
  gap:2px 4px;
  white-space:nowrap;
}

.jaar-combinatie .periode-label { min-width:auto; }
.pijl-export { color:#35d46f !important; font-weight:800; }
.pijl-import { color:#ff5454 !important; font-weight:800; }
.export-regel .waarde { color:#35d46f; }
.import-regel .waarde { color:#ff5454; }

.energie-regel {
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 6px;
  margin-top:1px;
  font-size:15px;
}

.compacte-meting {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:1px 2px;
  min-height:0;
}

.financieel-uur-regel { justify-content:flex-start; }

.financieel-uur-bedragen {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  font-size:14px;
  white-space:nowrap;
}

.financieel-richting {
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.financieel-euroteken { margin-left:2px; color:lightblue; }

/* COMPACTE POPUP */

#popup-scherm, .popup-scherm {
  left:50%;
  right:auto;
  top:4px;
  bottom:4px;
  width:calc(100% - 8px);
  max-width:352px;
  padding:3px;
  transform:translateX(-50%);
}

.popup-inhoud { padding:5px; border-radius:6px; }

.popup-kop {
  height:30px;
  margin-bottom:3px;
  font-size:16px;
}

.popup-sluit {
  min-width:34px;
  height:26px;
  border-radius:4px;
  font-size:19px;
}

.popup-deel {
  height:calc(100% - 33px);
  overflow-y:auto;
}

.grafiek-keuze-wrap, .opdracht-keuze-wrap {
  max-width:none;
  margin:4px auto 0;
  padding:7px;
  border-radius:6px;
}

.grafiek-keuze-wrap label, .opdracht-keuze-wrap label {
  margin-bottom:6px;
  font-size:15px;
}

.grafiek-keuze-select, .opdracht-keuze-select {
  min-height:38px;
  padding:6px;
  border-radius:5px;
  font-size:14px;
}

.grafiek-keuze-status, .opdracht-resultaat {
  min-height:18px;
  margin-top:5px;
  font-size:14px;
}

.grafiek-groot-wrap {
  width:100%;
  height:auto;
  display:block;
  overflow-y:auto;
}

#grafiek-groot, .grafiek-groot {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}

#popup-financieel { padding:2px; }
.financieel-grid { grid-template-columns:1fr; gap:4px; }
.financieel-sectie { padding:6px; border-radius:6px; }
.financieel-sectie h3 { margin:0 0 3px; font-size:12px; }
.financieel-regel { gap:7px; padding:3px 0; }
.financieel-bedrag { gap:5px; }

.meldingen-popup-lijst, #debug-popup-tekst {
  padding:4px;
  font-size:10px;
}

#popup-instellingen { padding:3px; }
.instelling-regel { margin-bottom:6px; }

#gemiddelde_importprijs, #gemiddelde_exportprijs {
  width:120px;
  padding:4px 6px;
  font-size:15px;
}

#instellingen_opslaan {
  margin-top:4px;
  padding:6px 12px;
  font-size:15px;
}

/* FASE 3 - ALGEMENE BLOKRAND / KOP */

#pagina-scherm .block { border-color:#5f7892; }

#pagina-scherm .block-title,
#pagina-scherm .block-title b {
  font-size:14px;
}

.web-status {
  position:fixed;
  bottom:8px;
  left:0;
  width:100%;
  text-align:center;
  font-size:14px;
}

/* GRAFIEK FULLSCREEN */

.grafiek-klein { cursor:pointer; }

.grafiek-fullscreen {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.96);
  z-index:99999;
  cursor:pointer;
}

.grafiek-fullscreen.open { display:flex; }

.grafiek-groot {
  max-width:98vw;
  max-height:98vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

#dagresultaat_live { cursor:pointer; }

.dagobert-saldo {
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid #3f5870;
  font-size:16px;
  font-weight:bold;
}

#popup-scherm.dagobert-open {
  top:4px !important;
  bottom:auto !important;
  height:220px !important;
}

@media (max-width:420px) {
  .solar-hemel {
    min-height:78px;
    padding:2px 0 1px;
  }
  .solar-symbol { font-size:48px; }
}

/* BATTERIJ - FASE 3 */

.batterij-fase3 {
  position:relative;
  overflow:hidden;
}

.batterij-fase3-title {
  position:relative;
  z-index:5;
}

.batterij-slot {
  opacity:0.8;
  font-size:0.82rem;
}

/* CENTRALE ACCU */

.batterij-midden {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7px 0 6px;
}

.batterij-icoon-fase3 {
  position:relative;
  width:112px;
  height:54px;
  border:2px solid #aab6c2;
  border-radius:7px;
  background:rgba(255,255,255,0.05);
  overflow:visible;
}

.batterij-icoon-fase3::after {
  content:"";
  position:absolute;
  right:-8px;
  top:15px;
  width:6px;
  height:20px;
  background:#aab6c2;
  border-radius:0 3px 3px 0;
}

.batterij-icoon-fase3 .battery-fill {
  position:absolute;
  left:3px;
  top:3px;
  bottom:3px;
  height:auto;
  width:0%;
  max-width:calc(100% - 6px);
  border-radius:4px;
  transition:width 0.6s ease, background 0.6s ease;
}

.batterij-icoon-fase3 .battery-fill.charging { background:#ff5454; }
.batterij-icoon-fase3 .battery-fill.discharging { background:#35d46f; }
.batterij-icoon-fase3 .battery-fill.idle { background:#777b80; }

.batterij-percentage-fase3 {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  font-size:1.25rem;
  font-weight:800;
  color:#ffffff;
  text-shadow:0 1px 3px #000000;
}

.batterij-percentage-fase3 #accu_niveau { color:inherit; }

/* STATUS + VERMOGEN */

.batterij-actueel {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin-top:7px;
}

.batterij-status-fase3 { font-size:0.78rem; opacity:0.75; }
.batterij-vermogen-fase3 { font-size:1rem; font-weight:700; }

.batterij-vermogen-fase3 small {
  font-size:0.62rem;
  font-weight:500;
  opacity:0.7;
}

/* DAGWAARDEN */

.batterij-info-fase3 {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
  padding:8px 5px;
  border-top:1px solid rgba(255,255,255,0.10);
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.batterij-info-item {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-align:center;
}

.batterij-info-label { font-size:0.68rem; opacity:0.58; }

.batterij-info-value {
  font-size:0.84rem;
  font-weight:600;
  white-space:nowrap;
}

.batterij-info-value small {
  font-size:0.60rem;
  font-weight:400;
  opacity:0.65;
}

.batterij-total-fase3 {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 7px 2px;
  font-size:0.72rem;
  opacity:0.70;
}

.batterij-fase3 .pijl-export {
  color:#35d46f !important;
  font-weight:800;
}

.batterij-fase3 .pijl-import {
  color:#ff5454 !important;
  font-weight:800;
}

@media (max-width:420px) {
  .batterij-midden { padding:6px 0 5px; }
  .batterij-icoon-fase3 { width:104px; height:50px; }
  .batterij-icoon-fase3::after { top:14px; height:18px; }
  .batterij-percentage-fase3 { font-size:1.15rem; }
}

/* P1 METER - FASE 3 */

.p1-fase3 {
  position:relative;
  overflow:hidden;
}

.p1-fase3-title { position:relative; z-index:5; }
.p1-slot { opacity:0.8; font-size:0.82rem; }

.p1-actueel {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px 0 10px;
}

.p1-actueel-label {
  margin-bottom:1px;
  font-size:0.68rem;
  opacity:0.58;
}

.p1-actueel-vermogen {
  font-size:1.45rem;
  font-weight:800;
  line-height:1.1;
  color:#ffffff;
  font-variant-numeric:tabular-nums;
}

.p1-actueel-vermogen small {
  margin-left:2px;
  font-size:0.65rem;
  font-weight:500;
  opacity:0.70;
}

/* L1 / L2 / L3 */

.p1-fasen-fase3 {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:5px;
  padding:7px 5px;
  border-top:1px solid rgba(255,255,255,0.10);
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.p1-fase-item {
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:3px;
  white-space:nowrap;
}

.p1-fase-label { font-size:0.66rem; opacity:0.55; }

.p1-fase-waarde {
  font-size:0.84rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.p1-fase-item small { font-size:0.55rem; opacity:0.60; }
.p1-l1 { color:rgb(34,9,254); }
.p1-l2 { color:rgb(3,130,242); }
.p1-l3 { color:rgb(245,8,134); }

/* DAG VERBRUIK / OPBRENGST */

.p1-info-fase3 {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
  padding:8px 5px;
}

.p1-info-item {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-align:center;
}

.p1-info-label { font-size:0.68rem; opacity:0.58; }

.p1-info-value {
  font-size:0.84rem;
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.p1-info-value small {
  font-size:0.58rem;
  font-weight:400;
  opacity:0.65;
}

.p1-import, .p1-import #p1_import_kwh_dag { color:#ff5454; }
.p1-export, .p1-export #p1_export_kwh_dag { color:#35d46f; }
.p1-fase3 .pijl-import { color:#ff5454 !important; font-weight:800; }
.p1-fase3 .pijl-export { color:#35d46f !important; font-weight:800; }

/* P1 METERKAST - ZILVER 3D */

.p1-meterkast {
  width:94%;
  margin:5px auto 8px;
  padding:9px 10px 8px;
  border:2px solid #8c969f;
  border-radius:10px;
  background:linear-gradient(
    145deg,
    #eef1f3 0%,
    #aeb6bd 18%,
    #747f88 48%,
    #cbd1d5 72%,
    #7d8790 100%
  );
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.85),
    inset -3px -3px 5px rgba(25,30,35,0.55),
    0 3px 7px rgba(0,0,0,0.55);
}

.p1-meter-tellers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.p1-meter-teller { min-width:0; text-align:center; }

.p1-meter-label {
  margin-bottom:3px;
  color:#20272d;
  font-size:0.55rem;
  font-weight:800;
  letter-spacing:0.5px;
}

.p1-meter-venster {
  padding:5px 3px;
  border:2px solid #4b5359;
  border-radius:4px;
  background:linear-gradient(
    180deg,
    #050708 0%,
    #151a1e 48%,
    #050708 100%
  );
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,0.95),
    inset 0 -1px 1px rgba(255,255,255,0.18),
    0 1px 1px rgba(255,255,255,0.65);
  font-family:Consolas, monospace;
  font-size:0.90rem;
  font-weight:800;
  letter-spacing:1px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.p1-meter-teller.import .p1-meter-venster,
.p1-meter-teller.import .p1-meter-venster span {
  color:#ff4f4f;
  text-shadow:0 0 4px rgba(255,50,50,0.65);
}

.p1-meter-teller.export .p1-meter-venster,
.p1-meter-teller.export .p1-meter-venster span {
  color:#32df6c;
  text-shadow:0 0 4px rgba(40,220,100,0.60);
}

.p1-meter-eenheid {
  margin-top:2px;
  color:#20272d;
  font-size:0.48rem;
  font-weight:800;
}

.p1-meter-vermogen {
  margin-top:6px;
  text-align:center;
}

.p1-vermogen-venster {
  width:52%;
  margin:2px auto 0;
  padding:4px 5px;
  border:2px solid #4b5359;
  border-radius:4px;
  background:linear-gradient(180deg,#050708,#172027,#050708);
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,0.95),
    inset 0 -1px 1px rgba(255,255,255,0.18),
    0 1px 1px rgba(255,255,255,0.65);
  color:#ffffff;
  font-family:Consolas, monospace;
  font-size:1rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.p1-vermogen-venster span { color:#ffffff; }

.p1-vermogen-venster small {
  margin-left:3px;
  color:#dce5ec;
  font-size:0.55rem;
}

.p1-tellers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  padding:4px 8px 8px;
}

.p1-teller { min-width:0; text-align:center; }

.p1-teller-label {
  display:block;
  margin-bottom:2px;
  font-size:0.62rem;
  opacity:0.60;
}

.p1-teller-stand {
  display:flex;
  align-items:baseline;
  justify-content:center;
  width:100%;
  padding:4px 2px;
  border:1px solid rgba(255,255,255,0.20);
  border-radius:4px;
  background:rgba(0,0,0,0.25);
  font-family:Consolas, monospace;
  font-size:0.82rem;
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.p1-teller-stand small {
  margin-left:3px;
  font-size:0.48rem;
  font-weight:400;
  opacity:0.60;
}

.p1-teller-import .p1-teller-stand { color:#ff6868; }
.p1-teller-export .p1-teller-stand { color:#45d879; }

@media (max-width:420px) {
  .p1-actueel { padding:6px 0 8px; }
  .p1-actueel-vermogen { font-size:1.30rem; }
  .p1-fasen-fase3 { padding:6px 3px; }
  .p1-info-fase3 { padding:7px 3px 4px; }
}

/* P1 FASE 3 - COMPACTE LAPTOPINDELING */

.p1-fase3 .p1-meterkast {
  margin:3px auto 4px;
  padding:6px 10px 5px;
}

.p1-fase3 .p1-meter-label { margin-bottom:1px; }
.p1-fase3 .p1-meter-venster { padding:4px 3px; }
.p1-fase3 .p1-meter-eenheid { margin-top:1px; }

.p1-fase3 .p1-meter-vermogen {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  margin-top:3px;
  line-height:1.05;
}

.p1-fase3 .p1-vermogen-label {
  color:#20272d;
  font-size:0.52rem;
  font-weight:800;
}

.p1-fase3 .p1-vermogen-compact {
  color:#151a1e;
  font-family:Consolas, monospace;
  font-size:0.82rem;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.p1-fase3 .p1-vermogen-compact span,
.p1-fase3 .p1-vermogen-compact small {
  color:#151a1e;
}

.p1-fase3 .p1-vermogen-compact small {
  font-size:0.48rem;
  font-weight:700;
}

.p1-fase3 .p1-fasen-fase3 {
  padding:3px 2px 0;
  margin-top:3px;
  border-top:1px solid rgba(30,39,45,0.22);
  border-bottom:0;
  gap:3px;
}

.p1-fase3 .p1-fase-label {
  color:#303940;
  font-size:0.58rem;
  font-weight:800;
  opacity:1;
}

.p1-fase3 .p1-fase-waarde { font-size:0.72rem; }

.p1-fase3 .p1-fase-item small {
  color:#303940;
  font-size:0.48rem;
  opacity:0.85;
}

.p1-fase3 .p1-info-fase3 {
  padding:3px 5px 1px;
  gap:5px;
}

.p1-fase3 .p1-info-item {
  flex-direction:row;
  justify-content:center;
  align-items:baseline;
  gap:4px;
}

.p1-fase3 .p1-info-label { font-size:0.64rem; }
.p1-fase3 .p1-info-value { font-size:0.78rem; }

/* GRAFIEK KOP */

.grafiek-title {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}

.grafiek-title-left {
  display:flex;
  align-items:center;
  gap:4px;
}

.grafiek-tijd { margin-left:auto; }

/* FASE 3 - ZONNE-ENERGIE */

.solar-fase3 {
  overflow:hidden;
  position:relative;
}

.solar-fase3-title {
  position:relative;
  z-index:5;
}

.solar-slot {
  opacity:0.8;
  font-size:0.82rem;
}

/* ZON/WOLK LINKS, MAAN RECHTS */

.solar-hemel {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:100px;
  padding:2px 0;
  position:relative;
}

.solar-sunmoon {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:24px;
  width:100%;
  height:78px;
}

.solar-object {
  flex:0 0 78px;
  width:78px;
  height:78px;
}

#solar_maan, .maan-afbeelding {
  background:transparent !important;
}

.maan-afbeelding {
  display:block;
  width:78px;
  height:78px;
  object-fit:contain;
  margin:0 auto;
}

.solar-symbol {
  font-size:78px;
  line-height:1;
  display:block;
  position:relative;
  z-index:1;
  user-select:none;
  transition:filter 1.5s ease, opacity 1.5s ease;
}

/* DAG */

.solar-sunmoon.day {
  background:transparent;
  box-shadow:none;
}

.solar-sunmoon.day .solar-symbol {
  color:#ffd84a;
  filter:
    drop-shadow(0 0 4px rgba(255,215,60,0.75))
    drop-shadow(0 0 9px rgba(255,190,40,0.35));
}

/* NACHT */

.solar-sunmoon.night {
  background:radial-gradient(
    circle,
    rgba(120,145,180,0.15),
    transparent 70%
  );
  box-shadow:0 0 25px rgba(130,160,205,0.16);
}

.solar-sunmoon.night .solar-symbol { opacity:0.8; }

/* VERMOGEN ONDER ZON EN MAAN */

.solar-power {
  position:static;
  transform:none;
  margin-top:4px;
  padding:0;
  background:transparent;
  border:none;
  text-align:center;
  white-space:nowrap;
  font-size:0.72rem;
  font-weight:400;
  line-height:1.2;
  color:var(--text);
}

.solar-power span { color:inherit; }

.solar-power-unit {
  font-size:0.55rem;
  font-weight:400;
  opacity:0.75;
}

/* ZON / MAAN INFO - TWEE REGELS */

.solar-info-rij {
  display:grid;
  grid-template-columns:1.55fr 1fr 0.65fr;
  width:100%;
  padding:1px 6px;
  margin:0;
  box-sizing:border-box;
  font-size:0.60rem;
  line-height:1.15;
  color:#f3d878;
}

.solar-info-groep {
  display:flex;
  align-items:center;
  gap:3px;
  margin:0;
  padding:0;
  white-space:nowrap;
}

.solar-info-groep:nth-child(1) { justify-self:start; }
.solar-info-groep:nth-child(2) { justify-self:center; }
.solar-info-groep:nth-child(3) { justify-self:end; }

.solar-info-rij span, .solar-info-rij b {
  color:#f3d878;
}

.solar-info-rij b {
  font-size:0.62rem;
  font-weight:700;
}

/* LANGZAME BEWEGING */

@keyframes solarRotate {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

.solar-sunmoon.day.sun .solar-symbol {
  animation:solarRotate 55s linear infinite;
}

@keyframes moonFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}

.solar-sunmoon.night .solar-symbol {
  animation:moonFloat 6s ease-in-out infinite;
}

/* BATTERIJ FASE 3 - DEFINITIEVE COMPACTE VERSIE */

.batterij-fase3 {
  position:relative;
  overflow:hidden;
}

.batterij-fase3 .batterij-midden {
  width:100%;
  padding:2px 0 3px;
  margin:0;
}

/* GROTE ACCU */

.batterij-fase3 .batterij-icoon-fase3 {
  position:relative;
  width:97%;
  height:70px;
  margin:2px auto 3px;
  border:2px solid #8c969f;
  border-radius:10px;
  background:linear-gradient(
    180deg,
    #323c46 0%,
    #202a33 18%,
    #111820 55%,
    #1c252e 100%
  );
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.25),
    inset 0 -3px 5px rgba(0,0,0,0.65),
    0 2px 5px rgba(0,0,0,0.55);
  overflow:visible;
}

/* PLUSPOOL RECHTS */

.batterij-fase3 .batterij-icoon-fase3::after {
  content:"";
  position:absolute;
  right:-9px;
  top:20px;
  width:7px;
  height:26px;
  background:linear-gradient(90deg,#737d86,#c1c9d0);
  border-radius:0 4px 4px 0;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    1px 1px 3px rgba(0,0,0,0.6);
}

/* DYNAMISCHE VULLING */

.batterij-fase3 .battery-fill {
  position:absolute;
  left:5px;
  top:5px;
  bottom:5px;
  height:auto;
  width:0%;
  max-width:calc(100% - 10px);
  border-radius:6px;
  z-index:1;
  transition:width 0.6s ease, background 0.6s ease;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.20),
    inset 0 -3px 4px rgba(0,0,0,0.30);
}

.batterij-fase3 .battery-fill.charging {
  background:linear-gradient(180deg,#ff7777,#ff5454 48%,#b52e2e);
}

.batterij-fase3 .battery-fill.discharging {
  background:linear-gradient(180deg,#58e887,#35d46f 48%,#16934a);
}

.batterij-fase3 .battery-fill.idle {
  background:linear-gradient(180deg,#9a9da1,#777b80 48%,#4e5256);
}

/* GLOW */

.batterij-fase3 .battery-fill.glow-charge {
  box-shadow:
    0 0 12px 4px rgba(255,84,84,0.60),
    inset 0 2px 3px rgba(255,255,255,0.20),
    inset 0 -3px 4px rgba(0,0,0,0.30);
}

.batterij-fase3 .battery-fill.glow-discharge {
  box-shadow:
    0 0 12px 4px rgba(46,204,113,0.60),
    inset 0 2px 3px rgba(255,255,255,0.20),
    inset 0 -3px 4px rgba(0,0,0,0.30);
}

/* PROCENTSCHAAL */

.batterij-fase3 .batterij-schaal {
  position:absolute;
  left:5px;
  right:5px;
  top:5px;
  bottom:5px;
  z-index:3;
  pointer-events:none;
}

.batterij-streep {
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,0.38);
  box-shadow:1px 0 0 rgba(0,0,0,0.35);
}

.batterij-streep.streep-20 { left:20%; }
.batterij-streep.streep-40 { left:40%; }
.batterij-streep.streep-60 { left:60%; }
.batterij-streep.streep-80 { left:80%; }

/* BOVENSTE REGEL IN DE ACCU */

.batterij-live-regel {
  position:absolute;
  left:9px;
  right:9px;
  top:7px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  z-index:6;
}

.batterij-live-regel .batterij-status-fase3 {
  position:static;
  justify-self:start;
  font-size:10px;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 1px 2px #000000;
}

.batterij-live-regel .batterij-percentage-fase3 {
  position:static;
  inset:auto;
  display:inline-block;
  justify-self:center;
  font-size:21px;
  font-weight:800;
  color:#ffffff;
  text-shadow:0 1px 2px #000000, 0 0 4px rgba(0,0,0,0.8);
  font-variant-numeric:tabular-nums;
}

.batterij-live-regel .batterij-vermogen-fase3 {
  justify-self:end;
  font-size:12px;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 1px 2px #000000;
}

.batterij-live-regel .batterij-vermogen-fase3 small {
  font-size:8px;
  font-weight:600;
}

/* ONDERSTE REGEL IN DE ACCU */

.batterij-dag-regel {
  position:absolute;
  left:8px;
  right:8px;
  bottom:7px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:6;
  font-size:9px;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 1px 2px #000000;
}

.batterij-dag-item { white-space:nowrap; }
.batterij-dag-label { margin-right:1px; }

.batterij-dag-regel small {
  font-size:7px;
  font-weight:500;
}

/* JAAR ONDER DE ACCU */

.batterij-jaar-regel {
  width:97%;
  margin:0 auto 1px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:3px;
  font-size:9px;
  font-weight:600;
}

.batterij-jaar-item { white-space:nowrap; }
.batterij-jaar-label { margin-right:1px; }
.batterij-jaar-regel small { font-size:7px; }

.batterij-fase3 .pijl-import { margin:0 1px; }
.batterij-fase3 .pijl-export { margin:0 1px; }

/* OUDE OPMAAK */

.batterij-fase3 .batterij-actueel,
.batterij-fase3 .batterij-info-fase3,
.batterij-fase3 .batterij-total-fase3 {
  margin:0;
  padding:0;
}

.battery { height:6px; margin:2px 0; }

.batterij-totaalregel {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 4px;
  min-height:0;
  margin:1px 0;
  line-height:1.2;
}

/* ADVIES THUISBATTERIJ */

.advies-wrap {
  font-size:0.88rem;
  line-height:1.35;
  color:#fff4df;
}

.advies-wrap p {
  margin:0 0 8px 0;
}

.advies-wrap p,
.advies-wrap span,
.advies-wrap b,
.advies-wrap strong,
.advies-wrap li {
  color:#fff4df;
}

.advies-wrap h3 {
  font-size:0.98rem;
  margin:10px 0 3px 0;
  color:#7dd3fc;
}

/* ZONAFBEELDING EN WOLK */

.zon-afbeelding {
  display:block;
  width:78px;
  height:78px;
  object-fit:contain;
  margin:0 auto;
}

.solar-zon.sun .solar-symbol { display:none; }
.solar-zon.cloud .zon-afbeelding { display:none; }
.solar-zon.cloud .solar-symbol { display:block; }

.zon-afbeelding {
  display:block;
  width:78px;
  height:78px;
  object-fit:contain;
  margin:0 auto;
  border-radius:50%;
}

.solar-zon.sun .solar-symbol { display:none; }
.solar-zon.cloud .zon-afbeelding { display:none; }
.solar-zon.cloud .solar-symbol { display:block; }