/*
 * Dashboard v2 — Globális stílusok
 *
 * KIZÁRÓLAG a SHELL és a globális-komponensek itt.
 * Modul-specifikus stílusok: modules/<x>/ui/styles.css
 *
 * CSS-namespace-szabály: lásd docs/CSS-NAMESPACE-POLICY.md
 */

/* =========================================
   CSS-VÁLTOZÓK
   ========================================= */
/* ════════════════════════════════════════════════════════════════════════════════════════
   A `hidden` ATTRIBÚTUM MINDIG NYER (2026-08-27)

   A böngésző a `hidden`-t a saját alap-stíluslapjában `display: none`-nal valósítja meg, ÉS azt
   bármelyik szerző-szabály felülírja. Elég annyi, hogy egy elemre ráírjuk: `display: flex`, és a
   `hidden` NÉMÁN hatástalanná válik , az elem ott marad a képernyőn, holott a kód elrejtette.

   Ez a hibaosztály a projektben MÁR HÁROMSZOR előjött, és mindig helyben foltoztuk: a
   felhasználó-legördülő elemeinél, az ügyfél-interakció dátum-soránál (ott egyszerre látszott a
   „Mikor történt" és a „Határidő"), és a munkavállaló-varázslónál (ott minden lépés ugyanazt
   mutatta). Mindhárom ugyanaz, és egyik sem dob hibát , csak rossz a kép.

   Ezért itt, egy helyen mondjuk ki. Az `!important` szándékos, és pont erre való: a `hidden` nem
   megjelenítési javaslat, hanem állítás arról, hogy az elem NINCS ott. Ha valaha mégis meg kell
   mutatni egy `hidden` elemet, azt nem CSS-ből kell megoldani, hanem az attribútum levételével.
   ════════════════════════════════════════════════════════════════════════════════════════ */
[hidden] {
  display: none !important;
}

:root {
  /* Színek — v1 brand-narancs */
  --primary: #e15a30;
  --primary-dark: #cc4a20;
  --primary-light: #ff6432;
  --primary-tint: rgba(225, 90, 48, 0.1); /* halvány-narancs (kiemelésekhez) */
  --nav-active-bg: #f4f2f1; /* szürkés-meleg, visszafogott aktív-menü-háttér */
  --bg: #ffffff;
  --bg-secondary: #fafafa;
  --bg-card: #ffffff; /* kártyák fehérek (letisztult kontúr: hajszálkeret delineálja) */
  --bg-sidebar: #ffffff; /* sidebar fehér (v1-szerű) */
  --text-primary: #1f2937;
  /* EGY FOKKAL SÖTÉTEBB, A SOR VEZÉR-ÉRTÉKÉNEK (PO, 2026-08-25: „legyen sötétebb a neveknek a
     betűszín"). Egy sűrű listában a NÉV vezeti a sort: róla dönti el a szem, hogy ez-e a keresett
     tétel, és csak utána néz a többi cellára. Ha a név ugyanolyan súlyú, mint a mellette álló
     dátum és összeg, a sor egyenletes szürke folt lesz.
     Mérve: a `--text-primary` fehéren 14,7:1, ez 17,7:1 , láthatóan erősebb, de NEM fekete
     (a tiszta fekete fehér háttéren kemény, és a lap többi szövegétől is elszakadna). */
  --text-strong: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-inverse: #ffffff;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  /* A FELÜLET-DOBOZOK KERETE (2026-08-26). Kártya, táblázat-doboz, KPI-sáv: ami DOBOZ, nem vonal.
     Miért külön token, és miért nem a `--border`-t erősítettük: a `--border` 622 helyen szerepel,
     köztük a táblázat SOR-ELVÁLASZTÓJÁN. Ha azt erősítjük, a sorok közé is vastagabb vonal kerül,
     és a táblázatból rácsozat lesz , pont az a régies kép, amit kerülünk.
     Az érték mérve: a mai hajszálkeret 1,24:1 kontrasztú fehéren, ami nyolc kártyán alig látszik;
     ez 1,47:1, tehát az él 95 százalékkal határozottabb. Feljebb nem megyünk: 1,9 fölött nyolc
     kártyán már rácsozat, 2,5 fölött drótváz. A 3:1-es WCAG-érték itt NEM előírás, hanem
     viszonyítási pont , azt interaktív elemre és a megértéshez szükséges rajzra kéri a szabvány,
     a kártya kerete viszont csak csoportosít, a benne lévő szöveg nélküle is olvasható.
     A munka felét nem is a keret végzi, hanem a TÉRKÖZ: a kártyák KÖZÖTTI rés és a kártyán BELÜLI
     legnagyobb rés aránya ma 24/18 = 1,33, ami kevés a csoportosításhoz; 32/18 = 1,78-nál a rés
     már önmagában elválaszt. A sorrend számít: ha a térköz dolgozik előbb, a keretnek kevesebb
     kell. A térköz-részt ott állítjuk be, ahol a kártya-rács ténylegesen él (ma modulonként), nem
     itt , egy senki által nem hivatkozott token csak halott kód lenne. */
  --felulet-keret: var(--border-strong);
  --accent: #f59e0b;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  /* LILA , NEM állapot-szín, hanem KATEGÓRIA-szín. Az idővonalakon a rendszer saját
     naplója (szakasz-váltás, mező-változás) kapja: az nem jó vagy rossz hír, tehát a
     zöld/sárga/piros egyike sem illik rá, de a kéktől (ajánlat) is el kell válnia.
     Azért itt van és nem egy modulban, mert a CRM előzmény-listája ugyanezt a fogalmat
     rajzolja , egy érték, egy hely. */
  --purple: #8b5cf6;

  /* JELVÉNY-PALETTA (háttér + tinta párok) , a konceptből átvéve. Eddig NEM volt ilyen
     tokenünk, ezért a modulok kézzel írták a `color-mix(...)`-eket, és minden modulban
     kicsit más árnyalat lett belőle. Innentől egy forrás. */
  --success-bg: #d1fae5;
  --success-ink: #065f46;
  --warning-bg: #fef3c7;
  --warning-ink: #92400e;
  --error-bg: #fee2e2;
  --error-ink: #991b1b;
  --info-bg: #dbeafe;
  --info-ink: #1e40af;
  --neutral-bg: #f3f4f6;
  --neutral-ink: #374151;
  /* Az „Új" és a „Kiadás" jelvénynek eddig NEM volt tokene, csak kézzel beírt színe.
     A mai értékekkel vezetjük be, tehát a látvány nem változik. (2026-08-08) */
  --new-bg: #ede9fe;
  --new-ink: #6d28d9;
  --expense-bg: #fbeded;
  --expense-ink: #7a5c5c;

  /* A FŐ CTA glossy narancsa , eddig HÁROM helyen volt bemásolva ugyanaz az érték.
     A koncept `--cta-grad` / `--cta-line` / `--cta-shadow` hármasa. */
  --cta-grad: linear-gradient(180deg, #fdac6c, #f97316 45%, #dc4f08);
  /* A CTA SAJÁT rádiusza. Külön token, nem a `--radius-md`, mert a fő gomb formája
     márka-döntés: ha holnap kerekebbet vagy szögletesebbet akarsz, ITT az egy hely, és nem
     mozdul vele minden kártya és beviteli mező. Ma 10 képpont, a ház gomb-szabálya szerint. */
  --cta-radius: 10px;
  /* JOBBRÓL-CSÚSZÓ FELÜLETEK egységes szélessége (2026-08-01). Eddig kétféle volt: a felugró
     560-960 képpont között, a feladat-panel fixen 440 , ugyanaz a mozdulat, két különböző
     méret, és ettől két külön dolognak látszottak. Egy token, egy szélesség. */
  --slideover-w: clamp(400px, 32vw, 540px);
  --cta-line: rgba(154, 52, 18, 0.6);
  --cta-shadow: 0 2px 5px rgba(234, 88, 12, 0.3), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  /* TÁBLÁZAT-SOR MAGASSÁGA (PO-kérés, 2026-08-25). NEM bélésből jön, hanem KIMONDOTT magasság,
     és ez a lényeg: a béléses megoldásnál a sor a TARTALOMTÓL függött , sima szöveggel 42, egy
     állapot-pirulával viszont 51 lett, mert a pirula magasabb a szövegnél. Egy táblázatban,
     ahol soronként más van a cellákban, ettől hullámzott a sor-magasság.
     Kimondott magassággal minden sor ugyanaz, függetlenül attól, mi van benne.
     Egy helyen áll, mert MINDEN táblázatra hat: Értékesítés, Ajánlatok, Ügyfelek, Eszközök. */
  --tabla-sor-magas: 42px;
  /* EGYSÉGES VEZÉRLŐ-MAGASSÁG. A legördülő gombja és a dátum-választó mezője egymás mellett
     áll a lapokon, de eltérő sor-magasságot örökölnek (az egyik `font: inherit`-et használ,
     a másik a böngésző gomb-alapértelmezését), ezért képpontokban elcsúsztak egymástól.
     Ez a token köti össze őket: ha az egyik változik, a másik is követi. (PO, 2026-08-17) */
  --vezerlo-magassag: 42px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Fonts (~13%-kal nagyobb az olvashatóságért, idősebb szemnek is) */
  --font-base: 16px;
  --font-sm: 14px;
  /* A LEGKISEBB LÉPCSŐ , kísérő adat: idő-bélyeg, meta-sor, jelvény-felirat, halk magyarázat.
     2026-08-19-ig NEM LÉTEZETT, pedig HARMINC helyen hivatkoztunk rá. A `var()` ismeretlen
     tokennel érvénytelen, tehát azokon a helyeken a `font-size` deklaráció egyszerűen kiesett,
     és a szöveg a SZÜLŐ méretét örökölte , vagyis a „legapróbb" felirat ugyanakkora volt, mint
     a törzs-szöveg. Ezért vitte el a szemet a bejegyzések alatti meta-sor (PO, 2026-08-19). */
  --font-xs: 12px;
  --font-h1: 32px;
  --font-h2: 25px;
  --font-h3: 20px;
  --font-h4: 18px;
  /* FŐ BETŰ , a PO döntése 2026-07-30-án: ARIAL.
     Miért ez, és miért nem a Helvetica Neue, amit előtte néztünk: az Arial Macen ÉS Windowson
     is ott van, tehát MINDEN gépen ugyanaz a betű fut, letöltés nélkül. A Helvetica Neue csak
     Macen létezik, Windowson úgyis Arial jött volna be , így viszont ez döntés, nem véletlen.
     Linuxon a Liberation Sans a metrikus ikertestvére, tehát ott sem mozdul a tördelés.
     A kettő METRIKUSAN AZONOS (a betűk szélessége bájtra ugyanaz), ezért Windowson, ahol csak
     Arial van, a tördelés NEM mozdul el: se sortörés, se oszlop-szélesség nem változik, csak
     a betűk apró részletei mások. A saját tárhelyű Inter marad a lánc végén tartaléknak.
     Egy ismert gyengéjük van, amivel számolni kell: bennük a kis L és a nagy I ugyanaz a
     pálcika. Ezért az AZONOSÍTÓ jellegű adat (adószám, ajánlatszám, számlaszám) a monospace
     készletet kapja, ahol a kettő elkülönül. */
  /* ARIAL (PO-döntés 2026-07-31, Inter és Verdana összehasonlítása után).
     TUDNIVALÓ: az Arialnak csak KÉT vágata van, 400 és 700. A kódban viszont ~330 helyen
     kérünk köztes vastagságot (500, 550, 600, 650, 680, 750), amit a böngésző MAGA rajzol
     vastagabbra. Ez a mesterséges vastagítás képernyőnként másképp néz ki. Ha valaha újra
     előjön a „túl kövér" vagy „túl vékony" érzés, a helyes javítás NEM a betű cseréje,
     hanem a vastagság-skála letisztítása arra a kettőre, ami az Arialban tényleg létezik. */
  --font-family: Arial, 'Liberation Sans', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;

  /* Border-radius , a design/ugyfel-adatlap-koncept.html token-készletéből átvéve
     (PO-döntés 2026-07-31). A koncept `--r: 10px` / `--r-lg: 16px` / `--pill: 999px`
     hármasa; a `--radius-full` a pill megfelelője, azt nem kellett átnevezni. */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows , finom, kékes-fekete árnyalat (prémium fintech-stílus) */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 10px -2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.16);

  /* Z-index réteg */
  --z-base: 0;
  /* A FEJLÉC SÁVJA. 90, mert a modulok belső rétegei 60-ig mennek (a naptár ragadó óra-fejsávja
     20, a szűrő-panel 40, a gyors-felvevő 60, a mobil alsó sáv szintén 60), a fiók-hátteret
     (`--z-dropdown`, 100) és a felugró ablakokat (`--z-modal`) viszont NEM előzheti meg.
     Lásd `.app-header` , ott áll, miért nem elég a puszta emelés magyarázat nélkül. */
  --z-header: 90;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 60px;
  /* A MOBIL ALSÓ TAB-SÁV ÁLTAL ELFOGLALT SÁV. Eddig két helyen állt beégetve ugyanez a 82,
     és a szerkesztő ragadós lábléce nem tudott róla , ezért látszott alatta a görgő tartalom.
     Egy token, hogy a három hely ne tudjon szétcsúszni. */
  --tabbar-sav: calc(82px + env(safe-area-inset-bottom));

  /* ----- CETLI-SZÍNEK , EGY FORRÁSBÓL (2026-09-04) -----
     Az öt jegyzet-szín eddig CSAK a Jegyzetek modul CSS-ében élt. A telefonos gyors rögzítő
     viszont mostantól jegyzetet is felvesz, és ott is ki kell rajzolnia ugyanazt az öt
     korongot , egy közös komponens pedig nem hivatkozhat modul-osztályra, mert attól a modul
     többé nem kikapcsolható. Két külön hex-lista pedig előbb-utóbb szétcsúszna: az egyik
     helyen frissülne a szín, a másikon nem, és a felvitelkor mást látnál, mint a listában.
     Ezért a SZÍN maga itt áll, tokenként; a két felület csak hivatkozik rá. */
  --cetli-alap-hatter: var(--bg-card);
  --cetli-alap-kontur: var(--border);
  --cetli-sarga-hatter: #fdf6e3;
  --cetli-sarga-kontur: #ecd58a;
  --cetli-zold-hatter: #eef6ef;
  --cetli-zold-kontur: #b8d8bd;
  --cetli-kek-hatter: #eef2fb;
  --cetli-kek-kontur: #b9c8ec;
  --cetli-rozsa-hatter: #fceef2;
  --cetli-rozsa-kontur: #e7b9c9;

  /* ----- GOMB-CSALÁD , a méret EGY helyen (2026-08-08) -----
     Eddig a gomb magassága, oldal-bélése és betűmérete öt külön szabályban, kézzel volt
     beírva (38 / 40 / 32 képpont), ezért a „gomb" fogalmát nem lehetett egy helyen
     állítani: aki a fő gombot megnövelte, nem tudta, hogy a kísérő gomb máshol van. */
  /* KANBAN EJTÉS-JELÖLŐ , a húzás közben megjelenő szaggatott gyűrű színe.
     MIÉRT NEM A `--primary`: a narancs a FŐ GOMB színe. Húzás közben viszont nem gombot
     keresel, hanem CÉLPONTOT, és a kanban formanyelve (oszlopfej-lépcső, mutató-nyilak) végig
     kék. A narancs gyűrű ott villant fel, ahova épp ejteni lehetett, tehát pont a legfontosabb
     pillanatban tért el a lap többi részétől. Egy token, minden modulban ugyanaz a jelölés
     (PO, 2026-08-20). */
  --kanban-ejtes: #2f6fb0;

  --btn-h: 38px; /* alap gomb (modal, űrlap) */
  --btn-pad-x: var(--space-md);
  --btn-h-lg: 40px; /* a lap FŐ gombja a fej-sávokban */
  --btn-pad-x-lg: 20px;
  --btn-h-sm: 32px; /* KÍSÉRŐ gomb: „Műveletek" nyitó, tömeges sáv, buborék */
  --btn-pad-x-sm: 12px;
  --btn-font-sm: 13px;
  --btn-icon-size: 32px; /* ikon-gomb , négyzet, mert álló ikon van benne */
  --btn-icon-radius: 8px;
  --btn-icon-glyph: 16px; /* az ikon maga a gombon belül */

  /* ----- „MŰVELETEK" MENÜ (.app-tobbmuvelet) -----
     A fő gomb MELLETT álló, feliratos nyitó és a lebegő listája. Eddig egyetlen mérete
     sem volt token, tehát a menü csak a CSS átírásával volt hangolható. */
  --menu-w: 230px; /* a lebegő lista legkisebb szélessége */
  --menu-glyph: 18px; /* a nyitó gomb ikonja */
  --menu-item-pad-y: 8px;
  --menu-item-pad-x: 10px;
  /* ══ LEBEGŐ PANELEK , KÖZÖS TOKENEK (PO-döntés, 2026-08-23) ══
     A háznak öt lebegő panelje van (érték-választó, művelet-menü, nézet-váltó, szűrő-panel,
     dátumválasztó), és MÉRVE 25 tulajdonságból 24-ben eltértek egymástól. Ugyanaz a fogalom
     ötféleképpen nézett ki, mert mindegyik a saját modulja igényéből született.
     Innentől egy készlet szolgálja mind az ötöt, és ha változtatni kell, egy helyen kell. */
  --lebego-bg: var(--bg-card);
  --lebego-sugar: 14px;
  --lebego-beles: 6px;
  --lebego-res: 6px; /* a nyitó gomb és a panel közti hézag */
  --z-lebego: 60;
  --lebego-sor-h: 32px;
  --lebego-sor-sugar: 10px;
  --lebego-jel-hely: 16px; /* a pipa/jel fenntartott helye, hogy a feliratok egy vonalban álljanak */
  --lebego-be-bg: var(--primary-tint);
  --lebego-behuzas: 14px; /* az érték-sorok behúzása a csoport-névhez képest */
  /* RÉS A SOROK KÖZÖTT (PO, 2026-08-23). Enélkül a bekapcsolt sorok halvány narancsa
     ÖSSZEFOLYIK: hét kipipált kategória egyetlen 217 képpontos foltnak látszik, és nem lehet
     megszámolni, hány sor van. A rés maga a választóvonal, csak nem szürke vonal, hanem a
     panel háttere , ezért nem ütközik a „vonal csak csoportok között" szabállyal. */
  --lebego-sorkoz: 3px;
  --lebego-w-keskeny: 200px;
  --lebego-w-kozepes: 280px;
  --lebego-w-szeles: 320px;
}

/* =========================================
   RESET ÉS ALAP
   ========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-base);
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.5;
  /* A simítás VISSZAKERÜLT (2026-07-31). Kipróbáltuk nélküle: FHD-n minden felirat túl kövér
     lett. A kilengés OKA nem a simítás volt, hanem az, hogy Arialnak csak KÉT vastagsága van
     (400 és 700), a kódban viszont 330 helyen kérünk 500-at, 600-at, 650-et és 750-et. Ezeket
     a böngésző MAGA rajzolja vastagabbra, és ez a mesterséges vastagítás az, ami simítás
     nélkül elnehezül, simítással pedig elvékonyul. Ezért a betű is cserélődik Interre, ahol
     minden vastagság VALÓDI, és nincs mit mesterségesen rajzolni. */
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================
   AUTH-VIEW — 2-oszlopos bejelentkező (redesign)
   Bal: világos űrlap · Jobb: sötét, animált márka-panel.
   Betű: a projekt Inter-je (a design General Sans-át NEM importáljuk).
   Színek: önálló, márka-vezérelt pre-auth képernyő (stone + narancs, a
   márka-accenthez igazítva), nem a shell-tokenekre kötve.
   ========================================= */
.app-auth-view {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh; /* iOS-Safari: dinamikus viewport (URL-sáv) */
  background: #fafaf9;
}
/* Publikus ajánlat-link: a login-mező rejtve marad, hogy ne villanjon fel
   (a head-beli inline script teszi rá a .pubq osztályt az URL alapján). */
html.pubq .app-auth-view {
  display: none;
}

/* Jelszó-beállító link (meghívó / elfelejtett jelszó): a kártya rejtve marad, amíg a JS el nem
   dönti, melyik űrlap kerül rá. Enélkül a „Bejelentkezés" villanna fel annak, aki épp jelszót
   jött állítani. A `showAuthView()` beágyazott `display: flex`-et ad, ami erősebb ennél a
   szabálynál, tehát a kártya pontosan akkor jelenik meg, amikor már a helyes űrlap van rajta. */
html.pwset .app-auth-view {
  display: none;
}

.login-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr; /* középre koncentrált: csak a bal (világos) űrlap, a dekor-panel elrejtve */
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

/* ---- BAL OSZLOP: világos űrlap ---- */
.login-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  /* Enyhe négyzetrácsos háttér (finom textúra, nem vonja el a fókuszt az űrlaptól) */
  background-color: #fafaf9;
  background-image:
    linear-gradient(rgba(28, 25, 23, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 25, 23, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  /* A rácsot KÖZÉPRE igazítjuk, így a kártya körül bal-jobb (és fent-lent) szimmetrikus a rács */
  background-position: center;
  overflow-y: auto;
}
.login-panel {
  width: 100%;
  max-width: 430px;
  text-align: center;
  /* Fehér kártya kerettel a rácsos háttéren (a box kiemelve, fókuszált) */
  background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.1);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.04),
    0 14px 36px rgba(28, 25, 23, 0.08);
}

/* Logó + brand-név (középen) */
/* A márka-blokk LINK az aitgentic.hu-ra. Azért kell a text-decoration/color felülírás,
   mert <a>-ként alapból aláhúzott és link-színű lenne (az aláhúzás a benne lévő szövegre is
   átterjed). Finom visszajelzés hoverre, hogy látsszon: ez kattintható. */
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.login-brand:hover {
  opacity: 0.75;
}
.login-brand:focus-visible {
  outline: 2px solid var(--accent, #e15a30);
  outline-offset: 4px;
  border-radius: 8px;
}
.login-logo-mark {
  width: 30px;
  height: 30px;
  display: block;
}
.login-brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1c1917;
}

/* 40×2 halvány elválasztó (középen) */
.login-divider {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 22px;
  background: rgba(28, 25, 23, 0.12);
  border-radius: 2px;
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1c1917;
  margin-bottom: 8px;
}
.login-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #78716c;
  line-height: 1.5;
  margin-bottom: 28px;
}
.login-subtitle strong {
  display: block;
  font-weight: 700;
  color: #1c1917;
}

/* ---- Űrlap (login / jelszó-beállító / -visszaállító , közös) ---- */
.login-form {
  display: block;
  text-align: left;
}
/* Csak a mező-címkék (közvetlen gyerek) , a „Maradjak bejelentkezve" NEM ide tartozik */
.login-form > label {
  display: block;
  margin-bottom: 14px;
}
.login-form > label > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #57534e;
  margin-bottom: 6px;
}
/* A `.login-otp` NÉV SZERINT van itt, mert az `type="text"` , a kétfaktoros kód nem jelszó és
   nem e-mail. Enélkül a mező kimaradt a mező-stílusból, és a böngésző alapértelmezését kapta
   (szögletes doboz, kék fókusz-keret), ami kilógott a kártya képéből. */
.login-form input[type='email'],
.login-form input[type='password'],
.login-form input.login-otp {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.14);
  border-radius: 12px;
  font-size: 14px;
  color: #1c1917;
  font-family: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.login-form input::placeholder {
  color: #a8a29e;
}
.login-form input[type='email']:focus,
.login-form input[type='password']:focus,
.login-form input.login-otp:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14);
}

/* KÉTFAKTOROS KÓD-MEZŐ.
   Ritkított, nagy számjegyek, hogy a 6 karaktert egyben lássa, és a hitelesítő appból
   leolvasva is könnyen ellenőrizhető legyen, amit beírt.

   MIÉRT KESKENYEBB A TÖBBI MEZŐNÉL: a kód 6 karakter, tehát a hossza ismert. Egy teljes
   szélességű doboz azt ígéri, hogy hosszú szöveg jön , itt viszont pont az a segítség, ha a
   mező mérete maga mondja meg, mennyit várunk. Ezért középre igazított, kötött szélességű.

   EGY MEZŐ, NEM HAT DOBOZ: a hat külön kockás megoldás szebben mutat, de elrontja azt, ami
   itt a legtöbbet ér , a telefon felajánlja az SMS-ből/hitelesítőből a kódot
   (`autocomplete="one-time-code"`), és azt egyetlen mezőbe tudja beilleszteni. A beillesztés
   és a visszatörlés is csak így marad kiszámítható. */
.login-otp {
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
  height: 62px;
  padding: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* a ritkítás a végén is teret hagy → enélkül balra csúszna a szöveg */
  font-variant-numeric: tabular-nums;
  /* Halvány saját háttér: a kód-mező a kártya egyetlen kiemelt eleme, ez különbözteti meg a
     hétköznapi szöveg-mezőtől anélkül, hogy új színt hozna be. */
  background: #fafaf9;
}
.login-otp::placeholder {
  color: #d6d3d1; /* halványabb a szokásosnál: a 000000 minta ne látszódjon beírt értéknek */
  font-weight: 500;
}
.login-otp:focus {
  background: #fff;
}
/* A „Mégsem, kilépés" közvetlenül a nagy narancs gomb alatt áll. Narancsban két hangsúly
   versengene egymással, pedig ez a kilépő út, nem a fő cselekvés. */
#mfaCancelLink {
  color: var(--text-secondary, #78716c);
}
#mfaCancelLink:hover {
  color: #1c1917;
}

/* Hiba-sáv (#loginError / #setPwError / #resetReqError , mind .login-error) */
.login-error {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.07);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  padding: 9px 12px;
  margin: 2px 0 14px;
}

/* Vezető-szöveg (jelszó-beállító / -visszaállító) */
.login-lead {
  margin: 0 0 18px;
  color: #78716c;
  font-size: 14px;
  line-height: 1.5;
}

/* Belépés-gomb (narancs gradiens) */
.login-btn {
  display: block;
  width: 100%;
  height: 50px;
  border: 1px solid var(--cta-line);
  border-radius: var(--cta-radius);
  background: var(--cta-grad);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 2px 5px rgba(234, 88, 12, 0.35),
    0 8px 20px rgba(234, 88, 12, 0.25),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}
.login-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.login-btn:active {
  transform: translateY(0) scale(0.99);
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.login-btn:focus-visible {
  outline: 2px solid #9a3412;
  outline-offset: 2px;
}

/* Sor: „Maradjak bejelentkezve" (bal) + „Elfelejtett jelszó?" (jobb) */
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #57534e;
  cursor: pointer;
  user-select: none;
}
/* Natív checkbox: vizuálisan elrejtve, de fókuszálható marad (a11y) */
.login-remember-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.login-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid rgba(28, 25, 23, 0.28);
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.login-remember-input:checked + .login-checkbox {
  background: #f97316;
  border-color: #dc4f08;
}
.login-remember-input:checked + .login-checkbox::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.login-remember-input:focus-visible + .login-checkbox {
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.22);
}

/* „Elfelejtett jelszó?" / „Vissza a bejelentkezéshez" (#forgotPwLink, #resetBackLink) */
.login-forgot {
  padding: 0;
  background: none;
  border: none;
  color: #ea580c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.login-forgot:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-forgot:focus-visible {
  outline: 2px solid rgba(234, 88, 12, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}
/* A „Vissza a bejelentkezéshez" a reset-űrlap alján áll magában → középre, teljes sor */
#resetBackLink {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}

/* „Nincs még fiókod? Igényelj hozzáférést" */
.login-signup {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: #78716c;
}
.login-signup-link {
  color: #ea580c;
  font-weight: 600;
}
.login-signup-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Copyright */
.login-copyright {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: #a8a29e;
}

/* ---- JOBB OSZLOP: sötét, animált márka-panel , login-nál ELREJTVE (a nagy panel a
   regisztrációhoz marad meg; a bejelentkezés középre koncentrált). A stílus megmarad,
   hogy a regisztrációs oldal újrahasznosíthassa. ---- */
.login-decor {
  display: none;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: radial-gradient(120% 80% at 72% -8%, #2c1b12 0%, #141110 46%, #0a0a0c 100%);
}
/* Finom függőleges rács */
.login-decor-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 46px);
}
/* Hulló fény-csíkok konténer */
.login-decor-streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-streak {
  position: absolute;
  top: 0;
  width: 1.5px;
  height: 150px;
  border-radius: 2px;
  will-change: transform, opacity;
  animation: hzFall linear infinite;
}
.login-streak:nth-child(1) {
  left: 14%;
  background: linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.75), transparent);
  animation-duration: 3.6s;
  animation-delay: 0s;
}
.login-streak:nth-child(2) {
  left: 33%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation-duration: 4.8s;
  animation-delay: -1.4s;
}
.login-streak:nth-child(3) {
  left: 52%;
  background: linear-gradient(180deg, transparent, rgba(251, 146, 60, 0.7), transparent);
  animation-duration: 3.1s;
  animation-delay: -2.2s;
}
.login-streak:nth-child(4) {
  left: 71%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation-duration: 5.4s;
  animation-delay: -0.6s;
}
.login-streak:nth-child(5) {
  left: 88%;
  background: linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.6), transparent);
  animation-duration: 4.2s;
  animation-delay: -3s;
}
@keyframes hzFall {
  0% {
    transform: translateY(-150px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateY(900px);
    opacity: 0;
  }
}

/* Alul izzó ív (SVG-görbe + halo) */
.login-decor-arc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  pointer-events: none;
}

/* Középső üzenet */
/* A dekor-panel tipográfiája a HONLAP (V06) „Az AITGENTIC alapelve" szekcióját követi,
   hogy az app bejelentkezője és a weboldal egy formanyelvet beszéljen:
     • szemöldök-szöveg: NEM nagybetűs és NEM ritkított (a V06-on sem az), lágyabb súllyal
     • cím: nagyobb, szorosabb betűköz (-0.045em) és feszesebb sorköz (1.02)
     • minden felirat KÖZÉPRE igazítva
   A méretek a panel szélességéhez vannak szabva (a honlapon teljes képernyő-szélességű a
   szekció, itt kb. fél képernyő), a ARÁNYOK viszont ugyanazok. */
.login-decor-content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  text-align: center;
  /* FELJEBB a függőleges középtől: az izzó ív a panel alsó 62%-át foglalja, és a csúcsa
     középen a legmagasabb , alacsonyabb (laptop) képernyőn belelógott a szövegbe.
     A honlap V06-os szekciója ugyanezt csinálja (ott -130px, itt a kisebb panelhez szabva). */
  transform: translateY(-60px);
}
/* A regisztrációs panelen több a szöveg (alcím + lista), ezért kisebb eltolás , különben
   a tetején kicsúszna a panelből. */
.reg-decor .login-decor-content {
  transform: translateY(-30px);
}
/* Alacsony képernyőn (kis laptop, vízszintes tablet) arányosan kisebb eltolás, hogy a
   szöveg-blokk teteje SE lógjon ki a panelből. */
@media (max-height: 760px) {
  .login-decor-content {
    transform: translateY(-36px);
  }
  .reg-decor .login-decor-content {
    transform: translateY(-16px);
  }
}
.login-eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 22px;
}
.login-decor-title {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: #f8f8f7;
  text-wrap: balance;
}

/* ---- Reszponzív: ≤820px → egy oszlop, csak az űrlap ---- */
@media (max-width: 820px) {
  .login-split {
    grid-template-columns: 1fr;
  }
  .login-decor {
    display: none;
  }
  .login-left {
    padding: 24px 16px;
  }
  .login-panel {
    padding: 32px 22px;
    border-radius: 16px;
  }
}

/* ---- Mozgás-érzékenység: az animált csíkok leállítása ---- */
@media (prefers-reduced-motion: reduce) {
  .login-streak {
    animation: none;
    opacity: 0;
  }
  .login-btn {
    transition: none;
  }
  .login-btn:hover {
    transform: none;
  }
}

/* =========================================
   REGISZTRÁCIÓ — „Hozzáférés igénylése" (2-oszlopos)
   NEM azonnali fiók-létrehozás: a látogató a cég adatait adja meg, ebből egy
   igénylés / lead lesz. Bal: világos űrlap (a .login-* stílusokra épít) · Jobb:
   a login SÖTÉT dekor-panelja ÚJRAHASZNOSÍTVA (itt NEM rejtve). Külön wrapper
   (.reg-split), hogy a login egy-oszlopos .login-split szabálya ne ütközzön.
   ========================================= */
.reg-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  position: relative; /* viszonyítási pont az „Bemutató" előhozó gombnak */
}

/* A reg BAL oszlopa a .login-left rácsos hátterét + centrálását örökli
   (class="login-left"); a panel kicsit szélesebb, hogy a 2-oszlopos sorok elférjenek. */
.reg-panel {
  max-width: 460px;
}
.reg-panel .login-title,
.reg-subtitle {
  text-align: left;
}
.reg-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #78716c;
  line-height: 1.5;
  margin-bottom: 26px;
}
.reg-subtitle strong {
  font-weight: 700;
  color: #1c1917;
}

/* ---- Reg-űrlap mezők (a login csak email/password-t stílusoz) ---- */
.reg-form label {
  display: block;
  margin-bottom: 14px;
  text-align: left;
}
.reg-form label > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #57534e;
  margin-bottom: 6px;
}
.reg-form input[type='text'],
.reg-form input[type='tel'],
.reg-form input[type='email'] {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.14);
  border-radius: 12px;
  font-size: 14px;
  color: #1c1917;
  font-family: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.reg-form input::placeholder {
  color: #a8a29e;
}
.reg-form input:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14);
}

/* 2-oszlopos mező-sor (adószám+telefon, kapcsolattartó+e-mail) */
.reg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.reg-grid-2 label {
  margin-bottom: 0;
}

/* ---- „Hány felhasználó?" szegmens-gombok ---- */
.reg-field {
  margin-bottom: 18px;
  text-align: left;
}
.reg-seg-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #57534e;
  margin-bottom: 8px;
}
.reg-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.reg-seg-btn {
  height: 42px;
  border: 1px solid rgba(28, 25, 23, 0.14);
  border-radius: 10px;
  background: #fff;
  color: #57534e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.reg-seg-btn:hover {
  border-color: rgba(234, 88, 12, 0.4);
}
.reg-seg-btn.is-active {
  background: #fff2e8;
  border-color: rgba(234, 88, 12, 0.5);
  color: #c2410c;
}
.reg-seg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2);
}

/* Honeypot (botok kitöltik, ember nem látja) */
.reg-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* BOT-ELLENŐRZÉS a bemutató-kérő űrlapon (Cloudflare Turnstile, 2026-08-03).
   A fenntartott magasság azért kell, mert a widget KÉSŐBB rajzolódik ki, mint az űrlap: enélkül
   a gomb megugrana alatta, épp amikor a felhasználó rá akar kattintani. */
.reg-turnstile {
  min-height: 66px;
  margin: 4px 0 10px;
}
.reg-turnstile:empty {
  min-height: 0; /* ha a betöltés nem sikerül, ne maradjon üres lyuk az űrlapon */
  margin: 0;
}

.reg-btn {
  margin-top: 4px;
}

