/* ============================================================
   NEVETNIKÉK BEOSZTÁS – arculat
   A paletta az alapítvány saját világából jön: a megszokott
   beosztás-PDF vaj-sárga / ég-kék napi sávozása, a logó kékje
   és a „sárga köpenyesek" napsárgája.
   ============================================================ */
:root {
  --papir:   #fbf7ef;   /* háttér */
  --tinta:   #26313d;   /* szöveg */
  --kek:     #2e6fb7;   /* logó-kék, linkek, gombok */
  --kek-sotet:#235388;
  --napfeny: #f7b32b;   /* napsárga kiemelés */
  --napfeny-sotet:#dd9a13;
  --vaj:     #fdf3d6;   /* napi sáv A */
  --egkek:   #dee9f7;   /* napi sáv B */
  --zold:    #2e7d32;
  --piros:   #b3402f;
  --piros-sotet:#8e3325;
  --keret:   #e3dccb;
  --arnyek:  0 1px 3px rgba(38,49,61,.08), 0 4px 14px rgba(38,49,61,.05);
  /* A Beosztás oldal állapot-kerete (.honap-keret-*) és a hozzá tartozó sávok/chip-ek –
     lásd a „.honap-keret" szabálynál. */
  --keszulo-bg:      #e8f1fb;   /* készülő hónap: halvány kék */
  --keszulo-szegely: #a9cbea;
  --archiv-bg:       #f0e9db;   /* archív hónap: megsárgult papír */
  --archiv-szegely:  #c7b58c;
  --archiv-tinta:    #7a6640;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papir); color: var(--tinta);
  font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.5;
}
h1, h2, h3 { font-family: 'Baloo 2', sans-serif; line-height: 1.2; color: var(--tinta); }
h1 { font-size: 1.7rem; margin: .4em 0 .5em; }
h2 { font-size: 1.25rem; margin: 1.2em 0 .4em; }
a { color: var(--kek); }

/* --- Fejléc, navigáció --- */
.fejlec {
  background: #fff; border-bottom: 3px solid var(--napfeny);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem;
  padding: .55rem 1rem;
}
.marka {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.35rem;
  color: var(--kek); text-decoration: none; display: flex; align-items: baseline; gap: .45rem;
}
.marka small { font-weight: 500; color: var(--tinta); opacity: .55; font-size: .8rem; }
.nap-jel { width: 1rem; height: 1rem; border-radius: 50%; background: var(--napfeny); align-self: center;
  box-shadow: 0 0 0 3px rgba(247,179,43,.25); }
.menu { display: flex; flex-wrap: wrap; gap: .1rem .2rem; }
.menu a {
  text-decoration: none; color: var(--tinta); padding: .35rem .6rem; border-radius: 8px;
  font-weight: 600; font-size: .93rem;
}
.menu a:hover { background: var(--vaj); }
.menu a.halvany { opacity: .55; }
/* A „Kilépés" POST-űrlap gombja: a kijelentkezés állapotot változtat, ezért nem lehet sima GET
   link (CSRF). A `display: contents` teszi a gombot a menü flex-elemévé, hogy a köz és a
   sortörés ugyanaz maradjon; a gomb rajzolata pontosan a `.menu a`-é. */
