.config-table{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow:auto}.config-table table{width:100%;border-collapse:collapse;min-width:820px}.config-table th{background:var(--hairline-2);text-align:left;font-size:12px;font-weight:700;color:var(--ink-2)}.config-table th,.config-table td{padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle}.config-table tr:last-child td{border-bottom:0}.config-table input{min-width:260px;width:100%;border:1px solid var(--hairline);border-radius:6px;padding:9px}.config-table .readonly{color:var(--ink-3);font-size:12px}.config-table .save-config{padding:8px 12px;border:0;border-radius:6px;background:#0ba8a4;color:#fff;font-weight:700;cursor:pointer}.config-table .config-error{color:var(--bad-ink);font-size:12px}.section-title{font-size:20px;margin:28px 0 5px}.section-help{color:var(--ink-3);margin:0 0 12px;font-size:13px}.connector-edit{min-width:90px!important;width:120px!important}.connector-type{min-width:120px!important;width:130px!important}.connector-dlb{width:auto!important;min-width:0!important} /* --- A Toltoberendezesek lap also fele -------------------------------------- A csatlakozó- es konfiguracios tablazat a bongeszo alapertelmezett urlapelemeit hasznalta: eltero magassagu legordulok es beviteli mezok, egymas ala tordelt apro gombok, kozottuk egy nagy szaggatott doboz. Nem attol esett szet, hogy sok adat van benne, hanem attol, hogy soronkent mas magassagu elemek alltak egymas mellett - a szem nem talalt kozos alapvonalat. Ez a blokk csak ezt a lapot erinti: azonos magassagu vezerlok, kozos alapvonal, es a lap tobbi reszevel egyezo keret, betuk es szinek. */ #chargers-page .section-title{margin:30px 0 4px;font-family:Inter,system-ui,sans-serif; font-weight:650;letter-spacing:-.025em;font-size:19px;color:var(--ink)} #chargers-page .section-help{margin:0 0 14px;color:var(--ink-3);font-size:12.5px;line-height:1.55} #chargers-page .config-table{border:1px solid var(--hairline);border-radius:15px; box-shadow:0 8px 22px #303d7a0a;background:var(--surface)} /* Ne legyen vizszintes gorgetes, ha elfer. A tablazat egy `min-width`-et kapott, ami a sidebar es a lap margoi utan maradt helynel szelesebb volt - igy a gorgetosav akkor is megjelent, amikor a tartalom amugy elfert volna. A mezok mostantol egyutt szukulnek a lappal, es csak akkor kapcsol at gorgetesre, amikor tenyleg nincs eleg hely. */ #chargers-page .config-table table{min-width:0;table-layout:auto} #chargers-page .config-table{overflow-x:auto} #chargers-page .config-table th{background:var(--surface-3);color:var(--ink-2);font-size:11px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--hairline); white-space:nowrap} #chargers-page .config-table td{padding:14px;border-bottom:1px solid var(--hairline-2);vertical-align:middle; font-size:13px;color:var(--ink)} #chargers-page .config-table tbody tr:hover td{background:var(--surface-2)} /* Minden vezerlo ugyanolyan magas es ugyanugy keretezett. Ez adja a kozos alapvonalat, ami eddig hianyzott. */ #chargers-page .config-table select, #chargers-page .config-table input[type="text"], #chargers-page .config-table input[type="number"], #chargers-page .config-table input:not([type]){height:36px;padding:0 10px;min-width:0;width:100%; max-width:100%;box-sizing:border-box; border:1px solid var(--hairline);border-radius:8px;background:var(--surface-2);color:var(--ink); font:13px Inter,system-ui,sans-serif} #chargers-page .config-table select:focus, #chargers-page .config-table input:focus{outline:2px solid #cbd1ff;border-color:var(--accent)} /* A DLB-kapcsolo csuszka, mint a Riasztasok lapon (`.alert-toggle`). Ugyanaz a meret es ugyanaz a bekapcsolt szin, hogy ket kulonbozo lapon ne ket kulonbozo dolognak latszon ugyanaz a dontes. Itt viszont nincs kore burkolo elem - a tablazatot az app.js rajzolja, csupasz `input`-tal -, ezert maga a jelolonegyzet valik csuszkava az `appearance:none`-nal. Igy a markup nem valtozik, es a `checked` allapotot tovabbra is a bongeszo kezeli. */ #chargers-page .config-table input[type="checkbox"]{appearance:none;-webkit-appearance:none; position:relative;width:34px;height:19px;margin:0;padding:0;border:0;border-radius:999px; background:var(--accent-tint);cursor:pointer;vertical-align:middle;transition:background .15s} #chargers-page .config-table input[type="checkbox"]::after{content:'';position:absolute;top:2px; left:2px;width:15px;height:15px;border-radius:50%;background:var(--surface); box-shadow:0 1px 3px #10253338;transition:transform .15s} #chargers-page .config-table input[type="checkbox"]:checked{background:#1a3b4d} #chargers-page .config-table input[type="checkbox"]:checked::after{transform:translateX(15px)} #chargers-page .config-table input[type="checkbox"]:focus-visible{outline:2px solid #cbd1ff; outline-offset:2px} #chargers-page .config-table input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed} /* A soronkenti gombok egymas mellett, a lap sajat gombnyelven - nem ket apro, egymas ala tordelt natív gomb. */ #chargers-page .config-table td:last-child{white-space:nowrap} #chargers-page .config-table td button{height:32px;padding:0 13px;margin:0 6px 0 0;border-radius:8px; border:1px solid var(--hairline);background:var(--surface);color:var(--ink-2);cursor:pointer; font:600 12px Inter,system-ui,sans-serif} #chargers-page .config-table td button:hover{background:var(--surface-3)} #chargers-page .config-table td button.save-config, #chargers-page .config-table td button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast); box-shadow:0 4px 11px #4f61f333} #chargers-page .config-table td button.save-config:hover, #chargers-page .config-table td button.primary:hover{background:var(--accent)} /* A "meres: meg nincs" doboz egy sornyi jelzes, nem egy fel cellat kitolto szaggatott teglalap - a magassaga eddig az egesz sort megnyujtotta. */ #chargers-page .phase-measured.empty{display:inline-block;min-height:0;height:auto;width:auto; padding:3px 9px;border:0;border-radius:999px;background:var(--surface-3);color:var(--ink-3); font-size:10.5px;font-weight:600;line-height:1.5;text-align:left} /* A rogzitett szelessegek helyett aranyok: a szamoszlopok keskenyek maradnak, de nem tartjak szet a tablat egy szuk ablakban sem. */ #chargers-page .config-table .connector-edit{width:100%!important;min-width:64px!important} #chargers-page .config-table .connector-type{width:100%!important;min-width:96px!important} #chargers-page .config-table .connector-dlb{width:34px!important;min-width:34px!important} #chargers-page .config-table td,#chargers-page .config-table th{padding:12px 10px} /* Az OCPP-konfiguracios tabla ertekmezoje 260 pixelt kovetelt maganak, ami a tobbi oszloppal egyutt tulnyulet a lapon. Most a cellaval egyutt szukul. */ #chargers-page .config-table input.config-value, #chargers-page .config-table td input{min-width:0;width:100%} /* --- A toltovalaszto a lap tetejen ------------------------------------------- A legordulo a leghosszabb tetel szerint kapott szelesseget, ami ma egy rovid azonosito - de a sorba tobb is kerulhet (hosszabb szamsor, nev, allapot), es akkor a szoveg levagodna. Fix also hatar helyett kap egy tag alapot, es nott a lap szelesseget kovetve. */ #chargers-page .toolbar label{display:flex;align-items:center;gap:10px; font:600 12.5px Inter,system-ui,sans-serif;color:var(--ink-2);flex:1 1 380px;min-width:0} #config-charger{flex:1 1 auto;min-width:300px;max-width:100%;height:38px;padding:0 12px; border:1px solid var(--hairline);border-radius:9px;background:var(--surface-2);color:var(--ink); font:13px Inter,system-ui,sans-serif;text-overflow:ellipsis} #config-charger:focus{outline:2px solid #cbd1ff;border-color:var(--accent)} /* --- "Melyik vonal": a valaszto es a mert ertek egymas mellett --------------- A mert ertek eddig a legordulo ALA kerult, es soronkent mas magas volt: ahol nincs meres, egy soros; ahol van, harom soros. Ettol minden sor mas magassagu lett, es a tobbi oszlop tartalma elcsuszott egymashoz kepest - a tablazat ugyanattol esett szet, amitol egy szedes: nem volt kozos alapvonal. Egy sorban, kozos fuggoleges kozeppel a sormagassag allando marad, a mert ertek pedig ott all, amire vonatkozik. */ #chargers-page .config-table td.phase-cell, #chargers-page .config-table td:has(select[data-field="phase_rotation"]){display:flex; align-items:center;gap:10px;flex-wrap:nowrap} #chargers-page .config-table td.phase-cell select, #chargers-page .config-table td:has(select[data-field="phase_rotation"]) select{flex:0 1 118px; min-width:84px} #chargers-page .phase-measured-wrap{margin-top:0;flex:0 0 auto;display:flex;align-items:center} #chargers-page .phase-measured{font-size:10px;line-height:1.45;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* --- A mert bekotes itelete -------------------------------------------------- Egy soros allapotjelzes a harom soros nyers mereslista helyett, a lap tobbi jelolesenek nyelven (zold = rendben, piros = teendo, szurke = nincs adat). */ /* Ket sorban is torhet: igy a jelzes keskenyebb, es az oszlop is - egy soros kenyszerrel a leghosszabb szoveg szabta meg a "Melyik vonal" szelesseget. A lekerekites ezert kisebb: egy tobbsoros szoveg korul a teljesen kerek pirula szetesik. */ /* Mind a harom allapot ugyanakkora dobozban all - nem a szoveg hossza szabja meg a meretet. Kulonben soronkent mas szeles es mas magas jelzes all egymas alatt, es a tablazat ugyanattol csuszik szet, amitol korabban. A magassag a mellette allo legordulove, hogy a ketto egy vonalban legyen. */ #chargers-page .phase-verdict{display:inline-flex;align-items:center;justify-content:center; box-sizing:border-box;width:122px;height:36px;padding:3px 8px;border-radius:8px; font-size:10.5px;font-weight:700;line-height:1.3;text-align:center;white-space:normal; cursor:help} #chargers-page .phase-verdict.ok{background:var(--ok-tint);color:var(--ok-ink)} #chargers-page .phase-verdict.bad{background:var(--bad-tint);color:var(--bad-ink)} #chargers-page .phase-verdict.none{background:var(--surface-3);color:var(--ink-3)}