/* ─────────────────────────────────────────────────────────────
   menu.css — verticale glas-navigatierail + uitleg-pagina's
   Rail: groot scherm = icoon + tekst · kleiner = alleen iconen · mobiel = balk onder.
   Sluit aan op de variabelen uit style.css (--glass-*, --radius, accenten).
   ───────────────────────────────────────────────────────────── */

:root { --rail-w: 196px; }

/* Content krijgt ruimte naast de (fixed) rail. */
body { padding-left: var(--rail-w); }

/* Pagina-scrollbar onzichtbaar maken (scrollen blijft werken) — net als de EMS-pagina,
   zodat home/Davis/alle pagina's geen dikke OS-scrollbar tonen. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Rail ── */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 12px;
  background: rgba(8, 14, 24, 0.66);
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  overflow-y: auto;
  overflow-x: hidden;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .rail { background: #0c1422; }
}

.rail-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 16px;
  font-size: 1.18rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--txt); text-decoration: none; white-space: nowrap;
}
.rail-brand .brand-dot { color: var(--grid-in); }
.rail-brand-mark { width: 28px; height: 28px; flex: none; color: var(--grid-in); display: inline-flex; }
.rail-brand-mark .logo-mark { width: 100%; height: 100%; }

.rail-nav { display: flex; flex-direction: column; gap: 4px; }

.rail-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--txt-dim);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.rail-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--txt); }
.rail-item.is-inactive { cursor: pointer; }   /* nog niet actief: klikbaar, maar geen navigatie */
.rail-ico { width: 22px; height: 22px; flex: none; color: var(--accent, var(--grid-in)); display: inline-flex; }
.rail-ico svg { width: 100%; height: 100%; }
.rail-lbl { font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.rail-item.is-active {
  color: var(--txt);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .rail-item.is-active { background: rgba(96, 165, 250, 0.16); }
}

/* Sub-items (children, bv. onder 'Uitleg') */
.rail-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 2px 18px; }
.rail-item.is-sub { min-height: 36px; padding: 7px 12px; }
.rail-item.is-sub .rail-ico { width: 18px; height: 18px; }
.rail-item.is-sub .rail-lbl { font-size: 0.88rem; }

/* ── Niet-klikbare sectie-kop + scheidingslijntje + accent-badge (bv. 'AI') ── */
.rail-section { padding: 15px 12px 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--txt-dim); opacity: 0.72; user-select: none; white-space: nowrap; }
.rail-divider { height: 1px; margin: 8px 14px; background: var(--glass-border); }
.rail-badge { margin-left: -6px; flex: none; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 5px; border-radius: 5px; color: #22d3ee; background: rgba(34, 211, 238, 0.14);
  box-shadow: 0 0 7px rgba(34, 211, 238, 0.35); }

