/* Platform beállítások: cégadatok és kimenő levelezés.
Két kártya egymás mellett, mert egy dolgot mondanak ki együtt: milyen néven és
milyen fiókból beszél a platform kifelé. A levél aláírása és a majdani
számlafej ugyanabból az adatból jön. */
/* A ket kartya egy magassagu: az `align-items:start` mindegyiket a sajat
tartalmara zsugoritotta, es a Cegadatok mellett a Kimeno levelezes
fele olyan magas volt - a sor ugy nezett ki, mintha valami hianyozna.
`stretch` mellett a racs kitolti a sort. */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:stretch;max-width:1080px}
.settings-grid>.settings-card{display:flex;flex-direction:column}
/* Ha a kartya alja gombsor, az a kartya aljara kerul, nem a szoveg ala. */
.settings-grid>.settings-card>.settings-actions{margin-top:auto}
.settings-card{background:var(--surface);border:1px solid var(--hairline);border-radius:13px;padding:20px 22px 22px}
.settings-card>header{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--hairline-2)}
.settings-card h2{margin:0 0 4px;font-size:16px;color:var(--ink)}
.settings-card>header p{margin:0;font-size:12px;color:var(--ink-3)}
.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}
/* `align-content:start` nélkül a mezők egymáshoz igazodnak sormagasságban: a
jelszó alatti magyarázó szöveg megnyújtja a sort, és a mellette álló beviteli
mező vele együtt nyúlik meg. A rács így csak annyi helyet ad a mezőnek,
amennyit a tartalma kér. */
.settings-field{display:grid;gap:5px;min-width:0;align-content:start}
.settings-field.wide,.settings-check.wide,.settings-actions{grid-column:1/-1}
.settings-field span{font-size:11.5px;font-weight:600;color:var(--ink-2)}
/* Kozos, explicit magassag: a `select` sajat belso metrikaja miatt ugyanakkora
paddinggel is ket pixellel magasabb lenne, mint egy `input`, es a ket oszlop
soronkent elcsuszna egymastol. */
.settings-field input,.settings-field select{height:38px;padding:0 11px;border:1px solid var(--hairline);
border-radius:8px;font:13px Inter,system-ui,sans-serif;background:var(--surface-2);color:var(--ink);min-width:0}
.settings-field input:focus,.settings-field select:focus{outline:0;border-color:#0ba8a4;background:var(--surface);
box-shadow:0 0 0 3px #0ba8a433}
.settings-field small{color:var(--ink-3);font-size:11px;line-height:1.4}
/* Kapcsoló, nem pipa. Az alap `` marad a jelölés alatt -
ő viszi a nevet, az értéket és a billentyűzet-kezelést -, csak a megjelenését
vesszük át. Egy saját `
`-ből épített kapcsoló szebb lehetne, de kiesne a
form adatai közül, és a Tab sem találná meg. */
.settings-check{display:flex;align-items:center;gap:12px;padding:12px 14px;
border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);
font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.settings-check:hover{border-color:var(--hairline)}
.settings-check input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:none;margin:0;
position:relative;width:42px;height:24px;border:0;border-radius:999px;background:var(--hairline);
cursor:pointer;transition:background .18s ease}
.settings-check input[type="checkbox"]::after{content:'';position:absolute;top:3px;left:3px;
width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #00000033;
transition:transform .18s ease}
.settings-check input[type="checkbox"]:checked{background:#0ba8a4}
.settings-check input[type="checkbox"]:checked::after{transform:translateX(18px)}
.settings-check input[type="checkbox"]:focus-visible{outline:2px solid #0ba8a4;outline-offset:3px}
.settings-actions{display:flex;align-items:center;gap:14px;margin-top:4px}
.settings-actions button{padding:10px 18px;border:0;border-radius:9px;background:#0ba8a4;color:#fff;
font:600 13px Inter,system-ui,sans-serif;cursor:pointer}
.settings-actions button:hover{background:var(--live)}
/* A visszajelzés a gomb mellett marad, nem ugrik fel párbeszédablakban: egy
beállítás-oldalon a mentés a leggyakoribb művelet, és nem érdemel megszakítást. */
.settings-note{margin:0;font-size:12px;min-height:16px}
.settings-note.ok{color:var(--ok-ink)}
.settings-note.error{color:var(--bad-ink)}
.settings-note.info{color:var(--ink-3)}
.settings-muted{margin:6px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.settings-status{margin:0;font-size:12px;font-weight:600;color:var(--ink-3)}
.settings-status.ok{color:var(--ok-ink)}
.settings-status.warn{color:var(--warn-ink)}
.settings-test{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline-2)}
.settings-test h3{margin:0 0 5px;font-size:13.5px;color:var(--ink)}
.settings-test>p{margin:0 0 11px;font-size:12px;color:var(--ink-3);line-height:1.55}
.settings-test-row{display:flex;gap:9px;margin-bottom:8px}
.settings-test-row input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--hairline);border-radius:8px;
font:13px Inter,system-ui,sans-serif;background:var(--surface-2)}
.settings-test-row button{padding:9px 15px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface);
color:var(--ink-2);font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.settings-test-row button:hover:not(:disabled){background:var(--surface-3)}
.settings-test-row button:disabled{opacity:.55;cursor:progress}
@media(max-width:620px){.settings-form{grid-template-columns:1fr}}
/* --- Modulok lap: elofizetes es kiepitettseg ------------------------------ */
/* Ket doboz, mert a platform is ket kulon kapun engedi at a modult. Egy kozos
"bekapcsolva" pipa elmosna a kulonbseget, amibol az ugyfelszolgalat dolgozik. */
.module-grid{grid-template-columns:repeat(auto-fit,minmax(430px,1fr));max-width:1180px}
.module-list{display:grid;gap:10px;margin-top:14px}
.module-row{display:grid;grid-template-columns:1fr 150px 150px auto auto;gap:11px;align-items:end;
padding:13px 14px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface-2)}
.module-name{min-width:0}
.module-name b{display:block;font-size:13.5px;color:var(--ink)}
.module-name small{display:block;margin-top:2px;color:var(--ink-3);font-size:11.5px;line-height:1.45}
.module-field{display:grid;gap:4px;min-width:0}
.module-field span{font-size:11px;font-weight:600;color:var(--ink-2)}
.module-field select,.module-field input{height:34px;padding:0 9px;border:1px solid var(--hairline);border-radius:8px;
font:12.5px Inter,system-ui,sans-serif;background:var(--surface);color:var(--ink);min-width:0}
.module-field select:focus,.module-field input:focus{outline:0;border-color:#0ba8a4;box-shadow:0 0 0 3px #0ba8a433}
.module-state{padding-bottom:8px;white-space:nowrap}
.module-badge{font-size:11.5px;font-weight:700}
.module-badge.ok{color:var(--ok-ink)}
.module-badge.closed{color:var(--warn-ink)}
.module-role{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px}
.module-row button{align-self:end;margin-bottom:1px;padding:8px 14px;border:1px solid var(--hairline);border-radius:8px;
background:var(--surface);color:var(--ink-2);font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
.module-row button:hover{background:var(--surface-3)}
/* Az akadalyok mindig latszanak, nem csak az, hogy "nem elerheto": a `gate`
mondja meg, hogy ertekesitesi vagy szerelo-kerdesrol van-e szo. */
.module-blockers{grid-column:1/-1;margin:4px 0 0;padding:9px 12px;list-style:none;
border-radius:8px;background:var(--warn-tint);color:var(--warn-ink);font-size:11.5px;line-height:1.6}
.module-blockers li+li{margin-top:4px}
.module-blockers i{color:var(--warn-ink);font-style:normal}
.notice.warn{background:var(--warn-tint);border-color:var(--warn);color:var(--warn-ink)}
@media(max-width:900px){.module-row{grid-template-columns:1fr 1fr;gap:9px}.module-name,.module-blockers{grid-column:1/-1}}
/* --- Modul-matrix: sorok az ugyfelek, oszlopok a modulok ------------------- */
/* A tablazat vizszintesen gorgethető, de a bal szelso oszlop marad: harom-negy
modul utan a nev nelkuli sorban mar nem lehet tudni, kirol van szo. */
.matrix-wrap{max-width:1180px;overflow-x:auto;border:1px solid var(--hairline);border-radius:13px;background:var(--surface)}
.module-matrix{border-collapse:separate;border-spacing:0;width:100%;font:13px Inter,system-ui,sans-serif}
.module-matrix th,.module-matrix td{padding:10px 12px;border-bottom:1px solid var(--hairline-2);text-align:center}
.module-matrix thead th{background:var(--ground);color:var(--ink-2);font-weight:600;font-size:11.5px;
text-transform:uppercase;letter-spacing:.35px;border-bottom:1px solid var(--hairline)}
.module-matrix .group-row th{background:var(--hairline-2);color:var(--ink);font-size:12px;letter-spacing:.3px;
border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.module-matrix .group-row th.corner{background:var(--ground);border-left:0}
.module-matrix thead tr:last-child th{font-weight:600;color:var(--ink-2)}
.module-matrix th.corner,.module-matrix th.tenant{position:sticky;left:0;z-index:1;text-align:left;
background:var(--surface);min-width:190px;box-shadow:1px 0 0 #eef2f5}
.module-matrix th.corner{background:var(--ground)}
.module-matrix th.tenant{font-weight:600;color:var(--ink)}
.module-matrix tbody tr:hover td{background:var(--surface-2)}
.module-matrix td.on{background:var(--surface-3)}
.module-matrix tbody tr:hover td.on{background:var(--live-tint)}
.cell-toggle{display:inline-flex}
/* Ugyanaz a kapcsolo, mint a levelezes-lapon: az `` marad a jeloles alatt,
csak a megjelenest vesszuk at. */
.cell-toggle input[type="checkbox"]{appearance:none;-webkit-appearance:none;margin:0;position:relative;
width:38px;height:22px;border:0;border-radius:999px;background:var(--hairline);cursor:pointer;
transition:background .18s ease}
.cell-toggle input[type="checkbox"]::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;
border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #00000033;transition:transform .18s ease}
.cell-toggle input[type="checkbox"]:checked{background:#0ba8a4}
.cell-toggle input[type="checkbox"]:checked::after{transform:translateX(16px)}
.cell-toggle input[type="checkbox"]:disabled{opacity:.5;cursor:progress}
.cell-toggle input[type="checkbox"]:focus-visible{outline:2px solid #0ba8a4;outline-offset:3px}
/* A hianyzo kiepites nem tiltja a kapcsolot - eladni azelott is lehet, hogy a
szerelo kiment volna -, de ki kell irni, kulonben az ugyfel bekapcsolva latna
azt, ami nala ugysem mukodik. */
.cell-hint{display:block;margin-top:4px;font-style:normal;font-size:10.5px;color:var(--warn-ink);white-space:nowrap;cursor:help}
.cell-hint.fault{color:var(--bad-ink)}
.capability-card{max-width:1180px;margin-top:16px}
/* Elofizette, de meg nincs honnan adat jonnie. A menupont latszik - halvanyan -,
mert elrejtve az ugyfel azt hinne, hogy nem kapta meg, amit megvett.
A halvanyitas mellett allt egy "nincs adat" felirat is. Az sav szeles menuben
nem fert el: a menupont legkisebb szelesseget a felirat tolta a savon tuli
merethez, es mivel a `nav` fuggolegesen gorgetheto, a vizszintes tengely is
`auto`-ra valt - vagyis a menu oldalra gorgethetove valt. Egy felirat, ami
ezt okozza, tobbet ront, mint amennyit magyaraz: a szoveg atkerult a menupont
`title`-jebe (`modules.js`), es ott azt is kimondja, MELYIK berendezes
hianyzik - a savban ennyi ugysem fert volna el. */
.nav-item.no-data{opacity:.55}
/* A kereso a tablazat folott. Legordulovel is valaszthato (datalist), mert nem
biztos, hogy a felhasznalo fejbol tudja a ceg pontos nevet. */
.matrix-toolbar{display:flex;align-items:center;gap:14px;max-width:1180px;margin-bottom:12px}
.tenant-picker{position:relative;flex:0 1 340px}
.tenant-picker input{width:100%;height:38px;padding:0 34px 0 12px;border:1px solid var(--hairline);border-radius:9px;
font:13px Inter,system-ui,sans-serif;background:var(--surface);color:var(--ink)}
.tenant-picker input:focus{outline:0;border-color:#0ba8a4;box-shadow:0 0 0 3px #0ba8a433}
.tenant-picker button{position:absolute;top:1px;right:1px;width:32px;height:36px;border:0;border-radius:0 8px 8px 0;
background:transparent;color:var(--ink-3);font-size:13px;cursor:pointer}
.tenant-picker button:hover{background:var(--surface-3);color:var(--ink)}
.tenant-picker ul{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;
margin:0;padding:5px;list-style:none;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
box-shadow:0 14px 34px #10253320}
.tenant-picker ul[hidden]{display:none}
.tenant-picker li{padding:8px 10px;border-radius:7px;font-size:13px;color:var(--ink);cursor:pointer}
.tenant-picker li:hover,.tenant-picker li.active{background:var(--hairline-2);color:var(--live-ink)}
.tenant-picker li.muted{color:var(--ink-3);cursor:default}
.tenant-picker li.muted:hover{background:transparent;color:var(--ink-3)}
.matrix-toolbar #tenant-count{color:var(--ink-3);font-size:12px}
/* --- Jelentkezesek --------------------------------------------------------- */
.request-list{display:grid;gap:12px;max-width:1180px}
.request-card{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:16px 18px}
.request-card.approved,.request-card.rejected{opacity:.72}
.request-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--hairline-2)}
.request-card>header b{display:block;font-size:15px;color:var(--ink)}
.request-card>header small{display:block;margin-top:3px;font-size:12px;color:var(--ink-3)}
.request-status{flex:none;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.3px}
.request-status.new{background:var(--warn-tint);color:var(--warn-ink)}
.request-status.approved{background:var(--ok-tint);color:var(--ok-ink)}
.request-status.rejected{background:var(--hairline-2);color:var(--bad-ink)}
.request-card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:12.5px}
.request-card dt{color:var(--ink-3)}
.request-card dd{margin:0;color:var(--ink)}
.request-note{margin:11px 0 0;padding:9px 12px;border-radius:8px;background:var(--ground);color:var(--ink-2);
font-size:12.5px;line-height:1.55}
.request-modules{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.request-module{padding:4px 10px;border-radius:999px;background:var(--hairline-2);color:var(--live-ink);font-size:11.5px;font-weight:600}
.request-module.muted{background:var(--hairline-2);color:var(--ink-3);font-weight:400}
.request-actions{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--hairline-2)}
.request-actions input{width:76px;height:34px;padding:0 9px;border:1px solid var(--hairline);border-radius:8px;
font:12.5px Inter,system-ui,sans-serif}
.request-actions button{padding:9px 16px;border:1px solid transparent;border-radius:8px;
font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
.request-actions .primary{background:#0ba8a4;color:#fff}
.request-actions .primary:hover{background:var(--live)}
.request-actions .ghost{background:var(--surface);border-color:var(--hairline);color:var(--ink-2)}
.request-actions .ghost:hover{background:var(--surface-3)}
.request-decision{margin-top:12px;padding-top:11px;border-top:1px solid var(--hairline-2);font-size:12.5px;color:var(--ink-2)}
.request-decision b{color:var(--ink)}
.request-decision span{margin-left:8px;color:var(--ink-3);font-size:11.5px}
.request-decision small{display:block;margin-top:4px}
.request-heading{margin:20px 0 4px;font-size:12px;font-weight:700;letter-spacing:.4px;
text-transform:uppercase;color:var(--ink-3)}
/* A kapu kapcsoloja a matrix folott. */
.policy-row{display:flex;align-items:center;gap:16px;max-width:1180px;margin-bottom:12px}
.policy-row .settings-check{flex:none}
.policy-row p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5}
/* --- Jogosultsag-matrix ----------------------------------------------------
A jog a sor, a szerep az oszlop. Forditva 17 oszlop lenne vizszintes
gorgetessel; igy kilenc oszlop elfer, es a jogok modul-besorolasa termeszetes
szakaszcimeket ad. */
.permission-matrix th.corner,.permission-matrix th.permission{min-width:240px}
.permission-matrix thead th span{display:block}
.permission-matrix thead th small{display:block;margin-top:2px;font-size:9.5px;font-weight:500;
color:var(--ink-3);text-transform:none;letter-spacing:0}
.permission-matrix th.permission{position:sticky;left:0;z-index:1;text-align:left;background:var(--surface);
box-shadow:1px 0 0 #eef2f5;padding:9px 12px}
.permission-matrix th.permission b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.permission-matrix th.permission small{display:block;margin-top:1px;font-size:10.5px;color:var(--ink-3);
font-family:ui-monospace,Consolas,monospace}
.permission-matrix .threshold{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;
background:var(--hairline-2);color:var(--ink-2);font-size:9.5px;font-style:normal;font-weight:700;
letter-spacing:.3px;text-transform:uppercase;cursor:help}
.permission-matrix tr.module-band th{position:sticky;left:0;background:var(--surface-3);color:var(--ink-2);
text-align:left;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
padding:7px 12px;border-top:1px solid var(--hairline)}
/* A vedett cella latszik, de nem kapcsolhato: enelkul ket kattintassal ki
lehetne zarni mindenkit a feluletrol. */
.permission-matrix td.locked{background:var(--ground)}
.permission-matrix td.locked .cell-toggle input{opacity:.6;cursor:not-allowed}
/* --- Becsukhato kartya -----------------------------------------------------
A matrix 18x9: hasznos, ha epp szerepkort tervezel, utban van, ha csak egy
felhasznalot keresel. Alapbol csukva, a nyitottsaga megjegyzodik. */
.settings-card.collapsible{padding:0;max-width:1180px;overflow:hidden}
.card-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:15px 18px;border:0;
background:transparent;cursor:pointer;text-align:left;font:inherit}
.card-toggle:hover{background:var(--ground)}
.card-caret{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--hairline-2);
color:var(--ink-2);font-size:14px;transition:transform .16s ease}
.collapsible.open .card-caret{transform:rotate(90deg)}
.card-toggle b{display:block;font-size:15px;color:var(--ink)}
.card-toggle small{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.card-help{margin:0;padding:0 18px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.6;
border-bottom:1px solid var(--hairline-2)}
#matrix-body .matrix-wrap{border:0;border-radius:0}
/* --- Felhasznalo-tabla: rendezheto es oszloponkent szurheto ---------------- */
.permission-users{margin-top:18px;max-width:1180px}
.permission-users .matrix-toolbar{align-items:baseline}
.permission-users .section-title{margin:0;font-size:15px;color:var(--ink)}
.link-button{border:0;background:0;padding:0;color:var(--live-ink);font:13px Inter,system-ui,sans-serif;
cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.user-table-wrap{border:1px solid var(--hairline);border-radius:13px;overflow:hidden;background:var(--surface)}
.user-table{width:100%;border-collapse:separate;border-spacing:0;font:13px Inter,system-ui,sans-serif}
.user-table thead th{padding:6px 8px 6px 12px;background:var(--ground);border-bottom:1px solid var(--hairline);
text-align:left;white-space:nowrap}
.user-table tbody td{padding:10px 12px;border-bottom:1px solid var(--hairline-2);color:var(--ink);vertical-align:middle}
.user-table tbody tr:last-child td{border-bottom:0}
.user-table tbody tr:hover td{background:var(--surface-2)}
.user-table td.right{text-align:right}
.user-table .empty-row{padding:22px;text-align:center;color:var(--ink-3)}
.user-table .sort{border:0;background:0;padding:2px 4px;font:600 11px Inter,system-ui,sans-serif;
color:var(--ink-2);text-transform:uppercase;letter-spacing:.35px;cursor:pointer}
.user-table .sort:hover,.user-table .sort.active{color:var(--ink)}
.user-table .sort i{font-style:normal;font-size:9px;color:#0ba8a4}
.user-table .filter{margin-left:2px;padding:2px 5px;border:0;border-radius:5px;background:0;
color:var(--ink-3);font-size:11px;cursor:pointer}
.user-table .filter:hover{background:var(--hairline);color:var(--ink-2)}
.user-table .filter.filtered{background:#0ba8a4;color:#fff}
/* Az allapot nem cimke, hanem gomb: innen lehet kizarni es visszaengedni. */
.user-table .user-status{padding:5px 12px;border:1px solid transparent;border-radius:999px;
font:700 11px Inter,system-ui,sans-serif;cursor:pointer;transition:filter .14s ease}
.user-table .user-status.active{background:var(--ok-tint);color:var(--ok-ink);border-color:var(--hairline)}
.user-table .user-status:not(.active){background:var(--hairline-2);color:var(--ink-3);border-color:var(--hairline)}
.user-table .user-status:hover{filter:brightness(.96)}
.user-table .user-status:disabled{opacity:.6;cursor:progress}
.user-table .secondary{padding:6px 13px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface);
color:var(--ink-2);font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.user-table .secondary:hover{background:var(--surface-3)}
/* --- Oszlopszuro (tablazatkezelo-szeru lenyilo) ---------------------------- */
.column-filter{position:absolute;z-index:40;width:236px;max-height:320px;overflow-y:auto;padding:8px;
background:var(--surface);border:1px solid var(--hairline);border-radius:10px;box-shadow:0 14px 34px #10253320}
.column-filter[hidden]{display:none}
.column-filter label{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;
font-size:12.5px;color:var(--ink);cursor:pointer}
.column-filter label:hover{background:var(--surface-3)}
.column-filter input{accent-color:#0ba8a4;width:15px;height:15px}
.column-filter .filter-all{border-bottom:1px solid var(--hairline-2);border-radius:0;margin-bottom:4px;padding-bottom:8px}
/* --- A felhasznaloi jog-parbeszed csuszkakkal ------------------------------
Ugyanaz a kapcsolo, mint a matrixban es a levelezes-lapon: a felulet ne
hasznaljon ket kulonbozo format ugyanarra a ki/be dontesre. */
#user-permission-list .feature,#permission-list .feature{display:flex;align-items:flex-start;gap:12px;
padding:10px 12px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);margin-bottom:7px}
#user-permission-list .feature:hover,#permission-list .feature:hover{border-color:var(--hairline)}
#user-permission-list .feature input[type="checkbox"],
#permission-list .feature input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:none;margin:1px 0 0;
position:relative;width:38px;height:22px;border:0;border-radius:999px;background:var(--hairline);cursor:pointer;
transition:background .18s ease}
#user-permission-list .feature input[type="checkbox"]::after,
#permission-list .feature input[type="checkbox"]::after{content:'';position:absolute;top:3px;left:3px;
width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #00000033;
transition:transform .18s ease}
#user-permission-list .feature input[type="checkbox"]:checked,
#permission-list .feature input[type="checkbox"]:checked{background:#0ba8a4}
#user-permission-list .feature input[type="checkbox"]:checked::after,
#permission-list .feature input[type="checkbox"]:checked::after{transform:translateX(16px)}
/* A szerepkorbol orokolt jog le van tiltva: latszik, hogy megvan, de nem itt
kell allitani - a szerepkor-matrixban. */
#user-permission-list .feature input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
#user-permission-list .feature b,#permission-list .feature b{display:block;font-size:12.5px;color:var(--ink)}
#user-permission-list .feature small,#permission-list .feature small{display:block;margin-top:2px;
font-size:11.5px;color:var(--ink-3);line-height:1.45}
/* A sajat sor allapota nem gomb: fel sem kinaljuk a kattintast, amit a szerver
ugyis elutasitana. */
.user-table .user-status.self{cursor:default;opacity:.75}
/* --- Jogosultsag-parbeszedek modernizalasa ---------------------------------
Ket dolog tette regiesse. Egy: a cimsor `Georgia, serif` volt, ami elutott a
felulet tobbi reszetol. Ketto: maga a `