:root {
    color-scheme: dark;
    --bg: #12161c;
    --surface: #1b212b;
    --surface2: #232a35;
    --border: #2d3542;
    --text: #e6e9ee;
    --text-dim: #8b95a5;
    --text-faint: #5b6472;
    --accent: #4f8cff;
    --success: #34c77b;
    --warning: #e6a23c;
    --danger: #e5484d;
    --dot-color: #ffffff08;
}

/*
 * A RÉGI TÉMÁK (dark, light, ocean, jungle, sky, pink, coffee) DEFINÍCIÓJA
 * INNEN TÖRÖLVE (2026-09-25, Attila jóváhagyásával).
 *
 * MIÉRT LEHETETT TÖRÖLNI VESZÉLYTELENÜL
 * A `theme_init_snippet.php` / `theme-switcher.js` 2026-09-24 óta a
 * `data-theme` attribútumot MINDIG csak `"paper"`-re állítja (a sötét
 * változat a `data-tonus="sotet"` külön attribútummal jelzi magát) — a régi
 * témanevek (`dark`, `ocean`, …) sosem kerülnek ténylegesen a `<html>`-re,
 * a régi mentett `localStorage` értéket az első betöltéskor azonnal átírja
 * `paper`/`paper-dark`-ra. A `[data-theme="dark|light|ocean|jungle|sky|pink|coffee"]`
 * szelektorok tehát élesben SOSEM futottak le a redesign óta — halott CSS
 * volt, nem egy még használt, csak nem elérhető beállítás.
 *
 * A `:root` (a fájl elején) VÁLTOZATLAN marad: az az egyetlen szabály, ami
 * `data-theme` attribútum NÉLKÜL, JS-hiba/letiltott JS esetén is lefut —
 * ez a tényleges vésztartalék, ezt nem érinti ez a takarítás.
 */

/*
 * Papír (meleg, világos alapú) téma — a 2026 őszi megújulás első lépése.
 *
 * MIÉRT EGY ÚJ TÉMA, ÉS NEM A MEGLÉVŐK ÁTÍRÁSA
 * Az új arculat (papírszerű alap, sötét tinta-oldalsáv, saját betűtípusok)
 * először VÁLASZTHATÓKÉNT kerül ki: élesben, valódi adatokkal lehet
 * kipróbálni, és ha valami nem jó, semmit nem kell visszabontani — aki nem
 * választja, annál egy képpont sem változik.
 *
 * Ezért a téma MINDEN eltérése `[data-theme="paper"]` alá van zárva, a
 * betűtípusok is: a böngésző a fontfájlokat csak akkor tölti le, ha egy
 * ténylegesen alkalmazott szabály hivatkozik rájuk.
 *
 * A színek kontrasztja mérve (WCAG): a szöveg 17,9 / 10,8 / 6,8 : 1 fehéren,
 * a kiemelő kék 6,5 : 1, a fehér felirat a kék gombon 6,5 : 1.
 *
 * A komponensek (oldalsáv, gombok, táblázatok) a fájl végén, a „PAPÍR TÉMA”
 * szakaszban vannak.
 */
[data-theme="paper"] {
    color-scheme: light;
    --bg: #f5f2eb; --surface: #ffffff; --surface2: #ece7dc; --border: #ddd6c8;
    --shadow: #17171c1f;
    --text: #17171c; --text-dim: #3d3d45; --text-faint: #5a5a63;
    --accent: #2a55c9; --success: #1f7a4d; --warning: #a85a0c; --danger: #c23a34;
    /* Rámutatáskori gombszínek — lásd a „Gombok” részt a PAPÍR TÉMA szakaszban. */
    --accent-hover: #1c3f9e; --danger-hover: #9e2c27;
    --dot-color: transparent;
    /*
     * GOMB/KÁRTYA-GEOMETRIA VÁLTOZÓKÉNT (v2.339.0, kiegészítve v2.340.0-ban
     * `--card-bg`/`--card-blur`-rel).
     *
     * A sarok-lekerekítés, az árnyék és — v2.340.0 óta — a kártya-háttér/
     * elmosás korábban be volt égetve a `.btn`/`.card`/mezők szabályaiba.
     * Azért lettek változóvá, hogy a portál (lásd lentebb, `[data-app="portal"]`)
     * egy helyen felülírhassa őket — az admin (ami nem hordozza a `data-app`
     * attribútumot) itt, az EREDETI értékekkel marad, tehát változatlan.
     */
    --radius-btn: 8px; --radius-card: 16px;
    --shadow-card: none; --card-border-color: var(--border);
    --card-bg: var(--surface); --card-blur: none;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    /*
     * IKON-SZÍNEZÉS (includes/icons.php).
     *
     * Az emoji-k helyére kerülő SVG-ikonok EGYETLEN markup-készletből állnak —
     * a világos/sötét változat közötti különbség csak ez a három szín-lépcső
     * és az árnyék. Papíron tömör, telített kék (jó kontraszt fehér alapon),
     * Papír sötétben ez a blokk lentebb (`[data-tonus="sotet"]`) felülíródik
     * fényes, üveges gradiensre.
     */
    --icon-stop-0: #6f8dff; --icon-stop-1: #5a78e0; --icon-stop-2: #3648c9;
    --icon-shadow: 0 2px 4px rgba(60,90,200,0.35);
}

/*
 * PORTÁL ARCULAT — VÁLTOZÓK (v2.339.0: 1. lépés, finomhangolás; v2.340.0:
 * 2. lépés, „teljes hatás” — lásd Attila jóváhagyását lent).
 *
 * Attila arculati terve szerint (ultimatesupport.hu-hoz közelítve) a portál
 * melegebb hátteret, kékebb kiemelő színt, pirula-alakú gombokat/fület és
 * üveges, lekerekített kártyákat/fejlécet kap — CSAK A PORTÁLON, nem az
 * adminon (Attila: „Csak finomhangolással először a komplett portálon.”,
 * majd a 2. lépésre: „Csak ha még ezt teszed bele: üveges pirula-nav, lebegő
 * fejléc akkor milyen lenne? … Geist, Instrument Serif-et ne használjunk.”,
 * a canvas-terv jóváhagyása után „ok mehet”).
 *
 * A v2.339.0 finomhangolás (szín, enyhe sarok-lekerekítés, lágy árnyék) itt
 * ALAPÉRTELMEZETTKÉNT benne marad a v2.340.0 „teljes hatás” értékeiben —
 * nincs két külön kapcsoló, a portál mindig a legutóbb jóváhagyott állapotot
 * mutatja.
 *
 * A [data-app="portal"] attribútumot minden portál oldal <html> taggje
 * hordozza (lásd az egyes portal/*.php fejlécét) — az admin nem, ezért ez a
 * blokk az admin felületre NEM hat, csak a portálra. A komponens-szintű
 * felülírások (`.pt-sav`, `.pk-*`) lentebb, a „PORTÁL FINOMHANGOLÁS,
 * KOMPONENS-FELÜLÍRÁSOK” szakaszban állnak — ITT, a fájl elején csak azért,
 * mert ez a blokk (mint minden alap-változó blokk) beégetett hexaszínt
 * tartalmaz, és több lapspecifikus teszt-szkript (pl. teszt_papir_riport.php)
 * a SAJÁT szakasza és a „PAPÍR SÖTÉT” címsor közt nem tűr beégetett színt —
 * a fájl elején, minden ilyen szakasz ELŐTT állva ez a blokk nem esik bele
 * egyikbe sem.
 *
 * MIÉRT PONT A „PAPÍR SÖTÉT” SZAKASZ ELŐTT (és nem, mondjuk, utána)
 * A `[data-theme="paper"][data-tonus="sotet"]` és ez a blokk ugyanolyan
 * specifikusságú (két attribútum-szelektor) — döntetlennél a KÉSŐBB álló
 * szabály nyer. Ha ez a blokk a Papír sötét UTÁN állna, sötét portálon is a
 * világos, krémszínű hátteret adná vissza, ami hibás. Így, hogy előtte áll,
 * sötét témán a szokásos sötét paletta marad érvényben (a --shadow-card/
 * --card-border-color/--card-bg/--ink sötét párját — ahol szükséges — a
 * lenti „PAPÍR SÖTÉT — generált” lista adja, egy magasabb specifikusságú,
 * három attribútumos szabállyal, ami a sorrendtől függetlenül is nyer).
 *
 * A SZÓ-SZINTŰ SZÍNKIEMELÉS (a canvas-terven a „segíthetünk” szó kék,
 * dőlt-helyett-Geist kiemelése) SZÁNDÉKOSAN KIMARADT a kódból: a `<h1>`
 * szövege fordítási kulcsból jön (`portal_help_title`), és a magyar/angol/
 * német mondat szórendje eltér — egy hardcoded szóhatár csak magyarul
 * működne helyesen, a másik két nyelven vagy hibás helyre esne, vagy
 * egyáltalán nem a megfelelő szót emelné ki. A címsor Geist betűtípussal
 * jelenik meg, kiemelés nélkül.
 */
[data-theme="paper"][data-app="portal"] {
    /*
     * KIPRÓBÁLÁS (2026-10-25, Attila kérése): a csatolt terv teljes
     * színvilága — kékesebb oldalháttér, tiszta fehér felületek (a korábbi
     * üveg/elmosás helyett), hűvösebb szürke szövegszínek és szegélyek. A
     * terv saját hexái kerültek ide, nem csak hasonló árnyalatok, hogy
     * tényleg ugyanaz legyen, amit küldött.
     */
    --bg: #f1f5f9;
    --surface2: #f8fafc;
    --border: #e2e8f0;
    --text: #0f172a; --text-dim: #64748b; --text-faint: #94a3b8;
    --accent: #2563eb; --accent-hover: #1d4ed8;
    /* A kitöltött gombok (korábban majdnem-fekete „tinta”) most a terv
       kékjét kapják — lásd a globális portál-gomb felülírásnál is. */
    --ink: #0f172a;
    --radius-btn: 999px; --radius-card: 22px;
    /* A korábbi üveges kártya-árnyék (elmosással, fényes belső szegéllyel)
       helyett a terv egyszerű, lapos árnyéka — tömör fehér felületekhez
       illik, nem áttetszőhöz. */
    --shadow-card: 0 10px 30px rgba(0,0,0,.04);
    --card-border-color: #e2e8f0;
    --card-bg: #ffffff;
    --card-blur: none;
    --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

/*
 * ADMIN ARCULAT — VÁLTOZÓK (v2.341.0, „teljes hatás” — Attila: „legyen teljes
 * hatás ha nem jó legyen visszaút”).
 *
 * Attila eredeti terve szerint ("az lenne a következő lépés az egészet egy
 * arculatra hozni") az admin ugyanazt a végállapotot kapja, mint a portál
 * v2.340.0-ban — SZÁNDÉKOSAN AZONOS értékekkel (nem admin-saját árnyalattal):
 * ugyanaz a krém háttér, kék kiemelő szín, pirula-gombok, üveges kártyák,
 * Geist betűtípus. Egy vizuális tervet (canvas) látott előtte, azt hagyta
 * jóvá közvetlenül a „teljes hatás” szintre (a portálnál használt köztes
 * finomhangolás-only lépés kihagyásával).
 *
 * A [data-app="admin"] attribútumot az admin_header.php egyetlen közös
 * <html> tagje hordozza (MINDEN admin oldal ezen keresztül nyílik meg) — a
 * portál nem, ezért ez a blokk a portálra NEM hat, csak az adminra.
 *
 * VISSZAÚT (Attila kérte, „ha nem jó legyen visszaút"): ez a blokk és az őt
 * követő „ADMIN ARCULAT, KOMPONENS-FELÜLÍRÁSOK” szakasz TISZTÁN ADALÉK —
 * egyetlen meglévő admin-szabályt sem írnak felül helyben, csak a
 * [data-app="admin"] alatt adnak hozzá magasabb specifikusságú, változó-
 * vezérelt párokat. Visszavonás: (1) az admin_header.php <html> tagjéről a
 * data-app="admin" attribútum eltávolítása, VAGY (2) ez a két szakasz
 * törlése a stíluslapból — bármelyik önmagában elég, és semmit nem kell
 * emiatt máshol módosítani.
 */
[data-theme="paper"][data-app="admin"] {
    /*
     * A PORTÁL SZÍNVILÁGA ITT IS (2026-10-25, Attila kérése: „Minden az
     * új designban legyen") — ugyanazok a hexák, amiket a portál kapott
     * (lásd [data-app="portal"] feljebb), nem csak hasonló árnyalatok.
     * Ez a blokk önmagában ADALÉK (lásd a fenti VISSZAÚT-megjegyzést) —
     * a struktúra (statisztika-csempék, jegylista táblázat stb.) egyelőre
     * változatlan, csak a szín- és felület-nyelv követi a portálét.
     */
    --bg: #f1f5f9;
    --surface2: #f8fafc;
    --border: #e2e8f0;
    --text: #0f172a; --text-dim: #64748b; --text-faint: #94a3b8;
    --accent: #2563eb; --accent-hover: #1d4ed8;
    --ink: #0f172a;
    --radius-btn: 999px; --radius-card: 22px;
    --shadow-card: 0 10px 30px rgba(0,0,0,.04);
    --card-border-color: #e2e8f0;
    --card-bg: #ffffff;
    --card-blur: none;
    --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0);
    background-size: 22px 22px;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
}

/* Enyhén dinamikus, lassan lebegő háttér-fény - a téma accent színéhez igazodik */
body::before, body::after {
    content: ''; position: fixed; z-index: -1; border-radius: 50%;
    filter: blur(90px); opacity: 0.16; pointer-events: none;
    background: var(--accent);
}
body::before { width: 460px; height: 460px; top: -140px; left: -120px; animation: bgFloat1 28s ease-in-out infinite; }
body::after { width: 400px; height: 400px; bottom: -160px; right: -100px; animation: bgFloat2 34s ease-in-out infinite; }

@keyframes bgFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(70px, 50px) scale(1.18); }
}
@keyframes bgFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, -40px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

/*
 * .ikon-svg — az emoji-k helyére kerülő SVG-ikonok közös alapja
 * (includes/icons.php). A körülötte lévő szöveg méretét követi, ugyanúgy,
 * ahogy egy emoji-karakter is tenné — DE nem szó szerint 1em: a kézzel
 * rajzolt ikonok nem töltik ki edzeéltől-élig a 200×200-as rajzterületüket
 * (pl. a `company` ikon ablakai csak 30%-os áttetszőséggel, a doboz belsejében
 * állnak), így 1em-en, hétköznapi (14-20px-es) felirat mellett gyakorlatilag
 * egy színes folttá mosódnak — Attila jelezte, hogy a v2.337.0 admin/portál
 * feliratok mellé került ikonok (pl. Profil „Cégnév a felületen" fejléce)
 * alig kivehetők, jóval kisebbnek látszanak, mint a helyettük álló emoji volt.
 * 1.3em-re emelve (`clamp`-pel legalább 16px, hogy nagyon apró feliratnál se
 * tűnjön el) a belső részletek is látszanak, a bal oldali menüsáv (17px,
 * `.app-nav a .ikon-svg` felülírással) és a nagy, önálló ikon-vitrinek
 * (landing oldal) mérete változatlan marad.
 */
.ikon-svg {
    width: clamp(16px, 1.3em, 48px); height: clamp(16px, 1.3em, 48px);
    vertical-align: -0.24em;
    flex: none;
    filter: drop-shadow(var(--icon-shadow));
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
    max-height: 38px; max-width: 150px; width: auto; height: auto;
    object-fit: contain; display: block; border-radius: 6px;
}
.app-sidebar-brand .brand-logo { max-height: 34px; max-width: 130px; }
.brand-badge {
    width: 36px; height: 36px; border-radius: 10px; background: #4f8cff22; color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: monospace;
}
.brand-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--text-faint); font-family: monospace; }

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent); color: #fff; border: none; border-radius: var(--radius-btn, 8px);
    padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
/*
 * A MÁSODLAGOS GOMBNAK SAJÁT RÁMUTATÁS KELL.
 *
 * MI VOLT A BAJ
 * Az általános `.btn:hover` egy `brightness(1.08)` szűrő. Színes gombon ez
 * jól látszik — a másodlagos gomb viszont sötét, alig telített háttérrel
 * dolgozik, ahol nyolc százalék világosítás gyakorlatilag láthatatlan.
 *
 * A felhasználó ilyenkor nem tudja, hogy a gomb egyáltalán kattintható-e.
 * A világos keret és a világosabb háttér együtt egyértelmű visszajelzés.
 */
.btn.secondary:hover {
    background: var(--surface); border-color: var(--text-faint); color: var(--text);
}
.btn.danger { background: var(--danger); }
.btn:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; }

/*
 * OSZTOTT GOMB — fő művelet + lenyíló változatok.
 *
 * A válaszküldésnél a gomb és a státuszválasztó korábban két külön elem volt.
 * Egybe kerültek, de a VÁLASZTOTT ÁLLAPOT LÁTSZIK a gombon: enélkül a
 * kattintás előtt nem derülne ki, mi fog történni — a lenyíló menü magában
 * elrejtené a döntést.
 */
.splitbtn { position: relative; display: inline-flex; }
.splitbtn > .btn { border-radius: 8px 0 0 8px; }
.splitbtn > .btn-arrow {
    background: var(--accent); color: #fff; border: none; border-left: 1px solid #ffffff2e;
    border-radius: 0 8px 8px 0; padding: 9px 11px; font-size: 11px; cursor: pointer;
    display: inline-flex; align-items: center;
}
.splitbtn > .btn-arrow:hover { filter: brightness(1.08); }
.splitbtn > .btn-arrow:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; }
.splitbtn-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    min-width: 260px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px; box-shadow: 0 12px 34px #00000059;
}
.splitbtn-menu.open { display: block; }
.splitbtn-menu button {
    /* A pötty és a felirat egy sorban: `flex`, nem `block`. */
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; background: none; border: none;
    color: var(--text); font-size: 13px; padding: 9px 11px; border-radius: 7px; cursor: pointer;
}

/*
 * ÁLLAPOT-PÖTTY A KÜLDÉS MENÜJÉBEN.
 *
 * A négy sor szövege hasonló hosszú, és a küldés pillanatában nincs idő
 * olvasni — egy szín az elején elég, hogy a szem a jó sorra essen.
 *
 * A SZÍN A `statusOptions()`-BÓL JÖN, soronként, inline változóként. Így
 * ugyanaz az állapot a jegylistán és itt is ugyanolyan színű; ha egyszer
 * megváltozik, mindkét helyen magától változik. Egy külön színlista itt
 * pár hónap alatt szétcsúszna az igazitól — és egy szín, ami máshol mást
 * jelent, rosszabb, mint ha nem lenne szín.
 *
 * A szín nem HORDOZZA az információt: a felirat végig ott van mellette.
 */
.allapot-potty {
    flex: none;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--allapot, var(--text-faint));
}
.splitbtn-menu button:hover { background: var(--surface2); }
.splitbtn-menu button.sel { color: var(--accent); font-weight: 600; }
/* A jelenlegi választás pipát kap: a menü megnyitásakor látszik, hol állunk. */
.splitbtn-menu button.sel::after { content: ' ✓'; }

.card {
    background: var(--card-bg, var(--surface)); border: 1px solid var(--card-border-color, var(--border));
    border-radius: var(--radius-card, 16px); box-shadow: var(--shadow-card, none);
    backdrop-filter: var(--card-blur, none); -webkit-backdrop-filter: var(--card-blur, none);
}
.card-pad { padding: 20px; }

.login-shell { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; padding: 32px; }
.login-eyebrow { font-family: monospace; font-size: 12px; color: var(--text-faint); letter-spacing: 0.08em; margin-bottom: 6px;}
.login-title { font-size: 20px; font-weight: 700; margin: 0 0 22px; }

label { display: block; font-size: 11px; font-family: monospace; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 5px; }

/*
 * MAGYARÁZÓ SZÖVEG A CÍMKÉN BELÜL.
 *
 * MI VOLT A BAJ (a tesztelő szúrta ki)
 * A fenti `label` szabály RÖVID címkékre készült: nagybetűs, monospace,
 * 11 képpontos, ritkított. A `text-transform` viszont ÖRÖKLŐDIK, így ha egy
 * címkébe magyarázó bekezdés kerül — az ügyfélportálon a „Csak visszajelzés"
 * négyzet alatt egy ötven szavas mondat —, az is végig nagybetűs lett.
 * Olvashatatlan, és kiabálásnak hat egy olyan szövegen, ami épp megnyugtatni
 * akar.
 *
 * MIÉRT ÍGY JAVÍTJUK
 * A globális szabályhoz nem nyúlunk: az a rövid címkékre helyes, és minden
 * űrlap erre épül. Csak a címkén BELÜLI magyarázó szövegre mondjuk vissza a
 * normál szedést — ott a nagybetű sosem szándékos.
 */
label .muted,
label .small.muted {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], input[type=tel], input[type=url],
/* A `month` KIMARADT ebből a felsorolásból, ezért a hónapválasztó nyersen,
   a rendszer alapstílusával jelent meg — sötét lapon világos dobozként.
   A típusonkénti felsorolás mindig ezzel a kockázattal jár: ami nincs benne,
   az nem hibázik, csak kilóg. */
input[type=datetime-local], input[type=time], input[type=month],
input[type=week], textarea, select {
    width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-btn, 8px);
    color: var(--text); padding: 10px 12px; font-size: 13px; font-family: inherit; margin-bottom: 16px;
}
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    /*
     * AZ IGAZÍTÁST KIMONDJUK, NEM A BÖNGÉSZŐRE BÍZZUK.
     *
     * `appearance: none` mellett a legördülő szövegének igazítása
     * böngészőnként eltér — a bejelentő űrlapon a Kategória és a Prioritás
     * középre igazítva jelent meg, miközben a szöveges mezők balra. Az
     * űrlap ettől hullámzott: bal, közép, bal, közép.
     *
     * A `start` és nem a `left`: a szöveg irányához igazodik, tehát egy
     * jobbról balra író nyelvnél is helyes marad.
     */
    text-align: start;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b95a5'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    padding-right: 36px;
    cursor: pointer;
}
select option { background: var(--surface); color: var(--text); }
select option:checked, select option:hover { background: var(--accent); color: #fff; }
select optgroup { background: var(--surface); color: var(--text-dim); }

input[type=file] {
    width: 100%; color: var(--text-faint); font-size: 13px; font-family: inherit;
    margin-bottom: 16px; padding: 4px 0;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
    background: var(--surface2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 14px; font-size: 13px; font-family: inherit;
    font-weight: 500; cursor: pointer; margin-right: 12px; transition: background 0.15s, border-color 0.15s;
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover {
    background: var(--surface); border-color: var(--accent);
}

/* --- Egyedi fájl-választó (a natív gomb felirata a böngésző saját nyelvét használja, nem
   fordítható HTML/CSS-sel - ezért ugyanúgy saját komponensre cseréljük, mint a select-eket) --- */
.file-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.file-wrap input.file-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-trigger {
    background: var(--surface2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 14px; font-size: 13px; font-family: inherit;
    font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; flex-shrink: 0;
}
.file-trigger:hover { background: var(--surface); border-color: var(--accent); }
.file-label { color: var(--text-faint); font-size: 13px; word-break: break-word; }

/*
 * DÁTUMMEZŐ OLVASHATÓSÁGA.
 *
 * MIT LEHET ÉS MIT NEM
 * Maga a NAPTÁRABLAK a böngésző saját felülete — nem lehet stílusozni, és
 * minden weboldalon ugyanúgy néz ki. Ez böngészőnként eltér, és nincs rá
 * szabványos befolyásunk.
 *
 * AMI VISZONT A MI KEZÜNKBEN VAN: maga a mező. A benne lévő dátum
 * alapértelmezetten apró és halvány — itt nagyobbra és olvashatóbbra
 * állítjuk, hogy legalább a beírt érték jól látszódjon.
 */
input[type=date] {
    font-size: 15px;
    letter-spacing: .02em;
}

/* A naptár-ikon nagyobb kattintófelületet kap: mobilon a mai méret szűk. */
input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
    padding: 4px;
    transform: scale(1.15);
}
input[type=date]::-webkit-calendar-picker-indicator:hover { filter: invert(0.85); }
textarea { resize: vertical; }
/* Szám-mező: a böngésző pörgetőnyilai sötét témán idegenek, elrejtjük */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Keresőmező: a natív "x" törlőgomb világos, halványítjuk */
input[type=search]::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }

input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- Egyedi, JS-vezérelt lenyíló (a natív <select> popup nem stílusozható rendesen) --- */
/*
 * A 16 pixeles alsó margó az ŰRLAPOKHOZ való, ahol a mezők egymás ALATT
 * sorakoznak. VÍZSZINTES sorban viszont holt teret csinál, és mivel az ilyen
 * sorok középre igazítanak, a legördülő feljebb csúszik a szomszédjánál.
 *
 * Ez háromszor okozott hibát (2.99.5 táblázatok, 2.112.4 közreműködők), ezért
 * álljon itt, hol van kikapcsolva:
 *     table .select-wrap   — minden táblázatcellában
 *     .collab-add          — közreműködő hozzáadása
 *     .filters .select-wrap — szűrősorok
 *     .select-wrap.compact  — tömör változat
 *
 * ÚJ VÍZSZINTES SORNÁL erre gondolj először, ha valami elcsúszottnak látszik.
 */
.select-wrap { position: relative; margin-bottom: 16px; }
.select-wrap.compact { margin-bottom: 0; width: auto; display: inline-block; }

/*
 * TÁBLÁZAT CELLÁJÁBAN NINCS ALSÓ MARGÓ.
 *
 * A 16 pixel az űrlapokhoz való, ahol a mezők egymás ALATT sorakoznak. Egy
 * táblázatsorban viszont holt teret csinál: a sor 78 pixel magas lett, pedig
 * a legmagasabb vezérlő 37. A cellák `vertical-align: middle`-lel középre
 * igazodnak, így a legördülő feljebb csúszott a szomszédos mezőknél — a sor
 * elemei nem egy vonalban látszottak.
 *
 * Az oldalak egyenként reszelték le a margót (`.tenant-table select {...}`),
 * csakhogy a margó nem a <select>-en van, hanem a JS által köré tett
 * wrapperen — a helyi szabályok ezért nem érték el. Egy hely, minden táblázat.
 */
table .select-wrap { margin-bottom: 0; }
.select-wrap select.select-native {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0;
}
.select-trigger {
    /* Ugyanaz az ok, mint a natív `select`-nél: az igazítás kimondva. */
    text-align: start;
    width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 10px 36px 10px 12px; font-size: 13px; font-family: inherit;
    cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b95a5'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
.select-wrap.compact .select-trigger { width: auto; padding: 6px 30px 6px 10px; font-size: 12px; background-position: right 8px center; background-size: 13px; }

/* A legördülő színpöttye (data-dot az <option>-ön). A prioritás és a státusz
   színe eddig csak a listák címkéin látszott — a választóban nem, pedig ott
   dől el. Zászló helyett kör: kisebb, és nem visz be új alakot a felületre. */
/*
 * Közreműködő hozzáadása: legördülő + gomb egy sorban.
 *
 * A .select-wrap 16 pixeles alsó margót hoz az űrlapokról, ahol a mezők egymás
 * ALATT állnak. Egy vízszintes sorban ez holt teret csinál a legördülő alatt,
 * és mivel a sor középre igazít, a legördülő feljebb csúszik a gombnál.
 *
 * Ugyanaz az ok, mint a táblázatoknál (2.99.5) — ott a `table .select-wrap`
 * szabály oldotta meg. Itt nincs táblázat, ezért kell külön.
 */
/*
 * KÖZREMŰKÖDŐ HOZZÁADÁSA — EGY SOR, KÉT ELEM, KESKENY OLDALSÁV.
 *
 * MI VOLT A BAJ (Attila szúrta ki élesben, 2026-09-11)
 * A gomb szövege kilógott az oldalsávból jobbra. Két dolog találkozott:
 *
 *   - a legördülő `flex: 1`-et kapott, de `min-width: 0` NÉLKÜL. A rugalmas
 *     elem alapból nem zsugorodik a saját tartalma alá, tehát a `flex: 1`
 *     itt nem csinált semmit
 *   - a gomb `white-space: nowrap`, tehát nem tud sortörni
 *
 * Így a sor legkisebb szélessége a két elem tartalmának összege lett — ami
 * több, mint amennyi hely van.
 *
 * MIÉRT NEM A GOMB SZÖVEGÉT RÖVIDÍTJÜK
 * Az „+ Hozzáadás" elférne, de elveszne, hogy MIT ad hozzá. A közreműködő
 * felvétele nem visszafordíthatatlan, de következménye van: az ügyfél
 * kollégája a portálon is látni fogja a jegyet. Ezt a gomb mondja meg, ne a
 * fölötte lévő címke.
 *
 * A MEGOLDÁS KÉT LÉPCSŐS
 * Előbb a legördülő zsugorodik (a szövege pontokkal rövidül, ez már be volt
 * állítva). Ha így sem fér el, a gomb a következő sorba kerül. Ez a sorrend
 * szándékos: a hosszú cégnevet elrejteni kisebb veszteség, mint két sorba
 * törni a vezérlőt.
 *
 * MIND A HÁROM NYELVEN KELL MŰKÖDNIE. Angolul „Add collaborator" rövid, és
 * magyar felületen ez a hiba HÓNAPOKIG nem látszott volna — a német
 * „Mitwirkende hinzufügen" ugyanolyan hosszú, mint a magyar.
 */
.collab-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.collab-add .select-wrap { margin-bottom: 0; flex: 1 1 130px; min-width: 0; }
.collab-add .btn { flex: 0 0 auto; }

/*
 * JELÖLŐNÉGYZET ÉS VÁLASZTÓGOMB CÍMKÉJE — NEM NAGYBETŰS.
 *
 * MI VOLT A BAJ (Attila szúrta ki, 2026-09-11)
 * A fenti `label` szabály RÖVID mezőcímkékre készült: nagybetűs, monospace,
 * ritkított. „NÉV", „E-MAIL CÍM" — ott ez helyes.
 *
 * A jelölőnégyzet címkéje viszont nem címke, hanem MONDAT: „Levelet kap a rá
 * osztott jegyekről", „Kezelheti az ismétlődő jegyeket". Végig nagybetűvel
 * ezek olvashatatlanok, és kiabálásnak hatnak egy egyszerű kapcsolón.
 *
 * MIÉRT ÁLTALÁNOS SZABÁLY
 * Negyvenkét ilyen címke van a rendszerben. Ha laponként javítanánk, a
 * következő új kapcsolónál újra elő kellene venni — és valaki elfelejtené.
 *
 * A `:has()` a böngészők 2023 óta ismerik. Ha valaha régebbit kell
 * kiszolgálni, a kiesés nem törés: a címke visszakapja a nagybetűs alakot,
 * ami csúnya, de működik.
 */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
label:has(> select),
label:has(> .select-wrap) {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}

/*
 * A LENYÍLÓ LISTA IS A CÍMKÉN BELÜL VAN.
 *
 * MI VOLT A BAJ (Attila szúrta ki, percekkel a bevezetés után)
 * Az előző javítás csak a JELÖLŐNÉGYZETES címkékre szólt. Amikor egy
 * választó került egy címkébe, a `text-transform` öröklődése miatt nemcsak a
 * felirat, hanem a LENYÍLÓ LISTA ELEMEI is nagybetűsek lettek — a saját
 * választó gombja ugyanúgy, mint a panel sorai.
 *
 * A KÜLÖNBSÉG, AMI ELDÖNTI
 * A választó FÖLÖTT álló címke („SZEREPKÖR") rövid mezőcímke, az maradjon
 * nagybetűs. A választót MAGÁBA FOGLALÓ címke viszont egy sorban álló
 * mondat — ott a nagybetű ugyanolyan hiba, mint a jelölőnégyzetnél.
 */

/*
 * PORTÁLOS DOKUMENTUM — GÖRGETHETŐ SZÖVEGDOBOZ.
 *
 * MI VOLT A BAJ (Attila jelezte)
 * A tájékoztató teljes hosszában kifolyt a lapra, így a visszaigazoló gomb a
 * lap legaljára került. Aki nem görgetett végig, nem látta, hogy van mit
 * megnyomni — egy visszaigazolás, amit nem találnak meg, nem visszaigazolás.
 *
 * A MAGASSÁG KÉPERNYŐARÁNYOS (vh), nem fix képpont: telefonon és nagy
 * monitoron is marad hely a gomboknak. Alsó határ azért van, mert nagyon
 * alacsony ablakban a doboz használhatatlanul keskeny lenne.
 */
.dokumentum-szoveg {
    /*
     * A DOBOZ AKKORA, AMENNYI HELY MARAD — nem fix arány.
     *
     * Az 52vh közel volt, de a lábléc miatt 60 képpont még kilógott, és a
     * lapot mégis görgetni kellett. A `calc()` a maradék helyet méri: a
     * levont 460 képpont a fejlécet, a kártya szegélyét, a címet, a
     * jelölőnégyzetet, a gombot, a magyarázó sort és a láblécet fedi.
     *
     * Élőben mérve: a lap túllógása 60 px-ről 2 px-re csökkent.
     *
     * A `min-height` kis ablakban lép be. Ott a lap görgethető marad, és ez
     * így helyes: telefonon a görgetés természetes, egy 80 képpontos
     * szövegdoboz viszont használhatatlan lenne.
     */
    /*
     * A MARADÉK HELYET TÖLTI KI — flex-elemként.
     *
     * A korábbi `calc(100vh - 460px)` közelítés volt, és alacsony ablakban
     * nullára esett. Flex-elemként a doboz azt kapja, ami a címtől és a
     * műveleti sávtól marad, számolgatás nélkül.
     *
     * A KORÁBBI 220 KÉPPONTOS ALSÓ HATÁR ragasztotta be: a doboz nem tudott
     * a tartalma alá zsugorodni, nem adott helyet, és a lap kezdett görgetni
     * helyette. Az alsó határ lejjebb került, és flex-elemként a doboz azt
     * kapja, ami marad.
     */
    flex: 1 1 auto;

    /*
     * EGYETLEN ALSÓ HATÁR, NE KETTŐ.
     *
     * Elsőre `min-height: 0`-t is írtam ide a flex-zsugorodás miatt, alatta
     * pedig egy nagyobb értéket — a későbbi nyer, tehát az első HALOTT SOR
     * volt, ami mást ígért, mint ami történik. Az ellenpróba mutatta meg:
     * a `min-height: 0` kivétele semmit nem változtatott.
     *
     * ALACSONY ABLAKBAN TUDJON ZSUGORODNI.
     *
     * A korábbi 220 képpontos alsó határ megakadályozta, hogy a doboz
     * elférjen — nem adott helyet, és a LAP kezdett görgetni helyette. Egy
     * kisebb alsó határ mellett a doboz görget, ahogy kell.
     *
     * A gomb elérhetőségét ettől függetlenül a tapadó műveleti sáv
     * garantálja — az minden ablakméretnél működik.
     */
    /* Nagyon alacsony ablakban ennyire zsugorodhat — 198 képpontos ablakban
       mérve 58 képpont lett, és a gomb így is látszott. */
    min-height: 60px;
    overflow-y: auto;
    padding: 4px 16px 4px 2px;
    margin: 4px 0 4px;

    /* A felső-alsó vonal jelzi, hogy a szöveg itt kezdődik és végződik —
       enélkül a görgetés ténye csak a sáv megjelenéséből derülne ki. */
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.dokumentum-szoveg p { line-height: 1.6; margin: 0 0 12px; }
.dokumentum-szoveg .dok-cim {
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--text-faint);
    margin: 20px 0 8px;
}
.dokumentum-szoveg .dok-cim:first-child { margin-top: 4px; }
.dokumentum-szoveg .dok-lista { margin: 0 0 12px; padding-left: 20px; }
.dokumentum-szoveg .dok-lista li { line-height: 1.6; margin-bottom: 4px; }

/* Billentyűzettel is görgethető legyen: a doboz fókuszt kaphat. */
.dokumentum-szoveg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * A VISSZAIGAZOLÓ SÁV A KÉPERNYŐ ALJÁRA TAPAD.
 *
 * MI VOLT A BAJ (a tesztelő mérte ki négy ablakméreten)
 * 423 képpontnál alacsonyabb ablakban a lap görgetni kezdett, és a
 * jelölőnégyzet meg a gomb a hajtás alá került. Ezen a lapon a felhasználó
 * nem tud továbbmenni, amíg nem nyom egy gombot — ha a gomb nem látszik, a
 * kapu csapdának tűnik.
 *
 * MIÉRT TAPADÁS, ÉS NEM ÚJABB MÉRETSZÁM
 * Egy nagyon alacsony ablakban nincs elég hely mindennek. Bármilyen számot
 * választanánk, marad olyan méret, ahol nem fér bele. A tapadó sáv viszont
 * minden méretnél működik.
 *
 * AZ ÁTLÁTSZATLAN HÁTTÉR KELL: enélkül a mögötte görgő szöveg átüt rajta.
 */
/*
 * FORMÁZÁSI SÚGÓ A SZÖVEGMEZŐ ALATT.
 *
 * MI VOLT A BAJ (Attila kérdezte: „honnan fogja tudni, hogyan kell formázni?")
 * A szabályok egy súgóbuborékban voltak — amit senki nem nyit ki, ha nem
 * tudja, hogy van mit keresni benne. Ráadásul a szöveg elavult volt: még
 * csak a bekezdésekről szólt, a szakaszcímekről és a felsorolásról nem.
 *
 * Ezért a mező ALATT áll, ahol épp gépel, és PÉLDÁVAL: a „csupa nagybetűs
 * sorból szakaszcím lesz" mondatot el kell olvasni és értelmezni, a példát
 * elég megnézni.
 */
.formazas-sugo {
    margin: -8px 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
}
.formazas-cim {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint);
    margin-bottom: 6px;
}
.formazas-tabla { width: 100%; border-collapse: collapse; }
.formazas-tabla td {
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: top;
    border: 0;
}
/* A példa oszlopa rögzített szélességű: így a magyarázatok egy vonalban futnak. */
.formazas-tabla td:first-child {
    width: 210px;
    padding-right: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.formazas-tabla td:last-child { color: var(--text-faint); }
.formazas-megjegyzes {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-faint);
}


.dokumentum-kartya {
    /*
     * A KÁRTYA MAGASSÁGA A KÉPERNYŐHÖZ KÖTÖTT.
     *
     * A levont érték a fejlécet és a külső margókat fedi. Ettől a lap nem
     * görget, a kártyán belül pedig a szövegdoboz veszi át a görgetést.
     */
    display: flex;
    flex-direction: column;

    /*
     * A LEVONT ÉRTÉK MÉRT, NEM BECSÜLT.
     * 110 képpontnál a lábléc miatt még 88 képpont túllógás maradt; élőben
     * mérve 200-nál esett nullára.
     */
    max-height: calc(100vh - 200px);
}

/*
 * NAGYON ALACSONY ABLAKBAN HELYET NYERÜNK.
 *
 * MI VOLT A BAJ (a tesztelő mérte, majd én is, feltöltés után)
 * 223 képpontos nézetben — fekvő telefon, kis laptop, nagyított böngésző —
 * a cím, a verziósor, a szöveg, a jelölő, a gomb, a magyarázat és a lábléc
 * együtt 280 képpontot igényelt. A gomb a hajtás alá került, pedig ezen a
 * lapon a felhasználó addig nem tud továbbmenni.
 *
 * MINDEN ÉRTÉK ITT LEMÉRT, NEM BECSÜLT. Lépésenként mértem, mit mennyit ad:
 * a kártya magassága, a doboz alsó határa, a térközök, végül a verziósor és
 * a lábléc elrejtése. A gomb 223 képpontnál 220/223-nál lett látható.
 *
 * A SORREND TUDATOS: előbb a térközök fogynak, aztán a másodlagos
 * információ (verziószám, magyarázó sor, lábléc), és csak a legvégén a
 * szövegdoboz. A gomb elérhetősége mindegyiknél fontosabb.
 *
 * AMI NEM TŰNIK EL: a cím, a szöveg, a jelölőnégyzet és a gomb. Azok nélkül
 * a lap értelmét vesztené.
 */
@media (max-height: 520px) {
    .dokumentum-lap { padding-top: 8px; padding-bottom: 8px; }
    .dokumentum-lap .topbar { margin-bottom: 8px; }

    /* A fejléc alcíme („Tájékoztató") másodlagos. */
    .dokumentum-lap .brand-sub { display: none; }

    /* A lábléc verziószáma ilyen magasságban nem fér bele. */
    .dokumentum-lap ~ .powered-by { display: none; }

    .dokumentum-kartya {
        padding: 8px;
        /* 58 = a közös menüsor (kb. 37 ilyen alacsony ablakban) + a lap két 8 pixeles belső margója + tartalék. */
        max-height: calc(100vh - 58px);

        /*
         * A KÁRTYA NE GÖRGESSEN — a `.card` alapból `overflow: auto`, és
         * emiatt a gyerekei nem zsugorodtak, hanem a kártya kezdett
         * görgetni, elrejtve a gombot. Itt a doboz görget, a kártya nem.
         */
        overflow: hidden;
    }
    .dokumentum-kartya h2 { font-size: 14px; margin-bottom: 0; }

    /* A cím alatti verziósor és a gomb alatti magyarázat is másodlagos. */
    .dokumentum-kartya > .small.muted { display: none; }
    .dokumentum-muveletek .small.muted { display: none; }

    /*
     * A DOBOZ ALSÓ HATÁRA ITT A LEGKISEBB.
     *
     * Élesben mérve 223 képpontos nézetben a gomb még 5 képponttal lelógott.
     * A hiányzó helyet innen vettem el: 28 képpontnál a doboz két sort mutat,
     * és tíz képpont tartalék marad a gomb alatt.
     *
     * Ez tudatos csere: kevesebb látható szöveg egy görgethető dobozban
     * elviselhető, egy elérhetetlen gomb nem.
     */
    .dokumentum-szoveg { min-height: 28px; }

    .dokumentum-muveletek { margin-top: 6px; padding-top: 6px; }
    .dokumentum-muveletek .inline-check { margin-bottom: 6px; }
    .dokumentum-muveletek .btn { padding: 5px 12px; font-size: 13px; }
}

.dokumentum-muveletek {
    /* A flex-elrendezés miatt a sáv magától az aljára kerül és ott marad;
       zsugorodnia nem szabad, különben a gomb nyomódna össze. */
    flex: 0 0 auto;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    /* A kártya háttere — a sáv mögött nem üthet át a görgő szöveg. */
    background: var(--surface);
}

/*
 * LENYITHATÓ BEÁLLÍTÁSOK A CSAPAT SORÁBAN.
 *
 * MI VOLT A BAJ (Attila jelezte a képernyőképpel)
 * Négy értesítési vezérlő és két jogosultság-jelölő állt egymásra tornyozva
 * minden sorban. Egy személy 180 képpont magas lett, a bal oldali oszlopok
 * pedig szinte üresen álltak mellette.
 *
 * A ZÁRT ÁLLAPOT NEM REJTI EL, HOGY VAN OTT VALAMI — a nyitójel és a felirat
 * megmarad. Ez a különbség aközt, hogy „rendezett" és hogy „eltűnt".
 */
/*
 * KÉT TÁBLÁZATSOR, EGY EMBER — ÉS EZ LÁTSZÓDJON IS.
 *
 * MI VOLT A BAJ (Attila jelezte: „összefolyik")
 * A táblázat elválasztása eddig SÁVOZÁS volt: minden második sor
 * világosabb. Amikor a beállítások saját sort kaptak, a sávozás rájuk esett
 * — így nem a személyek váltakoztak, hanem a beállítás-sorok emelkedtek ki,
 * mintha külön tételek lennének. Vonal pedig sehol nem volt.
 *
 * A MEGOLDÁS NEM A SÁVOZÁS JAVÍTÁSA. Kétsoros szerkezetnél a „minden
 * második" elve értelmét veszti: ott már nem a sorok váltakoznak, hanem az
 * emberek. Ezért a sávozás helyett EGY VONAL jelöli a határt, személyenként.
 *
 * Az első személy fölé nem kerül vonal — ott a fejléc választ el.
 */
.csapat-beallitas-sor > td {
    border-top: 0 !important;
    padding-top: 0 !important;
}
.csapat-beallitas-sor { background: transparent !important; }
.csapat-beallitas-sor + tr > td { border-top: 1px solid var(--border) !important; }

.csapat-beallitasok { margin: 8px 0 0; }
/*
 * A BÖNGÉSZŐ SAJÁT NYITÓJELE MARAD.
 *
 * MI VOLT A BAJ (Attila jelezte)
 * Elrejtettem a natív jelet, és egy „▸" karaktert rajzoltam helyette. Az a
 * szöveg méretéhez igazodik, tehát 12 képpontnál APRÓ lett — és nem is az,
 * amit az ember ilyen helyen megszokott.
 *
 * A natív jel ingyen jó: a böngésző a saját méretezésével rajzolja, forgatja
 * nyitáskor, és minden felhasználó ismeri máshonnan. Amit elrejtettem,
 * pontosan azt kellett volna kézzel visszaépítenem — rosszabbul.
 *
 * A TANULSÁG: ami alapból működik, azt nem kell lecserélni, csak ha a
 * cserének oka van. Nekem nem volt.
 */
.csapat-beallitasok > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-faint);
    padding: 3px 0;
    user-select: none;
}
.csapat-beallitasok > summary:hover { color: var(--text); }

/*
 * A LENYITOTT BEÁLLÍTÁSOK EGYMÁS MELLETT, BALRÓL.
 *
 * MI VOLT A BAJ (Attila jelezte)
 * A lenyitás hat rövid sort tett egymás alá — a kapcsolók néhány szavasak, a
 * hely mégis függőlegesen fogyott. Kinyitva ugyanolyan magas lett a sor, mint
 * a rendezés előtt volt.
 *
 * Vízszintesen a hat elem kettő-három sorba fér, és balról igazítva a szem
 * egy vonalon fut végig rajtuk.
 *
 * A TÖRDELÉS MEGMARAD: szűk képernyőn magától egymás alá kerülnek. Fix
 * oszlopszám itt rosszabb lenne, mert a feliratok hossza nyelvenként eltér —
 * a német jóval hosszabb a magyarnál.
 */
/*
 * A JEGYÁTADÁS ŰRLAPJA EGY SORBAN.
 * Felirat, választó, gomb — ugyanaz az elrendezés, mint a többi soron belüli
 * űrlapnál, hogy a műveleti csoport egységes maradjon.
 */
/*
 * TÍPUS ÁTNEVEZŐ ŰRLAP — egy sorban, a táblázat cellájában.
 */
.tipus-urlap {
    display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap;
}
.tipus-urlap input { margin-bottom: 0; }

.atadas-urlap {
    display: flex; align-items: center; gap: 6px; margin: 0;
    flex-wrap: wrap;
}
.atadas-urlap > span { flex: 0 0 auto; }
.atadas-urlap .select-wrap { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.atadas-urlap .select-wrap.compact { display: block; }

.csapat-beallitas-csoport {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
}
/* A „Lezárt jegyekről" választója a felirata mellett maradjon. */
.csapat-beallitas-csoport .select-wrap { margin-bottom: 0; }

/*
 * BEÁLLÍTÁSOK ÉS MŰVELETEK SZÉTVÁLASZTÁSA A CSAPAT SORÁBAN.
 *
 * MI VOLT A BAJ (Attila jelezte a képernyőképpel)
 * A cella mindent egy kupacba söpört: értesítési kapcsolók, jogosultságok és
 * négy gomb, hierarchia nélkül. Nem lehetett látni, mi mutat ÁLLAPOTOT és mi
 * CSINÁL valamit.
 *
 * A kettő másképp is viselkedik: egy jelölő bekapcsolása visszavonható, a
 * törlés nem. A választóvonal ezt teszi láthatóvá.
 */
.csapat-muveletek {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/*
 * SZEREPKÖR-VÁLASZTÓ A CSAPATTAG SORÁBAN.
 *
 * Ugyanaz az elrendezés, mint az értesítési választónál: egy sorban a
 * felirattal, a mezők alsó margója kivéve. Külön osztály, mert a két űrlap
 * külön él — ha az egyiket átalakítjuk, a másik ne csússzon el tőle.
 */
.szerepkor-urlap {
    display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
    flex-wrap: wrap;
}
.szerepkor-urlap > span { flex: 0 0 auto; }
.szerepkor-urlap .select-wrap { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.szerepkor-urlap .select-wrap.compact { display: block; }
.szerepkor-urlap .select-wrap.compact .select-trigger { width: 100%; }

/*
 * ÉRTESÍTÉSI VÁLASZTÓ A CSAPATTAG SORÁBAN.
 *
 * A fölötte álló két jelölőnégyzettel EGY SORBAN kell állnia, nem alatta két
 * sorban. A felirat rövid, a választó zsugorodhat — a `compact` trigger
 * szélességét itt is vissza kell állítani, különben kilóg a burkolójából
 * (lásd a `.ceg-felvetel` magyarázatát).
 */
.ertesites-valaszto {
    display: flex; align-items: center; gap: 6px; margin: 2px 0 0;
    flex-wrap: wrap;
}
.ertesites-valaszto > span { flex: 0 0 auto; }
.ertesites-valaszto .select-wrap { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.ertesites-valaszto .select-wrap.compact { display: block; }
.ertesites-valaszto .select-wrap.compact .select-trigger { width: 100%; }

/*
 * A NÉMÁN BLOKKOLT BEKÜLDÉS JELÖLÉSE.
 *
 * AZ `outline` ÉS NEM A `border` — ÉS EZ A LÉNYEG.
 * A szegély a doboz MÉRETÉT növeli, tehát eltolja a szomszédokat; az outline
 * a doboz fölé rajzolódik, és semmit nem mozdít el. Az első változatom
 * szegélyt használt, és az űrlap szétcsúszott tőle.
 *
 * AZ ÜZENET AZ ŰRLAP ELŐTT ÁLL, nem a mezők közt. Egy rugalmas sorba
 * beszúrt elem megnöveli a sor magasságát, és a szomszédos mezők
 * elcsúsznak — ez a hibafajta ma háromszor jött elő, egyszer épp ettől a
 * szkripttől.
 */
.mezo-hibas {
    outline: 2px solid var(--danger);
    outline-offset: 1px;
}
.urlap-hiba-doboz {
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: rgba(255, 93, 108, .08);
    padding: 10px 14px;
    margin: 0 0 14px;
}
.urlap-hiba-lista {
    margin: 0;
    padding-left: 18px;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.45;
}
.urlap-hiba-lista li + li { margin-top: 4px; }

/*
 * EGY SORBAN ÁLLÓ ŰRLAP: MEZŐK ÉS GOMB EGY VONALBAN.
 *
 * A beviteli mezőknek 16 képpont alsó margójuk van — ez álló űrlapon helyes,
 * mert elválasztja a sorokat. Vízszintes elrendezésben viszont a burkoló
 * doboz ettől magasabb lesz, mint maga a mező, és a végén álló gomb
 * ugyanennyivel lejjebb ül.
 *
 * Ezért NEM az igazítást állítjuk, hanem a margót vesszük ki ott, ahol a
 * mező egy sorban áll a gombbal.
 */
.token-urlap { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.token-urlap > div { min-width: 220px; }
.token-urlap input,
.token-urlap select,
.token-urlap .select-wrap { margin-bottom: 0; }

/*
 * A LEGÖRDÜLŐ UGYANOLYAN MAGAS, MINT A BEVITELI MEZŐ.
 *
 * MI VOLT A BAJ (a tesztelő mérte ki: 39 px vs 37 px)
 * A saját legördülő két képponttal magasabb volt a szomszédainál, és mivel a
 * sor az aljukra igazít, a CÍMKÉJE ennyivel följebb csúszott.
 *
 * AZ ELSŐ TIPPEM ROSSZ VOLT. A `box-sizing`-ra gyanakodtam — de a tesztelő
 * kimérte, hogy a két legördülő MINDEN érintett tulajdonsága azonos volt már
 * akkor is: azonos belső margó, szegély, betűméret.
 *
 * AZ OK AZ EMODZSI. A típusválasztó feliratai emodzsival kezdődnek
 * („💻 Számítógép"), az ügyfélválasztóé nem. Az emodzsi-glifa magasabb a
 * latin betűknél, ezért a sordoboz két képponttal megnő. A tesztelő ezt
 * félretett másolaton mérte, a laphoz nyúlás nélkül:
 *
 *     [💻 Számítógép]  39 px
 *     [Számítógép]     37 px
 *
 * Ezért nem a dobozszámítást kell igazítani, hanem a SORMAGASSÁGOT rögzíteni:
 * így a betű magassága nem nyújtja meg a mezőt. Az arányszám azért jobb a fix
 * képpontnál, mert követi a betűméretet, ha az valaha változik.
 */
.select-wrap .select-trigger { box-sizing: border-box; line-height: 1.15; }

/*
 * E-MAIL CÍM SZŰK OSZLOPBAN.
 *
 * A törés helyét a `<wbr>` jelöli ki (lásd `emailTorheto()`): a `@` és a
 * pontok előtt. Ez itt csak a VÉGSŐ HÁLÓ — ha a természetes pontok sem
 * elegendők, inkább törjön csúnyán, mint hogy kilógjon.
 *
 * A `break-all` KIFEJEZETTEN NEM jó ide: az szóhatár nélkül tör, és ettől
 * lett a naplóban `tattila@ultimatesuppo` / `rt.hu`.
 */
.email-torheto { overflow-wrap: break-word; word-break: normal; }

/*
 * A CSAPATTAG CÉGEI — A NEVE ALATT.
 *
 * ÖTVEN CÉGNÉL IS MŰKÖDNIE KELL. Négyig kibontva állnak; fölötte a `<details>`
 * összecsukja őket, és a nyitott lista magassága korlátos — a táblázat sora
 * így nem nyúlik el a képernyő aljáig. Az `overflow:auto` csak akkor jelenik
 * meg, amikor tényleg kell.
 */
.ceg-doboz { margin-top: 6px; max-width: 320px; }
.ceg-doboz > summary {
    cursor: pointer; font-size: 12px; color: var(--accent);
    padding: 2px 0; user-select: none;
}
.ceg-doboz > summary::before { content: '🔒 '; }
.ceg-sorok {
    display: flex; flex-wrap: wrap; align-items: center;
    max-height: 168px; overflow: auto; padding: 1px 0;
}

/*
 * A FELVÉTEL GOMB A LEGÖRDÜLŐ MELLETT MARAD.
 *
 * Az első változatban 120 képpontos alapszélességet kapott a legördülő, és a
 * névoszlopban ez a gombot a következő sorba törte. A legördülő felirata
 * úgyis pontokkal rövidül, ha nem fér el — ott tehát nincs mit veszíteni.
 * A gomb viszont nem törhet: az „adj hozzá" nem rejthető el.
 */
.ceg-felvetel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ceg-felvetel .select-wrap { margin-bottom: 0; flex: 1 1 60px; min-width: 0; }
.ceg-felvetel .btn { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; }

/*
 * A TÖMÖR LEGÖRDÜLŐ RÁFEKÜDT A GOMBRA.
 *
 * MI VOLT A BAJ (mérve a demón, 2026-09-11)
 * A `.select-wrap` szépen lezsugorodott 110 képpontra — a benne lévő
 * `.select-trigger` viszont 148 maradt, mert a `.select-wrap.compact` a
 * triggernek `width: auto`-t ad. A gomb így 38 képponttal KILÓGOTT a
 * burkolójából, és ráfeküdt a „Felvétel" bal szélére. A feliratból csak a vége
 * látszott.
 *
 * AMI MEGTÉVESZTŐ VOLT: a dobozok mérete szerint a két elem EGY SORBAN,
 * átfedés nélkül állt. A kilógás csak akkor derült ki, amikor megkérdeztük a
 * böngészőtől, mi van a gomb bal szélén — és a select triggert felelte.
 *
 * A TANULSÁG: a `compact` legördülő szélessége nem követi a burkolóját. Bárhol,
 * ahol rugalmas sorban áll, ezt külön vissza kell állítani — különben
 * zsugorodás helyett kilóg.
 */
.ceg-felvetel .select-wrap.compact { display: block; }
.ceg-felvetel .select-wrap.compact .select-trigger { width: 100%; }

/*
 * ELVEHETŐ CÉG-PASZTILLA — a csapattagok lapján.
 *
 * MI VOLT A BAJ (Attila szúrta ki élesben, 2026-09-11)
 * A cégnév külön szövegként állt, mellette egy 22×19 képpontos, 11 képpontos
 * jelű gomb. A színkontraszt rendben volt (7:1) — a MÉRETE és a formája nem.
 * Ekkora, önálló pasztilla nem gombnak látszik, hanem a név utáni
 * díszítésnek. Attila valódi munka közben nem találta meg, és arra jutott,
 * hogy a cég nem is vehető el.
 *
 * A TANULSÁG
 * Egy vezérlő nem attól használható, hogy LÁTHATÓ, hanem attól, hogy
 * FELISMERHETŐ. A kontraszt mérhető, és megtévesztő: ez a gomb átment volna
 * minden kontrasztpróbán.
 *
 * Ezért a név és az elvétel egyetlen keretes egységbe került: a jel a névhez
 * tartozik, nem mellette lebeg, és a kattintható terület akkora, hogy el
 * lehessen találni.
 */
.ceg-pasztilla {
    /*
     * A KIEMELÉS VISSZAKERÜLT — de csak a pasztillára, nem a gombra.
     *
     * Az előző körben mindent halványra vettem, mert a kitöltött szürke kör
     * elnyomta a cégnevet. A visszavétel viszont túl messzire ment: a
     * pasztillák beleolvadtak a háttérbe, pedig ez a sor legfontosabb adata —
     * azt mondja meg, KIT lát a kolléga.
     *
     * A helyes megosztás: a pasztilla kiemelt (ugyanaz a kék, ami korábban a
     * jelölőn volt), az elvétel jele halvány. A tartalom hangsúlyos, a
     * művelet nem.
     */
    display: inline-flex; align-items: center; gap: 1px; margin: 0 5px 4px 0;
    padding: 0 3px 0 11px; border-radius: 999px;
    background: #4f8cff1a; border: 1px solid #4f8cff40; color: #4f8cff;
    font-size: 12px;
}
.ceg-pasztilla button {
    /*
     * A CÉLPONT NAGY, A MEGJELENÉS HALVÁNY — ez a kettő külön dolog.
     *
     * Az első próbálkozásom 24 képpontos, KITÖLTÖTT szürke kör volt. Elérni
     * könnyű volt, de nagyobb súlyt kapott, mint maga a cégnév: a szem rá
     * ugrott, nem a tartalomra. Az elvétel nem a lap fő mondanivalója.
     *
     * A kattintható terület ezért maradt 24 képpont — háttér nélkül. A
     * felhasználó egy halvány jelet lát, de egy nagy felületet talál el.
     */
    width: 24px; height: 24px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: #4f8cff; opacity: .65;
    font-size: 14px; line-height: 1;
}
.ceg-pasztilla button:hover,
.ceg-pasztilla button:focus-visible {
    /* A veszély csak a szándék pillanatában jelenik meg: nyugalmi állapotban
       egy piros pötty minden cégnév mellett riasztásnak látszana. */
    background: var(--danger); color: #fff; opacity: 1;
}

/*
 * Visszajelző üzenet bezáró jele. A .banner relatívvá válik, hogy a jel a
 * jobb szélen, a szöveggel egy vonalban álljon — ne alatta.
 *
 * A currentColor szándékos: a jel átveszi a banner színét (zöld a sikernél,
 * piros a hibánál), így nem kell négy változatot írni hozzá.
 */
.banner.flash { position: relative; padding-right: 40px; }
.banner-close {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    background: none; border: none; color: currentColor; opacity: .5;
    cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.banner-close:hover { opacity: 1; background: #ffffff1f; }

/* Bejelentés típusa a Támogatás oldalon. */
.req-tipusok { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.req-tipus {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 9px;
    padding: 9px 14px; font-size: 13px; margin: 0;
}
.req-tipus:hover { border-color: var(--accent); }
.req-tipus input { width: auto; margin: 0; }
.req-tipus:has(input:checked) { border-color: var(--accent); color: var(--text); }

/*
 * Rendszeresemény a szálban (pl. az ügyfél megoldottnak jelölte).
 *
 * NEM beszélgetés, ezért nem is úgy néz ki: nincs szerző, nincs buborék.
 * Egy halvány sor középen — látszik, hogy történt valami, de nem viszi el a
 * figyelmet a valódi üzenetekről.
 */
.msg-esemeny {
    text-align: center; color: var(--text-faint); font-size: 12.5px;
    padding: 8px 12px; margin-bottom: 14px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.msg-esemeny-ido { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }

/*
 * Összecsukott szál — a régi üzenetek elrejtve.
 *
 * A NYOMTATÁSNÁL MINDEN LÁTSZIK: egy kinyomtatott jegy hiányos lenne, ha a
 * régi üzenetek kimaradnának belőle. Ezért a rejtés csak képernyőre szól.
 */
.message.msg-regi { display: none; }
.msg-toggle {
    display: block; width: 100%; margin: 0 0 14px; padding: 9px 12px;
    background: var(--surface2); border: 1px dashed var(--border); border-radius: 9px;
    color: var(--text-dim); font-size: 12.5px; cursor: pointer; text-align: center;
}
.msg-toggle:hover { border-color: var(--accent); color: var(--text); }
@media print { .message.msg-regi { display: block !important; } }

/*
 * Áttekintő kártyák.
 *
 * A rács MAGÁTÓL tördel: két számnál nem hagy foghíjat, ötnél nem szorít.
 * A minmax alsó határa 150px — ennél keskenyebben a felirat kettétörne.
 */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.dash-card {
    display: block; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 11px; padding: 16px 18px; text-align: center;
}
a.dash-card:hover { border-color: var(--accent); text-decoration: none; }
.dash-num { font-size: 30px; font-weight: 700; line-height: 1.1; }
.dash-lbl { font-size: 12px; color: var(--text-dim); margin-top: 5px; }

/*
 * Névmonogram — jegylistán, ahol nevek sorakoznak.
 *
 * A betű MINDIG fehér, a szín csak a háttéré: így sötét és világos témán is
 * olvasható marad, és nem kell témánként külön palettát tartani.
 *
 * aria-hidden a jelölésben: a felolvasónak a NÉV a lényeg, a monogram csak
 * ugyanannak a rövidítése — kétszer felolvasva zavaró lenne.
 */
.name-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; margin-right: 7px;
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em;
    vertical-align: middle; flex: none;
}

/*
 * NYOMTATÁSNÁL NINCS MONOGRAM.
 *
 * Papíron a szín gyakran szürkévé mosódik, a fehér betű pedig olvashatatlanná
 * válik rajta. A név úgyis ott áll mellette — a monogram csak a képernyőn
 * gyorsít.
 */
@media print { .name-badge { display: none; } }

/*
 * ÜGYINTÉZŐI CSOMAGOK — az Előfizetés oldalon.
 *
 * A rács MAGÁTÓL tördel: két csomagnál nem hagy foghíjat, ötnél nem szorít.
 * Mindegyik kártya egy ŰRLAP, mert külön-külön rendelhetők meg.
 */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.plan-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; margin: 0; text-align: center;
    transition: border-color .2s;
}
.plan-card:hover { border-color: var(--accent); }
.plan-fo { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.plan-ar { font-size: 21px; font-weight: 700; line-height: 1.1; }
.plan-ar span { font-size: 13px; font-weight: 400; color: var(--text-dim); }

/* „Most fizetendő": ez a döntés szempontjából a legfontosabb szám, ezért
   kiemelve — de nem harsányan, mert nem árcédula, hanem tájékoztatás. */
.plan-most {
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-dim);
}

/*
 * Szűrő-hivatkozás a listában (cégnév, ügyfélnév).
 *
 * SZÁNDÉKOSAN NEM kék: a kék hivatkozás azt ígérné, hogy máshova visz. Ez
 * ugyanezen a listán szűkít, ezért a szöveg színe marad — csak ráhúzva jelzi
 * magát. Aki nem tud róla, annak nem tolakszik; aki keresi, megtalálja.
 */
.szuro-link { color: inherit; text-decoration: none; }
.szuro-link:hover { text-decoration: underline; text-decoration-style: dotted; }

/*
 * ────────────────────────────────────────────────────────────────────────
 * A JEGYLISTA MOBILON: KÁRTYÁK, NEM TÁBLÁZAT
 * ────────────────────────────────────────────────────────────────────────
 *
 * Tíz oszlop nem fér ki egy telefonra. A vízszintes görgetés működne, de
 * használhatatlan: a jegyszám kicsúszna balra, miközben az állapotot nézed.
 *
 * Ezért soronként egy kártya: a tárgy és a jegyszám nagyban, alatta a többi
 * adat „címke: érték" párban. A címke a data-cimke attribútumból jön, ami a
 * fejlécek szövegét ismétli — asztali nézetben nem látszik.
 *
 * AMI KIMARAD: a kijelölő négyzet és a műveletek oszlopa. A tömeges műveletek
 * telefonon amúgy sem életszerűek, és minden sorban elvennék a helyet attól,
 * amiért az ember ránéz.
 */
/*
 * A KÁRTYANÉZET HATÁRA: 1100 PIXEL, nem 700.
 *
 * A jegylista tíz oszlopa MÉRVE legalább ezer pixelt kér. Álló táblagépen
 * (834) és fektetett iPaden nyitott menüvel (932) a táblázat kilógott a
 * képernyőről — a jobb szélső oszlopok egyszerűen levágódtak.
 *
 * Ezer pixel alatt tehát nincs értelme táblázatnak: ott kártyák jönnek.
 */
@media (max-width: 1100px) {
    .ticket-table thead { display: none; }
    .ticket-table, .ticket-table tbody, .ticket-table tr, .ticket-table td { display: block; width: auto; }

    .ticket-table tr {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 11px; padding: 12px 14px; margin-bottom: 10px;
    }

    .ticket-table td { border: none; padding: 3px 0; }

    /* Címke: érték párok — a fejléc szövege az adat előtt. */
    .ticket-table td[data-cimke]::before {
        content: attr(data-cimke) ': ';
        color: var(--text-faint); font-size: 11px; text-transform: uppercase;
        letter-spacing: .04em; margin-right: 5px;
    }

    /*
     * AMI MAGÁTÓL ÉRTHETŐ, ANNAK NEM KELL CÍMKE.
     *
     * MI VOLT A BAJ
     * Telefonon minden jegy hét feliratozott sorból állt, és a feliratok
     * MINDEN kártyán ugyanazok: ÜGYFÉLCÉG, ÜGYFÉL, KATEGÓRIA, PRIORITÁS,
     * STÁTUSZ, FRISSÍTVE. Egy keskeny képernyő szélességének a harmadát
     * ismétlődő szavak vitték el, és egy kártya csaknem fél képernyő lett.
     *
     * A cégnév mellett ott a cég jelvénye, az ügyfél mellett az arckép, a
     * prioritás és a státusz pedig SZÍNES JELVÉNY — ezeknél a felirat nem
     * mond semmit, amit a tartalom ne mondana el.
     *
     * A KATEGÓRIA és a FRISSÍTVE megtartja a címkéjét: egy szöveg vagy egy
     * dátum önmagában nem árulja el, hogy micsoda. Egy dátum lehetne a
     * beérkezés ideje is.
     */
    .ticket-table td.c-ceg::before,
    .ticket-table td.c-ugyfel::before,
    .ticket-table td.c-prioritas::before,
    .ticket-table td.c-statusz::before { content: none; }

    /*
     * A PRIORITÁS ÉS A STÁTUSZ EGY SORBAN.
     *
     * Két rövid jelvény, egyenként egy teljes sort foglalt. Egymás mellett
     * elférnek, és így is ránézésre olvashatók — sőt jobban, mert a kettő
     * együtt mond valamit a jegyről.
     */
    .ticket-table td.c-prioritas,
    .ticket-table td.c-statusz { display: inline-block; padding-right: 8px; }

    /*
     * MA ESEDÉKES a kártyanézetben.
     *
     * Az asztali nézetben a bal szélső CELLA hordozza a csíkot — telefonon
     * viszont az az első cella el van rejtve, tehát a jelölés eltűnne. Itt a
     * kártya kerete veszi át.
     */
    .ticket-table tr.ma-esedekes { border-left: 3px solid var(--warning); }
    .ticket-row.ma-esedekes > td:first-child { box-shadow: none; }

    /*
     * A kijelölés és a műveletek oszlopa telefonon nem életszerű.
     *
     * DE CSAK OTT, AHOL TÖBB CELLA VAN.
     *
     * A halasztott és a lezárt csoport nyitó gombja EGYETLEN cellából álló
     * sorban ül (colspan). Az a cella egyszerre első ÉS utolsó, tehát
     * mindkét szabály eltüntette — a képernyőn egy üres keret maradt, amire
     * rá sem lehetett nyomni. A csoportok így telefonon elérhetetlenné
     * váltak: a lezárt jegyekhez nem lehetett hozzáférni.
     *
     * A `:not(:only-child)` pontosan ezt zárja ki: ha a sorban ez az egyetlen
     * cella, akkor nem oszlop, hanem tartalom.
     */
    .ticket-table td:first-child:not(:only-child),
    .ticket-table td:last-child:not(:only-child) { display: none; }

    /* A csoportnyitó gomb kapjon rendes méretet és tapintható felületet. */
    .ticket-table td:only-child { padding: 0; }
    .ticket-table td:only-child button { padding: 12px 14px !important; font-size: 13.5px !important; }
}

/*
 * A TÖBBI TÁBLÁZAT: VÍZSZINTES GÖRGETÉS.
 *
 * A riportok, a statisztika, a csapat és az ügyféllisták táblázatai
 * összetartozó SZÁMOSZLOPOK — azokat kártyákra bontani rosszabb lenne, mint
 * görgetni: az összehasonlítás pont a sorok egymás mellettiségéből jön.
 *
 * A .card doboz kapja a görgetést, nem az oldal: így a fejléc és a menü a
 * helyén marad, és csak a táblázat csúszik.
 *
 * A jegylista KIVÉTEL — annak saját kártyanézete van fentebb.
 */
@media (max-width: 1100px) {
    /*
     * NEM :has() — az régebbi böngészőkben nem működik, és ha nem fog, az
     * EGÉSZ OLDAL csúszna el vízszintesen, nem csak a táblázat. Az `overflow`
     * a kártyán mindig érvényes; a min-width csak a görgetendő táblázaton.
     */
    .card { overflow-x: auto; }
    /*
     * A KIVÉTEL A PORTÁL TÁBLÁJÁRA IS VONATKOZIK.
     *
     * Az 520 képpontos minimum az ADMIN széles táblázataihoz kell: ott a
     * görgetés a legkisebb rossz. A kivétellista viszont csak a
     * `.ticket-table` osztályt ismerte — a portál jegylistája `portal-tickets`
     * néven került be, és így megkapta a minimumot. Egy 390 széles telefonon
     * ez pont annyival lógott túl, amennyit látni lehetett; ráadásul nem a
     * táblázat csúszott el, hanem az EGÉSZ LAP nyúlt meg utána.
     */
    /*
     * AZ ÜGYFÉLTÁBLÁZAT IS KÁRTYÁKKÁ ALAKUL.
     *
     * Nyolc oszlop telefonon esélytelen: a cégnév két betűre szorult össze,
     * és épp a legfontosabb adat vált olvashatatlanná. Ugyanaz a minta, mint
     * a jegylistánál — a fejléc rejtve, minden cella a saját címkéjével.
     */
    .tenant-table thead { display: none; }
    .tenant-table, .tenant-table tbody, .tenant-table tr, .tenant-table td { display: block; width: auto; }

    .tenant-table tr {
        border: 1px solid var(--border); border-radius: 10px;
        padding: 12px 14px; margin-bottom: 10px;
        background: var(--surface);
    }

    .tenant-table td { border: none; padding: 3px 0; }

    .tenant-table td[data-cimke]::before {
        content: attr(data-cimke) ': ';
        color: var(--text-faint); font-size: 11px; text-transform: uppercase;
        letter-spacing: .04em; margin-right: 5px;
    }

    /* A cégnév a kártya fejléce: nagyobb, és nem kell elé címke. */
    .tenant-table td:first-child { font-size: 15px; font-weight: 600; padding-bottom: 8px; }
    .tenant-table td:first-child::before { content: none; }

    /*
     * A `hidden` SOR TELEFONON IS REJTETT MARAD.
     *
     * MI VOLT A BAJ: a fenti `tr { display: block }` erősebb a böngésző
     * `[hidden] { display: none }` alapszabályánál, ezért a csukott
     * szerződés-panel MINDEN cégnél kinyitva állt — cégenként ~250 px felesleg,
     * és a nyitó gomb nem is csinált semmit.
     */
    .tenant-table tr[hidden] { display: none; }

    /* A középre és jobbra igazítás a kártyanézetben értelmetlen. */
    .tenant-table td[style*="text-align:center"],
    .tenant-table td[style*="text-align:right"] { text-align: left !important; }

    .card table:not(.ticket-table):not(.portal-tickets):not(.tenant-table) { min-width: 520px; }

    /*
     * AZ ESZKÖZÖK CÉGFEJLÉCE MOBILON.
     *
     * Az eszköztáblázat telefonon vízszintesen görgethető (lásd a fenti
     * minimumszélességet). A csoportfejléc így KIGÖRGETHET a képből, és az
     * ember elveszti a fonalat: nem tudja, melyik cég eszközeit nézi épp.
     *
     * A `position: sticky` a bal szélhez ragasztja, tehát oldalirányú
     * görgetés közben is látszik.
     */
    .eszkoz-cegsor > td {
        position: sticky;
        left: 0;
        /* Háttér kell alá: enélkül az alatta elgörgő szöveg átüt rajta. */
        background: var(--surface);
    }
}

/* Üzenetszám a jegylistán — halvány, hogy ne vonja el a figyelmet a tárgyról. */
.msg-count {
    font-size: 10.5px; color: var(--text-faint); margin-left: 6px;
    white-space: nowrap; font-family: var(--mono, monospace);
}

/* Közreműködő-címke a jegy oldalán. */
.collab-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
    padding: 4px 6px 4px 12px; font-size: 12.5px; color: var(--text-dim);
}
.collab-chip button {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.collab-chip button:hover { color: var(--danger); background: var(--surface); }

/* Másoló gomb — a jegyszám és a hivatkozás mellett. */
.copy-btn {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 2px 4px; border-radius: 5px; font-size: 12px; line-height: 1;
}
.copy-btn:hover { color: var(--accent); background: var(--surface2); }
.copy-btn.done { color: var(--success); }

.select-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 8px; vertical-align: middle; position: relative; top: -1px;
    flex: none;
}
.select-trigger:focus, .select-trigger.open { outline: 2px solid var(--accent); outline-offset: 1px; }
.select-panel {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 60;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    max-height: 280px; overflow-y: auto; padding: 4px; display: none;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
/*
 * A befogadó kártya kiemelése, amíg a panel nyitva van — lásd a részletes
 * indoklást a select-enhance.js-ben (`raisedCard()` körül). A `.card`
 * `backdrop-filter`-e miatt önálló stacking contextet nyit, ezért a panel
 * z-indexe önmagában nem elég: a kártyát magát kell a lap törzse fölé emelni.
 */
.card.select-host-raised { position: relative; z-index: 100; }
.select-panel.open { display: block; }
/*
 * A LENYÍLÓ NEM LEHET SZÉLESEBB, MINT AMENNYI HELY VAN.
 *
 * MI VOLT A BAJ (Attila jelezte, 2026-09-24): a jegy oldalán az Eszköz
 * lenyílója széttolta a lapot. Az eszköz neve hosszú („használó · név ·
 * típus · hely"), az opciók nem törtek, így a panel a szövegük szélességét
 * vette fel — 900 pixel fölé, messze a képernyő szélén túlra. Ráadásul a
 * kiválasztott sorhoz görgetés a LAPOT is odébb tolta oldalra.
 *
 * Most a panel legfeljebb 360 pixel széles (de a mezőnél sosem keskenyebb),
 * a hosszú opció szövege tördelődik. Hogy a képernyő szélén se lógjon ki, a
 * szkript jobbra igazítja, ha kell (select-enhance.js).
 *
 * MIÉRT `break-word`, ÉS NEM `overflow-wrap: anywhere` (Attila jelezte,
 * 2026-09-25): a Riport oldal „Ügyfélcég” lenyílójában rövid nevek (pl.
 * „Magánszemélyek”) is szó közepén törtek — „Magánszemélye” / „k” — pedig
 * bőven lett volna hely a sorban. Az `anywhere` érték ugyanis a böngésző
 * SZÉLESSÉG-SZÁMÍTÁSÁBA is beleszól (a panel „mennyire tud összemenni”
 * becslésébe), ezért a panel a ténylegesnél sokkal keskenyebbre húzta
 * össze magát, és utána — mivel keskeny lett — a normál szavak is
 * kénytelenek voltak törni. A `break-word` ugyanúgy tördeli a valóban túl
 * hosszú szót (a fenti, eszköznevekkel tapasztalt esetet), de a panel
 * szélesség-becslését nem torzítja el, így a rövid opciók egy sorban
 * férnek el.
 */
.select-panel { width: max-content; max-width: max(100%, min(360px, calc(100vw - 24px))); }
.select-option {
    padding: 8px 10px; font-size: 13px; color: var(--text-dim); border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    white-space: normal; overflow-wrap: break-word; word-break: normal; line-height: 1.35;
}
.select-option:hover, .select-option.highlighted { background: var(--surface); color: var(--text); }
.select-option.selected { color: var(--accent); font-weight: 600; }
.select-option .select-check { opacity: 0; font-size: 12px; }
.select-option.selected .select-check { opacity: 1; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pill {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
    padding: 4px 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
/*
 * E-mail napló állapotjelvényei — változókból, hogy minden témán a saját
 * palettához igazodjanak (eddig beégetett hexa volt a lap HTML-jében).
 */
.el-allapot--ok    { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.el-allapot--hiba  { color: var(--danger);  background: color-mix(in srgb, var(--danger) 10%, transparent);  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.el-allapot--semleges { color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
/* Szűrő-sávban a feliratos blokkok: a felirat közvetlenül a mező fölött,
   minden vezérlő azonos magasságú, így az alsó éleik egy vonalba esnek. */
.filters > div { display: flex; flex-direction: column; justify-content: flex-end; }
.filters > div > label { margin: 0 0 5px; font-size: 11px; line-height: 1.2; }
.filters > div > input,
.filters > div > select,
.filters input[type=number],
.filters input[type=search],
.filters input[type=date],
.filters > select,
.filters > .btn,
.filters > button,
.filters > a.btn {
    height: 38px; margin-bottom: 0; box-sizing: border-box;
}
.filters > .btn, .filters > button, .filters > a.btn {
    display: inline-flex; align-items: center; padding: 0 18px;
}
.filters input[type=date] { padding: 0 10px; }
/* A saját legördülő komponens a szűrő-sávban: nincs alsó margó, egységes magasság */
.filters .select-wrap { margin: 0; height: 38px; width: auto; }
.filters .select-wrap .select-trigger { height: 38px; padding: 0 30px 0 12px; display: flex; align-items: center; }
.filters select { width: auto; height: 38px; margin-bottom: 0; padding: 0 32px 0 12px; font-size: 12.5px; background-position: right 10px center; background-size: 13px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; font-family: monospace; text-transform: uppercase; color: var(--text-faint); padding: 10px 14px; border-bottom: 1px solid var(--border); }
td { padding: 12px 14px; border-bottom: 1px solid var(--surface2); font-size: 13px; vertical-align: middle; }

/*
 * Zebracsíkozás minden táblázatban.
 *
 * Hosszú listáknál a szem elveszti a sort: nyolc-tíz sor után nehéz követni,
 * hogy egy adat melyik sorhoz tartozik. A halvány váltakozó háttér nem díszítés,
 * hanem ez ellen véd — a szem így „megfogja” a sort.
 *
 * Nagyon halvány, hogy a fontos kiemeléseket (piros hiba, zöld siker) ne nyomja el.
 */
/*
 * AZ ERŐSSÉGRŐL.
 *
 * Az első érték `#ffffff05` volt — két százalék fehér. A sötét témákon ez
 * gyakorlatilag láthatatlan: a táblázatok egyszínűnek tűntek, és a csíkozás
 * nem csinált semmit. Épp az a baj maradt, ami ellen készült.
 *
 * A „legyen nagyon halvány" szándék helyes, csak túl messzire ment. A mérce
 * nem az, hogy alig látszódjon, hanem hogy a SOROKAT elválassza, és közben
 * a jelentéssel bíró színeket (piros hiba, zöld siker, prioritás-sávok) ne
 * nyomja el. Négy százalék ezt teljesíti.
 *
 * A hover ezzel arányosan erősödött: ha a kettő közel kerülne egymáshoz, az
 * egér alatti sor nem emelkedne ki a csíkosból.
 */
tbody tr:nth-child(even) { background: #ffffff0a; }
tbody tr:hover { background: #ffffff18; }

/* Ahol a sor maga is jelöl valamit (pl. lejárt SLA), ott a saját színe az erősebb */
tbody tr[style*="background"]:nth-child(even) { background-image: none; }

tr.ticket-row { cursor: default; }
tr.ticket-row.priority-low { background: #8b95a50c; border-left: 3px solid #8b95a540; }
tr.ticket-row.priority-medium { background: #4f8cff0c; border-left: 3px solid #4f8cff40; }
tr.ticket-row.priority-high { background: #e6a23c14; border-left: 3px solid #e6a23c60; }
tr.ticket-row.priority-urgent { background: #e5484d1a; border-left: 3px solid #e5484d80; }

/*
 * SZETBONTOTT JEGY: sav a jobb oldalon.
 *
 * A PRIORITAS a bal szelen jeloli magat — oda nem tehetjuk, mert felulirna
 * azt, ami fontosabb. A jobb oldali sav viszont szabad, es vegigfutaskor
 * ugyanugy elkapja a szem.
 *
 * Halvany szin: ez nem surgosseg, hanem OSSZETARTOZAS. Ha erosebb lenne,
 * elvonna a figyelmet a lejart SLA-rol — pedig az a fontosabb.
 */
/* A HATTER-en jelolunk, nem szegellyel: a tablazat border-collapse modban
   fut, ott a jobb oldali szegelyt a szomszed cella felulirhatja. A bal oldal
   pedig a PRIORITASE — az fontosabb, azt nem vesszuk el.

   Az elso cellara teszunk egy fuggoleges savot: az mindig latszik, es nem
   utkozik a sor sajat hatterevel. */
/*
 * „ÚJ" STÁTUSZ — kitöltött címke, nem halvány.
 *
 * A státusz-cimkék egysegesen 1a atlatszosaggal keszulnek (halvany hatter,
 * szines szoveg). Az „Uj" szine viszont UGYANAZ a kek, mint a kozepes
 * prioritas sorhattere — igy kek a keken, es eppen az nem latszik, amire
 * a leghamarabb kell reagalni.
 *
 * Ez az egyetlen statusz, ami KITOLTOTT: a tobbi allapot valakinek mar a
 * kezeben van, az uj viszont meg senkinek.
 */
.pill.pill-new {
    /*
     * A KIEMELŐ SZÍN A TÉMÁBÓL.
     *
     * Beégetett világoskék állt itt, fehér szöveggel. A világos témákon az
     * kiemelő szín sötétebb (`#0b5ed7`) — a beégetett világoskékre írt fehér
     * szöveg ott alig olvasható. A `--accent` minden témán olyan, amire a
     * fehér ráolvasható.
     */
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
}

tr.ticket-row.szetbontott {
    background-image: linear-gradient(90deg, #5eead41a, transparent 320px);
}
tr.ticket-row.szetbontott:hover {
    background-image: linear-gradient(90deg, #5eead42e, transparent 320px);
}
tr.ticket-row:hover { background: var(--surface2); }
tr.ticket-row.is-new-ticket { background: #4f8cff14; }
tr.ticket-row.is-new-ticket:hover { background: #4f8cff22; }
.new-ticket-badge {
    display: inline-block; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: 0.4px; padding: 1px 6px; border-radius: 20px; vertical-align: middle; margin-left: 6px;
}
.ticket-link { color: var(--text); font-weight: 500; }
.ticket-link:hover { color: var(--accent); text-decoration: none; }

.tenant-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.sla-ok { color: var(--text-dim); }
.sla-near { color: var(--warning); }
.sla-breach { color: var(--danger); font-weight: 700; }

.message {
    border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
    background: var(--surface2);
}
.message.from-admin { background: #4f8cff14; }
/* Belső jegyzet: sárgás sáv, hogy egy pillantásra elüssön a valódi levelezéstől */
.message.internal-note {
    background: #f5a6231a;
    border-left: 3px solid var(--warning);
}
.message-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.message-author { font-weight: 700; }
.message-time { color: var(--text-faint); font-family: monospace; font-size: 11px; margin-left: auto; }

/* Válasz / belső jegyzet váltó a válaszdoboz fölött */
.reply-mode { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.reply-mode-opt {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim);
    margin-bottom: 0; transition: border-color .12s, color .12s, background .12s;
    /* Ezek <label> elemek, ezért a globális címke-stílus nagybetűsre és
       monospace-re állítaná őket — itt visszavesszük normál szövegre. */
    text-transform: none; font-family: inherit; letter-spacing: normal;
}
.reply-mode-opt input { width: auto; margin: 0; }
.reply-mode-opt:has(input:checked) { border-color: var(--accent); color: var(--text); background: #4f8cff14; }
.reply-mode-opt.note:has(input:checked) { border-color: var(--warning); background: #f5a6231a; }
/* Jegyzet módban a teljes doboz kap egy halvány sárga keretet */
form.note-mode textarea { border-color: #f5a62366; background: #f5a6230d; }

/*
 * AI-FUNKCIÓK KÁRTYARÁCSA (admin/subscribe.php).
 *
 * Nyolc jelölőnégyzet egymás alatti sorként hosszú, egyhangú listát adott,
 * amiben nehéz volt látni, melyik funkció van be- és melyik kikapcsolva.
 * Ehelyett minden funkció egy önálló, bekeretezett kártya — a `:has()` a
 * bekapcsoltakat kék kerettel és halvány háttérrel emeli ki, ugyanaz a minta,
 * mint a válasz/jegyzet váltónál (`.reply-mode-opt`).
 */
.ai-funkcio-racs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    margin: 0 0 4px;
}
.ai-funkcio-kartya {
    display: block; cursor: pointer; margin: 0;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface2);
    padding: 10px 12px;
    text-transform: none; font-family: inherit; letter-spacing: normal;
    transition: border-color .12s, background .12s;
}
.ai-funkcio-kartya:has(input:checked) { border-color: var(--accent); background: #4f8cff14; }
.ai-funkcio-kartya:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-funkcio-fej { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-funkcio-fej input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.ai-funkcio-nev { font-size: 13px; }
.ai-funkcio-szamok { margin-top: 6px; color: var(--text-faint); }

.banner { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.banner.success { background: #34c77b1a; color: var(--success); border: 1px solid #34c77b40; }
.banner.error { background: #e5484d1a; color: var(--danger); border: 1px solid #e5484d40; }
.banner.info { background: #4f8cff1a; color: var(--accent); border: 1px solid #4f8cff40; }
/* A figyelmeztetés színe a témából: van rá változó, csak nem használtuk. */
.banner.warning { background: #e6a23c1a; color: var(--warning); border: 1px solid #e6a23c40; }

/* A `1fr` alapértelmezésben nem enged a tartalom minimális szélessége alá:
   ha a bal oldali táblázat széles, kitolja a jobb oldali oszlopot a képernyőről.
   A minmax(0, 1fr) engedi zsugorodni, így a jobb oszlop a helyén marad. */
.grid-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.grid-detail > * { min-width: 0; }

/* Ha az ablak túl keskeny a kéthasábos elrendezéshez, egyoszlopossá váltunk.
   FIGYELEM: ez az ÁLTALÁNOS szabály. Az Ügyfelek oldalnak ennél szélesebb
   sora van (888 px), ezért ott a tenants.php saját, 1650-es töréspontot
   használ a .tenants-grid osztályon. Ha ezt a számot módosítod, azt is nézd
   meg — az volt a hiba, hogy az 1400 egy 1440 pixeles képernyőn épp nem
   lépett életbe. */
@media (max-width: 1400px) {
    .grid-detail { grid-template-columns: 1fr; }
}
@media (max-width: 960px) { .grid-detail { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } }

.muted { color: var(--text-faint); }
/* Idézett sorok az üzenetekben (válaszoknál a "> " kezdetű részek) */
.quoted-line { color: var(--text-faint); border-left: 2px solid var(--border); padding-left: 8px; display: inline-block; }
.small { font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.tabs { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: fit-content; }
.tabs a { padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.tabs a.active { background: #4f8cff22; color: var(--accent); }
.tabs a:hover { text-decoration: none; }

.empty { text-align: center; padding: 50px 20px; color: var(--text-faint); }

/* --- Téma választó --- */
/*
 * A belépő kártya fejléce: felirat + nyelvválasztó + témák.
 *
 * A három elem együtt nem fér ki keskeny kártyán, ha a felirat hosszabb
 * (ÜGYFÉLPORTÁL egy sorban áll, ADMIN KONZOL kettőbe törik). Ezért a
 * vezérlők tördelhetők, a felirat pedig zsugorodhat.
 */
.login-card .flex-between { flex-wrap: wrap; gap: 8px; }
.login-card .login-eyebrow { flex: 1 1 auto; min-width: 0; }

.theme-switcher { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.theme-switcher button {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    padding: 0; box-shadow: inset 0 0 0 1px var(--border);
}
.theme-switcher button.active { border-color: var(--accent); }
.theme-switcher button[data-theme-set="dark"] { background: #12161c; }
.theme-switcher button[data-theme-set="light"] { background: #f4f5f7; }
.theme-switcher button[data-theme-set="ocean"] { background: #0b1220; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #4da3ff33; }
.theme-switcher button[data-theme-set="jungle"] { background: #0e1a13; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #3ecf8e33; }
.theme-switcher button[data-theme-set="sky"] { background: #eaf3fb; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #1a86d833; }
.theme-switcher button[data-theme-set="pink"] { background: #fdf2f6; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #d6417e33; }
.theme-switcher button[data-theme-set="coffee"] { background: #1c1512; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #d2946433; }
/* Papír: világos alap, sötét tinta-gyűrűvel — a téma két fő színe egy pöttyben. */
.theme-switcher button[data-theme-set="paper"] { background: #f5f2eb; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #17171c; }
.theme-switcher button[data-theme-set="paper-dark"] { background: #1e1e24; box-shadow: inset 0 0 0 1px var(--border), inset 0 0 0 5px #ece8df; }

/* --- Nyelv választó --- */
.lang-switcher { display: flex; gap: 4px; }
.lang-switcher .lang-btn {
    /* Tömör kitöltés: három nyelvgomb és hat témakör együtt csak így fér ki
       a belépő kártya fejlécébe. A gombok így is könnyen eltalálhatók. */
    padding: 4px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: monospace;
    color: var(--text-faint); border: 1px solid var(--border); background: transparent;
}
.lang-switcher .lang-btn:hover { color: var(--text); text-decoration: none; }
.lang-switcher .lang-btn.active { color: var(--accent); border-color: var(--accent); background: #4f8cff1a; }

/* --- Bal oldali admin navigáció --- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: 230px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/*
 * A LÁTHATÓ magasság, nem a névleges.
 *
 * A 100vh a böngésző eszköztárai MÖGÖTTI területet is beleszámolja — iPaden és
 * telefonon ezért az oldalsáv alja a képernyő alá esett, és a felhasználó
 * monogramjához (témák, kilépés) görgetni kellett.
 *
 * A dvh a ténylegesen látható magasságot adja. Külön szabályként áll, hogy a
 * régebbi böngészők — amik nem ismerik — a fenti 100vh-t használják tovább.
 */
.app-sidebar { height: 100dvh; }
.app-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.app-nav { flex: 1; padding: 10px 0; }
.app-nav a {
    display: block; padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--text-dim);
    border-left: 3px solid transparent;
}
/*
 * A MENÜPONT-IKON A SORSZÖVEGHEZ IGAZODIK MÉRETBEN (.ikon-svg: 1em) — csakhogy
 * a menüpont-sor betűmérete mindössze 13px, ami az emoji-korban még rendben
 * volt (egy emoji-glyph a saját négyzetét tölti ki), a kézzel rajzolt SVG-k
 * viszont a 200×200-as rajzterületen belül nem minden pixelt töltenek ki —
 * 13px-en szinte eltűntek. Rögzített, a szövegnél nagyobb méret kell, a
 * szóköz helyére pedig egy kis jobb margó, hogy a rés ne szűküljön össze.
 */
.app-nav a .ikon-svg { width: 17px; height: 17px; margin-right: 6px; vertical-align: -4px; }
.app-nav a:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.app-nav a.active { background: var(--surface2); color: var(--accent); border-left-color: var(--accent); }
/*
 * A CSOPORTCÍMKE — „Jegyek", „Kimutatás".
 *
 * Korábban 10 képpontos, monospace, csupa nagybetűs felirat volt: apró
 * jelölés, nem cím. A menüpontok viszont 13 képpontosak, tehát a CÍM volt
 * kisebb, mint az alatta lévő elemek — ami fordítva van, mint ahogy az ember
 * olvassa.
 *
 * Most akkora, mint a menüpontok, aláhúzással elválasztva. Az aláhúzás nem
 * díszítés: a csoportok között ez adja a tagolást, ami eddig csak a felirat
 * halványságából jött.
 *
 * A monospace maradhatott volna, de a nagyobb méretben már idegen a többi
 * szövegtől — 10 képpontnál még jelölésnek látszott, 13-nál kódnak.
 */
.app-nav .nav-label {
    padding: 18px 20px 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    margin: 0 12px 6px;
}
/*
 * A CSOPORTCÍMKE MOST EGYSZERRE TARTALMAZ IKONT ÉS FELIRATOT
 * (`.nav-label-icon` + `.nav-label-txt`) — korábban a JS cserélte ki a
 * teljes `textContent`-et emoji és felirat közt, most a CSS dönti el,
 * melyik látszik. Nyitott asztali nézetben (ez az alapállapot) a felirat
 * a helyes, az ikon itt felesleges lenne a szöveg mellett.
 */
.app-nav .nav-label .nav-label-icon { display: none; }

/* Az első csoport fölött nem kell a nagy térköz: ott nincs mitől elválasztani. */
.app-nav .nav-label:first-child { padding-top: 8px; }

/*
 * ÖSSZECSUKOTT OLDALSÁV — CSOPORT-IKONOKKAL.
 *
 * Csukva NEM a huszonhét menüpont látszik: az sehol nem férne el (mérve ~1300
 * pixel). Helyette az ÖT CSOPORT ikonja áll egymás alatt, és kattintásra jobbra
 * nyílik a csoport almenüje, feliratokkal.
 *
 * A menüpontokat ezért csukva elrejtjük — a kinyíló panel klónokból épül, tehát
 * nem veszik el semmi.
 */
.app-sidebar.nav-collapsed { width: 56px; overflow: visible; }
.app-sidebar.nav-collapsed .app-nav > a,
.app-sidebar.nav-collapsed .nav-find,
.app-sidebar.nav-collapsed .brand-text,
.app-sidebar.nav-collapsed .app-sidebar-footer { display: none; }

/* A csoportcímke csukva ikon-gombbá válik. */
.app-sidebar.nav-collapsed .nav-label {
    display: flex; align-items: center; justify-content: center;
    padding: 12px 0; margin: 0; font-size: 19px; cursor: pointer;
    color: var(--text-dim); border-left: 2px solid transparent;
    letter-spacing: 0; text-transform: none;
    /* Csukva ikon látszik, nem cím — az aláhúzás ott értelmetlen vonal lenne. */
    border-bottom: none; font-weight: 400;
}
/* Csukva az ikon látszik (a 19px betűméretre igazodva, lásd .ikon-svg
   1em × 1em szabálya), a felirat rejtve marad. */
.app-sidebar.nav-collapsed .nav-label .nav-label-icon { display: inline-flex; }
.app-sidebar.nav-collapsed .nav-label .nav-label-txt { display: none; }
.app-sidebar.nav-collapsed .nav-label:hover { background: var(--surface2); color: var(--text); }
.app-sidebar.nav-collapsed .app-sidebar-brand { padding: 14px 0; justify-content: center; }
.app-sidebar.nav-collapsed .app-nav { padding: 8px 0; flex: 0 0 auto; }

/*
 * A FELHASZNÁLÓ MONOGRAMJA — csukott oldalsáv alján.
 *
 * A margin-top:auto tolja le az aljára: a menü flex-oszlop, tehát a maradék
 * helyet ez a gomb kapja meg. Így akkor is alul marad, ha kevés az ikon.
 */
.nav-user {
    /*
     * A margin-top:auto viszi az ALJÁRA.
     *
     * Ehhez az kell, hogy a menü NE foglalja el a maradék helyet — csukott
     * állapotban ezért kap `flex: 0 0 auto`-t. Így a szabad hely a gomb fölé
     * kerül, és az az aljára szorul.
     *
     * Ha az ablak alacsony, a menü görgethető, és a gomb a tartalom végén
     * marad — vagyis nem takarja el az ikonokat.
     */
    display: none; align-self: center; margin: auto 0 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
}
.app-sidebar.nav-collapsed .nav-user { display: block; }
.nav-user:hover { border-color: var(--accent); color: var(--accent); }

/* Kereső-ikon csukott állapotban: kinyitja az oldalsávot és a mezőbe ugrik. */
.nav-search-icon {
    display: none; background: none; border: none; color: var(--text-faint);
    cursor: pointer; width: 100%; padding: 11px 0; font-size: 17px;
}
.app-sidebar.nav-collapsed .nav-search-icon { display: block; }

/*
 * A KERESŐ-IKON A KÉNYSZERÍTETT SÁVBAN NEM JELENIK MEG.
 *
 * A gomb dolga az, hogy KINYISSA az oldalsávot és a keresőmezőbe ugorjon.
 * 860 és 1300 pixel között viszont az oldalsáv nem nyitható — a kattintás után
 * azonnal visszacsukódna, vagyis a gomb látszólag nem csinál semmit.
 *
 * Egy gomb, ami nem működik, rosszabb, mintha ott sem lenne.
 */
@media (min-width: 861px) and (max-width: 1300px) {
    .nav-search-icon { display: none !important; }
}
.nav-search-icon:hover { background: var(--surface2); color: var(--text); }

/*
 * A KINYÍLÓ ALMENÜ.
 *
 * A <body>-ra kerül, nem az oldalsávba: az oldalsáv görgethető és levágná.
 */
.nav-flyout {
    position: fixed; z-index: 200; min-width: 210px; max-height: 80vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    /* Az árnyék erőssége témánként más: világos háttéren a sötét témához
       szabott fekete túl kemény lenne. */
    box-shadow: 0 14px 40px var(--shadow, #00000073); padding: 6px;
}
.nav-flyout-cim {
    font-size: 10px; font-family: monospace; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-faint); padding: 8px 12px 6px;
}
.nav-flyout a { display: block; padding: 9px 12px; font-size: 13px; color: var(--text-dim); border-radius: 7px; }
.nav-flyout a:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.nav-flyout a.active { color: var(--accent); }
.nav-flyout .app-sidebar-footer { padding: 10px 12px; }

/*
 * ÖSSZECSUKÓ CSÍK az oldalsáv jobb szélén.
 *
 * Korábban a menü legalján volt gombként — oda a szem nem jár, és görgetni is
 * kellett hozzá. A szélen ott van, ahol a határ amúgy is látszik: alapból
 * halvány, ráhúzva kiemelkedik.
 */
/*
 * A CSÍK A KÉPERNYŐHÖZ RÖGZÜL, nem az oldalsávhoz.
 *
 * Abszolút pozícióval az oldalsáv TELJES magasságának közepére került — hosszú
 * menünél ez a görgetett tartalom közepe, tehát az aljára érve eltűnt a
 * képernyőről. Rögzített pozícióval mindig a látható rész közepén marad.
 *
 * A bal széle a menü szélességéhez igazodik: nyitva 230, csukva 56 pixel.
 */
/*
 * A MENÜ ÖSSZECSUKÓ FÜLE.
 *
 * Halványan indult — `text-faint` szín ÉS 55%-os áttetszőség egyszerre —,
 * ami a gyakorlatban azt jelentette, hogy a nyíl alig látszott. Aki nem
 * tudta, hogy ott van, nem is találta meg: a fül egy 14 képpont széles csík,
 * a nyíl az egyetlen jelzés arról, hogy mire való.
 *
 * A visszafogottság itt indokolt — ez nem gyakran használt gomb —, de a
 * visszafogott nem azonos a láthatatlannal. A fül maga marad halkabb, a NYÍL
 * viszont olvasható.
 */
.nav-edge {
    position: fixed; top: 50%; left: 216px; transform: translateY(-50%);
    width: 14px; height: 54px; padding: 0; z-index: 5;
    background: var(--surface2); border: 1px solid var(--border); border-right: none;
    border-radius: 7px 0 0 7px;
    /* A nyíl a szöveg alapszínét kapja, nem a leghalványabbat. */
    color: var(--text);
    cursor: pointer; font-size: 14px; line-height: 1; opacity: .85;
}
.nav-edge:hover { opacity: 1; background: var(--accent); color: #fff; border-color: var(--accent); }
/* Csukva a menü 56 pixel széles, tehát a csík is arrébb kerül. */
.nav-edge.is-collapsed { left: 42px; }
.app-sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
/*
 * FLEX OSZLOP, HOGY A LÁBLÉC ALUL RAGADJON (lásd lent, .app-main > .powered-by).
 * Enélkül a „Működteti: Solveport” a tartalom természetes végén jelenik meg —
 * rövid listánál (pl. 1 jegy) ez a szűrősor közelébe, akár egy nyitott
 * legördülő (.select-panel) alá/mögé kerül, és Attila jelzése szerint néha
 * el is takarja a kattintható opciókat.
 */
.app-main { flex: 1; min-width: 0; padding: 24px 28px 60px; display: flex; flex-direction: column; }

/*
 * Oldalcím. Halkabb, mint egy klasszikus H1: nem hirdetés, hanem tájékozódási
 * pont — „hol vagyok". A tartalom a fontos, nem a felirat.
 */
.page-title {
    font-size: 19px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em;
}

@media (max-width: 860px) {
    /*
     * MOBILON A MENÜ VÍZSZINTES SÁV — az összecsukás értelmét veszti.
     *
     * A .nav-edge csík rögzített pozíciójú, a menü szélességéhez igazítva.
     * Vízszintes menünél nincs mihez igazodnia: a képernyő KÖZEPÉN jelent meg,
     * a tartalom fölött. Ugyanígy a kereső-ikon és a monogram-gomb is: azok az
     * ÖSSZECSUKOTT függőleges sávhoz készültek.
     *
     * A keresőmező pedig a vízszintes sorban egyetlen üres dobozzá nyomódott
     * össze — a jegylistának amúgy is van saját keresője.
     */
    .nav-edge, .nav-search-icon, .nav-find { display: none !important; }

    /*
     * A MONOGRAM VISZONT MARAD — mobilon ez az EGYETLEN út a kilépéshez.
     *
     * A lábléc (felhasználó, témák, kilépés) itt rejtve van, mert egy
     * vízszintes sávba nem fér bele. A monogramra kattintva viszont dobozként
     * megnyílik. Enélkül telefonról nem lehetne kijelentkezni — ezt majdnem
     * elrontottam, amikor a többi asztali elemmel együtt rejtettem el.
     */
    /* A monogram a jobb szélen, fixen: a menü után következik, és nem zsugorodik. */
    .nav-user {
        display: block !important; margin: 0 10px 0 6px; align-self: center; flex: none;
    }

    .app-shell { flex-direction: column; }
    /*
     * NINCS TÖBBÉ VÍZSZINTES GÖRGETÉS a menüsávon.
     *
     * Az overflow-x:auto akkor került ide, amikor mind a huszonhét menüpont
     * egy sorban állt — akkor kellett is. Csoport-ikonokkal viszont öt elem
     * van, ami elfér; a görgetés viszont MEGAKADÁLYOZTA a szétosztást: a
     * böngésző a tartalom természetes szélességét használta, tehát a flex:1-nek
     * nem volt mihez nyúlnia, és az ikonok balra zsúfolódtak.
     */
    .app-sidebar { width: 100%; height: auto; position: relative; flex-direction: row; overflow-x: visible; }
    /*
     * MOBILON CSAK A MONOGRAM, cégnév nélkül.
     *
     * A „Ultimate Support Kft. / Support konzol" felirat mintegy 280 pixelt
     * kér — egy 390 pixeles telefonon ez a hely kétharmada. Emiatt az ikonok
     * jobbra szorultak, és az utolsó le is vágódott a képernyő széléről.
     *
     * A monogram önmagában is megmondja, melyik rendszerben vagy; a teljes
     * cégnév a súgóbuborékból derül ki, ahogy az összecsukott oldalsávban is.
     */
    .app-sidebar-brand {
        border-bottom: none; border-right: 1px solid var(--border);
        flex-shrink: 0; padding: 10px 12px;
    }
    .app-sidebar-brand .brand-text { display: none; }
    /*
     * A MENÜ SZÉTOSZTJA A HELYET az ikonok közt.
     *
     * A flex:1 miatt a sáv elvette a teljes szabad helyet, de az ikonokat
     * balra zsúfolta — a monogramnak pedig nem maradt hova jobbra tolódnia,
     * mert a margin-left:auto csak SZABAD helyet tud felhasználni.
     *
     * A space-around mindkettőt megoldja: az ikonok egyenletesen elosztva
     * állnak, a monogram pedig a sáv után, a jobb szélen.
     */
    .app-nav {
        display: flex; padding: 0; flex: 1; justify-content: space-around;
        /*
         * min-width:0 — enélkül a flex elem nem tud a tartalmánál keskenyebb
         * lenni, és nagyon szűk képernyőn kilógna a sávból. Így inkább az
         * ikonok kerülnek közelebb egymáshoz.
         */
        min-width: 0;
    }
    /*
     * MOBILON IS CSOPORT-IKONOK, mint az összecsukott oldalsávban.
     *
     * Eddig mind a huszonhét menüpont egyetlen görgethető sorban állt, a
     * csoportcímkék elrejtve — vagyis ugyanaz a baj, amit az asztali
     * oldalsávnál már megoldottunk: nincs tagolás, és a végén lévő pontokig
     * sokat kell húzni.
     *
     * Most az öt csoport ikonja látszik, és kattintásra a sáv ALATT nyílik ki
     * az almenü. Ugyanaz a panel, ugyanaz a logika — csak más pozícióban.
     */
    .app-nav > a { display: none; }

    .app-nav .nav-label {
        /*
         * Szűkebb belső margó, mint az összecsukott oldalsávban: ott függőleges
         * a hely, itt vízszintes és véges. 12 pixellel egy 360 pixeles telefonon
         * is elfér mind az öt ikon a fejléc és a monogram mellett.
         */
        display: flex; align-items: center; justify-content: center;
        padding: 0 12px; margin: 0; font-size: 19px; cursor: pointer;
        color: var(--text-dim); border-bottom: 3px solid transparent;
        letter-spacing: 0; text-transform: none; height: 100%;
        /* Itt a `border-bottom` az AKTÍV jelölés, nem elválasztó vonal —
           a saját szabálya felülírja a fentit, de a súlyt itt is vissza kell
           venni, különben vastagabb lenne, mint a többi elem. */
        font-weight: 500;
    }
    /* Mobilon is ikon-only, ugyanúgy mint az összecsukott asztali oldalsávban. */
    .app-nav .nav-label .nav-label-icon { display: inline-flex; }
    .app-nav .nav-label .nav-label-txt { display: none; }
    .app-nav .nav-label:hover { color: var(--text); }
    /* A csoport-összecsukás nyila itt sem kell: a kattintás almenüt nyit. */
    .app-nav .nav-label-toggle::before { content: none; }
    .app-sidebar-footer { display: none; }
    .app-main { padding: 16px; }
}

/* --- Statisztika oldal: kördiagram és oszlopdiagram, tiszta CSS-sel --- */
.stat-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.stat-summary-value { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; }

/*
 * TREND-JELÖLÉS a mérőszám mellett.
 *
 * Kisebb és halványabb, mint maga a szám: a MÉRŐSZÁM a fontos, a trend csak
 * összefüggés. Fordítva a nyilak elvonnák a figyelmet arról, amit mérünk.
 *
 * A felső igazítás azért kell, hogy a nyíl a szám tetejéhez simuljon, ne a
 * talpvonalához — így a nagy számjegyek mellett sem lóg ki.
 */
.trend {
    font-size: 13px; font-weight: 600; margin-left: 8px;
    vertical-align: middle; white-space: nowrap;
}

@media print { .trend { color: var(--text-dim) !important; } }
.stat-summary-label { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

.stat-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.stat-chart-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 14px; }

.stat-donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.stat-donut {
    width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.stat-donut-hole {
    width: 72px; height: 72px; border-radius: 50%; background: var(--surface);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--text);
}
.stat-legend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 7px; }
.stat-legend-row { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.stat-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.stat-bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 20px; }
.stat-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.stat-bar-value { font-size: 11px; line-height: 1; color: var(--text-faint); margin-bottom: 4px; }
.stat-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--surface2); border-radius: 4px 4px 0 0; overflow: hidden; min-height: 4px; }
.stat-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-height: 2px; }
/*
 * RÖGZÍTETT MAGASSÁG, NEM min-height.
 *
 * MI VOLT A BAJ: a .stat-bar-track `flex:1`-je a saját oszlopa teljes
 * magasságából (160px) vonja le a felirat TÉNYLEGES, kirenderelt
 * magasságát. Egy rövidebb, egysoros felirat (pl. "Hálózati beállítás",
 * ha épp befér egy sorba) mellett a track MAGASABB lett, mint a
 * szomszédos, kétsoros feliratú oszlopoké — így ugyanaz a száz
 * százalék oszloponként MÁS pixelmagasságot jelentett, és az oszlopok
 * teteje nem volt egy vonalban, holott a kördiagramok és a heti bontás
 * oszlopai igen.
 *
 * A rögzített, két sorra szabott magassággal minden oszlop felirata
 * (és ezzel a track-je is) ugyanannyi helyet kap, függetlenül attól,
 * hány szóból áll a kategórianév. Egy ennél hosszabb, három sorra törő
 * felirat belül marad (overflow: hidden) — ez jobb, mint hogy emiatt
 * MINDEN oszlop elcsússzon.
 */
.stat-bar-label {
    font-size: 10px; line-height: 1.3; height: 26px; overflow: hidden;
    color: var(--text-faint); margin-top: 6px; text-align: center; word-break: break-word;
}

.stat-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }



/* "ÚJ" jelvény az olvasatlan változásnaplóhoz */
.version-new-badge {
    display: inline-block; background: var(--accent); color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .6px;
    padding: 2px 6px; border-radius: 999px; line-height: 1.2;
    vertical-align: middle; animation: badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, .55); }
    50% { box-shadow: 0 0 0 5px rgba(79, 140, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .version-new-badge { animation: none; }
}

/* ==========================================================================
   NYOMTATÁS / PDF-MENTÉS
   A böngésző "Nyomtatás" (Ctrl/Cmd+P) funkciója egyben PDF-mentés is.
   Cél: tiszta, fehér alapú, olvasható dokumentum — menü, gombok, űrlapok nélkül.
   ========================================================================== */
@media print {
    /* Világos alap, fekete szöveg — a témától függetlenül */
    :root, [data-theme] {
        --bg: #fff; --surface: #fff; --surface2: #fff; --border: #ccc;
        --text: #000; --text-dim: #333; --text-faint: #666;
        --accent: #0b5ed7; --success: #157347; --warning: #997404; --danger: #b02a37;
        color-scheme: light;
    }
    html, body {
        background: #fff !important; color: #000 !important;
        font-size: 11.5pt; line-height: 1.45;
    }
    body::before, body::after { display: none !important; }  /* háttér-fényfoltok */

    /* Ami nem kell papírra */
    .app-sidebar, .topbar, .filters, .theme-switcher, .no-print,
    form:not(.print-keep), button, .btn, input, select, textarea,
    .pagination, nav, #navTicketBadge {
        display: none !important;
    }

    /* A tartalom foglalja el a teljes szélességet */
    .app-main, .wrap, .app-content {
        margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important;
    }
    .grid-detail { display: block !important; }

    /* Kártyák: keret helyett finom elválasztás, ne törjenek ketté */
    .card {
        background: #fff !important; border: 1px solid #ddd !important;
        box-shadow: none !important; break-inside: avoid; page-break-inside: avoid;
        margin-bottom: 10px !important;
    }
    .card-pad { padding: 10px 12px !important; }

    /* Üzenetek: olvasható, elkülönülő blokkok */
    .message {
        background: #fff !important; border: 1px solid #ddd !important;
        break-inside: avoid; page-break-inside: avoid; margin-bottom: 8px !important;
    }
    .message.from-admin { border-left: 3px solid #0b5ed7 !important; }
    /* Nyomtatásban is látszódjon, hogy ez nem ment ki az ügyfélnek */
    .message.internal-note {
        border-left: 3px solid #b8860b !important;
        background: #fffbe6 !important;
    }

    /* Táblázatok: fejléc ismétlődjön az oldalak tetején */
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; page-break-inside: avoid; }
    th, td { border-bottom: 1px solid #ddd !important; padding: 5px 6px !important; color: #000 !important; }

    /* Címkék (státusz, prioritás) körvonallal, hogy fekete-fehérben is látszódjanak */
    .pill { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }

    /* Linkek: a cím kiírása felesleges papíron */
    a { color: #000 !important; text-decoration: none !important; }

    /* Diagramok: a böngésző alapból nem nyomtat háttérszínt/átmenetet —
       ezeknél viszont pont az hordozza az információt, ezért kikényszerítjük. */
    .stat-donut, .stat-donut-hole, .stat-legend-dot, .stat-bar-fill, .stat-bar,
    .satbar, .satbar > div, .pill, .progress, .progress > div,
    [style*="conic-gradient"], [style*="background:var(--accent)"], [style*="background: var(--accent)"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* A diagram-kártyák ne törjenek ketté, és legyen körülöttük levegő */
    .stat-charts-grid { display: block !important; }
    .stat-donut-row, .stat-bar-chart { break-inside: avoid; page-break-inside: avoid; }
    .stat-bar-chart { height: 130px !important; }
    .stat-donut { break-inside: avoid; }
    /* A jelmagyarázat szövege sötét legyen papíron */
    .stat-legend-row, .stat-bar-label, .stat-bar-value { color: #000 !important; }

    /* Oldalbeállítás */
    @page { margin: 14mm 12mm; }
}

/* Ráfordított idő sor a válaszdoboz alatt.
   Saját komponens, mert a globális `label` stílus nagybetűs monospace,
   ami egy sorba szedve a mező mellett nem mutat jól. */
.worktime-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 12px;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
}
.worktime-label { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.worktime-input { position: relative; display: inline-flex; align-items: center; }
.worktime-input input[type=number] {
    width: 104px; margin-bottom: 0; padding-right: 42px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.worktime-unit {
    position: absolute; right: 12px; font-size: 12px; color: var(--text-faint); pointer-events: none;
}
.worktime-hint { font-size: 12px; color: var(--text-faint); margin-left: auto; }
@media (max-width: 560px) {
    .worktime-hint { display: none; }
}

/* A jegyoldal jobb hasábja: a kártyák egy közös oszlopban,
   különben a rács felváltva szórná szét őket a két hasáb között. */
.detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-side .card { margin: 0; }

/* Jegy-metaadatok tömör két hasábban a jobb oldali kártyán */
.meta-list {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
    margin: 0 0 16px; font-size: 13px; align-items: baseline;
}
.meta-list dt { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.meta-list dd { margin: 0; min-width: 0; }

/* ---------------------------------------------------------------
 * Súgó-kérdőjel (helpTip)
 * Csak CSS: egérrel hover, billentyűzettel Tab, érintőn koppintás.
 * ------------------------------------------------------------- */
.helptip {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; flex: 0 0 15px;
    margin-left: 5px; vertical-align: middle;
    border-radius: 50%;
    /*
     * A KÖR LÁTSZÓDJON, NE CSAK A KÉRDŐJEL.
     *
     * A háttér korábban `surface2` volt, a keret pedig `border` — mindkettő
     * túl közel áll a kártya színéhez, így a kör beleolvadt, és a felületen
     * csak egy magányos kérdőjel látszott. Az meg úgy hat, mintha odatévedt
     * volna, nem úgy, mint egy gomb.
     *
     * A `color-mix` a TÉMA SAJÁT kiemelő színéből kever halványat: hat téma
     * van, hatféle kiemelő színnel. Beégetett kékkel a Dzsungel témában (ami
     * zöld) idegen kék pötty jelent volna meg — a származtatott szín viszont
     * mindenhol a helyi palettához illik.
     *
     * A tartalék a `color-mix` nélküli böngészőknek szól: ott a régi,
     * visszafogott változat marad, ami rosszabb, de nem hibás.
     */
    /*
     * TÖMÖR HÁTTÉR, NEM ÁTTETSZŐ.
     *
     * Az áttetsző keverés az alatta lévő felülettől függ: a kártyákon még
     * látszott valamennyire, a MENÜSÁVBAN viszont — ami sötétebb, és a
     * kiemelt menüpont maga is kékes — szinte teljesen eltűnt. Ugyanaz a
     * szabály két helyen máshogy nézett ki.
     *
     * A tömör szín mindenhol ugyanaz: a kör alakja független attól, mire
     * kerül. A keret egy fokkal világosabb nála, így a széle is elválik a
     * háttértől — enélkül a kör kontúr nélküli folt lenne.
     */
    /*
     * A SZÍNEK MÉRVE, NEM BECSÜLVE.
     *
     *   text-faint kör:  2,7:1 a menüsávhoz — látszik, de a kérdőjel benne
     *                    ugyanennyi, ami olvasáshoz kevés.
     *   text-dim kör:    5,3:1 mindkét irányban. A kör elüt a háttértől, a
     *                    kérdőjel pedig jól olvasható benne.
     *   text kör:        13:1 — az már világító folt, harsányabb a menü
     *                    feliratainál, pedig ez csak kiegészítő jel.
     */
    border: 1px solid var(--text-dim);
    background: var(--text-dim); color: var(--surface);
    font-size: 10px; font-weight: 700; line-height: 1; cursor: help;
    user-select: none; transition: color .12s, border-color .12s, background .12s;
}
.helptip:hover, .helptip:focus {
    color: #fff; border-color: var(--accent); background: var(--accent); outline: none;
}
.helptip-mark { pointer-events: none; }

.helptip-bubble {
    position: absolute; bottom: calc(100% + 8px); z-index: 60;
    width: max-content; max-width: 260px;
    padding: 9px 12px; border-radius: 8px;
    background: var(--surface2); border: 1px solid var(--border);
    box-shadow: 0 8px 24px #0006;
    color: var(--text); font-size: 12.5px; font-weight: 400; line-height: 1.5;
    text-align: left; white-space: normal; letter-spacing: 0;
    /*
     * A buborék a szülő szövegstílusát örökölné. Táblázatfejlécben (th) és
     * mezőcímkében (label) az nagybetűsítés és monospace betű — attól a
     * súgószöveg CSUPA NAGYBETŰVEL jelent meg, olvashatatlanul.
     * Itt visszaállítjuk a normál folyószöveget.
     */
    text-transform: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    opacity: 0; visibility: hidden; transform: translateY(3px);
    transition: opacity .12s, transform .12s, visibility .12s;
}
.helptip-left   .helptip-bubble { left: -8px; }
.helptip-right  .helptip-bubble { right: -8px; }
.helptip-center .helptip-bubble { left: 50%; transform: translate(-50%, 3px); }

.helptip:hover .helptip-bubble,
.helptip:focus .helptip-bubble,
.helptip:focus-within .helptip-bubble {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Ha fölötte nincs elég hely (a helptip.js teszi rá az osztályt),
   a buborék lefelé nyílik — így nem csúszik ki a képernyő tetején. */
.helptip.helptip-below .helptip-bubble {
    bottom: auto; top: calc(100% + 8px); transform: translateY(-3px);
}
.helptip.helptip-below:hover .helptip-bubble,
.helptip.helptip-below:focus .helptip-bubble,
.helptip.helptip-below:focus-within .helptip-bubble { transform: translateY(0); }
.helptip.helptip-center.helptip-below .helptip-bubble { transform: translate(-50%, -3px); }
.helptip.helptip-center.helptip-below:hover .helptip-bubble { transform: translate(-50%, 0); }
.helptip-center:hover .helptip-bubble,
.helptip-center:focus .helptip-bubble { transform: translate(-50%, 0); }

/* Szűk kijelzőn ne lógjon ki a képernyőről */
@media (max-width: 560px) {
    .helptip-bubble { max-width: 62vw; }
}
/* A válasz/jegyzet váltó melletti súgó a sor végére kerüljön.
   FONTOS: a súgó a sor UTOLSÓ eleme legyen — flexben az auto margó
   mindent jobbra tol, ami utána következik. */
.reply-mode-help { margin-left: auto; display: inline-flex; align-items: center; }

/* Sorba szedett jelölőnégyzet-címkék (pl. „Számlázható”) szintén <label>-ek */
label.inline-check {
    display: inline-flex; align-items: center; gap: 7px;
    text-transform: none; font-family: inherit; letter-spacing: normal;
    font-size: 13px; color: var(--text); margin-bottom: 10px;
}

/* Számlázható/nem számlázható kapcsoló az időtételeknél */
.billable-toggle {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 10px; font-family: inherit; line-height: 1.6;
    background: #34c77b1a; color: var(--success); border: 1px solid #34c77b55;
    cursor: pointer; transition: filter .12s;
}
.billable-toggle.off {
    background: var(--surface2); color: var(--text-faint); border-color: var(--border);
}
.billable-toggle:hover { filter: brightness(1.35); }
/* Az órakeret mező kikapcsolva (óradíjas cégnél) halványan látszik */
input[disabled] { opacity: .45; cursor: not-allowed; }

/* Munkaidő-naptár beállító rácsa */
.workhours-grid { display: flex; flex-direction: column; gap: 8px; }
.workhours-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .workhours-row input[type=time] { width: 100px !important; } }

/* Egy sorba szedett mezők + gomb (pl. szabály hozzáadása).
   A mezőknek és a legördülő-burkolónak alapból 16px alsó margója van, ezért
   flex-end igazításnál a gomb 16 pixellel lejjebb ült, mint a mezők. */
.field-row-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field-row-inline > div { min-width: 180px; }
.field-row-inline select,
.field-row-inline input,
.field-row-inline .select-wrap { margin-bottom: 0; }
.field-row-inline > button { margin-bottom: 0; }

/* Elhalasztás gyorsgombjai */
.snooze-quick { display: flex; gap: 6px; flex-wrap: wrap; }

/* Címkék */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 6px 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.5;
    background: color-mix(in srgb, var(--tag) 14%, transparent);
    color: var(--tag); border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent);
}
.tag-chip a { color: inherit; text-decoration: none; }
.tag-x {
    background: none; border: none; color: inherit; opacity: .55;
    cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1;
}
.tag-x:hover { opacity: 1; }
/* Listaoldali, kattintható címke */
.tag-link { text-decoration: none; }
.tag-link:hover { text-decoration: none; }

/* Előfizetés-állapot panel */
.sub-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; align-items: start; }
.storage-bar { height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; margin-top: 6px; max-width: 220px; }
.storage-bar span { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
/* Nyitva induló details (a jelölő nyíl elrejtésével) */
.details-plain > summary { list-style: none; }
.details-plain > summary::-webkit-details-marker { display: none; }

/* Beállítási varázsló lépései */
.setup-step {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 18px; border-top: 1px solid var(--border);
}
.setup-step:first-child { border-top: none; }
.setup-step.is-done { opacity: .62; }
.setup-mark { flex: none; font-size: 16px; line-height: 1.4; width: 22px; text-align: center; }
@media (max-width: 640px) {
    .setup-step { flex-wrap: wrap; }
    .setup-step > div:last-child { width: 100%; }
}
/* Beállítási emlékeztető a főoldalon */
.setup-reminder {
    margin-bottom: 16px;
    border-color: var(--accent);
    background: linear-gradient(90deg, #4f8cff14, transparent);
}

/* Üdvözlő képernyő az első belépéskor */
.welcome-card { text-align: center; padding: 40px 28px; border-color: var(--accent); }
.welcome-points {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px; max-width: 760px; margin: 0 auto; text-align: left;
}
.welcome-points > div {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px;
}
.welcome-points strong { display: block; font-size: 14px; margin-bottom: 4px; }
.welcome-points span { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.welcome-icon { font-size: 22px; margin-bottom: 8px; }

/* Beállítás-kereső az oldalsávban */
.nav-find { margin: 10px 0 4px; padding: 0 2px; }
.nav-find input {
    width: 100%; box-sizing: border-box;
    font-size: 12.5px; padding: 8px 10px; margin: 0;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
}
.nav-find input::placeholder { color: var(--text-faint); }
/* A fókuszjelölés BEFELÉ rajzolódik, különben kilógna a keskeny oldalsávból */
.nav-find input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Találatok */
.find-hit {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 18px; border-top: 1px solid var(--border);
    text-decoration: none; color: inherit; transition: background .12s;
}
.find-hit:first-child { border-top: none; }
/* A text-decoration itt is kell: az `a:hover` szabály (0,1,1) ERŐSEBB, mint a
   .find-hit (0,1,0), ezért ráhúzáskor aláhúzta a találat címét, a leírását és
   még a jobb oldali szakasz-címkét is. Ugyanez a minta a .btn:hover és a
   .app-nav a:hover szabályokban. */
.find-hit:hover { background: var(--surface2); text-decoration: none; }

/* Élő találatok a kereső alatt.
   FONTOS: a szabályokat `.app-nav` előtaggal írjuk, mert az `.app-nav a`
   szabály erősebb lenne, és felülírná az elrendezést — emiatt folyt egybe
   korábban a találat neve és a szakasz neve. */
.nav-find { position: relative; }
.nav-find-results {
    display: none; position: absolute; z-index: 80; left: 2px; right: 2px; top: calc(100% + 6px);
    /*
     * ELEMELT FELÜLET — DE A TÉMÁBÓL.
     *
     * MI VOLT A BAJ
     * Itt beégetett sötétkék állt (`#1b2334`), a szövegszínt viszont a téma
     * adta. Világos témán — Light, Sky — ez sötét doboz SÖTÉT szöveggel:
     * olvashatatlan. Hat téma van a rendszerben; egy beégetett szín közülük
     * ötben rossz.
     *
     * A `--surface` minden témán a háttérnél elemeltebb felület, tehát az
     * eredeti szándék („ne olvadjon bele az oldalsávba") megmarad — csak
     * most igazodik ahhoz, amit a felhasználó választott.
     */
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 18px 42px #000c, 0 0 0 1px #ffffff0d;
    overflow: hidden; max-height: 340px; overflow-y: auto;
}
.nav-find-results.open { display: block; }

.app-nav .nav-find-hit {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 13px; margin: 0; border-left: none; border-radius: 0;
    border-bottom: 1px solid #ffffff12;
    text-decoration: none; color: var(--text); font-weight: 400;
}
.app-nav .nav-find-hit:last-child { border-bottom: none; }
.app-nav .nav-find-hit.active,
.app-nav .nav-find-hit:hover { background: var(--surface2); color: var(--text); }
.app-nav .nav-find-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.app-nav .nav-find-sec {
    font-size: 10px; color: var(--text-faint); text-transform: uppercase;
    letter-spacing: .06em; line-height: 1.3;
}

/*
 * Változásnapló: a kiadás-kártyák és a tételek jelvényei. Eddig soron belüli
 * stílus és beégetett hexa volt a lap HTML-jében; a színek most változókból
 * jönnek, így minden témán a saját palettához igazodnak.
 */
.cl-tetel { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.cl-tipus {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: .5px;
    padding: 3px 8px; border-radius: 5px; margin-top: 2px; min-width: 66px; text-align: center;
}
.cl-tipus--uj       { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.cl-tipus--javitas  { color: var(--accent);  background: color-mix(in srgb, var(--accent) 10%, transparent);  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cl-tipus--valtozas { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.cl-szoveg { font-size: 14.5px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.cl-kiadas { margin-bottom: 14px; }
.cl-kiadas--legujabb { border-color: var(--accent); }
.cl-kiadas-fej { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-verzio { margin: 0; font-size: 19px; }
.cl-jelenlegi { color: var(--accent); font-size: 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cl-kiadas-cim { color: var(--text-dim); font-size: 15px; margin-bottom: 14px; }
.cl-patch-fej { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cl-patch-fej strong { font-size: 14px; }
.cl-patch-datum { margin-left: auto; }

/* Változásnapló: kisebb javítások összecsukva */
.patch-list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.patch-list > summary {
    cursor: pointer; font-size: 13px; color: var(--text-dim);
    padding: 4px 0; list-style: none;
}
.patch-list > summary::-webkit-details-marker { display: none; }
.patch-list > summary::before { content: '► '; color: var(--text-faint); }
.patch-list[open] > summary::before { content: '▼ '; }
.patch-list > summary:hover { color: var(--text); }
.patch-entry { border-left: 2px solid var(--border); padding: 10px 0 10px 14px; margin-top: 10px; }
/* Halvány jelzés kisebb javításokhoz (a feltűnő ÚJ jelvény helyett) */
.version-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); opacity: .65; vertical-align: middle;
}

/* Ünnepnapok: lista és a magyar naptár egymás mellett */
.holiday-grid { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .holiday-grid { grid-template-columns: 1fr; } }

/* Témaválasztó címkéje.
   A buborék a <body> végén él és `fixed` pozíciójú — így az oldalsáv
   görgethetősége nem vághatja le, ami a korábbi próbálkozásnál elrontotta. */
#themeTip {
    position: fixed; z-index: 200; pointer-events: none;
    background: var(--surface2); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 9px; font-size: 11.5px; line-height: 1.3;
    white-space: nowrap; box-shadow: 0 8px 20px #0007;
    opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
#themeTip.show { opacity: 1; transform: translateY(0); }

/* Menü: kedvencek és összecsukható csoportok */
.nav-fav-box { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 4px; }
.nav-label-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 5px; }
.nav-label-toggle::before { content: '▼'; font-size: 9px; opacity: .6; transition: transform .12s; }
.nav-label-toggle.is-closed::before { transform: rotate(-90deg); }
/*
 * Csukott oldalsávban NINCS nyíl a csoport-ikon mellett: ott a kattintás nem
 * a csoportot csukja össze, hanem az almenüt nyitja — a nyíl mást ígérne.
 */
.app-sidebar.nav-collapsed .nav-label-toggle::before { content: none; }
.nav-label-toggle:hover { color: var(--text-dim); }
.app-nav a.nav-customize { font-size: 12px; color: var(--text-faint); margin-top: 8px; }

/* Menü testreszabása: a jelölőnégyzetek két tömör hasábban.
   Nem auto-fit ráccsal, mert az széles kijelzőn szétszórja az elemeket. */
.menu-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; }
.menu-pick label { font-size: 13.5px; }
@media (max-width: 620px) { .menu-pick { grid-template-columns: 1fr; } }

/* Menüpontok magyarázó buboréka (az oldal szintjén, hogy ne vágódjon le) */
#navTip {
    position: fixed; z-index: 200; pointer-events: none;
    max-width: 260px; padding: 8px 11px;
    /* Ugyanaz, mint a keresőnél: a szövegszín a témából jött, a háttér nem. */
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; font-size: 12px; line-height: 1.5;
    box-shadow: 0 12px 30px #000a;
    opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s;
}
#navTip.show { opacity: 1; transform: translateX(0); }

/* Kérdőjel a menüpontok végén — halványan, hogy ne vonja el a figyelmet.
   Csak akkor erősödik fel, ha a menüpont fölé húzod az egeret. */
.app-nav a { position: relative; }
/* Hely a jobb szélre kerülő kérdőjelnek */
.app-nav a[data-tip] { padding-right: 34px; }

/* A jelvények (megoldatlan jegyek száma, ÚJ verzió) is a jobb szélhez
   igazodnak, közvetlenül a kérdőjel mellé — így nem ütköznek vele, és nem
   a felirat hosszától függ, hol jelennek meg. */
.app-nav a > #navTicketBadge,
.app-nav a > .version-new-badge,
.app-nav a > .version-dot {
    position: absolute; right: 33px; top: 50%; transform: translateY(-50%);
    margin-left: 0;
}
.app-nav a[data-tip] { padding-right: 34px; }
.nav-help {
    /* A menüpont jobb szélére rögzítve, nem a szöveg után: így minden
       menüpontnál ugyanabban az oszlopban jelenik meg, és nem ugrál
       a felirat hosszától függően. */
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px;
    /*
     * UGYANAZ A KÖR, MINT A HELPTIP-NÉL.
     *
     * A menü súgójele KÜLÖN megoldás (`data-tip` attribútum), saját
     * stílussal — ezért nem hatott rá a helptip javítása. Itt eddig csak
     * KERET volt, háttér nélkül: a körvonal a menü sötét hátterén alig
     * látszott, tehát a felületen tényleg csak egy magányos kérdőjel állt.
     *
     * Két külön stílus ugyanarra a jelre azt jelenti, hogy minden javítást
     * kétszer kell megcsinálni — és az egyiket előbb-utóbb elfelejti az
     * ember. Ezért ugyanaz a szín és ugyanaz a szerkezet.
     */
    border: 1px solid var(--text-dim); border-radius: 50%;
    background: var(--text-dim);
    font-size: 10px; font-weight: 700; line-height: 1; color: var(--surface);
    vertical-align: middle; cursor: help;
    /* Alaphelyzetben NEM látszik: 19 kérdőjel egyszerre vizuális zaj lenne.
       Csak akkor jelenik meg, amikor az egér amúgy is az adott menüponton van. */
    opacity: 0; visibility: hidden;
    transition: opacity .12s, visibility .12s, color .12s, border-color .12s, background .12s;
}
.app-nav a:hover .nav-help,
.app-nav a:focus-within .nav-help { opacity: 1; visibility: visible; }
.nav-help:hover, .nav-help:focus-visible {
    opacity: 1 !important; visibility: visible !important;
    color: #fff; background: var(--accent); border-color: var(--accent); outline: none;
}
/* A testreszabó oldalon a magyarázat a menüpont alatt olvasható */
.menu-pick { gap: 12px 28px; }
.menu-pick-item { align-items: flex-start; gap: 8px; }

/* Menü testreszabása: a csoportokat vízszintes vonal választja el,
   különben a sok magyarázó szöveg egybefolyik. */
.menu-group { padding: 18px 0; border-top: 1px solid var(--border); }
.menu-group:first-of-type { padding-top: 0; border-top: none; }
.menu-group-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--accent); font-weight: 600; margin-bottom: 12px;
}

/* Kulcs-érték táblázat (eszköz adatlap) */
.kv-table { width: 100%; }
.kv-table td { padding: 4px 0; vertical-align: top; border: none; }
.kv-table td:first-child { width: 42%; padding-right: 10px; }

/* Nyilvános (belépés nélküli) oldalak: bejelentő űrlap és vendég jegyoldal */
.guest-shell { align-items: flex-start; padding: 40px 16px 60px; overflow-y: auto; }
.guest-wrap { width: 100%; max-width: 620px; margin: 0 auto; }
.guest-head { text-align: center; margin-bottom: 20px; }
.guest-head h1 { margin: 0 0 4px; font-size: 24px; }
.guest-wrap .card { margin-bottom: 0; }

/* Lezáró gomb a vendég jegyoldalon — zöld körvonalas, hogy elkülönüljön a
   válasz gombtól, de ne versenyezzen vele figyelemért. */
.btn.btn-resolve {
    background: transparent;
    border: 1px solid var(--success);
    color: var(--success);
}
.btn.btn-resolve:hover { background: var(--success); color: #06231a; }

/* --- Ha egy sor nem fér el a kártyában -------------------------------
 *
 * Több listaoldalon (kategóriák, ügyfélcégek, válaszsablonok) a sor jobb
 * szélén három-négy gomb áll, a bal szélén pedig egy min-width-tel megadott
 * beviteli mező. Ha az ablak keskenyebb, mint amennyit ez összesen igényel,
 * a tartalom KILÓG a kártya keretéből, és a szélső gomb — jellemzően a
 * Törlés — elérhetetlenné válik.
 *
 * MIÉRT NEM overflow:auto A KÁRTYÁN
 * Az levágná a lenyíló listákat (.select-panel) és a súgóbuborékokat
 * (.helptip-bubble), mert azok abszolút pozicionáltak és kilógnak a
 * kártyából. Egy vízszintes görgetősáv itt rosszabb lenne, mint a hiba.
 *
 * MIÉRT NEM TÖRÉSPONTTAL
 * Mert oldalanként más a sor szélessége, tehát oldalanként más küszöb
 * kellene — és bármelyik elavul, ha egy oszlop hozzájön. Kétszer próbáltuk
 * pontosan kiszámolt töréspontokkal, kétszer maradt hibás.
 *
 * EZÉRT: engedjük tördelődni. Szűk helyen a gombok a következő sorba
 * kerülnek. Kevésbé szép, de SOHA nem vág le semmit.
 */
@media (max-width: 1500px) {
    /* Táblázatos listák műveleti cellája.
       !important kell: a nowrap soron belüli stílusként van megadva
       (style="white-space:nowrap"), az pedig erősebb a stíluslapnál. */
    .card table td { white-space: normal !important; }
    /* A beviteli mezők min-width-je szűk helyen ne feszítsen */
    .card table input[type="text"] { min-width: 0 !important; }
    /* Flexes listasorok (nem táblázatos oldalak) */
    .card .zebra-row,
    .card .zebra-row > form { flex-wrap: wrap; min-width: 0; }
}

/* Csíkozás listákhoz, amelyek nem táblázatban vannak (pl. ügyfélcégek, ügyfél
   felhasználók). Ugyanaz a halvány árnyalat, mint a táblázatokban. */
.zebra-row:nth-of-type(even) { background: #ffffff0a; }
.zebra-row:hover { background: #ffffff0d; }

/* Napi csoportfejlécek a hosszú listákban (e-mail napló, audit napló, óraelszámolás) */
.day-head td { border-bottom: 1px solid var(--border); }
.day-head:hover td { background: var(--surface) !important; }
.day-arrow { display: inline-block; width: 14px; color: var(--text-faint); font-size: 10px; }
/* A csoportfejléc ne kapjon zebracsíkot — az összemosná a nappal */
tbody tr.day-head:nth-child(even) { background: var(--surface2); }

/* ÁSZF dokumentum */
.terms-doc { max-width: 80ch; line-height: 1.7; }
.terms-doc h3 { font-size: 14.5px; margin: 22px 0 8px; color: var(--accent); }
.terms-doc h3:first-child { margin-top: 0; }
.terms-doc p { font-size: 13.5px; margin: 0 0 9px; color: var(--text-dim); }
/* Az elfogadó doboz ugyanolyan széles, mint a dokumentum */
.terms-accept { max-width: 80ch; }

/* Ügyfél felhasználók: összecsukható sorok.
   Alapból csak a név, e-mail és állapot látszik — egy 30 fős cégnél a
   kinyitott vezérlők több képernyőnyi görgetést jelentenének. */
.cust-row .cust-body { display: none; }
.cust-row.is-open .cust-body {
    display: block; width: 100%; margin-top: 10px;
    padding: 12px 14px 12px 26px;
    background: #ffffff05; border-radius: 8px;
    border-left: 2px solid var(--border);
}
.cust-row.is-open .cust-perms {
    display: flex; align-items: center;
    background: none; border-radius: 0; padding: 8px 0 0; margin: 8px 0 0 26px;
}

/* Két hasáb: bal oldalt az adatok, jobb oldalt a cég-hozzárendelés */
.cust-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cust-panel-col { min-width: 0; }
.cust-panel-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-faint); margin-bottom: 6px;
}
.cust-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--surface2); }
@media (max-width: 900px) { .cust-panel { grid-template-columns: 1fr; } }
.cust-row .cust-arrow { transition: transform .12s; }
.cust-head:hover .cust-arrow { color: var(--text-dim); }

/* Változásnapló: verziócsoportok (2.3x, 2.2x …) */
.era-block { margin-bottom: 10px; }
.era-block > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
}
.era-block > summary::-webkit-details-marker { display: none; }
.era-block > summary::before { content: '►'; color: var(--text-faint); font-size: 10px; }
.era-block[open] > summary::before { content: '▼'; }
.era-block > summary:hover { border-color: var(--accent); }
.era-title { font-size: 15px; font-weight: 700; }
.era-count { margin-left: auto; }
.era-body { padding: 12px 0 0 14px; border-left: 2px solid var(--border); margin: 8px 0 0 10px; }

/* Vendégbejelentés: összecsukható cégkártyák.
   A cégnév és az állapotjelvény mindig látszik, a beállítások kattintásra nyílnak. */
.guest-row .guest-body { display: none; }
.guest-row.is-open .guest-body { display: block; }
.guest-ceg-fej:hover .guest-arrow { color: var(--text-dim); }

/* Húzható sorok (kategóriák sorrendje) */
.drag-handle {
    cursor: grab; color: var(--text-faint); font-size: 15px; line-height: 1;
    user-select: none; padding: 2px 3px; border-radius: 4px; flex: none;
}
.drag-handle:hover { color: var(--text-dim); background: var(--surface2); }
.drag-handle:active { cursor: grabbing; }
.drag-ghost { opacity: .4; background: var(--accent) !important; }

/* Tábla nézet (kanban) */
.board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.board-col {
    flex: 1 1 0; min-width: 230px; max-width: 320px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.board-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
    border-radius: 10px 10px 0 0;
}
/* min-height: üres oszlopba is lehessen ejteni */
.board-items { padding: 8px; min-height: 90px; max-height: 68vh; overflow-y: auto; }
.board-card {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 10px; margin-bottom: 8px; cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card:hover { border-color: var(--accent); }
.board-card-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.board-card-title:hover { color: var(--accent); }
.board-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 10.5px; color: var(--text-faint); }
.board-card-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--text-faint); }
.board-empty { text-align: center; padding: 18px 6px; border: 1px dashed var(--border); border-radius: 8px; }

/* Üres jegylista — kiemeltebb, mint egy sima halvány sor: ez jó hír
   (nincs teendő), nem hiányosság, érdemes annak is látszania. */
.lista-ures-sor { padding: 30px 14px !important; text-align: center; }
.lista-ures {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    border-radius: 999px; padding: 10px 22px;
}
.lista-ures .ikon { font-size: 15px; }
/* Naptár nézet a jegyekhez */
.cal-legend { align-items: center; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; overflow-x: auto; }
.cal-head { background: var(--surface); padding: 7px 8px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); text-align: center; }
.cal-cell { background-color: var(--surface); min-height: 92px; padding: 6px 6px 8px; display: flex; flex-direction: column; }
.cal-grid-week .cal-cell { min-height: 220px; }
.cal-cell-mas-honap { background-color: var(--surface); opacity: .55; }
.cal-cell-ma { box-shadow: inset 0 0 0 2px var(--accent); }
/* A hétsoronkénti váltakozó árnyalatot elhagytuk — minden nap háttere
   ugyanaz, mint a fejléc (.cal-head) napjaié, a `.cal-het-a`/`.cal-het-b`
   osztályok a markupban megmaradnak, de már nem térnek el egymástól. */
.cal-het-a { background-color: var(--surface); }
.cal-het-b { background-color: var(--surface); }
/* A hétvége külön réteg, `background-image`-ként, hogy a sor hátterétől
   függetlenül mindig látszódjon. */
.cal-hetvege { background-image: linear-gradient(0deg, rgba(0,0,0,.05), rgba(0,0,0,.05)); }
[data-theme="paper"] .cal-hetvege { background-image: linear-gradient(0deg, rgba(23,23,28,.05), rgba(23,23,28,.05)); }
[data-theme="paper"][data-tonus="sotet"] .cal-hetvege { background-image: linear-gradient(0deg, rgba(255,255,255,.045), rgba(255,255,255,.045)); }
.cal-daynum { font-size: 11.5px; font-weight: 600; color: var(--text-faint); margin-bottom: 4px; }
.cal-cell-het .cal-daynum { font-size: 12.5px; color: var(--text-dim); }
.cal-card {
    display: flex; align-items: flex-start; gap: 4px; background: var(--surface);
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: 5px; padding: 3px 6px; margin-bottom: 4px; font-size: 11px;
    line-height: 1.3; color: var(--text); text-decoration: none; overflow: hidden;
}
.cal-card:hover { border-color: var(--accent); }
.cal-card-ikon { flex: 0 0 auto; }
.cal-card-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-grid-week .cal-card-txt { white-space: normal; }
.cal-tobbis { padding: 1px 2px; }
@media (max-width: 760px) {
    .cal-grid { grid-template-columns: repeat(7, minmax(92px, 1fr)); }
}


/* Ismétlődő jegyek űrlapja: egyenletes rács a mezőknek */
.rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; }
.rec-grid > div { min-width: 0; }
/* A select-wrap az egyedi legördülő burkolója: enélkül a rácsban más
   szélességet és magasságot kap, mint a natív mezők — ettől csúsztak el. */
.rec-grid select, .rec-grid input, .rec-grid .select-wrap { width: 100%; margin-bottom: 0; }
.rec-grid .select-trigger { width: 100%; }
.rec-grid label { display: block; margin-bottom: 4px; }
@media (max-width: 760px) { .rec-grid { grid-template-columns: repeat(2, 1fr); } }
/* Az ügyfél + kapcsolattartó páros két egyenlő hasábban */
.rec-grid.rec-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .rec-grid.rec-grid-2 { grid-template-columns: 1fr; } }

/* Ismétlődő jegyek: az űrlap és a lista azonos szélességű */
.rec-card { max-width: 1140px; }


/* --- „Powered by Solveport” lábléc ---
   Diszkrét, de mindig jelen: nem versenyez az ügyfél márkájával,
   viszont a rendszer neve beépül a látogató emlékezetébe. */
/*
 * „Powered by” aláírás.
 *
 * Nem lábléc: nincs háttere, nincs kerete, nem képez önálló sávot. Egy
 * diszkrét sor a tartalom végén — a 22/26 pixeles belső margó korábban
 * (az .app-main 60 pixeles aljával együtt) vastag sávnak látszott.
 */
.powered-by {
    text-align: center;
    padding: 4px 16px 0;
    margin-top: 28px;
    font-size: 11.5px;
    letter-spacing: .3px;
    color: var(--text-faint);
    /* A --mono változó nincs definiálva a stíluslapban, ezért a böngésző
       alapértelmezett betűjével jelent meg. A .mono osztály ugyanezt a
       készletet használja — innen másolva. */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    opacity: .8;
}
.powered-by a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px dotted var(--border);
}
.powered-by a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

/*
 * ADMIN FELÜLET: a lábléc mindig a lap ALJÁHOZ ragadjon, ne a rövid tartalom
 * után, mindjárt a szűrősor alatt (Attila jelzése, 2026-09-30 — screenshot:
 * a „Minden kategória” lenyíló panelje egy 1 jegyes listánál a lábléc fölé/
 * mögé ért, és a szöveg néha elfogta a kattintást az utolsó opciótól).
 *
 * A `.app-main` flex oszloppá vált (lásd feljebb) — a `margin-top: auto` a
 * láblécet a rendelkezésre álló szabad térben egészen le, a doboz aljára
 * tolja, így rövid listánál a képernyő aljára kerül, hosszú listánál pedig
 * (ahol nincs szabad tér) egyszerűen 0-ra esik vissza, és a `padding-top`
 * adja meg ugyanazt a vizuális távolságot, mint eddig a margó.
 */
.app-main > .powered-by { margin-top: auto; padding-top: 32px; }

/* A belépő kártyák alatt szorosabban, hogy ne lógjon el a képernyőn */
.login-card + .powered-by,
.login-wrap .powered-by { margin-top: 14px; }

/*
 * A VERZIÓSZÁM A LÁBLÉCBEN.
 *
 * Halkabb, mint a márkanév: az ügyfélnek nem mond semmit, a mérésnél viszont
 * ott van. A monospace szedés szándékos — a verziószámot jellemzően lemásolja
 * vagy összehasonlítja valaki, és ott a fix szélességű számjegy segít.
 */
.powered-by-verzio {
    margin-left: 10px;
    font-family: monospace;
    opacity: .55;
}

/*
 * KÖTELEZŐ MEZŐ JELÖLÉSE.
 *
 * A csillag régi, ismert egyezmény — nem kell megtanulni. A szín viszont
 * NEM piros: a piros hibát jelent, és egy űrlap, ami kitöltés előtt pirosan
 * villog, riaszt. A halvány kiemelés elég ahhoz, hogy észrevedd, de nem
 * sugallja, hogy máris rontottál valamit.
 *
 * A címke UTÁN áll, szóköz nélkül: „Tárgy*" — így nem tördelődik el a
 * címkétől külön sorba szűk helyen.
 */
.req {
    color: var(--accent);
    font-weight: 600;
    margin-left: 1px;
}

/* =========================================================================
 * ÜGYFÉLPORTÁL MOBILON
 *
 * Az admin felület már reszponzív (lásd a .app-shell szabályait feljebb), a
 * portál viszont nem volt az: más a szerkezete (.wrap + .topbar), és egyik
 * meglévő szabály sem vonatkozott rá.
 *
 * MIÉRT FONTOS EZ ÉPP ITT
 * Az ügyintéző gépnél ül. Az ÜGYFÉL viszont jellemzően telefonon nyit jegyet
 * — a folyosón, a gép mellett állva, amikor épp elromlott valami. Ha ott
 * nehézkes, inkább nem nyit jegyet, hanem telefonál. A portál mobilos
 * használhatósága tehát nem kényelmi kérdés, hanem azon múlik, hogy a
 * rendszer betölti-e a szerepét.
 * ========================================================================= */

@media (max-width: 720px) {

    /*
     * A FEJLÉC KÉT SORBA.
     *
     * A .topbar eddig is tördelt, de a márkanév és a hét gomb egy sorban
     * kezdett, és a gombok egyesével csúsztak le — hol kettő maradt fent, hol
     * három, attól függően, mennyi jogosultsága van az ügyfélnek. Így
     * kiszámíthatatlanul nézett ki. Külön sorba téve mindig ugyanaz.
     */
    .wrap > .topbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .wrap > .topbar > div:last-child { flex-wrap: wrap; justify-content: flex-start; }

    /*
     * A KÁRTYA NE GÖRGESSEN OLDALRA.
     *
     * A `.card { overflow-x: auto }` szabály 1100 képpont alatt aktív, és az
     * ADMIN széles táblázataihoz készült: ott a görgetés a legkisebb rossz.
     *
     * A portál jegylistája viszont itt már nem táblázat, hanem kártyák —
     * nincs mit görgetni. A megmaradt görgethetőség viszont ELREJTI, ha
     * valami mégis túlnyúlik: a doboz csendben szélesebb lesz, ahelyett hogy
     * a hiba látszana. Inkább ne lehessen görgetni, és akkor kiderül.
     */
    /*
     * NEM :has().
     *
     * A fenti, régebbi megjegyzés épp erre figyelmeztet: ha a böngésző nem
     * ismeri a :has()-t, a szabály némán kimarad — és pont az a hibafajta,
     * amiből ma sok volt. A minimumszélesség megszűnésével viszont már nincs
     * mit görgetni, tehát a kártya `overflow-x: auto` értéke ártalmatlan:
     * nincs túlnyúló tartalom, amit görgetni kellene.
     */

    /*
     * A SZŰRŐSOR EGYMÁS ALÁ.
     *
     * A keresőmezőn `min-width: 200px` van, mellette egy legördülő és két
     * gomb. Tördeléssel elférnek, de a legördülő szövege nyelvenként más
     * hosszú („Minden állapot" / „Alle Status"), így az egyik nyelven kifért,
     * a másikon kilógott. Egymás alatt ez a kérdés fel sem merül.
     */
    .filters { flex-direction: column; align-items: stretch; }
    .filters > * { width: 100% !important; min-width: 0 !important; }
    .filters > .btn, .filters > button, .filters > a.btn { justify-content: center; }

    /*
     * A JEGYLISTA KÁRTYÁKKÁ VÁLIK.
     *
     * Hét oszlop egy 390 képpont széles telefonon vagy oldalirányú
     * görgetés, vagy olvashatatlanul összenyomott szöveg. Egyik sem jó.
     *
     * MIÉRT NEM OSZLOPOKAT REJTÜNK EL
     * Kézenfekvő lenne a kevésbé fontosakat elrejteni sorszám szerint. Csakhogy
     * az oszlopok SZÁMA VÁLTOZIK: akinek joga van a cége összes jegyét látni,
     * annak eggyel több oszlopa van. Ugyanaz a sorszám tehát az egyik
     * ügyfélnél a prioritást jelenti, a másiknál az állapotot — és a hibát
     * csak az az ügyfél látná, akinek épp az a jogosultsága megvan.
     *
     * Ezért minden cella a saját feliratát hozza magával (data-label), és
     * mobilon a sorokból kártya lesz. Egy új oszlop automatikusan beáll a
     * sorba: nem kell hozzá a szabályokat átszámozni.
     */
    table.portal-tickets thead { display: none; }
    table.portal-tickets, table.portal-tickets tbody,
    table.portal-tickets tr, table.portal-tickets td { display: block; width: 100%; }

    table.portal-tickets tr {
        border: 1px solid var(--border); border-radius: 10px;
        margin-bottom: 10px; padding: 4px 0; background: var(--surface);
    }
    /* A zebracsíkozás kártyanézetben zavaró lenne: a keret már elválasztja őket. */
    table.portal-tickets tbody tr:nth-child(even) { background: var(--surface); }

    table.portal-tickets td {
        border-bottom: none; padding: 7px 14px;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        text-align: left !important;
    }
    table.portal-tickets td::before {
        content: attr(data-label);
        font-size: 11px; font-family: monospace; text-transform: uppercase;
        color: var(--text-faint); flex: none;
    }
    /*
     * A rugalmas elemek ALAPBÓL nem zsugorodnak a tartalmuk alá. Egy hosszú
     * kategórianév vagy egy teljes időpont így kifeszítette volna a cellát,
     * és a kártya kilógott volna — épp azt a görgetést okozva, amit el
     * akarunk kerülni. A `min-width: 0` engedi meg a törést.
     */
    table.portal-tickets td > * { min-width: 0; overflow-wrap: anywhere; }
    /* A tárgy a kártya fejléce: teljes szélességben, felirat nélkül. */
    table.portal-tickets td:first-child { display: block; padding: 10px 14px 8px; }
    table.portal-tickets td:first-child::before { content: none; }

    /*
     * A TÁRGY TÖRJÖN, NE GÖRGESSEN.
     *
     * Egy hosszú, szóköz nélküli azonosító (naplórészlet, útvonal) különben
     * szétfeszíti a kártyát, és az egész lista oldalra csúszik.
     */
    table.portal-tickets .ticket-link { overflow-wrap: anywhere; }

    /*
     * A BEVITELI MEZŐK 16 KÉPPONTOSAK.
     *
     * Az iPhone RÁNAGYÍT minden mezőre, aminek a betűmérete 16 alatt van, és
     * utána nem nagyít vissza — az ügyfél a jegy beküldése után egy elcsúszott
     * oldalon találja magát. A 13 képpontos alapérték pont ilyen. Ez nem
     * ízlés kérdése: a határ a böngészőben van rögzítve.
     */
    input[type=text], input[type=email], input[type=password], input[type=date],
    input[type=number], input[type=search], input[type=tel], input[type=url],
    input[type=datetime-local], input[type=time], textarea, select {
        font-size: 16px;
    }

    /* Kényelmesebb célpontok ujjnak: a 13 képpontos gombok apróak. */
    .btn { padding: 11px 16px; }

    /*
     * A HOSSZÚ, SZÓKÖZ NÉLKÜLI SZÖVEG TÖRJÖN.
     *
     * Egy beillesztett hibaüzenet, útvonal vagy hivatkozás szóköz nélkül is
     * lehet kétszáz karakter. Asztali gépen elfér, telefonon viszont
     * szétfeszíti a buborékot, és onnantól az EGÉSZ oldal oldalra csúszik —
     * nem csak az az egy üzenet. Épp az ügyfél leggyakoribb tartalma ilyen:
     * bemásolja, amit a képernyőn látott.
     */
    .message, .message a, .pill { overflow-wrap: anywhere; }

    /* A csatolmány-nevek is: egy hosszú fájlnév ugyanezt csinálná. */
    .message .pill { max-width: 100%; }

    /*
     * SEMMI NEM LEHET SZÉLESEBB A KÉPERNYŐNÉL.
     *
     * A képernyőképen a kártya JOBB széle a kijelző jobb szélén volt, a bal
     * széle viszont lecsúszott. Ez azt jelenti, hogy nem a kártya lógott ki:
     * maga a LAP lett szélesebb, és a kártya (ami a lap szélességéhez
     * igazodik) ehhez nyúlt meg. A ludas tehát valami más elem, feljebb.
     *
     * Ezek a korlátok nem elrejtik a túlnyúlást, hanem MEGSZÜNTETIK: az
     * elemek nem tudnak a rendelkezésre álló helynél szélesebbek lenni.
     */
    .wrap, .topbar, .card, .banner, .filters, form, img, svg, pre, table {
        max-width: 100%;
    }
    /* A rugalmas sorok elemei zsugorodhassanak a tartalmuk alá. */
    .topbar > *, .brand, .filters > * { min-width: 0; }

    /*
     * A SAJÁT LEGÖRDÜLŐ PANELJE.
     *
     * A benne lévő sorokon `white-space: nowrap` van, hogy asztali gépen ne
     * törjenek. Egy hosszabb állapotnév (németül különösen) így a kijelzőnél
     * szélesebb panelt csinál — és mivel a panel a laphoz mérten helyezkedik
     * el, MEGNYÚJTJA a lapot, még ha épp csukva is van.
     */
    .select-panel { max-width: 92vw; }
    .select-option { white-space: normal; }

    /* A kártyák belső margója szűk kijelzőn túl sok helyet vinne el. */
    .card-pad { padding: 16px; }
    .wrap { padding: 16px 12px 48px; }
}

/*
 * „EZ KREDITBE KERÜL" JELÖLŐ.
 *
 * Arany érme az AI-gombokon. Nem a gomb helyett szól, hanem mellette: a
 * funkció ugyanúgy elérhető, csak látszik, hogy nem ingyen van.
 *
 * MIÉRT ARANY ÉS NEM PIROS
 * A piros tiltást jelent, és elbizonytalanít. Itt nem arról van szó, hogy ne
 * használd — hanem arról, hogy tudd, mibe kerül. Az arany a pénzt idézi
 * anélkül, hogy figyelmeztetés lenne.
 */
.ai-koltseg {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    margin-left: 4px;
    vertical-align: 1px;
    cursor: help;
    /* Enyhe arany derengés: a felületen nagyrészt hideg színek vannak,
       ettől az érme kiválik anélkül, hogy hangos lenne. */
    filter: drop-shadow(0 0 3px #e8b04b66);
}

/* Elfogyott keret: az érme fakó lesz. Így nem kell elolvasni a buborékot
   ahhoz, hogy feltűnjön — a szem előbb veszi észre a színváltást. */
.ai-koltseg.ures {
    filter: grayscale(1);
    opacity: .45;
}

/* A jelmagyarázat a beállításoknál: halkabb, mert ott nem döntés, csak
   tájékoztatás. */
.ai-koltseg-legend {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-faint); font-size: 12px;
}

/* Elfogyott keretnél a jelmagyarázat is figyelmeztet — nem pirossal, mert
   nem hiba történt, csak elfogyott valami. */
.ai-koltseg-legend.ures { color: var(--warning); }

/*
 * A TREND VISZONYÍTÁSI ÉRTÉKE.
 *
 * A nyíl és a százalék mellett: „előző: 42". Halványabb és kisebb, mert nem
 * ez a főszám — a kártya nagy száma a mostani érték, ez csak az, amihez
 * viszonyítunk.
 *
 * Külön sorba törik, ha nem fér ki: egy kártyán a szám a fontos, nem az,
 * hogy egy sorban legyen minden.
 */
.trend-elozo {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-faint);
    white-space: nowrap;
}

/*
 * MENTETLEN VÁLTOZÁS.
 *
 * A mentés gomb nyugalmi állapotban halvány — így nem versenyez a lap
 * tartalmával. Amint viszont van mit menteni, KIEMELTTÉ válik: onnantól ő a
 * következő lépés, és látszania kell.
 *
 * Nem villog és nem mozog: a mozgás elvonja a figyelmet arról, amit épp
 * csinálsz. A színváltás elég — a szem a kontrasztot előbb veszi észre, mint
 * a szöveget.
 */
form.van-mentetlen button[type="submit"],
form.van-mentetlen input[type="submit"] {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
    /* Halvány gyűrű: a kártyák hátterén a kék gomb önmagában is látszik, de
       egy sötét témában a gyűrű teszi egyértelművé, hogy ez most más. */
    box-shadow: 0 0 0 3px #4f8cff33;
}

.mentetlen-jelzo {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    font-size: 12px;
    color: var(--warning);
    white-space: nowrap;
}

/* Nyomtatásban nincs értelme: a papíron nem lehet menteni. */
@media print { .mentetlen-jelzo { display: none; } }

/*
 * KERESŐ-MEZŐ TALÁLATLISTÁVAL.
 *
 * A mező alatt jelennek meg a találatok, azonnal kiválaszthatóan. Korábban a
 * mező csak SZŰRTE a lenti legördülőt — az embernek le kellett mennie és
 * kinyitnia a listát ahhoz, hogy lássa, mit talált. Két lépés ott, ahol
 * egynek kellene lennie.
 */
.kereso-mezo { position: relative; }

.kereso-talalatok {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    max-height: 280px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

.kereso-talalat {
    padding: 8px 10px; border-radius: 6px; font-size: 13px;
    color: var(--text-dim); cursor: pointer;
    /* Egy hosszú cégnév + e-mail nem törheti szét a listát. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kereso-talalat:hover,
.kereso-talalat.kijelolt { background: var(--surface2); color: var(--text); }

/* Nyomtatásban nincs mit keresni. */
@media print { .kereso-talalatok { display: none; } }

/*
 * MA ESEDÉKES — a sor halkan lüktet.
 *
 * MIÉRT CSAK EZEKEN
 * A lejárt jegyen már nem lehet segíteni: az SLA elveszett, a sürgetés csak
 * lelkiismeret-furdalás. Ami MA jár le, azon még lehet — ez az egyetlen
 * csoport, ahol a figyelemfelkeltésnek értelme van.
 *
 * MIÉRT LASSÚ ÉS HALK
 * Egy gyors vagy erős villogás mellett nem lehet dolgozni, és pár nap alatt
 * megtanulja az ember, hogy ne nézzen oda. Négy másodperces, alig érzékelhető
 * hullám: a szem elkapja mozgás közben, de nem vonja el a figyelmet attól,
 * amit épp csinálsz.
 *
 * MIÉRT A HÁTTÉR, NEM A SZÖVEG
 * A szöveg villogása olvashatatlanná tenné a sort. A háttér mögötte marad.
 */
@keyframes ma-esedekes-hullam {
    0%, 100% { background-color: transparent; }
    50%      { background-color: #f5a62318; }
}

.ticket-row.ma-esedekes {
    animation: ma-esedekes-hullam 4s ease-in-out infinite;
}

/* Bal szélen egy állandó csík: ez akkor is ott van, amikor a hullám épp a
   halvány szakaszban jár — enélkül a jelölés fél másodpercekre eltűnne. */
.ticket-row.ma-esedekes > td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

/*
 * AKI NEM KÉRI A MOZGÁST, ANNAK NEM MOZOG.
 *
 * A rendszerbeállításban jelezhető, hogy valaki zavarónak vagy rosszullétet
 * okozónak találja az animációt. Ilyenkor nem elhagyjuk a jelölést, hanem
 * ÁLLANDÓRA váltjuk: a jegy ugyanúgy kiemelt marad, csak nem lüktet.
 */
@media (prefers-reduced-motion: reduce) {
    .ticket-row.ma-esedekes {
        animation: none;
        background-color: #f5a62314;
    }
}

/* Nyomtatásban nincs mozgás, és a szürke háttér csak elveszi a tintát. */
@media print {
    .ticket-row.ma-esedekes { animation: none; background: none; }
}

/*
 * MA ESEDÉKESEK — a csoport fejléce.
 *
 * Nem kártya és nem doboz: egy vékony sáv a táblázat fölött. A csoport
 * tartalma a lényeg, a fejléc csak megnevezi — ha keretet kapna, súlyosabbnak
 * látszana, mint a jegyek maguk.
 */
.ma-esedekes-fejlec {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 10px 4px 8px;
    border-bottom: 2px solid var(--warning);
    margin-bottom: 2px;
    font-size: 14px;
}

/*
 * A PONT LÜKTET, NEM A FEJLÉC.
 *
 * Egy lüktető sáv a lap tetején periférikus látásban is folyton mozogna —
 * pontosan az a fajta zavarás, ami mellett nem lehet dolgozni. Egy nyolc
 * képpontos pont viszont csak akkor tűnik fel, ha odanézel.
 */
.ma-esedekes-pont {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--warning); flex: none;
    animation: ma-esedekes-hullam-pont 4s ease-in-out infinite;
}

@keyframes ma-esedekes-hullam-pont {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ma-esedekes-pont { animation: none; opacity: 1; }
}

/*
 * MA ESEDÉKES — az Áttekintés kártyáján.
 *
 * Csak a keret lüktet, a szám nem: egy változó fényerejű nagy szám nehezen
 * olvasható, márpedig épp azt kell elolvasni. A keret körülötte marad, és a
 * szem így is elkapja.
 *
 * Csak akkor lüktet, ha VAN mit — nullánál a kártya amúgy is halvány, és egy
 * lüktető nulla naponta megtanítana rá, hogy ne nézz oda.
 */
.dash-card.ma-esedekes-kartya {
    animation: ma-esedekes-keret 4s ease-in-out infinite;
}

@keyframes ma-esedekes-keret {
    0%, 100% { box-shadow: 0 0 0 1px var(--border); }
    50%      { box-shadow: 0 0 0 2px var(--warning); }
}

@media (prefers-reduced-motion: reduce) {
    .dash-card.ma-esedekes-kartya {
        animation: none;
        box-shadow: 0 0 0 2px var(--warning);
    }
}

/*
 * ÜZENET SZERKESZTÉSE ÉS TÖRLÉSE.
 */

/* A műveletek halkak, és csak az üzenet fölé érve látszanak igazán: nem ezek
   a fontosak a szálban, hanem maga a beszélgetés. */
.msg-muveletek { margin-top: 6px; display: flex; gap: 10px; opacity: 0; transition: opacity .12s; }
.message:hover .msg-muveletek,
.msg-muveletek:focus-within { opacity: 1; }

.msg-muvelet {
    background: none; border: none; padding: 0;
    color: var(--text-faint); font-size: 11.5px; cursor: pointer;
}
.msg-muvelet:hover { color: var(--text-dim); text-decoration: underline; }

/*
 * A „szerkesztve" jelölés.
 *
 * Halvány és kicsi — nem vád, csak tény. Az ügyfél védelmére van: ha másra
 * emlékszik, mint amit lát, tudja, hogy nem ő téved.
 */
.msg-szerkesztve {
    margin-top: 4px; font-size: 11px; color: var(--text-faint); font-style: italic;
}

/*
 * A TÖRÖLT ÜZENET HELYE.
 *
 * Szándékosan látszik. Egy nyomtalanul eltűnő üzenet esetén az olvasó nem
 * tudja, hogy hiányzik valami — így viszont ott marad, hogy volt ott valami,
 * és ki vette ki.
 */
.msg-torolt {
    color: var(--text-faint); font-style: italic; font-size: 12.5px;
    padding: 8px 0;
}

.msg-szerk-urlap { margin-top: 8px; }
.msg-szerk-urlap textarea { width: 100%; margin-bottom: 0; }

/* Nyomtatásban a gombok fölöslegesek, a jelölések viszont kellenek. */
@media print { .msg-muveletek, .msg-szerk-urlap { display: none; } }

/*
 * ESZKÖZÖK — CÉGENKÉNTI CSOPORTFEJLÉC.
 *
 * A lista eddig is cégnév szerint rendezett, de tagolás nélkül egybefolyt:
 * húsz eszköznél már nem látszik, hol ér véget az egyik cég és hol kezdődik a
 * másik.
 *
 * Külön SOR a táblázatban, nem külön táblázat — így az oszlopszélességek
 * végig egységesek maradnak, és a szem nem ugrál.
 */
/* A fejléc gomb: úgy néz ki, mint a szöveg, de kattintható. */
.eszkoz-ceg-gomb {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
}
.eszkoz-ceg-gomb:hover { color: var(--text); }

/* A nyíl tömör háromszög, nem írásjel: kis méretben az olvasható.
   Ugyanaz a tanulság, mint a menü összecsukó fülénél. */
.eszkoz-ceg-nyil { font-size: 11px; color: var(--text-faint); }

.eszkoz-cegsor > td {
    padding: 14px 10px 7px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    background: none;
}

/* Az első csoport fölött nincs mitől elválasztani. */
.eszkoz-cegsor:first-child > td { padding-top: 4px; }

/* A zebracsíkozás ne fesse be a fejlécsort: az nem adat. */
tbody tr.eszkoz-cegsor:nth-child(even) > td { background: none; }

/*
 * ESZKÖZ-SOROK: az egész sor kattintható.
 *
 * A kurzor jelzi, a háttér pedig visszajelzést ad — enélkül nem derülne ki,
 * hogy a sor bármely pontja célpont, és mindenki továbbra is a névre
 * célozna.
 */
tr.eszkoz-sor { cursor: pointer; }
tr.eszkoz-sor:hover > td { background: var(--surface2); }

/* A sorban lévő gombok és hivatkozások a saját dolgukat végzik — ott a
   normál mutató a helyes, különben az ember azt hinné, ugyanoda visz. */
tr.eszkoz-sor a,
tr.eszkoz-sor button { cursor: pointer; }

/*
 * ESZKÖZ-ADATOK CÍMKÉI a listában.
 *
 * A címke halkabb, mint az érték: nem azt kell elolvasni, hanem azt, ami
 * mellette áll. De ott kell lennie, mert „HZRNB01" és „LEL-0042" közül
 * jelölés nélkül nem lehet megmondani, melyik micsoda.
 */
.eszkoz-cimke {
    color: var(--text-faint);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-right: 3px;
}

/*
 * ÜGYFÉLCÉGEK — összecsukható fejléc.
 *
 * Ugyanaz a minta, mint az eszközöknél: a fejléc gombként viselkedik, de
 * címnek látszik. A nyíl tömör háromszög, mert kis méretben csak az
 * olvasható.
 */
.ceg-nyito {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.ceg-nyito:hover { color: var(--accent); }
.ceg-nyil { font-size: 12px; color: var(--text-faint); }

/*
 * ÜGYFÉL-FELHASZNÁLÓK: oszlopnevek.
 *
 * Halkabb, mint az adatok — a fejléc megnevez, nem versenyez a tartalommal.
 * Egy vonal választja el, hogy a szem tudja, hol kezdődnek a sorok.
 */
/*
 * A FEJLÉC ÉS A SOROK UGYANAZT A RÁCSOT HASZNÁLJÁK.
 *
 * Korábban mindkettő KÜLÖN hordozta az inline szélességeket — két helyen
 * ugyanaz a szám. Az egyik módosításakor a másik elcsúszik, és a fejléc
 * rosszabb lesz, mintha nem is lenne: más fölött áll, mint amit megnevez.
 *
 * AZ ARÁNYOK
 *   nyíl        14px   — fix, ikonnyi
 *   név          2fr   — ide jönnek a jelölések is (magánszemély, jóváhagyásra vár)
 *   jegyek      70px   — egy szám, nem kell több
 *   e-mail       3fr   — a leghosszabb szöveg, ez kapja a legtöbbet
 *   belépés     140px  — dátum és relatív idő
 *
 * Az `fr` arányos: keskeny ablakon is megtartja az egymáshoz mért méretüket,
 * nem szorul össze az egyik a másik javára.
 */
/*
 * A RÁCS CSAK A FEJLÉCSORRA VONATKOZIK.
 *
 * Az első változatom a teljes `.cust-head`-re tette — csakhogy a kinyitható
 * részletek (`cust-body`) IS azon belül vannak. Így a szerkesztő űrlap a rács
 * hatodik oszlopaként próbált elférni, egy 150 képpontos sávba szorulva: a
 * szöveg betűnként tördelődött, és az egész lap szétesett.
 *
 * A `> .cust-fej-sor` a megoldás: a rács csak a KÖZVETLEN fejléc-gyerekekre
 * hat, a részletek pedig a saját szélességükön maradnak.
 */
.cust-fejlec,
.cust-fej-sor {
    display: grid;
    grid-template-columns: 14px minmax(150px, 2fr) 70px minmax(170px, 3fr) 140px;
    align-items: center;
    gap: 10px;
}

.cust-head { cursor: pointer; }
.cust-arrow { color: var(--text-faint); font-size: 10px; }
.cust-fejlec .jobbra, .cust-fej-sor .jobbra { text-align: right; }

.cust-fejlec {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    padding: 0 4px 6px;
}

/*
 * KESKENY ABLAKON EGYMÁS ALÁ.
 *
 * Öt oszlop nem fér el egy telefonon; a rács ilyenkor egyoszlopossá válik, és
 * minden adat a saját sorába kerül. A fejléc ott értelmét veszti, ezért
 * elrejtjük (lásd lentebb).
 */
@media (max-width: 720px) {
    .cust-fej-sor { grid-template-columns: 1fr; gap: 4px; }
    .cust-fej-sor .jobbra { text-align: left; }
}

/* Telefonon a sorok egymás alá csúsznak, ott a fejléc félrevezetne. */
@media (max-width: 720px) { .cust-fejlec { display: none !important; } }

/*
 * ═══════════════════════════════════════════════════════════════════
 * LENYITÓ NYILAK — EGYSÉGESEN, LÁTHATÓAN
 * ═══════════════════════════════════════════════════════════════════
 *
 * MI VOLT A BAJ
 * Nyolc helyen volt lenyitó nyíl, és mind ugyanazt csinálta rosszul:
 * `text-faint` színt kapott, 9–12 képpontos méretben.
 *
 * A `text-faint` a rendszer LEGHALVÁNYABB színe — arra való, ami mellékes:
 * egy dátum, egy azonosító, egy magyarázó félmondat. Egy nyitógomb viszont
 * nem mellékes: ő mondja meg, hogy VAN OTT MÉG VALAMI. Aki nem veszi észre,
 * annak a mögötte lévő tartalom sem létezik.
 *
 * MIT VÁLTOZTATTUNK
 *   szín:  text-faint → text-dim (a következő fokozat, jól olvasható)
 *   méret: 9–12px → 13px (egységesen, a szövegmérethez közelítve)
 *
 * Egérrel fölé érve teljes erősségű lesz, és a nyitott állapot is látszik.
 *
 * MIÉRT EGY HELYEN
 * Nyolc külön szabály nyolcféleképp romlik el. Ez a blokk a fájl VÉGÉN van,
 * tehát felülírja a korábbiakat — így a régi szabályokat nem kellett
 * egyenként átírni, és a következő nyíl is magától ilyen lesz, ha ezeket az
 * osztályneveket használja.
 */
.day-arrow,
.cust-arrow,
.guest-arrow,
.eszkoz-ceg-nyil,
.ceg-nyil,
.csoport-nyil,
.kartya-nyil,
.mobil-nyito .kartya-nyil,
.szerzodes > summary .kartya-nyil,
.beszuro-nyil,
.valasz-alairas > summary .kartya-nyil,
.kesobbi > summary .kartya-nyil {
    /*
     * TELJES SZÖVEGSZÍN, NEM A HALVÁNYABB.
     *
     * Először `text-dim`-et adtam nekik. Csakhogy a jegylistán a csoport
     * FELIRATA is pontosan az a szín — így a nyíl beleolvadt, és a
     * változás csak egérrel fölé húzva látszott.
     *
     * Egy nyitógombnak ERŐSEBBNEK kell lennie a mellette álló szövegnél,
     * nem ugyanolyannak: ő a kezelőelem, a szöveg csak megnevezi.
     */
    color: var(--text);
    /*
     * 11 KÉPPONT, NEM 15.
     *
     * Először a `▾` és `▸` jeleket használtuk — azok FÉL MAGASSÁGÚ
     * háromszögek, tehát hiába nőtt a betűméret, a jel maga apró maradt.
     * Ezért látszott továbbra is kicsinek a jegylistán.
     *
     * A `▼` és `►` teljes testű háromszögek: ugyanaz a betűméret rajtuk
     * kétszer akkora alakot ad. Ezért kell VISSZAVENNI a méretet, különben
     * most a másik irányba lőnénk túl.
     */
    font-size: 11px;
    line-height: 1;
}

/*
 * A `csoport-nyil` a gombbal nyíló csoportoké: a jegylistán a halasztott és a
 * lezárt jegyek, a számlázásnál a lezárt időszakok, a jegy oldalán az életút.
 *
 * Ezeket `id`-vel azonosítja a szkript, osztályuk NEM VOLT — ezért maradtak
 * ki az első körből. Az `id` a szkriptnek szól, az osztály a megjelenésnek:
 * a kettő nem helyettesíti egymást.
 */

.patch-list > summary::before,
.era-block > summary::before {
    color: var(--text-dim);
    font-size: 13px;
}

.nav-label-toggle::before {
    font-size: 11px;
    opacity: .85;
}

/* Fölé érve teljes erősség: megerősíti, hogy ez kattintható. */
            .day-head:hover .day-arrow,
.cust-head:hover .cust-arrow,
.guest-ceg-fej:hover .guest-arrow,
.eszkoz-ceg-gomb:hover .eszkoz-ceg-nyil,
            /* Fölé érve a kiemelő szín: a teljes szövegszín már az alapállapot, tehát
   a visszajelzéshez egy fokkal tovább kell lépni. */
.ceg-nyito:hover .ceg-nyil,
button:hover > .csoport-nyil,
.btn:hover .csoport-nyil { color: var(--accent); }

/*
 * A MENÜ ÖSSZECSUKÓ FÜLE külön eset: ott a nyíl EGYMAGA áll egy 14 képpont
 * széles csíkon, tehát nincs mellette semmi, ami segítene észrevenni.
 * Tegnap már megkapta a teljes szöveg-színt — itt csak megerősítjük, hogy
 * ez a blokk se írja felül.
 */
.nav-edge { color: var(--text); }

/*
 * LETILTOTT AI-GOMB.
 *
 * Ugyanúgy néz ki, mint az éles gomb, csak halványabb és nem kattintható.
 *
 * MIÉRT NEM REJTJÜK EL EGYSZERŰEN
 * Az AI a csomaghoz jár, de a bekapcsolás az ügyfél döntése — a jegy szövege
 * külső szolgáltatóhoz kerül, ahhoz hozzájárulás kell. Ha viszont a gombok
 * egyszerűen nincsenek ott, akkor nem is tud róluk, tehát soha nem fogja
 * bekapcsolni. Egy funkció, amiről nem tud, ugyanaz, mintha nem is lenne:
 * fizet érte, és nem használja.
 *
 * A lakat jel elmondja, hogy ez nem hiba, hanem zárt ajtó — és a buborék
 * megmondja, hol a kulcs.
 */
.ai-kikapcsolva {
    opacity: .5;
    cursor: help;
    /* Nem gomb, hanem span: így billentyűzettel sem lehet ráállni, és a
       képernyőolvasó sem kínálja fel kattinthatóként. */
    display: inline-flex; align-items: center; gap: 6px;
}
.ai-kikapcsolva:hover { opacity: .75; }

/*
 * DOLGOZIK — a beküldött gomb visszajelzése.
 *
 * MIÉRT NEM ELÉG A LETILTÁS
 * A `disabled` gomb szürke lesz, ami inkább „elromlott" benyomást kelt, mint
 * „dolgozik". Egy halk lüktetés viszont elmondja, hogy történik valami.
 *
 * A LETILTÁS ATTÓL MÉG KELL: enélkül a második kattintás új kérdést küldene,
 * ami még egy kreditbe kerül.
 */
.btn.dolgozik {
    animation: dolgozik-lukteto 1.4s ease-in-out infinite;
    cursor: progress;
}

@keyframes dolgozik-lukteto {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* Akinek a mozgás rossz, annál állandó, halványabb állapot. */
@media (prefers-reduced-motion: reduce) {
    .btn.dolgozik { animation: none; opacity: .7; }
}

/*
 * SAJÁT CÉG JELÖLÉSE A JEGYLISTÁN.
 *
 * Halkan, az ügyfélcég fölött: az ügyfél neve a fontos, ez csak kiegészítő
 * adat. Aki egy céggel dolgozik, ezt sosem látja.
 */
.sajatceg-jel {
    display: inline-block;
    font-size: 10.5px;
    color: var(--text-faint);
    letter-spacing: .02em;
    margin-bottom: 1px;
}
.sajatceg-jel:hover { color: var(--accent); }

/*
 * KÉZIKÖNYV-TALÁLAT A KERESŐBŐL.
 *
 * A válasz ott nyílik ki, ahol a kérdés keletkezett — nem visz másik
 * oldalra. Aki egy beállítás közben keresett rá, ott folytathatja.
 */
.kk-hatter {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0, 0, 0, .58);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.kk-doboz {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 26px 28px;
    max-width: 620px; width: 100%; max-height: 80vh; overflow-y: auto;
}
.kk-doboz h3 { margin: 0 0 14px; font-size: 18px; line-height: 1.35; }
.kk-torzs { margin-bottom: 18px; }
.kk-torzs p { margin: 0 0 12px; line-height: 1.6; font-size: 14.5px; }
.kk-torzs p:last-child { margin-bottom: 0; }

/* A kézikönyv-találat halványan jelzi, hogy nem menüpont. */
.nav-find-kk .nav-find-sec { opacity: .75; font-style: italic; }

/*
 * VÁRAKOZÁS-JELZÉS A KÜLDÉS GOMBOKON.
 *
 * A gomb halványabb és lüktet: egyszerre mondja, hogy megtörtént a
 * kattintás, és hogy még dolgozik. A `cursor: wait` a mutatót is átváltja,
 * ami sokaknak az első jel.
 */
.kuldes-folyamatban {
    opacity: .72;
    cursor: wait !important;
    animation: kuldes-lukteto 1.2s ease-in-out infinite;
}
@keyframes kuldes-lukteto {
    0%, 100% { opacity: .72; }
    50%      { opacity: .95; }
}

/*
 * AKI A MOZGÁST ZAVARÓNAK ÉRZI, ANNAK NEM MOZOG.
 *
 * A rendszerbeállításban jelezhető, hogy valaki érzékeny a mozgásra —
 * szédülést, rosszullétet okozhat. A halványítás marad, az elég jelzés.
 */
@media (prefers-reduced-motion: reduce) {
    .kuldes-folyamatban { animation: none; }
}

/* ==========================================================================
   ÖSSZECSUKHATÓ OLDALSÓ KÁRTYA — a jegyoldal jobb hasábján.
   ==========================================================================

   MI VOLT A BAJ
   A hasábon a Címkék, az Összevonás, a Halasztás és az Archiválás akkor is
   teljes kártyaként állt ott, ha semmi mondanivalójuk nem volt: „nincs
   címke", „nincs mivel összevonni", „nincs halasztva". Egy hétköznapi
   jegynél ez négy üres doboz, mire az ember eljut ahhoz, ami tényleg kell —
   az SLA-hoz, az állapothoz, a felelőshöz.

   A MEGOLDÁS
   Aminek van tartalma, az kártya marad. Ami üres, az egyetlen halvány sorrá
   zsugorodik, és kattintásra kinyílik.

   MIÉRT `<details>` ÉS NEM SAJÁT SZKRIPT
   Mert a böngésző tudja: billentyűzettel járható, képernyőolvasó felolvassa,
   és működik akkor is, ha a JavaScript elakad. Egy sajátot mind a hármat
   külön kellene megoldani.

   MIÉRT NEM REJTJÜK EL EGYSZERŰEN
   Mert akkor az ügyintéző nem tudná, hogy a funkció létezik. Ugyanaz az elv,
   mint a jogosultságoknál: a menüpont látszik annak is, akinek nincs joga
   hozzá — így tud kérni. Az eltűnt gomb nem letisztult, hanem elveszett.
*/
details.oldal-kartya { border-radius: 16px; }

details.oldal-kartya > summary {
    cursor: pointer;
    font-size: 13px; color: var(--text-dim);
    padding: 9px 4px;
    border-top: 1px solid var(--border);
    /* A böngésző alapértelmezett háromszögét levesszük: a „+" beszédesebb. */
    list-style: none;
}

/*
 * A FLEX EGY BELSŐ ELEMEN VAN, NEM A `<summary>`-N.
 *
 * MI VOLT A BAJ
 * Az első változat a `display: flex`-et magára a `<summary>`-re tette.
 * Chrome-ban ez működik, Safariban viszont ELRONTJA a nyitás-csukást: a
 * summary elveszti az alapértelmezett `display: list-item` viselkedését,
 * és a kártya kinyitás után nem csukható vissza.
 *
 * A summary marad az alapértelmezett megjelenítésén, a sor elrendezését
 * egy belső elem intézi. Ugyanaz a látvány, működő kattintás.
 */
details.oldal-kartya > summary > .summary-sor {
    display: flex; align-items: center; gap: 6px;
}
details.oldal-kartya > summary::-webkit-details-marker { display: none; }
details.oldal-kartya > summary:hover { color: var(--text); }

/* Az utolsó csukott sor alatt is legyen vonal, különben a lista elvarratlanul
   ér véget — a szem nem tudja, hol zárul a hasáb. */
details.oldal-kartya:not([open]) + :not(details.oldal-kartya:not([open])) { margin-top: 16px; }
details.oldal-kartya:not([open]):last-child { border-bottom: 1px solid var(--border); }

/* NYITOTT ÁLLAPOT: pontosan úgy néz ki, mint egy .card.card-pad — hogy a
   kinyitás ne látszódjon váltásnak, csak annyinak, hogy ott a tartalom. */
details.oldal-kartya[open] {
    background: var(--surface); border: 1px solid var(--border);
    padding: 20px; margin-bottom: 16px;
}
details.oldal-kartya[open] > summary {
    border-top: 0; padding: 0 0 10px;
    font-size: 15px; font-weight: 600; color: var(--text);
}
/*
 * A NYITÁS ÉS A CSUKÁS UGYANAZ A GOMB.
 *
 * MI VOLT A BAJ
 * Csukva egy „+" állt a sor elején, nyitva viszont az emodzsi vette át a
 * helyét. Így a nyitáshoz volt jelzés, a csukáshoz nem: az ember látta,
 * hogyan nyílik, de nem látta, hogy ugyanoda kattintva vissza is csukható.
 *
 * Most a sor jobb szélén áll egy nyíl, ami MINDKÉT állapotban ott van, és
 * elfordul. Ugyanaz a jel, ugyanazon a helyen — csak az iránya mondja meg,
 * mi történik, ha rákattintasz. Az emodzsi és a cím pedig végig látszik,
 * tehát a csukott sor is felismerhető marad.
 */
details.oldal-kartya > summary > .summary-sor > .kartya-nyil {
    /* A szín és a méret a fájl végi KÖZÖS nyíl-szabályból jön — itt csak az
       kell, ami ehhez a helyhez tartozik: jobbra tolás és a forgatás. */
    margin-left: auto;
    transition: transform 0.15s ease;
}
details.oldal-kartya[open] > summary > .summary-sor > .kartya-nyil {
    transform: rotate(180deg);
}

/* A súgó-buborék csak nyitva kell: a csukott sorban egy kérdőjel, ami
   olyasmit magyaráz, ami nem is látszik, csak zaj. */
details.oldal-kartya:not([open]) .kartya-jel { display: none; }

/*
 * A SZÁL SORRENDJÉNEK KAPCSOLÓJA.
 *
 * Halkabb, mint egy gomb, mert nem művelet: a jegyen semmit nem változtat,
 * csak azt, hogy te milyen sorrendben látod. Korábban a fenti gombsorban
 * állt, ugyanolyan gombként, mint a kreditet költő AI-műveletek.
 *
 * Balra igazítva áll, a szál bal szélénél — ahol az üzenetek kezdődnek,
 * és ahol a szem amúgy is végigfut. Jobbra igazítva a helye a szomszédai
 * szélességétől függene; itt nem függ semmitől.
 */
.msg-sorrend { margin: 0 0 10px; }
.msg-sorrend > button {
    background: none;
    border: 0;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--text-dim);
    cursor: pointer;
}
.msg-sorrend > button:hover {
    color: var(--text);
    text-decoration: underline;
}

/*
 * A VÁLASZDOBOZ FEJ- ÉS LÁBSORA.
 *
 * A doboz időrend szerint épül: ami írás ELŐTT kell, az a fejsorban van; a
 * szövegdoboz középen, nagyobban; ami írás UTÁN kell, az a lábsorban.
 *
 * Mindkét sor `flex-wrap`-el: keskeny ablakon nem szorulnak össze, hanem
 * új sorba mennek. Ez itt megengedhető, mert a sorokon belül nincs olyan
 * elem, aminek a helyére a kéz emlékezne — a küldés gomb végig a jobb
 * szélen marad.
 */
.valasz-fejsor {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px; margin-bottom: 10px;
}
.valasz-eszkozok {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin-left: auto;
}

/*
 * A VÁLTÓ ALSÓ MARGÓJA A FEJSORBAN NEM KELL.
 *
 * MI VOLT A BAJ
 * A `.reply-mode` doboznak `margin-bottom: 10px` van — abból az időből,
 * amikor még önálló sorként állt a szövegdoboz fölött. A fejsorban viszont
 * az `align-items: center` a MARGÓVAL EGYÜTT vett dobozt igazítja középre,
 * így a váltó a saját margódoboza tetejére került: öt képponttal feljebb,
 * mint a szomszédai.
 *
 * Kívülről ez úgy néz ki, mintha a mellette lévő gomb csúszott volna le —
 * pedig az áll jó helyen. Ezért kerestem előbb rossz helyen: a gombot
 * vizsgáltam, nem azt, amihez képest elcsúszottnak látszott.
 *
 * A sor alatti térközt maga a fejsor adja, a belső margó fölösleges.
 */
.valasz-fejsor > .reply-mode { margin-bottom: 0; }
/* A fejsorba került gombok saját külső margói már nem kellenek: a sor
   gap-je tartja a távolságot. Enélkül a negatív margók összecsúsztatnák. */
.valasz-eszkozok > div { margin: 0 !important; }
/* Az eszköztár burkolója csak a papír témán sáv; máshol átlátszó, a gyerekei a fejsor elemei. */
.valasz-eszkoztar { display: contents; }

/*
 * A VÁLASZDOBOZ LÁBSORA — HÁROM OSZLOP.
 *
 *   csatolmány  ·  ráfordított idő  ·············  küldés
 *   (bal)          (középen)                       (jobbra)
 *
 * Alatta, teljes szélességben, balra: az aláírás-jelzés.
 *
 * MI VOLT A BAJ
 * A ráfordított idő a CSATOLMÁNY blokkján belül ült. A lábsornak így
 * egyetlen gyereke volt — a „jobbra told" szabály (`:last-child`) pedig
 * ezt az egyet tolta jobbra, vagyis az EGÉSZ csoportot. Ezért nem
 * kezdődött a csatolmány a bal szélen, és ezért szorult a küldés külön
 * sorba.
 *
 * A hiba a szerkezetben volt, nem a stílusban: két javítási kört töltöttem
 * a stíluslapon, mielőtt megnéztem volna, mi minek a gyereke.
 */
.valasz-labsor {
    display: flex; flex-wrap: wrap;
    gap: 20px; margin-top: 12px;
    /*
     * AZ OSZLOPOK ALJA EGY VONALBAN.
     *
     * A csatolmány oszlopában a felirat a gomb FÖLÖTT áll, tehát az oszlop
     * teteje magasabban kezdődik, mint a másik kettőé. Felülre igazítva a
     * küldés gombja a fájlválasztó FÖLÖTT lebegett.
     *
     * Alulra igazítva a három oszlop záróvonala esik egybe: a fájlválasztó
     * gomb, az időmező doboza és a küldés gomb alja. Ez az a vonal, amit a
     * szem követ.
     */
    align-items: flex-end;
}

/*
 * A CSATOLMÁNY OSZLOPA EGYMÁS ALÁ.
 * A felirat, a gomb és a „nincs fájl" szöveg egy oszlopban áll, balra
 * igazítva — így a három elem egy egységnek látszik, nem három
 * szomszédnak.
 */
.valasz-csatolmany {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}

/* A küldés a jobb szélre — most már a HARMADIK oszlopként. */
/*
 * A KÜLDÉS SAJÁT SORBAN, BALRA.
 *
 * MI VOLT A BAJ
 * Jobbra tolva, a csatolmány és az idő MELLETT állt. Csakhogy a csatolmány
 * oszlopa a fájlnevektől nő: két hosszú név után a sor megtört, és a gomb
 * kiszámíthatatlanul hol az egyik, hol a másik sorba került. Kétszer
 * próbáltam a névlista szélességét korlátozni — de az elrendezés így is
 * a TARTALOM hosszától függött, ami nem a mi kezünkben van.
 *
 * A `flex-basis: 100%` mindig új sort nyit neki. Nem attól függ, mi fér
 * el mellette: mindig ugyanott van.
 */
.valasz-labsor > .valasz-kuldes-gomb {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 0;
}

/*
 * AZ ALÁÍRÁS-JELZÉS AZ EGÉSZ ALATT, BALRA.
 * Nem egyetlen oszlopra vonatkozik, hanem az egész válaszra — ezért nem
 * illik egyik oszlop alá sem.
 */
.valasz-alairas-sor { margin-top: 12px; }
.valasz-alairas-sor .valasz-alairas { margin: 0; text-align: left; }

/* A csatolmány felirata és a ráfordított idő egy sorban áll a küldéssel,
   ezért a saját, blokkszintű térközeik itt fölöslegesek. */
.valasz-csatolmany label[for="attachments"] { margin: 0; font-size: 12.5px; }

/*
 * A FÁJLVÁLASZTÓ ALSÓ MARGÓJA ITT NEM KELL.
 *
 * MI VOLT A BAJ
 * A `.file-wrap` 16 képpontos alsó margóval jön — űrlapon belül helyes, mert
 * ott elválasztja a következő mezőtől. A lábsorban viszont ez a margó a
 * DOBOZ része: az oszlop alja 16 képponttal lejjebb van, mint a látható
 * gomb alja.
 *
 * Az alulra igazítás a DOBOZOK alját hozza egy vonalba — így a gomb 16
 * képponttal FÖLJEBB került, mint a másik két oszlop tartalma. Ránézésre
 * úgy tűnt, mintha az igazítás nem működne, pedig pontosan működött: csak
 * nem azt igazította, amit a szem lát.
 */
.valasz-csatolmany .file-wrap { margin-bottom: 0; }


/* ==========================================================================
   KERESHETŐ BESZÚRÓ PANEL — sablonok és tudásbázis-cikkek.
   ==========================================================================

   Két legördülő helyett egy gomb, ami panelt nyit: legfelül keresőmező,
   alatta csoportosított lista, ami gépelésre szűkül.

   MIÉRT NEM LEGÖRDÜLŐ
   Mert negyven tételnél a böngésző legördülője csak görgetni enged, keresni
   nem — az első betűre ugrik, ami hasonlóan kezdődő címeknél használhatatlan.
*/
/* A `position: relative` a panel miatt kell: ahhoz képest helyezkedik el.
   A `flex` azért, hogy a burkoló ne nyisson szövegsort a gomb köré. */
.beszuro { position: relative; display: flex; align-items: center; }

.beszuro-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.beszuro-kereso {
    width: 100%;
    margin-bottom: 8px;
    font-size: 13px;
}

/*
 * A LISTA MAGASSÁGA KORLÁTOZOTT.
 *
 * Negyven tétel kifutna a képernyőből, és a panel alján lévő „Sablonok
 * kezelése" hivatkozás elérhetetlen lenne. A keresés amúgy is arra való,
 * hogy ne kelljen görgetni — de ha valaki mégis böngészni akar, tudjon.
 */
.beszuro-lista { max-height: 320px; overflow-y: auto; }

.beszuro-csoportcim {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 6px 4px;
}

.beszuro-tetel {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 7px;
    padding: 7px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.beszuro-tetel:hover,
.beszuro-tetel:focus-visible { background: var(--surface-2, rgba(127, 127, 127, 0.12)); }

/*
 * A `hidden` ATTRIBÚTUM ÉRVÉNYESÍTÉSE.
 *
 * MI VOLT A BAJ
 * A böngésző alapértelmezésben `display: none`-t ad a `[hidden]` elemeknek —
 * DE ezt bármelyik saját `display` szabály felülírja. A `.beszuro-tetel`
 * `display: block`-ot kapott, tehát a szűrés hiába állította be a `hidden`-t:
 * a tétel látszott tovább.
 *
 * A csoportnak viszont nem volt `display` szabálya, így az ELTŰNT. Ettől úgy
 * nézett ki, mintha a keresés a tudásbázisban nem működne — pedig fordítva:
 * a csoport rejtése működött, a tételeké nem.
 *
 * Ez az a fajta hiba, amit a szkriptben hiába keres az ember: a JavaScript
 * helyes volt végig.
 */
.beszuro-tetel[hidden],
.beszuro-csoport[hidden] { display: none; }

.beszuro-nincs {
    padding: 12px 8px;
    font-size: 13px;
    color: var(--text-dim);
}

.beszuro-kezeles {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-dim);
}

/* A beszúró gomb nyila: elfordul, amikor a panel nyitva van. A szín és a
   méret a fájl végi közös nyíl-szabályból jön. */
.beszuro-nyil { transition: transform 0.15s ease; }
.beszuro-gomb[aria-expanded="true"] .beszuro-nyil { transform: rotate(180deg); }

/*
 * „CSAK KÉSŐBB LESZ RÁ SZÜKSÉG?" — a bejelentő űrlapon, csukva induló blokk.
 *
 * MIÉRT NEM KÁRTYA A NYITOTT ÁLLAPOT
 * Mert az űrlap belsejében vagyunk: egy dobozba zárt mező elszakadna a
 * többitől, és fontosabbnak látszana, mint amennyire az. Nyitva egyszerűen
 * ott a mező és a magyarázat, ahogy eddig — csak most tudatos döntés után.
 */
details.kesobbi { margin-bottom: 16px; }

details.kesobbi > summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 0 10px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
details.kesobbi > summary::-webkit-details-marker { display: none; }
details.kesobbi > summary:hover { color: var(--text); }

/* A flex egy BELSŐ elemen: `<summary>`-n Safariban elrontaná a nyitás-csukást. */
details.kesobbi > summary > .summary-sor {
    display: flex; align-items: center; gap: 8px;
}
details.kesobbi > summary .kartya-nyil { transition: transform 0.15s ease; }
details.kesobbi[open] > summary .kartya-nyil { transform: rotate(180deg); }

/*
 * SZERZŐDÉSES BEÁLLÍTÁSOK — nyitható sor az ügyfélcégek táblázatában.
 *
 * MIÉRT VAN ELREJTVE
 * Az órakeret, a helyszíni keret és az SLA-naptár három teljes oszlopot
 * foglalt, cégenként négy mezővel. Tizennégy cégnél ötvenhat cella, amiből
 * élesben három mondott bármit is — a többi mindenütt az alapértéket
 * mutatta. A cella most a KIVÉTELT mondja: „alapértelmezett", vagy az
 * eltérés.
 *
 * MIÉRT KÜLÖN SORBAN
 * Az első változat a CELLÁBA tette a panelt. Kinyitva szétfeszítette a
 * sort: a cégnév, az elszámolás és a gombok középre ugrottak, a sor
 * négyszer olyan magas lett. Egy táblázatcella nem alkalmas erre — a panel
 * a cég alatti, teljes szélességű sorba való, ahol vízszintesen elfér.
 */
.szerzodes-nyito {
    background: none; border: 0; padding: 4px 0;
    font: inherit; font-size: 13px; color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
.szerzodes-nyito:hover { color: var(--accent); }
.szerzodes-nyito[aria-expanded="true"] .kartya-nyil { transform: rotate(180deg); }
.szerzodes-nyito .kartya-nyil { transition: transform 0.15s ease; }

.szerzodes-sor > td {
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
    padding: 14px 16px;
}

/* A három beállítás EGYMÁS MELLETT — ezért volt szűk a cellában. */
.szerzodes-panel {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 22px;
}
.szerzodes-panel label {
    display: block;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-dim); margin: 0 0 4px;
}
.szerzodes-panel input,
.szerzodes-panel select { margin-bottom: 0; }

/*
 * ÜGYFÉLCÉGEK TÁBLÁZATA — CÉGENKÉNTI CSÍKOZÁS.
 *
 * MI VOLT A BAJ
 * A rendszer általános zebra-szabálya soronként vált (`nth-child(even)`).
 * Cégenként viszont KÉT sor van: a cég és a szerződés-panel. Így minden
 * cégnek az egyik sora lett csíkos, a másik nem — a váltakozás
 * összekeveredett, és a táblázat egyszínűnek látszott.
 *
 * Ezért az általános szabályt itt kikapcsoljuk, és PHP-ből számolt
 * osztállyal csíkozunk: a cég két sora ugyanazt a hátteret kapja.
 */
.tenant-table tbody tr:nth-child(even) { background: none; }
.tenant-table tbody tr.zebra { background: #ffffff0a; }

/*
 * A KINYITOTT CÉG EGY TÖMBNEK LÁTSZIK.
 *
 * Ha a cég sora és a panel sora külön háttéren ülne, nem derülne ki
 * ránézésre, hogy a panel melyikhez tartozik — pont ez volt a baj a
 * cellába zárt változatnál is. Nyitva mindkét sor UGYANAZT az élénkebb
 * hátteret kapja, és a tömb alatt vonal zárja.
 */
.tenant-table tbody tr.ceg-sor.nyitva,
.tenant-table tbody tr.szerzodes-sor.nyitva {
    background: var(--surface-2, rgba(127, 127, 127, 0.10)) !important;
}
.tenant-table tbody tr.szerzodes-sor.nyitva > td {
    border-bottom: 2px solid var(--border);
    background: none;
}
.tenant-table tbody tr.ceg-sor.nyitva > td { border-bottom: 0; }

/*
 * ÜGYFÉL-FELHASZNÁLÓK: A CÉGCSOPORTOK FEJLÉCE.
 *
 * MI VOLT A BAJ
 * Összecsukott állapotban minden csoport ugyanazt a `--surface2` hátteret
 * kapta, beégetve a gomb stílusába. Tizenöt cégnél tizenöt azonos csík
 * egymás alatt: a szem nem fogja meg a sort, a lista egyetlen szürke
 * tömbnek látszik.
 *
 * A táblázatok zebrája ide nem ér el — ezek gombok, nem `tr`-ek —, ezért
 * saját váltakozás kell. A háttér osztályból jön, nem beégetett stílusból:
 * egy inline `background` felülírná a csíkot.
 */
.csoport-fej {
    width: 100%; text-align: left;
    background: var(--surface2);
    border: none; color: var(--text-dim);
    font-size: 13px; font-family: inherit;
    padding: 8px 6px; border-radius: 6px 6px 0 0;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
.csoport-fej.zebra { background: var(--surface); }
.csoport-fej:hover { color: var(--text); }

/*
 * VÁLTAKOZÓ HÁTTÉR NEM TÁBLÁZATOS LISTÁKON.
 *
 * MI VOLT A BAJ
 * A zebra a rendszerben `tbody tr:nth-child(even)`-re épült. A felületek nagy
 * része viszont NEM táblázat: a tábla nézet, a tömeges értesítés, a
 * számlázás, a tudástár, a beállítási varázsló, a vendégbejelentés és a
 * munkanapok listája `div`-ekből áll. Ezekre a szabály sosem vonatkozott,
 * és egyetlen szürke tömbnek látszottak.
 *
 * HASZNÁLAT: a KÖZVETLEN gyerekek a sorok.
 *     <div class="lista-zebra"> <div>…</div> <div>…</div> </div>
 */
.lista-zebra > *:nth-child(even) { background: #ffffff0a; }

/*
 * AZ OSZTÁLY CSAK SZÍNT AD, MÉRETET NEM.
 *
 * Az első változat belső teret és lekerekítést is állított — csakhogy a
 * meglévő elemeknek (tábla-kártyák, listasorok) van saját méretezésük, és
 * ez a fájl VÉGÉN van, tehát azonos erősségnél az enyém nyerne. Egy
 * kilenc képpontos kártyabelsőből három lett volna.
 *
 * Ahol a csík rátapadna a szövegre, ott a HELYSZÍNEN adunk teret —
 * `.lista-zebra-teres` —, nem mindenkire ráerőltetve.
 */
.lista-zebra-teres > * { padding: 3px 6px; border-radius: 4px; }

/*
 * AHOL A SOR SZÍNE JELENTÉST HORDOZ, OTT NEM ZEBRA KELL.
 *
 * A jegylistában a háttér a PRIORITÁST mutatja, a bal szegély szintén. Egy
 * váltakozó csík vagy láthatatlan lenne (a prioritás színe erősebb), vagy
 * elmosná a jelzést — épp azt, amiért a szín ott van.
 *
 * A szem viszont ugyanúgy elveszti a sort. Ezért itt VONAL választ el, nem
 * szín: az nem versenyez a jelentéssel.
 */
tbody tr.ticket-row > td { border-bottom: 1px solid var(--border); }

/*
 * MUNKANAPOK — a hét sora csíkozva.
 *
 * A `workhours-grid` nyolc képpontos hézaggal rakta egymás alá a sorokat.
 * Csíkozva ez lebegő sávoknak látszana, nem összefüggő listának — ezért a
 * hézag helyett BELSŐ tér adja a levegőt. Hét egyforma sor egymás alatt,
 * mindegyikben ugyanaz a két időmező: a szem könnyen elcsúszik, és rossz
 * nap idejét írja át.
 */
.workhours-grid.lista-zebra { gap: 0; }
.workhours-grid.lista-zebra > .workhours-row { padding: 7px 8px; }

/*
 * TÖMEGES ÉRTESÍTÉS — a címzettek listája.
 *
 * A listában két elemtípus váltakozik: a cégfejléc `div`, a választható
 * címzett `label`. Ezért NEM `nth-child`, hanem `nth-of-type` — az csak a
 * `label`-eket számolja, a cégfejléceket kihagyja. `nth-child`-dal a
 * fejlécek is beleszámítanának, és a csíkozás összevissza csúszna.
 */
label.customer-pick-row:nth-of-type(even) { background: #ffffff0a; }

/* Vendégbejelentés: a cégkártyák váltakozó háttere. */
.guest-row.zebra { background: var(--surface2); }

/*
 * TELEFONON CSUKHATÓ KÁRTYÁK — a jegyoldal jobb hasábján.
 *
 * A gombot a szkript teszi be, csak 1100 képpont alatt. Asztali gépen ez a
 * szabály sosem kerül elő, mert nincs `.mobil-nyito` elem.
 */
.mobil-nyito {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px;
    background: none; border: 0; padding: 2px 0;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
    cursor: pointer;
}
.mobil-nyito .kartya-nyil { transition: transform 0.15s ease; }
.mobil-nyito[aria-expanded="true"] .kartya-nyil { transform: rotate(180deg); }

/*
 * A JEGY FEJLÉCÉNEK GOMBSORA.
 *
 * Asztali gépen jobbra igazítva: ott a cím mellett van hely, és a
 * műveletek a jobb szélen keresendők. A stílus azért osztályban van és nem
 * a `style` attribútumban, mert telefonon felül kell írni — egy beégetett
 * `style`-t a CSS csak `!important`-tal tudna, az meg láncreakciót indít.
 */
.jegy-gombsor {
    display: flex; justify-content: flex-end; flex-wrap: wrap;
    gap: 8px; margin-bottom: 8px;
}

@media (max-width: 1100px) {
    /*
     * TELEFONON BALRA, ÉS A GOMBOK OSZTOZNAK A SORON.
     *
     * Jobbra igazítva a két gomb a képernyő jobb széléhez tapadt, a bal
     * oldalon meg üres hely maradt — keskeny kijelzőn ez fordítva rossz,
     * mint asztali gépen: ott a hely van bőven, itt a hüvelykujj a bal
     * oldalról érkezik.
     */
    .jegy-gombsor { justify-content: stretch; }
    .jegy-gombsor > * { flex: 1 1 auto; justify-content: center; }

    /*
     * A KÜLDÉS GOMBJA TELJES SZÉLESSÉGBEN.
     *
     * A lábsor `margin-left:auto`-val tolta jobbra a küldést. Telefonon a
     * gomb így a jobb szélhez tapadt, alatta az aláírás-sor pedig BEFUTOTT
     * alá — a két elem egymásra ült.
     */
    /* A küldés már asztali nézetben is saját sorban van; telefonon
       csak a teljes szélességet kell hozzáadni. */
    .valasz-labsor .splitbtn { display: flex; width: 100%; }
    .valasz-labsor .splitbtn > .btn:first-child { flex: 1; justify-content: center; }
}

/*
 * AZ ALÁÍRÁS-SOR A KÜLDÉS ALATT.
 *
 * Asztali gépen enyhe negatív felső margóval ül a gomb alá — ott a lábsor
 * egyetlen sor, és a szöveg pont a gomb alá kerül.
 */
.valasz-alairas { margin: -4px 0 10px; }

@media (max-width: 1100px) {
    /*
     * TELEFONON EGYMÁS ALÁ, NEGATÍV MARGÓ NÉLKÜL.
     *
     * MI VOLT A BAJ
     * A lábsor keskeny kijelzőn tördelt, a küldés gomb új sorba került — a
     * negatív felső margó viszont maradt, és RÁHÚZTA az aláírás-szöveget a
     * gombra. A kettő egymáson ült.
     *
     * Egy asztali nézetre hangolt negatív margó tördeléskor mindig így
     * viselkedik: ott egy sort zár, itt egy sorra rátolat.
     */
    .valasz-labsor { flex-direction: column; align-items: stretch; }
    .valasz-alairas { margin: 4px 0 10px; }
}

/*
 * AZ ALÁÍRÁS ELŐNÉZETE A VÁLASZ ALATT.
 *
 * A teljes aláírás korábban `title` buborékban volt: egérrel megnézhető,
 * telefonon sehogy. Most kinyitható — és pontosan úgy jelenik meg,
 * sortörésekkel, ahogy a levél végére kerül.
 */
details.valasz-alairas > summary {
    cursor: pointer; list-style: none;
    font-size: 12.5px; color: var(--text-dim);
    padding: 2px 0;
}
details.valasz-alairas > summary::-webkit-details-marker { display: none; }
details.valasz-alairas > summary:hover { color: var(--text); }

/* A flex belső elemen: `<summary>`-n Safariban elrontaná a csukást. */
details.valasz-alairas > summary > .summary-sor {
    display: flex; align-items: center; gap: 8px;
}
details.valasz-alairas > summary .kartya-nyil { transition: transform 0.15s ease; }
details.valasz-alairas[open] > summary .kartya-nyil { transform: rotate(180deg); }

.alairas-elonezet {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--surface2);
    border-left: 2px solid var(--border);
    border-radius: 0 6px 6px 0;
    font: inherit; font-size: 12.5px;
    color: var(--text-dim);
    white-space: pre-wrap;      /* A sortörések számítanak: így megy ki. */
    overflow-wrap: anywhere;
}

/*
 * A PORTÁL PROFILOLDALA — BEÁLLÍTÁSOK KÉT OSZLOPBAN.
 *
 * MI VOLT A BAJ
 * Hét kártya egymás alatt, egy keskeny oszlopban: az oldal kétszer olyan
 * hosszú lett, mint amennyi tartalom van rajta. A kártyák FÜGGETLENEK
 * egymástól — a nyelv nem függ a jelszótól —, tehát nincs okuk sorban
 * állni.
 *
 * ELŐBB HASÁBOT (`columns`) HASZNÁLTAM, ÉS AZ ROSSZ VOLT.
 * Az érvem az volt, hogy a rács a legmagasabb kártyához igazítja a sort, és
 * a rövidek mellett üres hely marad. Csakhogy a rácsban a kártya KITÖLTI a
 * sort — nem hézag lesz belőle, hanem egyforma magas dobozok. A hasáb
 * ezzel szemben eltérő magasságokat rak egymás mellé, és a lap
 * kiegyensúlyozatlanul néz ki.
 *
 * Ami egyedül marad a végén, az középre kerül: egy magányos kártya a bal
 * oldalon úgy néz ki, mintha a jobb oldalról hiányozna valami.
 */
.profil-racs > .card { margin: 0 !important; }

@media (min-width: 900px) {
    .profil-racs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: stretch;   /* Egy sorban a kártyák egyforma magasak. */
    }

    /*
     * A PÁRATLANUL MARADÓ UTOLSÓ KÁRTYA KÖZÉPRE.
     *
     * A `:last-child:nth-child(odd)` pontosan akkor illeszkedik, ha a
     * kártyák SZÁMA páratlan — vagyis az utolsó egyedül áll a sorában.
     * Páros számnál ez a szabály elő sem kerül.
     */
    .profil-racs > .card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        /*
         * `justify-self`, NEM `margin: auto`.
         *
         * A kártyák margóját fentebb `margin: 0 !important` nullázza (a
         * térközt a rács `gap`-je adja). Egy `margin-inline: auto` ezzel
         * feszülne egymásnak, és a kimenetel a szabályok sorrendjén meg a
         * pontos erősségen múlna — olyasmin, ami egy átrendezésnél
         * észrevétlenül elbillen.
         *
         * A `justify-self` a rács SAJÁT eszköze: az elemet a saját
         * rácsterületén belül igazítja, margóktól függetlenül.
         */
        justify-self: center;
    }
}

/*
 * TELEFONSZÁM-MEZŐ JELZÉSE.
 *
 * A zászló-emodzsi a mező mellé kerül, nem alá: ott van, ahova a szem néz
 * gépelés közben. A figyelmeztető szöveg viszont teljes sor, mert olvasni
 * kell — egy sor végére biggyesztve elsiklana felette az ember.
 */
.tel-jelzes {
    display: inline-block;
    margin: -10px 0 16px;
    font-size: 15px;
    line-height: 1.5;
}
.tel-jelzes.tel-jelzes-figyelem {
    display: block;
    font-size: 12.5px;
    color: var(--warning);
}

/*
 * HANGBEVITEL A BEJELENTŐ ŰRLAPON.
 *
 * A gomb a leírás mező FÖLÖTT van, mert ott dől el, hogy gépel vagy beszél.
 * A tájékoztató sor alatta végig látszik — nem mintaszövegben, mert az
 * eltűnik, amint valaki gépelni kezd.
 */
.hang-bevitel { margin: 0 0 10px; }
.hang-bevitel .hang-gomb { padding: 7px 14px; }
.hang-bevitel .hang-gomb-aktiv {
    background: var(--danger); border-color: var(--danger); color: #fff;
}
.hang-allapot { margin-left: 10px; }
.hang-allapot.hang-hiba { color: var(--warning); }
.hang-tajekoztato { margin: 6px 0 0; line-height: 1.5; }

/*
 * VISSZAKÉRDEZÉS A BEJELENTŐ ŰRLAPON.
 *
 * A leírás mező ALATT van, mert csak akkor van értelme, ha már van mit
 * megnézni. A kérdések doboza elkülönül a szürke háttérrel: az ügyfélnek
 * látnia kell, hogy ez nem az űrlap része, hanem egy segítség.
 */
/* A tudásbázis-javaslat sora az új bejelentésnél: cím + (ha van) egy sor részlet. */
/* A kategória-szűrő (a régi inline stílus helyett osztály; a régi témán ugyanaz a kinézet). */
.kb-kat { text-decoration: none; padding: 8px 14px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
.kb-kat--aktiv { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.kb-javaslat { display: block; padding: 3px 0; color: var(--text); text-decoration: underline; font-size: 13px; }
.kb-javaslat .kb-meta { display: block; font-size: 12px; color: var(--text-faint); text-decoration: none; }

.askback { margin: 6px 0 16px; }
.askback .askback-gomb { padding: 7px 14px; }
.askback-allapot { margin-left: 10px; }
.askback-allapot.askback-hiba { color: var(--warning); }
.askback-tajekoztato { margin: 6px 0 0; line-height: 1.5; }

.askback-lista:not(:empty) {
    margin-top: 12px; padding: 12px 14px;
    background: var(--surface2);
    border-radius: 8px;
}
.askback-cim { margin: 0 0 10px; font-weight: 600; }
.askback-sor { margin-bottom: 10px; }
.askback-sor label {
    display: block; margin-bottom: 4px;
    font-size: 13px; text-transform: none; letter-spacing: 0;
    color: var(--text);
}
.askback-sor input { margin-bottom: 0; }
.askback-gombsor { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.askback-kihagy { opacity: .7; }

/*
 * AI-CHAT — lebegő doboz a bejelentő űrlap jobb alsó sarkában.
 *
 * NYITVA INDUL (Attila kérése, 2026-10-16): a korábbi, gomb mögé rejtett
 * változatot kevesen vették észre. A `<body>` végén él, NEM a kártyák
 * között — lásd a beillesztési helyen a magyarázatot arról, miért (a
 * Papír témában a `.card` `backdrop-filter`-e elrontaná a `position:
 * fixed`-et).
 */
.ai-chat {
    position: fixed; right: 16px; bottom: 16px; z-index: 500;
    width: 320px; max-width: calc(100vw - 32px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2);
    padding: 12px 14px;
}
.ai-chat-fejsor { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-chat-fejsor-cim { font-weight: 600; font-size: 14px; }
.ai-chat-csukja {
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--text-dim); padding: 0 4px;
}
.ai-chat-csukja:hover { color: var(--text); }
.ai-chat-tajekoztato { margin: 4px 0 10px; line-height: 1.5; }
.ai-chat-ablak {
    padding: 10px 12px;
    background: var(--surface2);
    border-radius: 8px;
}
.ai-chat-uzenetek {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 280px; overflow-y: auto; margin-bottom: 10px;
}
.ai-chat-buborek {
    padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
    max-width: 90%;
}
.ai-chat-buborek-ugyfel {
    align-self: flex-end;
    background: var(--accent); color: #fff;
}
.ai-chat-buborek-asszisztens {
    align-self: flex-start;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.ai-chat-cikk-link { display: block; margin-top: 6px; font-size: 12px; text-decoration: underline; }
.ai-chat-allapot { margin: 0 0 8px; min-height: 1.2em; }
.ai-chat-allapot.ai-chat-hiba { color: var(--warning); }
.ai-chat-beviteli-sor { display: flex; gap: 8px; }
.ai-chat-beviteli-sor .ai-chat-input { flex: 1; margin-bottom: 0; }
.ai-chat-jegybe { margin-top: 10px; width: 100%; justify-content: center; }

/* Összecsukva: csak a fejsor marad — a hint és az ablak eltűnik. */
.ai-chat.ai-chat-csukott .ai-chat-tajekoztato,
.ai-chat.ai-chat-csukott .ai-chat-ablak { display: none; }

/*
 * MOBILON (data-mobil-csukhato és hasonló elemek már foglalják a sarkot
 * a kis képernyőkön — pl. a küldés-jelzés, a lebegő "fel" gomb) a doboz
 * szélesebb, a teljes sáv alját foglalja el, hogy ne takarja ki magát.
 */
@media (max-width: 480px) {
    .ai-chat { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; }
}

/*
 * AI-BESZÉLGETÉS ELŐZMÉNY — admin/ticket.php, olvasható nézet.
 *
 * A buborék-osztályok (`.ai-chat-buborek*`) ugyanazok, mint a portálon —
 * a szín-kódolás (ügyfél/asszisztens) itt is segít gyorsan átfutni, ki
 * mondta mit.
 */
.ai-chat-elozmeny-lista { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.ai-chat-elozmeny .ai-chat-buborek { max-width: 100%; }
.ai-chat-elozmeny-ido { margin-bottom: 2px; }

/*
 * A VÁLASZDOBOZ LÁBSORA ÉS A KÜLDÉS SORA.
 *
 * KÉT SOR, NEM HÁROM:
 *   1. csatolmány  ·  ráfordított idő (kerettel, kiemelve)
 *   2. aláírás-jelzés  ·············  küldés gomb
 *
 * MI VOLT A BAJ
 * A küldés gomb a LÁBSOR utolsó elemeként ült, jobbra tolva, az
 * aláírás-jelzés pedig egy külön bekezdésként alatta, balra. Három sor lett
 * belőle, és a kettő nem látszott összetartozónak — pedig az aláírás épp
 * arról szól, mi kerül a KÜLDÖTT levél végére.
 *
 * A RÁFORDÍTOTT IDŐ KERETE MARAD.
 * Egy köztes körben kivettem, mert azt hittem, a keret vágja szét a sort.
 * Nem az vágta szét: a küldés gomb volt rossz helyen. A keret viszont
 * KIEMELI az időmezőt — az az egyetlen adat abban a sorban, ami pénzt
 * érint, és jó, ha látszik.
 */
@media (max-width: 1100px) {
    /*
     * KESKENY KIJELZŐN EGYMÁS ALÁ.
     * Három oszlop egy telefonképernyőn nem fér el olvashatóan — ott a
     * sorrend számít, nem az egymás mellettiség.
     */
    .valasz-labsor { flex-direction: column; align-items: stretch; gap: 14px; }
    .valasz-labsor > .valasz-kuldes-gomb { margin-left: 0; }
    .valasz-kuldes-gomb .splitbtn { display: flex; width: 100%; }
    .valasz-kuldes-gomb .splitbtn > .btn:first-child { flex: 1; justify-content: center; }
}
/*
 * A VÁLASZDOBOZ LÁBSORA — EGY SOR, NEM HÁROM SZIGET.
 *
 * MI VOLT A BAJ
 * A `.worktime-row` önálló KÁRTYÁNAK készült: saját háttér, keret, belső tér
 * és felső margó. Utóbb bekerült a lábsorba a csatolmány mellé — és ott egy
 * keretezett doboz lebegett a sor közepén, tőle jobbra nagy üres hellyel,
 * alatta pedig külön sorban a küldés gomb. Három sziget egymás mellett.
 *
 * A kártyaszerű megjelenés akkor volt helyes, amikor a blokk EGYEDÜL állt.
 * Egy soron belül viszont a keret nem tagol, hanem szétvág.
 *
 * Ez tipikus: egy elem, ami önmagában jól néz ki, más környezetbe helyezve
 * elrontja a sort — és a régi stílus ottmarad, mert külön nem hibázik.
 */
/*
 * AZ IDŐMEZŐ DOBOZA A SORHOZ IGAZODIK.
 *
 * A `.worktime-row` önálló blokként 10 képpontos belső teret kapott felül és
 * alul — ott az helyes volt. A lábsorban viszont ettől MAGASABB lett a
 * doboz, mint a mellette álló gombok, és a kerete vastagabbnak látszott.
 *
 * A keret marad — az időmező az egyetlen adat abban a sorban, ami pénzt
 * érint —, csak a doboz szorosabban követi a tartalmát.
 */
.valasz-labsor .worktime-row { margin-top: 0; padding: 6px 12px; }

/*
 * A KÜLDÉS ÉS AZ ALÁÍRÁS EGYÜTT TARTOZIK.
 *
 * Az aláírás-sor azt mondja el, mi kerül a levél végére — vagyis a KÜLDÉSRŐL
 * szól. Bal szélen, a gombtól két sornyira nem hozzá tartozónak látszik.
 */


/*
 * FÁJLVÁLASZTÁS TÖRLÉSE.
 *
 * Rejtve indul, és csak akkor jelenik meg, ha tényleg van kiválasztott fájl.
 * Halvány, mert visszavonás — nem az a művelet, amerre a szem menjen.
 */
.file-clear {
    background: none; border: 0; padding: 0 4px;
    font-size: 18px; line-height: 1;
    color: var(--text-faint); cursor: pointer;
}
.file-clear:hover { color: var(--danger); }

/*
 * A FÁJLNEVEK NEM NYOMHATJÁK SZÉT A SORT.
 *
 * MI VOLT A BAJ
 * Amikor két fájl neve is kiíródott, a csatolmány oszlopa kiszélesedett, a
 * lábsor megtört, és a küldés gomb új sorba esett. A nevek kiírása jó —
 * abból derül ki, mi megy ki —, de nem nőhet vég nélkül.
 *
 * A lista ezért korlátozott szélességben TÖRDEL: az oszlop lefelé nő, nem
 * oldalra. A három oszlop így egy sorban marad, és az alulra igazítás is
 * működik tovább.
 */
.valasz-csatolmany .file-label {
    /* Tágabb hely, mert a küldés már nem mellette áll — de nem korlátlan:
       egy húsz fájlból álló lista különben az egész sort elvinné. */
    max-width: 420px;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

/*
 * FOGD-ÉS-VIDD FÁJLFELTÖLTÉS.
 *
 * A súgószöveg halkan ott van, hogy egyáltalán kiderüljön: rá lehet húzni.
 * Enélkül a lehetőség láthatatlan — aki nem próbálja ki, sosem tudja meg.
 */
.file-drop-sugo { opacity: .75; }

/*
 * A RÁHÚZÁS PILLANATÁBAN LÁTSZÓDJON, HOVA EJTHET.
 * Egy szaggatott keret elég: ha semmi nem változik, az ember bizonytalan,
 * hogy jó helyen jár-e, és inkább elengedi máshol.
 */
.file-wrap-drop {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: 6px;
}

/*
 * KORÁBBI JEGYEK PANEL.
 *
 * Lista, nem táblázat: három adat van soronként (státusz, tárgy, dátum), és
 * a tárgy hosszú. Táblázatban a hasáb szélességén ez összenyomódna.
 */
.korabbi-jegyek { list-style: none; margin: 8px 0 0; padding: 0; }
.korabbi-jegyek li {
    display: flex; align-items: baseline; gap: 7px;
    padding: 5px 0; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.korabbi-jegyek li:last-child { border-bottom: 0; }
.korabbi-jegyek a { flex: 1; overflow-wrap: anywhere; }
/* A dátum nem törhet ketté: rövid, és a sor végén horgonyt ad a szemnek. */
.korabbi-jegyek .mono { white-space: nowrap; opacity: .8; }

/*
 * A VENDÉGBEJELENTÉS OLDALÁN: mit NEM szabályoz ez a lap.
 * A cégek listája fölött, mert a félreértés ott keletkezik — a „Senki"
 * felirat láttán.
 */
.guest-cegek-jelzes { margin: 4px 0 12px; max-width: 78ch; line-height: 1.55; }

/*
 * AZ ÜGYFÉLPORTÁL TÉMAVÁLASZTÓJA — EGY GOMB MÖGÖTT.
 *
 * A színek kattintásra jelennek meg, a nyitó gomb fölött lebegve. Így a
 * fejléc nem lesz zsúfolt, és a választék nem tolja odébb a többi gombot.
 */
.tema-nyito { position: relative; display: inline-block; }
.tema-gomb { padding: 6px 10px; font-size: 15px; line-height: 1; }
.tema-nyito .tema-lista {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px; box-shadow: 0 8px 24px #0006;
}
/*
 * A `hidden` ATTRIBÚTUMOT KÜLÖN ÉRVÉNYRE KELL JUTTATNI.
 *
 * MI VOLT A BAJ
 * A `.theme-switcher` osztálynak `display: flex`-e van. A böngésző a
 * `hidden` attribútumot egy `display: none` szabállyal valósítja meg — de
 * az OSZTÁLYRA írt szabály ERŐSEBB nála, tehát a lista mindig látszott, és
 * nem lehetett becsukni.
 *
 * Ez a `hidden` klasszikus csapdája: némán hatástalanná válik, ha az elem
 * bármilyen `display` értéket kap osztályból. A JavaScript hibátlanul
 * működött — a stílus fogta meg.
 */
.tema-nyito .tema-lista[hidden] { display: none; }

/* ==========================================================================
   CSAK-PAPÍR ÉS CSAK-KLASSZIKUS ELEMEK
   ========================================================================== */
/*
 * AZ ÚJ ELRENDEZÉS KÉT OSZTÁLLYAL VÁLT.
 *
 * A téma a BÖNGÉSZŐBEN dől el (localStorage), a szerver nem tudja, melyiket
 * látod — ezért a lap mindkét változatot kiküldi, és a CSS mutatja azt,
 * amelyik a témához tartozik:
 *   - `papir-csak`      → csak a papír témán látszik (új elrendezés);
 *   - `klasszikus-csak` → a papír témán rejtve (régi elrendezés).
 *
 * A `:not([data-theme="paper"])` a téma NÉLKÜLI lapot is lefedi (letiltott
 * szkript, nyomtatás előtti pillanat): ott a megszokott régi nézet jelenik
 * meg, nem egy félkész új.
 *
 * Ez ÁTMENETI: amikor a papír lesz az alapértelmezés, és csak egy világos
 * meg egy sötét téma marad, a régi változatok törlődnek, és ez a két szabály
 * is.
 */
html:not([data-theme="paper"]) .papir-csak { display: none !important; }
[data-theme="paper"] .klasszikus-csak { display: none !important; }

/* ==========================================================================
   PAPÍR TÉMA — betűtípusok és komponensek
   A színek fent, a témablokkoknál. Itt MINDEN szabály `[data-theme="paper"]`
   alá van zárva: a többi témán ez a szakasz semmit nem változtat.
   ========================================================================== */

/*
 * SAJÁT BETŰTÍPUSOK, SAJÁT SZERVERRŐL.
 *
 * MIÉRT NEM GOOGLE FONTS
 * A CSP (`includes/bootstrap.php`) külső forrást nem enged — ez szándékos, és
 * nem is lazítunk rajta egy betűtípus kedvéért. A fájlok ezért az
 * `assets/fonts/` alatt vannak (SIL Open Font License 1.1, lásd `OFL.txt`).
 *
 * KÉT ALCSOPORT BETŰNKÉNT
 * A `latin` a nyugati ékezeteket (á, é, ö, ü) hozza, a `latin-ext` a magyar ő
 * és ű betűt. A `unicode-range` miatt a böngésző csak azt tölti le, amire a
 * lapon ténylegesen szükség van — magyar szövegnél mindkettőt, de egyiket sem,
 * amíg nem a papír téma az aktív.
 *
 * A `font-display: swap` a lap tartalmát nem tartja vissza: amíg a fájl
 * érkezik, a rendszer saját betűje látszik, utána cserélődik.
 */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/bricolage-grotesque-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('fonts/bricolage-grotesque-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/*
 * GEIST / GEIST MONO (v2.340.0) — a portál „teljes hatás" fázisának betűtípusa.
 *
 * MIÉRT NEM A GOOGLE FONTS CDN-RŐL
 * A CSP (`includes/bootstrap.php`) szándékosan `style-src 'self' 'unsafe-inline'`
 * és `font-src 'self' data:` — külső betűtípus-forrás EGYSZERŰEN NEM TÖLTŐDIK BE,
 * a böngésző eldobja. Ezért a Geist is, ugyanúgy, mint az IBM Plex/Bricolage,
 * helyben tárolt woff2-ként érkezik (forrás: a hivatalos „geist" npm csomag,
 * Vercel, SIL OFL licenc — lásd `assets/fonts/OFL.txt`).
 *
 * MIÉRT NINCS KÜLÖN „latin-ext” FÁJL
 * Az IBM Plex/Bricolage a Google Fonts-ról (Fontsource) érkezett, ami latin és
 * latin-ext alkészletre bontva szállítja a fájlokat. A Geist npm csomag EGYETLEN
 * fájlban hozza a teljes lefedést (ellenőrizve: az ékezetes magyar betűk —
 * á é í ó ö ő ú ü ű — mind megvannak benne) — nincs mit szétbontani.
 *
 * CSAK A PORTÁLON HASZNÁLT: a `--font-body`/`--font-display`/`--font-mono`
 * változókat a `[data-theme="paper"][data-app="portal"]` blokk írja felül
 * Geistre (lásd a fájl elején) — az admin nem hordozza a `data-app` attribútumot,
 * ezért ott az IBM Plex Sans/Bricolage Grotesque marad, ez a @font-face pedig
 * egyszerűen nem kerül felhasználásra (a `font-display: swap` miatt be sem
 * töltődik, amíg semmi nem hivatkozik rá).
 */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/geist-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-mono-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-mono-500-normal.woff2') format('woff2'); }

/*
 * ALAP: betű és háttér.
 *
 * A pöttyös háttérminta és a lebegő fényfoltok a sötét témákhoz készültek —
 * ott mélységet adnak. A papír alapon csak szennyeződésnek látszanának, és
 * épp a nyugodt, „nyomtatott" hatást vennék el.
 */
/*
 * 13,5 pixel, nem 14: az IBM Plex Sans szélesebb és magasabb kisbetűs, mint a
 * régi témák rendszerbetűje (Segoe UI) — azonos pixelméreten nagyobbnak hat.
 * Attila jelezte (2026-09-24): „a betűk túl nagyok mindenhol".
 */
[data-theme="paper"] body { font-family: var(--font-body); font-size: 13.5px; background-image: none; }
[data-theme="paper"] body::before,
[data-theme="paper"] body::after { display: none; }

/* A címek a display betűt kapják — a méretük marad, hogy semmi ne tördelődjön át. */
[data-theme="paper"] h1,
[data-theme="paper"] h2,
[data-theme="paper"] .page-title,
[data-theme="paper"] .login-title,
[data-theme="paper"] .stat-summary-value {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}
[data-theme="paper"] .page-title { font-weight: 600; }

/*
 * A GÉPI SZÖVEG egy betűcsaládot kap: jegyszám, oszlopfej, mezőcímke.
 * Eddig ezek a rendszer alap-monospace betűjével jelentek meg, ami gépenként
 * más volt (Consolas, Menlo, DejaVu) — most mindenhol ugyanaz.
 */
[data-theme="paper"] .mono,
[data-theme="paper"] code,
[data-theme="paper"] kbd,
[data-theme="paper"] pre,
[data-theme="paper"] th,
[data-theme="paper"] label,
[data-theme="paper"] .brand-sub,
[data-theme="paper"] .login-eyebrow,
[data-theme="paper"] .nav-flyout-cim {
    font-family: var(--font-mono);
}
/* A címkén belüli magyarázó szöveg normál betűs marad — lásd a `label .muted` szabályt. */
[data-theme="paper"] label .muted,
[data-theme="paper"] label .small.muted { font-family: var(--font-body); }

/* --- Gombok --- */
/*
 * RÁMUTATÁSKOR A GOMB SZÍNE VÁLTOZIK, NEM A FELIRATÉ.
 *
 * MI VOLT A BAJ (Attila jelezte, 2026-09-24 — „ha a gombra tolom az egeret,
 * a szöveg változik minimálisan, korábban a gomb színe változott")
 * Az első változat a régi témák mintáját követte: egy `brightness()` szűrő.
 * A szűrő viszont az EGÉSZ gombra hat — a kék kitöltés alig sötétedett, a
 * fehér felirat viszont halványszürkévé vált. Az ember azt látta, hogy a
 * betű változik, a gomb nem.
 *
 * Most a HÁTTÉRSZÍN cserélődik egy jól láthatóan sötétebb árnyalatra, a
 * felirat marad fehér. A sötétebb kéken a fehér felirat kontrasztja még
 * nő is (6,5 → 9,3 : 1).
 *
 * A `:not(:disabled)` azért kell, hogy a letiltott gomb ne „reagáljon" —
 * egy gomb, ami rámutatásra színt vált, kattinthatónak hat.
 */
[data-theme="paper"] .btn { border-radius: 10px; transition: background-color .12s, border-color .12s; }
[data-theme="paper"] .btn:hover:not(:disabled) { filter: none; background-color: var(--accent-hover); }
[data-theme="paper"] .btn.danger:hover:not(:disabled) { background-color: var(--danger-hover); }
/*
 * A MÁSODLAGOS GOMB FEHÉR, NEM SZÜRKE.
 * A papír alapon a szürke kitöltés piszkosnak hat, és beleolvad a
 * háttérbe. A fehér kártya-szín kerettel egyértelműen gomb.
 *
 * Rámutatásra a háttér papírszínűre sötétedik ÉS a keret tintára vált —
 * a keret egymagában túl vékony jelzés volt.
 */
[data-theme="paper"] .btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="paper"] .btn.secondary:hover:not(:disabled) { filter: none; border-color: #c9c1b1; background-color: var(--surface2); color: var(--text); }
[data-theme="paper"] .splitbtn > .btn { border-radius: 10px 0 0 10px; }
[data-theme="paper"] .splitbtn > .btn-arrow { border-radius: 0 10px 10px 0; transition: background-color .12s; }
[data-theme="paper"] .splitbtn > .btn-arrow:hover:not(:disabled) { filter: none; background-color: var(--accent-hover); }
/*
 * AZ OLDALSÁVBAN A KIEMELŐ SZÍN VILÁGOSKÉK (a sötét alapon olvasható
 * linkekért) — a rá írt FEHÉR felirat viszont ott alig látszana. A
 * kiemelő-hátterű jelvények és az összecsukó fül ezért sötét feliratot kapnak.
 */
/*
 * Csak a sötét-tinta oldalsávban kell: ott a `--accent` a sáv saját,
 * VILÁGOSKÉK változatára van állítva (jó kontraszt sötét alapon), és arra a
 * fehér felirat alig látszana. Világos oldalsávon (kísérlet) az `--accent`
 * ismét a lapon mindenhol használt, telített tintakék — arra a fehér
 * felirat (az alap `.version-new-badge`/`.nav-edge:hover` szabály) a helyes.
 */
[data-theme="paper"][data-tonus="sotet"] .app-sidebar .version-new-badge { color: #17171c; }
[data-theme="paper"][data-tonus="sotet"] .app-sidebar .nav-edge:hover { color: #17171c; }

/* --- Beviteli mezők: fehér doboz a papíron, nem a háttérszín --- */
[data-theme="paper"] input[type=text], [data-theme="paper"] input[type=email],
[data-theme="paper"] input[type=password], [data-theme="paper"] input[type=date],
[data-theme="paper"] input[type=number], [data-theme="paper"] input[type=search],
[data-theme="paper"] input[type=tel], [data-theme="paper"] input[type=url],
[data-theme="paper"] input[type=datetime-local], [data-theme="paper"] input[type=time],
[data-theme="paper"] input[type=month], [data-theme="paper"] input[type=week],
[data-theme="paper"] textarea, [data-theme="paper"] select {
    background-color: var(--surface);
    border-radius: 10px;
}
/*
 * A NAPTÁR-IKON VILÁGOS ALAPON NEM FORDÍTHATÓ.
 * Az alap szabály `invert(0.6)`-tal világosítja a sötét témákhoz — papíron
 * ettől halványszürke, alig látható ikon lenne.
 */
[data-theme="paper"] input[type=date]::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }
[data-theme="paper"] input[type=date]::-webkit-calendar-picker-indicator:hover { filter: none; opacity: 1; }

/* --- Táblázatok: a világos témák sötét csíkozása, tintaárnyalattal --- */
[data-theme="paper"] tbody tr:nth-child(even) { background: #17171c08; }
[data-theme="paper"] tbody tr:hover { background: #17171c12; }
[data-theme="paper"] .zebra-row:nth-of-type(even) { background: #17171c08; }
[data-theme="paper"] .zebra-row:hover { background: #17171c12; }
[data-theme="paper"] .tenant-table tbody tr.zebra { background: #17171c0c; }
[data-theme="paper"] .lista-zebra > *:nth-child(even) { background: #17171c0c; }
[data-theme="paper"] label.customer-pick-row:nth-of-type(even) { background: #17171c0c; }
[data-theme="paper"] th { letter-spacing: .06em; }

/*
 * --- Oldalsáv: sötét tinta a papír mellett ---
 *
 * MIÉRT VÁLTOZÓKKAL, NEM ELEMENKÉNTI SZÍNEKKEL
 * Az oldalsávban sok elem van (kereső, csoportcímkék, témaválasztó,
 * felhasználó, verziójelzés), és mindegyik a téma változóit használja. Ha a
 * változókat itt, a sávon belül sötétre állítjuk, az ÖSSZES elem magától
 * követi — egy később hozzáadott elem is. Elemenként felülírva mindig
 * maradna egy, ami világos-sötéten világít.
 *
 * A `color` is kell: a szöveg a <body>-tól örökölné a már KISZÁMOLT sötét
 * színt, nem a változót — enélkül fekete betű állna fekete alapon.
 */
[data-theme="paper"] .app-sidebar {
    color-scheme: dark;
    --bg: #222228; --surface: #17171c; --surface2: #2a2a31; --border: #34343c;
    --text: #f5f2eb; --text-dim: #d6d2c8; --text-faint: #8e8a82;
    --accent: #9db6f5; --shadow: #00000073;
    background: #17171c;
    border-right-color: #17171c;
    color: var(--text);
}
/*
 * KÍSÉRLET (Attila kérésére): világos Papíron az oldalsáv is világos legyen,
 * ne a fenti sötét tinta. A `:not([data-tonus="sotet"])` egy attribútum-
 * szelektorral több, mint a fenti szabály — emiatt EFELETTE áll a
 * specifikusságban, és felülírja, amikor NEM a sötét tónus van kiválasztva
 * (a Papír sötét témán a fenti sötét oldalsáv marad, változatlanul).
 *
 * A `--text` és a `color: var(--text)` itt is együtt kell (ugyanaz a bukás,
 * mint fent: a <body>-tól örökölt, már kiszámolt szín a régi témát vinné
 * tovább, ha csak a változót írnánk át).
 */
[data-theme="paper"]:not([data-tonus="sotet"]) .app-sidebar {
    color-scheme: light;
    --bg: #f5f2eb; --surface: #ffffff; --surface2: #ece7dc; --border: #ddd6c8;
    --text: #17171c; --text-dim: #3d3d45; --text-faint: #5a5a63;
    --accent: #2a55c9; --shadow: #17171c1f;
    background: var(--surface);
    border-right-color: var(--border);
    color: var(--text);
}
/*
 * Nyitott, asztali oldalsávban a menüpont lekerekített „pirula", nem bal
 * szegélyes csík. Csukott és mobil nézetben a meglévő elrendezés marad:
 * ott az ikon-gombok saját szabályai dolgoznak.
 */
/*
 * KÉT KIVÉTEL A MENÜPONT-SZABÁLYBÓL:
 *   - a beállítás-kereső találatai (`.nav-find-hit`) szintén `<a>`-k az
 *     `.app-nav`-on belül, de saját, lista-szerű elrendezésük van;
 *   - a JOBB oldali belső margóhoz nem nyúlunk: a súgó-ikonos menüpontok
 *     (`a[data-tip]`) ott tartanak helyet az ikonnak.
 */
@media (min-width: 861px) {
    [data-theme="paper"] .app-sidebar:not(.nav-collapsed) .app-nav a:not(.nav-find-hit) {
        border-left: 0; border-radius: 8px; margin: 1px 10px;
        padding-top: 9px; padding-bottom: 9px; padding-left: 12px;
    }
    [data-theme="paper"] .app-sidebar:not(.nav-collapsed) .app-nav a.active:not(.nav-find-hit) {
        background: var(--surface2); color: #ffffff;
    }
    /*
     * Világos oldalsávon a fehér felirat a világos kijelölő hátteren
     * eltűnne — ott a kiemelő szín (`--accent`, itt már a világos-témás
     * tintakék) marad, ugyanaz, mint amit a `.app-nav a.active` alap
     * szabálya amúgy is adna (ez a szabály csak a sötét-tinta esetre írja
     * felül fehérre).
     */
    [data-theme="paper"]:not([data-tonus="sotet"]) .app-sidebar:not(.nav-collapsed) .app-nav a.active:not(.nav-find-hit) {
        color: var(--accent);
    }
    [data-theme="paper"] .app-sidebar:not(.nav-collapsed) .app-nav .nav-label {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        letter-spacing: .12em; text-transform: uppercase;
        color: var(--text-faint); border-bottom: 0; margin: 0 10px 2px; padding: 18px 12px 6px;
    }
}

/* --- Felső sáv: kereső és „Új jegy" (includes/admin_header.php) --- */
[data-theme="paper"] .papir-felso-sav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: -24px -28px 22px; padding: 14px 28px;
    border-bottom: 1px solid var(--border);
}
[data-theme="paper"] .papir-kereso {
    display: flex; align-items: center; gap: 10px;
    flex: 0 1 460px; height: 42px; padding: 0 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-faint);
}
[data-theme="paper"] .papir-kereso:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-theme="paper"] .papir-kereso input[type=search] {
    flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0;
    border: 0; background: transparent; outline: none; font-size: 14px;
}
[data-theme="paper"] .papir-felso-sav .btn { height: 42px; padding: 0 18px; white-space: nowrap; }
/* Képernyőolvasónak ott a címke, a szemnek a nagyító-ikon és a helykitöltő szöveg elég. */
[data-theme="paper"] .papir-rejtett {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 860px) {
    /* Mobilon az app-main belső margója 16 pixel — a sáv ahhoz igazodik. */
    [data-theme="paper"] .papir-felso-sav { margin: -16px -16px 16px; padding: 10px 16px; gap: 10px; }
}

/* --- Áttekintés (admin/dashboard.php) — új elrendezés --- */
/*
 * A SORREND: számok → lista és állapot → figyelmeztető dobozok.
 * A figyelmeztetések (becslés, vállalt határnap, lejáró garancia) a
 * régi nézettel KÖZÖSEK, ezért a DOM-ban elöl állnak; itt az `order` teszi
 * őket hátra. A számok az első pillantásé — egy garancia-emlékeztető nem
 * előzheti meg a lejárt határidőt.
 */
[data-theme="paper"] .dash-lap { display: flex; flex-direction: column; }
[data-theme="paper"] .dash-lap > .papir-minden-rendben { order: 1; }
[data-theme="paper"] .dash-lap > .papir-kpi-racs { order: 2; }
[data-theme="paper"] .dash-lap > .papir-ket-oszlop { order: 3; }
[data-theme="paper"] .dash-lap > .dash-figyelmeztetes { order: 4; }

[data-theme="paper"] .papir-minden-rendben { margin: 0 0 14px; color: var(--success); font-weight: 500; }

[data-theme="paper"] .papir-kpi-racs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
[data-theme="paper"] .papir-kpi {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    transition: border-color .15s, transform .15s;
}
[data-theme="paper"] .papir-kpi:hover { text-decoration: none; border-color: #c9c1b1; transform: translateY(-1px); }
[data-theme="paper"] .papir-kpi-cimke { font-size: 13px; color: var(--text-dim); line-height: 1.3; }
[data-theme="paper"] .papir-kpi-szam {
    font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1;
    letter-spacing: -0.02em;
}
[data-theme="paper"] .papir-kpi-link { font-size: 13px; color: var(--accent); }
/*
 * IKONOS VARIÁNS — a Jegyek lista állapot-csempéi (2026-10-25, Attila
 * kérése: pontosan a makett szerint, TicketsTable.dc.html). A sima
 * `.papir-kpi` máshol (Áttekintés, Óraelszámolás, Riportok stb.) is
 * használt, ezért ott NEM nyúlunk hozzá — ez egy SZŰKEN a
 * `.papir-kpi-racs--ikonos` alá eső módosító, csak a Jegyek listán.
 *
 * A makett vízszintes elrendezést használ (ikon-doboz | szám+felirat), a
 * sima variáns pedig függőlegeset (felirat / szám / "megtekintés" link) —
 * ezért nem elég felülírni pár tulajdonságot, a teljes elrendezés más.
 * A "megtekintés →" sort a makettben nincs — itt szándékosan elmarad,
 * a teljes csempe továbbra is link, a kattinthatóság jelzése a hover.
 */
[data-theme="paper"] .papir-kpi-racs--ikonos .papir-kpi {
    flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px;
}
[data-theme="paper"] .papir-kpi-ikon {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 11px; font-size: 17px;
}
/*
 * SZÍN-MÓDOSÍTÓK, AHOL NINCS STÁTUSZSZÍN (statusOptions()) AMIT ÁT
 * LEHETNE VENNI — pl. az Ügyfelek lap KPI-sora nem jegy-státuszokról szól.
 * `color-mix()`-szel a meglévő téma-változókból (--accent/--warning/
 * --danger/--text-dim) származtatjuk a halvány háttér+erős ikonszínt,
 * ugyanaz a technika, mint az SLA-jelvényeknél (currentColor helyett itt
 * egy névvel elérhető változóból).
 */
[data-theme="paper"] .papir-kpi-ikon--accent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
[data-theme="paper"] .papir-kpi-ikon--success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
[data-theme="paper"] .papir-kpi-ikon--warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
[data-theme="paper"] .papir-kpi-ikon--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
[data-theme="paper"] .papir-kpi-ikon--neutral { background: var(--surface2); color: var(--text-dim); }
[data-theme="paper"] .papir-kpi-racs--ikonos .papir-kpi-szoveg { display: flex; flex-direction: column; gap: 2px; }
[data-theme="paper"] .papir-kpi-racs--ikonos .papir-kpi-szam {
    font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -0.01em;
}
[data-theme="paper"] .papir-kpi-racs--ikonos .papir-kpi-cimke {
    font-size: 11.5px; font-weight: 600; color: var(--text-dim); line-height: 1.2;
}
/*
 * A NULLA HALVÁNY, DE OTT VAN — ugyanaz a döntés, mint a régi nézetben: a
 * „nincs lejárt" is információ, és a kártyák nem ugrálnak naponta máshová.
 */
[data-theme="paper"] .papir-kpi--nulla { opacity: .55; }
[data-theme="paper"] .papir-kpi--nulla .papir-kpi-link { visibility: hidden; }
/*
 * A LEJÁRT HATÁRIDŐ SÖTÉT KÁRTYÁT KAP, ha nem nulla.
 * Ez az egyetlen szám, amivel már késésben vagyunk — a többi kártya közül
 * színben is ki kell válnia. A piros számot világosítjuk: a téma sötét
 * pirosa a fekete alapon alig olvasható (3 : 1 alatti kontraszt).
 */
/* A lejárt határidő halványpiros kártya — nem fekete doboz: kiemel, de nem gyászkeret. */
[data-theme="paper"] .papir-kpi--sulyos { background: #fbeceb; border-color: #efc7c4; color: var(--text); }
[data-theme="paper"] .papir-kpi--sulyos .papir-kpi-cimke { color: #8f2a25; }
[data-theme="paper"] .papir-kpi--sulyos .papir-kpi-szam { color: var(--danger) !important; }
[data-theme="paper"] .papir-kpi--sulyos .papir-kpi-link { color: #8f2a25; }

[data-theme="paper"] .papir-ket-oszlop {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 18px; align-items: start; margin-bottom: 18px;
}
@media (max-width: 1100px) {
    [data-theme="paper"] .papir-ket-oszlop { grid-template-columns: minmax(0, 1fr); }
}
[data-theme="paper"] .papir-doboz-fej {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--surface2);
}
[data-theme="paper"] .papir-doboz-fej--belso { padding: 0 0 4px; border-bottom: 0; }
[data-theme="paper"] .papir-doboz-fej h2 { margin: 0; font-size: 15px; font-weight: 600; }
[data-theme="paper"] .papir-doboz-al { font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--text-faint); margin-left: 6px; }
[data-theme="paper"] .papir-doboz-fej > a { font-size: 13.5px; white-space: nowrap; }
[data-theme="paper"] .papir-ures { margin: 0; padding: 18px 20px; color: var(--text-dim); }
[data-theme="paper"] .papir-allapot .papir-ures { padding: 8px 0; }

[data-theme="paper"] .papir-sor {
    display: grid; grid-template-columns: 30px 128px minmax(0, 1fr) auto 36px;
    align-items: center; gap: 14px;
    padding: 12px 20px; border-bottom: 1px solid var(--surface2); color: var(--text);
}
[data-theme="paper"] .papir-sor:last-of-type { border-bottom: 0; }
[data-theme="paper"] .papir-sor:hover { background: #17171c08; text-decoration: none; }
[data-theme="paper"] .papir-gyuru { display: block; }
[data-theme="paper"] .papir-sor-szam { font-size: 12.5px; color: var(--text-faint); }
[data-theme="paper"] .papir-sor-targy { display: flex; flex-direction: column; min-width: 0; }
[data-theme="paper"] .papir-sor-cim { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="paper"] .papir-sor-meta { font-size: 12.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="paper"] .papir-sor-ido {
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
[data-theme="paper"] .papir-sor-felelos {
    width: 32px; height: 32px; border-radius: 50%; background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 600; color: var(--text-dim);
}
[data-theme="paper"] .papir-sor-tobb { display: block; padding: 12px 20px; font-size: 13.5px; border-top: 1px solid var(--surface2); }
@media (max-width: 700px) {
    /* Keskeny kijelzőn a jegyszám és a felelős kimarad — a tárgy és az idő a lényeg. */
    [data-theme="paper"] .papir-sor { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 12px 14px; }
    [data-theme="paper"] .papir-sor-szam, [data-theme="paper"] .papir-sor-felelos { display: none; }
}

[data-theme="paper"] .papir-allapot { display: flex; flex-direction: column; gap: 18px; }
[data-theme="paper"] .papir-meres { display: flex; flex-direction: column; gap: 8px; }
[data-theme="paper"] .papir-meres-fej { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
[data-theme="paper"] .papir-meres-fej strong { color: var(--text); }
[data-theme="paper"] .papir-savos { display: flex; height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
[data-theme="paper"] .papir-savos > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
/* Tagolt sávban a darabok közt 2 pixeles rés — színtévesztőnek is elválnak. */
[data-theme="paper"] .papir-savos--tagolt { gap: 2px; background: transparent; }
[data-theme="paper"] .papir-savos--tagolt > span { border-radius: 0; }
[data-theme="paper"] .papir-jelmagyarazat { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-faint); }
[data-theme="paper"] .papir-csempek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-theme="paper"] .papir-csempe {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
    border-radius: 10px; background: var(--bg); color: var(--text-dim); font-size: 13px;
}
[data-theme="paper"] .papir-csempe:hover { text-decoration: none; background: var(--surface2); }
[data-theme="paper"] .papir-csempe strong { font-family: var(--font-display); font-size: 21px; color: var(--text); line-height: 1.1; }
[data-theme="paper"] .papir-tovabb { font-size: 13.5px; }
/* A gomb a sáv jobb szélén marad akkor is, ha a kereső nincs ott (jegylista). */
[data-theme="paper"] .papir-felso-sav .papir-uj-jegy { margin-left: auto; }
/* A bejelentkezett felhasználó kompakt jelvénye a felső sávon (2026-10-25,
   a makett szerint) — ha nincs "Új jegy" gomb az oldalon, ez marad az
   egyetlen jobbra igazodó elem, ezért saját margin-left:auto-t is kap. */
[data-theme="paper"] .papir-topbar-felhasznalo {
    display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none;
}
[data-theme="paper"] .papir-felso-sav .papir-uj-jegy + .papir-topbar-felhasznalo { margin-left: 0; }

/* A harang a bejelentkezett-felhasználó jelvény MELLETT ül, nem helyette —
   ha nincs "Új jegy" gomb az oldalon, a kettő EGYÜTT marad jobbra igazítva,
   ezért csak a harangra kerül margin-left:auto, a jelvényre nem (lásd fent,
   ahol a jelvény már explicit margin-left:0-t kap az "Új jegy" gomb után —
   ugyanez áll a harang UTÁN következő jelvényre is). */
[data-theme="paper"] .papir-harang-doboz { position: relative; display: inline-flex; margin-left: auto; flex: none; }
[data-theme="paper"] .papir-felso-sav .papir-uj-jegy + .papir-harang-doboz,
[data-theme="paper"] .papir-felso-sav .papir-harang-doboz + .papir-topbar-felhasznalo { margin-left: 0; }
[data-theme="paper"] .harang-kapcsolo { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
[data-theme="paper"] .papir-harang {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px; background: var(--surface2);
    font-size: 16px; line-height: 1; cursor: pointer;
}
[data-theme="paper"] .papir-harang:hover { filter: brightness(0.96); }
/*
 * EMOJI, NEM SVG (Attila jelezte, 2026-10-25 — „olyan színes legyen, mint
 * a terven" — a terv 🔔 emojit használ, a mi korábbi SVG-nk egyszínű
 * körvonal volt). Ez egyben a projekt álló szabályát is követi: SVG-ikon
 * CSAK a bal admin-menüben és a marketing főoldalon, mindenhol máshol
 * emoji — a harang a felső sávban van, nem a menüben.
 *
 * MIÉRT HÁTTÉR-SZÍNEZÉS, NEM `color` AZ AKTÍV ÁLLAPOTNÁL
 * Egy emoji a saját, beégetett színeivel jelenik meg — a CSS `color`
 * tulajdonság nem fest át egy 🔔-t (ellentétben egy SVG körvonallal, ahol
 * eddig ez működött). Ezért az „van olvasatlan" jelzést a kör HÁTTERÉN
 * adjuk, ugyanazzal a `color-mix` mintával, mint a `.papir-kpi-ikon--*`
 * ikon-dobozoknál.
 */
[data-theme="paper"] .papir-harang--aktiv { background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-theme="paper"] .papir-harang--aktiv:hover { filter: brightness(0.94); }
[data-theme="paper"] .harang-kapcsolo:focus-visible + .papir-harang { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="paper"] .papir-harang-jelzo {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--card-bg, #fff);
}
/*
 * LENYÍLÓ PANEL — ugyanaz a checkbox-minta, mint az "Új eszköz" űrlapnál
 * (lásd .eszkoz-urlap-kapcsolo), csak a nyitott állapot itt egy abszolút
 * pozícionált panelt mutat/rejt, nem egy lapon belüli kártyát.
 */
[data-theme="paper"] .papir-harang-panel {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    width: 320px; max-width: calc(100vw - 32px); max-height: 420px; overflow-y: auto;
    background: var(--card-bg, var(--surface)); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 12px 32px #00000026;
}
[data-theme="paper"] .harang-kapcsolo:checked ~ .papir-harang-panel { display: block; }
/* Teljes képernyős, láthatatlan bezáró-takaró — lásd a PHP-oldali megjegyzést. */
[data-theme="paper"] .papir-harang-atfedo {
    display: none; position: fixed; inset: 0; z-index: 55; background: transparent; cursor: default;
}
[data-theme="paper"] .harang-kapcsolo:checked ~ .papir-harang-atfedo { display: block; }
[data-theme="paper"] .papir-harang-ures { padding: 18px 16px; }
[data-theme="paper"] .papir-harang-sor {
    display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text);
}
[data-theme="paper"] .papir-harang-sor:last-of-type { border-bottom: none; }
[data-theme="paper"] .papir-harang-sor:hover { background: var(--surface2); text-decoration: none; }
[data-theme="paper"] .papir-harang-sor--olvasatlan { background: color-mix(in srgb, var(--accent) 7%, transparent); }
[data-theme="paper"] .papir-harang-sor-szoveg { font-size: 13.5px; line-height: 1.35; }
[data-theme="paper"] .papir-harang-sor--olvasatlan .papir-harang-sor-szoveg { font-weight: 700; }
[data-theme="paper"] .papir-harang-sor-ido { margin-top: 2px; }
[data-theme="paper"] .papir-harang-labloc {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-top: 1px solid var(--border);
}
[data-theme="paper"] .papir-harang-link {
    background: none; border: none; padding: 4px 6px; font-size: 12.5px; font-weight: 600;
    color: var(--accent); cursor: pointer; font-family: inherit;
}
[data-theme="paper"] .papir-harang-link:hover { text-decoration: underline; }
[data-theme="paper"] .papir-topbar-felhasznalo .name-badge { width: 30px; height: 30px; font-size: 12px; margin: 0; }
[data-theme="paper"] .papir-topbar-nev { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
    [data-theme="paper"] .papir-topbar-nev { display: none; }
}

/* --- Jegylista (admin/index.php) --- */
/*
 * UGYANAZ A TÁBLÁZAT, papírra hangolva.
 *
 * A jegylista sok, egymásra épülő funkciót hordoz (élő határidő-óra,
 * tömeges lezárás, új jegy jelzése, automatikus frissítés, mobil
 * kártyanézet) — a sorokat ezért NEM írjuk újra, csak a megjelenésüket.
 * Egyetlen új elem van: a státusz-fülek (`papir-csak`).
 */
[data-theme="paper"] .papir-fulek {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 16px 20px 4px;
}
/* Áttekintés fejléce: köszönés vagy cím, alatta a nap és a nyitott jegyek száma. */
[data-theme="paper"] .papir-attekintes-fej { margin: 0 0 14px; }
[data-theme="paper"] .papir-attekintes-cim { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
[data-theme="paper"] .papir-attekintes-al { margin-top: 3px; font-size: 13px; color: var(--text-dim); }

/* Az oldalsáv alján a bejelentkezett felhasználó: monogram-kör + név, szerep. */
[data-theme="paper"] .oldalsav-felhasznalo { display: flex; align-items: center; gap: 10px; }
[data-theme="paper"] .oldalsav-monogram { width: 32px; height: 32px; margin: 0; font-size: 12px; flex: none; }
[data-theme="paper"] .oldalsav-nev { display: flex; flex-direction: column; line-height: 1.3; font-weight: 500; min-width: 0; }
[data-theme="paper"] .oldalsav-nev .muted { font-weight: 400; font-size: 12px; }
/* A Jegyek melletti szám papíron kerek, a téma piros tónusával. */
[data-theme="paper"] #navTicketBadge { background: var(--danger) !important; font-weight: 600 !important; }

/* Lista / Tábla váltó a fülsor jobb szélén. */
[data-theme="paper"] .papir-nezetvalto {
    margin-left: auto; display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface2);
}
[data-theme="paper"] .papir-nezetvalto > * { padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--text-dim); }
[data-theme="paper"] .papir-nezetvalto > a:hover { background: var(--surface); text-decoration: none; color: var(--text); }
[data-theme="paper"] .papir-nezetvalto > .aktiv { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px #17171c14; }

/*
 * A határidő-gyűrű papíron az első oszlopban; a sor végén csak a szöveges
 * idő marad. Kártyanézetben (1100 pixel alatt) nincs „első oszlop" — ott a
 * sor végi gyűrű marad, az elöl lévő eltűnik.
 */
@media (min-width: 1101px) {
    [data-theme="paper"] td.c-sla svg { display: none; }
    [data-theme="paper"] td.c-sla-elol { width: 34px; padding-right: 0; }
}
@media (max-width: 1100px) {
    [data-theme="paper"] td.c-sla-elol { display: none !important; }
}
[data-theme="paper"] td.c-sla-elol .sla-mini svg circle:first-child { stroke: var(--surface2); }

/* Csoportfejléc a jegylistán: „Lejárt · 2", „Nyitott · 8". */
[data-theme="paper"] tr.papir-csoport-fej td {
    padding: 14px 16px 6px; background: var(--bg); border-bottom: 1px solid var(--border);
    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
[data-theme="paper"] tr.papir-csoport-fej.lejart td { color: var(--danger); }
[data-theme="paper"] tbody tr.papir-csoport-fej:hover { background: transparent; }
@media (max-width: 1100px) {
    [data-theme="paper"] .ticket-table tr.papir-csoport-fej { border: 0; background: transparent; padding: 8px 2px 0; margin: 0; }
    [data-theme="paper"] .ticket-table tr.papir-csoport-fej td { background: transparent; border: 0; padding: 0; }
}

/* A szűrősáv legördülői papíron kis, lekerekített „gombok" (a terv szerint). */
[data-theme="paper"] .filters .select-wrap.compact .select-trigger {
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
    padding: 7px 30px 7px 14px; font-size: 13px;
}
[data-theme="paper"] .filters .select-wrap.compact .select-trigger:hover { border-color: #c9c1b1; background-color: var(--surface2); }

/* A tárgy alatti cég · bejelentő · kategória sor, és a felelős-oszlop. */
[data-theme="paper"] .papir-lista-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-faint); overflow-wrap: anywhere; }
/* Asztali táblázatban keskeny, középre zárt oszlop; 1100 pixel alatt kártyanézet van, ott a saját szabálya dönt. */
@media (min-width: 1101px) {
    [data-theme="paper"] td.c-felelos { width: 1%; white-space: nowrap; text-align: center; }
}
[data-theme="paper"] td.c-felelos .name-badge { width: 28px; height: 28px; margin: 0; font-size: 11px; }
[data-theme="paper"] .papir-nincs-felelos { color: var(--text-faint); }
[data-theme="paper"] .papir-rel-ido { font-family: var(--font-body); font-size: 12.5px; white-space: nowrap; }

[data-theme="paper"] .papir-ful {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: 13.5px; font-weight: 500;
    transition: background-color .12s, border-color .12s;
}
[data-theme="paper"] .papir-ful:hover { text-decoration: none; border-color: #c9c1b1; background: var(--surface2); }
/* Az aktív fül kitöltött accent-kék, fehér felirattal (2026-10-25, az admin
   új színvilágához igazítva — lásd a Jegyek-makettet) — rámutatásra is az
   marad, nem vált vissza. Az [data-app="admin"] blokk nélkül ez a szabály
   mindenhol érvényes, ahol `.papir-ful` előfordul (ma csak az adminon). */
[data-theme="paper"] .papir-ful.aktiv,
[data-theme="paper"] .papir-ful.aktiv:hover { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
[data-theme="paper"] .papir-ful-szam {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--text-dim);
}
[data-theme="paper"] .papir-ful.aktiv .papir-ful-szam { background: rgba(255,255,255,.25); color: #fff; }

/*
 * A SOROK: a prioritás-színezett háttér helyett csak egy vékony sáv a bal
 * szélen, és az is csak a MAGAS és a SÜRGŐS jegyeknél. A négyféle
 * háttérszín a papíron tarka csíkozássá állt össze, amiben épp a sürgős
 * sor nem vált ki.
 */
[data-theme="paper"] tr.ticket-row.priority-low,
[data-theme="paper"] tr.ticket-row.priority-medium { background: transparent; border-left: 3px solid transparent; }
[data-theme="paper"] tr.ticket-row.priority-high { background: transparent; border-left: 3px solid var(--warning); }
[data-theme="paper"] tr.ticket-row.priority-urgent { background: #c23a340d; border-left: 3px solid var(--danger); }
[data-theme="paper"] tr.ticket-row:hover { background: #17171c0d; }
[data-theme="paper"] tr.ticket-row.is-new-ticket { background: #2a55c912; }
[data-theme="paper"] tr.ticket-row.is-new-ticket:hover { background: #2a55c91f; }
[data-theme="paper"] .ticket-table th { padding-top: 12px; padding-bottom: 12px; background: var(--bg); }
[data-theme="paper"] .ticket-table td { padding-top: 13px; padding-bottom: 13px; }
[data-theme="paper"] .ticket-link { font-weight: 500; }
/* A határidő-gyűrű alapköre: a beégetett sötét szürke a papíron fekete karikának látszott. */
[data-theme="paper"] .sla-mini svg circle:first-child { stroke: var(--surface2); }
/*
 * A SOR VÉGI SLA-SZÖVEG JELVÉNY, NEM CSAK SZÍNES SZÖVEG (2026-10-25) —
 * ugyanaz a nyelv, mint a prioritás/státusz jelvényeknél (`.pill`). A JS
 * (lásd lejjebb a <script>-ben) a szöveg SZÍNÉT állítja futás közben; a
 * jelvény háttere/kerete ebből, currentColor-ral származik — nem kell a
 * pontos hexát még egyszer, CSS-ben is ismerni.
 */
[data-theme="paper"] td.c-sla .sla-mini-text {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
/* Csoportfejlécek (elhalasztva, megoldva): egységes, jól látható sáv. */
[data-theme="paper"] #snoozedToggle,
[data-theme="paper"] #resolvedToggle {
    background: var(--bg) !important; color: var(--text) !important;
    font-size: 13.5px !important; font-weight: 600; padding: 13px 16px !important;
    border-top: 1px solid var(--border) !important;
}
[data-theme="paper"] #snoozedToggle:hover,
[data-theme="paper"] #resolvedToggle:hover { background: var(--surface2) !important; }
[data-theme="paper"] .ma-esedekes-fejlec { padding: 14px 16px 10px; margin: 0; }

/* --- Jegy részletei (admin/ticket.php) --- */
/*
 * UGYANAZ A LAP, papírra hangolva — a jegyoldal a rendszer legnagyobb
 * lapja (válaszjavaslat, fordítás, szerkesztés, csatolmány, időrögzítés),
 * ezért itt sem írunk újra markupot: két jelölő osztály került be
 * (`valasz-urlap`, `sla-gyuru-sav`), minden más a meglévő osztályokra épül.
 */
[data-theme="paper"] .grid-detail { gap: 20px; }
[data-theme="paper"] .grid-detail > .card:first-child > h2 {
    font-size: 21px; line-height: 1.2; letter-spacing: -0.015em;
}

/*
 * AZ ÜZENETEK: fehér lapok vékony kerettel, hogy a papír alapon
 * elváljanak. A munkatársi válasz halványkék, az ügyfélé fehér — így a
 * szálon végigfutva látszik, ki beszél, a monogram elolvasása nélkül.
 */
[data-theme="paper"] .message {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px 18px; margin-bottom: 12px;
}
[data-theme="paper"] .message.from-admin { background: #edf1fb; border-color: #d6e0f7; }
/*
 * A BELSŐ JEGYZET SZAGGATOTT KERETET KAP, nem csak más színt.
 * A szín egymagában kevés: a sárgás és a fehér árnyalat közti különbség
 * egy rosszul beállított kijelzőn vagy színtévesztőnek elveszhet — a
 * szaggatott keret viszont formában is jelzi, hogy ez NEM ment ki az
 * ügyfélnek.
 */
[data-theme="paper"] .message.internal-note {
    background: #fbf1e2; border: 1px dashed #c98f45; border-left-width: 1px;
}
[data-theme="paper"] .message-head { font-size: 13px; margin-bottom: 6px; }
[data-theme="paper"] .message-time { font-family: var(--font-mono); font-size: 11.5px; }
[data-theme="paper"] .msg-body { font-size: 13.5px; line-height: 1.6; }
[data-theme="paper"] .msg-esemeny { border-color: var(--border); border-style: dashed none; }

/* --- Válaszdoboz --- */
/*
 * EGY KERETES BLOKK az egész, vékony kerettel (fókuszban kék): ez a lap munkaterülete,
 * a szem ide tér vissza. Jegyzet módban a keret szaggatott és a háttér
 * sárgás — ugyanaz a nyelv, mint a szálban a belső jegyzeteknél, így küldés
 * ELŐTT is látszik, hogy amit írsz, az nem megy ki az ügyfélnek.
 */
/*
 * A VÁLASZDOBOZ — TERV SZERINT, EGY KERETBEN (2.334.18).
 *
 *   ┌─ Válasz az ügyfélnek │ Belső jegyzet ─────────────┐   fülek
 *   │ [Beszúrás ▼] [Válaszjavaslat] [Fordítás] [Csatolm.]│   eszköztár (sáv)
 *   │                                                    │
 *   │  szöveg (keret nélkül)                             │
 *   │  ✍ aláírás                                         │
 *   ├────────────────────────────────────────────────────┤
 *   │ Küldés után: [Ügyfélre vár ▾]   ⏱ perc   [Küldés]  │   lábsor
 *   └────────────────────────────────────────────────────┘
 *
 * MIÉRT NEM `overflow: hidden` A KERETEN
 * A Beszúrás panel lenyíló: a keret levágná. A lekerekítést ezért a belső
 * elemek nem kapják meg — a sáv nem ér a keret sarkáig, a lábsornak nincs háttere.
 *
 * JEGYZET MÓDBAN a keret szaggatott és borostyánszínű, a sáv és az aktív fül is
 * sárgás: küldés ELŐTT látszik, hogy amit írsz, az nem megy ki az ügyfélnek.
 * A színek változókból jönnek, hogy a sötét tónusnak csak a vonalszínt kelljen
 * felülírnia.
 */
[data-theme="paper"] form.valasz-urlap {
    --jegyzet-vonal: #c98f45;
    --valasz-sav: var(--surface2);
    /* NEM tintaszínű a keret: a papír témán a fekete kereteket kérésre kivettük
       (tools/teszt_papir_tema.php őrzi). A doboz a sávtól és a lábsor vonalától
       is felismerhető, fókuszban pedig kék gyűrű jelzi, hol írsz. */
    border: 1px solid var(--border); border-radius: 16px;
    padding: 0; background: var(--surface);
}
[data-theme="paper"] form.valasz-urlap:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
[data-theme="paper"] form.valasz-urlap.note-mode {
    --valasz-sav: color-mix(in srgb, var(--jegyzet-vonal) 18%, var(--surface));
    border-style: dashed; border-color: var(--jegyzet-vonal);
    background: color-mix(in srgb, var(--jegyzet-vonal) 8%, var(--surface));
}

/* Fülek: a kiválasztott a sáv színét viseli, így egybeolvad vele. A rádiógomb
   a fül teljes felületét kitölti (átlátszóan): billentyűzettel és
   képernyőolvasóval ugyanúgy használható, mint eddig. */
[data-theme="paper"] .valasz-fejsor { display: block; margin: 0; }
[data-theme="paper"] .valasz-fejsor > .reply-mode {
    display: flex; align-items: flex-end; gap: 4px; margin: 0; padding: 10px 14px 0;
}
[data-theme="paper"] .reply-mode-opt {
    position: relative; border: 0; background: transparent;
    border-radius: 10px 10px 0 0; padding: 9px 16px;
    font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
[data-theme="paper"] .reply-mode-opt input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
[data-theme="paper"] .reply-mode-opt:has(input:checked),
[data-theme="paper"] .reply-mode-opt.note:has(input:checked) {
    background: var(--valasz-sav); border: 0; color: var(--text);
}
[data-theme="paper"] .reply-mode-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-theme="paper"] .valasz-fejsor .reply-mode-help { align-self: center; padding-bottom: 6px; }

/* Eszközsáv */
[data-theme="paper"] .valasz-eszkoztar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 14px; background: var(--valasz-sav);
}
[data-theme="paper"] .valasz-eszkoztar .valasz-eszkozok { margin-left: 0; gap: 8px; }
[data-theme="paper"] .valasz-eszkoztar .btn,
[data-theme="paper"] .valasz-eszkoztar .file-trigger {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px;
    padding: 7px 13px !important; font-size: 13px !important; font-weight: 500; line-height: 1.2;
}
[data-theme="paper"] .valasz-eszkoztar .btn:hover,
[data-theme="paper"] .valasz-eszkoztar .file-trigger:hover { border-color: var(--accent); background: var(--surface); }
[data-theme="paper"] .valasz-eszkoztar #javaslatGomb {
    color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
[data-theme="paper"] .valasz-csatolmany { flex-direction: row; align-items: center; gap: 0; }
[data-theme="paper"] .valasz-csatolmany .file-wrap { gap: 8px; }
[data-theme="paper"] .valasz-csatolmany .file-trigger::before { content: "📎 "; }
[data-theme="paper"] .valasz-csatolmany .file-label { max-width: 300px; font-size: 12.5px; }
/* Üres állapotban a „nincs fájl" felirat zaj: a gomb elég. A húzás-súgó
   asztali nézeten marad, telefonon nincs értelme. */
[data-theme="paper"] .file-wrap-ures .file-label { display: none; }
[data-theme="paper"] .file-wrap:not(.file-wrap-ures) .file-drop-sugo { display: none; }
@media (max-width: 899px) { [data-theme="paper"] .valasz-csatolmany .file-drop-sugo { display: none; } }
[data-theme="paper"] .valasz-csatolmany label[for="attachments"],
[data-theme="paper"] form.valasz-urlap label#bodyLabel {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Szövegmező: keret nélkül, a doboz maga a keret */
[data-theme="paper"] form.valasz-urlap textarea#body {
    display: block; width: 100%; box-sizing: border-box;
    height: 190px; min-height: 150px; margin: 0; padding: 16px 18px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    font-size: 15px; line-height: 1.55; resize: vertical;
}
[data-theme="paper"] form.valasz-urlap textarea#body:focus { outline: none; box-shadow: none; }
[data-theme="paper"] form.valasz-urlap #javaslatDoboz { margin: 0 14px 12px !important; }
[data-theme="paper"] form.valasz-urlap.note-mode .valasz-eszkozok,
[data-theme="paper"] form.valasz-urlap.note-mode #javaslatDoboz { display: none !important; }

/* Aláírás-sor: halk, a szöveg alatt */
[data-theme="paper"] .valasz-alairas-sor { margin: 0; padding: 0 18px 12px; }

/* Lábsor */
[data-theme="paper"] .valasz-labsor {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px 20px; margin: 0; padding: 12px 14px;
    border-top: 1px solid var(--border);
}
[data-theme="paper"] .valasz-kuldes-utan { display: flex; align-items: center; gap: 8px; }
[data-theme="paper"] .valasz-kuldes-utan label {
    margin: 0; font-family: inherit; font-size: 13px; font-weight: 500;
    letter-spacing: 0; text-transform: none; color: var(--text-dim); white-space: nowrap;
}
[data-theme="paper"] .valasz-kuldes-utan-select {
    width: auto; margin: 0; padding: 7px 30px 7px 11px;
    border-radius: 9px; font-size: 13px;
}
/*
 * A „KÜLDÉS UTÁN" LENYÍLÓJA (a select-enhance.js saját panelt rajzol a select helyett).
 *
 * MI VOLT A BAJ (Attila képernyőképe)
 * (1) A `.select-wrap` 16 px alsó margót hoz az űrlapokról — a panel a burkoló
 *     aljához igazodik, ezért a mező alatt ~40 px-cel lejjebb nyílt, mintha
 *     elcsúszott volna. (2) A panel a mező szélességére szorult (max-width: 100%),
 *     az opciók pedig `overflow-wrap: anywhere`-rel törtek, így „Folyamatba/n marad"
 *     és „Felfüggeszt/ve" lett belőlük — szó közepén.
 * Itt a burkolónak nincs margója, a panel a legszélesebb opció szélességét kapja
 * (de nem tör szót), és a képernyő szélén a szkript úgyis visszaigazítja.
 */
[data-theme="paper"] .valasz-kuldes-utan .select-wrap { margin: 0; }
[data-theme="paper"] .valasz-kuldes-utan .select-trigger {
    width: auto; min-width: 150px; padding: 7px 32px 7px 11px;
    border-radius: 9px; font-size: 13px; background-color: var(--surface);
}
[data-theme="paper"] .valasz-kuldes-utan .select-panel {
    width: max-content; min-width: 100%; max-width: min(340px, calc(100vw - 24px));
}
[data-theme="paper"] .valasz-kuldes-utan .select-option { white-space: nowrap; overflow-wrap: normal; }
[data-theme="paper"] .valasz-jegyzet-jelzes { font-size: 13px; color: var(--text-dim); }
[data-theme="paper"] form.valasz-urlap:not(.note-mode) .valasz-jegyzet-jelzes { display: none; }
[data-theme="paper"] form.valasz-urlap.note-mode .valasz-kuldes-utan { display: none !important; }
/* A ráfordított idő KERETE marad (számlázási adat), csak a lábsorhoz igazodik. */
[data-theme="paper"] .valasz-labsor .worktime-row {
    margin: 0; padding: 4px 10px; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
}
[data-theme="paper"] .valasz-labsor .worktime-input input[type=number] { padding-top: 5px; padding-bottom: 5px; }
[data-theme="paper"] .valasz-labsor .worktime-hint { margin-left: 0; }
[data-theme="paper"] .valasz-labsor > .valasz-kuldes-gomb {
    flex-basis: auto; margin: 0 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end;
}
[data-theme="paper"] .valasz-kuldes-gomb > .small { margin-top: 4px !important; text-align: right; }
/* Az osztott gomb helyett a látható „Küldés után" választó dolgozik: a nyíl, a
   menü és a gombon a státusz-felirat itt nem kell. */
[data-theme="paper"] form.valasz-urlap .splitbtn > .btn-arrow,
[data-theme="paper"] form.valasz-urlap .splitbtn-menu,
[data-theme="paper"] form.valasz-urlap #replySubmitStatus { display: none !important; }
[data-theme="paper"] form.valasz-urlap .splitbtn > .btn {
    border-radius: 10px; padding: 11px 22px !important; font-size: 14px !important;
}
@media (max-width: 560px) {
    [data-theme="paper"] .reply-mode-opt { padding: 9px 12px; font-size: 13px; }
    [data-theme="paper"] .valasz-labsor { flex-direction: column; align-items: stretch; gap: 12px; }
    [data-theme="paper"] .valasz-kuldes-utan { width: 100%; }
    [data-theme="paper"] .valasz-kuldes-utan-select,
    [data-theme="paper"] .valasz-kuldes-utan .select-wrap { flex: 1; }
    [data-theme="paper"] .valasz-kuldes-utan .select-trigger { width: 100%; }
    [data-theme="paper"] .valasz-labsor > .valasz-kuldes-gomb { margin: 0; align-items: stretch; }
    [data-theme="paper"] .valasz-kuldes-gomb .splitbtn { display: flex; width: 100%; }
    [data-theme="paper"] form.valasz-urlap .splitbtn > .btn { flex: 1; justify-content: center; }
    [data-theme="paper"] .valasz-labsor .worktime-row { justify-content: space-between; }
}

/* --- Jobb hasáb --- */
[data-theme="paper"] .detail-side { gap: 18px; }
/* A határidő-gyűrű alapköre: a beégetett sötét szürke a papíron fekete karikának látszott. */
[data-theme="paper"] .sla-gyuru-sav { stroke: var(--surface2); }
/*
 * A jegyzet szerzőjének neve és a „Belső jegyzet" címke a téma
 * figyelmeztető narancsát kapja soron belül — a sárgás alapon ez 4,5 : 1
 * alatt maradt. Egy árnyalattal sötétebb barna olvasható, és ugyanazt jelzi.
 */
[data-theme="paper"] .message.internal-note .message-author,
[data-theme="paper"] .message.internal-note .pill { color: #7f4407 !important; }

/* --- Jegy részletei: fejléc, avatárok, adatlap (a terv „Admin-Jegy" lapja) --- */
[data-theme="paper"] .pt-fej {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap;
    margin: 2px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
[data-theme="paper"] .pt-fej-bal { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-theme="paper"] .pt-morzsa { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); }
[data-theme="paper"] .pt-morzsa a { color: var(--text-faint); }
[data-theme="paper"] .pt-morzsa a:hover { color: var(--accent); }
[data-theme="paper"] .pt-cim { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
[data-theme="paper"] .pt-meta { font-size: 13px; color: var(--text-dim); }
[data-theme="paper"] .pt-muveletek { display: flex; gap: 8px; flex-wrap: wrap; }

/*
 * A szál papíron nem kártyában áll: a buborékok maguk a fehér felületek,
 * mint a terven. (A portál jegyoldala kivétel — ott az első kártya lehet a
 * kategória-mezőké, ezért a portált kizárjuk.)
 */
[data-theme="paper"] body:not(.portal-jegy) .grid-detail > .card:first-child {
    background: transparent; border: 0; box-shadow: none; padding: 0;
}
/*
 * A monogram-kör a buborék MELLÉ kerül (a terv szerint), nem a fejsorba:
 * végigfutva a szálon a bal oldali oszlop mutatja, ki beszél. Ugyanaz a
 * `name-badge` elem, ugyanazzal a személyes színnel — csak a helye más.
 * Keskeny kijelzőn marad a fejsorban, ott nincs hely egy külön oszlopnak.
 */
@media (min-width: 601px) {
    [data-theme="paper"] body:not(.portal-jegy) .grid-detail .message { position: relative; margin-left: 46px; }
    [data-theme="paper"] body:not(.portal-jegy) .grid-detail .message .message-head .name-badge {
        position: absolute; left: -46px; top: 0; width: 34px; height: 34px; margin: 0; font-size: 12px;
    }
    [data-theme="paper"] body:not(.portal-jegy) .grid-detail .msg-esemeny { margin-left: 46px; }
}

/* Gyors időrögzítés a jobb hasábban: [perc] [Rögzítés] egy sorban. */
[data-theme="paper"] .papir-gyors-ido { display: flex; gap: 8px; margin: 12px 0 0; }
[data-theme="paper"] .papir-gyors-ido-mezo {
    flex: 1; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
[data-theme="paper"] .papir-gyors-ido-mezo:focus-within { border-color: #9fb4ea; }
[data-theme="paper"] .papir-gyors-ido-mezo input {
    width: 100%; min-width: 0; border: 0; padding: 0; margin: 0; background: transparent; outline: none; height: 36px;
}
[data-theme="paper"] .papir-gyors-ido-mezo span { color: var(--text-faint); font-size: 13px; }
[data-theme="paper"] .papir-gyors-ido .btn { height: 38px; }

/* A határidő halványkék panelben, a jobb hasáb tetején — nem fekete, mint a terven. */
[data-theme="paper"] .papir-hatarido { padding: 12px 14px; border-radius: 12px; background: #eef2fc; border: 1px solid #d6e0f7; }
[data-theme="paper"] .papir-hatarido svg { width: 52px; height: 52px; }
[data-theme="paper"] .papir-hatarido .sla-gyuru-sav { stroke: #d6e0f7; }

/* Adatlap: címke balra, mező jobbra, egy sorban. */
[data-theme="paper"] form.papir-adatok {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-items: center;
}
[data-theme="paper"] form.papir-adatok > * { grid-column: 2; }
[data-theme="paper"] form.papir-adatok > label {
    grid-column: 1; margin: 0; font-family: var(--font-body); text-transform: none; letter-spacing: 0;
    font-size: 12.5px; color: var(--text-faint); line-height: 1.3;
}
[data-theme="paper"] form.papir-adatok > input,
[data-theme="paper"] form.papir-adatok > select,
[data-theme="paper"] form.papir-adatok > .select-wrap { margin-bottom: 0; }
[data-theme="paper"] form.papir-adatok > div.small { margin: -2px 0 2px !important; }
[data-theme="paper"] form.papir-adatok > button { grid-column: 1 / -1; margin-top: 6px; }

/* --- Ügyfélportál --- */
/*
 * A PORTÁL UGYANAZOKAT AZ OSZTÁLYOKAT HASZNÁLJA, mint az ügyintézői
 * felület (üzenetek, gombok, mezők, jegylista-sor, határidő-gyűrű) — a
 * papír téma ezért nagyrészt már eddig is rajta volt. Ami itt jön, az a
 * portál saját elemei: a fejléc, a tudásbázis-javaslat és a jegylista
 * kártyanézete.
 */
/*
 * A fejléc fehér SÁV a lap teljes szélességében (a terv szerint), miközben a
 * tartalma a .wrap szélességén marad, alján egy vonallal.
 *
 * EGYETLEN border-image RAJZOLJA: a kép (fehér, alján 1 pixel vonal) `fill`
 * kulcsszóval a teljes területet kitölti, a kifutás (outset) pedig oldalra
 * a képernyő széléig nyújtja. A kifutás csak rajzolt terület, a lap
 * szélességéhez nem ad — nincs vízszintes görgetés (a 100vw ezt okozná).
 *
 * MI VOLT A BAJ (2026-09-24): korábban árnyékkal + `clip-path`-szal
 * rajzoltuk. A clip-path viszont a fejléc ALÁ nyúló részt is levágta, így a
 * témaválasztó lenyíló listája láthatatlan maradt — kinyílt, de nem látszott.
 * Ide semmi olyan nem kerülhet, ami a gyerekeit vágja (clip-path, overflow).
 */
[data-theme="paper"] .wrap > .topbar {
    margin-top: -24px; padding: 14px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-image: linear-gradient(to bottom, var(--surface) calc(100% - 1px), var(--border) calc(100% - 1px)) 0 fill / 0 / 0 100vmax;
    position: relative; z-index: 20;
}
/* A fejléc másodlagos gombjai menüpontként: keret nélkül, rámutatásra a HÁTTÉR vált. */
[data-theme="paper"] .wrap > .topbar .btn.secondary {
    background: transparent; border-color: transparent; color: var(--text-dim); font-weight: 500;
}
[data-theme="paper"] .wrap > .topbar .btn.secondary:hover {
    background: var(--bg); border-color: transparent; color: var(--text);
}
[data-theme="paper"] .brand-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
[data-theme="paper"] .brand-badge { background: #e3eafb; color: #1c3f9e; }

/*
 * TUDÁSBÁZIS-JAVASLAT az új bejelentésnél — sötét panel.
 *
 * Ez a portál legértékesebb pillanata: ha az ügyfél itt megtalálja a
 * megoldást, a jegy meg sem születik. A halványkék doboz a papíron
 * beleolvadt az űrlapba; a sötét tinta-panel kiemelkedik belőle, de nem
 * riaszt (nem piros, nem sárga).
 *
 * A doboz és a linkek stílusa soron belül érkezik (a szkript építi), ezért
 * kell az `!important`.
 */
[data-theme="paper"] #kbSuggest {
    background: #eef2fc !important; border: 1px solid #d6e0f7 !important;
    border-radius: 14px !important; padding: 14px 18px !important;
    color: var(--text);
}
[data-theme="paper"] #kbSuggest .small { color: #1c3f9e !important; font-weight: 600; font-size: 13px; }
[data-theme="paper"] #kbSuggestList a {
    color: var(--text) !important; text-decoration: none !important;
    padding: 8px 12px !important; margin-top: 6px; border-radius: 10px;
    background: var(--surface); border: 1px solid #d6e0f7;
}
[data-theme="paper"] #kbSuggestList a:hover { background: #e3eafb; }

/* --- Portál kezdőlap (a terv „Portal-Kezdolap" elrendezése) --- */
[data-theme="paper"] .pk-hero { padding: 28px 0 26px; display: flex; flex-direction: column; gap: 14px; }
[data-theme="paper"] .pk-cim {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(21px, 2.2vw, 24px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 600;
}
[data-theme="paper"] .pk-kereso { display: flex; gap: 10px; max-width: 760px; margin: 0; }
/*
 * A keresősáv a terv szerint vékony (2 pixeles) tinta-keretes, bal oldalán
 * nagyító-ikonnal. A keretet a burkoló rajzolja, a mező benne keret nélküli —
 * így a fókusz-gyűrű az egész sávot követi, nem csak a beviteli részt.
 */
[data-theme="paper"] .pk-mezo {
    flex: 1; min-width: 0; height: 48px; padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
    border: 2px solid var(--text); border-radius: 14px; background: var(--surface); color: var(--text-dim);
}
[data-theme="paper"] .pk-mezo:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: 2px; }
[data-theme="paper"] .pk-ikon { flex: none; }
[data-theme="paper"] .pk-kereso .pk-mezo input[type=text] {
    flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 14px;
}
[data-theme="paper"] .pk-kereso .btn { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 13.5px; white-space: nowrap; }
[data-theme="paper"] .pk-email { margin: 0; font-size: 13.5px; color: var(--text-dim); overflow-wrap: anywhere; }
[data-theme="paper"] .pk-email strong, [data-theme="paper"] .pk-email a { color: var(--text); font-weight: 600; }

/*
 * BENTO-RÁCS (Attila csatolt terve, 2026-10-25): a kezdőlap nyugalmi
 * állapotban nagy, kerekített, árnyékolt "bento" kártyákból áll — a hero, a
 * havi-statisztika sötét csempe, a nyitott/lezárt jegyek és a tudásbázis
 * témák mind saját dobozban. A `.pk-kartya` (egy-egy jegy sora) ettől
 * független, kisebb elem — a bento-dobozok BELSEJÉBEN sorakoznak.
 */
[data-theme="paper"] .pk-top {
    display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px;
}
[data-theme="paper"] .pk-sub {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px;
}
[data-theme="paper"] .pk-hero, [data-theme="paper"] .pk-jegyek, [data-theme="paper"] .pk-temak {
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
    padding: 26px 28px; box-shadow: 0 10px 28px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
}
[data-theme="paper"] .pk-hero:hover, [data-theme="paper"] .pk-jegyek:hover, [data-theme="paper"] .pk-temak:hover {
    transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.07);
}
[data-theme="paper"] .pk-hero { padding-bottom: 26px; }
[data-theme="paper"] .pk-jegyek { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
[data-theme="paper"] .pk-alcim-sor { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
[data-theme="paper"] .pk-alcim { margin: 0; font-family: var(--font-body); font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
[data-theme="paper"] .pk-alcim .pk-db { color: var(--text-faint); font-weight: 500; }
[data-theme="paper"] .pk-alcim .pk-db::before { content: "· "; }
[data-theme="paper"] .pk-db {
    font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--text-dim);
    background: var(--bg); border-radius: 999px; padding: 3px 11px;
}
/* A terv üres-állapota: zöld pecsét-ikon + kiemelt doboz, nem csak szöveg. */
[data-theme="paper"] .pk-ures-doboz {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 26px 20px; border-radius: 18px; background: var(--surface2); text-align: center;
}
/* A terv pontos zöldje (nem a megosztott --success változó, ami máshol
   sötétebb/eltérő árnyalatú lehet). */
[data-theme="paper"] .pk-ures-pecsek {
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #dcfce7; color: #166534; font-weight: 800; font-size: 16px;
}
[data-theme="paper"] .pk-ures-doboz .pk-ures { margin: 0; padding: 0; border: 0; font-size: 13px; font-weight: 600; color: var(--text-dim); }

/* A havi-statisztika sötét csempe — a terv "dark-tile"-ja. */
[data-theme="paper"] .pk-stat {
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    background: var(--ink); color: #fff; border-radius: 22px; padding: 26px 28px;
    text-decoration: none; box-shadow: 0 10px 28px rgba(0,0,0,.1);
    transition: transform .15s, box-shadow .15s;
}
[data-theme="paper"] .pk-stat:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.16); text-decoration: none; }
[data-theme="paper"] .pk-stat-cim { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #60a5fa; text-transform: uppercase; letter-spacing: .04em; }
/* A terv eyebrow-jelvénye a főcím fölött — élénk kék, a hero fehér kártyáján. */
[data-theme="paper"] .pk-jelzo {
    display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 700;
    color: #1e40af; background: #dbeafe; border-radius: 999px; padding: 5px 13px; margin-bottom: 2px;
}
/* A hero keresőgombja a tervben élénk kék CTA — ezen a lapon a portál
   általános sötét-tinta gombjától eltérően, mert itt ez a fő cselekvés. */
/* A lezárt mini-kártyák jelvénye itt zöld (a terv "Megoldva" címkéje) — csak
   ezen a lapon, a megosztott .pk-allapot--fel osztály (jegylistákon szürke)
   többi használatát nem érinti. */
[data-theme="paper"] .pk-kartya--tomor .pk-allapot--fel { background: #dcfce7; color: #15803d; font-weight: 600; }
[data-theme="paper"] .pk-stat-szam { display: block; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; margin-top: 8px; }
[data-theme="paper"] .pk-stat-alsoszoveg { display: block; font-size: 13px; color: rgba(255,255,255,.65); margin-top: 4px; }
[data-theme="paper"] .pk-stat-link {
    align-self: flex-start; font-size: 13px; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px;
}

[data-theme="paper"] .pk-temak-racs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
[data-theme="paper"] .pk-tema-kartya {
    display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 16px;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text); font-weight: 600; font-size: 13.5px; text-decoration: none;
}
[data-theme="paper"] .pk-tema-ikon { flex: none; font-size: 18px; line-height: 1; }
[data-theme="paper"] .pk-tema-cim-szoveg { min-width: 0; }
[data-theme="paper"] .pk-tema-kartya:hover { border-color: #bfdbfe; background: #eff6ff; text-decoration: none; }
/* Papíron a kártyás kezdőlapon a teljes lista rejtve: az „Összes jegyem" külön nézet. */
[data-theme="paper"] .pk-lista-rejtve { display: none; }
[data-theme="paper"] .pk-lista-fej {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; font-size: 14px;
}
[data-theme="paper"] .pk-ures { margin: 0; padding: 22px 24px; border-radius: 16px; border: 1px dashed var(--border); color: var(--text-dim); }

[data-theme="paper"] .pk-kartya {
    display: flex; flex-direction: column; gap: 12px; padding: 18px 20px;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
    color: var(--text); text-decoration: none;
}
[data-theme="paper"] a.pk-kartya:hover { border-color: #c9c1b1; text-decoration: none; color: var(--text); }
/* A „válaszodra várunk" jegy keretben is kiemelkedik: ez az egyetlen, amin az ügyfélnek dolga van. */
[data-theme="paper"] .pk-kartya--rad-var { border: 1.5px solid var(--accent); }
[data-theme="paper"] .pk-kartya-fej { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
[data-theme="paper"] .pk-szam { font-size: 12px; color: var(--text-faint); }
[data-theme="paper"] .pk-allapot { font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
[data-theme="paper"] .pk-allapot--uj { background: var(--surface2); color: var(--text-dim); }
[data-theme="paper"] .pk-allapot--dolgozunk { background: #f6e7d2; color: #7a430a; }
[data-theme="paper"] .pk-allapot--fel { background: var(--surface2); color: var(--text-dim); }
[data-theme="paper"] .pk-allapot--rad-var { background: var(--accent); color: #fff; font-weight: 600; }
[data-theme="paper"] .pk-targy {
    font-family: var(--font-body); font-weight: 600; font-size: 15.5px; line-height: 1.3;
    overflow-wrap: anywhere;
}
[data-theme="paper"] .pk-lepesek {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    font-size: 12px; color: var(--text-faint);
}
[data-theme="paper"] .pk-lepesek li { display: flex; flex-direction: column; gap: 6px; }
[data-theme="paper"] .pk-lepesek li::before { content: ""; height: 4px; border-radius: 2px; background: var(--border); }
[data-theme="paper"] .pk-lepesek li.kesz::before { background: var(--accent); }
[data-theme="paper"] .pk-lepesek li.most { color: var(--text); font-weight: 600; }
[data-theme="paper"] .pk-utolso {
    padding: 12px 14px; border-radius: 10px; background: var(--bg);
    font-size: 13px; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere;
}
[data-theme="paper"] .pk-utolso strong { color: var(--text); font-weight: 600; }
/* A lezárt mini-kártyák tudatosan tömörebbek a nyitottaknál: nincs bennük
   lépés-létra és utolsó üzenet (Attila kérése csak a „utolsó 3, nyitható”
   volt, nem a teljes nyitott-kártya részletesség), ezért kevesebb a belső
   térköz és a padding is. */
[data-theme="paper"] .pk-kartya--tomor { gap: 6px; padding: 14px 20px; }
[data-theme="paper"] .pk-tovabb { font-size: 13px; }

@media (max-width: 720px) {
    /* Itt a .wrap felső margója 16 pixel: a sáv ennyivel lép feljebb, se több, se kevesebb. */
    [data-theme="paper"] .wrap > .topbar { margin-top: -16px; padding: 12px 0; }
}
@media (max-width: 900px) {
    [data-theme="paper"] .pk-top, [data-theme="paper"] .pk-sub { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    [data-theme="paper"] .pk-temak-racs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    [data-theme="paper"] .pk-hero { padding: 20px 0 20px; }
    [data-theme="paper"] .pk-kereso { flex-direction: column; }
    /* Oszlopban a flex: 1 a MAGASSÁGRA hatna, és a mező összeroppanna — itt a természetes méret kell. */
    [data-theme="paper"] .pk-kereso .pk-mezo { flex: none; }
    [data-theme="paper"] .pk-kereso .btn { flex: none; justify-content: center; }
    [data-theme="paper"] .pk-kartya { padding: 18px; }
    [data-theme="paper"] .pk-targy { font-size: 15px; }
}

/* --- Portál: új bejelentés (a terv „Portal-UjJegy" elrendezése) --- */
/* A lap szélessége soron belül 640 pixel (a régi témáknak) — azt csak így lehet felülírni. */
[data-theme="paper"] .wrap.pu-lap { max-width: 1180px !important; }
[data-theme="paper"] .pu-cim {
    margin: 28px 0 22px; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(21px, 2.2vw, 24px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600;
}
/* Papíron nincs kártya az űrlap körül: a mezők maguk a fehér felületek. */
[data-theme="paper"] .pu-kartya { background: transparent; border: 0; box-shadow: none; padding: 0; }
[data-theme="paper"] .pu-urlap { max-width: 720px; }
/*
 * A címkék a terv szerint kövér, normál betűs kérdések („Mi a probléma?"), nem
 * nagybetűs, monospace mezőcímek; a csillag elmarad (a „nem kötelező" felirat
 * jelöli, ami nem az).
 */
[data-theme="paper"] .pu-urlap label:not(.pu-prio-kartya) {
    font-family: var(--font-body); text-transform: none; letter-spacing: 0;
    font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
[data-theme="paper"] .pu-urlap label .muted { font-weight: 400; color: var(--text-dim); }
[data-theme="paper"] .pu-urlap .req { display: none; }
/* A tárgy a keresősávhoz hasonlóan vékony (2 pixeles) tinta-keretes; a többi mező világos. */
[data-theme="paper"] .pu-urlap #subject { height: 48px; font-size: 14.5px; border-radius: 14px; border: 2px solid var(--text); }
[data-theme="paper"] .pu-urlap #description { min-height: 150px; border-radius: 14px; font-size: 14px; }
[data-theme="paper"] .pu-urlap .hang-bevitel, [data-theme="paper"] .pu-urlap .askback { margin: -6px 0 18px; }

/* Témakör + Mikorra kell? egy sorban. */
[data-theme="paper"] .pu-ketto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; margin: 0 0 6px; }
[data-theme="paper"] .pu-oszlop { min-width: 0; }
[data-theme="paper"] .pu-urlap select, [data-theme="paper"] .pu-urlap input[type=date] { height: 48px; border-radius: 12px; font-size: 14px; }
[data-theme="paper"] .pu-urlap .select-trigger { box-sizing: border-box; height: 48px; border-radius: 12px; font-size: 14px; display: flex; align-items: center; padding: 0 36px 0 14px; }
[data-theme="paper"] .pu-oszlop details.kesobbi { margin-bottom: 8px; }
[data-theme="paper"] .pu-oszlop .small.muted { font-size: 12.5px; }
@media (max-width: 600px) {
    [data-theme="paper"] .pu-ketto { grid-template-columns: minmax(0, 1fr); }
}

/* A tudásbázis-panel papíron mindig látszik (üresen egy magyarázó mondattal). */
[data-theme="paper"] #kbSuggest { display: block !important; margin: 0 0 18px !important; padding: 22px 24px !important; border-radius: 18px !important; }
[data-theme="paper"] #kbSuggest .pu-kb-cim { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; color: var(--text); }
[data-theme="paper"] #kbSuggest .pu-kb-ures,
[data-theme="paper"] #kbSuggest .pu-kb-utana { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
[data-theme="paper"] #kbSuggest:not(.van-talalat) > .small,
[data-theme="paper"] #kbSuggest:not(.van-talalat) #kbSuggestList,
[data-theme="paper"] #kbSuggest:not(.van-talalat) .pu-kb-utana,
[data-theme="paper"] #kbSuggest.van-talalat .pu-kb-ures,
[data-theme="paper"] #kbSuggest > .small { display: none; }
[data-theme="paper"] #kbSuggest .pu-kb-cim { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
[data-theme="paper"] #kbSuggest .pu-kb-cim svg { flex: none; color: var(--accent); }
[data-theme="paper"] #kbSuggestList a.kb-javaslat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px !important; font-size: 13.5px !important;
}
[data-theme="paper"] .kb-javaslat .kb-cim { font-weight: 600; font-size: 14px; color: var(--text); }
[data-theme="paper"] .kb-javaslat .kb-meta { font-size: 12.5px; color: var(--text-faint); }

@media (min-width: 900px) {
    /*
     * Két hasáb: az űrlap minden eleme az első oszlopba kerül, egymás alá,
     * a javaslat-panel a másodikba, végig ragadva. A panel sok sort fog át,
     * de alacsonyabb az űrlapnál, így a sorok magasságát nem húzza szét.
     */
    [data-theme="paper"] .pu-urlap.van-kb {
        max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 40px; align-items: start;
    }
    [data-theme="paper"] .pu-urlap.van-kb > * { grid-column: 1; }
    [data-theme="paper"] .pu-urlap.van-kb > #kbSuggest {
        grid-column: 2; grid-row: 1 / span 60; align-self: start;
        position: sticky; top: 20px;
    }
}
@media (max-width: 899px) {
    /* Keskeny kijelzőn a panel a tárgy alatt áll — ott csak akkor, ha van mit mutatnia. */
    [data-theme="paper"] #kbSuggest:not(.van-talalat) { display: none !important; }
}

/* A küldés gomb a terv szerint természetes szélességű (soron belül 100% — azért kell az !important). */
[data-theme="paper"] .pu-kuldes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
[data-theme="paper"] .pu-kuldes > button[type=submit] { width: auto !important; height: 48px; padding: 0 24px; font-size: 13.5px; border-radius: 12px; }
[data-theme="paper"] .pu-kuldes-seg { font-size: 13px; color: var(--text-dim); }
@media (max-width: 600px) {
    [data-theme="paper"] .pu-kuldes > button[type=submit] { width: 100% !important; }
}

/*
 * A CSATOLMÁNY-MEZŐ SZAGGATOTT FELTÖLTŐ SÁV (a terv szerint): ikon + „Húzd ide
 * a képernyőképet vagy fájlt, vagy tallózz". A file-enhance.js sorrendje
 * (gomb, fájlnév, törlés, súgó) itt az `order`-rel áll át: a súgó szövege
 * ELŐRE kerül, a „tallózz" gomb szövegként a végére. Ha van kiválasztott
 * fájl, a súgó eltűnik és a fájlnév látszik (lásd feljebb).
 */
[data-theme="paper"] .pu-urlap .file-wrap {
    justify-content: center; align-items: center; gap: 6px 6px; margin-bottom: 8px;
    padding: 26px 20px; border: 1px dashed var(--border); border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 55%, var(--bg));
}
[data-theme="paper"] .pu-urlap .file-wrap::before {
    content: ""; order: 0; width: 18px; height: 18px; margin-right: 6px; flex: none;
    background: var(--text-dim);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="paper"] .pu-urlap .file-drop-sugo { order: 1; opacity: 1; font-size: 13.5px; color: var(--text-dim); }
[data-theme="paper"] .pu-urlap .file-trigger {
    order: 2; padding: 0; border: 0; background: transparent; color: var(--accent);
    font-size: 13.5px; font-weight: 600; height: auto; cursor: pointer;
}
[data-theme="paper"] .pu-urlap .file-trigger:hover { background: transparent; text-decoration: underline; }
[data-theme="paper"] .pu-urlap .file-label { order: 3; margin-left: 8px; }
[data-theme="paper"] .pu-urlap .file-clear { order: 4; }
[data-theme="paper"] .pu-urlap .file-wrap ~ .small.muted { margin: 0 0 16px !important; }
[data-theme="paper"] .pu-prio { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
[data-theme="paper"] .pu-prio legend { font-weight: 600; font-size: 14px; padding: 0 0 8px; }
[data-theme="paper"] .pu-prio-racs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
[data-theme="paper"] .pu-prio-kartya {
    display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px;
    border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    /* Ez <label>, és a címkék papíron nagybetűs, monospace mezőcímek — a kártyán rendes szöveg kell. */
    font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 13px;
}
[data-theme="paper"] .pu-prio-kartya:hover { border-color: #c9c1b1; }
/* A kijelölt kártya 2 pixeles tinta-keretet kap (a terv szerint); a padding 1 pixellel kisebb, hogy a kártya ne ugorjon. */
[data-theme="paper"] .pu-prio-kartya:has(input:checked) { border: 2px solid var(--text); padding: 13px; }
[data-theme="paper"] .pu-prio-kartya:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); }
[data-theme="paper"] .pu-prio-nev { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--text); }
[data-theme="paper"] .pu-prio-nev input { margin: 0; width: auto; accent-color: var(--accent); }
[data-theme="paper"] .pu-prio-ora { font-size: 12px; color: var(--text-faint); line-height: 1.4; }
/*
 * A VÁLASZIDŐ-ÍGÉRET (#varhatoValasz) korábban apró, szürke „small muted”
 * sor volt a prioritás-kártyák alatt — Attila jelzése szerint ügyfélként
 * ez elveszett a szemnek, pont a legfontosabb pillanatban (amikor valaki
 * épp Sürgősre kattint, és tudni akarja, ténylegesen MIKOR jön válasz).
 * Ezért itt kiemelt, ikonos figyelmeztető-doboz — ugyanaz a „callout”
 * nyelvtan, mint a jegy-értékelés kártyánál (`.pj-ertekeles`), csak a
 * kiemelő (accent) szín tónusában, hiszen ez nem jó hír vagy rossz hír,
 * hanem egy ígéret, amit észre KELL venni.
 * Az ID-szelektor szándékosan erősebb, mint a `.small`/`.muted` — enélkül
 * azok az általános szabályok visszahúznák apró szürkére.
 */
[data-theme="paper"] .pu-urlap #varhatoValasz {
    margin: 10px 0 18px !important; display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.45;
}
[data-theme="paper"] .pu-urlap #varhatoValasz:empty { display: none; }
[data-theme="paper"] .pu-urlap #varhatoValasz::before {
    content: "⏰"; flex: none; font-size: 15px; line-height: 1.35; margin-top: -1px;
}
@media (max-width: 600px) {
    [data-theme="paper"] .pu-prio-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Portál: jegy részletei (a terv „Portal-Jegy" elrendezése) --- */
[data-theme="paper"] .portal-jegy .pj-targy {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2vw, 22px);
    line-height: 1.2; letter-spacing: -0.015em;
}
[data-theme="paper"] .pj-lepesek { margin: 0 0 18px; }
/* Ha kész, a sáv zöld: a „megoldva" a jó hír, nem egy újabb kék lépés. */
[data-theme="paper"] .pk-lepesek--kesz li.kesz::before { background: var(--success); }

/*
 * Világos, halványzöld kártya. Korábban fekete volt, és egy lezárt ügy fölött
 * gyászkeretnek hatott — ez a jó hír pillanata, ne komor dobozban kérdezzünk.
 */
[data-theme="paper"] .pj-ertekeles {
    margin: 0 0 20px; padding: 16px 18px; border-radius: 16px;
    background: #e9f3ec; border: 1px solid #cfe4d6; color: var(--text);
    display: flex; flex-direction: column; gap: 12px;
}
[data-theme="paper"] .pj-ertekeles h3 { margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text); }
[data-theme="paper"] .pj-ertekeles-gombok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
[data-theme="paper"] .pj-ertekeles-gombok a {
    display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 8px;
    border-radius: 10px; border: 1px solid #cfe4d6; background: var(--surface); color: var(--text);
    font-size: 13px; text-decoration: none; text-align: center;
}
[data-theme="paper"] .pj-ertekeles-gombok a:hover { background: #f4faf6; border-color: var(--success); text-decoration: none; color: var(--text); }
[data-theme="paper"] .pj-ertekeles-gombok a.valasztott { background: var(--success); border-color: var(--success); color: #fff; font-weight: 600; }
[data-theme="paper"] .pj-ertekeles-megj { font-size: 12.5px; color: var(--text-dim); }

/*
 * CSEVEGÉS-BUBORÉKOK: a saját üzenet jobbra, a mienk balra.
 * Egy pillantásból látszik, ki mondta utoljára — és ha a bal oldali az
 * utolsó, az ügyfélen a sor. A kolléga üzenete (nem `sajat`) bal oldalt,
 * fehéren marad: az nem az övé, de nem is a miénk.
 */
[data-theme="paper"] .portal-jegy .message { max-width: min(640px, 86%); margin-right: auto; border-radius: 14px 14px 14px 4px; }
[data-theme="paper"] .portal-jegy .message.from-admin { background: #e3eafb; border-color: #e3eafb; }
[data-theme="paper"] .portal-jegy .message.from-admin .message-author,
[data-theme="paper"] .portal-jegy .message.from-admin .message-time { color: #1c3f9e; }
[data-theme="paper"] .portal-jegy .message.sajat { margin-left: auto; margin-right: 0; border-radius: 14px 14px 4px 14px; }
[data-theme="paper"] .portal-jegy .msg-esemeny { border: 0; }
@media (max-width: 600px) {
    [data-theme="paper"] .portal-jegy .message { max-width: 92%; }
}


/* =====================================================================
   PORTÁL: JEGY OLDAL A TERV SZERINT (2.334.24)
   Kártya nélküli szál, kompakt fejsor, „Te · idő" feliratú buborékok,
   állapotsor a szál végén, és a válasz egy ragadós sáv (mező · gemkapocs · nyíl).
   ===================================================================== */
/* overflow: visible — a görgethető szülő megakadályozná, hogy a válasz-sáv az ablak aljához tapadjon. */
[data-theme="paper"] .portal-jegy .pj-kartya { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
[data-theme="paper"] .portal-jegy .pj-targy { font-size: clamp(22px, 2.4vw, 24px); margin: 0 0 18px !important; }
[data-theme="paper"] .pj-fej { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
[data-theme="paper"] .pj-vissza {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    margin-left: -8px; border-radius: 999px; color: var(--text); text-decoration: none;
}
[data-theme="paper"] .pj-vissza:hover { background: var(--surface2); }
[data-theme="paper"] .pj-szam { font-size: 13px; color: var(--text-dim); letter-spacing: 0.02em; }
[data-theme="paper"] .pj-nyomtat {
    margin-left: auto; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
    background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer;
}
[data-theme="paper"] .pj-nyomtat:hover { background: var(--surface2); color: var(--text); }

/* Buborék-fej: „Név · idő", egy sorban, testszöveggel (nem monospace). */
[data-theme="paper"] .portal-jegy .message-head { justify-content: flex-start; align-items: baseline; gap: 6px; }
[data-theme="paper"] .portal-jegy .message-author { font-size: 13px; font-weight: 600; }
[data-theme="paper"] .portal-jegy .message-time { margin-left: 0; font-family: var(--font-body); font-size: 13px; color: var(--text-dim); }
[data-theme="paper"] .portal-jegy .message-time::before { content: "·"; margin-right: 6px; }

/* Állapotsor a szál végén. */
[data-theme="paper"] .pj-allapotsor {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 20px 0 6px; font-size: 13px; color: var(--text-dim);
}
[data-theme="paper"] .pj-pont { width: 8px; height: 8px; border-radius: 50%; background: var(--pj-szin, var(--text-faint)); flex: none; }
[data-theme="paper"] .pj-lezart-jegyzet { text-align: center; margin: 0 0 4px !important; font-size: 12.5px; }

/* Asztalon a szál mellett jobbra áll a „Kit érint még" és a részletek; alatta egy oszlop. */
@media (min-width: 1000px) {
    [data-theme="paper"] .portal-jegy .grid-detail { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: repeat(3, auto) 1fr; gap: 0 32px; }
    [data-theme="paper"] .portal-jegy .grid-detail > .pj-kartya { grid-column: 1; grid-row: 1 / span 4; }
    [data-theme="paper"] .portal-jegy .grid-detail > :not(.pj-kartya) { grid-column: 2; margin-bottom: 16px; }
}

/* A válasz-sáv: a képernyő aljára tapad, amíg a szál fölötte hosszabb. */
[data-theme="paper"] .portal-jegy form.pj-valasz {
    position: sticky; bottom: 0; z-index: 20;
    display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px; grid-template-rows: auto auto auto;
    gap: 0 10px; align-items: end;
    margin: 24px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
[data-theme="paper"] .portal-jegy form.pj-valasz:focus-within { box-shadow: none; }
[data-theme="paper"] .portal-jegy form.pj-valasz > label[for="body"],
[data-theme="paper"] .portal-jegy form.pj-valasz > label[for="attachments"] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-theme="paper"] .portal-jegy form.pj-valasz .pj-visszajelzes { grid-row: 1; grid-column: 1 / -1; margin: 0 0 10px !important; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
[data-theme="paper"] .portal-jegy form.pj-valasz .pj-seg { display: none !important; }
[data-theme="paper"] .portal-jegy form.pj-valasz .pj-visszajelzes:has(input:checked) .pj-seg { display: block !important; }
[data-theme="paper"] .portal-jegy form.pj-valasz textarea#body {
    grid-row: 3; grid-column: 1; height: 48px; min-height: 48px; max-height: 160px; padding: 13px 16px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface2);
    font-size: 15px; line-height: 1.4; resize: none; overflow-y: auto;
}
[data-theme="paper"] .portal-jegy form.pj-valasz textarea#body:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="paper"] .portal-jegy form.pj-valasz .file-wrap { display: contents; }
[data-theme="paper"] .portal-jegy form.pj-valasz .file-drop-sugo { display: none; }
[data-theme="paper"] .portal-jegy form.pj-valasz .file-trigger {
    grid-row: 3; grid-column: 2; position: relative; width: 48px; height: 48px; padding: 0; margin: 0;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-dim);
    font-size: 0; cursor: pointer;
}
[data-theme="paper"] .portal-jegy form.pj-valasz .file-trigger::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="paper"] .portal-jegy form.pj-valasz .file-trigger:hover { background: var(--surface2); color: var(--text); }
[data-theme="paper"] .portal-jegy form.pj-valasz .file-label { grid-row: 2; grid-column: 1 / 3; margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
[data-theme="paper"] .portal-jegy form.pj-valasz .file-clear { grid-row: 2; grid-column: 3; justify-self: end; align-self: start; margin: 0 0 10px; }
[data-theme="paper"] .portal-jegy form.pj-valasz .file-clear[hidden] { display: none; }
[data-theme="paper"] .portal-jegy form.pj-valasz .pj-kuld {
    grid-row: 3; grid-column: 3; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; min-width: 48px; margin: 0; padding: 0; border-radius: 14px;
}
/* A beküldéskor a szkript „Küldés…" szöveget ír a gombba: a kis gombban csak három pont látszik. */
[data-theme="paper"] .portal-jegy form.pj-valasz .pj-kuld.kuldes-folyamatban { font-size: 0; }
[data-theme="paper"] .portal-jegy form.pj-valasz .pj-kuld.kuldes-folyamatban::after { content: "…"; font-size: 22px; line-height: 1; }
@media (max-width: 720px) {
    /* Telefonon a sáv az ablak teljes szélességére nyúlik (a lap oldalsó margóját kiegyenlíti). */
    [data-theme="paper"] .portal-jegy form.pj-valasz { width: calc(100% + 24px); max-width: none; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}


/* =====================================================================
   PORTÁL: BELÉPÉS ELŐTTI LAPOK (2.334.25) — belépés, regisztráció, jelszó- és kódlépések.
   Ugyanaz a menüsor áll fölöttük, mint a portálon; az űrlap kártya nélkül, egy
   keskeny oszlopban, az Új bejelentés mezőivel (48 px, 12 px sarok, kövér címke).
   Csak a portál oldalak kapják (body.portal-belepes): az admin belépés marad.
   ===================================================================== */
[data-theme="paper"] .portal-belepes .login-shell { min-height: 0; align-items: flex-start; padding: 56px 16px 48px; }
[data-theme="paper"] .portal-belepes .login-card { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 440px !important; }
[data-theme="paper"] .portal-belepes .login-title { font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0 0 20px; }
[data-theme="paper"] .portal-belepes .login-card label {
    font-family: var(--font-body); text-transform: none; letter-spacing: 0;
    font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
[data-theme="paper"] .portal-belepes .login-card label .muted { font-weight: 400; color: var(--text-dim); }
/* A jelölőnégyzetes sor mondat, nem mezőcím: normál vastagság, a négyzet a szöveg első sorához igazítva. */
[data-theme="paper"] .portal-belepes .login-card label:has(input[type=checkbox]) { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13.5px; }
[data-theme="paper"] .portal-belepes .login-card label:has(input[type=checkbox]) input { margin: 2px 0 0; flex: none; }
[data-theme="paper"] .portal-belepes .login-card input[type=text],
[data-theme="paper"] .portal-belepes .login-card input[type=email],
[data-theme="paper"] .portal-belepes .login-card input[type=password],
[data-theme="paper"] .portal-belepes .login-card input[type=tel],
[data-theme="paper"] .portal-belepes .login-card input[type=number] { height: 48px; border-radius: 12px; font-size: 14px; }
[data-theme="paper"] .portal-belepes .login-card form > button[type=submit],
[data-theme="paper"] .portal-belepes .login-card a.btn { height: 48px; border-radius: 12px; font-size: 13.5px; }
[data-theme="paper"] .portal-belepes .login-card p.small { font-size: 13px; line-height: 1.55; }
[data-theme="paper"] .portal-belepes .login-card .banner { border-radius: 12px; }
/* A kártyából a sávba költözött nyelv- és témaváltó; keskeny kijelzőn a sáv sorba tör. */
[data-theme="paper"] .pt-valaszto--sav button { padding: 5px 9px; }
[data-theme="paper"] .pt-vendeg .btn { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
@media (max-width: 720px) {
    [data-theme="paper"] .pt-vendeg { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    [data-theme="paper"] .portal-belepes .login-shell { padding-top: 32px; }
}

/* =====================================================================
   PORTÁL: PROFIL ÉS TUDÁSBÁZIS (2.334.27) — profil, tudásbázis, cikk.
   Nincs hozzájuk terv-kép: a kialakult Papír nyelv, kártya nélkül, keskeny
   oszlopban, az Új bejelentés mezőivel (48 px, 12 px sarok, kövér címke),
   a szakaszokat vékony vonal választja el. Csak a body.portal-profil és
   body.portal-kb oldalakra érvényes.
   ===================================================================== */
[data-theme="paper"] .pp-cim, [data-theme="paper"] .kb-cim {
    font-size: clamp(22px, 4.5vw, 24px); font-weight: 600; line-height: 1.2; margin: 8px 0 20px; color: var(--text);
}

/* ---- PROFIL: egy keskeny oszlop, szakaszok vékony vonallal ---- */
[data-theme="paper"] .portal-profil .wrap { max-width: 640px !important; }
[data-theme="paper"] .portal-profil .profil-racs { display: block !important; }
[data-theme="paper"] .portal-profil .wrap .card.card-pad {
    background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
    padding: 28px 0; margin: 0 !important; width: auto !important;
}
[data-theme="paper"] .portal-profil .profil-racs > .card:first-child { border-top: 0; padding-top: 4px; }
[data-theme="paper"] .portal-profil .card h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; color: var(--text); }
[data-theme="paper"] .portal-profil .card p.small { font-size: 13.5px; line-height: 1.55; }
[data-theme="paper"] .portal-profil .card label {
    font-family: var(--font-body); text-transform: none; letter-spacing: 0;
    font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
[data-theme="paper"] .portal-profil .card input[type=text],
[data-theme="paper"] .portal-profil .card input[type=email],
[data-theme="paper"] .portal-profil .card input[type=password],
[data-theme="paper"] .portal-profil .card input[type=tel] { height: 48px; border-radius: 12px; font-size: 14px; }
[data-theme="paper"] .portal-profil .card form > button[style*="width:100%"],
[data-theme="paper"] .portal-profil .card form > div > button.btn { height: 48px; border-radius: 12px; font-size: 13.5px; }
[data-theme="paper"] .portal-profil .card > button[data-pwa-telepites] { height: 48px; border-radius: 12px; font-size: 13.5px; }
/* Megjelenés: két SZÖVEGES gomb (Világos / Sötét) a színes pöttyök helyett. */
[data-theme="paper"] .portal-profil .theme-switcher button {
    width: auto !important; height: 40px !important; padding: 0 18px; border-radius: 10px;
    border: 1px solid var(--border); background: transparent !important; box-shadow: none !important;
    font: inherit; font-size: 13.5px; color: var(--text-dim);
}
[data-theme="paper"] .portal-profil .theme-switcher button.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
[data-theme="paper"] .portal-profil .banner { border-radius: 12px; }

/* ---- TUDÁSBÁZIS: lista kártya nélkül ---- */
[data-theme="paper"] .portal-kb .kb-kereso { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 20px !important; }
[data-theme="paper"] .portal-kb .kb-kereso input[type=text] { min-width: 0; height: 48px; border-radius: 12px; font-size: 14px; }
[data-theme="paper"] .portal-kb .kb-kereso .btn { height: 48px; border-radius: 12px; font-size: 13.5px; padding: 0 22px !important; }
[data-theme="paper"] .portal-kb .kb-kat { padding: 7px 14px; font-size: 13px; border-radius: 999px; background: transparent; }
[data-theme="paper"] .portal-kb .kb-kat--aktiv { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); color: var(--accent); }
[data-theme="paper"] .portal-kb a.kb-cikk-sor {
    background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
    padding: 18px 0; margin: 0 !important;
}
[data-theme="paper"] .portal-kb a.kb-cikk-sor:first-of-type { border-top: 1px solid var(--border); }
[data-theme="paper"] .portal-kb a.kb-cikk-sor strong { font-size: 16.5px; font-weight: 600; }
[data-theme="paper"] .portal-kb a.kb-cikk-sor:hover strong { color: var(--accent); }
[data-theme="paper"] .portal-kb a.kb-cikk-sor .small { font-size: 14px; line-height: 1.55; }
[data-theme="paper"] .portal-kb .kb-cikk-kat { background: transparent !important; border: 0 !important; padding: 0; margin-left: 10px !important; font-size: 12.5px; }
[data-theme="paper"] .portal-kb .kb-ures { background: transparent; border: 0; box-shadow: none; }

/* ---- CIKK: hasábszéles szöveg, a visszalépés fent ---- */
[data-theme="paper"] .portal-kb .kb-vissza { display: inline-block; margin: 8px 0 16px; font-size: 13.5px; color: var(--text-dim); text-decoration: none; }
[data-theme="paper"] .portal-kb .kb-vissza:hover { color: var(--accent); }
[data-theme="paper"] .portal-kb .kb-cikk { background: transparent; border: 0; box-shadow: none; padding: 0; }
[data-theme="paper"] .portal-kb .kb-cikk-cim { font-size: clamp(22px, 4.5vw, 24px) !important; font-weight: 600; line-height: 1.25; margin: 0 0 20px !important; }
[data-theme="paper"] .portal-kb .kb-cikk-torzs { font-size: 16px !important; line-height: 1.7 !important; }
[data-theme="paper"] .portal-kb .kb-cikk .btn { height: 44px; border-radius: 12px; font-size: 13.5px; padding: 0 20px !important; }

/* =====================================================================
   PORTÁL: JEGYLISTA ÉS RIPORT (2.334.28) — „Összes jegyem", keresés/szűrés a
   kezdőlapon, és a Riport. Kártya nélkül, vékony vonalakkal elválasztott
   sorokkal; telefonon a sor cím + egy sor jelvény, nem hat feliratos doboz.
   Csak a .pl-szakasz (a lista doboza) és a body.portal-riport érintett.
   ===================================================================== */
[data-theme="paper"] .pl-szakasz { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
[data-theme="paper"] .pl-szakasz > .card-pad { padding: 0 0 16px !important; }
[data-theme="paper"] .pl-szakasz h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
[data-theme="paper"] .pl-szakasz .filters input[type=text],
[data-theme="paper"] .pl-szakasz .filters select { height: 48px; border-radius: 12px; font-size: 14px; margin-bottom: 0; }
[data-theme="paper"] .pl-szakasz .filters .btn { height: 48px; border-radius: 12px; font-size: 13.5px; padding: 0 20px !important; }
/* A státusz-lenyíló (a szkript a <select> helyére gombot rak): ugyanolyan magas, mint a keresőmező. */
[data-theme="paper"] .pl-szakasz .filters .select-wrap.compact { height: 48px; }
[data-theme="paper"] .pl-szakasz .filters .select-trigger { height: 48px; border-radius: 12px; font-size: 14px; }
[data-theme="paper"] .pl-szakasz .filters .select-panel { min-width: 210px; }
[data-theme="paper"] .pl-szakasz .filters .select-option span:first-child { white-space: nowrap; }
[data-theme="paper"] .pl-szakasz table.portal-tickets { width: 100%; border-collapse: collapse; }
[data-theme="paper"] .pl-szakasz table.portal-tickets th {
    font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600;
    color: var(--text-dim); background: transparent; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
[data-theme="paper"] .pl-szakasz table.portal-tickets td { padding: 16px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
[data-theme="paper"] .pl-szakasz table.portal-tickets tbody tr:nth-child(even) { background: transparent; }
[data-theme="paper"] .pl-szakasz table.portal-tickets tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
[data-theme="paper"] .pl-szakasz table.portal-tickets td:first-child { width: 42%; min-width: 0; }
/* A hosszú, szóköz nélküli tárgy törjön — különben a tábla kilóg a lapból és oldalra görget. */
[data-theme="paper"] .pl-szakasz .ticket-link { overflow-wrap: anywhere; font-size: 15px; font-weight: 600; line-height: 1.4; }
[data-theme="paper"] .pl-szakasz .ticket-link .mono { font-weight: 400; }
[data-theme="paper"] .pl-szakasz .empty { border-top: 1px solid var(--border); }
/* Lapozó + méretválasztó a teljes listánál (Attila kérése: alapból 10-es
   elválasztó, állítható 25/50-re) — a .pk-lezart sávval rokon stílus
   (felső elválasztó vonal, halványabb szöveg), hogy a lista alja ne törjön
   meg. Csak var()-okat használ, nincs szüksége sötét párra. */
[data-theme="paper"] .pl-szakasz .pl-lapozo-sor {
    margin-top: 8px; padding: 16px 4px 4px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
[data-theme="paper"] .pl-szakasz .pl-lapozo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-theme="paper"] .pl-szakasz .pl-lapozo-gomb { padding: 6px 12px; font-size: 12px; }
[data-theme="paper"] .pl-szakasz .pl-lapozo-allas { padding: 0 4px; white-space: nowrap; }
[data-theme="paper"] .pl-szakasz .pl-meret { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
[data-theme="paper"] .pl-szakasz .pl-meret a { color: var(--text-dim); text-decoration: none; }
[data-theme="paper"] .pl-szakasz .pl-meret a:hover { color: var(--accent); text-decoration: underline; }
[data-theme="paper"] .pl-szakasz .pl-meret-aktiv { color: var(--accent); font-weight: 700; }
@media (max-width: 720px) {
    [data-theme="paper"] .pl-szakasz .filters .select-wrap.compact, [data-theme="paper"] .pl-szakasz .filters .select-trigger { width: 100%; }
    [data-theme="paper"] .pl-szakasz table.portal-tickets tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%;
        border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; margin: 0; padding: 16px 0;
    }
    [data-theme="paper"] .pl-szakasz table.portal-tickets td { width: auto; padding: 0; border: 0; display: inline-flex; }
    [data-theme="paper"] .pl-szakasz table.portal-tickets td::before { content: none; }
    [data-theme="paper"] .pl-szakasz table.portal-tickets td:first-child { display: block; width: 100%; padding: 0; }
    [data-theme="paper"] .pl-szakasz table.portal-tickets td.pl-ures { display: none; }
    [data-theme="paper"] .pl-szakasz table.portal-tickets td:last-child { margin-left: auto; }
}

/* ---- RIPORT ---- */
[data-theme="paper"] .portal-riport .pr-szuro { background: transparent; border: 0; box-shadow: none; padding: 0; }
[data-theme="paper"] .portal-riport .pr-szuro label {
    font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
[data-theme="paper"] .portal-riport .pr-szuro input[type=date] { height: 48px; border-radius: 12px; font-size: 14px; margin-bottom: 0; }
[data-theme="paper"] .portal-riport .pr-szuro .btn { height: 48px; border-radius: 12px; font-size: 13.5px; padding: 0 20px !important; }
[data-theme="paper"] .portal-riport .pr-kpi > .card { border-radius: 14px; box-shadow: none; background: var(--surface); }
[data-theme="paper"] .portal-riport .pr-kpi > .card > div:last-child { font-size: 24px !important; font-weight: 600 !important; line-height: 1.2; }

/* =====================================================================
   MOBIL ÁTNÉZÉS (2.334.29) — a telefonos mérésből (390 px) kiderült hibák.
   ===================================================================== */
/* A hosszú, szóköz nélküli tárgy (útvonal, naplórészlet) törjön a jegylistákban is: az admin
   lista telefonos kártyája oldalra görgetett, a szám melletti szöveg kilógott. */
[data-theme="paper"] .ticket-link { overflow-wrap: anywhere; }

/* A portál jegylistája mobilon kártya (720 pixel alatt, ugyanott, ahol az alap szabály vált) — papíron lekerekítve. */
@media (max-width: 720px) {
    [data-theme="paper"] table.portal-tickets tr { border-radius: 14px; }
    [data-theme="paper"] table.portal-tickets td::before { font-family: var(--font-mono); }
}

/*
 * ÓRAELSZÁMOLÁS — a kész oldalak nyelvén.
 *
 * A szűrő nem külön doboz, hanem egy sor a számok fölött (mint a jegylista
 * szűrősávja); a napok fejléce ugyanaz a halk csoportfejléc, mint a
 * jegylistán a „Lejárt · 2"; a sor végi törlés nem piros tömb — soronként
 * egy piros gomb a lista leghangosabb eleme lenne, pedig a legritkább.
 * Csak változókkal: a Papír sötétben így nem kell külön pár.
 */
[data-theme="paper"] .papir-ora-szuro { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
[data-theme="paper"] .papir-ora-szuro .filters { align-items: flex-end; }
[data-theme="paper"] .papir-ora-idoszak { display: inline-flex; flex-wrap: wrap; gap: 6px; align-self: center; margin-left: auto; }
/*
 * Az új tétel mezői rácsban: eddig mindegyik a saját minimumszélességén
 * állt, ezért telefonon cikcakkos, széles képernyőn jobbra kilógó sor lett.
 * Az ügyfél két cellát kap — a cégnév a leghosszabb érték.
 */
[data-theme="paper"] .papir-ora-uj .field-row-inline {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
[data-theme="paper"] .papir-ora-uj .field-row-inline > div { min-width: 0 !important; }
[data-theme="paper"] .papir-ora-uj .field-row-inline > div:first-child { grid-column: span 2; }
[data-theme="paper"] .papir-ora-uj .field-row-inline input,
[data-theme="paper"] .papir-ora-uj .field-row-inline .select-wrap { width: 100%; }
/* A kiszállás-oszlop mínusz jele halvány: a legtöbb sorban nincs kiszállás, a sok „—" ne legyen hangos. */
[data-theme="paper"] .papir-ora-lista td.c-kiszallas .muted { color: var(--text-faint); }
[data-theme="paper"] .papir-ora-lista tr.day-head td {
    background: var(--bg) !important; padding: 12px 16px 6px !important;
    font-size: 12.5px; color: var(--text-dim);
}
[data-theme="paper"] .papir-ora-lista tr.day-head strong { font-size: 12.5px !important; font-weight: 600; }
[data-theme="paper"] .papir-ora-lista tr.day-head:hover td { background: var(--surface2) !important; }
[data-theme="paper"] .papir-ora-lista td.c-munkatars .name-badge { width: 28px; height: 28px; margin: 0; font-size: 11px; }
[data-theme="paper"] .papir-ora-lista .btn.danger {
    background: transparent; border: 1px solid var(--border); color: var(--danger);
    font-weight: 500;
}
[data-theme="paper"] .papir-ora-lista .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--surface); }
/*
 * TELEFONON KÁRTYA, NEM TÁBLÁZAT.
 *
 * Hét oszlop 390 pixelen nem fér el: vagy oldalra tolta a lapot, vagy a
 * vágás eltüntette az időt és a törlés gombot — pont a két legfontosabbat.
 * A dátum a nap fejlécében már ott van, ezért a sorból elmarad; felül a
 * munka leírása, alatta egy sorban ügyfél, idő, kiszállás, munkatárs, törlés.
 */
@media (max-width: 720px) {
    [data-theme="paper"] .papir-ora-lista thead { display: none; }
    [data-theme="paper"] .papir-ora-lista table,
    [data-theme="paper"] .papir-ora-lista tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] .papir-ora-lista tr.day-head { display: block; }
    [data-theme="paper"] .papir-ora-lista tr.day-head td { display: block; }
    [data-theme="paper"] .papir-ora-lista tr.day-row:not([hidden]) {
        display: grid; grid-template-columns: 1fr auto auto auto auto;
        align-items: center; column-gap: 10px; row-gap: 6px;
        padding: 12px 16px; border-bottom: 1px solid var(--border);
    }
    [data-theme="paper"] .papir-ora-lista tr.day-row td { display: block; padding: 0; border: 0; text-align: left !important; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-mikor { display: none; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-mit { grid-column: 1 / -1; grid-row: 1; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-ugyfel { grid-row: 2; font-size: 12.5px; color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-ido { grid-row: 2; font-weight: 600; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-kiszallas { grid-row: 2; font-size: 12.5px; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-kiszallas:has(> .muted) { display: none; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-munkatars { grid-row: 2; }
    [data-theme="paper"] .papir-ora-lista tr.day-row td.c-torles { grid-row: 2; }
    [data-theme="paper"] .papir-ora-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-ora-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-ora-kpi .papir-kpi-szam { font-size: 21px; }
    [data-theme="paper"] .papir-ora-kpi .papir-kpi:last-child { grid-column: 1 / -1; }
    [data-theme="paper"] .papir-ora-idoszak { margin-left: 0; }
}

/*
 * SZÁMLÁZÁS — a kész oldalak nyelvén.
 *
 * A szűrő itt sem külön doboz; a hónapok fülek, a kiemelt az érvényes. A
 * három kosár (vár / átalányban / kiszámlázva) kártya, ami a listához ugrik.
 * A cégsor elején monogram, a tételek percei nem írógépbetűsek — oszlopba
 * rendezett számként (tabular-nums) olvashatók. A figyelmeztető narancs a
 * téma saját színe lesz: a beégetett #e6a23c a papíron fakó és kilóg.
 */
[data-theme="paper"] .papir-szamla-szuro { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
[data-theme="paper"] .papir-szamla-szuro form { align-items: flex-end !important; }
/* A mezők alsó margója nélkül a gomb és a mezők alja egy vonalba esik. */
[data-theme="paper"] .papir-szamla-szuro input,
[data-theme="paper"] .papir-szamla-szuro .btn { margin-bottom: 0; }
[data-theme="paper"] .papir-szamla-szuro .btn { min-height: 40px; }
[data-theme="paper"] .papir-szamla-honapok { display: inline-flex; flex-wrap: wrap; gap: 6px; align-self: flex-end; margin-left: auto; }
[data-theme="paper"] .papir-szamla-kpi .papir-kpi { text-decoration: none; }
[data-theme="paper"] .papir-szamla-szakasz { scroll-margin-top: 16px; }
[data-theme="paper"] .papir-szamla-szakasz > h3 { font-size: 15px !important; font-weight: 600; }
[data-theme="paper"] .papir-szamla-ceg { display: inline-flex; align-items: center; gap: 10px; }
[data-theme="paper"] .papir-szamla-ceg .name-badge { width: 28px; height: 28px; margin: 0; font-size: 11px; flex: none; }
[data-theme="paper"] .papir-szamla-figyel { color: var(--warning) !important; }
[data-theme="paper"] .papir-szamla-tetelek { padding-left: 38px !important; }
[data-theme="paper"] .papir-szamla-tetel .t-perc { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 12.5px; }
[data-theme="paper"] .papir-szamla-lenyito { font-family: var(--font-body); font-size: 15px !important; }
/*
 * TELEFONON a tételsor két sorba törik: felül a leírás teljes szélességben,
 * alatta a dátum/jegyszám és a perc. Egy sorban a leírásnak 150 pixel
 * maradt, és három-négy sorba tört egy rövid mondat is.
 */
@media (max-width: 720px) {
    [data-theme="paper"] .papir-szamla-szuro form > div { flex: 1 1 140px; }
    [data-theme="paper"] .papir-szamla-szuro form > div > label[style*="hidden"] { display: none; }
    [data-theme="paper"] .papir-szamla-honapok { margin-left: 0; }
    [data-theme="paper"] .papir-szamla-kpi { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    [data-theme="paper"] .papir-szamla-kpi .papir-kpi { padding: 12px 12px; }
    [data-theme="paper"] .papir-szamla-kpi .papir-kpi-szam { font-size: 22px; }
    [data-theme="paper"] .papir-szamla-kpi .papir-kpi-cimke { font-size: 12px; }
    [data-theme="paper"] .papir-szamla-tetelek { padding-left: 0 !important; }
    [data-theme="paper"] .papir-szamla-tetel {
        display: grid !important; grid-template-columns: 1fr auto; column-gap: 10px;
        line-height: 1.45 !important; padding: 7px 0; row-gap: 1px;
    }
    [data-theme="paper"] .papir-szamla-tetel + .papir-szamla-tetel { border-top: 1px solid var(--border); }
    [data-theme="paper"] .papir-szamla-tetel .t-targy { grid-column: 1 / -1; grid-row: 1; }
    [data-theme="paper"] .papir-szamla-tetel .t-azon { grid-row: 2; }
    [data-theme="paper"] .papir-szamla-tetel .t-perc { grid-row: 2; text-align: right; }
}

/*
 * RIPORT — a kész oldalak nyelvén.
 *
 * A szűrő itt sem külön doboz; az időszak gyorsválasztói fülek, a kiemelt az
 * érvényes. A négy fő szám kártyasor (a határidő-sértés halványpiros, ha van),
 * az időrögzítés összesítője három halk csempe. A cég- és jegytáblázat
 * telefonon kártya: a cellák a saját feliratukat hozzák (data-label),
 * mert a riport oszlopainak száma cégenként és jogosultságonként változik —
 * a sorszám szerinti elrejtés az egyik ügyfélnél mást vinne el, mint a másiknál.
 * Csak változókkal: a Papír sötétben így nem kell külön pár.
 */
[data-theme="paper"] .papir-riport-szuro { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
/* Nyomtatásban a szűrő minden eleme rejtve van — az üres keretes doboz sem kell a lapra. */
@media print { [data-theme="paper"] .papir-riport-szuro { display: none; } }
/* A hosszú cégnév ne feszítse ki a szűrőt: a legördülő gombja a sor szélességéig nőhet, addig a szöveg vágva marad. */
[data-theme="paper"] .papir-riport-szuro .select-wrap { max-width: 100%; }
[data-theme="paper"] .papir-riport-szuro .select-trigger { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="paper"] .papir-riport-idoszak { display: inline-flex; flex-wrap: wrap; gap: 6px; align-self: flex-end; margin: 0 0 4px auto; }
[data-theme="paper"] .papir-riport-cim { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
[data-theme="paper"] .papir-riport-bontas h3,
[data-theme="paper"] .papir-riport-ido > div > h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
/* Az időrögzítés három összesítője: halk csempe a kártyán belül, nem újabb kártya a kártyában. */
[data-theme="paper"] .papir-riport-osszes > div {
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
/* A számok oszlopba rendezve olvashatók, nem írógépbetűsek — a jegyszám marad monospace. */
[data-theme="paper"] .papir-riport-bontas .mono,
[data-theme="paper"] .papir-riport-tabla td.mono,
[data-theme="paper"] .papir-riport-tabla td:not(.c-jegy) .mono,
[data-theme="paper"] .papir-riport-munkatars .mono,
[data-theme="paper"] .papir-riport-keret .mono:not(.muted) {
    font-family: var(--font-body); font-variant-numeric: tabular-nums;
}
[data-theme="paper"] .papir-riport-tabla .riport-ures { color: var(--text-faint); }
/*
 * A HOSSZÚ, SZÓKÖZ NÉLKÜLI TÁRGY TÖRJÖN, NE FESZÍTSE SZÉT A TÁBLÁT.
 *
 * Egy naplórészlet vagy útvonal a tárgyban a jegylista min-content szélességét
 * a kártyán túlra tolta: a lap oldalra görgethetővé vált, a „Beérkezett"
 * oszlop pedig kilógott a kártyából. (Telefonon a kártyanézet ezt már kezelte.)
 */
[data-theme="paper"] .papir-riport-tabla td.c-jegy,
[data-theme="paper"] .papir-riport-tabla td.c-ceg,
[data-theme="paper"] .papir-riport-tabla .ticket-link { overflow-wrap: anywhere; }
/*
 * EGYSOROS JEGYSOROK ASZTALON (1101 pixeltől táblázat, alatta kártya).
 *
 * A jegytábla sora korábban két soros volt (a sorszám a tárgy fölött, a számlázható
 * perc az idő alatt), ezért 64 pixel magas — negyven jegynél ez 2600 pixel. Most a
 * sorszám és a tárgy egy sorban áll, a hosszú tárgyat három pont vágja (a teljes szöveg
 * a hivatkozás `title`-jében). A tárgy cellája kapja a maradék helyet (`width: 100%` +
 * `max-width: 0` a szokásos táblázat-trükk), a többi oszlop a saját tartalmához igazodik.
 *
 * `!important`: az 1500 pixel alatti közös szabály (`.card table td`) MINDEN cellát
 * tördelhetővé tesz, és soron belüli stílusnál is erősebb kell. Itt tudatosan
 * felülírjuk — de csak a tárgyat és a céget vágjuk (a teljes szöveg a `title`-ben
 * marad), a számoszlopok nem vágódnak le: ha együtt mégsem férnek el, a kártya
 * görgethető (a közös `.card { overflow-x: auto }` szabály), nem levágott.
 * Az „Érkezett" oszlop 1300 pixel alatt elmarad: másodlagos adat, és így a tárgynak
 * marad hely.
 */
@media (min-width: 1101px) {
    [data-theme="paper"] .papir-riport-jegy-tabla td { padding-top: 8px; padding-bottom: 8px; white-space: nowrap !important; }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-jegy { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-ceg { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
    [data-theme="paper"] .papir-riport-jegy-tabla .c-erkezett { display: none; }
}
/*
 * „MUTASD MIND" — script nélkül: rejtett jelölőnégyzet + felirat.
 * A rejtés csak képernyőn él (nyomtatásban minden sor kiíródik). A jelölőnégyzet és a
 * felirat `papir-csak` osztályú: klasszikus arculatban egyik sem jelenik meg, és minden
 * sor látszik.
 */
[data-theme="paper"] .papir-riport-jegyek { position: relative; }
[data-theme="paper"] .riport-mind-kapcsolo { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
[data-theme="paper"] .riport-mind-gomb {
    display: flex; justify-content: center; padding: 13px 16px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--accent);
}
[data-theme="paper"] .riport-mind-gomb:hover { background: var(--surface2); }
[data-theme="paper"] .riport-mind-kapcsolo:focus-visible ~ .riport-mind-gomb { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-theme="paper"] .riport-mind-kevesebb { display: none; }
[data-theme="paper"] .riport-mind-kapcsolo:checked ~ .riport-mind-gomb .riport-mind-mind { display: none; }
[data-theme="paper"] .riport-mind-kapcsolo:checked ~ .riport-mind-gomb .riport-mind-kevesebb { display: inline; }
@media screen {
    [data-theme="paper"] .riport-mind-kapcsolo:not(:checked) ~ table tr.riport-tobb-sor { display: none; }
}
@media print {
    [data-theme="paper"] .riport-mind-gomb { display: none; }
}
/*
 * A STÁTUSZ ÉS A PRIORITÁS KÉT EGYENLŐ KÁRTYA.
 *
 * A `grid-detail` osztály a jegyoldal „szál + oldalsáv" elrendezése, és Papíron
 * az első kártyát keret nélkülivé teszi (a buborékok a szál maguk). Itt két
 * önálló kártya áll egymás mellett, ezért a keretet visszaadjuk, és a
 * 380 pixeles oldalsáv helyett egyenlő oszlopokat kapnak.
 */
[data-theme="paper"] body:not(.portal-jegy) .grid-detail.papir-riport-bontas > .card:first-child {
    background: var(--surface); border: 1px solid var(--border); padding: 20px;
}
@media (min-width: 961px) {
    [data-theme="paper"] .grid-detail.papir-riport-bontas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
[data-theme="paper"] .papir-riport-keret .name-badge,
[data-theme="paper"] .papir-riport-munkatars .name-badge,
[data-theme="paper"] .papir-riport-ceg-tabla td.c-ceg .name-badge { width: 24px; height: 24px; margin: 0 8px 0 0; font-size: 10.5px; }
[data-theme="paper"] .papir-riport-ceg-tabla td.c-ceg { font-weight: 600; }
/*
 * A JEGYTÁBLA 1100 PIXEL ALATT KÁRTYA (nem csak telefonon).
 *
 * Nyolc oszlop ezer pixel alatt már nem fér el egy sorban: a cégnév négy sorba tört,
 * a sor 150–250 pixel magas lett, a lap hosszabb, mint a két tábla együtt volt.
 * Ugyanez a küszöb a jegylistáé is (lásd a „KÁRTYANÉZET HATÁRA" szakaszt fentebb).
 * A telefonos szabályok (720 pixel alatt) ezután csak a rácsot szűkítik.
 */
@media (max-width: 1100px) {
    [data-theme="paper"] .papir-riport-jegy-tabla thead { display: none; }
    [data-theme="paper"] .papir-riport-jegy-tabla,
    [data-theme="paper"] .papir-riport-jegy-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] .papir-riport-jegy-tabla tr {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 8px 12px; align-items: start;
        padding: 12px 20px; border-bottom: 1px solid var(--border);
    }
    [data-theme="paper"] .papir-riport-jegy-tabla tbody tr:last-child { border-bottom: 0; }
    [data-theme="paper"] table.papir-riport-jegy-tabla tbody tr,
    [data-theme="paper"] table.papir-riport-jegy-tabla tbody tr:nth-child(even),
    [data-theme="paper"] table.papir-riport-jegy-tabla tbody tr:hover { background: transparent; }
    [data-theme="paper"] .papir-riport-jegy-tabla td {
        display: block; padding: 0; border: 0; text-align: left !important; min-width: 0;
        overflow-wrap: anywhere; white-space: normal !important;
    }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-jegy { grid-column: 1 / -1; font-size: 13.5px; }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-ceg { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-dim); }
    [data-theme="paper"] .papir-riport-jegy-tabla td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 1px;
        font-size: 11px; color: var(--text-faint);
    }
    [data-theme="paper"] .papir-riport-jegy-tabla td[data-label]:has(> .riport-ures) { display: none; }
    /* A pirulának nincs felirata: a felirat magasságával lejjebb kerül, hogy a számokkal egy vonalba essen. */
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-prio,
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-allapot { padding-top: 16px; }
}
/*
 * TELEFONON KÁRTYA, NEM TÁBLÁZAT.
 *
 * A cégenkénti kimutatás nyolc oszlopos: 390 pixelen vagy oldalra tolta a
 * lapot, vagy összenyomta a számokat olvashatatlanra. Cégenként egy kártya:
 * felül a név, alatta felirat–érték sorok. Az üres („—") érték sora elmarad:
 * egy magánszemélynél különben öt felirat állna semmivel.
 * A cellaszabályok a sor-osztállyal együtt (`tr.riport-ceg-sor td.c-xxx`)
 * íródnak, hogy a közös `td` szabályok ne írják felül őket.
 */
@media (max-width: 720px) {
    [data-theme="paper"] .papir-riport-tabla thead { display: none; }
    [data-theme="paper"] .papir-riport-tabla,
    [data-theme="paper"] .papir-riport-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] .papir-riport-tabla tr { display: block; padding: 11px 0; border-bottom: 1px solid var(--border); }
    [data-theme="paper"] .papir-riport-tabla tbody tr:last-child { border-bottom: 0; }
    /* A táblázat zebracsíkja kártyanézetben csak sávot festene a kártyák mögé; a vonal már elválasztja őket. */
    /* `table.`-lel együtt: a Papír sötét saját zebra-szabálya később áll, és azonos specificitással felülírná. */
    [data-theme="paper"] table.papir-riport-tabla tbody tr,
    [data-theme="paper"] table.papir-riport-tabla tbody tr:nth-child(even),
    [data-theme="paper"] table.papir-riport-tabla tbody tr:hover { background: transparent; }
    [data-theme="paper"] .papir-riport-tabla td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }

    /* Cégenkénti kimutatás: felirat–érték sorok. */
    /* A cég neve itt a kártya címe, nem halk alcím (a jegytáblák `c-ceg` cellája az). */
    [data-theme="paper"] .papir-riport-ceg-tabla tr.riport-ceg-sor td.c-ceg { font-size: 14px; padding-bottom: 6px; color: var(--text); }
    [data-theme="paper"] .papir-riport-ceg-tabla tr.riport-ceg-sor td[data-label] {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 3px 0; font-size: 13px;
    }
    [data-theme="paper"] .papir-riport-ceg-tabla tr.riport-ceg-sor td[data-label]::before {
        content: attr(data-label); margin-right: auto; flex: none;
        font-size: 12px; color: var(--text-faint);
    }
    [data-theme="paper"] .papir-riport-ceg-tabla tr.riport-ceg-sor td[data-label]:has(> .riport-ures) { display: none; }
    /* A korábbi hónapok sora: a hónap a kártya címe (a cégtábla `c-ceg` cellájával azonos szerepben). */
    [data-theme="paper"] .papir-riport-ceg-tabla tr.riport-ceg-sor td.c-honap { font-size: 13px; font-weight: 600; padding-bottom: 4px; color: var(--text); }
    [data-theme="paper"] .papir-riport-ceg-tabla tr.riport-ceg-sor td.c-osszes { padding-top: 6px; margin-top: 3px; border-top: 1px dashed var(--border); }

    /* Telefonon a rács három oszlopos; az állapot a prioritás mellé kerül, az érkezés külön sorba. */
    /* `display: grid` újra ide is kell: a fenti közös `tr { display: block }` később áll, és azonos súlyú. */
    [data-theme="paper"] .papir-riport-jegy-tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 16px; }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-prio { grid-column: 1 / 2; padding-top: 0; }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-allapot { grid-column: 2 / -1; padding-top: 0; }
    [data-theme="paper"] .papir-riport-jegy-tabla td.c-erkezett { grid-column: 1 / -1; }
    [data-theme="paper"] .papir-riport-idoszak { margin-left: 0; }

    [data-theme="paper"] .papir-riport-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-riport-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-riport-kpi .papir-kpi-szam { font-size: 24px; }
}

/*
 * STATISZTIKA — a kész oldalak nyelvén.
 *
 * Ugyanaz a forma, mint a Riportnál: a szűrő nem külön doboz, az időszak gyorsválasztói
 * fülek (a kiemelt az érvényes), a hat szám kártyasor (a nulla halvány, de ott van),
 * a két diagram és a táblák visszafogott kártyán. A három kis tábla telefonon kártya:
 * a Riport `papir-riport-tabla` alapját használják, és csak a rácsot szabják újra.
 * Csak változókkal: a Papír sötétben így nem kell külön pár.
 */
[data-theme="paper"] .papir-stat-szuro { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
@media print { [data-theme="paper"] .papir-stat-szuro { display: none; } }
/* A hosszú cégnév ne feszítse ki a szűrőt (ugyanaz a döntés, mint a Riportnál). */
[data-theme="paper"] .papir-stat-szuro .select-wrap { max-width: 100%; }
[data-theme="paper"] .papir-stat-szuro .select-trigger { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="paper"] .papir-stat-idoszak { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; justify-content: flex-start; align-self: flex-start; margin: 4px 0 0; }
/* A trend a szám alatt, két halk sorban: a nyíl+százalék és a viszonyítási érték. */
[data-theme="paper"] .papir-stat-trend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12.5px; }
[data-theme="paper"] .papir-stat-trend .trend { margin-left: 0; font-size: 12.5px; }
[data-theme="paper"] .papir-stat-trend .trend-elozo { margin-left: 0; font-size: 12px; }
/* A diagramdobozok és a táblák ugyanolyan kártyák, mint a többi Papír-oldalon. */
[data-theme="paper"] .stat-chart-box,
[data-theme="paper"] .stat-table-wrap { border-radius: 16px; padding: 20px; }
[data-theme="paper"] .stat-chart-title,
[data-theme="paper"] .papir-stat-cim,
[data-theme="paper"] .papir-stat-doboz h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text); }
[data-theme="paper"] .papir-stat-cim { margin: 0 0 8px; }
[data-theme="paper"] .papir-stat-index { font-family: var(--font-display); letter-spacing: -0.02em; }
/* A szám a display betűt kapja, a felirata alatta nem (a szoros betűköz a kis szövegen olvashatatlan). */
[data-theme="paper"] .papir-stat-index .small { font-family: var(--font-body); letter-spacing: 0; }
[data-theme="paper"] .papir-stat-tabla { width: 100%; }
[data-theme="paper"] .papir-stat-tabla td.c-nev .name-badge { width: 24px; height: 24px; margin: 0 8px 0 0; font-size: 10.5px; }
@media (min-width: 721px) {
    /* Asztalon a számoszlopok jobbra zárnak, mint a Riportban — így a számjegyek egymás alá esnek. */
    [data-theme="paper"] .papir-stat-tabla th:not(:first-child),
    [data-theme="paper"] .papir-stat-tabla td.c-szam { text-align: right; }
}
/*
 * MI VOLT A BAJ — KÉT KÖR
 *
 * 2026-10-15: Attila jelezte, hogy keskenyebb sávban (az admin oldalsáv
 * 1300 képpont alatt ikon-nézetre csukódik) „az utolsó 4 gomb le van
 * csúszva". Akkor a fülek a `.filters` sorában a `margin-left:auto` miatt a
 * JOBB szélre csúsztak, elszakadva a dátummezőktől. A javítás ekkor csak
 * erre a köztes (720–1300 képpont) sávra szólt: saját, teljes szélességű,
 * balra igazított sor.
 *
 * 2026-10-16: kiderült, hogy SZÉLES nézetben (1300 fölött) ugyanez a
 * `margin-left:auto` ugyanígy jobbra csúsztatta a fület, ha a szűrősor
 * egyébként is tördelt (pl. sok ügyfélcég a legördülőben, hosszabb
 * feliratok) — tehát a hiba nem a köztes sávhoz kötődött, hanem magához a
 * `margin-left:auto`-hoz. Ezért ez most ALAPÉRTELMEZETTEN saját sor, balra
 * zárva, nem csak egy szűk tartományban.
 */
@media (max-width: 720px) {
    /* Telefonon a fülek a szűrő ELŐTT állnak: az időszak választása a leggyakoribb művelet, nem a dátummezők. */
    [data-theme="paper"] .papir-stat-idoszak { order: -1; margin: 0 0 8px; }
    [data-theme="paper"] .papir-stat-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-stat-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-stat-kpi .papir-kpi-szam { font-size: 24px; }
    [data-theme="paper"] .stat-chart-box,
    [data-theme="paper"] .stat-table-wrap { padding: 16px; }
    /* A `.papir-riport-tabla` közös szabálya `tr { display: block }` — a kétosztályos szelektor erősebb, ezért a sorrendtől független. */
    [data-theme="paper"] .papir-riport-tabla.papir-stat-tabla tr {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px 10px; align-items: start;
    }
    [data-theme="paper"] .papir-riport-tabla.papir-stat-tabla td.c-nev { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; }
    [data-theme="paper"] .papir-riport-tabla.papir-stat-tabla td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 1px;
        font-size: 11px; color: var(--text-faint);
    }
}

/* ==========================================================================
   ÜGYFELEK — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).
   ========================================================================== */
[data-theme="paper"] .ceg-nev-mezo { display: flex; align-items: center; gap: 10px; }
[data-theme="paper"] .ceg-nev-mezo .name-badge { width: 28px; height: 28px; margin: 0; font-size: 11px; }
[data-theme="paper"] .ceg-nev-mezo input { flex: 1; min-width: 0; }
[data-theme="paper"] .papir-ugyfel-kpi .papir-kpi { text-decoration: none; }
[data-theme="paper"] .papir-ugyfel-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* A táblázat–kártya határ 1100 px (a közös `.tenant-table` szabály szerint) — a kompakt kártya is ott kezdődik. */
@media (max-width: 1100px) {
    /* A cég kompakt kártya: név egész sorban, ügyfél és jegy egymás mellett, a többi teljes szélességben.
       Kétosztályos szelektor (`tr.ceg-sor`): a közös `.tenant-table tr { display: block }` sem írhatja felül. */
    [data-theme="paper"] .tenant-table tr.ceg-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; align-items: center;
    }
    [data-theme="paper"] .tenant-table tr.ceg-sor > td { grid-column: 1 / -1; min-width: 0; }
    [data-theme="paper"] .tenant-table tr.ceg-sor > td:nth-child(2),
    [data-theme="paper"] .tenant-table tr.ceg-sor > td:nth-child(3) { grid-column: auto; }
    [data-theme="paper"] .tenant-table tr.ceg-sor > td:first-child { padding-bottom: 6px; }
}
@media (max-width: 720px) {
    [data-theme="paper"] .papir-ugyfel-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-ugyfel-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-ugyfel-kpi .papir-kpi-szam { font-size: 24px; }
}

/* ==========================================================================
   CSAPAT — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ: a régi tábla ~1020 px széles volt, a Papír pedig egy 380 px-es
   oldalsávot ad a „Új csapattag" űrlapnak — 1667 px-en a lista 981 px-re fért,
   a műveletek oszlopa az űrlap alá csúszott, telefonon pedig csak a Név oszlop
   látszott (a többi a kártyán belüli vízszintes görgetés mögött).
   A sor most rács: az adatok egy sorban, a műveletek alatta, teljes szélességben.
   ========================================================================== */
[data-theme="paper"] .grid-detail.papir-csapat { grid-template-columns: minmax(0, 1fr); }
[data-theme="paper"] body:not(.portal-jegy) .grid-detail.papir-csapat > .card:first-child {
    background: var(--surface); border: 1px solid var(--border); padding: 20px;
}
[data-theme="paper"] .grid-detail.papir-csapat > .card + .card { max-width: 640px; }
[data-theme="paper"] .papir-csapat-cim { margin: 0 0 8px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text); }
[data-theme="paper"] .papir-csapat-kpi .papir-kpi { text-decoration: none; }
[data-theme="paper"] .csapat-nev-sor { display: flex; align-items: center; gap: 10px; font-weight: 600; }
[data-theme="paper"] .csapat-nev-sor .name-badge { width: 28px; height: 28px; margin: 0; font-size: 11px; }
[data-theme="paper"] table.papir-csapat-tabla,
[data-theme="paper"] table.papir-csapat-tabla thead,
/* `min-width: 0 !important`: a `.card table { min-width: 520px }` (négy :not-tal) erősebb szelektor, és telefonon oldalra tolná a kártyát. */
[data-theme="paper"] table.papir-csapat-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
[data-theme="paper"] table.papir-csapat-tabla thead tr,
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor {
    display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(0, 1.2fr) 190px 84px 130px;
    column-gap: 14px; align-items: start;
}
[data-theme="paper"] table.papir-csapat-tabla thead th.c-muv { display: none; }
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td { min-width: 0; overflow-wrap: anywhere; }
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-muv { grid-column: 1 / -1; overflow-wrap: normal; }
/* A rácsba tett sorban a cellák keretei és nagy kitöltése szakadozott vonalat adnának: a vonal a soré. */
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor { border-top: 1px solid var(--border); }
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td { border: 0 !important; padding: 14px 0 6px !important; }
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-muv { padding-top: 0 !important; }
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-beallitas-sor > td { border: 0 !important; padding: 0 0 10px !important; }
[data-theme="paper"] table.papir-csapat-tabla thead th { padding-left: 0; padding-right: 0; }
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-beallitas-sor,
[data-theme="paper"] table.papir-csapat-tabla tr.csapat-beallitas-sor > td { display: block; }
@media (max-width: 1100px) {
    [data-theme="paper"] table.papir-csapat-tabla thead { display: none; }
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor { grid-template-columns: 1fr 1fr; column-gap: 12px; }
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-nev,
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-email,
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-szerep { grid-column: 1 / -1; }
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td[data-cimke]:not(.c-email)::before {
        content: attr(data-cimke); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-faint);
    }
}
/* Tableten van hely: az e-mail és a szerepkör egymás mellett, alattuk a státusz és a belépés. */
@media (min-width: 721px) and (max-width: 1100px) {
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-email,
    [data-theme="paper"] table.papir-csapat-tabla tr.csapat-sor > td.c-szerep { grid-column: auto; }
}
@media (max-width: 720px) {
    [data-theme="paper"] .papir-csapat-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-csapat-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-csapat-kpi .papir-kpi-szam { font-size: 24px; }
    [data-theme="paper"] .grid-detail.papir-csapat > .card:first-child { padding: 14px; }
}

/* ==========================================================================
   ESZKÖZÖK — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ: az „Új eszköz" űrlap MINDIG nyitva állt a lista fölött (~580 px),
   az eszköz első cellájában négy-öt sor címke:érték állt (~117 px-es sorok), és
   telefonon a tábla oldalra görgetett — a Lejárat és a Jelentkezés oszlop kilógott.
   ========================================================================== */
[data-theme="paper"] .papir-eszkoz-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
[data-theme="paper"] .papir-eszkoz-fej { margin-bottom: 12px; }

/*
 * MIÉRT KELL `align-self: flex-start`.
 *
 * MI VOLT A BAJ (Attila jelezte, 2026-10-25 — „nagyon hosszú" a kék gomb)
 * A gomb az `.app-main`-nak (a lábléc leszorításához szándékosan
 * `display:flex; flex-direction:column`-ra állított fő tartalom-terület,
 * lásd feljebb) KÖZVETLEN gyereke. Egy flex oszlop `align-items` alapértéke
 * `normal`, ami flex-konténerben `stretch`-ként viselkedik — ez a KERESZT-
 * tengelyen (oszlopnál ez a SZÉLESSÉG) a teljes konténer szélességére
 * nyújtja a gyereket, FÜGGETLENÜL attól, hogy a gyerek saját maga
 * `display: inline-flex`-e vagy sem. Az `inline-flex` csak azt szabja meg,
 * hogy a GOMB SAJÁT tartalma (ikon/szöveg span) hogyan rendeződik, nem azt,
 * hogy a SZÜLŐ hogyan nyújtja a gombot — ezért nem volt elég.
 *
 * A JAVÍTÁS: `align-self: flex-start` a gombon — ez felülírja a szülőtől
 * örökölt nyújtást, a gomb a tartalmához igazodó, természetes szélességű
 * marad, függetlenül attól, hogy a szülő flex-elrendezése mikor/hogyan
 * változik a jövőben.
 */
/* Az új eszköz űrlapja: gombra nyílik, szerkesztéskor és hibás mentés után nyitva áll (script nélkül). */
[data-theme="paper"] .eszkoz-urlap-kapcsolo { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
[data-theme="paper"] label.eszkoz-urlap-gomb {
    display: inline-flex; align-items: center; align-self: flex-start; margin: 0 0 16px; cursor: pointer;
    font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none;
}
[data-theme="paper"] .eszkoz-urlap-zar { display: none; }
[data-theme="paper"] .eszkoz-urlap-kapcsolo:checked + .eszkoz-urlap-gomb .eszkoz-urlap-nyit { display: none; }
[data-theme="paper"] .eszkoz-urlap-kapcsolo:checked + .eszkoz-urlap-gomb .eszkoz-urlap-zar { display: inline; }
[data-theme="paper"] .eszkoz-urlap-kapcsolo:not(:checked) ~ #eszkoz-urlap { display: none; }
[data-theme="paper"] .eszkoz-urlap-kapcsolo:focus-visible + .eszkoz-urlap-gomb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Az eszköz adatai egy tördelhető sorban, nem egymás alatt: a sor 117 px helyett ~60 px. */
[data-theme="paper"] td.c-eszkoz .eszkoz-meta { display: flex; flex-wrap: wrap; gap: 1px 14px; margin-top: 2px; }
[data-theme="paper"] td.c-eszkoz .eszkoz-meta > div { margin: 0; }

@media (max-width: 1100px) {
    /* `min-width: 0 !important`: a `.card table { min-width: 520px }` (négy :not-tal) erősebb szelektor. */
    [data-theme="paper"] table.papir-eszkoz-tabla,
    [data-theme="paper"] table.papir-eszkoz-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-eszkoz-tabla thead { display: none; }
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-cegsor,
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-cegsor > td { display: block; }
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-cegsor > td { position: static; padding-left: 0; padding-right: 0; }
    /* Kétosztályos szelektor: a közös táblázatszabályok sem írhatják felül. */
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: start;
        padding: 12px 0; border-top: 1px solid var(--border);
    }
    /* A csoport-csukás a `hidden` attribútummal dolgozik — a `display: grid` nem nyithatja vissza. */
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor[hidden] { display: none; }
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; overflow-wrap: anywhere; background: none; }
    /* A jegyszám és a gombok egy sorban: bal oszlopban a szám, jobbra a két gomb. */
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor > td.c-eszkoz { grid-column: 1 / -1; }
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor > td.c-jegy,
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor > td.c-muv { text-align: left !important; }
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor > td.c-muv { align-self: end; white-space: normal !important; }
    [data-theme="paper"] table.papir-eszkoz-tabla tr.eszkoz-sor > td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 1px;
        font-size: 11px; color: var(--text-faint);
    }
}
@media (max-width: 720px) {
    [data-theme="paper"] .papir-eszkoz-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-eszkoz-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-eszkoz-kpi .papir-kpi-szam { font-size: 24px; }
}

/* ==========================================================================
   TUDÁSBÁZIS — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ: a cikklista első kártyája a Papíron keret nélkül állt (a
   `.grid-detail > .card:first-child` szabály miatt), a cikkek állapotát emoji
   jelezte, telefonon pedig a két legördülő (kategória, állapot) egymás mellé
   szorult ~150 px-es mezőkbe.
   ========================================================================== */
[data-theme="paper"] .papir-kb-kpi .papir-kpi { text-decoration: none; }
/* A lista kártyájának kerete visszajön (a közös szabály a részletoldalakra keret nélkülit ad). */
[data-theme="paper"] body:not(.portal-jegy) .grid-detail.papir-kb > .card:first-child {
    background: var(--surface); border: 1px solid var(--border); padding: 20px;
}
[data-theme="paper"] .kb-cikk-sor { padding-top: 12px !important; padding-bottom: 12px !important; }
[data-theme="paper"] .kb-cikk-cim { font-size: 15px; }
[data-theme="paper"] .kb-cikk-sor--piszkozat .kb-cikk-cim { color: var(--text-dim) !important; }
[data-theme="paper"] .kb-allapot-jelveny {
    display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px;
    border: 1px solid currentColor; font-size: 11px; font-weight: 600; line-height: 1.5;
}
[data-theme="paper"] .kb-allapot-jelveny--kozzetett { color: var(--success); }
[data-theme="paper"] .kb-allapot-jelveny--piszkozat { color: var(--text-faint); background: var(--surface2); border-color: var(--border); }
@media (max-width: 720px) {
    [data-theme="paper"] .papir-kb-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-kb-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-kb-kpi .papir-kpi-szam { font-size: 24px; }
    [data-theme="paper"] .grid-detail.papir-kb > .card:first-child { padding: 14px; }
    /* A kategória és az állapot egymás alatt: a szerkesztő mezői telefonon is teljes szélességűek. */
    [data-theme="paper"] .kb-szerkeszto-sor { flex-direction: column; gap: 0 !important; }
    /* A gombok a cím alatt, a fogantyú szélétől behúzva. */
    [data-theme="paper"] .kb-cikk-muv { flex-basis: 100%; padding-left: 26px; }
}

/* ==========================================================================
   BEÁLLÍTÁSOK (SLA, KATEGÓRIÁK) — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ: telefonon a Kategóriák táblája használhatatlan volt (a név-mező
   ~40 px-re préselődött, a többi oszlop a kártya szélén kilógott), az SLA
   munkaidő-sorában pedig a `100px !important` időmező levágta az órát („08:0").
   ========================================================================== */
[data-theme="paper"] .papir-sla-kpi .papir-kpi,
[data-theme="paper"] .papir-kat-kpi .papir-kpi { text-decoration: none; }
[data-theme="paper"] .kat-sortmsg-kartya { display: none; }

@media (max-width: 1100px) {
    /* `min-width: 0 !important`: a `.card table { min-width: 520px }` (négy :not-tal) erősebb szelektor. */
    [data-theme="paper"] table.papir-kat-tabla,
    [data-theme="paper"] table.papir-kat-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-kat-tabla thead { display: none; }
    /* A fejlécben lakó „sorrend elmentve" üzenet helyett a lista fölötti sor látszik. */
    [data-theme="paper"] .kat-sortmsg-kartya { display: block; padding: 8px 14px 0; min-height: 22px; }
    /* Kétosztályos szelektor: a közös táblázatszabályok sem írhatják felül. */
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: start;
        padding: 12px 14px; border-top: 1px solid var(--border);
    }
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; background: none; }
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td.c-nev,
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td.c-felelos,
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td.c-muv { grid-column: 1 / -1; }
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td.c-muv { text-align: left !important; white-space: normal !important; }
    /* A mezők inline `min-width`-jét felül kell írni, különben a kártya szélén kilógnak. */
    [data-theme="paper"] table.papir-kat-tabla td.c-nev input { flex: 1 1 auto; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-kat-tabla td.c-felelos select { width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td[data-cimke]::before {
        content: attr(data-cimke); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-faint);
    }
}
/* Tableten van hely: a név, a jegyszám, a felelős és az állapot egy sorban (a cellák sorrendjében), alattuk a gombok. */
@media (min-width: 721px) and (max-width: 1100px) {
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor { grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 1.3fr) 90px; }
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td.c-nev,
    [data-theme="paper"] table.papir-kat-tabla tr.kat-sor > td.c-felelos { grid-column: auto; }
}

/*
 * ISMÉTLŐDŐ JEGYEK (recurring.php) — ugyanaz a kártyanézeti minta, mint a
 * Kategóriáknál.
 *
 * MI VOLT A BAJ: az 520 px-es minimum-szélességű táblát (`.card table`
 * alapszabály) a keskeny kártya levágta — az üres állapot szövege
 * („Még nincs ismétlődő szabály…") is a levágott részen landolt.
 */
@media (max-width: 1100px) {
    [data-theme="paper"] table.papir-rec-tabla,
    [data-theme="paper"] table.papir-rec-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-rec-tabla thead { display: none; }
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: start;
        padding: 12px 14px; border-top: 1px solid var(--border);
    }
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; background: none; }
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor > td.c-feladat,
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor > td.c-muv { grid-column: 1 / -1; }
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor > td.c-muv { text-align: left !important; white-space: normal !important; }
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor > td[data-cimke]::before {
        content: attr(data-cimke); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-faint);
    }
    /* Az üres állapot sora (colspan) is kártyaként, teljes szélességben. */
    [data-theme="paper"] table.papir-rec-tabla td.rec-ures { display: block !important; width: 100% !important; min-width: 0 !important; padding: 12px 14px !important; }
}
@media (min-width: 721px) and (max-width: 1100px) {
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor { grid-template-columns: minmax(0, 1.6fr) 1fr minmax(0, 1fr) 100px 60px; }
    [data-theme="paper"] table.papir-rec-tabla tr.rec-sor > td.c-feladat { grid-column: auto; }
}

/*
 * ESZKÖZTÍPUSOK (asset_types.php) — ugyanaz a kártyanézeti minta, mint a
 * Kategóriáknál és az Ismétlődő jegyeknél: az 520 px-es minimum-szélességű
 * táblát a keskeny kártya itt is levágná.
 */
@media (max-width: 1100px) {
    [data-theme="paper"] table.papir-atip-tabla,
    [data-theme="paper"] table.papir-atip-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-atip-tabla thead { display: none; }
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: start;
        padding: 12px 14px; border-top: 1px solid var(--border);
    }
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; background: none; }
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor > td.c-nev,
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor > td.c-muv { grid-column: 1 / -1; }
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor > td.c-muv { text-align: left !important; white-space: normal !important; }
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor > td[data-cimke]::before {
        content: attr(data-cimke); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-faint);
    }
}
@media (min-width: 721px) and (max-width: 1100px) {
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor { grid-template-columns: minmax(0, 1.6fr) 100px 90px 110px; }
    [data-theme="paper"] table.papir-atip-tabla tr.atip-sor > td.c-nev { grid-column: auto; }
}

/*
 * GYŰJTŐ TOKENEK (asset_tokens.php) — ugyanaz a kártyanézeti minta.
 */
@media (max-width: 1100px) {
    [data-theme="paper"] table.papir-tok-tabla,
    [data-theme="paper"] table.papir-tok-tabla tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-tok-tabla thead { display: none; }
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: start;
        padding: 12px 14px; border-top: 1px solid var(--border);
    }
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; background: none; }
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor > td.c-ceg,
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor > td.c-muv { grid-column: 1 / -1; }
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor > td.c-muv { text-align: left !important; white-space: normal !important; }
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor > td[data-cimke]::before {
        content: attr(data-cimke); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-faint);
    }
}
@media (min-width: 721px) and (max-width: 1100px) {
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 130px 140px 90px; }
    [data-theme="paper"] table.papir-tok-tabla tr.tok-sor > td.c-ceg { grid-column: auto; }
}
@media (max-width: 720px) {
    [data-theme="paper"] .papir-sla-kpi,
    [data-theme="paper"] .papir-kat-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-theme="paper"] .papir-sla-kpi .papir-kpi,
    [data-theme="paper"] .papir-kat-kpi .papir-kpi { padding: 14px 16px; }
    [data-theme="paper"] .papir-sla-kpi .papir-kpi-szam,
    [data-theme="paper"] .papir-kat-kpi .papir-kpi-szam { font-size: 24px; }

    /* SLA: a nap neve külön sorban, alatta a két időmező egyenlő szélességben. */
    [data-theme="paper"] .papir-munkaido .workhours-row > .inline-check { flex-basis: 100%; min-width: 0 !important; }
    [data-theme="paper"] .papir-munkaido .workhours-row input[type=time] { flex: 1 1 0; width: auto !important; min-width: 0; }

    /* A két kis lista (egyedi mezők, cég-specifikus felelősök) kártyává alakul. */
    [data-theme="paper"] table.papir-kat-mini,
    [data-theme="paper"] table.papir-kat-mini tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] table.papir-kat-mini thead { display: none; }
    [data-theme="paper"] table.papir-kat-mini tr.kat-mini-sor {
        display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: start;
        padding: 10px 0; border-top: 1px solid var(--border);
    }
    [data-theme="paper"] table.papir-kat-mini tr.kat-mini-sor > td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; overflow-wrap: anywhere; background: none; }
    [data-theme="paper"] table.papir-kat-mini tr.kat-mini-sor > td.c-mezo { grid-column: 1 / -1; order: -1; }
    [data-theme="paper"] table.papir-kat-mini tr.kat-mini-sor > td.c-muv { grid-column: 1 / -1; text-align: left !important; }
    [data-theme="paper"] table.papir-kat-mini tr.kat-mini-sor > td[data-cimke]::before {
        content: attr(data-cimke); display: block; margin-bottom: 1px;
        font-size: 11px; color: var(--text-faint);
    }
}

/* ==========================================================================
   E-MAIL ELŐNÉZETEK — kinyitható levelek, csoportok, keresés
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ: tizenhat levél állt egymás alatt, mindegyik teljes szélességű
   előnézettel — a lap ~8800 px (telefonon ~10 000 px) hosszú volt, a keresett
   levélhez sokat kellett görgetni. Most minden levél egy csukott sor.
   ========================================================================== */
/* A `hidden` attribútumot a saját `display` szabályaink nem írhatják felül. */
[data-theme="paper"] .ep-szuro[hidden],
[data-theme="paper"] details.ep-level[hidden],
[data-theme="paper"] section.ep-csoport[hidden],
[data-theme="paper"] .ep-nincs-talalat[hidden] { display: none; }

[data-theme="paper"] .ep-szuro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; flex-basis: 100%; }
[data-theme="paper"] .ep-kereso { flex: 1 1 260px; max-width: 380px; margin: 0; }
[data-theme="paper"] .ep-csoportgombok { display: flex; flex-wrap: wrap; gap: 6px; }
[data-theme="paper"] .ep-csoportgomb { padding: 5px 12px; font-size: 12.5px; }
/* A kiválasztott szűrő fordított színű: változókkal, így sötétben is olvasható. */
[data-theme="paper"] .ep-csoportgomb.aktiv { background: var(--accent); color: var(--surface); border-color: var(--accent); }
[data-theme="paper"] .ep-sor-muveletek { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
[data-theme="paper"] .ep-sor-muveletek .btn { padding: 5px 12px; font-size: 12.5px; }
[data-theme="paper"] .ep-szam { color: var(--text-faint); font-weight: 400; margin-left: 2px; }
[data-theme="paper"] .ep-csoportgomb.aktiv .ep-szam { color: inherit; opacity: .75; }

[data-theme="paper"] .ep-csoport-cim { margin: 22px 0 8px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-dim); }

[data-theme="paper"] details.ep-level { margin-bottom: 8px; padding: 0; }
[data-theme="paper"] details.ep-level > summary.ep-fej {
    /* Az első oszlop FIX szélességű: minden levélsor külön rács, ezért a
       fr-alapú (vagy `auto`) oszlop soronként másképp számolódna, és a tárgyak
       máshonnan indulnának. A technikai kulcs nem jelenik meg (a kereső a
       data-kereses-ből még megtalálja). */
    display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 4px 14px;
    padding: 12px 16px; cursor: pointer; list-style: none;
}
[data-theme="paper"] details.ep-level > summary.ep-fej::-webkit-details-marker { display: none; }
[data-theme="paper"] details.ep-level > summary.ep-fej:hover { background: var(--surface2); }
[data-theme="paper"] details.ep-level > summary.ep-fej:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-theme="paper"] .ep-nev { font-weight: 600; color: var(--text); }
[data-theme="paper"] .ep-nev::before { content: "▸"; display: inline-block; width: 1em; margin-right: 6px; color: var(--text-faint); transition: transform .15s; }
[data-theme="paper"] details.ep-level[open] > summary .ep-nev::before { transform: rotate(90deg); }
[data-theme="paper"] .ep-targy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="paper"] details.ep-level[open] > summary.ep-fej { border-bottom: 1px solid var(--border); }
[data-theme="paper"] details.ep-level > .ep-torzs { padding: 14px 16px 16px; }
@media (max-width: 720px) {
    [data-theme="paper"] details.ep-level > summary.ep-fej { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
    /* Telefonon a tárgy törik, nem vágódik le. */
    [data-theme="paper"] .ep-targy { white-space: normal; padding-left: calc(1em + 6px); }
    [data-theme="paper"] .ep-kereso { max-width: none; }
    [data-theme="paper"] .ep-sor-muveletek { margin-left: 0; }
    [data-theme="paper"] details.ep-level > .ep-torzs { padding: 12px 14px 14px; }
}

/* ==========================================================================
   E-MAIL BEÁLLÍTÁSOK — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ: két hosszú, egyoszlopos űrlapkártya állt egymás mellett, és a
   bal (~830 px) meg a jobb (~1170 px) eltérő magasságú volt; minden rövid mező
   (port, titkosítás, felhasználónév, jelszó) külön sort foglalt. A bekapcsoló
   jelölőnégyzet felirata nagybetűs, apró mezőfelirat-stílusban állt, mintha
   egy mező neve lenne, nem egy kapcsoló.
   ========================================================================== */
/* Klasszikuson a `.email-par` sima doboz (a mezők egymás alatt maradnak). */
/* `align-items: end`: ha az egyik felirat két sorba törik (pl. „IMAP felhasználónév (a postaláda e-mail címe)"),
   a párja ne csússzon el mellette — a MEZŐK igazodjanak egymáshoz, ne a feliratok teteje. */
[data-theme="paper"] .email-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: end; }
/* Port + titkosítás: a választó hosszú szövegű („TLS / STARTTLS (ajánlott, általában 587-es port)"), a port keskeny. */
[data-theme="paper"] .email-par.email-par--port { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
[data-theme="paper"] .email-par > div { min-width: 0; }
/* A kártyák felül igazodnak; a kulcsszámok szöveges értéke (pl. „Nincs beállítva") kisebb betűvel is elfér. */
[data-theme="paper"] .papir-email-kpi .papir-kpi-szam { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
[data-theme="paper"] .papir-email-kpi .papir-kpi { text-decoration: none; }
/*
 * ÖT KÁRTYA, EGY SORBAN — vagy két oszlopban, az utolsó teljes szélességgel.
 * Az auto-fit 4+1-re törne (tableten egy árva kártyával), ezért a szám rögzített:
 * 900 px fölött öt oszlop (a szöveges érték kártyán belül törik), alatta kettő.
 */
@media (min-width: 900px) {
    [data-theme="paper"] .papir-email-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    [data-theme="paper"] .papir-email-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-theme="paper"] .papir-email-kpi .papir-kpi:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    /* Telefonon a mezők újra egymás alatt: két oszlopban a jelszó és a felhasználónév beleférne, de az érintés-célpont szűk lenne. */
    [data-theme="paper"] .email-par,
    [data-theme="paper"] .email-par.email-par--port { grid-template-columns: minmax(0, 1fr); }
    [data-theme="paper"] .papir-email-kpi .papir-kpi-szam { font-size: 21px; }
}

/* ==========================================================================
   BEJELENTÉS REGISZTRÁCIÓ NÉLKÜL — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ
   1. A cégkártya fejrésze a nyilvános bejelentőlap `.guest-head` osztályát
      viselte, ami `margin-bottom: 20px`-t és középre igazítást ad — ezért a
      csukott kártyák alján ~40 px üres sáv állt. Az osztály most
      `.guest-ceg-fej`, így a két oldal nem zavarja egymást.
   2. Az állapotjelvények beégetett hex színekkel készültek soron belül, ezért
      sötét témában nem követték a palettát.
   3. Csukott kártyáról nem látszott, MI van beállítva (melyik domain, hány cím).
   ========================================================================== */
[data-theme="paper"] .papir-guest-kpi .papir-kpi-szam { font-size: 26px; line-height: 1.15; }
@media (min-width: 900px) {
    [data-theme="paper"] .papir-guest-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    [data-theme="paper"] .papir-guest-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-theme="paper"] .papir-guest-kpi .papir-kpi:last-child { grid-column: 1 / -1; }
}
[data-theme="paper"] .guest-bevezeto { max-width: 72ch; margin: 0 0 8px; line-height: 1.55; }

/* Cégkártya: a fej egy sor, a beállítások kattintásra nyílnak. */
[data-theme="paper"] .guest-row { margin-bottom: 10px; scroll-margin-top: 16px; padding: 0; }
[data-theme="paper"] .guest-ceg-fej {
    display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
    padding: 12px 18px; cursor: pointer;
}
[data-theme="paper"] .guest-ceg-fej:hover { background: var(--surface2); border-radius: inherit; }
[data-theme="paper"] .guest-ceg-nev { margin: 0; font-size: 15px; display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
[data-theme="paper"] .guest-ceg-allapot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
[data-theme="paper"] .guest-osszegzes { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cím nélküli lista: mindenkit kizár — a csukott sorban is piros. */
[data-theme="paper"] .guest-osszegzes--hiba { color: var(--danger); font-weight: 600; }
[data-theme="paper"] .guest-row.is-open .guest-ceg-fej { border-bottom: 1px solid var(--border); }
[data-theme="paper"] .guest-row .guest-body { padding: 14px 18px 18px; }
[data-theme="paper"] .guest-row .guest-body > form { margin-top: 0 !important; }
/* A zebra-háttér itt zavaró: a fej maga is színt vált fölé érve. */
[data-theme="paper"] .guest-row.zebra { background: var(--surface); }

/* Állapotjelvény — a kész oldalak jelvényeinek színnyelvén. */
[data-theme="paper"] .guest-jelveny {
    font-size: 11px; background: var(--surface2); color: var(--text-faint); border: 1px solid var(--border);
}
[data-theme="paper"] .guest-jelveny--be {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

/* Mód + domain + Mentés: a mezők alsó éle egy vonalban. */
[data-theme="paper"] .guest-mod-sor { align-items: flex-end; }
[data-theme="paper"] .guest-mod-sor > div[style*="flex:1"] { flex: 1 1 260px; }

/* Felvett címek. */
[data-theme="paper"] .guest-cim-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
[data-theme="paper"] .guest-cim { background: var(--surface2); border: 1px solid var(--border); font-weight: 500; }
[data-theme="paper"] .guest-cim form { display: inline-flex; margin: 0; }
[data-theme="paper"] .guest-cim-torol {
    background: none; border: 0; padding: 0 2px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--text-faint);
}
[data-theme="paper"] .guest-cim-torol:hover { color: var(--danger); }
[data-theme="paper"] .guest-cim-torol:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

[data-theme="paper"] .guest-ures-jelzes { margin: 0 0 10px; color: var(--text-faint); }
[data-theme="paper"] .guest-ures-jelzes--hiba { color: var(--danger); }
[data-theme="paper"] .guest-figyelmeztetes {
    margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; color: var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
[data-theme="paper"] .guest-figyelmeztetes[hidden] { display: none; }
[data-theme="paper"] .guest-list-block[hidden] { display: none; }

@media (max-width: 560px) {
    [data-theme="paper"] .papir-guest-kpi .papir-kpi-szam { font-size: 22px; }
    [data-theme="paper"] .guest-ceg-fej { padding: 12px 14px; }
    [data-theme="paper"] .guest-row .guest-body { padding: 12px 14px 14px; }
    [data-theme="paper"] .guest-osszegzes { max-width: 100%; white-space: normal; }
    [data-theme="paper"] .guest-mod-sor > div,
    [data-theme="paper"] .guest-cim-felvetel > div { min-width: 0 !important; flex: 1 1 100% !important; }
}

/* ==========================================================================
   PORTÁLOS TÁJÉKOZTATÓK — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ
   1. A 12 soros szövegmező + a formázási súgó (~700 px) a lista FÖLÖTT állt: aki
      csak a visszaigazolási számokat nézte, egy képernyőt görgetett. Most az
      űrlap gombra nyílik (szerkesztéskor / üres állapotban nyitva).
   2. Az „Aktív" jelvény beégetett hex színű volt (sötétben nem követte a palettát).
   3. Az oldal menüpontja nem világított (az `$activeNav` „settings" volt, amihez
      nincs menüpont).
   4. A táblázat telefonon 5 oszlopot próbált megtartani.
   ========================================================================== */
[data-theme="paper"] .papir-pd-kpi .papir-kpi-szam { font-size: 26px; line-height: 1.15; }
@media (max-width: 899px) {
    /* Négy kártya: 2 × 2 (az auto-fit egy keskeny tableten 3 + 1-re törne). */
    [data-theme="paper"] .papir-pd-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme="paper"] .pd-bevezeto { max-width: 76ch; margin: 0 0 16px; line-height: 1.55; }

/* Az új tájékoztató űrlapja: gombra nyílik (script nélkül). */
[data-theme="paper"] .pd-urlap-kapcsolo { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
[data-theme="paper"] label.pd-urlap-gomb {
    display: inline-flex; align-items: center; align-self: flex-start; margin: 0 0 16px; cursor: pointer;
    font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none;
}
[data-theme="paper"] .pd-urlap-zar { display: none; }
[data-theme="paper"] .pd-urlap-kapcsolo:checked + .pd-urlap-gomb .pd-urlap-nyit { display: none; }
[data-theme="paper"] .pd-urlap-kapcsolo:checked + .pd-urlap-gomb .pd-urlap-zar { display: inline; }
[data-theme="paper"] .pd-urlap-kapcsolo:not(:checked) ~ .pd-urlap { display: none; }
[data-theme="paper"] .pd-urlap-kapcsolo:focus-visible + .pd-urlap-gomb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Verzió + jelölőnégyzet: a jelölő felirata a mező aljához igazodik. */
[data-theme="paper"] .pd-verzio-sor > div input { margin-bottom: 0; }

/* A lista: fix szélességű oszlopok, a cím kapja a maradékot — minden sor egy vonalban. */
[data-theme="paper"] .pd-lista { padding: 0; overflow: hidden; }
[data-theme="paper"] .pd-sor {
    display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px 110px 190px;
    align-items: center; gap: 4px 14px; padding: 12px 18px; border-top: 1px solid var(--border);
}
[data-theme="paper"] .pd-sor:first-child { border-top: 0; }
[data-theme="paper"] .pd-sor--fej {
    padding-top: 10px; padding-bottom: 10px; background: var(--surface2);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
[data-theme="paper"] .pd-sor--inaktiv .pd-cim,
[data-theme="paper"] .pd-sor--inaktiv .pd-ertek { opacity: .55; }
[data-theme="paper"] .pd-cim { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
[data-theme="paper"] .pd-cim .small { font-weight: 400; }
/* Balra igazítva: a „Szerkesztés" azonos szélességű, így a második gomb minden sorban ugyanonnan indul (jobbra igazítva az „Aktiválás"/„Inaktiválás" eltérő szélessége elcsúsztatta). */
[data-theme="paper"] .pd-muv { display: flex; gap: 6px; justify-content: flex-start; }
[data-theme="paper"] .pd-muv form { margin: 0; }
[data-theme="paper"] .pd-muv .btn { padding: 4px 11px; font-size: 12px; }

[data-theme="paper"] .pd-jelveny { font-size: 11px; background: var(--surface2); color: var(--text-faint); border: 1px solid var(--border); }
[data-theme="paper"] .pd-jelveny--be {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

@media (max-width: 720px) {
    /* Telefonon a sor kártya: cím, alatta a három érték feliratozva, alatta a gombok. */
    [data-theme="paper"] .pd-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 14px; }
    /* A fejsor a `.pd-sor` UTÁN: azonos specificitásnál a későbbi nyer, különben telefonon is látszana. */
    [data-theme="paper"] .pd-sor.pd-sor--fej { display: none; }
    [data-theme="paper"] .pd-cim { flex: 1 1 100%; }
    [data-theme="paper"] .pd-ertek[data-cimke]::before {
        content: attr(data-cimke) ": "; color: var(--text-faint); font-weight: 400; font-size: 11px;
    }
    [data-theme="paper"] .pd-muv { flex: 1 1 100%; margin-top: 4px; }
    /* A formázási súgó két oszlopa telefonon kilógott a dobozból → egymás alá. */
    [data-theme="paper"] .pd-urlap .formazas-tabla,
    [data-theme="paper"] .pd-urlap .formazas-tabla tbody,
    [data-theme="paper"] .pd-urlap .formazas-tabla tr,
    [data-theme="paper"] .pd-urlap .formazas-tabla td { display: block; width: auto; }
    /* `.card table { min-width: 520px }` telefonon is 520 px-re nyújtaná. */
    [data-theme="paper"] .pd-urlap .formazas-tabla { min-width: 0 !important; }
    [data-theme="paper"] .pd-urlap .formazas-tabla td:first-child { padding-bottom: 0; white-space: normal; overflow-wrap: anywhere; }
    [data-theme="paper"] .pd-urlap .formazas-tabla tr { padding: 4px 0; }
    [data-theme="paper"] .papir-pd-kpi .papir-kpi-szam { font-size: 22px; }
}

/* ==========================================================================
   SAJÁT CÉGEK — a kész oldalak nyelvén
   Csak változókat használ (Papír sötétben nem kell külön pár).

   MI VOLT A BAJ
   1. A 16 mezős űrlap a lista alatt állt, és a lap végén kezdődött: aki csak azt
      nézte, hány cége van és melyiknek nincs saját levelezése, görgetett. Most az
      űrlap gombra nyílik (szerkesztéskor, hibás mentés után, cég nélkül nyitva).
   2. A táblázat telefonon öt oszlopot próbált megtartani.
   3. A figyelmeztetés („nincs saját levélküldés") és a szerkesztett sor kiemelése
      soron belüli stílus volt, ezért sötétben sem igazodott a palettához.
   ========================================================================== */
[data-theme="paper"] .papir-oc-kpi .papir-kpi-szam { font-size: 26px; line-height: 1.15; }
@media (max-width: 899px) {
    /* Négy kártya: 2 × 2 (az auto-fit egy keskeny tableten 3 + 1-re törne). */
    [data-theme="paper"] .papir-oc-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme="paper"] .oc-bevezeto { max-width: 76ch; margin: 0 0 16px; line-height: 1.55; }

/* Az új cég űrlapja: gombra nyílik (script nélkül). */
[data-theme="paper"] .oc-urlap-kapcsolo { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
[data-theme="paper"] label.oc-urlap-gomb {
    display: inline-flex; align-items: center; align-self: flex-start; margin: 0 0 16px; cursor: pointer;
    font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none;
}
[data-theme="paper"] .oc-urlap-zar { display: none; }
[data-theme="paper"] .oc-urlap-kapcsolo:checked + .oc-urlap-gomb .oc-urlap-nyit { display: none; }
[data-theme="paper"] .oc-urlap-kapcsolo:checked + .oc-urlap-gomb .oc-urlap-zar { display: inline; }
[data-theme="paper"] .oc-urlap-kapcsolo:not(:checked) ~ .oc-urlap { display: none; }
[data-theme="paper"] .oc-urlap-kapcsolo:focus-visible + .oc-urlap-gomb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A `.form-grid-2` osztálynak SEHOL nem volt stílusa: az űrlap mezői mind egymás alatt,
   teljes szélességben álltak (1600 px-en 1500 px-es név-mező). Két oszlop; telefonon egy. */
[data-theme="paper"] .oc-urlap .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 720px) { [data-theme="paper"] .oc-urlap .form-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* A lista: fix szélességű oszlopok, a név kapja a maradékot — minden sor egy vonalban. */
[data-theme="paper"] .oc-lista { padding: 0; overflow: hidden; }
[data-theme="paper"] .oc-sor {
    display: grid; grid-template-columns: minmax(0, 1fr) 170px 130px 150px 190px;
    align-items: center; gap: 4px 14px; padding: 12px 18px; border-top: 1px solid var(--border);
}
[data-theme="paper"] .oc-sor:first-child { border-top: 0; }
[data-theme="paper"] .oc-sor--fej {
    padding-top: 10px; padding-bottom: 10px; background: var(--surface2);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
/* A szerkesztett sor kiemelve: a lista és az űrlap közt így látszik az összefüggés. */
[data-theme="paper"] .oc-sor--szerkesztett { background: var(--surface2); }
[data-theme="paper"] .oc-sor--inaktiv .oc-nev,
[data-theme="paper"] .oc-sor--inaktiv .oc-ertek { opacity: .55; }
[data-theme="paper"] .oc-nev { color: var(--text); overflow-wrap: anywhere; }
[data-theme="paper"] .oc-nev strong { font-weight: 600; }
[data-theme="paper"] .oc-jelveny { margin-left: 6px; font-size: 11px; background: var(--surface2); color: var(--text-faint); border: 1px solid var(--border); }
[data-theme="paper"] .oc-figyelmeztet { margin-top: 3px; color: var(--warning); }
[data-theme="paper"] .oc-megjegyzes { margin-top: 3px; }
/* Balra igazítva: a „Szerkesztés" azonos szélességű, így a második gomb minden sorban ugyanonnan indul. */
[data-theme="paper"] .oc-muv { display: flex; gap: 6px; justify-content: flex-start; }
[data-theme="paper"] .oc-muv form { margin: 0; }
[data-theme="paper"] .oc-muv .btn { padding: 0 11px; height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; font-size: 12px; line-height: 1; }
[data-theme="paper"] .oc-muv .oc-letiltott { opacity: .45; cursor: help; }

@media (max-width: 720px) {
    /* Telefonon a sor kártya: név, alatta a három érték feliratozva, alatta a gombok. */
    [data-theme="paper"] .oc-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 14px; }
    /* A fejsor a `.oc-sor` UTÁN: azonos specificitásnál a későbbi nyer, különben telefonon is látszana. */
    [data-theme="paper"] .oc-sor.oc-sor--fej { display: none; }
    [data-theme="paper"] .oc-nev { flex: 1 1 100%; }
    [data-theme="paper"] .oc-ertek[data-cimke]::before {
        content: attr(data-cimke) ": "; color: var(--text-faint); font-weight: 400; font-size: 11px;
    }
    [data-theme="paper"] .oc-muv { flex: 1 1 100%; margin-top: 4px; }
    [data-theme="paper"] .papir-oc-kpi .papir-kpi-szam { font-size: 22px; }
}

/* ==========================================================================
   NAPLÓK — audit napló és e-mail napló a kész oldalak nyelvén (2.334.20)

   MI VOLT A BAJ
   Mindkét napló a régi, „adatbázis-kezelő" képét mutatta: az oldalcím a
   régi fejléc, a szűrő külön kártyában, az e-mail napló állapotjelvénye
   beégetett zöld/piros hexa, a két fül egy gombpár. A napi csoportosítás
   viszont jó és marad — a hosszú napló csak így olvasható —, ezért a
   táblázat is marad (a csoportfejléc és az összecsukó szkript <tr>-t vár),
   csak a külseje lesz Papír. Telefonon kártya: a több oszlopos sor 390
   pixelen vagy oldalra tolta a lapot, vagy levágta a tárgyat.
   Csak változókkal: a Papír sötétben nem kell külön szín-pár.
   ========================================================================== */
[data-theme="paper"] .papir-naplo-kpi .papir-kpi-szam { font-size: 26px; line-height: 1.15; }
@media (max-width: 899px) {
    /* Négy kártya: 2 × 2 (az auto-fit egy keskeny tableten 3 + 1-re törne). */
    [data-theme="paper"] .papir-naplo-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme="paper"] .papir-naplo-szuro { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
[data-theme="paper"] .papir-naplo-szuro .filters { align-items: flex-end; }
[data-theme="paper"] .naplo-osszesen { margin: 0 0 12px !important; }
[data-theme="paper"] .naplo-fulek { margin: 0 0 14px; }
[data-theme="paper"] .naplo-fulek > a { text-decoration: none; }
[data-theme="paper"] .naplo-lista--ki .naplo-sugo { padding-bottom: 10px !important; }
[data-theme="paper"] .naplo-lista tr.day-head td {
    background: var(--bg) !important; padding: 12px 16px 6px !important;
    font-size: 12.5px; color: var(--text-dim);
}
[data-theme="paper"] .naplo-lista tr.day-head strong { font-size: 12.5px !important; font-weight: 600; }
[data-theme="paper"] .naplo-lista tr.day-head:hover td { background: var(--surface2) !important; }
/* A művelet neve semleges címke: a sor „mi történt" része legyen az első, ami szembe jön. */
[data-theme="paper"] .naplo-muvelet {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 12px; line-height: 1.5;
}
[data-theme="paper"] .el-allapot { font-weight: 600; }
[data-theme="paper"] .naplo-lista td.c-jegy,
[data-theme="paper"] .naplo-lista--be td.c-mikor { white-space: nowrap; }
[data-theme="paper"] .naplo-lista--be .el-allapot { font-family: var(--font-mono); font-weight: 500; }
[data-theme="paper"] .el-hiba { overflow-wrap: anywhere; }
@media (max-width: 720px) {
    [data-theme="paper"] .naplo-lista thead { display: none; }
    [data-theme="paper"] .naplo-lista table,
    [data-theme="paper"] .naplo-lista tbody { display: block; width: 100%; min-width: 0 !important; }
    [data-theme="paper"] .naplo-lista tr.day-head,
    [data-theme="paper"] .naplo-lista tr.day-head td { display: block; }
    [data-theme="paper"] .naplo-lista tbody tr:not(.day-head):not([hidden]) {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center; column-gap: 10px; row-gap: 5px;
        padding: 12px 16px; border-bottom: 1px solid var(--border);
    }
    [data-theme="paper"] .naplo-lista tbody tr:not(.day-head):not([hidden]) td {
        display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; overflow-wrap: anywhere;
    }
    /* Audit: művelet + idő, alatta a tárgy, alatta ki. */
    [data-theme="paper"] .naplo-lista--audit td.c-muvelet { grid-row: 1; grid-column: 1 / 3; justify-self: start; }
    [data-theme="paper"] .naplo-lista--audit td.c-mikor   { grid-row: 1; grid-column: 3; font-size: 11.5px; }
    [data-theme="paper"] .naplo-lista--audit td.c-reszlet { grid-row: 2; grid-column: 1 / -1; }
    [data-theme="paper"] .naplo-lista--audit td.c-ki      { grid-row: 3; grid-column: 1 / -1; font-size: 12.5px; color: var(--text-dim); }
    /* E-mail napló: tárgy, fél/feladó, alatta idő · jegy · állapot. */
    [data-theme="paper"] .naplo-lista--ki td.c-targy,
    [data-theme="paper"] .naplo-lista--be td.c-targy { grid-row: 1; grid-column: 1 / -1; font-size: 14px; }
    [data-theme="paper"] .naplo-lista--ki td.c-cimzett,
    [data-theme="paper"] .naplo-lista--be td.c-felado { grid-row: 2; grid-column: 1 / -1; font-size: 12.5px; color: var(--text-dim); }
    [data-theme="paper"] .naplo-lista--ki td.c-mikor,
    [data-theme="paper"] .naplo-lista--be td.c-mikor { grid-row: 3; grid-column: 1; font-size: 11.5px; }
    [data-theme="paper"] .naplo-lista--ki td.c-jegy,
    [data-theme="paper"] .naplo-lista--be td.c-jegy { grid-row: 3; grid-column: 2; }
    [data-theme="paper"] .naplo-lista--ki td.c-allapot,
    [data-theme="paper"] .naplo-lista--be td.c-eredmeny { grid-row: 3; grid-column: 3; }
    /* Ha az állapot alatt hibaszöveg / ok is van, külön sort kap, hogy ne nyomja szét a sort. */
    [data-theme="paper"] .naplo-lista--ki td.c-allapot:has(.el-hiba),
    [data-theme="paper"] .naplo-lista--be td.c-eredmeny:has(> div) { grid-row: 4; grid-column: 1 / -1; }
    [data-theme="paper"] .naplo-lista .el-hiba { max-width: none !important; }
}

/* ==========================================================================
   VÁLTOZÁSNAPLÓ — a kész oldalak nyelvén (2.334.21)

   MI VOLT A BAJ
   Az oldal tetején egy külön „jelenlegi verzió" doboz állt, az alatt a
   kiadások kártyái; a tételek jelvénye beégetett hexa volt. Papíron most
   saját fejléc, négy számkártya (verzió, dátum, a mostani sorozat és az
   összes kiadás), alatta ugyanaz a korszak- és kiadáslista — az összecsukott
   „kisebb javítások" és a korszak-nyitás változatlan.
   Csak változókkal: a Papír sötétben nem kell külön szín-pár.
   ========================================================================== */
[data-theme="paper"] .papir-cl-kpi .papir-kpi-szam { font-size: 26px; line-height: 1.15; }
@media (max-width: 899px) {
    /* Négy kártya: 2 × 2 (az auto-fit egy keskeny tableten 3 + 1-re törne). */
    [data-theme="paper"] .papir-cl-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-theme="paper"] .cl-megjegyzes { max-width: 76ch; margin: 0 0 16px; line-height: 1.55; }
[data-theme="paper"] .era-block > summary { border-radius: 14px; padding: 14px 18px; }
[data-theme="paper"] .era-block > summary:hover { border-color: var(--text-faint); }
[data-theme="paper"] .cl-kiadas { border-radius: 14px; }
[data-theme="paper"] .cl-verzio { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
[data-theme="paper"] .cl-kiadas-cim { font-size: 14.5px; line-height: 1.5; }
[data-theme="paper"] .cl-tetel { padding: 8px 0; }
[data-theme="paper"] .cl-tetel + .cl-tetel { border-top: 1px solid var(--border); }
/* Egyenlő széles jelvény: a szöveg minden tételnél ugyanonnan indul (az „ÚJ" és a „VÁLTOZÁS" máshová tette). */
[data-theme="paper"] .cl-tipus { border-radius: 999px; font-family: var(--font-mono); font-weight: 600; margin-top: 3px; width: 88px; min-width: 88px; box-sizing: border-box; }
[data-theme="paper"] .patch-entry { border-left-color: var(--border); }
@media (max-width: 720px) {
    [data-theme="paper"] .papir-cl-kpi .papir-kpi-szam { font-size: 20px; }
    [data-theme="paper"] .papir-cl-kpi .papir-kpi { padding: 14px 16px; }
    /* Telefonon a jelvény a szöveg fölött áll: a szöveg a teljes szélességet kapja. */
    [data-theme="paper"] .cl-tetel { flex-direction: column; gap: 6px; }
    [data-theme="paper"] .cl-tipus { width: auto; min-width: 0; align-self: flex-start; padding: 3px 10px; margin-top: 0; }
    [data-theme="paper"] .cl-szoveg { font-size: 14px; }
    [data-theme="paper"] .era-body { padding-left: 10px; margin-left: 4px; }
    [data-theme="paper"] .cl-patch-datum { margin-left: 0; }
}

/* ==========================================================================
   PORTÁL MENÜSOR — közös fejléc minden ügyfélportál oldalon (2.334.22)
   ========================================================================== */
/*
 * A sáv a lapon KÍVÜL, a .wrap előtt áll (includes/portal_topbar.php): a
 * teljes szélességet kitölti, a tartalma mindig ugyanazon az 1180 pixeles
 * sávon marad. A lenyíló panel lefelé kilóg a sávból, ezért a sávon és a
 * szülein nincs overflow / clip-path.
 */
[data-theme="paper"] .pt-sav {
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: relative; z-index: 20;
}
[data-theme="paper"] .pt-sav-be {
    max-width: 1180px; margin: 0 auto; padding: 12px 16px;
    display: flex; align-items: center; gap: 28px;
}
[data-theme="paper"] .pt-marka {
    display: flex; align-items: center; gap: 10px; flex: none;
    color: var(--text); text-decoration: none;
}
[data-theme="paper"] .pt-marka:hover { text-decoration: none; color: var(--text); }
[data-theme="paper"] .pt-marka-nev { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
[data-theme="paper"] .pt-menu { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; position: relative; }
[data-theme="paper"] .pt-menu::-webkit-scrollbar { display: none; }
[data-theme="paper"] .pt-ful {
    padding: 8px 16px; border-radius: 10px; font-size: 14px; white-space: nowrap;
    color: var(--text-dim); text-decoration: none; position: relative; z-index: 1;
}
[data-theme="paper"] .pt-ful:hover { background: var(--bg); color: var(--text); text-decoration: none; }
[data-theme="paper"] .pt-ful--aktiv { background: var(--bg); color: var(--text); font-weight: 600; }
/*
 * CSÚSZÓ KIJELÖLŐ (portal-menu.js adja hozzá, lásd ott). Amíg a JS be nem
 * tölt (vagy ha le van tiltva), a fenti statikus hover/aktív háttér önállóan
 * is működik — a `.van-csuszka` osztály csak akkor kerül a `.pt-menu`-re,
 * amikor a pirula már tényleg ott van, ezért a kettő SOSEM látszik egyszerre.
 */
[data-theme="paper"] .pt-ful-csuszka {
    position: absolute; top: 2px; left: 0; height: calc(100% - 4px); width: 0;
    border-radius: 10px; background: var(--bg); opacity: 0; z-index: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.22,1,.36,1), width .25s cubic-bezier(.22,1,.36,1), opacity .15s;
}
/*
 * JAVÍTÁS (2026-10-25): az aktív fül SAJÁT háttere korábban itt is
 * átlátszóvá vált — ez specifikusabb szelektor volt, mint a portálos sötét
 * `.pt-ful--aktiv` szabály, ezért amikor a csúszó pirula ELHAGYTA az aktív
 * fület (pl. másik fölé vitted az egeret), az aktív fül fehér szövege
 * háttér nélkül maradt — gyakorlatilag eltűnt. Az aktív fülnek most mindig
 * megmarad a SAJÁT háttere is; csak a hover-elt fül hátterét vesszük el,
 * hogy ott a csúszó pirula látsszon alatta, ne kettőződjön.
 */
/* Az aktív fül közvetlen hoverelésekor NE váljon átlátszóvá — a csúszó
   pirula úgyis rejtve marad rajta (lásd portal-menu.js), a saját fehér
   háttere viszont mindig kell, különben eltűnne a felirat alatta. */
[data-theme="paper"] .pt-menu.van-csuszka .pt-ful:hover:not(.pt-ful--aktiv) { background: transparent; }

[data-theme="paper"] .pt-fiok, [data-theme="paper"] .pt-vendeg { position: relative; margin-left: auto; flex: none; }
[data-theme="paper"] .pt-vendeg { display: flex; align-items: center; gap: 10px; }
[data-theme="paper"] .pt-fiok-gomb {
    display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; border-radius: 12px;
    background: transparent; color: var(--text); font: inherit; text-align: right; cursor: pointer;
}
[data-theme="paper"] .pt-fiok-gomb:hover { background: var(--bg); }
[data-theme="paper"] .pt-fiok-szoveg { display: flex; flex-direction: column; line-height: 1.25; }
[data-theme="paper"] .pt-fiok-nev { font-size: 13.5px; font-weight: 600; }
[data-theme="paper"] .pt-fiok-ceg { font-size: 12px; color: var(--text-faint); }
[data-theme="paper"] .pt-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); color: var(--text);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
[data-theme="paper"] .pt-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 250px;
    display: flex; flex-direction: column; gap: 2px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 12px 32px var(--shadow);
}
/* A display: flex erősebb a böngésző [hidden] szabályánál — külön kell érvényre juttatni. */
[data-theme="paper"] .pt-panel[hidden] { display: none; }
[data-theme="paper"] .pt-panel-sor { padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: 13.5px; text-decoration: none; }
[data-theme="paper"] .pt-panel-sor:hover { background: var(--bg); text-decoration: none; color: var(--text); }
[data-theme="paper"] .pt-panel-sor--kilep { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
[data-theme="paper"] .pt-panel-csoport {
    padding: 10px 12px; margin-top: 4px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
[data-theme="paper"] .pt-panel-cim { font-size: 12px; color: var(--text-faint); }
[data-theme="paper"] .pt-valaszto { display: flex; gap: 4px; }
[data-theme="paper"] .pt-valaszto button {
    font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: transparent; color: var(--text-dim);
}
[data-theme="paper"] .pt-valaszto button.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
    /* Telefonon a márka és a fiók egy sorban, alattuk a fülek görgethetően. */
    [data-theme="paper"] .pt-sav-be { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
    [data-theme="paper"] .pt-menu { order: 3; flex: 1 0 100%; }
    [data-theme="paper"] .pt-fiok-szoveg { display: none; }
    [data-theme="paper"] .pt-panel { min-width: 230px; }
}

/* Nagyon alacsony ablakban (a tudomásulvételi kapu ezt is kiállja) a sáv összébb megy.
   A telefonos szabály UTÁN áll: azonos specificitásnál a későbbi nyer, és keskeny + alacsony
   ablakban (pl. fekvő telefon) mindkettő érvényes. */
@media (max-height: 520px) {
    [data-theme="paper"] .pt-sav-be { padding-top: 3px; padding-bottom: 3px; }
    [data-theme="paper"] .pt-avatar { width: 30px; height: 30px; font-size: 11px; }
    [data-theme="paper"] .pt-fiok-gomb { padding: 0; }
    [data-theme="paper"] .pt-marka .brand-badge { width: 28px; height: 28px; }
}

/* MOBIL ÁTNÉZÉS (2.334.29) — portál menüsor telefonon: mind a négy fül elférjen (a „Riport" félig levágva lógott ki). */
@media (max-width: 720px) {
    [data-theme="paper"] .pt-menu { gap: 2px; }
    [data-theme="paper"] .pt-ful { padding: 8px 10px; }
}
/* Ennél keskenyebben a fülek görgethetők maradnak — a jobb szél halványodik, hogy látsszon: van még. */
@media (max-width: 360px) {
    [data-theme="paper"] .pt-menu { -webkit-mask-image: linear-gradient(to right, black calc(100% - 22px), transparent); mask-image: linear-gradient(to right, black calc(100% - 22px), transparent); }
}

/* ==========================================================================
   PAPÍR — PORTÁL ARCULAT, KOMPONENS-FELÜLÍRÁSOK
   (v2.339.0: 1. lépés, finomhangolás; v2.340.0: 2. lépés, „teljes hatás” —
   pirula-gombok/fülek, lebegő üveges fejléc, üveges kártyák/keresőmező)

   Attila arculati terve szerint (ultimatesupport.hu-hoz közelítve) a portál
   melegebb hátteret, kékebb kiemelő színt, pirula-gombokat/füleket és üveges,
   lekerekített felületeket kap — CSAK A PORTÁLON, nem az adminon.

   A [data-app="portal"] attribútumot minden portál oldal <html> taggje
   hordozza (lásd az egyes portal/*.php fejlécét) — az admin nem, ezért ez a
   szakasz az admin felületre NEM hat, csak a portálra.

   MAGÁT A --bg / --accent / --ink / --radius-btn / --radius-card /
   --shadow-card / --card-bg / --card-blur VÁLTOZÓ-FELÜLÍRÁST NEM ITT
   találod, hanem a stíluslap ELEJÉN, a `[data-theme="paper"]` alapblokk UTÁN
   (lásd a „PORTÁL ARCULAT — VÁLTOZÓK” szakaszt) — mert az ott beégetett
   hexaszínt (#f0eee9 stb.) tartalmaz, ez a hely pedig több teszt-szkript
   (teszt_papir_naplok.php, teszt_papir_valtozasnaplo.php,
   teszt_papir_riport.php, teszt_papir_portal_menu.php) „idáig a címsorig
   nincs beégetett szín” ellenőrzésébe esne bele — hamis buktatót okozva.
   Ami itt marad, csak VÁLTOZÓT olvas vagy szín nélküli/rgba-alapú geometriát
   (sarok, árnyék-alak, elmosás) ír, hexa nélkül — ezért biztonságosan állhat
   itt, a portál saját osztályai (`.pt-*`, `.pk-*`, `.btn`) mellett.
   ========================================================================== */

/*
 * LEBEGŐ, ÜVEGES PIRULA FEJLÉC (v2.340.0).
 *
 * A `.pt-sav` (includes/portal_topbar.php) eredetileg teljes szélességű,
 * alsó vonallal elválasztott sáv. Itt a KÜLSŐ elem átlátszóvá válik és felső/
 * alsó térközt kap, a BELSŐ, már amúgy is 1180px-re korlátozott `.pt-sav-be`
 * pedig üveges pirulává alakul (lekerekítés, elmosott áttetsző háttér,
 * lágy árnyék) — így a sáv vizuálisan „lebeg” a tartalom fölött, anélkül,
 * hogy `position: fixed`-re kellene váltani (ami minden portál oldalon
 * fenntartott helyet igényelne alatta, és a lenyíló fiók-panel/mobil-menü
 * rétegződését is újra kellene gondolni — ez egy jóval kockázatosabb
 * változtatás lenne, mint amit Attila most kért).
 */
[data-theme="paper"][data-app="portal"] .pt-sav {
    background: transparent; border-bottom: none;
    padding: 18px 24px 22px;
}
[data-theme="paper"][data-app="portal"] .pt-sav-be {
    max-width: 1180px; padding: 10px 10px 10px 20px;
    border-radius: var(--radius-btn);
    background: var(--card-bg);
    backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
    box-shadow: 0 10px 40px rgba(11,13,18,.08), inset 0 1px 0 rgba(255,255,255,.9);
    border: 1px solid var(--card-border-color);
}
/* Telefonon a sáv több sorba törik — teljes pirula (999px) helyett szelídebb,
   téglalap-szerű lekerekítés illik hozzá (lásd .pt-sav-be a bázis CSS-ben,
   flex-wrap a 720px-es médialekérdezésben). */
@media (max-width: 720px) {
    [data-theme="paper"][data-app="portal"] .pt-sav-be { border-radius: 26px; }
}

/*
 * PIRULA GOMBOK ÉS FÜLEK (v2.340.0).
 *
 * A bázis `.btn` szabály a `--radius-btn` változóból venné a sarkát, DE a
 * „PAPÍR TÉMA” szakasz `[data-theme="paper"] .btn { border-radius: 10px; }`
 * szabálya (egy attribútum + egy osztály) ERŐSEBB, mint a névtelen, változót
 * olvasó bázisszabály (csak egy osztály) — Papíron ez a 10px SOSEM jött a
 * változóból, admin és portál egyaránt fixen 10px-es gombsarkot kapott. Ezt
 * itt, portálra szűkítve felül kell írni (két attribútum > egy attribútum +
 * egy osztály), különben a stage-1 finomhangolás rádiusz-változója is
 * hatástalan maradt volna a sima gombokon — csak ott látszott (pl. a
 * keresőmező „Új bejelentés” gombján), ahol egy MÉG specifikusabb, saját
 * szelektor (`.pk-kereso .btn` és társai lentebb) már eddig is felülírta.
 *
 * Emellett a gomb HÁTTÉRSZÍNE is változik: ultimatesupport.hu-n a kitöltött
 * gomb majdnem-fekete „tinta”, nem a kék kiemelő szín — lásd a --ink
 * változót. A `.pt-ful` (portál fülsor) a sarkát nem a --radius-btn-ből
 * vette, hanem 10px-re volt beégetve — az is itt kap pirula-sarkot.
 */
[data-theme="paper"][data-app="portal"] .btn { border-radius: var(--radius-btn); }
[data-theme="paper"][data-app="portal"] .btn:not(.secondary):not(.danger):not(:disabled) { background: var(--accent); }
/*
 * Néhány portál-specifikus gomb (keresőmező, belépés/regisztráció, vendég-
 * fejléc, jegy-beküldés, profil-mentés/PWA-telepítés, tudásbázis-kereső/cikk,
 * riport-szűrő, jegyoldali gyors-válasz küldés) a fenti általános szabálynál
 * IS specifikusabb, saját szelektorral kapta a sarkát (10–14px, beégetve) —
 * ezeket egyenként kell portálra szűkítve felülírni, különben pirula helyett
 * a régi, kevésbé lekerekített alakjukat tartanák. A teljes listát Playwright-
 * tal, minden portál-oldalt (bejelentkezve és vendégként is) végigjárva
 * állítottuk össze — statikus kereséssel könnyű kihagyni egyet.
 */
[data-theme="paper"][data-app="portal"] .portal-belepes .login-card a.btn,
[data-theme="paper"][data-app="portal"] .portal-belepes .login-card form > button[type=submit],
[data-theme="paper"][data-app="portal"] .portal-profil .card form > button[style*="width:100%"],
[data-theme="paper"][data-app="portal"] .portal-profil .card form > div > button.btn,
[data-theme="paper"][data-app="portal"] .portal-profil .card > button[data-pwa-telepites],
[data-theme="paper"][data-app="portal"] .portal-kb .kb-kereso .btn,
[data-theme="paper"][data-app="portal"] .portal-kb .kb-cikk .btn,
[data-theme="paper"][data-app="portal"] .pl-szakasz .filters .btn,
[data-theme="paper"][data-app="portal"] .portal-riport .pr-szuro .btn,
[data-theme="paper"][data-app="portal"] .pu-kuldes > button[type=submit],
[data-theme="paper"][data-app="portal"] .pt-vendeg .btn,
[data-theme="paper"][data-app="portal"] .portal-jegy form.pj-valasz .pj-kuld {
    border-radius: var(--radius-btn);
}
[data-theme="paper"][data-app="portal"] .pt-ful { border-radius: var(--radius-btn); }
/*
 * JAVÍTVA (2026-10-25, Attila kérése a csatolt terv alapján): a fülsor
 * mögött is legyen egy halvány háttér, az aktív/hover fül pedig az oldal
 * egész hátterével (fehér kártya-felület) egyezzen, NE a sötét tintával —
 * a terven a menüsor világos szürke dobozban ül, az aktív fül pedig fehér,
 * finom árnyékkal emelkedik ki belőle.
 */
[data-theme="paper"][data-app="portal"] .pt-menu { background: var(--surface2); border-radius: var(--radius-btn); }
[data-theme="paper"][data-app="portal"] .pt-ful--aktiv { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(11,13,18,.08); }
[data-theme="paper"][data-app="portal"] .pt-ful-csuszka { background: var(--surface); box-shadow: 0 1px 4px rgba(11,13,18,.08); border-radius: var(--radius-btn); }
[data-theme="paper"][data-app="portal"] .pt-menu.van-csuszka .pt-ful:hover { color: var(--text); }
/* Az avatar-kör és a fiókgomb kék-üveges jelvényt kap a semleges szürke helyett. */
[data-theme="paper"][data-app="portal"] .pt-avatar { background: rgba(47,91,255,.12); color: var(--accent); }

[data-theme="paper"][data-app="portal"] .pk-kartya {
    border-radius: var(--radius-card); border-color: var(--card-border-color);
    background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
    box-shadow: var(--shadow-card);
    /*
     * A DŐLÉS ALAPJA. A tényleges forgatást és az irányított árnyékot az
     * `assets/pk-tilt.js` adja hozzá mousemove-nál inline style-ként (csak
     * egérnél, `prefers-reduced-motion` tiszteletben tartásával) — ez a
     * szabály csak azt biztosítja, hogy az oda-vissza mozgás sima legyen,
     * és hogy a böngésző a 3D-transzformációhoz saját rétegre tegye a
     * kártyát (`transform-style`), ne recsegjen a szomszédokkal együtt.
     */
    transition: transform .18s ease, box-shadow .18s ease;
    transform-style: preserve-3d;
}
/* A keresőmező (a „Miben segíthetünk?” kártya keresője) is üveges pirulává
   vált — korábban vastag tinta-keretes, szögletesebb doboz volt. */
[data-theme="paper"][data-app="portal"] .pk-mezo {
    border: 1px solid var(--card-border-color); border-radius: var(--radius-btn);
    background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
    box-shadow: var(--shadow-card);
}
[data-theme="paper"][data-app="portal"] .pk-kereso .btn { border-radius: var(--radius-btn); }
[data-theme="paper"][data-app="portal"] .pk-ures { border-radius: var(--radius-card); }
/*
 * A SÖTÉT PORTÁL párja (--shadow-card, --card-border-color, --card-bg,
 * --ink) NEM itt áll, hanem lentebb, a „PORTÁL ARCULAT — sötét pár”
 * szakaszban — ott van az összes többi sötét pár is, és e teszt-szkriptek
 * (teszt_papir_naplok.php, teszt_papir_valtozasnaplo.php,
 * teszt_papir_portal_menu.php) épp addig a címsorig ellenőrzik, hogy nincs
 * itt beégetett szín. Egy beégetett hexát (#…) itt hagyni ezt a három
 * próbát hamisan megbuktatná.
 */

/* ==========================================================================
   PAPÍR — ADMIN ARCULAT, KOMPONENS-FELÜLÍRÁSOK (v2.341.0, „teljes hatás”)

   Attila: „legyen teljes hatás ha nem jó legyen visszaút” — a canvas-terv
   közvetlen jóváhagyása, a portálnál használt köztes finomhangolás-lépés
   kihagyásával. Ugyanaz a szerkezet, mint a PORTÁL fenti szakaszánál:
   MAGÁT a --bg/--accent/--ink/--radius-btn/--radius-card/--shadow-card/
   --card-bg/--card-blur VÁLTOZÓ-FELÜLÍRÁST NEM itt találod, hanem a
   stíluslap ELEJÉN, az „ADMIN ARCULAT — VÁLTOZÓK” szakaszban (beégetett
   hexaszínt tartalmaz, ami itt a „nincs beégetett szín eddig a címsorig”
   teszteket hamisan megbuktatná) — ami itt marad, csak VÁLTOZÓT olvas vagy
   szín nélküli geometriát ír.

   VISSZAÚT: lásd a fenti „ADMIN ARCULAT — VÁLTOZÓK” szakasz elején álló
   megjegyzést — ez a szakasz is tisztán adalék, [data-app="admin"] nélkül
   egyetlen sora sem fut le.
   ========================================================================== */

/*
 * PIRULA GOMBOK MINDENHOL AZ ADMINON.
 *
 * Ugyanaz a háromrétegű specifikussági buktató, mint a portálnál (lásd
 * fentebb a „PIRULA GOMBOK ÉS FÜLEK” megjegyzést): a „PAPÍR TÉMA” szakasz
 * `[data-theme="paper"] .btn { border-radius: 10px; }` szabálya (attribútum +
 * osztály) erősebb, mint a névtelen, `--radius-btn`-t olvasó bázisszabály —
 * enélkül a változó hatástalan maradna a sima gombokon.
 */
[data-theme="paper"][data-app="admin"] .btn { border-radius: var(--radius-btn); }
[data-theme="paper"][data-app="admin"] .btn:not(.secondary):not(.danger):not(:disabled) { background: var(--accent); }
[data-theme="paper"][data-app="admin"] .splitbtn > .btn { border-radius: var(--radius-btn) 0 0 var(--radius-btn); }
[data-theme="paper"][data-app="admin"] .splitbtn > .btn-arrow { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }

/*
 * A JEGY VÁLASZ-KÜLDÉS GOMBJA KÜLÖN SZABÁLYT KAPOTT (lásd fentebb
 * `form.valasz-urlap .splitbtn > .btn { border-radius: 10px; … }`), és ez a
 * `form.valasz-urlap` elemszelektor miatt SPECIFIKUSABB, mint a fenti
 * általános `[data-app="admin"] .splitbtn > .btn` — a Playwright-ellenőrzés
 * fogta meg élesben (a gomb szögletes maradt, amíg a többi pirula volt).
 * Ugyanazzal az elemszelektorral kell visszaadni neki a pirulát.
 */
[data-theme="paper"][data-app="admin"] form.valasz-urlap .splitbtn > .btn { border-radius: var(--radius-btn); }

/*
 * LEBEGŐ, ÜVEGES FEJLÉC (`.topbar`) — az admin oldalak közös, minden lap
 * tetején álló cím+műveletek sávja (nem külön include, mint a portál
 * `.pt-sav`-ja, hanem az egyes admin/*.php fájlok saját markupja — de
 * mindegyik ugyanazt a `.topbar` osztályt használja, ezért egy szabály az
 * összeset eléri). Ugyanaz az üveg-recept, mint a portál `.pt-sav-be`-jénél.
 */
[data-theme="paper"][data-app="admin"] .topbar {
    padding: 10px 20px; border-radius: var(--radius-btn);
    background: var(--card-bg);
    backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
    box-shadow: 0 10px 40px rgba(11,13,18,.08), inset 0 1px 0 rgba(255,255,255,.9);
    border: 1px solid var(--card-border-color);
}
/* Ha a sáv sortörésre kényszerül (keskeny ablak, sok gomb), teljes pirula
   helyett szelídebb, téglalap-szerű lekerekítés illik hozzá — ugyanaz a
   döntés, mint a portál `.pt-sav-be`-jénél. */
@media (max-width: 720px) {
    [data-theme="paper"][data-app="admin"] .topbar { border-radius: 26px; }
}

/*
 * ÜVEGES KÁRTYÁK. A `.card`/`.card-pad` alapszabály már a `--card-bg`/
 * `--card-blur` változókból dolgozik (lásd a fájl elején), ezért ott nincs
 * teendő — de a Riport/Statisztika oldal saját, `.card`-tól független
 * kártya-osztályai (`.stat-summary-card`, `.stat-chart-box`,
 * `.stat-table-wrap`) és az Áttekintés KPI-csempéi (`.papir-kpi`) saját
 * hátteret/sarkot égettek be, ezeket egyenként kell felülírni.
 */
[data-theme="paper"][data-app="admin"] .stat-summary-card,
[data-theme="paper"][data-app="admin"] .stat-chart-box,
[data-theme="paper"][data-app="admin"] .stat-table-wrap,
[data-theme="paper"][data-app="admin"] .papir-kpi {
    border-radius: var(--radius-card); border-color: var(--card-border-color);
    background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
    box-shadow: var(--shadow-card);
}
/*
 * A LEJÁRT HATÁRIDŐ KÁRTYA (`.papir-kpi--sulyos`) SZÁNDÉKOSAN KIMARAD ebből —
 * annak saját, tömör halványpiros háttere a figyelmeztetés lényege (lásd a
 * fenti megjegyzést), egy áttetsző üveg-változat elmosná ezt a jelzést.
 */
[data-theme="paper"][data-app="admin"] .papir-kpi--sulyos {
    border-radius: var(--radius-card);
}

/* ==========================================================================
   PAPÍR SÖTÉT — a Papír arculat sötét színekkel
   A lapon `data-theme="paper"` ÉS `data-tonus="sotet"` áll (lásd
   theme_init_snippet.php): minden papír-szabály érvényes, itt csak a
   SZÍNEK térnek el. A két attribútum erősebb az egynél, így ezek a
   szabályok felülírják a világos párjukat.
   ========================================================================== */
[data-theme="paper"][data-tonus="sotet"] {
    color-scheme: dark;
    --bg: #15151a; --surface: #1e1e24; --surface2: #2a2a31; --border: #34343c;
    --shadow: #00000066;
    --text: #ece8df; --text-dim: #c2beb5; --text-faint: #9a968e;
    /* A kék, a zöld és a piros VILÁGOSABB, mint papíron: sötét alapon csak így
       olvasható (a kontraszt mindegyiknél 6:1 fölött). A kitöltött gombokon
       ezért sötét a felirat — fehér ezeken a világos színeken nem olvasható. */
    --accent: #7f9ff2; --success: #52c48e; --warning: #e3a24f; --danger: #f07a74;
    --accent-hover: #a3bbf7; --danger-hover: #f59a95;
    /* Ikon-színezés sötétben — fehérből induló, kékbe futó üveg-gradiens, lágy
       kék fénnyel, lásd a világos párját fent a `[data-theme="paper"]` blokkban. */
    --icon-stop-0: #ffffff; --icon-stop-1: #bfe0ff; --icon-stop-2: #4a63e8;
    --icon-shadow: 0 2px 5px rgba(90,140,255,0.5);
}
[data-theme="paper"][data-tonus="sotet"] .btn:not(.secondary),
[data-theme="paper"][data-tonus="sotet"] .splitbtn > .btn-arrow,
[data-theme="paper"][data-tonus="sotet"] .new-ticket-badge,
[data-theme="paper"][data-tonus="sotet"] .version-new-badge,
[data-theme="paper"][data-tonus="sotet"] .nav-edge:hover,
[data-theme="paper"][data-tonus="sotet"] select option:checked { color: #0e1422; }
[data-theme="paper"][data-tonus="sotet"] .btn:disabled { color: var(--text-faint); }
/*
 * PORTÁL ARCULAT — sötét pár (v2.339.0, kiegészítve v2.340.0-ban).
 * A világos párja fentebb, a „PAPÍR — PORTÁL ARCULAT” szakaszban áll.
 * Három attribútum-szelektor, ezért a specifikussága MINDIG magasabb, mint a
 * két 2-attribútumos blokké (a sorrendtől függetlenül helyesen érvényesül).
 * A --bg/--accent párokhoz nem kell itt semmi: azokat a fenti, hagyományos
 * `[data-theme="paper"][data-tonus="sotet"]` blokk már felülírja a szokásos
 * sötét palettára (az a blokk a stíluslapban KÉSŐBB áll, mint a portál
 * arculat, ezért döntetlennél ő nyer).
 *
 * --ink: var(--accent) — sötétben a kitöltött gomb NEM lehet a világos
 * párjához hasonló majdnem-fekete (#0b0d12), mert a sötét portál háttere
 * (--bg: #15151a) is majdnem fekete — a gomb szinte láthatatlan lenne.
 * Ehelyett a sötét téma szokásos, világos accent-kékjét kapja; a szöveg
 * színét a lenti, mindenhol érvényes
 * `[data-theme="paper"][data-tonus="sotet"] .btn:not(.secondary) { color: #0e1422; }`
 * szabály sötétíti — ugyanaz a mechanizmus, ami a többi kitöltött gombot is
 * olvashatóvá teszi sötét témán.
 */
[data-theme="paper"][data-tonus="sotet"][data-app="portal"] {
    --ink: var(--accent);
    --shadow-card: 0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
    --card-border-color: rgba(255,255,255,.08);
    --card-bg: rgba(30,30,36,.6);
}

/*
 * ADMIN ARCULAT — sötét pár (v2.341.0). Ugyanaz az indoklás és ugyanazok az
 * értékek, mint a portál sötét párjánál közvetlenül fent — lásd ott.
 */
[data-theme="paper"][data-tonus="sotet"][data-app="admin"] {
    --ink: var(--accent);
    --shadow-card: 0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
    --card-border-color: rgba(255,255,255,.08);
    --card-bg: rgba(30,30,36,.6);
}

/* PAPÍR SÖTÉT — generált: a papír-szakasz világos, beégetett színeinek sötét
   párjai. A listát egy leképezés állítja elő (világos árnyalat → sötét árnyalat);
   ha a papír-szakaszba új, beégetett szín kerül, ide is kell a párja. */
[data-theme="paper"][data-tonus="sotet"] .btn.secondary:hover:not(:disabled) { border-color: #4a4a54; }
[data-theme="paper"][data-tonus="sotet"] tbody tr:nth-child(even) { background: #ffffff07; }
[data-theme="paper"][data-tonus="sotet"] tbody tr:hover { background: #ffffff10; }
[data-theme="paper"][data-tonus="sotet"] .zebra-row:nth-of-type(even) { background: #ffffff07; }
[data-theme="paper"][data-tonus="sotet"] .zebra-row:hover { background: #ffffff10; }
[data-theme="paper"][data-tonus="sotet"] .tenant-table tbody tr.zebra { background: #ffffff09; }
[data-theme="paper"][data-tonus="sotet"] .lista-zebra > *:nth-child(even) { background: #ffffff09; }
[data-theme="paper"][data-tonus="sotet"] label.customer-pick-row:nth-of-type(even) { background: #ffffff09; }
[data-theme="paper"][data-tonus="sotet"] .papir-kpi:hover { border-color: #4a4a54; }
[data-theme="paper"][data-tonus="sotet"] .papir-kpi--sulyos { background: #3a1f1f; border-color: #5c2c2a; }
[data-theme="paper"][data-tonus="sotet"] .papir-kpi--sulyos .papir-kpi-cimke { color: #f4a19c; }
[data-theme="paper"][data-tonus="sotet"] .papir-kpi--sulyos .papir-kpi-link { color: #f4a19c; }
[data-theme="paper"][data-tonus="sotet"] .papir-sor:hover { background: #ffffff07; }
[data-theme="paper"][data-tonus="sotet"] .papir-nezetvalto > .aktiv { box-shadow: 0 1px 2px #00000055; }
[data-theme="paper"][data-tonus="sotet"] .filters .select-wrap.compact .select-trigger:hover { border-color: #4a4a54; }
[data-theme="paper"][data-tonus="sotet"] .papir-ful:hover { border-color: #4a4a54; }
[data-theme="paper"][data-tonus="sotet"] .papir-ful.aktiv,
[data-theme="paper"][data-tonus="sotet"] .papir-ful.aktiv:hover { background: #26314d; border-color: #3d4d7a; color: #a9c0f7; }
[data-theme="paper"][data-tonus="sotet"] tr.ticket-row.priority-urgent { background: #f07a7414; }
[data-theme="paper"][data-tonus="sotet"] tr.ticket-row:hover { background: #ffffff0e; }
[data-theme="paper"][data-tonus="sotet"] tr.ticket-row.is-new-ticket { background: #7f9ff214; }
[data-theme="paper"][data-tonus="sotet"] tr.ticket-row.is-new-ticket:hover { background: #7f9ff224; }
[data-theme="paper"][data-tonus="sotet"] .message.from-admin { background: #1f2638; border-color: #34426a; }
[data-theme="paper"][data-tonus="sotet"] .message.internal-note { background: #2e2618; }
/* Válaszdoboz: a jegyzet-vonal az egyetlen beégetett szín, a többi változóból jön. */
[data-theme="paper"][data-tonus="sotet"] form.valasz-urlap { --jegyzet-vonal: #8a6a35; }
[data-theme="paper"][data-tonus="sotet"] .message.internal-note .message-author,
[data-theme="paper"][data-tonus="sotet"] .message.internal-note .pill { color: #f0b86a !important; }
[data-theme="paper"][data-tonus="sotet"] .papir-gyors-ido-mezo:focus-within { border-color: #5f7fd6; }
[data-theme="paper"][data-tonus="sotet"] .papir-hatarido { background: #1f2638; border: 1px solid #34426a; }
[data-theme="paper"][data-tonus="sotet"] .papir-hatarido .sla-gyuru-sav { stroke: #34426a; }
[data-theme="paper"][data-tonus="sotet"] .brand-badge { background: #26314d; color: #a9c0f7; }
[data-theme="paper"][data-tonus="sotet"] #kbSuggest { background: #1f2638 !important; border: 1px solid #34426a !important; }
[data-theme="paper"][data-tonus="sotet"] #kbSuggest .small { color: #a9c0f7 !important; }
[data-theme="paper"][data-tonus="sotet"] #kbSuggestList a { border: 1px solid #34426a; }
[data-theme="paper"][data-tonus="sotet"] #kbSuggestList a:hover { background: #26314d; }
[data-theme="paper"][data-tonus="sotet"] a.pk-kartya:hover { border-color: #4a4a54; }
[data-theme="paper"][data-tonus="sotet"] .pk-jelzo { background: #1f2638; color: #a9c0f7; }
[data-theme="paper"][data-tonus="sotet"] .pk-stat-cim { color: #a9c0f7; }
[data-theme="paper"][data-tonus="sotet"] .pk-ures-pecsek { background: #1c2e24; color: #4ade80; }
[data-theme="paper"][data-tonus="sotet"] .pk-kartya--tomor .pk-allapot--fel { background: #1c2e24; color: #4ade80; }
[data-theme="paper"][data-tonus="sotet"] .pk-tema-kartya:hover { border-color: #2e4a7a; background: #1a2436; }
[data-theme="paper"][data-tonus="sotet"] .pk-allapot--dolgozunk { background: #3a2e1c; color: #f0b86a; }
[data-theme="paper"][data-tonus="sotet"] .pk-allapot--rad-var { color: #0e1422; }
[data-theme="paper"][data-tonus="sotet"] .pu-prio-kartya:hover { border-color: #4a4a54; }
[data-theme="paper"][data-tonus="sotet"] .pj-ertekeles { background: #1c2e24; border: 1px solid #2e4a3a; }
[data-theme="paper"][data-tonus="sotet"] .pj-ertekeles-gombok a { border: 1px solid #2e4a3a; }
[data-theme="paper"][data-tonus="sotet"] .pj-ertekeles-gombok a:hover { background: #22382b; }
[data-theme="paper"][data-tonus="sotet"] .pj-ertekeles-gombok a.valasztott { color: #0e1422; }
[data-theme="paper"][data-tonus="sotet"] .portal-jegy .message.from-admin { background: #26314d; border-color: #26314d; }
[data-theme="paper"][data-tonus="sotet"] .portal-jegy .message.from-admin .message-author,
[data-theme="paper"][data-tonus="sotet"] .portal-jegy .message.from-admin .message-time { color: #a9c0f7; }


/* Óraelszámolás: a sor végi törlés sötétben is piros feliratú keretes gomb —
   a kitöltött gombokra vonatkozó sötét-felirat szabály itt eltüntette. */
[data-theme="paper"][data-tonus="sotet"] .papir-ora-lista .btn.danger { color: var(--danger); }
[data-theme="paper"][data-tonus="sotet"] .papir-ora-lista .btn.danger:hover { color: #0e1422; }

/*
 * NYOMTATÁS PAPÍR SÖTÉTBEN — fekete-fehér, olvasható.
 *
 * MI VOLT A BAJ (a Riport átalakításakor derült ki)
 * A közös nyomtatási szabály (a „NYOMTATÁS / PDF-MENTÉS" blokk) a változókat
 * világosra írja át a `[data-theme]` szelektoron — a Papír sötét viszont a
 * sajátjait a `[data-theme="paper"][data-tonus="sotet"]` szelektoron adja,
 * ami erősebb, ezért a nyomtatás alatt is a sötét színek maradtak érvényben.
 * A kártyák háttere a `.card` szabálytól fehér lett, a számoké és a feliratoké
 * viszont nem: világosszürke szöveg maradt a papíron — és a böngészők
 * alapból nem nyomtatnak háttérszínt, így a számkártyák szövege a fehér
 * lapon gyakorlatilag eltűnt.
 *
 * MIÉRT A SÖTÉT SZAKASZ VÉGÉN
 * Ugyanazzal a specificitással csak a későbbi szabály nyerhet: ez a blokk
 * azért áll utoljára. Az értékek pontosan a közös nyomtatási blokkéi.
 */
@media print {
    [data-theme="paper"][data-tonus="sotet"] {
        --bg: #fff; --surface: #fff; --surface2: #fff; --border: #ccc;
        --text: #000; --text-dim: #333; --text-faint: #666;
        --accent: #0b5ed7; --success: #157347; --warning: #997404; --danger: #b02a37;
        color-scheme: light;
    }
    /* A halványpiros kártya sötétpiros párja nyomtatásban ne maradjon meg (bekapcsolt háttérnyomtatásnál sem). */
    [data-theme="paper"][data-tonus="sotet"] .papir-kpi--sulyos { background: #fff; border-color: #ccc; }
    [data-theme="paper"][data-tonus="sotet"] .papir-kpi--sulyos .papir-kpi-cimke { color: var(--text-dim); }
}