/* Taalschakelaar (onder de brand): twee vlag-opties, actieve gemarkeerd. */
.rail-lang {
  display: flex; gap: 4px; margin: 6px 0 14px; padding: 3px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 10px;
}
.rail-lang-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: #8a93a8; font-size: 0.82rem; font-weight: 600;
  padding: 6px 4px; border-radius: 7px; transition: background 0.15s ease, color 0.15s ease;
}
.rail-lang-opt:hover { color: var(--txt); }
.rail-lang-opt.is-on { background: rgba(255, 255, 255, 0.12); color: var(--txt); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.rail-lang .flag { width: 19px; height: 13px; border-radius: 2px; flex: none; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.rail-lang-opt:not(.is-on) .flag { filter: saturate(0.5) opacity(0.7); }

/* ── Uitleg-/contentpagina ── */
.page-body { min-height: 100vh; }
/* ÉÉN gedeeld frame voor ALLE pagina's (Zon/Net/EMS/Rapport/Davis/Uitleg): vaste
   max-breedte 1500px, gecentreerd — EXACT zoals de home-scène (.stage). Zo blijft de
   inhoud bij maximaliseren netjes in het midden staan (geen meeschuiven) en hebben
   alle pagina's identieke maten. Pagina-specifieke breedte-overrides bestaan NIET. */
.page { padding: clamp(16px, 3vw, 26px) 0 56px; }
.page-inner { max-width: 1500px; margin: 0 auto; }
/* Op smalle schermen wat ademruimte zodat content niet tegen de schermrand plakt. */
@media (max-width: 640px) { .page { padding-left: 12px; padding-right: 12px; } }
/* Lange uitleg-tekst houdt een leesbare regelbreedte binnen het brede frame. */
.doc .md { max-width: 82ch; }

.doc {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: clamp(22px, 4vw, 40px);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .doc { background: #0e1828; }
}
.doc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.doc-ico { width: 30px; height: 30px; color: var(--accent, var(--grid-in)); display: inline-flex; flex: none; }
.doc-ico svg { width: 100%; height: 100%; }
.doc-head h1, .doc-shead h2 { margin: 0; font-weight: 600; }
.doc-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); }

.doc-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--glass-border); }
.doc-shead { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.doc-shead h2 { font-size: 1.3rem; }

/* Markdown-typografie */
.md { color: var(--txt); line-height: 1.7; font-size: 1rem; }
.md h2 { font-size: 1.25rem; font-weight: 600; margin: 1.4em 0 0.5em; }
.md h3 { font-size: 1.08rem; font-weight: 600; margin: 1.2em 0 0.4em; }
.md p, .md li { margin: 0.6em 0; color: #d4dceb; }
.md ul, .md ol { margin: 0.7em 0; padding-left: 1.4em; }
.md strong { color: var(--txt); font-weight: 600; }
.md em { font-style: italic; color: #c2cde0; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 6px; }
.md a { color: var(--grid-in); }
.md hr { border: 0; border-top: 1px solid var(--glass-border); margin: 1.6em 0; }
.doc-live { margin-top: 28px; }
.doc-live a { color: var(--grid-in); text-decoration: none; font-weight: 500; }
.doc-live a:hover { text-decoration: underline; }

/* ── EMS-pagina (Bwired Energie Management System) — read-only dashboard ── */
.ems { display: flex; flex-direction: column; gap: 18px; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ems-card { background: #0e1828; }
}
/* EMS-kop in Davis-structuur: titel + status-sub links, info-panel (locale) rechts.
   Scoped onder .ems-embed zodat de ems.css-reset (die ná menu.css laadt) niet stoort. */
/* Kop-basis (display/gap/padding + titel + .head-ico) staat in /css/format.css. */
.ems-embed .ems-headbar { align-items: center; margin: 0 0 16px; }
.ems-embed .ems-head-left { min-width: 0; }
.ems-embed .ems-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ems-hero-title .hl { color: var(--grid-in); }   /* hoofdletters B·E·M·S blauw */
.ems-embed .ems-head-right { display: flex; align-items: center; gap: 12px; flex: none; }
.ems-embed .ems-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%); }
.ems-embed .ems-locale-icon { font-size: 1.6rem; line-height: 1; color: var(--bat-chg); }
.ems-embed .ems-locale-place { font-size: 0.9rem; font-weight: 500; color: var(--txt); }
.ems-embed .ems-locale-coords { font-size: 0.72rem; color: var(--txt-dim); }
@media (max-width: 560px) { .ems-embed .ems-locale-coords { display: none; } }
/* Het 3090-dashboardgrid capt zichzelf op 1400px gecentreerd → cards spronген in en
   stonden smaller dan de titel/home. Vol laten vullen + links uitlijnen op de titel. */
.ems-embed .main-grid { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.ems-intro { margin: 0; color: #c2cde0; line-height: 1.6; max-width: 70ch; }

/* Read-only bron-status (vervangt de aan/uit-schakelaar op de EMS-pagina) */
.source-state-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.source-state-dot.is-on { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.6); }
.source-state-dot.is-off { background: #6e7681; }

/* EMS/Rapport gebruiken hetzelfde gedeelde frame als alle andere pagina's (.page).
   .ems-embed heeft een eigen donkere achtergrond die afweek van de pagina → gaf een
   zichtbaar kader ("lijn om alles heen"). Transparant maken zodat het naadloos is. */
/* Zelfde zij-ademruimte als Davis (.main 24px) en home, zodat EMS/rapport niet tegen
   de menulijn plakken als het scherm < 1500px wordt. Geldt voor titel én content. */
body[data-page="ems"] .ems-embed,
body[data-page="ems-rapport"] .ems-embed { background: transparent; padding-top: 20px; padding-left: 24px; padding-right: 24px; }
body[data-page="ems-rapport"] .ems-embed .rm { padding-top: 0; }

/* ── Davis/Water-standaardformat voor EMS + Rapport ──
   De gloed-achtergrond komt uit /css/format.css (gedeeld skelet + ems-tinten). */
/* Cards als glas boven de gloed + Davis-afstanden (radius 14, padding 18; gap is al 16). */
body[data-page="ems"] .ems-embed .card,
body[data-page="ems-rapport"] .ems-embed .card {
  background: oklch(20% 0.020 240 / 0.62) !important;
  border: 1px solid oklch(70% 0.020 240 / 0.18) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* Davis = weerstation-dashboard in een geïsoleerde iframe; vult naadloos de breedte
   en de resterende hoogte. Geen radius/eigen achtergrond → geen zichtbaar paneelkader. */
.davis-page { width: 100%; }
.davis-frame { display: block; width: 100%; height: calc(100vh - clamp(16px, 3vw, 26px) - 56px); min-height: 460px; border: 0; border-radius: 0; background: transparent; }
@media (max-width: 640px) { .davis-frame { height: calc(100vh - clamp(16px, 3vw, 26px) - 56px - 60px); } }
/* Water: iframe-hoogte volgt de eigen inhoud (gezet door water-embed.js), zodat de
   gloed bij de panels eindigt — net als Davis. min-height = fallback vóór 't laden. */
.water-frame { display: block; width: 100%; min-height: 520px; border: 0; background: transparent; }
/* Buienradar: idem — iframe-hoogte volgt de eigen inhoud (buienradar-embed.js). */
.buienradar-frame { display: block; width: 100%; min-height: 640px; border: 0; background: transparent; }

.ems-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ems-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 6px 13px; font-size: 0.9rem; color: var(--txt);
}
.ems-chip-lbl { color: var(--txt-dim); }
.ems-dryrun { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.45); color: var(--solar); font-weight: 600; }
.ems-live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--txt-dim); margin-left: auto; }
.ems-live .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.ems-live.is-live .status-dot { background: var(--grid-out); box-shadow: 0 0 8px var(--grid-out); }

.ems-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: clamp(16px, 3vw, 24px);
}
.ems-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.15rem; font-weight: 600; }
.ems-card-ico { width: 22px; height: 22px; color: var(--grid-in); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.ems-card-ico svg { width: 100%; height: 100%; }

.ems-p1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ems-phase { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px; text-align: center; }
.ems-phase-lbl { display: block; color: var(--txt-dim); font-size: 0.82rem; margin-bottom: 4px; }
.ems-phase-val { font-size: 1.05rem; font-weight: 600; }
.ems-phase-val.is-import { color: var(--flow-import); }
.ems-phase-val.is-export { color: var(--grid-out); }
.ems-p1-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-border); color: var(--txt-dim); }
.ems-p1-total strong { color: var(--txt); font-size: 1.1rem; }

