/* Az OMSZ oldal EGYETLEN stíluslapja. Inline style="" és oldalon belüli <style> tilos (lásd CLAUDE.md).
   Egy arculat az egész oldalon (2026-10-13, a frakció kérése: a belső is „olyan, mint a főoldal”): sötétkék kiemelés, sárga hangsúly,
   piros csak figyelmeztetés; címbetű Merriweather, szöveg Public Sans. A token neve történeti: a --zold a kiemelőszín (sötétkék). */
/* A betűk (Google Fonts) a <head>-ben töltődnek (x-fej), nem @import-tal: így a böngésző a stíluslappal párhuzamosan kéri le őket. */

:root {
  color-scheme: light;
  --kek: #0b3466;           /* az arculat alapszíne: fejléc, oldalsáv */
  --kek-sotet: #082a54;
  --sarga: #f5cf0a;         /* hangsúly: sárga vonal, aktív menüpont, kiemelt gomb */
  --sarga-hover: #e2bd00;
  --segely: #d71f26;        /* a 112-es doboz (nyilvános) */
  /* Rangszínek (a játékbeli színek, a frakció kérése, 2026-10-17): x-rang háttere, a rang sorszáma szerint; mindkét témában ugyanaz */
  --rang-0: #f09999; --rang-1: #41a4df; --rang-2: #41a4df; --rang-3: #81c4e8; --rang-4: #b647cb; --rang-5: #b647cb; --rang-6: #8737ae;
  --rang-7: #8737ae; --rang-8: #e0c74e; --rang-9: #e0c74e; --rang-10: #de7650; --rang-11: #de7650; --rang-12: #eb5050;
  --zold: var(--kek);       /* kiemelőszín (kitöltés: gomb, kijelölés); a név történeti */
  --zold-hover: var(--kek-sotet);
  --zold-szoveg: var(--kek); /* kiemelt szöveg, linkek */
  --hatter: #eef1f5;
  --kartya: #ffffff;
  --mezo: #ffffff;
  --szoveg: #16202c;
  --halvany: #55606e;
  --vonal: #d5dbe3;
  --keret: #8792a2;         /* űrlapmezők kerete (3:1 kontraszt) */
  --tinta: var(--kek-sotet); /* sötét kitöltés (számjelző, figyelmeztető címke) */
  --tinta-szoveg: #ffffff;
  --piros: #c62828;         /* csak figyelmeztetés: lejárt, 3/3 */
  --oldalsav: var(--kek);   /* a belső oldalsáv háttere */
  --lap: #ffffff;           /* papírszerű lap (vizsgalap): sötét módban is fehér, így a lementett kép is */
  --lap-szoveg: #111111;
  --lap-halvany: #6b6b6b;
  --lap-vonal: #3a3a3a;
  --lap-fej: #f1f1f1;
  --pecset: #e6b400;        /* a nyomtatvány pecsétjének tintája (a frakció mintája: sárga; a lap sötét módban is fehér) */
  --alairas: #1b2547;       /* kézírásos aláírás a lapon */
  --cim: "Merriweather", Georgia, serif;
  --sans: "Public Sans", "Segoe UI", sans-serif;
  --kezirat: "Mrs Saint Delafield", cursive; /* csak az aláírás a nyomtatványon (x-pecset) */
}
/* Sötét mód: a rendszer beállítását követi, a „Sötét mód / Világos mód” gomb felülírja (tema.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --zold: #2f64ad; --zold-hover: #3c74c2; --zold-szoveg: #9cc0f5;
    --hatter: #0e131a; --kartya: #161d27; --mezo: #121821; --szoveg: #e6ebf2; --halvany: #a3adba;
    --vonal: #2a3442; --keret: #5d6a7c; --tinta: #e6ebf2; --tinta-szoveg: #0e131a; --piros: #ef5350; --oldalsav: #0d1a2c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --zold: #2f64ad; --zold-hover: #3c74c2; --zold-szoveg: #9cc0f5;
  --hatter: #0e131a; --kartya: #161d27; --mezo: #121821; --szoveg: #e6ebf2; --halvany: #a3adba;
  --vonal: #2a3442; --keret: #5d6a7c; --tinta: #e6ebf2; --tinta-szoveg: #0e131a; --piros: #ef5350; --oldalsav: #0d1a2c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 15px/1.6 var(--sans);
  color: var(--szoveg);
  background: var(--hatter);
}
a { color: var(--zold-szoveg); text-underline-offset: 3px; }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.halvany { color: var(--halvany); }

h1, h2 { font-family: var(--cim); font-weight: 900; line-height: 1.15; letter-spacing: 0; }
h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }

:focus-visible { outline: 2px solid var(--szoveg); outline-offset: 2px; }

/* Logó */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--szoveg); text-decoration: none; font-weight: 700; }
.logo b { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--zold); color: #fff; font-size: 1.6rem; line-height: 1; }
/* Beállítások → Logó és favicon: a jelenlegi kép előnézete a feltöltő mező fölött */
.arculat-mezo { display: grid; gap: 10px; align-content: start; }
.arculat-elonezet { display: flex; align-items: center; min-height: 64px; padding: 8px 12px; border: 1px solid var(--vonal); }
.arculat-elonezet > img { height: 48px; width: auto; max-width: 100%; }
.arculat-elonezet .favicon-elonezet { width: 32px; height: 32px; }
/* Rövid logószöveg (belső oldalsáv): név, alatta kisebben az alcím (pl. OMSZ / Intranet) */
.logo-szoveg { display: grid; line-height: 1.15; }
.logo .logo-szoveg small { display: block; margin: 0; font-size: .75rem; font-weight: 400; color: var(--halvany); letter-spacing: .04em; } /* erősebb, mint a menü .dash aside small felirata */
/* Feltöltött logó (Beállítások): legfeljebb 48 px magas, az arány megmarad */
.logo img { display: block; height: 48px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; }


/* Gombok: kiemelt (x-gomb zold, sötétkék) = fő művelet, keretes = minden más; sárga: hangsúlyos (nyilvános, oldalsáv) */
.gomb {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--szoveg); background: none; color: var(--szoveg);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.gomb:hover { background: var(--szoveg); color: var(--hatter); }
.gomb:active { transform: translateY(1px); }
.gomb.zold { background: var(--zold); border-color: var(--zold); color: #fff; }
.gomb.zold:hover { background: var(--zold-hover); border-color: var(--zold-hover); }
/* Szöveges gomb: kattintható adat (pl. „1 / 38 tag olvasta el” → névsor) */
.gomb.szoveg { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gomb.szoveg:hover { background: none; color: var(--zold-szoveg); }
/* Felhasználó által írt többsoros szöveg: a sortörések megmaradnak */
.tordelt { white-space: pre-line; }
/* TB napló: az időpont és a név egy sorban, az esemény tördelődik */
.naplo-tabla td:nth-child(-n+2) { white-space: nowrap; }
/* x-javaslo: saját javaslatlista a mező teljes szélességében (név, részlet, jobb oldalt megjegyzés) */
.javaslo { position: relative; }
.javaslo-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 12; margin: 2px 0 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; border: 1px solid var(--szoveg); background: var(--kartya); }
.javaslo-lista button { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--vonal); background: none; color: var(--szoveg); font: inherit; text-align: left; cursor: pointer; }
.javaslo-lista li:last-child button { border-bottom: 0; }
.javaslo-lista button:hover, .javaslo-lista button.aktiv { background: var(--vonal); }
.javaslo-jobb { white-space: nowrap; font-size: .85rem; }
.javaslo-leiras { grid-column: 1 / -1; font-size: .85rem; }
/* x-masolas: kis ikon egy adat mellett; másolás után 1,5 mp-ig pipa */
.masolas { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; margin-left: 2px; border: 1px solid transparent; background: none; color: var(--halvany); cursor: pointer; vertical-align: middle; }
.masolas:hover { color: var(--szoveg); border-color: var(--vonal); }
.masolas svg { width: 16px; height: 16px; }
.masolas svg + svg, .masolas[data-kimasolva] svg:first-child { display: none; }
.masolas[data-kimasolva] svg + svg { display: block; color: var(--zold-szoveg); }
/* Hiányzó adat helyén (pl. taglista: nincs megadva telefonszám): ugyanaz az ikon pirosan, nem másol, a buborék mondja meg, mi hiányzik */
.masolas.hianyzik { color: var(--piros); cursor: help; }
.masolas.hianyzik:hover { color: var(--piros); border-color: transparent; }
.gomb:disabled, .gomb:disabled:hover { border-style: dashed; border-color: var(--keret); background: none; color: var(--halvany); cursor: not-allowed; transform: none; }

/* Témaváltó: csak ikon (hold / nap), a felirat aria-label és title */
.tema-valto { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--szoveg); cursor: pointer; flex-shrink: 0; }
.tema-valto svg { width: 20px; height: 20px; }
.tema-valto:hover { background: var(--vonal); }

/* Panelek, rács */
.racs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kartya { background: var(--kartya); border: 1px solid var(--vonal); padding: 20px; }

/* Táblázat */
.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--kartya); border: 1px solid var(--vonal); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--vonal); vertical-align: middle; }
th { font-weight: 700; color: var(--halvany); border-bottom: 2px solid var(--szoveg); }
td .gomb { padding: 6px 12px; }
/* Műveletgombok egy táblázatsorban (Elfogad / Elutasít): egymás mellett */
.sor-muveletek { display: flex; flex-wrap: wrap; gap: 8px; }
td .belyeg + .belyeg { margin-top: 4px; }
tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
td.tordelheto { white-space: normal; }
/* Sok oszlopos lista (járművek): a cellák nem törnek, keskeny ablakban a táblázat görgethető */
.tabla.egysoros td { white-space: nowrap; }
/* Az egysoros táblában a kiegészítő sorok (rang alatti feladatkör, „vizsga kell”, „Még nem lépett be”) és a fejléc tördelhető,
   hogy ne ezek szabják meg az oszlop szélességét (a taglista különben kilóg) */
.tabla.egysoros th, .tabla.egysoros .sor-alatt, .tabla.egysoros td > .halvany { white-space: normal; }
.tabla.egysoros .sor-alatt { min-width: 7em; }
/* Szöveges oszlop (név, rang, osztály…) egysoros táblában: szűkebb helyen tördelődik, a dátum, szám, telefon egy sorban marad */
.tabla.egysoros td.tordelheto { white-space: normal; min-width: 10em; }
/* Taglista: sok oszlop, ezért szűkebb cellák, hogy 125%-os skálázású 1080p-n (1536px) se lógjon ki a két oldalsáv mellett */
/* Csak asztali nézetben: mobilon a kártyás táblázat bal belső margója adja az oszlopnév helyét (.dash td::before) */
@media (min-width: 761px) { .tabla.tagok-tabla th, .tabla.tagok-tabla td { padding: 10px 6px; } }
.tabla.tagok-tabla td.tordelheto { min-width: 7em; }
.tabla.tagok-tabla .sor-alatt { min-width: 0; }
/* Az osztály neve egy sorban (egyforma sormagasság), csak a legkeskenyebb gépen (1080p 150%) tördelődik */
@media (max-width: 1300px) { .tabla.tagok-tabla td.osztaly { white-space: normal; } }
/* x-feladatkorok soronkent: minden feladatkör külön sorban, egyenként nem tördelve (az oszlop a leghosszabbhoz igazodik) */
.feladatkorok-sorok > span { display: block; white-space: nowrap; }
/* Másodlagos adat a cella fő értéke alatt (pl. a rang alatt a feladatkörök) */
.sor-alatt { display: block; font-size: .85rem; }
td input, td select { width: 100%; min-width: 90px; }

/* Űrlap */
form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* Űrlapon belül a térközt a rács adja, a bekezdés saját margója nem duplázza */
form > p { margin: 0; }
/* Mező és alatta rövid magyarázat egy blokkban (pl. a frakció panel képe a TB-igénylésnél) */
.mezo-csoport { display: grid; gap: 6px; }
.mezo-csoport > p { margin: 0; font-size: .9rem; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select, textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--keret); border-radius: 0; background: var(--mezo); color: inherit; min-width: 0; max-width: 100%; }
input[type="file"] { overflow: hidden; }
input:focus, select:focus, textarea:focus { border-color: var(--szoveg); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--zold); width: 16px; height: 16px; padding: 0; margin: 0 8px 0 0; vertical-align: -2px; }
.ket-oszlop { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; max-width: 960px; }
/* align-items: start – ha az egyik oszlop magasabb (pl. mező alatti tájékoztató), a másik mezője ne nyúljon meg */
fieldset { display: grid; gap: 12px; border: 1px solid var(--vonal); padding: 14px 16px 16px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }
fieldset p.halvany { margin: 0; font-size: .9rem; }
label.jelolo { display: block; font-weight: 400; }
.hiba { color: var(--szoveg); font-weight: 700; font-size: .85rem; }
.hiba::before { content: "Hiba: "; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--szoveg); }
.kereso { margin-bottom: 12px; }

/* Visszajelzés egy művelet után (mentve, elküldve): vékony zöld keret */
.uzenet { margin: 0 0 24px; padding: 10px 14px; border: 1px solid var(--zold); background: var(--kartya); }
.uzenet.figy { border-color: var(--tinta); }

