/* Read-only overlay voor de bwired-embed van het Water Monitor-dashboard.
   De app is alleen-lezen (GET + SSE); mutaties zijn geblokkeerd door de method-lock.
   Doel van deze overlay: Water qua afstanden, marges, header én sfeer EXACT gelijk
   maken aan het Davis-dashboard (de referentie). Laadt ná de eigen style.css → wint
   op gelijke specificiteit; !important waar de app-regel specifieker is. */

/* ── 1. Frame: volle breedte + onzichtbare scrollbar (zoals overige bwired-pagina's) ── */
html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ── 2. Davis-look: radiale-gloed achtergrond (OKLCH) achter alles ── */
body { background: transparent !important; }
body::before {
  content: ""; position: fixed; inset: 0; 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%);
}

/* ── 3. Layout-afstanden EXACT als Davis ──────────────────────────────────────────
   Davis: .main padding 20px 24px + flex-column gap 16px; panels naast elkaar gap 16px;
   card radius 14px, padding 18px. */
main {
  max-width: none !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}
.cards       { gap: 16px !important; margin-bottom: 0 !important; }
.charts-grid { gap: 16px !important; }
.banner      { margin-bottom: 0 !important; }
.card, .chart-section, .banner { border-radius: 14px !important; }
.card, .chart-section          { padding: 18px !important; }
.banner                        { padding: 14px 18px !important; }

/* Panels als glas boven de gloed (Davis-glas-tokens) */
.card, .chart-section {
  background: oklch(20% 0.020 240 / 0.62) !important;
  border: 1px solid oklch(70% 0.020 240 / 0.18) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.card-primary {
  background: linear-gradient(135deg, oklch(75% 0.090 215 / 0.16) 0%, oklch(20% 0.020 240 / 0.62) 60%) !important;
}
.banner {
  background: linear-gradient(135deg, oklch(75% 0.090 215 / 0.14) 0%, oklch(20% 0.020 240 / 0.62) 70%) !important;
  border: 1px solid oklch(70% 0.020 240 / 0.18) !important;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

/* ── 4. Header: structuur van Davis' .page-head (titel links + locale-panel rechts) ── */
.footbar { display: none !important; }                 /* footer-lijn weg (Davis heeft 'm niet) */
.topbar {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  gap: 16px !important; padding: 0 0 8px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  max-width: none !important; position: static !important;
}
.head-title h1 { margin: 0 !important; font-size: 1.6rem !important; font-weight: 600 !important; color: var(--primary-2) !important; line-height: 1.2; }
.head-title .status { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 0.82rem; margin-top: 4px; }
.head-right { display: flex; align-items: center; gap: 12px; }
.locale {
  display: flex; align-items: center; gap: 12px;
  border-radius: 10px; padding: 8px 16px;
  background: oklch(20% 0.020 240 / 0.42);
  border: 1px solid oklch(70% 0.020 240 / 0.18);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.locale-icon  { font-size: 1.8rem; line-height: 1; }
.locale-place { font-size: 0.9rem; font-weight: 500; color: var(--text); }
.locale-coords{ font-size: 0.72rem; color: var(--text-dim); }
@media (max-width: 560px) { .locale-coords { display: none; } }

/* ── 5. Responsive-hardening ──────────────────────────────────────────────────────
   De Water-charts renderen in vaste pixels (clientWidth). Zonder min-width:0 duwen
   die de flex/grid-container breder dan de viewport → horizontale overflow op smal
   scherm. min-width:0 laat de containers krimpen; de app hertekent dan op de juiste
   breedte. Charts onder 700px in één kolom zodat elke chart ≥ z'n minimum (280px) krijgt. */
main { width: 100% !important; }
main, .cards, .charts-grid, .chart-section, .chart-wrap { min-width: 0 !important; }
@media (max-width: 700px) { .charts-grid { grid-template-columns: 1fr !important; } }