/* ============================================================================
   zon.css — zonnepanelen-pagina (/zon), bwired-native inline-fragment.
   Volgt het standaard-format (STANDARD-FORMAT.md): OKLCH-gloed achter de content,
   glas-cards, Davis-afstanden (radius 14 / padding 18 / gap 16), header met
   info-panel rechts. Twee accenten: GoodWe (geel) en Hoymiles (oranje).
   ========================================================================== */

body[data-page="zon"] { --gw: #fbbf24; --hoy: #fb923c; }

/* Gloed-achtergrond + kop-format + glas-cards komen uit /css/format.css
   (gedeeld paginaformat; de zon-tinten staan dáár bij elkaar). */

/* Zij-ademruimte gelijk aan Davis/EMS, zodat de content niet tegen de rail plakt. */
.zon-embed { padding-top: 20px; padding-left: 24px; padding-right: 24px; min-width: 0; }   /* 20px boven = Davis-referentie */

/* ── Header (basis in format.css; hier alleen de zon-eigen afwijkingen) ── */
.zon-headbar { align-items: center; margin: 0 0 16px; }   /* exact = .ems-headbar → geen versprong */
.zon-hero-title { color: #e7ecf3; }
.zon-hero-title .hl { color: var(--gw); }
.zon-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.82rem; color: #8a93a8; margin-top: 4px; }
.zon-sep { color: #4a5366; }
.zon-embed .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); flex: none; }
.zon-embed .dot.is-off { background: #6b7280; box-shadow: none; }
.zon-head-right { display: flex; align-items: center; gap: 12px; }
.zon-locale {
  display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 8px 16px;
  background: oklch(20% 0.020 240 / 0.42); border: 1px solid oklch(70% 0.020 240 / 0.16);
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.zon-locale-icon { font-size: 1.25rem; color: var(--gw); }
.zon-locale-place { font-size: 0.9rem; font-weight: 500; color: #dfe6f0; }
.zon-locale-coords { font-size: 0.72rem; color: #8a93a8; }
@media (max-width: 560px) { .zon-locale-coords { display: none; } }

/* ── Hoofd-layout ── */
.zon-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── KPI-rij ── */
.zon-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-width: 0; }
.zon-kpi {
  background: oklch(20% 0.020 240 / 0.50); border: 1px solid oklch(70% 0.020 240 / 0.16);
  border-radius: 14px; padding: 14px 16px; min-width: 0;
  backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.zon-kpi .kpi-l { font-size: 0.78rem; color: #8a93a8; }
.zon-kpi .kpi-v { font-size: 1.55rem; font-weight: 600; color: var(--gw); margin-top: 3px; white-space: nowrap; }
.zon-kpi-export { color: #60a5fa !important; }

/* ── Glas-cards: gedeelde 'Davis'-variant in format.css ── */

/* ── Installaties (GoodWe + Hoymiles naast elkaar) ── */
/* align-items:stretch → beide kolommen even hoog, zodat de Hoymiles-kaart (rechts) onderaan
   exact uitlijnt met de Stroomprijs-kaart (onderaan de linkerkolom = GoodWe + Stroomprijs). */
.zon-systems { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; align-items: stretch; }
.zon-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.zon-card-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #e7ecf3; display: flex; align-items: baseline; gap: 8px; }
.zon-ico { color: var(--gw); font-size: 1rem; }
#cardHoymiles .zon-ico { color: var(--hoy); }
.zon-card-sub { font-size: 0.8rem; font-weight: 400; color: #8a93a8; }
.zon-card-meta { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: #aebacb; }

/* GoodWe strings */
.zon-strings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zon-str { background: oklch(80% 0.12 85 / 0.08); border: 1px solid oklch(80% 0.12 85 / 0.25); border-radius: 11px; padding: 11px 13px; min-width: 0; }
.zon-str .s-l { font-size: 0.76rem; color: #9fb0c3; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.zon-str .s-l .s-pan { color: #8a93a8; font-size: 0.68rem; }
.zon-str .s-p { font-size: 1.35rem; font-weight: 600; color: #fde3a7; margin-top: 2px; }
.zon-str .s-d { font-size: 0.72rem; color: #8a93a8; margin-top: 1px; }

/* Read-only teruglever-instelling */
.zon-setting {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px;
  background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.32);
  color: #bcd6f5; font-size: 0.82rem; border-radius: 999px; padding: 6px 13px; width: fit-content;
}
.zon-setting strong { color: #e7ecf3; }
.zon-lock { font-size: 0.85rem; opacity: 0.85; }
.zon-ro { color: #8a93a8; font-size: 0.74rem; }
.zon-card-foot { margin-top: 12px; font-size: 0.8rem; color: #8a93a8; }
.zon-card-foot strong { color: #cdd5e1; font-weight: 600; }

/* Hoymiles inverters + paneel-tegels. De kaart is een flex-kolom + de omvormers vullen de
   resthoogte met space-between, zodat de meegerekte kaart (uitlijnen met de Stroomprijs-kaart)
   de 3 omvormers gelijkmatig verdeelt i.p.v. een gat onderaan te laten. */
#cardHoymiles { display: flex; flex-direction: column; }
#cardHoymiles .zon-inverters { flex: 1 1 auto; justify-content: space-between; }
.zon-inverters { display: flex; flex-direction: column; }
.zon-inv + .zon-inv { border-top: 1px solid oklch(70% 0.020 240 / 0.10); margin-top: 13px; padding-top: 13px; }
.zon-badge { font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.zon-badge.on { background: rgba(74,222,128,0.15); color: #86efac; }
.zon-badge.off { background: rgba(107,114,128,0.2); color: #9ca3af; }
/* Per omvormer: kop (naam+status links, vermogen+vandaag rechts) + meta-regel + paneeltegels. */
.zon-inv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.zon-inv-name { font-weight: 600; color: #dfe6f0; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 7px; }
.zon-inv-now { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.zon-inv-now b { color: var(--hoy); font-size: 1.15rem; font-weight: 600; }
.zon-inv-day { font-size: 0.78rem; color: #9fb0c3; }
.zon-inv-meta { font-size: 0.7rem; color: #8a93a8; margin-top: 3px; }
.zon-panels { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.zon-pan { background: oklch(72% 0.15 55 / 0.10); border: 1px solid oklch(72% 0.15 55 / 0.30); border-radius: 9px; padding: 6px 9px; flex: 0 0 72px; text-align: center; font-variant-numeric: tabular-nums; }
.zon-pan .pn { font-size: 0.66rem; color: #8a93a8; }
.zon-pan .pp { font-size: 0.95rem; font-weight: 600; color: #fed7aa; }
.zon-pan .pd { font-size: 0.62rem; color: #7c8493; margin-top: 1px; }
/* GoodWe-strings: identiek aan de Hoymiles-paneeltegels (zelfde oranje tegel), maar
   ONDER ELKAAR gestapeld en vol-breed — een string bundelt meerdere panelen i.p.v. één.
   Drie regels: naam + paneelaantal / live wattage / gemeten dagopbrengst per string.
   De dag-kWh per string is écht: geïntegreerd uit pv_power_1/2_w, geschaald naar de
   gemeten dag (server.js), dus beide strings samen == de dagopbrengst in de kop. */
.zon-strings-col { flex-direction: column; align-items: center; gap: 8px; }
.zon-pan-str { flex: 0 0 auto; min-width: 250px; padding: 10px 22px; }
.zon-pan-str .pn { font-size: 0.72rem; }
.zon-pan-str .pn-str { color: #c7d0dd; font-weight: 500; }
.zon-pan-str .pn-pan { color: #8a93a8; }
.zon-pan-str .pp { font-size: 1.18rem; margin-top: 2px; }
.zon-pan-str .pd { font-size: 0.74rem; color: #b9c2cf; margin-top: 2px; }
/* Extra MQTT-info per string: spanning · stroom (gedempt, onder de dagopbrengst). */
.zon-pan-str .pva { font-size: 0.68rem; color: #7c8493; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ── Stroomprijs-paneel: eigen glas-kaart, onder GoodWe in de linkerkolom. Halve breedte
   (goede balk-dichtheid) + ruimere grafiek-hoogte zodat de uur-balken wat hoger zijn. ── */
.zon-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zon-pricecard .zon-ico-price { color: #fbbf24; }
.zon-price-now { display: flex; align-items: baseline; gap: 7px; }
.zon-price-v { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #cbd5e1; white-space: nowrap; }
.zon-price-v.is-low  { color: #4ade80; }
.zon-price-v.is-mid  { color: #cbd5e1; }
.zon-price-v.is-high { color: #fb923c; }
.zon-price-v.is-neg  { color: #c4a3ff; }
.zon-price-tag { font-size: 0.74rem; color: #8a93a8; }
.zon-price-chartwrap { position: relative; width: 100%; height: 72px; }
.zon-price-chartwrap canvas { width: 100%; height: 100%; display: block; }
.zon-price-range { font-size: 0.72rem; color: #8a93a8; text-align: right; margin-top: 6px; }

/* ── Prijs-basis toggle (All-in | Kaal) ── */
.zon-basis { display: inline-flex; gap: 2px; margin: 2px 0 12px; padding: 3px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; }
.zon-basis-opt { appearance: none; border: 0; background: transparent; cursor: pointer;
  color: #8a93a8; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 7px;
  transition: background 0.15s ease, color 0.15s ease; }
.zon-basis-opt:hover { color: #e7ecf3; }
.zon-basis-opt.is-on { background: #fb923c; color: #1a1205; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }

/* ── Belasting-onthuller: kale markt vs belasting/heffingen/btw ── */
.zon-tax { margin: 0 0 14px; }
.zon-tax[hidden] { display: none; }
.zon-tax-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: #8a93a8; margin-bottom: 7px; }
.zon-tax-bar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.zon-tax-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 12px;
  min-width: 0; overflow: hidden; white-space: nowrap; flex-grow: 0; flex-shrink: 0; }
.zon-tax-seg b { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zon-tax-seg span { font-size: 0.63rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; }
.zon-tax-markt { background: linear-gradient(180deg, #3ed39a, #25a877); color: #04231a; }
.zon-tax-belasting { background: linear-gradient(180deg, #ff7b74, #e04a43); color: #2a0705; align-items: flex-end; text-align: right; }
.zon-tax-punch { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.zon-tax-pct { font-size: 1.5rem; font-weight: 800; color: #f0655e; line-height: 1; font-variant-numeric: tabular-nums; flex: none; }
.zon-tax-msg { font-size: 0.82rem; color: #dfe6f0; line-height: 1.35; }
.zon-tax-msg small { display: block; color: #8a93a8; font-size: 0.72rem; margin-top: 2px; }
@media (max-width: 420px) {
  .zon-tax-seg span { display: none; }        /* smal scherm: alleen de €-bedragen in de balk */
  .zon-tax-pct { font-size: 1.3rem; }
}

/* Hover-tooltip op de uur-balken: uur · prijs · label. Kleuren via JS (.style), niet via
   inline-attribuut (CSP blokkeert style="" in innerHTML). Gecentreerd boven de balk. */
.zon-price-tip {
  position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; white-space: nowrap; pointer-events: none; z-index: 5;
  background: oklch(22% 0.02 240 / 0.97); border: 1px solid oklch(70% 0.02 240 / 0.28);
  border-radius: 8px; padding: 5px 9px; font-size: 0.72rem; color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.zon-price-tip[hidden] { display: none; }
.zon-price-tip .tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zon-price-tip .tip-hr { color: #8a93a8; font-variant-numeric: tabular-nums; }
.zon-price-tip .tip-pr { font-weight: 600; font-variant-numeric: tabular-nums; }
.zon-price-tip .tip-lb { font-size: 0.66rem; }
.zon-waiting { color: #8a93a8; font-size: 0.85rem; padding: 8px 0; }

/* ── Grafieken ── */
.zon-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.zon-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.zon-chart-head h2 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #e7ecf3; }
.zon-chart-wrap { position: relative; height: 300px; min-width: 0; }
.zon-muted { font-size: 0.74rem; color: #8a93a8; }

/* Bereik-knoppen (hergebruik .seg uit style.css; accent → geel op deze pagina) */
body[data-page="zon"] .seg button.is-on { background: rgba(251,191,36,0.22); color: #fde3a7; }

/* Vermogen per paneel — horizontale balken */
.zon-panelbars { display: flex; flex-direction: column; gap: 7px; }
.zon-pbar { display: grid; grid-template-columns: 122px 1fr 64px; align-items: center; gap: 10px; min-width: 0; }
.zon-pbar .pl { font-size: 0.76rem; color: #aebacb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zon-pbar .pt { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.zon-pbar .pf { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.zon-pbar .pf.gw  { background: var(--gw); }
.zon-pbar .pf.hoy { background: var(--hoy); }
.zon-pbar .pv { font-size: 0.78rem; color: #cdd5e1; text-align: right; white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .zon-kpis { grid-template-columns: repeat(2, 1fr); }
  .zon-chart-wrap { height: 260px; }
}
@media (max-width: 760px) {
  .zon-systems { grid-template-columns: 1fr; }
  .zon-charts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zon-embed { padding-left: 0; padding-right: 0; }
  .zon-hero-title { font-size: 1.35rem; }
  .zon-strings { grid-template-columns: 1fr 1fr; }
  .zon-chart-wrap { height: 240px; }
  .seg button { min-height: 32px; }
}
@media (max-width: 420px) {
  .zon-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zon-kpi .kpi-v { font-size: 1.3rem; }
  .zon-pbar { grid-template-columns: 98px 1fr 52px; gap: 7px; }
  .zon-pan { flex-basis: 62px; }
  .zon-strings-col { align-items: stretch; }
  .zon-pan-str { min-width: 0; }            /* strings vol-breed op smalle telefoons */
}

/* ── Teruglever-regelpaneel: 4 compacte draaiknop-tegels (potmeter-look) ──
   GoodWe (0-100% traploos) + 3 Hoymiles-micro's. De ring-arc = de ingestelde
   limiet; zon.js zet de conic-gradient via el.style (CSP verbiedt inline
   style=""-attributen in innerHTML). Zelfde grid-ritme als de KPI-rij erboven. */
.zon-curtail-lock {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #8a93a8;
  background: oklch(20% 0.020 240 / 0.42); border: 1px solid oklch(70% 0.020 240 / 0.16);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.zon-curtail-intro { margin: 0 0 14px; color: #aebacb; font-size: 0.88rem; line-height: 1.6; max-width: 92ch; }

.zon-dials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; min-width: 0; }
.zon-dial {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 8px 11px; border-radius: 12px; min-width: 0;
  background: oklch(24% 0.02 245 / 0.35); border: 1px solid oklch(70% 0.02 240 / 0.12);
}
/* 270°-meter (potmeter-look): opening onderaan → zichtbare schaal 0→100. Statische
   track + gekleurde vulling (JS-conic) + hub met nummer + draaiknop-indicator op de ring. */
.zd-gauge { position: relative; width: 82px; height: 82px; }
.zd-track, .zd-arc { position: absolute; inset: 0; border-radius: 50%; }
.zd-track { background: conic-gradient(from 225deg, oklch(31% 0.02 245) 0deg 270deg, transparent 270deg 360deg); }
.zon-dial.gw  .zd-arc { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.55)); }
.zon-dial.hoy .zd-arc { filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.50)); }
/* hub = knop-body (dekt het midden → de arc wordt een smalle ring) */
.zd-hub {
  position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, oklch(27% 0.02 245), oklch(15% 0.02 244));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 0 0 1px oklch(70% 0.02 240 / 0.10);
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.zd-hub b { font-size: 1.3rem; font-weight: 700; color: #fbbf24; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.zon-dial.hoy .zd-hub b { color: #fb923c; }
/* Getal exact in het midden: het %-teken krijgt breedte 0 (telt niet mee in de
   centrering) en hangt als klein suffix rechtsonder tegen het getal aan. */
.zd-hub span { font-size: 0.62rem; color: #8a93a8; width: 0; overflow: visible; align-self: flex-end; transform: translateY(-0.28em); margin-left: 1px; }
/* draaiknop-indicator: verlichte dot op de ring; roteert naar de huidige stand */
.zd-thumbwrap { position: absolute; inset: 0; }
.zd-thumb {
  --glow: rgba(251, 191, 36, 0.75);
  position: absolute; top: -1px; left: 50%; margin-left: -6.5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffffff, #dfe6f0);
  border: 3px solid #fbbf24; box-shadow: 0 0 6px var(--glow);
  animation: zdPulse 2.6s ease-in-out infinite;
}
.zon-dial.hoy .zd-thumb { --glow: rgba(251, 146, 60, 0.70); border-color: #fb923c; }
@keyframes zdPulse { 0%, 100% { box-shadow: 0 0 5px var(--glow); } 50% { box-shadow: 0 0 13px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .zd-thumb { animation: none; } }
.zd-label { font-size: 0.85rem; font-weight: 600; color: #dfe6f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.zd-sub { font-size: 0.68rem; color: #8a93a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.zon-curtail-foot { margin-top: 12px; text-align: right; }
.zon-curtail-more { font-size: 0.8rem; color: #fbbf24; text-decoration: none; }
.zon-curtail-more:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .zon-curtail-intro { font-size: 0.84rem; }
  .zon-dials { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 420px) {
  .zd-gauge { width: 72px; height: 72px; }
  .zd-hub b { font-size: 1.1rem; }
}