/* ============================================================================
   SAT — felület

   A megjelenés a SysAdminTech ARCULATÁT követi: ugyanazok a színek, keretek,
   lekerekítések, árnyékok és betűk, mint a sysadmintech.eu / adminhostings.eu
   lapján (`sysadmintech_v2.css`). A vezérlősík és a honlap egy rendszer — ne
   lehessen ránézésre megmondani, melyik készült előbb.

   🔑 Az arculat legjellemzőbb eleme a „főablak": fehér lap, 2 képpontos
   sötétkék keret, 18 képpontos lekerekítés és egy nagy, lágy árnyék. A
   panelen EZT kapja minden kártya — a keret és az árnyék hordozza az
   arculatot, nem egy logó a sarokban.

   Szerep szerinti színek: a SZERKEZET sötétkék (keret, oldalsáv, címsor, a
   kiválasztott állapot), a CSELEKVÉS vörös (gomb). Ezt a kettősséget a
   forrás-stíluslap is így használja.

   Egyetlen tengely maradt:
     data-theme = light | dark  -> világos / sötét mód
   A `data-env` (dev | prod) MÁR NEM színez: a két környezetet csak a
   „DEV" / „PROD" FELIRAT különbözteti meg.
   ========================================================================= */

/* --- az arculat színei ---------------------------------------------------
   Forrás: `sysadmintech_v2.css`. A NEVEKET is onnan hozzuk, hogy a két
   helyen élő arculat összevethető maradjon: ha ott változik egy szín, itt
   egyetlen sor a dolgunk.                                                 */
:root {
  --navy:   #1e3a8a;   /* szerkezet: keret, oldalsáv, címsor */
  --ink:    #0f172a;   /* alap betűszín */
  --slate:  #334155;   /* másodlagos szöveg */
  --red:    #dc2626;   /* cselekvés: gomb — és a hiba */
  --blue:   #2563eb;   /* fókusz */
  --green:  #16a34a;
  --teal:   #14b8a6;
  --card-b: #e5e7eb;   /* belső vonalak */
}

/* --- környezet: DEV vagy PROD --------------------------------------------
   🔴 A kettő között CSAK A FELIRAT különbözik. Korábban az egész felület
   színt váltott (DEV narancs / PROD meggypiros) — azt az arculat
   egységessége váltotta ki: egy vezérlősík, egy megjelenés. A jelzés az
   oldalsáv és a belépő „DEV" / „PROD" címkéje, valamint a lap címsora.
   ⚠️ Ha a szín-alapú megkülönböztetést vissza kellene hozni, ELÉG ezt a két
   sort kibővíteni — a `--marka*` változókat mindenhol innen kapja a lap. */
html[data-env="dev"]  { --env-name: "DEV"; }
html[data-env="prod"] { --env-name: "PROD"; }

/* --- kiemelő (márka) szín: mindkét módban ugyanaz ------------------------ */
:root {
  --marka: var(--navy);
  --marka-sotet: #16306e;
  --marka-on: #fff;

  /* --- a bal oldali MENÜSÁV színei ---------------------------------------
     Alapban a márkaszín, tehát ezek a sorok magukban semmit nem változtatnak.
     A *Rendszerbeállítások → Menü színei* fül viszont TÉMÁNKÉNT felülírja
     őket, egy beágyazott stílus-blokkal (`base.html`) — és mivel az
     `html[data-theme=…]` fajsúlya nagyobb, mint ezé a `:root`-é, az ottani
     érték nyer.
     🔑 Saját jelölő kell rá, nem a `--marka`: azt a felület MÁS elemei is
     használják (a fejléc alsó vonala, a jelvények, az időszak-választó), és
     a menüsáv átszínezése nem szólhat bele azokba. */
  --menu-hatter: var(--marka);
  --menu-szoveg: var(--marka-on);
  /* A kiválasztott és az egér alatti menüpont foltja. Alapban SÖTÉTÍT (a
     sáv sötétkék); saját szín beállításakor a betűszínből kevert foltra
     cserélődik, ami világos sávon is látszik — lásd `satadm.menu_szin`. */
  --menu-hover: rgba(0, 0, 0, .12);
  --menu-aktiv: rgba(0, 0, 0, .2);

  --radius: 10px;          /* mező, gomb — az arculat `.sat-input` / `.sat-btn` */
  --radius-kartya: 18px;   /* a „főablak" lekerekítése */
  --radius-kicsi: 8px;     /* apró dobozok — az arculat `.sat-kv` */
}

/* --- világos mód — ez az arculat alapállapota ---------------------------- */
html[data-theme="light"] {
  --bg: #f6f8ff;                 /* az arculat lapháttere: hűvös, kékes fehér */
  --panel: #ffffff; --panel2: #f8fafc;
  --line: var(--card-b); --text: var(--ink); --muted: var(--slate);
  --ok: var(--green); --warn: #b45309; --crit: var(--red);
  --veszely: #991b1b;            /* visszafordíthatatlan művelet gombja */

  --keret: var(--navy);          /* a kártyák 2 képpontos kerete */
  --mezo-keret: var(--navy);     /* beviteli mező kerete */
  --cim: var(--navy);            /* címsorok */
  --kiemel: var(--navy);         /* hivatkozás, rendezett oszlop */
  --jelzes-szoveg: #4338ca;      /* az arculat `.sat-badge` betűszíne */
  --marka-halvany: #eef2ff;      /* az arculat `.sat-badge` háttere */

  --shadow: 0 22px 60px rgba(17, 24, 39, 0.18);        /* a „főablak" árnyéka */
  --shadow-kicsi: 0 8px 20px rgba(17, 24, 39, 0.06);   /* az arculat `.tile`-ja */

  /* lista-fejléc: a márka halvány tónusa (`--marka-halvany`) egy árnyalattal
     erősebben — a fejlécsort ma csak a betűszín különbözteti meg az
     adatsoroktól, és hosszú listán görgetve összefolyik velük */
  --lista-fej: #e5ecfb;
  --lista-fej-hover: #d6e1f8;

  /* szűrő: a lista KEZELŐSZERVE, nem adatbevitel — saját türkiz doboz.
     A mező világosabb a doboznál: így a mező mező marad benne. */
  --szuro-sav: #d9f2ed;
  --szuro-mezo: #f0fcf9;
  --szuro-keret: #7fd3c7;

  /* fülek */
  --ful-hover: #eef2ff;
  --ful-hover-szoveg: var(--blue);
  --ful-aktiv: var(--navy);
  --ful-aktiv-szoveg: #fff;
  --ful-alahuzas: #b91c1c;              /* mély vörös aláhúzás */
}

/* --- sötét mód -----------------------------------------------------------
   Az arculatnak NINCS sötét változata (a forrás `color-scheme: light`).
   Ezért itt a márka-kékből származtatunk: a lap mélykék-fekete, a keret
   viszont VILÁGOSABB kék — a sötétkék keret a sötét háton eltűnne, és pont
   az veszne el, ami az arculatot hordozza.                                */
html[data-theme="dark"] {
  --bg: #0b1020; --panel: #131a2c; --panel2: #1b2438;
  --line: #2b3550; --text: #ffffff; --muted: #a3b0c9;
  --ok: #4cc47c; --warn: #e0a83c; --crit: #ef5350;
  --veszely: #c62828;

  --keret: #3b5bd9;
  --mezo-keret: #3b5bd9;
  --cim: #c9d6ff;
  --kiemel: #8ea8ff;
  --jelzes-szoveg: #c9d6ff;
  --marka-halvany: #1c2745;

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  --shadow-kicsi: 0 8px 20px rgba(0, 0, 0, 0.35);

  /* ⚠️ Ezek NEM a világos értékek sötétítései. A `--ful-aktiv` a világos
     mód sötétkékje volna, ami a sötét háton eltünne; a `--ful-alahuzas`
     mély vörösét pedig ott nem lehet kivenni. Mindkettő világosít. */
  --lista-fej: #1e2a45;
  --lista-fej-hover: #27355a;

  --szuro-sav: #0f2b28;
  --szuro-mezo: #17403a;
  --szuro-keret: #2c6b62;

  --ful-hover: #1c2745;
  --ful-hover-szoveg: var(--kiemel);
  --ful-aktiv: #3b5bd9;
  --ful-aktiv-szoveg: #fff;
  --ful-alahuzas: #ef5350;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* A betűcsalád az arculatból; a MÉRET marad 14 px. Az arculati lap egyetlen
   bemutatkozó képernyő, a panel viszont sűrű táblázatokat mutat — ott a
   16 px-es alapszöveg fél oszloppal kevesebb adatot enged a képre. */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.55 system-ui, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
}
a { color: var(--kiemel); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
/* Címsor sötétkéken, ahogy az arculatban (`h1`, `.tile h3`). */
h1, h2, h3 { margin: 0 0 .6rem; font-weight: 700; line-height: 1.25; color: var(--cim); }
h1 { font-size: 1.45rem; letter-spacing: .2px; } h2 { font-size: 1.05rem; } h3 { font-size: .95rem; }
code, pre { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .86em; }

/* --- elrendezés ---------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }
/* ⚠️ Ez a szélesség NEM ÉRVÉNYESÜL: lentebb, az alkalmazkodó elrendezésnél
   egy `clamp()` felülírja (feltétel nélkül, tehát mindig). Itt csak azért
   marad, hogy a szabály önmagában is értelmes legyen — ha az oldalsáv
   szélességén állítanál, a `clamp`-ot keresd. */
.sidebar {
  width: 220px; flex: 0 0 220px;
  background: var(--menu-hatter); color: var(--menu-szoveg);
  display: flex; flex-direction: column;
}
.brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px;
  padding: 1rem 1.2rem; border-bottom: 1px solid rgba(0,0,0,.18);
}
.brand-szoveg { min-width: 0; }
.brand b { font-size: 1.2rem; letter-spacing: .5px; }
.brand span { display: block; font-size: .78rem; opacity: .85; margin-top: .1rem; }
.brand .brand-node { font-size: .72rem; }

