/* ── Reset & tokens ─────────────────────────────────────────────────────────── */
.ems-embed *, .ems-embed *::before, .ems-embed *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ems-embed {
  --bg:         #0d1117;
  --bg-card:    #161b22;
  --bg-card2:   #1c2128;
  --border:     #30363d;
  --border-h:   #484f58;
  --text:       #e6edf3;
  --text-muted: #8b949e;
  --text-dim:   #6e7681;

  --green:      #3fb950;
  --green-dim:  #1a4425;
  --orange:     #f0883e;
  --orange-dim: #4a2410;
  --red:        #f85149;
  --red-dim:    #3d1a18;
  --blue:       #58a6ff;
  --yellow:     #d29922;
  --yellow-dim: #3d2e0a;
  --purple:     #bc8cff;
  /* --sun ontbrak in de moeder-tokens (var(--sun) werd nergens gedefinieerd,
     waardoor de 💰-verkoopkaart z'n gouden gradient/kop verloor). Hier hersteld
     met de kleur die de moeder elders voor de kaart gebruikt (rgba 245,166,35). */
  --sun:        #f5a623;

  --radius:  8px;
  --radius-lg: 12px;
  --gap:     16px;
  --font:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "SF Mono", "Fira Code", "Fira Mono", monospace;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  gap: 0.75rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header__title { display: flex; align-items: center; gap: 0.5rem; }
.header__icon  { font-size: 1.3rem; }
.header__title h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.3px; }
.header__meta  { display: flex; align-items: center; gap: 0.6rem; color: var(--text-muted); font-size: 0.82rem; }
.header__strategy { font-weight: 600; color: var(--blue); }
.header__sep   { opacity: 0.4; }
.header__ts    { font-family: var(--mono); font-size: 0.77rem; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge--warn    { background: var(--yellow-dim); color: var(--yellow); border: 1px solid var(--yellow); }
.badge--live    { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green);  }

