.dlb-overview-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.dlb-overview-card{display:block;padding:0;border:1px solid var(--hairline);border-radius:16px;background:var(--surface);box-shadow:0 8px 22px #303d7a0a;overflow:hidden}.dlb-overview-card header{display:flex;gap:12px;justify-content:space-between;align-items:start}.dlb-overview-card h2{margin:2px 0 4px;font-size:21px}.dlb-overview-card header p{margin:0;color:var(--ink-3);font-size:13px}.dlb-overview-badge{padding:6px 9px;border-radius:999px;background:var(--accent-tint);color:var(--accent-ink);font-size:11px;font-weight:750;white-space:nowrap}.dlb-energy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;max-width:720px}.dlb-meter{display:grid;gap:4px;min-height:102px;padding:13px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-2)}.meter-icon{display:inline-flex;vertical-align:-2px;margin-right:4px;color:var(--ink-3)}.dlb-meter.grid{border-left:3px solid #0ca7a2}.dlb-meter.pv{border-left:3px solid var(--warn)}.dlb-meter b{font-size:13px;color:var(--ink)}.dlb-meter strong{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}.dlb-meter small{color:var(--ink-3);font-size:11px}.dlb-meter .live{color:var(--ok-ink);font-weight:700}.dlb-meter .offline{color:var(--warn-ink);font-weight:700}.dlb-limits{display:flex;gap:20px;padding:11px 0;border-top:1px solid var(--hairline-2);border-bottom:1px solid var(--hairline-2)}.dlb-limits div{display:grid;gap:3px}.dlb-limits small{color:var(--ink-3)}.dlb-limits b{font-size:15px;font-variant-numeric:tabular-nums}.dlb-connectors-overview{display:grid;gap:8px}.dlb-connectors-overview h3{margin:0;font-size:14px}.dlb-connector-overview{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hairline-2)}.dlb-connector-overview b{font-size:12px}.dlb-connector-overview small{display:block;margin-top:2px;color:var(--ink-3);font-size:11px}.dlb-dot.online{color:var(--ok-ink)}.dlb-dot.problem{color:var(--bad-ink)}.dlb-dot.muted{color:var(--ink-3)}.dlb-mode-pill{padding:5px 8px;border-radius:999px;background:var(--hairline-2);color:var(--ink-2);font-size:11px;font-weight:750;white-space:nowrap}.dlb-mode-pill.pure_pv{background:var(--ok-tint);color:var(--ok-ink)}.dlb-mode-pill.hybrid{background:var(--live-tint);color:var(--live-ink)}.dlb-mode-pill.fast{background:var(--warn-tint);color:var(--warn-ink)}.dlb-alert{padding:9px 11px;border-radius:9px;background:var(--bad-tint);color:var(--bad-ink);font-size:12px}.dlb-empty{color:var(--ink-3);font-size:13px}@media(max-width:520px){.dlb-overview-grid{grid-template-columns:1fr}.dlb-energy-grid{grid-template-columns:1fr}.dlb-limits{gap:12px}.dlb-connector-overview{grid-template-columns:10px 1fr}.dlb-mode-pill{grid-column:2;justify-self:start}}
.dlb-empty-card{max-width:660px}.dlb-empty-card header p{max-width:560px;line-height:1.55}

.dlb-limit-edit{border:1px solid var(--hairline);border-radius:11px;padding:10px 12px;background:var(--surface-2)}.dlb-limit-edit summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--accent-ink)}.dlb-limit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}.dlb-limit-grid label{display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--ink-2)}.dlb-limit-grid input,.dlb-limit-grid select{width:100%;padding:7px;font-size:12px}.dlb-limit-edit button{font-size:12px}