/* --- márkajel -------------------------------------------------------------
   A jel a sysadmintech.eu / adminhostings.eu arculatából való, és SZÁNDÉKOSAN
   bájtra ugyanaz a lejtő, lekerekítés és derengés, mint az ottani `.logo`
   (`sysadmintech_v2.css`). Két helyen élő arculat előbb-utóbb elcsúszik —
   ezért ha ott változik, ide is át kell hozni.

   Kép helyett CSS: nincs betöltendő fájl (a panel `script-src 'self'`
   szabálya mellé külső ikon sem kell), bármilyen felbontáson éles, és a
   mérete egyetlen számmal állítható.

   A márkaszínek NEM téma-függők: világos és sötét módban ugyanazok. Egy jel,
   ami módonként más színű, már nem ugyanaz a jel.                          */
.logo {
  width: 56px; height: 56px; border-radius: 14px;
  /* a forrásban: var(--red) 0%, #ffffff 55%, var(--navy) 100% */
  background: linear-gradient(135deg, #dc2626 0%, #ffffff 55%, #1e3a8a 100%);
  box-shadow: 0 14px 32px rgba(220, 38, 38, 0.22);
  flex: 0 0 auto; position: relative;
}
.logo::after {
  content: "";
  position: absolute; inset: -16px; border-radius: 22px;
  background: radial-gradient(closest-side, rgba(220, 38, 38, 0.14), transparent 70%);
  pointer-events: none;
}

/* Oldalsáv: a kisebb változat (az arculat saját `.center .logo`-ja), mert
   56 px a 220 px-es sávban elvenné a felirat helyét.
   A vörös derengés itt elmarad — telített narancs/vörös háton nem látszana.
   Helyette hajszálvékony fehér gyűrű: PROD-on (#D40000) a jel vörös sarka
   enélkül BELEOLVAD a sávba, és a jelnek eltűnik a fele. */
.sidebar .brand { gap: 0 10px; }
.sidebar .brand b { font-size: 1.05rem; letter-spacing: .3px; }
.sidebar .brand span { font-size: .7rem; }
.sidebar .logo {
  width: 36px; height: 36px; border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
.sidebar .logo::after { display: none; }
/* A környezet-címke és a fő domain saját sora: a jel ALATT, teljes
   szélességben. Két elem áll benne egymás mellett, ezért sor (`flex`). */
.env-sor {
  flex: 1 0 100%; margin-top: .55rem;
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}

/* 🔴 PROD-on NINCS környezet-címke. Az éles üzem az alapállapot; jelölni a
   KIVÉTELT érdemes. Így a jelzés nem is olvasható félre: vagy ott a DEV, vagy
   éles rendszeren vagy. (A `--env-name` definíciója marad — ha a PROD-címkét
   valaha vissza kell hozni, ez az egy sor törlendő.)
   ⚠️ A SOR maga megmarad: a FŐ DOMAIN élesben is ott áll benne. Csak a
   környezet-címke tűnik el. */
html[data-env="prod"] .env-tag { display: none; }

.env-tag {
  display: inline-block; padding: .12rem .55rem; border-radius: 3px;
  background: var(--menu-szoveg); color: var(--menu-hatter); font-weight: 700;
  font-size: .72rem; letter-spacing: 1px;
}
.env-tag::after { content: var(--env-name); }

/* A gép FŐ DOMAINje — melyik rendszerben dolgozom. Halkabb, mint a DEV
   címke: az figyelmeztetés (tömör mező), ez azonosság (körvonal). Élesben
   ez az egyetlen elem a soron, tehát ott ő maga a jelzés. */
.env-domain {
  display: inline-block; padding: .12rem .5rem; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--menu-szoveg) 55%, transparent);
  color: var(--menu-szoveg); font-weight: 700;
  font-size: .72rem; letter-spacing: .2px;
  /* 🔴 Hosszú domain se lógjon ki a sávból — MÉRVE: a `min-width: 0` nélkül a
     `max-width` hatástalan, mert a flex-elem alapértelmezett `min-width: auto`-ja
     a min-content szélességet kikényszeríti, és a chip átlóg a tartalomba.
     ⚠️ És NEM vágjuk le három ponttal: a domain AZONOSSÁG, két node neve
     ugyanúgy kezdődhet. Inkább tördeljük — két sor csúnyább, de igaz. */
  max-width: 100%; min-width: 0; overflow-wrap: anywhere;
}
.nav { padding: .6rem 0; flex: 1; }
.nav a {
  display: block; padding: .48rem 1.2rem; color: var(--menu-szoveg);
  border-left: 4px solid transparent; opacity: .92;
}
.nav a:hover { background: var(--menu-hover); text-decoration: none; opacity: 1; }
.nav a.active { background: var(--menu-aktiv); border-left-color: var(--menu-szoveg); opacity: 1; font-weight: 600; }
.nav a.soon { opacity: .6; }
.nav .group {
  padding: .85rem 1.2rem .25rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .8px; opacity: .75;
}
.sidebar-foot {
  padding: .75rem 1.2rem; border-top: 1px solid rgba(0,0,0,.18);
  font-size: .76rem; opacity: .85;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.4rem; background: var(--panel); border-bottom: 3px solid var(--marka);
}
.topbar .right { display: flex; align-items: center; gap: .9rem; }
.content { padding: 1.3rem 1.4rem; max-width: 1400px; width: 100%; }

.theme-toggle {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: .3rem .6rem; cursor: pointer; font-size: .8rem;
}
.theme-toggle:hover { background: var(--panel2); }

/* --- kártyák ------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* 🔑 A KÁRTYA = az arculat „főablaka". Ez a felület legfontosabb formai
   eleme: 2 képpontos sötétkék keret, 18 képpontos lekerekítés és egy nagy,
   lágy árnyék — ugyanaz, amit a honlap egyetlen nagy lapja visel.
   A vastag keret nem dísz: ettől lesz a kártya ABLAK, és nem egy halvány
   szürke folt a másik mellett. */
.card {
  background: var(--panel);
  border: 2px solid var(--keret);
  border-radius: var(--radius-kartya);
  padding: 1.2rem 1.35rem;
  box-shadow: var(--shadow);
}
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

/* Kártya-köz. Enélkül a szomszédos kártyák EGYETLEN szürke tömbnek
   látszanak, és nem derül ki, hol ér véget az egyik gondolat és hol kezdődik
   a másik. Eddig ezt laponként, kézzel írt `style="margin-top"`-pal pótoltuk
   — ami annyit ért, amennyit nem felejtettek el odaírni. */
/* 🔴 Csak EGYMÁS ALATT álló kártyáknál. A rácsban a köz a `gap` dolga —
   ott ez a margó a második elemtől kezdve LÉPCSŐSEN tolná le a kártyákat
   (a rács minden eleme `.card`, tehát mind „követ" egy másikat). */
.card + .card,
.card + .alert,
.alert + .card { margin-top: 1.25rem; }
.grid > .card + .card { margin-top: 0; }
/* 🔴 A RÁCS IS SZOMSZÉD LEHET. A fenti szabály csak akkor hat, ha egy kártyát
   KÖZVETLENÜL egy másik kártya követ — egy `.grid`-be csomagolt kártyapár
   viszont más elem, tehát a szabály átsiklott felette, és a rács a fölötte-
   alatta álló kártyához TAPADT. (A Statisztika fülön derült ki, ahol egy
   választó-kártya után jön a kétoszlopos rács, utána megint kártyák.)
   Ez általános hiány volt, nem annak az egy lapnak a hibája — ezért itt, a
   szomszédsági szabályok közt a helye, és nem a lap saját stílusában. */
.card + .grid,
.grid + .card,
.grid + .grid,
.grid + .alert,
.alert + .grid { margin-top: 1.25rem; }

/* 🔴🔴 A NEM RAJZOLT ELEM SEM TÖRHETI EL A KÖZT.
   A fenti szabályok a KÖZVETLEN szomszédra hatnak (`+`). Egy `display:none`
   elem — jellemzően a grafikonok `application/json` adatblokkja — nem
   látszik, de a SZOMSZÉDSÁGI LÁNCOT megszakítja: a `.grid + .card` nem lép át
   rajta, tehát a két blokk 0 képponttal ér össze. A hiba csak a képernyőn
   látszik, a jelölésben nem — a diffben minden rendben van.

   Mérve (fej nélküli Chrome, `getBoundingClientRect`): az SLA-fülön a rács és
   az utána álló kártya köze **0 px** volt, miközben a lap minden más köze
   20 px. A jelenség NEM egy lap hibája: ma **négy** sablon tesz adatblokkot
   két blokk közé (`_grafikonok`, `_frissites_claude`, `_statisztika`, `_sla`),
   és bármelyik újnál megismétlődne. Ezért itt a helye, a szomszédsági
   szabályok közt — ugyanaz a megfontolás, mint a `.grid` felvételénél
   fentebb.

   Két közbeékelt elemig fedjük le: ennél többet egyetlen sablon sem tesz,
   és a szabály nem nőhet a végtelenségig. Ha valaha kellene, EZT bővítsd,
   ne a lap saját stílusát. */
:is(.card, .grid, .alert) + :is(script, template)
  + :is(.card, .grid, .alert),
