: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:18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-direction:column;
  gap:6px;
}

.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,
.solar-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); }
}

/* --------------------------------------------------
   Kop: live dagresultaat en kwartier-countdown

   Deze eindregels staan bewust in het werkelijk door 5015
   geladen stylesheet. Het bedrag staat rechts in de kop en
   de countdown direct onder de zandloper, zonder de vaste
   dashboardbreedte te vergroten.
-------------------------------------------------- */
.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;
  /* De topbar begint direct onder de kop. Met deze vaste verschuiving
     staat de zandloper gelijk met de bovenkant van het P1-logo. */
  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%; }

/* --------------------------------------------------
   Batterij
-------------------------------------------------- */
.battery{
  width:100%;
  height:8px;
  border:1px solid var(--border);
  border-radius:6px;
  position:relative;
  overflow:hidden;
  margin-top:6px;
  background:linear-gradient(to bottom,#1a222c,#0c1015);
  box-shadow:inset 0 2px 3px rgba(255,255,255,0.08), inset 0 -2px 3px rgba(0,0,0,0.6);
}

.battery-fill{
  height:100%;
  width:0%;
  transition:width .3s ease;
  position:relative;
}

.battery-fill::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50%;
  background:rgba(255,255,255,0.2);
}

.battery-fill.charging{ background:var(--bad); }
.battery-fill.discharging{ background:var(--ok); }
.battery-fill.idle{ background:var(--yellow); }
.soc-value{ font-weight:bold; }
.soc-low{ color:var(--bad); }
.soc-mid{ color:var(--yellow); }
.soc-high{ color:var(--ok); }

/* --------------------------------------------------
   Zon / maan
-------------------------------------------------- */
.zon-row{
  display:flex;
  align-items:center;
  gap:10px;
}

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

#sunmoon,
.sunmoon-box{
  width:34px;
  height:34px;
  font-size:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #6b5d00;
  border-radius:8px;
  margin-left:4px;
  vertical-align:middle;

  position:relative;
  overflow:visible;
  z-index:1;

  transition:
    background .3s ease,
    color .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


/* --------------------------------------------------
   DAG
-------------------------------------------------- */

#sunmoon.day{
  background:#ffe066;
  color:#ff9900;
  border-color:#6b5d00;
  box-shadow:0 0 12px rgba(255,220,80,.8);
}


/* --------------------------------------------------
   STRALING ROND DE ZON
-------------------------------------------------- */

#sunmoon.day::before{
  content:"☀";
  position:absolute;

  left:50%;
  top:50%;

  font-size:40px;
  line-height:1;
  color:#ffb300;

  transform:translate(-50%, -50%) scale(1);
  opacity:.55;

  z-index:-1;

  animation:straling 2.5s ease-in-out infinite;
}

@keyframes straling{
  0%,100%{
    transform:translate(-50%, -50%) scale(1);
    opacity:.45;
  }

  50%{
    transform:translate(-50%, -50%) scale(1.20);
    opacity:1;
  }
}


/* --------------------------------------------------
   NACHT
-------------------------------------------------- */

#sunmoon.night{
  background:#263040;
  color:#cfd8e3;
  border-color:#4b5568;
  box-shadow:none;
}


/* --------------------------------------------------
   ZONREGELS
-------------------------------------------------- */

.solar-lines{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  line-height:1.35;
}


/* --------------------------------------------------
   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 bovenop basisscherm
-------------------------------------------------- */
#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;
}

/* kleine live toast, alleen actief als element in index.html bestaat */
.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 zichtbaar maken als app.js hem opent */
#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
   Eén vaste smalle kolom; bewust zonder mediaquery.
-------------------------------------------------- */
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,
.solar-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;
}

.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;
}

.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;
}

.zon-row{
  gap:0;
  margin:1px 0;
}

.solar-kop-links{
  display:flex;
  align-items:center;
  gap:4px;
}

#sunmoon,
.sunmoon-box{
  width:23px;
  height:23px;
  margin-left:0;
  border-radius:5px;
  font-size:17px;
}

.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, gecentreerde popup in dezelfde smalle kolom. */
#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:16px;
}

