.dlb-overview-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.dlb-overview-card{display:block;padding:0;border:1px solid #e1e5f3;border-radius:16px;background:#fff;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:#718096;font-size:13px}.dlb-overview-badge{padding:6px 9px;border-radius:999px;background:#e9ebff;color:#4f61f3;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 #e1e5f0;border-radius:12px;background:#fbfbff}.dlb-meter.grid{border-left:3px solid #0ca7a2}.dlb-meter.pv{border-left:3px solid #f0bb20}.dlb-meter b{font-size:13px;color:#263955}.dlb-meter strong{font-size:22px;color:#14243e;font-variant-numeric:tabular-nums}.dlb-meter small{color:#748097;font-size:11px}.dlb-meter .live{color:#0b9663;font-weight:700}.dlb-meter .offline{color:#a06a1a;font-weight:700}.dlb-limits{display:flex;gap:20px;padding:11px 0;border-top:1px solid #ebedf5;border-bottom:1px solid #ebedf5}.dlb-limits div{display:grid;gap:3px}.dlb-limits small{color:#7a8498}.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 #eef0f6}.dlb-connector-overview b{font-size:12px}.dlb-connector-overview small{display:block;margin-top:2px;color:#758096;font-size:11px}.dlb-dot.online{color:#0ba56b}.dlb-dot.problem{color:#e46372}.dlb-dot.muted{color:#99a3b6}.dlb-mode-pill{padding:5px 8px;border-radius:999px;background:#eef0fb;color:#59677e;font-size:11px;font-weight:750;white-space:nowrap}.dlb-mode-pill.pure_pv{background:#e3f8e9;color:#1b854b}.dlb-mode-pill.hybrid{background:#e5f7f6;color:#087c78}.dlb-mode-pill.fast{background:#fff1e1;color:#b96410}.dlb-alert{padding:9px 11px;border-radius:9px;background:#fff5f3;color:#a5483f;font-size:12px}.dlb-actions{display:flex;gap:8px;flex-wrap:wrap}.dlb-actions button{font-size:12px}.dlb-empty{color:#758096;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 #e6e9f4;border-radius:11px;padding:10px 12px;background:#fbfbff}.dlb-limit-edit summary{cursor:pointer;font-size:12px;font-weight:700;color:#4f61f3}.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:#4a5a72}.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:#fff;border:1px solid #1d2440;gap:2px}.dlb-mode-switch button{border:0;border-radius:999px;background:transparent;color:#48546e;font:700 11px Inter,system-ui,sans-serif;padding:6px 11px;cursor:pointer;white-space:nowrap}.dlb-mode-switch button:hover{color:#1a3b4d}.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:#c0603a;font-size:11px;line-height:1.35}



.dlb-hold{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid #1d2440;color:#48546e;font:700 11px Inter,system-ui,sans-serif}.dlb-hold input{width:52px;border:0;border-radius:999px;background:#eef1f6;color:#1d2440;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:#fff;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:#48546e}.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:#fff;border:1px solid #1d2440;color:#48546e;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:#c3c9d6;transition:background .15s;flex:none}.dlb-switch::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px #0004}.dlb-priority input:checked~.dlb-switch{background:#3f9c35}.dlb-priority input:checked~.dlb-switch::after{transform:translateX(17px)}.dlb-priority input:checked~span:last-child{color:#1a3b4d}.dlb-priority:hover{color:#1a3b4d}.dlb-priority input:focus-visible~.dlb-switch{outline:2px solid #1a3b4d;outline-offset:2px}

.dlb-connector-overview b{font-size:12px;color:#14243e}

.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:#5a6478}.dlb-metric i{font-style:normal;font-weight:700;color:#8a93a6}.dlb-metric em{font-style:normal;font-weight:700;color:#0b9663;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:#e3f7ea;color:#137a3d}.dlb-state.is-done{background:#e6effc;color:#1f5aa8}.dlb-state.is-paused{background:#f0eafc;color:#6b3fb5}.dlb-state.is-car{background:#e7ecf3;color:#46596f}.dlb-state.is-preparing{background:#fdf1df;color:#9a5b12}.dlb-state.is-fault{background:#fdeaea;color:#b3282d}.dlb-state.is-reserved{background:#e8f4f7;color:#1c6a7d}.dlb-state.is-idle{background:#eef0f5;color:#67718a}.dlb-connector-overview b{font-size:13px}
.dlb-live-kw{margin-left:8px;font:800 14px Inter,system-ui,sans-serif;color:#14243e;font-variant-numeric:tabular-nums;vertical-align:middle}
.dlb-info>.dlb-why{margin-left:10px;font:800 14px Inter,system-ui,sans-serif;color:#4f61f3;vertical-align:middle}

.dlb-connector-overview small em{font-style:normal;font-weight:700;color:#3a4560}.dlb-why{color:#4f61f3;font-weight:700}.dlb-err{color:#b3282d;font-weight:700}

.dlb-legend-wrap{margin-top:20px;text-align:center}#dlb-legend-toggle{border:1px solid #d7ddee;border-radius:999px;background:#fff;color:#5a6478;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:#1a3b4d}.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 #e6e9f4;border-radius:12px;background:#fff;text-align:left}.dlb-legend-group{display:grid;gap:7px;align-content:start}.dlb-legend-group b{font-size:12px;color:#1d2440}.dlb-legend-group span{display:flex;gap:8px;align-items:baseline;font-size:12px;color:#5a6478;line-height:1.4}.dlb-legend-group i{font-style:normal;font-weight:700;color:#1d2440;flex:none}.dlb-legend-group i.dlb-state{margin-left:0}.dlb-legend-note{display:block!important;color:#748097;font-style:italic;border-top:1px solid #eef0f6;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 #f0c9c9;background:#fff;color:#b3282d;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:#fdeaea}
.dlb-stop:disabled{border-color:#e6e9f4;color:#b6bdcb;background:#f7f8fc;cursor:not-allowed}
.dlb-stop-wide{display:block;width:100%;margin:9px 0 0;padding:10px;border-radius:9px}

/* DLB-ből kikapcsolt pisztolyok: látszanak, de vizuálisan elkülönülnek. */
.dlb-inactive{margin-top:12px;padding:11px 13px;border:1px dashed #d7ddee;border-radius:11px;background:#fbfcfe}
.dlb-inactive>small{display:block;margin-bottom:8px;font:700 10.5px Inter,system-ui,sans-serif;color:#8a93a6;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 #f0f2f8}
.dlb-inactive-row:first-of-type{border-top:0}
.dlb-inactive-row b{font-size:12.5px;color:#5a6478}
.dlb-inactive-row small{display:block;margin-top:2px;font-size:11px;color:#8a93a6}
.dlb-enable{border:1px solid #0ba8a4;background:#fff;color:#0b7c78;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:#e7f8f6}
.dlb-enable:disabled{border-color:#e6e9f4;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 pisztolysor 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:#fafbff}
.dlb-strip-toggle:focus-visible{outline:2px solid #4f61f3;outline-offset:-2px}
.is-pinned .dlb-strip-toggle{cursor:default}
.dlb-caret{flex:none;color:#98a1b4;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:#14243e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlb-strip-name small{font-size:11.5px;color:#748097;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:#8a93a6;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap}
.dlb-strip-metric b{font-size:14px;color:#14243e;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlb-strip-metric.grid b{color:#0b7c78}
.dlb-strip-metric.pv b{color:#a2760a}
.dlb-strip-metric b.is-stale{color:#a06a1a}
.dlb-strip-badges{display:flex;gap:6px;flex:none}
.dlb-chip{padding:4px 9px;border-radius:999px;background:#eef0fb;color:#59677e;font:750 10.5px Inter,system-ui,sans-serif;white-space:nowrap}
.dlb-chip.is-live{background:#e3f7ea;color:#137a3d}
.dlb-chip.is-bad{background:#fdeaea;color:#b3282d}

/* 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:#f2f4fa;color:#5a6478}
.dlb-pin[aria-pressed="true"]{color:#4f61f3}
.dlb-pin[aria-pressed="true"] svg{transform:rotate(-20deg)}
.dlb-overview-card.is-pinned{border-color:#c6ccfb;box-shadow:0 8px 22px #4f61f31f}

.dlb-site-body{display:grid;gap:16px;padding:4px 21px 21px;border-top:1px solid #f0f2f8}
.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:#e7f1fb;color:#1f5aa8;cursor:help}
.dlb-topology-field select{width:100%}
.dlb-limit-grid label small{display:block;margin-top:4px;font-weight:400;color:#8a93a6;font-size:10.5px;line-height:1.4}