:is(.card, .grid, .alert) + :is(script, template) + :is(script, template)
  + :is(.card, .grid, .alert) { margin-top: 1.25rem; }

/* Gombsor: a fölötte lévő kártyához TARTOZIK, de nem tapadhat rá.
   A `flex` azért kell, hogy a gomb és a mellette álló rövid magyarázat egy
   sorban maradjon, szűk kijelzőn pedig törjön. */
.gombsor {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .9rem;
}
/* Kártyán BELÜL szorosabb: ott a gomb a kártya tartalmának a lezárása. */
.card .gombsor { margin-top: .7rem; }

/* --- műveleti gombok: SOHA ne érjenek össze ------------------------------ */
/* 🔴 Szűk táblázat-cellában a gombok SORTÖRNEK, és margó nélkül egyetlen
   tömbbé folynak — ránézésre egy gombnak látszik kettő, és könnyű a
   rosszra kattintani. Ez a szabály GLOBÁLIS: nem laponként, kézzel írt
   `style`-lal pótoljuk, mert az annyit ér, amennyit nem felejtenek el
   odaírni.

   A `details` (a megerősítést kérő, lenyíló törlés) blokk-elem, tehát új
   sorba kerül — neki a FÜGGŐLEGES köz kell. */
td .btn,
td details { margin: .15rem .35rem .15rem 0; }
td details > summary.btn { margin: 0; }

/* A `.gombsor` a saját `gap`-jével old, ott a margó dupla közt adna. */
.gombsor .btn { margin: 0; }

/* 🔴 A `hidden` ATTRIBÚTUM ÖNMAGÁBAN NEM REJT EL EGY GOMBOT.
   A böngésző alapértelmezése (`[hidden] { display: none }`) a UA-stíluslapból
   jön, a `.btn { display: inline-block }` viszont a MI stíluslapunkból — és a
   szerző szabálya mindig erősebb az alapértelmezésnél, akármilyen szűk is az
   utóbbi. Emiatt a `hidden`-re állított gombok VÉGIG LÁTSZOTTAK: a
   domain-választó JS-nélküli tartalék gombja („Mutasd”) is, amit a kezelő
   szándékosan elrejtett volna, miután bekötötte magát.
   ⚠️ Az `!important` itt nem lustaság: a `hidden` a dokumentum SZÁNDÉKA, azt
   egyetlen megjelenési szabály sem írhatja felül. */
[hidden] { display: none !important; }

/* Mező + mellette a gombja (jelszó-generálás, könyvtár-tallózás).
   🔴 Ennek az osztálynak — a `.gombsor`-hoz hasonlóan — EDDIG NEM VOLT CSS-e:
   a sablonban szerepelt, a stíluslapban nem. Ettől a `width:100%`-os mező
   kitöltötte a sort, a gomb pedig alá csúszott, oda tapadva. */
.sor {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.sor > input, .sor > select { flex: 1 1 16rem; min-width: 0; }
.sor > .btn { flex: 0 0 auto; }

/* --- könyvtár-böngésző (FTPS/SFTP) -------------------------------------- */
/* A választó mező nem gépelhető (a `panel.js` teszi `readonly`-vá), ezért
   NEM is úgy néz ki, mint egy üres beviteli mező, amibe írni kellene. */
input.valaszto-mezo { cursor: pointer; background: var(--panel2); }

dialog.bongeszo {
  width: min(38rem, 92vw);
  border: 2px solid var(--keret); border-radius: var(--radius-kartya);
  background: var(--panel); color: var(--text);
  padding: 1.2rem 1.35rem; box-shadow: var(--shadow);
}
dialog.bongeszo::backdrop { background: rgba(0, 0, 0, .45); }

/* A fa GÖRGETHETŐ, és nem a lapot nyújtja meg: egy mély könyvtárszerkezetnél
   különben a „Kiválasztom” gomb kicsúszna a képernyő aljára. */
.bongeszo-fa {
  max-height: min(24rem, 50vh); overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-kicsi);
  padding: .45rem .55rem; margin-bottom: .6rem;
}
.bongeszo-fa ul.bongeszo-szint { list-style: none; margin: 0; padding-left: 1.1rem; }
.bongeszo-sor { display: flex; align-items: center; gap: .25rem; }
.bongeszo-nyit {
  flex: 0 0 auto; width: 1.4rem; padding: 0; line-height: 1.4;
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.bongeszo-nev {
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: .1rem .35rem; color: var(--text); cursor: pointer; text-align: left;
  font: inherit;
}
.bongeszo-nev:hover:not(:disabled) { background: var(--panel2); }
/* A kijelölés a KÖRNYEZET színével, nem szürkével: ez az egyetlen jelzés
   arról, mi kerül majd a mezőbe. */
.bongeszo-nev.kijelolt {
  background: var(--marka); color: var(--marka-on); border-color: var(--marka-sotet);
}
.bongeszo-nev.gyoker { font-weight: 600; }
.bongeszo-nev.nem-valaszthato { color: var(--muted); cursor: not-allowed; }
.bongeszo-uzenet { list-style: none; font-size: .85rem; }
dialog.bongeszo .alert { margin: .5rem 0; }
/* Űrlap-kártya: nem nyúlik a képernyő széléig. Egy 4-5 mezős űrlap teljes
   szélességben olvashatatlan — a címke a bal szélen, a mező vége két
   arasznyira tőle. A táblázatokra ez nem érvényes: azoknak kell a hely. */
.card.urlap { max-width: 46rem; }

/* Űrlap-rács: rövid mezők egymás mellett (limitek, pipák). Egymás alatt egy
   hét limitből álló csoport kilométeres lapot csinálna, és a végén lévő mező
   már nem is látszana a gomb mellett. */
.urlap-racs {
  display: grid; gap: .4rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.urlap-racs > div { min-width: 0; }
/* a globális `label { margin: .7rem 0 .25rem }` itt sorokat lökne szét */
.urlap-racs label { margin-top: .35rem; }
.urlap-racs .muted { display: block; margin-top: .15rem; }
/* Teljes szelessegu elem a racsban (hosszu szoveges mezo, gombsor). A
   `repeat(auto-fit, …)` kulonben oszlopba tordelne, es a Megjegyzes mezo
   ugyanolyan keskeny lenne, mint egy legordulo. */
.urlap-racs .szeles { grid-column: 1 / -1; }

/* PHP-verziók a csomag-listában: soronként egy. Egymás mellett a cella a
   tartalomhoz méreteződne, és négy-hét verzió kitolná az egész táblázatot. */
.php-lista { line-height: 1.45; }
.php-tag { display: block; white-space: nowrap; font-size: .84rem; }
.php-tag.hiany { color: var(--warn); }
/* Az arculat nagy mért értéke (`.sat-val`) VÖRÖS — a panelen viszont a
   vörös a hibáé, és egy vörös „42 domain" riasztásnak látszana. Ezért itt a
   szerkezet sötétkékje, de az arculat vastag betűjével. */
.stat { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--cim); }
.stat small { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); margin-top: .25rem; }

/* --- táblázat ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .4rem .55rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; }

/* 🔴 A FEJLÉCSOR HÁTTERE — és miért nem `thead th`.
   A sablonok 63 táblázatából mindössze 5 használ `<thead>`-et; a többinél a
   fejléc egyszerűen az ELSŐ `<tr>`. A `thead th` tehát a listák nagy részén
   NEM fogna, és a hiány NÉMÁN jelentkezne: a lap betölt, a jelölés helyes, a
   végpont hibátlan — csak a fejléc nem válik el. Az ismérv ezért „a sorban
   nincs `<td>`”: ez a `<thead>`-es és a `<thead>` nélküli alakot EGYARÁNT
   lefedi, a kulcs–érték táblákat viszont (`<th>` + `<td>` EGY sorban:
   cron-futás, DNSSEC-kulcs, WP-beállítások, git-repó) szándékosan kihagyja —
   ott a `<th>` nem fejléc, hanem a sor címkéje.
   ⚠️ A két szabály KÜLÖN áll, nem vesszős csoportban: egy vesszős
   csoportot a `:has()`-t nem ismerő böngésző EGÉSZBEN eldobna, és akkor a
   `<thead>`-es listák is elvesznének. */