/* Címkék: zöld keret = rendben, fekete kitöltés = figyelmet kér */
.cimke { display: inline-block; padding: 1px 8px; border: 1px solid var(--zold-szoveg); color: var(--zold-szoveg); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.rang { display: inline-block; padding: 1px 8px; background: var(--rang-szin); color: #10213a; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.rang-0 { --rang-szin: var(--rang-0); } .rang-1 { --rang-szin: var(--rang-1); } .rang-2 { --rang-szin: var(--rang-2); } .rang-3 { --rang-szin: var(--rang-3); }
.rang-4 { --rang-szin: var(--rang-4); } .rang-5 { --rang-szin: var(--rang-5); } .rang-6 { --rang-szin: var(--rang-6); } .rang-7 { --rang-szin: var(--rang-7); }
.rang-8 { --rang-szin: var(--rang-8); } .rang-9 { --rang-szin: var(--rang-9); } .rang-10 { --rang-szin: var(--rang-10); } .rang-11 { --rang-szin: var(--rang-11); }
.rang-12 { --rang-szin: var(--rang-12); }
/* A sötét lila hátterű rangokon fehér a szöveg (olvashatóság) */
.rang-4, .rang-5, .rang-6, .rang-7 { color: #fff; }
.cimke.figy { border-color: var(--tinta); background: var(--tinta); color: var(--tinta-szoveg); }

dl { margin: 0; display: grid; gap: 2px; }
dt { color: var(--halvany); font-size: .9rem; }
dd { margin: 0 0 12px; font-weight: 700; }

/* Profilkép helye: <img class="avatar"> vagy monogram */
.avatar { display: grid; place-items: center; width: 64px; height: 64px; background: var(--vonal); color: var(--szoveg); font-weight: 700; object-fit: cover; flex-shrink: 0; }
.avatar.kicsi { width: 36px; height: 36px; font-size: .8rem; }

/* ---------- Fejléc (belépés oldal; a nyilvános oldal lent felülírja) ---------- */
.fejlec { position: sticky; top: 0; z-index: 10; background: var(--hatter); border-bottom: 1px solid var(--vonal); }
.fejlec .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 14px; }
.fejlec nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.fejlec .wrap { column-gap: 12px; }
.fejlec nav a { color: var(--szoveg); text-decoration: none; }
.fejlec nav a:hover { text-decoration: underline; }

/* ---------- Nyilvános oldalak (.nyilvanos) és a belépés oldal fejléce ----------
   Sötétkék fejléc sárga vonallal, sárga gomb, piros segélyhívó-doboz. A színek és a betűk az alaptokenekből jönnek (lásd :root). */
.nyilvanos :focus-visible { outline-color: var(--zold-szoveg); }
html:has(.nyilvanos) { scroll-padding-top: 24px; }

/* Felső sáv: hely | szervezet, jobbra TB igénylés és témaváltó */
.felso-sav { background: var(--kartya); border-bottom: 1px solid var(--vonal); font-size: .8rem; color: var(--halvany); }
.felso-sav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.felso-sav .tema-valto { color: var(--halvany); }

/* Fejléc: sötétkék, alul sárga vonal; logó nagybetűs névvel, alatta a szlogen */
.nyilvanos .fejlec { position: static; background: var(--kek); border-bottom: 5px solid var(--sarga); }
.nyilvanos .fejlec .wrap { padding-block: 12px; }
.nyilvanos .logo { color: #fff; }
.nyilvanos .logo b { width: 56px; height: 56px; background: #fff; color: var(--kek); font-size: 2.2rem; }
.nyilvanos .logo img { height: 64px; max-width: 200px; }
.nyilvanos .logo .logo-szoveg > span { text-transform: uppercase; font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; line-height: 1.05; max-width: 14ch; }
.nyilvanos .logo .logo-szoveg small { margin-top: 6px; color: #dbe4f0; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.nyilvanos .fejlec nav { gap: 26px; }
.nyilvanos .fejlec nav a { color: #fff; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nyilvanos .fejlec nav a:hover, .nyilvanos .fejlec nav a[aria-current] { text-decoration: none; border-bottom-color: var(--sarga); }
.nyilvanos .fejlec nav svg { width: 12px; height: 12px; }
.nyilvanos .fejlec :focus-visible { outline-color: #fff; }
.nyilvanos .fejlec .tema-valto { color: #fff; }
.nyilvanos .fejlec .tema-valto:hover { background: rgba(255, 255, 255, .12); }

/* Gombok: sárga = hangsúlyos (hero, jelentkezés), a többi a tokenekből */
.gomb.sarga { background: var(--sarga); border-color: var(--sarga); color: #10213a; }
.gomb.sarga:hover { background: var(--sarga-hover); border-color: var(--sarga-hover); color: #10213a; }
.gomb svg { width: 16px; height: 16px; vertical-align: -3px; margin-left: 4px; }

/* Hero: feltöltött háttérkép sötétítve (nélküle sötétkék), balra a címsor, jobbra a piros 112-es doboz */
.hero { position: relative; overflow: hidden; background: var(--kek-sotet); color: #fff; padding: 72px 0 80px; min-height: 460px; display: flex; align-items: center; }
.hero-kep { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 40, .82) 0%, rgba(8, 20, 40, .55) 55%, rgba(8, 20, 40, .35) 100%); }
.hero.kep-nelkul::after { display: none; }
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero-racs { display: grid; gap: 40px; grid-template-columns: 1fr minmax(240px, 280px); align-items: center; }
.hero h1 { margin: 0; font-size: clamp(2.1rem, 5.2vw, 4.1rem); line-height: 1.1; max-width: 16ch; color: #fff; }
.hero-szlogen { margin: 22px 0 28px; padding-top: 18px; position: relative; text-transform: uppercase; font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: .01em; }
.hero-szoveg { max-width: 62ch; margin: -10px 0 28px; line-height: 1.6; }
.hero-gombok { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .gomb.hero-masodik { background: transparent; border-color: #fff; color: #fff; }
.hero .gomb.hero-masodik:hover { background: #fff; color: var(--kek-sotet); }
.hero-szlogen::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 5px; background: var(--sarga); }
.segelyhivo { background: var(--segely); color: #fff; padding: 22px 20px; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.segelyhivo svg { width: 34px; height: 34px; }
.segelyhivo strong { display: block; font-size: 1.6rem; font-weight: 800; margin: 4px 0 8px; }
.segelyhivo p { margin: 0; font-size: .85rem; font-weight: 600; }

/* Főoldal: Aktualitások (kiemelt hír) + Hírfolyam két oszlopban */
.hirek { padding: 28px 0 56px; }
.hirek-racs { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; max-width: 1240px; }
.aktualitasok, .hirfolyam-doboz { background: var(--kartya); border: 1px solid var(--vonal); }
.sav-cim { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 20px; font: 800 1.05rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .02em; }
.aktualitasok .sav-cim { background: var(--kek); color: #fff; }
.aktualitasok .sav-cim::before { content: ""; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%; }
.hirfolyam-doboz .sav-cim { background: var(--hatter); color: var(--zold-szoveg); }
.aktualitasok > .halvany, .hirfolyam-doboz > .halvany { padding: 16px 20px; margin: 0; }

.hir-kiemelt { padding: 20px 26px 26px; }
.hir-kiemelt h3 { margin: 0 0 6px; font: 900 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--cim); text-transform: uppercase; }
.hir-kiemelt h3 a { color: var(--zold-szoveg); text-decoration: none; }
.hir-kiemelt h3 a:hover { text-decoration: underline; }
.hir-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--vonal); font-size: .78rem; color: var(--halvany); }
.hir-meta svg { width: 12px; height: 12px; }
.hir-torzs { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.hir-torzs.kep-nelkul { grid-template-columns: 1fr; }
.hir-torzs img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hir-torzs p { margin: 0; font: 1rem/1.75 var(--cim); color: var(--halvany); }
.hir-tovabb { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: .85rem; color: var(--zold-szoveg); text-decoration: none; }
.hir-tovabb:hover { text-decoration: underline; }
.hir-tovabb svg { width: 14px; height: 14px; }
.hirfolyam-doboz > .hir-tovabb { margin: 12px 20px 16px; }

.hirfolyam { list-style: none; margin: 0; padding: 0; }
.hir-sor a { display: grid; gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--vonal); color: var(--zold-szoveg); text-decoration: none; }
.hir-sor a:hover b { text-decoration: underline; }
.hir-sor b { font-size: .9rem; }
.hir-sor span { font-size: .72rem; color: var(--halvany); }
/* x-fulek: fülek egy oldal részei között (pl. Nyilvános oldal kezelése) */
.fulek { display: flex; flex-wrap: wrap; margin: 0 0 20px; border-bottom: 2px solid var(--szoveg); }
.fulek a { padding: 10px 16px; color: var(--szoveg); text-decoration: none; font-weight: 700; }
.fulek a:hover { background: var(--vonal); }
.fulek a[aria-current] { background: var(--szoveg); color: var(--hatter); }
/* Oldalrészek listája (kezelés): a rejtett rész halványan; a mozgató nyilak kicsik */
.rejtett-sor td { color: var(--halvany); }
.rejtett-sor td b { text-decoration: line-through; }
.reszek-tabla td .gomb:disabled { opacity: .35; cursor: default; }
.reszek-tabla td:first-child .gomb { padding: 4px 10px; }
/* Hírek és oldalrészek: a sor gombjai egy sorban, a szöveges oszlop törik */
:is(.reszek-tabla, .hirek-tabla) td:last-child .sor-muveletek { flex-wrap: nowrap; justify-content: flex-end; }
:is(.reszek-tabla, .hirek-tabla) td:last-child .sor-muveletek > * { flex-shrink: 0; }
.reszek-tabla td:first-child .sor-muveletek { flex-wrap: nowrap; gap: 4px; }
/* Ellátási árak: az ellátás neve ne vágódjon le */
.arak-kartya td:first-child input { min-width: 16em; }
/* Hír szerkesztése: a jelenlegi kép előnézete; a Kezelés részének fejléce (cím + gomb) */
.hir-kep-elonezet { display: block; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--vonal); }
/* Nyilvános oldal → Főoldal: a fül teteje (leírás + Főoldal megnyitása), a címsor háttérképei egymás mellett, alattuk a Törlés */
.kezeles-fej { margin-bottom: 16px; }
.kezeles-fej p { margin: 0; flex: 1 1 18em; }
.kezeles-fej + .kartya + :is(.csukhatok, .kartya) { margin-top: 20px; }
.hero-kepek { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hero-kepek li { display: grid; gap: 8px; justify-items: start; }
.hero-kepek img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--vonal); }
.resz-fej { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.resz-fej h3 { margin: 0; }

/* Aloldalak (Rólunk, Szolgáltatások, TB igénylés, Hírek, hibaoldal) */
.nyilvanos main section { padding: 56px 0; border-bottom: 1px solid var(--vonal); }
.nyilvanos main.hirek, .nyilvanos main.hirek section { padding-block: 0; border: 0; }
.nyilvanos main.hirek { padding: 28px 0 56px; }
.nyilvanos main h2 { color: var(--zold-szoveg); }
.bevezeto { max-width: 70ch; margin: 0; font: 1.05rem/1.8 var(--cim); }
.alcim { margin: -12px 0 28px; color: var(--halvany); max-width: 62ch; }
/* Karbantartás mód jelzése a rendszergazdának (x-karbantartas-sav): sárga sáv a tartalom tetején */
.karbantartas-sav { margin: 0 0 20px; padding: 10px 14px; background: var(--sarga); color: #16202c; border-left: 6px solid #16202c; }
.karbantartas-sav a { color: inherit; font-weight: 700; }
.nyilvanos .karbantartas-sav { margin: 16px auto 0; }
/* Hibaoldal (404, 503 karbantartás …, errors/hiba): nagy hibakód, alatta sárga vonal, cím, szöveg, gombok */
.nyilvanos main section.hiba-oldal { padding: 72px 0 96px; border: 0; }
.hiba-oldal p { max-width: 62ch; }
/* A karbantartás oldalon a belépett tagnak a kalkulátor és a TB lista (errors/karbantartas-tagoknak): az üzenet alatt egy vonallal
   elválasztva, cím, egy mondat, alatta egy dobozban a két eszköz (x-lenyilok) */
.karbantartas-fiok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.karbantartas-fiok p { margin: 0; }
.karbantartas-fiok .gombok { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.karbantartas-tagoknak { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--vonal); }
.karbantartas-tagoknak > h3 { margin: 0 0 6px; font-size: 1.25rem; }
.karbantartas-tagoknak > p { margin: 0 0 20px; }
.karbantartas-tagoknak .lenyilok-resz > p { margin: 12px 0 8px; }
.karbantartas-tagoknak .lenyilok-resz { margin-top: 20px; }
.karbantartas-tagoknak .kalkulator { display: grid; gap: 16px; }
.hiba-kod { margin: 0 0 24px; font: 900 clamp(4rem, 14vw, 7.5rem)/1 var(--cim); color: var(--zold-szoveg); }
.hiba-kod::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 20px; background: var(--sarga); }
.hiba-oldal .gombok { margin-top: 28px; }
/* x-oldal-resz: szerkeszthető rész (Rólunk, Szolgáltatások): balra a szöveg, jobbra a kép */
.oldal-resz-racs { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.oldal-resz.kep-nelkul .oldal-resz-racs { grid-template-columns: minmax(0, 1fr); }
.oldal-resz p { max-width: 70ch; margin: 0 0 16px; font: 1rem/1.8 var(--cim); }
.oldal-resz .gomb { margin-top: 8px; }
.oldal-resz img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.oldal-resz:nth-of-type(even) { background: var(--kartya); }
.oldal-resz.kep-balra .oldal-resz-racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.oldal-resz.kep-balra .oldal-resz-racs > img { order: -1; }
/* Bevezető rész: az oldal címe nagyobb, a szöveg nagyobb betűvel */
.bevezeto-resz h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
.bevezeto-resz p { font-size: 1.08rem; }
/* Több kiemelt hír egymás alatt az Aktualitásokban */
.hir-kiemelt + .hir-kiemelt { border-top: 4px solid var(--hatter); }

.tenyek { border-bottom: 1px solid var(--vonal); background: var(--kartya); padding: 8px 0; }
.tenyek .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.tenyek .wrap > div { padding: 18px 20px; border-left: 1px solid var(--vonal); }
.tenyek .wrap > div:first-child { border-left: 0; }
.tenyek b { display: block; color: var(--zold-szoveg); }
.tenyek span { color: var(--halvany); font-size: .9rem; }

.arak { display: grid; column-gap: 48px; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--vonal); }
.ar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid var(--vonal); }
.ar b { white-space: nowrap; }
.ingyenes { margin: 24px 0 0; max-width: 75ch; }
.ingyenes b { color: var(--zold-szoveg); }
.tb-dijak { margin: 0 0 24px; max-width: 720px; }

.vezetok { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--vonal); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 32px 24px; }
/* Vezetőség vízszintesen: egymás mellett, kép felül, alatta név és beosztás; ami nem fér ki, új sorba kerül */
.vezetok li { display: grid; gap: 12px; align-content: start; }
.vezetok .avatar { width: 96px; height: 96px; font-size: 1.5rem; }
.vezetok h3 { margin: 0; font-size: 1.1rem; }
.vezetok p { margin: 0; color: var(--halvany); }

.osszesito { padding: 12px 16px; background: var(--hatter); border: 1px solid var(--vonal); }
.osszesito div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.osszesito .vegosszeg { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--vonal); font-weight: 700; color: var(--zold-szoveg); }

.nyilvanos main section.toborzas { background: var(--kek); color: #fff; border: 0; }
.nyilvanos .toborzas h2 { margin-bottom: 16px; color: #fff; }
.toborzas p { max-width: 60ch; margin: 0 0 16px; }
.toborzas .halvany { color: #dbe4f0; }
.toborzas .gomb { margin-top: 8px; }
.toborzas :focus-visible { outline-color: #fff; }

/* Lábléc: sötétkék, felül sárga vonal */
footer { background: var(--kek-sotet); color: #c9d4e3; font-size: .9rem; }
.nyilvanos footer { border-top: 5px solid var(--sarga); }
footer .logo { color: #fff; }
.lablec { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; padding-block: 40px 24px; }
.lablec p { margin: 12px 0 0; max-width: 40ch; }
.lablec > div > b { color: #fff; display: block; margin-bottom: 8px; }
.lablec a:not(.logo) { color: #c9d4e3; display: block; text-decoration: none; padding: 2px 0; }
.lablec a:not(.logo):hover { color: #fff; text-decoration: underline; }
.lablec .hivo { font-size: 2rem; font-weight: 800; color: var(--sarga); }
.lablec-also { display: flex; flex-wrap: wrap; gap: 4px 24px; border-top: 1px solid rgba(255, 255, 255, .15); padding: 14px 0 16px; font-size: .8rem; color: #9fb0c6; }
.lablec-also nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lablec-also a { color: #c9d4e3; text-decoration: none; }
.lablec-also a:hover { color: #fff; text-decoration: underline; }

/* Adatkezelési tájékoztató, Felhasználási feltételek: sötétkék fejléc a címmel, alatta részenként cím + olvasható szélességű szöveg (x-jogi-resz) */
.nyilvanos main section.jogi-fej { padding: 48px 0 40px; background: var(--kek); color: #fff; border-bottom: 4px solid var(--sarga); }
.jogi-fej h1 { margin: 0 0 10px; font-size: clamp(2rem, 4.6vw, 3rem); }
.jogi-fej p { margin: 0; color: #dbe4f0; }
.nyilvanos main section.jogi-resz { padding: 32px 0; }
.nyilvanos main section.jogi-resz:last-child { border-bottom: 0; padding-bottom: 56px; }
.jogi-resz h2 { margin: 0 0 14px; font-size: 1.5rem; }
.jogi-resz p, .jogi-resz li { max-width: 75ch; line-height: 1.75; }
.jogi-resz p { margin: 0 0 12px; }
.jogi-resz ul { margin: 0 0 12px; padding-left: 20px; }
.jogi-resz li + li { margin-top: 8px; }
.jogi-resz li::marker { color: var(--zold-szoveg); }

/* Sütikről szóló sáv (x-suti-sav): alul rögzítve, sötétkék, felül sárga vonal; „Rendben” után eltűnik */
.suti-sav { position: fixed; inset: auto 0 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 14px max(16px, calc((100vw - 1120px) / 2 + 16px)); background: var(--kek-sotet); color: #dbe4f0; border-top: 4px solid var(--sarga); font-size: .92rem; }
.suti-sav[hidden] { display: none; }
.suti-sav p { margin: 0; max-width: 80ch; }
.suti-sav a { color: #fff; font-weight: 700; }
.suti-sav.minta { position: static; padding: 14px 16px; }
footer :focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
  .hirek-racs { grid-template-columns: 1fr; }
  .nyilvanos .fejlec nav { gap: 18px; }
}
@media (max-width: 760px) {
  .hero-racs, .lablec, .arak, .hir-torzs, .oldal-resz-racs { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding: 48px 0; }
  .segelyhivo { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; }
  .segelyhivo strong { margin: 0; }
  .tenyek .wrap { grid-template-columns: 1fr 1fr; }
  .tenyek .wrap > div { border-left: 0; }
  .hir-kiemelt { padding: 16px; }
  /* Mobilon: a fejléc a képernyő tetején marad (görgetés után is elérhető), jobbra a hamburger gomb;
     a menü lenyílik alatta, függőlegesen (omsz.js data-menu-gomb) */
  .nyilvanos .fejlec { position: sticky; top: 0; z-index: 30; }
  .nyilvanos .fejlec .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; }
  .fejlec .logo { line-height: 1.25; }
  .nyilvanos .logo img { height: 48px; }
  .nyilvanos .fejlec nav { display: none; }
  .nyilvanos .fejlec nav.nyitva { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - 100%); overflow-y: auto; margin-top: 5px; padding: 4px 16px 12px; background: var(--kek); border-bottom: 5px solid var(--sarga); }
  .nyilvanos .fejlec nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .nyilvanos .fejlec nav a:last-child { border-bottom: 0; }
  .nyilvanos .fejlec nav a[aria-current] { color: var(--sarga); border-bottom-color: rgba(255, 255, 255, .15); }
  .nyilvanos .logo b { width: 44px; height: 44px; font-size: 1.7rem; }
  .vezetok { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 16px; }
  .vezetok .avatar { width: 72px; height: 72px; }
}

/* ---------- Belépés ---------- */
.belepes { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--oldalsav); }
/* Kétrészes kártya: balra az űrlap, jobbra kép a logóval; alul sárga vonal, mint a fejlécek alatt */
/* Kerekítés csak itt (a felhasználó engedélye a belépés oldalra); az oldal többi része éles sarkú */
.belepes-kartya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(960px, 100%); min-height: 520px; overflow: hidden; border-radius: 16px; background: var(--kartya); border-bottom: 5px solid var(--sarga); }
.belepes-urlap :is(input, .gomb) { border-radius: 8px; }
.belepes-urlap .tema-valto { border-radius: 8px; }
.belepes-urlap { position: relative; display: grid; align-content: center; padding: 56px clamp(24px, 5vw, 56px); }
.belepes-urlap .tema-valto { position: absolute; top: 12px; right: 12px; }
.belepes-urlap .gomb { width: 100%; }
.belepes h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 8px; }
.belepes-urlap > p { margin: 0 0 28px; }
.belepes-urlap .uzenet { border-radius: 8px; }
.belepes-urlap > .uzenet + p { margin-top: -12px; }
.belepes-fiokok { display: grid; gap: 12px; }
.belepes-urlap .belepes-lab { margin: 24px 0 0; }
.belepes-kep { position: relative; overflow: hidden; background: var(--kek); }
.belepes-kep > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sötétkék fátyol a képen, hogy a logó és a név olvasható legyen */
.belepes-kep::after { content: ""; position: absolute; inset: 0; background: rgba(8, 42, 84, .45); }
.belepes-kep .logo { position: absolute; left: 24px; bottom: 24px; z-index: 1; color: #fff; }
.belepes-kep .logo b { background: #fff; color: var(--kek); }
.belepes-kep .logo img { height: 56px; width: auto; }
@media (max-width: 760px) {
  .belepes { padding: 0; place-items: stretch; }
  .belepes-kartya { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; border-radius: 0; }
  .belepes-kep { order: -1; min-height: 180px; }
  .belepes-urlap { align-content: start; padding: 32px 16px; }
}

/* ---------- Belső hálózat: oldalsáv + tartalom (+ opcionális jobb sáv) ---------- */
/* Az oldalsávok a képernyővel arányosan keskenyednek (1080p 125%-os skálázásnál is maradjon hely a táblázatoknak) */
.dash { --fejsav: 64px; --bal-sav: clamp(220px, 16vw, 250px); --jobb-sav: clamp(240px, 15vw, 270px); display: grid; grid-template-columns: var(--bal-sav) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh; }
/* :where, hogy a keskeny képernyős szabályok (lent) felülírhassák */
.dash:where(:has(> .jobb-sav)) { grid-template-columns: var(--bal-sav) minmax(0, 1fr) var(--jobb-sav); }
.dash aside { display: flex; flex-direction: column; position: sticky; top: var(--fejsav); height: calc(100dvh - var(--fejsav)); overflow-y: auto; background: var(--oldalsav); color: #fff; padding: 12px 14px 20px; }
.dash aside nav { display: grid; gap: 2px; }
.dash aside nav :is(a, button) { padding: 8px 12px; border-left: 3px solid transparent; color: #e6ecf4; text-decoration: none; display: flex; justify-content: space-between; gap: 8px; }
.dash aside nav form { display: block; }
.dash aside nav button { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.dash aside nav :is(a, button):hover { background: rgba(255, 255, 255, .08); }
.dash aside nav a[aria-current="page"] { border-left-color: var(--sarga); font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); }
/* Almenü (Osztályok alatt a tag osztályai, 2026-11-10): beljebb, kisebb betűvel; az aktív sárga szegéllyel, mint a menüpont */
.dash aside nav details.almenu { display: grid; gap: 2px; }
.dash aside nav details.almenu > summary { list-style: none; padding: 8px 12px; border-left: 3px solid transparent; color: #e6ecf4; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; }
.dash aside nav details.almenu > summary:hover { background: rgba(255, 255, 255, .08); }
.dash aside nav details.almenu > summary[data-aktiv] { font-weight: 700; color: #fff; }
.dash aside nav details.almenu > summary[data-aktiv] .menu-ikon { color: var(--sarga); opacity: 1; }
.dash aside nav .almenu-nyil { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; transition: transform .15s; }
.dash aside nav details.almenu[open] .almenu-nyil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .dash aside nav .almenu-nyil { transition: none; } }
.dash aside nav a.almenupont { padding: 5px 12px 5px 42px; font-size: .9rem; color: #c9d4e3; }
.dash aside nav a.almenupont[aria-current="page"] { color: #fff; }
.dash aside small { margin: 16px 12px 4px; color: #a9b8cc; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dash aside :focus-visible { outline-color: #fff; }
/* Felső sáv (belső): sötétkék, alatta sárga vonal (mint a nyilvános fejléc). Balra a logó, jobbra a csengő, a témaváltó és a profil. */
.fejsav { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--fejsav); padding: 0 16px 0 14px; background: var(--oldalsav); color: #fff; border-bottom: 3px solid var(--sarga); }
.fejsav-jobb { display: flex; align-items: center; gap: 4px; }
.fejsav-bal { display: flex; align-items: center; min-width: 0; }
/* Menü gomb: csak mobilon látszik (lent, @media); csak a hamburger ikon (a felirat aria-label) */
.menu-gomb { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.menu-gomb svg { width: 22px; height: 22px; }
.menu-gomb[aria-expanded="true"] { border-color: var(--sarga); background: rgba(255, 255, 255, .12); }
.fejsav :focus-visible { outline-color: #fff; }
/* A sötétkék sávok elemei: logó fehér jelvénnyel, témaváltó, számjelző sárgán */
.fejsav .logo { color: #fff; }
.fejsav .logo b { background: #fff; color: var(--kek); }
.fejsav .logo .logo-szoveg small { color: #c9d4e3; }
.fejsav .tema-valto { color: #fff; }
.fejsav .tema-valto:hover { background: rgba(255, 255, 255, .12); }
:is(.fejsav, .dash aside) .szam { background: var(--sarga); color: #10213a; }
/* Profil a felső sáv jobb szélén: kép, név, alatta a rang */
.belepve { display: flex; align-items: center; gap: 10px; margin-left: 8px; padding: 6px 10px 6px 6px; border: 1px solid rgba(255, 255, 255, .22); background: none; color: #fff; font: inherit; text-align: left; text-decoration: none; line-height: 1.3; cursor: pointer; }
.belepve:hover, .belepve[aria-expanded="true"] { border-color: #fff; }
.belepve > div:not(.avatar) { display: grid; }
.belepve span { color: #c9d4e3; font-size: .8rem; }
.belepve .avatar { background: rgba(255, 255, 255, .16); color: #fff; }
.belepve .avatar.kicsi { width: 36px; height: 36px; }

/* Csengő (Livewire Ertesitesek): az olvasatlan értesítések száma, kattintásra lenyíló lista (legutóbbi 5) */
.csengo { position: relative; }
.csengo-gomb { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.csengo-gomb:hover, .csengo-gomb[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.csengo-gomb svg { width: 22px; height: 22px; }
.csengo-gomb .szam { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 0 5px; line-height: 18px; font-size: .72rem; text-align: center; }
.csengo-panel { width: min(400px, calc(100vw - 32px)); padding: 16px; }
/* A felső sáv lenyílói (csengő, profil): a gomb alatt jobbra igazítva, sárga felső vonallal */
.csengo-panel, .fejsav-panel { position: absolute; top: calc(100% + 12px); right: 0; border: 1px solid var(--vonal); border-top: 3px solid var(--sarga); background: var(--kartya); color: var(--szoveg); }
/* Profil menü: Profil, Profil beállítások, Kilépés – ikon + felirat soronként */
.profil-menu { position: relative; }
.profil-panel { min-width: 220px; margin: 0; padding: 6px 0; list-style: none; }
.profil-panel form { display: block; }
.profil-panel :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: 0; background: none; color: var(--szoveg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.profil-panel :is(a, button):hover { background: var(--hatter); }
.profil-panel svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--halvany); }
.profil-panel li:last-child { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vonal); }
.fejsav .fejsav-panel :focus-visible { outline-color: var(--szoveg); }
.csengo-panel h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--vonal); } /* elválasztó vonal a lista fölött */
.csengo-panel > .halvany { margin: 12px 0 0; }
/* Alul: „Összes értesítés (N)” balra, „Mindet elolvastam” jobbra */
.csengo-lab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--vonal); } /* elválasztó vonal a lista alatt */
.csengo-lab .gomb:last-child { margin-left: auto; }
/* x-ertesites-sor: szöveg + időpont, jobbra az Olvastam ikon. A sorok felváltva árnyaltak (olvashatóság). */
.ertesites-lista { list-style: none; margin: 0 -16px; padding: 0; }
.ertesites-sor { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.ertesites-sor:nth-child(even) { background: var(--hatter); }
.ertesites-sor p { margin: 0; }
.ertesites-sor small { display: block; color: var(--halvany); font-size: .8rem; }
.olvas-gomb { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 1px solid transparent; background: none; color: var(--halvany); cursor: pointer; }
.olvas-gomb:hover { border-color: var(--keret); color: var(--zold-szoveg); }
.olvas-gomb svg { width: 20px; height: 20px; }
.ablak .ertesites-lista { margin: 8px -18px 0; }
.ablak .ertesites-sor { padding-inline: 18px; }
.kartya > .ertesites-lista { margin: -20px; }
.kartya > .ertesites-lista .ertesites-sor { padding-inline: 20px; }
/* x-ertesites-ablak: belépéskor felugró figyelmeztetés; sárga felső vonallal, a sorok bal szegélye piros (figyelmeztetés) */
.ertesites-ablak { border-top: 4px solid var(--sarga); }
.ertesites-ablak .ertesites-sor { border-left: 3px solid var(--piros); }
.ertesites-ablak .ertesites-lista { margin-bottom: 12px; }
/* Szövegként látszó gomb (pl. x-tiszti-okok: „Mire kapta?”), felugró ablakot nyit */
.link-gomb { display: inline; padding: 0; border: 0; background: none; color: var(--zold-szoveg); font: inherit; font-size: .9em; text-decoration: underline; cursor: pointer; }
.link-gomb:hover { text-decoration-thickness: 2px; }
.szam { background: var(--tinta); color: var(--tinta-szoveg); padding: 0 7px; font-size: .8rem; font-weight: 700; }
.dash main { padding: 32px clamp(16px, 4vw, 40px); min-width: 0; }
/* Széles képernyőn a tartalom kitölti a középső sávot; a folyó szöveg és az űrlapok olvasható szélességűek maradnak */
.dash main > p:not(.uzenet), .dash .resz > p { max-width: 75ch; }
/* Egy belső oldalon belüli részek (cím + tartalom) egymás alatt */
.resz + .resz { margin-top: 32px; }
.nagy { font-size: 1.8rem; font-weight: 700; margin: 0; color: var(--zold-szoveg); }
.racs .kartya > p.halvany:first-child { margin-top: 0; }
details.kartya { margin-bottom: 16px; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { margin-bottom: 16px; }
/* Kinyitható űrlap széles képernyőn se nyúljon végig: olvasható szélesség */
details.kartya > form { max-width: 960px; }
/* Több lenyíló egy dobozban (x-lenyilok, pl. TB: Új TB felvétele | Rendezvény felvétele): a gombok egy sorban, alattuk a nyitott rész */
.lenyilok { margin-bottom: 16px; }
.lenyilok-gombok { display: flex; flex-wrap: wrap; gap: 10px; }
.lenyilok-resz { margin-top: 16px; }
.lenyilok-resz > form { max-width: 960px; }

@media (max-width: 760px) {
  /* Egy oszlop: felső sáv, menü (csukva üres), tartalom, jobb sáv; a maradék magasság a tartalomé, ne a menüé */
  .dash { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding-bottom: 76px; }
  /* Mobilon a menü csukva, a felső sáv „Menü” gombjával nyílik le függőlegesen, csoportcímekkel (mint gépen) */
  .dash aside { position: static; height: auto; overflow: visible; border-bottom: 4px solid var(--sarga); }
  .dash aside:not(.nyitva) { padding: 0; border-bottom: 0; }
  .dash aside:not(.nyitva) nav { display: none; }
  /* Nyitva a rögzített felső sáv alatt, a képernyőn (nem a lap tetején): görgetés után sem kell visszatekerni */
  .dash aside.nyitva { position: fixed; top: var(--fejsav); bottom: 0; left: 0; right: 0; z-index: 14; overflow-y: auto; padding-bottom: 96px; border-bottom: 0; }
  .fejsav-bal { gap: 8px; }
  .menu-gomb { display: inline-flex; }
  .fejsav { padding: 0 8px 0 12px; }
  .belepve { margin-left: 4px; padding: 4px; border: 0; }
  .belepve > div:not(.avatar) { display: none; }
  /* A lenyíló lista a képernyő teljes szélességében, a felső sáv alatt */
  .csengo-panel { position: fixed; top: var(--fejsav); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--fejsav) - 90px); overflow-y: auto; }

  /* Táblázatok kártyaként: soronként egy blokk, bal oldalon az oszlop neve */
  .dash .tabla { overflow: visible; }
  .dash table, .dash tbody, .dash tr, .dash td { display: block; }
  .dash thead { display: none; }
  .dash table { border: 0; background: none; }
  .dash tr { background: var(--kartya); border: 1px solid var(--vonal); padding: 6px 14px; margin-bottom: 8px; }
  .dash td { display: flow-root; padding: 6px 0 6px 10.5em; border-bottom: 1px solid var(--vonal); white-space: normal; }
  .dash td:first-child { white-space: normal; }
  .dash tbody tr:last-child td { border-bottom: 1px solid var(--vonal); }
  .dash tr td:last-child { border-bottom: 0; }
  .dash td::before { content: attr(data-oszlop); float: left; margin-left: -10.5em; width: 9.5em; color: var(--halvany); font-size: .85rem; line-height: 1.4; }
  .dash td:not([data-oszlop]) { padding-left: 0; }
  .dash td:not([data-oszlop])::before { display: none; }
  .dash td:empty { display: none; }
  .dash .tabla.egysoros td { white-space: normal; }
}

/* Gyors gombok: minden oldalon a cím alatt */
/* Az oldal címe, a gyors gombok és a tartalom között elválasztó vonal */
.dash main > h2 { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--vonal); }
.gyors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--vonal); }
.gyors-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.gyors-gombok .gomb { padding: 6px 12px; font-size: .85rem; }
.gyors-gombok p { margin: 0; font-size: .85rem; }
.gyors-szerk { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; background: none; color: var(--halvany); cursor: pointer; }
.gyors-szerk svg { width: 18px; height: 18px; }
.gyors-szerk:hover { color: var(--szoveg); border-color: var(--keret); }
.gyors-szerk[aria-expanded="true"] { background: var(--zold); border-color: var(--zold); color: #fff; }
.gyors-valaszto { flex-basis: 100%; padding: 12px 14px; background: var(--kartya); border: 1px solid var(--vonal); }
.gyors-valaszto > p { margin: 0 0 8px; font-size: .9rem; }
.gyors-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.csillag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; background: none; color: var(--szoveg); font: inherit; text-align: left; cursor: pointer; }
.csillag:hover { background: var(--hatter); }
.csillag svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--halvany); }
.csillag[aria-pressed="true"] svg { color: var(--zold-szoveg); }
.csillag[aria-pressed="true"] span { font-weight: 700; }

/* Áttekintés: elbírálásra váró tételek kategóriánként (vezetőség) */
.elbiralas { margin-top: 24px; }
.elbiralas-lista { list-style: none; margin: 0 -20px -12px; padding: 0; }
.elbiralas-lista li + li { border-top: 1px solid var(--vonal); }
.elbiralas-lista a { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--szoveg); text-decoration: none; }
.elbiralas-lista a:hover { background: var(--hatter); }
.elbiralas-lista a span:first-child { flex: 1; font-weight: 700; }
.elbiralas-lista svg { width: 16px; height: 16px; color: var(--halvany); }
/* Áttekintés: balra a heti aktivitás (x-aktivitas), jobbra az igénylések (x-igenylesek); alattuk az elbírálandók és a közlemények */
.attekintes-racs { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1300px) { .attekintes-racs { grid-template-columns: minmax(0, 1fr); } }
/* Köszöntés az Áttekintés tetején: a név címbetűvel, mellette a mondat halványan */
.koszontes { margin: 0 0 24px; color: var(--halvany); }
.koszontes b { display: block; font-family: var(--cim); font-size: 1.3rem; font-weight: 700; color: var(--szoveg); }
/* A kártyák címe alatt elválasztó vonal (Áttekintés, jobb sáv) */
.aktivitas-fej { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--vonal); }
.aktivitas-fej h3 { margin: 0; }
.aktivitas-fej small { display: block; font-size: .8rem; }
:is(.igenylesek, .kozlemeny-lista, .jobb-sav) h3, .egysegek > h3, .elbiralas > h3 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--vonal); }
/* Nézetváltó ikonok (szolgálati idő / jelentések): a kiválasztott kitöltve */
.nezet-valto { display: flex; border: 1px solid var(--vonal); }
.nezet-valto button { display: grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 0; background: none; color: var(--halvany); cursor: pointer; }
.nezet-valto button + button { border-left: 1px solid var(--vonal); }
.nezet-valto button:hover { color: var(--szoveg); background: var(--hatter); }
.nezet-valto button[aria-pressed="true"] { background: var(--zold); color: #fff; }
.nezet-valto svg { width: 18px; height: 18px; }
.aktivitas-osszes { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--vonal); }
/* x-oszlop-diagram: napi oszlopok; fölöttük az érték, alattuk a nap; a mai nap kiemelt */
.oszlop-diagram { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 12px; }
.oszlop { display: grid; justify-items: center; text-align: center; font-size: .8rem; line-height: 1.3; }
.oszlop svg { display: block; width: 100%; height: 80px; border-bottom: 1px solid var(--keret); }
.oszlop rect { fill: var(--zold); }
.oszlop:hover rect { fill: var(--zold-hover); }
/* Az érték két sorban (szám, alatta a mértékegység), mindig azonos magasságban, hogy az oszlopok alja egy vonalban maradjon */
.oszlop-ertek { display: grid; align-content: end; min-height: 2.6em; color: var(--halvany); font-size: .75rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.oszlop-ertek small { font-size: .68rem; }
.oszlop-nap { margin-top: 6px; font-weight: 700; }
.oszlop small { color: var(--halvany); font-size: .7rem; }
.oszlop.ma .oszlop-nap { color: var(--zold-szoveg); text-decoration: underline; text-underline-offset: 3px; }
/* x-igenylesek: soronként típus + leírás, jobbra az állapot */
.igenyles-lista { list-style: none; margin: 0; padding: 0; }
.igenyles-lista li + li { border-top: 1px solid var(--vonal); }
.igenyles-lista a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; color: var(--szoveg); text-decoration: none; }
.igenyles-lista b { color: var(--zold-szoveg); text-decoration: underline; text-underline-offset: 3px; }
.igenyles-lista a:hover b { text-decoration-thickness: 2px; }
.igenyles-lista small { display: block; color: var(--halvany); font-size: .85rem; }
/* x-kozlemeny-lista: a legutóbbi közlemények, alul link az összeshez */
.kozlemeny-lista { margin-top: 24px; }
.kozlemeny-lista ul { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.kozlemeny-lista li { padding: 14px 0; }
.kozlemeny-lista li + li { border-top: 1px solid var(--vonal); }
.kozlemeny-lista p { margin: 0; max-width: 75ch; }
.kozlemeny-lista-fej { font-weight: 700; }
.kozlemeny-lista-meta { margin: 2px 0 6px !important; font-size: .85rem; }
.kozlemeny-lista-tobb { display: flex; align-items: center; gap: 4px; padding-top: 12px; border-top: 1px solid var(--vonal); font-weight: 700; }
.kozlemeny-lista-tobb svg { width: 14px; height: 14px; }

/* Áttekintés → Egységek (Livewire/Egysegek, x-egyseg): az egységek vízszintesen egymás mellett, egy egység = jármű + legfeljebb 3 tag */
.egysegek { margin-top: 24px; }
.egyseg-uj { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 12px 0 0; }
.egyseg-uj label { flex: 1 1 260px; max-width: 420px; }
.egysegek > p.halvany { margin: 12px 0 0; }
.egysegek .uzenet { margin: 12px 0 0; }
.egyseg-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); align-items: start; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.egyseg { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--vonal); border-top: 3px solid var(--zold); background: var(--kartya); }
.egyseg.tele { border-top-color: var(--sarga); }
/* Fejléc egy sorban: szám | jármű | létszám */
.egyseg-fej { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--vonal); }
.egyseg-fej p { margin: 0; }
.egyseg-felirat { display: block; color: var(--halvany); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.egyseg-szam b { display: block; font-family: var(--cim); font-weight: 900; font-size: 1.45rem; line-height: 1.05; color: var(--zold-szoveg); }
.egyseg-jarmu { min-width: 0; font-size: .85rem; line-height: 1.3; }
.egyseg-jarmu span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egyseg-jarmu span:first-child { font-weight: 700; }
.egyseg-tagok-cim { margin: 0; padding: 6px 10px 2px; }
/* Tagok: soronként kis kép, név, mellette a rang */
.egyseg-tagok { flex: 1; list-style: none; margin: 0; padding: 0 0 4px; }
.egyseg-tagok a { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px; color: inherit; text-decoration: none; }
.egyseg-tagok a:hover { background: var(--hatter); }
.egyseg-tagok a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.egyseg-tagok .avatar.kicsi { width: 30px; height: 30px; font-size: .7rem; }
.egyseg-tagok a > span { min-width: 0; line-height: 1.2; }
.egyseg-tagok b { font-size: .88rem; overflow-wrap: anywhere; }
.egyseg-tagok small { display: block; }
.egyseg-tagok .rang { margin-top: 2px; padding: 0 5px; font-size: .7rem; }
.egyseg-tagok .cimke { font-size: .68rem; padding: 0 4px; }
.egyseg-gombok { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 6px 10px 8px; border-top: 1px solid var(--vonal); }
.egyseg-gombok .gomb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; font-size: .82rem; white-space: nowrap; }
.egyseg-gombok .gomb svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Járművek listája: kettőnél több beosztott → ember ikon a létszámmal, rámutatva a nevek */
.beosztott-szam { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--keret); font-size: .85rem; font-weight: 700; cursor: help; }
.beosztott-szam svg { width: 14px; height: 14px; }
/* Jármű beosztottjai (x-beosztott-valaszto): lista szereppel és levétellel, alatta a kereső */
.beosztottak, .jarmu-specializaciok { margin-top: 16px; display: grid; gap: 12px; }
.jarmu-specializaciok > p, .beosztott-mind { margin: 0; }
.jarmu-mindenkinek { margin-top: 16px; }
.beosztottak-egyenkent { display: grid; gap: 12px; }
.beosztottak > p { margin: 0; }
.beosztott-lista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--vonal); }
.beosztott-lista li { display: grid; grid-template-columns: 1fr 11rem auto; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--vonal); }
.beosztott-lista li:last-child { border-bottom: 0; }
.beosztott-nev .hiba { display: block; }
.beosztott-szerep { width: 100%; }
.beosztott-kereso { max-width: 520px; }
@media (max-width: 760px) { .beosztott-lista li { grid-template-columns: 1fr auto; } .beosztott-szerep { grid-column: 1; } .beosztott-lista .ikon-gomb { grid-row: 1 / span 2; grid-column: 2; } }
/* x-heti-fizetes: a jobb sáv tetején; alatta az át nem vett (lezárt) fizetések sárga szegéllyel */
/* Alul, elválasztó vonallal; a fölötte lévő lista görget, ha nem fér el */
.heti-fizetes { flex-shrink: 0; margin: auto calc(-1 * var(--jobb-pad)) 0; padding: 20px var(--jobb-pad) 0; border-top: 1px solid var(--vonal); } /* a vonal a jobb sáv teljes szélességében */
.szolgalatban-doboz { display: flex; flex-direction: column; min-height: 0; padding-bottom: 20px; }
.szolgalatban-doboz > h3 { flex-shrink: 0; }
.szolgalatban-doboz .szolgalatban { min-height: 0; overflow-y: auto; }
.heti-fizetes .nagy { margin-top: 8px; }
/* Át nem vett fizetés: piros keretes doboz (mint a régi figyelmeztetés-értesítés): „Át nem vett fizetés:”, alatta az összeg, a hét */
.fizetes-atvetel { margin: 12px 0 0; padding: 10px 14px; border: 2px solid var(--piros); background: var(--kartya); }
.fizetes-atvetel b { display: block; font-size: 1.3rem; }
.fizetes-atvetel small { display: block; color: var(--halvany); font-size: .8rem; }
/* Heti zárás: a lezárandó naptári hét a fül tetején */
.zarando-het { margin: 0 0 4px; font-size: 1.15rem; }
.resz-fej .zarando-het + p { margin: 0; }
.zaras-fej { margin-bottom: 20px; }
.osszesito-urlap { margin-bottom: 24px; }
.zaras-osszegzes { margin-bottom: 20px; } /* Heti zárás és Havi összesítő: összes szolgálati idő, jelentés, kiadás */
.stat-alatta { margin: 4px 0 0; font-size: .8rem; } /* Havi összesítő: a dátumok és gombok alatt térköz az eredmény előtt */
.zaras-fej ~ .racs { margin-bottom: 24px; }
/* Beállítások → Egységek: létszám járműtípusonként (keskeny számmező) */
.egyseg-letszam { max-width: 640px; }
.egyseg-letszam input { width: 6rem; }
/* Lezárt hét: 4 kártya egy sorban, keskenyebben 2 × 2 (ne törjön 3 + 1-re) */
.racs.zaras-statok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .racs.zaras-statok { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .racs.zaras-statok { grid-template-columns: 1fr; } }
.zaras-fej ~ .csukhatok { margin-top: 20px; }
/* Jelentések → Ellenőrzés: a Törölt jelentések a heti átnézés táblázata alatt, térközzel */
.jelentes-toroltek { margin-top: 32px; }
/* Heti zárás fejléce jobbra: a jelentések állapota (címke), a lezárásuk és a hét lezárása egy sorban */
.zaras-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* „Lezárás előtt”: értesítő sáv (x-uzenet figy), benne a tennivalók listája */
.zaras-teendok > b { display: block; margin-bottom: 6px; }
/* Heti fizetés táblázata: az összeg alatt az összetétele pontokkal elválasztva, sorvégi tördeléssel */
.fizetes-tabla .fizetes-reszek { min-width: 14em; max-width: 30em; }
.fizetes-reszek > span + span::before { content: " · "; }

/* Szolgálat: a bal oldali menü alján (mobilon a képernyő alján) */
.szolg-sav { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.szolg-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.szolg-allapot { font-weight: 700; }
.szolg-sav[data-allapot="be"] .szolg-allapot { color: var(--sarga); }
.szolg-gombok .gomb { border-color: rgba(255, 255, 255, .55); color: #fff; }
.szolg-gombok .gomb:hover { background: #fff; color: var(--kek); }
.szolg-gombok .gomb.zold { background: var(--sarga); border-color: var(--sarga); color: #10213a; }
.szolg-gombok .gomb.zold:hover { background: var(--sarga-hover); border-color: var(--sarga-hover); }
.szolg-ido { font-variant-numeric: tabular-nums; }
/* Szolgálati log beküldése (felugró ablak): a szolgálat kezdete és vége egy-egy sorban, alatta a keresendő logsorok mintája */
.log-idok { grid-template-columns: auto 1fr; gap: 4px 16px; }
.log-idok dd { margin: 0; }
.log-minta { margin: 0; padding: 10px 12px; border: 1px solid var(--vonal); background: var(--hatter); font: .82rem/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.szolg-gombok { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.szolg-gombok .gomb { padding: 8px 10px; text-align: center; }

/* Jobb oldal: kik vannak szolgálatban */
.jobb-sav { --jobb-pad: 20px; display: flex; flex-direction: column; position: sticky; top: var(--fejsav); height: calc(100dvh - var(--fejsav)); overflow-y: auto; padding: 32px var(--jobb-pad); border-left: 1px solid var(--vonal); background: var(--kartya); }
.szolgalatban { list-style: none; margin: 0 -20px; padding: 0; } /* a sorok a sáv teljes szélességében */
.szolgalatban li:nth-child(even) { background: var(--hatter); }
/* Egy sor = link a tag adatlapjára */
.szolgalatban a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: inherit; text-decoration: none; }
.szolgalatban a:hover { background: var(--vonal); }
.szolgalatban a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.szolgalatban small { display: block; color: var(--halvany); font-size: .8rem; }
.szolgalatban small .rang { margin-top: 3px; padding: 0 6px; font-size: .75rem; } /* a rang a játékbeli színével, kisebb */
.szolgalatban .avatar.kicsi { width: 40px; height: 40px; }

/* Közepes képernyőn (pl. 1080p 125%-os skálázással): a jobb oldali lista a tartalom alá kerül, hogy a táblázatok elférjenek;
   sűrűbb menü, kisebb tartalom-margó és taglista-betű */
@media (max-width: 1600px) and (min-width: 761px) {
  .dash { grid-template-columns: var(--bal-sav) minmax(0, 1fr); }
  .dash aside { padding: 10px 8px 16px; font-size: .92rem; }
  .dash aside nav :is(a, button, details.almenu > summary) { padding: 7px 10px; }
  .dash aside nav a.almenupont { padding-left: 38px; }
  .dash main { padding: 24px clamp(16px, 2vw, 32px); }
  .tabla.tagok-tabla { font-size: .9rem; }
  .jobb-sav { --jobb-pad: clamp(16px, 2vw, 32px); grid-column: 2; position: static; height: auto; border-left: 0; border-top: 1px solid var(--vonal); padding: 24px var(--jobb-pad); }
}
/* A tartalom alatt (tablet és közepes gép): a szolgálatban lévők rácsban egymás mellett, jobbra mellettük a várható fizetés */
@media (max-width: 1600px) {
  .jobb-sav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; }
  .szolgalatban-doboz { padding-bottom: 0; }
  .szolgalatban { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 12px 0 0; }
  .szolgalatban li, .szolgalatban li:nth-child(even) { background: var(--hatter); }
  .szolgalatban a { padding: 8px 12px; }
  .heti-fizetes { margin: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--vonal); }
}
@media (max-width: 600px) {
  .jobb-sav { grid-template-columns: minmax(0, 1fr); }
  .heti-fizetes { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--vonal); }
}
@media (max-width: 760px) {
  .jobb-sav { --jobb-pad: 16px; position: static; height: auto; border-left: 0; border-top: 1px solid var(--vonal); padding: 24px var(--jobb-pad); }
  .szolg-sav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--oldalsav); border-top: 3px solid var(--sarga); }
  .szolg-fej { flex-direction: column; gap: 0; margin: 0; font-size: .85rem; }
  .szolg-gombok { grid-auto-columns: auto; }
}

/* Közlemények: egymás alatt, kinyitható sorok */
/* A lista kitölti a szélességet (mint a fölötte lévő kártya); a folyó szöveg olvasható szélességű marad */
.kozlemenyek, .csukhatok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.csukhato-torzs > form { max-width: 960px; }
.csukhato-torzs > form + form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vonal); }
/* Beállítások főoldala: Metro-csempék (lapos, éles sarkú, egy színben); a széles két oszlopot foglal. Lenyomva kicsit benyomódik. */
.metro-racs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: minmax(170px, auto); grid-auto-flow: dense; max-width: 960px; }
.metro { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 14px 16px; background: var(--zold); color: #fff; text-decoration: none; overflow: hidden; transition: transform .1s ease-out, background-color .15s; }
.metro.szeles { grid-column: span 2; }
.metro:hover { background: var(--zold-hover); }
.metro:active { transform: scale(.97); }
.metro:focus-visible { outline: 3px solid var(--sarga); outline-offset: 2px; }
.metro.rendszergazda { box-shadow: inset 0 5px 0 var(--sarga); }
.metro-ikon { width: 32px; height: 32px; }
.metro-sorok { display: grid; align-content: end; grid-auto-rows: max-content; gap: 2px; font-size: .85rem; opacity: .85; } /* max-content: az overflow: hidden sorok ne nyomódjanak össze; több sornál a csempe nő */
.metro-sorok span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.metro-cim { font-family: var(--cim); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
/* Gombként (ablak="#id": felugró ablakot nyit): a gomb alapstílusa helyett ugyanaz, mint a linkes csempe */
button.metro { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
/* Leírás: rámutatáskor / fókuszban ráúszik a csempére (érintőképernyőn a felugró ablak tetején olvasható) */
.metro-leiras { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--zold-hover); font-size: .85rem; line-height: 1.4;
  overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s ease-out; pointer-events: none; }
.metro-leiras b { font-family: var(--cim); font-size: 1rem; }
.metro:is(:hover, :focus-visible) .metro-leiras { opacity: 1; transform: none; }
@media (hover: none) { .metro-leiras { display: none; } }
@media (prefers-reduced-motion: reduce) { .metro, .metro-leiras { transition: none; } .metro:active, .metro-leiras { transform: none; } }
@media (max-width: 420px) { .metro-racs { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(150px, auto); } }
/* Kinyitható sor (közlemény, x-csukhato): fejléc címmel, alcímmel, állapottal és nyíllal */
:is(.kozlemeny, .csukhato) { background: var(--kartya); border: 1px solid var(--vonal); }
:is(.kozlemeny, .csukhato) summary { display: grid; grid-template-columns: 1fr auto 20px; gap: 4px 16px; align-items: center; padding: 14px 18px; cursor: pointer; }
:is(.kozlemeny, .csukhato) summary:hover { background: var(--hatter); }
:is(.kozlemeny, .csukhato)[open] summary { margin-bottom: 0; border-bottom: 1px solid var(--vonal); }
:is(.kozl-cim, .csukhato-cim) { grid-column: 1; }
:is(.kozl-meta, .csukhato-meta) { grid-column: 1; color: var(--halvany); font-size: .85rem; }
:is(.kozl-allapot, .csukhato-allapot) { grid-column: 2; grid-row: 1 / span 2; font-size: .85rem; white-space: nowrap; }
:is(.kozlemeny, .csukhato) .nyil { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--halvany); transition: transform .15s; }
:is(.kozlemeny, .csukhato)[open] .nyil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { :is(.kozlemeny, .csukhato) .nyil { transition: none; } }
@media (max-width: 760px) {
  :is(.kozlemeny, .csukhato) summary { grid-template-columns: 1fr 20px; padding: 12px 14px; }
  :is(.kozl-allapot, .csukhato-allapot) { grid-column: 1; grid-row: auto; }
  :is(.kozlemeny, .csukhato) .nyil { grid-column: 2; grid-row: 1 / span 3; }
  :is(.kozl-torzs, .csukhato-torzs) { padding: 14px; }
}
:is(.kozl-torzs, .csukhato-torzs) { padding: 16px 18px; }
.kozl-torzs > p { margin: 0 0 16px; max-width: 65ch; }
.kozl-olvasas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--vonal); }
.kozl-olvasas p { margin: 0; }

/* Profil */
.profil-fej { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.profil-fej h2 { margin: 0 0 6px; }
/* Adatlap fejléce: feladatkör, osztály, specializáció egy-egy sorban, címkék nélkül */
.tag-adatok { grid-template-columns: max-content 1fr; column-gap: 12px; row-gap: 2px; margin: 8px 0 4px; }
.tag-adatok dd { margin: 0; }
.beallitasok form + form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--vonal); }
.beallitasok h3 { margin: 0; }

/* Jelentés: ellátás-csempék, összesítő, társak */
.csempek { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.csempe { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--keret); background: var(--mezo); cursor: pointer; font-weight: 400; }
.csempe span { color: var(--halvany); font-size: .9rem; }
.csempe input, .chip input { position: absolute; opacity: 0; }
.csempe:hover, .chip:hover { border-color: var(--szoveg); }
.csempe:has(input:checked) { border-color: var(--zold); background: var(--zold); color: #fff; }
.csempe:has(input:checked) span { color: inherit; }
.csempe:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid var(--szoveg); outline-offset: 2px; }
.chip { position: relative; display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; border: 1px solid var(--keret); background: var(--mezo); cursor: pointer; font-weight: 400; }
.chip:has(input:checked) { background: var(--zold); border-color: var(--zold); color: #fff; }
.chip:has(input:checked) .halvany { color: inherit; opacity: .85; }
.rovidites { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--vonal); background: var(--hatter); }
.rovidites small { color: var(--halvany); }
.rovidites p { margin: 4px 0 12px; font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.rov { font-weight: 700; font-size: .9rem; }
/* Szolgálat-ellenőrzés: a bemásolt logsorok (hosszúak lehetnek, törjenek) */
.logsorok { font-size: .85rem; white-space: normal; overflow-wrap: anywhere; min-width: 24ch; }
/* Lejárat (forgalmi, TB) és figyelmeztetések: a kért kivétel az egy kiemelőszín alól
   (lejárat: sárga = 5 napon belül lejár, piros = lejárt; figyelmeztetés: sárga = 2, piros = 3) */
.lejarat.hamarosan, .lejarat.lejart, .figy-szam.sarga, .figy-szam.piros { padding: 1px 6px; font-weight: 700; white-space: nowrap; }
.lejarat.hamarosan, .figy-szam.sarga { background: #ffd200; color: #171717; }
.lejarat.lejart, .figy-szam.piros { background: #c62828; color: #fff; }
/* Eltöltött napok (x-napok): piros = új tag, kevesebb mint omsz.uj_tag_nap napja */
.napok { white-space: nowrap; }
.napok.piros { padding: 1px 6px; font-weight: 700; background: #c62828; color: #fff; }
/* x-rangon: zöld = rangupra kész (megvan a napok száma és a vizsga) */
.napok.kesz { padding: 1px 6px; font-weight: 700; background: var(--zold); color: #fff; }
/* x-rangon: sárga = a napok megvannak, csak a vizsga hiányzik (mellette a vizsga ikonja) */
.napok.vizsga-kell { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-weight: 700; background: var(--sarga); color: #10213a; }
.napok.vizsga-kell svg { width: 14px; height: 14px; }

/* Kis jelzések egy érték mellett, a buborék (data-sugo) mondja meg, mi: ikon (szabadság, hiányzó vizsga) vagy piros pont (még nem lépett be) */
.jelzo { display: inline-grid; place-items: center; margin-left: 6px; color: var(--halvany); vertical-align: middle; }
.jelzo svg { width: 16px; height: 16px; }
.jelzo:hover, .jelzo:focus-visible { color: var(--szoveg); }
.pont { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--piros); vertical-align: middle; }
/* Buborék a színes jelzéseken: miért sárga / piros */
[data-sugo] { cursor: help; }
#sugo { position: fixed; z-index: 20; max-width: min(280px, calc(100vw - 16px)); padding: 6px 10px; white-space: pre-line; background: var(--tinta); color: var(--tinta-szoveg); font-size: .8rem; line-height: 1.4; pointer-events: none; }
.belyeg { padding: 0; border: 1px solid var(--vonal); background: none; cursor: zoom-in; display: block; }
.belyeg img { display: block; width: 56px; height: 36px; object-fit: cover; }
/* Képnagyító: kitölti a képernyőt; .teljes: eredeti méret, görgethető */
#nagyito { padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; cursor: zoom-out; display: none; flex-direction: column; }
#nagyito[open] { display: flex; }
#nagyito .nagyito-ter { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 12px; }
#nagyito img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; background: #000; }
#nagyito.teljes .nagyito-ter { display: block; place-items: start; padding: 0; }
#nagyito.teljes img { max-width: none; max-height: none; cursor: zoom-out; }
#nagyito p { margin: 0; padding: 8px 12px; color: #ccc; font-size: .85rem; text-align: center; }
#nagyito::backdrop { background: rgba(0,0,0,.88); }

/* Felugró ablak (x-ablak) */
.ablak { padding: 0; width: min(560px, calc(100vw - 32px)); max-height: 80vh; border: 1px solid var(--szoveg); background: var(--kartya); color: var(--szoveg); }
.ablak::backdrop { background: rgba(0,0,0,.6); }
/* Parkolás (x-garazs): a garázs soronként, rögzített szélességű helyekkel; szélesebb tartalom vízszintesen görgethető */
.garazs-keret { overflow-x: auto; padding-bottom: 4px; }
.garazs { display: grid; gap: 6px; min-width: max-content; }
.garazs-sor { display: flex; gap: 6px; }
/* Minden hely egyforma magas: a felirat és a név egy sorban, ami nem fér ki, „…” (a teljes név buborékban) */
.hely, .hely-jel, .hely-ures { width: 104px; height: 84px; flex-shrink: 0; }
.hely { display: grid; align-content: start; gap: 2px; padding: 10px; border: 1px solid var(--vonal); background: var(--kartya); overflow: hidden; }
.hely small { font-size: .8rem; color: var(--halvany); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hely .gomb { margin-top: 4px; padding: 4px 10px; font-size: .8rem; justify-self: start; }
.hely.szabad { border-color: var(--zold-szoveg); }
.hely.igenyelve { border-style: dashed; border-color: var(--tinta); }
.hely.foglalt { background: var(--hatter); }
.hely.sajat { background: var(--zold); border-color: var(--zold); color: #fff; }
.hely.sajat small { color: #fff; }
.hely-jel { display: grid; place-items: center; border: 1px dashed var(--vonal); font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--halvany); }
.jelmagyarazat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .85rem; }
.hely-minta { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--vonal); background: var(--kartya); }
.hely-minta.szabad { border-color: var(--zold-szoveg); }
.hely-minta.igenyelve { border-style: dashed; border-color: var(--tinta); }
.hely-minta.foglalt { background: var(--hatter); }
.hely-minta.sajat { background: var(--zold); border-color: var(--zold); }
.park-sajat { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--vonal); }
.park-sajat p { margin: 0; }
/* Szöveges „kód” mező (pl. a garázs elrendezése): a sorok egymás alá igazodnak */
.kod-mezo textarea { white-space: pre; overflow-x: auto; }
/* Jelentések lezárása (heti átnézés teteje): szöveg és gomb egy keretben */
.lezaras-sor { padding: 12px 16px; border: 1px solid var(--vonal); background: var(--kartya); }
.ablak.ablak-szeles { width: min(1100px, calc(100vw - 32px)); } /* táblázatos tartalomhoz (pl. heti átnézés tagonként) */
.ablak-fej { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--vonal); }
.ablak-fej h3 { margin: 0; }
.ablak-torzs { padding: 14px 18px; overflow-y: auto; max-height: calc(80vh - 64px); }
/* Névsor egy ablakban: név + halvány rang soronként */
.nevsor { list-style: none; margin: 0; padding: 0; }
.nevsor li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--vonal); }
.nevsor li:first-child { border-top: 0; }

/* Mintaoldal: a nyilvános elemek a saját tokenjeikkel, egymás alatt */
.minta-nyilvanos { display: grid; gap: 16px; padding: 16px; background: var(--hatter); color: var(--szoveg); }
.minta-nyilvanos .segelyhivo { max-width: 280px; }

/* ---------- Heti zárás, HR, dokumentumtár ---------- */
/* x-stat href: „Részletek” link a szám alatt */
.stat-link { display: inline-block; margin-top: 6px; font-size: .85rem; }
/* Táblázatsor, ami nem számít (lejárt figyelmeztetés, 0 Ft-os tag a heti zárásban) */
.halvany-sor td { color: var(--halvany); }
/* Lezárás előtti figyelmeztetések listája */
.ellenorzo-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
/* Fizetési szabályok: a felugró ablakok táblázatai */
.fizetes-szabalyok .ablak-torzs { display: grid; gap: 14px; }
.fizetes-szabalyok .ablak-torzs > p.halvany:first-child { margin: 0; }
/* Közlemény célzása: csoportcímek a választógombok fölött */
.kozl-cel h4 { margin: 8px 0 6px; font-size: .9rem; }
/* Szűrősor (műveleti napló) */
.szuro-sor { margin-bottom: 16px; }
/* Oldalsáv: a nyilvános főoldalra vivő link (új lapon) */
.dash aside nav a.kulso-menupont { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); color: #c9d4e3; }
.dash aside nav a.kulso-menupont svg { width: 14px; height: 14px; flex-shrink: 0; align-self: center; }
/* Dokumentumtár: soronként cím + leírás, jobbra a gombok; Google-dokumentum beágyazva az ablakban */
.dokumentumok { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--vonal); }
.dokumentum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--vonal); }
.dokumentum .gomb svg { width: 14px; height: 14px; vertical-align: -2px; }
/* A dokumentum saját oldala (belso/dokumentum): felül a gombok, a kereső, alatta a dokumentum a képernyő maradék magasságában.
   Sötét módban is az eredeti színeivel (fehér lap): a korábbi színfordítás a képeket elrontotta (2026-11-01). */
.dokumentum-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dokumentum-fej .gomb svg { width: 14px; height: 14px; vertical-align: -2px; }
/* x-fivem-valaszto: a játékszerveren fent lévők listája, soronként egy kattintható név (szolgálatba lépéskor) */
.fivem-lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--vonal); }
.fivem-lista li.fivem-alcim { padding: 6px 10px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--halvany); background: var(--hatter); }
.fivem-nev { display: block; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--szoveg); font: inherit; text-align: left; cursor: pointer; }
.fivem-nev:hover, .fivem-nev:focus-visible { background: var(--zold); color: #fff; outline: none; }
/* x-dokumentum-kereso: a fejléc jobb szélén nagyító; kattintásra kis mező a találatszámmal és fel / le nyíllal */
.dok-kereso { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dok-kereso[hidden] { display: none; }
.dok-kereso-sav { display: flex; align-items: center; gap: 4px; border: 1px solid var(--keret); background: var(--kartya); padding: 2px 2px 2px 8px; }
.dok-kereso-sav input { width: 11em; min-width: 0; border: 0; padding: 4px 0; background: transparent; color: var(--szoveg); font: inherit; }
.dok-kereso-sav input:focus { outline: none; }
.dok-kereso-sav:focus-within { outline: 2px solid var(--zold); outline-offset: 1px; }
.dok-kereso-sav [data-dok-talalat] { font-size: .8rem; white-space: nowrap; }
.dok-kereso-sav .ikon-gomb { width: 28px; height: 28px; border: 0; }
.dok-kereso-sav .ikon-gomb:disabled { opacity: .4; cursor: default; }
.dok-kereso-sav .ikon-gomb + .ikon-gomb { margin-left: 0; }
.dokumentum-oldal-keret { display: block; width: 100%; height: calc(100dvh - 300px); min-height: 420px; border: 1px solid var(--vonal); background: #fff; }
@media (max-width: 760px) {
  .dokumentum-oldal-keret { height: calc(100dvh - 240px); min-height: 360px; }
}

/* x-belyeg nagy: teljes szélességű kép (összevetés), az egész kép látszik */
.belyeg.nagy { width: 100%; background: var(--tinta); }
.belyeg.nagy img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
/* x-lapozo: fejléc (cím, Előző / számláló / Következő), alatta az éppen látható elem */
.lapozo-fej { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.lapozo-fej h3 { margin: 0; }
.lapozo-vezerlok { display: flex; align-items: center; gap: 10px; }
.lapozo-szamlalo { min-width: 4.5em; text-align: center; font-weight: 700; }
/* x-ismetlodes-csoport (2026-11-08): a listában egy sor (okok, bélyegképek, Megnézem), kattintásra képnézegető ablak */
.ismetlodes-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vonal); background: var(--kartya); }
.ismetlodes-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; }
.ismetlodes-sor + .ismetlodes-sor { border-top: 1px solid var(--vonal); }
.ismetlodes-sor-szoveg { flex: 1 1 280px; display: grid; gap: 2px; min-width: 0; }
/* Képnézegető: egy nagy kép fekete háttéren, nyilak, alatta bélyegsáv, a jelentés adatai és döntése, legalul a csoport döntése */
.ablak.kepnezo { width: min(1200px, calc(100vw - 32px)); max-height: 94vh; }
.kepnezo .ablak-torzs { display: grid; gap: 12px; max-height: calc(94vh - 64px); }
.kepnezo-ter { position: relative; display: grid; min-height: 200px; background: #000; }
.kepnezo-dia { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; margin: 0; }
.kepnezo-kep { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kepnezo-kep img { display: block; width: 100%; height: 62vh; object-fit: contain; } /* állandó keret: a kép (bármilyen méretű) kitölti, torzítás nélkül */
.kepnezo-nincs { margin: 0; padding: 48px 16px; color: #c9d4e3; }
.kepnezo-nyil { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(8, 20, 40, .72); color: #fff; cursor: pointer; }
.kepnezo-nyil:hover { background: var(--zold); border-color: var(--zold); }
.kepnezo-nyil svg { width: 22px; height: 22px; }
.kepnezo-nyil.bal { left: 8px; }
.kepnezo-nyil.bal svg { transform: scaleX(-1); }
.kepnezo-nyil.jobb { right: 8px; }
.kepnezo-savok { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.kepnezo-savok button { flex: 0 0 auto; display: grid; gap: 2px; padding: 2px; border: 2px solid transparent; background: none; color: var(--halvany); font: inherit; font-size: .75rem; cursor: pointer; }
.kepnezo-savok button.aktiv { border-color: var(--sarga); color: var(--szoveg); font-weight: 700; }
.kepnezo-savok img { display: block; width: 96px; height: 60px; object-fit: cover; }
.kepnezo-adatok { display: grid; }
.kepnezo-adat { display: grid; gap: 6px; align-content: start; }
.kepnezo-adatok > .kepnezo-adat { grid-area: 1 / 1; }
.kepnezo-adat.rejtett { visibility: hidden; } /* helyet foglal, de nem látszik és nem kattintható: nem ugrik az ablak magassága */
.kepnezo-adat p { margin: 0; }
.kepnezo-adat.kivett .osszevetes-cim b { text-decoration: line-through; }
/* Jelentések átnézése képenként (Livewire\JelentesAtnezes, #atnezes ablak) */
.atnezes-sav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.atnezo { display: grid; gap: 12px; }
.atnezo-fej { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.atnezo-fej p { margin: 0; }
.atnezo-kepek { display: grid; gap: 8px; }
.atnezo-adatok { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.atnezo-adatok dt { color: var(--halvany); }
.atnezo-adatok dd { margin: 0; }
.atnezo-sugo { margin: 0; font-size: .85rem; }
.atnezo .ikon-gomb.feliratos { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 12px; font: inherit; font-weight: 700; }
.atnezo .ikon-gomb.feliratos .ikon-gomb-felirat { display: inline; } /* az átnézésben a felirat mindig látszik (billentyűvel együtt) */
.kepnezo-nyil:disabled { opacity: .3; cursor: default; }
.kepnezo-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--vonal); }
.kepnezo-lab p { margin: 0; }
/* A kép alatt: balra a jelentés adatai, jobbra az állapot és a döntés; miért jelzett: sárga szegélyű megjegyzés */
.osszevetes-fej { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.osszevetes-fej > div { display: grid; gap: 2px; min-width: 0; }
.osszevetes-fej > .osszevetes-dontes, .osszevetes-dontes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.osszevetes-ok { display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; border-left: 3px solid var(--sarga); background: var(--hatter); font-size: .9rem; }
/* A tag heti jelentései (ablak): szélesebb, a kivett sor halvány, az összeg nem törik */
.ablak.heti-tag { width: min(1320px, calc(100vw - 32px)); }
.nem-tor { white-space: nowrap; }
@media (max-width: 760px) {
  .kepnezo-kep img { height: 45vh; }
  .kepnezo-nyil { width: 40px; height: 40px; }
  }

/* Alpine: a feltételesen látszó rész ne villanjon fel betöltéskor */
[x-cloak] { display: none !important; }

/* Űrlap egy feltételesen megjelenő része (pl. visszaigénylés: a nyugta beolvasása után): ugyanúgy rácsban, mint az űrlap */
.urlap-resz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Visszaigénylés (szereltetés): a kiolvasott mezők mellett a nyugta képe; keskeny képernyőn alatta */
.nyugta-ellenorzes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 16px; align-items: start; max-width: 960px; }
.nyugta-ellenorzes.kep-nelkul { grid-template-columns: minmax(0, 1fr); }
.nyugta-kep { margin: 0; border: 1px solid var(--vonal); background: var(--hatter); }
.nyugta-kep img { display: block; width: 100%; height: auto; cursor: zoom-in; }
[data-nyugta-allapot]:empty { display: none; }
/* Nyugta kivágása (omsz.js, #vago): a kép az ablakban, rajta a kijelölő keret; a kereten kívül sötétítve */
.vago { width: min(960px, calc(100vw - 32px)); max-height: 94vh; flex-direction: column; }
.vago[open] { display: flex; }
.vago-fej { padding: 16px 16px 8px; }
.vago-fej h3 { margin: 0 0 4px; }
.vago-fej p { margin: 0; }
.vago-ter { position: relative; flex: 1; min-height: 0; margin: 0 16px; display: grid; place-items: center; overflow: hidden; background: #000; touch-action: none; user-select: none; cursor: crosshair; }
.vago-ter img { display: block; max-width: 100%; max-height: 62vh; pointer-events: none; }
.vago-keret { position: absolute; border: 2px solid var(--sarga); box-shadow: 0 0 0 9999px rgba(0,0,0,.6); pointer-events: none; }
.vago-hiba { margin: 8px 16px 0; color: var(--piros); }
.vago-gombok { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }
@media (max-width: 720px) { .nyugta-ellenorzes { grid-template-columns: minmax(0, 1fr); } }

/* Nyilvános TB-lekérdezés (Szolgáltatások → TB díjai): kártyaszám mező és gomb egy sorban, keskeny képernyőn egymás alatt;
   az eredmény (kártyaszám, mettől meddig érvényes, állapot) alatta, három oszlopban */
.tb-ellenorzes-cim { margin: 32px 0 0; }
.tb-ellenorzes { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; max-width: 560px; margin-top: 12px; }
.tb-ellenorzes > label { flex: 1 1 260px; }
.tb-ellenorzes + .uzenet { max-width: 560px; margin-top: 12px; }
.tb-eredmeny { grid-template-columns: repeat(3, auto); grid-auto-flow: column; grid-template-rows: auto auto; justify-content: start;
  column-gap: 40px; max-width: 720px; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--vonal); border-left: 4px solid var(--zold); background: var(--kartya); }
.tb-eredmeny dd { margin: 0; }
@media (max-width: 560px) { .tb-eredmeny { grid-template-columns: auto; grid-auto-flow: row; grid-template-rows: none; } .tb-eredmeny dd { margin-bottom: 10px; } }

/* Belső menü ikonjai (x-menupont, x-ikon): a felirat előtt, halványabban; az aktív pontnál sárga */
.menu-felirat { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.menu-ikon { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.dash aside nav a[aria-current="page"] .menu-ikon { color: var(--sarga); opacity: 1; }
/* Mintaoldal: az ikonkészlet rácsban, névvel */
.ikon-minta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.ikon-minta li { display: flex; align-items: center; gap: 8px; }

/* Görgetősáv a belső görgethető részeken (szolgálatban lista, közlemények, felugró ablak, csengő): vékony, szögletes, a kiemelőszínnel */
:is(.szolgalatban, .kozlemeny-lista ul, .ablak-torzs, .csengo-panel) { scrollbar-width: thin; scrollbar-color: var(--keret) transparent; }
:is(.szolgalatban, .kozlemeny-lista ul, .ablak-torzs, .csengo-panel)::-webkit-scrollbar { width: 8px; }
:is(.szolgalatban, .kozlemeny-lista ul, .ablak-torzs, .csengo-panel)::-webkit-scrollbar-track { background: transparent; }
:is(.szolgalatban, .kozlemeny-lista ul, .ablak-torzs, .csengo-panel)::-webkit-scrollbar-thumb { background: var(--keret); }
:is(.szolgalatban, .kozlemeny-lista ul, .ablak-torzs, .csengo-panel)::-webkit-scrollbar-thumb:hover { background: var(--zold); }

/* Jelentések → Korábbi hetek (Livewire JelentesArchivum): hetenként egy kattintható sor, váltakozó árnyalattal; jobbra lezárva / lezárásra vár */
.jelentes-archivum { margin-top: 32px; }
.het-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vonal); background: var(--kartya); }
.het-lista li:nth-child(even) { background: var(--hatter); }
.het-lista button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--szoveg); font: inherit; text-align: left; cursor: pointer; }
.het-lista button:hover { background: var(--vonal); }
.het-lista b { color: var(--zold-szoveg); text-decoration: underline; text-underline-offset: 3px; }
.het-lista small { display: block; color: var(--halvany); font-size: .85rem; }

/* x-ikon-gomb: kis ikonos gomb a sor végén (Társak módosítása, Kép cseréje); a felirat rámutatva */
.ikon-gombok { white-space: nowrap; }
/* Ismétlődés-jelzés a heti átnézés táblázatában (x-ismetlodes ikon): sárga felkiáltójel a szám mellett, a probléma a buborékban */
.jelzes-ikon { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; background: var(--sarga); color: #000; font-weight: 700; font-size: .8rem; vertical-align: middle; }
.ikon-gombok form { display: inline; margin-left: 4px; }
.ikon-gomb { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--vonal); background: var(--kartya); color: var(--halvany); cursor: pointer; vertical-align: middle; }
.ikon-gomb + .ikon-gomb { margin-left: 4px; }
.ikon-gomb:hover { border-color: var(--zold); color: var(--zold-szoveg); }
.ikon-gomb svg { width: 18px; height: 18px; }
/* Mint a nagy gomboknál: zold = fő művelet (kitöltve), keret = másodlagos (sötét keret) */
.ikon-gomb.zold { background: var(--zold); border-color: var(--zold); color: #fff; }
.ikon-gomb.zold:hover { background: var(--zold-hover); border-color: var(--zold-hover); color: #fff; }
.ikon-gomb.keret { border-color: var(--szoveg); color: var(--szoveg); }
.ikon-gomb.keret:hover { background: var(--szoveg); color: var(--hatter); }
.ikon-gomb-felirat { display: none; }
/* Vissza egy szinttel (x-vissza): balra mutató nyíl + felirat, az oldal tetején */
.vissza { margin: 0 0 16px; }
.vissza a { display: inline-flex; align-items: center; gap: 6px; }
.vissza svg { width: 16px; height: 16px; transform: scaleX(-1); }
.ikon-gomb:disabled, .ikon-gomb:disabled:hover { opacity: .35; border-color: var(--vonal); background: var(--kartya); color: var(--halvany); cursor: default; }
.sor-muveletek { align-items: center; }
/* Elbírálás (x-elbiralas): az ikonok egy sorban, az űrlapok nem törik meg a sort */
.elbiralas-gombok { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; }
.elbiralas-gombok form { display: contents; }
.elbiralas-gombok .ikon-gomb + .ikon-gomb, .ikon-gombok .elbiralas-gombok .ikon-gomb { margin-left: 0; }
@media (max-width: 760px) {
  /* Mobilon érintéshez nagyobb gombok; a feliratos gombokon a felirat is látszik (rámutatás nincs) */
  .ikon-gomb { width: 40px; height: 40px; }
  .ikon-gomb.feliratos { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 12px; font: inherit; font-weight: 700; }
  .ikon-gomb.feliratos .ikon-gomb-felirat { display: inline; }
  .elbiralas-gombok { display: flex; flex-wrap: wrap; gap: 8px; white-space: normal; }
  /* A feliratos ikongombok mobilon szélesebbek: soron belül törhetnek */
  .ikon-gombok { white-space: normal; }
  .ikon-gombok > .ikon-gomb, .ikon-gombok form { margin: 0 6px 6px 0; }
}

/* Jelentés-táblázatok (Saját, heti átnézés): a sorszám oszlopa csak olyan széles, amilyen kell; a bizonyítékkép nagyobb bélyeg */
@media (min-width: 761px) {
  td.jel-szam { width: 1%; white-space: nowrap; }
  td.jel-szam .sor-alatt { white-space: normal; min-width: 8em; max-width: 11em; }
  td.jel-szam .cimke { white-space: normal; }
}
.kep-cella .belyeg img { width: 88px; max-width: none; height: 56px; }

/* Discord-markdown: szerkesztő eszköztára (x-markdown-mezo) és a megjelenített szöveg (x-markdown) */
.md-szerkeszto { display: grid; gap: 6px; }
.md-eszkozok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--keret); border-bottom: 0; background: var(--hatter); margin-bottom: -6px; font-weight: 400; }
.md-eszkozok + textarea { width: 100%; }
.md-gomb { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; background: none; color: var(--szoveg); font: 600 .85rem var(--sans); cursor: pointer; }
.md-gomb:hover, .md-gomb:focus-visible { border-color: var(--keret); background: var(--kartya); }
.md-gomb-felkover { font-weight: 800; }
.md-gomb-dolt { font-style: italic; }
.md-gomb-alahuzott { text-decoration: underline; }
.md-gomb-athuzott { text-decoration: line-through; }
.md-gomb-kod, .md-gomb-kodblokk { font-family: Consolas, monospace; }
.md-elvalaszto { width: 1px; height: 20px; margin: 0 4px; background: var(--vonal); }
.md-sugo { margin: 0; font-size: .8rem; }
.md-szoveg { max-width: 65ch; margin-bottom: 16px; overflow-wrap: anywhere; }
.md-szoveg > :first-child { margin-top: 0; }
.md-szoveg p, .md-szoveg ul, .md-szoveg ol, .md-szoveg blockquote, .md-szoveg pre { margin: 0 0 10px; }
.md-szoveg h3, .md-szoveg h4, .md-szoveg h5 { margin: 14px 0 6px; font-family: var(--cim); }
.md-szoveg h3 { font-size: 1.3rem; } .md-szoveg h4 { font-size: 1.12rem; } .md-szoveg h5 { font-size: 1rem; }
.md-szoveg .md-alszoveg { font-size: .8rem; color: var(--halvany); }
.md-szoveg blockquote { padding: 2px 0 2px 12px; border-left: 4px solid var(--vonal); }
.md-szoveg ul, .md-szoveg ol { padding-left: 22px; }
.md-szoveg code { padding: 1px 4px; background: var(--hatter); border: 1px solid var(--vonal); font-family: Consolas, monospace; font-size: .88em; }
.md-szoveg pre { padding: 10px 12px; background: var(--hatter); border: 1px solid var(--vonal); overflow-x: auto; }
.md-szoveg pre code { padding: 0; border: 0; background: none; }
.md-szoveg a { color: var(--zold-szoveg); }
.md-spoiler { background: var(--szoveg); color: transparent; cursor: pointer; }
.md-spoiler:hover, .md-spoiler:focus { background: var(--vonal); color: inherit; outline: none; }

/* Közlemény előléptetés-része (x-elolepesek) */
.elolepesek { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; max-width: 65ch; margin-bottom: 16px; padding: 12px 14px; border-left: 4px solid var(--sarga); background: var(--hatter); }
.elolepesek h4 { margin: 0 0 6px; font-size: .9rem; }
.elolepesek ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.elolepesek li span { color: var(--halvany); }

/* Közlemény élő előnézete az űrlapon (x-kozlemeny-elonezet) */
.kozl-elonezet { padding: 12px 14px 0; border: 1px dashed var(--keret); background: var(--kartya); }
.kozl-elonezet > h4 { margin: 0 0 10px; font-size: .85rem; }
.kozl-elonezet > h4 .halvany { font-weight: 400; }
.kozl-elonezet-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.kozl-elonezet [data-elonezet-hely] > :last-child { margin-bottom: 14px; }

/* Váltakozó színű sorok (x-tabla class="csikos"): a keresőtől elrejtett sorokat nem számolja */
/* Ahol a listának kereső van, alapból váltakozó színű (CLAUDE.md): táblázatnál x-tabla class="csikos", listánál ul.csikos.
   A keresőtől elrejtett elemeket (hidden vagy Alpine x-show: display: none) nem számolja. */
.tabla.csikos tbody tr:nth-child(even of :not([hidden], .tabla-alcim)) { background: var(--hatter); }
ul.csikos > li:nth-child(even of :not([hidden], [style*="display: none"])) { background: var(--hatter); }
.dokumentumok.csikos .dokumentum { padding-left: 10px; padding-right: 10px; }
/* Alcímsor a táblázatban (x-tabla-alcim, pl. Járművek: típusonként egy rang csoportjában) */
.tabla-alcim td { padding-top: 18px; font-weight: 800; color: var(--zold-szoveg); border-bottom: 2px solid var(--vonal); white-space: normal; }
.tabla-alcim:first-child td { padding-top: 10px; }
@media (max-width: 760px) {
  .dash tr.tabla-alcim { background: none; border: 0; padding: 8px 0 0; margin: 0; }
  .dash tr.tabla-alcim td { padding: 0 0 4px; border-bottom: 0; }
}

/* Rangváltás: sorgombok (x-rang-gombok: előléptetés, lefokozás) és a több tagos előléptetés ablakának listája */
.rang-gombok { display: flex; gap: 4px; }
.rang-gombok form { display: block; }
/* Lenyíló kártya fejléce további gombbal (x-lenyilo, mellette): csak a cím-gomb nyit */
summary.lenyilo-fej { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; cursor: default; }
summary.lenyilo-fej > .gomb { cursor: pointer; }
.eloleptetes-lista { display: grid; gap: 6px; }

/* Vizsgalap (x-vizsgalap): a gyakorlati vizsga pontozólapja, papírszerű, sötét módban is fehér. A képet az omsz.js ebből készíti
   ([data-kepkent]): a mezőket szövegre cseréli (.lap-ertek, .lap-jelolo), és 860 px szélesen rajzolja le. A jelölt pont áthúzva. */
.vizsgalap-oldal { display: grid; gap: 16px; justify-items: start; }
.vizsgalap-eszkozok { display: grid; gap: 10px; width: 100%; }
.vizsgalap-eszkozok p { margin: 0; }
.vizsgalap-eszkozok .gombok { align-items: center; }
.vizsgalap-eszkozok .gombok > form { display: inline-flex; }
/* A lap (nyomtatvány, vizsgalap) műveletei egy sorban: fő gombok, „Kép” menü, a törlés a sor végén */
.lap-eszkozsor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lap-eszkozsor-vege { margin-left: auto; }
/* x-legordulo: gomb, alatta lenyíló lista (mint a profil menüje: sárga felső vonal, ikonos sorok) */
.legordulo { position: relative; display: inline-block; }
.legordulo > .gomb svg { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
.legordulo-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 200px; margin: 0; padding: 6px 0; list-style: none;
  border: 1px solid var(--vonal); border-top: 3px solid var(--sarga); background: var(--kartya); }
.legordulo-panel :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: 0; background: none;
  color: var(--szoveg); font: inherit; font-weight: 600; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.legordulo-panel :is(a, button):hover { background: var(--hatter); }
.legordulo-panel :is(a, button):disabled { cursor: progress; }
.legordulo-panel svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--halvany); } /* a Törlés gomb a többi mellett, nem teljes szélességben */
.vizsgalap { container-type: inline-size; width: 100%; max-width: 860px; background: var(--lap); color: var(--lap-szoveg); border: 1px solid var(--lap-vonal); font-family: var(--sans); font-size: .95rem; line-height: 1.4; color-scheme: light; }
.vizsgalap-cim { margin: 0; padding: 12px 14px; font-family: var(--cim); font-size: 1.25rem; color: var(--lap-szoveg); background: var(--lap-fej); border-bottom: 1px solid var(--lap-vonal); }
/* A lap fejléce: balra a cím, a jobb felső sarokban a frakció logója és neve (x-lap-fej) */
.lap-fej { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; background: var(--lap-fej); border-bottom: 1px solid var(--lap-vonal); }
.lap-fej .vizsgalap-cim { padding: 0; background: none; border: 0; }
.lap-fej-logo { display: flex; align-items: center; gap: 8px; flex: none; max-width: 45%; }
.lap-fej-logo img { width: auto; height: 42px; max-width: 120px; object-fit: contain; }
.lap-fej-logo span { font-size: .72rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; color: var(--lap-szoveg); text-align: right; }
.vizsgalap-fejlec, .vizsgalap-reszek, .vizsgalap-lab { display: grid; grid-template-columns: 1fr 1fr; }
.vizsgalap-mezo { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 14px; font-weight: 400; color: var(--lap-szoveg); border-bottom: 1px solid var(--lap-vonal); }
.vizsgalap-mezo > span:first-child { white-space: nowrap; }
.vizsgalap-fejlec .vizsgalap-mezo:nth-child(odd), .vizsgalap-resz:nth-child(odd), .vizsgalap-eredmeny { border-right: 1px solid var(--lap-vonal); }
.vizsgalap .vizsgalap-mezo input, .vizsgalap .vizsgalap-mezo .lap-ertek { flex: 1; min-width: 0; width: auto; padding: 2px 0; font: inherit; font-weight: 700; color: var(--lap-szoveg); background: transparent; border: 0; border-bottom: 1px dotted var(--lap-vonal); border-radius: 0; }
.vizsgalap .vizsgalap-mezo .lap-ertek { min-height: 1.4em; }
.vizsgalap .alairas input, .vizsgalap .alairas .lap-ertek { text-transform: uppercase; }
.vizsgalap-resz { padding: 10px 14px 14px; border-bottom: 1px solid var(--lap-vonal); }
.vizsgalap-resz h3 { margin: 0 0 8px; font-family: var(--sans); font-size: .95rem; font-weight: 800; color: var(--lap-szoveg); }
.vizsgalap-resz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.vizsgalap-resz label { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 400; color: var(--lap-szoveg); cursor: pointer; }
.vizsgalap-resz input[type="checkbox"] { flex: none; width: 14px; height: 14px; margin: 3px 0 0; accent-color: var(--lap-szoveg); }
.vizsgalap-resz label:has(input:checked) span, .vizsgalap-resz .lap-jelolo.be + span { text-decoration: line-through; color: var(--lap-halvany); }
.vizsgalap-resz textarea, .vizsgalap-resz .lap-ertek { display: block; width: 100%; min-height: 6.5em; padding: 4px 6px; font: inherit; color: var(--lap-szoveg); background: transparent; border: 1px dotted var(--lap-vonal); border-radius: 0; resize: vertical; white-space: pre-wrap; }
.vizsgalap-resz .lap-ertek { border-color: transparent; }
.vizsgalap-eredmeny { display: grid; align-content: start; gap: 6px; padding: 10px 14px; }
.vizsgalap-eredmeny b { margin-left: 6px; text-decoration: underline; }
.vizsgalap-eredmeny small { font-size: .85rem; font-weight: 700; }
.vizsgalap-alairasok .vizsgalap-mezo:last-child { border-bottom: 0; }
.vizsgalap-lab > :only-child { grid-column: 1 / -1; border-right: 0; }
/* A kép jelölőnégyzete (a natív helyett, hogy a képen is pontosan látsszon) */
.lap-jelolo { flex: none; position: relative; width: 14px; height: 14px; margin-top: 3px; border: 1px solid var(--lap-szoveg); }
.lap-jelolo.be::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--lap-szoveg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* A kép a látható oldalon kívül, fix szélességgel készül */
.kep-keszul { position: fixed; left: -10000px; top: 0; width: 860px; }
.kep-keszul .vizsgalap { max-width: none; }
/* Nyomtatvány (x-nyomtatvany): a vizsgalap papírszerű lapja, egy oszlopban; szakaszcímek, többsoros mező a felirat alatt */
.nyomtatvany-mezok { display: grid; }
.nyomtatvany-szakasz { margin: 0; padding: 10px 14px 6px; font-family: var(--sans); font-size: .95rem; font-weight: 800; color: var(--lap-szoveg); border-bottom: 1px solid var(--lap-vonal); background: var(--lap-fej); }
.nyomtatvany .vizsgalap-mezo.hosszu { flex-direction: column; align-items: stretch; gap: 4px; }
.nyomtatvany .vizsgalap-mezo textarea, .nyomtatvany .hosszu .lap-ertek { width: 100%; min-height: 5em; padding: 4px 6px; font: inherit; color: var(--lap-szoveg); background: transparent; border: 1px dotted var(--lap-vonal); border-radius: 0; resize: vertical; white-space: pre-wrap; }
.nyomtatvany .hosszu .lap-ertek { border-color: transparent; }
.nyomtatvany .vizsgalap-mezo select { flex: 1; min-width: 0; padding: 2px 0; font: inherit; font-weight: 700; color: var(--lap-szoveg); background: transparent; border: 0; border-bottom: 1px dotted var(--lap-vonal); }
.nyomtatvany .vizsgalap-mezo.jelolo { align-items: center; }
.nyomtatvany .vizsgalap-mezo.jelolo input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--lap-szoveg); }
.nyomtatvany .vizsgalap-mezo.jelolo .lap-ertek { flex: none; min-width: 2.5em; }
.nyomtatvany .pecset-mezo { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
/* Pecsét és aláírás (x-pecset): kerek, egyszínű pecsét kissé elforgatva, rá átlógó kézírásos aláírás */
.pecset-hely { display: flex; align-items: flex-end; padding: 6px 0 0 28px; }
.pecset { flex: none; width: 160px; height: 160px; opacity: .92; transform: rotate(-6deg); }
.pecset circle { stroke: var(--pecset); }
.pecset text, .pecset-jel > * { fill: var(--pecset); font-family: var(--sans); }
.pecset-jel .pecset-kigyo { fill: none; stroke: var(--pecset); stroke-width: 6; stroke-linecap: round; }
.pecset-jel .pecset-nyelv { fill: none; stroke: var(--pecset); stroke-width: 1.2; }
.pecset-alairas { margin: 0 0 18px -40px; font-family: var(--kezirat); font-size: 2.7rem; font-weight: 400; line-height: 1; color: var(--alairas); white-space: nowrap; transform: rotate(-5deg); }
.nyomtatvany-urlap { display: grid; gap: 14px; width: 100%; max-width: 860px; }
@container (max-width: 600px) {
  .vizsgalap-fejlec, .vizsgalap-reszek, .vizsgalap-lab { grid-template-columns: 1fr; }
  .vizsgalap-fejlec .vizsgalap-mezo:nth-child(odd), .vizsgalap-resz:nth-child(odd), .vizsgalap-eredmeny { border-right: 0; }
  .vizsgalap-eredmeny { border-bottom: 1px solid var(--lap-vonal); }
}

/* Útmutató: minta kép (pl. nyugta) a leírás mellett; álló kép, ezért nagyobb és nem vágott bélyeg */
.utmutato-minta { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.utmutato-minta .belyeg img { width: 120px; height: auto; object-fit: contain; }
@media (max-width: 600px) { .utmutato-minta { flex-direction: column; } }

/* Fájlmező (x-mezo type=file): a fájlválasztó láthatatlanul lefedi a mezőt (kattintás, ráhúzás), alatta a kiválasztott fájlok.
   A „Ctrl+V” rész érintőképernyőn nem látszik. */
.fajl-mezo { position: relative; display: grid; gap: 8px; padding: 14px 16px; border: 1px dashed var(--keret); background: var(--mezo); font-weight: 400; cursor: pointer; }
.fajl-mezo:hover { border-color: var(--szoveg); }
.fajl-mezo:focus-within { outline: 2px solid var(--szoveg); outline-offset: 2px; border-style: solid; }
.fajl-mezo:has(.fajl-input[aria-invalid="true"]) { border: 2px solid var(--szoveg); }
.fajl-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.fajl-mezo-szoveg { display: flex; align-items: center; gap: 10px; }
.fajl-mezo-szoveg svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--halvany); }
.fajl-lista { position: relative; z-index: 1; display: grid; gap: 2px; font-size: .9rem; cursor: default; } /* a fájlválasztó fölött: a × kattintható */
.fajl-lista:empty { display: none; }
.fajl-lista > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fajl-lista > span > span { overflow-wrap: anywhere; }
.fajl-torles { display: inline-flex; flex-shrink: 0; padding: 4px; border: 1px solid transparent; background: none; color: var(--halvany); cursor: pointer; }
.fajl-torles:hover { border-color: var(--keret); color: var(--szoveg); }
.fajl-torles svg { width: 14px; height: 14px; }
.fajl-lista small { color: var(--halvany); }
@media (hover: none) { .fajl-mezo-vagolap { display: none; } }

/* Lezárt Discord-ticket mentése (belso/ticket, x-ticket-uzenet): az üzenetek egymás alatt, balra a profilkép */
.ticket-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ticket-uzenetek { list-style: none; margin: 16px 0 0; padding: 0; background: var(--kartya); border: 1px solid var(--vonal); }
.ticket-uzenet { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--vonal); }
.ticket-uzenet:last-child { border-bottom: 0; }
.ticket-uzenet.bot { background: var(--hatter); }
.ticket-uzenet-test { min-width: 0; overflow-wrap: anywhere; }
.ticket-uzenet-fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.ticket-uzenet-fej time { color: var(--halvany); font-size: .8rem; }
.ticket-beagyazas { margin-top: 6px; padding: 6px 10px; border-left: 4px solid var(--zold); background: var(--kartya); }
.ticket-csatolmanyok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ticket-csatolmanyok svg { width: 12px; height: 12px; vertical-align: -1px; }

/* Osztályok (x-osztaly-kartya, x-osztaly-fej, belso/osztaly): borítókép sötétkék fátyollal, alatta sárga vonal (mint a fejléc) */
.osztaly-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.osztaly-kartya { display: flex; flex-direction: column; background: var(--kartya); border: 1px solid var(--vonal); color: inherit; text-decoration: none; }
.osztaly-kartya:hover { border-color: var(--zold); }
.osztaly-kartya:hover b { text-decoration: underline; text-underline-offset: 3px; }
.osztaly-kartya-kep, .osztaly-borito { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--kek-sotet); color: #fff; border-bottom: 4px solid var(--sarga); }
.osztaly-kartya-kep { height: 120px; padding: 14px 16px; }
.osztaly-kartya-kep img, .osztaly-borito img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.osztaly-kartya-kep::after, .osztaly-borito::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 20, 40, .85) 0%, rgba(8, 20, 40, .35) 100%); }
.osztaly-kartya-kep.kep-nelkul::after, .osztaly-borito.kep-nelkul::after { display: none; }
.osztaly-kartya-kep b { position: relative; z-index: 1; font-family: var(--cim); font-weight: 900; font-size: 1.2rem; }
.osztaly-kartya-szoveg { display: grid; gap: 8px; padding: 14px 16px; }
.osztaly-fej { margin-bottom: 16px; background: var(--kartya); border: 1px solid var(--vonal); }
.osztaly-borito { min-height: 200px; padding: 24px; }
.osztaly-borito > div { position: relative; z-index: 1; }
.osztaly-borito h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.osztaly-borito p { margin: 4px 0 0; }
.osztaly-fej-also { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 24px; padding: 20px; }
.osztaly-fej-also p { margin: 0 0 12px; }
.osztaly-fej-also h3 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--halvany); }
.osztaly-vezetok { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.osztaly-vezetok li { display: flex; align-items: center; gap: 12px; }
.osztaly-vezetok a { color: inherit; text-decoration: none; }
.osztaly-vezetok a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.osztaly-vezetok small { display: block; margin-top: 3px; }
.osztaly-vezetok .rang { padding: 0 6px; font-size: .75rem; }
.osztaly-reszek { display: grid; gap: 16px; margin-bottom: 16px; }
.osztaly-resz-fej { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.osztaly-resz-fej h3 { margin: 0; }
.osztaly-felvetel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.osztaly-felvetel label { flex: 1 1 260px; max-width: 420px; }
/* Oktatási osztály (belso/osztaly/oktatas): kérdésbank vizsgánként, beállítás egy sorban; a helyes válasz kiemelve */
.osztaly-oktatas { margin-bottom: 16px; }
.kerdesbank-vizsga + .kerdesbank-vizsga { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--vonal); }
.kerdesbank-vizsga h3 { margin: 0 0 12px; }
.kerdesbank-beallitas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.kerdesbank-beallitas label { flex: 0 1 180px; }
.kerdes-valaszok { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.kerdes-valaszok li { display: flex; align-items: center; gap: 6px; }
.kerdes-valaszok li.helyes { font-weight: 700; color: var(--zold); }
.kerdes-valaszok svg { width: 1em; height: 1em; flex: none; }
.kerdes-hibak { margin: 0; padding-left: 18px; }
/* Közlemény előléptetései (x-kozlemeny-urlap, 2026-11-10): soronként egy tag, mellette a „vizsgázott” pipa; a lejárat és a Discord-jelölő */
.kozl-elolepes .elolepes-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.kozl-elolepes .elolepes-sor .chip { margin: 0; }
.kozl-kiadas { display: grid; gap: 8px; max-width: 520px; }
/* Osztály teendői (belso/osztaly/teendok): a lejárt határidejű nyitott tétel piros bal szegéllyel */
/* Az osztály teendő-táblája (Trello-szerű, 2026-11-10): három oszlop, kártyák; mobilon egymás alatt */
.teendo-tabla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; align-items: start; }
.teendo-oszlop { background: var(--kartya); border: 1px solid var(--vonal); border-top: 3px solid var(--kek); padding: 12px; }
.teendo-oszlop-folyamatban { border-top-color: var(--sarga); }
.teendo-oszlop-kesz { border-top-color: var(--keret); }
.teendo-oszlop-fej { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.teendo-oszlop-fej small { margin-left: auto; font-weight: 400; font-size: .8rem; }
.teendo-oszlop-kartyak { display: grid; gap: 8px; }
.teendo-ures { margin: 0; font-size: .9rem; }
.teendo-kartya { display: grid; gap: 6px; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: var(--szoveg);
  background: var(--hatter); border: 1px solid var(--vonal); cursor: pointer; }
.teendo-kartya:hover, .teendo-kartya:focus-visible { border-color: var(--kek); }
.teendo-kartya.lejart { box-shadow: inset 4px 0 0 var(--piros); }
.teendo-kartya.kesz .teendo-kartya-cim { color: var(--halvany); }
.teendo-kartya-cim { overflow-wrap: anywhere; }
.teendo-kartya-leiras { font-size: .85rem; color: var(--halvany); overflow-wrap: anywhere; }
.teendo-kartya-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--halvany); }
.teendo-kartya-meta:empty { display: none; }
.teendo-kartya-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.teendo-kartya-meta svg { width: 14px; height: 14px; flex: none; }
.teendo-kartya-meta .teendo-pontok-kesz { color: var(--zold-szoveg); font-weight: 600; }
.teendo-ablak { width: min(680px, calc(100vw - 32px)); }
.teendo-adatok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.teendo-adatok dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--halvany); }
.teendo-adatok dd { margin: 0; }
.teendo-mozgatas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--vonal); border-bottom: 1px solid var(--vonal); }
.teendo-ablak-cim { display: flex; gap: 8px; align-items: baseline; margin: 18px 0 8px; font-size: 1rem; }
.teendo-pontok, .teendo-hozzaszolasok { list-style: none; margin: 0 0 10px; padding: 0; }
.teendo-pontok li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--vonal); }
.teendo-pontok li form { margin: 0; }
.teendo-pont-szoveg { flex: 1; overflow-wrap: anywhere; }
.teendo-pontok li.kesz .teendo-pont-szoveg { text-decoration: line-through; color: var(--halvany); }
.teendo-sor-urlap { grid-template-columns: 1fr auto; align-items: end; }
.teendo-hozzaszolasok li { padding: 8px 0; border-bottom: 1px solid var(--vonal); }
.teendo-hozzaszolasok p { margin: 4px 0 0; overflow-wrap: anywhere; }
.teendo-hsz-fej { display: flex; align-items: center; gap: 8px; }
.teendo-hsz-fej form { margin: 0 0 0 auto; }
.teendo-ablak .csukhato { margin-top: 20px; }
@media (max-width: 900px) { .teendo-tabla { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .teendo-adatok { grid-template-columns: 1fr; } .teendo-sor-urlap { grid-template-columns: 1fr; } }
.kerdesbank-vizsga .lenyilok { margin-bottom: 12px; }
/* Online elméleti vizsga (x-vizsga-kerdes, belso/elmeleti-vizsga) */
.elmeleti-vizsga h2 { margin-top: 0; }
.elmeleti-ido { position: sticky; top: 0; z-index: 2; margin: 0 0 16px; padding: 10px 12px; background: var(--kartya); border-left: 4px solid var(--sarga); }
.vizsga-kerdes { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--vonal); }
.vizsga-kerdes legend { padding: 0 6px; font-weight: 700; }
.vizsga-kerdes-szam { color: var(--halvany); }
.vizsga-valasz { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; cursor: pointer; }
.vizsga-valasz + .vizsga-valasz { border-top: 1px solid var(--vonal); }
.vizsga-valasz:hover { background: var(--hatter); }
.vizsga-valasz input { margin-top: 3px; flex: none; }
.vizsga-valasz:has(input:checked) { background: var(--hatter); font-weight: 700; }
.elmeleti-eredmeny { display: grid; gap: 12px; max-width: 520px; }
.elmeleti-felhivas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) {
  .osztaly-fej-also { grid-template-columns: 1fr; }
  .osztaly-borito { min-height: 150px; padding: 16px; }
}