.ems-price { display: flex; align-items: baseline; gap: 6px; }
.ems-price-val { font-size: 2rem; font-weight: 700; color: var(--solar); }
.ems-price-unit { color: var(--txt-dim); }

.ems-bats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ems-bat { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px; }
.ems-bat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ems-bat-name { font-weight: 600; }
.ems-bat-mode { font-size: 0.78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--txt-dim); }
.ems-mode-charge { background: rgba(74, 222, 128, 0.16); color: var(--bat-chg); }
.ems-mode-discharge { background: rgba(251, 146, 60, 0.16); color: var(--bat-dis); }
.ems-bat-soc { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ems-bat-socbar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ems-bat-socfill { display: block; height: 100%; background: var(--bat-chg); border-radius: 4px; transition: width 0.4s ease; }
.ems-bat-socval { font-weight: 600; min-width: 42px; text-align: right; }
.ems-bat-foot { display: flex; flex-direction: column; gap: 3px; }
.ems-bat-pw { font-weight: 600; color: var(--txt); }
.ems-bat-reason { font-size: 0.8rem; color: var(--txt-dim); line-height: 1.4; }
.ems-waiting { text-align: center; color: var(--txt-dim); padding: 20px; }
@media (max-width: 520px) {
  .ems-p1 { grid-template-columns: 1fr; }
  .ems-live { margin-left: 0; width: 100%; }
}

/* ── Tweetalig: toon de tekst van de actieve taal (html[lang] door i18n gezet) ── */
[data-lang-content] { display: none; }
html[lang="en"] [data-lang-content="en"] { display: block; }
html:not([lang="en"]) [data-lang-content="nl"] { display: block; }

/* ── Responsive: kleiner scherm → alleen iconen ── */
@media (max-width: 1100px) {
  :root { --rail-w: 64px; }
  .rail { padding: 14px 8px; align-items: center; }
  .rail-brand { justify-content: center; gap: 0; padding: 2px 0 14px; }
  .rail-brand-full { display: none; }
  .rail-nav { align-self: stretch; }
  .rail-item { justify-content: center; gap: 0; padding: 11px 0; }
  .rail-lbl { display: none; }
  .rail-sub { margin-left: 0; }
  /* smalle icoon-rail: taalschakelaar → alleen vlaggen, gestapeld (past in 64px) */
  .rail-lang { flex-direction: column; gap: 4px; margin: 2px 0 10px; }
  .rail-lang-opt { padding: 6px; gap: 0; }
  .rail-lang-opt span { display: none; }
  /* icoon-rail: sectie-kop → dun lijntje (tekst weg); badge → hoekje op het icoon */
  .rail-section { font-size: 0; height: 1px; padding: 0; margin: 9px 14px 5px; background: var(--glass-border); }
  /* badge hugt de rechterbovenhoek van het icoon (gecentreerd item → offset vanaf midden) */
  .rail-badge { position: absolute; top: calc(50% - 13px); right: 6px; margin: 0; font-size: 0.5rem; padding: 0 3px; box-shadow: none; }
}

/* ── Mobiel → navigatiebalk onderaan ── */
@media (max-width: 640px) {
  :root { --rail-w: 0px; }
  body { padding-left: 0; padding-bottom: 60px; }
  .rail {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 60px;
    flex-direction: row; align-items: center;
    gap: 0; padding: 0 6px;
    border-right: 0; border-top: 1px solid var(--glass-border);
    overflow: visible;
  }
  .rail-brand { display: none; }
  .rail-nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .rail-group, .rail-sub { display: contents; }
  .rail-item { flex-direction: column; gap: 3px; min-height: 0; padding: 6px 8px; }
  /* Veel nav-items passen niet allemaal naast de vlaggen → nav horizontaal
     scrollbaar maken en de vlaggen rechts vastpinnen (altijd in beeld). */
  .rail-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-item { flex: 0 0 auto; }
  /* taalschakelaar → compact, vast aan het rechteruiteinde van de onderbalk */
  .rail-lang { order: 9; flex: 0 0 auto; flex-direction: row; gap: 2px; margin: 0;
    padding: 2px 2px 2px 6px; border-left: 1px solid var(--glass-border); border-radius: 0; background: none; }
  .rail-lang-opt { padding: 8px 7px; min-height: 40px; gap: 0; }
  .rail-lang-opt span { display: none; }
  /* onderbalk: sectie-koppen + lijntjes weg (passen niet horizontaal); badge → hoekje */
  .rail-section, .rail-divider { display: none; }
  /* onderbalk: badge tegen de rechterbovenhoek van het icoon (niet zwevend boven de balk) */
  .rail-badge { position: absolute; top: calc(50% - 14px); right: 3px; margin: 0; font-size: 0.46rem; line-height: 1.25; padding: 0 3px; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-item, .rail-lang-opt { transition: none; }
}

/* ─── 404-pagina ────────────────────────────────────────────────────────────
   Onbekende paden geven sinds juli 2026 een echte 404 in plaats van een
   redirect naar de homepage. Deze pagina houdt de gewone schil (dus met de
   navigatierail), zodat een bezoeker die op een dode link binnenkomt gewoon
   verder kan klikken. */
.doc-404 .nf-lead {
  max-width: 60ch;
  margin: 14px 0 0;
  color: var(--txt-dim);
}

.doc-404 .nf-path {
  margin: 14px 0 0;
  overflow-wrap: anywhere;
}

.doc-404 .nf-path code {
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  color: var(--txt-dim);
}

.doc-404 .nf-sub {
  margin: 26px 0 12px;
  font-weight: 600;
}

.doc-404 .nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-404 .nf-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;               /* ruim boven de 32px tap-ondergrens */
  padding: 0 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--txt);
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.doc-404 .nf-links a:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.12);
}

@media (max-width: 640px) {
  .doc-404 .nf-links a { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .doc-404 .nf-links   { gap: 8px; }
  .doc-404 .nf-links a { flex: 1 1 100%; }
}