thead > tr > th { background: var(--lista-fej); }
tr:not(:has(td)) > th { background: var(--lista-fej); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 🔴 SZÉLES TÁBLÁZAT: a KÁRTYA görgessen, ne a LAP.
   -------------------------------------------------------------------------
   A `width: 100%` csak a táblázat MINIMÁLIS szélességéig tud zsugorodni. Sok
   oszlopnál, nem törhető tartalommal (dátum, méret, kapcsoló, és a
   rendezhető fejlécek `nowrap` hivatkozásai) a táblázat szélesebb lesz a
   kártyánál, és KIFELÉ nyomja az egész lapot: a felhasználó a teljes oldalt
   tolja oldalra — az oldalsávval és a fejléccel együtt —, hogy lásson egy
   oszlopot. Megmérve 900 px-es ablakban: a Napló fül 101, a Folyamatok 70
   képponttal lógott ki; a kilógó elemek épp a fejléc-hivatkozások voltak.

   🔑 Miért a `:has()` és nem sablon-burkoló: így MINDEN lista egyformán
   viselkedik, sablon-változtatás nélkül — a lista-komponens szabálya épp az,
   hogy nem listánként oldjuk meg. A szűrősáv és a lapozó a táblázattal együtt
   marad a görgethető dobozban, tehát a szűrő mindig a hozzá tartozó oszlopok
   fölött van.

   🔴 A FÁJLKEZELŐ KIMARAD, és ez nem szépészeti kivétel: a soronkénti menüje
   (`.fk-menu-lap`) abszolút pozicionált, egy görgető doboz pedig LEVÁGNÁ — a
   sor műveletei (átnevezés, törlés, letöltés) elérhetetlenné válnának. Ott a
   táblázat marad, ahogy volt. */
.card:has(table):not(:has(.fk-menu)) { overflow-x: auto; }

/* ⚠️ A görgethető doboz ÖNMAGÁBAN kevés — megmérve. A `width: 100%` mellett a
   táblázat a kártyához igazodik (795 px), a tartalma viszont 930 px-et kérne,
   és a KÜLÖNBSÉG A CELLÁKON BELÜL lóg ki: az oszlopok egymásra csúsznak, a
   kártyának pedig nincs mit görgetnie. Ezért a táblázat megtartja a saját
   minimumát; ahol a minimum kisebb a kártyánál, ott a `width: 100%` marad
   érvényes, tehát a rövid listák kinézete nem változik. */
.card:has(table):not(:has(.fk-menu)) > table { min-width: min-content; }

/* --- sávok, jelölők ------------------------------------------------------ */
.bar {
  height: 6px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; min-width: 70px;
}
.bar > span { display: block; height: 100%; background: var(--ok); }
.bar.warn > span { background: var(--warn); }
.bar.critical > span { background: var(--crit); }
/* Az arculat jelzője (`.sat-badge`): halvány kék mező, sötétkék betű. */
.badge {
  display: inline-block; padding: .08rem .5rem; border-radius: var(--radius);
  font-size: .74rem; font-weight: 600;
  border: 1px solid rgba(30, 58, 138, 0.15);
  color: var(--jelzes-szoveg); background: var(--marka-halvany);
}
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.crit { color: var(--crit); border-color: var(--crit); }
.badge.env { background: var(--marka); color: var(--marka-on); border-color: var(--marka); font-weight: 700; }

/* KIVEZETETT domain sora. Halvanyabb, mert mar nem szolgal ki — de NEM
   athuzott es nem tul vilagos: a sorban ott van a ket muveleti gomb
   (Visszaallitas, Vegleges torles), azoknak olvashatonak kell maradniuk.
   A bal szelen sarga sav jelzi, hogy ez atmeneti allapot, nem vegleges. */
tr.kivezetett > td {
  background: var(--warn-halvany, rgba(180, 83, 9, 0.06));
  opacity: .85;
}
tr.kivezetett > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* Muszaki cim: NEM allapot, hanem magyarazat -- ezert szaggatott keret es
   halvanyabb szin, hogy ne keveredjen az "aktiv"/"megtelt" jelzesekkel. */
.badge.muszaki {
  border-style: dashed; background: transparent; cursor: help; margin-left: .35rem;
}
.muted { color: var(--muted); }

/* --- űrlap --------------------------------------------------------------- */
input, select, textarea, button { font: inherit; }
/* Az arculat mezője (`.sat-input`): 2 képpontos sötétkék keret, 10 képpontos
   lekerekítés. A vastag keret itt is szerep: megmondja, HOVA lehet írni. */
input[type=text], input[type=password], input[type=email], select, textarea {
  width: 100%; padding: .55rem .7rem; background: var(--panel); color: var(--text);
  border: 2px solid var(--mezo-keret); border-radius: var(--radius);
}
/* Fókusz: nem a rendszer körvonala, hanem az arculat lágy kék gyűrűje. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}
label { display: block; margin: .7rem 0 .25rem; color: var(--muted); font-size: .82rem; }
/* --- színválasztó (Rendszerbeállítások → Menü színei) --------------------
   Két mező egy sorban: a VÁLASZTÓ (ezt küldi az űrlap — mindig érvényes
   színkód) és mellette a KÓD, amibe be lehet illeszteni egy pontos értéket.
   A kód mezőnek nincs `name`-je: a böngésző a választóba írja át, és az megy
   el. Így egyetlen forrás van, és nem lehet a kettő ellentmondásba kerülni. */
.szin-sor { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.szin-sor input[type=color] {
  width: 3.2rem; height: 2.5rem; padding: 2px; flex: 0 0 auto; cursor: pointer;
  background: var(--panel); border: 2px solid var(--mezo-keret);
  border-radius: var(--radius);
}
.szin-sor input[type=text] {
  width: 7.2rem; text-transform: uppercase;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
/* Az olvashatóság-mérő sora. A `gond` osztályt a `menu_szin.js` teszi rá,
   amikor az arány a mentési küszöb alatt van — a kiszolgáló ugyanezt a
   párost el fogja utasítani. */
.szin-arany b { font-weight: 700; }
.szin-arany b.gond { color: var(--crit); }

/* Jelölőnégyzet a SAJÁT feliratával egy sorban. A globális
   `label { display:block }` külön sorba törné a négyzetet és a szöveget. */
.jelolo {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0; color: var(--text); font-size: inherit;
}
.jelolo input { margin: 0; }
/* Az arculat gombja (`.sat-btn`): tömör vörös, lekerekített, saját
   árnyékkal. A vörös ITT a cselekvés színe — a szerkezeté a sötétkék. */
.btn {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--radius);
  border: 0; background: var(--red); color: #fff;
  cursor: pointer; font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
.btn:hover { filter: brightness(.97); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* Másodlagos gomb (`.sat-btn-secondary`): pala, halkabb árnyékkal. Az
   arculatban a másodlagos is TÖMÖR — nem üres körvonal. */
.btn.ghost {
  background: #475569; color: #fff; border: 0; font-weight: 700;
  box-shadow: 0 6px 16px rgba(71, 85, 105, 0.22);
}
.btn.ghost:hover { filter: brightness(.97); color: #fff; }

/* 🔴 LETILTOTT gomb — látszania is kell, hogy nem kattintható. Eddig nem volt
   rá szabály: a `disabled` gomb pontosan ugyanúgy nézett ki, csak nem csinált
   semmit — épp az a néma hibafajta, amit ez a projekt üldöz. Rajtam kívül
   három helyen van ilyen a panelen (migráció, mentés, előnézet). */
.btn:disabled, .btn[disabled] {
  opacity: .5; cursor: not-allowed; box-shadow: none;
}
.btn:disabled:hover, .btn[disabled]:hover { filter: none; }

/* Kis gomb. Ugyanaz a méret, amit a `td .btn` a táblázatban amúgy is ad —
   a `kicsi` attól kell, hogy táblázaton KÍVÜL (kártyafejléc, gombsor) is
   lehessen apró gombot kérni. */
.btn.kicsi { padding: .28rem .7rem; font-size: .84rem; font-weight: 700; }

/* Visszafordíthatatlan művelet (törlés). Az ALAP gomb MÁR vörös — az a
   cselekvés színe —, ezért a veszélyes nem lehet "csak vörös": sötétebb
   tónus különbözteti meg a hétköznapi cselekvéstől. */
.btn.veszelyes { background: var(--veszely); box-shadow: 0 6px 16px rgba(153, 27, 27, .3); }
.btn.veszelyes:hover { filter: brightness(1.08); }

/* 🔴 Táblázat-cellában és szűrősávban NINCS gomb-árnyék. Soronként három
   lebegő gomb árnyéka egyetlen szürke masszává olvad, és pont a táblázat
   sorai vesznek el alatta — az árnyék a KÁRTYÁT emeli ki, nem a gombot. */
td .btn, .lista-szuro .btn, .lista-gombok .btn { box-shadow: none; }
td .btn { padding: .28rem .7rem; font-size: .84rem; font-weight: 700; }

/* --- üzenetek ------------------------------------------------------------ */
.alert { padding: .7rem .95rem; border-radius: var(--radius); border: 1px solid; margin-bottom: 1rem; }
.alert.err { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, var(--panel)); }
.alert.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--panel)); }
.alert.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
/* Osszecsukhato magyarazat: alapbol csukva all, hogy ne nyomja le a listat,
   de egy kattintasra ott van -- nem kell hozza mas lapra menni. */
details.alert > summary { cursor: pointer; }
details.alert[open] > summary { margin-bottom: .5rem; }
details.alert p:last-child { margin-bottom: 0; }
pre.box {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius-kicsi);
  padding: .65rem; overflow: auto; max-height: 320px; margin: 0;
}

/* --- belépő -------------------------------------------------------------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: var(--bg);
}
/* A belépő az arculat „főablaka" a legtisztább formájában: ugyanaz a keret,
   lekerekítés, árnyék és 28 képpontos belső margó, mint a honlap lapján. */
.login {
  width: 100%; max-width: 390px; background: var(--panel);
  border: 2px solid var(--keret); border-radius: var(--radius-kartya);
  padding: 28px; box-shadow: var(--shadow);
}
.login .brand { border: none; padding: 0 0 1.1rem; justify-content: center; color: var(--text); }
.login .brand-szoveg { text-align: left; }
.login .brand span { opacity: 1; color: var(--muted); }
/* A `flex-end` + `margin-right: auto` azért kell a `space-between`
   helyett, mert PROD-on a környezet-címke EL SEM KÉSZÜL: `space-between`
   mellett az egyedül maradó mód-váltó átcsúszna a sáv bal szélére. */
.login-top { display: flex; justify-content: flex-end; align-items: center; margin-bottom: .4rem; }
/* A belépő lap bal felső sarka: a környezet-címke és a gép fő domainje
   egymás mellett, a téma-váltótól balra. */
.login-top .login-jelek {
  margin-right: auto; display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; min-width: 0;
}