.menu form { display: contents; }
.menu button.menu-gomb {
  font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--tinta); padding: .35rem .6rem; border-radius: 8px;
  font-weight: 600; font-size: .93rem;
}
.menu button.menu-gomb:hover { background: var(--vaj); }
.menu button.menu-gomb.halvany { opacity: .55; }
.menu a.aktiv { background: var(--kek); color: #fff; }        /* K-N1: aktív menüpont */
.menu a.aktiv:hover { background: var(--kek-sotet); color: #fff; }
.jelvenyke { background: var(--piros); color: #fff; border-radius: 9px; padding: 0 .38rem; font-size: .75rem; }

.tartalom { max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.lablec { text-align: center; color: #999; font-size: .82rem; padding: 1rem; }
/* Verzió a láblécben: legyen ott, de ne vonja el a figyelmet – a lábléc szürkéjénél is halványabb. */
.lablec-verzio { display: inline-block; margin-top: .15rem; opacity: .75; font-size: .78rem; }

/* --- Kártyák, üzenetek --- */
.kartya { background: #fff; border: 1px solid var(--keret); border-radius: 12px; padding: 1rem 1.2rem; margin: .8rem 0; box-shadow: var(--arnyek); }
/* A flash-üzenet minden oldalbetöltéskor „beúszik" – így egy ismételt, teljesen AZONOS üzenet is
   láthatóan újra megjelenik (pl. többszöri hibás belépésnél látszik, hogy ez már egy új próba). */
/* Letiltott jelölőnégyzet FELIRATA – a szürke négyzet mellett a fekete szöveg
   kattinthatónak látszana. A `cursor: default` is jelzi, hogy itt nincs teendő. */
.tiltott-cimke { color: #7a7466; cursor: default; }   /* ugyanaz a szürke, mint a .sugo */

.uzenet { border-radius: 10px; padding: .7rem 1rem; margin: .7rem 0; font-weight: 600; animation: uzenet-be .38s ease both; }
.uzenet-siker { background: #e6f3e6; color: var(--zold); border: 1px solid #bcd9bc; }
.uzenet-hiba  { background: #fae8e5; color: var(--piros); border: 1px solid #eac4bd; animation: uzenet-hiba-be .55s ease both; }
.uzenet-info  { background: var(--egkek); color: var(--kek-sotet); border: 1px solid #c3d6ef; }
@keyframes uzenet-be { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
/* A hibaüzenet a beúszás után kap egy apró „megrezdülést" – figyelemfelhívó, de nem zavaró. */
@keyframes uzenet-hiba-be {
  0%   { opacity: 0; transform: translateY(-9px); }
  55%  { opacity: 1; transform: translateY(0); }
  68%  { transform: translateX(-6px); }
  80%  { transform: translateX(5px); }
  90%  { transform: translateX(-2px); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .uzenet, .uzenet-hiba { animation: none; } }

/* --- Gombok, űrlapok --- */
/* MÉRET-EGYENLŐSÉG – EGY HELYEN. A gomb dobozát kizárólag a tartalom + a `padding` adja;
   `border` sehol nincs rajta. Ha egy változat kerettel rajzolna körvonalat, a keret
   HOZZÁADÓDNA a dobozhoz, és az a változat minden oldalon nagyobb lenne az elsődlegesnél
   (mérve: a 2 px-es keret 3.63 px szélesség- és magasság-többletet okozott). Az elsődleges
   gomb a mérce, ezért a körvonal BELSŐ árnyék (`inset box-shadow`), ami nem foglal helyet –
   így minden új változat magától egyforma marad. Az `inset` a `.tabla-tok` görgetésére sem
   hat (fantom-szélességet csak a KIFELÉ növő árnyék okoz). Új változatnál se keretezz. */
.gomb, button.gomb {
  --gomb-korvonal: 2px;
  display: inline-block; background: var(--kek); color: #fff; border: 0; border-radius: 10px;
  padding: .55rem 1.1rem; font: 600 .95rem 'Karla', sans-serif; cursor: pointer; text-decoration: none;
  /* RÖGZÍTETT sormagasság, mert a `normal` a betűkészlettől függ: a feliratban lévő emoji (⚙️, ✏️)
     és a nyilak (→, ←) tartalék-betűkészletből jönnek, annak nagyobb a sormagassága, és ettől
     ugyanaz a gomb 1–2 px-szel megnőtt – így egy gombsorban az emojis gomb kilógott a többi közül
     (mérve: „Mentés" 35.33 px, „🎈 Demó" 37.14 px). Az 1.17 a Karla `normal` értéke (1.169), tehát
     az elsődleges gomb MAI mérete változatlan marad – csak a tartalomtól függetlenné válik. */
  line-height: 1.17;
}
.gomb:hover { background: var(--kek-sotet); }
/* SPECIFICITÁS-CSAPDA: a fenti alapszabály `button.gomb` tagja 0-1-1, egy puszta `.gomb-valami`
   variáns viszont csak 0-1-0 – <button>-ön tehát NEM üt át, csak <a>-n. Ezért MINDEN variáns
   `.gomb.gomb-valami` alakban van (0-2-0), és mindegyik kapja a saját `:hover`-ét is, különben a
   `.gomb:hover` sötétkékre váltja. Lásd CLAUDE.md – gomb-hierarchia. */
.gomb.gomb-masodlagos { background: #fff; color: var(--kek); box-shadow: inset 0 0 0 var(--gomb-korvonal) var(--kek); }
.gomb.gomb-masodlagos:hover { background: var(--egkek); }
.gomb.gomb-veszely { background: var(--piros); }
.gomb.gomb-veszely:hover { background: var(--piros-sotet); }
.gomb.gomb-sarga { background: var(--napfeny); color: var(--tinta); }
.gomb.gomb-sarga:hover { background: var(--napfeny-sotet); color: var(--tinta); }
/* MÉRET-variáns: EGY van, a `.gomb-pici`, és KIZÁRÓLAG a beosztás-táblázat sorain belül
   (esemény-sor gombjai) használható – lásd a lap alján. Mindenütt máshol a normál méret a
   helyes; a korábbi `gomb-kicsi` ezért kivezetve (a mérce: Kezdőlap, Ráéréseim).
   Ha új méret-variáns mégis kell, `.gomb.gomb-valami` alakban írd: a puszta `.gomb-valami`
   (0-1-0) a `button.gomb` (0-1-1) padding-jét nem üti, tehát <button>-ön nem érvényesülne –
   pontosan ez a hiba élt a `gomb-kicsi`-ben (a kis <a> 23.45 px, a kis <button> 35.33 px volt). */
/* Kiszürkített gomb: a funkció LÁTSZIK, csak most nem elérhető – így felfedezhető marad.
   A :hover-t is le kell fognod, különben a szín visszavált és aktívnak látszik.
   Ez a blokk MARADJON a variánsok UTÁN: azonos specificitásnál a későbbi nyer, így a
   kiszürkítés a veszély-gombra is ráül (és a `:hover` párja a variáns hoverét is üti). */
.gomb:disabled, button.gomb:disabled,
.gomb:disabled:hover, button.gomb:disabled:hover {
  background: #b9b3a6; color: #fff; cursor: not-allowed; opacity: .75;
  box-shadow: none;   /* a másodlagos gomb kék körvonala se maradjon aktívnak látszó */
}
/* A `.gomb` `display: inline-block`-ja (0-1-1) ÜTI a böngésző `[hidden] { display: none }`
   szabályát, ezért egy rejtettnek jelölt gomb látszana. A szerkesztés-zár ezzel váltogatja
   a Szerkesztés / Mentés / Mégsem hármast – enélkül mind a három egyszerre látszana. */
.gomb[hidden], button.gomb[hidden] { display: none; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
input[type=number], select, textarea {
  width: 100%; max-width: 30rem; padding: .5rem .65rem; border: 1px solid #cfc7b4; border-radius: 9px;
  font: 400 .95rem 'Karla', sans-serif; background: #fff; color: var(--tinta);
}
textarea { max-width: 40rem; }
label { font-weight: 700; display: block; margin: .7rem 0 .2rem; font-size: .92rem; }
/* Jelszó-megjelenítő gomb: a mező jobb szélén, a beírt szöveget nem takarja (padding-right). */
/* A burkoló az inputtal AZONOS szélességű (max 30rem), hogy a gomb az input jobb széléhez
   igazodjon, ne a kártya széléhez (különben széles kártyán a mezőn kívülre esik). */
.jelszo-tok { position: relative; display: block; max-width: 30rem; }
.jelszo-tok input { padding-right: 2.7rem; max-width: 100%; }
.jelszo-mutat {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1;
  padding: .25rem .35rem; opacity: .6; border-radius: 6px; width: auto;
}
.jelszo-mutat:hover, .jelszo-mutat:focus-visible { opacity: 1; }
.mezosor { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: end; }
.mezosor > div { min-width: 10rem; }
.sugo { color: #7a7466; font-size: .85rem; margin-top: .15rem; }
/* Mezősor-oszlopban ülő, MEZŐ-szintű súgó: a saját mezőjéhez igazodjon, ne a kártyához –
   különben megnyújtja az oszlopot, és a mellette álló mezők elcsúsznak. A kártya-szintű súgó
   (a cím alatt) ezzel szemben fut a kártya széléig, `max-width` nélkül. */
.mezosor .sugo { max-width: 14rem; }
/* Mező alatti, kliens-oldali hibajelzés (a szerver ugyanezt flash-üzenetként küldi vissza). */
.mezo-hiba { color: #b02a2a; font-size: .9rem; font-weight: 600; margin-top: .35rem; }

/* Felsorolás egymás alatt, soronként EGY névvel (CSV-import előnézet, ráérés-összesítő).
   Miért nem vesszős folyószöveg: a beolvadó nevek közt nem lehet végigfutni a szemmel –
   egy-egy sor viszont átfutható, és a hosszú lista is bezárt <details> mögött ül. */
.nevlista { list-style: none; margin: .4rem 0; padding: 0; }
.nevlista li { padding: .12rem 0; }

/* Táblázat, ami keskeny nézeten KÁRTYÁKKÁ alakul (Ciklusvezérlő – Ráérés-összesítő).
   Miért nem vízszintes görgetés (.tabla-tok): ott a névoszlop kigörögne, és a számok név
   nélkül értelmetlenek. Széles nézeten marad rendes táblázat – ez a szabály csak a
   töréspont alatt él. A címkéket a `data-cimke` attribútum adja, hogy a fejléc-sor
   elrejtése után is tudni lehessen, melyik szám micsoda. */
@media (max-width: 700px) {
  .tabla-kartya, .tabla-kartya tbody, .tabla-kartya tr, .tabla-kartya td { display: block; width: auto; }
  .tabla-kartya tr:first-child { display: none; }          /* a fejléc-sor (th) */
  .tabla-kartya tr {
    border: 1px solid var(--keret); border-radius: 10px;
    padding: .5rem .7rem; margin-bottom: .5rem; background: #fff;
  }
  .tabla-kartya td { border: 0; padding: .12rem 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem; }
  .tabla-kartya td::before { content: attr(data-cimke); color: #7a7466; font-size: .85rem; }
  /* A név a kártya FEJLÉCE: nincs címkéje, és kiemelt. */
  .tabla-kartya td:first-child { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: .25rem; }
  .tabla-kartya td:first-child::before { content: none; }
  /* Üres cella (pl. nincs megjegyzés): kártyán a puszta címke csak zaj – táblázatban viszont
     kell az üres cella, hogy az oszlopok ne csússzanak el, ezért ez CSAK itt, keskenyen él. */
  .tabla-kartya td:empty { display: none; }
}

/* Címke–érték párok egymás alatt (Kezdőlap, „Az adataim"). A `auto 1fr` rács attól igazít,
   hogy a címke-oszlop a LEGHOSSZABB címkéhez méretezi magát – így az értékek egy vonalban
   kezdődnek, beégetett szélesség nélkül. Keskeny nézeten a rács egyoszloposra vált, és a
   címke az érték FÖLÉ kerül: 388 px-en a két oszlop már az e-mail-címet törné. */
.adatsor { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: .3rem 0; }
.adatsor dt { color: #7a7466; }
.adatsor dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .adatsor { grid-template-columns: 1fr; gap: 0; }
  .adatsor dt { margin-top: .45rem; font-size: .85rem; }
  .adatsor dt:first-child { margin-top: 0; }
}

/* Kezdőlap, „A te alkalmaid": a MÁR MEGVOLT alkalom halványan marad a listában. Nem tüntetjük
   el – a hónap egésze az, ami érdekes –, de ne versenyezzen azzal, ami még hátravan. A `.35` a
   ráérés-naptár múltbeli napkockájának értéke; egy jelentés egyféleképp nézzen ki. */
.alkalom-mult { opacity: .35; }

/* --- Beosztás-tábla: a megszokott elrendezés --- */
/* A görgető-tok a NÉZET szélességéhez kötve. A `max-width: 100%` és a `min-width: 0`
   nélkül a benne lévő `width: max-content` tábla felnyomja a tok elvi szélességét, és a
   túlcsordulás a LAPRA szökik: a body vízszintesen húzhatóvá válik, üres területtel a
   tartalom mellett. A táblán a `width: max-content` marad – a görgetés a tokon belül van.
   (A `min-width: 0` azért kell, mert flex-gyerekként az alapértelmezett `min-width: auto`
   nem engedné a tartalom alá zsugorodni.)
   Az `overscroll-behavior-x: contain` pedig azt akadályozza, hogy a mozdulat a végén
   átcsorduljon a lapra. */
.tabla-tok {
  overflow-x: auto; overscroll-behavior-x: contain;
  max-width: 100%; min-width: 0;
  border-radius: 12px; border: 1px solid var(--keret); background: #fff; box-shadow: var(--arnyek);
}
table.beosztas { border-collapse: collapse; width: 100%; min-width: 900px; font-size: .9rem; }
table.beosztas th {
  background: var(--napfeny); color: var(--tinta); padding: .45rem .5rem; font-family: 'Baloo 2', sans-serif;
  font-weight: 600; position: sticky; top: 0;
}
table.beosztas td { border: 1px solid #eee4cf; padding: .32rem .5rem; text-align: center; }
/* A NÉGY név-oszlop (pt1, pt2, h1, h2) szélessége – EGY helyen, ne szórjuk szét.
   Miért kell: a hospitáló-oszlopok a legtöbb soron ÜRESEK, ezért az automatikus
   táblaelrendezés minimálisra húzta őket, és a ritka, névvel teli sor tördelt
   („Dér / Lili"). A min-width `em`-ben van, hogy a mobil kisebb betűmérethez is
   arányosan igazodjon. A négy oszlop egyforma – így a hospitáló-nevek ugyanúgy
   elférnek egy sorban, mint a programtartóknál. */
table.beosztas td.nev-cella { min-width: 9.5em; }
/* Üres hospitáló-oszlop: OSZLOPONKÉNT külön döntünk. Ha az adott hónapban a h1 (vagy a h2)
   egyetlen cellája sincs kitöltve, az az oszlop nem tartja fenn a név-szélességet – de
   MEGMARAD, fejlécestül: az üres hospitáló-oszlop normál üzemállapot (7. elv), nem hiány.
   A jelzőt a tábla kapja (h1-ures / h2-ures), a szerver dönti el a már betöltött adatból. */
table.beosztas.h1-ures td.cella-h1,
table.beosztas.h2-ures td.cella-h2 { min-width: 0; }
tr.sav-a td { background: var(--vaj); }
tr.sav-b td { background: var(--egkek); }
tr.esemeny-sor td { background: var(--napfeny); font-weight: 700; }
tr.enyem td { outline: 2px solid var(--kek); outline-offset: -2px; }
.x-jel {
  display: inline-block; border: 2px dashed var(--kek); color: var(--kek); border-radius: 8px;
  padding: .05rem .55rem; font-weight: 700; background: rgba(255,255,255,.55); text-decoration: none;
}
a.x-jel:hover { background: var(--kek); color: #fff; }
.hely-ures { color: #b9b09a; }
tr.ures-nap td { color: #b1a893; font-style: italic; }
td .apro { display:block; font-size:.75rem; color:#7a7466; }

/* Osztály programnapok: kapcsolható chipek. Mobilon (iPhone Safari) több sorba törnek. */
/* A chipek EGY vízszintes sorban maradnak (nem tördelünk) – így a sorok alacsonyak.
   A tábla vízszintes görgetése teszi elérhetővé őket, ha nem férnek ki. */
.programnapok { display: flex; flex-wrap: nowrap; gap: .2rem; align-items: center; white-space: nowrap; }
/* KIVÉTEL: a TÁBLÁN KÍVÜL (új osztály felvétele) a chipsor TÖRDELHET, és tördelnie is KELL.
   A nem-tördelés a tábla sormagasságáért van, és azért ártalmatlan ott, mert a `.tabla-tok`
   vízszintesen görgethető. Egy kártyán belül viszont nincs mi elvágja: a 10 chip (~500 px)
   kilógott a kártyából, és keskeny nézeten az EGÉSZ LAPOT vízszintesen túlcsordulóvá tette
   (mérve: 375 px-es nézetben 71 px-nyi üres terület, a body jobbra húzható).
   A `white-space: nowrap` MARAD: a chip FELIRATA („Szo de") ne szakadjon ketté – a tördelés
   a chipek KÖZT történjen. Ha a chipsor új helyre kerül, és ott nincs görgető tok, ez a
   módosító kell rá. */
.programnapok.tordelheto { flex-wrap: wrap; row-gap: .3rem; }
/* A rejtett jelölő `position: absolute` – EZÉRT KELL a címkének `position: relative`:
   pozicionált ős nélkül a jelölő a LAP gyökeréhez igazodna, a görgető-tok vágása nem
   fogná, és a statikus helye (a széles táblában messze jobbra) vízszintesen túlcsordulóvá
   tenné az egész oldalt. Ez okozta, hogy a body-t jobbra lehetett húzni üres területre. */
.programnapok input { position: absolute; opacity: 0; pointer-events: none; }
.programnap-chip-tok { display: inline-block; position: relative; }
.programnap-chip {
  display: inline-block; cursor: pointer; user-select: none;
  padding: .25rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  border: 1px solid #d8d0bf; background: #fff; color: #b1a893;   /* halvány = nincs program */
  min-width: 2.1rem; text-align: center; line-height: 1.15;
}
/* Bekapcsolt állapot – tisztán CSS-ből, JS nélkül vált (a jelölő a chip előtt áll).
   A `.be` a súgóban lévő, statikus mintapéldához kell. */
.programnapok input:checked + .programnap-chip,
.programnap-chip.be { background: var(--napfeny); border-color: #d99e12; color: #3a2f12; }
.programnap-chip:hover { border-color: #b9b09a; }
.programnapok input:focus-visible + .programnap-chip { outline: 3px solid var(--kek); outline-offset: 2px; }
/* Kis elválasztó a hétköznapok | szombat | vasárnap csoportok közt */
.programnap-valaszto { display: inline-block; width: 1px; height: 1.1rem; background: #ddd6c6; margin: 0 .15rem; }

/* --- SZÁRMAZTATOTT MEZŐ: nem beviteli mező, hanem ADAT ---
   Ma egy ilyen van: az önkéntesség kezdete az önkéntes-adatlapon, amikor bemutató-jelölésből jön.
   `disabled`, tehát bele sem lehet kattintani – ez a lényeg: a `readonly` fókuszálható maradt és
   normál kinézetű volt, vagyis pont azt sugallta, hogy szerkeszthető, csak épp nem enged.
   A böngésző alapértelmezett letiltott rajzolatára itt sem hagyatkozunk (több böngészőben, főleg
   iOS Safariban olvashatatlanul halvány) – az ÉRTÉKNEK jól olvashatónak kell maradnia.
   Nem keverendő a szerkesztés-zárral: az egy felület ideiglenes olvasó nézete, ez egy MEZŐ
   tartós tulajdonsága. */
input.mezo-szarmaztatott:disabled {
  background: #f6f4ee; color: var(--tinta); opacity: 1; cursor: default;
  /* iOS Safari a `color`-t figyelmen kívül hagyja a letiltott mezőn – ez az, ami hat rá. */
  -webkit-text-fill-color: var(--tinta);
}

/* --- SZEREPHEZ NEM TARTOZÓ MEZŐ az önkéntes-adatlapon ---
   Nem szerkesztés-zár (az egy felület ideiglenes olvasó nézete) és nem is származtatott mező:
   itt az ADAT NEM LÉTEZHET ennél a szerepnél – hospitálónál a mentor-jelölő, a módszertanin
   kívüli képzések és a beoszthatóság. A jelölőnégyzet LÁTSZIK és olvasható marad, csak nem
   kattintható; a felirata halványabb (`mezo-zart`). */
.mezo-zart { color: #8a8f98; cursor: default; }

/* --- OLVASÓ NÉZET: a Ráéréseim lap lezárt hónapon ---
   A RAJZOLAT közös a szerkesztés-zárral (lásd lent), a MECHANIZMUS nem: ott a koordinátor egy
   gombbal kinyithatja a felületet, itt nincs mit kinyitni – a jogosultság a ciklus állapotából
   jön, tartósan. Ezért NINCS `data-zar`, nincs „✏️ Szerkesztés" gomb, és az app.js hozzá sem nyúl.
   A radiógomb saját rajzolatot kap (a szerkesztés-zárban nincs ilyen elem): a kiválasztott
   kezdési preferencia a lap egyik kiolvasandó ÉRTÉKE, a böngésző letiltott rajzolata viszont
   halvány szürke pont halvány szürke körben – épp a lényeget rejtené el. */
/* A `:read-only` a LETILTOTT mezőre is illeszkedik (az sem szerkeszthető), tehát a `disabled`
   számmezőt is ez fogja – a jelölő és a rádió rajzolatát viszont a lenti, erősebb szabály adja. */
.olvaso-nezet input:read-only,
.olvaso-nezet textarea:read-only,
.olvaso-nezet select:disabled {
  background: #f6f4ee; color: var(--tinta); opacity: 1; cursor: default;
  /* iOS Safari a `color`-t figyelmen kívül hagyja a letiltott mezőn – ez az, ami hat rá. */
  -webkit-text-fill-color: var(--tinta);
}
.olvaso-nezet input[type=checkbox]:disabled,
.olvaso-nezet input[type=radio]:disabled {
  opacity: 1; cursor: default;
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid #b9b09a; background: #fff;
  display: inline-block; vertical-align: middle; position: relative;
}
.olvaso-nezet input[type=radio]:disabled { border-radius: 50%; }
.olvaso-nezet input[type=checkbox]:disabled:checked { background: var(--kek); border-color: var(--kek); }
.olvaso-nezet input[type=checkbox]:disabled:checked::after {
  content: '✓'; position: absolute; inset: 0; color: #fff;
  font-size: 10px; line-height: 13px; text-align: center;
}
.olvaso-nezet input[type=radio]:disabled:checked { border-color: var(--kek); }
.olvaso-nezet input[type=radio]:disabled:checked::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--kek);
}

/* --- SZERKESZTÉS-ZÁR: alapból zárt beállító felületek (Osztályok, Helyszínek, szervezet/város) ---
   A zárt állapot NEM „kikapcsolt funkció", hanem olvasó nézet: minden ÉRTÉKNEK jól olvashatónak
   kell maradnia. A böngésző alapértelmezett `disabled`-megjelenítésére ezért nem hagyatkozunk –
   több böngészőben (és főleg iOS Safariban) olvashatatlanul halvány. A logika az app.js-ben él. */
.zar-zarva input:read-only,
.zar-zarva textarea:read-only,
.zar-zarva select:disabled {
  background: #f6f4ee; color: var(--tinta); opacity: 1; cursor: default;
  /* iOS Safari a `color`-t figyelmen kívül hagyja a letiltott mezőn – ez az, ami hat rá. */
  -webkit-text-fill-color: var(--tinta);
}
/* A jelölőnégyzet a legfontosabb kiolvasandó érték ezeken a felületeken (aktív, szupervízió,
   előírt képzés), a böngésző letiltott rajzolata viszont szürke pipa szürke alapon. Ezért a
   ZÁRT állapotban saját rajzolatot kap: fehér doboz, bekapcsolva kék kitöltés + fehér pipa.
   A 13 px a böngészők natív mérete – így a Szerkesztésre nyitás nem tolja el a sorokat.
   Ugyanez a rajzolat kell az önkéntes-adatlap szerep-zárolt jelölőire (`jelolo-zart`): ott is
   BEPIPÁLVA is látszhat egy letiltott jelölő (a hospitáló megőrzött beoszthatóság-pipái, a
   programtartó módszertani képzése), és a szürke pipa szürke alapon pont a lényeget rejtené el.
   Az osztály a markupban ÁLLANDÓ, a szabály a `:disabled`-től bicskázik – így az app.js élő
   szerep-váltása nem kényszerül osztályt is tologatni. */
.zar-zarva input[type=checkbox]:disabled,
input[type=checkbox].jelolo-zart:disabled {
  opacity: 1; cursor: default;
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid #b9b09a; background: #fff;
  display: inline-block; vertical-align: middle; position: relative;
}
.zar-zarva input[type=checkbox]:disabled:checked,
input[type=checkbox].jelolo-zart:disabled:checked { background: var(--kek); border-color: var(--kek); }
.zar-zarva input[type=checkbox]:disabled:checked::after,
input[type=checkbox].jelolo-zart:disabled:checked::after {
  content: '✓'; position: absolute; inset: 0; color: #fff;
  font-size: 10px; line-height: 13px; text-align: center;
}
/* KIVÉTEL: a chipek jelölője vizuálisan REJTETT (a chip maga a felület), ezért a fenti
   szabályt itt VISSZA KELL VONNI – tételesen, mert az erősebb (0-3-1 a `.programnapok input`
   0-1-1-éhez képest), tehát MINDEN tulajdonságát ráülteti a rejtett jelölőre is.
   MÉRT KÖVETKEZMÉNY, ha kimarad: a `position: relative` kiütötte az `absolute`-ot, a 10 rejtett
   jelölő helyet foglalt, és a Programnapok oszlop 429 px-ről 643 px-re hízott – zárva más
   szélességű táblát kaptunk, mint nyitva. Új tulajdonságot a fenti szabályba csak úgy tegyél
   be, hogy ide is felveszed a párját. */
.zar-zarva .programnapok input[type=checkbox]:disabled {
  position: absolute; opacity: 0; width: auto; height: auto;
  appearance: auto; -webkit-appearance: auto; border: 0; background: none;
}
/* A chip színét a `:checked` szabály adja, és az a LETILTOTT jelölőre is áll – tehát zárva is
   pontosan azt mutatja, ami be van kapcsolva. Csak a kattinthatóság látszatát vesszük el:
   a kurzort és a hover-keretet, mindkét chip-állapotban. */
.zar-zarva .programnap-chip { cursor: default; }
.zar-zarva .programnap-chip:hover { border-color: #d8d0bf; }
.zar-zarva .programnapok input:checked + .programnap-chip:hover { border-color: #d99e12; }

/* Jelenlét-sáv: könnyű jelzés a szerkesztő tetején, ha más is szerkeszti ugyanazt.
   Nem riasztás – tájékoztatás, ezért visszafogott (ég-kék), nem piros. */
.jelenlet-sav {
  background: var(--egkek); color: var(--kek-sotet); border: 1px solid #c3d6ef;
  border-radius: 10px; padding: .5rem .8rem; margin: .6rem 0 .2rem;
  font-size: .9rem; line-height: 1.4;
}

/* Hónapváltó a Beosztás tetején (v49): „Szeptember (fut) · Október (készül)". A nem aktív hónap
   link, az aktív félkövér. Szöveges, nem gomb: navigáció, nem művelet. */
.honapvalto { margin: 0 0 .4rem; font-family: 'Baloo 2', sans-serif; font-size: 1.05rem; font-weight: 600; }
.honapvalto a { color: var(--kek); }

/* A futó/készülő/elmúlt/archív hónap AZONNAL látható megkülönböztetése a Beosztás oldalon – a TELJES
   oldal hátterén (`<body class="honap-keszulo/honap-elmult/honap-archiv">`, fej.php + `$BODY_OSZTALY`), nem
   egy dobozba zárt kereten: mivel a `body`-n kívül sehol nincs saját `background`, a böngésző a
   body hátterét a teljes vászonra (canvas) vetíti ki – tehát edge-to-edge, keret/lekerekítés
   nélkül tölti ki a képernyőt, a `.tartalom` max-width-jén és a fejlécen is túl. Futónál a
   `honap-*` osztály nincs kiírva, a nézet pontosan a mai marad. A táblázatot (.tabla-tok, benne a
   sorok/kiemelések) ez SZÁNDÉKOSAN nem éri el – az fehér kártyaként "lebeg" a színes alapon, hogy
   soha ne kelljen a KIEMELO_SZINEK palettával egyeztetni. A halvány, sűrűn csempézett, kisbetűs
   felirat (SVG data-URI, nincs új függőség, nincs JS) csak a body hátterén ül – mivel a background
   mindig a doboz TARTALMA ALATT fest, a fehér .tabla-tok és az opak sávok/chip-ek automatikusan
   eltakarják a rájuk eső részt, tehát nem kell semmilyen pointer-events/overlay trükk hozzá. */
/* A NEGYEDIK ESET (v50.3.0): az elmúlt, de még le nem zárt hónap. NEM kap ötödik színt – a színek
   jelentése kék = még nem él · semleges = most · papír = elmúlt, és ez a hónap a MÚLTBA tartozik,
   ugyanoda, ahova az archív. A különbséget a vízjel SZAVA és a sáv mondja ki (az önkéntesnek a
   kettő amúgy is ugyanaz: elmúlt hónap; a lezáratlanság koordinátori teendő).
   A SZÓ „elmúlt", és ez MÉRT KORLÁT, nem ízlés: a csempe éle egyúttal vágóél (a root <svg>
   `overflow:hidden`-je), a 72×44-es csempét pedig a mai leghosszabb szó, a „készülő" nagyjából
   kitölti (~62×38 px 14px-es félkövér Baloo 2-vel). Az „elmúlt" rövidebb, tehát biztonságos, és a
   vízjel-sűrűség egységes marad. Hosszabb szó (pl. „lezáratlan") vágódna – ahhoz nagyobb, vagyis
   RITKÁBB csempe kellene, és vizuálisan vissza kellene mérni. */
body.honap-keszulo, body.honap-archiv, body.honap-elmult { background-repeat: repeat; }
body.honap-keszulo {
  background-color: var(--keszulo-bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2744%27%20viewBox%3D%270%200%2072%2044%27%3E%3Ctext%20x%3D%2736.0%27%20y%3D%2722.0%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%20font-family%3D%27Baloo%202%2C%20sans-serif%27%20font-weight%3D%27700%27%20font-size%3D%2714%27%20fill%3D%27rgb%2846%2C111%2C183%29%27%20fill-opacity%3D%270.13%27%20transform%3D%27rotate%28-24%2036.0%2022.0%29%27%3Ek%C3%A9sz%C3%BCl%C5%91%3C%2Ftext%3E%3C%2Fsvg%3E");
}
body.honap-archiv {
  background-color: var(--archiv-bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2744%27%20viewBox%3D%270%200%2072%2044%27%3E%3Ctext%20x%3D%2736.0%27%20y%3D%2722.0%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%20font-family%3D%27Baloo%202%2C%20sans-serif%27%20font-weight%3D%27700%27%20font-size%3D%2714%27%20fill%3D%27rgb%28122%2C102%2C64%29%27%20fill-opacity%3D%270.13%27%20transform%3D%27rotate%28-24%2036.0%2022.0%29%27%3Earch%C3%ADv%3C%2Ftext%3E%3C%2Fsvg%3E");
}
body.honap-elmult {
  background-color: var(--archiv-bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2744%27%20viewBox%3D%270%200%2072%2044%27%3E%3Ctext%20x%3D%2736.0%27%20y%3D%2722.0%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%20font-family%3D%27Baloo%202%2C%20sans-serif%27%20font-weight%3D%27700%27%20font-size%3D%2714%27%20fill%3D%27rgb%28122%2C102%2C64%29%27%20fill-opacity%3D%270.13%27%20transform%3D%27rotate%28-24%2036.0%2022.0%29%27%3Eelm%C3%BAlt%3C%2Ftext%3E%3C%2Fsvg%3E");
}

/* A KÉSZÜLŐ / ARCHÍV hónap sávja: keretes, és görgetéskor is a képernyőn marad – a koordinátor
   (készülőnél) és mindenki (archívnál) ne veszíthesse szem elől, milyen hónapot néz. A
   `.hatarido-savs` rokona, de sticky: a tábla fejléce a `.tabla-tok`-on belül ragad, ez a lapon,
   fölötte. A közös `.allapot-sav` adja a formát, a `.keszulo-sav`/`.archiv-sav` csak a színt. */
.allapot-sav {
  position: sticky; top: 0; z-index: 5;
  color: var(--tinta); border-radius: 12px;
  padding: .55rem 1rem; margin: .4rem 0 .7rem; font-size: 1rem; font-weight: 600;
  font-family: 'Baloo 2', sans-serif; box-shadow: var(--arnyek);
}
.keszulo-sav { background: var(--keszulo-bg); border: 2px solid var(--keszulo-szegely); }
.archiv-sav  { background: var(--archiv-bg);  border: 2px solid var(--archiv-szegely); color: var(--archiv-tinta); }
/* Az elmúlt, le nem zárt hónap sávja SÁRGA (v50.3.0), nem papír-tónusú, mint a háttere: a háttér a
   MÚLTAT mondja, ez a sáv a TEENDŐT – „sárga = teendő" (a Hospitálók lapjának mércéje). Ezért erősebb
   a szegélye is, mint a másik két sávé: azok állapotot jelölnek, ez lezárásra vár. Meglévő
   színváltozókból, új nélkül. */
.elmult-sav  { background: var(--vaj); border: 2px solid var(--napfeny); }

/* Letöltés-formátumválasztó (PDF / Excel) – a gombsorba simul.
   A választó SAJÁT OSZTÁLYT kap, nem leszármazott-szabályt: a Hospitálók oldalon a legördülő az
   űrlapon KÍVÜL áll (a `form` attribútum köti hozzá), tehát egy `.letoltes-urlap select` szabály
   nem érné el – korábban ezért volt rajta inline stílus. Előtag-címke nincs (a vezérlő magától
   érthető), a legördülő nevét az `aria-label` viszi. */
.letoltes-urlap { display: inline-flex; align-items: center; gap: .35rem; }
/* A MÉRET IS AZ OSZTÁLYON van, nem a befoglaló soron: a Beosztás oldalon a vezérlő egy
   `.vezerlosor`-ban ül (az onnan kapná a közös magasságot), a Hospitálók eszközsorában viszont
   nem – ott a legördülő 3 px-szel magasabb volt a mellette álló gomboknál. Így a vezérlő
   bárhova betehető, és mindenütt ugyanúgy néz ki. */
select.letoltes-forma {
  width: auto; margin: 0; box-sizing: border-box; min-height: 2.15rem;
  padding-top: 0; padding-bottom: 0;
}

/* Vezérlősor (pl. a Beosztás fejléce alatt): a legördülő és a gombok AZONOS magasságúak.
   A gomb-változatok mérete már magától egyezik (lásd a MÉRET-EGYENLŐSÉG blokkot fent),
   de a natív legördülőnek saját belső magassága van – azzal csak a közös min-height hozza
   egy vonalba őket, a flex-közép pedig függőlegesen igazítja a feliratot. */
.vezerlosor .gomb, .vezerlosor select, .vezerlosor button {
  box-sizing: border-box; min-height: 2.15rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.vezerlosor select { padding-top: 0; padding-bottom: 0; }

/* Jelölő + mellette futó, TÖRDELHETŐ szöveg (pl. „Érzékeny beállítások is…”).
   A szöveg a kártya keretén belül marad, a jelölő pedig nem nyomódik össze. */
.jelolo-cimke { display: flex; align-items: flex-start; gap: .45rem; font-weight: 400; margin: 0; }
.jelolo-cimke input { flex: 0 0 auto; margin-top: .2rem; }
.jelolo-cimke span { min-width: 0; overflow-wrap: anywhere; }

/* Import-súgó tábla: a rövid fejlécek ne törjenek betűnként (mobilon a .kartya
   `overflow-wrap: anywhere`-je egyébként szótagolás nélkül, karakterenként tördel). */
.import-sugo-tok { margin: .3rem 0 .6rem; max-width: 54rem; }
.import-sugo th { white-space: nowrap; }
.import-sugo td:nth-child(2) { white-space: nowrap; text-align: center; }
.import-sugo td:first-child { min-width: 11rem; }
.import-sugo td:last-child { min-width: 15rem; }
.import-sugo code { overflow-wrap: anywhere; }

/* Levél-sablonok: a levélhez tartozó helyőrzők listája, a szövegdoboz alatt.
   Halvány doboz, hogy a szerkesztő mezőktől elváljon, de ne vonja el a figyelmet.
   A `max-width` a szövegdobozéhoz igazodik – szélesebb doboz alatt a leírások
   túl hosszú sorokká nyúlnának. A rácsot a közös `.adatsor` adja. */
.helyorzok {
  background: #faf7f0; border-radius: .5rem; padding: .55rem .7rem;
  margin: .5rem 0 .2rem; max-width: 44rem;
}
.helyorzok-cim { font-weight: 700; margin: 0 0 .3rem; }
.helyorzok code { font-size: .92em; white-space: nowrap; }
.helyorzok .sugo { margin: .5rem 0 0; }

/* Élesítés – „Ezt megtarthatod" tételei. A `label` alapból blokk-szintű és saját margója van
   (.7rem/.2rem), ezért egy `<br>`-rel tördelt magyarázat alatta indokolatlanul nagy üres sávot
   csinált. Itt a label margója nullázva, a magyarázat pedig a pipa alá, ahhoz igazítva kerül. */
.megtart { margin: 0 0 .9rem; }
.megtart:last-child { margin-bottom: 0; }
.megtart label { margin: 0; font-weight: 400; }
.megtart .sugo { margin: .1rem 0 0 1.55rem; }

/* Lábléc „Hiba jelzése": diszkrét, de minden oldalon ott van */
.lablec-hiba {
  background: none; border: 0; padding: .3rem .2rem; margin-top: .2rem;
  color: inherit; opacity: .75; font: inherit; font-size: .85rem;
  text-decoration: underline; cursor: pointer;
}
.lablec-hiba:hover { opacity: 1; }

/* Kézi kiemelő színek: a tr.kiemel-* szabályokat a fej.php generálja a
   KIEMELO_SZINEK palettából (mag.php) – szándékosan nincsenek itt beégetve. */

/* Swatch-választó: minden négyzet ABBAN a színben van, amivé a sort állítja.
   Azért nem natív <select>, mert iOS Safari az <option> hátterét nem rendereli. */
.szin-valaszto { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Ugyanaz a minta, mint a programnapok chipeknél: a rejtett jelölőt a saját címkéje tartsa,
   ne a lap gyökere (különben túlcsordulóvá teheti az oldalt). */
.szin-valaszto label { position: relative; display: inline-block; }
.szin-valaszto input { position: absolute; opacity: 0; pointer-events: none; }
.szin-korong {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: .55rem; cursor: pointer;
  border: 2px solid #d8d0bf; box-shadow: inset 0 0 0 1px #fff;
  font-size: 1.1rem; line-height: 1; color: #233;
}
.szin-korong:hover { border-color: #b9b09a; }
/* Kiválasztott állapot: vastag sötét keret + pipa (a pipa csak ilyenkor látszik) */
.szin-valaszto input:checked + .szin-korong { border-color: #233; border-width: 3px; font-weight: 700; }
.szin-valaszto input:focus-visible + .szin-korong { outline: 3px solid var(--kek); outline-offset: 2px; }
.szin-korong .pipa { visibility: hidden; }
.szin-valaszto input:checked + .szin-korong .pipa { visibility: visible; }
/* „nincs kiemelés”: átlós vonal jelzi, hogy ez törli a színt */
.szin-korong.szin-nincs {
  background: linear-gradient(to top right, transparent 46%, #b9b09a 46%, #b9b09a 54%, transparent 54%), #fff;
}

/* --- Ráérés-naptár (húzással jelölhető) --- */
.naptar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; max-width: 44rem; user-select: none; }
.naptar .fejnap { text-align: center; font-weight: 700; font-size: .8rem; color: #7a7466; }
.napkocka {
  background: #fff; border: 2px solid var(--keret); border-radius: 10px; text-align: center;
  padding: .55rem 0; cursor: pointer; font-weight: 700; touch-action: none; position: relative;
}
.napkocka.szombat { border-color: var(--napfeny); }
.napkocka.jelolt { background: var(--kek); border-color: var(--kek); color: #fff; }
.napkocka.multbeli { opacity: .35; cursor: default; }
/* Olvasó mód (lezárt hónap): a bejelölés LÁTSZIK (`.jelolt`), csak a kattinthatóság látszata
   kerül le – a húzás-kezelő a hiányzó `data-huzhato` miatt eleve el sem indul. */
.naptar.olvaso .napkocka { cursor: default; }
.napkocka.ures { border: 0; background: transparent; cursor: default; }
.napkocka .de-pont { position: absolute; top: 3px; right: 5px; font-size: .65rem; }

/* C24: kiemelt leadási határidő */
.hatarido-savs {
  background: var(--napfeny); color: var(--tinta); border-radius: 12px;
  padding: .7rem 1rem; margin: .7rem 0; font-size: 1.05rem; font-weight: 700;
  font-family: 'Baloo 2', sans-serif; box-shadow: var(--arnyek);
}
/* C23: a naptár alatt a kijelölt napok listája, napi kezdéssel / hétvégi sávokkal */
#nap-lista { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.nap-tetel {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
  background: var(--vaj); border: 1px solid var(--keret); border-radius: 10px; padding: .4rem .6rem;
}
.nap-tetel[hidden] { display: none; }   /* a display:flex különben felülírná a hidden attribútumot */
.nap-tetel-datum { font-weight: 700; min-width: 12rem; }
.nap-tetel .nap-tetel-mezo { font-weight: 400; margin: 0; display: inline-flex; align-items: center; gap: .3rem; }
.nap-tetel select { width: auto; padding: .25rem .4rem; margin: 0; }
.nap-torol { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--piros); font-size: 1rem; padding: .2rem .45rem; border-radius: 6px; line-height: 1; }
.nap-torol:hover { background: rgba(179,64,47,.12); }
@media (max-width: 720px) { .nap-tetel-datum { min-width: 100%; } }

/* --- Táblázatos listák --- */
table.lista { border-collapse: collapse; width: 100%; font-size: .92rem; background: #fff; }
table.lista th { text-align: left; padding: .45rem .6rem; border-bottom: 2px solid var(--napfeny); font-family: 'Baloo 2', sans-serif; }
table.lista td { padding: .4rem .6rem; border-bottom: 1px solid #eee8d8; }
table.lista tr:hover td { background: var(--vaj); }
/* Üzenetek-tábla: a szűk oszlopok (típus, név, dátum, állapot) nem tördelnek, így a maradék
   szélesség az Üzenet-oszlopnak jut – keskeny nézeten ott van a leghosszabb szöveg.
   A hosszú szó/URL is törik, hogy ne feszítse szét a táblát. */
.uzenet-tabla td.szuk { white-space: nowrap; }
.uzenet-tabla .uzenet-cella { white-space: normal; overflow-wrap: anywhere; min-width: 14rem; }
@media (max-width: 720px) {
  .uzenet-tabla .uzenet-cella { min-width: 11rem; }
}

.cimke { display: inline-block; border-radius: 8px; padding: .05rem .5rem; font-size: .8rem; font-weight: 700; }
.cimke-zold { background: #e6f3e6; color: var(--zold); }
.cimke-sarga { background: var(--vaj); color: #8a6d1a; }
.cimke-piros { background: #fae8e5; color: var(--piros); }
.cimke-szurke { background: #eee; color: #666; }
.cimke-kek { background: var(--egkek); color: var(--kek-sotet); }
.cimke-archiv { background: var(--archiv-bg); color: var(--archiv-tinta); }

/* K-N3: használati útmutató (renderelt Markdown) */
.utmutato { line-height: 1.6; }
.utmutato > *:first-child { margin-top: 0; }
.utmutato h1 { font-size: 1.6rem; margin: .2em 0 .5em; }
.utmutato h2 { font-size: 1.2rem; margin: 1.1em 0 .3em; border-bottom: 2px solid var(--napfeny); padding-bottom: .15em; }
.utmutato h3 { font-size: 1.02rem; margin: .9em 0 .2em; }
.utmutato h4 { font-size: .96rem; margin: .8em 0 .2em; color: var(--tinta); }
/* A szövegbeli hivatkozások horgonyra ugranak – a scroll-margin nélkül a cím a képernyő
   legtetejére tapadna, és nem látszana, hogy hova érkeztünk. */
.utmutato h1, .utmutato h2, .utmutato h3, .utmutato h4 { scroll-margin-top: .8rem; }
/* A táblázatot a renderelő .tabla-tok-ba csomagolja (keskeny nézeten ott görög, nem a lapon). */
.utmutato .tabla-tok { margin: .6em 0 .9em; }
.utmutato table.lista { font-size: .88rem; }
.utmutato ul { margin: .3em 0 .7em; padding-left: 1.3rem; }
.utmutato li { margin: .2em 0; }
.utmutato blockquote { margin: .6em 0; padding: .5em .9em; background: var(--vaj); border-left: 4px solid var(--napfeny); border-radius: 8px; }
.utmutato hr { border: 0; border-top: 1px solid var(--keret); margin: 1.2em 0; }

/* K-N9: megjelenítési sorrend – húzható lista */
.sorrend-lista { list-style: none; margin: .4rem 0; padding: 0; max-width: 30rem; }
.sorrend-lista li {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--keret); border-radius: 8px;
  padding: .45rem .6rem; margin: .3rem 0; cursor: grab;
}
.sorrend-lista li.huzva { opacity: .4; }
.sorrend-fogo { color: #b3a58f; cursor: grab; font-size: 1.15rem; }
.sorrend-nev { flex: 1; font-weight: 600; }
.sorrend-gombok { display: inline-flex; gap: .1rem; }
.sorrend-gombok .ikon-gomb { font-size: .8rem; padding: .1rem .4rem; }

/* Osztály-tábla: kompakt, VÍZSZINTESEN GÖRGETHETŐ (a .tabla-tok adja az overflow-x-et),
   és az első két oszlop – Aktív + Osztály – görgetéskor is a bal szélen marad.
   Így a tábla további oszlopokkal is bővíthető anélkül, hogy a sorok magasra nőnének.
   Egységes minden nézetben: nincs külön mobil/asztali logika. */
.osztaly-tabla { font-size: .82rem; width: max-content; min-width: 100%; }
/* A `table.lista td` erősebb az egyszerű `.osztaly-tabla td`-nél, ezért a kompakt
   cellabelső eddig nem érvényesült – a tábla-osztállyal együtt írva már igen. */
table.lista.osztaly-tabla td, table.lista.osztaly-tabla th { padding: .25rem .32rem; }
.osztaly-tabla input[type=number] { padding: .3rem .3rem; }

/* A rögzített cellák háttere KÖTELEZŐEN átlátszatlan, különben átlátszik rajtuk a görgetett tartalom. */
.osztaly-tabla .rogz { position: sticky; background: #fff; }
.osztaly-tabla .rogz-1 { left: 0; width: 3.2rem; min-width: 3.2rem; }

/* Igazítás – EGY helyen, ne tegyél `text-align`-ot a markupba.
   Minden FEJLÉC középre. Az adatok is középre, KIVÉVE a szöveges oszlopokat
   (Osztály, Helyszín, Létszám, Szükséges képzés): azokat balra igazítva könnyebb olvasni.
   A `table.lista th` erősebb az egyszerű `.osztaly-tabla th`-nál, ezért írjuk ki a
   tábla-osztállyal együtt. A rögzített oszlopokra ugyanez vonatkozik, így görgetés
   közben sem változik az igazítás. */
table.lista.osztaly-tabla th,
table.lista.osztaly-tabla td { text-align: center; }
table.lista.osztaly-tabla td:nth-child(2),   /* Osztály (név)     */
table.lista.osztaly-tabla td:nth-child(3),   /* Helyszín          */
table.lista.osztaly-tabla td:nth-child(5),   /* Létszám           */
table.lista.osztaly-tabla td:nth-child(6) {  /* Szükséges képzés  */
  text-align: left;
}
/* Az eltolás az Aktív oszlop VALÓS szélessége – az app.js méri és állítja be
   (betöltéskor, ablakméret- és tájolásváltáskor). A 3.2rem csak tartalék, ha nincs JS. */
.osztaly-tabla .rogz-2 { left: var(--rogz1-szel, 3.2rem); }
.osztaly-tabla td.rogz { z-index: 1; }
.osztaly-tabla th.rogz { z-index: 3; }         /* a fejléc rögzített cellái a legfelső rétegen */
.osztaly-tabla tr:hover td.rogz { background: var(--vaj); }
/* Finom jobb-él árnyék az utolsó rögzített oszlopon: jelzi, hogy jobbra még van tartalom.
   SZÁNDÉKOSAN box-shadow és NEM ::after: egy `right: -7px`-es pszeudó-elem a görgethető
   tartalom szélén túlra kerül, amitől a Safari fantom-szélességet számol, és az utolsó
   oszlop után üres területre lehet görgetni. Az árnyék nem növeli a tartalom szélességét. */
.osztaly-tabla .rogz-2 { box-shadow: 5px 0 6px -5px rgba(60,50,30,.35); }

/* Az oszlopok ne préselődjenek olvashatatlanul keskenyre. */
.osztaly-tabla .rogz-2 { min-width: 7.5rem; }
.osztaly-tabla th { white-space: nowrap; }


/* --- Figyelmeztetés-panel --- */
.figyelo { border-left: 5px solid var(--napfeny); }
/* A szakasz-fejléc a korábbi `h3` szerepét viszi, csak most nyitja is a szakaszt (Ciklus oldal,
   Figyelnivalók). A térköz a `details`-en ül, nem a `summary`-n: becsukva csak a fejléc van ott,
   és a szomszédos szakaszoknak akkor is kell levegő. */
.figyelo details { margin: .35rem 0; }
.figyelo summary { cursor: pointer; font-weight: 700; }
.figyelo ul { margin: .3em 0 .6em; padding-left: 1.2rem; }
.figyelo li { margin: .15em 0; font-size: .92rem; }

/* --- Belépő oldal --- */
.belepo-tok { max-width: 24rem; margin: 8vh auto; }
.belepo-tok .marka { justify-content: center; font-size: 1.8rem; margin-bottom: 1rem; }

/* --- Érzékeny szakasz: zárt, semleges megjelenés --- */
.zart-szakasz summary {
  cursor: pointer; font-weight: 700; color: #7a7466; padding: .4rem 0; list-style: none;
}
.zart-szakasz summary::before { content: '🔒 '; }
/* E29: egyértelmű nyitott/csukott jelzés a bizalmas blokkon */
.zart-szakasz summary .zart-nyil::after { content: '▸ megnyitás'; color: #7a7466; font-weight: 400; font-size: .85rem; }
.zart-szakasz[open] summary .zart-nyil::after { content: '▾ bezárás'; }

/* K4: hosszú kód-tokenek (pl. oszlopnevek) törjenek, ne csússzanak ki a dobozból */
code { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 720px) {
  .tartalom { padding: .6rem .6rem 3rem; }
  h1 { font-size: 1.35rem; }
  .menu a, .menu button.menu-gomb { padding: .3rem .45rem; font-size: .87rem; }
  table.beosztas { font-size: .8rem; }
  /* K4: az Önkéntesek szűrősora és a kártyák ne lógjanak ki mobilon */
  .kartya, .szuro-sor { overflow-wrap: anywhere; }
  .szuro-sor { gap: .4rem .7rem; }
  .szuro-sor input[type=text], .szuro-sor select { max-width: 100%; }
  .cimke { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   FELUGRÓ ABLAK (szerkesztés, jelzés, esemény)
   Középre igazított, görgethető – mobilon sem lóg ki semmi.
   ============================================================ */
.ablak-hatter {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(38,49,61,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ablak-hatter[hidden] { display: none; }
body.ablak-nyitva { overflow: hidden; }
.ablak {
  position: relative;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(38,49,61,.25);
  width: 100%; max-width: 34rem; max-height: 88vh; overflow-y: auto;
  padding: 1.3rem 1.3rem 1.1rem;
}
.ablak h2 { margin-top: 0; }
.ablak .ablak-bezar {
  position: absolute; top: .5rem; right: .6rem;
  background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: #7a7466;
  line-height: 1; padding: .3rem .5rem; border-radius: 8px;
}
.ablak .ablak-bezar:hover { background: var(--vaj); }
.ablak select, .ablak input[type=text], .ablak textarea { max-width: 100%; }
/* „Jelenleg itt van" – állapot-kijelző. A fixálást a táblázat 📌 ikonja kapcsolja; a
   bemutató-jelölés és az eltávolítás viszont IDE tartozik: mindkettő a most itt ülő emberre
   vonatkozik. A „ki kerüljön ide" külön blokk, elválasztó vonal alatt. */
.ablak-jelenlegi {
  background: var(--vaj); border: 1px solid var(--keret); border-radius: 10px;
  padding: .7rem .8rem; margin: .6rem 0 1rem;
  display: flex; gap: .7rem; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
/* A fixálás-jelölőnégyzet blokkja: a legördülőtől elválasztva, hogy látszódjon, ez már beállítás. */
.ablak-beallitas { margin: .9rem 0 1rem; }
.ablak-beallitas .sugo { margin-top: .2rem; }
/* Romboló művelet: külön SORBAN a mentés alatt, hogy ne legyen véletlenül eltalálható.
   Vonalat NEM kap – a felső blokkon belül marad, ugyanarra az emberre vonatkozik, mint a
   bemutató-jelölés fölötte. Az elválasztó vonal a KÉT BLOKK közé kerül (lásd alább). */
.ablak-veszelyzona { margin-top: .6rem; }
/* A „ki kerüljön ide" űrlap, ha van kit cserélni: vonallal elválasztva a fenti, MOSTANI
   beosztásra vonatkozó résztől. Üres cellánál nincs mitől elválasztani, ott az osztály elmarad. */
.ablak-elvalasztva { border-top: 1px solid var(--keret); margin-top: 1.2rem; padding-top: .9rem; }

/* --- Beosztás-tábla: kattintható helyek --- */
.hely-gomb {
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: .25rem .35rem; border-radius: 8px; width: 100%; min-height: 2rem;
}
.hely-gomb:hover { background: rgba(46,111,183,.12); outline: 1px dashed var(--kek); }
/* Szerkesztéskor a név-gomb és a fix-pin EGY SORBAN: a pin a név mellett jobbra (nem alatta) */
.hely-szerk { display: flex; align-items: center; gap: .1rem; }
.hely-szerk .hely-gomb { flex: 1; min-width: 0; }
/* E: függő beugrás – kis számláló buborék az X cella jobb-felső sarkában (csak koordinátor).
   pointer-events:none, hogy ne akadályozza az X kattintását. */
td.van-fuggo-be { position: relative; }
.fuggo-be-badge {
  position: absolute; top: 1px; right: 1px; z-index: 2; pointer-events: none;
  font-size: .6rem; font-weight: 700; line-height: 1;
  background: var(--napfeny); color: #233; border-radius: 8px; padding: .08rem .28rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* F: függő lemondás – jelző a név BAL oldalán (csak koordinátor), nem ütközik a jobb oldali sor-pinnel */
.fuggo-lemondas { font-size: .82rem; flex: none; }
.x-kattinthato { cursor: pointer; }
/* „Már jelezted” – az X marad látható (az X normál üzemállapot, 1. elv), de nem kattintható. */
.x-jelezve { opacity: .55; cursor: default; }
/* A cella-szintű fixálásnak NINCS külön vizuális jele: a fixáltság koordinátor-belső
   ütemezési állapot, kizárólag a 📌 mutatja (neki). A korábbi .hely-fixalt csík megszűnt. */
.pin { font-size: .75rem; }
.pin-gomb {
  background: none; border: 0; cursor: pointer; opacity: .25; font-size: .72rem;
  padding: 0 .15rem; line-height: 1;
}
.pin-gomb:hover { opacity: .8; }
.pin-gomb.pin-be { opacity: 1; }
.pin-gomb:disabled { opacity: .12; cursor: not-allowed; filter: grayscale(1); }
.pin-form { display: inline; margin: 0; }
/* sor- és nap-pin: valamivel hangsúlyosabb, mint a cella-pin */
.pin-gomb.pin-sor, .pin-gomb.pin-nap { font-size: .95rem; padding: 0 .2rem; }
.nap-cella { white-space: nowrap; }
/* A NAP-PIN NE TOLJA EL A HÓNAPNEVET. A pin csak a nap ELSŐ sorában van ott, folyásban viszont
   beljebb lökte a szöveget: a Dátum oszlop minden napnál egy sorral „ugrott". Ezért a cella
   FENNTARTJA a pin helyét (mindkét oldalon, hogy a középre igazítás is a helyén maradjon), a pin
   pedig abszolút pozícióval ül bele – így a hónapnév minden sorban ugyanott kezdődik.
   A fenntartott sáv CSAK szerkesztő módban kell: nézegetéskor nincs pin, ott fölösleges
   beljebb kezdés lenne. A `position: relative` nem elhagyható – enélkül a pin a LAP gyökeréhez
   igazodna, a `.beosztas-tok` vágása nem fogná, és az egész oldal vízszintesen túlcsordulna. */
table.beosztas.szerkeszt td.nap-cella { position: relative; padding-left: 1.5rem; padding-right: 1.5rem; }
table.beosztas.szerkeszt td.nap-cella .pin-form {
  position: absolute; left: .1rem; top: 50%; transform: translateY(-50%); margin: 0;
}
/* A fixált sor/nap KERETE megszűnt (a `.hely-fixalt` cellacsík után ez volt a második lépés).
   A fixáltságot kizárólag a 📌 pin-ikon jelzi: a táblán a NEVEK a fő információ, a fixáltság
   ehhez képest másodlagos, koordinátor-belső állapot – egy jelentést ne rajzoljunk ki kétszer.
   Ne vezess be új fixálás-jelölést a pin mellé. (9. elv) */

/* A3.3: szűrősor a beosztás tetején */
.szuro-sor {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem;
  background: #fff; border: 1px solid var(--keret); border-radius: 12px;
  padding: .5rem .8rem; margin: .8rem 0; box-shadow: var(--arnyek);
}
.szuro-sor .szuro-cimke { font-weight: 700; font-family: 'Baloo 2', sans-serif; }
/* Sortörés a szűrősor flex-konténerén BELÜL: a szűkítő szűrők az első sorban, a halmazt BŐVÍTŐ
   kapcsoló (pl. „inaktívak is") a másodikban. Nem két űrlap – a `data-azonnal` azonnali beküldés
   egyetlen űrlapot feltételez. Keskeny nézeten a sor amúgy is tördel, ez csak a törést garantálja. */
.szuro-tores { flex-basis: 100%; height: 0; }
/* `white-space: nowrap`: a címke szövege (pl. „tól:") ANONIM flex-elem a mező mellett, tehát a
   böngésző a maradék helyre szorítja – keskeny nézeten ettől tört ketté („tó" / „l:"). A nowrap
   nem a szűrősor tördelését gátolja: a `.szuro-sor` továbbra is szabadon tördel az ELEMEK közt,
   csak egy címke nem szakadhat szét a saját elemén belül. */
.szuro-elem { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.szuro-elem select { width: auto; max-width: 13rem; padding: .3rem .5rem; margin: 0; }
/* A dátummező a globális szabályból `width: 100%`-ot kapna, és felenné a címke helyét; a saját
   szélessége amúgy is kötött (a böngésző rajzolja a nn.hh.éééé maszkot). A padding a legördülőkkel
   azonos, hogy a szűrősor elemei egyforma magasak legyenek. */
.szuro-elem input[type=date] { width: auto; max-width: 100%; padding: .3rem .5rem; margin: 0; }

/* A7: pici, visszafogott gomb – CSAK a beosztás-táblázat esemény-sorában (`.esemeny-gombok`),
   ahol a sormagasság szűkös. Máshol NE használd: a normál gombméret a helyes (mérce: Kezdőlap,
   Ráéréseim). Ez az EGYETLEN méret-variáns; a `gomb-kicsi` kivezetve. */
.gomb.gomb-pici { padding: .12rem .5rem; font-size: .78rem; border-radius: 7px; line-height: 1.5; }
.ikon-gomb {
  background: none; border: 0; cursor: pointer; font-size: 1rem; padding: .25rem .35rem; border-radius: 8px;
}
.ikon-gomb:hover { background: rgba(38,49,61,.08); }
/* Inaktív ikon: LÁTSZIK (a sor eszközei ne ugráljanak), de nem kattintható. */
.ikon-gomb:disabled { opacity: .18; cursor: not-allowed; filter: grayscale(1); }
.ikon-gomb:disabled:hover { background: none; }
.oszlop-eszkoz { width: 4.6rem; white-space: nowrap; text-align: right; }
/* N14: villáskulcs + sor-pin EGYMÁS MELLETT (nem egymás alatt), a sor jobb szélén.
   Így nem nő meg minden sor magassága. Balról jobbra: 🔧, ✉️ (beugró-keresés), majd 📌 (jobb = sor-fixálás). */
.eszkoz-sor { display: flex; align-items: center; justify-content: flex-end; gap: .05rem; }
.eszkoz-sor .pin-form { display: inline-flex; }
.helyszin-cella { text-align: center; }
.esemeny-gombok { display: inline-flex; gap: .35rem; margin-left: .5rem; flex-wrap: wrap; vertical-align: middle; }
.apro-inline { font-weight: 400; font-size: .85em; opacity: .85; }
/* Esemény-sor: a név külön sorban, teljes szélességben (14. elv), alatta a „Tartja".
   Mobilon egy sorba zsúfolva ez a rész szétesett. */
.esemeny-cim { display: block; }
.esemeny-sor .apro-inline { display: block; margin-top: .1rem; }
/* Események oldal: dátum+idő / helyszín / Tartja – három külön sor. */
.esemeny-info { margin: .35rem 0; display: flex; flex-direction: column; gap: .15rem; }

/* Beoszthatóság az önkéntes adatlapján (v35): osztályonként egy jelölőnégyzet.
   A `zart` az az osztály, ahol hiányzik az előfeltétel – ott a pipa is `disabled`, ez csak
   a látható jelzés hozzá. NEM érzékeny adat: a nyílt részen van. */
.beoszthatosag { display: flex; flex-wrap: wrap; gap: .15rem 1.2rem; margin-top: .3rem; }
.beoszthatosag-elem { font-weight: 400; display: flex; align-items: center; gap: .25rem; }
.beoszthatosag-elem.zart { color: #8a8f98; }
.beoszthatosag-felt { font-size: .78rem; color: #8a8f98; white-space: nowrap; }

/* Beugrás-ok lista a felugró ablakban: a tények, felsorolva – nem riasztás, csak tájékoztatás. */
.ok-lista { margin: .3rem 0 .7rem; padding-left: 1.1rem; }
.ok-lista li { margin: .15rem 0; }

/* Ciklus-lépcső: a hónap 4 állapota lépésekként, az aktuális kiemelve.
   Keskeny nézeten tördel – ezért nincs abszolút pozicionált összekötő vonal. */
.ciklus-lepcso {
  list-style: none; margin: .1rem 0 .7rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .1rem; align-items: center;
}
.ciklus-lepcso .lepes { display: inline-flex; align-items: center; }
.ciklus-lepcso .lepes + .lepes::before {
  content: '→'; margin: 0 .3rem; color: #b9b2a2; font-size: .9rem;
}
.ciklus-lepcso .lepes-tok {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem .2rem .3rem; border-radius: 999px;
  font-size: .85rem; background: #f1ede2; color: #7a7466;
}
.ciklus-lepcso .lepes-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none;
  background: #ddd6c4; color: #6b6558; font-size: .78rem; font-weight: 700;
}
.ciklus-lepcso .lepes-kesz .lepes-tok { background: #e6f3e6; color: var(--zold); }
.ciklus-lepcso .lepes-kesz .lepes-szam { background: var(--zold); color: #fff; }
.ciklus-lepcso .lepes-aktiv .lepes-tok {
  background: var(--napfeny); color: #4a3c10; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(247,179,43,.45);
}
.ciklus-lepcso .lepes-aktiv .lepes-szam { background: #4a3c10; color: var(--napfeny); }
/* A FUTÓ hónap információsora két élő hónapnál (v50): halkabb, mint a készülő teljes blokkja –
   halvány alap, nincs lépéssor. A készülő az, amiért a koordinátor az oldalra jön. */
.kartya.futo-sor { background: #fbf9f4; }
.kartya.futo-sor h2 { font-size: 1.05rem; }
/* A gombsor a blokk UTOLSÓ eleme, és a bal szélen kezdődik (lásd CLAUDE.md „Gomb-elhelyezés”).
   A felső térköz ITT dől el, nem inline stílusból: a `<p class="gombsor">` és a
   `style="margin-top:…"` alakok ezért vezethettek ki. Ahol a gombsor táblacellában vagy
   közvetlenül egy cím alatt ül, ott a helyi `style="margin:0"` írja felül. */
.gombsor { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .9rem 0 0; }
/* A form is FLEX legyen, ne blokk: blokként a benne álló inline-block gomb köré sorláda kerül,
   ami a betű alávágásával ~0.5 px-szel magasabb a gombnál – az űrlapba csomagolt gomb így
   fél pixellel feljebb ült, mint a mellette álló, űrlap nélküli <a class="gomb">.
   A gombsorban lévő űrlapra ezért NE írj `style="display:inline"`-t: flex-elemként úgyis
   blokká alakul (semmit nem old meg), viszont felülütné ezt a szabályt.
   Térközt itt szándékosan NEM adunk: a legtöbb ilyen űrlapban egyetlen gomb van, a többes
   pedig maga mondja meg a sajátját (lásd `.letoltes-urlap`). */
.gombsor form { margin: 0; display: flex; align-items: center; }

/* Lapozó (Tevékenység-napló) – a lista FÖLÖTT és ALATT ugyanaz a vezérlő.
   Nem `.gombsor`: az a blokk ZÁRÓ eleme (lásd CLAUDE.md „Gomb-elhelyezés”), a lapozó viszont
   navigáció, és a táblázat fölött is áll – ezért kap saját, alul-felül szimmetrikus térközt.
   Az elrendezés egyébként azonos: balra igazítva, tördeléssel, normál gombmérettel (méret-variánst
   NEM vezetünk be „mert sok gomb van egy sorban”). */
.lapozo { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.lapozo form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.lapozo .lapozo-cimke { display: inline-flex; align-items: center; margin: 0; font-weight: 600; font-size: .85rem; color: #7a7466; }
/* SPECIFICITÁS: az `input[type=number]` alapszabály 0-1-1 (`width:100%; max-width:30rem`),
   egy puszta `.lapozo-mezo` (0-1-0) tehát NEM ütné – a lapszám-mező a kártya széléig nyúlna. */
/* A magasság (1.7rem) a gombbal KÖZÖS érték – e nélkül a mező és a gomb pár pixellel eltérne,
   és a sor lépcsőzne. A `box-sizing: border-box` miatt a keret nem jön hozzá egyikhez sem. */
.lapozo input.lapozo-mezo {
  width: 3.1rem; max-width: 3.1rem; height: 1.7rem; margin: 0; padding: 0 .3rem;
  text-align: center; font-size: .85rem; line-height: 1.17; border-radius: 8px;
}
/* Lapozó-gomb: IKON-felirat (« ‹ › »), négyzetes, keretes – NEM a `.gomb` család, ezért nem
   sérti az „egyetlen gombméret" szabályt (ahogy az `.ikon-gomb` sem). Kizárólag a lapozóban.
   A keret itt megengedett: a `* { box-sizing: border-box }` miatt nem növeli a dobozt, és
   nincs mihez „egyforma méretűnek" lennie – a `.gomb` méret-egyenlősége erre nem vonatkozik.
   `<a>` és `<button>` ugyanazt a szabályt kapja, hogy az elérhető és a letiltott irány pixelre
   egyforma legyen; a RÖGZÍTETT `line-height` azért kell, mert a chevronok (« ‹ › ») tartalék-
   betűkészletből jönnek, annak nagyobb a sormagassága – e nélkül a gomb magasabb lenne a
   szomszédjánál (ugyanaz a csapda, mint a `.gomb`-nál).
   A `min-width` teszi négyzetessé: a `«` és a `‹` eltérő szélességű glifa, e nélkül a négy
   gomb négyféle méretű lenne. */
.lapozo-gomb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.7rem;
  background: #fff; color: var(--kek); border: 1px solid #cfc7b4; border-radius: 8px;
  padding: 0 .3rem; font: 600 1rem 'Karla', sans-serif; line-height: 1.17;
  text-decoration: none; cursor: pointer;
}
.lapozo-gomb:hover { background: var(--egkek); border-color: var(--kek); }
/* Letiltott irány: LÁTSZIK, csak most nem elérhető – a hovert is le kell fogni, különben
   aktívnak látszana (ugyanaz az elv, mint a `.gomb:disabled`-nél). */
.lapozo-gomb:disabled, .lapozo-gomb:disabled:hover {
  background: #f4f1e8; color: #a8a294; border-color: #e3dccb; cursor: not-allowed;
}

/* ---- Hospitálók oldal ----
   Hatókörhöz kötött elemek, KIZÁRÓLAG a `?o=hospitalok` lapon (ahogy a `.lapozo-*` a naplóban,
   a `.gomb-pici` pedig a beosztás-táblában). Ne vidd máshova, és ne csinálj belőlük általános
   variánst – a többi felület a meglévő kártya-, gomb- és címke-osztályokkal dolgozik.

   SÁRGA CSAK TEENDŐT JELÖL, minden más szürke. Ez a lap nem riaszt: a hospitáló-út lassú, a
   lemorzsolódás pedig normális – ugyanabból a tőből, mint az „X normál üzemállapot" elv. */

/* Számláló-sáv: öt doboz, állomásonként egy. Kattintásra szűr (a doboz maga a link).
   A SÁRGA a teendőt jelöli (van esedékes levél a csoportban), a KÉK keret azt, hogy ez a doboz
   szűr éppen – a kettő két külön dolog, ezért két külön jelölés.

   GRID, NEM FLEX – a dobozok MINDEN nézetben azonos méretűek. Flexszel (`flex: 1 1 9rem` +
   wrap) az utolsó sorban egyedül maradó ötödik doboz teljes szélességre nyúlt. Az `auto-fit`
   (nem `auto-fill`): ha mind az öt elfér egy sorban, kitöltik a szélességet; több sorra törve
   minden doboz azonos oszlopszélességű marad. A `grid-auto-rows: 1fr` a SOROK magasságát is
   egyenlővé teszi – enélkül a tördelt feliratú első sor magasabb lenne a másodiknál. */
.hosp-szamlalo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  grid-auto-rows: 1fr; gap: .55rem; margin: .8rem 0;
}
/* A szám és a felirat KÖZÉPRE: a feliratok eltérő hosszúak és eltérő számú sorra törnek –
   középre igazítva a tördelt második sor a szám alatt marad, és a sáv egységes marad. */
.hosp-doboz {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center;
  background: #fff; border: 1px solid var(--keret); border-radius: 10px;
  padding: .6rem .8rem; box-shadow: var(--arnyek);
  text-decoration: none; color: var(--tinta);
}
.hosp-doboz:hover { border-color: var(--kek); }
.hosp-doboz.teendo { border-color: var(--napfeny); background: var(--vaj); }
.hosp-doboz.teendo .hosp-doboz-szam { color: #8a6d1a; }
.hosp-doboz.aktiv { box-shadow: inset 0 0 0 2px var(--kek); border-color: var(--kek); }
.hosp-doboz-szam { font-family: 'Baloo 2', sans-serif; font-size: 1.6rem; line-height: 1.1; }
.hosp-doboz-cim { font-size: .83rem; color: #7a7466; }

/* Eszközsor: a szűrő balra, a műveletek jobbra (a `.hosp-jobbra` tolja szét). */
.hosp-eszkozsor { gap: .5rem .6rem; }
.hosp-jobbra { margin-left: auto; }

/* A teendő-jelzés: sárga karika. Csak ott, ahol tényleg VAN mit tenni. */
.hosp-karika {
  display: inline-block; border-radius: 999px; padding: .06rem .55rem;
  background: var(--vaj); color: #8a6d1a; border: 1px solid #f0dcb4;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}

/* Csoport: összecsukható fejléc, alatta a lista. A becsukott fejléc is kiírja a létszámot és a
   teendőt – becsukva ne rejtsen el semmit, amiért ki kellene nyitni. */
.hosp-csoport { margin: .8rem 0 0; }
.hosp-csoport > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--keret); border-radius: 10px; padding: .62rem .8rem;
}
.hosp-csoport > summary::-webkit-details-marker { display: none; }
.hosp-csoport > summary::before { content: '▸'; color: #7a7466; font-size: .85rem; width: .9rem; flex: none; }
.hosp-csoport[open] > summary::before { content: '▾'; }
.hosp-csoport[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: #f2eee2; }
.hosp-csoport-cim { font-family: 'Baloo 2', sans-serif; font-size: 1.02rem; font-weight: 600; }
.hosp-csoport-db { font-size: .85rem; color: #7a7466; }
.hosp-nincs-teendo { margin-left: auto; font-size: .8rem; color: #7a7466; }
.hosp-csoport summary .hosp-karika { margin-left: auto; }
.hosp-lista {
  background: #fff; border: 1px solid var(--keret); border-top: 0;
  border-radius: 0 0 10px 10px; overflow: hidden;
}

/* Egy hospitáló sora – szintén lenyitható, de MÁSIK OLDALRA NEM VISZ. */
.hosp-tetel { border-top: 1px solid #f2eee2; }
.hosp-tetel:first-child { border-top: 0; }
.hosp-tetel > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; padding: .7rem .9rem;
}
.hosp-tetel > summary::-webkit-details-marker { display: none; }
.hosp-tetel > summary:hover { background: var(--vaj); }
.hosp-tetel[open] > summary { background: var(--egkek); }
.hosp-pipa { flex: none; width: 1rem; }
.hosp-nev { font-weight: 700; min-width: 11.5rem; }
.hosp-nev small { display: block; font-weight: 400; font-size: .8rem; color: #7a7466; }
.hosp-mondat { flex: 1 1 12rem; min-width: 0; font-size: .89rem; }
.hosp-datum { font-size: .85rem; color: #7a7466; white-space: nowrap; }
.hosp-ikonok { display: flex; gap: .3rem; flex: none; margin-left: auto; }
.hosp-ikon {
  width: 1.8rem; height: 1.8rem; border: 1px solid var(--keret); border-radius: 7px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; color: #5a6773;
}
.hosp-ikon.figyelem { border-color: var(--napfeny); background: var(--vaj); }
.hosp-nyil::after { content: '⌄'; }
.hosp-tetel[open] > summary .hosp-nyil::after { content: '⌃'; }

/* A lenyitott sor: két hasáb – mi történt, és mi van hátra. */
.hosp-reszlet {
  background: #fcfaf3; border-top: 1px solid #e6dcc4;
  padding: .95rem 1.1rem 1.1rem 2.6rem;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem;
}
.hosp-reszlet h4 { font-family: 'Baloo 2', sans-serif; font-size: .95rem; margin: 0 0 .4rem; }
.hosp-alkalom {
  display: flex; flex-wrap: wrap; gap: .55rem; font-size: .87rem;
  padding: .22rem 0; border-bottom: 1px dotted #e6dcc4;
}
.hosp-alkalom:last-of-type { border-bottom: 0; }
.hosp-alkalom-o { font-weight: 600; }
.hosp-alkalom .sugo { margin: 0; }
.hosp-tetel-sor { font-size: .87rem; padding: .3rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.hosp-tetel-sor .sugo { margin: 0; }
.hosp-tetel-cimke { min-width: 10.5rem; color: #7a7466; }
.hosp-ok { color: var(--zold); font-weight: 700; }
.hosp-var { color: #8a6d1a; font-weight: 700; }

/* Haladás-pöttyök: 3 hospitálás · módszertani képzés · bemutató.
   tele (zöld) = megtörtént, szaggatott (sárga) = kitűzve, üres = hátravan. MOBILON IS MARAD. */
.hosp-pottyok { display: inline-flex; align-items: center; gap: .28rem; flex: none; }
.hosp-potty { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; background: #fff; border: 2px solid #ddd6c6; }
.hosp-potty.tele { background: var(--zold); border-color: var(--zold); }
.hosp-potty.kituzott { border-color: var(--napfeny); border-style: dashed; background: var(--vaj); }
.hosp-valaszto { display: inline-block; width: 1px; height: .8rem; background: #ddd6c6; margin: 0 .1rem; }
.hosp-plusz { font-size: .75rem; color: #7a7466; margin-left: .1rem; }

@media (max-width: 820px) {
  .hosp-reszlet { grid-template-columns: 1fr; padding-left: 1.1rem; }
}
@media (max-width: 720px) {
  .ablak { padding: 1.1rem .9rem 1rem; max-height: 92vh; }
  .ablak-jelenlegi { flex-direction: column; align-items: flex-start; }
  table.beosztas { font-size: .78rem; }
  .esemeny-gombok { display: flex; margin-left: 0; margin-top: .3rem; }
  /* A számláló-sáv keskeny nézeten OLDALIRÁNYBAN görgethető: öt doboz egymás alatt elnyelné
     a lapot, márpedig a sáv a tájékozódásé, nem a tartalomé. A 2 oszlopos rács (mind az öt
     szám görgetés nélkül) FELMERÜLT ÉS ELVETVE (Roland, 2026-09-07): a sáv ELEJE a fontosabb,
     az út elején állókkal kell foglalkozni – a hátsó dobozok görgetéssel elérhetők.
     A FIX oszlopszélesség itt is kell: `grid-auto-columns` nélkül a szélesség tartalomfüggő
     lenne, és a dobozok megint különböző méretűek lennének. */
  .hosp-szamlalo {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 8.6rem;
    grid-auto-rows: auto; overflow-x: auto; padding-bottom: .3rem; overscroll-behavior-x: contain;
  }
  /* A soron a név és a pöttyök maradnak egy sorban, az állapot és a dátum alájuk kerül. */
  .hosp-nev { min-width: 0; flex: 1 1 auto; }
  .hosp-mondat { flex: 1 0 100%; order: 5; }
  .hosp-datum { order: 6; }
  .hosp-ikonok { order: 7; }
  .hosp-jobbra { margin-left: 0; flex-basis: 100%; height: 0; }
}