/* ============================================================================
   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 náást de rail (zelfde als EMS) ── */
body[data-page="zon"]::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: var(--rail-w);
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(36% 0.080 240) 0%, transparent 55%),
    radial-gradient(80% 60% at 80% 100%, oklch(28% 0.090 280) 0%, transparent 60%),
    linear-gradient(180deg, oklch(15% 0.020 240) 0%, oklch(10% 0.022 250) 100%);
}
@media (max-width: 640px) { body[data-page="zon"]::before { left: 0; } }

/* 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 ── */
.zon-headbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; padding: 0 0 8px;   /* exact = .ems-headbar → geen versprong tussen pagina's */
}
.zon-hero-title { margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: #e7ecf3; display: inline-flex; align-items: center; gap: 9px; }
.zon-hero-title .hl { color: var(--gw); }
/* Titel-icoon: vaste breedte (1.5rem) + gap 9px → titeltekst start op exact dezelfde x als
   Davis/EMS/Water/Buienradar. Gelijk format op alle bwired-pagina's. */
.head-ico { flex: none; width: 1.5rem; text-align: center; font-size: 1.3rem; line-height: 1; }
.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 ── */
.zon-card, .zon-chart, .zon-panelsnow {
  background: oklch(20% 0.020 240 / 0.62); border: 1px solid oklch(70% 0.020 240 / 0.18);
  border-radius: 14px; padding: 18px; min-width: 0;
  backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* ── 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; }

/* 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: 96px 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: 74px 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 */
}