/* --- fülek ---------------------------------------------------------------
   Egy ablakon belül a tartalom fülekre bomlik, hogy ne kelljen görgetni.
   Ez a felület általános elrendezési elve, nem csak a vezérlőpulté.        */
.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); margin-bottom: 1.1rem;
}
.tab-btn {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  color: var(--muted); padding: .55rem .95rem; cursor: pointer;
  font-size: .9rem; font-weight: 600; margin-bottom: -2px; border-radius: 4px 4px 0 0;
  /* A fül lehet `<button>` (JS-sel váltott panel) VAGY `<a>` (saját lapot
     tölt). A globális `a { color; font-weight; text-decoration }` különben
     elvinné a hivatkozás-alapúakat. */
  font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: border-bottom-color .12s ease, background-color .12s ease,
              color .12s ease;
}
/* Hover: enyhe kék felirat, halvány kék folt. */
.tab-btn:hover { color: var(--ful-hover-szoveg); background: var(--ful-hover); text-decoration: none; }
/* A kiválasztott fül: sötétkék mező, fehér betű — és MEGMARAD az aláhúzás,
   mély vörösben. Az `aria-current="page"` a hivatkozás-alapú (lapot töltő)
   füleké, az `aria-selected` a JS-sel váltottaké; a kettő egyformán néz ki. */
.tab-btn[aria-selected="true"],
.tab-btn[aria-current="page"] {
  background: var(--ful-aktiv); color: var(--ful-aktiv-szoveg); font-weight: 700;
  border-bottom-color: var(--ful-alahuzas);
}
/* ...és a saját fülén hoverre ne halványuljon el */
.tab-btn[aria-selected="true"]:hover,
.tab-btn[aria-current="page"]:hover {
  background: var(--ful-aktiv); color: var(--ful-aktiv-szoveg);
}
/* 🔴 AZ ALÁHÚZÁS KÖVETI AZ EGERET. Amíg az egér a sávban jár, MINDEN
   aláhúzás eltűnik, és csak a mutatott fül kapja vissza — így egyszerre
   mindig pontosan EGY látszik, az egér elvitele után pedig visszaáll a
   kiválasztottra. A kiválasztott közben sem vész el: azt a sötétkék mező
   jelöli, nem az aláhúzás.
   ⚠️ A két szabály FAJSÚLYA AZONOS (0,3,0), tehát a SORREND dönt: a
   `:hover`-esnek KELL utána állnia. Megcserélve a hover némán hatástalan —
   a jelölés és a szabály is helyes volna, csak nem történne semmi. */
.tabs:hover .tab-btn { border-bottom-color: transparent; }
.tabs .tab-btn:hover { border-bottom-color: var(--ful-alahuzas); }
.tab-btn .count {
  display: inline-block; margin-left: .4rem; padding: 0 .38rem; border-radius: 9px;
  background: var(--panel2); border: 1px solid var(--line); font-size: .72rem; font-weight: 600;
}
/* A számláló az AKTÍV fülön. ⚠️ MEGMÉRVE: enélkül a `--panel2`
   (majdnem fehér) háttéren a fehér betű LÁTHATATLAN — a szám egy üres
   folttá válik. A jelölés helyes, a szabály érvényes, a lap betölt; csak a
   szám tűnik el. A fej nélküli renderelés fogta meg, a kód olvasása nem. */
.tab-btn[aria-selected="true"] .count,
.tab-btn[aria-current="page"] .count {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .38);
  color: inherit;
}
.tab-btn .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--crit); margin-left: .4rem; vertical-align: middle;
}
.tab-panel[hidden] { display: none; }

/* --- listák: szűrősáv + lapozó ------------------------------------------- */
/* KÖZÖS KOMPONENS. Minden táblázatos nézet ezt használja — lásd
   web/listing.py és templates/_lista.html. Ne írj saját szűrő/lapozó jelölést. */

/* a natív dátumválasztó és a görgetősáv is kövesse a világos/sötét módot */
html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* 🔴 A SZŰRŐ SAJÁT DOBOZBAN. Nem csak a mezők: a `szuro_sav()` makró a
   szűrő-űrlapot ÉS a gyors időszakokat EGYÜTT teszi ebbe a keretbe — az
   időszakok is szűrnek, tehát ugyanannak a kezelőszervnek a részei. A keret
   mondja meg, hol ér véget a kezelőszerv és hol kezdődik a lista.
   ⚠️ A háttér a DOBOZON van, nem a `.lista-szuro`-n: azon `overflow-x: auto`
   ül (szűk kijelzőn a sáv oldalra görget), és egy görgető dobozon a belső
   margó a görgetéssel együtt csúszna el. */
.szuro-doboz {
  background: var(--szuro-sav);
  border: 1px solid var(--szuro-keret);
  border-radius: var(--radius);
  padding: .7rem .8rem .6rem;
  margin-bottom: .8rem;
}
.szuro-doboz .lista-szuro { margin-bottom: .5rem; }
/* dátumszűrő nélküli listán a sáv az UTOLSÓ elem — ott ne lógjon alul köz */
.szuro-doboz .lista-szuro:last-child { margin-bottom: 0; }
.szuro-doboz .idoszak-sor { margin: 0; }
/* a gyors időszakok kerete is a doboz családjából való */
.szuro-doboz .idoszak { border-color: var(--szuro-keret); }

.lista-szuro {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: .5rem;
  overflow-x: auto; padding-bottom: .25rem; margin-bottom: .5rem;
}
/* a globális `label { display:block; margin:.7rem 0 }` és az
   `input[type=text] { width:100% }` szétdobná az egysoros sávot -- ezért
   itt mindkettőt felül kell írni */
.lista-szuro .mezo { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; }
.lista-szuro .mezo.novekvo { flex: 1 1 16rem; min-width: 8rem; }
.lista-szuro label { margin: 0 0 .2rem; white-space: nowrap; }
/* 🔴 A szűrősáv mezői KERETESZTALT kapnak: ez nem adatbevitel, hanem a lista
   kezelőszerve. Hét darab 2 képpontos sötétkék keret egy sorban a TÁBLÁZATOT
   nyomná agyon — pont azt, amit szűrni akarunk. */
.lista-szuro input, .lista-szuro select,
.lista-szuro input[type=date] {
  width: 100%; padding: .38rem .5rem;
  background: var(--szuro-mezo); color: var(--text);
  border: 1px solid var(--szuro-keret); border-radius: var(--radius-kicsi);
}
.lista-szuro .gombok { flex-direction: row; gap: .4rem; }
.lista-szuro .btn { padding: .38rem .85rem; white-space: nowrap; }

