/* Powerload.ai klant-energiedashboard (18-09) — bouwt op de tokens van /app/index.html (--bg, --card, --ink, --muted, --line, --solar, --huis, --accu, --net, --ev, --warm). */
.eh{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(180deg,#dcefff 0%,#eef6ff 55%,#dbe9d3 56%,#cfe2c4 100%)}
.eh[data-dagdeel="schemer"]{background:linear-gradient(180deg,#ffd9b0 0%,#f6e3d2 55%,#c9d9bd 56%,#b9cbae 100%)}
.eh[data-dagdeel="nacht"]{background:linear-gradient(180deg,#0f1a33 0%,#1b2a4a 55%,#233a2c 56%,#1c2f24 100%)}
.eh svg.scene{display:block;width:100%;height:auto}
.eh .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.eh[data-dagdeel="nacht"] .bg{filter:brightness(.55) saturate(.8)}
.eh[data-dagdeel="schemer"] .bg{filter:brightness(.85)}
.eh .ov{position:absolute;inset:0;pointer-events:none}
.eh .ov svg{width:100%;height:100%;display:block;overflow:visible}
.eh .badge{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--line);
  border-radius:14px;padding:6px 10px;min-width:92px;text-align:center;box-shadow:var(--shadow);cursor:pointer;font-family:inherit;color:var(--ink);backdrop-filter:blur(6px)}
.eh .badge:focus-visible{outline:3px solid var(--huis);outline-offset:2px}
.eh .badge .t{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.03em;display:flex;gap:5px;align-items:center;justify-content:center}
.eh .badge .v{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.eh .badge .s{font-size:11px;color:var(--muted);margin-top:1px}
.eh .badge.dim{opacity:.55}
.eh .badge .q{font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.eh .badge .q.off{background:color-mix(in srgb,var(--alert) 14%,transparent);color:var(--alert)}
.eh path.stroom{fill:none;stroke-linecap:round;opacity:.9;stroke-dasharray:10 14;animation:stroom var(--duur,3s) linear infinite}
.eh path.stroom.stil{opacity:.18;animation:none;stroke-dasharray:none}
.eh path.stroom.ghost{opacity:.12;animation:none;stroke-dasharray:none}
@keyframes stroom{to{stroke-dashoffset:-48}}
@media (prefers-reduced-motion:reduce){.eh path.stroom{animation:none;stroke-dasharray:none}}
.eh .pijl{font-size:11px;font-weight:800;fill:var(--ink)}
.eh .huisnaam{position:absolute;left:14px;top:12px;font-weight:800;font-size:15px;letter-spacing:-.02em;color:#0e1726;background:color-mix(in srgb,#fff 80%,transparent);padding:4px 10px;border-radius:99px}
.eh[data-dagdeel="nacht"] .huisnaam{color:#eaf0fb;background:color-mix(in srgb,#0b1220 70%,transparent)}
.ekop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.ekop .now{font-size:13px;color:var(--muted)}
.eperiodes{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.eperiodes button{border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:700;font-size:13px;border-radius:999px;padding:7px 13px;cursor:pointer;font-family:inherit}
.eperiodes button[aria-pressed="true"]{background:var(--huis);color:#fff;border-color:var(--huis)}
.ekaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:760px){.ekaarten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.ekaarten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ekaart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:var(--shadow);min-width:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink)}
.ekaart:focus-visible{outline:3px solid var(--huis);outline-offset:2px}
.ekaart.groot{grid-column:1 / -1}
.ekaart .lbl{font-size:12px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ekaart .val{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ekaart .val small{font-size:13px;color:var(--muted);font-weight:600;margin-left:4px}
.ekaart .sub{font-size:13px;color:var(--muted);margin-top:3px}
.ekaart .euro{color:var(--accu)}
/* Financieel voordeel: kleur uitsluitend op het teken van het voordeel (positief groen, negatief rood, nul neutraal) */
.ekaart .voordeel.pos{color:var(--accu)} .ekaart .voordeel.neg{color:var(--alert)} .ekaart .voordeel.nul{color:var(--muted)}
.ekaart .val.voordeel{font-size:30px}
.efin .vsplit{display:flex;gap:2px 12px;flex-wrap:wrap} .efin .vsplit span{white-space:nowrap}
.ekaart ul.regels{margin:6px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted);display:grid;gap:2px}
.ekaart .dim{opacity:.6}
.pill{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.eems{border-left:4px solid var(--accu)}
.eems.ev{border-left-color:var(--ev)} .eems.rust{border-left-color:var(--muted)} .eems.laden{border-left-color:var(--solar)} .eems.ontladen{border-left-color:var(--accu)} .eems.hand{border-left-color:var(--warn)}
.eems .val{font-size:19px}
.eplan ol{margin:6px 0 0;padding:0;list-style:none;font-size:13px}
.eplan li{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:3px 0;border-top:1px dashed var(--line)}
.eplan li b{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.etl{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 8px 6px;box-shadow:var(--shadow);overflow-x:auto}
.etl svg{display:block;min-width:640px;width:100%;height:auto}
.etl text{font-family:inherit;font-size:11px;fill:var(--muted)}
.etl .as{stroke:var(--line);stroke-width:1}
.etl .nu{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4}
.etl .toekomst{fill:color-mix(in srgb,var(--muted) 8%,transparent)}
.etl .legenda{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:6px 6px 0}
.etl .legenda i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.etl .legenda i.stip{width:0;height:0;border:2px dashed var(--ink);border-width:0 0 2px 0;height:0}
.edrill{margin-top:12px}
.edrill table{width:100%;border-collapse:collapse;font-size:13px}
.edrill td,.edrill th{padding:7px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.edrill th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.edrill td.r{text-align:right;font-variant-numeric:tabular-nums}
.ezone h3{margin:14px 0 4px;font-size:14px}
.echip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted);white-space:nowrap}
.echip.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)} .echip.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)} .echip.bad{background:color-mix(in srgb,var(--alert) 14%,transparent);color:var(--alert)}
.efin .split{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;text-align:center}
.efin .split div{background:var(--soft);border-radius:12px;padding:8px 6px}
.efin .split b{display:block;font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.efin .split span{font-size:11px;color:var(--muted)}
.efin table{width:100%;font-size:13px;border-collapse:collapse;margin-top:8px}
.efin td{padding:4px 2px;border-top:1px dashed var(--line)} .efin td.r{text-align:right;font-variant-numeric:tabular-nums}
.ebalans{font-size:12px;color:var(--muted);margin-top:6px}
.eeditor .obj{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none;background:color-mix(in srgb,var(--card) 92%,transparent);border:2px dashed var(--huis);border-radius:12px;padding:6px 8px;font-size:12px;font-weight:700;color:var(--ink);user-select:none}
.eeditor .obj.sel{border-style:solid;box-shadow:0 0 0 3px color-mix(in srgb,var(--huis) 30%,transparent)}
.eeditor .obj:focus-visible{outline:3px solid var(--warn)}
.eform{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:10px}
.efotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}
.efotos figure{margin:0;background:var(--soft);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.efotos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.efotos figcaption{font-size:12px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.enote{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.eh .badge{min-width:78px;padding:5px 7px}.eh .badge .v{font-size:14px}.ekaart .val{font-size:21px}.ekaart .val.voordeel{font-size:25px}.efin .split b{font-size:15px}}
/* 27-09 live-laag: pijldikte loopt vloeiend mee; netrichting zichtbaar op de kaart */
.eh path.stroom{transition:stroke-width .45s ease}
.ekaart[data-drill="grid"][data-richting="teruglevering"] .val small{color:var(--solar)}
.ekaart[data-drill="grid"][data-richting="afname"] .val small{color:var(--net)}

/* 29-09: stromenlijst onder de tekening (zelfde momentopname als kaarten en pijlen) */
.estromen{list-style:none;margin:10px 2px 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 16px;font-size:13px}
.estromen li{display:flex;align-items:center;gap:8px}.estromen li b{margin-left:auto;font-variant-numeric:tabular-nums}
.estromen li.leeg{color:var(--muted)}.estromen i{width:10px;height:10px;border-radius:50%;flex:none}
.eh .pijl{paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
/* telefoon: compacte badges (alleen naam + waarde) zodat de pijlen zichtbaar blijven; pijlwaarden groter in SVG-eenheden */
@media (max-width:640px){.eh .badge{min-width:0;padding:3px 6px;border-radius:10px}.eh .badge .t{font-size:9px}.eh .badge .v{font-size:12px}.eh .badge .s{display:none}
  .eh .pijl{font-size:26px}.eh .huisnaam{font-size:11px}}

/* 11-10 laadmodus per laadpaal */
.elaad{margin-bottom:12px}
.lmodi{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 6px}
.lmodi button{border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:700;font-size:13px;border-radius:999px;padding:8px 13px;cursor:pointer;font-family:inherit;min-height:40px}
.lmodi button[aria-checked="true"]{background:var(--ev);color:#fff;border-color:var(--ev)}
.luitleg{margin-bottom:6px}
.lveld{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.lveld label{font-weight:600;font-size:14px}
.lveld input{font:inherit;font-size:16px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg, inherit);width:8em;max-width:100%}
.lsnel{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}