/* Apróbetűs adatkezelési sor */
.reg-fineprint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #a8a29e;
  text-align: left;
}
.reg-link {
  color: #ea580c;
  font-weight: 500;
}
.reg-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Link-szerű gombok (login↔reg váltás) , a .login-signup-link szín mellé chrome-reset */
.reg-linkbtn {
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.reg-linkbtn:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reg-linkbtn:focus-visible {
  outline: 2px solid rgba(234, 88, 12, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Siker-állapot (submit után, az űrlap helyén) ---- */
.reg-success {
  text-align: center;
  padding: 8px 0 4px;
}
.reg-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf5;
  color: #059669;
}
.reg-success-icon svg {
  width: 28px;
  height: 28px;
}
.reg-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #1c1917;
  margin-bottom: 8px;
}
.reg-success-text {
  font-size: 14px;
  color: #78716c;
  line-height: 1.5;
  margin-bottom: 22px;
}

/* ---- JOBB OSZLOP: a login sötét dekor-panelja, ITT megjelenítve ---- */
.reg-decor {
  display: flex;
}

/* ELREJTÉS / ELŐHOZÁS a bemutató-panelhez.
   Szándékosan NEM egy sima X: az egyirányú lenne (aki véletlenül rákattint, nem tudná
   visszahozni). Így a döntés bármikor visszavonható , és a választást megjegyezzük,
   hogy a visszatérő érdeklődőnek ne kelljen újra elrejtenie. */
.reg-decor-hide,
.reg-decor-show {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}
.reg-decor-hide svg,
.reg-decor-show svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* A panelen belül (sötét háttéren): halk, de megtalálható */
.reg-decor-hide {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
}
.reg-decor-hide:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Az előhozó a világos oldalon, a nézet jobb felső sarkában , alapból REJTVE */
.reg-decor-show {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  border: 1px solid var(--border, #e7e5e4);
  background: #fff;
  color: var(--text-muted, #78716c);
}
.reg-decor-show:hover {
  border-color: var(--accent, #e15a30);
  color: var(--accent, #e15a30);
}
.reg-decor-hide:focus-visible,
.reg-decor-show:focus-visible {
  outline: 2px solid var(--accent, #e15a30);
  outline-offset: 2px;
}

/* Panel elrejtve → egy oszlop, az űrlap középen (a bal oszlop már eleve centrál),
   és megjelenik az előhozó gomb. */
.reg-split.reg-solo {
  grid-template-columns: 1fr;
}
.reg-split.reg-solo .reg-decor {
  display: none;
}
.reg-split.reg-solo .reg-decor-show {
  display: inline-flex;
}
/* A regisztrációs panelen több szöveg van (alcím + lista), ezért a cím valamivel kisebb,
   de ugyanazzal a szoros betűközzel/sorközzel, mint a login-oldalon. */
.reg-decor .login-decor-title {
  font-size: clamp(30px, 3.6vw, 50px);
}
.reg-decor-sub {
  margin: 18px auto 0; /* auto → a szűkebb szövegtömb is középen áll */
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 420px;
}
.reg-benefits {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* A sorok középre , de EGYMÁSHOZ igazítva (inline-flex + width:fit), hogy a pipák
     egy függőleges vonalban maradjanak, ne ugráljanak a szöveg hossza szerint. */
  align-items: center;
}
.reg-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #e7e5e4;
  text-align: left;
}
.reg-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}
.reg-check svg {
  width: 15px;
  height: 15px;
}

/* ---- Reszponzív: ≤820px → egy oszlop, dekor-panel rejtve (mint a loginon) ---- */
@media (max-width: 820px) {
  .reg-split {
    grid-template-columns: 1fr;
  }
  .reg-decor {
    display: none;
  }
}
/* Nagyon keskeny: a 2-oszlopos mező-sorok egymás alá */
@media (max-width: 480px) {
  .reg-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .reg-grid-2 label {
    margin-bottom: 14px;
  }
}

/* =========================================
   APP-SHELL
   ========================================= */
/* A KERET RÁCSA (KERET-DONTESEK.md K1, módosítva 2026-07-31).
   „A" irány: a FEJLÉC fut végig a teljes szélességben, alatta kezdődik az oldalsáv és a
   tartalom. Ezért kerülhet a keresés középre, hosszú mezőbe , ez volt a váltás fő indoka.

   A HARMADIK OSZLOP a jobb oldali sáv helye. Alapból NULLA széles, tehát ma semmit nem
   változtat, de a helye a rácsban KI VAN JELÖLVE: amikor egy oldal kér sávot, csak a
   `body.has-rail` osztályt kell feltenni, és nem kell a keretet újra bontani. */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr 0;
  /* A KÖZÉPSŐ SOR A KAPCSOLAT-SÁVÉ, és `auto` méretű: amíg a sáv rejtve van (`display: none`),
     a sor nulla magas, tehát semmit nem foglal. Amikor megjelenik, LEJJEBB TOLJA a tartalmat,
     nem takar el belőle semmit.

     MIÉRT KELL NEKI SAJÁT SOR (2026-09-04, valós hiba): a `.app-shell` NEVESÍTETT területekkel
     dolgozó rács. Egy gyerek, aminek nincs területe, implicit sorba kerül , az viszont a
     `100dvh` alá esik, és az `overflow: hidden` levágja. A sáv ott volt a DOM-ban, nem volt
     rejtve, mégsem látszott. */
  /* A FEJLÉC-SOR MAGASSÁGA TARTALMAZZA A FELSŐ BIZTONSÁGI ZÓNÁT (2026-09-04). A
     `viewport-fit=cover` óta a `100dvh` az órasor ALÁ is benyúlik, tehát enélkül a fejléc
     becsúszna alá , pont az a hiba, amit a PO a telefonján jelzett. A fejléc saját
     `padding-top`-ot kap ugyanennyivel, így a LÁTHATÓ magassága marad a megszokott. */
  grid-template-rows: calc(var(--header-height) + env(safe-area-inset-top)) auto 1fr;
  grid-template-areas:
    'header    header    header'
    'kapcsolat kapcsolat kapcsolat'
    'sidebar   content   rail';
  height: 100vh; /* fallback régi böngészőkre */
  height: 100dvh; /* iOS-Safari: a dinamikus viewport (URL-sáv ki/be) , ne legyen magasabb a láthatónál (fejléc-csúszás ellen) */
  overflow: hidden; /* a váz fix magasságú , csak a nav-lista és a tartalom görög belül */
}

/* Bejelentkezett dashboard „app-szerű": a DOKUMENTUM nem húzható ki (iOS gumi-rángás/overscroll ellen).
   A body a viewporthoz van rögzítve, csak a .app-content görög belül. A publikus oldalakon
   (ajánlat, visszajelzés , nincs .app-active) ez NEM aktív, ott marad a normál görgetés. */
body.app-active {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
/* Bejelentkezve a body fix, inset:0 → PONTOSAN a viewport. A vázat EHHEZ kötjük (100%),
   nem a dvh-hoz , így a DevTools eszköz-emuláció dvh-hibája (túl magas váz → levágott, nem-görgethető
   tartalom, „kilóg a kártya") sem jelentkezik. Valódi iOS-en a fix body szintén a látható viewport. */
body.app-active .app-shell {
  height: 100%;
}

/* SIDEBAR */
/* ===== SIDEBAR TÉMA , alapból SÖTÉT; a Beállításokban a body.sidebar-light vált világosra.
   A globális téma-változókat CSAK a sidebarra írjuk felül → a többi felület világos marad. ===== */
.app-sidebar {
  --bg-sidebar: #15171c;
  --bg: #1c1f26;
  --bg-secondary: #23262e;
  --bg-card: rgba(255, 255, 255, 0.08); /* hover-háttér , jól látszik a sötéten */
  --border: #23262e;
  --border-strong: #30343d;
  --text-primary: #ffffff;
  --text-strong: #ffffff; /* sötét háttéren a fehér már a maximum, nincs hova erősíteni */
  --text-secondary: #b6bcc6;
  --text-tertiary: #9aa1ad;
  --nav-active-bg: rgba(255, 122, 69, 0.15); /* 18a: aktív = lágy narancs-tint (sötét témán) */
  --primary-tint: #2c303a;
  --primary-dark: #e9ebef;
  --sb-brand-name: #ffffff;
  --sb-active-icon: #ff7a45;
  --sb-icon: #767d88;

  grid-area: sidebar;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border); /* képernyő-széléhez simuló, NEM lebegő panel */
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 0; /* hogy a belső nav görögni tudjon, ne nyomja szét a vázat */
  overflow: hidden;
}
body.sidebar-light .app-sidebar {
  --bg-sidebar: #ffffff;
  --bg: #ffffff;
  --bg-secondary: #f7f8fa;
  --bg-card: #edeff2;
  --border: #ededf0;
  --border-strong: #d1d5db;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-tertiary: #9aa1ad;
  --nav-active-bg: linear-gradient(180deg, #fff4ec, #ffeadb); /* 18a: aktív = lágy barack-gradiens */
  --primary-tint: rgba(225, 90, 48, 0.1);
  --primary-dark: #cc4a20;
  --sb-brand-name: var(--primary);
  --sb-active-icon: var(--primary);
  --sb-icon: #9aa1ab;
}

/* ===== CÉG-BRAND a FELSŐ SÁVBAN (ügyfél cégneve + opcionális logó) =====
   Korábban a sidebarban volt; átkerült a fejlécbe (Billingo-stílus). */
/* A fejléc bal oldalán CSAK a cég neve áll. A logó 2026-08-16-án kikerült innen (PO-döntés):
   hosszúkás, fekvő logónál a név előtt szétesett a fejléc, és a korábbi három elrendezés
   (mellette / fölötte / csak a jel) sem oldotta meg, mert választó-felület soha nem épült
   hozzá , a gyakorlatban mindenki a fekvő logóra legrosszabb esetet kapta.
   Az indoklás teljes egészében: `shared/brand.js`. */
.app-brand {
  display: flex;
  align-items: center;
  min-width: 0; /* hosszú cégnév ne tolja szét a fejlécet */
  /* Nincs brand-villanás: rejtve, amíg a JS a BELÉPETT cég nevét rá nem teszi.
     A `brand-betoltve` osztályt az `applySidebarBrand` adja hozzá, az teszi láthatóvá. */
  visibility: hidden;
}
.app-brand.brand-betoltve {
  visibility: visible;
}

.app-brand-text {
  display: flex;
  min-width: 0;
}

/* A CÉGNÉV A JOBB SAROKBAN (PO, 2026-08-22): kicsiben és halkan, a profilkép mellett.
   Ritkán változik, tehát nem versenyez a bal oldali, folyton változó oldal-névvel. */
.app-header-right .app-brand {
  margin-right: 4px;
  max-width: 180px;
}
.app-header-right .app-brand-name {
  font-size: var(--font-xs);
  font-weight: 650;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  /* Telefonon a fejléc szűk, és ott egy cégbe szoktál belépni: a cégnév a profil-menüben
     úgyis ott van, itt csak elvenné a helyet a lap nevétől. */
  .app-header-right .app-brand {
    display: none;
  }
}
.app-brand-name {
  font-size: var(--font-h4);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── CÉGVÁLTÓ ───────────────────────────────────────────────────────────────
   A cégnév CSAK akkor kap nyilat és kattintható állapotot, ha tényleg több élő
   tagság van (`shared/cegvalto.js` teszi rá a `--valthato` osztályt). Egy cégnél
   a fejléc pontosan úgy néz ki, mint eddig. */
.app-brand--valthato {
  gap: 6px;
  padding: 4px 8px;
  margin-left: -8px; /* a szöveg optikailag ugyanott kezdődjön, mint váltó nélkül */
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.app-brand--valthato:hover,
.app-brand--valthato.is-nyitva {
  background: var(--bg-secondary);
}
.cegvalto-nyil {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: var(--text-tertiary);
  transition: transform 0.16s ease;
}
.app-brand--valthato.is-nyitva .cegvalto-nyil {
  transform: rotate(180deg);
}

.cegvalto-panel {
  position: fixed;
  z-index: var(--z-dropdown, 1000);
  min-width: 260px;
  max-width: 320px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.cegvalto-fej {
  padding: 6px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cegvalto-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cegvalto-sor {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.cegvalto-sor:hover:not(:disabled) {
  background: var(--bg-secondary);
}
.cegvalto-sor:disabled {
  cursor: default;
}
/* Az aktív cég jelölése HÁROM rétegű: pipa (jel) + „Jelenlegi” (szó) + halvány háttér (szín).
   A szín soha nem áll egyedül. */
.cegvalto-sor.is-aktiv {
  background: var(--bg-secondary);
}
.cegvalto-pipa {
  flex: 0 0 14px;
  font-size: 12px;
  line-height: 1;
  color: var(--accent, var(--text-primary));
}
.cegvalto-szoveg {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cegvalto-nev {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cegvalto-szerep {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.cegvalto-jelenlegi {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
}
.cegvalto-sor.is-tolt {
  opacity: 0.6;
  pointer-events: none;
}
.cegvalto-lab {
  padding: 8px 10px 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

.app-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0; /* flexben kell, hogy az overflow működjön */
  overflow-y: auto; /* sok modulnál a nav görög, a footer (user-kártya) alul ragad */
  overflow-x: hidden;
  /* Vékony, diszkrét görgetősáv minden böngészőben/OS-en (ne a vastag default ücsörögjön a menün) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.app-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.app-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.app-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* Világos sidebar-témánál sötét hüvelyk */
body.sidebar-light .app-sidebar-nav {
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
body.sidebar-light .app-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
}
body.sidebar-light .app-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* Kategória-csoport (összecsukható) */
.app-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.app-nav-group.collapsed .app-nav-group-items {
  display: none;
}

/* Kategória-fejléc a sidebarban , kattintható (nyit/csuk) */
.app-sidebar-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 10.5px; /* 18a: kisebb, tömöttebb betűköz */
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary);
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 12px 6px;
  cursor: pointer;
}
.app-sidebar-group-label:hover {
  color: var(--text-secondary);
}
.app-nav-group:first-child .app-sidebar-group-label {
  padding-top: var(--space-xs);
}
.app-nav-chevron {
  width: 15px !important;
  height: 15px !important;
  transition: transform 0.18s ease;
  opacity: 0.9;
}
.app-nav-group.collapsed .app-nav-chevron {
  transform: rotate(-90deg);
}

.app-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px; /* 18a: pill */
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.app-sidebar-nav-item svg {
  color: var(--sb-icon); /* alap ikon-szín (tompa) */
}
.app-sidebar-nav-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.app-sidebar-nav-item.active {
  background: var(--nav-active-bg);
  color: var(--text-primary); /* aktív szöveg világos/sötét (téma szerint), vastag */
  font-weight: 600;
  position: relative;
}
.app-sidebar-nav-item.active svg {
  color: var(--sb-active-icon);
} /* aktív ikon = brand-akcentus */

/* Pötty a modul előtt (Billingo-stílus): alap halvány szürke, hover sötétebb, aktív = brand */
.app-nav-dot {
  display: none; /* pötty eltüntetve , csak ikon + szöveg marad */
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.45;
  transition:
    background 0.15s,
    opacity 0.15s,
    transform 0.15s;
}
.app-sidebar-nav-item:hover .app-nav-dot {
  opacity: 1;
  background: var(--text-secondary); /* hover-re sötétebb pötty */
}
.app-sidebar-nav-item.active .app-nav-dot {
  opacity: 1;
  background: var(--primary); /* aktív = brand-szín (narancs) */
  transform: scale(1.1);
}

/* =========================================
   MODUL-ALOLDALAK az oldalsávban  (.app-nav-sub*)
   A koncept szerint (koncepció/oldalsav-koncept.html, 3. és 6. szakasz): az aloldal NEM
   menüpont. Csak az AKTÍV modul alatt nyílik ki, különben a 25 modul almenüje egy
   végeláthatatlan listát adna.
   A NYITÁS TISZTÁN CSS: a testvér-választó az `.active` osztályhoz köti, amit a modul-váltás
   amúgy is beállít. Nincs hozzá külön eseménykezelő, tehát nem is tud kicsúszni a szinkronból.
   ========================================= */
.app-nav-sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px;
}
.app-sidebar-nav-item.active + .app-nav-sub {
  display: flex;
}
/* ÖSSZECSUKOTT (IKON-)SÁVBAN NINCS ALMENÜ , csak a modul ikonja látszik.
   FONTOS A VÁLASZTÓ ALAKJA. Ez a szabály eredetileg `body.sidebar-rail .app-nav-sub` volt, és
   NEM ÉRVÉNYESÜLT: a megnyitó szabály (`.app-sidebar-nav-item.active + .app-nav-sub`) három
   osztályból áll, ez pedig kettőből meg egy elemből , tehát a megnyitó erősebb, és az almenü
   az ikon-sávban is kinyílt. Ott a szöveg a sáv szélességére vágódott, és a modul ikonja alatt
   négy magányos betű maradt (PO, 2026-08-18: „látszik, hogy alatta lenne").
   Ezért a rejtő szabály UGYANARRA a láncra épül, plusz a `body`-ra: így biztosan erősebb.
   Az almenü nem vész el: a sáv kinyitásakor azonnal visszajön, és a hover-buborék is
   megmondja, melyik modulon állsz. */
body.sidebar-rail .app-sidebar-nav-item.active + .app-nav-sub,
body.sidebar-rail .app-nav-sub {
  display: none;
}
.app-nav-sub-item {
  display: flex;
  align-items: center;
  gap: 9px;
  /* A behúzás a modul IKONJÁVAL kezdődik egy vonalban , így látszik, hogy alá tartozik. */
  padding: 6px 12px 6px 34px;
  border-radius: 999px;
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.app-nav-sub-item svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--sb-icon);
}
.app-nav-sub-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
/* AZ AKTÍV ALOLDAL. Ugyanaz a jelölés-nyelv, mint a modul-soron (kitöltés + vastagabb betű +
   akcentusos ikon), csak eggyel beljebb , így a sávból látszik a modul ÉS a lap is.
   A modul-sor ilyenkor leadja a kitöltést (lásd `van-aktiv-aloldal`), különben két hely
   versenyezne ugyanazért a pillantásért, és a felhasználó azt hinné, a lista-lapon áll. */
.app-nav-sub-item.active {
  background: var(--nav-active-bg);
  color: var(--text-primary);
  font-weight: 600;
}
.app-nav-sub-item.active svg {
  color: var(--sb-active-icon);
}
.app-sidebar-nav-item.active.van-aktiv-aloldal {
  background: transparent;
}
/* MÉG NINCS MÖGÖTTE LAP. Látszik (hogy tudd, mi jön), de nem kattintható , az üres lap
   rosszabb, mint a hiányzó link. A szó KIÍRVA is ott van, nem csak a halványítás jelzi:
   szín önmagában sosem hordoz jelentést. */
.app-nav-sub-item.is-hamarosan {
  cursor: default;
  opacity: 0.55;
}
.app-nav-sub-item.is-hamarosan:hover {
  background: transparent;
  color: var(--text-tertiary);
}
/* SZÁMLÁLÓ AZ ALMENÜN. Csak arról szól, amivel DOLGOD van (ma: a beazonosítatlan levelek).
   Azért itt, és nem a fejlécben: bárhonnan látszik, de nem foglal helyet a legdrágább sávban,
   és nem lesz belőle második csengő. Ha nincs teendő, a jelzés eltűnik , nem mutat nullát. */
.app-nav-szam {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.app-nav-soon {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  white-space: nowrap;
}
/* Fejléc nélküli csoport (egyetlen elem): a fejléc helyett kis felső rés tartja a ritmust. */
.app-nav-group--cimtelen {
  margin-top: var(--space-xs);
}

/* HEADER */
.app-header {
  grid-area: header;
  min-width: 0; /* ne tágítsa a grid-sávot a min-content fölé (vízszintes görgetés-blowout ellen) */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* A FELSŐ BIZTONSÁGI ZÓNA a fejléc belső térköze, nem a tartalomé: így az órasor alatt marad
     a hely, a fejléc látható magassága viszont változatlan. Asztali gépen az `env()` nulla,
     tehát ott semmi nem változik. */
  padding: env(safe-area-inset-top) var(--space-lg) 0;
  align-items: center;
  gap: var(--space-md);
  /* HÁROM SÁV a fejlécben: bal (márka + modul-cím), közép (keresés), jobb (harang, profil).
     A rács azért kell a flex helyett, mert a keresőnek a KÉPERNYŐ közepén kell állnia, nem a
     két szélső blokk közti maradék közepén , különben minden modul-névnél máshova csúszna. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  /* Finom árnyék a sáv alá, hogy elkülönüljön a tartalomtól. A position+z-index kell,
     hogy az árnyék a görgethető tartalom FÖLÉ vetüljön (különben a content eltakarná).

     A 5-RŐL 90-RE EMELÉS HIBAJAVÍTÁS (PO-észrevétel, 2026-08-13): a naptárban a profil-menü
     ALÁ csúszott az oszlop-fejlécnek. Az ok nem a menü rétege volt , az `.app-user-dropdown`
     rendesen `--z-modal`-t kap , hanem EZ A SOR: a `position: relative` + `z-index` RÉTEGZŐDÉSI
     KÖRNYEZETET nyit, és azon belül a gyerek 1000-e már nem a lap egészéhez mérődik, hanem a
     fejléc 5-ös szintjéhez. Vagyis az egész fejléc-blokk, benne a legördülővel, az 5-ös rétegen
     ült, a naptár ragadó óra-fejsávja pedig 20-on , tehát az takarta.

     EZÉRT NEM A LEGÖRDÜLŐT KELLETT VOLNA MEGEMELNI: az akárhány ezret kaphatna, a burkoló
     környezet úgyis lekorlátozza. A modul-fejléc szűrő-panelje (40) azért nem volt hibás, mert
     az a naptáron BELÜL él, tehát ugyanabban a környezetben verseng, mint a fejsáv.

     A 90 tudatos: a modulok belső rétegei 60-ig mennek, a mobil fiók-háttere (100) és a
     felugró ablakok (1000) viszont továbbra is a fejléc FÖLÉ kerülnek , a mobil oldalsáv
     kinyitva továbbra is eltakarja a fejlécet, ahogy kell. */
  position: relative;
  z-index: var(--z-header);
  box-shadow:
    0 2px 4px -1px rgba(16, 24, 40, 0.06),
    0 1px 2px rgba(16, 24, 40, 0.04);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0; /* a brand + modul-cím tudjon összehúzódni, ne tolja szét a sávot */
}
/* KÖZÉPSŐ SÁV , a globális kereső. Legfeljebb 560 képpont: ennél szélesebb mezőben a szem
   nem találja meg a beírt szöveg elejét, és a fejléc is „üresnek" hat körülötte. */
.app-header-mid {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.app-header-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.app-header-search:hover {
  border-color: var(--border-strong);
  background: var(--bg-card);
}
.app-header-search i,
.app-header-search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.app-header-search-tx {
  flex: 1 1 auto;
  font-size: var(--font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Billentyű-jelzés a mező jobb szélén. Halk, mert nem művelet, csak tipp. */
.app-header-search-kbd {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
}
/* 1100 képpont alatt a középső sáv eltűnik, és a keresés visszaesik ikonná a jobb oldalon:
   három egyenrangú blokk ennél keskenyebben egymásra tolódna. */
@media (max-width: 1100px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .app-header-mid {
    display: none;
  }
}

/* Vékony elválasztó a cég-brand és a modul-cím között */
.app-header-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 var(--space-xs);
  flex: 0 0 auto;
}

/* ===== FELSŐ SÁV — jobb oldali vezérlők (kereső / súgó / csengő / beállítás + user) ===== */
.app-header-right {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.app-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.app-header-icon:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.app-header-icon svg {
  width: 19px;
  height: 19px;
}
/* Csengő-badge (esedékesség-emlékeztető): piros pötty + szám a harang jobb felső sarkán */
/* A JELVÉNY HORGONYA. A `position: relative` NÉLKÜL a jelvény a legközelebbi pozicionált őshöz
   igazodik , esetünkben a fejléchez , és a képernyő jobb sarkába szalad (mérve 2026-08-18:
   a boríték jelvénye a profil mellett kötött ki). A csengőn ez megvolt, a borítékon nem. */
.app-header-bell,
.app-header-beerkezo {
  position: relative;
}
.app-header-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg-primary);
}

/* AI-asszisztens ikon — KIEMELT (a rendszer gerince): kitöltött brand-gradient, fehér ikon */
.app-header-assistant,
.app-header-assistant:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 2px 8px rgba(225, 90, 48, 0.35);
}
.app-header-assistant:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

/* Kijelentkezés ikon — semleges, hoverre finom piros jelzés (közvetlen, egy koppintás) */
.app-header-logout:hover {
  color: #e5484d;
  background: rgba(229, 72, 77, 0.12);
}

/* Felső sáv: a profil-monogram + név (user-menü) LÁTSZIK, a kijelentkezés a legördülőjében.
   A gear (Beállítások) megmarad mellette; a különálló logout-ikon így felesleges → elrejtve. */
#hdrLogout {
  display: none;
}

/* ===== PROFIL-MENÜ CSOPORTOK (KERET-DONTESEK.md K5) =====
   Halk, kicsi, nagybetűs csoport-cím. Nem kattintható, és el kell válnia a menüpontoktól,
   különben tizedik menüpontnak látszik. Rejtve, ha a csoportja üresre szűrődött. */
.app-user-dropdown-cim {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.app-user-dropdown-cim[hidden],
.app-user-dropdown-sep[hidden],
.app-user-dropdown-item[hidden] {
  display: none;
}
/* Jobbra igazított halk jelzés a menüponton (téma neve, modulok száma, új értesítés).
   Nem jelvény és nem gomb: TÉNY, amit a menüpont mellé írunk, hogy ne kelljen benyitni érte. */
.app-user-dropdown-jel {
  margin-left: auto;
  padding-left: var(--space-sm);
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Verzió-sor a kijelentkezés fölött. Nem menüpont, ezért nem is kattintható. */
.app-user-dropdown-lab {
  padding: 6px 10px 8px;
  color: var(--text-tertiary);
  font-size: 11px;
}

/* User-menü: trigger (avatar + név + nyíl) + legördülő */
.app-user-menu {
  position: relative;
  margin-left: var(--space-xs);
  flex: 0 0 auto;
}
.app-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.app-user-trigger:hover {
  background: var(--bg-secondary);
}
.app-user-trigger[aria-expanded='true'] {
  background: var(--bg-secondary);
  border-color: var(--border);
}
.app-user-trigger-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.app-user-caret {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  flex: 0 0 auto;
}

/* Avatar (kép háttérként, vagy monogram-placeholder) */
.app-user-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.app-user-av-ph {
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: var(--font-sm);
}

/* Legördülő doboz */
.app-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  /* 300 a 260 helyett: a leghosszabb pont („Munkatársak és jogosultság") 260-ban tördelt
     volna, és a tördelt menüpont két sorosnak, tehát csoport-címnek látszik. */
  width: 300px;
  max-width: 86vw;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  z-index: var(--z-modal);
}
.app-user-dropdown[hidden] {
  display: none;
}
.app-user-dropdown-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
}
.app-user-dropdown-head .app-user-av {
  width: 40px;
  height: 40px;
}
.app-user-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: var(--space-xs) 0;
}
.app-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.app-user-dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.app-user-dropdown-item svg {
  width: 18px;
  height: 18px;
}
.app-user-dropdown-logout:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* User-infó (legördülő fejléc): név + email + titulus */
.app-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.app-user-name {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-user-email {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-user-role {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}
/* A TERMÉK-JELENLÉT az oldalsáv alján (márka-döntés 2026-07-31). Ez a mi helyünk: a fejléc
   az ügyfélé, ez a sáv a miénk. Két sor, mert a név márka, a szám pedig adat , egy sorban a
   pont-elválasztó összemosta a kettőt, és a verzió a névhez tartozó toldaléknak látszott.
   Nagyobb, mint a korábbi 11 képpont: ha ez az egyetlen helyünk, akkor legyen olvasható. */
.app-sidebar-version {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--border);
}
/* A márkanév CSUPA NAGYBETŰ. A nagybetűs szó tömbként olvasódik, nem betűnként, ezért kap
   TÁGABB betűközt: enélkül a nagybetűk összetorlódnak, és pont a márkanév lesz a legnehezebben
   olvasható elem a sávban. A negatív betűköz (ami kisbetűs feliratnál jó) itt tilos. */
.app-sidebar-brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.app-sidebar-ver {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Összecsukott (ikon-sáv) állapotban a név nem fér ki: ott csak a verzió marad. */
body.sidebar-rail .app-sidebar-brand {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   A FEJLÉC BAL SARKA: AZ OLDAL NEVE ÉS A MORZSA (PO, 2026-08-22)

   A cím eddig „diszkrét másodlagos" volt, mert a cégnév vitte a hangsúlyt a bal sarokban.
   A cégnév átköltözött jobbra, a profilkép mellé, tehát itt már NEM kell visszafogni: ez a
   lap neve, és ez a legfontosabb szöveg a fejlécben.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.app-header-hely {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.app-header-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* A MORZSA halk és kicsi: útmutatás, nem tartalom. Nagybetűs, mert így egy pillantással
   elkülönül a fölötte álló címtől, és nem olvasódik össze vele. */
.app-header-crumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* NEM `--text-tertiary`. Az fehér fejlécen 2,54:1, és 9,5 képpontos nagybetűnél ez már nem
     halkság, hanem olvashatatlanság. A `--text-secondary` 4,83:1, tehát átmegy a küszöbön, és
     a nagybetűs, ritkított szedés miatt a morzsa így is elkülönül a fölötte álló címtől.
     A kisebb betű a HELYET adja vissza, nem a láthatóságot veszi el. */
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
}
.app-crumb {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  /* HOSSZ-KORLÁT: egy hosszú ügyfélnév vagy ajánlat-cím különben kitolná a fejlécből a
     keresőt. Az ellipszis megtartja az elejét, ami az azonosításhoz elég. */
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* A BÖNGÉSZŐ ALAP-LAPJA a gombokra `text-transform: none`-t ír, ami erősebb az örökölt
     nagybetűsítésnél. Emiatt a KATTINTHATÓ szintek kisbetűsek maradtak, a záró (nem gomb)
     szint viszont nagybetűs lett: `Főoldal / Ajánlatok / KATALÓGUS`. Ezért kell kiírni. */
  text-transform: inherit;
  letter-spacing: inherit;
}
.app-crumb[data-crumb] {
  cursor: pointer;
}
.app-crumb[data-crumb]:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}
.app-crumb-current {
  color: var(--text-primary);
}
.app-crumb-sep {
  color: var(--border-strong);
}
@media (max-width: 640px) {
  /* Telefonon szűk a fejléc, és a lap neve a cím-sorban úgyis ott van: a morzsa itt csak
     elvenné a helyet attól, ami számít. */
  .app-header-crumbs {
    display: none;
  }
}

/* Lucide ikonok egységes mérete a sidebarban (lucide svg-t ad) */
.app-sidebar-nav-item svg {
  width: 18px;
  height: 18px;
}

/* CONTENT */
.app-content {
  grid-area: content;
  overflow-y: auto;
  scrollbar-gutter: stable; /* a görgetősáv helye MINDIG fenntartva → nincs vízszintes ugrás, ha betöltéskor megjelenik/eltűnik a görgető */
  overflow-x: hidden; /* ne legyen vízszintes görgetés; a széles táblák saját .table-wrap-ben görögnek */
  min-height: 0; /* gridben kell, hogy csak EZ görögjön, ne a body */
  min-width: 0; /* a tartalom ne tágítsa a grid-sávot a viewport fölé */
  padding: var(--space-lg);
  background: var(--bg); /* full fehér tartalom-háttér (v1-szerű) */
}

/* =========================================
   MOBIL ALSÓ TAB-BAR (csak mobilon; core/mobile-nav.js köti be)
   Stílus a „kedvenc világos mobil irány" mockup szerint: fehér sáv, narancs központi „+".
   ========================================= */
.app-tabbar {
  display: none;
}
@media (max-width: 768px) {
  .app-tabbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(16, 24, 40, 0.06);
  }
  .m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 4px 0;
  }
  .m-tab svg {
    width: 22px;
    height: 22px;
  }
  .m-tab.on {
    color: var(--primary);
  }
  .m-tab-plus {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    margin-top: -24px;
    border-radius: 50%;
    /* A FŐ CTA-GOMB SZÍNEZÉSE (PO, 2026-09-04). Eddig lapos `--primary` volt, és emiatt máshogy
       nézett ki, mint a lapokon lévő fő gombok , holott EZ a fő művelet telefonon, mióta a
       polcról lekerült. Ugyanaz a szerep, ugyanaz a festés.
       A fehér gyűrű és a nagy, lebegő árnyék MARAD: az nem szín, hanem forma, és attól válik el
       a sávtól. A CTA saját, apró árnyékát itt nem használjuk, mert az egy lapos gombhoz való. */
    background: var(--cta-grad);
    background-clip: padding-box;
    color: #fff;
    border: 4px solid var(--bg);
    box-shadow: 0 6px 16px rgba(236, 90, 19, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .m-tab-plus svg {
    width: 26px;
    height: 26px;
  }
  /* a tartalom ne kerüljön a tab-bar alá */
  .app-content {
    padding-bottom: var(--tabbar-sav);
  }
}

/* MEGJEGYZÉS: a korábbi „meleg-világos mobil téma" (bézs token-felülírás mobilon) KIVÉVE (2026-07-01),
   hogy a mobil és a desktop EGYSÉGES legyen , ugyanaz a világos paletta, betű és sarok mindkettőn. */

/* =========================================
   GLOBÁLIS GOMBOK
   ========================================= */
/* A MÉRET A KOMPONENS RÉSZE (2026-08-02) , eddig nem volt az, és ez okozta a
   következetlenséget. A `.btn-primary` a SZÍNT és a formát egységesítette, a MAGASSÁGOT és a
   bélést viszont az szabta meg, HOL állt a gomb: a lista-fejen egy szabály 40 képpontra
   állította, az adatlap-fejen semmi nem állította, plusz nyolc modul-fájlban voltak további
   felülírások. Ugyanaz a gomb tehát máshogy nézett ki két képernyőn.
   INNENTŐL a méretet a JELÖLÉS mondja meg, nem a hely:
     alap        , párbeszédablak, űrlap, sor-akció
     .btn-nagy   , a lap FŐ gombja (lista-fej és adatlap-fej egyaránt)
     .btn-kicsi  , másodrangú kísérő: menü-nyitó, tömeges sáv, buborék
   Így ha egy gomb máshogy néz ki, az látszik a jelölésből, és nem kell CSS-t nyomozni. */
.btn-primary,
.btn-secondary,
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  /* A BETŰMÉRET KIMONDVA (2026-08-02) , ez volt a valódi oka annak, hogy a gombok oldalanként
     máshogy néztek ki. A lap tetején `button { font-size: inherit }` áll, tehát a gomb a
     KONTÉNERÉTŐL örökölte a méretet: a lista-fejben mást, az adatlap-fejben mást, egy
     kártyán megint mást. Innentől a gomb SAJÁT mérete van , örökölni nincs mit. */
  font-size: var(--font-sm);
  font-weight: 500;
  transition: all 0.15s;
}
/* NAGY , a lap egyetlen fő gombja. Magasabb és vastagabb betűs, mert ez az, amit el kell
   találni; a `--cta-radius` a ház gomb-formája (10 képpont). */
.btn-nagy {
  min-height: var(--btn-h-lg);
  padding: 0 var(--btn-pad-x-lg);
  border-radius: var(--cta-radius);
}
/* A VASTAG BETŰ CSAK A FŐ GOMBÉ (PO, 2026-08-02). A másodlagos gomb , Szerkesztés, Mégse ,
   ugyanabban a méretben, de VÉKONY vonallal áll mellette: a vastagítás kiemelés, és egy
   képernyőn egy dolog lehet kiemelve. Korábban a nagy méret a vastagságot is hozta, ezért
   lett a Szerkesztés ugyanolyan hangos, mint a fő gomb. */
.btn-primary.btn-nagy {
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* KICSI , ami csak KÍSÉR: a „Műveletek" menü nyitója, a tömeges művelet-sáv, a buborék
   gombjai. Ha ugyanakkora lenne, mint a fő gomb, ugyanolyan fontosnak látszana. */
.btn-kicsi {
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: var(--btn-font-sm);
}

/* A FŐ GOMB , EGYETLEN színátmenettel, mindenhol ugyanaz (2026-07-31).
   Eddig KÉTFÉLE létezett: az alap gombon egy halkabb, kétmegállós átmenet, a modul-fejlécben
   viszont a `--cta-grad` háromlépcsős, fényes változata. Ugyanaz az osztály tehát máshogy
   nézett ki attól függően, HOL állt , pont az a fajta következetlenség, ami miatt az egész
   felület kapkodottnak hatott. Innentől a `--cta-grad` az egyetlen, a fejléc-szabály pedig
   már csak a MÉRETET és a formát adja hozzá, a színt nem. */
.btn-primary {
  background: var(--cta-grad);
  color: #fff;
  border: 1px solid var(--cta-line);
  background-clip: padding-box; /* nincs hajszál-csík a lekerekített széleken */
  box-shadow: var(--cta-shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
/* A hover NEM színt vált, hanem EMEL. A színváltás azt sugallná, hogy más gombra mutatsz;
   az emelkedés azt, hogy ugyanaz a gomb reagál rád. */
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(234, 88, 12, 0.32),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.btn-primary:disabled {
  transform: none;
  filter: grayscale(0.5) opacity(0.6);
  cursor: not-allowed;
}

/* ===== 3a CTA gomb GLOBÁLISAN a modul-fejléc gombokra (Új X + szerkesztő-mentés) =====
   Csak a /* SZERKESZTŐ-LAP CÍME a lap-fejlécben („Szabadság rögzítése", „Új céges esemény"…).
   KÖZÖS OSZTÁLY, mert NÉGY modul írta meg külön néven, betűre azonos szabállyal
   (`.mv-editor-title`, `.kap-editor-title`, `.mr-editor-title`, `.szab-editor-title`).
   Négy másolat négyfelé csúszik: aki az egyiket állítja, a másik hármat nem is látja. */
.page-listhead-title {
  font-weight: 600;
  font-size: var(--font-base);
  color: var(--text-primary);
}

.page-listhead-actions-ben (+ CRM saját .crm-toolbar fejléce) , így a
   confirm/modal .btn-primary NEM lesz glossy. */
/* ===== A LAP FŐ GOMBJA , EGY SZABÁLY, MINDEN FEJ-SÁVRA (2026-08-02) =====
   Korábban KÉT egymásnak ellentmondó szabály volt ugyanerre: az egyik 42 képpontot mondott,
   a másik 40-et , a későbbi nyert, tehát a 42 félrevezetett mindenkit, aki elolvasta. Az
   adatlap-fej pedig EGYIKET SEM kapta meg, ezért volt ott kisebb a gomb, mint a listában.
   Most a három fej-sáv EGY helyen kapja ugyanazt a méretet, a `.btn-nagy` értékeivel:
     .page-listhead-actions , lista-fej (Új ügyfél, Új érdeklődő…)
     .page-actions          , adatlap-fej (Szerkesztés, Ajánlat készítése…)
     .crm-toolbar           , a CRM régi fejléce
   Aki ezen KÍVÜL akar nagy gombot, az a `.btn-nagy` osztályt teszi rá , a méret ilyenkor a
   jelölésből látszik, nem CSS-nyomozásból. */
.page-listhead-actions .btn-primary,
.page-listhead-actions .btn-secondary,
.page-actions .btn-primary,
.page-actions .btn-secondary,
.crm-toolbar .btn-primary {
  min-height: var(--btn-h-lg);
  padding: 0 var(--btn-pad-x-lg);
  border-radius: var(--cta-radius);
}
/* A vastag betű itt is CSAK a fő gombé , a Szerkesztés vékony marad mellette. */
.page-listhead-actions .btn-primary,
.page-actions .btn-primary,
.crm-toolbar .btn-primary {
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* A „MŰVELETEK" MENÜ NYITÓJA KISEBB , minden fej-sávban. Nem a lap művelete, hanem AJTÓ a
   ritkább dolgokhoz: ha ugyanakkora, ugyanolyan fontosnak látszik, mint amit mögötte
   elrejtettünk. Ez a kivétel a fenti szabály alól, ezért áll KÖZVETLENÜL utána. */
.page-listhead-actions .app-tobbmuvelet-gomb,
.page-actions .app-tobbmuvelet-gomb {
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: var(--btn-font-sm);
  font-weight: 500;
  letter-spacing: 0;
}
/* CTA fénycsík (shimmer) eltávolítva , a glossy gomb marad, a mozgó csillanás nélkül. */

.btn-secondary {
  background: var(--bg);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-card);
}

.btn-text {
  background: transparent;
  color: var(--text-secondary);
}
.btn-text:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* VESZÉLYES (romboló) GOMB , törlés, visszavonás, véglegesen eltávolít.
   2026-08-17-ig nem volt ilyen a házban: a `.app-confirm-danger` CSAK a megerősítő-ablakban
   élt, tehát ahol egy szerkesztő láblécébe kellett törlés, ott minden modul mást csinált.

   HALVÁNY, NEM TÖMÖR. Szándékos: a lábléc elsődleges gombja a MENTÉS. Ha a törlés is tömör
   piros lenne, két hangos gomb versenyezne egymással, és a rombolóra könnyebb lenne
   ráhibázni. Tömör piros csak a megerősítő-ablakban van, ahol már ez az egyetlen kérdés.
   A jelölés HÁROM RÉTEGŰ: kuka-ikon + „Törlés" szó + halvány piros , a szín sosem egyedül. */
.btn-veszely {
  background: transparent;
  border-color: transparent;
  color: var(--error);
}
.btn-veszely:hover {
  background: var(--error-bg);
  border-color: var(--error-bg);
  color: var(--error-ink);
}

/* A lábléc-törlés BALRA ül, elszakadva a Mégse/Mentés pártól , hogy a romboló gomb ne
   legyen közvetlen szomszédja annak, amit a user amúgy is nyomni akar. */
.modal-footer .btn-veszely,
.mr-editor-actions .btn-veszely {
  margin-right: auto;
}
/* KERETES VÁLTOZAT , amikor a romboló művelet MAGA a fő művelet az ablakban, nem mellék-gomb
   egy szerkesztő láblécében. Ilyenkor a helye a JOBB szélen van (ott keresi a kéz a
   megerősítést), és keretet kap, hogy gombnak látszódjon, ne szövegnek. A szín marad a hibáé:
   a jelentés nem változik attól, hogy hol áll. */
.btn-veszely-keret {
  border-color: var(--error);
}
.modal-footer .btn-veszely.btn-veszely-keret {
  margin-right: 0;
}
/* HOVER: KERETESBŐL TÖMÖR. A halvány rózsaszín fátyol bizonytalannak látszott , egy romboló
   gombnál épp az ellenkezője kell: amikor rajta állsz, mondja ki magáról, hogy ez az.
   Ez a klasszikus „outline → solid" viselkedés, ugyanaz, mint az elsődleges gombnál, csak a
   hiba-színnel. A fehér felirat a tömör piroson kontrasztban is helyes. */
.btn-veszely-keret:hover,
.btn-veszely-keret:focus-visible {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

/* =========================================
   SLOT-KONTÉNER
   A modul-specifikus slot-konténerek a sajat
   ui/styles.css-jukben definiálják a stílust
   (pl. .penzugy-slot-container).
   Itt csak az APP-globális slot-okra:
   ========================================= */
.app-slot-container {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Hibadoboz (modul-loader + bootstrap diagnosztika) */
.app-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.app-error code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Általános slot-jellemző attribútum-alapján
   (minden slot-konténer attól-függetlenül hogy
   melyik modulhoz tartozik): */
[data-slot] {
  min-height: 1px; /* hogy üres-slot is layout-ban maradjon */
}

/* =========================================
   TOAST
   ========================================= */
/* A HELY: ALUL KÖZÉPEN (PO-döntés, 2026-08-02, „D" változat).
   koncepció/Kész koncept/ertesites-hely.html

   MI VOLT A BAJ A JOBB ALSÓ SAROKKAL: ott ül az asszisztens lebegő gombja is (22 képpont
   a saroktól, az üzenet 24), a réteg-sorrend pedig eldönti, ki nyer: az üzenet 2000-en van,
   a felugró panel 1000-en. Vagyis az üzenet MINDIG takart, sosem fordítva. És mivel a
   csúszó panel gombsora alul van, pont a Mentés gombra feküdt rá.

   MIÉRT ALUL ÉS NEM FENT: ahova kattintasz, oda néz a szemed. A panel gombsora és az
   űrlapok Mentés gombja alul van, tehát az alsó sáv a kattintás KÖZELÉBEN jelenik meg.
   Fent középen a képernyő másik végén villanna fel. */
.toast-container {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: min(420px, calc(100vw - 2 * var(--space-lg)));
  pointer-events: none; /* a sáv maga ne fogja el a kattintást a mögötte lévő felülettől */
}
.toast-container > * {
  pointer-events: auto;
}

/* NYITOTT PANELNÉL A PANEL GOMBSORA FÖLÉ DOKKOL. Enélkül a képernyő-közép fél panelre,
   fél háttérre lógna, és megint takarna. A `van-felugro` osztályt a shared/modal.js teszi
   a body-ra , CSS-ből nem lehet visszafelé válogatni a testvér-elemek között. */
body.van-felugro .toast-container {
  left: auto;
  right: 0;
  transform: none;
  bottom: 92px; /* a panel gombsora (kb. 68 képpont) fölött */
  width: clamp(560px, 52vw, 960px); /* a panel szélessége, lásd a slide-over szabályt */
  max-width: 92vw;
}
/* A KÖZÉPRE UGRÓ kis megerősítő-ablaknál marad az alap: az kicsi és középen áll,
   az alsó sáv alatta van, nem takarja. */
body.van-felugro--kozep .toast-container {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: var(--space-lg);
  width: min(420px, calc(100vw - 2 * var(--space-lg)));
}

/* MOBIL: FELÜL. Az alsó sávot a fül-menü és a plusz gomb foglalja, a hüvelykujjad is ott van.
   A visszajelzés viszont mobilon FONTOSABB, mint gépen (kis képernyő, takaró billentyűzet),
   ezért nem elvesszük, hanem áttesszük. Amit elveszünk, az a MENNYISÉG: amit a felület
   magától megmutat, arra mobilon sincs üzenet. */
@media (max-width: 768px) {
  .toast-container {
    top: calc(56px + env(safe-area-inset-top));
    bottom: auto;
    width: calc(100vw - 2 * var(--space-md));
  }
  body.van-felugro .toast-container,
  body.van-felugro--kozep .toast-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: calc(56px + env(safe-area-inset-top));
    bottom: auto;
    width: calc(100vw - 2 * var(--space-md));
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px var(--space-md);
  box-shadow: var(--shadow-md);
  animation: uzenet-be 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}
/* AZ ÁLLAPOTOT IKON-KORONG JELÖLI, nem színes bal keret: a dísz-célú bal szegély a ház
   szabálya szerint tiltott, ráadásul egy 3 képpontos csík a szem sarkából nem olvasható. */
.toast-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.toast-szoveg {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-sm);
  line-height: 1.45;
}
/* ISMÉTLŐDÉS-SZÁMLÁLÓ: ugyanaz az üzenet nem tornyosul, hanem számol. Enélkül egy hurokban
   futó művelet elárasztja a képernyőt (a szín-választónál pontosan ez történt). */
.toast-db {
  flex: 0 0 auto;
  align-self: center;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* VISSZAVONÁS , csak ott jelenik meg, ahol tényleg van visszaút. Ha minden üzenet
   felkínálná, de a fele nem működne, a gomb hazudna, és utána egyiknek sem hinnél. */
.toast-akcio {
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.toast-akcio:hover {
  background: var(--bg-secondary);
}
/* VALÓDI BEZÁRÓ GOMB. Eddig a teljes lap volt kattintható, ami egérrel működött, de
   billentyűzetről nem, és képernyőolvasóval sem volt megnevezve. */
.toast-zar {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.toast-zar:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.toast-akcio:focus-visible,
.toast-zar:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.toast.toast-success .toast-ikon {
  background: var(--success-bg);
  color: var(--success-ink);
}
.toast.toast-error .toast-ikon {
  background: var(--error-bg);
  color: var(--error-ink);
}
.toast.toast-info .toast-ikon {
  background: var(--info-bg);
  color: var(--info-ink);
}
/* A HIBA nem tűnik el magától (lásd shared/toast.js), ezért erősebb kerettel is elválik:
   ránézésre látszik, hogy ez az, amivel kezdeni kell valamit. */
.toast.toast-error {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
}

/* AZ ÜZENET ONNAN ÉRKEZIK, AHOL MEGÁLL: alulról fölfelé. A régi `slide-in` jobbról repítette
   be, ami a sarok-elhelyezéshez tartozott , alul középen az oldalirányú belépés indokolatlan
   mozgás lenne. */
@keyframes uzenet-be {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =========================================
   MODAL
   ========================================= */
.modal-container {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  /* ne lehessen a felugró ablakot ujjal elhúzni (a háttér se mozduljon) */
  touch-action: none;
  overscroll-behavior: contain;
}

.modal-container.is-open {
  display: flex;
}

.modal {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  width: 100%;
  touch-action: pan-y; /* belül csak függőleges görgetés, vízszintesen NE húzható */
  overscroll-behavior: contain;
}

.modal-sm {
  max-width: 420px;
}
.modal-md {
  max-width: 640px;
}
.modal-lg {
  max-width: 960px;
}
.modal-xl {
  max-width: 1100px;
}

/* =========================================
   DESKTOP: az openModal-ok (űrlapok) JOBBRÓL BEÚSZÓ slide-over panelek.
   A megerősítések külön komponens (.app-confirm) → azok középen maradnak.
   Szélesség a képernyőhöz skálázódik (laptop keskenyebb, 2K szélesebb).
   ========================================= */
@keyframes modal-slideover {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (min-width: 769px) {
  .modal-container {
    align-items: stretch;
    justify-content: flex-end;
  }
  .modal {
    height: 100%;
    max-height: 100%;
    width: clamp(560px, 52vw, 960px);
    max-width: 92vw;
    margin: 0;
    padding: 0;
    border-radius: 16px 0 0 16px;
    display: flex;
    flex-direction: column;
    overflow: visible; /* ne vágja le a natív dátum-választó popupját */
    animation: modal-slideover 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* méret-hint = panel-szélesség (skálázódva) */
  .modal.modal-sm {
    width: var(--slideover-w);
  }
  .modal.modal-lg {
    width: clamp(600px, 52vw, 900px);
  }
  .modal.modal-xl {
    width: clamp(680px, 60vw, 1040px);
  }
  .modal-header {
    margin-bottom: 0;
    padding: 20px 26px;
    border-bottom: 1px solid var(--border);
  }
  .modal-body {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    padding: 22px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal-footer {
    padding: 16px 26px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
}
/* nagy képernyőn kicsit nagyobb betű a slide-overben (kényelmesebb 2K-n) */
@media (min-width: 1600px) {
  .modal-body {
    font-size: 15px;
  }
}

/* KÖZÉPRE-ugró popup (openModal({ centered:true })) , felülírja a desktop jobbról-beúszót.
   Kis, lekerekített, magasság-a-tartalomhoz doboz a képernyő közepén. Pl. értesítés-popup. */
@keyframes modal-popin {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (min-width: 769px) {
  .modal-container.is-centered {
    align-items: center;
    justify-content: center;
  }
  .modal-container.is-centered .modal,
  .modal-container.is-centered .modal.modal-sm,
  .modal-container.is-centered .modal.modal-lg,
  .modal-container.is-centered .modal.modal-xl {
    height: auto;
    max-height: 85vh;
    width: clamp(360px, 40vw, 520px);
    margin: 0;
    border-radius: 16px;
    animation: modal-popin 0.18s ease-out;
  }
  /* A lábléc saját háttere van (a doboz overflow-ja szándékosan visible a natív
     dátum-választó miatt), ezért a lekerekítést neki is meg kell ismételnie,
     különben szögletesen ráfest a doboz alsó sarkaira. */
  .modal-container.is-centered .modal-footer {
    border-radius: 0 0 16px 16px;
  }
}

/* A form-mezők töltsék ki a helyüket, ne lógjanak ki (pl. dátum-input a 3-oszlopos sorban) */
.modal-body input[type='text'],
.modal-body input[type='number'],
.modal-body input[type='date'],
.modal-body input[type='email'],
.modal-body input[type='tel'],
.modal-body input[type='password'],
.modal-body select,
.modal-body textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* A FELUGRÓ MEZŐK ALAP-KINÉZETE (PO, 2026-08-17: „nagyon régimódi, egy alacsony sor látható").
   Eddig a fenti szabály CSAK szélességet állított , vizuálisat semmit. Ezért néz ki minden
   modul felugró mezője csupaszon, hacsak a modul maga nem stílusozza. Nem egy modul hibája,
   hanem házi hiány.

   `:where()`-BE CSOMAGOLVA, és ez a lényeg: a `:where()` fajsúlya NULLA, tehát ez csak
   ALAPÉRTELMEZÉS. Bármelyik modul saját szabálya felülírja, akkor is, ha csak egy osztályt
   használ. Így egyetlen meglévő felület sem változik meg, viszont ahol eddig semmi nem volt,
   ott mostantól a ház szerinti mező áll. */
:where(.modal-body) input[type='text'],
:where(.modal-body) input[type='number'],
:where(.modal-body) input[type='date'],
:where(.modal-body) input[type='email'],
:where(.modal-body) input[type='tel'],
:where(.modal-body) input[type='password'],
:where(.modal-body) input[type='search'],
:where(.modal-body) select,
:where(.modal-body) textarea {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-base);
  line-height: 1.4;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
:where(.modal-body) input:focus,
:where(.modal-body) select:focus,
:where(.modal-body) textarea:focus {
  outline: none;
  border-color: var(--primary);
  /* A fókusz LÁTHATÓ, nem csak a keret színe , billentyűzettel is követhető legyen. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
:where(.modal-body) input::placeholder,
:where(.modal-body) textarea::placeholder {
  color: var(--text-tertiary);
}

/* Jelszó-beállító ablak (meghívó-/recovery-link után): egységes, egymás-alatti mezők */
.set-pw {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.set-pw-lead {
  margin: 0;
  color: var(--text-secondary);
}
.set-pw-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.set-pw-hint {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.modal-title {
  font-size: var(--font-h3);
  font-weight: 600;
}

.modal-close-x {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-tertiary);
  padding: 0 var(--space-xs);
}
.modal-close-x:hover {
  color: var(--text-primary);
}

.modal-body {
  margin-bottom: var(--space-lg);
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}

/* EGYSOROS LÁBLÉC , ahol a gombok EGYÜTT alkotnak egy döntést, és a törés félrevezetne.
   Az értesítés-ablaknál a négy gomb két sorba csúszva úgy nézett ki, mintha a felső kettő nem is
   ehhez tartozna, és az „Olvasatlanra" könnyen kimaradt. Itt tehát nem törünk, hanem hagyjuk a
   gombokat keskenyedni: a szöveg ilyenkor is olvasható marad, a döntés viszont egyben látszik. */
.modal-footer--egysor {
  flex-wrap: nowrap;
}
.modal-footer--egysor .btn-secondary,
.modal-footer--egysor .btn-primary {
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .modal-footer--egysor {
    gap: 6px;
  }
  .modal-footer--egysor .btn-secondary,
  .modal-footer--egysor .btn-primary {
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--font-sm);
  }
  /* A törlés ikonja marad, a szava elfér nélküle is , a szín és a hely megmondja, mi az. */
  .modal-footer--egysor .notif-sp {
    display: none;
  }
}

/* =========================================
   BELÜL GÖRGŐ PANEL (.app-gorgeto) , KÖZÖS
   Bárhol, ahol egy doboznak SAJÁT görgetése van (levél-lista, levél-törzse, hosszú oldalsáv).
   KÉT DOLGOT OLD MEG:
   1. Nem foglal helyet a görgetősávnak. A `scrollbar-gutter: stable` fenntartja a sáv helyét
      akkor is, ha nincs mit görgetni , kevés elemnél ez egy üres, szürke csík a doboz jobb
      szélén, és a tartalom láthatóan nem ér ki a keretig.
   2. Vékony, halk sávot rajzol. Az alapértelmezett rendszer-görgető a doboz belsejében túl
      vastag: elviszi a figyelmet a tartalomról, ami miatt a doboz ott van.
   ========================================= */
.app-gorgeto {
  overflow-y: auto;
  /* A GÖRGETÉS TOVÁBBADÓDIK (PO, 2026-08-22). Korábban `contain` állt itt, ami azt jelenti:
     ha a doboz aljára érsz, a görgetés MEGÁLL, és a mögötte lévő lap nem mozdul. Ilyenkor
     az egeret ki kell vinni a dobozból, hogy tovább tudj görgetni , ez a felhasználónak
     „beragadás", nem védelem.
     A KÜLÖNBSÉG, amit tartani kell: ami RÁTAKAR a lapra (felugró ablak, legördülő lista),
     az `contain` marad, mert ott a háttér mozgása hiba. Ami a lap RÉSZE (munkalap, lista-hasáb),
     az továbbadja. Lásd `docs/OLDAL-STRUKTURA-MINTA.md` 6/B. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 40%, transparent) transparent;
}
.app-gorgeto::-webkit-scrollbar {
  width: 10px;
}
.app-gorgeto::-webkit-scrollbar-track {
  background: transparent;
}
.app-gorgeto::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-tertiary) 40%, transparent);
  background-clip: padding-box;
}
.app-gorgeto:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-tertiary) 65%, transparent);
  background-clip: padding-box;
}

/* =========================================
   OLVASÓ-ABLAK (.app-olvaso) , KÖZÖS
   A levél „eredeti formátumban" és a dokumentum-kép (pl. ajánlat, ahogy az ügyfél látja).
   A jelölést a `shared/olvaso-ablak.js` rajzolja; három modul használja (Értékesítés,
   Levelezés, Ajánlatok), ezért a stílus IS egy helyen van.

   MIÉRT ÁTMÉRETEZHETŐ: a hírlevelek fix, 600 képpontos táblázatok, a bizonylatok A4-esek , az
   egyik felhasználónak szélesebb kell, a másiknak magasabb. A `resize: both` ezt rábízza arra,
   aki nézi. A minimum a nyitó méret: kisebbre húzva már olvashatatlan lenne.
   ========================================= */
.modal-container.is-centered .modal.app-olvaso {
  width: min(1400px, 97vw);
  height: min(920px, 95vh);
  min-width: min(1400px, 97vw);
  min-height: min(920px, 95vh);
  max-width: 99vw;
  max-height: 99vh;
  resize: both;
  overflow: auto;
}
/* A TARTALOM KÖVESSE AZ ABLAK MÉRETÉT. Enélkül a húzás csak a doboz körül adna üres helyet,
   a levél pedig maradna a régi méretben , az pont a fordítottja annak, amiért húzod. */
.modal.app-olvaso .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* a görgetés a keret BELSEJÉBEN történik, nem a törzsön */
}
.app-olvaso-test {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* HÁLÓ a vízszintes sáv ellen. A valódi okot a kódban javítottuk (a keret szélességéhez nem
     nyúlunk, csak a `zoom`-jához), tehát mérés szerint 1440, 1920 és 2560 képpontnál is
     pontosan nulla a túllógás. Ez a sor a kerekítési maradékot fogja meg. */
  overflow: hidden;
}
.app-olvaso-fej {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-olvaso-ki {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-olvaso-ki b {
  font-size: var(--font-sm);
}
.app-olvaso-ki span {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}
.app-olvaso-sp {
  flex: 1;
}
.app-olvaso-ido {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  white-space: nowrap;
}
.app-olvaso-targy {
  margin: 10px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  font-size: var(--font-sm);
  font-weight: 600;
  word-break: break-word;
}
.app-olvaso-cimke {
  color: var(--text-tertiary);
  font-weight: 500;
}
.app-olvaso-szoveg {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: var(--font-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
/* A keret az ablak magasságához igazodik, és BELÜL görget , így a tartalom hossza nem
   nyújtja el az ablakot a képernyőn túlra. */
.app-olvaso-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: block;
}
/* SAJÁT JELÖLÉSŰ DOKUMENTUM (nincs keret): a lap CSS-e stílusozza, itt csak a görgetés és a
   papír-szerű háttér kell , az ajánlat A4-es lapként rajzolódik, és a szürke háttéren látszik
   is, hol ér véget. */
.app-olvaso-dok {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

/* NÉZET-VÁLTÓ SÁV a törzs tetején (szöveges ↔ eredeti formátum). */
.app-olvaso-sav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
}
.app-olvaso-valto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.app-olvaso-valto:hover {
  color: var(--primary);
}
.app-olvaso-valto i,
.app-olvaso-valto svg {
  width: 13px !important;
  height: 13px !important;
}

/* =========================================
   NYILAS FOLYAMAT-SÁV (.app-chev) , KÖZÖS
   Az Értékesítés ügyfél-adatlapján született (szakasz-előzmény), 2026-08-21 óta az
   ajánlat-varázsló lépés-sávja is ezt viseli. EGY definíció, két név: a `.crm-chev*` álnév,
   hogy a meglévő CRM-jelölést ne kelljen átírni.

   MIT MOND EL: hol tartasz (narancs), mi van mögötted (zöld), mi jön még (halvány), és
   mindegyik alatt EGY SOR arról, mi dőlt el. A szín SOSEM egyedüli jelzés: a felirat kimondja.
   A NYÍL-ALAK a sorrendet mondja el, nem dísz , az első elem balra egyenes, az utolsó jobbra.
   ========================================= */
.app-chev-sav,
.crm-chev-sav {
  display: flex;
  gap: 3px;
}
.app-chev,
.crm-chev {
  flex: 1 1 0;
  min-width: 0;
  /* MAGASABB SÁV (PO, 2026-08-01): a név és az alatta lévő sor korábban 6 képpontos béléssel
     préselődött egymásra, és alig volt olvasható , pedig ez a sáv mondja meg, hol tartasz. */
  padding: 11px 14px 11px 26px;
  border: 0;
  background: var(--bg-secondary);
  font-family: inherit;
  text-align: left;
  /* nyíl-alak: jobbra mutató csúcs, balra bemetszés (az első és az utolsó elem egyenes) */
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
}
.app-chev:first-child,
.crm-chev:first-child {
  padding-left: 14px;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.app-chev:last-child,
.crm-chev:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
}
.app-chev-nev,
.crm-chev-nev {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-chev-nap,
.crm-chev-nap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-chev-nap svg,
.crm-chev-nap svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
/* MÖGÖTTÜNK LÉVŐ szakasz , halvány zöld. Eddig ugyanolyan szürke volt, mint a be nem járt,
   tehát ránézésre nem lehetett megkülönböztetni azt, amin TÚL VAGYUNK, attól, ahova MÉG NEM
   jutottunk el. Pedig pont ez a sáv egyetlen kérdése. */
.app-chev-kesz,
.crm-chev-kesz {
  background: color-mix(in srgb, var(--success) 13%, transparent);
}
.app-chev-kesz .app-chev-nev,
.crm-chev-kesz .crm-chev-nev {
  color: var(--text-primary);
}
.app-chev-kesz .app-chev-nap,
.crm-chev-kesz .crm-chev-nap {
  color: color-mix(in srgb, var(--success) 75%, var(--text-secondary));
}
/* JELENLEGI , halvány-narancs kiemelés (nem dísz-keret) */
.app-chev-jelenlegi,
.crm-chev-jelenlegi {
  background: var(--primary-tint);
}
.app-chev-jelenlegi .app-chev-nev,
.crm-chev-jelenlegi .crm-chev-nev {
  color: var(--primary-dark);
  font-weight: 750;
}
.app-chev-jelenlegi .app-chev-nap,
.crm-chev-jelenlegi .crm-chev-nap {
  color: var(--primary-dark);
  font-weight: 700;
}
/* JÖVŐBELI , nagyon halvány */
.app-chev-jovobeli .app-chev-nev,
.app-chev-jovobeli .app-chev-nap,
.crm-chev-jovobeli .crm-chev-nev,
.crm-chev-jovobeli .crm-chev-nap {
  color: var(--text-tertiary);
}
/* NINCS ADAT , a felület KIMONDJA, nem tippel (dőlt, halvány).
   A jövőbeli szakasz NEM ilyen: az nem hiányzó adat, hanem tény („még nem járt itt"). */
.app-chev-nincsadat .app-chev-nap,
.crm-chev-nincsadat .crm-chev-nap {
  font-style: italic;
  color: var(--text-tertiary);
}
/* MEGAKADT , piros jelzés (a szín mellett mindig ott a szöveg is) */
.app-chev-akadt,
.crm-chev-akadt {
  background: color-mix(in srgb, var(--error) 12%, transparent);
}
.app-chev-akadt .app-chev-nev,
.app-chev-akadt .app-chev-nap,
.crm-chev-akadt .crm-chev-nev,
.crm-chev-akadt .crm-chev-nap {
  color: var(--error);
  font-weight: 700;
}
/* VÁZ-SOROK betöltés közben */
.app-chev-vazsor,
.crm-chev-vazsor {
  display: block;
  height: 9px;
  margin: 3px 0;
  border-radius: 999px;
  background: var(--border);
  opacity: 0.7;
}
.app-chev-vazsor-rovid,
.crm-chev-vazsor-rovid {
  width: 60%;
}

/* ── A VARÁZSLÓ-VÁLTOZAT ── A lépés-sávban a chevron KATTINTHATÓ, tehát gomb, nem doboz.
   Két új állapota is van, ami az ügyfél-adatlapon nem értelmezett: HIÁNY (borostyán, valami
   kell még) és ZÁRT (nem léphetsz oda, mert előtte akadály van). */
button.app-chev {
  cursor: pointer;
  transition: filter 0.12s;
}
button.app-chev:not(:disabled):hover {
  filter: brightness(0.97);
}
button.app-chev:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.app-chev-figyelem {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.app-chev-figyelem .app-chev-nev,
.app-chev-figyelem .app-chev-nap {
  color: var(--warning-ink, var(--text-primary));
  font-weight: 700;
}
/* ZÁRT , a lakat és a kiírt indoklás jelöl, nem a szín. Nem tűnik el: látod, hány lépés van
   hátra, és azt is, MIÉRT nem mehetsz még oda. */
.app-chev-zarva {
  cursor: not-allowed;
}
.app-chev-zarva .app-chev-nev,
.app-chev-zarva .app-chev-nap {
  color: var(--text-tertiary);
}

/* =========================================
   SZAKASZ-VÁLTÓ (segmented control) , KÖZÖS
   Egy vezérlő, több modul. 2026-08-19-ig CSAK a CRM stíluslapjában létezett `.crm-segmented`
   néven, ezért a Levelezés moduljában (ahol a CRM CSS nincs betöltve) stílus nélkül,
   csupasz szövegként jelent meg. A DEFINÍCIÓ EGY HELYEN van, a `.crm-*` név csak álnév,
   hogy a meglévő CRM-markupot ne kelljen átírni.
   ========================================= */
.app-segmented,
.crm-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.app-seg,
.crm-seg {
  flex: 1 1 auto;
  min-height: 40px;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.app-seg:hover,
.crm-seg:hover {
  color: var(--text-primary);
}
/* A KIVÁLASZTOTT nem csak színnel válik el: saját (világos) lapot és árnyékot kap, tehát
   színvakon és halvány kijelzőn is látszik, melyiken állunk. */
.app-seg.active,
.crm-seg.active {
  background: var(--bg);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* =========================================
   STATUS-BADGE
   ========================================= */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
/* A jelvények TOKENT használnak, nem kézzel írt színt (2026-08-08).
   Korábban ugyanezek a hex-értékek voltak ideírva, miközben a tokenek már léteztek , tehát
   a szín két helyen élt, és rebrandnél elcsúszott volna. A csere képpontra azonos. */
.app-badge-success {
  background: var(--success-bg);
  color: var(--success-ink);
}
.app-badge-warning {
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.app-badge-error {
  background: var(--error-bg);
  color: var(--error-ink);
}
.app-badge-info {
  background: var(--info-bg);
  color: var(--info-ink);
}
.app-badge-neutral {
  background: var(--neutral-bg);
  color: var(--neutral-ink);
}

/* =========================================
   KÖZLEMÉNY-SÁV  (.app-kozlemeny)
   Magyaráz: miért nem lehet valamit megcsinálni, mi a következő lépés, mire számítson.
   NEM hiba-buborék , az eltűnik, ez ottmarad, amíg érvényes.

   MIÉRT KÖZÖS: 2026-08-17-ig minden modul a saját halvány szürke sorát írta meg erre
   (`.mr-hint` és társai). A PO pont ezt kifogásolta: „látom az információs jelet, csak nem
   elég határozottan látszik." Egy halvány szürke sor a lap alján nem közlemény, hanem dísz.

   HÁROM RÉTEGŰ JELÖLÉS: ikon + szó + halvány háttér. A szín SOSEM egyedül hordozza a
   jelentést , színvak olvasónak és fekete-fehér nyomtatásban is működnie kell.
   ========================================= */
.app-kozlemeny {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--info-ink);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--info-ink);
  font-size: var(--font-sm);
  line-height: 1.45;
}
.app-kozlemeny i,
.app-kozlemeny svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  /* Az ikon a SZÖVEG ELSŐ SORÁVAL egy vonalban , nem a doboz közepén lebeg. */
  margin-top: 1px;
}
.app-kozlemeny strong {
  font-weight: 650;
}
/* Ha a közleményben CSELEKVÉS is van (pl. „Levonás elintézése"), a gomb a jobb szélre kerül,
   és nem nyúlik a szöveg magasságára. A szöveg viszi a maradék helyet. */
.app-kozlemeny > span {
  flex: 1 1 auto;
  min-width: 0;
}
.app-kozlemeny > button {
  flex: 0 0 auto;
  align-self: center;
}
@media (max-width: 640px) {
  /* Szűk kijelzőn a gomb a szöveg ALÁ kerül , egymás mellett mindkettő olvashatatlanná válna. */
  .app-kozlemeny {
    flex-wrap: wrap;
  }
  .app-kozlemeny > button {
    margin-left: auto;
  }
}

/* A [hidden] attribútumot tiszteletben kell tartani: a fenti `display: flex` (author-szabály)
   egyébként felülírná a böngésző `[hidden]{display:none}` szabályát, és a rejtett közlemény
   LÁTSZANA. Ugyanaz a csapda, mint a `.page-modtab[hidden]`-nél. */
.app-kozlemeny[hidden] {
  display: none;
}

.app-kozlemeny--figyelem {
  border-color: var(--warning-ink);
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.app-kozlemeny--baj {
  border-color: var(--error-ink);
  background: var(--error-bg);
  color: var(--error-ink);
}
.app-badge-new {
  background: var(--new-bg);
  color: var(--new-ink);
}
/* nagyon halvány piros: jelzi a kiadást, de nem riaszt (nem "hiba"-piros) */
.app-badge-expense {
  background: var(--expense-bg);
  color: var(--expense-ink);
}

/* =========================================
   MAI KIOSZTÁSOM (belépéskori felugró)
   ========================================= */
.morning-inbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.morning-sec-h {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}
.morning-sec-h.is-new {
  color: var(--primary);
}
.morning-sec-h.is-late {
  color: var(--error);
}
.morning-sec-h.is-today {
  color: var(--warning);
}
.morning-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  padding: 0 8px;
}
.morning-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.morning-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
}
.morning-list li:last-child {
  border-bottom: none;
}
.morning-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.morning-date {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* =========================================
   EMPTY-STATE
   ========================================= */
.app-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-secondary);
}
.app-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.7;
}
.app-empty-title {
  font-size: var(--font-h4);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.app-empty-message {
  font-size: var(--font-base);
  margin-bottom: var(--space-lg);
  max-width: 360px;
}

/* =========================================
   SKELETON-LOADER
   ========================================= */
.app-skeleton-row {
  height: 44px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s infinite;
}
@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* =========================================
   KÁRTYA + KPI (modulok közös-építőelemei)
   ========================================= */
.app-card {
  background: var(--bg-card);
  border: 1px solid var(--felulet-keret);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm); /* letisztult kontúr: minimális árnyék, a keret a fő delineáló */
}

/* Lista-nézet záró összesítő-sávja (a táblázat tfoot megfelelője a kártya-listákhoz) */
.app-list-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 2px solid var(--border-strong);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.app-list-sum strong {
  font-size: var(--font-base);
  color: var(--text-primary);
}

/* ===== KPI-SÁV , a mérőszámok EGY sávban, nem külön kártyákként ==========
   A minta a `koncepció/Kész koncept/szabadsag-latvany-koncept.html`-ből jön (PO, 2026-08-16):
   „a konceptekbe már nem ilyen kártyákként vannak, hanem egy hosszú sorban".

   MIÉRT JOBB EGY SÁVBAN: a mérőszámok EGYÜTT mondanak valamit („13 nap maradt a 27-ből,
   14-et kivettél"). Külön kártyákra vágva a szem külön-külön olvassa őket, és a keretek
   háromszor annyi vonalat visznek a képernyőre, mint amennyi információt hordoznak.

   HÁROM RÉTEG SORONKÉNT , az alsor NEM dísz: a puszta szám ritkán mond eleget.
     cimke  , mit mérünk           („Maradt")
     ertek  , a szám               („13 nap")
     alsor  , mihez képest         („27 napos keretből")

   `tabular-nums`: az egymás alatti számok azonos szélességű jegyekkel állnak, tehát a szem
   oszlopként olvassa őket. Enélkül a „11" és a „44" más széles, és a sáv nyugtalan.

   ELŐZMÉNY: volt egy `app-kpi-grid` + `app-kpi-card` készlet, amit MÉRVE EGYETLEN modul sem
   használt , közben a Szabadság, a Kapacitásterv és a Pénzügy külön-külön megírta magának
   ugyanezt (`szab-card*`, `kap-kpi*`, `penzugy-kpi*`). Ez a blokk váltja ki mind a négyet. */
.app-kpi-sav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: var(--space-md) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.app-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.app-kpi-cimke {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.app-kpi-ertek {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.app-kpi-alsor {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* BAJ-ÁLLAPOT , három rétegű jelölés: a SZÓ az alsorban áll („a keretet túllépted"), a JEL a
   mínusz-előjel, és csak HARMADIKKÉNT jön a szín. A szín soha nem áll egyedül. */
.app-kpi-ertek.is-baj {
  color: var(--error);
}
.app-kpi-alsor.is-baj {
  color: var(--error);
}
.app-kpi-ertek.is-fig {
  color: var(--warning, #b45309);
}

/* =========================================
   HAMBURGER (mobil-sidebar kapcsoló)
   ========================================= */
.app-hamburger {
  display: none; /* desktopon rejtve */
  background: transparent;
  border: none;
  font-size: 22px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-primary);
}
.app-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-dropdown);
}
.app-sidebar-backdrop.is-open {
  display: block;
}

/* =========================================
   ÖSSZECSUKHATÓ OLDALSÁV (ikon-sáv) , desktop/tablet
   <768px: hamburger-drawer (lásd lent). 768-1280px: alapból ikon-sáv. >1280px: alapból nyitva.
   A default állapotot a main.js állítja (szélesség szerint), a toggle felülírja (localStorage).
   ========================================= */
.app-shell {
  transition: grid-template-columns 0.18s ease;
}
/* AZ OLDALSÁV FEJE , csak az összecsukó lakik benne, jobbra igazítva.
   Jobbra, mert ott van a sáv és a tartalom HATÁRA, tehát a gomb annál az élnél áll, amit
   mozgat. Balra igazítva a menüpontok fölé került volna, és menüpontnak látszana.

   SZOROS SÁV. Az első változat egy ikon köré rakott egy majdnem 50 képpontos üres csíkot, és
   a gomb elveszett benne. Egy ikonnak nem jár saját emelet: a sáv pont akkora, mint a gomb,
   és a gomb az, ami a hely nagy részét kitölti. */
.app-sidebar-fej {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 34px;
  padding: 0 6px;
  flex: 0 0 auto;
}
/* Összecsukott (ikon-sáv) állapotban középre áll: ott nincs mihez jobbra igazodni. */
body.sidebar-rail .app-sidebar-fej {
  justify-content: center;
  padding: 0;
}
/* A GOMB PONTOS DOBOZA. Négyzet, mert ikon van benne: a korábbi aszimmetrikus belső margó
   (fent-lent kicsi, jobbra-balra nagy) fekvő téglalapot csinált egy álló ikon köré, és ettől
   látszott aránytalannak. A 28-as méret elég nagy célpont egérrel, és nem uralja a sávot. */
.app-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 8px;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.app-sidebar-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
/* a nyíl megfordul, ha a sáv össze van csukva (« → ») */
/* AZ IKON MOZGÁSA A SÁVÉVAL EGYÜTT. Ugyanaz a 0.18 másodperc és ugyanaz a görbe, mint a
   `.app-shell` rács-átmenetén , ez a lényeg. Ha a kettő ideje vagy görbéje eltér, a szem
   KÉT külön eseményt lát (előbb fordul az ikon, aztán csúszik a sáv), és attól hat olcsónak
   az egész, akármilyen szép az ikon. Így egyetlen mozdulat. */
.app-sidebar-toggle svg {
  width: 17px;
  height: 17px;
  transition: transform 0.18s ease;
}
/* A dupla chevron IRÁNYT mutat: kinyitva balra („csukd össze"), összecsukva jobbra
   („nyisd ki"). A 180 fokos fordulat nála értelmes mozdulat, mert a jelentése is fordul.
   A korábbi panel-ikonnál a forgatás csak tükrözés volt, tehát semmit nem közölt. */
body.sidebar-rail .app-sidebar-toggle svg {
  transform: rotate(180deg);
}
/* A HOVER a sávra is figyel: elég a sáv fölé érni, és a gomb máris jelzi magát. Így nem kell
   pixelre eltalálni egy halvány ikont , de a gomb közben nem lesz hangosabb a menünél. */
.app-sidebar-fej:hover .app-sidebar-toggle {
  color: var(--text-secondary);
}
@media (min-width: 769px) {
  /* A keskeny szélességet a BODY-ra tesszük (nem a .app-shell-re), hogy a body-hoz
     csatolt, fix-pozíciós rétegek is örököljék: ajánlat-generátor (.ajgen-page),
     sablon-szerkesztő (.ajtpl-overlay), frissítés-sáv. Így a rail-váltás mindent visz. */
  body.sidebar-rail {
    --sidebar-width: 70px;
  }
  /* csak ikonok: a modul-feliratok és a csoport-címkék elrejtve */
  body.sidebar-rail .app-sidebar-group-label,
  body.sidebar-rail .app-sidebar-nav-item > span,
  body.sidebar-rail .app-sidebar-version {
    display: none;
  }
  body.sidebar-rail .app-sidebar {
    padding: var(--space-md) var(--space-xs);
  }
  body.sidebar-rail .app-sidebar-nav-item {
    justify-content: center;
  }
}

/* Ikon-sáv tooltip (a JS body-ra rakja, fix pozícióban az ikon jobb alsó sarkához) */
.app-rail-tooltip {
  position: fixed;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #15171c;
  color: #fff;
  padding: 7px 13px 7px 11px;
  border: 1px solid #15171c;
  border-radius: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  /* az ikon közepéhez igazítva (translateY -50%), finom becsúszás balról */
  opacity: 0;
  transform: translateY(-50%) translateX(-6px);
  transition:
    opacity 0.1s ease,
    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-rail-tooltip.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.app-rail-tooltip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary); /* az ikon brand-narancs, a sávbeli aktívhoz hasonlóan */
}
/* kis mutató (nyíl) a buborék bal oldalán, az ikon felé , „dzsinn a palackból" */
.app-rail-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: #15171c;
  transform: translateY(-50%) rotate(45deg);
}

/* Világos menüsáv-téma (body.sidebar-light): fehér buborék, fekete betű.
   Az ikon marad narancs. */
body.sidebar-light .app-rail-tooltip {
  background: #fff;
  color: #1a2230;
  border-color: var(--border);
}
body.sidebar-light .app-rail-tooltip::before {
  background: #fff;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* =========================================
   MOBILE-FIRST RESPONSIVE  (<=768px)
   A sidebar off-canvas, hamburgerrel nyílik.
   ========================================= */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: calc(var(--header-height) + env(safe-area-inset-top)) auto 1fr;
    grid-template-areas:
      'header'
      'kapcsolat'
      'content';
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw, 280px);
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .app-hamburger {
    display: inline-flex;
  }
  /* mobilon a hamburger a vezérlő, a desktop-összecsukás gomb rejtve; és sose legyen ikon-sáv */
  .app-sidebar-toggle {
    display: none;
  }
  /* Szűk fejléc: a modul-cím + elválasztó és a placeholder-ikonok elrejtve;
     marad a brand (cégnév), az AI-ikon, a beállítás-gomb és a kijelentkezés-ikon (a monogram globálisan rejtve). */
  .app-header-divider,
  .app-header-title,
  #hdrSearch,
  #hdrHelp,
  #hdrBell {
    display: none;
  }
  .app-user-trigger-name {
    display: none;
  }

  .app-content {
    padding: var(--space-md);
    /* a tartalom ALJA ne csússzon az alsó tab-bar mögé (a `padding` shorthand felülírná, ezért külön) */
    padding-bottom: var(--tabbar-sav);
    /* VÍZSZINTES ZÁR: az oldalt csak függőlegesen lehessen pásztázni, jobbra-balra NE húzható.
       A tényleg vízszintesen görgethető részek (lentebb) visszakapják a pan-x-et. */
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  /* a böngésző-szintű rubber-band (gumi-rángás) kikapcsolása mindkét tengelyen */
  html,
  body {
    overscroll-behavior: none;
  }
  /* kivételek: ezek a részek tényleg vízszintesen görgethetők maradjanak (órás naptár-rács, táblázatok) */
  .app-content .nt-timeview,
  .app-content [class*='table-wrap'] {
    touch-action: pan-x pan-y;
  }

  /* Touch-target: a menü-elemek nagyobbak mobilon */
  .app-sidebar-nav-item {
    padding: var(--space-md);
    min-height: 44px;
  }

  /* Modal MOBILON = TELJES OLDAL (nem lebegő popup): bejön oldalról, fent cím, lent ragadó
     gombsor, a törzs görög belül, NEM húzható el, mentéskor bezár , mint egy natív app-oldal. */
  .modal-container {
    align-items: stretch;
    justify-content: stretch;
    background: var(--bg); /* teljes oldal, nincs sötét háttér-fátyol */
  }
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible; /* ne vágja le a natív dátum-választó popupját */
    overscroll-behavior: none;
    touch-action: none;
    animation: modal-page-in 0.22s ease-out;
  }
  @keyframes modal-page-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  .modal-header {
    margin-bottom: 0;
    padding: calc(var(--space-md) + env(safe-area-inset-top)) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border);
  }
  .modal-body {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    padding: var(--space-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y; /* csak függőleges görgetés a törzsben */
  }
  .modal-footer {
    padding: 10px var(--space-md) calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  /* mobilon kompaktabb gombok, hogy a 4 (Törlés/Késznek/Mégse/Mentés) egy sorba férjen + alacsonyabb footer */
  .modal-footer button {
    padding: 9px 12px;
    font-size: 13.5px;
  }
}

/* =========================================
   KANBAN — KÖZÖS STÍLUS (minden modul kanban-nézete ezt használja)
   ITT MÓDOSÍTSD a kanban kinézetét EGY HELYEN (fejléc, kártya, gomb...).
   A státusz-SZÍNEK modulonként maradnak (modules/<x>/ui/styles.css),
   mert modul-specifikusak. Új modul kanbanjánál vedd fel a selectorát ide.
   ========================================= */

/* Nézet-fej (chipek balra, váltó-gomb jobbra) , CRM + Ajánlatok modulok.
   A Feladatok modul átállt a közös .page-listhead fejlécre (nincs pipeline-head). */
.crm-pipeline-head,
.ajanlatok-pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.crm-view-btn,
.ajanlatok-view-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.crm-view-btn:hover,
.ajanlatok-view-btn:hover {
  background: var(--bg);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.crm-view-btn svg,
.ajanlatok-view-btn svg {
  width: 16px;
  height: 16px;
}

/* Kanban-konténer + oszlopok */
.feladatok-kanban,
.crm-kanban,
.ajanlatok-kanban,
.rendelesek-kanban,
.projektek-kanban {
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  align-items: flex-start;
}
.feladatok-kanban-col,
.crm-kanban-col,
.ajanlatok-kanban-col,
.rendelesek-kanban-col,
.projektek-kanban-col {
  flex: 1 1 200px;
  min-width: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

/* === KANBAN-FEJLÉC , MINIMÁL (átalakítva 2026-08-01) ===
   Volt: fehér-szürke színátmenetes PIRULA, kerettel, két árnyékkal, belső fény-peremmel, és
   egy színes pötty gyűrűvel. Öt elem egyetlen felirat körül.
   Lett: csupasz szöveg. A fejléc dolga annyi, hogy MEGNEVEZZE az oszlopot és megmondja, hány
   elem van benne. Ehhez nem kell doboz: az oszlopot a kártyák sora úgyis kirajzolja.
   A PÖTTY is elmarad. A szakasz-szín nem állapot (nem jó és nem rossz), tehát nem hordoz
   olyat, amit a sorrend és a felirat ne mondana el. Ezen a képernyőn a szín a TEENDŐ
   állapotáé, és ha a fejléc is színes, a kettő versenyez. */
.feladatok-kanban-colhead,
.crm-kanban-colhead,
.ajanlatok-kanban-colhead,
.rendelesek-kanban-colhead,
.projektek-kanban-colhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 10px;
  margin-bottom: 4px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* A pötty kivezetve , a `::before` üresen marad, hogy a modul-CSS-ek felülírásai
   (pl. a pipeline nyilas fejléce) ne fussanak árva szabályra. */
.feladatok-kanban-colhead::before,
.crm-kanban-colhead::before,
.ajanlatok-kanban-colhead::before,
.rendelesek-kanban-colhead::before,
.projektek-kanban-colhead::before {
  display: none;
}
.feladatok-kanban-count,
.crm-kanban-count,
.ajanlatok-kanban-count,
.rendelesek-kanban-count,
.projektek-kanban-count {
  margin-left: auto;
}
.feladatok-kanban-count,
.crm-kanban-count,
.ajanlatok-kanban-count,
.rendelesek-kanban-count,
.projektek-kanban-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.06);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 11.5px;
}

/* Kanban-kártyák */
.feladatok-kanban-cards,
.crm-kanban-cards,
.ajanlatok-kanban-cards,
.rendelesek-kanban-cards,
.projektek-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 8px;
}
.feladatok-kanban-empty,
.crm-kanban-empty,
.ajanlatok-kanban-empty,
.rendelesek-kanban-empty,
.projektek-kanban-empty {
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  text-align: center;
  padding: var(--space-sm);
}
/* KANBAN-KÁRTYA , MINIMÁL (átalakítva 2026-08-01).
   Volt: fehér-szürke színátmenet, 16-os rádiusz, HÁROM egymásra rakott árnyék, plusz egy
   belső fény-perem. Öt vizuális réteg egyetlen dobozon, és mivel egy oszlopban tíz-húsz
   kártya áll, ez a réteg-halom húszszor ismétlődött a képernyőn.
   Lett: sík fehér lap, egy hajszálvonal keret, egy alig látható árnyék. A kártyát a TARTALMA
   különböztesse meg a szomszédjától, ne a doboza. */
.feladatok-kanban-card,
.crm-kanban-card,
.ajanlatok-kanban-card,
.rendelesek-kanban-card,
.projektek-kanban-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
/* HOVER: a keret sötétedik, a kártya NEM emelkedik meg. Az emelkedés tíz kártya fölött
   ugrálásnak hat, és minden mozdulatnál elvonja a figyelmet a tartalomtól. */
.feladatok-kanban-card:hover,
.crm-kanban-card:hover,
.ajanlatok-kanban-card:hover,
.rendelesek-kanban-card:hover,
.projektek-kanban-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.07);
}
/* KÁRTYA-CÍM. 15-ről 16 képpontra (2026-08-01, olvashatóság). A kanban-kártya a legsűrűbb
   felületünk, és épp ott volt a legkisebb a betű , aki szemüveggel dolgozik, azt ez a pár
   képpont zavarja a legjobban. A 16 az alap-betűméretünk, tehát nem kivétel, hanem
   visszatérés a szabványhoz. Öt modul kártyájára hat egyszerre. */
.feladatok-kanban-title,
.crm-kanban-name,
.ajanlatok-kanban-name,
.rendelesek-kanban-name,
.projektek-kanban-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.crm-kanban-value,
.ajanlatok-kanban-value,
.projektek-kanban-value {
  font-size: var(--font-sm);
  font-weight: 700;
  margin-top: 2px;
}
.feladatok-kanban-move,
.crm-kanban-move,
.ajanlatok-kanban-move,
.rendelesek-kanban-move,
.projektek-kanban-move {
  margin-top: var(--space-sm);
  width: 100%;
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  color: var(--text-primary);
  background: var(--bg);
}

/* =========================================
   SAJÁT LEGÖRDÜLŐ (.ajdd) — közös komponens (shared/dropdown.js)
   A natív <select> helyett; mobilon a listát mindig a gomb alatt nyitja.
   ========================================= */
.ajdd {
  position: relative;
}
.ajdd-btn {
  width: 100%;
  min-height: var(--vezerlo-magassag);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--font-base);
  cursor: pointer;
  text-align: left;
}
.ajdd-btn:hover {
  border-color: var(--border-strong);
}
.ajdd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ajdd-chev {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
/* ===== STANDARD legördülő-panel (koncept 02 „lebegő választó-kártya") =====
   Minden .ajdd legördülő EZT a nyelvet beszéli: emelt, lekerekített kártya a gomb
   alatt réssel, kereső-fejléc nagyító-ikonnal, avataros/pipás opció-sorok, finom pop. */
.ajdd-list {
  position: absolute;
  left: 0;
  /* A panel legalább a gomb szélessége, de a TARTALOMHOZ nő: keskeny gombnál (pl. a
     katalógus kategória-szűrője) eddig right:0 a gombhoz szorította, és minden felirat
     „Ala…"-ra csonkult. A plafon védi a képernyő-szélét. */
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(var(--lebego-w-szeles), calc(100vw - 32px));
  /* A DOBOZ-JELLEMZŐKET (háttér, keret, sarok, árnyék, bélés, réteg) a közös szabály adja. */
  transform-origin: top center;
  animation: ajdd-pop 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes ajdd-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ajdd-list {
    animation: none;
  }
}
/* Kereső = fejléc-mező nagyító-ikonnal, alatta hajszál-elválasztó */
.ajdd-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 34px;
  margin: 0 0 4px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: var(--font-sm);
  color: var(--text-primary);
  outline: none;
  background: var(--bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239a8f86' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E")
    no-repeat 11px center;
}
.ajdd-search::placeholder {
  color: var(--text-tertiary);
}
.ajdd-search:focus {
  border-bottom-color: var(--primary);
}
/* Opció-lista: itt görgethető (a kereső fejléc marad fent) */
.ajdd-opts {
  /* A PLAFON ÁLLÍTHATÓ. Alapból 220 képpont, de ha a panel a képernyő aljához vagy tetejéhez
     ér, a `dropdown.js` a ténylegesen szabad helyre húzza le , így a panel BELÜL görget, és
     nem a lapot kell elgörgetni alatta. */
  max-height: var(--ajdd-opts-max, 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ajdd-empty {
  padding: 10px 12px;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  text-align: center;
}
.ajdd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--font-base);
  color: var(--text-primary);
}
.ajdd-opt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ajdd-tick {
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 700;
  opacity: 0;
}
.ajdd-opt:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.ajdd-opt.is-sel,
.ajdd-multi .ajdd-opt.is-checked {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--text-primary);
  font-weight: 600;
}
.ajdd-opt.is-sel .ajdd-tick,
.ajdd-multi .ajdd-opt.is-checked .ajdd-tick {
  opacity: 1;
}
/* =========================================================================
   DARABSZÁM, RIASZTÁS ÉS MAGYARÁZÓ MONDAT a legördülőben (2026-08-11)

   Akkor kell, ha a legördülő nem űrlap-mező, hanem NÉZŐPONT-VÁLTÓ: ilyenkor a választás
   előtt tudni akarod, mennyi vár rád az egyes nézetekben. A Feladatok modul nézőpont-váltója
   az első hívó, de a minta bármelyik modulé.

   A PÖTTY SOSEM ÁLL MAGÁBAN: mellette ott a darabszám és a `title` szöveges magyarázata is.
   A ház jelölés-nyelve szerint a szín önmagában nem hordozhat jelentést , színtévesztéssel
   és szürke nyomtatásban is olvashatónak kell lennie.
   ========================================================================= */
.ajdd-opt-torzs,
.ajdd-opt-fej {
  flex: 1;
  min-width: 0;
}
.ajdd-opt-torzs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ajdd-opt-fej {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Halk magyarázó sor a név alatt. Nem tördeljük több sorba: a lista magassága maradjon
   kiszámítható, a hosszú mondat inkább levágódik. */
.ajdd-opt-mondat {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Darabszám. Fix szélesség helyett saját tokenre hagyatkozunk: a szám 1 és 3 jegy között
   mozog, és a tabular-nums miatt a lista nem ugrál, amikor frissül. */
.ajdd-jel {
  flex: 0 0 auto;
  font-size: var(--font-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.ajdd-pont {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--error);
}
/* A váltó GOMBJÁN ugyanez, csak kicsit levegősebben (ott a mondat nem fér el). */
.ajdd-label .ajdd-jel {
  margin-left: 7px;
}
.ajdd-label .ajdd-pont {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

/* Avatar-korong az opció-sorban (avatars:true , pl. Felelős/kolléga-választó) */
.ajdd-opt-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-light, #ff6432));
}
/* „Nincs / Nincs ügyfél" üres opció , dísz nélkül, középre (egységes) */
.ajdd-opt-empty {
  justify-content: center;
  color: var(--text-tertiary);
}
.ajdd-opt-empty:hover {
  color: var(--text-secondary);
}
/* Billentyű-navigáció aktív sora (nyíl-gombokkal mozgatva) */
.ajdd-opt.is-active {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
/* =========================================================================
   BETELT TÖBB-VÁLASZTÓS LISTA (maxValues, 2026-08-13)

   Ha a választásnak fizikai felső korlátja van (a Naptár Nap nézetében négy ember napja fér ki
   egymás mellé), a további sorok LETILTVA maradnak, nem tűnnek el: aki az ötödikre kattintana,
   lássa, hogy ott van, és a lista alján olvassa el, miért nem választható. Ez a mondat nem
   díszítés , enélkül a szürke sor néma elutasítás lenne.
   ========================================================================= */
.ajdd-opt:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.ajdd-opt:disabled:hover {
  background: none;
}
/* RAGADÓS LÁBLÉC a panel alján, a görgő opció-listán KÍVÜL. Ugyanaz a hely, mint a
   korlát-soré: ami ide kerül, az akkor is látszik, ha az opció-lista görgetni kezd. */
.ajdd-lablec {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.ajdd-korlat {
  margin-top: 4px;
  padding: 7px 11px 3px;
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  line-height: 1.35;
}
/* Csoport-címke az opciók fölött (kiegészítő felirat, pl. „Csapat") */
/* ══ CSOPORT-CÍM , EGY SZABÁLY MINDEN LEBEGŐ PANELBEN (2026-08-23) ══
   A művelet-menü és az érték-választó eddig külön írta le ugyanazt. A SZÍN is javult:
   `--text-tertiary` fehéren 2,54:1, a szöveg-minimum 4,5:1 , a `--text-secondary` 4,83:1.
   Nem új szín kellett, csak a helyes token. */
.ajdd-grouplabel,
.app-tobbmuvelet-cim {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Billentyű-lábléc (kereshető listánál; érintőn elrejtve) */
.ajdd-kbd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 4px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 11.5px;
}
.ajdd-k {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text-secondary);
}
.ajdd-kbd-sep {
  margin: 0 2px;
}
@media (pointer: coarse) {
  .ajdd-kbd {
    display: none;
  }
}
.ajdd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ajdd-chips:empty {
  display: none;
}
.ajdd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: var(--font-sm);
}
.ajdd-chip-x {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-tertiary);
  padding: 0 4px;
  border-radius: 999px;
}
/* „+ MÉG VALAKI" , a chipek MELLETT, nem a mezőn (PO, 2026-08-31).
   A több-választós lista választás után bezárul, mert a kiosztások nagy része egyfős. Ez a gomb
   a ritkább, több-fős esethez való, és ott áll, ahol a szem épp van: az imént hozzáadott név
   mellett. Egyben KI IS MONDJA, hogy több embert is lehet , a mezőről magától nem derülne ki.
   SZAGGATOTT KERET, halkabb szín: nem versenyez a nevekkel, csak felkínál egy lehetőséget. */
.ajdd-chip-plusz {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  cursor: pointer;
}
.ajdd-chip-plusz:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
/* „MINDENKI" , a csoport-cím sorában, jobbra. Azért ODA, mert a csoport-cím mondja meg, MIN
   dolgozik a lista („Csapat"), és a tömeges kijelölés ugyanarra a halmazra vonatkozik.
   Halkabb a soroknál: felkínált gyorsítás, nem a fő út. */
.ajdd-grouplabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ajdd-mind {
  padding: 2px 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.ajdd-mind:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.ajdd-chip-x:hover {
  color: var(--text-primary);
  background: var(--border);
}

/* =========================================
   TÁBLÁZAT-NÉZET (.app-table) — közös, a multi-view "táblázat" opcióhoz
   (shared/table-view.js). A lista/táblázat láthatóság modulonként (data-view).
   ========================================= */
/* =====================================================================
   ADAT-FELÜLET , A NÉGY DÖNTÉS (2026-08-02, PO)

   A táblázat és a lista UGYANANNAK a dolognak két rajza: sorok, oszlopok, fejléc. Eddig
   13 modul írta meg külön a saját táblázat-fejlécét, és mindössze négy használta a közöset ,
   ezért néz ki másképp az Értékesítés táblázata és az Ügyfelek listája. Nem az a baj, hogy
   az egyik szebb, hanem hogy NINCS KIMONDVA, melyik a szabály, ezért a következő modul
   megint harmadikat választ.

   A négy döntés, amit innentől EZ a lap tart:

   1. OSZLOPNÉV , kiskapitális, halk, 11 képpont. A címke így ránézésre elválik az adattól
      és nem versenyez vele. Kattintható marad (rendezés), a nagybetűs szedés ezt nem zavarja.
   2. KERET , egy folytonos felület hajszál-sorokkal. NEM soronkénti külön kártya: sok sornál
      az hullámzik, és a szem nem talál vonalat, amin végigfusson.
   3. VASTAGSÁG , a fő érték félkövér (600), MINDEN MÁS normál (400). Eddig egy soron belül
      is keveredett három vastagság.
   4. SZÁM , jobbra, azonos szélességű számjegyekkel. Így az egymás alatti összegek
      összehasonlíthatók, és nem ugrálnak a tizedesek.

   HASZNÁLAT
     `<table class="app-table">`  , a `makeSortableTable` ezt adja, tehát minden táblázat
     `.app-adat` + `.app-adat-fej` + `.app-adat-sor` , ugyanez sorokból épített listához

   MIGRÁCIÓ: ha egy modul átáll, a modul-CSS-ből TÖRÖLNI kell a saját méret-, vastagság- és
   keret-szabályait. Ha bent maradnak, felülírják a közöset, és a munka látszat lesz , pont
   ez történt a gomboknál 2026-08-01-én.
   ===================================================================== */

/* A KERET , közös a táblázatnak és a listának. Egy felület, hajszál-sorokkal.
   MINDKETTŐN OTT VAN vagy egyiken sem (PO, 2026-08-02). Ott van: a ház minden más felülete
   is hajszál-keretes kártya, és keret nélkül az utolsó sor meg az összesítő a semmibe lóg. */
.app-adat {
  background: var(--bg-card);
  border: 1px solid var(--felulet-keret);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* A KERETEN BELÜL az UTOLSÓ sor alól elmarad a hajszálvonal: különben a kártya saját kerete
   mellett duplán futna. Táblázatnál ez a `tfoot` összesítő-sora, lista esetén az utolsó tétel. */
/* JAVÍTVA 2026-08-18. A választó `tr:last-child` volt, ami a FEJLÉC-SORT IS eltalálta: a
   `<thead>`-en belül az egyetlen `<tr>` egyben az utolsó gyerek is. Emiatt a fejléc alól
   eltűnt az elválasztó vonal, és az oszlopnevek a legelső adatsorral összefolytak (PO,
   2026-08-18: „a megnevezések és az első sor közé kellett volna").
   Most a szabály CSAK a tábla legalsó sorára hat: ha van összesítő láb, akkor a `tfoot`
   utolsó sorára, ha nincs, akkor a `tbody`-éra , a `:last-child` a szakaszon dönti el. */
.app-adat > .app-table > tbody:last-child > tr:last-child > td,
.app-adat > .app-table > tfoot:last-child > tr:last-child > td,
.app-adat > .app-table > tfoot:last-child > tr:last-child > th {
  border-bottom: none;
}
/* AZ OSZLOPNÉV-SOR. Ugyanaz a tipográfia, mint a `.app-table th`-é , egy forrás. */
.app-adat-fej {
  padding: 8px var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
/* A CÍMKE-TIPOGRÁFIA. Az `.app-adat-cimke` a CELLA osztálya, és nem elég a szülőre tenni:
   ha a fejléc-cella `<button>` (rendezhető oszlop), a böngésző saját betűméretet és
   `text-transform: none`-t ad neki a beépített stíluslapjából, tehát az öröklés megáll a gomb
   határán. Ezért minden fejléc-cella MAGA kapja meg ezt az osztályt. */
.app-adat-fej,
.app-adat-cimke,
.app-table th {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* A SOR , hajszál-elválasztó, nem külön keret. Az utolsó sor alól elmarad a vonal, hogy ne
   duplázódjon a felület saját keretével. */
.app-adat-sor {
  padding: 10px var(--space-md);
  border-bottom: 1px solid var(--border);
}
.app-adat-sor:last-child {
  border-bottom: none;
}
.app-adat-sor:hover {
  background: var(--bg-secondary);
}
/* A FŐ ÉRTÉK , ez az egyetlen félkövér elem a soron. */
/* ═══ KÁRTYA-LISTA , KÖZÖS KOMPONENS (2026-08-25) ═══════════════════════════════════════
   Sorok, amiket nem oszlopok szerint olvasol, hanem egyesével. Az Értékesítés lead-listája
   találta ki, az Ügyfelek is ezt hívja , EGY design, EGY hely.

   MIÉRT KERÜLT IDE A MODULBÓL: a modul-stíluslapok laponként töltődnek. Amíg az Ügyfelek a
   CRM `.crm-item` osztályát használta volna, a kártyák CSAK akkor lettek volna stílusosak, ha
   a felhasználó előbb megnyitotta az Értékesítést , közvetlen linkkel érkezve csupasz lista
   fogadta volna. Közös komponensként ez nem fordulhat elő.

   MIKOR EZT, ÉS MIKOR TÁBLÁZATOT: kártya akkor, ha soronként MÁS a lényeg, és ami hiányzik, az
   ne hagyjon üres oszlopot. Táblázat akkor, ha az oszlopok ÖSSZEHASONLÍTHATÓK (összeg, dátum,
   állapot) , ott a szem oszlopot olvas, nem sort. */
.app-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.app-lista-kartya {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--felulet-keret);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    background 0.12s;
}
.app-lista-kartya:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  background: var(--bg);
}
.app-lista-kartya:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* A KÁRTYA BAL OLDALA nyúlik, a jobb nem: a hosszú név nem szoríthatja ki a jelzést. */
.app-lista-fo {
  flex: 1;
  min-width: 0;
}
.app-lista-alcim {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
/* JELVÉNY-SOR , ami hiányzik, egyszerűen nincs ott, nem hagy rést maga után. */
.app-lista-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.app-lista-meta-elem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* EGY ADATSOR VEZÉR-ÉRTÉKE , a NÉV. Ez a lista-nézetek közös komponense: minden modul ezt
   hívja, és nem ír saját másolatot. 2026-08-25-ig három egyforma másolat élt (`crm-item-title`,
   `ugyfelek-sor-nev`, és ez), mind a három ugyanazzal a színnel , tehát egy PO-kérés
   („legyen sötétebb") három helyen lett volna átírandó, és az első felejtésnél elcsúsznak.
   A MÉRET NEM ITT dől el: a sűrű ügyfél-sor és a nagy lead-kártya címe más léptékű, azt a
   hívó modul állítja. Ami KÖZÖS, az a szerep: ez a sor vezér-értéke. */
.app-adat-fo {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-strong);
}
/* NAGY LÉPTÉK , a LISTA-SOROK vezér-értéke, ahol a név a sor saját sorában áll (Értékesítés,
   Ügyfelek). Miért változat és nem az alap: a `.app-adat-fo` TÖMÖR környezetben is fut (Naptár
   sorai, táblázat-cellák), ott a 17 képpont szétvetné a sort. Egy osztály, két lépték , és
   mindkét lista UGYANAZT hívja, tehát nem tudnak elcsúszni egymástól. */
.app-adat-fo--nagy {
  font-size: 17px;
  font-weight: 700;
}
/* MÁSODLAGOS SOR a fő érték alatt (cégnév, alcím). */
.app-adat-halk {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
}
/* SZÁM-CELLA , jobbra, azonos szélességű számjegyekkel. */
.app-adat-szam,
.app-table th.num,
.app-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.app-table {
  width: 100%;
  table-layout: fixed; /* teljes szélesség, arányos/egyenletes oszlop-elosztás (nincs random rés) */
  border-collapse: collapse;
  /* a táblázat-szöveg kicsivel nagyobb a --font-sm-nél (14px), és a képernyő-szélességhez igazodik:
     keskenyebb desktopon ~14px, szélesebben ~15.5px (a th/td örökli) */
  font-size: clamp(14px, 0.3vw + 10px, 15.5px);
}
.app-table th,
.app-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* ha egy oszlop szűk, a hosszú szöveg "…"-tal levágódik, nem törik szét a layout */
}
/* A FEJLÉC TÖMÖR MARAD, A SOR LEVEGŐSEBB (PO, 2026-08-25: „42px-re csináld meg azt a
   magasságot 33-ról"). A kompakt fejléc a magasabb sorok fölött bevett minta: a fejléc
   címke, nem adat , nem kell neki ugyanaz a tér. Mérve: fejléc 29, sor 42. */
.app-table th,
.app-table td {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
/* A SOR MAGASSÁGA KIMONDOTT, a függőleges bélés ezért nulla: a tartalom függőlegesen KÖZÉPRE
   ül (`vertical-align: middle`), és a sor akkor is 42 marad, ha az egyik cellában pirula van,
   a másikban sima szöveg. Táblázat-cellán a `height` MINIMUM, tehát a valóban többsoros
   tartalom (pl. név alatt egy magyarázó sor) továbbra is megnöveli a sort , az szándékos. */
.app-table td {
  height: var(--tabla-sor-magas);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}
/* A SOR-DOBOZ ÉS A TARTALOM KÜLÖNBSÉGE (javítva 2026-08-13).
   A cellában álló elem (jelvény, ikonos jelzés, pötty-gomb) alapértelmezésben az ALAPVONALRA
   ül. Ilyenkor a sor-doboz magassága = az elem alapvonal FÖLÖTTI része + a betű alapvonal
   ALATTI területe (a sorköz alsó fele), tehát a sor magasabb lesz, mint a legmagasabb tartalom.
   MÉRVE (1440 képpont, Chromium, a CRM ikonos állásidő-cellájával): 45,09 képpont sor 25,19
   képpontos tartalom mellett , 3,40 képpont hiába. Középre igazított elemekkel 41,69.

   Amit ez a szabály NEM tesz: nem nyúl az elemek elrendezéséhez. Mérve minden érintett modul
   táblázatán (Ajánlatok két jelvénnyel, CRM pötty + név, Eszközök saját jelvényekkel): egyetlen
   sor sem NŐTT tőle, és egyetlen cellában sem esett külön sorba a tartalom.

   AMIT MÉRÉS ALAPJÁN NEM TETTEM MEG: a koncept `.app-table td > * { display:flex }` szabályt
   javasolt. A Feladatok saját táblázatában ez helyes, mert ott CELLÁNKÉNT EGY burkoló van; a
   közös `.app-table`-ben viszont eltör minden olyan cellát, ahol több elem áll egymás mellett:
   mérve három csipesz HÁROM külön sorba esett, és a sor 35,5-ről 55 képpontra nőtt. A kimondott
   `line-height` sem jó ide: az Eszközök sorait 1 képponttal MEGNÖVELTE. */
.app-table td > * {
  vertical-align: middle;
}
/* A TIPOGRÁFIÁT a fenti adat-felület-blokk adja (kiskapitális, halk). Itt már csak az marad,
   ami a TÁBLÁZATRA jellemző: a fejléc-háttér és a rendezés-kattintás. */
.app-table th {
  background: var(--bg-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.app-table th:hover {
  color: var(--text-secondary);
}
/* A CELLA NORMÁL VASTAGSÁGÚ. Kimondjuk, mert enélkül a modul-jelölésben lévő `<strong>` és a
   böngésző alapértékei eldöntik helyettünk, és egy soron belül három vastagság keveredik.
   Ami tényleg kiemelendő, az `.app-adat-fo` osztályt kap, nem véletlen félkövéret. */
.app-table td {
  font-weight: 400;
  color: var(--text-primary);
}
.app-table th.num,
.app-table td.num {
  white-space: nowrap;
}
.app-table tbody tr {
  cursor: pointer;
}
.app-table tbody tr:hover {
  background: var(--bg-secondary);
}
.app-table tfoot td {
  border-top: 2px solid var(--border-strong);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
}
/* AZ ÜRES ÉS A TÖLTŐDŐ ÁLLAPOT UGYANAZ A HELY, ezért ugyanaz a kezelés.
   Az `.app-table-loading`-hoz 2026-08-26-ig NULLA szabály tartozott, pedig NYOLC helyről hívtuk
   (Ügyfelek, Ajánlatok, adatlap-fülek). A „Betöltés…" felirat ezért csupaszon, a lap bal szélére
   tapadva jelent meg, majd a tartalom megérkezésekor odébb ugrott , ez a betöltést hibának
   mutatta. Egy osztály, amit nyolc helyről hívunk és sehol nem definiálunk, nem apró szépséghiba:
   a rendszer minden listája ezzel a képpel indul. */
.app-table-empty,
.app-table-loading {
  color: var(--text-tertiary);
  text-align: center;
  padding: 32px 16px;
}

/* =========================================
   MEGERŐSÍTŐ-DIALÓGUS (.app-confirm) — a natív window.confirm helyett (shared/ui-helpers.js)
   Magas z-index, hogy a modalok fölött is megjelenjen.
   ========================================= */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 18, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.app-confirm {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  width: 100%;
  padding: var(--space-lg);
}
.app-confirm-msg {
  font-size: var(--font-base);
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}
/* Erős megerősítés , „írd be a nevét" input (confirmAction requireText) */
.app-confirm-reqhint {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: calc(-1 * var(--space-md)) 0 8px;
}
.app-confirm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-base);
}
.app-confirm-input:focus {
  outline: none;
  border-color: var(--error, #dc2626);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #dc2626) 15%, transparent);
}
.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}
.app-confirm-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.app-confirm-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* =========================================
   PUBLIKUS AJÁNLAT-OLDAL (/ajanlat/{token})
   ========================================= */
.public-view {
  min-height: 100vh;
  background: var(--bg-secondary);
}
.pq-page {
  min-height: 100vh;
}
.pq-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary);
}

/* TELJES-SZÉLES hero-sáv (cég-brand szín) — edge-to-edge (KÉPERNYŐN) */
.pq-hero {
  background: var(--pq-accent, var(--primary));
  color: #fff;
  padding: 36px 20px 102px;
  text-align: center;
}
.pq-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.pq-logo {
  width: 104px;
  height: 104px;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  padding: 4px;
  margin: 0 auto 8px;
  display: block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.pq-co {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.pq-co-addr {
  font-size: 14px;
  opacity: 0.92;
  margin-top: 6px;
  line-height: 1.5;
  white-space: pre-line;
}

/* KOMPAKT PDF-FEJLÉC — KÉPERNYŐN REJTVE, CSAK a letöltött PDF-ben jelenik meg.
   Slim narancs sáv: logó + cég balra, "Árajánlat" + státusz jobbra. */
.pq-pdfhead {
  display: none;
}
.pq-pdfhead-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pq-pdfhead-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  flex: none;
}
.pq-pdfhead-co {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.pq-pdfhead-addr {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}
.pq-pdfhead-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pq-pdfhead-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pq-pdfhead-status {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* A kártya RÁÚSZIK a hero-ra (negatív margó) */
.pq-wrap {
  max-width: 1020px;
  margin: -68px auto 56px;
  padding: 0 20px;
  position: relative;
}
.pq-card {
  background: var(--bg);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(13, 16, 23, 0.13),
    0 4px 14px rgba(13, 16, 23, 0.07);
  overflow: hidden;
}
/* Hiba-oldal (érvénytelen / elgépelt / lejárt token) */
.pq-error {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-secondary);
}
.pq-error-card {
  background: var(--bg);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(13, 16, 23, 0.1),
    0 4px 12px rgba(13, 16, 23, 0.05);
  padding: 48px 36px;
  max-width: 460px;
  text-align: center;
}
.pq-error-icon {
  font-size: 44px;
  margin-bottom: 14px;
}
.pq-error-card h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.pq-error-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}
.pq-error .pq-foot {
  margin-top: 22px;
}

/* Kártya-fejléc (fehéren, KÉPERNYŐN): Árajánlat + státusz */
.pq-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border);
}
.pq-doc-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pq-accent, var(--primary));
}
.pq-status {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}
.pq-st-open {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}
.pq-st-ok {
  background: rgba(16, 185, 129, 0.16);
  color: #059669;
}
.pq-st-no {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}
.pq-st-exp {
  background: rgba(107, 114, 128, 0.16);
  color: #4b5563;
}

/* Ajánlatszám blokk (Billingo-stílus) */
.pq-numblock {
  text-align: center;
  padding: 26px 20px;
  border-bottom: 1px solid var(--border);
}
.pq-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.pq-num-label {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Blokk + ügyféladat */
.pq-block {
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
}
.pq-block-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}
.pq-client-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.pq-client-addr {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* 3-grid: Kiállítva · Érvényes · Br. fizetendő */
.pq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
}
.pq-g-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}
.pq-g-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.pq-g-gross {
  font-size: 19px;
  font-weight: 700;
}

/* Tételek */
.pq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pq-table th,
.pq-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.pq-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.pq-n {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* a számjegyek egyenlő szélességűek , szépen oszlopba rendeződnek */
}
.pq-empty {
  text-align: center;
  color: var(--text-secondary);
}
/* Tétel-lista , összecsukható (hosszú ajánlatnál alapból csukva, ≤12 tételnél nyitva) */
.pq-items {
  margin-bottom: 4px;
}
.pq-items > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--text-primary);
}
.pq-items > summary::-webkit-details-marker {
  display: none;
}
.pq-items-count {
  font-weight: 500;
  color: var(--text-secondary);
}
.pq-items-arrow {
  color: var(--text-tertiary);
  transition: transform 0.15s ease;
}
.pq-items[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pq-items[open] > summary .pq-items-arrow {
  transform: rotate(180deg);
}
/* PDF-ben a summary-fejléc rejtve , ott a teljes tábla amúgy is nyitva van */
.pq-printing .pq-items > summary {
  display: none;
}

/* Összesítő , prémium panel: tiszta keretes doboz, a bruttó végösszeg kiemelve brand-színnel.
   PDF-biztos (nincs color-mix): a háttér/keret neutrális token, a hangsúly a tipográfián + az accenten. */
.pq-totals {
  width: 320px;
  max-width: 100%;
  margin-left: auto;
  margin-top: 18px;
  font-size: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
}
.pq-totals > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  color: var(--text-secondary);
}
.pq-totals > div > span:last-child {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pq-gross {
  border-top: 1.5px solid var(--border);
  margin-top: 8px;
  padding-top: 12px !important;
  align-items: baseline !important;
}
.pq-gross > span:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pq-gross > span:last-child {
  font-size: 23px;
  font-weight: 800;
  color: var(--text-primary) !important;
  letter-spacing: -0.4px;
}
.pq-notes {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

/* ===== FEJLŐDŐ LINK , projekt-státusz (vevő read-only végigkövetése) ===== */
.pq-prog {
  height: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pq-prog-fill {
  height: 100%;
  background: var(--pq-accent, var(--primary));
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}
.pq-prog-text {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pq-track {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pq-track-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  position: relative;
}
/* összekötő vonal a pöttyök közt , a kész szakaszokon brand-színű */
.pq-track-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: -2px;
  width: 2px;
  background: var(--border);
}
.pq-track-step.is-done:not(:last-child)::before {
  background: var(--pq-accent, var(--primary));
}
.pq-track-dot {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px solid var(--border);
  z-index: 1;
}
.pq-track-step.is-done .pq-track-dot {
  background: var(--pq-accent, var(--primary));
  border-color: var(--pq-accent, var(--primary));
  color: #fff;
}
.pq-track-step.is-current .pq-track-dot {
  border-color: var(--pq-accent, var(--primary));
  color: var(--pq-accent, var(--primary));
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}
.pq-track-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.pq-track-step:not(.is-done):not(.is-current) .pq-track-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.pq-track-state {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.pq-track-step.is-current .pq-track-state {
  color: var(--pq-accent, var(--primary));
  font-weight: 600;
}
.pq-contact {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border-radius: 14px;
  text-align: center;
}
.pq-contact-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.pq-contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
}
.pq-contact-lines a {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

/* Gombok DESKTOP: egy sorban , PDF balra (másodlagos), Elutasít/Elfogad jobbra */
.pq-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 32px;
}
.pq-actions-main {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.pq-btn-pdf {
  order: -1;
}
.pq-btn {
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pq-btn-ghost {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.pq-btn-ok {
  background: var(--success);
  color: #fff;
}
.pq-btn-no {
  background: var(--bg-secondary);
  color: var(--error);
  border: 1px solid var(--border);
}
.pq-btn:hover {
  filter: brightness(0.97);
}
.pq-decided {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
}
.pq-decided.pq-st-ok {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}
.pq-decided.pq-st-no {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

/* Lábléc , AITgentic promó */
.pq-foot {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 18px;
}
.pq-foot a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* PDF-capture (html2pdf) közben: a NAGY hero + a képernyős fejléc ELREJTVE,
   helyette a KOMPAKT pdf-fejléc látszik; gombok/lábléc elrejtve; üres trailing-hely kioltva. */
.pq-printing .pq-actions,
.pq-printing .pq-foot,
.pq-printing .pq-hero,
.pq-printing .pq-head {
  display: none !important;
}
.pq-printing .pq-pdfhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--pq-accent, var(--primary));
  color: #fff;
  padding: 16px 28px;
}
.pq-printing .pq-page {
  min-height: 0; /* különben a 100vh trailing üres 2. oldalt csinál */
}
.pq-printing .pq-wrap {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.pq-printing .pq-card {
  box-shadow: none;
  border-radius: 0;
}

/* MOBIL: kompaktabb, 3-grid Br.fizetendő külön sorba, reszponzív tétel-lista */
@media (max-width: 560px) {
  .pq-hero {
    padding: 40px 16px 84px;
  }
  .pq-co {
    font-size: 22px;
  }
  .pq-wrap {
    margin-top: -60px;
    padding: 0 14px;
  }
  .pq-head,
  .pq-numblock,
  .pq-block,
  .pq-grid,
  .pq-actions {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* 3-grid: Br. fizetendő külön sorba, teljes szélességben */
  .pq-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pq-grid > div:last-child {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  /* Tétel-táblázat → stacked blokkok címkékkel (nem csúszik szét számokkal) */
  .pq-table thead {
    display: none;
  }
  .pq-table tr {
    display: block;
    padding: 10px 0;
  }
  .pq-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border: none;
    padding: 2px 0;
  }
  .pq-table td:first-child {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .pq-table td.pq-n {
    text-align: right !important;
  }
  .pq-table td.pq-n::before {
    content: attr(data-label);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
  }
  .pq-totals {
    width: 100%;
  }
  /* Gombok mobilon: Elutasít/Elfogad egy sorban felül, PDF teljes szélességben alá */
  .pq-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pq-actions-main {
    margin-left: 0;
  }
  .pq-actions-main .pq-btn {
    flex: 1;
  }
  .pq-btn-pdf {
    order: 0;
    width: 100%;
  }
}

@media print {
  .public-view {
    background: #fff;
  }
  .pq-card {
    box-shadow: none;
    border: none;
  }
  .pq-actions,
  .pq-foot {
    display: none !important;
  }
}

/* ===== Publikus ügyfél-visszajelzés (/visszajelzes/{token}) ===== */
.fb-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--bg-secondary, #f5f6f8);
}
.fb-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary, #666);
}
.fb-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.fb-logo {
  font-weight: 700;
  color: var(--primary, #e8590c);
  margin-bottom: 8px;
}
.fb-card h1 {
  margin: 8px 0;
  font-size: 1.5rem;
}
.fb-card p {
  color: var(--text-secondary, #555);
  margin: 4px 0 0;
}
.fb-sub {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-tertiary, #888);
}
.fb-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 22px 0 16px;
}
.fb-star {
  font-size: 2.4rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: #d6d8db;
  transition:
    color 0.1s,
    transform 0.1s;
}
.fb-star:hover {
  transform: scale(1.1);
}
.fb-star.on {
  color: #f5b301;
}
.fb-msg {
  width: 100%;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
  margin-bottom: 16px;
}
.fb-send {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--primary, #e8590c);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.fb-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fb-check,
.fb-icon {
  font-size: 2.6rem;
}
.fb-check {
  color: #16a34a;
}
.fb-google {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 10px;
  background: #1a73e8;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.fb-err {
  margin-top: 12px;
  color: #dc2626;
  font-size: 0.9rem;
}
.fb-foot {
  color: var(--text-tertiary, #999);
  font-size: 0.8rem;
}

/* =========================================
   EMLÉKEZTETŐ , letisztult, középre úszó riasztás-kártya (reminders.js hozza létre)
   ========================================= */
.rem-alert {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 15, 10, 0.45);
  touch-action: none;
}
.rem-alert-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 18px;
  border-top: 4px solid var(--primary);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
  text-align: center;
  animation: rem-pop 0.18s ease-out;
}
@keyframes rem-pop {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.rem-alert-icon {
  font-size: 42px;
  line-height: 1;
}
.rem-alert-label {
  margin-top: 8px;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary);
}
.rem-alert-title {
  margin-top: 6px;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
}
.rem-alert-time {
  margin-top: 6px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.rem-alert-btn {
  margin-top: 18px;
  width: 100%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 20px;
  border-radius: 13px;
  cursor: pointer;
}
.rem-alert-btn:hover {
  background: var(--primary-dark);
}

/* =========================================
   SAJÁT DÁTUM-VÁLASZTÓ (shared/date-picker.js) , a natív helyett, portálban (nem lóg ki a képből)
   ========================================= */
.dp {
  position: relative;
}
.dp-field {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-base);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  white-space: nowrap; /* a dátum ne törjön 2 sorba */
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-field.is-empty {
  color: var(--text-tertiary);
}
.dp-field:hover {
  border-color: var(--border-strong);
}
.dp-pop {
  position: fixed;
  z-index: 1300;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  animation: dp-in 0.12s ease-out;
}
@keyframes dp-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dp-mon {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.dp-nav {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dp-nav:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.dp-wd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.dp-wd span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 4px 0;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.dp-day:hover {
  background: var(--bg-secondary);
}
.dp-day.is-today {
  color: var(--primary);
  font-weight: 700;
}
.dp-day.is-sel {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}
.dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.dp-today,
.dp-clear {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.dp-today:hover,
.dp-clear:hover {
  background: var(--bg-secondary);
}
.dp-clear {
  color: var(--error);
}

/* =====================================================================
   KÖZÖS SZAKASZ-FÜLEK (.page-modtabs / .page-modtab) , ALÁHÚZÁSOS, VIZUÁLIS SZABVÁNY
   =====================================================================
   MIRE VALÓ: a modul SZAKASZAI közti váltás , „Áttekintés / Bevétel / Kiadás",
   „Saját / Csapat / Jóváhagyás", „Mind / Felhasználó / Külsős". Aláhúzásos sor, az aktív
   fül NARANCS felirattal és 2px narancs alsó vonallal.

   NE KEVERD ÖSSZE a `.page-tabs`-szal! Az a CSÚSZKA (pill) nézet-váltó , ugyanazt az ADATOT
   mutatja más formában (Lista / Táblázat / Kártya). Két külön dolog, két külön név:
     .page-tabs    → csúszka, pill, mozgó háttérrel   (MÁS NÉZET ugyanarra az adatra)
     .page-modtabs → aláhúzásos fülek                 (MÁS SZAKASZ a modulon belül)

   MIÉRT KÖZÖS: ez a ~30 sor hat modulban volt MÁSOLVA (penzugy, szabadsag, crm, beallitasok,
   szervezet, _sablon). Egy helyen javítva mind egységes marad, és az új modul is jó lesz.

   HASZNÁLAT:
     <nav class="page-modtabs" role="tablist">
       <button class="page-modtab active" role="tab" aria-selected="true">Mind</button>
     </nav>
   Dokumentálva: docs/OLDAL-STRUKTURA-MINTA.md §7.
   ===================================================================== */
.page-modtabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.page-modtabs::-webkit-scrollbar {
  display: none;
}
/* A `hidden` ATTRIBÚTUM ÉRVÉNYESÜLJÖN. A `display: flex` erősebb, mint a böngésző alap
   `[hidden] { display: none }` szabálya, ezért a rejtettnek jelölt fülsáv TOVÁBBRA IS helyet
   foglalt: az Ajánlatok fejléce 46 képponttal magasabb maradt az Értékesítésénél, pedig a sáv
   nem látszott (mérve, 2026-08-20). Ez minden modulra igaz, ahol a fülsáv jog vagy aloldal
   miatt rejtve van. */
.page-modtabs[hidden] {
  display: none;
}
.page-modtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  /* A 14 alul a korábbi 12 + a megszűnt 2 képpontos keret helye , a fül magassága változatlan. */
  padding: 0 12px 14px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.page-modtab svg {
  width: 15px;
  height: 15px;
}
.page-modtab:hover:not(.active) {
  color: var(--text-primary);
}
/* SÖTÉT aktív fül, nem narancs (2026-07-31). Ez a modulon BELÜLI szakasz-fülek sávja
   (`.page-modtabs`), és ugyanaz a szabály vonatkozik rá, mint a többi fülre: a narancs a
   fő gombé. Az aláhúzás önmagában elég erős jelölés. */
/* AZ AKTÍV JELÖLÉS BELSŐ ÁRNYÉK, NEM KERET (átírva 2026-08-18).

   MI VOLT A BAJ A KERETTEL. A fül 2 képpontos alsó kerete egy negatív margóval ült rá a sor
   hajszálvonalára, tehát a vonal a sor BELSŐ dobozán KÍVÜL kezdődött. A sor viszont
   `overflow-x: auto` (sok fül esetén oldalra görgethető), és az levág mindent, ami kilóg.
   Sima méretben maradt belőle egy hajszálnyi látható rész, nagyításon viszont eltűnt, és
   moduloktól függően hol látszott, hol nem. Három javítási kísérlet után is maradt eset, ahol
   nem jelent meg , a geometria maga volt rossz, nem a beállított értékek.

   MIÉRT JÓ EZ. A belső árnyék az elem SAJÁT dobozán belül rajzol: a szülő túlcsordulás-vágása
   elvileg sem érheti el, mert nem lóg ki semmi. Nincs negatív margó, nincs mit egymásra
   igazítani, és minden modulban ugyanúgy viselkedik , nagyítástól függetlenül. */
.page-modtab.active {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 0 var(--text-primary);
}
/* A [hidden] attribútumot tiszteletben kell tartani: a fenti display (author-szabály)
   egyébként felülírná a böngésző [hidden]{display:none} szabályát → a rejtett fül LÁTSZANA. */
.page-modtab[hidden] {
  display: none;
}

/* =====================================================================
   KÖZÖS OLDAL-KERET (.page-*) , az app-shell SDD primitívje (shared/page-shell.js).
   Minden NEVESÍTETT aloldal ezt a felső sávot kapja: ← Vissza + cím + alcím/badge +
   jobbra akciók + opcionális csúszka-fülek + tartalom-slot. (Az Ajánlatok .ajanlat-detail-*
   mintájából általánosítva, hogy MINDEN modul ugyanígy nézzen ki.)
   ===================================================================== */
.page-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, var(--primary-tint, #fff3ee), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.page-back {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
}
.page-back:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.page-back svg {
  width: 15px;
  height: 15px;
}
.page-headtext {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* aloldalon a NÉV + státusz EGY sorban (a Vissza mellett), nincs 2-soros fejléc */
}
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}
.page-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
/* ADATLAP-FEJ MŰVELET-SORA , a NÉVSZERINTI oldalak (lead, ügyfél, projekt…) jobb felső
   gombsora. A méretek az Értékesítés lead-adatlapjáról jönnek, mert az volt a jó , eddig
   viszont `.crm-detail-actions` néven, modul-fájlban ültek, tehát a többi modul nem kapta meg.
   SORREND balról jobbra: halk másodlagos (Szerkesztés) · EGY narancs a következő lépésre ·
   leghátul a „Műveletek" menü.
   A MÉRETEK NEM EGYFORMÁK, és ez szándékos: a fő gomb és a Szerkesztés teljes méretű, a
   „Műveletek" menü kisebb , lásd a szabálynál lentebb. */
.page-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-left: auto;
}
.page-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-actions button svg {
  width: 15px;
  height: 15px;
}
.page-body {
  min-width: 0;
}

/* Csúszka-fülek: TARTALOM-MÉRETŰ (geometria-invariáns → nincs resize-lag), az ajsend/Ügyfelek-minta. */
/* A LEKEREKÍTÉS PIRULÁRÓL DOBOZRA (PO, 2026-08-18): „ezt a fajta típust, csak ne ilyen nagy
   lekerekítéssel". A forma, a fehér lapka és a tipográfia MARAD , egyedül a sarok lesz
   kisebb, mert a polc többi vezérlője (kereső, legördülő) is 10 képpontos sarkú doboz, és a
   pirula mellettük idegen testként ült.
   A ház szabálya szerint is: a pirula a CÍMKÉÉ (chip, jelvény), a doboz a VEZÉRLŐÉ. */
.page-tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: var(--space-lg);
  max-width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.page-tabs::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--thumb-x, 4px);
  width: var(--thumb-w, 0);
  border-radius: 7px;
  /* FEHÉR lebegő lapka, NEM narancs (PO-döntés 2026-07-31). A narancs a FŐ GOMBÉ, és
     legfeljebb a lapozó aktív oldalszámáé. Ha a nézet-váltó is narancs, két egyforma
     hangsúly verseng egy képernyőn, és a szem nem tudja, melyik a fontos.
     Eddig három modul (Feladatok, Ajánlatok, CRM) külön felülírással fehérítette a sajátját,
     a többi narancs maradt , ugyanaz a komponens kétféle színben. Innentől egy szabály. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition:
    left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.page-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 16px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.page-tab i {
  width: 15px;
  height: 15px;
}
.page-tab.active {
  color: var(--text-primary);
}
/* A három modul-saját fehérítő felülírás (Feladatok, Ajánlatok, CRM) TÖRÖLVE: az alap
   már fehér, tehát feleslegessé vált. Egy szabály, egy helyen. */

/* A MORZSA MÁSODIK SZABÁLY-KÉSZLETE INNEN TÖRÖLVE (2026-08-22). Ugyanazokra az osztályokra
   KÉT teljes készlet élt a fájlban, és a későbbi nyert: a betűméretet `--font-base`-re (16 kép-
   pont) állította, tehát a fenti, szándékosan kicsi morzsa-méret sosem érvényesült. A hasznos
   részei (hossz-korlát ellipszissel, mobil-rejtés) felköltöztek az egyetlen megmaradt készletbe.
   Ez ma a harmadik egymással verekedő CSS-szabály; a vágás előtt érdemes rákeresni a névre. */

/* Lista-fejléc (page-shell koncept-2): kétsoros gradient sáv , a .page-head párja LISTÁKRA.
   Fent: összegző + nézet-váltó + fő CTA; lent: szűrő + kereső. Állandó magasság, minden modul ezt kapja. */
/* SZERKESZTŐ-LAP FEJLÉCE , LETISZTULTRA (PO, 2026-09-03).
   Eddig ez a régi, díszes stílust vitte: színátmenetes háttér, keret, lekerekítés és KÉT rétegű
   árnyék. Emiatt a „Szabadság rögzítése" lap teteje nehéz kártyának látszott, miközben a
   modul-lapok fejléce (`page-shelf`) már csak egy alsó vonal. Ugyanaz a szerep kétféleképpen
   nézett ki, és a szerkesztő tűnt a fontosabbnak, pedig épp fordítva van: ott a MEZŐK a lényeg.
   Most ugyanaz a vonal zárja, mint a modul-lapokat. */
.page-listhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.page-listhead-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  min-height: 44px; /* FIX magasság , a fő-sor minden oldalon egyforma (csak a slot-tartalom változik) */
}
.page-listhead-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  flex-wrap: wrap;
}
.page-listhead .page-tabs {
  margin-bottom: 0; /* a fejlécen belül a nézet-váltó alap-margóját nulláljuk */
}
/* CSENDES FEJLÉC , keret, háttér és árnyék nélkül (az Értékesítés formanyelve).
   MIÉRT: a kártyás fejléc egy DOBOZT tesz a lista fölé, és ettől a képernyő két külön
   felületre esik szét , fent egy panel, lent egy táblázat. A csendes fej csak elrendez, nem
   kerít, így a szem egyenesen a soroknál köt ki. Ahol a fejlécnek nincs saját tartalma
   (csak cím és gombok), ott ez a helyes alapértelmezés. */
.page-listhead--csendes {
  padding: 0;
  gap: var(--space-md);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   EGYSOROS LAP-FEJLÉC (PO, 2026-08-22) , a `koncepció/oldal-fejlec-koncept.html` 5/A vázából.

   MI VÁLTOZOTT: az oldal neve felköltözött a végigfutó fejlécbe, tehát a lapnak nem kell
   újra kiírnia. A felszabadult sor viszont ÖNMAGÁBAN nem hoz nyereséget: megmértük, a két sor
   összeolvasztása 6 képpontot adott. A helyet az adja, ha KEVESEBB vezérlő marad kint.

   A VÁZ: [ üres vagy szűkítők ] ......... [ nézet-váltó ] [ szűrő ] [ Műveletek ▾ ]
     , a NÉZET-VÁLTÓ kint marad (Hónap/Hét/Nap, Folyamat/Táblázat, Elintézetlen/Elintézett),
       mert az azt mondja meg, MIT nézel, és egy kattintással kell váltani rajta;
     , a SZŰRŐ külön gomb marad, mert ÁLLAPOTOT tart: a jelvényén látszik, hány feltétel él.
       Menübe zárva semmi nem mondaná meg, hogy szűrt listát nézel, és abból valódi hiba lesz;
     , minden MÁS gomb a „Műveletek" menübe megy, az elsőként kiemelt létrehozó művelettel.

   MÉRVE (töréspont-vizsgálat négy szélességen): ez a váz 872 képponton is EGY sor marad,
   míg a „minden kint" változat már 972-nél kettétörik, és visszaadja a második sort.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.page-listhead--egysoros {
  gap: 0;
}
/* A POLC a fejléc EGYETLEN sora: alsó vonal nélkül, mert nincs alatta második sor, amit el
   kellene választania. */
.page-listhead--egysoros .page-shelf {
  border-bottom: 0;
}
.page-shelf-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  /* A BAL OLDAL ZSUGORODIK ELŐSZÖR, és a benne lévő szöveg csonkol. Ez a párja a jobb oldali
     `flex: 0 0 auto`-nak: szűk képernyőn a leíró szöveg rövidül, nem a vezérlők törnek sorba. */
  flex: 1 1 auto;
  min-width: 0;
  /* UGYANAZ A 6 KÉPPONT LEVEGŐ A VONAL FÖLÖTT, mint a jobb oldalon. Enélkül a bal oldali
     összegző mondat a sor közepén ül, a jobb oldali gombok viszont 3 képponttal feljebb , a
     szem pedig pont ezt a néhány képpontot veszi észre két egymás melletti elemen. */
  align-self: center;
  margin-bottom: 6px;
}
/* AZ ÖSSZEGZŐ MONDAT A POLCON (PO, 2026-08-22). Eddig külön sorban állt a fejléc alatt, és
   CSAK ezért volt a lapnak egy plusz sora: a polc bal oldala amúgy is üres volt. A bekezdés
   saját margóját itt le kell venni, mert a sor magasságát a gombok adják, nem a szöveg. */
.page-shelf-left > .page-osszesito {
  margin: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  gap: 0 8px;
  align-items: center;
}
/* EGY METRIKA = SZÁM + SZÓ. A szám erős, a szó halk: a gombok sorában a szem a számot keresi,
   a szó csak megmondja, minek a száma. A `tabular-nums` azért kell, mert a szám frissüléskor
   átrajzolódik, és arányos számjegyekkel a mondat hossza ugrálna. */
.page-osszesito-metrika {
  color: var(--text-secondary);
}
.page-osszesito-metrika strong {
  color: var(--text-primary);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.page-osszesito-pont {
  color: var(--text-tertiary);
}

/* SZŰRŐ-GOMB. Külön áll, mert ÁLLAPOTOT tart. A jelvény a feltételek számát írja ki; ha nincs
   aktív szűrő, a jelvény nincs ott, tehát a gomb csendes. */
.page-szuro {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* A REJTÉS ERŐSEBB, MINT AZ ELRENDEZÉS. A `[hidden]` a böngésző alap-lapjából jön
   (`display: none`), és azt BÁRMELY szerzői `display` felülírja , az alábbi `inline-grid` is.
   Emiatt a jelvény „0"-t mutatott akkor is, amikor nem volt aktív szűrő. Ez a projektben ma
   NEGYEDSZER jött elő ugyanígy; a szabály: ha egy elemre `display`-t írsz ÉS `hidden`-nel is
   rejted, a `[hidden]` ágat is ki kell írni. */
.page-szuro-db[hidden] {
  display: none;
}
.page-szuro-db {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   EMELETES SZŰRŐ-PANEL (.app-szuro*) , shared/szuro-panel.js

   MIÉRT EMELETES. A szűrők eddig a fejléc polcán álltak egymás mellett, tehát a negyedik
   szűrőnél a sor kettétört. A panel FÜGGŐLEGESEN nő: a tizedik szűrő is elfér, és a fejléc
   sora nem mozdul. Először CSAK a szűrő-fajták látszanak (Állapot, Készítő), mellettük azzal,
   ami rajtuk be van állítva; egyet kinyitva jönnek az értékek.

   A CSIP-SOR KIVEZETVE. Egy elem, ami néha ott van, néha nincs, elrontja a lap keretét , és a
   panel emeletei amúgy is kiírják, mi van beállítva. Ami marad: a DARABSZÁM a gombon, mert
   becsukott panelnél az az egyetlen jel, hogy szűrt listát nézel.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* A PANEL A GOMB ALÁ nyílik, ezért a gomb és a panel EGY, helyzetet adó dobozban ül. Korábban
   a doboz a gomb MELLETT állt, magasság nélkül, tehát a `top: 100%` a sor tetejére esett, és a
   panel rácsúszott a gombra. */
.page-szurohely {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.app-szuro {
  right: 0;
  width: var(--lebego-w-kozepes);
}
.app-szuro[hidden] {
  display: none;
}
/* ══ SZŰRŐ-PANEL , „HAJSZÁL" IRÁNY (PO-döntés, 2026-08-23) ══
   A PO panasza: „nem annyira látszik a különböző sáv", vagyis nem derül ki, meddig tart egy
   csoport. Három eszköz vitte el a döntést, és mind a három tipográfia vagy hely, nem szín:
     1. a csoport NEVE regisztert vált (kicsi, nagybetűs), tehát ránézésre MÁS FAJTA dolog,
        mint egy érték-sor,
     2. az érték-sorok BELJEBB kezdődnek, tehát a behúzás mondja meg a hovatartozást,
     3. vonal CSAK csoportok KÖZÖTT van, soronként soha , a soronkénti vonal volt az, ami
        elmosta a határt, mert minden sor egyformán el volt választva.
   MÉRVE: a mai csoport-határ kontrasztja 1,24:1, a nem-szöveges minimum 3:1. Ahhoz, hogy egy
   hajszálvonal fehéren elérje a 3:1-et, jól láthatóan szürkének kellene lennie , halk és
   látható vonal egyszerre nem létezik. Ezért NEM a vonalat erősítettük. */
.app-szuro-csoport + .app-szuro-csoport {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
/* A NYITOTT csoport feje alatt erősebb hajszál zárja le a fejet: ott tényleg határ van, mert
   alatta a saját értékei jönnek. */
.app-szuro-csoport.is-nyitva .app-szuro-fej {
  border-bottom: 1px solid var(--border-strong);
  border-radius: var(--lebego-sor-sugar) var(--lebego-sor-sugar) 0 0;
}
.app-szuro-fej {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: var(--font-sm);
  text-align: left;
  cursor: pointer;
}
.app-szuro-fej:hover {
  background: var(--bg-secondary);
}
/* A CSOPORT NEVE MÁS REGISZTER: kicsi, nagybetűs, ritkított , ugyanaz a nyelv, mint a
   művelet-menü csoport-címéé. Így a fej ránézésre nem egy „félkövér érték-sor", hanem címke. */
.app-szuro-nev {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* AZ ÉRTÉK a fajta MELLETT áll, nem alatta: így becsukott emeletnél is látod, mi van rajta,
   és nem kell kinyitni ahhoz, hogy megtudd. */
.app-szuro-ertek {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-xs);
}
.app-szuro-csoport.is-aktiv .app-szuro-ertek {
  color: var(--primary);
  font-weight: 700;
}
.app-szuro-nyil {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 10px;
}
/* BEHÚZÁS , az értékek a csoport-névhez képest beljebb kezdődnek. Ez mondja meg, hogy amit
   olvasol, az EHHEZ a csoporthoz tartozik.
   RÉS , a pipálható sorok között, hogy a bekapcsolt sorok ne folyjanak össze egy folttá. */
.app-szuro-test {
  display: flex;
  flex-direction: column;
  gap: var(--lebego-sorkoz);
  padding: 4px 0 4px var(--lebego-behuzas);
}
.app-szuro-opcio {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px 7px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: var(--font-sm);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.app-szuro-opcio:hover {
  background: var(--bg-secondary);
}
.app-szuro-opcio.is-be {
  background: var(--lebego-be-bg);
  font-weight: 700;
}
/* A PIPA HELYE MINDIG FOGLALT, akkor is, ha üres: enélkül a bekapcsolt sor szövege elcsúszna
   a többihez képest, és a lista ugrálna kattintásonként. */
/* CSOPORT-KERESŐ , sok opciónál a csoport tetején. A mező a panel szélességét használja, és
   nem ragad a lista tetejére: a csoport úgyis rövid, görgetni nem kell benne. */
.app-szuro-kereso {
  margin-bottom: 4px;
}
/* HALK SÚGÓ , a felső korlát magyarázata („Legfeljebb öt ember napja fér ki"). Csak akkor
   jelenik meg, amikor a korlát ténylegesen betelt: addig fölösleges figyelmeztetés lenne. */
.app-szuro-sugo {
  margin: 2px 4px 6px;
  color: var(--text-secondary);
  font-size: var(--font-xs);
  line-height: 1.4;
}
/* BETELT KORLÁT: a többi sor nem tűnik el, csak halkul , látni kell, mi közül nem választhatsz. */
.app-szuro-opcio[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* MONOGRAM embereknél. Ugyanaz a méret, mint a színes jelé, hogy a sorok egy vonalban álljanak. */
.app-szuro-mono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* SZÍNES JEL a szűrő-opció előtt , ott, ahol a szűrő egyben jelmagyarázat is (Naptár).
   A színt a hívó modul osztálya adja; a panel csak a helyet és a méretet. */
.app-szuro-jel {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
}
.app-szuro-pipa {
  flex: 0 0 auto;
  width: 14px;
  color: var(--primary);
  font-weight: 700;
}
.app-szuro-mezo input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  font: inherit;
  font-size: var(--font-sm);
  box-sizing: border-box;
}
.app-szuro-lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.app-szuro-torol {
  border: 0;
  background: none;
  padding: 4px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
}
.app-szuro-torol:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* A MENÜ ELSŐ, LÉTREHOZÓ ELEME kiemelve. A fő gomb bekerült a menübe, tehát ott KELL, hogy
   első pillantásra kiugorjon , különben egy sorrá válna a kivitel és a nyomtatás között. */
.app-tobbmuvelet-fo {
  background: var(--primary-tint);
  color: var(--primary-dark, var(--primary));
  font-weight: 700;
}
.app-tobbmuvelet-fo:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ===== MODUL-CÍM a lista-fej bal felső sarkában (közös; koncepció/Kész koncept/gombok-es-valtok.html) =====
   KIVEZETÉS ALATT (2026-08-22): az oldal neve a végigfutó fejlécbe költözött, tehát a lapon
   megismételve csak helyet visz. A blokk addig marad a CSS-ben, amíg mind a 14 view.html-ből
   ki nem kerül; utána törlendő. Új modul NE használja. =====
   MIÉRT KELL: eddig minden modul maga döntötte el, mi áll a fej bal oldalán. A Szabadság
   kiírta a nevét saját osztállyal, az Ügyfelek egy összegző mondattal kezdett, a
   Munkavállalók egy létszám-mondattal. A felhasználónak így az oldalsávból kellett
   kitalálnia, hol jár. Ez a blokk ugyanoda, ugyanakkorán teszi a modul nevét MINDEN modulban. */
.page-modulcim {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-modulcim-fo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}
/* DARABSZÁM A CÍM MELLETT , „Munkavállalók (4)".
   MIÉRT A CÍMBEN, ÉS NEM ALATTA (PO, 2026-08-17): a cím alatti összegző sor MAGASABBRA tolja
   a fejlécet, mint azoknál a moduloknál, ahol nincs (Feladatok, Naptár). Ettől a cím
   modulváltáskor függőlegesen ugrik , márpedig az a fix pont, amihez a szem igazodik.
   Zárójelben, a cím MELLETT ugyanaz az információ elfér, és a cím marad a helyén.

   HALVÁNYABB ÉS VÉKONYABB, mint a név: a szám kísérő adat, nem cím. Ha ugyanolyan súllyal
   állna ott, két dolog versenyezne az első pillantásért. */
.page-modulcim-db {
  margin-left: 6px;
  font-weight: 500;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Az alcím ELHAGYHATÓ. Ott van értelme, ahol a modul neve nem mondja meg, mi fér bele
   (a „Szabadság" mögött munkanaptár is van). Ahol a név magáért beszél, oda az ÖSSZEGZŐ
   MONDAT (.page-osszesito) kerül ugyanerre a helyre. A kettő közül mindig csak az egyik. */
.page-modulcim-alcim {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
/* SZAKASZ-FÜLEK ÉS A VEZÉRLŐ-POLC TALÁLKOZÁSA: a .page-modtabs alján is van hajszálvonal, a
   .page-shelf tetején is. Egymás alatt ez két párhuzamos vonal lenne, közte üres sávval,
   mintha két külön doboz kezdődne. A fül-sor aláhúzása már elválaszt → a polcnak itt nem kell. */
.page-modtabs + .page-shelf {
  border-top: 0;
  padding-top: 0;
}

/* ===== „Műveletek" TÖBB-MŰVELET MENÜ (közös; shared/tobbmuvelet.js) =====
   Csoport-címekkel tagolt lebegő művelet-lista egy gomb alatt. A gomb FELIRATOS, nem néma
   három pont egy körben: a három pont önmagában nem mondja meg, mi van mögötte, egy szó
   megspórolja a próba-kattintást. Keretes marad, tehát nem lesz hangosabb a fő gombnál.
   A rádiuszt a közös gomb-szabály adja (10 képpont), itt NEM írjuk felül. */
.app-tobbmuvelet {
  position: relative;
}
.app-tobbmuvelet-gomb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.app-tobbmuvelet-gomb i,
.app-tobbmuvelet-gomb svg {
  width: var(--menu-glyph);
  height: var(--menu-glyph);
}
/* ══ A LEBEGŐ PANEL DOBOZA , EGY SZABÁLY MIND A NÉGYNEK (PO-döntés, 2026-08-23) ══
   Eddig négy külön készlet írta le ugyanazt: más sarok (16/10/16), más réteg (50/40/40), más
   háttér-token, más árnyék-hivatkozás. A felhasználó felől ez egy fogalom: „lebegő lista",
   tehát egy formája van. A tokenek a `:root`-ban élnek (`--lebego-*`), így egy helyen állítható.
   AMI PANELENKÉNT KÜLÖNBÖZIK, az csak a HELYZET (melyik szélhez igazodik) és a SZÉLESSÉG , az
   a tartalom dolga, nem a formanyelvé. */
.ajdd-list,
.app-tobbmuvelet-lista,
.app-nezet-lista,
.app-szuro {
  position: absolute;
  top: calc(100% + var(--lebego-res));
  z-index: var(--z-lebego);
  padding: var(--lebego-beles);
  background: var(--lebego-bg);
  border: 1px solid var(--border);
  border-radius: var(--lebego-sugar);
  box-shadow: var(--shadow-lg);
}
/* FÖLFELÉ NYÍLÓ PANEL. Ha a nyitó gomb a lap alján áll (pl. a feladat-szerkesztő „Projekt" és
   „Ügyfél" sora), lefelé nem fér el a lista. Eddig ilyenkor a lap GÖRDÜLT el a panel alá , a
   felület megugrott a kattintás alatt, és a szem elvesztette, hol járt. Fölfelé nyitva semmi
   nem mozdul: a panel keresi meg a helyet, nem a tartalom. */
.ajdd-list.is-fent {
  top: auto;
  bottom: calc(100% + var(--lebego-res));
}
.app-tobbmuvelet-lista,
.app-nezet-lista {
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lebego-sorkoz);
  min-width: var(--menu-w);
}
.app-tobbmuvelet-lista[hidden],
.app-nezet-lista[hidden] {
  display: none;
}
/* CSOPORT-CÍM. Halk, kicsi, nagybetűs, és el kell válnia a kattintható soroktól, különben
   egy újabb menüpontnak látszik. Nyolc egyforma sorban keresni kell, három rövid listában
   viszont ránézésre megvan, merre induljunk. Üres csoport címe nem jelenik meg. */
/* A tipográfiát a fenti közös szabály adja; itt csak a menü-specifikus elválasztás marad. */
.app-tobbmuvelet-cim:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.app-tobbmuvelet-elem,
.app-nezet-elem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--menu-item-pad-y) var(--menu-item-pad-x);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.app-tobbmuvelet-elem:hover,
.app-nezet-elem:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.app-tobbmuvelet-elem[hidden] {
  display: none;
}
.app-tobbmuvelet-elem i,
.app-tobbmuvelet-elem svg,
.app-nezet-elem i,
.app-nezet-elem svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
/* Egyetlen narancs elem sincs a menüben. A narancs a fő gombé; ha a menüben is lenne narancs
   sor, a felhasználó nem tudná, melyik a lap fő művelete.
   SZEMANTIKUS SZÍN VISZONT VAN , és ez nem mond ellent a fentinek: a zöld és a piros nem
   kiemelés, hanem KÜLÖNBSÉG. A „Megnyert" és az „Elveszett" ugyanaz a mozdulat két ellentétes
   kimenettel; szín nélkül két egyforma sor lenne egymás alatt, és pont a tévesztés ellen nem
   véd semmi. Ezért csak KIMENET kap színt, művelet nem. */
.app-tobbmuvelet-elem--nyert {
  color: var(--success);
}
.app-tobbmuvelet-elem--nyert:hover {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}
.app-tobbmuvelet-elem--vesztett {
  color: var(--error);
}
.app-tobbmuvelet-elem--vesztett:hover {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}
/* TÖRLÉS , alapból SEMLEGES, és csak az egér alatt piros. Ugyanaz a szabály, mint a
   `.btn-ikon--torles`-nál: egy állandóan piros sor riasztásnak látszik, és pár nap alatt
   megtanulja a szem, hogy ne vegye észre. A szándék pillanatában viszont egyértelmű. */
.app-tobbmuvelet-elem--torles:hover {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}

/* ══ NÉZET-VÁLTÓ LEGÖRDÜLŐ (.app-nezet) , PO-döntés, 2026-08-22 ══
   A szegmens-sávot (.page-tabs) váltja ki a lista-fejlécen. Miért: a sáv szélessége a nézetek
   SZÁMÁVAL nőtt (2 nézet 236, 4 nézet 389 képpont), és a Naptárban emiatt tört ketté a polc
   sora. A legördülő szélessége a jelenlegi nézet NEVÉTŐL függ, nem a nézetek számától.
   A lista kinézete szándékosan AZONOS a Műveletek menüével: a ház egyféle lebegő listát
   ismer, és ha ez a kettő elcsúszna, két egyforma munkára két külön formanyelv jönne. */
.app-nezet {
  position: relative;
  flex: 0 0 auto;
}
.app-nezet-gomb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.app-nezet-gomb i,
.app-nezet-gomb svg {
  width: var(--menu-glyph);
  height: var(--menu-glyph);
}
.app-nezet-nyil {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1;
}
/* JOBBRA IGAZÍTVA nyílik, ahogy a Műveletek menü. Az első változat balra igazított, és a
   230 képpontos menü-szélességgel a 111 képpontos gomb alól 10 képponttal KILÓGOTT az ablakból
   (mérve 1440-en), mert a váltó a polc jobb szélén áll. A jobbra igazítás ezt kizárja.
   A menü-szélesség itt kisebb: a nézet-nevek rövidek, a 230 képpont fölösleges üres sáv lenne. */
.app-nezet-lista {
  min-width: max(180px, 100%);
}
.app-nezet-elem {
  gap: 8px;
  padding: 7px 8px 7px 10px;
}
/* A JELÖLÉS UGYANAZ, MINT A SZŰRŐ-PANELBEN (PO, 2026-08-22): halvány narancs alap, félkövér
   felirat, és a sor ELEJÉN narancs pipa. Két egyforma munkára (érték kiválasztása egy listából)
   nem lehet két különböző jelölés , a felhasználó egyszer tanulja meg, mit jelent a pipa.
   Három réteg: pipa (jel), a saját neve félkövéren (szó), halvány háttér (szín). */
/* A KIVÁLASZTOTT SOR , három réteg: narancs pipa (jel), félkövér felirat (szó), halvány
   narancs alap (szín). A vastagság 700, mert a betűkészletnek (Arial) 400 és 700 van; a 600-at
   a böngésző maga rajzolja ki, és ez gépenként más vastagságot ad. */
.app-nezet-elem.is-be {
  background: var(--lebego-be-bg);
  color: var(--text-primary);
  font-weight: 700;
}
/* BILLENTYŰVEL MOZGATOTT SOR. Külön jel kell rá, mert az egérrel adott :hover ilyenkor
   nincs, és enélkül a nyilazó felhasználó nem látja, hol tart. */
.app-nezet-elem.is-kiemelt {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
/* A PIPA HELYE MINDIG FOGLALT, akkor is, ha üres , mint a szűrő-panelben: enélkül a
   bekapcsolt sor szövege elcsúszna a többihez képest, és a lista ugrálna kattintásonként. */
/* MAGYARÁZÓ MONDATOS LISTA SZÉLESEBB. 180 képponton a mondatok három sorba törtek, és a lista
   a képernyő feléig nyúlt , a mondat pont attól lenne olvasható, hogy egy-két sor. */
.app-nezet-lista--mondatos {
  min-width: max(288px, 100%);
}
/* MAGYARÁZÓ MONDATTAL a sor két soros lesz: fölül a név, alatta a halk mondat. A pipa és az
   ikon ilyenkor a sor TETEJÉHEZ igazodik, nem a közepéhez, különben a jel elúszik a mondat mellé. */
.app-nezet-elem.is-mondatos {
  align-items: flex-start;
}
.app-nezet-szoveg {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
.app-nezet-mondat {
  color: var(--text-secondary);
  font-size: var(--font-xs);
  font-weight: 400;
  line-height: 1.35;
}
/* JELZÉS a sor jobb szélén (darabszám). Halk, mert nem ő a fő információ, de tabuláris
   számjegyekkel, hogy a listában egymás alatt egy vonalban álljanak. */
.app-nezet-jelzes {
  margin-left: auto;
  padding-left: 8px;
  color: var(--text-secondary);
  font-size: var(--font-xs);
  font-variant-numeric: tabular-nums;
}
.app-nezet-elem.is-be .app-nezet-jelzes {
  color: var(--text-primary);
}
.app-nezet-pipa {
  flex: 0 0 auto;
  width: 14px;
  color: var(--primary);
  font-weight: 700;
}

/* =========================================
   „KÖVETKEZŐ LÉPÉS" SÁV (közös; shared/kovetkezo-lepes.js)
   =========================================
   A lap egyetlen igazi kérdése: viszi-e valaki tovább ezt a rekordot. Két modul írta meg
   ugyanezt (`.crm-fokusz*`, `.ugyfelek-kov*`), és közben el is tértek , ez a közös változat.

   A DOBOZ EGÉSZE BESZÉL, nem csak a bal oldali ikon. Korábban a színtelen elválasztó-csíkon a
   „van teendő" és a „nincs teendő" ránézésre ugyanúgy nézett ki.
   A SZÍN SOSEM EGYEDÜLI JELZÉS: a keret-stílus (szaggatott vs. tömör), az ikon és a szöveg is
   megkülönbözteti őket , színtévesztő felhasználónak is olvasható marad. */
.app-kovlepes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* NINCS TEENDŐ , csíkos „üres hely". Ugyanaz a 45°-os minta, amivel a Szabadság a
   cég-leállást jelöli: a házon belül a csík mindenhol azt jelenti, hogy ide nem kerül semmi. */
/* A 45 FOKOS CSÍKOS HÁTTÉR KIKERÜLT (PO, 2026-08-08).
   Az „üres" állapotot eddig textúra jelölte, és ez az egész házban látszott, mert ez az
   osztály közös. A jelentés viszont a KIÍRT SZÓBAN van („Mára nincs több beírva"), nem a
   mintázatban , a csík csak zajt tett hozzá. Marad a szaggatott keret (az mondja, hogy ez
   nem tartalom, hanem hiány) és egy halk felület. */
.app-kovlepes--nincs {
  border: 1px dashed var(--border-strong);
  background: var(--bg-secondary);
}
.app-kovlepes--van {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
}
/* MA , az amber világosabb alapszín, mint a zöld, ezért azonos százaléknál halványabbnak
   látszik. A cél az azonos ERŐ, nem az azonos szám. */
.app-kovlepes--ma {
  border-color: color-mix(in srgb, var(--warning) 60%, transparent);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.app-kovlepes--lejart {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  background: color-mix(in srgb, var(--error) 9%, transparent);
}
/* HIBA , csíkos alapon BOROSTYÁN keret. Szándékosan nem piros: a piros azt jelentené, hogy
   lejárt a teendő, holott azt sem tudjuk, van-e egyáltalán. */
.app-kovlepes--hiba {
  border-color: color-mix(in srgb, var(--warning) 55%, transparent);
}
.app-kovlepes-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.app-kovlepes-ikon i,
.app-kovlepes-ikon svg {
  width: 16px;
  height: 16px;
}
.app-kovlepes-ikon--zold {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.app-kovlepes-ikon--sarga {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}
.app-kovlepes-ikon--piros {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
}
.app-kovlepes-ikon--szurke {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}
.app-kovlepes-szoveg {
  flex: 1 1 320px;
  min-width: 0;
}
/* A CÍMKE a sor ELEJÉRE kerül, nem fölé: így nem visz el egy teljes sornyi magasságot. */
.app-kovlepes-fejlec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.app-kovlepes-szoveg strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-primary);
  word-break: break-word;
}
.app-kovlepes-szoveg small {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
}
/* A HATÁRIDŐ-JELVÉNY kisebb és kisebb rádiuszú, mint a felirat, amihez tartozik: az csak egy
   dátum-utalás, nem versenyezhet a címkével. */
.app-kovlepes-jelveny {
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.app-kovlepes-jelveny--overdue {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}
.app-kovlepes-jelveny--today {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.app-kovlepes-jelveny--future {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
/* A MŰVELETEK a sor JOBB szélére. */
.app-kovlepes-cta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-left: auto;
  flex: 0 0 auto;
}
.app-kovlepes-hint {
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--text-secondary);
}
/* Csontváz , töltés közben. */
.app-kovlepes--vaz {
  border: 1px dashed var(--border);
  background: none;
  display: block;
}
.app-kovlepes-vazsor {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--bg-secondary);
}
.app-kovlepes-vazsor + .app-kovlepes-vazsor {
  margin-top: 7px;
}
.app-kovlepes-vazsor.rovid {
  width: 45%;
}

/* ===== HÓNAP-VÁLTÓ (közös; shared/honap-valto.js) =====
   Sorrend:  [←]  [Mai hónap]  [→]   2026. augusztus
   A két nyíl KÖZREFOGJA a hazatérő gombot, tehát a „vissza a mai hónapra" mindig ugyanott
   van, bármeddig lapozol. A felirat a nyilaktól jobbra, külön: az nem gomb, hanem ÁLLAPOT ,
   azt mondja meg, hol vagy, nem azt, hogy mit tehetsz. Ezért nincs kerete és nem kattintható. */
.app-honapvalto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.app-honapvalto-nyil {
  border-color: var(--border);
  color: var(--text-secondary);
}
.app-honapvalto-ma {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--font-sm);
}
/* Ha már a mai hónapon állsz, a gomb LETILTOTT , kattinthatónak látszani úgy, hogy nem
   történik semmi, rosszabb, mint halványnak lenni. */
.app-honapvalto-ma:disabled {
  opacity: 0.45;
  cursor: default;
}
.app-honapvalto-felirat {
  margin-left: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== ÖSSZEGZŐ MONDAT (közös) =====
   Egy sor a lista fölött, ami kimondja, mit lát a felhasználó: darab, összeg, és a
   figyelmet érdemlő eltérés. EZ VÁLTJA KI A KPI-KÁRTYA-SÁVOT: négy doboz ugyanezt a négy
   számot mutatta, csak háromszor annyi helyen, és elválasztotta a fejlécet a tartalomtól.
   A mondat mindig a SZŰRT halmazra vonatkozik , amit a szűrő elvesz, azt az összeg is. */
.page-osszesito {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.page-osszesito[hidden] {
  display: none;
}
.page-osszesito-fo {
  color: var(--text-primary);
}
.page-osszesito-fo strong {
  font-weight: 700;
}
/* A KIEMELT szám: az, amiért a felhasználó a képernyőre jött (várható bevétel, idei érték). */
.page-osszesito-kiemelt {
  font-weight: 700;
  color: var(--primary-dark);
}
.page-osszesito-halvany {
  color: var(--text-tertiary);
}
/* FIGYELMEZTETŐ CHIP a mondat végén (lejárt teendő, régóta csendben). Kattintható: rászűr.
   Nulla esetén NEM jelenik meg , az örökké ott ülő „0 lejárt" pár nap alatt láthatatlanná
   tenné a valódit is. */
.page-osszesito-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.page-osszesito-chip:hover {
  background: color-mix(in srgb, var(--error) 20%, transparent);
}
.page-osszesito-chip.is-aktiv {
  background: var(--error);
  color: #fff;
}
.page-osszesito-chip i,
.page-osszesito-chip svg {
  width: 12px;
  height: 12px;
}
/* HALK változat: tény, nem riasztás (kint lévő ajánlat). Ugyanaz a forma, semleges szín ,
   a piros a figyelmeztetésé marad, különben elszürkül a jelentése. */
.page-osszesito-chip--halk {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.page-osszesito-chip--halk:hover {
  background: var(--border);
}
.page-osszesito-chip--halk.is-aktiv {
  background: var(--primary);
  color: #fff;
}
/* A fej-sávok gomb-mérete FENTEBB, egy helyen van (a „A LAP FŐ GOMBJA" blokkban). */
.page-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.page-summary b {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.page-summary .page-summary-metric {
  font-variant-numeric: tabular-nums;
}
.page-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.page-search svg {
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
  flex: 0 0 auto;
}
.page-search input {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: var(--font-sm);
  color: var(--text-primary);
}
/* A nézet-váltó pill NE animáljon az első pozícionáláskor (a .no-anim-et a JS veszi le) */
.page-tabs.no-anim::before {
  transition: none;
}
/* Toolbar-polc (koncept-3): a 2. sor belső hajszál-vonallal elválasztott „polc". A sor-gap adja a vonal
   FÖLÖTTI tért, a padding-top a vonal ALATTIT → szimmetrikus elválasztás, állandó magasság. */
/* A POLC , a fej ALSÓ sora: nézet-váltó fülek balra, kereső és szűrők jobbra.
   A VONAL A SOR ALJÁN VAN, nem a tetején (2026-08-16). Ez nem ízlés-kérdés:
   a fej-blokkot a TARTALOMTÓL kell elválasztani, nem önmagától. A felül futó vonal a
   cím-sort vágta le a polcról, tehát a fejlécet szelte ketté.

   MIÉRT ÍGY LETT: a Feladatok és a Naptár egymástól FÜGGETLENÜL ugyanezt írta meg saját
   osztályként (`feladatok-polc`, `nt-polc`), betű szerint azonos három tulajdonsággal, sőt
   azonos magyarázó kommenttel („a vonalat a sor viszi"). Amikor két modul külön-külön
   ugyanoda jut, az nem véletlen, hanem a közös komponens hibájának a jele. A helyes lépés
   ezért nem egy harmadik másolat, hanem a KÖZÖS igazítása hozzájuk.

   A `min-height: 0` és a `stretch` azért kell, hogy a FÜLEK a vonalon ÜLHESSENEK (az aktív
   fül aláhúzása maga a sor vonala), a jobb oldali vezérlők viszont ne tapadjanak hozzá. */
.page-shelf {
  border-bottom: 1px solid var(--border);
  align-items: stretch;
  min-height: 0;
}
/* A NÉZET-VÁLTÓ FÜLEK A POLCON. A fülek saját alsó vonala itt kikapcsol, mert a vonalat a SOR
   viszi végig , a fülek egyébként csak a sor egyharmadáig érnének, és a vonal rövid csonk
   lenne. A `flex-end` igazítás miatt az aktív fül aláhúzása PONTOSAN a sor vonalára ül, tehát
   a jelölés és az elválasztó ugyanaz a vonal.
   (Ez a szabály a `nt-polc` és a `feladatok-polc` másolatokból került ide, 2026-08-16.) */
.page-shelf .page-modtabs {
  border-bottom: 0;
  align-items: flex-end;
  flex: 0 0 auto;
}
.page-shelf-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto; /* a vezérlők a polc jobb szélére */
  /* A JOBB OLDAL NEM TÖRIK ÉS NEM ZSUGORODIK (PO, 2026-08-23). Eddig `flex-wrap: wrap` volt:
     ha a bal oldali szöveg hosszú lett (naptár-dátum, hosszú összegző), a VEZÉRLŐK törtek új
     sorba, tehát a fejléc nőtt, és a gombok elugrottak a megszokott helyükről.
     A helyes sorrend fordított: a LEÍRÓ szöveg rövidüljön (van rá pont-pont-pont), a vezérlők
     maradjanak ott, ahol a kéz keresi őket. A bal oldal `min-width: 0`-val zsugorodik. */
  flex: 0 0 auto;
  flex-wrap: nowrap;
  /* LEVEGŐ A VONAL FÖLÖTT. Mérve volt a baj a Feladatoknál: a legördülő alja 1 képpontra állt
     a vonaltól, és a hozzátapadt vezérlő rendetlennek látszik. A fülek szándékosan ülnek a
     vonalon, a jobb oldali vezérlők viszont nem , ott a levegő a helyes. */
  align-self: center;
  margin-bottom: 6px;
}
/* A POLC VEZÉRLŐI EGYFORMA MAGASAK (PO, 2026-08-13: „nem ugyanolyan magasak, és a vonalhoz
   túl közel vannak").
   MÉRVE volt a baj: a kereső 32, a legördülő 35 képpont, és a legördülő alja 1 képpontra állt
   a polc vonalától. Két különböző magasságú, a vonalhoz tapadó gomb egymás mellett rendetlennek
   látszik , nem attól, hogy csúnyák, hanem mert a szem a közös alapvonalat keresi.
   Egy közös magasság-token oldja meg, nem elemenkénti hangolás: így a következő vezérlő, ami
   ide kerül, magától illeszkedik. */
:root {
  --polc-vezerlo-magassag: 36px;
}
/* A `min-height`-ot IS felül kell írni, nem elég a `height` (2026-08-17).
   Az űrlap-mezőknek van egy MÁSIK, magasabb közös méretük (`--vezerlo-magassag`, 42px), amit
   a legördülő és a dátum-választó `min-height`-tal kap meg , az pedig ERŐSEBB a `height`-nál:
   egy elem nem lehet alacsonyabb a saját minimumánál. Emiatt a polcra kerülő legördülő 42
   képpont magas lett a 36 helyett, és ott, ahol csak EGYES nézetekben jelenik meg (Naptár →
   Nap: ember-választó), a FEJLÉC IS MEGNŐTT , a lap alatta odébb csúszott a többi nézethez
   képest. A PO ezt vette észre.

   A KÉT MÉRET SZÁNDÉKOSAN KÜLÖNBÖZIK: a polc kompakt (36), az űrlap kényelmes (42). Ami a
   polcra kerül, az a polc méretét veszi fel , ez a szabály mondja ki. */
/* ══ A POLC VEZÉRLŐI TELEFONON SORBA TÖRNEK ═══════════════════════════════════════════════
   A fenti alapszabály szerint a jobb oldal SEM nem törik, SEM nem zsugorodik (2026-08-23):
   gépen a leíró szöveg rövidüljön, ne a gombok ugráljanak. Ez ott helyes.

   TELEFONON VISZONT NINCS HOVA RÖVIDÜLNI. Mérve 393 képponton a Feladatok lapján: a nézet-váltó,
   a „Szűrő", az „Új feladat" és a „Műveletek" együtt szélesebb a tartalom-területnél, a
   `.app-content` pedig `overflow-x: hidden` , tehát az utolsó gomb nem elcsúszik, hanem
   LEVÁGÓDIK. Nem lehet rákoppintani, és nem is látszik, hogy létezik.

   MIÉRT ITT ÁLL, ÉS NEM A TÖBBI MOBIL-SZABÁLY KÖZÖTT. Először oda tettem, a stíluslap 4000.
   sora környékére , csakhogy az alapszabály KÉSŐBB jön (7365.), azonos fajsúllyal, tehát
   felülírta a médialekérdezésemet, és a javítás SOHA nem érvényesült. A PO képe ezt mutatta meg
   másodszor is. Azonos fajsúlynál a sorrend dönt: a felülírásnak a felülírandó UTÁN kell állnia.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ══ A FŐ MŰVELET LEKERÜL A POLCRÓL , DE CSAK OTT, AHOL AZ ALSÓ SÁV ÁTVESZI ══════════════
     PO-döntés (2026-09-04), az „A" változat a `koncepció/polc-600-alatt-koncept.html`-ből:
     telefonon a polcon csak a Szűrő és a Műveletek marad. A fő művelet nem vész el, mert a
     mobil alsó sáv nagy narancs „+" gombja már ma is ugyanazt nyitja , sőt nagyobb célpont,
     mint egy polc-gomb volt. A referencia is ezt támasztja alá: a Google Naptár, a Gmail és a
     Todoist egyike sem tartja a fő műveletet a felső sávban.

     A FELTÉTELES SZŰRŐ NEM SZÉPSÉGHIBA, HANEM A JAVÍTÁS LÉNYEGE. A „+" a látható gombok közül
     azt kattintja, aminek a művelet-neve `.uj`-ra végződik. Mérve (2026-09-04) tizenegy polc-
     gombból NÉGY nem ilyen: `terv.eves` (Bevételterv), `eszkoz.letrehoz` és
     `emlekezteto.letrehoz` (Eszközök), `ugyfel.kezel` (Ügyfelek). Ha ezeket is elrejtenénk,
     azokban a modulokban telefonon ELVESZNE a létrehozás, mert nincs, ami átvegye.
     Ezért a szabály szó szerint azt mondja ki, amit jelent: rejtsd el, HA az alsó sáv meg tudja
     nyitni. Amint egy modul átnevezi a műveletét `.uj`-ra, magától bekapcsol. */
  .page-shelf-right .btn-primary[data-action$='.uj'] {
    /* NEM `display: none`, HANEM LÁTHATATLANRA ZSUGORÍTVA , ez a javítás lényege (2026-09-04).

       AZ ELSŐ VÁLTOZAT `display: none`-t használt, és ELTÖRTE a mobil „+" gombot. Az alsó sáv
       „+"-a ugyanis a lapon lévő LÁTHATÓ „új" gombot keresi meg és kattintja , így lesz
       kontextus-érzékeny: naptáron eseményt, jegyzeten jegyzetet nyit. A `display: none` viszont
       az `offsetParent`-et is nullázza, tehát a keresés kiejtette a gombot, és a „+" minden
       modulban visszaesett a feladatra. (PO-bejelentés a lokál-teszten.)

       EZ A FORMA MEGTARTJA A GOMBOT a bejárható elrendezésben (az `offsetParent` nem null),
       csak egyetlen képpontra zsugorítja és levágja, tehát helyet nem foglal és nem is látszik.
       Így a „+" továbbra is megtalálja.

       MIÉRT NEM A JS-BEN JAVÍTOTTUK. Ott meg kellene különböztetni, hogy a gombot MI rejtettük
       el mobilra, vagy a JOGOSULTSÁG rejtette el , és a kettőt a DOM-ból nem lehet biztosan
       szétválasztani. Ha egyszer tévednénk, a „+" olyan műveletet indítana, amihez a
       felhasználónak nincs joga. Így viszont a jogosultság miatt rejtett gomb továbbra is
       `display: none` marad, tehát a keresés helyesen ejti ki. */
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .page-shelf-right,
  .page-listhead-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Zsugorodni is szabad, különben egy hosszú gomb-felirat ugyanúgy kitolná a sort. */
    flex-shrink: 1;
    min-width: 0;
  }

  /* A LAPFEJLÉC BAL OLDALA NE NYOMJA KI A VEZÉRLŐKET. A leíró szöveg csonkoljon, ahogy gépen
     is , enélkül egy hosszú összegző mondat a törés után is szélesre feszítené a sort. */
  .page-shelf-left,
  .page-listhead-row > :first-child {
    min-width: 0;
  }
}

.page-shelf-right .page-search,
.page-shelf-right .ajdd > .ajdd-btn,
.page-shelf-right .dtp-field,
.page-shelf-right .nt-filter-btn {
  height: var(--polc-vezerlo-magassag);
  min-height: var(--polc-vezerlo-magassag);
  box-sizing: border-box;
}
/* A POLCON A BETŰMÉRET IS EGYSÉGES (PO, 2026-08-18). A legördülő alapból `--font-base`, azaz
   16 képpont, mert űrlap-mezőként született; a polcon viszont a kereső és a nézet-váltó 14-en
   áll, és a 16 mellettük nagynak, majdnem címszerűnek hat. A polc vezérlői egy sorban élnek,
   tehát egy méretet kell mutatniuk , a magasságot már egy szabály tartja egyben, most a
   tipográfia is ugyanígy. */
.page-shelf-right .ajdd > .ajdd-btn,
.page-shelf-right .nt-filter-btn {
  font-size: var(--font-sm);
}
/* Nézet-váltó a lista-fejléc POLCÁN (Táblázat/Kártya): kompakt (kisebb, mint a fő CTA)
   + átlátszó csúszka akcent-kerettel. CSAK a polcon, a felső menü-fülekre NEM hat. */
/* A VÁLTÓ UGYANOLYAN MAGAS, MINT A KERESŐ (PO, 2026-08-18). A polc többi vezérlőjének
   magasságát egy közös szabály tartja egyben (`--polc-vezerlo-magassag`), a váltó viszont
   kimaradt belőle, mert tartalom-méretű doboz , ezért ült pár képponttal alacsonyabban.
   A belső fül magassága ebből SZÁMÍTÓDIK: a doboz magassága mínusz a 3-3 képpont belső tér
   és az 1-1 képpont keret. Így ha valaha változik a polc-magasság, a váltó magától követi. */
.page-shelf-right .page-tabs {
  padding: 3px;
  height: var(--polc-vezerlo-magassag);
  box-sizing: border-box;
}
.page-shelf-right .page-tab {
  min-height: calc(var(--polc-vezerlo-magassag) - 8px);
  padding: 4px 12px;
  font-size: 13px;
  /* VÉKONY BETŰ, AMIKOR NEM AZON ÁLL (PO, 2026-08-18). A nem-aktív állás így hátralép, és a
     szem magától az aktívra ül. Az aktív súlyát lentebb a `.active` adja vissza. */
  font-weight: 500;
}
.page-shelf-right .page-tab.active {
  font-weight: 700;
}
/* A SÚLY-VÁLTÁS NE MOZGASSA A SORT. A félkövér szöveg szélesebb, tehát váltáskor a fül
   megnőne, és tolná, ami mellette áll. A felirat mellett ezért ott ül egy LÁTHATATLAN
   ikerpéldány, ami MINDIG félkövér, és ugyanabban a rács-cellában van, mint a látható szöveg:
   a cella a kettő közül a nagyobbat veszi fel, tehát a fül szélessége már nyugalmi állapotban
   is a félkövér méret. A szöveg a `data-cim`-ből jön, hogy ne kelljen kétszer leírni. */
.page-tab-cim {
  display: inline-block;
}
/* NULLA MAGASSÁGÚ BLOKK, nem rács-cella. Az első változat `inline-grid` volt, és a rács a
   látható szöveget a MÁSODIK sorba tette (az explicit cellát foglalja el előbb az ikerpéldány),
   ezért ült a felirat a fül alján. Így viszont a nulla magasságú blokk csak a SZÉLESSÉGET adja
   hozzá, függőlegesen nem foglal semmit , a szöveg középen marad. */
.page-tab-cim::after {
  content: attr(data-cim);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
  pointer-events: none;
}
/* AZ IKONOK VÉKONYABBAK ÉS KISEBBEK. A Lucide alap-vonala 2 képpont; 13 képpontos rajznál az
   már folt, nem jel. A felirat viszi a jelentést, az ikon csak kísér , ezért lép hátra. */
.page-shelf-right .page-tab i,
.page-shelf-right .page-tab svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.5;
}
/* A POLCON A JELÖLÉST MAGA A GOMB VISZI, nem egy külön lapka (PO, 2026-08-18).

   MI VOLT A BAJ. A fehér lapka egy külön, abszolút pozicionált elem (`::before`), aminek a
   helyét JavaScript számolja ki az aktív fül geometriájából. Két külön elem, két külön
   koordináta-rendszer , és a PO azt látta, hogy a lapka pár képponttal jobbra lóg a gombnál.
   Három dolog okozhatja (origó-eltérés a keret miatt, a nagy képernyős 1,2-es nagyítás, vagy
   a rossz pillanatban mért szélesség), és mindhárom javítása külön hack lett volna.

   MIÉRT EZ A HELYES MEGOLDÁS, ÉS NEM ELMASZKOLÁS. A csúszó lapkának EGYETLEN haszna a
   sikló animáció , a polcon lévő váltókon viszont az amúgy is ki van kapcsolva (`no-anim`).
   Marad tehát egy külön elem, ami semmit nem ad, cserébe el tud csúszni. Ha a jelölést maga
   a gomb háttere viszi, akkor a két doboz NEM tud széttartani, mert egy doboz. */
.page-shelf-right .page-tabs::before {
  display: none;
}
.page-shelf-right .page-tab.active {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media (max-width: 640px) {
  .page-listhead-actions {
    width: 100%;
  }
  .page-search {
    width: 100%;
    min-width: 0;
  }
}

/* ===== Perzisztens értesítés-panel a fejléc-csengőnél (core/notif-center.js) ===== */
.notif-panel {
  position: fixed;
  z-index: 1200;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -12px rgba(15, 23, 41, 0.35);
}
.notif-panel[hidden] {
  display: none;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
}
.notif-allseen {
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.notif-allseen:hover {
  text-decoration: underline;
}
.notif-list {
  overflow-y: auto;
}
.notif-item {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
}
.notif-item:hover {
  background: var(--bg-secondary);
}
.notif-item.is-unseen {
  background: var(--primary-tint);
}
.notif-ic {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.3;
}
.notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notif-title {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
}
.notif-text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.notif-when {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.notif-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
}
/* Értesítés-előnézet popup (a csengő-elemre kattintva; a szerkesztő helyett) */
.notif-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notif-preview-title {
  font-size: var(--font-h4, 17px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.notif-preview-when {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}
.notif-preview-text {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.notif-preview-muted {
  color: var(--text-tertiary);
  font-style: italic;
}
/* Címke-érték táblázat az értesítés-előnézetben (forrás / kitől / cég / elérhetőség / mikor) */
.notif-dtable {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.notif-drow {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-sm);
}
.notif-drow:nth-child(odd) {
  background: var(--bg-secondary);
}
.notif-drow:last-child {
  border-bottom: none;
}
.notif-dk {
  color: var(--text-tertiary);
  font-weight: 600;
}
.notif-dv {
  color: var(--text-primary);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
/* Törölt hivatkozott tétel jelölése (a rekord már nincs meg) , áthúzva, nem ugrik sehova */
.notif-item.is-torolt .notif-title,
.notif-item.is-torolt .notif-text {
  text-decoration: line-through;
  color: var(--text-tertiary);
}
.notif-torolt-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: none;
}
.notif-preview-torolt {
  text-decoration: line-through;
  color: var(--text-tertiary);
}
.notif-torolt-note {
  font-size: var(--font-sm);
  color: var(--error, #dc2626);
  background: color-mix(in srgb, var(--error, #dc2626) 8%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 4px;
}

/* =========================================
   Modul-váltás töltés-jelző , AZONNALI (nem késleltetett)
   A module-loader „atomi cseréje": a régi modul a képernyőn marad, amíg az új teljesen
   betölt, majd egy lépésben cserél. Két elem jelzi a töltést, ugyanarra az osztályra kötve:
     • ::before , középső karika (a fő visszajelzés, „dolgozik a rendszer")
     • ::after  , finom futó sáv a képernyő tetején
   A body.dv-module-loading osztályt a mountModule kapcsolja be/ki, KÉSLELTETÉS NÉLKÜL,
   tehát rövid betöltésnél is látszik (PO-döntés, 2026-07-25).
   ========================================= */

/* Töltés-karika , a TARTALOM-terület közepén (nem a képernyőén): mobilon a képernyő
   közepe jó, asztali nézetben viszont az oldalsáv és a fejléc miatt el kell tolni,
   különben balra és feljebb csúszna a tartalomhoz képest. */
body.dv-module-loading::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent, #f97316) 20%, transparent);
  border-top-color: var(--accent, #f97316);
  z-index: 10000;
  pointer-events: none;
  animation: dv-module-spin 0.75s linear infinite;
}
@keyframes dv-module-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Asztali nézet: az oldalsáv és a fejléc félszélességével/félmagasságával eltolva, hogy a karika
   a TARTALOM közepén álljon. A --sidebar-width magától 70px-re vált keskeny (rail) módban is. */
@media (min-width: 769px) {
  body.dv-module-loading::before {
    top: calc(50% + var(--header-height, 60px) / 2);
    left: calc(50% + var(--sidebar-width, 260px) / 2);
  }
}
/* Csökkentett mozgás: ne pörögjön, csak egy halvány, statikus karika jelezze a töltést */
@media (prefers-reduced-motion: reduce) {
  body.dv-module-loading::before {
    animation: none;
    border-top-color: color-mix(in srgb, var(--accent, #f97316) 45%, transparent);
    opacity: 0.6;
  }
}
body.dv-module-loading::after {
  content: '';
  position: fixed;
  top: 0;
  left: -35%;
  width: 35%;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #f97316) 0%, transparent),
    var(--accent, #f97316),
    color-mix(in srgb, var(--accent, #f97316) 0%, transparent)
  );
  z-index: 9999;
  pointer-events: none;
  animation: dv-module-loadbar 1.1s ease-in-out infinite;
}
@keyframes dv-module-loadbar {
  0% {
    left: -35%;
  }
  100% {
    left: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.dv-module-loading::after {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.5;
  }
}

/* Csoportosító sor a rendezhető táblázatban (opcionális `groupOf`).
   Ez fordítja le a rendezést emberi nyelvre: nem csak sorrend van, hanem kimondjuk, miért. */
.app-table .app-table-grp td {
  background: var(--bg-secondary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: 7px 12px;
  cursor: default;
}
.app-table .app-table-grp:hover td {
  background: var(--bg-secondary);
}

/* =========================================
   MODUL-SAJÁT NÉZET-VÁLTÓK , ideiglenes egységesítés (2026-07-31)
   =========================================
   Három modul a KÖZÖS `.page-tabs` helyett saját váltót írt: a Naptár (`.nt-viewsel`,
   `.nt-seg`, `.nt-mode-btn`) és a Feladatok (`.feladatok-tabs`, `.feladatok-seg`). Emiatt a
   közös komponens csiszolása rajtuk nem látszott, és a felület modulonként mást mutatott.

   A VÉGLEGES megoldás a jelölés átírása `.page-tabs`-ra, de az markupot és JS-t is érint.
   Addig itt egy helyen ráhúzzuk a közös formanyelvet, hogy a felhasználó EGY rendszert
   lásson. Ha egy modul átáll a közösre, a hozzá tartozó sort ki lehet venni innen.
   ========================================= */
.nt-viewsel,
.nt-segmented,
.feladatok-tabs {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.nt-viewsel button.active,
.nt-seg.active,
.nt-mode-btn.active,
.feladatok-tab.active,
.feladatok-seg.active {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* SZŰRŐ-CHIP , nem nézet-váltó. Bekapcsolva halk kiemelés, NEM narancs tinta: a szűrő
   állapot, nem művelet, és mellette áll a narancs fő gomb. */
.feladatok-chip.active {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

/* =========================================
   NAP-NÉZET , „mi van már aznap" (2026-08-01)
   =========================================
   A `shared/nap-nezet.js` komponens felülete. Órasávos rács a választott napra, benne a már
   meglévő teendők, kiemelve az, amit épp be akarsz tenni, alatta az ütközés-mondat.
   Az Értékesítés teendő-ütemezőjéből emelve, mert nem csak ott jó látni a napot: minden
   gyors feladat-létrehozásnál kell (napolás, emlékeztető, hívás-ütemezés).
   ========================================= */
.nap-fej {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  background: var(--bg-secondary);
}
.nap-ures {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
/* A rács 15 órasávot tartalmaz (6-tól 20-ig), ezért magasabb ablakot kap. 300 képpontnál
   nagyjából tizenegy sáv látszik egyszerre, a többi görgethető , így a rács nem nyomja ki
   a mentés-gombot a képernyőről, de nem is kell folyton görgetni benne. */
.nap-racs {
  max-height: 300px;
  overflow: auto;
}
.nap-ora {
  display: flex;
  gap: 8px;
  min-height: 26px;
  border-bottom: 1px solid var(--border);
}
.nap-ora .o {
  flex: 0 0 34px;
  padding: 5px 0 0 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.nap-ora .b {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 10px 4px 0;
  min-width: 0;
}
.nap-elem {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-left: 0;
}
/* Az ÚJ teendő kiemelve: ez az egyetlen elem, amit épp te teszel be. */
.nap-elem.uj {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 700;
}
.nap-allapot {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.nap-allapot.ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.nap-allapot.utkozik {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

/* =========================================
   JOBB OLDALI SÁV , `.page-rail` (2026-07-31)
   =========================================
   Ami MINDIG igaz az alanyról, az ne legyen fül mögött. A keret rácsában a helye már ki van
   jelölve (a `.app-shell` harmadik oszlopa, ma 0 széles), ez itt a sáv BELSŐ szerkezete.

   A SÁV SZABÁLYA: oda csak az kerül, ami akkor is igaz, ha máshova navigálsz. Ami fülenként
   változik, az marad középen. Enélkül a sáv pár hét alatt lomtár lesz, és csak oldalra
   fordítottuk a füleket.
   ========================================= */
.page-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 320px;
  min-width: 0;
}
.page-rail-blokk {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.page-rail-cim {
  margin-bottom: 8px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-rail-sor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  min-width: 0;
}
.page-rail-sor i,
.page-rail-sor svg,
.page-rail-elem i,
.page-rail-elem svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
/* KAPCSOLÓDÓ REKORD , kattintható sor. Ez a sáv legnagyobb nyeresége: az ügyfél ajánlatai,
   projektjei és számlái ma sehol nem látszanak egyben, csak ha átmész a másik modulba. */
/* A sor lehet <a> ÉS <button> is: az <a> akkor, ha valódi cél-URL van mögötte, a <button>
   akkor, ha a kattintás modult vált a kereten belül (nincs saját címe). A gomb-alapértékeket
   (keret, háttér, betű, kurzor) ezért itt nullázni kell , enélkül a sáv fele link-szerű,
   a másik fele böngésző-gomb lenne. */
.page-rail-elem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% + 12px);
  padding: 5px 6px;
  margin: 0 -6px;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
}
.page-rail-elem:hover {
  background: var(--bg-secondary);
}
.page-rail-meta {
  margin-left: auto;
  padding-left: 8px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ÜRES BLOKK , KIMONDJA, mi hiányzik. Nem tűnik el és nem mutat nullát: a hiány oka
   információ, a néma üresség nem az. */
.page-rail-ures {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
}
/* ===== HÍVHATÓ KAPCSOLAT , a sáv legfelső blokkja (koncepció/Kész koncept/jobb-sav-lead-adatlap.html) =====
   MIÉRT LINK ÉS NEM SZÖVEG: a telefonszám eddig a Törzsadat fülön ült szövegként, tehát ki
   kellett jelölni és átmásolni , ráadásul másik fülről előbb oda kellett navigálni. `tel:` és
   `mailto:` sémával telefonról tényleg hív, gépen a levelezőt nyitja.
   A NÉV nem link: az már ezen a lapon van, nincs hova vinnie. */
.rail-kapcsolat-nev {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.rail-kapcsolat-beosztas {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 12.5px;
}
/* A link SOR, nem szó: az egész sáv-szélesség kattintható felület , ez a legkönnyebb célpont
   egérrel is, ujjal is. */
.rail-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  margin: 0 -6px;
  border-radius: 7px;
  color: var(--primary-dark);
  font-size: var(--font-sm);
  text-decoration: none;
  min-width: 0;
}
.rail-link:hover {
  background: var(--bg-secondary);
}
.rail-link i,
.rail-link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
.rail-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TÖBB KAPCSOLATTARTÓ egy blokkban , kell köztük elválasztás (2026-08-01, Ügyfelek). */
/* A sáv KAPCSOLATTARTÓ-blokkja: több ember is lehet, ezért kell köztük elválasztás. */
.rail-kapcsolat + .rail-kapcsolat {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
/* Az ELSŐDLEGES jelölése halk szó, nem színes jelvény: a sávban négy-öt blokk van, és egy
   zöld pötty itt többet ígérne, mint amennyit jelent. */
.rail-elsodleges {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* CÍM-SOR: a blokk neve és a „+" egy sorban. A „+" a FEJLÉCBEN van, nem a lista alján ,
   ott akkor is látszik, ha még egy kapcsolattartó sincs. */
.rail-cim-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rail-cim-sor .page-rail-cim {
  margin-bottom: 0;
}
.rail-plusz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 -4px 0 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
}
.rail-plusz:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.rail-plusz i,
.rail-plusz svg {
  width: 13px;
  height: 13px;
}
/* CSOPORT-CÍM a sávon belül (Fut / Lezárt). Halk és kicsi: nem új blokk, csak rendez. */
.rail-csoport {
  margin: 8px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.rail-csoport:first-child {
  margin-top: 0;
}

/* ===== BLOKK-ÖSSZEGZŐ , egy sor a kapcsolódó lista FÖLÖTT =====
   Megmondja, amiért különben végig kell olvasni a listát: mennyi ment ki, és mennyi van
   nyitva. Ugyanaz az elv, mint a lista-fej összegző mondatánál, csak sáv-méretben. */
.rail-osszeg {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.rail-osszeg b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ===== GYORS HOZZÁADÁS , a sáv alja =====
   NEM gomb-sor: halk szöveges belépők, mert ezek nem a lap fő műveletei. A fő gomb a
   fejlécben áll, és egy képernyőn egy fő gomb van. */
.rail-hozzaad {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail-hozzaad button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  margin: 0 -6px;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  text-align: left;
  cursor: pointer;
}
.rail-hozzaad button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.rail-hozzaad button i,
.rail-hozzaad button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
/* Rövid, szerkeszthető szöveg a sávban (ma: a lead jegyzete). Nem mező-készlet: itt nincs
   címke, mert a blokk címe már megmondja, mi ez. */
.rail-jegyzet {
  width: calc(100% + 4px);
  padding: 6px 8px;
  margin: 0 -2px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
  cursor: pointer;
}
.rail-jegyzet:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.rail-jegyzet--ures {
  color: var(--text-tertiary);
  font-style: italic;
}

/* 1280 képpont alatt a sáv a tartalom ALÁ csúszik. Szűkebben a főterület már nem bír el egy
   320-as oszlopot: vagy a táblázat lóg ki, vagy a sáv lesz olvashatatlanul keskeny. */
@media (max-width: 1280px) {
  .page-rail {
    width: 100%;
  }
}

/* =========================================
   ŰRLAP-MEZŐK , közös készlet (2026-07-31)
   =========================================
   MIÉRT KELLETT: három modul (CRM, Ügyfelek, Munkavállalók) írta a saját beviteli mezőjét,
   egymástól kicsit eltérő magassággal és kerettel. A többi modul pedig NYERS, formázatlan
   böngésző-mezőt használt. Innentől egy készlet van.
   ========================================= */

/* A mező és a hozzá tartozó címke EGY egység. Külön címke-osztály azért kell, mert a
   kattintás a címkén is a mezőt fókuszálja, és mert a kötelező-jelölés a címkére kerül. */
.app-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.app-field-label {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}
/* KÖTELEZŐ-CSILLAG KIVEZETVE (PO, 2026-07-31). Az űrlapjainkon a mezők túlnyomó része
   kötelező, tehát a csillag nem információt adna, hanem díszt: ahol MINDEN csillagos, ott a
   csillag semmit nem különböztet meg. Ha egyszer lesz olyan űrlap, ahol tényleg kevés a
   kötelező, a NEM kötelezőt érdemes jelölni („nem kötelező"), nem fordítva. */
.app-input,
.app-textarea,
.app-select {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font: inherit;
  font-size: var(--font-sm);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}
.app-input::placeholder,
.app-textarea::placeholder {
  color: var(--text-tertiary);
}
.app-input:hover:not(:disabled),
.app-textarea:hover:not(:disabled),
.app-select:hover:not(:disabled) {
  border-color: var(--border-strong);
}
/* FÓKUSZ , akcent-keret és halvány gyűrű. Nem `outline`, mert azt a lekerekítés levágja. */
.app-input:focus,
.app-textarea:focus,
.app-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.app-textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}
.app-input:disabled,
.app-textarea:disabled,
.app-select:disabled {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
/* HIBÁS ÁLLAPOT. A piros keret mellé MINDIG kell szöveges üzenet: a szín önmagában
   színtévesztőnek nem mond semmit, és a keret azt sem árulja el, MI a baj. */
.app-input.is-hiba,
.app-textarea.is-hiba,
.app-select.is-hiba {
  border-color: var(--error);
}
.app-input.is-hiba:focus,
.app-textarea.is-hiba:focus,
.app-select.is-hiba:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent);
}
.app-field-hiba {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--error);
  font-size: 12px;
  font-weight: 600;
}
.app-field-hiba i,
.app-field-hiba svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
/* SÚGÓ-SOR a mező alatt , formátum-tipp, példa. Halk, mert nem baj, csak segítség. */
.app-field-sugo {
  color: var(--text-tertiary);
  font-size: 12px;
}

/* KAPCSOLÓ , egyetlen be-ki állapot (nem két opció közti választás, arra a .app-csuszka van).
   Teljes pirula, mert a ház szabálya szerint a kapcsoló az, ami pirula lehet. */
.app-kapcsolo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.app-kapcsolo input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.app-kapcsolo-sin {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.18s ease;
}
.app-kapcsolo-sin::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* BEKAPCSOLVA NARANCS (PO-döntés 2026-07-31). Ez a kivétel a „narancs csak a fő gombnak"
   szabály alól, és van rá ok: a kapcsoló az EGYETLEN vezérlő, ami ránézésre megmondja, hogy
   valami BE van kapcsolva. Ha ez is semleges lenne, a bekapcsolt és a kikapcsolt állapot
   között csak a gömb helyzete különböztetne, és azt egy pillantással nem látni.
   A zöld itt félrevezető volt: a zöld a rendszerben „rendben van", nem „be van kapcsolva". */
.app-kapcsolo input:checked + .app-kapcsolo-sin {
  background: var(--primary);
}
.app-kapcsolo input:checked + .app-kapcsolo-sin::after {
  transform: translateX(18px);
}
.app-kapcsolo input:focus-visible + .app-kapcsolo-sin {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.app-kapcsolo-tx {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

/* =========================================
   KÖZÖS KOMPONENSEK , a koncepció/Kész koncept/gombok-es-valtok.html lapról átemelve (2026-07-31)
   =========================================
   Ezek a komponensek EGY helyen élnek, és minden modul ezeket használja. A lap, ahonnan
   jöttek, ugyanezt a fájlt hivatkozza, tehát ott is pontosan ez látszik , a katalógus és a
   termék nem tud elcsúszni egymástól.
   Ha valamelyiken változtatsz, a lapon azonnal látod az eredményt.
   ========================================= */

/* IKON-GOMB , csak ikon, felirat nélkül. Sor végén, kártya sarkában, táblázat-cellában.
   Négyzet, mert álló ikon van benne: fekvő téglalapban az ikon optikailag elcsúszik.
   A szín alapból HALK: a sor tartalma a fontos, a művelet csak akkor lépjen elő, amikor
   a felhasználó odaér. */
.btn-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--btn-icon-radius);
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
}
.btn-ikon i,
.btn-ikon svg {
  width: var(--btn-icon-glyph);
  height: var(--btn-icon-glyph);
}
.btn-ikon:hover {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-ikon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* TÖRLÉS , piros CSAK hoverkor. Alapból ugyanolyan halk, mint a többi ikon-gomb: egy
   állandóan piros kuka minden soron riasztásnak látszik, és pár nap alatt megtanulja a
   szem, hogy ne vegye észre. A szándék pillanatában viszont egyértelmű legyen. */
.btn-ikon--torles:hover {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
  color: var(--error);
}

/* EREDMÉNY-GOMBOK , megnyert és elvesztett. Nem sima gombok: ezek LEZÁRNAK egy üzletet,
   és a lezárás nehezen visszavonható. Ezért kapnak teli színt és nagyobb célfelületet,
   és ezért nem állhatnak közvetlenül egymás mellett kis gombként.
   A megnyert zöld, az elvesztett piros. Mindkettőben van ikon, mert a szín önmagában
   nem elég: színtévesztőnek a két gomb ugyanaz lenne. */
.btn-eredmeny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  /* Rádiusz 10, nem teljes pirula. A ház szabálya: gomb és kártya 10 képpont, a teljes
     pirula a KAPCSOLÓKÉ. Egy lezáró művelet gomb, nem kapcsoló. */
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    filter 0.14s ease;
}
.btn-eredmeny i,
.btn-eredmeny svg {
  width: 16px;
  height: 16px;
}
.btn-eredmeny:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn-eredmeny:active {
  transform: translateY(0);
}
.btn-eredmeny--megnyert {
  background: var(--success);
  color: #fff;
}
.btn-eredmeny--elveszett {
  background: var(--bg-card);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
  color: var(--error);
}
.btn-eredmeny--elveszett:hover {
  background: color-mix(in srgb, var(--error) 8%, var(--bg-card));
}

/* CSÚSZKA , két állás. FEHÉR lapon ül, a sáv maga halvány szürke, a felirat sötét, és
   MINDKÉT oldalon van ikon. Az aktív fél fehér lapkát kap kerettel és finom árnyékkal,
   tehát KIEMELKEDIK a sávból , ez mondja meg ránézésre, melyik van bekapcsolva.
   Miért nem teli narancs: a narancs a FŐ GOMBÉ. Ha egy kapcsoló is narancs, két
   egyforma hangsúly verseng egy képernyőn, és egyik sem nyer.
   Kettőnél több állásra NEM ez való, arra a nézet-váltó (.page-tabs) van. */
.app-csuszka {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.app-csuszka-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
.app-csuszka-opt i,
.app-csuszka-opt svg {
  width: 14px;
  height: 14px;
}
.app-csuszka-opt:hover {
  color: var(--text-primary);
}
/* Az aktív fél POZÍCIÓ szerint emelkedik ki, nem külön osztály szerint: így a jelölés
   nem tud elcsúszni a kapcsoló tényleges állásától. */
.app-csuszka[data-active='A'] .app-csuszka-opt:first-child,
.app-csuszka[data-active='B'] .app-csuszka-opt:last-child {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* OLDALVÁLTÓ , hosszú listák lapozója. MA SEHOL NEM LÉTEZIK a rendszerben.
   A középső rész SZÁMOKAT mutat, nem csak nyilakat: a „hányadik oldalon vagyok és
   mennyi van még" kérdésre a nyilak nem válaszolnak. A szélső gombok letiltva állnak
   az első és az utolsó oldalon, nem tűnnek el , az ugráló gombsor zavaró. */
.app-lapozo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.app-lapozo-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background 0.14s ease,
    border-color 0.14s ease;
}
.app-lapozo-gomb:hover:not(:disabled):not(.is-aktiv) {
  border-color: var(--border-strong);
  background: var(--bg-secondary);
}
.app-lapozo-gomb.is-aktiv {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  cursor: default;
}
.app-lapozo-gomb:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.app-lapozo-gomb i,
.app-lapozo-gomb svg {
  width: 15px;
  height: 15px;
}
/* A kihagyott oldalak jele. Nem gomb, nem kattintható. */
.app-lapozo-kihagy {
  padding: 0 2px;
  color: var(--text-tertiary);
  font-weight: 700;
}
/* „121 tétel · 13 oldal" , a lapozó mellett, hogy a szám ne csak a gombokból derüljön ki. */
.app-lapozo-info {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
}

/* ===== Emlékeztető-felugró (a telefonos jelzésről érkezés után) =====
   Egy kérdést tesz fel, ezért szűk és tipográfiával vezet: a tétel CÍME a főszereplő,
   alatta halkan az esedékesség, majd a magyarázat. */
.emlek-pop-cim {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.3;
}
.emlek-pop-mikor {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
}
.emlek-pop-sug {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
}

/* HALASZTÁS-GOMBSOR , a felugró TÖRZSÉBEN, nem a láblécben (2026-09-02).
   A lábléc a fő döntésé marad (Készre jelölöm / Rendben); négy gomb odatéve öt vezérlőt adna
   egy sorba, és a fontos elveszne a másodlagosak között. A gombok egyforma szélesek, hogy
   telefonon ne kelljen célozni. */
.emlek-pop-halaszt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.emlek-pop-halaszt-cim {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 600;
}
.emlek-pop-halaszt-sor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.emlek-pop-perc {
  padding: 9px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.emlek-pop-perc:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.emlek-pop-perc:disabled {
  opacity: 0.5;
  cursor: default;
}

/* =========================================================================
   AZ ARC (profilkép + monogram) , KÖZÖS OSZTÁLY, egy helyen.
   A rajzolót a `shared/arc.js` adja. Eddig három modul írta meg külön (Munkavállalók,
   Ügyfelek, CRM), és a monogram-számoló öt helyen élt , ezért lett közös.

   A méret HÍVÓNKÉNT állítható a `--arc-meret` változóval: a listában kicsi, a panelen nagy,
   de a rajz és a hiba-tartalék ugyanaz marad.
   ========================================================================= */
.app-arc {
  --arc-meret: 28px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--arc-meret);
  height: var(--arc-meret);
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  /* A monogram a mérettel együtt nő , fix betűmérettel egy 44 képpontos arcon elveszne. */
  font-size: calc(var(--arc-meret) * 0.36);
  font-weight: 700;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
/* A KÉP A MONOGRAM FÖLÉ kerül, nem helyette: ha nem tölthető be, a `kotArcTartalek()` kiveszi,
   és a monogram magától látszik , így sosem marad üres folt. */
.app-arc--kep img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   TÉTEL-PANEL , jobbról becsúszó olvasó és beszélgető felület
   =========================================================================
   IDE KÖLTÖZÖTT a `modules/feladatok/ui/styles.css`-ből (2026-08-13), mert a panelt
   (`shared/tetel-panel.js`) azóta a Naptár is nyitja. A Naptár nem tölti be a Feladatok
   modul-lapját, tehát ott a panel stílus nélkül, csupasz szövegként jelent volna meg.
   Az osztály-előtag ezért `fel-` helyett `tetel-`: a panel már nem csak feladatot mutat.
   ========================================================================= */
/* =========================================
   FELADAT-PANEL , jobbról becsúszó olvasó és beszélgető felület (2026-08-01)
   =========================================
   Nem takarja el a táblát: a kártya-oszlopok mellette maradnak, tehát több feladatot lehet
   egymás után átnézni anélkül, hogy elveszne a hely. A háttér halványan sötétedik, hogy a
   figyelem a panelre kerüljön, de a kontextus látható maradjon.
   ========================================= */
.tetel-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  pointer-events: none;
}
.tetel-panel-hatter {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 41, 0);
  transition: background 0.22s ease;
  pointer-events: auto;
}
.tetel-panel.is-nyitva .tetel-panel-hatter {
  background: rgba(15, 23, 41, 0.18);
}
.tetel-panel-lap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* SZÉLESEBB 40 KÉPPONTTAL a közös felugró-méretnél (PO, 2026-08-12).
     A ház alap-mérete a `--slideover-w`, és a mozdulat is ugyanaz , de ez a panel TÖBBET visz,
     mint egy átlagos felugró: tény-rács, leírás, teljes előzmény-idővonal ÉS megjegyzés-író,
     egymás alatt. Laptop-szélességen (1440-en 460 képpont volt) ettől szorult a tartalom, és
     a hosszabb nevek meg a két soros értékek tördeltek. A 100vw-korlát megmarad, tehát
     telefonon továbbra sem lóg ki. */
  /* ALSÓ KORLÁT: a lábléc három gombja EGY SORBAN férjen el (PO, 2026-08-12).
     Lemérve: „Késznek jelöl" + „Napolás" + „Szerkesztés" ikon nélkül 384 képpont, ikonokkal
     nagyjából 450, a 16 képpontos oldal-paddinggal együtt. A közös `--slideover-w` laptopon
     (1280-as ablaknál) 410-et ad, +40-nel 450-et , épp a határon, ezért tört két sorba.
     Az 520-as korlát nem esztétika: a lábléc a panel egyetlen cselekvő sávja, és ha az
     „Szerkesztés" külön sorba esik, a felhasználó azt hiszi, kevesebbet tud, mint amennyit. */
  width: min(max(520px, calc(var(--slideover-w) + 40px)), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(15, 23, 41, 0.1);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.tetel-panel.is-nyitva .tetel-panel-lap {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .tetel-panel-lap {
    transition: none;
  }
}

.tetel-panel-fej {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.tetel-panel-cim {
  flex: 1 1 auto;
  min-width: 0;
}
.tetel-panel-cim h3 {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.tetel-panel-torzs {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/* =========================================================================
   PANEL-TARTALOM , a feladatok-koncept `jp-` blokkja, a ház tokenjeire fordítva.

   A sorrend a koncepté, és az indoklása is: „aki rákattint egy feladatra, három kérdésre vár
   választ , mi a dolgom, kitől kaptam, mi történt eddig", és ez felülről lefelé, a
   leggyakrabban nézett dologgal legfelül.
   ========================================================================= */
.tetel-panel-torzs .jp-cim {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
/* „KITŐL KAPTAD" , mondat, nem tény-sor, és a tények FÖLÖTT áll: ez az egyetlen adat, ami
   megmondja, kinek tartozol elszámolással. */
.jp-kitol {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
}
.jp-kitol b {
  font-weight: 600;
  color: var(--text-primary);
}
.jp-kitol svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
/* TÉNY-RÁCS: a címkék EGY oszlopban futnak, tehát a szem nem keresgél. */
/* A TÉNY-RÁCS SORAI ELVÁLNAK EGYMÁSTÓL (PO, 2026-08-12).
   Eddig a címkék és az értékek egyetlen sűrű blokknak látszottak, és nem lehetett ránézésre
   megmondani, hol ér véget az egyik adat és hol kezdődik a másik , főleg ott, ahol az érték
   két sorba tört. A hajszálvékony elválasztó nem dísz: SZERKEZETET mutat.
   `grid-template-columns` helyett most soronkénti rács, hogy a vonal végigfusson. */
.jp-tenyek {
  display: grid;
  grid-template-columns: 96px 1fr;
  /* `stretch`, NEM `start` (PO, 2026-08-12: „kicsit szét van csúszva").
     A vonalat cellánként rajzoljuk, és `start` mellett a címke-cella alacsonyabb volt, mint
     az érték-cellája , a két vonal így KÜLÖNBÖZŐ magasságban állt, és tört sorokat mutatott.
     `stretch` esetén a páros cellák egyforma magasak, tehát a vonal egyenesen fut végig. */
  align-items: stretch;
}
.jp-tenyek > * {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
/* AZ UTOLSÓ SOR ALATT IS VAN VONAL (PO, 2026-08-12: „a leírás és a projekt közé is rakj").
   Korábban elhagytam, mert azt hittem, a szakasz vége úgyis látszik. Nem látszott: a Projekt
   és a Leírás közvetlenül egymás alá esett, és ugyanannak a listának tűntek. */
.jp-tenyek > *:nth-child(-n + 2) {
  padding-top: 0;
}
/* ITT NINCS `align-self: start`, és ez SZÁNDÉKOS.
   Egyszer beleírtam, és pont attól csúszott szét újra: az `align-self` FELÜLÍRJA a rács
   `stretch`-ét, tehát a címke-cella megint alacsonyabb lett az érték-cellánál, és a két
   border-bottom két különböző magasságba került. A cella nyugodtan nyúljon: a címke szövege
   attól még a cella tetején marad, mert blokk-elem. (2026-08-12, két nekifutásból.) */
/* A CÍMKÉK SÖTÉTEBBEK (PO-kérés): a `--text-tertiary` annyira halk volt, hogy a mezőnevek
   alig látszottak, holott épp ők adják a tájékozódást. Másodlagos szintre emeltem, a
   nagybetűs szedés és a betűköz marad , attól maradnak címkék, nem adattá válva. */
.jp-cimke {
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.jp-ertek {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.jp-ertek.riaszt {
  color: var(--error-ink);
}
.jp-ertek.halk {
  font-weight: 500;
  color: var(--text-tertiary);
}
/* TÖBB FELELŐS: arccal és névvel, EGYMÁS ALATT. A kártyán szűk a hely, itt nem , és a panel
   pont attól panel, hogy kiderül, amit a kártya elrejtett („és még 2 fő"). */
.jp-emberek {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.jp-ember {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.jp-ember .tetel-panel-ava {
  width: 24px;
  height: 24px;
}
.jp-ember small {
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
/* HIVATKOZÁS a projektre és az ügyfélre , a panel nem zsákutca. */
.jp-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jp-link:hover {
  border-bottom-color: var(--text-primary);
}
.jp-link svg {
  width: 13px;
  height: 13px;
  color: var(--text-tertiary);
}
/* HIÁNYZÓ KÖTÉS: üres hely nem marad. Az üres hely azt sugallná, hogy a FELÜLETRŐL hiányzik
   valami, holott az ADATBÓL hiányzik , ezért kimondjuk, és adunk mellé egy halk gombot. */
.jp-nincs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.jp-nincs > span {
  font-weight: 500;
  color: var(--text-tertiary);
}
/* A PANEL LEKEREKÍTÉSEI A HÁZ-RENDSZERT KÖVETIK (PO, 2026-08-12: „legyenek egységesek").
   A rendszer szerint (feedback_ui_radius_system) a gomb és a kártya ~10px, a chip pirula. A
   panel ettől eltért: 4px-es (`--radius-sm`) sarkokat használt, ami sem az egyikbe, sem a
   másikba nem tartozott , ettől nézett ki „félig lekerekítettnek". A `jp-mini` és a gyors
   mondatok CHIPEK, tehát pirulát kapnak; a beíró-mező mezőnek számít, az 10px. */
.jp-mini {
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.jp-mini:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
/* A leírás és a megjegyzés-író is SZAKASZ lett, saját címmel , eddig a leírás cím nélkül
   lógott a tények alatt, és nem lehetett tudni, mi az. */
.jp-szakasz {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* A cím melletti halk kísérő-mondat: megmondja, mi történik azzal, amit a mezőbe írsz. */
.jp-halk {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--text-tertiary);
}
.jp-leiras {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jp-leiras.ures {
  color: var(--text-tertiary);
}
/* A SZAKASZ-CÍMEK IS SÖTÉTEBBEK (Leírás, Előzmény, Megjegyzés). Ugyanaz a szint, mint a
   tény-címkéké, hogy a panelen EGYFÉLE címke-hang legyen, ne kettő. */
.jp-szakasz-cim {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.jp-szakasz-cim span {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
/* Az ELŐZMÉNY és a VÁLASZ külön sávban ül, halk háttéren: ez már nem a feladat leírása,
   hanem az, ami körülötte történt. */
.jp-elozmeny,
.jp-szal {
  margin: 0 -16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.jp-elozmeny {
  padding-bottom: 4px;
}
.jp-gyors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.jp-iro {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.jp-mezo {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); /* mező = 10px, a ház-rendszer szerint */
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-sm);
  line-height: 1.4;
  resize: vertical;
}
.jp-mezo::placeholder {
  color: var(--text-tertiary);
}

/* =========================================================================
   ELŐZMÉNY-IDŐVONAL (`iv-`) , az életút és a beszélgetés EGY szálon, időrendben.

   A GERINC SEMLEGES, A PONT BESZÉL: a vonal hajszálvékony és színtelen, a színt a pötty
   viszi , de minden bejegyzés mellett ott a MONDAT is, tehát a szín soha nem hordoz
   egyedül jelentést.
   ========================================================================= */
.iv {
  display: grid;
}
.iv-sor {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
}
.iv-bal {
  position: relative;
  display: flex;
  justify-content: center;
}
.iv-bal::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -2px;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--border);
}
.iv-sor:first-child .iv-bal::before {
  top: 8px;
}
.iv-sor:last-child .iv-bal::before {
  display: none;
}
/* A PONT a vonal FÖLÖTT ül (`z-index`), különben a gerinc átvágná , ugyanaz a hiba, ami „A
   mai napom" idővonalán is előjött. A gyűrű a háttér színe, hogy a vonal ne érjen hozzá. */
.iv-pont {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--border-strong);
  box-shadow: 0 0 0 3px var(--bg-secondary);
}
.iv-sor.kezdet .iv-pont {
  background: var(--text-tertiary);
}
.iv-sor.latta .iv-pont {
  background: var(--info-ink);
}
.iv-sor.uzenet .iv-pont {
  background: var(--primary);
}
.iv-sor.lezaras .iv-pont {
  background: var(--success-ink);
}
.iv-torzs {
  min-width: 0;
  padding-bottom: 13px;
}
.iv-fej {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.iv-mikor {
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.iv-cim {
  font-size: var(--font-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.iv-cim b {
  font-weight: 700;
  color: var(--text-primary);
}
.iv-uzenet {
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A LEZÁRÁS zöld hátteret kap és a szál végén áll, mert ez a munka EREDMÉNYE. */
.iv-sor.lezaras .iv-uzenet {
  background: var(--success-bg);
  color: var(--success-ink);
}
/* Az összecsukó a rács GYEREKE, ezért teljes szélességre nyúlna , kis gomb, nem sáv. */
.tetel-panel-regebbi {
  justify-self: start;
  margin-bottom: 12px;
}
.tetel-panel-ava {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.tetel-panel-kesz {
  color: var(--success);
}
.tetel-panel-halk {
  color: var(--text-tertiary);
  font-style: italic;
}

/* LÁBLÉC , a gyors műveletek. Azért itt vannak, hogy ne kelljen szerkesztőt nyitni ahhoz,
   hogy valaki késznek jelöljön vagy elhalasszon egy feladatot. */
.tetel-panel-lab {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

@media (max-width: 560px) {
  .tetel-panel-lap {
    width: 100vw;
    border-left: 0;
  }
}

/* ── EGÉR-KÖVETŐ BUBORÉK (shared/buborek.js) ─────────────────────────────────
   A natív `title=""` helyett: rendszer-független kinézet, állítható késleltetés, két sor,
   és téma-követés. Ugyanaz a vizuális nyelv, mint az ikonsáv buborékjáé (sötét lap, azonos
   sugár és árnyék), de az egeret követi , ezért nincs mutató-nyila: az egér maga a mutató. */
.app-buborek {
  position: fixed;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 280px;
  padding: 7px 11px;
  background: #15171c;
  color: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  /* A `title` sortöréseit (\n) MEGTARTJA , a natív buborék is így viselkedik, és több soros
     magyarázatnál ez a különbség olvasható és olvashatatlan között. */
  white-space: pre-line;
  text-align: left;
  /* NEM fogja el az egeret: különben a buborék alá kerülve önmagát oltaná ki, és villogna. */
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.1s ease,
    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
/* NYÍL , CSAK a horgony-módban. Az egér-követő buborék mellé nem való: ott az egér maga
   mutatja, mihez tartozik. A nyíl vízszintes helyét a JS adja (`--nyil-x`), mert a buborék a
   képernyő szélénél elcsúszik az elem közepétől , a nyílnak viszont a helyén kell maradnia,
   különben rossz cellára mutat. */
.app-buborek.is-horgony::after {
  content: '';
  position: absolute;
  left: var(--nyil-x, 50%);
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.app-buborek.is-horgony.is-fent::after {
  bottom: -3px;
}
.app-buborek.is-horgony.is-lent::after {
  top: -3px;
}
.app-buborek.is-lathato {
  opacity: 1;
  transform: translateY(0);
}
.app-buborek-cim {
  font-size: var(--font-sm);
  font-weight: 700;
  line-height: 1.25;
}
.app-buborek-tx {
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}
@media (prefers-reduced-motion: reduce) {
  .app-buborek {
    transition: none;
  }
}

/* =========================================
   SZABADSÁG-KERET JELZŐ  (.app-vac-*)
   A `shared/szabadsag-sav.js` renderelője használja. Lásd ott a MIÉRT-eket , röviden:
   a szám és a sáv is a MARADÉKOT mutatja, és a skála FORDÍTOTT (sok maradék = zöld).
   ========================================= */
.app-vac-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.app-vac-ures {
  color: var(--text-tertiary);
}
.app-vac-bar {
  display: block;
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
  overflow: hidden;
}
.app-vac-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}

/* A FOKOZAT SZÍNE a `color`-ban ül, és a sáv kitöltése `currentColor` , így a szám és a csík
   egyetlen helyről kapja a színt, nem tud széttartani.
   Zöld → sárgászöld → sárga → narancs → piros → szürke. A lépcsők szándékosan nem a nyers
   `--success`/`--error` tokenek: azok jelzés-színek (jóváhagyva / hiba), itt viszont egy
   FOLYTONOS skála kell, aminek középső fokozatai is vannak. */
.app-vac--bo {
  color: #16a34a;
}
.app-vac--rendben {
  color: #65a30d;
}
.app-vac--fele {
  color: #ca8a04;
}
.app-vac--fogyoban {
  color: #ea580c;
}
.app-vac--keves {
  color: #dc2626;
}
/* Elfogyott: SZÜRKE, nem piros , lezárt állapot, nincs mit tenni vele. */
.app-vac--elfogyott {
  color: var(--text-tertiary);
}
/* Túllépve: piros ÉS vastagabb szám , ez az egyetlen eset, ami tényleg beavatkozást kér. */
.app-vac--tullepve {
  color: #b91c1c;
  font-weight: 700;
}

/* =====================================================================
   NAGY KIJELZŐS NAGYÍTÁS , KÍSÉRLET (PO, 2026-08-17)
   =====================================================================
   A PROBLÉMA. 2K és nagyobb monitoron az egész felület aprónak hat. Nem azért, mert a betű
   fizikailag kisebb (nem az), hanem mert a nagy monitortól MESSZEBB ülünk, mint a laptoptól:
   ugyanaz a milliméter kisebb szögben látszik. Ezért nem elég egy-két képpontot emelni.

   MIÉRT `zoom`, ÉS NEM TOKEN-EMELÉS. Először a betű-tokeneket akartam nagyítani, de megmértem:
   a méretezhető helyek ~26%-a NEM tokent használ, hanem kézzel írt képpontot (összesen ~5400
   px-érték a CSS-ekben). Token-emeléssel tehát a betű nőne, a mellette lévő kézzel írt térköz
   viszont nem , az arányok szétcsúsznának, és pont a „letisztult" jelleg veszne el.

   A `zoom` MINDENT arányosan nagyít: betűt, térközt, keretet, ikont, a kézzel írt képpontokat
   is. Pontosan az, amit a böngésző nagyítója csinál , csak nem a felhasználónak kell
   beállítania minden gépen külön.

   AMIT TUDNI KELL RÓLA:
     , a média-lekérdezések a NYERS szélességgel számolnak, nem a nagyítottal. Ezért a
       töréspont (1600px) a valódi képernyőn dől el, és a nagyítás nem hat vissza rá , nincs
       oda-vissza billegés a határ közelében.
     , laptopon (1600 alatt) NEM lép be. Ott a hely a szűk, nem az olvashatóság.
     , egyetlen érték, egyetlen helyen. Ha nem válik be, ez a blokk törlendő , nincs mit
       visszabontani huszonkilenc modulban.

   KÉT LÉPCSŐ (PO-döntés, 2026-08-17), és ez a teljes szabály-készlet , nincs mögötte
   duplikált stílus, csak két nagyítási arány:

     1800 képponttól   →  1,10   full HD (1920) és a nagyobb laptopok
     2000 képponttól   →  1,20   2K (2560) és fölötte

   A LAPTOP KIMARAD. 1800 alatt semmi nem változik: egy 1440-1512 képpontos laptopon ott a hely
   a szűk, nem az olvashatóság , ha ott is nagyítanánk, kevesebb adat férne a képernyőre.

   A SORREND SZÁMÍT: a két feltétel 2000 fölött EGYSZERRE igaz, és ilyenkor a KÉSŐBBI nyer,
   tehát 1,20 lép életbe. Ezért áll a nagyobb érték hátul , megcserélve mindenhol 1,10 lenne.

   4K-VAL NEM KELL KÜLÖN FOGLALKOZNI: ott az operációs rendszer amúgy is átskáláz (macOS 200%,
   Windows jellemzően 150%), tehát a böngésző nem lát 3840 CSS-képpontot , a 4K ugyanabba a
   sávba esik, mint a 2K, és ugyanazt a 20%-ot kapja.

   AMIT A NAGYÍTÁS ELVESZ: hasznos helyet. 1,2-nél a 2560 képpontos monitor úgy viselkedik,
   mint egy ~2130 képpontos. Ezért érdemes a széles nézeteket (Feladatok táblázat, Kimutatások,
   a Munkarend 12 hónapos rácsa) külön megnézni, mielőtt feljebb mennénk. */
/* NEM MÉDIA-LEKÉRDEZÉS, HANEM A FIZIKAI KÉPERNYŐ (javítva 2026-08-31, PO-hibajelentés).
   A `@media (min-width: …)` azt kérdezi, HÁNY CSS-PIXEL SZÉLES AZ ABLAK , és ez a böngésző-
   zoomtól függ. Kifelé zoomoláskor a CSS-pixel zsugorodik, tehát TÖBB fér el, vagyis a mért
   szélesség NŐ: egy 1512 képpontos laptop 80%-on 1890-et, 75%-on 2016-ot mond magáról.
   Emiatt a nagyítás PONTOSAN AKKOR kapcsolt be, amikor a felhasználó kizoomolt , vagyis épp
   az ellenkezőjét csinálta annak, amit kért. Ráadásul a `zoom` felszorozza a lebegő rétegek
   koordinátáit is, ezért a naptár a megnyitó gombtól elcsúszva, lejjebb jelent meg.
   A `screen.width` viszont a FIZIKAI képernyőt adja, és a böngésző-zoom NEM befolyásolja:
   a laptop 1512-t mond 100%-on és 75%-on is. Ezt olvassa ki a `shared/kepernyo-lepteke.js`,
   és teszi ki jelzőnek a gyökér-elemre. A küszöbök változatlanok. */
html[data-kepernyo-leptek='1'] body {
  zoom: 1.1;
}
html[data-kepernyo-leptek='2'] body {
  zoom: 1.2;
}

/* =========================================
   DOKKOLT LEVÉLÍRÓ  (shared/levelizo.js)
   A jobb alsó sarokban ül, a lap fölött. Nem modális: írás közben látszik alatta a szál,
   és a lap többi része használható marad. Egyszerre egy lehet nyitva (PO-döntés D2).
   ========================================= */
.lev-dokk {
  position: fixed;
  right: 24px;
  bottom: 0;
  z-index: 900; /* a felugró ablak (modal) fölé NE menjen, a lap fölé igen */
  /* SZÉLESSÉG 460 → 620 (PO, 2026-08-25: „laptopon nem olyan túl nagy, de lehetne nagyobb is
     a felület"). A 460 még abból az időből maradt, amikor a levélíró csak néhány soros gyors
     válasz volt; azóta van benne formázás, sablon és aláírás, tehát valódi levelet írunk
     benne. A felső korlát viszont MEGMARAD: a dokk attól dokk, hogy alatta látszik a szál,
     és a lap többi része használható , 1440-en a 620 a szélesség 43%-a. */
  width: min(620px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lev-fej {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.lev-fej i,
.lev-fej svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--text-tertiary);
}
.lev-cim {
  font-size: var(--font-sm);
}
.lev-sp {
  flex: 1;
}
.lev-ikon {
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}
.lev-ikon:hover {
  background: var(--bg);
  color: var(--text-primary);
}
/* ÖSSZECSUKVA csak a fejléc-csík marad , ott van, de nem takar. */
.lev-dokk.is-csukva .lev-torzs {
  display: none;
}
/* AZ ÖSSZEGZŐ (kinek · miről) CSAK összecsukva látszik: nyitva ugyanez ott áll a mezőkben.
   Egy soros és levágott, mert a csík szélessége kötött , a lényeg, hogy felismerd, melyik
   levél vár befejezésre, nem az, hogy elolvasd a teljes tárgyat. */
.lev-osszegzo {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}
.lev-dokk.is-csukva .lev-osszegzo {
  display: block;
}
/* Összecsukva az EGÉSZ csík kapcsol, ezért mutassa is, hogy kattintható. Nyitva a fejléc nem
   kapcsol , különben a cím véletlen megkattintása összecsukná a félig megírt levelet. */
.lev-dokk.is-csukva .lev-fej {
  cursor: pointer;
  border-bottom: 0;
}
.lev-torzs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  /* 62vh → 68vh: a magasabb szerkesztő-mezővel a törzs 62vh-nál épp görgetni kezdett volna
     ALAPMÉRETBEN is , az pedig rosszabb, mint egy kicsit magasabb ablak, mert a Tárgy sor
     csúszna ki a képből gépelés közben. Mérve 800 képpontos ablakon. */
  max-height: 68vh;
  overflow-y: auto;
}
.lev-mezo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lev-mezo > span {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  font-weight: 600;
}
.lev-torzs input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-sm);
}
/* FÓKUSZ a ház szabványa szerint: akcentusos keret, nem a böngésző kék alapértelmezettje
   (ugyanaz, mint a .crm-inp:focus). A kék gyűrű idegen elem lenne a narancs felületen. */
.lev-torzs input:focus,
.lev-szerk:focus {
  outline: none;
  border-color: var(--primary);
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   LEVÉLÍRÓ , SZÖVEGFORMÁZÁS (PO-kérés, 2026-08-24)

   A szövegdobozból SZERKESZTHETŐ TÖRZS lett, hogy a félkövér félkövérnek is látszódjon írás
   közben. Kívülről ugyanúgy néz ki, mint egy szövegdoboz: ugyanaz a keret, ugyanaz a fókusz,
   ugyanaz a minimum-magasság , a felhasználónak nem kell tudnia, hogy más elem lett.
   ════════════════════════════════════════════════════════════════════════════════════════ */
.lev-eszkozsav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.lev-eszkoz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.lev-eszkoz:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
/* A BENYOMOTT ÁLLAPOT nem csak szín: kitöltött háttér ÉS erős szöveg-szín. Egy 26 képpontos
   ikonnál a puszta színváltás nem olvasható jelzés. */
.lev-eszkoz.is-aktiv {
  background: color-mix(in srgb, var(--primary) 16%, var(--bg-card));
  color: var(--primary-dark);
}
.lev-eszkoz:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 1px;
}
.lev-eszkoz svg {
  width: 15px;
  height: 15px;
}
.lev-szerk {
  width: 100%;
  /* 120 → 240: a szerkesztő-mező a levélíró LÉNYEGE, a többi sor csak címzés. 120 képpont
     nagyjából öt sor , egy bekezdésnyi levél már nem fért ki, tehát írás közben görgetni
     kellett a saját szövegedben. ALSÓ HATÁRRAL, mert fix 240-nél egy 720 képpont magas
     laptopon a törzs görgetni kezdett alapméretben is (mérve: 11 képponttal lógott túl). */
  min-height: clamp(160px, 30vh, 240px);
  max-height: 40vh;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--font-sm);
  line-height: 1.55;
  overflow-y: auto;
  overflow-x: hidden;
  /* A HOSSZÚ, SZÓKÖZ NÉLKÜLI SZÖVEG (hivatkozás, azonosító) NE TÖRJE SZÉT az ablakot , a
     dokkolt levélíró fix szélességű, ott nincs hova kilógni. */
  overflow-wrap: anywhere;
}
/* HELYŐRZŐ szerkeszthető törzsben: a `placeholder` itt nem működik, ezért az üres állapotot
   magunk írjuk ki. A `:empty` csak akkor talál, ha tényleg semmi nincs benne. */
.lev-szerk:empty::before {
  content: attr(data-helyorzo);
  color: var(--text-tertiary);
  pointer-events: none;
}
/* A FORMÁZÁS MEGJELENÉSE a szerkesztőben , ugyanaz, ami a levélben lesz. A `big` a „nagyobb
   betű": itt is egy fokozat, nem a böngésző alapértelmezett nagyítása. */
.lev-szerk big {
  font-size: 1.18em;
}
.lev-szerk ul,
.lev-szerk ol {
  margin: 4px 0;
  padding-left: 22px;
}
.lev-szerk li {
  margin: 2px 0;
}
.lev-alairas {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  white-space: pre-wrap;
}
.lev-alairas-cim {
  display: block;
  margin-bottom: 3px;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lev-fajlok:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lev-fajl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--font-xs);
}
.lev-fajl i,
.lev-fajl svg {
  width: 13px !important;
  height: 13px !important;
}
.lev-fajl-x {
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.lev-gombok {
  display: flex;
  gap: 8px;
}

/* MOBILON NEM DOKKOL, hanem teljes szélességű alsó lap (SDD R3.6): egy 460 képpontos
   lebegő ablak a telefon képernyőjének a felét elvenné, és a szél alá lógna. */
@media (max-width: 900px) {
  .lev-dokk {
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
  }
  .lev-torzs {
    max-height: 70vh;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* =========================================
   VARÁZSLÓ , KÖZÖS LÉPÉS-SÁV (.app-varazslo, shared/varazslo.js)

   A lépés-sáv nem díszítés: három kérdésre felel egyszerre. Hol vagyok, mi van még hátra, és
   mi az, amihez most nem férek hozzá. A harmadik a legfontosabb, és ezt szokták elfelejteni.

   A ZÁROLT LÉPÉS SZÜRKE, NEM SÁRGA. A ház szabálya szerint a sárga azt jelenti, hogy tenned kell
   valamit; a zárolt lépésnél viszont nincs teendőd, és nincs is baj , az a lépés egyszerűen még
   nem elérhető. Ez ÁLLAPOT, nem figyelmeztetés. Ezért lakat + a „mentés után" SZÓ + halk szürke:
   három réteg, és a szín soha nem áll egyedül.
   ========================================= */
.app-varazslo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 0 var(--space-md);
}
.app-varazslo-lepes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--felulet-keret);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
}
.app-varazslo-lepes:hover:not(.is-zarolt) {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
/* AZ AKTÍV LÉPÉS a ház akcentjét viseli, de csak a KERET és a szám , a kitöltött narancs pirula
   a fő gomb dolga, és ha itt is az lenne, két „legfontosabb" elem versenyezne a soron. */
.app-varazslo-lepes.is-aktiv {
  border-color: var(--primary);
  color: var(--text-primary);
}
.app-varazslo-szam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--neutral-bg);
  color: var(--neutral-ink);
  font-size: 12px;
  font-weight: 700;
}
.app-varazslo-lepes.is-aktiv .app-varazslo-szam {
  background: var(--primary);
  color: #fff;
}
.app-varazslo-lepes.is-zarolt {
  background: var(--neutral-bg);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.app-varazslo-lepes.is-zarolt i,
.app-varazslo-lepes.is-zarolt svg {
  width: 14px;
  height: 14px;
}
.app-varazslo-allapot {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-tertiary);
}
/* Telefonon a sáv oldalra görgethető, és a KÖVETKEZŐ lépés széle KILÁTSZIK , ha a sor szépen a
   képernyő szélén érne véget, senki nem sejtené, hogy van folytatás. */
@media (max-width: 768px) {
  .app-varazslo {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 24px;
  }
  .app-varazslo-lepes {
    flex: 0 0 auto;
  }
}

/* =========================================================================
   ADATLAP-KÁRTYÁK , KÖZÖS (2026-09-01)
   Egy rekord adatlapján a mezők SZAKASZ-KÁRTYÁKBA rendeződnek: ikon + cím, alatta
   címke-érték párok, és a kártya alján egy számláló, ha van kitöltetlen mező.

   MIÉRT ITT, ÉS NEM A MODULBAN. Ez a minta a Munkavállalók adatlapján született (2026-07-26),
   és az Eszközök is ezt kapta , két modul, egy formanyelv. Ha másolnánk, előbb-utóbb
   szétcsúszna: az egyik kártya 12 képpontos sarkot kapna, a másik 10-et, és senki nem tudná,
   melyik a helyes. A `mv-*` nevek AZ ELSŐ HASZNÁLÓ nevei; a `app-adatlap-*` a modul-független
   párjuk. Új modul MÁR CSAK az utóbbit használhatja.

   A KÁRTYA-MAGASSÁG SORONKÉNT EGYFORMA (align-items: stretch), és a hiány-számláló
   `margin-top: auto`-val alulra ül , így a szomszédos kártyák alja egy vonalban fut.
   ========================================================================= */
.mv-view-section,
.app-adatlap-szakasz {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-view-field,
.app-adatlap-mezo {
  display: flex;
  gap: var(--space-md);
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.mv-view-field:last-child,
.app-adatlap-mezo:last-child {
  border-bottom: none;
}
.mv-view-label,
.app-adatlap-cimke {
  flex: 0 0 150px;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}
.mv-view-value,
.app-adatlap-ertek {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.mv-todo,
.app-adatlap-hiany {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warning, #b45309);
}
.mv-detail-cards,
.app-adatlap-racs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  /* EGYFORMA KÁRTYA-MAGASSÁG soronként (stretch): a rács szélei egy vonalban futnak,
     ettől lesz rendezett a lap. A kártya belül oszlop-flex, és a „pótlásra vár" számláló
     margin-top:auto-val ALULRA ül , így az is egy vonalban van a szomszéd kártyáéval. */
  align-items: stretch;
}
.mv-detail-cards .mv-view-section,
.app-adatlap-racs .app-adatlap-szakasz {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mv-detail-cards .mv-todo,
.app-adatlap-racs .app-adatlap-hiany {
  margin-top: auto;
  padding-top: 10px;
}
.mv-section-title,
.app-adatlap-cim {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mv-section-title svg,
.app-adatlap-cim svg {
  width: 15px;
  height: 15px;
}

/* A HIÁNYZÓ MEZŐ TEENDŐ, NEM ÜRES HELY , áthúzott címke + dőlt „nincs megadva". */
/* A SZAKASZ-CÍM A RÁCSBAN nem nagybetűs és nem ritkított: úgy ugyanolyan hangos lenne, mint
   maga az adat. (Ugyanaz a javítás, mint a bejelentkező oldal szemöldök-szövegénél.) */
.mv-view-field.is-empty .mv-view-label,
.app-adatlap-mezo.is-empty .app-adatlap-cimke {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
}
.mv-view-field.is-empty .mv-view-value,
.app-adatlap-mezo.is-empty .app-adatlap-ertek {
  font-style: italic;
  font-weight: 500;
  color: var(--text-tertiary);
}
.mv-detail-cards .mv-section-title,
.app-adatlap-racs .app-adatlap-cim {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 14px;
  font-weight: 640;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* AZ ADATLAP FEJLÉC-SORA CSENDES: sima sor, NEM kártya. Kerettel és háttérrel egy második
   dobozként ülne a tartalom-kártyák fölött, és két „lap" versenyezne a figyelemért , a
   fejléc dolga az, hogy megmondja, hol vagy, nem az, hogy hangsúlyos legyen. */
.mv-detail-head,
.app-adatlap-fej {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
}

/* ══ TÁVOLLÉT-PANEL (shared/tavollet-panel.js) ═══════════════════════════════════════════
   Egy blokk, két helyről nyitva: Kapacitásterv és Szabadság Csapat fül. Külön megírva azonnal
   elcsúszott (más gomb-helyzet, hiányzó keret, eltérő betűméret), ezért került közösbe. */
.tav-panel-nev {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.tav-panel-sor {
  margin: 0 0 2px;
  font-size: var(--font-base);
  color: var(--text-secondary);
}
.tav-panel-napok {
  margin: 10px 0 0;
  font-size: var(--font-base);
  color: var(--text-primary);
}
.tav-panel-megj {
  margin: 10px 0 0;
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* A LEZÁRT ESET MAGYARÁZATA. Egy hiányzó gomb magától nem mond semmit, ezért kimondjuk, miért
   nem törölhető és hol lehet mégis. */
.tav-panel-zar {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   KAPCSOLAT-SÁV , A FEJLÉC ALATT, CSAK AKKOR, HA BAJ VAN (2026-09-04)

   ELŐZMÉNY: először a fejlécben volt. A PO jelezte, hogy kis monitoron és laptopon a keresővel
   együtt összenyomódik , vagyis pont ott mondott csődöt, ahol a legnagyobb szükség lenne rá.
   Teljes szélességű sávban elfér a hiba ÉS a teendő is, nem csak egy szó.

   A megszakadt élő kapcsolat tünete a SEMMI: az elavult lista ugyanúgy néz ki, mint a friss.
   Ez a sáv teszi láthatóvá.

   HÁROM RÉTEG: jel (! vagy ✓), szó (cím + teendő) és csak harmadikként halvány szín. A szín
   soha nem áll egyedül , ez a ház szabálya.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
.app-kapcsolat-sav {
  grid-area: kapcsolat;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px var(--space-lg);
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.4;
}

.app-kapcsolat-sav[hidden] {
  display: none;
}

.app-kapcsolat-jel {
  flex: none;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

/* A CÍM ÉS A TEENDŐ EGY SORBAN, széles képernyőn. A cím mondja meg, MI VAN, a teendő azt, hogy
   MIT JELENT , enélkül a felhasználó tudja, hogy baj van, de nem tudja, számít-e neki. */
.app-kapcsolat-szoveg {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: baseline;
  min-width: 0;
}

.app-kapcsolat-cim {
  font-weight: 700;
}

.app-kapcsolat-teendo {
  opacity: 0.85;
}

.app-kapcsolat-gomb {
  flex: none;
  min-height: 32px;
  margin-left: auto;
  padding: 5px 13px;
  background: transparent;
  border: 1px solid currentcolor;
  border-radius: 999px;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.app-kapcsolat-gomb[hidden] {
  display: none;
}

/* ÚJRACSATLAKOZÁS , semleges, mert ez a hétköznapi eset (alagút, WiFi-váltás, ébredés).
   Ha ezt riasztásnak festenénk, a jelzés zajjá válna, és a felhasználó megtanulná átnézni rajta. */
.app-kapcsolat-sav.is-ujra {
  background: color-mix(in srgb, var(--text-secondary) 10%, var(--bg));
  color: var(--text-secondary);
}

/* HALOTT , itt már érdemes cselekedni, ezért kap figyelmeztető színt és gombot. */
.app-kapcsolat-sav.is-halott {
  background: color-mix(in srgb, #b54708 10%, var(--bg));
  color: #b54708;
}

/* HELYREÁLLT , rövid, pozitív visszaigazolás. Enélkül a sáv csak eltűnne, és a felhasználó nem
   tudná, hogy a kapcsolat állt-e helyre, vagy a jelzés romlott el. */
.app-kapcsolat-sav.is-rendben {
  background: color-mix(in srgb, #1f6b4a 10%, var(--bg));
  color: #1f6b4a;
}

/* TELEFONON a cím és a teendő egymás alá kerül, és a gomb sem szorul ki a képernyőről. */
@media (max-width: 560px) {
  .app-kapcsolat-sav {
    align-items: flex-start;
    padding: 9px var(--space-md);
    font-size: 13px;
  }

  .app-kapcsolat-szoveg {
    flex-direction: column;
    gap: 2px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   LEBEGŐ RÉTEGEK , TELEFONON NE LÓGJANAK KI A KÉPERNYŐBŐL (PO-bejelentés, 2026-09-04)

   „a szűrő és minden lenyílónál ne lóghasson túl a képernyőn"

   AZ OK. Ezek a rétegek a gomb jobb széléhez igazodva nyílnak (`right: 0`), és balra nőnek.
   Gépen ez helyes: a vezérlők a polc jobb szélén állnak, tehát befelé van hely. Telefonon
   viszont a 230 képpontos legkisebb szélesség plusz a gomb helye már túlnyúlik a bal élen, és
   mivel a tartalom-terület vízszintesen zárva van, a kilógó rész NEM görgethető, hanem
   LEVÁGÓDIK. A felhasználó annyit lát, hogy a lista fele hiányzik.

   A KORLÁT AZ ABLAK SZÉLESSÉGE, MÍNUSZ A TARTALOM KÉT OLDALI TÉRKÖZE (2×16). Így a jobb
   szélhez igazított réteg bal éle pontosan a tartalom bal élére esik, se beljebb, se kijjebb.

   MIÉRT A FÁJL VÉGÉN. Ezek a szabályok FELÜLÍRNAK korábbi, azonos fajsúlyú szabályokat
   (`min-width: var(--menu-w)` és társai). Ma már egyszer belefutottunk abba, hogy egy
   médialekérdezés a felülírandó ELŐTT állt, és ezért soha nem érvényesült , azonos fajsúlynál
   a sorrend dönt.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-szuro,
  .app-tobbmuvelet-lista,
  .app-nezet-lista,
  .ajdd-list {
    max-width: calc(100vw - 2 * var(--space-md));
    /* A LEGKISEBB SZÉLESSÉG NEM NYOMHATJA SZÉT. A `min-width` erősebb a `max-width`-nél, ezért
       nem elég a felső korlátot megadni: az alsót is le kell venni, különben a réteg a
       kényszerített 230 képponttal továbbra is kilógna a kisebb telefonokon. */
    min-width: 0;
  }

  /* A SZŰRŐ-PANEL a legszélesebb, és a legtöbb tartalmat viszi: ott a belső görgetés is kell,
     hogy egy sok-csoportos szűrő ne lógjon ki a képernyő aljából. */
  .app-szuro {
    width: calc(100vw - 2 * var(--space-md));
    max-height: 70vh;
    overflow-y: auto;
  }
}