.lista-lapozo {
  display: flex; flex-wrap: nowrap; align-items: center;
  justify-content: space-between; gap: .8rem; overflow-x: auto;
}
.lista-lapozo-hely { padding: .4rem 0; }
.lista-lapozo-hely.felso { border-bottom: 1px solid var(--line); }
.lista-lapozo-hely.also  { border-top: 1px solid var(--line); }
.lista-info { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.lista-gombok { display: flex; flex-wrap: nowrap; gap: .25rem; align-items: center; }
.lap {
  display: inline-block; min-width: 1.85rem; text-align: center;
  padding: .18rem .45rem; border: 1px solid var(--line);
  border-radius: var(--radius-kicsi);
  color: var(--text); font-size: .84rem; font-variant-numeric: tabular-nums;
}
a.lap:hover { background: var(--panel2); text-decoration: none; }
.lap.most {
  background: var(--marka); color: var(--marka-on);
  border-color: var(--marka); font-weight: 700;
}
.lap.tiltott { color: var(--muted); opacity: .4; }
.kihagyas { color: var(--muted); padding: 0 .1rem; }

/* naplók részletek-oszlopa: kulcs-érték párok, ne törje szét a sort */
td.reszletek { font-size: .78rem; max-width: 26rem; }
td.reszletek .kv {
  display: inline-block; margin: 0 .3rem .12rem 0; padding: .02rem .35rem;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
td.reszletek .kv b { color: var(--muted); font-weight: 600; margin-right: .25rem; }

/* Hozzáférés-jelölő: "kihez · milyen szinten".
   🔴 Ide azért kell SAJÁT osztály, mert a `.kv` a napló-oszlopra van szűkítve
   (`td.reszletek .kv`), és a listákban semmit nem csinált: a név és a szint
   szóköz nélkül összeért. A `.kv`-t szándékosan nem tesszük globálissá — az a
   naplók megjelenését változtatná meg. Kártyán a kulcs–érték sor:
   `.adatsor` (lentebb). */
.hozzaferes {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 .35rem .15rem 0; padding: .05rem .4rem;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  white-space: nowrap; vertical-align: middle; font-size: .82rem;
}
.hozzaferes b { font-weight: 600; }
.hozzaferes .szint { color: var(--muted); }

/* --- kulcs–érték sor a kártyákon ----------------------------------------
   Az állapot-lapok "címke — érték" sorai: névszerver, IPv6, adatbázis-
   hozzáférés, postafiók-adatlap.
   🔴 A címke-oszlop szélessége KÖTÖTT, nem `auto`. Minden sor ÖNÁLLÓ rács,
   ezért `auto` mellett soronként MÁS helyen kezdődne az érték — az IPv6-lap
   folytatás-sorai (üres címke + <code>) pedig semmihez nem igazodnának. */
.adatsor {
  display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: .1rem .8rem; align-items: baseline; padding: .22rem 0;
}
.adatsor > :first-child { color: var(--muted); font-size: .82rem; }
.adatsor > :last-child  { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------- rendezhető oszlopfejléc */
/* A nyíl MINDIG ott van, halványan is: enélkül nem látszik, hogy a fejléc
   kattintható — a felhasználó nem próbálgat, hanem végiglapozza a listát. */
th.rendezheto { padding: 0; }
th.rendezheto > a {
  display: flex; align-items: center; gap: .3rem; justify-content: inherit;
  padding: .45rem .6rem; color: inherit; text-decoration: none; white-space: nowrap;
}
th.rendezheto > a:hover { background: var(--lista-fej-hover); }
th.rendezheto.num > a { justify-content: flex-end; }
th.rendezheto .nyil { font-size: .8em; opacity: .35; }
th.rendezheto.rendezve { color: var(--kiemel); }
th.rendezheto.rendezve .nyil { opacity: 1; }

/* --------------------------------------------------------- gyors időszakok */
.idoszak-sor {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin: -.35rem 0 .7rem;
}
.idoszak-cimke { color: var(--muted); font-size: .8rem; margin-right: .15rem; }
.idoszak {
  padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: .8rem; line-height: 1.5;
}
.idoszak:hover { border-color: var(--marka); color: var(--text); }
.idoszak.most {
  background: var(--marka); border-color: var(--marka); color: var(--marka-on);
  font-weight: 600;
}

/* --------------------------------------- széles tartalom táblázat-cellában */
/* 🔴 A táblázat a TARTALOMHOZ méreteződik: egy hosszú, tördelhetetlen sor
   addig nyújtja a cellát, amíg az egész táblázat ki nem lóg a kártyából.
   A cellán belül kell korlátozni — ettől lesz a doboz valóban görgethető.
   Ez minden listára érvényes, ahol hosszú szöveg kerülhet cellába. */
td > pre, td > .szoveg-doboz {
  max-width: min(72ch, 100%);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
td > .szoveg-doboz { max-height: 9rem; overflow-y: auto; }
/* a táblázat semmiképp ne legyen szélesebb a kártyánál */
.card table { max-width: 100%; }

/* Ütemezett feladatok → „mit futtat”: a parancs TELJES egészében látszik.
   🔴 Ezért NEM a fenti `.szoveg-doboz`: annak 9rem magasság-korlátja van,
   ami épp a leghosszabb parancsot vágná el — márpedig az oszlop azért
   van, hogy meg lehessen nézni, mi fut valójában. Sortörés szabad,
   levágás nem.
   * `pre-wrap`: a parancsban több szóköz is lehet egymás után (a
     WordPress-feladat előnézete ilyen) — azok maradjanak meg;
   * `anywhere`: a szóköz nélküli utak és címek is törnek, tehát a cella
     SOHA nem nyomja szét a táblázatot;
   * 🔴 `min-width`: az `anywhere` mellett a cella legkisebb szélessége
     egyetlen karakter, és az automatikus oszlopméretezés ezt ki is
     használja — mérve 900 képpontnál a parancs-oszlop **61 képpontra**
     esett össze, és a parancs hét karakterenként tört. A 16rem az az
     alsó határ, ami mellett a táblázat még befér a kártyába. */
td.parancs-cella {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 16rem;
}

/* ------------------------------------------------------------- grafikonok */
/* Egymas alatt, teljes szelessegben. A magassag latomezohoz kotott, de van
   also es felso hatara: kis kepernyon meg olvashato, nagy kepernyon nem nyulik
   ertelmetlenul. */
/* ---------------------------------------------------------------- SLA
   Az összesítő NÉGY szám egy sorban. Külön rács, nem a `c3`: itt rövid
   számok állnak (99,9317% · 37 perc), tehát 190 képpont elég — a `c3`
   240-es alsó határa mellett négy doboz csak nagyon széles kijelzőn férne
   ki, és jellemzően 3+1 törésben állna, ami olvasva véletlenszerű
   csoportosításnak látszik. */
.sla-szamok { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sla-szamok .card { padding: .85rem 1rem; }
.sla-cimke {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: .1rem;
}
/* A szám a kártya főszereplője: ránézésre ezt kell megtalálni.
   A `tabular-nums` azért kell, hogy az időszakot váltogatva a számjegyek ne
   ugráljanak vízszintesen — attól úgy tűnne, mintha a doboz mozogna. */
.sla-ertek {
  font-size: 1.75rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.sla-ertek.ok { color: var(--ok); }
.sla-ertek.warn { color: var(--warn); }
.sla-ertek.crit { color: var(--crit); }
/* A „nincs adat" NEM piros: az nem hiba, hanem hiányzó mérés. */
.sla-ertek.nincs { color: var(--muted); }
.sla-szamok .muted { font-size: .8rem; }
/* A táblázatok SLA-oszlopai jobbra igazítva, egyforma számjegy-szélességgel:
   így a százalékok tizedespontja egymás alá kerül, és a rosszabb sor
   végiglapozás nélkül is kiszúrható. */
.jobbra { text-align: right; font-variant-numeric: tabular-nums; }
th.jobbra { text-align: right; }
/* A hibakeret sávja (D297): mennyi fogyott el a megengedett kiesésből. A
   jelölő az évből eltelt idő — ha a telt rész túlnyúlik rajta, gyorsabban
   fogy a keret, mint ahogy az év telik. Sima CSS, nem grafikon: egy kártyába
   való, és a sötét mód a változókból követi. */
.keret-sav {
  position: relative; height: .45rem; margin-top: .45rem; border-radius: 999px;
  background: var(--line); overflow: visible;
}
.keret-sav-telt {
  height: 100%; border-radius: 999px; background: var(--ok);
  transition: width .3s ease;
}
.keret-sav-telt.crit { background: var(--crit); }
.keret-sav-jel {
  position: absolute; top: -.2rem; width: 2px; height: .85rem;
  background: var(--muted); transform: translateX(-1px);
}

.grafikon-doboz {
  position: relative; width: 100%;
  height: 34vh; min-height: 260px; max-height: 460px;
}
.grafikon-kartya { margin-bottom: .8rem; }
.grafikon-kartya h2 { margin-bottom: .1rem; }
.grafikon-magyarazat { margin: 0 0 .5rem; font-size: .82rem; }
.grafikon-fejlec {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.grafikon-datum { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.grafikon-datum label { margin: 0; font-size: .8rem; color: var(--muted); }
.grafikon-datum input { width: auto; }

/* ======================================================================== */
/* ALKALMAZKODÓ ELRENDEZÉS                                                  */
/*                                                                          */
/* A tartalom eddig 1400 képpontnál elvágódott: egy 4K-s kijelzőn a kép     */
/* kétharmada üresen állt, miközben a táblázatok szűk hasábba préselődtek.  */
/*                                                                          */
/* 🔑 „Töltse ki a helyet” nem azt jelenti, hogy MINDEN nyúljon a szélére.  */
/* A TÁBLÁZAT és a rács igen — abból több adat látszik. A FOLYÓSZÖVEG nem:  */
/* egy 3000 képpont széles sor olvashatatlan, a szem elveszti a sor elejét. */
/* Ezért a szélesség szabad, de a szöveg-hasáb korlátos marad.              */
/* ======================================================================== */

.content {
  /* volt: max-width 1400px — az vágta el a helyet */
  max-width: none;
  width: 100%;
  /* a keret a kijelzővel arányos: kis képernyőn nem pazarol, nagyon széles
     kijelzőn viszont nem tapad a szélére */
  padding: clamp(.85rem, 1.3vw, 2.6rem);
}

/* A folyószöveg olvasható hasábban marad. A táblázat, a rács és a grafikon
   NEM kap korlátot — azok éljenek a hellyel. */
/* 🔑 A fülsáv nem kér itt kivételt: `<nav class="tabs">`, nem `<p>`. Volt
   itt egy `:not(.tab-sor)` kivétel, amíg a gombsoros almenü `<p>` volt — a
   110 karakteres hasáb ráhúzva a fülek jóval a képernyő széle előtt törtek. */
.content > p,
.card > p,
.alert,
.muted:not(td):not(span) {
  max-width: min(110ch, 100%);
}

/* --- oldalsáv: arányos, nem beégetett szélesség -------------------------
   🔴 EZ dönti el az oldalsáv szélességét (a fenti `width` fölé megy).
   Az alsó határ MÉRT érték, nem ízlés: a márkajel (36) + köz (10) + a két
   oldali belső margó (2x19,2) + a leghosszabb felirat („Servers & Web
   hostings", 118,1) = 202,5 képpont. 190-nél a felirat a szó közepén tört
   ketté. Ha a felirat vagy a jel mérete változik, ezt újra kell mérni. */
.sidebar {
  width: clamp(212px, 14vw, 300px);
  flex: 0 0 auto;
}

/* --- széles táblázat: soha ne nyomja szét a lapot ----------------------- */
/* ⚠️ A táblázat a tartalmához méreteződik. Ha nem fér ki, NEM a kártyát
   kell szétnyomnia, hanem magának kell görgethetőnek lennie. */
.card > table,
.tabla-gorgo {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.card > table > tbody,
.card > table > thead { display: table; width: 100%; }

/* ======================= tablet és kisebb (≤ 1000 px) =================== */
@media (max-width: 1000px) {
  /* Az oldalsáv fölülre kerül: függőlegesen egy keskeny kijelzőn a menü
     elvenné a tartalom helyét. */
  .layout { flex-direction: column; min-height: 100vh; }
  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
  }
  .sidebar .brand { padding: .6rem .9rem; border-bottom: none; }
  /* 🔴 CSAK az oldalsávban! A vízszintes fejlécben az alcím helyet enne — a
     belépő kártyáján viszont VAN hely, és ott a felirat meg a gép neve
     mondja meg, hova lép be a felhasználó. Amíg ez `.brand span` volt,
     telefonon a belépő lapról is eltűnt mindkettő. */
  .sidebar .brand span:not(.env-tag):not(.env-domain) { display: none; }
  /* 🔴 A DEV címke és a FŐ DOMAIN MARAD telefonon is: az alcím nélkül el
     lehet lenni, a környezet és a gép jelzése nélkül nem — ez az, ami
     megmondja, melyik rendszeren dolgozol. */
  .sidebar .env-sor { margin-top: 0; margin-left: auto; flex: 0 0 auto; }
  /* A jel marad: vízszintes fejlécben ő az, ami egy pillantásra azonosít. */
  .sidebar-foot { display: none; }        /* a lábléc itt nem informál */
  .nav {
    flex: 1 1 100%;
    display: flex;
    overflow-x: auto;
    padding: 0;
    gap: .1rem;
    -webkit-overflow-scrolling: touch;
  }
  .nav a {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: .5rem .8rem;
  }
  .nav a.active { border-left-color: transparent; border-bottom-color: var(--menu-szoveg); }
  /* A csoport-feliratok vízszintes menüben csak zajt csinálnak. */
  .nav .group { display: none; }

  .topbar { padding: .6rem .9rem; flex-wrap: wrap; gap: .5rem; }
  .content { padding: .9rem; }
}

/* ======================= telefon (≤ 640 px) ============================= */
@media (max-width: 640px) {
  body { font-size: 13px; }
  .content { padding: .7rem .6rem; }
  .card { padding: .8rem; }

  /* A kétoszlopos rács egy oszlopra esik: két 8 cm-es hasáb egymás mellett
     olvashatatlan. Az öt összesítő kártya ugyanígy: telefonon két 9 milliméteres
     hasábban a számok olvashatatlanok volnának. */
  .grid.c2, .grid.c3, .grid.folyamat-racs { grid-template-columns: 1fr; }

  /* Az űrlapmezők teljes szélesen — apró kijelzőn a fél mező bosszantó. */
  .lista-szuro .mezo { flex: 1 1 100%; }
  .lista-szuro input, .lista-szuro select { width: 100%; }
}

/* ======================= nagyon széles kijelző (≥ 1900 px) ============== */
@media (min-width: 1900px) {
  /* 4K-n a betű is nőhet kicsit: a képpont-sűrűség miatt a 14 px optikailag
     kisebbnek látszik, mint egy HD kijelzőn. */
  body { font-size: 15px; }
  /* Több hely van: a részletező oszlopok kaphatnak belőle. */
  td.reszletek { max-width: 40rem; }
}


/* ============== privat DNS beallitasok: urlap-racs es mezo-uzenetek ====== */
/* A globalis `label { display:block }` es `input { width:100% }` miatt a
   mezok egymas ala kerulnenek -- itt racsba tesszuk oket. Szuk kijelzon
   egymas ala tornek, nem tulcsordulnak. */
.racs-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem 1rem;
}
.racs-3 label { margin: 0; }
.mezo-hiba, .mezo-sugo { display: block; font-size: .85em; margin-top: .15rem; }
.mezo-hiba { color: #b3261e; font-weight: 500; }
.mezo-sugo { color: var(--muted, #777); }
.tartomany-sor { margin: .25rem 0; max-width: 30rem; }

/* ======================= nyomtatás ====================================== */
@media print {
  .sidebar, .topbar, .btn, form { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card { border: 1px solid #999; break-inside: avoid; }
}

/* ── FTP/SFTP: domain-választó és a mezők alatti súgó ────────────────────
   A hozzáférés-lista mindig EGY domainhez tartozik, ezért a választó a lap
   tetején, önálló sorban áll — nem a szűrősávba rejtve. */
/* Domain-választó a kapus füleken. 🔑 A `.domainvalaszto` az ÁLTALÁNOS név
   (a Statisztika fül ezt használja), a `.ftp-domainvalaszto` a régebbi, már
   sok helyen hivatkozott alakja. Egy szabály, két név: két külön blokkból az
   egyik előbb-utóbb lemaradna egy javításról. */
.ftp-domainvalaszto, .domainvalaszto {
  display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
  margin-top: .4rem;
}
.ftp-domainvalaszto label, .domainvalaszto label { font-weight: 600; }
.ftp-domainvalaszto select, .domainvalaszto select {
  min-width: 18rem; max-width: 100%;
}

/* --- domain-statisztika (Domainek → Statisztika fül) ---------------------
   Két egyforma kártya egymás mellett (tárhely és forgalom), mindkettőben egy
   nagy összeg, alatta kördiagram, alatta a tételes bontás. A sorrend
   szándékos: a legtöbben csak az összeget nézik meg, a bontás azoké, akiknek
   nem stimmel. */
.st-fej {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .8rem; flex-wrap: wrap;
}
.st-fej h2 { margin-bottom: .1rem; }
.st-mikor { margin: 0 0 .2rem; font-size: .82rem; }
.st-ossz {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: .7rem 0 .2rem;
}
/* Rögzített magasság: a Chart.js a SZÜLŐ dobozból olvassa a méretet, és
   magasság nélkül nulla pixelre rajzolna. */
.st-kor { height: 250px; margin: .5rem 0 .4rem; }
.st-tetelek td { padding: .38rem .4rem; }
.st-tetelek td:first-child { width: 100%; }
.st-szin {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
  margin-right: .45rem;
}
.st-magyarazat { display: block; font-size: .78rem; line-height: 1.3; }
.st-ertek {
  text-align: right; white-space: nowrap; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.st-labjegyzet { margin: .8rem 0 0; font-size: .8rem; line-height: 1.45; }
.st-elofizetes .bar { max-width: 14rem; margin: .3rem 0 0 auto; }

/* Mező alatti rövid magyarázat. Szándékosan kisebb és halványabb, mint a
   címke: aki tudja, mit ír be, azon átsiklik; aki nem, annak ott van. */
.urlap .sugo {
  margin: .15rem 0 .9rem; font-size: .86em; line-height: 1.35;
  color: var(--muted, #6b7280);
}

/* --- lebegő üzenet-sáv ---------------------------------------------------
   A közlemények és a hibák NEM a lap tetején, a tartalom fölött jelennek meg,
   hanem egy MINDEN FÖLÖTT lebegő sávban, a képernyő tetején.

   Miért: a lapba írt üzenet lejjebb tolta a tartalmat (a lap „megugrott"),
   és görgetés után már nem is látszott — épp azon a hosszú lapon nem, ahol a
   művelet történt. A lebegő sáv nem mozdít semmit, és mindig ott van, ahova
   a szem nézni szokott.

   ⚠️ A `pointer-events: none` a sávon SZÁNDÉKOS: üresen (és a dobozok
   között) nem foghatja el a kattintást a mögötte lévő tartalomtól. Maguk a
   dobozok visszakapják (`pointer-events: auto`), különben az „×" sem menne.

   Méret: a doboz a TARTALMÁHOZ igazodik (`width: max-content`), de nem
   szélesebb a képernyőnél és nem magasabb 50 képpontnál. Ami nem fér el,
   arról nem mondunk le: a doboz belül görgethető, kattintásra pedig
   kinyílik (`.kinyitva`) és a visszaszámlálás is megáll.

   🔴 A színek SZÁNDÉKOSAN nem a téma változói. Ez a két doboz nem
   „hangulat", hanem jelzés: a hibának világos és sötét módban, DEV-en és
   PROD-on is UGYANÚGY kell néznie ki, különben a felhasználó a megszokott
   színt keresi és nem találja. Mindkét párosítás jóval a 4,5:1 fölött van
   (vörös/citromsárga ~12:1, zöld/fehér ~8:1). */
.uzenet-sav {
  position: fixed;
  top: 5px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 0 .5rem;
  pointer-events: none;
}
.uzenet {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: max-content;
  max-width: 100%;
  /* 🔴 A DOBOZ A TARTALMÁHOZ IGAZODIK — függőlegesen nincs korlátozva.
     Korábban itt `max-height: 50px` és belső görgetés állt: a kétsorosnál
     hosszabb üzenet — többek között minden érdemi hibaüzenet — elvágva
     jelent meg, és a felhasználónak bele kellett kattintania, hogy egyáltalán
     lássa, mi a baj. Egy jelzősáv, amit el kell ő olvasni ahhoz, hogy
     olvasható legyen, nem jelzősáv.
     ⚠️ Az egyetlen megmaradt határ a KÉPERNYŐ: a sáv `position: fixed`, tehát
     ami a látómezőn túl nyúlna, azt semmi nem tudná görgetni. Ez nem a doboz
     méretének korlátozása, hanem a fizikai kijelzőé — és csak akkor lép
     életbe, ha az üzenet tényleg magasabb az egész képernyőnél. */
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: .4rem .85rem;
  border-radius: 6px;
  border: 1px solid;
  font-weight: 600;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  opacity: 1;
  /* 🔴 CSAK az áttetszőség megy átmenettel. A  animálása
     megmérve elakadt: ha a lap épp nem rajzol képkockát (háttérben lévő
     fül), az átmenet a KEZDŐÉRTÉKEN ragad — a kattintásra kinyitott doboz
     50 képpontos maradt, és a hosszú hibaüzenet olvashatatlan lett. A
     kinyitás felhasználói döntés, nem díszlet: történjen azonnal. */
  transition: opacity .6s ease;
}
/* 🔑 A `kinyitva` neve maradt, a DOLGA változott. Amíg a doboz 50 képpont
   magas volt, a kattintás KINYITOTTA; most, hogy a doboz úgyis a tartalmához
   igazodik, nincs mit kinyitni — a kattintás ODARAGASZTJA az üzenetet, vagyis
   megállítja az eltűnés-számlálót (lásd `uzenet.js`). Az osztályt azért nem
   neveztük át, mert a JS és a súgó is erre hivatkozik; a jelentése viszont
   ITT van kimondva, hogy ne kelljen kitalálni. */
.uzenet.kinyitva { cursor: default; }
.uzenet.halvanyodik { opacity: 0; }

.uzenet-hiba { background: #6b0000; color: #fff44f; border-color: #a10000; }
.uzenet-ok   { background: #0b5d1e; color: #ffffff; border-color: #17843c; }

.uzenet-szoveg { flex: 1 1 auto; min-width: 0; }

.uzenet-bezar {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 0 0 .2rem;
  margin: 0;
  color: inherit;
  opacity: .75;
  font-size: 1.15rem;
  line-height: 1.1;
  cursor: pointer;
}
.uzenet-bezar:hover { opacity: 1; }

/* Mozgás-érzékenységre állított gépen ne villogjon: eltűnni ugyanúgy
   eltűnik, csak átmenet nélkül. */
@media (prefers-reduced-motion: reduce) {
  .uzenet { transition: none; }
  /* az egeret követő aláhúzás ugyanúgy odaugrik, csak átmenet nélkül */
  .tab-btn { transition: none; }
}

/* Szűk kijelzőn a sáv a teljes szélességet használja — ott a `max-content`
   amúgy is a képernyő széléig érne. */
@media (max-width: 560px) {
  .uzenet { width: 100%; }
}


/* ===========================================================================
   FÁJLKEZELŐ — Hosting → Domainek → Fájlkezelő fül
   =========================================================================== */

/* Kenyérmorzsa: ez mondja meg, HOL vagyunk. Fölé kerül a szűrősávnak, mert a
   szűrés is CSAK ERRE a könyvtárra vonatkozik — fordított sorrendben az volna
   a látszat, hogy az egész tárhelyen keresünk. */
/* Hely-sáv: a „Feljebb" gomb és a kenyérmorzsa egy sorban. Szűk kijelzőn
   törhet — a gomb akkor is az első elem marad. */
.fk-hely {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin: .2rem 0 .8rem;
  padding: .45rem .6rem;
  background: var(--halvany); border-radius: var(--radius-kicsi);
  font-size: .92rem;
}
.fk-hely .fk-morzsa-cimke { color: var(--muted); margin-left: .35rem; }
.fk-hely .fk-nyil { color: var(--muted); }
.fk-hely b { color: var(--text); }
/* A gyökérben a gomb LÁTSZIK, de nem kattintható: a helye ne ugráljon. */
.fk-feljebb.tiltott { opacity: .45; cursor: default; }

.fk-morzsa {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin: .2rem 0 .8rem;
  padding: .45rem .6rem;
  background: var(--halvany); border-radius: var(--radius-kicsi);
  font-size: .92rem;
}
.fk-morzsa-cimke { color: var(--muted); }
.fk-morzsa .fk-nyil { color: var(--muted); }
.fk-morzsa b { color: var(--text); }

/* A gombsor egy sorban marad, szűk kijelzőn viszont törhet: a fájlkezelő
   műveletei közül egyik sem „elsődlegesebb” annyira, hogy a többi kicsússzon. */
.fk-gombsor { flex-wrap: wrap; align-items: center; }
.fk-elvalaszto { color: var(--line); padding: 0 .1rem; }
.fk-kijeloles-szam { margin-left: auto; }

/* A táblázat: a NÉV kapja a helyet, a többi oszlop annyit, amennyi kell.
   Egy fájlkezelőben a név a lényeg — a jogosultság és a gazda kísérőadat. */
.fk-tabla { table-layout: auto; }
.fk-tabla th.fk-jelolo, .fk-tabla td.fk-jelolo { width: 1.8rem; padding-right: 0; }
.fk-tabla th.fk-ikon, .fk-tabla td.fk-ikon {
  width: 1.6rem; padding-left: .2rem; padding-right: .2rem; text-align: center;
}
.fk-tabla td.fk-nev { word-break: break-all; }
/* Keresésnél a találat helye a név fölött, halványan és kisebben: a sor így is
   a névvel kezdődik (arra fut a szem), de látszik, honnan jött. */
.fk-talalat-hely {
  font-size: .78rem; color: var(--muted); line-height: 1.2;
  word-break: break-all;
}
.fk-kereses-jelzes { margin: .1rem 0 .6rem; }
.fk-tabla td.fk-jogok code { font-size: .85rem; }
.fk-tabla td.fk-muveletek { width: 1px; white-space: nowrap; text-align: right; }

/* Soronkénti menü. `<details>`: JS nélkül is kinyílik, tehát a sor műveletei
   akkor is elérhetők, ha a szkript nem futott le. */
.fk-menu { position: relative; display: inline-block; }
.fk-menu > summary { list-style: none; cursor: pointer; }
.fk-menu > summary::-webkit-details-marker { display: none; }
.fk-menu-lap {
  position: absolute; right: 0; z-index: 30; min-width: 12rem;
  display: flex; flex-direction: column;
  padding: .3rem; margin-top: .2rem;
  background: var(--panel); border: 1px solid var(--keret);
  border-radius: var(--radius-kicsi); box-shadow: var(--shadow);
}
.fk-menu-elem {
  display: block; width: 100%; text-align: left;
  padding: .35rem .55rem; border: 0; border-radius: var(--radius-kicsi);
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
  text-decoration: none;
}
.fk-menu-elem:hover { background: var(--halvany); }
.fk-menu-elem.veszelyes { color: var(--veszely); }

/* A műveleti párbeszédek ugyanúgy néznek ki, mint a tallózóé — ugyanaz a
   lap, ugyanaz a fogalom. Keskenyebbek: ezekben egy-két mező van. */
dialog.fk-parbeszed {
  width: min(30rem, 92vw);
  border: 2px solid var(--keret); border-radius: var(--radius-kartya);
  background: var(--panel); color: var(--text);
  padding: 1.2rem 1.35rem; box-shadow: var(--shadow);
}
dialog.fk-parbeszed::backdrop { background: rgba(0, 0, 0, .45); }
dialog.fk-parbeszed h2 { margin-top: 0; }
dialog.fk-parbeszed .sugo { margin-bottom: .3rem; }

/* A szerkesztő: állandó szélességű betű, mert konfigurációs fájlt szerkeszt.
   Arányos betűvel a behúzások és a hosszú sorok összecsúsznak. */
.fk-szerkeszto {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem; line-height: 1.45;
  white-space: pre;            /* ne tördeljen: a sortörés a fájlé, ne a miénk */
  overflow-wrap: normal; overflow-x: auto;
  tab-size: 4;
}
.fk-szerk-cim { margin-bottom: .2rem; word-break: break-all; }

/* Rejtett segéd-űrlap (egysoros törlés, kibontás): a lapon nem látszik, de
   ott van — a `hidden` attribútum a `<form>`-on is működne, ez viszont
   megmarad akkor is, ha valaki később `display:flex`-et ad a szülőnek. */
.rejtett { display: none !important; }

/* Csak képernyőolvasónak szánt címke. A `hidden` itt rossz volna: azzal a
   felolvasó SEM látná, pedig épp neki szól. */
.rejtett-cimke {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------- vezérlőpult: Folyamatok fül */
/* A frissítés vezérlője ugyanakkora kártya, mint a mért értékeké, és ugyanabban
   a rácsban áll — ezért SZŰK: a pipa külön sorban, alatta a gyakoriság és a
   gomb. Egy sorba szorítva a kártya kétszer olyan magas lenne, mint a
   szomszédai, és a rács lépcsőzne.
   ⚠️ Két globális szabály rontaná el: a `label { display:block }` és a
   `select { width:100% }` — mindkettőt felülírjuk. */
/* 🔴 ÖT kártya egy sorban — ezért szűkebb a minimum, mint a `.grid.c3`-é.
   A 240 (és a 185) képpontos minimummal az öt kártya 1280-nál többet kért, és
   4 + 1 elrendezésben tört meg: az ötödik egyedül maradt egy sorban, és mivel
   nem volt kihez igazodnia, alacsonyabb is lett a többinél. Megmérve.
   ⚠️ A sablonban NINCS `c3` mellette, és ez szándékos: a `.grid.c3` KÉT
   osztály, tehát erősebb ennél az egynél — mellé írva ez a szabály némán nem
   érvényesülne. (Elsőre pontosan ez történt.) */
.folyamat-racs { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }

.folyamat-sav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .5rem;
}
.folyamat-sav select { width: auto; min-width: 5.5rem; }
.folyamat-sav .btn { padding: .38rem .85rem; white-space: nowrap; }
.folyamat-kapcsolo {
  display: inline-flex; align-items: center; gap: .4rem; margin: .3rem 0 0;
  font-weight: 600; white-space: nowrap;
}
.folyamat-kapcsolo input { margin: 0; }

/* Az összesítő kártya alsó, bontó sora: kisebb, halkabb, mint a nagy szám. */
.folyamat-bontas {
  margin: .5rem 0 0; font-size: .85rem; color: var(--muted);
}
.folyamat-bontas b { color: var(--text); font-weight: 600; }
.folyamat-merve { font-size: .85rem; }

/* A jobbra zárás és az azonos szélességű számjegyek a közös `num` osztályból
   jönnek. Itt csak annyi kell hozzá, hogy a mért értékek NE TÖRJENEK sorba:
   ez a táblázat magától újrarajzolódik, és egy kétsorossá váló cella minden
   frissítésnél megugratná a sorokat. */
.folyamat-tabla td.num { white-space: nowrap; }