/* ── Dot indicators ─────────────────────────────────────────────────────────── */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-h);
  display: inline-block;
  flex-shrink: 0;
}
.dot--ok      { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot--warn    { background: var(--yellow); }
.dot--err     { background: var(--red); }
.dot--pulse   { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  cursor: pointer;
  border: 1px solid var(--border-h);
  background: var(--bg-card2);
  color: var(--text);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover          { background: var(--border); border-color: var(--text-muted); }
.btn--icon          { padding: 0.35rem 0.5rem; font-size: 1rem; line-height: 1; }
.btn--sm            { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.btn--primary       { background: var(--blue); border-color: var(--blue); color: #000; font-weight: 600; }
.btn--primary:hover { background: #79b8ff; border-color: #79b8ff; }
.btn--secondary     { background: transparent; }

/* ── Reboot-knoppen ──────────────────────────────────────────────────────────── */
.reboot-hint {
  font-size: 0.75rem;
  color: var(--yellow);
  background: var(--yellow-dim);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}
.reboot-hint.is-ready {
  color: var(--green);
  background: var(--green-dim);
}
.reboot-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.btn-danger {
  cursor: pointer;
  border: 1px solid var(--red);
  background: var(--red-dim);
  color: var(--red);
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.15s, transform 0.05s;
}
.btn-danger:hover:not(:disabled) {
  background: var(--red);
  color: #000;
}
.btn-danger:active:not(:disabled) {
  transform: translateY(1px);
}
.btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background: var(--bg);
  color: var(--text-muted);
  border-color: var(--border);
}
@media (max-width: 639px) {
  .reboot-buttons { grid-template-columns: 1fr; }
}

/* ── Fase-test knoppen + resultaat ──────────────────────────────────────────── */
.btn-test {
  cursor: pointer;
  border: 1px solid var(--blue);
  background: rgba(88, 166, 255, 0.12);
  color: var(--blue);
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-test:hover:not(:disabled) { background: var(--blue); color: #000; }
.btn-test:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background: var(--bg);
  color: var(--text-muted);
  border-color: var(--border);
}
.phasetest-result {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.8rem;
  line-height: 1.5;
}
.phasetest-result__verdict { font-weight: 700; margin-bottom: 0.3rem; font-size: 0.9rem; }
.phasetest-result__verdict--ok    { color: var(--green); }
.phasetest-result__verdict--bad   { color: var(--red); }
.phasetest-result__verdict--err   { color: var(--yellow); }
.phasetest-result table { width: 100%; margin-top: 0.3rem; border-collapse: collapse; }
.phasetest-result th, .phasetest-result td {
  text-align: right;
  padding: 0.15rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.phasetest-result th:first-child, .phasetest-result td:first-child { text-align: left; }
.phasetest-result__delta--detected { background: rgba(63, 185, 80, 0.12); font-weight: 700; }

/* ── Main grid ───────────────────────────────────────────────────────────────── */
/* Desktop default: flow (1fr) links, prijs (300px) rechts als zijpaneel */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--gap);
  padding: var(--gap);
  max-width: 1400px;
  margin: 0 auto;
}
/* Grid-items krimpen standaard niet onder hun min-content. De planner-strip (24
   chips van 42px) en de dag-tijdlijn duwden de kolom daardoor breed en de héle
   pagina schoof horizontaal mee, ook op een telefoon. Met min-width:0 mag de
   kolom smal worden en scrollen die twee netjes binnen hun eigen container. */
.main-grid > * { min-width: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;   /* grid-item mag krimpen onder content-min-content (voorkomt horizontale overflow op mobiel) */
  padding: 1.1rem 1.25rem;
}
.card--wide { grid-column: 1; }
.card--full { grid-column: 1 / -1; }

/* Zijkolom naast de energiestroom: prijs + negatieve prijzen onder elkaar in één
   gridcel. Als losse kaarten zou de tweede in de linkerkolom belanden en daar een
   gat naast slaan; zo vullen ze samen de hoogte van de tekening ernaast en houden
   de kaarten daaronder de volle breedte. */
.side-stack {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;   /* laat de canvas/grafiek erin krimpen i.p.v. de kolom oprekken */
}
.side-stack > .card { margin: 0; }
/* De onderste kaart vult de restruimte, zodat de zijkolom exact even hoog eindigt
   als de energiestroom ernaast: geen strookje leegte onderin, welke van de twee
   ook de langste is. */
.side-stack > .card:last-child { flex: 1 1 auto; }
.card__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.card__icon { font-size: 0.95rem; }
.card__sub { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.72rem; color: var(--text-dim); }

/* Status-indicator rechts op de Energiestroom-titel (subtiel) */
.flow-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.flow-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.flow-status__txt { white-space: nowrap; }

/* ── Phase grid ──────────────────────────────────────────────────────────────── */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.phase-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
  transition: border-color 0.2s;
}
.phase-card--consuming { border-color: var(--orange); }
.phase-card--producing { border-color: var(--green); }
.phase-card__label  { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; }
.phase-card__net    { font-size: 1.5rem; font-weight: 700; font-family: var(--mono); line-height: 1.1; margin-bottom: 0.3rem; }
.phase-card__net--pos  { color: var(--orange); }
.phase-card__net--neg  { color: var(--green); }
.phase-card__net--zero { color: var(--text-muted); }
.phase-card__detail { display: flex; gap: 0.6rem; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.6rem; font-family: var(--mono); }
.phase-card__consumed { color: var(--orange); }
.phase-card__produced { color: var(--green); }

.phase-bar-wrap { background: var(--bg); border-radius: 3px; height: 5px; overflow: hidden; position: relative; }
.phase-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease, background 0.3s;
  width: 0;
}
.phase-bar--consuming { background: var(--orange); }
.phase-bar--producing { background: var(--green); }

/* Uitleg bij scheve fasen — alleen zichtbaar als één fase inkoopt terwijl een
   andere teruglevert (ems.js zet 'm aan/uit via het hidden-attribuut). */
.phase-note {
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.phase-note b { color: var(--text); }
/* Schuift open/dicht (ems.js zet .is-open) i.p.v. er ineens te staan: eerder sprong
   de hele pagina op en neer omdat de regel bij elke rimpel rond de drempel kwam en
   ging. De grid-truc (0fr → 1fr) animeert de hoogte zonder een vaste maat te hoeven
   kennen, dus ook als de tekst op mobiel afbreekt. */
.phase-note-wrap { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 180ms ease; }
.phase-note-wrap.is-open { grid-template-rows: 1fr; opacity: 1; }
.phase-note-clip { overflow: hidden; min-height: 0; }
@media (max-width: 640px) { .phase-note { font-size: 0.74rem; } }
@media (prefers-reduced-motion: reduce) { .phase-note-wrap { transition: none; } }

/* P1 totals */
.p1-totals {
  display: flex;
  gap: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.p1-total { display: flex; flex-direction: column; gap: 0.15rem; }
.p1-total__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.p1-total__value { font-size: 1.4rem; font-weight: 700; font-family: var(--mono); }
.p1-total__value--consumed { color: var(--orange); }
.p1-total__value--produced { color: var(--green); }

/* ── Price card ──────────────────────────────────────────────────────────────── */
.price-main { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.price-value {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -1px;
  line-height: 1;
}
.price-value--low      { color: var(--green); }
.price-value--mid      { color: var(--text); }
.price-value--high     { color: var(--orange); }
.price-value--negative { color: var(--purple); }
.price-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.price-label { font-size: 0.75rem; font-weight: 600; }
.price-hour  { font-size: 0.72rem; color: var(--text-muted); }

.price-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.price-chart-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.price-date        { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }

.price-chart-wrap { margin: 0 -0.25rem; position: relative; }
.price-chart { width: 100%; max-width: 100%; display: block; cursor: crosshair; }

/* Hover-tooltip op de prijsbars */
.price-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 7px;
  padding: 6px 10px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}
.price-tooltip.visible { display: flex; }
.pt-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pt-dag   { color: var(--text-muted); font-size: 0.7rem; }
.pt-uur   { color: var(--text); font-weight: 600; }
.pt-prijs { font-weight: 700; font-size: 0.82rem; }
.pt-label { font-size: 0.7rem; }
.price-legend { display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; }
.price-legend__item {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-weight: 600;
}
.price-legend__item--charge    { background: var(--green-dim);  color: var(--green);  }
.price-legend__item--discharge { background: var(--orange-dim); color: var(--orange); }

/* ── Battery grid ────────────────────────────────────────────────────────────── */
.battery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.battery-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color 0.3s;
}
.battery-card--charge    { border-color: var(--green); }
.battery-card--discharge { border-color: var(--orange); }
.battery-card--standby   { border-color: var(--border); }
.battery-card--offline   { opacity: 0.5; }

.battery-card__header { display: flex; align-items: center; gap: 0.4rem; }
.battery-card__id     { font-weight: 700; font-size: 0.95rem; flex: 1; }
.battery-card__phase  { font-size: 0.72rem; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); padding: 0.1rem 0.4rem; border-radius: 4px; }

/* SOC gauge */
.battery-card__soc-wrap { padding: 0.25rem 0; }
.soc-gauge {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 36px;
  overflow: hidden;
}
.soc-gauge__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 5px;
  transition: width 0.6s ease, background 0.3s;
  width: 0;
}
.soc-gauge__fill--high   { background: linear-gradient(90deg, #1a4425, var(--green)); }
.soc-gauge__fill--mid    { background: linear-gradient(90deg, #3d2e0a, var(--yellow)); }
.soc-gauge__fill--low    { background: linear-gradient(90deg, var(--red-dim), var(--red)); }
.soc-gauge__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 0.95rem;
  font-family: var(--mono);
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Battery stats */
.battery-card__stats { display: flex; flex-direction: column; gap: 0.25rem; }
.bat-stat { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.bat-stat__key { color: var(--text-muted); }
.bat-stat__val { font-family: var(--mono); font-weight: 600; }

/* Battery decision */
.battery-card__decision {
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.decision-action {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}
.decision-action--charge    { background: var(--green-dim);  color: var(--green);  }
.decision-action--discharge { background: var(--orange-dim); color: var(--orange); }
.decision-action--standby   { background: var(--bg);         color: var(--text-muted); }

.decision-reason  { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.decision-blocked { font-size: 0.7rem; color: var(--yellow); background: var(--yellow-dim); padding: 0.15rem 0.4rem; border-radius: 3px; display: none; }
.decision-blocked:not(:empty) { display: block; }

/* ── SOC 24u-grafiek per batterij ──────────────────────────────────────────────
   Mini-chart onderaan elke battery-card. SVG met viewBox = volledig responsive. */
.soc-chart-wrap {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.soc-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.soc-chart-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.soc-chart-current {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.soc-chart-inner {
  position: relative;
}
.soc-chart {
  display: block;
  width: 100%;
  height: 60px;
}
/* Eigen rij tussen titel en grafiek — altijd dezelfde hoogte zodat de
   layout niet springt. Toont een hint als er geen hover is, en de tijd +
   SOC zodra de cursor over de grafiek beweegt. */
.soc-tooltip {
  font-size: 0.72rem;
  line-height: 1.3;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
}
.soc-tooltip__hint {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-style: italic;
}
.soc-tooltip__time { color: var(--text-muted); font-size: 0.68rem; }
.soc-tooltip__soc  { font-weight: 700; }

/* ── Verbruiksbronnen ────────────────────────────────────────────────────────── */
.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
}
.sources-empty { color: var(--text-dim); font-style: italic; font-size: 0.82rem; padding: 0.5rem 0; }

.source-tile {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 0.2s, opacity 0.2s;
}
.source-tile--active {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 0 14px -4px var(--orange);
  animation: sourcePulse 2s ease-in-out infinite;
}
@keyframes sourcePulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--orange), 0 0 14px -6px var(--orange); }
  50%      { box-shadow: 0 0 0 1px var(--orange), 0 0 18px -2px var(--orange); }
}
.source-tile--off     { opacity: 0.5; }
.source-tile--offline { border-style: dashed; }

.source-tile__top { display: flex; align-items: center; justify-content: space-between; }
.source-tile__icon { font-size: 1.4rem; line-height: 1; }
.source-tile__label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.source-tile__power { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.source-tile--active .source-tile__power { color: var(--orange); }
.source-tile__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.source-tile__status {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
}
.source-tile--active .source-tile__status { color: var(--orange); }
.source-tile__avg { font-size: 0.68rem; color: var(--text-dim); }
.source-tile__ff { font-size: 0.64rem; color: var(--blue); margin-top: 0.1rem; }
.source-tile__ff--mute { color: var(--text-dim); }

/* Toggle-switch op de tegel */
.source-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.source-toggle input { opacity: 0; width: 0; height: 0; }
.source-toggle__slider {
  position: absolute; inset: 0; background: var(--border-h); border-radius: 20px; transition: background 0.2s;
}
.source-toggle__slider::before {
  content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.source-toggle input:checked + .source-toggle__slider { background: var(--green); }
.source-toggle input:checked + .source-toggle__slider::before { transform: translateX(16px); }

@media (max-width: 640px) {
  .sources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .sources-grid { grid-template-columns: 1fr; }
}

/* ── Log ─────────────────────────────────────────────────────────────────────── */
.log-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.log-empty { color: var(--text-muted); padding: 0.75rem 1rem; }
.log-entry {
  display: flex;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
  align-items: baseline;
}
.log-entry:last-child  { border-bottom: none; }
.log-entry:nth-child(even) { background: rgba(255,255,255,0.02); }
.log-entry__ts    { color: var(--text-dim); flex-shrink: 0; }
.log-entry__bat   { color: var(--blue); font-weight: 600; flex-shrink: 0; min-width: 70px; }
.log-entry__action { flex-shrink: 0; min-width: 70px; }
.log-entry__action--charge    { color: var(--green); }
.log-entry__action--discharge { color: var(--orange); }
.log-entry__action--standby   { color: var(--text-dim); }
.log-entry__reason { color: var(--text-muted); flex: 1; }
.log-entry__power  { color: var(--text); flex-shrink: 0; }
.log-entry__cmd    { color: var(--text-dim); font-size: 0.78rem; flex-shrink: 0; }
.log-entry__cmd code { background: rgba(255,255,255,0.07); border-radius: 3px; padding: 0 4px; font-family: monospace; }

/* ── Energiestroom ───────────────────────────────────────────────────────────── */
/* SVG met viewBox schaalt zichzelf, geen JS resize-logica nodig. De max-width
   bepaalt hier ook de HOOGTE: de viewBox is 600×402, dus breedte × 0,67. */
/* .ems-embed-gescoopt + position:static overschrijft bwired's eigen .flow-svg
   (home-scene overlay = position:absolute/100%), zodat de EMS-flow in z'n kaart blijft. */
/* Sinds de negatieve-prijzen-kaart naar de zijkolom verhuisde is díe kolom de
   langste, wordt deze kaart uitgerekt en zweeft de tekening met ruimte eronder.
   Op 600px bleef er 157px over; 720px (~482px hoog) vult dat op zonder dat deze
   kaart zelf de langste wordt. Groter maakt hem juist dominant en helpt niet.
   Blijft er hoogte over, dan houdt flex-column het diagram gecentreerd in plaats
   van bovenaan geplakt. */
.ems-embed #sectionFlow { display: flex; flex-direction: column; }
.ems-embed .flow-wrap {
  width: 100%;
  max-width: 720px;
  margin: auto;   /* horizontaal centreren, en verticaal als de kaart wordt uitgerekt */
  position: relative;
}
.ems-embed .flow-svg {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
}

/* ── Modal ────────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal__header h2 { font-size: 1rem; font-weight: 600; }
.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* Form elements */
.form-group { display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* Rij met label + ?-knop */
.field-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-header .form-label { margin-bottom: 0; }

/* Ronde ?-knop naast het label */
.help-btn {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.help-btn:hover { background: var(--border); color: var(--text); }

/* Uitklapbaar uitleg-blok */
.popover {
  display: none;
  position: absolute;   /* zweeft onder het veld → geen layout-shift bij hover */
  left: 0; right: 0;
  z-index: 60;
  background: #0d1117;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  padding: 11px 13px;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.65;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.popover.open { display: block; }
.popover strong { color: var(--text); font-size: 0.76rem; }
.popover .pop-example {
  margin-top: 7px;
  padding: 7px 10px;
  background: var(--bg-card);
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.popover .pop-example b { color: var(--text); }
.popover .pop-tip {
  margin-top: 6px;
  color: var(--blue);
  font-size: 0.72rem;
}

.form-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  font-family: var(--font);
  width: 100%;
  transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: var(--blue); }
.form-input--sm   { width: 120px; }
.form-hint { font-size: 0.72rem; color: var(--text-dim); }

/* Radio group */
.radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  row-gap: 0;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
}
.radio-label input { margin-top: 2px; grid-row: 1; grid-column: 1; accent-color: var(--blue); }
.radio-label span  { grid-row: 1; grid-column: 2; font-weight: 600; font-size: 0.85rem; }
.radio-label small { grid-row: 2; grid-column: 2; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.radio-label:has(input:checked) { border-color: var(--blue); }
.radio-label span .info { margin-left: 0.25rem; vertical-align: middle; }
/* Genest sub-vinkje (agressief laden bij negatief) onder Automatisch */
.radio-label--sub { margin-left: 1.4rem; border-style: dashed; background: transparent; transition: opacity 0.15s; }
.radio-label--sub.is-disabled { opacity: 0.4; }
.radio-label--sub.is-disabled input { pointer-events: none; }

/* Toggle */
.toggle-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; }
.toggle-label input { display: none; }
.toggle-track {
  position: relative;
  width: 38px; height: 20px;
  background: var(--border);
  border-radius: 20px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-label input:checked ~ .toggle-track { background: var(--blue); }
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  transition: left 0.2s;
}
.toggle-label input:checked ~ .toggle-track .toggle-thumb { left: 21px; }

/* Battery config grid */
.bat-config-wrap { overflow-x: auto; }
.bat-config-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.bat-config-legend {
  display: grid;
  grid-template-columns: 1fr 48px 62px 62px 32px 72px 72px;
  gap: 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.bat-config-row {
  display: grid;
  grid-template-columns: 1fr 48px 62px 62px 32px 72px 72px;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
}
.bat-config-row__id { font-weight: 600; font-size: 0.78rem; }
.bat-config-row input[type="number"] { width: 100%; box-sizing: border-box; }
.bat-config-row input[type="checkbox"] { width: auto; cursor: pointer; }

/* Price config */
.price-config { display: flex; flex-direction: column; gap: 0.5rem; }
.price-config__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
}
.price-config__row label { color: var(--text-muted); }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── Responsive ──────────────────────────────────────────────────────────────
   Breakpoints:
   ≥ 1024px  → desktop:  flow links (1fr) + prijs rechts (300px), batterijen 3 kolommen
   640–1023px → tablet:  flow + prijs naast elkaar (1fr 1fr), batterijen 3→2 kolommen
   ≤ 639px   → mobiel:  alles onder elkaar (1fr), batterijen 2→1 kolom
   ≤ 400px   → klein:   extra compact
──────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (640–1023px): flow + prijs naast elkaar ── */
@media (max-width: 1023px) {
  .main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Flow neemt linker kolom, prijs rechter kolom — beide gelijke breedte */
  .card--wide { grid-column: 1; }

  /* Batterijen passen nog met 3 kolommen op tablet */
  .battery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Smal tablet (640–767px): batterijen 2 kolommen ── */
/* .flow-wrap heeft hier geen regel nodig: de kaart is dan smaller dan de max-width,
   dus de SVG schaalt gewoon mee met de breedte. */
@media (max-width: 767px) and (min-width: 640px) {
  .battery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobiel (≤ 639px): alles enkele kolom ── */
@media (max-width: 639px) {
  html { font-size: 14px; }

  .main-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.6rem;
    gap: 0.6rem;
  }

  /* Alle kaarten: volle breedte */
  .card--wide { grid-column: 1; }
  /* Zijkolom bestaat niet meer: prijs en negatieve prijzen worden gewoon twee
     kaarten onder elkaar in de enige kolom. */
  .side-stack { grid-column: 1; }

  /* Energiestroom: aspect-ratio uit CSS-base regelt het — geen override nodig */

  /* Fase-kaarten: 3 kolommen naast elkaar, compact */
  .phase-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .phase-card         { padding: 0.55rem 0.5rem; }
  .phase-card__net    { font-size: 1.05rem; }
  .phase-card__label  { font-size: 0.65rem; }
  .phase-card__detail { font-size: 0.65rem; gap: 0.3rem; }

  /* P1 totalen */
  .p1-totals       { gap: 0.6rem; }
  .p1-total__value { font-size: 1.1rem; }

  /* Batterijen: zoveel kolommen als er écht passen. Een vaste 2-koloms-regel gaf op
     een moderne telefoon (430px) kaarten van 158px, en daar past "Max laad/ontladen
     2500 / 2000 W" niet fatsoenlijk in. Met minmax krijgt een 430px-scherm één volle
     kolom en een breder scherm alsnog twee, zonder aparte breakpoint. */
  .battery-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

  /* Prijs: kleiner hoofdgetal */
  .price-value { font-size: 1.7rem; }

  /* Header: compacter, meta-items mogen wrappen */
  .header          { padding: 0.65rem 0.85rem; }
  .header__title h1 { font-size: 1rem; }
  .header__meta    { font-size: 0.75rem; gap: 0.4rem; }

  /* Log: entries wrappen ipv horizontaal scrollen */
  .log-entry {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.4rem 0.6rem;
  }
  .log-entry__ts     { font-size: 0.68rem; flex: 0 0 auto; }
  .log-entry__bat    { font-size: 0.7rem;  flex: 0 0 auto; min-width: 0; }
  .log-entry__action { font-size: 0.7rem;  flex: 0 0 auto; min-width: 0; }
  .log-entry__power  { font-size: 0.7rem;  flex: 0 0 auto; margin-left: auto; }
  .log-entry__reason { font-size: 0.7rem;  flex: 1 1 100%; color: var(--text-dim); }
  .log-entry__cmd    { display: none; } /* cmd-kolom verbergen op mobiel */

  /* Modal: volledige breedte */
  .modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius);
  }

  /* Batterij config in modal */
  .bat-config-legend { display: none; }
  .bat-config-row {
    grid-template-columns: 1fr repeat(4, auto);
    gap: 0.4rem;
  }
  .bat-config-row__id             { grid-column: 1 / -1; font-size: 0.82rem; }
  .bat-config-row input[type="number"] { width: 46px; }
}

/* ── Kleine telefoon (≤ 400px): extra compact ── */
@media (max-width: 400px) {
  .phase-card__net    { font-size: 0.9rem; }
  .phase-card__detail { display: none; }

  /* 1 kolom batterijen op hele kleine schermen */
  .battery-grid { grid-template-columns: 1fr; }

  .p1-total__value { font-size: 0.95rem; }
  .price-value     { font-size: 1.5rem; }

  .header__ts    { display: none; } /* timestamp verbergen op kleinste schermen */
}

/* ── Planner-advies-kaart ─────────────────────────────────────────────────── */
.planner-badge { margin-left: auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 0.15rem 0.5rem; border-radius: 20px; }
.planner-badge--shadow { background: var(--yellow-dim); color: var(--yellow); border: 1px solid var(--yellow); }
.planner-badge--active { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green); }
.planner-main   { margin: 0.2rem 0 0.4rem; }
.planner-mode   { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.planner-mode--grid  { color: var(--blue); }
.planner-mode--dis   { color: var(--orange); }
.planner-mode--self  { color: var(--yellow); }
.planner-mode--hold  { color: var(--text-muted); }
.planner-mode--stale { opacity: 0.5; }
.planner-reason { font-size: 0.9rem; color: var(--text); margin-top: 0.2rem; }
.planner-meta   { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; }
.planner-note   { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.5rem; line-height: 1.45;
  border-top: 1px solid var(--border); padding-top: 0.5rem; }

/* Info-tooltip (ⓘ) op de kaart-titels — werkt op hover én tap (klik) */
.card__title .info { margin-left: 0.15rem; }
.info { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; border: 1px solid var(--border-h); color: var(--text-dim); font-size: 0.68rem; font-weight: 700;
  cursor: help; position: relative; user-select: none; vertical-align: middle; }
.info:hover, .info:focus { color: var(--text); border-color: var(--blue); outline: none; }
.info.is-open { color: var(--text); border-color: var(--blue); }
.info__tip { position: absolute; left: -2px; top: calc(100% + 8px); z-index: 50; width: min(280px, 78vw);
  background: var(--bg-card2); border: 1px solid var(--border-h); border-radius: 8px; padding: 0.6rem 0.72rem;
  font-size: 0.74rem; font-weight: 400; line-height: 1.5; color: var(--text-muted); text-align: left;
  text-transform: none; letter-spacing: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s; }
.info__tip b { color: var(--text); font-weight: 600; }
.info__tip::before { content: ""; position: absolute; left: 5px; top: -5px; width: 9px; height: 9px;
  background: var(--bg-card2); border-left: 1px solid var(--border-h); border-top: 1px solid var(--border-h); transform: rotate(45deg); }
.info:hover .info__tip, .info:focus .info__tip, .info.is-open .info__tip { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* In de smalle zijkolom (300px) steekt een tooltip van 280px rechts buiten het
   scherm: de pagina kreeg daardoor horizontale scroll, ook al is de tooltip
   onzichtbaar. Daar klapt hij naar links open i.p.v. naar rechts. */
.side-stack .info__tip { left: auto; right: -2px; }
.side-stack .info__tip::before { left: auto; right: 5px; }
/* ── 📅 Dag-overzicht (vandaag/morgen tijdlijn) ─────────────────────────────── */
#sectionDag, #sectionPlanner { position: relative; }   /* anker voor de absolute .do-tip hover */
.do-tabs { display: inline-flex; margin-left: auto; background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; gap: 2px; }
.do-tab { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer;
  /* min. 32px tap-target: met drie tabs naast elkaar is mistikken anders te makkelijk */
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; }
.do-tab.is-active { background: var(--bg-card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.do-story { font-size: 0.86rem; line-height: 1.5; color: var(--text); background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; margin: 12px 0; }
.do-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.do-tile { background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.do-tile .t-l { font-size: 0.68rem; color: var(--text-muted); }
.do-tile .t-v { font-size: 1rem; font-weight: 700; margin-top: 2px; }
.do-tile .t-s { font-size: 0.66rem; color: var(--text-dim); }
.do-scroll { overflow-x: auto; padding-bottom: 4px; min-width: 0; }
.do-timeline { display: flex; gap: 2px; min-width: 640px; }
.do-hr { flex: 1; min-width: 23px; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; padding-top: 12px; cursor: default; }
.do-hr .do-cap { width: 100%; height: 4px; border-radius: 3px; }
.do-hr .do-sunwrap { width: 100%; height: 46px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; display: flex; align-items: flex-end; overflow: hidden; }
.do-hr .do-sun { width: 100%; background: linear-gradient(180deg, #e3b341, #d29922); }
.do-hr .do-act { width: 100%; height: 19px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; }
.do-hr .do-hl { font-size: 0.6rem; color: var(--text-dim); }
.do-act.laden { background: var(--green-dim); }
.do-act.huis  { background: #10233d; }
.do-act.sell  { background: var(--yellow-dim); }
.do-act.vol   { background: var(--bg-card2); }
.do-act.grid  { background: #241a3d; }
.do-hr.future { opacity: 0.8; }
.do-hr.now .do-sunwrap { outline: 2px solid var(--purple); outline-offset: 1px; }
.do-hr .do-nowtag { position: absolute; top: 0; font-size: 0.55rem; font-weight: 700; color: var(--purple); }
.do-hr:hover .do-sunwrap { outline: 2px solid var(--border-h); outline-offset: 1px; }
.do-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; font-size: 0.72rem; color: var(--text-muted); align-items: center; }
.do-legend span { display: flex; align-items: center; gap: 5px; }
.do-lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.do-lg--laden { background: var(--green); } .do-lg--huis { background: var(--blue); }
.do-lg--sell { background: var(--yellow); } .do-lg--vol { background: var(--text-dim); }
.do-pc { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 1px; }
.do-pc--low { background: var(--green); } .do-pc--mid { background: var(--yellow); } .do-pc--high { background: var(--red); }
.do-tip { position: absolute; z-index: 30; background: var(--bg-card2); border: 1px solid var(--border-h); border-radius: var(--radius); padding: 8px 10px; font-size: 0.76rem; line-height: 1.5; color: var(--text); box-shadow: 0 6px 22px rgba(0,0,0,0.55); pointer-events: none; max-width: 240px; }
.do-tip-eur { font-weight: 700; margin-top: 3px; }
.do-tip .eur-plus { color: var(--green); } .do-tip .eur-min { color: var(--red); }
/* Tooltip-details als klassen (de CSP blokkeert inline style-attributen). */
.do-tip-dim { color: var(--text-dim); }
.do-tip-fc  { color: var(--text-dim); font-size: 0.9em; margin-top: 2px; }
@media (max-width: 640px) {
  .do-tiles { grid-template-columns: repeat(2, 1fr); }
  /* Sinds er drie dag-tabs zijn passen titel en tabs niet meer op één regel: de
     tabs eisten 208px op waardoor "Dag-overzicht" tot 67px werd geknepen en over
     twee regels brak. Nu houdt de titel z'n eigen regel en krijgen de tabs de
     volle breedte eronder, gelijk verdeeld (ook prettiger om te tikken). */
  #sectionDag .card__title { flex-wrap: wrap; }
  .do-tabs { flex: 1 0 100%; margin-left: 0; }
  .do-tab  { flex: 1 1 0; }
  .do-tip { max-width: 200px; font-size: 0.72rem; }
}
@media (max-width: 420px) {
  .do-story { font-size: 0.8rem; }
  .do-legend { font-size: 0.66rem; gap: 8px 10px; }
}

/* Zodra de kaarten smaller worden (2-koloms/landscape ≤1023px) de absolute
   kaart-titel-tooltip binnen de kaart houden — anders steekt de 280px-tip buiten
   de viewport en veroorzaakt horizontale overflow. */
@media (max-width: 1023px) {
  .card__title { position: relative; }
  .card__title .info { position: static; }
  .card__title .info__tip { left: 8px; right: 8px; width: auto; }
  .card__title .info__tip::before { display: none; }
}

/* Mobiel: ⓘ ≥ 32px tap-target */
@media (max-width: 640px) {
  .info { width: 32px; height: 32px; font-size: 0.8rem; }
  /* Kaart-titel: tip spant de titel zodat hij nooit buiten beeld valt */
  .card__title { position: relative; }
  .card__title .info { position: static; }
  .card__title .info__tip { left: 12px; right: 12px; width: auto; top: calc(100% + 6px); }
  .card__title .info__tip::before { display: none; }
  /* Modal-radios: tip spant de optie zodat hij binnen de modal blijft */
  .radio-label { position: relative; }
  .radio-label .info { position: static; }
  .radio-label .info__tip { left: 0; right: 0; width: auto; top: calc(100% + 4px); }
  .radio-label .info__tip::before { display: none; }
}

/* ── Planner-vooruitblik (komende uren + verkoop/reserve-status) ─────────────── */
.pl-verkoop { margin-top: 10px; font-size: 0.82rem; line-height: 1.45; border-radius: var(--radius); padding: 8px 11px; border: 1px solid var(--border); }
.pl-verkoop--ok   { background: var(--green-dim);  border-color: var(--green);  color: var(--text); }
.pl-verkoop--hold { background: var(--yellow-dim); border-color: var(--yellow); color: var(--text); }
.pl-next { margin-top: 10px; font-size: 0.84rem; color: var(--text-muted); }
.pl-next b { color: var(--text); }
.pl-strip-wrap { overflow-x: auto; margin-top: 8px; padding-bottom: 3px; }
.pl-strip { display: flex; gap: 4px; min-width: min-content; }
.pl-h { flex: 0 0 auto; width: 42px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: var(--radius); background: var(--bg-card2); border: 1px solid var(--border); }
.pl-h--now { border-color: var(--purple); background: var(--bg-card); }
/* Verstreken uren blijven staan (de dag schuift niet meer op) maar zijn duidelijk
   geweest — anders lijkt een duur uur van vanochtend nog een kans. */
.pl-h--past { opacity: 0.42; }
/* Scheiding tussen vandaag en morgen in de strip */
.pl-h--daybreak { margin-left: 10px; box-shadow: -6px 0 0 -5px var(--text-dim); }
/* Verkoopuur opvallend maken: dát is het uur waar je naar zoekt in de rij. */
.pl-h--sell { border-color: var(--yellow); background: var(--yellow-dim); }
.pl-h--sell .pl-h__u { color: var(--yellow); }
.pl-h__u { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; }
.pl-h--now .pl-h__u { color: var(--purple); }
.pl-h__i { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.pl-h__p { font-size: 0.6rem; color: var(--text-dim); }
@media (max-width: 640px) { .pl-h { width: 38px; } }

/* 24-uurs grafiek onder de urenstrip: prijs · zon · voorspelde accustand
   (SVG uit ems.js). Scrollt horizontaal mee op smalle schermen. De SVG-breedte
   staat hier i.p.v. als inline style op de <svg> — de CSP (style-src 'self')
   blokkeert inline style-attributen. */
.pl-graph { overflow-x: auto; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.pl-graph svg { width: 100%; min-width: 520px; height: auto; }
.pl-graph:empty { display: none; }
/* Onzichtbare hover-kolommen op de SVG: cursor via class (CSP blokkeert inline style). */
.pl-graph svg rect.pls-hit { cursor: pointer; }
/* Legenda onder de grafiek — swatches die de drie banden + markeringen duiden. */
.pl-graph-legend { margin-top: 8px; }
.pl-lg { flex: none; display: inline-block; }
.pl-lg--line { width: 14px; height: 3px; border-radius: 2px; background: var(--blue); }
.pl-lg--sun  { width: 11px; height: 11px; border-radius: 3px; background: var(--yellow); opacity: 0.55; }
.pl-lg--soc  { width: 11px; height: 11px; border-radius: 3px; background: var(--green); opacity: 0.5; }
.pl-lg--ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--yellow); box-sizing: border-box; }
.pl-lg--now  { width: 8px; height: 11px; border-radius: 2px; background: var(--purple); opacity: 0.5; }
.pls-cap { fill: var(--text-muted); font-size: 10px; }
.pls-lbl { fill: var(--text-dim); font-size: 10px; }
.pls-val { fill: var(--text); font-size: 10px; font-weight: 700; }
@media (max-width: 640px) { .pls-cap, .pls-lbl, .pls-val { font-size: 11px; } }

/* Zon-verwachting (Dag-overzicht) + mini zon-balkje in de komende-uren-strip */
.do-zon { margin: 8px 0 12px; font-size: 0.82rem; color: var(--text-muted); background: var(--yellow-dim); border: 1px solid var(--yellow); border-radius: var(--radius); padding: 7px 11px; }
.do-zon b { color: var(--yellow); }
.do-zon:empty { display: none; }
.pl-h__sun { width: 100%; height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.pl-h__sun i { display: block; height: 100%; background: var(--yellow); }

/* Opbouw per verkoop-uur onder de kop: "07:00 · 4,16 kWh × €0,312/kWh = €1,30" */
.pl-verkoop__uren { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 6px; padding-top: 6px;
                    border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--text-muted); }
.pl-verkoop__uur b { color: var(--text); }
@media (max-width: 640px) { .pl-verkoop__uren { font-size: 0.72rem; gap: 3px 10px; } }
@media (max-width: 420px) { .pl-verkoop__uren { flex-direction: column; gap: 2px; } }

/* ── Besluit-spoor: waarom werd dit uur wat het werd ───────────────────────────
   Vier vaste kolommen (vlag · deel · eis · reden) zodat de rijen onder elkaar
   uitlijnen, ook als de reden lang is. De kolombreedtes staan hier één keer en
   worden per breakpoint alleen kleiner, nooit anders van orde: dan blijft de
   precedentie (negatief → verkoop → netladen → zelfverbruik) leesbaar. */
.spoor { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius);
         background: var(--bg-card2); overflow: hidden; }
.spoor__kop { display: flex; align-items: center; gap: 8px; padding: 7px 11px;
              border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); }
.spoor__titel { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.spoor__uur   { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.spoor__toets { margin-left: auto; font-size: 0.7rem; padding: 2px 7px; border-radius: 999px;
                border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.spoor__toets--ok       { color: var(--green);  border-color: var(--green);  background: var(--green-dim); }
.spoor__toets--blok     { color: var(--red);    border-color: var(--red);    background: var(--red-dim); }
.spoor__toets--onbekend { color: var(--text-dim); }

.spoor__lijst { list-style: none; margin: 0; padding: 0; }
.spoor__rij { display: grid; grid-template-columns: 16px 116px 58px 1fr; align-items: baseline;
              gap: 0 8px; padding: 6px 11px; font-size: 0.78rem; line-height: 1.4;
              border-top: 1px solid rgba(255, 255, 255, 0.04); }
.spoor__lijst > .spoor__rij:first-child { border-top: 0; }
.spoor__vlag { text-align: center; font-size: 0.8rem; }
.spoor__deel { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spoor__ico  { display: inline-block; width: 1.15em; }
.spoor__eis  { font-size: 0.68rem; color: var(--text-dim); text-align: right;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.spoor__waarom { color: var(--text-muted); }
.spoor__voorstel { display: block; color: var(--text-dim); font-size: 0.72rem; }

/* Gekozen valt op, geblokkeerd valt méér op, de rest wijkt terug. */
.spoor__rij--gekozen { background: rgba(63, 185, 80, 0.07); }
.spoor__rij--gekozen .spoor__vlag { color: var(--green); }
.spoor__rij--gekozen .spoor__deel { font-weight: 600; }
.spoor__rij--blok { background: rgba(248, 81, 73, 0.07); }
.spoor__rij--blok .spoor__vlag { color: var(--red); }
.spoor__rij--blok .spoor__deel { text-decoration: line-through; text-decoration-thickness: 1px;
                                 color: var(--text-muted); }
.spoor__rij--blok .spoor__waarom { color: var(--text); }
.spoor__rij--nvt .spoor__vlag,
.spoor__rij--nvt .spoor__deel { color: var(--text-dim); }

.spoor__voet { padding: 6px 11px; border-top: 1px solid var(--border); font-size: 0.7rem;
               color: var(--text-dim); line-height: 1.45; }
.spoor__voet b { color: var(--text-muted); }

/* Tablet: smallere kolommen, de reden houdt de rest. */
@media (max-width: 980px) {
  .spoor__rij { grid-template-columns: 16px 104px 52px 1fr; font-size: 0.76rem; }
}
/* Mobiel-portrait: de reden onder de regel, zodat er niets afgekapt wordt. */
@media (max-width: 640px) {
  .spoor__rij { grid-template-columns: 16px 1fr auto; gap: 2px 8px; }
  .spoor__eis { grid-column: 3; }
  .spoor__waarom { grid-column: 2 / -1; }
  .spoor__kop { flex-wrap: wrap; }
  .spoor__toets { margin-left: 0; }
}
/* Smalle telefoon: compacter, maar de vlag-kolom blijft staan als anker. */
@media (max-width: 420px) {
  .spoor__rij { padding: 6px 8px; font-size: 0.73rem; }
  .spoor__kop { padding: 6px 8px; }
  .spoor__voet { padding: 6px 8px; font-size: 0.68rem; }
  .spoor__deel { white-space: normal; }
}

/* ── Dagbeoordeling ─────────────────────────────────────────────────────── */
.bo-inhoud { margin-top: 4px; }
.bo-leeg { color: var(--text-muted); font-size: 0.86rem; margin: 8px 0; }
.bo-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bo-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); flex: none; }
.bo-stip--ok { background: var(--green); } .bo-stip--warn { background: var(--yellow); }
.bo-stip--err { background: var(--red); }
.bo-oordeel { font-weight: 600; font-size: 0.92rem; }
.bo-oordeel--ok { color: var(--green); } .bo-oordeel--warn { color: var(--yellow); }
.bo-oordeel--err { color: var(--red); }
.bo-datum { font-size: 0.8rem; color: var(--text-muted); }
.bo-tekst { font-size: 0.88rem; line-height: 1.55; margin: 0 0 12px; }
.bo-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.bo-tegel { background: var(--bg-card2); border-radius: var(--radius); padding: 8px 10px; }
.bo-tegel__l { font-size: 0.68rem; color: var(--text-muted); }
.bo-tegel__v { font-size: 0.95rem; font-weight: 700; margin-top: 2px; }
.bo-rij { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.bo-dag { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 10px; font: inherit; font-size: 0.76rem; cursor: pointer;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); }
.bo-dag.is-active { background: var(--bg-card); color: var(--text); border-color: var(--border-strong, var(--border)); }
@media (max-width: 980px) { .bo-tegels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bo-tekst { font-size: 0.84rem; } }
@media (max-width: 420px) {
  .bo-tegels { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .bo-tegel__v { font-size: 0.88rem; }
  .bo-dag { flex: 1 1 calc(50% - 3px); }
}