.financieel-regel{
  gap:7px;
  padding:3px 0;
}

.financieel-bedrag{
  gap:5px;
}

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

#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;
}
/* ==================================================
   P1 LIVE - TWEE GELIJKE BOXEN
================================================== */

.p1-live-boxen{
  display:flex;
  flex-direction:row;
  gap:4px;
  width:100%;
  margin-top:2px;
}

.p1-live-box{
  flex:1 1 0;
  min-width:0;

  border:1px solid solid #5f7892;
  border-radius:5px;

  background:transparent;

  padding:3px 4px;

  font-size:10px;
  line-height:1.25;
  font-weight:bold;
}

.p1-live-box > div{
  white-space:nowrap;
  margin:0;
}

/* ==================================================
   P1 LIVE - LIJNEN IETS FELLER + KOP KLEINER
================================================== */

/* Buitenrand van het P1-blok */
#pagina-scherm .block {
  border-color: #5f7892;
}

/* Randen van de twee P1-boxen */
.p1-live-box {
  border: 1px solid #5f7892;
}

/* P1 METER kop iets kleiner */
#pagina-scherm .block-title {
  font-size: 14px;
}

#pagina-scherm .block-title b {
  font-size: 14px;
}
/* ==================================================
   BATTERIJ - TWEE GELIJKE BOXEN
================================================== */

.batterij-live-boxen{
  display:flex;
  flex-direction:row;
  gap:4px;
  width:100%;
  margin-top:2px;
}

.batterij-live-box{
  flex:1 1 0;
  min-width:0;

  border:1px solid #5f7892;
  border-radius:5px;

  background:transparent;
  padding:4px;

  font-size:10px;
  line-height:1.35;
  font-weight:bold;
}

.batterij-live-box > div{
  margin:0 0 3px 0;
}

.batterij-box-titel{
  font-weight:bold;
  margin-bottom:5px !important;
}


/* --------------------------------------------------
   BATTERIJ AFBEELDING
-------------------------------------------------- */

.batterij-live-rechts{
  display:flex;
  align-items:center;
  gap:6px;
}

.batterij-grafisch{
  flex:0 0 72px;
}

.batterij-icoon{
  position:relative;
  width:58px;
  height:28px;
  border:2px solid #aab6c2;
  border-radius:5px;
  overflow:hidden;
  background:#d9e0e6;
}

.batterij-icoon::after{
  content:"";
  position:absolute;
  right:-5px;
  top:8px;
  width:5px;
  height:13px;
  background:#aab6c2;
  border-radius:0 2px 2px 0;
}

.batterij-icoon .battery-fill{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  height:auto;
  border-radius:2px;
}

.batterij-percentage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  color:#000 !important;
  text-shadow:none;
  z-index:2;
}

.batterij-percentage #accu_niveau{
  color:#000 !important;
}

.batterij-cycli{
  margin-top:3px;
  white-space:nowrap;
}

.batterij-live-waarden{
  min-width:0;
  line-height:1.5;
}

.batterij-live-waarden > div{
  white-space:nowrap;
}
.batterij-regel{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
/* ==================================================
   ZONNE-ENERGIE - TWEE GELIJKE BOXEN
================================================== */

.solar-live-boxen{
  display:flex;
  flex-direction:row;
  gap:4px;
  width:100%;
  margin-top:2px;
}

.solar-live-box{
  flex:1 1 0;
  min-width:0;

  border:1px solid #5f7892;
  border-radius:5px;

  background:transparent;
  padding:4px;

  font-size:10px;
  line-height:1.35;
  font-weight:bold;
}

.solar-live-box > div{
  margin:0 0 3px 0;
}

.solar-box-title{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:24px;

  font-weight:bold;
  margin-bottom:5px !important;
}

.solar-box-title #sunmoon{
  margin-left:auto;
}

.solar-live-box .row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.solar-live-box .solar-lines{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:3px 8px;
  line-height:1.35;
}

.solar-live-box .solar-lines > span{
  white-space:nowrap;
}
.web-status {
  position: fixed;
  bottom: 8px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
}