.dlb-mode-cell{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.dlb-mode-switch{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface);border:1px solid #1d2440;gap:2px}.dlb-mode-switch button{border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:700 11px Inter,system-ui,sans-serif;padding:6px 11px;cursor:pointer;white-space:nowrap}.dlb-mode-switch button:hover{color:var(--ink)}.dlb-mode-switch button.active{background:#1a3b4d;color:#fff}.dlb-advanced{border:0;border-radius:999px;background:#1d2440;color:#c2c9e4;font:700 11px Inter,system-ui,sans-serif;padding:9px 14px;cursor:pointer;white-space:nowrap}.dlb-advanced:hover{color:#fff}@media(max-width:520px){.dlb-mode-cell{grid-column:2;justify-content:flex-start}}

.dlb-unsized{display:block;margin-top:4px;color:var(--bad-ink);font-size:11px;line-height:1.35}



.dlb-hold{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--surface);border:1px solid #1d2440;color:var(--ink-2);font:700 11px Inter,system-ui,sans-serif}.dlb-hold input{width:52px;border:0;border-radius:999px;background:var(--hairline-2);color:var(--ink);font:700 11px Inter,system-ui,sans-serif;padding:5px 7px;text-align:center}.dlb-yesno{position:relative;display:inline-flex;border-radius:999px;background:var(--surface);border:1px solid #1d2440;padding:3px;cursor:pointer}.dlb-yesno input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;margin:0}.dlb-yesno b{padding:5px 12px;border-radius:999px;font:700 11px Inter,system-ui,sans-serif;color:var(--ink-2)}.dlb-yesno input:not(:checked)~b:first-of-type,.dlb-yesno input:checked~b:last-of-type{background:#1a3b4d;color:#fff}


.dlb-priority{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid #1d2440;color:var(--ink-2);font:700 11px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}.dlb-priority input{position:absolute;opacity:0;width:0;height:0}.dlb-switch{position:relative;width:38px;height:21px;border-radius:999px;background:var(--hairline);transition:background .15s;flex:none}.dlb-switch::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--surface);transition:transform .15s;box-shadow:0 1px 3px #0004}.dlb-priority input:checked~.dlb-switch{background:var(--ok)}.dlb-priority input:checked~.dlb-switch::after{transform:translateX(17px)}.dlb-priority input:checked~span:last-child{color:var(--ink)}.dlb-priority:hover{color:var(--ink)}.dlb-priority input:focus-visible~.dlb-switch{outline:2px solid #1a3b4d;outline-offset:2px}

.dlb-connector-overview b{font-size:12px;color:var(--ink)}

.dlb-metrics{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:4px;font-variant-numeric:tabular-nums}.dlb-metric{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap;color:var(--ink-2)}.dlb-metric i{font-style:normal;font-weight:700;color:var(--ink-3)}.dlb-metric em{font-style:normal;font-weight:700;color:var(--ok-ink);margin-right:4px}.dlb-metric+.dlb-metric::before{content:'|';color:#c9cfdb;font-weight:400;margin-right:2px}

.dlb-state{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;font:800 12px Inter,system-ui,sans-serif;letter-spacing:.2px;vertical-align:middle}.dlb-state.is-charging{background:var(--ok-tint);color:var(--ok-ink)}.dlb-state.is-done{background:var(--accent-tint);color:var(--accent-ink)}.dlb-state.is-paused{background:var(--accent-tint);color:var(--accent-ink)}.dlb-state.is-car{background:var(--hairline);color:var(--ink-2)}.dlb-state.is-preparing{background:var(--warn-tint);color:var(--warn-ink)}.dlb-state.is-fault{background:var(--bad-tint);color:var(--bad-ink)}.dlb-state.is-reserved{background:var(--hairline-2);color:var(--live-ink)}.dlb-state.is-idle{background:var(--hairline-2);color:var(--ink-3)}.dlb-connector-overview b{font-size:13px}
.dlb-live-kw{margin-left:8px;font:800 14px Inter,system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;vertical-align:middle}
.dlb-info>.dlb-why{margin-left:10px;font:800 14px Inter,system-ui,sans-serif;color:var(--accent-ink);vertical-align:middle}

.dlb-connector-overview small em{font-style:normal;font-weight:700;color:var(--ink-2)}.dlb-why{color:var(--accent-ink);font-weight:700}.dlb-err{color:var(--bad-ink);font-weight:700}

.dlb-legend-wrap{margin-top:20px;text-align:center}#dlb-legend-toggle{border:1px solid var(--hairline);border-radius:999px;background:var(--surface);color:var(--ink-2);font:700 12px Inter,system-ui,sans-serif;padding:8px 18px;cursor:pointer}#dlb-legend-toggle:hover,#dlb-legend-toggle.open{border-color:#1a3b4d;color:var(--ink)}.dlb-legend[hidden]{display:none}.dlb-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:14px;padding:18px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);text-align:left}.dlb-legend-group{display:grid;gap:7px;align-content:start}.dlb-legend-group b{font-size:12px;color:var(--ink)}.dlb-legend-group span{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--ink-2);line-height:1.4}.dlb-legend-group i{font-style:normal;font-weight:700;color:var(--ink);flex:none}.dlb-legend-group i.dlb-state{margin-left:0}.dlb-legend-note{display:block!important;color:var(--ink-3);font-style:italic;border-top:1px solid var(--hairline-2);padding-top:7px;margin-top:2px}

/* A leállítás nem üzemmód, ezért vizuálisan sem a módválasztó része: külön,
   piros keretes gomb, ami kikapcsolt állapotban egyértelműen halott. */
.dlb-stop{border:1px solid var(--bad);background:var(--surface);color:var(--bad-ink);border-radius:999px;padding:6px 13px;font:700 11.5px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.dlb-stop:hover:not(:disabled){background:var(--bad-tint)}
.dlb-stop:disabled{border-color:var(--hairline);color:#b6bdcb;background:var(--ground);cursor:not-allowed}
.dlb-stop-wide{display:block;width:100%;margin:9px 0 0;padding:10px;border-radius:9px}

/* DLB-ből kikapcsolt csatlakozók: látszanak, de vizuálisan elkülönülnek. */
.dlb-inactive{margin-top:12px;padding:11px 13px;border:1px dashed var(--hairline);border-radius:11px;background:var(--surface-2)}
.dlb-inactive>small{display:block;margin-bottom:8px;font:700 10.5px Inter,system-ui,sans-serif;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px}
.dlb-inactive-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--hairline-2)}
.dlb-inactive-row:first-of-type{border-top:0}
.dlb-inactive-row b{font-size:12.5px;color:var(--ink-2)}
.dlb-inactive-row small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
.dlb-enable{border:1px solid #0ba8a4;background:var(--surface);color:var(--live-ink);border-radius:999px;padding:5px 12px;font:700 11px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.dlb-enable:hover:not(:disabled){background:var(--live-tint)}
.dlb-enable:disabled{border-color:var(--hairline);color:#b6bdcb;cursor:not-allowed}

/* Egy telephely = egy sor. Egymás mellett a kártyák 1440px-en is csak ~540px-et
   kapnának, a csatlakozósor viszont önmagában ~1060px-t kér (üzemmódkapcsoló,
   leállítás és haladó gomb együtt ~440px) – ott tört meg az elrendezés, amint
   a második telephely felkerült. Egymás alatt minden kártya a teljes sávot kapja,
   a mérőkártyák pedig nem nyúlnak el, mert külön felső korlátjuk van. */
.dlb-overview-card{container-type:inline-size}

/* A törésponthoz a kártya saját szélessége kell, nem a képernyőé: az oldalsáv
   980px fölött visszakapja a 244px-ét, ezért 1024px-en *keskenyebb* a tartalomsáv,
   mint 900px-en. Képernyő-alapú töréspont pont ott hibázna. */
@container (max-width:760px){
  .dlb-connector-overview{grid-template-columns:10px minmax(0,1fr)}
  .dlb-mode-cell{grid-column:2;justify-content:flex-start;margin-top:9px}
}
@container (max-width:560px){
  .dlb-energy-grid{max-width:none}
  .dlb-limits{flex-wrap:wrap;gap:14px 22px}
}

/* Egy telephely egy sor: az operátor, aki tízet felügyel, ne görgessen három
   képernyőt azért, hogy a negyediket megnézze. A szalag mindig látszik és
   élő – a részletek csak lenyitva. */
.dlb-strip{display:flex;align-items:center;gap:4px;padding-right:10px}
.dlb-strip-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:18px;padding:11px 14px;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.dlb-strip-toggle:hover{background:var(--surface-2)}
.dlb-strip-toggle:focus-visible{outline:2px solid #4f61f3;outline-offset:-2px}
.is-pinned .dlb-strip-toggle{cursor:default}
.dlb-caret{flex:none;color:var(--ink-3);font-size:13px;transition:transform .15s}
.is-open .dlb-caret{transform:rotate(90deg)}
.dlb-strip-name{display:grid;gap:1px;min-width:0;flex:1 1 210px}
.dlb-strip-name b{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlb-strip-name small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlb-strip-metrics{display:flex;gap:20px;flex-wrap:wrap}
.dlb-strip-metric{display:grid;gap:1px}
.dlb-strip-metric i{font:750 10px Inter,system-ui,sans-serif;font-style:normal;color:var(--ink-3);text-transform:uppercase;letter-spacing:.35px;white-space:nowrap}
.dlb-strip-metric b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dlb-strip-metric.grid b{color:var(--live-ink)}
.dlb-strip-metric.pv b{color:var(--warn-ink)}
.dlb-strip-metric b.is-stale{color:var(--warn-ink)}
.dlb-strip-badges{display:flex;gap:6px;flex:none}
.dlb-chip{padding:4px 9px;border-radius:999px;background:var(--hairline-2);color:var(--ink-2);font:750 10.5px Inter,system-ui,sans-serif;white-space:nowrap}
.dlb-chip.is-live{background:var(--ok-tint);color:var(--ok-ink)}
.dlb-chip.is-bad{background:var(--bad-tint);color:var(--bad-ink)}

/* A rajzszeg a nyitógomb mellett áll, nem benne: gomb a gombban se
   billentyűzettel, se képernyőolvasóval nem működne. */
.dlb-pin{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:9px;background:transparent;color:#b3bbc9;cursor:pointer}
.dlb-pin svg{width:16px;height:16px;fill:currentColor;transition:transform .15s}
.dlb-pin:hover{background:var(--surface-3);color:var(--ink-2)}
.dlb-pin[aria-pressed="true"]{color:var(--accent-ink)}
.dlb-pin[aria-pressed="true"] svg{transform:rotate(-20deg)}
.dlb-overview-card.is-pinned{border-color:var(--hairline);box-shadow:0 8px 22px #4f61f31f}

.dlb-site-body{display:grid;gap:16px;padding:4px 21px 21px;border-top:1px solid var(--hairline-2)}
.dlb-site-body[hidden]{display:none}

/* Szűk kártyán a szalag nem tördel több sorba – akkor nem lenne vékony, és pont
   a lényegét veszítené el. Helyette kevesebb adatot mutat: a két élő mérés marad
   leghosszabb ideig, mert az operátor abból látja, melyik telephellyel van dolga.
   A kieső számok nem vesznek el, egy kattintásra ott vannak a törzsben. */
@container (max-width:900px){
  .dlb-strip-toggle{gap:13px;padding:10px 12px}
  .dlb-strip-name{flex:1 1 150px}
  .dlb-strip-metrics{gap:15px}
  .dlb-strip-metric:nth-of-type(n+4){display:none}
}
@container (max-width:660px){
  .dlb-strip-metric:nth-of-type(n+3){display:none}
  .dlb-chip:nth-of-type(n+3){display:none}
}
@container (max-width:470px){
  /* Telefonon a két élő mérés a fontosabb, mint a hosszú telephelynév: a név
     rövidül (…), de a grid és a PV a becsukott soron is látszik, egy sorban. */
  .dlb-strip-toggle{gap:10px;padding:9px 10px}
  .dlb-strip-name{flex:1 1 100px}
  .dlb-strip-name small{display:none}
  .dlb-strip-metrics{gap:12px}
  .dlb-strip-badges{display:none}
  .dlb-site-body{padding:4px 13px 15px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A vezérlési séma a szalagon: az operátor és az ügyfél első kérdése, hogy mi
   történik, ha megszakad az internet. A válasz legyen olvasható, ne rejtett. */
.dlb-chip.is-topology{background:var(--accent-tint);color:var(--accent-ink);cursor:help}
.dlb-topology-field select{width:100%}
/* A limit-racs FELUL igazit, nem kozepre.

   A mezok magassaga elter (a magyarazo sorok hossza mas es mas), tehat kozepre
   igazitva minden sor mashol kezdodik - ettol nezett ki ugy a lap, mintha szet
   esett volna. Felulre igazitva a cimkek egy vonalban allnak, a magyarazat meg
   lelog, amennyire kell. */
.dlb-limit-grid{align-items:start}

/* Igen/Nem kapcsolo. Eddig NEM VOLT hozza egyetlen szabaly sem: a bongeszo egy
   csupasz jelolonegyzetet es ket felkover szot rakott ki, ami a szomszedos
   mezok mellett ertelmezhetetlen folt volt. A jelolonegyzet elrejtve marad
   (a korulolelo `label` kapcsolja), a ket allapot pedig latszik. */
.dlb-yesno{display:inline-flex;align-items:center;gap:2px;margin-top:6px;padding:3px;
  width:max-content;border:1px solid var(--hairline);border-radius:999px;background:var(--surface)}
.dlb-yesno input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dlb-yesno b{padding:5px 13px;border-radius:999px;font:700 11.5px Inter,system-ui,sans-serif;
  color:var(--ink-3);transition:background .15s,color .15s}
.dlb-yesno input:not(:checked)+b{background:var(--surface-3);color:var(--ink)}
.dlb-yesno input:checked+b+b{background:var(--accent);color:var(--accent-contrast)}
.dlb-limit-error{margin:0 0 10px}
.dlb-limit-grid label small{display:block;margin-top:4px;font-weight:400;color:var(--ink-3);font-size:10.5px;line-height:1.4}

/* A limit-sor kétféle üzenetet hordoz: hibát és figyelmeztetést.

   Egy sikeres mentés után is állhat ott mondanivaló - például hogy a beépített
   töltőteljesítmény meghaladja a telephelyi keretet. Az nem hiba, tehát ne is
   piros legyen; de ha nincs betápmérés, akkor semmi nem fogja vissza a
   töltőket, és az már figyelmeztetés. */
.dlb-limit-error.is-info { color: var(--ink-2); }
.dlb-limit-error.is-warning { color: #b45309; }