/* Read-only overlay voor de bwired-embed van het Buienradar Monitor-dashboard.
   De app is alleen-lezen (GET via de proxy); mutaties zijn geblokkeerd door de
   method-lock. Deze overlay geeft Buienradar exact de Davis-look: radiale-gloed
   achtergrond + glas-panels + onzichtbare scrollbar + Davis-afstanden. Laadt ná de
   eigen style.css → wint op gelijke specificiteit; !important waar de app-regel
   specifieker is. */

/* ── 1. Onzichtbare scrollbar (zoals de 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 ── */
html, 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. Header: blendt in de gloed (geen eigen balk, niet sticky) ── */
header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: static !important;
  height: auto !important;
  padding: 18px 24px 8px !important;   /* linkerrand uitgelijnd met main (24px) */
}

/* ── 4. Layout-afstanden als Davis (max-width vrij, padding 24, gap 16) ── */
main {
  max-width: none !important;
  width: 100% !important;
  padding: 4px 24px 24px !important;   /* top klein: header gaf al ruimte */
  gap: 16px !important;
}

/* ── 5. Panels + banner als glas boven de gloed (Davis-glas-tokens) ── */
.card, .banner {
  border-radius: 14px !important;
  border: 1px solid oklch(70% 0.020 240 / 0.18) !important;
  background: oklch(20% 0.020 240 / 0.62) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.banner {
  background: linear-gradient(135deg, oklch(75% 0.090 215 / 0.14) 0%, oklch(20% 0.020 240 / 0.62) 70%) !important;
}
/* regen/waarschuwing-banners houden hun tint, maar als glas-laag */
.banner.rain    { background: linear-gradient(135deg, oklch(55% 0.110 240 / 0.32) 0%, oklch(20% 0.020 240 / 0.62) 78%) !important; }
.banner.warning { background: linear-gradient(135deg, oklch(62% 0.120 70  / 0.28) 0%, oklch(20% 0.020 240 / 0.62) 78%) !important; }

/* ── 6. Technische status-footer verbergen (Davis-look kent die niet) ── */
footer.status-bar { display: none !important; }

/* ── 7. Responsive-hardening: containers krimpen mee, ≤700px één kolom ──
   De Leaflet-kaart + grids renderen in vaste px; zonder min-width:0 duwen ze de
   flex/grid-container breder dan de viewport → horizontale overflow op smal scherm. */
main, .grid, .card, .radar-map, .now-stats, .nowcast-bar { min-width: 0 !important; }
@media (max-width: 700px) {
  .grid.grid-2 { grid-template-columns: 1fr !important; }
  header { padding: 14px 16px 6px !important; }
  main   { padding: 4px 16px 16px !important; }
}