/* =============================================================================
   OptiDesk 3 – alap stíluslap
   A design tokenek és az osztálynevek szándékosan megegyeznek az OptiDesk 2-vel,
   így a későbbi oldalak átemelhetők átírás nélkül.
   ============================================================================= */

/* --- Betűtípus (helyben tárolva – a CSP nem enged külső font hosztot) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter/inter-latin-ext.woff2') format('woff2');
    /* latin-ext: a magyar ékezetes karakterek (ő, ű) ebben a tartományban vannak */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- CSS változók --- */
:root {
    --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-font-sans-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --od-primary:       #1560BD;
    --od-primary-dark:  #0D3F7F;
    --od-primary-light: #4A90D9;
    --od-primary-xlt:   #EBF3FC;
    --od-white:         #FFFFFF;
    --od-gray-50:       #F8FAFC;
    --od-gray-100:      #F1F5F9;
    --od-gray-200:      #E2E8F0;
    /* ⚠️ EZ HIÁNYZOTT a palettából, miközben NÉGY szabály hivatkozott rá. A definiálatlan
       `var()` „invalid at computed-value time": a tulajdonság az öröklött (color) vagy a
       kezdeti (border-color → currentColor) értékre esik vissza – NÉMÁN, hibaüzenet nélkül.
       Ezért lett a csendes mezők hover-kerete sötét a halvány helyett, és ezért örökölte a
       „·" elválasztó a szövegszínt. Új árnyalat használata előtt ellenőrizd, hogy létezik-e:
       grep -n "^\s*--od-gray-" wwwroot/app.css */
    --od-gray-300:      #CBD5E1;
    --od-gray-400:      #94A3B8;
    /* ⚠️ UGYANEZ MEGISMÉTLŐDÖTT: a paletta 400-ról 600-ra ugrott, miközben ÖT szabály
       hivatkozott az 500-asra – a csoportfejlécek, a worker technikai kulcsa és a
       cégadatlap-kártya MEZŐFELIRATAI. Mind a szövegszínt örökölte, tehát a felirat és az
       érték egyforma sötét lett: pont a vizuális rangsor veszett el, amiért a halvány
       szürke bekerült. MÉRVE: `rgb(30, 41, 59)` = --od-gray-800, nem az 500-as.
       A javítás itt is a HIÁNYZÓ ÁRNYALAT pótlása, nem az öt hivatkozás átírása. */
    --od-gray-500:      #64748B;
    --od-gray-600:      #475569;
    --od-gray-700:      #334155;
    --od-gray-800:      #1E293B;
    --od-danger:        #DC2626;
    --od-success:       #16A34A;
    /* ⚠️ A `-xlt` (extra light) a `--od-primary-xlt` párja: halvány kitöltés kiemelt
       kártyához. Tartalékkal (`var(--od-success-xlt, #ECFDF5)`) is működne, de a
       paletta lenne hiányos – és a következő használó megint tartalékot írna. */
    --od-success-xlt:   #ECFDF5;
    /* ⚠️ A HALVÁNY ZÖLD KITÖLTÉSEN a `--od-success` (#16A34A) kis, félkövér szövegként
       csak ~3,4:1 kontrasztot ad – a WCAG AA 4,5:1-et kér. A sötétebb árnyalat ezt
       teljesíti (~5,6:1), a keretszín pedig a chipet a fehér kártyától is elválasztja.
       Változóként, nem a szabályba írt literálként: a következő chip különben megint
       saját árnyalatot találna ki, és a kettő némán széttartana. */
    --od-success-dark:  #15803D;
    --od-success-line:  #86EFAC;
    --od-warning:       #D97706;
    /* Az SZJA-mentes keret IBOLYÁJA. ⚠️ Változóként, mert három felület használja: az
       irányítópult sávja, a /finances kártyája és (2026‑09‑12 óta) a halmozott diagram
       keret-vonala – az utóbbi JavaScriptből olvassa ki. Beégetve a negyedik használó megint
       saját árnyalatot találna ki, és a kettő némán széttartana. */
    --od-taxfree:       #7C3AED;
    --od-radius:        10px;
    --od-radius-lg:     16px;
    --od-shadow-sm:     0 1px 3px rgba(0,0,0,.08);
    --od-shadow:        0 4px 16px rgba(21,96,189,.12);
    --od-shadow-lg:     0 8px 32px rgba(21,96,189,.18);
    --od-transition:    .2s ease;
    --od-navbar-h:      64px;

    /* A napi munkalapok tartalmának maximális szélessége. ⚠️ A navbar UGYANEZT
       használja – egy változóban, hogy a kettő ne tudjon elcsúszni egymástól. */
    --od-content-max:   1600px;

    /* A munkaterület bal ikonsávjának szélessége. A navbar is ebből számol, hogy a
       fejléc tartalma pontosan az oldal címsora fölé essen. */
    --od-rail-w:        56px;
}

/* --- Alap --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--od-gray-50);
    color: var(--od-gray-800);
    min-height: 100vh;
}

a { color: var(--od-primary); text-decoration: none; }
a:hover { color: var(--od-primary-dark); text-decoration: underline; }

/* ============================================================
   LAYOUT
   ============================================================ */
.od-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.od-main {
    flex: 1;
    padding-top: var(--od-navbar-h);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.od-navbar {
    background: var(--od-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    min-height: var(--od-navbar-h);
    box-shadow: var(--od-shadow);
    padding: 0;
}

/* A navbar tartalma az OLDAL TARTALMÁHOZ igazodik, nem a Bootstrap 1320 px-es
   containeréhez és nem is a teljes képernyőhöz: ugyanaz a `--od-content-max` korlát
   fogja meg, mint az aloldalak címsorát.

   ⚠️ EGY változóból jön mindkettő. Két helyre írt 1600-as szám előbb-utóbb elcsúszik:
   valaki az egyiket állítja, a másikat nem, és a fejléc megint más széles lesz, mint
   az alatta lévő cím.

   ⚠️ A tartalom a munkaterület oszlopában van középre igazítva, ami az ikonsáv miatt
   el van tolva – a navbar viszont a rácson kívül, teljes szélességű sávként ül. Ezért
   kapja meg lentebb ugyanazt a bal térközt, különben a fejléc a sáv felével (28 px)
   elcsúszna az alatta lévő címsortól. */
.od-navbar .container,
.od-navbar .container-fluid {
    max-width: var(--od-content-max);
    padding-left: 1rem;
    padding-right: 1rem;
    height: var(--od-navbar-h);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Ha van munkaterület-rács (irodai munkatárs), a fejléc tartalma is az ikonsáv UTÁNI
   területen központosul – így pontosan az oldal címsora fölé kerül. Ügyfélnél nincs
   sáv, ezért nincs eltolás sem. Ha a böngésző nem ismeri a `:has()`-t, csak a 28 px-es
   eltérés marad – az elrendezés nem törik el. */
.od-layout:has(.od-workspace) .od-navbar { padding-left: var(--od-rail-w); }

.od-navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--od-white) !important;
    text-decoration: none;
}
.od-navbar-brand:hover { text-decoration: none; }

.od-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--od-white);
    color: var(--od-primary);
    font-weight: 800;
    font-size: .85rem;
    border-radius: 8px;
    letter-spacing: -.5px;
    flex-shrink: 0;
}
.od-logo-icon.lg {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
    border-radius: 14px;
}

.od-logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--od-white);
    letter-spacing: -.3px;
}

.od-navbar .nav-link {
    color: rgba(255,255,255,.85) !important;
    font-weight: 500;
    transition: color var(--od-transition);
    display: flex !important;
    align-items: center !important;
    gap: .35rem;
    white-space: nowrap;
    padding: .45rem 1rem !important;
    border-radius: var(--od-radius);
}
.od-navbar .nav-link:hover {
    color: var(--od-white) !important;
    background: rgba(255,255,255,.12);
}
.od-navbar .nav-link.active {
    color: var(--od-white) !important;
    background: rgba(0,0,0,.22);
    font-weight: 600;
}

.od-toggler { border-color: rgba(255,255,255,.4); }
.od-toggler .navbar-toggler-icon { filter: invert(1); }

/* Navbar – vertikális igazítás */
.od-navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
    height: var(--od-navbar-h);
}
.od-navbar .navbar-nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    height: 100%;
    margin-bottom: 0 !important;
}
.od-navbar .nav-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.od-navbar-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.25);
    margin: 0 .5rem;
    align-self: center;
}

/* ── A HARANG ─────────────────────────────────────────────────────────────────────
   ⚠️ A GOMB a navbar sötét sávján ül, tehát ugyanazt a fehér-áttetsző nyelvet beszéli, mint
   a cégválasztó (`od-company-btn`) – nem egy Bootstrap-gomb szürkéjét. */
.od-bell { display: flex; align-items: center; }

.od-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--od-radius);
    background: transparent;
    color: var(--od-white);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background var(--od-transition), border-color var(--od-transition);
}

.od-bell-btn:hover,
.od-bell-btn[aria-expanded="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.od-bell-btn:focus-visible { outline: 2px solid var(--od-white); outline-offset: 2px; }

/* ⚠️ A JELVÉNY PIROS, és a „9+" felett nem nő tovább: egy háromjegyű szám szétfeszítené a
   gombot, a pontos érték pedig úgyis a lenyílóban látszik. */
.od-bell-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--od-danger);
    color: var(--od-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--od-primary-dark);
}

.od-bell-menu { width: 360px; max-width: 92vw; max-height: min(520px, 75vh); padding: 0; overflow-x: hidden; overflow-y: auto; }

.od-bell-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--od-gray-200); }
.od-bell-link { margin-left: auto; padding: 0; border: 0; background: none; color: var(--od-primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.od-bell-link:hover { text-decoration: underline; }

.od-bell-group { display: flex; flex-direction: column; }
.od-bell-grouptitle { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--od-gray-500); }

.od-bell-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--od-gray-100);
    background: var(--od-white);
    text-align: left;
    cursor: pointer;
}

.od-bell-item:hover { background: var(--od-gray-50); }
.od-bell-item:focus-visible { outline: 2px solid var(--od-primary); outline-offset: -2px; }

/* Az OLVASATLAN tétel halványkék hátteret, félkövér címet és egy pöttyöt kap – három jel, hogy
   színtévesztő szemnek is egyértelmű legyen. */
.od-bell-item.is-unread { background: var(--od-primary-xlt); }
.od-bell-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; color: var(--od-gray-500); }
.od-bell-item.is-unread .od-bell-icon { color: var(--od-primary); }
.od-bell-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.od-bell-title { font-size: 13px; font-weight: 400; color: var(--od-gray-800); line-height: 1.35; }
.od-bell-item.is-unread .od-bell-title { font-weight: 600; }
.od-bell-meta { font-size: 12px; color: var(--od-gray-500); }

/* A darabszám („· 3 db") ne törjön szét az idő és a szám között. */
.od-bell-count { white-space: nowrap; }

/* ── A TEENDŐ-IKON (a harang mellett) ─────────────────────────────────────────────
   ⚠️ A gomb és a lenyíló a harang osztályait használja (`od-bell-btn`, `od-bell-menu`): a két
   ikon EGY csoport, egy nyelvet beszél. Csak a jelvény színe és a tétel bal sávja más – a teendő
   SÚLYA a szintből jön, ugyanazzal a színnel, mint az irányítópulton. */

/* ⚠️ A BOROSTYÁN jelvény SÖTÉTEBB (#B45309), nem a `--od-warning` (#D97706): azon a fehér 11 px-es
   szám csak ~3,2:1 kontrasztot adna, a WCAG AA 4,5:1-et kér. A #B45309 ~5,0:1. */
.od-bell-badge.is-due { background: #B45309; }
.od-bell-badge.is-info { background: var(--od-primary); }

.od-todo-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px 12px 13px;
    border-bottom: 1px solid var(--od-gray-100);
    border-left: 3px solid var(--od-gray-300);
    color: inherit;
    text-decoration: none;
}

.od-todo-item:hover { background: var(--od-gray-50); color: inherit; }
.od-todo-item:focus-visible { outline: 2px solid var(--od-primary); outline-offset: -2px; }
.od-todo-item.is-overdue { border-left-color: var(--od-danger); }
.od-todo-item.is-overdue .od-bell-icon { color: var(--od-danger); }
.od-todo-item.is-due { border-left-color: var(--od-warning); }
.od-todo-item.is-due .od-bell-icon { color: var(--od-warning); }
.od-todo-item.is-info { border-left-color: var(--od-primary-light); }
.od-todo-item.is-info .od-bell-icon { color: var(--od-primary); }

/* A fejléc JOBB oldalán két művelet áll („Láttam" · „Mind (6) →"): a közös csoport kapja a jobbra
   tolást – két `margin-left: auto` megfelezné a helyet. */
.od-bell-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.od-bell-actions .od-bell-link { margin-left: 0; }

/* A „Láttam" utáni sáv: a jelvény hallgat, a lista változatlan – és vissza lehet kapcsolni. */
.od-todo-ack { display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--od-gray-100); background: var(--od-gray-50); font-size: 12px; line-height: 1.4; color: var(--od-gray-600); }
.od-todo-ack .bi { flex-shrink: 0; }
.od-todo-ack .od-bell-link { flex-shrink: 0; white-space: nowrap; }

/* ── Értesítés-SOR: megnyitás + „olvasottnak jelölés" (✓) ─────────────────────────
   ⚠️ A HÁTTÉR és a VONAL a SORON van, nem a gombon: a ✓ a megnyitó gomb MELLETT áll (egymásba
   ágyazott gomb érvénytelen HTML volna), és a két résznek egy sornak kell látszania. A gomb ezért
   a soron belül átlátszó – ez a szabály a fenti `.od-bell-item.is-unread` UTÁN áll, azonos
   specificitással, tehát a sorrend dönt. */
.od-bell-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--od-gray-100); background: var(--od-white); }
.od-bell-row.is-unread { background: var(--od-primary-xlt); }
.od-bell-row > .od-bell-item { flex: 1; min-width: 0; border-bottom: 0; background: transparent; }
.od-bell-row > .od-bell-item:hover { background: rgba(15, 23, 42, .04); }

.od-bell-mark {
    flex-shrink: 0;
    width: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--od-gray-500);
    font-size: 1rem;
    cursor: pointer;
}

.od-bell-mark:hover { color: var(--od-primary); background: rgba(15, 23, 42, .04); }
.od-bell-mark:focus-visible { outline: 2px solid var(--od-primary); outline-offset: -2px; }
.od-bell-page .od-bell-row:last-child { border-bottom: 0; }
.od-bell-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--od-primary); }

.od-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; color: var(--od-gray-500); font-size: 13px; }
.od-bell-empty .bi { font-size: 1.5rem; opacity: .4; }

.od-bell-more { display: block; padding: 8px 16px; font-size: 12px; color: var(--od-primary); }
.od-bell-foot { padding: 8px 16px; border-top: 1px solid var(--od-gray-200); text-align: center; }
.od-bell-foot a { font-size: 12px; font-weight: 600; }

/* Az `/ertesitesek` lapon ugyanaz a tétel, kártyában. */
.od-bell-page { overflow: hidden; }
.od-bell-page .od-bell-item:last-child { border-bottom: 0; }

/* ⚠️ A REZGÉS rövid és egyszeri, és a `prefers-reduced-motion` mellett ki is marad (a JS is
   ellenőrzi). HANG NINCS – a felhasználó döntése. */
@keyframes od-bell-shake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(5deg); }
}

.od-bell-shake { display: inline-block; transform-origin: 50% 0; animation: od-bell-shake .6s ease-in-out 1; }

@media (prefers-reduced-motion: reduce) {
    .od-bell-shake { animation: none; }
}

/* ⚠️ KESKENY NAVBAR – HÁROM LÉPCSŐ, MÉRÉSBŐL (2026‑09‑11). A navbar 1200 px-től kinyílik
   (`navbar-expand-xl`), de a menüpontok, a cégválasztó, a harang és a profil 1200 és ~1440 px
   között még így sem fértek el. VALÓDI ablakszélességen mérve (azonos eredetű iframe-ben – a
   korábbi, konténer-szűkítéses becslés optimista volt):

     ablak     rövid cégnév (184 px)             hosszú cégnév (260 px, a gomb maximuma)
     1200 px   53 px túlcsordulás                –
     1300 px   61 px (a profilnév visszajön)     137 px
     1366 px   0                                 71 px
     1400 px   0                                 37 px

   A lépcsők a LEGKEVESEBBET veszik el, és mindegyik csak a saját határáig tart – így egy
   1366 px-es laptopon rövid cégnévnél a profilnév és a menüikonok is látszanak:
   1. 1200–1299: a profilgomb csak a monogramot mutatja (a név és a szint a lenyíló fejlécében
      ott van) – nélküle 1200 px-en még 81 px maradna.
   2. 1200–1399: a bal menüpontok IKONJA rejtve, a felirat marad (5 × 16 = 80 px).
   3. 1200–1499: a cégválasztó legfeljebb 184 px, a név `…`-vel csonkul (`.od-company-name`).
      Nélküle egy hosszú cégnév kitolná a sort. A teljes név a lenyílóban látszik.
   ⚠️ A 2. és 3. felső határa a TEENDŐ-IKON (+38 px) miatt nőtt 1366 → 1400 és 1440 → 1500 px-re.
   Helyőrzővel MÉRVE: 1366 px-en (ahol a menüikonok visszajöttek) 33 px, hosszú cégnévvel
   1440 px-en (ahol a korlát megszűnt) 35 px túlcsordulás lett volna.

   ⚠️ `!important` az elsőnél KELL: a `.d-flex` Bootstrap-segédosztály maga is `!important`.
   ⚠️ A cégválasztó korlátja `.od-navbar .od-company-btn`, NEM `.od-company-btn`: az alapszabály
   (`max-width: 260px`) a fájlban EZ UTÁN áll, és azonos specificitással felülírná – a média-
   feltétel nem ad specificitást. A mérés ezért a `<head>` ELEJÉRE szúrt szabállyal ment.
   ⚠️ A menü-ikon szelektora a BAL menüre (`.me-auto`) szűkül: a profilgomb nyila is a
   `.nav-link` közvetlen `.bi` gyereke – mérve megmaradt.
   ⚠️ Mindhárom CSAK a kinyitott navbarra hat (≥1200 px) – az összecsukást nem érinti (27.). */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .od-user-meta { display: none !important; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .od-navbar .navbar-nav.me-auto > .nav-item > .nav-link > .bi { display: none; }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
    .od-navbar .od-company-btn { max-width: 184px; }
}

/* Összecsukott (mobil) navbar: a fix magasság és a sorirány itt akadályt jelentene.

   ⚠️ A TÖRÉSPONT 1199,98 px (Bootstrap `xl`), nem 991,98 (`lg`) – és a `NavMenu`
   `navbar-expand-xl` osztályával EGYÜTT kell mozognia. 2026‑09‑11-ig `lg` volt: MÉRVE ≈992 és
   ≈1180 px közötti ablakon a kinyitott navbar konténere TÚLCSORDULT (1100 px-es tartalomnál
   44 px-rel, 1000 px-nél 144-gyel), mert a menüpontok, a cégválasztó és a profil együtt nem
   fértek el; a harang ezt +38 px-szel tovább rontotta. Ha a kettő elválna, az ablak egy sávjában
   a navbar se ki nem nyílna, se össze nem csukódna rendesen (27. tanulság). */
@media (max-width: 1199.98px) {
    .od-navbar .container { height: auto; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
    .od-navbar .navbar-nav { flex-direction: column; align-items: stretch; height: auto; }
    .od-navbar .nav-item { height: auto; }
    .od-navbar { position: sticky; }
    .od-main { padding-top: 0; }

    /* ⚠️ A `.od-navbar .navbar-collapse` szabály `display: flex !important`-et ad MINDEN
       szélességen (a nagy nézet vízszintes sávjához). Emiatt a Bootstrap összecsukása
       (`display: none`) NEM tudott érvényesülni: a menü mobilon MINDIG nyitva volt, a
       hamburger gomb láthatóan nem csinált semmit, és mivel a collapse flex-SOR maradt, a
       bal oldali menü és a jobb oldali profil-sáv EGYMÁS MELLÉ csúszott (mérve 375 px-en:
       175 px + 188 px, a navbar 196 px magas).

       Ezért itt vissza kell venni a display-t, és a nyitott állapotot OSZLOPPÁ tenni. */
    .od-navbar .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }

    .od-navbar .navbar-collapse.show,
    .od-navbar .navbar-collapse.collapsing {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    /* A `.collapsing` magasságát a Bootstrap animálja inline – ezért CSAK a nyitott
       állapotra írjuk az `auto`-t, különben az animáció ugrálna. */
    .od-navbar .navbar-collapse.show { height: auto; }

    /* Mindkét lista (menü és profil-sáv) TELJES szélességű, egymás ALATT. Az `ms-auto`
       és `me-auto` vízszintes igazítás oszlop-irányban értelmét veszti. */
    .od-navbar .navbar-collapse > .navbar-nav {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ⚠️ A legördülők a gomb ALÁ kerüljenek, ne MELLÉ. Három dolog találkozott:
       – a `li.nav-item.dropdown` flex-KONTÉNER, tehát a menü a gomb melletti „oszlopba"
         került,
       – a Bootstrap a becsukott navbarban `position: static`-ra teszi a menüt, tehát nincs
         az a Popper-átfordítás, ami a képernyőn tartaná,
       – a cégválasztó menüje ráadásul fix `min-width: 240px`.

       Együtt: a menü a 200. képpontnál kezdődött és 240 px széles volt, azaz egy 375 px-es
       telefonon 65 px-rel KILÓGOTT jobbra – a cégnevek és az adószámok levágódtak. */
    .od-navbar .navbar-collapse.show .nav-item.dropdown { display: block; }

    .od-navbar .dropdown-menu {
        width: 100%;
        /* A fix 240 px-es minimum szorította ki a képernyőről. */
        min-width: 0;
    }

    /* ⚠️ A lenyitott menü TAGOLÁSA. A menüpontok, a cégválasztó és a profil három
       különböző dolog; elválasztó nélkül egyetlen kék masszának látszottak (a
       felhasználó szava: „nem átlátható"). Egy halvány vonal a két lista között
       elég – keretek és hátterek nélkül. */
    .od-navbar .navbar-collapse.show > .navbar-nav + .navbar-nav {
        border-top: 1px solid rgba(255, 255, 255, .18);
        margin-top: .35rem;
        padding-top: .35rem;
    }

    /* Minden tétel EGYFORMA magas és balra igazított – a cégválasztó gombja és a
       profil-sor is. Enélkül az avatar magában, középen lógott. */
    .od-navbar .navbar-collapse.show .nav-link,
    .od-navbar .navbar-collapse.show .od-view-switch-btn {
        justify-content: flex-start;
        width: 100%;
    }
}

/* =========================================================================
   Dokumentum-táblázat szűk kijelzőn
   ========================================================================= */

/* ⚠️ HÁROM lépésben jutottunk ide, és a köztes állapot is rossz volt:
   1. Eredetileg a táblázat 570 px-et akart egy 343 px-es burkolóban, ezért a névoszlop
      47 px-re préselődött, és a fájlnév KARAKTERENKÉNT, függőlegesen tördelődött
      (mérve: 30 px széles, 164 px magas szövegdoboz).
   2. `min-width: 720px`-szal ez megszűnt, DE a `.table-responsive` görgetni kezdett –
      a letöltés gombig oldalra kellett húzni a táblázatot. Ez sem használható.
   3. A megoldás: telefonon a MÁSODLAGOS oszlopok kimaradnak. Ami marad: kijelölés,
      Név, Méret, Műveletek – ez elfér görgetés nélkül.

   Tanulság: a vízszintes görgetés a táblázatnál nem megoldás, csak a tünet áthelyezése. */
@media (max-width: 991.98px) {
    .od-col-2nd { display: none; }

    /* Nincs `min-width`: a maradék négy oszlop kifér. A név így is kap ~150 px-et,
       tehát legfeljebb két-három sorba tördel – nem betűnként. */
    .od-doc-table .od-doc-name { min-width: 0; }
}

/* Avatar (navbarban) */
.od-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.2);
    color: var(--od-white);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.4);
    flex-shrink: 0;
    letter-spacing: .02em;
}

/* Avatar listákban (világos háttéren) */
.od-avatar-plain {
    background: var(--od-primary);
    border: none;
    width: 34px;
    height: 34px;
    font-size: .72rem;
}

.od-user-menu { display: flex; align-items: center; }
/* A Bootstrap automatikus dropdown nyilát elrejtjük – saját bi-chevron-down-t használunk */
.od-user-menu.nav-link::after,
.od-navbar .od-user-menu::after { display: none !important; }

.od-user-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--od-white);
    line-height: 1.2;
}
.od-user-email {
    font-size: .75rem;
    color: rgba(255,255,255,.7);
    line-height: 1.2;
}
.od-chevron {
    font-size: .7rem;
    opacity: .75;
    color: var(--od-white);
}

/* ============================================================
   VÁLLALKOZÁS-VÁLASZTÓ (navbar, a profil-menü előtt)
   ============================================================ */
.od-company-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 260px;
    padding: .4rem .8rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--od-radius);
    background: rgba(255,255,255,.12);
    color: var(--od-white);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--od-transition), border-color var(--od-transition);
}
.od-company-btn:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.45);
}
/* A Bootstrap dropdown-toggle nyilát nem használjuk – saját chevron van. */
.od-company-btn::after { display: none !important; }

/* A gomb felirata: név, alatta – CSAK azonos nevű cégeknél – az adószám.
   min-width: 0 KÖTELEZŐ, különben a flex elem nem tud a tartalma alá zsugorodni,
   és a hosszú cégnév ellipszis helyett kitolná a chevront a gombból. */
.od-company-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
}

.od-company-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Halványabb és kisebb, mint a név: ez megkülönböztető adat, nem a fő felirat. */
.od-company-btn-tax {
    font-size: .72rem;
    font-weight: 400;
    color: rgba(255,255,255,.72);
    white-space: nowrap;
}

.od-company-dropdown {
    min-width: 320px;
    max-width: 380px;
    padding: 0;
    overflow: hidden;
}

.od-company-search {
    position: relative;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--od-gray-200);
    background: var(--od-gray-50);
}
.od-company-search .od-search-icon { left: 1.2rem; }
.od-company-search .od-search-input { padding-left: 2.2rem; }

/* Görgethető lista: sok cégnél se nyúljon a legördülő a képernyőn túl. */
.od-company-list {
    max-height: 340px;
    overflow-y: auto;
    padding: .35rem 0;
}

.od-company-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.od-company-item:hover { background: var(--od-primary-xlt); }
.od-company-item--active { background: var(--od-primary-xlt); }

.od-company-item-icon  { color: var(--od-gray-400); font-size: 1rem; flex-shrink: 0; }
.od-company-item--active .od-company-item-icon { color: var(--od-primary); }

.od-company-item-body  { flex: 1 1 auto; min-width: 0; }
.od-company-item-name  {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--od-gray-800);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-company-item-tax   {
    display: block;
    font-size: .78rem;
    color: var(--od-gray-400);
    font-variant-numeric: tabular-nums;
}
.od-company-item-check { color: var(--od-primary); flex-shrink: 0; }

.od-company-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--od-gray-400);
    font-size: .85rem;
}

/* ⚠️ A navbar összecsukási töréspontjával EGYÜTT (1199,98 px) – lásd az „Összecsukott (mobil)
   navbar" blokkot. */
@media (max-width: 1199.98px) {
    /* Összecsukott navbarban a választó teljes szélességű sor. */
    .od-company-btn { max-width: none; width: 100%; justify-content: flex-start; margin: .35rem 0; }
    .od-company-dropdown { min-width: 0; width: 100%; }
}

/* Dropdown */
.od-dropdown {
    border: none;
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-lg);
    min-width: 240px;
}
.od-dropdown .dropdown-item { padding: .6rem 1.2rem; font-size: .9rem; }
/* A :not() szűkítés KÖTELEZŐ: enélkül ennek a szabálynak a specificitása felülírná a
   Bootstrap .dropdown-item.disabled szabályát, és a LETILTOTT menüpont hoverre kékre
   váltana – mintha aktív lenne. */
.od-dropdown .dropdown-item:not(.disabled):not(:disabled):hover {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
}
.od-dropdown .dropdown-item.disabled,
.od-dropdown .dropdown-item:disabled {
    color: var(--od-gray-400);
    background: transparent;
    opacity: .65;
    cursor: not-allowed;
    pointer-events: none;
}
.od-dropdown-header {
    background: var(--od-gray-50);
    border-radius: var(--od-radius) var(--od-radius) 0 0;
}

/* ============================================================
   GOMBOK
   ============================================================ */
/* Alap: sötét (kék) háttéren – fehér gomb */
.od-btn-primary {
    background: var(--od-white);
    color: var(--od-primary);
    border: 2px solid var(--od-white);
    font-weight: 600;
    border-radius: 8px;
    transition: all var(--od-transition);
}
.od-btn-primary:hover {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    border-color: var(--od-primary-xlt);
}

/* Tömör kék gomb (világos háttéren) */
.od-btn-solid-primary {
    background: var(--od-primary);
    color: var(--od-white);
    border: 2px solid var(--od-primary);
    font-weight: 600;
    border-radius: 8px;
    transition: all var(--od-transition);
}
.od-btn-solid-primary:hover {
    background: var(--od-primary-dark);
    border-color: var(--od-primary-dark);
    color: var(--od-white);
    text-decoration: none;
}

.od-btn-outline-primary {
    background: transparent;
    color: var(--od-white);
    border: 2px solid rgba(255,255,255,.7);
    font-weight: 600;
    border-radius: 8px;
    transition: all var(--od-transition);
}
.od-btn-outline-primary:hover {
    background: rgba(255,255,255,.15);
    color: var(--od-white);
    border-color: var(--od-white);
}

/* Világos hátterű szekciókban a "primary" gomb kék, nem fehér */
.od-auth-page .od-btn-primary,
.od-cta .od-btn-primary {
    background: var(--od-primary);
    color: var(--od-white);
    border-color: var(--od-primary);
}
.od-auth-page .od-btn-primary:hover,
.od-cta .od-btn-primary:hover {
    background: var(--od-primary-dark);
    border-color: var(--od-primary-dark);
    color: var(--od-white);
}
.od-auth-page .od-btn-outline-primary {
    background: transparent;
    color: var(--od-primary);
    border-color: var(--od-primary);
}
.od-auth-page .od-btn-outline-primary:hover {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}
/* Hero: sötét háttér – fehér primary + áttetsző outline */
.od-hero .od-btn-primary {
    background: var(--od-white);
    color: var(--od-primary);
    border-color: var(--od-white);
}
.od-hero .od-btn-primary:hover {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    border-color: var(--od-primary-xlt);
}
.od-hero .od-btn-outline-primary {
    background: transparent;
    color: var(--od-white);
    border: 2px solid rgba(255,255,255,.8);
}
.od-hero .od-btn-outline-primary:hover {
    background: rgba(255,255,255,.15);
    color: var(--od-white);
    border-color: var(--od-white);
}

/* Táblázatsorok művelet-gombjai: alapon átlátszó, hoverre halvány színes háttér.
   Táblázatban SOHA ne használj btn-warning / btn-danger / btn-primary színes gombot. */
.od-action-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    font-size: .9rem;
    transition: background var(--od-transition), color var(--od-transition);
}
.od-action-edit:hover   { background: #EBF3FC; color: #1560BD; border-color: #B8D4F5; }
.od-action-view:hover   { background: #F3EEFF; color: #7C3AED; border-color: #D8B4FE; }
.od-action-2fa:hover    { background: #ECFDF5; color: #059669; border-color: #A7F3D0; }
.od-action-key:hover    { background: #FFF7ED; color: #D97706; border-color: #FDE68A; }
.od-action-delete:hover { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }

/* Lezárás (minőség megszűnése): semleges szürke. ⚠️ SAJÁT modifier, nem a meglévő
   `od-action-2fa` (zöld = pozitív) vagy `od-action-key` (borostyán) újrahasznosítása –
   egy kész osztály MÁS célra pontosan a 18. megtanult hiba. */
.od-action-close:hover  { background: var(--od-gray-100); color: var(--od-gray-600); border-color: var(--od-gray-300); }

/* Letiltott művelet-gomb. ⚠️ LÁTSZIK, csak halvány: a felhasználónak tudnia kell, hogy a
   művelet létezik – a `title` mondja meg, miért nem elérhető. Elrejtve azt hinné, a
   rendszer nem is tud ilyet. */
.od-action-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
}
.od-action-btn.disabled:hover { background: transparent; border-color: transparent; }

/* ============================================================
   FOOTER
   ============================================================ */
.od-footer {
    background: var(--od-gray-100);
    border-top: 1px solid var(--od-gray-200);
    padding: 1.2rem 0;
    text-align: center;
    font-size: .85rem;
    color: var(--od-gray-600);
}

/* ============================================================
   LANDING – HERO
   ============================================================ */
.od-hero {
    background: linear-gradient(135deg, var(--od-primary) 0%, var(--od-primary-dark) 100%);
    color: var(--od-white);
    padding: 88px 0 72px;
    display: flex;
    align-items: center;
}

.od-hero-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}

.od-badge-primary {
    background: rgba(255,255,255,.14);
    color: var(--od-white);
    font-size: .8rem;
    padding: .4rem .9rem;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.22);
}

.od-hero-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--od-white);
    margin-bottom: 1.1rem;
    max-width: 18ch;
}

.od-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,.85);
    line-height: 1.7;
    max-width: 540px;
}

.od-hero-panel {
    width: 100%;
    max-width: 420px;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-lg);
    overflow: hidden;
}
.od-hero-panel-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .85rem 1.1rem;
    background: var(--od-gray-50);
    border-bottom: 1px solid var(--od-gray-200);
}
.od-hero-panel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--od-gray-200);
}
.od-hero-panel-title {
    margin-left: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--od-gray-600);
}
.od-hero-panel-body { padding: .5rem 0; }
.od-hero-panel-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.25rem;
}
.od-hero-panel-row + .od-hero-panel-row { border-top: 1px solid var(--od-gray-100); }
.od-hero-panel-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--od-radius);
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.od-hero-panel-label {
    font-weight: 600;
    color: var(--od-gray-800);
    font-size: .98rem;
}

/* ============================================================
   LANDING – FUNKCIÓK
   ============================================================ */
.od-features { background: var(--od-white); }

/* ⚠️ NÉVÜTKÖZÉS VOLT: ez az osztály korábban `od-section-title` néven futott, ugyanúgy,
   mint a kártyák szekciócímsora lentebb (~2950. sor). A KÉSŐBBI definíció nyert, tehát
   a landing címsora némán 0.95rem/700 lett az 1.8rem/800 helyett – a build tiszta, a
   markup helyes, csak a felület hazudott. Lásd CLAUDE.md 18. tanulság. */
.od-landing-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--od-gray-800);
}
.od-section-subtitle { font-size: 1rem; color: var(--od-gray-600) !important; }

.od-feature-card {
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    padding: 2rem;
    transition: all var(--od-transition);
}
.od-feature-card:hover {
    box-shadow: var(--od-shadow);
    border-color: var(--od-primary-light);
    transform: translateY(-3px);
}
.od-feature-icon {
    width: 56px;
    height: 56px;
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    border-radius: var(--od-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.od-feature-card h4 { font-weight: 700; margin-bottom: .5rem; color: var(--od-gray-800); }
.od-feature-card p { font-size: .95rem; line-height: 1.6; }

/* ============================================================
   LANDING – CÉLKÖZÖNSÉG
   ============================================================ */
.od-audience { background: var(--od-gray-50); }

.od-audience-card {
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--od-transition), border-color var(--od-transition);
}
.od-audience-card:hover {
    box-shadow: var(--od-shadow);
    border-color: var(--od-primary-light);
}
.od-audience-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.od-audience-ico {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--od-radius);
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.od-audience-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--od-gray-800);
    margin: 0;
}
.od-audience-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1 1 auto;
}
.od-audience-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .85rem;
    color: var(--od-gray-600);
    line-height: 1.55;
}
.od-audience-list li::before {
    content: "\F26E"; /* Bootstrap Icons: check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .05rem;
    color: var(--od-success);
    font-size: 1rem;
}

.od-cta-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--od-primary);
    transition: gap var(--od-transition), color var(--od-transition);
}
.od-cta-link:hover {
    color: var(--od-primary-dark);
    text-decoration: none;
    gap: .65rem;
}

/* ============================================================
   LANDING – ZÁRÓ CTA
   ============================================================ */
.od-cta { background: var(--od-white); }

.od-cta-box {
    background: linear-gradient(135deg, var(--od-primary) 0%, var(--od-primary-dark) 100%);
    border-radius: var(--od-radius-lg);
    color: var(--od-white);
}
.od-cta-box h2 { color: var(--od-white); font-weight: 800; }
.od-cta-box .text-muted { color: rgba(255,255,255,.75) !important; }

/* ============================================================
   AUTH OLDALAK (belépés / regisztráció / 2FA)
   ============================================================ */
.od-auth-page {
    min-height: calc(100vh - var(--od-navbar-h));
    display: flex;
    align-items: center;
    padding: 3rem 0;
    background: linear-gradient(160deg, var(--od-primary-xlt) 0%, var(--od-white) 60%);
}

.od-auth-card {
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--od-shadow-lg);
}

.od-auth-title { font-size: 1.6rem; font-weight: 800; color: var(--od-gray-800); margin-bottom: .25rem; }

.od-form-section-title {
    color: var(--od-primary);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--od-primary-xlt);
    padding-bottom: .5rem;
    margin-top: 1.5rem;
}

/* ============================================================
   ŰRLAPELEMEK
   ============================================================ */
.od-input {
    border: 1.5px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .7rem 1rem;
    font-size: .95rem;
    transition: border-color var(--od-transition), box-shadow var(--od-transition);
}
.od-input:focus {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(21,96,189,.12);
    outline: none;
}
/* A Bootstrap .form-select a nyilat háttérképként rajzolja jobbra és 2.25rem
   padding-right-tal tart neki helyet – az .od-input rövidebb paddingja ezt
   felülírná, és a nyíl rácsúszna a szövegre. */
select.od-input { padding-right: 2.25rem; }

.od-password-hint { font-size: .78rem; color: var(--od-gray-400); margin-top: .3rem; }

/* Telefonszám mező: országhívószám + helyi szám, összeérő szegélyekkel.
   Lásd Components/Shared/PhoneNumberInput.razor */
.od-phone-field {
    display: flex;
    align-items: stretch;
}

.od-phone-field .od-phone-dial {
    flex: 0 0 auto;
    width: auto;
    min-width: 9.5rem;
    max-width: 12rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
    background-color: var(--od-gray-50);
    font-size: .9rem;
}

.od-phone-field .od-phone-local {
    flex: 1 1 auto;
    min-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* Számokhoz tabuláris számjegyek: gépelés közben nem "ugrál" a mező tartalma. */
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Fókuszban a szomszéd szegélye alá kerülne a fókuszgyűrű – emeljük ki. */
.od-phone-field .od-phone-dial:focus,
.od-phone-field .od-phone-local:focus {
    position: relative;
    z-index: 1;
    border-color: var(--od-primary);
}

/* --- Zászlós országhívószám-választó -----------------------------------------
   A `wwwroot/js/phone-country.js` építi: a szerver által renderelt selectet a
   `.od-phone-cc` burkolóba teszi, elrejti, és egy TÖMÖR gombot (zászló + hívószám)
   meg egy lenyíló listát rak mellé. Az országnév a listában marad.
   ⚠️ JS nélkül ez a blokk nem aktiválódik: a natív select marad, országnévvel. */
.od-phone-cc { position: relative; flex: 0 0 auto; display: flex; }

/* ⚠️ A rejtés specifikussága 0-3-0, a fenti `.od-phone-field .od-phone-dial`-é 0-2-0 –
   tehát NEM a sorrenden múlik. Egyenlő specifikusságnál a későbbi nyerne, és egy
   átrendezés némán visszahozná a látható selectet (ugyanaz a csapda, mint az
   `od-page-wrap` négy szabályánál).
   ⚠️ `display: none` NEM használható: a select a FORMBAN marad, ő viszi a `name`-et,
   és letiltott/rejtett elem nélkül a POST-ból eltűnne a hívószám. */
.od-phone-field .od-phone-cc > .od-phone-dial {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.od-phone-cc-trigger {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .7rem .65rem .7rem .75rem;
    border: 1.5px solid var(--od-gray-200);
    /* Összeérő szegély a helyi szám mezőjével – ugyanaz a megoldás, mint a natív
       selectnél: jobb oldalon nincs lekerekítés, és a szegély átlátszó. */
    border-radius: var(--od-radius) 0 0 var(--od-radius);
    border-right-color: transparent;
    background: var(--od-gray-50);
    color: var(--od-gray-800);
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: border-color var(--od-transition), box-shadow var(--od-transition);
}

.od-phone-cc-trigger:hover:not(:disabled) { border-color: var(--od-gray-300); }

/* A fókuszgyűrű a szomszéd szegélye alá kerülne – emeljük ki (mint a natív mezőknél). */
.od-phone-cc-trigger:focus-visible,
.od-phone-cc-trigger[aria-expanded="true"] {
    position: relative;
    z-index: 1;
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(21,96,189,.12);
    outline: none;
    background: var(--od-white);
}

.od-phone-cc-trigger:disabled { cursor: default; opacity: .65; }

.od-phone-cc-trigger-flag { display: flex; flex: 0 0 auto; }
.od-phone-cc-trigger-code { font-variant-numeric: tabular-nums; }
.od-phone-cc-arrow { display: flex; flex: 0 0 auto; color: var(--od-gray-400); }

/* ⚠️ SZÁNDÉKOSAN nincs rajta `transition`: a nyitásjelzőnek követnie kell a
   kattintást, és az átmenet a 22. tanulság szerint nehezen mérhető állapotot csinál. */
.od-phone-cc-trigger[aria-expanded="true"] .od-phone-cc-arrow { transform: rotate(180deg); }

/* ⚠️ A halvány keret nem díszítés: a fehér sávot tartalmazó zászlók (lengyel, osztrák,
   finn) különben beleolvadnának a mező világos hátterébe. */
.od-phone-cc-flag {
    width: 20px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15,23,42,.12);
}

.od-phone-cc-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    /* A modál (1060) ALATT: ez a mező nincs overlay ablakban, tehát nem kell fölé menni. */
    z-index: 1050;
    min-width: 15rem;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: .3rem 0;
    list-style: none;
    background: var(--od-white);
    border: 1.5px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-lg);
}

.od-phone-cc-menu.is-open { display: block; }

.od-phone-cc-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .75rem;
    font-size: .9rem;
    color: var(--od-gray-800);
    cursor: pointer;
    outline: none;
}

.od-phone-cc-opt:hover,
.od-phone-cc-opt:focus,
.od-phone-cc-opt.is-on {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

.od-phone-cc-opt.is-on { font-weight: 500; }
.od-phone-cc-opt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 420px) {
    .od-phone-field { flex-direction: column; }
    .od-phone-field .od-phone-dial {
        max-width: none;
        border-radius: var(--od-radius) var(--od-radius) 0 0;
        border-right-color: var(--od-gray-200);
        border-bottom-color: transparent;
    }
    .od-phone-field .od-phone-local {
        border-radius: 0 0 var(--od-radius) var(--od-radius);
    }

    /* ⚠️ A zászlós gomb TÖMÖR (a hosszú országnév nélkül ~90 px), tehát 375 px-en is
       elfér a szám mellett – ott NEM tördelünk. A fenti oszlopos szabály a JS NÉLKÜLI
       esetre marad, ahol a natív select az országnévvel együtt széles.
       ⚠️ A `:has()` pontosan azt kérdezi meg, felépült-e a widget – ugyanaz a minta,
       mint a `.od-layout:has(.od-workspace) .od-navbar`-nál. */
    .od-phone-field:has(.od-phone-cc) { flex-direction: row; }
    .od-phone-field:has(.od-phone-cc) .od-phone-local {
        border-radius: 0 var(--od-radius) var(--od-radius) 0;
    }
    /* Érintési célpont: a gomb ne legyen 44 px-nél alacsonyabb. */
    .od-phone-cc-trigger { min-height: 44px; }
}

.od-validation-msg { font-size: .8rem; color: var(--od-danger); margin-top: .25rem; display: block; }
.od-validation-summary {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--od-radius);
    padding: .8rem 1rem;
    color: var(--od-danger);
    font-size: .88rem;
    margin-bottom: 1rem;
}
.od-validation-summary ul { padding-left: 1.1rem; margin-bottom: 0; }

.od-link { color: var(--od-primary); font-weight: 600; }
.od-link:hover { color: var(--od-primary-dark); }

.od-search-box { position: relative; }
.od-search-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-gray-400);
    font-size: .9rem;
    pointer-events: none;
}
.od-search-input {
    padding-left: 2.4rem;
    border: 1.5px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    font-size: .9rem;
}
.od-search-input:focus {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(21,96,189,.12);
}

/* ============================================================
   OLDALFEJLÉC
   ============================================================ */
.od-page-title { font-size: 1.6rem; font-weight: 800; color: var(--od-gray-800); }

.od-page-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--od-radius-lg);
}
.od-page-icon i { color: var(--od-white); font-size: 1.25rem; line-height: 1; }

/* Az ikondoboz színe MINDIG modifier osztályból jön – soha ne inline style-ból.
   Szemantika: létrehozás=green, szerkesztés=amber, lista=blue/sky, biztonság/admin=red. */
.od-page-icon-blue   { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); }
.od-page-icon-indigo { background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%); }
.od-page-icon-sky    { background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); }
.od-page-icon-teal   { background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%); }
.od-page-icon-green  { background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%); }
.od-page-icon-amber  { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%); }
.od-page-icon-orange { background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%); }
.od-page-icon-red    { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }
.od-page-icon-pink   { background: linear-gradient(135deg, #db2777 0%, #f472b6 100%); }
.od-page-icon-purple { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); }
.od-page-icon-slate  { background: linear-gradient(135deg, #475569 0%, #64748b 100%); }

/* ============================================================
   ADATCSEMPÉK (irányítópult)
   ============================================================ */
.od-stat-card-light {
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    box-shadow: var(--od-shadow-sm);
    transition: box-shadow var(--od-transition), transform var(--od-transition);
}
.od-stat-card-light:hover { box-shadow: var(--od-shadow); transform: translateY(-2px); }

.od-stat-card-light-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--od-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.od-stat-light-blue  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.od-stat-light-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.od-stat-light-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.od-stat-light-gray  { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }
/* ⚠️ A PIROS a NAV-tartozáshoz és az átlépett értékhatárhoz kell. A borostyán ott
   kevés: a tartozás TÉNY, nem figyelmeztetés – és a mellette álló zöld túlfizetéstől
   egy pillantásra megkülönböztethetőnek kell lennie. */
.od-stat-light-red   { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }

.od-stat-card-light-body { flex: 1; min-width: 0; }
.od-stat-card-light-label    { font-size: .8rem;  color: var(--od-gray-600); margin-bottom: 2px; }
.od-stat-card-light-value    { font-size: 1.4rem; font-weight: 800; color: var(--od-gray-800); line-height: 1.2; word-break: break-word; }
.od-stat-card-light-sublabel { font-size: .78rem; color: var(--od-gray-400); margin-top: 2px; }

/* ============================================================
   BADGE-EK
   ============================================================ */
.od-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
}
.od-badge-admin  { background: #EDE9FE; color: #6D28D9; }
.od-badge-konyv  { background: #D1FAE5; color: #065F46; }
.od-badge-iroda  { background: #DBEAFE; color: #1D4ED8; }
.od-badge-ugyfel { background: #FEF3C7; color: #92400E; }
.od-badge-other  { background: var(--od-gray-100); color: var(--od-gray-600); }

.od-twofa-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 500;
}
.od-twofa-on  { color: #059669; }
.od-twofa-off { color: var(--od-gray-400); }

/* ============================================================
   FIÓKBEÁLLÍTÁSOK (Account/Manage)
   ============================================================ */
.od-manage-nav {
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    padding: .5rem;
    box-shadow: var(--od-shadow-sm);
}
.od-manage-nav .nav-link {
    color: var(--od-gray-600);
    border-radius: var(--od-radius);
    padding: .6rem .9rem;
    font-size: .92rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.od-manage-nav .nav-link:hover {
    background: var(--od-gray-50);
    color: var(--od-primary);
    text-decoration: none;
}
.od-manage-nav .nav-link.active {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    font-weight: 600;
}

/* TOTP titok / helyreállítási kódok – monospace, jól olvasható blokk */
.od-code-block {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    background: var(--od-gray-50);
    border: 1px dashed var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .75rem 1rem;
    font-size: .95rem;
    letter-spacing: .08em;
    word-break: break-all;
}

/* ============================================================
   LAPOZÓ
   ============================================================ */
.od-pagination-bar { background: var(--od-gray-50); border-radius: 0 0 var(--od-radius-lg) var(--od-radius-lg); }
.od-pagesize-select { width: auto; min-width: 70px; font-size: .85rem; }

.od-pager { display: flex; align-items: center; gap: 4px; }

.od-pager-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--od-gray-200);
    background: var(--od-white);
    color: var(--od-gray-600);
    font-size: .8rem;
    cursor: pointer;
    transition: background var(--od-transition), border-color var(--od-transition), color var(--od-transition);
    padding: 0;
}
.od-pager-nav:hover:not(:disabled) {
    background: var(--od-primary-xlt);
    border-color: var(--od-primary-light);
    color: var(--od-primary);
}
.od-pager-nav:disabled { opacity: .4; cursor: default; }

.od-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--od-gray-700);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0 6px;
    transition: background var(--od-transition), color var(--od-transition), border-color var(--od-transition);
}
.od-pager-num:hover:not(.od-pager-active) {
    background: var(--od-gray-100);
    border-color: var(--od-gray-200);
}
.od-pager-active {
    background: var(--od-primary) !important;
    color: var(--od-white) !important;
    border-color: var(--od-primary) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(21,96,189,.25);
}

/* ============================================================
   MEGERŐSÍTŐ ABLAK (ConfirmDialog)
   ============================================================ */
.od-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1055;
}

.od-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: min(480px, calc(100vw - 2rem));
    background: var(--od-white);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-lg);
    outline: none;
}

.od-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem .75rem;
}

.od-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--od-gray-800);
    margin: 0;
}

.od-modal-body {
    padding: 0 1.5rem 1.25rem;
    color: var(--od-gray-600);
    font-size: .93rem;
    line-height: 1.6;
}

.od-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--od-gray-100);
}

/* ── Bérszámfejtési TÖRLÉS ablaka (od-pd-) ────────────────────────────────────────
   Négy blokk, mindegyik SAJÁT jelentéssel: mi törlődik · mi tiltja · mit kell tudni ·
   mit vizsgáltunk meg hiába. ⚠️ A színen kívül IKON is jelöli mindet: színtévesztőnek a
   szín önmagában nem elég (ugyanaz a szabály, mint az egyeztetés állapotainál). */
.od-pd { max-width: 620px; }
.od-pd-subject { margin: 0 0 .8rem; font-weight: 700; color: var(--od-gray-800); }
.od-pd-block { margin-bottom: .7rem; padding: .65rem .8rem; border-radius: var(--od-radius); border: 1px solid var(--od-gray-200); background: var(--od-gray-50); }
.od-pd-block ul { margin: .35rem 0 0; padding-left: 1.15rem; }
.od-pd-block li { font-size: .85rem; }
.od-pd-head { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.od-pd-block.is-stop { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
.od-pd-block.is-cascade { border-color: #FDE68A; background: #FEF3C7; color: #92400E; }
.od-pd-block.is-warn { border-color: var(--od-gray-200); background: var(--od-gray-50); color: var(--od-gray-700); }
.od-pd-block.is-ok { border-color: var(--od-success-line); background: var(--od-success-xlt); color: var(--od-success-dark); }
.od-pd-none { margin: .35rem 0 0; font-size: .85rem; }
.od-pd-final { margin: .5rem 0 0; font-size: .82rem; font-weight: 600; }
.od-pd-exit { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--od-gray-100); font-size: .82rem; color: var(--od-gray-600); }

/* A dolgozó törlésének sávja a Jogviszonyok fül alján – halvány piros keret, nem tömör:
   valódi, de ritka művelet, és a szomszédos „Új jogviszony" gombbal nem versenyezhet. */
.od-pb-danger {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .7rem .9rem; border: 1px solid #FCA5A5; border-radius: var(--od-radius); background: #FEF2F2;
    font-size: .85rem; color: #991B1B;
}

/* ============================================================
   TOAST ÉRTESÍTÉSEK (jobb felső sarok)
   A konténert a toast.js hozza létre közvetlenül a <body>-n.
   ============================================================ */
.od-toast-container {
    position: fixed;
    /* A fix navbar alatt kezdődik, hogy ne takarja a profil-menüt. */
    top: calc(var(--od-navbar-h) + 1rem);
    right: 1rem;
    z-index: 1080;               /* a navbar (1030) és a dropdownok fölött */
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(380px, calc(100vw - 2rem));
    /* A konténer maga ne fogja el a kattintást a mögötte lévő felülettől –
       csak maguk a toastok kattinthatók (lásd .od-toast pointer-events). */
    pointer-events: none;
}

.od-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-400);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-lg);
    font-size: .9rem;
    line-height: 1.45;
    color: var(--od-gray-800);

    /* Belépő animáció kiindulópontja */
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity .22s ease, transform .22s ease;
}

.od-toast--visible { opacity: 1; transform: translateX(0); }
.od-toast--leaving { opacity: 0; transform: translateX(1.5rem); }

.od-toast-icon { font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.od-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.od-toast-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--od-gray-400);
    font-size: .75rem;
    line-height: 1;
    padding: .2rem;
    margin: -.1rem -.25rem 0 0;
    border-radius: 4px;
    cursor: pointer;
    transition: color var(--od-transition), background var(--od-transition);
}
.od-toast-close:hover { color: var(--od-gray-800); background: var(--od-gray-100); }

.od-toast--success { border-left-color: var(--od-success); }
.od-toast--success .od-toast-icon { color: var(--od-success); }

.od-toast--error   { border-left-color: var(--od-danger); }
.od-toast--error .od-toast-icon   { color: var(--od-danger); }

.od-toast--warning { border-left-color: var(--od-warning); }
.od-toast--warning .od-toast-icon { color: var(--od-warning); }

.od-toast--info    { border-left-color: var(--od-primary); }
.od-toast--info .od-toast-icon    { color: var(--od-primary); }

/* Mobilon teljes szélesség, a képernyő tetején. */
@media (max-width: 575.98px) {
    .od-toast-container {
        top: .75rem;
        right: .75rem;
        left: .75rem;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-toast { transition: opacity .01s linear; transform: none; }
    .od-toast--visible, .od-toast--leaving { transform: none; }
}

/* ============================================================
   BLAZOR HIBASÁV / ÚJRACSATLAKOZÁS
   ============================================================ */
#blazor-error-ui {
    color-scheme: light only;
    background: #FEF3C7;
    border-top: 1px solid #FDE68A;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1060;
    color: #92400E;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .75rem;
}

/* ============================================================
   MUNKATERÜLET  [ikonsáv | tartalom | segédeszközök]
   ============================================================ */

/* Az oldaltartalom burka. Normál (sáv nélküli) nézetben középre zárt, a
   munkaterület középső oszlopában viszont teljes szélességű – ott a szélességet
   már a rács korlátozza, egy második korlát csak helyet pazarolna. */
.od-page-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ⚠️ A korlát a MUNKATERÜLETEN KÍVÜL is érvényes. Enélkül a szabály némán csak a
   `.od-workspace-main` alatt élt, és a vállalkozás ADATLAPJA – ami statikus SSR, tehát
   nem lehet a WorkspaceLayout-ban (a rail gombjai `@onclick`-esek, ott nem futnának) –
   1320 px-en állt meg, miközben a LISTÁJA 1600 volt. A kettő közti ugrás megnyitáskor
   látszott. */
.od-page-wrap.od-page-readable { max-width: var(--od-content-max); }

.od-workspace-main .od-page-wrap { max-width: none; }

/* ⚠️ A munkaterület SZÁNDÉKOSAN felold minden szélesség-korlátot (a PDF szerkesztőnek
   tényleg kell a hely), de egy hétoszlopos TÁBLÁZAT nem lesz jobb attól, hogy
   szélesebb – csak széthúzódik. Ultraszéles kijelzőn a fájlnév és a dátum között
   közel 2000 px lett, és a szemnek végig kellett utaznia, hogy összekösse a kettőt.
   Ezért a listaoldalak visszakapják a korlátot. */
.od-workspace-main .od-page-wrap.od-page-readable { max-width: var(--od-content-max); }

/* ⚠️ A HARMADIK oszlop `auto`, nem fix 380px, és NEM a `has-panel` osztályon múlik.
   Az osztályt a LAYOUT rendereli (statikus SSR-en a kiszolgáláskori állapotból); ha a
   felhasználó utána nyit egy eszközt az interaktív SZIGETBEN, az osztály már nem
   frissülne – a rácsnak két oszlopa maradna, és a panel a tartalomra csúszna vagy
   kilógna. `auto` mellett a kérdés fel sem merül: üresen 0 széles, panellel a panel
   saját szélessége. */
.od-workspace {
    flex: 1;
    padding-top: var(--od-navbar-h);
    display: grid;
    grid-template-columns: var(--od-rail-w) minmax(0, 1fr) auto;
}

/* ⚠️ EXPLICIT oszlopok. A sáv és a panel egy szigetben, a tartalom előtt áll a DOM-ban;
   automatikus elhelyezéssel a panel a KÖZÉPSŐ oszlopba kerülne – a tartalom helyére. */
/* ⚠️ A `grid-row: 1` KÖTELEZŐ, nem díszítés. A szigetben a panel a tartalom ELŐTT áll a
   DOM-ban; a rács automatikus elhelyezése pedig „ritka" (sparse): miután a panelt a 3.
   oszlopba tette, a kurzor NEM lép vissza a 2.-be, tehát a tartalom a MÁSODIK SORBA
   kerülne – a panel alá. MÉRVE: a tartalom teteje 900 px lett, a sávé 64. */
.od-tool-rail      { grid-column: 1; grid-row: 1; }
.od-workspace-main { grid-column: 2; grid-row: 1; }
.od-tool-panel     { grid-column: 3; grid-row: 1; width: 380px; }

/* A sziget burkolója eltűnik az elrendezésből, hogy a sáv és a panel KÖZVETLEN
   rács-elem legyen. Enélkül egyetlen elemként kerülnének egy oszlopba. */
.od-workspace-island { display: contents; }

/* min-width:0 nélkül egy széles táblázat szétfeszítené a rács oszlopát,
   és az egész oldal vízszintesen görgethetővé válna. */
.od-workspace-main { min-width: 0; }

/* ---------- Bal oldali ikonsáv ---------- */
.od-tool-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .5rem;
    background: var(--od-white);
    border-right: 1px solid var(--od-gray-200);
    position: sticky;
    top: var(--od-navbar-h);
    height: calc(100vh - var(--od-navbar-h));
}

.od-tool-rail-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--od-gray-600);
    font-size: 1.05rem;
    transition: background var(--od-transition), color var(--od-transition), border-color var(--od-transition);
}
.od-tool-rail-btn:hover {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    border-color: #B8D4F5;
}
.od-tool-rail-btn.is-open {
    background: var(--od-primary);
    color: var(--od-white);
    border-color: var(--od-primary-dark);
}

.od-tool-rail-empty {
    color: var(--od-gray-400);
    font-size: 1.05rem;
    padding: .5rem 0;
}

.od-tool-rail-spacer { flex: 1; }

.od-tool-rail-count {
    font-size: .68rem;
    font-weight: 600;
    color: var(--od-gray-400);
    background: var(--od-gray-100);
    border-radius: 999px;
    padding: .1rem .4rem;
}
.od-tool-rail-count.is-full {
    color: var(--od-warning);
    background: #FFF7ED;
}

/* ---------- Jobb oldali eszközsáv ---------- */
.od-tool-panel {
    display: flex;
    flex-direction: column;
    background: var(--od-gray-50);
    border-left: 1px solid var(--od-gray-200);
    position: sticky;
    top: var(--od-navbar-h);
    height: calc(100vh - var(--od-navbar-h));
}

.od-tool-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--od-gray-200);
    background: var(--od-white);
}
.od-tool-panel-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--od-gray-700);
}
.od-tool-panel-count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--od-gray-400);
}

/* A sáv görgethető: ha több eszköz van nyitva, mint amennyi függőlegesen elfér,
   a többi görgetéssel elérhető. */
.od-tool-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ---------- Eszközkártya ("mini ablak") ---------- */
.od-tool-card {
    flex: 0 0 auto;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-sm);
    overflow: hidden;
}

.od-tool-card-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .55rem;
    background: var(--od-gray-50);
    border-bottom: 1px solid var(--od-gray-200);
}
.od-tool-card.is-collapsed .od-tool-card-head { border-bottom: none; }

.od-tool-card-chevron,
.od-tool-card-close {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--od-gray-600);
    font-size: .75rem;
    transition: background var(--od-transition), color var(--od-transition);
}
.od-tool-card-chevron:hover { background: var(--od-gray-200); }
.od-tool-card-close:hover { background: #FEF2F2; color: var(--od-danger); }

.od-tool-card-icon { color: var(--od-primary); font-size: .9rem; }

.od-tool-card-title {
    flex: 1;
    font-size: .82rem;
    font-weight: 600;
    color: var(--od-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-tool-card-body { padding: .6rem; }

/* ---------- Jegyzetek eszköz ---------- */
.od-notes-compose {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .75rem;
}
.od-notes-input {
    font-size: .82rem;
    resize: vertical;
}
.od-notes-add { align-self: flex-end; }

.od-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.od-notes-item {
    border: 1px solid var(--od-gray-200);
    border-radius: 8px;
    padding: .45rem .55rem;
}
.od-notes-text {
    font-size: .82rem;
    color: var(--od-gray-800);
    /* A jegyzet sortöréseit megtartjuk, a hosszú szót pedig tördeljük, hogy egy
       beillesztett URL ne feszítse szét a keskeny sávot. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.od-notes-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
}
.od-notes-time { font-size: .68rem; color: var(--od-gray-400); }
.od-notes-tag {
    font-size: .62rem;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    border-radius: 999px;
    padding: .05rem .4rem;
}
.od-notes-actions {
    margin-left: auto;
    display: flex;
    gap: .1rem;
}
.od-notes-actions .od-action-btn { width: 26px; height: 26px; font-size: .8rem; }

/* ---------- Feltöltési zóna ---------- */
.od-upload-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    background: var(--od-gray-50);
    transition: border-color var(--od-transition), background var(--od-transition);
}
.od-upload-zone:hover {
    border-color: var(--od-primary-light);
    background: var(--od-primary-xlt);
}
.od-upload-zone.is-busy { cursor: progress; opacity: .75; }

/* A fájlmező láthatatlanul KITÖLTI a zónát – így a kattintás bárhol megnyitja a
   tallózót, és a fájl ráhúzása is működik, külön drag-drop kód nélkül. */
.od-upload-zone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* A feltöltő OLDALON nagyobb a zóna: ott ez a fő művelet, nem egy mellékes sáv. */
.od-upload-zone-lg { padding: 3rem 1rem; }
.od-upload-zone-lg .od-upload-icon { font-size: 2.4rem; }
.od-upload-zone-lg .od-upload-title { font-size: 1.05rem; }

.od-upload-icon { font-size: 1.6rem; color: var(--od-primary); }
.od-upload-title { font-weight: 600; color: var(--od-gray-700); font-size: .92rem; }
.od-upload-hint { font-size: .78rem; color: var(--od-gray-400); }

.od-upload-target {
    display: flex;
    align-items: center;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .55rem .85rem;
    font-size: .9rem;
    color: var(--od-gray-700);
}
.od-upload-target .bi { color: #D97706; }

/* A célmappát a KATEGÓRIA választotta, nem az, ahonnan a felhasználó érkezett.
   ⚠️ Külön kiemelés kell rá: enélkül a doboz ugyanúgy néz ki, mint amikor a mappa
   az, ahol állt – és a felhasználó csak feltöltés UTÁN venné észre, hogy máshova
   került. A .bi felülírása a rendes szabály UTÁN áll, különben a 0-1-1
   specifikusságú `.od-upload-target .bi` nyerne (a későbbi azonos súlyú szabály visz). */
.od-upload-target.is-auto {
    background: var(--od-primary-xlt);
    border-color: var(--od-primary-light);
    color: var(--od-primary-dark);
}
.od-upload-target.is-auto .bi { color: var(--od-primary); }

/* Az "Új vállalkozás" a cégválasztó alján – vizuálisan is elkülönül a
   cégváltástól, mert nem ugyanaz a művelettípus. */
.od-company-add {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--od-primary);
}
.od-company-add:hover { background: var(--od-primary-xlt); color: var(--od-primary-dark); }

/* ============================================================
   CÉGÁTVÉTELI MEGKERESÉSEK
   ============================================================ */

.od-request-note {
    background: var(--od-primary-xlt);
    border: 1px solid #B8D4F5;
    color: var(--od-primary-dark);
    border-radius: var(--od-radius);
    padding: .55rem .85rem;
    font-size: .85rem;
}

.od-request-message {
    background: var(--od-gray-50);
    border-left: 3px solid var(--od-gray-200);
    border-radius: 0 var(--od-radius) var(--od-radius) 0;
    padding: .5rem .75rem;
    font-size: .88rem;
    color: var(--od-gray-700);
    overflow-wrap: anywhere;
}

.od-request-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .75rem;
    margin: 0;
    font-size: .88rem;
}
.od-request-facts dt { color: var(--od-gray-400); font-weight: 500; }
.od-request-facts dd { margin: 0; color: var(--od-gray-800); }

/* Az irányítópult figyelmeztető sávja – itt derül ki, hogy megkeresés érkezett. */
/* ---------- Irányítópult: sávok és teendőlista (od-dash-) ----------

   Az `od-request-alert` KIKERÜLT: az irányítópult átalakításával egyetlen lap sem
   használta többé (mérve: 0 találat). Egy sehol nem hivatkozott szabály úgy néz ki,
   mintha élne – és a következő olvasó azt hinné, van rá minta.                        */

.od-dash-band { margin-bottom: 2rem; }

.od-dash-band-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.od-dash-band-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    margin: 0 0 .75rem;
}

.od-dash-band-note { font-size: .8rem; color: var(--od-gray-500); }

/* ⚠️ Az üres állapot UGYANOLYAN KÁRTYA, mint az alatta lévő áttekintés – szürke sávként
   „kikapcsolt" felületnek látszott, pedig ez egy VALÓDI, pozitív állítás: nincs teendő.
   Ezért a `.od-dc` négy tulajdonságát (fehér háttér, keret, lekerekítés, árnyék) átvesszük,
   és a vízszintes paddingja is AZONOS, hogy a szöveg egy vonalban álljon a kártyacímekkel.
   A betűszín marad `gray-500`: az `.od-dc-sub` – vagyis a kártyák SAJÁT „nincs adat"
   szövege – is ez, tehát a két üzenet így egy nyelvet beszél. */
.od-dash-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--od-gray-500);
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-sm);
    padding: 1rem 1.15rem;
}
.od-dash-empty .bi { color: var(--od-success); font-size: 1.15rem; }

.od-dash-todo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* A SÚLYT a bal oldali sáv adja, nem a teljes háttér: húsz teendőnél a színes hátterek
   egymás alatt olvashatatlan szőnyeggé állnának össze. */
.od-dash-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-300);
    border-radius: var(--od-radius-lg);
    padding: .85rem 1rem;
    box-shadow: var(--od-shadow-sm);
}

.od-dash-icon { font-size: 1.25rem; line-height: 1.5; color: var(--od-gray-400); }
.od-dash-body { flex: 1; min-width: 0; }
.od-dash-title { font-weight: 600; color: var(--od-gray-800); }
.od-dash-detail { font-size: .85rem; color: var(--od-gray-500); margin-top: .15rem; }

/* ⚠️ `flex-shrink: 0` + `align-self: center`: a gomb ne nyúljon a sor teljes
   magasságára, és két soros magyarázatnál se törjön szét. */
.od-dash-action { flex-shrink: 0; align-self: center; white-space: nowrap; }

.od-dash-item.is-overdue { border-left-color: var(--od-danger); background: #FEF2F2; }
.od-dash-item.is-overdue .od-dash-icon { color: var(--od-danger); }

.od-dash-item.is-due { border-left-color: var(--od-warning); background: #FFFBEB; }
.od-dash-item.is-due .od-dash-icon { color: var(--od-warning); }

.od-dash-item.is-info { border-left-color: var(--od-primary-light); }
.od-dash-item.is-info .od-dash-icon { color: var(--od-primary); }

.od-dash-inbox { margin-top: .6rem; }

/* ── „Emlékeztess később" ────────────────────────────────────────────────────
   ⚠️ A két gomb KÖZÖS dobozban áll. Külön-külön hagyva mindkettőn ott lenne a
   `flex-shrink: 0`, és keskeny soron a tartalmuk KITOLNÁ a lapot – pontosan az a
   túlcsordulás, amit a `/receipts` gombsávjánál már egyszer meg kellett mérni.  */
.od-dash-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    align-self: center;
}

/* ⚠️ SZÜRKE (outline), nem kiemelt: a művelet a sor ELHALASZTÁSA, nem az
   elvégzése. Kiemelt gombként azzal versenyezne, amit tényleg tenni kell.

   ⚠️ **A FELIRAT MOBILON IS MARAD** – tudatos eltérés a `/receipts` „Fotózás"
   gombjától, ahol az ikon egyedül maradt. Ott KÉT ikonos gomb állt egymás mellett
   szűk soron; itt a szomszéd egy SZÖVEGES gomb („Megnyitás"), tehát nincs mit
   összetéveszteni – és MÉRVE 375 px-en a két gomb egy sorban elfér (209 + 91 px a
   306 px-es dobozban), a felirat egy sorban olvasható. Elrejtve az óra-ikon
   egyedül nem mondaná meg, hogy ELHALASZTÁSRÓL van szó.                        */
.od-dash-snooze {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ── Elhalasztott teendők ────────────────────────────────────────────────────
   ⚠️ **NEM tűnhetnek el nyomtalanul.** Összecsukott szakasz, darabszámmal, egy
   kattintással visszatehető – a `/receipts` „Nem kell bizonylat" mintája.

   ⚠️ SZÜRKE háttéren, kisebb betűvel: ez nem teendő, hanem AMIT FÉLRETETTEK. A
   teendők súlyával megjelenítve pont azt a különbséget mosná el, amiért a
   felhasználó elhalasztotta őket.                                             */
.od-dash-snoozed {
    margin-top: .75rem;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
}

.od-dash-snoozed-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--od-gray-500);

    /* A böngésző saját háromszögét levesszük – a nyilat mi rajzoljuk (jobb szélen). */
    list-style: none;
}

.od-dash-snoozed-head::-webkit-details-marker { display: none; }

.od-dash-snoozed-head .od-collapse-arrow { margin-left: auto; }

/* ── „TOVÁBBI N TEENDŐ" ───────────────────────────────────────────────────────────
   ⚠️ NEM az elhalasztottak szürke fiókja: ezek ÉLŐ teendők, csak nem férnek az első négy
   közé. Ezért a gomb a LISTA FOLYTATÁSÁNAK látszik (fehér, szaggatott keret, a tételek
   szélességében), nem egy lezárt, szürke szakasznak – az utóbbi azt sugallná, hogy ami
   mögötte van, az már nem sürgős.

   ⚠️ GOMB, nem `<details>`: a `<details>` becsukását a böngésző alapstílusa végzi, amit a
   lista `display: flex`-e NÉMÁN legyőzött volna (119. tanulság). Így egy lista van, és a
   komponens dönti el, hány sorát rajzolja ki. */
.od-dash-more-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin-top: .6rem;
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    color: var(--od-gray-600);
    background: var(--od-white);
    border: 1px dashed var(--od-gray-300);
    border-radius: var(--od-radius-lg);
}

.od-dash-more-head .od-collapse-arrow { margin-left: auto; }
.od-dash-more-head:hover { border-color: var(--od-gray-400); color: var(--od-gray-800); }
.od-dash-more-head:focus-visible { outline: 2px solid var(--od-primary); outline-offset: 2px; }

/* Kinyitva a nyíl felfelé mutat: a gomb ilyenkor a VISSZACSUKÁST jelenti. */
.od-dash-more-head[aria-expanded="true"] .od-collapse-arrow { transform: rotate(180deg); }

/* A lejárt tételek száma PIROSAN: a vágás a helyet szabja meg, a sürgősséget nem rejtheti el. */
.od-dash-more-overdue { color: var(--od-danger); font-weight: 700; }

.od-dash-snoozed-list {
    list-style: none;
    margin: 0;
    padding: 0 .85rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.od-dash-snoozed-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .6rem .75rem;
}

.od-dash-snoozed-body { flex: 1; min-width: 0; }

.od-dash-snoozed-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--od-gray-800);
}

.od-dash-snoozed-note {
    font-size: .8rem;
    color: var(--od-gray-500);
    margin-top: .1rem;
}

.od-dash-restore { flex-shrink: 0; white-space: nowrap; }

/* 576 px alatt a gombok a saját sorukba kerülnek – a 44 px-es érintési célpontot az
   általános mobil szabály adja.

   ⚠️ A gombdoboz kap teljes szélességet, és a KÉT gomb OSZTOZIK rajta (`flex: 1`).
   Korábban itt `.od-dash-action { width: 100% }` állt; az a második gomb
   megjelenésével azt jelentené, hogy mindkettő 100%-ot kér ugyanabban a sorban.  */
@media (max-width: 575.98px) {
    .od-dash-item { flex-wrap: wrap; }
    .od-dash-actions { width: 100%; align-self: stretch; }
    .od-dash-actions > * { flex: 1; }

    .od-dash-snoozed-item { flex-wrap: wrap; }
    .od-dash-restore { width: 100%; }
}

/* ---------- Irányítópult: ÁTTEKINTŐ kártyák (od-dc-) ----------

   ⚠️ SAJÁT névtér, nem az `od-dash-` bővítése: az a TEENDŐLISTÁÉ (sorok, bal sávval),
   ez a KÁRTYÁKÉ (dobozok, diagrammal és sávokkal). Egy kész osztály más célra pontosan
   a 18. megtanult hiba.                                                                */

.od-dc {
    display: flex;
    flex-direction: column;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    padding: 1rem 1.15rem 1.15rem;
    box-shadow: var(--od-shadow-sm);
}

/* A diagram SAJÁT, teljes szélességű sora – ő a kártyák „hőse". */
.od-dc-hero { margin-bottom: 1rem; }

/* ⚠️ CSS Grid `auto-fit`, NEM Bootstrap-oszlopok. Vegyes szélességű oszlopokkal (7+4+4+4)
   mérve az első sor 11-et töltött ki a 12-ből, a második 8-at: a jobb szél csipkés lett.
   Az `auto-fit` mindig EGYENLŐ oszlopokat ad – ahány kártya van, annyit –, és a rács
   soronként magától egyenlő magasságot oszt, tehát nem kell `h-100` sem.

   ⚠️ A `minmax(0, 1fr)` MÁSODIK fele a lényeg: `1fr` önmagában a tartalom minimális
   méretét is tiszteletben tartaná, és egy hosszú, nem törhető szöveg (partnernév,
   összeg) kifeszítené az oszlopot a rácson túlra. */
.od-dc-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    align-items: stretch;
}

/* ── „Bevételek és költségek – könyvelés szerint" (od-lb-) ─────────────────────────
   Teljes szélességű kártya KÉT gyűrűvel. ⚠️ A rács `auto-fit`-tel: 768 px alatt a két gyűrű
   egymás ALÁ kerül magától, külön töréspont nélkül – ugyanaz a minta, mint a kártya-rácsnál. */
.od-lb { margin-bottom: 1rem; }
.od-lb-years button { min-width: 58px; justify-content: center; }
.od-lb-source { margin: -.2rem 0 .6rem; font-size: .78rem; color: var(--od-gray-500); }

.od-lb-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.od-lb-side { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.od-lb-side-head { display: flex; align-items: center; gap: .6rem; min-height: 27px; }
.od-lb-side-title { font-size: .82rem; font-weight: 700; color: var(--od-gray-700); }

.od-lb-back {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: auto; padding: 2px 8px;
    border: 1px solid var(--od-gray-200); border-radius: 999px; background: var(--od-white);
    font-family: inherit; font-size: .75rem; color: var(--od-gray-600); cursor: pointer;
}
.od-lb-back:hover { background: var(--od-gray-100); color: var(--od-gray-800); }

/* A harmadik szint morzsája (2026‑09‑13): a csoport neve, egyből a csoportokhoz visz. A `margin-left: auto`
   ITT áll, és az utána jövő Vissza gomb ilyenkor nem tolja el magát – a kettő együtt kerül a jobb szélre. */
.od-lb-crumb {
    margin-left: auto; padding: 0; border: 0; background: transparent;
    font-family: inherit; font-size: .75rem; font-weight: 600; color: var(--od-primary); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%;
}
.od-lb-crumb:hover { text-decoration: underline; }
.od-lb-crumb-sep { font-size: .75rem; color: var(--od-gray-400); }
.od-lb-crumb ~ .od-lb-back { margin-left: 0; }

/* A gyűrű, és MELLETTE a részlet-sáv a jelmagyarázattal (2026‑09‑13). ⚠️ `flex-wrap`: keskeny oldalon (a
   kártya-oldal 320 px-ig szűkül, és a munkaterület jobb sávjában is megjelenik) a panel magától a gyűrű ALÁ
   tör, töréspont nélkül – ugyanúgy, ahogy a két gyűrű rácsa. */
.od-lb-body { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* A vászon FIX méretű befoglalóban: a Chart.js a szülő méretéhez igazít, és a canvas saját
   `height`-jét maga írja – enélkül a gyűrű minden újrarajzoláskor nőne. Az `auto` margó csak akkor
   hat, ha a panel alá tört (egy sorban a panel növekedése elnyeli a szabad helyet): ekkor középre teszi. */
.od-lb-ring { position: relative; flex: 0 0 200px; width: 200px; height: 200px; margin: 0 auto; }
.od-lb-panel { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }

/* A részlet-sáv: alapból „Összesen", rámutatva a szelet TELJES neve (legfeljebb két sor), összege és
   részaránya. ⚠️ A szelet színe CSAK a bal csíkra kerül (`--od-lb-accent`, a rajzoló állítja): a borostyán és
   a zöld a halvány háttéren kis SZÖVEGKÉNT nem adná ki a kellő kontrasztot. ⚠️ A `min-height` a két soros
   névhez méretezett – különben rámutatáskor a sáv magassága ugrálna, és alatta a jelmagyarázat is. */
.od-lb-detail {
    --od-lb-accent: var(--od-gray-300);
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 4.6rem; padding: .35rem .65rem;
    border-left: 3px solid var(--od-lb-accent);
    border-radius: 0 8px 8px 0; background: var(--od-gray-50);
}
.od-lb-detail-label {
    font-size: .78rem; font-weight: 600; line-height: 1.35; color: var(--od-gray-600);
    overflow-wrap: break-word; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.od-lb-detail-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
.od-lb-detail-value { font-size: 1.1rem; font-weight: 800; color: var(--od-gray-800); font-variant-numeric: tabular-nums; }
.od-lb-detail-sub { font-size: .78rem; font-weight: 700; color: var(--od-gray-600); font-variant-numeric: tabular-nums; }

.od-lb-legend { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.od-lb-item {
    display: flex; align-items: center; gap: .45rem; width: 100%;
    padding: 3px 6px; border: 0; border-radius: 6px; background: transparent;
    font-family: inherit; font-size: .78rem; color: var(--od-gray-700); text-align: left;
}
.od-lb-item.is-drill { cursor: pointer; }
.od-lb-item.is-drill:hover { background: var(--od-gray-100); color: var(--od-gray-800); }
.od-lb-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--od-gray-300); }
.od-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-lb-pct { flex-shrink: 0; font-weight: 600; color: var(--od-gray-600); }

/* A jelmagyarázat pöttyei UGYANABBAN a sorrendben kapják a palettát, mint a gyűrű szeletei –
   a színeket a rajzoló a CSS-változókból veszi, tehát itt is azokból kell. */
.od-lb-side:nth-child(1) .od-lb-legend li:nth-child(1) .od-lb-dot { background: var(--od-success); }
.od-lb-side:nth-child(1) .od-lb-legend li:nth-child(2) .od-lb-dot { background: rgb(var(--od-pz-c7-rgb)); }
.od-lb-side:nth-child(1) .od-lb-legend li:nth-child(3) .od-lb-dot { background: rgb(var(--od-pz-c6-rgb)); }
.od-lb-side:nth-child(1) .od-lb-legend li:nth-child(4) .od-lb-dot { background: rgb(var(--od-pz-c8-rgb)); }
.od-lb-side:nth-child(1) .od-lb-legend li:nth-child(5) .od-lb-dot { background: var(--od-taxfree); }
.od-lb-side:nth-child(1) .od-lb-legend li:nth-child(6) .od-lb-dot { background: var(--od-success-dark); }
.od-lb-side:nth-child(2) .od-lb-legend li:nth-child(1) .od-lb-dot { background: rgb(var(--od-pz-c1-rgb)); }
.od-lb-side:nth-child(2) .od-lb-legend li:nth-child(2) .od-lb-dot { background: var(--od-warning); }
.od-lb-side:nth-child(2) .od-lb-legend li:nth-child(3) .od-lb-dot { background: rgb(var(--od-pz-c6-rgb)); }
.od-lb-side:nth-child(2) .od-lb-legend li:nth-child(4) .od-lb-dot { background: rgb(var(--od-pz-c8-rgb)); }
.od-lb-side:nth-child(2) .od-lb-legend li:nth-child(5) .od-lb-dot { background: rgb(var(--od-pz-c7-rgb)); }
.od-lb-side:nth-child(2) .od-lb-legend li:nth-child(6) .od-lb-dot { background: var(--od-taxfree); }

/* A hiányzó leképezés és a lemaradás: SEMLEGES, illetve borostyán – egyik sem hiba, mindkettő
   elvégzendő munka. */
.od-lb-missing {
    display: flex; gap: .6rem; padding: .7rem .8rem;
    border: 1px solid var(--od-gray-200); border-radius: var(--od-radius); background: var(--od-gray-50);
    font-size: .82rem; color: var(--od-gray-700);
}
.od-lb-missing-sub { margin-top: .2rem; font-size: .78rem; color: var(--od-gray-600); }

/* A Számlatükörre vivő link – CSAK irodai munkatársnak jelenik meg (a fül staff-only). Halk,
   de kattintható: a hiányt a felhasználó ott tudja megszüntetni, ahol a leképezést állítja. */
.od-lb-missing-link {
    display: inline-flex; align-items: center; margin-top: .35rem;
    font-size: .78rem; font-weight: 600; color: var(--od-primary); text-decoration: none;
}
.od-lb-missing-link:hover { text-decoration: underline; }
.od-lb-warn { color: #92400E; }
.od-lb-lag {
    display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .6rem .8rem;
    border: 1px solid #FDE68A; border-radius: var(--od-radius); background: #FEF3C7;
    font-size: .8rem; color: #92400E;
}

.od-dc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .85rem;
}

.od-dc-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--od-gray-800);
    margin: 0;
}
.od-dc-title .bi { color: var(--od-gray-400); margin-right: .35rem; }

.od-dc-note { font-size: .8rem; color: var(--od-gray-500); }
.od-dc-link { font-size: .8rem; color: var(--od-primary); text-decoration: none; }
.od-dc-link:hover { text-decoration: underline; }

/* ---- Nagy számok (bevétel / kiadás / egyenleg) ---- */
.od-dc-figures {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-bottom: .9rem;
}

.od-dc-fig { display: flex; flex-direction: column; }
.od-dc-fig-label { font-size: .78rem; color: var(--od-gray-500); }

/* ⚠️ `tabular-nums`: arányos számjegyekkel az egymás melletti összegek eltérő szélesek
   lennének, és a szem nem tudná összevetni őket. */
.od-dc-fig-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}
.od-dc-fig.is-in  .od-dc-fig-value { color: var(--od-success); }
.od-dc-fig.is-out .od-dc-fig-value { color: var(--od-danger); }

/* ⚠️ A POZITÍV egyenleg SZÁNDÉKOSAN semleges, nem zöld: a zöld itt már a „Bevétel"-é, és
   a kettőt azonos színnel a szem összemosná. A szabály KI VAN ÍRVA, pedig csak az
   alapértelmezést ismétli – enélkül az `is-bal` osztály mögött nem állna semmi, és a
   következő olvasónak hibának látszana (18. megtanult hiba). */
.od-dc-fig.is-bal .od-dc-fig-value { color: var(--od-gray-800); }

/* ⚠️ FIX magasságú befoglaló: a Chart.js a szülő méretéhez igazít, és a canvas saját
   `height`-jét maga írja – enélkül a diagram minden újraméretezéskor zsugorodna. */
.od-dc-chart { position: relative; height: 190px; }

.od-dc-warn { font-size: .78rem; color: var(--od-gray-500); margin: .6rem 0 0; }

/* ---- Nagy szám + alcím (bizonylatok, feladatok) ---- */
.od-dc-big {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}
.od-dc-sub { font-size: .82rem; color: var(--od-gray-500); margin-bottom: .75rem; }

/* ---- Haladássáv (értékhatár) ---- */
.od-dc-bar-row + .od-dc-bar-row { margin-top: .85rem; }

.od-dc-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .85rem;
}
.od-dc-bar-name { font-weight: 600; color: var(--od-gray-800); }
.od-dc-bar-pct  { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--od-gray-600); }

.od-dc-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--od-gray-100);
    overflow: hidden;
    margin: .3rem 0 .25rem;
}
.od-dc-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--od-gray-400); }

.od-dc-bar-foot { font-size: .76rem; color: var(--od-gray-500); font-variant-numeric: tabular-nums; }

.od-dc-assumed {
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: var(--od-radius);
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    font-size: .72rem;
}

/* A négy szint színe – ugyanaz a rangsor, amit a `RevenueThresholdLevel` ad. */
.od-dc-bar-row.is-ok          .od-dc-bar > span { background: var(--od-success); }
.od-dc-bar-row.is-approaching .od-dc-bar > span { background: var(--od-primary); }
.od-dc-bar-row.is-near        .od-dc-bar > span { background: var(--od-warning); }
.od-dc-bar-row.is-exceeded    .od-dc-bar > span { background: var(--od-danger); }

/* ── A 100%-os határ jelölése túllépéskor ────────────────────────────────────
   ⚠️ UGYANAZ a geometria, mint a `/finances` `od-rt-` sávjánál – a SZABÁLY is
   közös (`RevenueThresholds.Bar`). Két számítás ugyanarra a sávra azt adná, hogy
   ugyanaz a vállalkozás a két lapon MÁS helyen látná a határt.
   ⚠️ A `has-over` itt is KÖTELEZŐ: az `is-exceeded` a szint, ami PONTOSAN 100%-ot
   is jelent – ott nincs mit jelölni, marad a tele piros sáv.                    */
.od-dc-bar { position: relative; }

.od-dc-bar-row.is-exceeded .od-dc-bar.has-over > span { background: var(--od-warning); }

/* ⚠️ **A KÉT OVERLAY `div`, NEM `span` – és ez MÉRT hiba javítása.** Span-ként a fenti
   szín-szabályok MEGFOGTÁK őket: `.od-dc-bar-row.is-exceeded .od-dc-bar.has-over > span`
   specifikussága 0-4-0, egy `.od-dc-bar > span.od-dc-bar-over` szelektoré viszont csak
   0-2-1 – tehát a BOROSTYÁN nyert, és a túllépő szakasz meg a vonal borostyán alapon
   borostyán lett, vagyis LÁTHATATLAN. Elemet váltva a specifikusság-harc szerkezetileg
   megszűnik: a `> span` szabályok a `div`-eket el sem érik.
   ⚠️ Tehát: EBBE a sávba új `span`-t tenni nem szabad – az örökli a kitöltés stílusát. */
.od-dc-bar .od-dc-bar-over {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: var(--od-danger);
}

.od-dc-bar .od-dc-bar-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(to bottom, #DC2626 0 2px, #FFFFFF 2px 4px);
}

/* ⚠️ Az SZJA-mentes keret az irányítópulton is IBOLYA marad – lásd a `/finances`
   ugyanilyen szabályát és az indoklását.                                          */
.od-dc-bar-row.is-taxfree .od-dc-bar.has-over > span { background: #A78BFA; }
.od-dc-bar-row.is-taxfree .od-dc-bar-over { background: var(--od-taxfree); }
.od-dc-bar-row.is-taxfree .od-dc-bar-mark {
    background: repeating-linear-gradient(to bottom, var(--od-taxfree) 0 2px, #FFFFFF 2px 4px);
}
.od-dc-bar-row.is-near        .od-dc-bar-pct    { color: var(--od-warning); }
.od-dc-bar-row.is-exceeded    .od-dc-bar-pct    { color: var(--od-danger); }

/* Az SZJA-mentes keret: IBOLYA, mert nem ennek a skálának a tagja – lásd az
   `od-rt-row.is-taxfree` melletti indoklást. UGYANAZ a szín, mint a /finances
   kártyáján: ugyanaz a fogalom nem nézhet ki kétféleképpen a rendszerben.        */
.od-dc-bar-row.is-taxfree .od-dc-bar > span { background: var(--od-taxfree); }
.od-dc-bar-row.is-taxfree .od-dc-bar-pct    { color: #6D28D9; }

/* ── Lezárt ügyfélkapcsolat (archív hozzáférés) ───────────────────────────────
   ⚠️ SAJÁT névtér (`od-arc-`). A „felnyitva" NEM zöld és nem piros: a zöld
   „rendben"-t jelentene egy ideiglenes, naplózott hozzáférés-bővítésre, a piros
   hibát – ez viszont egyik sem, hanem egy TUDATOSAN nyitva tartott ajtó. Ezért
   borostyán: figyelemre méltó állapot, ami magától meg fog szűnni.              */
.od-arc-badge {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.od-arc-badge.is-open   { background: #FEF3C7; color: #92400E; }
.od-arc-badge.is-closed { background: var(--od-gray-100); color: var(--od-gray-600); }

/* ---- Halmozott sáv + jelmagyarázat ---- */
.od-dc-split {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--od-gray-100);
}
.od-dc-split > span { display: block; height: 100%; }

.od-dc-split .is-covered,  .od-dc-legend i.is-covered  { background: var(--od-success); }
.od-dc-split .is-missing,  .od-dc-legend i.is-missing  { background: var(--od-danger); }
.od-dc-split .is-skipped,  .od-dc-legend i.is-skipped  { background: var(--od-gray-300); }
.od-dc-split .is-open,     .od-dc-legend i.is-open     { background: var(--od-primary); }
.od-dc-split .is-progress, .od-dc-legend i.is-progress { background: var(--od-warning); }
.od-dc-legend i.is-late { background: var(--od-danger); }

.od-dc-legend {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    font-size: .8rem;
    color: var(--od-gray-600);
}
.od-dc-legend li { display: flex; align-items: center; gap: .35rem; }
.od-dc-legend i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.od-dc-legend b { color: var(--od-gray-800); font-variant-numeric: tabular-nums; }

/* ---- Fizetnivaló-lista ---- */
.od-dc-list { list-style: none; margin: 0; padding: 0; }

.od-dc-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--od-gray-100);
}
.od-dc-list li:last-child { border-bottom: 0; }

.od-dc-list-main { display: flex; flex-direction: column; min-width: 0; }

/* ⚠️ A megnevezés CSONKUL, az összeg NEM: a szem az összegek oszlopán fut végig, és egy
   levágott szám olvashatatlan. */
.od-dc-list-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--od-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.od-dc-list-when { font-size: .76rem; color: var(--od-gray-500); }

.od-dc-list-amount {
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}

/* ⚠️ NINCS `margin-left`: a szóközt a markup `&#160;`-ja adja, VALÓDI karakterként –
   margóval a `textContent` (képernyőolvasó, másolás) szóköz nélkül kapná meg. */
.od-dc-days { color: var(--od-gray-400); }

.od-dc-late {
    margin-left: .15rem;
    padding: 0 .35rem;
    border-radius: var(--od-radius);
    background: #FEE2E2;
    color: #B91C1C;
    font-weight: 700;
}
.od-dc-list li.is-overdue .od-dc-list-title { color: var(--od-danger); }

/* ---- Lábsor: ami a szeleteken KÍVÜLI tény (ellenőrizendő bizonylat, lejárt feladat) ----

   ⚠️ `margin-top: auto` – a kártya ALJÁRA tapad. A rácsban a kártyák magassága soronként
   egyenlő; enélkül a rövidebb tartalmú kártya lábsora a levegőben lógna középen.        */
.od-dc-foot {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: .7rem;
    font-size: .82rem;
    color: var(--od-gray-600);
}
/* A diagram alatti magyarázat. ⚠️ NEM `od-dc-foot`: annak `margin-top: auto`-ja a kártya aljára
   tapasztaná, a hero kártyán viszont utána még jönnek a deviza-figyelmeztetések. */
.od-dc-chartfoot {
    margin: .6rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--od-gray-500);
}

/* ---- Tempó-blokk az Értékhatárok kártyán ----
   ⚠️ SEMLEGES szürke, nem riasztó szín: ez TERVEZÉSI adat (milyen ütemben fogy a keret), nem hiba.
   Pirosra véve minden ősztől ott ülne, és elszürkítené a mellette lévő valódi jelzéseket. */
.od-dc-pace {
    margin-top: .85rem;
    padding: .7rem .8rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}
.od-dc-pace-head {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; color: var(--od-gray-600);
}
.od-dc-pace-grid {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline;
    gap: .15rem .6rem; margin: .5rem 0 0;
}
.od-dc-pace-grid dt { font-size: .78rem; color: var(--od-gray-500); }
.od-dc-pace-grid dd { margin: 0; font-size: .82rem; font-weight: 600; color: var(--od-gray-800); }
.od-dc-pace-note { margin: .45rem 0 0; font-size: .78rem; color: var(--od-gray-600); }

.od-dc-foot .bi { flex-shrink: 0; }
.od-dc-foot b { font-weight: 700; }
.od-dc-foot.is-warn { color: var(--od-warning); }
.od-dc-foot.is-late { color: var(--od-danger); }

/* ---- NAV-egyenleg a kártya alján ---- */
/* ⚠️ Ez `<a>`, nem `<div>`: a sáv az adófolyószámla bontására visz. Ezért kell a
   `text-decoration` és a `color` visszavétele – enélkül a böngésző alapértelmezett
   link-kékje felülírná a hangulat-osztályok (`is-debt` / `is-over`) színeit. */
.od-dc-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    /* ⚠️ `auto`, nem fix érték: a kártya aljára tapad, akkor is, ha a fizetnivaló-lista
       rövidebb a szomszéd kártyánál (lásd az `od-dc-foot` indoklását). */
    margin-top: auto;
    /* ⚠️ Itt korábban egy `padding-top: .85rem` is állt a shorthand ELŐTT – vagyis HALOTT
       deklaráció volt, amit a shorthand felülírt. Kiszedve: egy soha nem érvényesülő sor
       szándéknak látszik a következő olvasónak. A felső térközt a `margin-top: auto` adja. */
    padding: .6rem .75rem;
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    text-decoration: none;
    color: inherit;
}
.od-dc-balance:hover { border-color: var(--od-gray-300); }
.od-dc-bal-label { font-size: .78rem; color: var(--od-gray-600); }
.od-dc-bal-when  { font-size: .72rem; color: var(--od-gray-400); }

.od-dc-bal-value {
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ⚠️ A TARTOZÁS piros, a TÚLFIZETÉS zöld, a rendezett semleges – a NAV a kettőt KÉT
   külön mezőben adja, nem előjeles számként. */
.od-dc-balance.is-debt { background: #FEF2F2; border-color: #FECACA; }
.od-dc-balance.is-debt .od-dc-bal-value { color: var(--od-danger); }
.od-dc-balance.is-over { background: #F0FDF4; border-color: #BBF7D0; }
.od-dc-balance.is-over .od-dc-bal-value { color: var(--od-success); }
.od-dc-balance.is-flat .od-dc-bal-value { color: var(--od-gray-600); }

@media (max-width: 575.98px) {
    .od-dc { padding: .85rem 1rem 1rem; }
    .od-dc-chart { height: 165px; }
    .od-dc-figures { gap: .5rem 1.1rem; }
}

/* ---------- Feldolgozásra váró ügyfélanyag (irányítópult) ---------- */
.od-inbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.od-inbox-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--od-gray-200);
    background: var(--od-white);
    border-radius: var(--od-radius);
    padding: .5rem .75rem;
    transition: border-color var(--od-transition), background var(--od-transition);
}
.od-inbox-item:hover { border-color: var(--od-primary-light); background: var(--od-primary-xlt); }

.od-inbox-icon { color: var(--od-gray-400); }
.od-inbox-name { flex: 1; font-weight: 600; color: var(--od-gray-800); }
.od-inbox-chevron { color: var(--od-gray-400); font-size: .8rem; }

.od-inbox-count {
    min-width: 1.9rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    background: #FFF7ED;
    color: #B45309;
    border-radius: 999px;
    padding: .1rem .5rem;
}

/* ---------- Feltöltési haladás ---------- */
.od-progress {
    height: 10px;
    background: var(--od-gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.od-progress-bar {
    height: 100%;
    background: var(--od-primary);
    border-radius: 999px;
    transition: width .2s ease;
}

/* ---------- Feltöltés eredménye ---------- */
.od-upload-result {
    border-radius: var(--od-radius);
    padding: .6rem .85rem;
    font-size: .9rem;
}
.od-upload-result-ok {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}
.od-upload-result-fail {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.od-upload-errors {
    margin: 0;
    padding-left: 1.25rem;
    max-height: 320px;
    overflow-y: auto;
    font-size: .85rem;
    color: var(--od-gray-700);
}
.od-upload-errors li { margin-bottom: .2rem; overflow-wrap: anywhere; }

/* ---------- Dokumentumlista ---------- */
.od-doc-icon {
    color: var(--od-primary);
    margin-right: .45rem;
    font-size: 1rem;
}
.od-doc-name { word-break: break-word; }

/* ============================================================
   DOKUMENTUMKEZELŐ
   ============================================================ */

.od-doc-toolbar { padding-bottom: .85rem; }

/* ---------- Morzsamenü ---------- */
.od-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
}

.od-breadcrumb-item {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: .15rem .45rem;
    font-size: .85rem;
    color: var(--od-primary);
    transition: background var(--od-transition);
}
.od-breadcrumb-item:hover:not(:disabled) { background: var(--od-primary-xlt); }
.od-breadcrumb-item.is-current {
    color: var(--od-gray-700);
    font-weight: 600;
    cursor: default;
}

.od-breadcrumb-sep {
    font-size: .7rem;
    color: var(--od-gray-400);
}

/* ---------- Kijelölés-sáv ---------- */
.od-selection-bar { background: var(--od-primary-xlt); }

.od-doc-table tr.is-selected { background: var(--od-primary-xlt); }

/* ---------- Mappasor ---------- */
.od-folder-row { background: var(--od-gray-50); }

.od-folder-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--od-gray-800);
    font-weight: 600;
    text-align: left;
}
.od-folder-link:hover { color: var(--od-primary); }

.od-folder-icon { color: #D97706; font-size: 1.05rem; }

.od-folder-meta {
    font-weight: 400;
    font-size: .78rem;
    color: var(--od-gray-400);
}

/* ---------- Húzásos mozgatás ---------- */
.od-draggable { cursor: grab; }
.od-draggable:active { cursor: grabbing; }

.od-folder-row[draggable="true"] { cursor: grab; }

/* Az ejtési célpont kiemelése. A belső szegély (box-shadow) azért jobb a
   border-nél, mert nem tolja el a táblázat celláit húzás közben. */
.od-doc-table tr.is-drop-target > td {
    background: var(--od-primary-xlt);
    box-shadow: inset 0 2px 0 var(--od-primary), inset 0 -2px 0 var(--od-primary);
}

.od-breadcrumb-item.is-drop-target {
    background: var(--od-primary);
    color: var(--od-white);
}

/* ---------- Kuka ---------- */
.od-trash-banner {
    background: #FFF7ED;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: var(--od-radius);
    padding: .5rem .75rem;
    font-size: .85rem;
}

/* ---------- Kategória-jelvény ---------- */
.od-cat-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .12rem .55rem;
    white-space: nowrap;
}
.od-cat-blue   { background: #EBF3FC; color: #1560BD; }
.od-cat-teal   { background: #ECFDF5; color: #0F766E; }
.od-cat-sky    { background: #E0F2FE; color: #0369A1; }
.od-cat-amber  { background: #FFF7ED; color: #B45309; }
.od-cat-purple { background: #F3EEFF; color: #6D28D9; }
.od-cat-red    { background: #FEF2F2; color: #B91C1C; }
.od-cat-slate  { background: var(--od-gray-100); color: var(--od-gray-600); }

/* ---------- Belső dokumentum jelölése ---------- */
.od-internal-badge {
    display: inline-block;
    margin-left: .4rem;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .05rem .45rem;
    background: var(--od-gray-800);
    color: var(--od-white);
}

/* ---------- Ablak-változatok ---------- */
.od-modal-wide { width: min(620px, calc(100vw - 2rem)); }

/* Az előnézet NAGY, de nem teljes képernyős: körben marad egy keskeny sáv a sötét
   háttérből. Így látszik, hogy ablakról van szó, és a háttérre kattintva zárható
   marad – teljes képernyőn ez a kilépési út elveszne. A régi 1000 px-es méret
   viszont kisebb kijelzőn olvashatatlanul összenyomta a dokumentumot. */
/* ---------- Űrlap-ablak STATIKUS SSR oldalon ----------
   ⚠️ Ugyanaz a váz (od-modal-*), mint az interaktív ablakoké – egy vizuális nyelv.
   A KÜLÖNBSÉG a nyitás/zárás: statikus SSR-en nincs `@onclick`, tehát a hátteret és a
   bezáró gombot LINK adja, az állapotot pedig az URL (lásd CompanyAddressTab.razor).

   ⚠️ A `transform`-os középre igazítás magas tartalomnál kilógna a képernyő TETEJÉN,
   és az ablak eleje elérhetetlen lenne. Ezért itt `max-height` + görgethető törzs. */
.od-modal-form {
    width: min(880px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;                /* a lekerekített sarkok vágjanak */
}

/* ⚠️ Az EditForm egy <form>-ot renderel a fejléc/törzs/lábléc KÖRÉ, tehát az ablaknak
   nem a fejléc a gyereke, hanem a form. A flex oszlopnak EZÉRT rajta is rajta kell
   lennie – enélkül a törzs nem tud görgetni, hanem az egész ablak megnyúlik. */
.od-modal-form > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* A `min-height: 0` KÖTELEZŐ: enélkül a flex elem nem tud a tartalma alá zsugorodni,
   és a belső görgetés helyett az ablak nő meg (ugyanaz, mint a PDF szerkesztőnél). */
.od-modal-form .od-modal-body {
    overflow-y: auto;
    min-height: 0;
    color: var(--od-gray-800);
}

/* A háttér-link a teljes felületet lefedi, de nem látszik: a kattintással zárás
   így sima navigáció, nem JavaScript. */
a.od-modal-backdrop { display: block; text-decoration: none; }

.od-modal-close {
    margin-left: auto;
    color: var(--od-gray-400);
    text-decoration: none;
    line-height: 1;
    padding: .25rem;
    border-radius: var(--od-radius);
}
.od-modal-close:hover { color: var(--od-gray-800); background: var(--od-gray-100); }

.od-modal-preview {
    width: calc(100vw - 4rem);
    /* A dvh a mobil böngészők be- és kicsúszó címsorát is követi; a vh a tartalék
       azoknak, amelyek még nem ismerik. */
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
}

/* A fejléc és a lábléc csak elveszi a helyet a dokumentumtól – legyen szűk. */
.od-modal-preview .od-modal-header {
    padding: .7rem 1rem;
    gap: .75rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-modal-preview .od-modal-footer {
    padding: .6rem 1rem;
}

.od-preview-body {
    flex: 1;
    min-height: 0;
    margin: 0 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--od-gray-100);
    border-radius: var(--od-radius);
    overflow: auto;
}

/* Telefonon minden képpont a dokumentumé: keskenyebb keret, és az ikondoboz
   elmarad – ott a fejléc amúgy is csak a fájlnévről szól. */
@media (max-width: 575.98px) {
    .od-modal-preview {
        width: calc(100vw - 1.5rem);
        height: calc(100vh - 1.5rem);
        height: calc(100dvh - 1.5rem);
    }
    .od-modal-preview .od-modal-header {
        padding: .45rem .7rem;
        gap: .5rem;
    }
    .od-modal-preview .od-modal-header .od-page-icon { display: none; }
    .od-modal-preview .od-modal-title { font-size: .95rem; }
    .od-modal-preview .od-modal-footer { padding: .45rem .7rem; }
    .od-preview-body { margin: 0 .5rem; }
}

.od-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--od-white);
}

.od-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---------- Mappaválasztó fa ---------- */
.od-folder-tree {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .35rem;
}

.od-folder-tree-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    padding: .35rem .75rem;
    font-size: .88rem;
    color: var(--od-gray-700);
    transition: background var(--od-transition), color var(--od-transition);
}
.od-folder-tree-item:hover:not(:disabled) { background: var(--od-gray-100); }
.od-folder-tree-item.is-selected {
    background: var(--od-primary-xlt);
    border-color: #B8D4F5;
    color: var(--od-primary);
    font-weight: 600;
}
.od-folder-tree-item:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Kategóriaválasztó ---------- */
.od-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.od-category-option {
    border: 1px solid var(--od-gray-200);
    background: var(--od-white);
    border-radius: 999px;
    padding: .15rem .25rem;
    transition: border-color var(--od-transition), box-shadow var(--od-transition);
}
.od-category-option:hover { border-color: var(--od-primary-light); }
.od-category-option.is-selected {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 2px var(--od-primary-xlt);
}

/* ============================================================
   PDF SZERKESZTŐ (Dokumentum kezelése)
   Bal oldalt bélyegképsáv, jobbra a kurzor alatti oldal nagyban.
   ============================================================ */

/* Az oldal FÜGGŐLEGES flex oszlop, ami kitölti a képernyőt. A munkafelület a
   maradékot kapja (flex: 1), tehát nincs benne fix képpontszám: ha a műveletsáv
   magasabb lesz – például megjelenik a források sora –, a nagy nézet zsugorodik,
   nem pedig a lap kezd görögni. */
.od-pdf-page {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: calc(100dvh - var(--od-navbar-h) - 1.5rem);
    min-height: 520px;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.od-pdf-page > .od-page-header { margin-bottom: 0 !important; }

.od-pdf-workbench {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
    flex: 1 1 auto;
    /* ⚠️ A min-height KÖTELEZŐEN kicsi, hogy a flex elem a tartalma alá tudjon
       zsugorodni – enélkül a belső görgetés (bélyegképsáv) helyett az egész lap
       nőne meg. De NEM nulla: ha a fejléc és az eszköztár együtt elfogyasztja a
       képernyőt, a munkafelület NULLÁRA zsugorodna, és a felhasználó egy üres
       felületet látna. Inkább görögjön a lap. */
    min-height: 300px;
}

/* ---------- Bal oldali bélyegképsáv ---------- */
.od-pdf-rail-card { overflow: hidden; }

.od-pdf-rail {
    height: 100%;
    overflow-y: auto;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.od-pdf-thumb {
    position: relative;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-white);
    cursor: grab;
    transition: border-color var(--od-transition), box-shadow var(--od-transition);
}
.od-pdf-thumb:hover { border-color: var(--od-primary-light); }

.od-pdf-thumb.is-active {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 2px var(--od-primary-xlt);
}
.od-pdf-thumb.is-dragging { opacity: .45; }
.od-pdf-thumb.is-drop-target {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px var(--od-primary-xlt);
}

/* Az új rész ELSŐ oldala kap bal oldali jelölést: a sávban végigfutó szemnek ez
   mutatja meg, hol szakad ketté a dokumentum. */
.od-pdf-thumb.is-part-start {
    border-left: 3px solid var(--od-warning);
}

.od-pdf-thumb-btn {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* NÉGYZETES befoglaló: egy ide illesztett oldal 90 és 270 fokkal elforgatva sem
   lóg ki, tehát nem kell tizedes `scale()` érték – amit magyar kultúrában
   vesszővel interpolálnánk a CSS-be, és a böngésző némán eldobná. */
.od-pdf-thumb-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    aspect-ratio: 1;
    max-width: 100%;
    margin: 0 auto;
    background: var(--od-gray-100);
    border-radius: var(--od-radius) var(--od-radius) 0 0;
}

.od-pdf-thumb-canvas img {
    max-width: 100%;
    max-height: 100%;
    background: var(--od-white);
    box-shadow: var(--od-shadow-sm);
    transition: transform var(--od-transition);
}

.od-pdf-thumb-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
    border-top: 1px solid var(--od-gray-200);
    background: var(--od-gray-50);
    border-radius: 0 0 var(--od-radius) var(--od-radius);
}

.od-pdf-page-num {
    min-width: 24px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-size: .72rem;
    font-weight: 600;
}

.od-pdf-part {
    font-size: .68rem;
    font-weight: 600;
    color: var(--od-warning);
    white-space: nowrap;
}

/* Behúzott (másik dokumentumból származó) oldal jelölése. */
.od-pdf-foreign {
    margin-left: auto;
    color: var(--od-primary);
    font-size: .8rem;
}

/* Az olló a kártya TETEJÉN ül, mert a vágás az oldal ELŐTT történik. */
.od-pdf-cut {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--od-gray-200);
    border-radius: 999px;
    background: var(--od-white);
    color: var(--od-gray-400);
    font-size: .7rem;
    padding: 0;
    z-index: 1;
    transition: color var(--od-transition), background var(--od-transition);
}
.od-pdf-cut:hover { color: var(--od-warning); border-color: var(--od-warning); }
.od-pdf-cut.is-on {
    color: var(--od-white);
    background: var(--od-warning);
    border-color: var(--od-warning);
}

/* ---------- Jobb oldali nagy nézet ---------- */
.od-pdf-stage-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.od-pdf-stage-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-pdf-stage-title {
    font-size: .92rem;
    color: var(--od-gray-700);
    min-width: 0;
}

.od-pdf-stage-source {
    margin-left: .5rem;
    font-size: .8rem;
    color: var(--od-gray-400);
}

.od-pdf-stage-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .9rem;
    background: var(--od-gray-100);
    /* A konténer-lekérdezés egysége (cqw/cqh) ehhez a dobozhoz méri magát – ezt
       használja a forgatott kép, lásd alább. */
    container-type: size;
}

.od-pdf-viewer-canvas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* A kivágás eredmény-nézete a BEFOGLALÓT nagyítja és vágja (lásd pdf-crop.js);
       az átmenet ezt teszi követhetővé, hogy ne ugorjon a kép. */
    transition: transform var(--od-transition);
}

/* ---------- Kivágás ---------- */

/* A húzáshoz a böngészőnek át kell adnia a mutató eseményeit: a touch-action nélkül
   érintőképernyőn a görgetés nyerne a keret húzásával szemben. */
.od-pdf-viewer-canvas.is-cropping {
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

/* A réteg csak RAJZOL: az eseményeket a befoglaló kapja el, különben a keret
   önmagát fogná meg, és a széleit nem lehetne megragadni. */
.od-crop-shade,
.od-crop-frame {
    position: absolute;
    display: none;
    pointer-events: none;
}

.od-crop-shade { background: rgba(15, 23, 42, .45); }

.od-crop-frame {
    border: 1px solid var(--od-white);
    outline: 1px dashed var(--od-primary);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .35);
}

/* Sarokjelek: csak vizuális fogódzók, a találati zónát a JS számolja (14 px),
   hogy egérrel is könnyen meg lehessen fogni őket. */
.od-crop-frame::before,
.od-crop-frame::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--od-primary);
    background: var(--od-white);
}
.od-crop-frame::before { left: -6px; top: -6px; }
.od-crop-frame::after { right: -6px; bottom: -6px; }

.od-pdf-cropped {
    color: var(--od-primary);
    font-size: .75rem;
}

.od-pdf-viewer-canvas img {
    max-width: 100%;
    max-height: 100%;
    background: var(--od-white);
    box-shadow: var(--od-shadow-sm);
    transition: transform var(--od-transition);
}

/* ⚠️ A 90/270 fokkal forgatott kép a saját SZÉLESSÉGÉVEL foglal MAGASSÁGOT, és
   fordítva – a rendes max-width/max-height ilyenkor rossz oldalt fogja meg, és a
   kép kilóg a keretből. A konténer-egységek felcserélésével a korlát is fordul.
   Négyzetes befoglalóval is meg lehetne oldani, de az az álló oldalaknál is
   elvenné a szélesség felét. */
.od-pdf-viewer-canvas.is-rot-90 img,
.od-pdf-viewer-canvas.is-rot-270 img {
    max-width: 100cqh;
    max-height: 100cqw;
}

/* A forgatás CSS-OSZTÁLYBÓL jön, nem inline style-ból – lásd a fenti megjegyzést.
   Ugyanaz az osztálynév szolgálja ki a bélyegképet és a nagy nézetet. */
.od-pdf-thumb-canvas.is-rot-90 img,
.od-pdf-viewer-canvas.is-rot-90 img { transform: rotate(90deg); }
.od-pdf-thumb-canvas.is-rot-180 img,
.od-pdf-viewer-canvas.is-rot-180 img { transform: rotate(180deg); }
.od-pdf-thumb-canvas.is-rot-270 img,
.od-pdf-viewer-canvas.is-rot-270 img { transform: rotate(270deg); }

/* ---------- Eszköztár ---------- */
/* Egyetlen sor, csoportokra bontva. Minden gomb ikon, a jelentést a buboréksúgó
   viszi – így a felület olyan, mint egy szerkesztőprogramé, és nem kell két
   különböző hatókörű gombsort egymás mellett tartani. */
.od-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.od-pdf-toolgroup {
    display: inline-flex;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    overflow: hidden;
    background: var(--od-white);
}

.od-pdf-toolbtn {
    position: relative;
    width: 38px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-right: 1px solid var(--od-gray-200);
    background: transparent;
    color: var(--od-gray-700);
    font-size: .95rem;
    transition: background var(--od-transition), color var(--od-transition);
}
.od-pdf-toolgroup .od-pdf-toolbtn:last-child { border-right: none; }

.od-pdf-toolbtn:hover:not(:disabled) { background: var(--od-gray-100); color: var(--od-gray-800); }

/* A letiltott gomb LÁTSZIK, csak halvány: a felhasználónak tudnia kell, hogy a
   művelet létezik, csak most nem elérhető. */
.od-pdf-toolbtn:disabled { opacity: .35; }

.od-pdf-toolbtn.is-primary {
    background: var(--od-primary);
    color: var(--od-white);
}
.od-pdf-toolbtn.is-primary:hover:not(:disabled) { background: var(--od-primary-dark); color: var(--od-white); }

.od-pdf-toolbtn.is-on {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    box-shadow: inset 0 -2px 0 var(--od-primary);
}

.od-pdf-toolbtn.is-danger:hover:not(:disabled) { background: #FEF2F2; color: var(--od-danger); }

/* Áthúzás a „törlés" jellegű ikonokon (kivágások, vágáspontok törlése): ugyanaz az
   ikon, mint a művelet, csak érvénytelenítve – így nem kell új ikont kitalálni. */
.od-pdf-toolstrike {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
    opacity: .85;
}

.od-pdf-toolbar-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.od-pdf-crop-hint {
    margin-left: auto;
    font-size: .8rem;
    color: var(--od-primary-dark);
    background: var(--od-primary-xlt);
    border-radius: 999px;
    padding: .1rem .6rem;
    white-space: nowrap;
}

.od-pdf-cropped-text {
    margin-left: .5rem;
    color: var(--od-primary);
    font-weight: 600;
}

/* A raszterizálás FIGYELMEZTETÉS, nem eredmény: sárga, mint minden más helyen,
   ahol a felhasználónak tudnia kell valamiről, mielőtt megtörténik. */
.od-pdf-raster-text,
.od-pdf-raster-hint {
    margin-left: .5rem;
    color: var(--od-warning);
    font-weight: 600;
}

.od-pdf-raster-hint {
    margin-left: auto;
    font-size: .8rem;
    background: #FFF7ED;
    border-radius: 999px;
    padding: .1rem .6rem;
    white-space: nowrap;
}

/* ---------- Eszköz-vezérlők (egyenesítés, tisztítás, perspektíva) ---------- */
.od-pdf-toolpanel {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

.od-pdf-toolpanel-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--od-gray-700);
    white-space: nowrap;
}

.od-pdf-toolrange { width: 260px; flex: 0 0 auto; }

/* ---------- Átméretezés ---------- */
.od-pdf-size-field {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.od-pdf-size-field label {
    font-size: .78rem;
    color: var(--od-gray-600);
    margin: 0;
    white-space: nowrap;
}

.od-pdf-sizeinput {
    width: 92px;
    padding: .2rem .45rem;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.od-pdf-size-unit { font-size: .75rem; color: var(--od-gray-400); }

/* A lánc-ikon azt jelzi, hogy az arány rögzített – a két méret ugyanabból az egy
   beállításból (DPI) származik, tehát nem is tud egymásnak ellentmondani. */
.od-pdf-size-link { color: var(--od-primary); font-size: 1.1rem; }

.od-pdf-toolvalue {
    min-width: 64px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--od-gray-700);
    font-variant-numeric: tabular-nums;
}

.od-pdf-toolmodes {
    display: inline-flex;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    overflow: hidden;
    background: var(--od-white);
}

.od-pdf-toolmode {
    border: none;
    border-right: 1px solid var(--od-gray-200);
    background: transparent;
    padding: .25rem .7rem;
    font-size: .82rem;
    color: var(--od-gray-700);
    transition: background var(--od-transition), color var(--od-transition);
}
.od-pdf-toolmode:last-child { border-right: none; }
.od-pdf-toolmode:hover { background: var(--od-gray-100); }
.od-pdf-toolmode.is-on {
    background: var(--od-primary);
    color: var(--od-white);
}

/* ---------- Perspektíva: négy húzható sarok ---------- */
.od-corner-layer {
    position: absolute;
    display: none;
    pointer-events: none;
}

.od-corner-layer svg {
    width: 100%;
    height: 100%;
    display: block;
}

.od-corner-layer polygon {
    fill: rgba(21, 96, 189, .12);
    stroke: var(--od-primary);
    stroke-width: .4;
    vector-effect: non-scaling-stroke;
}

.od-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--od-primary);
    border-radius: 50%;
    background: var(--od-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* ---------- Nagyító a sarok húzásához ----------
   A kép ablakra illesztve látszik: egy képernyő-képpont több forrás-képpontot
   fed, tehát a sarkot nem lehet pontosan a papír szélére tenni. A nagyító a
   fogantyú alatti részletet mutatja, célkereszttel.
   ⚠️ A MÉRETNEK egyeznie kell a pdf-crop.js LOUPE_SIZE értékével (132) – abból
   számol a JS háttér-eltolást. Két külön szám esetén a célkereszt NEM oda
   mutatna, ahol a sarok van, és ez némán történne. */
.od-corner-loupe {
    position: absolute;
    display: none;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 3px solid var(--od-white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    background-repeat: no-repeat;
    background-color: var(--od-gray-100);
    /* A húzás alatt semmiképp ne fogjon eseményt: a pointer capture a vásznon van. */
    pointer-events: none;
    z-index: 5;
}

.od-corner-loupe.is-on { display: block; }

/* A célkereszt: fehér kontúrral, hogy sötét és világos képen is látszódjon. */
.od-corner-loupe::before,
.od-corner-loupe::after {
    content: "";
    position: absolute;
    background: var(--od-primary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}

.od-corner-loupe::before {
    left: 50%;
    top: calc(50% - 14px);
    width: 1px;
    height: 28px;
    margin-left: -1px;
}

.od-corner-loupe::after {
    top: 50%;
    left: calc(50% - 14px);
    height: 1px;
    width: 28px;
    margin-top: -1px;
}

.od-pdf-sep {
    width: 1px;
    height: 26px;
    background: var(--od-gray-200);
    margin: 0 .25rem;
}

.od-pdf-removed {
    margin-left: .5rem;
    color: var(--od-danger);
    font-weight: 600;
}

.od-pdf-added {
    margin-left: .5rem;
    color: var(--od-success);
    font-weight: 600;
}

.od-pdf-split-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    color: #9A3412;
    font-size: .8rem;
    font-weight: 600;
}

/* ---------- Források (összefűzés) ---------- */
.od-pdf-sources {
    border-top: 1px solid var(--od-gray-100);
    padding-top: .75rem;
}

.od-pdf-source-chip {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    padding: .12rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--od-gray-200);
    background: var(--od-gray-50);
    color: var(--od-gray-700);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-pdf-source-chip.is-primary {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-weight: 600;
}

.od-pdf-hint {
    border-radius: var(--od-radius);
    background: var(--od-primary-xlt);
    border: 1px solid #C7DEF7;
    color: var(--od-gray-700);
    padding: .6rem .85rem;
    font-size: .85rem;
}

/* ---------- Dokumentumválasztó ablak ---------- */
.od-picker-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
}

.od-picker-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .7rem;
    border: none;
    border-bottom: 1px solid var(--od-gray-100);
    background: transparent;
    text-align: left;
    transition: background var(--od-transition);
}
.od-picker-item:last-child { border-bottom: none; }
.od-picker-item:hover { background: var(--od-primary-xlt); }

.od-picker-icon { color: var(--od-primary); }

.od-picker-name {
    font-size: .88rem;
    color: var(--od-gray-800);
    overflow-wrap: anywhere;
}

.od-picker-meta {
    display: flex;
    gap: .75rem;
    margin-left: auto;
    font-size: .75rem;
    color: var(--od-gray-400);
    white-space: nowrap;
}

/* ---------- Szűk kijelző: a sáv a nagy nézet FÖLÉ kerül ---------- */
@media (max-width: 991.98px) {
    .od-pdf-page {
        height: auto;
        min-height: 0;
    }

    .od-pdf-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .od-pdf-rail {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        height: auto;
    }

    .od-pdf-thumb { flex: 0 0 150px; }

    .od-pdf-stage-body { min-height: 360px; }
}

/* ============================================================
   CSEMPE NÉZET (dokumentumlista)
   ============================================================ */

/* ---------- Nézetváltó ---------- */
.od-view-switch {
    display: inline-flex;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    overflow: hidden;
    background: var(--od-white);
}

.od-view-btn {
    width: 36px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--od-gray-400);
    transition: background var(--od-transition), color var(--od-transition);
}
.od-view-btn:hover { background: var(--od-gray-50); color: var(--od-gray-700); }
.od-view-btn.is-on {
    background: var(--od-primary);
    color: var(--od-white);
}

/* ---------- A csempék rácsa ---------- */
.od-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .85rem;
    padding: 1rem;
}

.od-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-white);
    overflow: hidden;
    transition: border-color var(--od-transition), box-shadow var(--od-transition);
}
.od-tile:hover { border-color: var(--od-primary-light); }

.od-tile.is-selected {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 2px var(--od-primary-xlt);
}
.od-tile.is-drop-target {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px var(--od-primary-xlt);
}

/* A jelölőnégyzet a csempe SARKÁBAN lebeg: a törzs kattintása kijelölést vált,
   de érintőképernyőn és billentyűzettel is kell egy egyértelmű célpont. */
.od-tile-check {
    position: absolute;
    top: .4rem;
    left: .4rem;
    z-index: 1;
    background: var(--od-white);
}

.od-tile-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0 .5rem .5rem;
    text-align: center;
}

.od-tile-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    margin-bottom: .35rem;
    background: var(--od-gray-100);
    border-bottom: 1px solid var(--od-gray-200);
}

/* A bélyegkép a FELSŐ élénél igazodik: egy A4-es lapon a fejléc a lényeg, nem a
   lap alja – így a csempéken a fontos rész látszik. */
.od-tile-canvas img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: top;
    background: var(--od-white);
}

.od-tile-icon { font-size: 2.4rem; color: var(--od-primary); }
.od-tile-folder-icon { font-size: 2.8rem; color: #F5A623; }

.od-tile-name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--od-gray-800);
    line-height: 1.25;
    /* Legfeljebb két sor, utána hármaspont: a hosszú gépi fájlnevek különben
       szétnyomnák a rácsot. A teljes név a title attribútumban ott van. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.od-tile-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    flex-wrap: wrap;
    font-size: .7rem;
    color: var(--od-gray-400);
}

/* A műveletek csak rámutatáskor jelennek meg – különben minden csempén ott ülne
   három gomb, és a rács zsúfolt lenne. Billentyűzet-fókusznál is előjönnek. */
.od-tile-actions {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: flex;
    gap: .15rem;
    opacity: 0;
    transition: opacity var(--od-transition);
}
.od-tile:hover .od-tile-actions,
.od-tile:focus-within .od-tile-actions { opacity: 1; }

.od-tile-actions .od-action-btn {
    width: 26px;
    height: 26px;
    font-size: .75rem;
    background: var(--od-white);
}

/* ============================================================
   FELADATOK (iroda)
   Az OptiDesk 2-ből átemelve – a beszélő határidő-chip és a bal oldali
   státusz-csík az, amitől a lista egy pillantással olvasható.
   ============================================================ */

/* ---------- Összesítő csempék ---------- */
.od-task-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
}

.od-task-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--od-gray-200);
    border-left: 3px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-white);
    text-align: left;
    transition: border-color var(--od-transition), box-shadow var(--od-transition);
}
.od-task-tile:hover { border-color: var(--od-primary-light); }

/* A kiválasztott csempe SZÍNES kerettel jelez – így látszik, hogy szűrés van
   érvényben, és hogy melyik. Ugyanarra kattintva kikapcsol. */
.od-task-tile.is-on {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 2px var(--od-primary-xlt);
}

.od-task-tile-num {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--od-gray-800);
    font-variant-numeric: tabular-nums;
}

.od-task-tile-label { font-size: .78rem; color: var(--od-gray-600); }

.od-tile-open { border-left-color: var(--od-primary); }
.od-tile-prog { border-left-color: #D97706; }
.od-tile-over { border-left-color: var(--od-danger); }
.od-tile-soon { border-left-color: #D97706; }
.od-tile-closed { border-left-color: var(--od-success); }

.od-tile-over .od-task-tile-num { color: var(--od-danger); }

/* ---------- Típus-ikon ---------- */
.od-task-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.od-task-ico-decl { background: #DBEAFE; color: #1D4ED8; }
.od-task-ico-pay { background: #CCFBF1; color: #0D9488; }
/* Feladat: kamarai hozzájárulás, beszámoló, iparűzési előleg – se nem bevallás, se nem bér. */
.od-task-ico-other { background: #FFF7ED; color: #B45309; }

/* ---------- Fő cella: cím + cég ---------- */
.od-task-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.od-task-main { min-width: 0; }

.od-task-title {
    font-weight: 600;
    font-size: .92rem;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.od-task-sub { color: var(--od-gray-600); font-size: .8rem; margin-top: 1px; }

/* A nyomtatványnév monospace: „2508" és „25HIPAK" kódok, nem szavak. */
.od-fchip {
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    padding: 1px 7px;
    border-radius: 6px;
}

/* ---------- Beszélő határidő-chip ---------- */
.od-dl {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.od-dl-over { background: #FEE2E2; color: #991B1B; }
.od-dl-today { background: #FEF3C7; color: #92400E; }
.od-dl-soon { background: #FEF3C7; color: #92400E; }

/* A távoli és a lezárt határidő NEM kap kiemelést: ha minden chip színes, egyik
   sem hívja fel magára a figyelmet. */
.od-dl-far { background: transparent; color: var(--od-gray-600); padding-left: 0; }
.od-dl-done { background: transparent; color: var(--od-gray-400); padding-left: 0; }
.od-dl-none { background: transparent; color: var(--od-gray-400); padding-left: 0; }

/* ---------- Felelős ---------- */
.od-assignee { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; }
.od-assignee-none { color: var(--od-gray-400); }

.od-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
}
.od-avatar-none { background: transparent; border: 1.5px dashed var(--od-gray-200); color: var(--od-gray-400); }

.od-av-c0 { background: #4F46E5; }
.od-av-c1 { background: #0D9488; }
.od-av-c2 { background: #DB2777; }
.od-av-c3 { background: #2563EB; }
.od-av-c4 { background: #EA580C; }
.od-av-c5 { background: #7C3AED; }

/* ---------- Sor bal oldali státusz-csík ---------- */
.od-task-row td:first-child { position: relative; }
.od-task-row.od-st-open td:first-child::before,
.od-task-row.od-st-prog td:first-child::before,
.od-task-row.od-st-closed td:first-child::before,
.od-task-row.od-st-susp td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}
.od-task-row.od-st-open td:first-child::before { background: var(--od-primary); }
.od-task-row.od-st-prog td:first-child::before { background: #D97706; }
.od-task-row.od-st-closed td:first-child::before { background: var(--od-success); }
.od-task-row.od-st-susp td:first-child::before { background: var(--od-gray-400); }

/* A lezárt sor halványabb: ott van, de nem az köti le a figyelmet. */
.od-task-row.od-st-closed { opacity: .68; }

/* ---------- Státusz-választó a listában ---------- */
/* ⚠️ SZIMMETRIKUS padding és középre igazított szöveg. A Bootstrap a legördülő
   nyilát háttérképként rajzolja, és jobb oldalt tart neki helyet – egyoldalú
   paddinggel a címke a doboz bal széléhez tapadna, a fejléc-felirat viszont a cella
   közepén áll. A kettő így láthatóan elcsúszik egymástól (mérve: 691 vs 698 px a
   dobozközepekre, a szöveg pedig ennél is balrább).

   A min-width azért 150px, hogy a leghosszabb felirat („Felfüggesztve") is elférjen –
   enélkül soronként más széles lenne a pirula, és a hasáb rongyosnak látszana. */
/* ⚠️ `display: inline-block` KÖTELEZŐ. A Bootstrap `.form-select`-je BLOKK szintű, a
   `width: auto` pedig űrlapelemnél tartalomhoz igazodó szélességet jelent – az ilyen
   doboz a cella BAL szélére kerül, és a `text-align: center` nem mozdítja meg.
   Keskeny ablakban ez nem tűnik fel (a cella nagyjából olyan széles, mint a pirula),
   széles ablakban viszont látványosan elcsúszik a fejléctől. Mérve 1600 px-en:
   cella közepe 994, pirula közepe 988 – és minél szélesebb a hasáb, annál nagyobb
   a különbség. Inline-block elemre viszont a cella `text-center`-e már hat. */
.od-status-select {
    display: inline-block;
    width: auto;
    min-width: 150px;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .15rem 1.6rem;
    text-align: center;
}
.od-task-badge-open { background: var(--od-primary-xlt); color: var(--od-primary-dark); border-color: #C7DEF7; }
.od-task-badge-prog { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.od-task-badge-closed { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.od-task-badge-susp { background: var(--od-gray-100); color: var(--od-gray-600); border-color: var(--od-gray-200); }

/* ---------- Rendezhető fejléc ---------- */
.od-sort-btn {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.od-sort-btn:hover { color: var(--od-primary); }
.od-sort-idle { opacity: .3; }

/* ⚠️ A SZÁM-oszlopok fejlécére SZÁNDÉKOSAN nincs külön jobbra-igazító szabály, és ezt
   érdemes kimondani, mert a 20. tanulság az ellenkezőjét sugallja. Ott a `.form-select`
   azért nem igazodott a cella `text-align`-jához, mert az BLOKK-szintű doboz; a
   `.od-sort-btn` viszont `inline-flex`, vagyis INLINE-szintű – arra a szülő
   `text-align: right`-ja HAT. Mérve (negatív kontrollal, a szabályt visszavonva): a
   fejléc felirata és a szám jobb széle mindkét állapotban 0 px eltéréssel egy vonalban –
   vagyis a szabály semmit nem csinált volna, csak szándéknak látszana (18. tanulság). */

.od-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--od-gray-700);
    margin: 0;
}

/* ---------- Mobil: a sávok egymás alá kerülnek ---------- */
@media (max-width: 991.98px) {
    /* Az ikonsáv itt vízszintes sorrá alakul, tehát nem tol el semmit oldalirányban –
       a navbar bal térközét vissza kell venni, különben elcsúszna a tartalomtól. */
    .od-layout:has(.od-workspace) .od-navbar { padding-left: 0; }

    .od-workspace,
    .od-workspace.has-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ⚠️ Az EXPLICIT oszlopszámokat vissza KELL venni. Egyoszlopos rácsban a
       `grid-column: 2` és `3` IMPLICIT oszlopokat hozna létre – mérve: a sáv 538 px-re
       nőtt, a tartalom 62 px-re szorult, és mind a három egymás mellé került. A hiba a
       szigetes átállással jött be, és CSAK keskeny ablakban látszott. */
    .od-tool-rail,
    .od-workspace-main,
    .od-tool-panel { grid-column: auto; grid-row: auto; }

    /* ⚠️ SORREND: a szigetben a sáv és a panel a tartalom ELŐTT áll a DOM-ban (egy
       komponens adja mindkettőt). Egyoszlopos rácsban a természetes sorrend tehát
       sáv → panel → tartalom lenne: a panel a tartalom FÖLÉ kerülne. */
    .od-tool-rail      { order: 1; }
    .od-workspace-main { order: 2; }
    .od-tool-panel     { order: 3; width: auto; }

    .od-tool-rail {
        flex-direction: row;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--od-gray-200);
        overflow-x: auto;
    }

    .od-tool-panel {
        position: static;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--od-gray-200);
    }

    .od-tool-panel-body { overflow-y: visible; }
}

/* ============================================================================
   RÉSZLETEZŐ LAP  (od-tk-)  —  KÖZÖS, TÖBB LAP HASZNÁLJA
   ----------------------------------------------------------------------------
   Ticket-elrendezés: balra a tartalom, jobbra RAGADÓS kezelősáv.

   ⚠️ NEM feladat-specifikus, a `tk` = ticket. Ma két helyen él:
     • OfficeTaskEdit.razor  – feladat részletező (interaktív): a TELJES készlet,
       beleértve a kéthasábos rácsot és a ragadós kezelősávot,
     • a vállalkozás adatlapjának fülei (statikus SSR): CSAK az azonosító fejléc
       (`-head*`, `-title`, `-sub`, `-dot`) és a csendes mezők (`-quiet`,
       `-title-input`). Ott a fülsáv (`od-sheet-`) adja a szerkezetet, nem a rács.

   A -grid, -main, -side, -actions, -sep, -meta, -amount*, -att*, -period-row,
   -deadline-hint MA CSAK a feladaté – de nem „privát": ha egy új részletező lapnak
   ragadós kezelősáv kell, EZEKET használja.

   ⚠️ Új lap bekötésekor a KÖZÖS elemeket használd, ne másold le őket saját
   névtérbe: két másolat előbb-utóbb eltérne, és a két részletező lap kétféle
   nyelvet beszélne ugyanabban az alkalmazásban.

   ⚠️ SAJÁT NÉVTÉR. A `od-task-` az iroda feladatLISTÁJÁÉ, a `od-tool-` a
   munkaterület jobb sávjáé. Általános névvel a két komponens egymás elrendezését
   borítaná – ez már megtörtént egyszer (18. megtanult hiba), és nem adott
   hibaüzenetet: a build tiszta volt, csak a felület omlott össze.
   ============================================================================ */

/* ⚠️ A töréspont a SAJÁT szélességünkből jön, nem a képernyőéből. A munkaterület
   jobb oldali eszközsávja 380 px-et vesz el, az ablak viszont ugyanolyan széles marad –
   képernyő-alapú `@media`-val a két hasáb ilyenkor is megmaradna, és a bal oldal
   281 px-re nyomódna (mérve), ahol az összegcímke 37 px-en olvashatatlan. */
.od-tk-page { container-type: inline-size; }

.od-tk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    /* A `start` KÖTELEZŐ: alapértelmezett `stretch` mellett a sáv a rács teljes
       magasságára nyúlna, és a sticky-nek nem maradna hova elmozdulnia. */
    align-items: start;
}

.od-tk-main { min-width: 0; }

/* ⚠️ A `top` a FIX NAVBAR alá igazít. Puszta `1rem`-mel a sáv görgetéskor a navbar
   ALÁ csúszna – és ez némán történne: a build tiszta, a sáv „ragad", csak nem ott.

   ⚠️ A `max-height` + `overflow` sem elhagyható. A sáv magasabb, mint a látható
   terület (mérve: 803 px egy 720 px-es ablakban); enélkül a sticky a TETEJÉT rögzíti,
   és az alja – a törlés gomb meg az időbélyegek – SOHA nem görgethető a képbe. */
.od-tk-side {
    position: sticky;
    top: calc(var(--od-navbar-h) + 1rem);
    max-height: calc(100vh - var(--od-navbar-h) - 2rem);
    overflow-y: auto;
}

/* ---------- Azonosító fejléc ---------- */
.od-tk-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* A fejléc ikonja a LISTA ikonja, nagyobb méretben – ugyanaz a jelrendszer, hogy a
   listáról a részletezőre lépve ne kelljen újra tájékozódni. A feladatnál `od-task-ico`
   (típus szerinti szín), a vállalkozásnál `od-co-ico` (EV/TV szerinti szín). */
.od-tk-head .od-task-ico,
.od-tk-head .od-co-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.2rem;
}

.od-tk-head-main {
    min-width: 0;
    flex: 1 1 240px;
}

.od-tk-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.od-tk-sub {
    margin-top: 2px;
    font-size: .86rem;
    color: var(--od-gray-600);
}

.od-tk-dot { color: var(--od-gray-300); margin: 0 3px; }

.od-tk-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* A státusz-badge alapja; a színt a lista `od-task-badge-*` modifiere adja,
   tehát a két felület nem tud eltérni egymástól. */
.od-tk-badge {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* ---------- Csendes mezők ----------
   ⚠️ Nem díszítés: enélkül a lap két tucat egyforma dobozként néz ki, és nincs
   mit végigfutni a szemnek. Az alsó vonal és a hover-keret adja a
   FELFEDEZHETŐSÉGET – enélkül a felhasználó nem tudná, hogy szerkeszthető. */
.od-tk-quiet .form-control,
.od-tk-quiet .form-select {
    border-color: transparent;
    border-bottom-color: var(--od-gray-200);
    background-color: transparent;
}

.od-tk-quiet .form-control:hover,
.od-tk-quiet .form-select:hover {
    border-color: var(--od-gray-300);
    background-color: #fff;
}

.od-tk-quiet .form-control:focus,
.od-tk-quiet .form-select:focus {
    border-color: var(--od-primary);
    background-color: #fff;
}

/* ⚠️ A letiltott mező NEM kaphat hover-keretet. A hover a FELFEDEZHETŐSÉG jele
   („ez szerkeszthető") – megtekintési joggal épp az ellenkezőjét kell mondani.
   A sorrend számít: ennek a hover/focus szabályok UTÁN kell állnia, mert azonos
   specifikusságnál a későbbi nyer. */
.od-tk-quiet .form-control:disabled,
.od-tk-quiet .form-select:disabled,
.od-tk-quiet .form-control:disabled:hover,
.od-tk-quiet .form-select:disabled:hover {
    border-color: transparent;
    border-bottom-color: var(--od-gray-100);
    background-color: transparent;
    color: var(--od-gray-700);
    opacity: 1;
}

.od-tk-title-input {
    font-size: 1.02rem;
    font-weight: 600;
}

/* ---------- Kezelősáv ---------- */
.od-tk-actions {
    display: flex;
    gap: .5rem;
    padding: .85rem;
    border-bottom: 1px solid var(--od-gray-100);
}

/* A sávban tömörebbek a mezők – itt a sűrűség a haszon, nem a levegő.
   ⚠️ A select paddingja KÜLÖN szabály: a Bootstrap a nyilat háttérképként
   rajzolja, és a rövidebb jobb oldali padding ráengedné a szövegre. */
.od-tk-side .form-control { padding: .5rem .65rem; font-size: .9rem; }
.od-tk-side .form-select { padding: .5rem 2.1rem .5rem .65rem; font-size: .9rem; }

.od-tk-side .form-label {
    margin-bottom: .2rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--od-gray-600);
}

.od-tk-side .form-text { margin-top: .25rem; font-size: .74rem; }

.od-tk-deadline-hint { margin-top: .45rem; }

/* Teljes szélességű elválasztó a kártyán belül. */
.od-tk-sep {
    height: 1px;
    background: var(--od-gray-100);
    margin: 1rem -1rem;
}

.od-tk-period-row { display: flex; gap: .5rem; }
.od-tk-period-row > input { width: 92px; flex: none; }
.od-tk-period-row > select { flex: 1 1 auto; min-width: 0; }

.od-tk-meta {
    display: grid;
    gap: .2rem;
    font-size: .78rem;
    color: var(--od-gray-600);
}
.od-tk-meta-label { color: var(--od-gray-400); margin-right: .35rem; }

/* A törlés visszafogott: itt van, ha kell, de nem ez a lap fő üzenete. */
.od-tk-delete {
    width: 100%;
    margin-top: .9rem;
    padding: .45rem;
    border: 1px solid transparent;
    border-radius: var(--od-radius);
    background: transparent;
    color: var(--od-danger);
    font-size: .82rem;
    font-weight: 600;
}
.od-tk-delete:hover { background: #FEF2F2; border-color: #FECACA; }

/* ---------- Összegek ---------- */
.od-tk-amounts {
    display: grid;
    gap: .2rem;
    max-width: 470px;
}

.od-tk-amount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: .75rem;
}

.od-tk-amount-label {
    margin: 0;
    font-size: .88rem;
    color: var(--od-gray-700);
}

.od-tk-amount-input {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* A tabular-nums KELL: arányos számjegyekkel az egymás alatti összegek
   számjegyei nem esnének egy vonalba, és a szem nem tudná összevetni őket. */
.od-tk-amount-input .form-control {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.od-tk-amount-unit {
    width: 24px;
    flex: none;
    font-size: .82rem;
    color: var(--od-gray-400);
}

.od-tk-amount-total {
    margin-top: .5rem;
    padding-top: .7rem;
    border-top: 1.5px solid var(--od-gray-200);
    font-weight: 700;
}

/* A jobb oldali padding a beviteli mező belső paddingját másolja – így az
   összesítő számjegyei pontosan a fölötte lévő mezők számjegyeivel egy vonalba
   esnek. */
.od-tk-amount-sum {
    flex: 1 1 auto;
    padding-right: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}

/* ---------- xx58: HAVI adóösszegek rácsa ----------
   A bevallás negyedéves, a tartalma havi: három sor, három adó. Rács, nem
   <table>: a sorok beviteli mezőket tartalmaznak, és a rács oszlopszélessége
   egy helyen állítható. A szerepköröket `role` adja meg, hogy olvasóval is
   táblázat maradjon. */
.od-tk-months {
    display: grid;
    gap: .3rem;
    max-width: 780px;
    margin-bottom: .9rem;
}

.od-tk-months-head,
.od-tk-months-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
}

.od-tk-months-head {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-400);
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--od-gray-200);
}

/* Az összeg-oszlopok fejléce a SZÁMOK fölé, jobbra zárva – balra igazítva a
   fejléc és a hozzá tartozó számjegyek nem egy vonalban állnának. */
.od-tk-months-head span:not(:first-child) { text-align: right; }

.od-tk-months-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--od-gray-700);
}

/* Ugyanaz a tabular-nums, mint az egyszeres összegeknél: enélkül a három hónap
   számjegyei nem esnének egy vonalba, és nem lehetne őket szemre összevetni. */
.od-tk-months-row .form-control {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.od-tk-months-sum {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
    padding-right: .75rem;
}

/* Keskeny ablakban a rács egy hasábba esne szét, ahol nem látszana, melyik szám
   melyik adóé – ezért ott a fejléc eltűnik, és minden mező a saját feliratát
   kapja meg az `aria-label`-ből olvasható néven. A vízszintes görgetés a
   táblázatoknál bevált megoldás. */
@media (max-width: 767.98px) {
    .od-tk-months { overflow-x: auto; }
    .od-tk-months-head,
    .od-tk-months-row { min-width: 620px; }
}

/* ---------- Csatolmányok ---------- */
.od-tk-att-count {
    display: inline-block;
    margin-left: .4rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    font-size: .74rem;
    font-weight: 700;
}

/* A fájlválasztó egy CÍMKE: a natív input megjelenése böngészőnként más, és nem
   illeszthető a többi gombhoz. Az inputot elrejtjük, a kattintást a label viszi. */
.od-tk-att-add {
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    border: 1.5px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-white);
    color: var(--od-gray-700);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
.od-tk-att-add:hover { border-color: var(--od-primary); color: var(--od-primary); }
.od-tk-att-add.is-busy { opacity: .55; cursor: default; }
.od-tk-att-add input[type="file"] { display: none; }

.od-tk-att-errors {
    padding: .7rem .85rem;
    border: 1px solid #FECACA;
    border-radius: var(--od-radius);
    background: #FEF2F2;
    color: #991B1B;
    font-size: .82rem;
}
.od-tk-att-errors ul { padding-left: 1.15rem; }

.od-tk-att-list { display: grid; gap: .35rem; }

.od-tk-att {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    border: 1px solid var(--od-gray-100);
    border-radius: var(--od-radius);
    background: var(--od-white);
}
.od-tk-att:hover { border-color: var(--od-gray-200); background: var(--od-gray-50); }

.od-tk-att-icon { font-size: 1.15rem; color: var(--od-gray-400); flex: none; }

.od-tk-att-main { min-width: 0; flex: 1 1 auto; }

/* A gépi fájlnevek hosszúak; törés nélkül szétfeszítenék a kártyát. */
.od-tk-att-name {
    font-size: .87rem;
    font-weight: 600;
    color: var(--od-gray-800);
    overflow-wrap: anywhere;
}

.od-tk-att-meta { font-size: .76rem; color: var(--od-gray-600); margin-top: 1px; }

/* ---------- Szűk hely: a sáv a tartalom alá kerül ----------
   760 px alatt a bal hasáb 420 px alá esne (760 - 320 sáv - 16 rés), és ott az
   összeg-sorok címkéje már nem olvasható. */
@container (max-width: 760px) {
    .od-tk-grid { grid-template-columns: minmax(0, 1fr); }

    /* A magasságkorlátot is FEL KELL oldani: egy hasábban a sáv a tartalom alatt ül,
       és egy dobozba zárt, külön görgethető sáv ott csak akadály lenne. */
    .od-tk-side {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .od-tk-head-meta { margin-left: 0; }
}

/* ============================================================================
   MUNKATÁRSANKÉNTI CÉG-HOZZÁFÉRÉS  (od-access-)
   ----------------------------------------------------------------------------
   A Könyvelő CSAK a rá osztott vállalkozásokat látja; ez a kiosztás felülete
   az iroda oldalán.
   ============================================================================ */

.od-access-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* A nulla hozzáférés nem hiba, de figyelmeztető: az illető semmit nem lát. */
.od-access-chip.od-access-none { background: #FEF3C7; color: #92400E; }
.od-access-chip.od-access-all { background: var(--od-gray-100); color: var(--od-gray-600); }

.od-access-list {
    display: grid;
    gap: .3rem;
    max-height: 50vh;
    overflow-y: auto;
}

.od-access-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border: 1px solid var(--od-gray-100);
    border-radius: var(--od-radius);
}
.od-access-row:hover { background: var(--od-gray-50); }
.od-access-row.is-on { border-color: #C7DEF7; background: var(--od-primary-xlt); }

.od-access-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--od-gray-800);
    cursor: pointer;
}

.od-access-tax {
    display: block;
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: .74rem;
    font-weight: 400;
    color: var(--od-gray-600);
}

.od-access-level { width: auto; min-width: 122px; flex: none; font-size: .8rem; }

.od-access-own {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    font-size: .72rem;
    font-weight: 700;
}

/* ============================================================================
   BEVALLÁS-BEADÁS FAJTÁJA  (od-sub-)
   ----------------------------------------------------------------------------
   Egy bevallás-feladathoz több beadás tartozhat: alapbevallás, majd javítás,
   helyesbítés vagy önellenőrzés. A chip a feladat listájában és a részletezőben
   is megjelenik – a listán ez a hasznosabb: ránézésre látszik, mit javítottak.
   ============================================================================ */

.od-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Az alapbevallás visszafogott: az a normális eset, nem hír.
   A korrekciók viszont kiemelve – azért van rájuk szükség, hogy feltűnjenek. */
.od-sub-base { background: var(--od-gray-100); color: var(--od-gray-600); }
.od-sub-fix { background: #FEE2E2; color: #991B1B; }
.od-sub-amend { background: #FEF3C7; color: #92400E; }
.od-sub-self { background: #EDE9FE; color: #5B21B6; }

/* A megjelöletlen beadás figyelmeztet: a nyilvántartásból utólag nem derülne ki,
   mi volt az. */
.od-sub-none { background: #FEF3C7; color: #92400E; }

.od-sub-count { opacity: .75; font-weight: 600; }

.od-sub-select {
    width: auto;
    min-width: 170px;
    margin-top: .3rem;
    font-size: .78rem;
}

.od-tk-att-warn {
    padding: .6rem .8rem;
    border: 1px solid #FDE68A;
    border-radius: var(--od-radius);
    background: #FEF3C7;
    color: #92400E;
    font-size: .82rem;
}

/* Kiadás az ügyfélnek – az ÁLLAPOT sávja a feladat részletezőjén.
   Zöld, mert ez egy elért állapot, nem figyelmeztetés: a sárga sáv (od-tk-att-warn)
   pont az ellenkezőjét jelenti ugyanezen a lapon, és a kettő nem nézhet ki egyformán. */
.od-tk-share-state {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .85rem;
    border-radius: var(--od-radius);
    font-size: .85rem;
}

.od-tk-share-state.is-shared {
    border: 1px solid #A7F3D0;
    background: #ECFDF5;
    color: #065F46;
}

.od-tk-share-state i { flex: none; line-height: 1.5; }

/* „Kiadva" jelzés a feladatlistában. A könyvelő egy pillantással látja, mi van még
   hátra – enélkül minden sort meg kellene nyitnia, hogy megtudja. */
.od-share-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid #A7F3D0;
    background: #ECFDF5;
    color: #065F46;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

.od-share-chip.is-pending {
    border-color: #FDE68A;
    background: #FEF3C7;
    color: #92400E;
}

/* Cégforma-jelölő a vállalkozás-listában (egyéni / társas). */
.od-form-chip {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ============================================================================
   ADATLAP FÜLSÁV  (od-sheet-)
   ----------------------------------------------------------------------------
   A vállalkozás adatlapjának fülei. ⚠️ A fülek ÖNÁLLÓ ÚTVONALAK, tehát ezek sima
   linkek – nincs mögöttük JavaScript, és nincs `aria-selected`/`role="tab"`
   szerepkör sem: az a billentyűzetes fül-vezérlést ígérné, ami itt nem létezik.
   A jelölés `aria-current="page"`, mert valóban lapok közt lépünk.

   ⚠️ Saját névtér: az `od-tk-` a részletező LAP elrendezéséé, ez a fülsávé.
   Ellenőrizve, hogy szabad (18. megtanult hiba).
   ============================================================================ */

.od-sheet-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--od-gray-200);
    margin-bottom: 1rem;
    /* ⚠️ Görgetés, NEM tördelés. A Cím / Bankszámla / Adózás fülekkel együtt keskeny
       ablakban nem férnének ki; tördelve két sorba csúsznának, és a kártya minden
       ablakméret-változásnál elmozdulna függőlegesen. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.od-sheet-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--od-gray-600);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--od-transition), background-color var(--od-transition);
}

.od-sheet-tab:hover {
    color: var(--od-gray-800);
    background: var(--od-gray-50);
}

.od-sheet-tab.is-active {
    color: var(--od-primary);
    border-bottom-color: var(--od-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   A JOGVISZONY LAPJA (`od-eg-`) – a jóváhagyott `/design` terv, 2026‑09‑10.

   A kérés: „eléggé szét szórt az űrlap". A terv a szórtság KÉT felét külön
   eszközzel oldja meg, és EGYIK SEM mozdítja az adatot vagy a mentési utakat:

   1. „Nem látom, hol van adat" → PÖTTY a füleken (zöld = van rögzítve).
   2. „Fülváltáskor elveszik a kép" → ÁLLANDÓ ÖSSZEFOGLALÓ a bal oldalon.

   Plusz a fülek SORRENDJE lett a könyvelő gondolatmenete: szerződés → pénz →
   adózás → távollét.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ A `min-w-0` a Bootstrap 5-ben NEM LÉTEZIK (csak `min-vw-100`/`min-vh-100` van), mi
   viszont hat helyen használtuk – így a számított érték `min-width: auto` maradt, a flex- és
   rács-elem sosem zsugorodott, és a `text-truncate` tehetetlen volt: a jogviszony-kártyán a
   név és az altípus MÉRTEN 50 px-re kilógott a kártyából. 18. tanulság: a nem létező osztály
   NÉMÁN elromlik. Az `OfficeDetailView` két helye is ezzel javul. */
.min-w-0 { min-width: 0; }

.od-eg-split {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ⚠️ A kártya RAGAD, hogy hosszú fülön (SZJA-szerkesztő, bér-előzmény) se
   kelljen visszagörgetni érte. Az eltolás a navbar magassága – ugyanaz a
   számítás, mint a ragadós mentés-sávnál. */
.od-eg-side { position: sticky; top: calc(var(--od-navbar-h) + .5rem); }

/* ⚠️ 1100 px ALATT a kártya a tartalom FÖLÉ kerül és NEM ragad: keskeny
   ablakban egy 264 px-es oszlop a szerkesztő-területet vinné el, ragadva
   pedig a fél képernyőt. A béren kívüli juttatás 14 oszlopos táblája miatt
   ez a határ nem elméleti. */
@media (max-width: 1100px) {
    .od-eg-split { grid-template-columns: minmax(0, 1fr); }
    .od-eg-side { position: static; }
}

.od-eg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex: none;
}

.od-eg-sum {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .55rem 0;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-eg-sum:last-of-type { border-bottom: 0; }

.od-eg-k {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-400);
}

.od-eg-v { font-weight: 600; font-size: .84rem; }

/* A mostani bér – a kártya egyetlen kiemelt száma. ⚠️ OLVASOTT érték: a
   bérelőzmény mai napnál nem későbbi legfrissebb sora. */
.od-eg-big {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--od-primary-dark);
    line-height: 1.2;
}

.od-eg-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .74rem;
    color: var(--od-gray-500);
    border-top: 1px solid var(--od-gray-200);
    margin-top: .6rem;
    padding-top: .55rem;
}

/* ── A FÜL-PÖTTY ─────────────────────────────────────────────────────────────
   ⚠️ NEM ikon és nem chip: a darabszám-chip mellett is elfér, és a fülsáv
   magasságát nem növeli. Zöld = van rögzített adat, szürke = üres. A jelentést
   a bal kártya alján lévő jelmagyarázat mondja ki – enélkül a szín csak dísz. */
.od-eg-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--od-gray-300);
    flex: none;
}

.od-eg-dot.has { background: var(--od-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   A TIPOGRÁFIAI LÉPCSŐ – ÖT FOK, ÉS CSAK EZ AZ ÖT
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ MÉRVE a jogviszony lapján (2026‑09‑10): TIZENHAT különböző szövegstílus volt
   egyetlen lapon – 11/12/13/14/16/17/24 px, 400–800 súllyal. A táblázat fejléce
   16px/700 volt, vagyis NAGYOBB, mint bármelyik mezőfelirat, pedig a legkevésbé
   fontos. Két, majdnem azonos kis nagybetűs stílus (`od-eg-k` 11/700/.03em és
   `od-er-sect` 12/800/.046em) ugyanazt a feladatot végezte.

   ⚠️ Ez a lépcső ÚJ osztálycsalád, nem a meglévők átírása: az `od-pa-lb` és társai
   más lapokon is futnak, ott a némán megváltozó méret visszalépés volna. Új lapon
   EZT használd, ne találj ki hatodik fokot.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Szakaszcím és kis kulcsfelirat – EGY stílus mindkét szerepre.
   ⚠️ A SZÍN `gray-500`, nem `gray-400`, pedig a makettben az utóbbi állt: a #94A3B8
   fehéren MÉRTEN 2,54:1 kontrasztot ad, a WCAG AA 4,5:1-et kér. A #64748B 4,76:1 –
   még mindig egyértelműen másodlagos, de olvasható. A régi `od-eg-k` ugyanezt a hibát
   hordozta; itt nem visszük tovább. */
.od-ty-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

/* Mezőfelirat. Ugyanaz a MÉRET, mint a `micro`, de más SÚLY és szerep.
   ⚠️ A jogviszony-lap `od-pa-lb` feliratai UGYANEBBEN a szabályban állnak, nem egy
   másolatban: két külön szabály némán széttartana, és pont ez szülte a lapon a
   tizenhat stílust. Az `od-pa-lb` másutt marad a régi értékén. */
.od-ty-lb,
.od-eg-split .od-pa-lb { font-size: 12px; font-weight: 500; color: var(--od-gray-500); }

/* Kísérő szöveg: dátum a szám alatt, magyarázat a kísérő sávban. */
.od-ty-micro { font-size: 12px; font-weight: 400; color: var(--od-gray-600); }

/* Folyó szöveg, magyarázat, másodlagos érték. */
.od-ty-body { font-size: 13px; font-weight: 400; color: var(--od-gray-600); }

/* Kiírt (nem szerkeszthető) érték. */
.od-ty-val { font-size: 14px; font-weight: 600; color: var(--od-gray-800); }

/* A bér száma. ⚠️ EGYETLEN méret – a makett 22-t írt a kártyán és 24-et a bér
   kártyáján, vagyis a „hero" ott már két fok volt. Ugyanaz a szám ugyanakkora. */
.od-ty-hero {
    font-size: 24px;
    font-weight: 700;
    color: var(--od-primary-dark);
    letter-spacing: -.01em;
    line-height: 1.15;
}

/* ── A NYUGODT IRÁNY ELRENDEZÉSE ────────────────────────────────────────────
   ⚠️ A RITMUS: 4 / 8 / 16 / 24 / 28 – ÖT érték, és tényleg csak ez az öt. A makett
   „8/16/28, semmi más"-t ígért, de mérve TIZENKÉT különböző térközt használt, köztük
   egy `-6px`-es kézi korrekciót. Itt nincs kivétel és nincs negatív margó.
   ⚠️ A KÍSÉRŐ SÁV (`od-eg-rail`, `od-eg-form`) 2026-09-14-én MEGSZŰNT: a NAV-adat a két kód mellé, harmadik
   oszlopnak, az utolsó mentés a Mentés gomb mellé került – ott olvassuk, ahol összevetjük. */
.od-eg-rows { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.od-eg-sect { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid var(--od-gray-200); }

.od-eg-foot { border-top: 1px solid var(--od-gray-200); margin-top: 28px; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* A bal kártya csoportjai. ⚠️ A régi `od-eg-sum` MINDEN sor alá vonalat húzott – hat
   vonal egy 264 px-es kártyán rácsnak látszott, nem tagolásnak. Itt EGY vonal van (a
   fejléc alatt), a többit a 14 px-es rés tagolja. */
.od-eg-list { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--od-gray-200); padding-top: 16px; }
.od-eg-grp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Chip- vagy link-sor a felirat alatt: azoknak saját belső magasságuk van, 4 px-en
   a felirathoz tapadnának. */
.od-eg-grp.is-loose { gap: 8px; }
.od-eg-head { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; }
.od-eg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── A KÁRTYA ÉS A MEZŐK a nyugodt irány szerint ────────────────────────────
   ⚠️ LAPRA SZŰKÍTVE (`.od-eg-split` alatt): a `.form-control` és a `.od-pa-*`
   más lapokon is fut, globálisan átírva ott okozna néma elmozdulást. */
.od-eg-split .card-body { padding: 24px; }

.od-eg-split .form-control,
.od-eg-split .form-select {
    height: 36px;
    border-radius: 8px;
    border-color: var(--od-gray-300);
    font-size: 14px;
    padding: 0 11px;
}
.od-eg-split textarea.form-control { height: auto; padding: 8px 11px; }

/* A fülsáv is a lépcsőhöz igazodik: a 14 px-es fülfelirat a 14 px-es mezőértékkel
   versenyzett, pedig a fül navigáció, nem tartalom. */
.od-eg-split .od-sheet-tabs { margin-bottom: 24px; }
.od-eg-split .od-sheet-tab { padding: 10px 14px; font-size: 13.5px; }
.od-eg-split .od-gl-chip.is-sm { height: 18px; padding: 0 6px; font-size: 10.5px; font-weight: 700; }

.od-eg-split .od-pa-fg { gap: 8px; }
/* ⚠️ `flex-wrap: wrap` – BIZTONSÁGI HÁLÓ, nem díszítés. A feliratsorban felirat ÉS chip
   áll; a chip szövege nem tud zsugorodni, tehát szűk oszlopban a sor egyszerűen KILÓG.
   Mérve: „Heti munkaóra + egész" 19 px-re, „FEOR megnevezése + a jegyzékből" keskeny
   hasábon 41 px-re. Tördeléssel a chip a felirat ALÁ kerül – csúnyább, de sosem lóg ki,
   és mivel a rács `align-items: end`, a mezők így is egy vonalban maradnak. */
.od-eg-split .od-pa-lbrow { margin-bottom: 0; min-height: 18px; gap: 8px; flex-wrap: wrap; }
.od-eg-split .od-pa-row { column-gap: 16px; row-gap: 16px; }

/* ⚠️ EZEK A SOROK MÉRÉSBŐL SZÜLETTEK, nem előrelátásból. Az első deploy után a lapon
   MÉG MINDIG 11 különböző betűméret és 44 lépcsőn kívüli térköz volt: a régi `od-pa-*`
   osztályok a SAJÁT ritmusukat hozták magukkal (8,8 / 5,6 / 12 / 6,4 px), és a saját
   betűméretüket (11,2 / 12,8 / 13,1 px). Új osztályokat írni nem elég – a régieket a
   lapon LE KELL fogni, különben a lépcső csak a dokumentációban létezik. */
.od-eg-split .od-pa-rows { gap: 16px; }
.od-eg-split .od-pa-fw { gap: 8px; }
.od-eg-split .od-pa-current { gap: 16px; padding: 16px; }
.od-eg-split .od-pa-conseq { gap: 8px; padding: 8px 16px; font-size: 12px; }
.od-eg-legend { gap: 16px; padding-top: 8px; margin-top: 8px; }

/* A kiemelt összeg a `hero` fokra áll: 24px/800 volt, a `hero` 24px/700 – ugyanaz a
   szám két súllyal két fok. */
.od-eg-split .od-pa-current .amt { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.od-eg-split .od-pa-current .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--od-gray-500); }
.od-eg-split .od-pa-current .v { font-size: 14px; font-weight: 600; }
/* A kódválasztó alatt megjelenő megnevezés: 13,1px/600 volt – a `body` fokra állítva. */
.od-eg-split .od-lookup-picked { font-size: 13px; font-weight: 400; }
/* A monogram GRAFIKA, de a mérete akkor is a lépcsőn álljon. */
.od-eg-avatar { font-size: 12px; }

/* A chip a legkisebb fokon (11 px) áll, nem egy hatodikon. */
.od-eg-split .od-gl-tag { font-size: 11px; padding: 1px 7px; line-height: 17px; border-radius: 5px; letter-spacing: .02em; }

/* ── A JOGVISZONY LAPJA – 2026-09-14 (B irány: marad a bal kártya; a fülek tartalma az A rajzlapok szerint) ──
   ⚠️ A lépcső (`od-ty-*`) és a ritmus (4/8/16/24/28) marad – új érték itt sem jön be. */

/* Morzsa + címsor: a két vissza-link helyett. */
.od-eg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; font-size: 13px; color: var(--od-gray-500); }
.od-eg-crumb a { font-weight: 500; }
.od-eg-crumb-sep { color: var(--od-gray-300); }
.od-eg-crumb-cur { color: var(--od-gray-800); font-weight: 600; }
.od-eg-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.od-eg-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--od-gray-800); }

/* A felülre igazított mezősor: a „határozatlan idejű" jelölő egy oszlopot magasabbá tesz. */
.od-eg-split .od-pa-row.od-eg-row-top { align-items: start; }
/* Gomb a mezősor végén: a mezők (36 px) aljához igazodik. */
.od-eg-split .od-eg-rowbtn { height: 36px; align-self: end; white-space: nowrap; }

/* A NAV-doboz a két kód mellett. ⚠️ Nem mező-alakú (nincs input-keret): olvasott adat. */
.od-eg-navbox { display: flex; flex-direction: column; gap: 8px; min-height: 36px; padding: 8px 16px; border: 1px solid var(--od-gray-200); border-radius: 8px; background: var(--od-gray-50); }
.od-eg-navbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--od-gray-700); }
/* Az eltérő érték – ugyanaz a borostyán, mint az egyeztetés lapján (`od-rc-v.is-diff`). */
.od-eg-diff { padding: 0 4px; border-radius: 4px; background: #FFFBEB; box-shadow: inset 0 0 0 1px #FDE68A; color: #92400E; font-weight: 600; }

/* 1100 px alatt: egysoros ragadós sáv (név · bér · NAV). Szélesen NINCS – ott a bal kártya végig látszik. */
.od-eg-mini { display: none; }
@media (max-width: 1100px) {
    /* ⚠️ EGY SOR, nem törik: 390 px-en törve MÉRTEN 63 px magas volt – egy ragadós sáv, ami a képernyő tizedét
       elviszi, többet árt, mint használ. Keskenyen a NÉV csonkul (a bér és a NAV-állapot a lényeg). */
    .od-eg-mini {
        position: sticky; top: var(--od-navbar-h); z-index: 5;
        display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 16px;
        border: 1px solid var(--od-gray-200); border-radius: 8px; background: var(--od-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        font-size: 13px; color: var(--od-gray-700); white-space: nowrap;
    }
    .od-eg-mini > * { flex: none; }
    .od-eg-mini > .od-eg-mini-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--od-gray-800); }
    .od-eg-mini-sep { color: var(--od-gray-300); }
}

/* ⚠️ A GÖRGETŐ BUROK POZICIONÁLT. A fejléc képolvasó-szövege (`visually-hidden`, `position: absolute`) különben NEM a
   burokhoz igazodik, hanem kilóg belőle: a széles tábla jobb szélén álló „Műveletek" MÉRTEN 90 px-rel (1180 px-en) és
   577 px-rel (390 px-en) szélesítette a DOKUMENTUMOT. A tábla maga görgetett, tehát ránézésre semmi nem árulta el. */
.od-eg-split .table-responsive { position: relative; }

/* A bérrögzítés sora: négy mező + Rögzítés. Ahol a fülek oszlopa keskeny (a kéthasábos lap 1101–1279 px-e, az
   egyhasábos 1024 px alatt), a gomb a mezők ALÁ kerül: egy sorban MÉRTEN 120 px-re szorult az Indok legördülője. */
.od-eg-split .od-pa-row.od-eg-wagerow { grid-template-columns: 150px 150px minmax(0, 1fr) minmax(0, 1.4fr) auto; }
@media (max-width: 1023.98px), (min-width: 1100.02px) and (max-width: 1279.98px) {
    .od-eg-split .od-pa-row.od-eg-wagerow { grid-template-columns: 150px 150px minmax(0, 1fr) minmax(0, 1fr); }
    .od-eg-split .od-eg-wagerow > .od-eg-rowbtn { grid-column: 1 / -1; justify-self: start; }
}

/* Szakaszfej: felirat · címkék · ⓘ – jobbra a művelet (`ms-auto`). */
.od-eg-secthead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.od-eg-info { color: var(--od-gray-400); cursor: help; line-height: 1; }
/* A tartalmuk szélességéig nőnek, nem feszülnek ki a kártyára: a Kifizetés két mezője, az EKHO két oszlopa. */
.od-eg-narrow { max-width: 760px; }
.od-eg-wide { max-width: 980px; }
.od-eg-checks { display: flex; flex-direction: column; gap: 8px; }

/* EV/T.váll.: két KÜLÖN hasáb (125.) – a bal szélesebb, abban van a beágyazott átalány-blokk. 1280 px alatt a kártya
   ~720 px, ott a két hasáb egymás alá kerül. */
.od-eg-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1280px) {
    .od-eg-cols { grid-template-columns: minmax(0, 1fr); }
}
/* A jelölőhöz tartozó mezők: a bal vonal mondja, hogy ezek az átalányadózás mezői. */
.od-eg-nested { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--od-gray-200); }

/* A béren kívüli szerkesztő tizenkét hónapja: két sorban hatosával, keskenyen négy sorban hármasával. */
.od-eg-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767.98px) {
    .od-eg-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Szocho: EGY tábla, rögzített oszlopokkal. ⚠️ NINCS görgető burok körülötte – a kódválasztó lenyílója benne ragadna. */
.od-eg-reltable { table-layout: fixed; width: 100%; }
.od-eg-reltable .od-eg-relnum { width: 2.5rem; }
.od-eg-reltable .od-eg-reldate { width: 10.5rem; }
.od-eg-reltable .od-eg-relper { width: 14rem; }
.od-eg-reltable .od-eg-reldel { width: 3.5rem; text-align: right; }
.od-eg-split .od-eg-reltable > tbody > tr > td { vertical-align: top; }
.od-eg-split .od-eg-reltable > tbody > tr > td.od-eg-relnum { line-height: 36px; }
.od-eg-reltable td.od-eg-relper > :first-child { min-height: 36px; display: flex; align-items: center; }

/* Ahol a tábla (~880 px) nem fér el, a sorok kártyasorrá rendeződnek. KÉT sáv: az egyhasábos lap 976 px alatt, és a
   kéthasábos 1101–1263 px között (ott a bal kártya mellett a fülek oszlopa 880 px-nél keskenyebb). */
@media (max-width: 975.98px), (min-width: 1100.02px) and (max-width: 1263.98px) {
    .od-eg-reltable, .od-eg-reltable > tbody { display: block; }
    .od-eg-reltable > thead { display: none; }
    .od-eg-split .od-eg-reltable > tbody > tr {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas: "num code code del" ". from to ." ". per per .";
        gap: 8px 16px;
        padding: 16px 0;
        border-bottom: 1px solid var(--od-gray-200);
    }
    .od-eg-split .od-eg-reltable > tbody > tr > td { display: block; width: auto; padding: 0; border: 0; }
    .od-eg-split .od-eg-reltable > tbody > tr > td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--od-gray-500);
    }
    .od-eg-reltable td.od-eg-relnum { grid-area: num; }
    .od-eg-reltable td.od-eg-relcode { grid-area: code; }
    .od-eg-reltable td.od-eg-relfrom { grid-area: from; }
    .od-eg-reltable td.od-eg-relto { grid-area: to; }
    .od-eg-reltable td.od-eg-relper { grid-area: per; }
    .od-eg-reltable td.od-eg-reldel { grid-area: del; }
    .od-eg-reltable td.od-eg-relper > :first-child { min-height: 0; }
}
@media (max-width: 575.98px) {
    .od-eg-split .od-eg-reltable > tbody > tr {
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        grid-template-areas: "num code del" ". from ." ". to ." ". per .";
    }
}

/* Szabadság: a négy szám – ugyanazzal a felirattal, mint a tábla oszlopai. ⚠️ Nem `od-ty-hero`: az a lap egyetlen
   hero-száma (a bal kártya bére). */
.od-eg-bal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; padding: 16px; border: 1px solid var(--od-gray-200); border-radius: 8px; background: var(--od-gray-50); }
.od-eg-bal > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-eg-bal-n { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--od-gray-800); }
.od-eg-bal-n small { font-size: 12px; font-weight: 500; color: var(--od-gray-500); }
.od-eg-bal-n.is-em { color: var(--od-primary-dark); }
@media (max-width: 575.98px) {
    .od-eg-bal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Összecsukható hivatkozás („Amiből számoltunk"). */
.od-eg-disc > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--od-gray-700); }

/* SZJA: a hat szakasz bal oldali menüben. 1280 px alatt (a fülek oszlopa ~720 px) keskenyebb menü: a szakaszok
   két 14rem-es mezőből álló sorai (480 px) így is elférnek; 768 px alatt a menü a mezők fölé törik. */
.od-eg-snavsplit { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.od-eg-snav { display: flex; flex-direction: column; gap: 4px; }
.od-eg-snav-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; border: 0; border-radius: 8px;
    background: transparent; font-size: 13px; color: var(--od-gray-700); text-align: left;
}
.od-eg-snav-item:hover { background: var(--od-gray-50); }
.od-eg-snav-item.is-on { background: var(--od-primary-xlt); color: var(--od-primary-dark); font-weight: 600; }
@media (max-width: 1280px) {
    .od-eg-snavsplit { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767.98px) {
    .od-eg-snavsplit { grid-template-columns: minmax(0, 1fr); }
    .od-eg-snav { flex-direction: row; flex-wrap: wrap; }
    .od-eg-snav-item { width: auto; }
}

/* Két legördülő EGY felirat alatt (a számfejtés első hónapja: év + hónap). */
.od-eg-pairsel { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 8px; }
/* Egysoros megjegyzés egy mezősor végén – a mezőkkel egy magasságban. */
.od-eg-inlinenote { display: flex; align-items: center; gap: 8px; min-height: 36px; }

/* A bérelőzmény fejléce a LÉPCSŐ legkisebb foka – korábban 16px/700 volt, vagyis
   a lap egyik legnagyobb szövege a legkevésbé fontos helyen. */
.od-eg-split .table > thead > tr > th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-400);
    border-bottom: 1px solid var(--od-gray-200);
    padding-bottom: 8px;
}
.od-eg-split .table > tbody > tr > td { font-size: 13px; padding: 12px .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   A VÁLLALKOZÁS ADATLAPJÁNAK ÁLLAPOT-SÁVJA (`od-cs-`) – a jóváhagyott `/design`
   terv, 2026‑09‑06.

   ⚠️ SAJÁT névtér, de a CHIPEKET a főkönyvi kivonat családjától kölcsönzi
   (`od-gl-chip is-ok/is-warn/is-bad/is-off`): a „rendben / figyelem / baj" jelentés
   a programban EGY vizuális nyelv – két külön chip-készlettel a könyvelőnek két
   szótárat kellene fejben tartania.

   ⚠️ A sáv a KERET része (`CompanySheet`), nem egy fülé: minden fülön ugyanott áll.
   ═══════════════════════════════════════════════════════════════════════════ */

.od-cs-band {
    display: flex;
    align-items: stretch;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: 12px;
    box-shadow: var(--od-shadow-sm);
    padding: 12px 18px;
    margin-bottom: 14px;
    /* Keskeny ablakban a négy csoport tördel, nem görget: itt nincs olyan sorrendi
       jelentés, mint a fülsávnál, tehát a tördelés a jobb. */
    flex-wrap: wrap;
    gap: 10px 0;
}

.od-cs-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 22px;
    min-width: 0;
}
.od-cs-stat:first-child { padding-left: 0; }
.od-cs-right { margin-left: auto; padding-right: 0; }

.od-cs-sep {
    width: 1px;
    background: var(--od-gray-200);
    flex: none;
    margin: 2px 0;
}

.od-cs-lbl {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-400);
}

.od-cs-val {
    font-size: .95rem;
    font-weight: 700;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.od-cs-note { font-size: .76rem; color: var(--od-gray-500); }
.od-cs-muted { color: var(--od-gray-400); font-weight: 600; }

/* A hiányzó törzsadatok doboza – a kivonat `od-gl-issuesbox` mintája. */
.od-cs-gaps {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.od-cs-gaps-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    color: #92400E;
    margin-bottom: 8px;
}
.od-cs-gaps-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px 18px;
}
.od-cs-gap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #92400E;
    min-width: 0;
}
.od-cs-gap a { font-weight: 600; white-space: nowrap; }
.od-cs-gap-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--od-warning);
    flex: none;
}

/* A FELELŐS MUNKATÁRS kártyája az Alapadatok fülön (a jóváhagyott terv szerint).

   ⚠️ Nem ugyanaz, mint az állapot-sáv „Felelős könyvelő" csoportja: a sáv a NEVET mondja
   meg minden fülön, ez pedig az irodát és a MŰVELETET is hozza – innen lehet átadni a
   céget másik munkatársnak. A sáv a keret, ez a fül saját tartalma. */
.od-cs-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--od-primary-xlt);
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    margin-bottom: 14px;
}
.od-cs-owner-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--od-primary);
    color: var(--od-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    flex: none;
}
/* Kijelöletlen felelősnél a jelvény halvány és szaggatott – az `od-avatar-none`
   mintájára: az ÜRES állapot nem nézhet ki ugyanúgy, mint a kitöltött. */
.od-cs-owner-av.is-none {
    background: transparent;
    border: 1.5px dashed var(--od-gray-200);
    color: var(--od-gray-400);
}
.od-cs-owner-main { min-width: 0; }
.od-cs-owner-name { font-size: .88rem; font-weight: 700; color: var(--od-gray-800); }
.od-cs-owner-role { font-size: .76rem; color: var(--od-gray-600); }
.od-cs-owner-act { margin-left: auto; flex: none; }

/* ⚠️ A HIÁNY-JELZÉS a fülön: pont, nem szám. A szám azt ígérné, hogy megszámoltuk a
   teendőket az adott fülön – valójában egy fülön több hiány is lehet, és a lista a sáv
   alatt úgyis tételesen felsorolja. A pont annyit mond, amennyit tud: „itt van dolgod".
   `aria-hidden`, mert a hiányokat a sáv alatti lista mondja el olvasóval is. */
.od-sheet-gap {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--od-danger);
    flex: none;
    margin-left: 1px;
}

.od-sheet-tab i { font-size: .95rem; opacity: .65; }
.od-sheet-tab.is-active i { opacity: 1; }

/* A kártya lábléce: mentés/mégse balra, halvány metaadat jobbra. A gombok a
   KÁRTYÁN belül vannak, nem a lap alján – így a fül tartalma egy zárt egység. */
.od-sheet-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--od-gray-100);
}

.od-sheet-foot-meta {
    margin-left: auto;
    font-size: .78rem;
    color: var(--od-gray-400);
}

/* ============================================================================
   VÁLLALKOZÁS-LISTA  (od-co-)
   ----------------------------------------------------------------------------
   Ugyanaz a felépítés, mint a feladatlistában: ikon + kétsoros főcella. Az ikon
   a navbar cégválasztójáéval EGYEZIK (bi-person-vcard / bi-building) – aki ott
   megszokta, itt is ráismer, nem kell új jelrendszert megtanulnia.
   ============================================================================ */

.od-co-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.od-co-main { min-width: 0; }

.od-co-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
/* Egyéni vállalkozó és társas vállalkozás: eltérő szín, hogy az ikon alakja
   mellett a színfolt is elkülönítse őket egy hosszú listában. */
.od-co-ico-ev { background: #FEF3C7; color: #92400E; }
.od-co-ico-tv { background: #DBEAFE; color: #1D4ED8; }

.od-co-name {
    font-weight: 600;
    font-size: .92rem;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.od-co-status {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    font-size: .72rem;
    font-weight: 700;
}

/* „Regisztrálatlan" (passzív) cég és a rá érkezett igénylés. Két külön jelzés, mert két
   külön dolgot mondanak: az egyik ÁLLAPOT (nincs tulajdonos), a másik TEENDŐ (dönteni kell). */
.od-co-passive,
.od-co-claim {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.od-co-passive { background: var(--od-gray-100); color: var(--od-gray-600); }

/* A regisztrálatlan cég teendő-kártyája: halvány sárga bal szegély, hogy elváljon az
   adatkártyáktól – ez nem adat, hanem TENNIVALÓ. */
.od-passive-card { border-left: 3px solid #F59E0B !important; }

/* ============================================================================
   KERESHETŐ LEGÖRDÜLŐ  (od-combo-)
   ----------------------------------------------------------------------------
   A `js/combo-select.js` építi egy VALÓDI `<select data-od-combo>` köré. A select a
   DOM-ban marad (ő viszi a `name`-et), csak elrejtjük – így JavaScript nélkül a natív
   legördülő működik, és a POST-ban szabad szöveg szerkezetileg nem tud átjutni.
   ============================================================================ */

.od-combo { position: relative; }

/* ⚠️ `display: none` helyett elrejtve: a rejtett mezőt egyes böngészők kihagynák a
   validációból és a fókusz-sorrendből, itt viszont ő a tényleges beviteli elem. */
.od-combo-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.od-combo-list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-lg);
}

.od-combo-option {
    padding: .4rem .6rem;
    border-radius: 6px;
    font-size: .9rem;
    color: var(--od-gray-800);
    cursor: pointer;
}

.od-combo-option:hover,
.od-combo-option.is-active { background: var(--od-gray-100); }

/* A jelenlegi választás akkor is látszik, ha épp másikra mutat a billentyűzet. */
.od-combo-option.is-selected { color: var(--od-primary); font-weight: 600; }

.od-combo-empty {
    padding: .5rem .6rem;
    font-size: .85rem;
    color: var(--od-gray-400);
}

/* ---------- Címek (adatlap „Címek" fül) ---------- */
.od-addr-list { display: grid; gap: .5rem; }

.od-addr {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem .85rem;
    border: 1px solid var(--od-gray-100);
    border-radius: var(--od-radius);
    background: var(--od-white);
}

/* ⚠️ A KIEMELT SOR (2026‑09‑06, a jóváhagyott `/design` terv): amiből cégenként EGY van és
   kötelező – a címeknél a SZÉKHELY, a tevékenységeknél a FŐTEVÉKENYSÉG, a bankszámláknál az
   ALAPÉRTELMEZETT.

   ⚠️ **TELJES kitöltés, nem bal oldali sáv – 2026‑09‑07, a felhasználó javítása.** Először
   halvány keret + `inset` sávot kapott, azzal az indoklással, hogy a kitöltést a szerkesztett
   sor használja. A TERVEN viszont (`Cimek.dc.html`, `.row.hl{background:var(--px)}`) a teljes
   háttér kék – és a felhasználó a rajzot nézve rögtön kiszúrta. A két jelzés ütközését nem a
   kiemelt sor gyengítésével oldjuk fel, hanem a szerkesztettén: az ma úgyis MODÁLIS ablakban
   történik, a sor a sötétített háttér mögött van. */
.od-addr.is-primary {
    border-color: #DBEAFE;
    background: var(--od-primary-xlt);
}

/* Az épp szerkesztett sor jelölve. ⚠️ A `is-editing` a `is-primary` UTÁN áll, tehát azonos
   fajsúlynál ez nyer – a szerkesztés fontosabb jelzés.

   ⚠️ Már NEM a kitöltés különbözteti meg (azt a kiemelt sor vitte el), hanem a HATÁROZOTT
   keret és a gyűrű. Azonos kitöltéssel a székhely szerkesztés közben ugyanúgy nézne ki, mint
   szerkesztés nélkül – vagyis a jelzésnek nem lenne tárgya. */
.od-addr.is-editing {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
    box-shadow: 0 0 0 3px rgba(21, 96, 189, .18);
}

/* A kiemelt sor a lista FÖLÖTT áll, kis elválasztással – a terven saját kártyaként ül a
   többi cím fölött, nem a lista első sorának látszik. */
.od-addr.is-primary { margin-bottom: .35rem; }

/* A kiemelt sor MAGYARÁZATA: miért van elöl. ⚠️ A szabályt KIMONDJUK, nem csak jelöljük –
   enélkül a sorrend önkényesnek látszana, és egy jövőbeli „miért ez van felül?" kérdésre a
   felület nem felelne. */
.od-addr-lead-note {
    font-size: .76rem;
    color: var(--od-gray-500);
    margin: -.1rem 0 .6rem;
}

.od-addr-main { min-width: 0; flex: 1 1 auto; }
.od-addr-line { font-size: .9rem; color: var(--od-gray-800); overflow-wrap: anywhere; }
.od-addr-meta { font-size: .76rem; color: var(--od-gray-600); margin-top: 1px; }
.od-addr-meta:empty { display: none; }

/* ============================================================================
   SZŰRŐSÁV a listás füleken  (od-addr-bar, od-fchip, od-sw)
   ----------------------------------------------------------------------------
   A jóváhagyott `/design` terv sávja: típus-chipek darabszámmal, kapcsoló, és a
   jobb szélen az „Új" gomb. ⚠️ A vezérlők LINKEK, nem gombok: a lap statikus SSR,
   ahol az `@onclick` le sem futna – az állapot az URL-ben él.
   ============================================================================ */
.od-addr-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--od-gray-100);
    background: var(--od-gray-50);
    border-radius: var(--od-radius-lg) var(--od-radius-lg) 0 0;
}

.od-fchip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 26px;
    padding: 0 .65rem;
    border: 1px solid var(--od-gray-300);
    border-radius: 999px;
    background: var(--od-white);
    font-size: .78rem;
    font-weight: 600;
    color: var(--od-gray-600);
    text-decoration: none;
    white-space: nowrap;
}
.od-fchip:hover { border-color: var(--od-primary); color: var(--od-primary); }

.od-fchip.is-on {
    background: var(--od-primary);
    border-color: var(--od-primary);
    color: var(--od-white);
}
.od-fchip.is-on:hover { color: var(--od-white); }

/* A darabszám halványabb a feliratnál: a chip ELSŐSORBAN szűrő, a szám csak kíséret. */
.od-fchip-c { opacity: .6; font-weight: 600; }
.od-fchip.is-on .od-fchip-c { opacity: .75; }

/* A kapcsoló – link, de kapcsolónak LÁTSZIK. Az `aria-pressed` SZTRINGKÉNT megy a
   markupban (a Blazor a `false`-t kihagyná), így olvasóval is hallható az állapota. */
.od-sw {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--od-gray-600);
    text-decoration: none;
    white-space: nowrap;
}
.od-sw:hover { color: var(--od-gray-800); }

.od-swb {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--od-gray-300);
    flex: none;
    transition: background .15s ease;
}
.od-swb::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--od-white);
    transition: left .15s ease;
}
.od-swb.is-on { background: var(--od-primary); }
.od-swb.is-on::after { left: 17px; }

/* A záró magyarázó doboz – halkabb, mint a hiány-doboz: ez nem teendő, hanem
   ismeret. Ezért szürke, nem sárga. */
.od-note-gray {
    display: flex;
    gap: .6rem;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
    border: 1px solid var(--od-gray-200);
    border-radius: 10px;
    background: var(--od-gray-50);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--od-gray-600);
}
.od-note-gray i { margin-top: .15rem; flex: none; }

/* A fülön BELÜLI hiány-doboz – sárga, mert TEENDŐ, szemben a szürke magyarázattal.
   Ugyanaz a három szín, mint az adatlap állapot-sávjának hiány-dobozában, hogy a kettő
   ránézésre összetartozzon. */
.od-note-warn {
    display: flex;
    gap: .6rem;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    background: #FFFBEB;
    font-size: .82rem;
    line-height: 1.5;
    color: #92400E;
}
.od-note-warn i { margin-top: .15rem; flex: none; }

/* A sávba épített KERESŐ. ⚠️ `form`, nem `@oninput`: a lap statikus SSR, ott az
   eseménykezelő le sem futna – a beírt szöveg az URL-be megy, Enterre. */
.od-bar-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 31px;
    padding: 0 .6rem;
    border: 1px solid var(--od-gray-300);
    border-radius: 8px;
    background: var(--od-white);
    min-width: 240px;
}
.od-bar-search i { color: var(--od-gray-400); font-size: .85rem; }

/* A mező KERET NÉLKÜL ül a dobozban: a keretet a doboz adja, két keret egymásban
   dupla vonalat rajzolna. */
.od-bar-search input {
    border: 0;
    outline: none;
    background: transparent;
    font-size: .82rem;
    color: var(--od-gray-800);
    width: 100%;
    min-width: 0;
}
.od-bar-search input::placeholder { color: var(--od-gray-400); }

/* ---------- Tevékenységek TÁBLÁZATA ---------- */
.od-act-table th {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    border-bottom: 1px solid var(--od-gray-200);
    white-space: nowrap;
}
.od-act-table td { font-size: .86rem; color: var(--od-gray-800); }

/* ⚠️ TÁBLÁZAT-PREFIX a sor-színekhez: a Bootstrap `.table > … > *` szabálya erősebb egy
   csupasz `.is-past`-nál, tehát a halványítás némán nem érvényesülne (18. tanulság). */
.od-act-table > tbody > tr.is-past > td { opacity: .62; }
.od-act-table > tbody > tr.is-past:hover > td { opacity: 1; }

.od-act-table > tbody > tr.is-editing > td {
    background: var(--od-primary-xlt);
    box-shadow: inset 0 0 0 1px var(--od-primary);
}

/* ---------- Adózási kötelezettségek TÁBLÁZATA ---------- */
.od-tax-table th {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    border-bottom: 1px solid var(--od-gray-200);
    white-space: nowrap;
}
.od-tax-table td { font-size: .86rem; color: var(--od-gray-800); }

/* ⚠️ TÁBLÁZAT-PREFIX: a Bootstrap `.table > … > *` erősebb egy csupasz `.is-past`-nál,
   tehát a halványítás némán nem érvényesülne (18. tanulság). */
.od-tax-table > tbody > tr.is-past > td { opacity: .6; }
.od-tax-table > tbody > tr.is-past:hover > td { opacity: 1; }

.od-tax-table > tbody > tr.is-editing > td {
    background: var(--od-primary-xlt);
    box-shadow: inset 0 0 0 1px var(--od-primary);
}

.od-tax-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

/* A kártya LÁBLÉCE: mit hoz létre a fenti beállítás. Elválasztva a táblázattól, mert
   nem egy sorról szól, hanem az EGÉSZRŐL. */
.od-tax-foot {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--od-gray-100);
    font-size: .82rem;
    color: var(--od-gray-600);
}

/* ---------- Bankszámlák ----------
   Számjegy-sorozatokat monospace-szel és tabuláris számjegyekkel: így a számlaszámok
   egymás alatt egy vonalban állnak, és a 8-as csoportok ránézésre összevethetők. */
.od-bank-number {
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* A lezárt számla nem hiba, de jelezni kell – halvány, nem piros. */
.od-bank-closed { color: var(--od-gray-400); }

/* A bankszámlák TÁBLÁZATA (2026‑09‑07, a `/design` terv szerinti alak). */
.od-bank-table th {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    border-bottom: 1px solid var(--od-gray-200);
    white-space: nowrap;
}
.od-bank-table td { font-size: .86rem; color: var(--od-gray-800); }

/* ⚠️ TÁBLÁZAT-PREFIX a sor-színekhez: a Bootstrap `.table > … > *` szabálya erősebb egy
   csupasz `.is-past`-nál, tehát a halványítás NÉMÁN nem érvényesülne (18. tanulság). */
.od-bank-table > tbody > tr.is-past > td { opacity: .6; }
.od-bank-table > tbody > tr.is-past:hover > td { opacity: 1; }

.od-bank-table > tbody > tr.is-editing > td {
    background: var(--od-primary-xlt);
    box-shadow: inset 0 0 0 1px var(--od-primary);
}

/* A kártya LÁBLÉCE: miért ennyi az oszlop. Nem egy sorról szól, hanem az egészről. */
.od-bank-foot {
    padding: .75rem 1rem;
    border-top: 1px solid var(--od-gray-100);
    background: var(--od-gray-50);
    border-radius: 0 0 var(--od-radius-lg) var(--od-radius-lg);
    font-size: .82rem;
    color: var(--od-gray-600);
}

/* A szerkesztő ablak ÖSSZECSUKHATÓ „Külföldi utaláshoz" szakasza.

   ⚠️ **AZ ELREJTÉST KI KELL MONDANI – MÉRT hiba javítása (2026‑09‑07, 119. tanulság).** A
   `<details>` becsukását a BÖNGÉSZŐ alapértelmezett (UA) stíluslapja végzi, az pedig a
   kaszkádban gyengébb MINDEN szerzői szabálynál. A tartalom itt egy Bootstrap `.row`, azon
   `display: flex` áll – ennyitől a szakasz `open=false` mellett is NYITVA maradt. Mérve:
   `details.open === false`, a benne lévő IBAN-mező mégis `height = 47`. Némán rossz: a jelölő
   helyes, a látvány nem. Ez a saját szabály (0,3,0) a `.row`-ét (0,1,0) is veri. */
.od-bank-foreign:not([open]) > *:not(summary) { display: none; }

.od-bank-foreign-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}
/* A WebKit külön pszeudo-elemmel rajzolja a nyilat – a `list-style` ott nem elég. */
.od-bank-foreign-head::-webkit-details-marker { display: none; }

/* Saját nyíl, hogy a nyitottság a böngészőtől függetlenül UGYANÚGY nézzen ki. */
.od-bank-foreign-head::before {
    content: "";
    width: .5rem;
    height: .5rem;
    flex: none;
    border-right: 2px solid var(--od-gray-400);
    border-bottom: 2px solid var(--od-gray-400);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.od-bank-foreign[open] > .od-bank-foreign-head::before { transform: rotate(45deg); }

.od-bank-foreign-note { font-size: .78rem; color: var(--od-gray-500); font-weight: 400; }
.od-bank-foreign[open] > .od-bank-foreign-head { margin-bottom: .75rem; }

/* ---------- ÁFA-analitika (2026‑09‑08) ----------
   A lap az `od-gl-` névtér állapot-kártyáit és üres állapotát ÚJRAHASZNÁLJA – csak ami
   valóban más, kap saját osztályt. Két másolat mellett a két lekérdező lap ránézésre
   széttartana. */
.od-va-status {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr 1fr;
    gap: .9rem;
    margin-bottom: .9rem;
}

@media (max-width: 1199.98px) {
    .od-va-status { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .od-va-status { grid-template-columns: 1fr; }
}

/* A sor-hivatkozás („· 36. sor") halványabb a feliratnál: kíséret, nem cím. */
.od-va-rowref { color: var(--od-gray-400); font-weight: 500; }

.od-va-due { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

.od-va-periods { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

.od-va-range { font-size: .78rem; color: var(--od-gray-500); white-space: nowrap; }

/* ---------- A bevallás-szerkezet táblája ---------- */
.od-va-table th {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    border-bottom: 1px solid var(--od-gray-200);
    white-space: nowrap;
}
.od-va-table td { font-size: .86rem; color: var(--od-gray-800); }

/* ⚠️ TÁBLÁZAT-PREFIX a sor-színekhez: a Bootstrap `.table > … > *` erősebb egy csupasz
   osztálynál, tehát a halványítás NÉMÁN nem érvényesülne (18. tanulság). */
.od-va-table > tbody > tr.od-va-zero > td { color: var(--od-gray-400); }

/* A SZÁMÍTOTT sor a bevallás saját aritmetikája – vizuálisan el kell válnia attól, amit
   mi összesítünk a könyvelésből. */
.od-va-table > tbody > tr.od-va-calc > td {
    background: #FAFCFF;
    font-weight: 700;
    color: var(--od-gray-800);
}

.od-va-table > tbody > tr.od-va-sect > td {
    background: var(--od-gray-100);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-600);
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.od-va-code {
    font-weight: 700;
    color: var(--od-primary-dark);
    font-variant-numeric: tabular-nums;
}

/* A lábléc a 82. sorról szól – nem egy sorról, hanem az EGÉSZ levezetésről. */
.od-va-foot {
    display: flex;
    gap: .6rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--od-gray-100);
    background: var(--od-gray-50);
    border-radius: 0 0 var(--od-radius-lg) var(--od-radius-lg);
    font-size: .8rem;
    color: var(--od-gray-600);
}
.od-va-foot i { flex: none; margin-top: .15rem; }

/* ---------- A kinyitott sor tételei ---------- */
.od-va-lines { padding: .25rem 0 .5rem; }

.od-va-lines-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 0 .25rem .6rem;
}

.od-va-lines-table th {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    white-space: nowrap;
}
.od-va-lines-table td { font-size: .8rem; }

.od-va-lines-table > tfoot > tr.od-va-lines-sum > td {
    background: var(--od-gray-50);
    font-weight: 700;
    border-top: 1px solid var(--od-gray-200);
}

.od-va-partner {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Tevékenységi kódok ---------- */
/* A kód monospace, hogy a listában egymás alatt összevethető legyen. */
.od-act-code {
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--od-gray-800);
    margin-right: .5rem;
}

/* Eltérő kódrendszer: a cégforma megváltozott, a régi kód érvénytelen.
   Figyelmeztetés, nem hiba – borostyán, nem piros. */
.od-act-mismatch { color: #92400E; }

/* ---------- Lenyitható kártya (od-collapse) ----------
   ⚠️ `<details>/<summary>` elemre épül, NEM JavaScriptre: statikus SSR-en az `@onclick`
   le sem futna, a `<details>` viszont tiszta HTML és billentyűzetről is kezelhető.
   A nyitott állapotot a SZERVER is beállíthatja az `open` attribútummal. */
.od-collapse {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

.od-collapse-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--od-gray-800);
    /* A böngésző alapértelmezett háromszögét levesszük – sajátot rajzolunk,
       ami forgatható és követi a nyitott állapotot. */
    list-style: none;
}
.od-collapse-head::-webkit-details-marker { display: none; }
.od-collapse-head:hover { background: var(--od-gray-100); border-radius: var(--od-radius); }

.od-collapse-title { font-weight: 600; }

.od-collapse-hint {
    margin-left: auto;
    font-size: .78rem;
    color: var(--od-gray-400);
}

/* ⚠️ NINCS `transition` a `transform`-on, és ez MÉRT döntés, nem ízlés. A `<details>`
   nyitásakor a nyíl `none` → `rotate(90deg)` átmenete BERAGAD a kiindulási értéknél: a
   számított érték 500 ms után is az egységmátrix marad, tehát a nyíl SOSEM fordul el.
   Átmenet nélkül azonnal helyes (`matrix(0, 1, -1, 0, 0, 0)`) – mérve mindkét esetben.
   Egy nyitásjelzőnél az azonnali váltás amúgy is jobb: követi a kattintást. */
.od-collapse-arrow { color: var(--od-gray-400); }

/* ⚠️ A forgatás MINDEN nyitásjelzőre EGY szabályban. Az értékhatár-kártya (`od-thr`)
   ugyanezt a nyilat használja, saját `[open]` szabállyal viszont a két forgatás
   előbb-utóbb széttartana – és a kártya nyilát némán ottfelejtenénk vízszintesen. */
.od-collapse[open] .od-collapse-arrow,
.od-thr[open] .od-collapse-arrow,
.od-dash-snoozed[open] .od-collapse-arrow { transform: rotate(90deg); }

.od-collapse-body {
    padding: 0 .85rem .85rem;
    border-top: 1px solid var(--od-gray-200);
    padding-top: .85rem;
}

/* ---------- Tevékenységek a vállalkozás-listában ----------
   A főtevékenység VASTAGON, a többi halványan – ugyanaz a jelrendszer, mint a
   Címek oszlopban a székhely és a telephelyek közt. */
.od-co-act { min-width: 0; font-size: .84rem; }

.od-co-act-main {
    color: var(--od-gray-800);
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.od-co-act-code {
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    flex: none;
}

.od-co-act-name { overflow-wrap: anywhere; }

.od-co-act-more {
    margin-top: 2px;
    font-size: .78rem;
    color: var(--od-gray-600);
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}

/* Az import mezője monospace: soronként egy rekord, így ránézésre látszik,
   ha egy sor elcsúszott. */
.od-act-import {
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
}

/* ---------- Címek a vállalkozás-listában ---------- */
.od-co-addr { min-width: 0; font-size: .84rem; }

/* A székhely az elsődleges sor – a többi cím halványabb, mint a Kapcsolat
   oszlopban a telefonszám az e-mail alatt. Ugyanaz a jelrendszer. */
.od-co-addr-hq {
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 6px;
}
.od-co-addr-hq i { color: var(--od-gray-400); font-size: .82rem; flex: none; }

.od-co-addr-more {
    margin-top: 2px;
    font-size: .78rem;
    color: var(--od-gray-600);
    overflow-wrap: anywhere;
}

/* A középpont halványabb, mint a településnevek: elválasztó, nem tartalom. */
.od-co-addr-sep { color: var(--od-gray-300); margin: 0 5px; }

/* A „+N" kiemelve: ez nem egy újabb település, hanem jelzés, hogy van még. */
.od-co-addr-rest {
    margin-left: 6px;
    font-weight: 700;
    color: var(--od-gray-800);
}

.od-claim-list { display: grid; gap: .5rem; }

.od-claim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .65rem .85rem;
    border: 1px solid var(--od-gray-100);
    border-radius: var(--od-radius);
    background: var(--od-white);
}

.od-claim-main { min-width: 0; }
.od-claim-name { font-weight: 600; font-size: .9rem; color: var(--od-gray-800); }
.od-claim-meta { font-size: .78rem; color: var(--od-gray-600); overflow-wrap: anywhere; }

/* Visszafordíthatatlan művelet külön, jelölt sávban – ne lehessen véletlenül
   belefutni az űrlap mentése után. */
.od-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    border: 1px solid #FECACA;
    border-radius: var(--od-radius);
    background: #FEF2F2;
}

/* A teendő FELTŰNŐBB az állapotnál – ez az, amiért az irodavezetőnek lépnie kell. */
.od-co-claim { background: #FEF3C7; color: #92400E; }

.od-co-passive i,
.od-co-claim i { font-size: .7rem; }

.od-co-ids {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 1px;
}

.od-co-sep { color: var(--od-gray-300); }

/* Az azonosító maga a gomb: a könyvelő naponta másolja át nyomtatványokba, ezért
   nem külön ikonra kell céloznia. A másoló ikon csak hoverre erősödik fel. */
.od-co-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--od-gray-600);
    cursor: pointer;
}
.od-co-copy:hover { color: var(--od-primary); }
.od-co-copy i { opacity: .35; font-size: .72rem; }
.od-co-copy:hover i { opacity: 1; }

.od-co-contact {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    min-width: 0;
}
.od-co-contact i { color: var(--od-gray-400); font-size: .82rem; flex: none; }
.od-co-contact a { color: var(--od-gray-800); text-decoration: none; overflow-wrap: anywhere; }
.od-co-contact a:hover { color: var(--od-primary); text-decoration: underline; }

/* A telefonszám a másodlagos sor – halványabb, mint az e-mail. */
.od-co-contact-muted { margin-top: 2px; }
.od-co-contact-muted a { color: var(--od-gray-600); font-size: .8rem; }

/* ==========================================================================
   ADÓZÁS FÜL (od-tax-)
   Saját névtér: az `od-tk-` a feladat-részletezőé, az `od-addr-` a listasoroké.
   A listasorokat SZÁNDÉKOSAN újrahasználjuk (od-addr-list / od-addr), hogy a
   Címek, Bankszámlák, Tevékenységek és Adózás fül egyformán nézzen ki –
   itt csak a csoportfejléc és a néhány adózás-specifikus jelzés új.
   ========================================================================== */

/* Csoportfejléc a kötelezettség-listában (Jövedelemadózás, ÁFA-státusz…). */
.od-tax-group + .od-tax-group { margin-top: 1.25rem; }

.od-tax-group-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    margin-bottom: .4rem;
}

/* A fejléc ikonja NEM kap külön színt: itt a felirat már kimondja a csoportot,
   a szín csak zaj lenne. A kártyán más a helyzet – ott nincs fejléc. */
.od-tax-group-head i { font-size: .78rem; }

/* Gyakoriság-jelzés a sor nevében. Nem badge: az állapotjelző badge-től
   meg kell különböztetni, különben két egyforma pirula versenyezne a szemért. */
.od-tax-freq {
    display: inline-block;
    margin-left: .4rem;
    padding: 1px 7px;
    border: 1px solid var(--od-gray-300);
    border-radius: 999px;
    font-size: .7rem;
    color: var(--od-gray-600);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A BEÁLLÍTÁSOK FÜL áttekintő csíkja és számozott szakaszai (`od-set-`),
   2026‑09‑06, a jóváhagyott `/design` terv.

   ⚠️ A felhasználó panasza: „elveszek a kártyák között, az elsőt még értem, utána
   összefolynak" – de a fülről semmit nem lehetett elhagyni, mert a másik megjegyzése
   szerint „sokkal több adatot kell megadni, azok nem veszhetnek el". A megoldás
   ezért SZERKEZETI: a csík egy sorban megmutatja mind a négy szakasz állapotát, a
   szakaszok pedig sorszámot kapnak, tehát a lap felülről lefelé végigolvasható.
   ═══════════════════════════════════════════════════════════════════════════ */

.od-set-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}

.od-set-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: 12px;
    box-shadow: var(--od-shadow-sm);
    padding: 11px 14px;
    min-width: 0;
}

.od-set-tile-num,
.od-set-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 8px;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-size: .78rem;
    font-weight: 800;
}

.od-set-tile-lbl {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-400);
}
.od-set-tile-val {
    font-size: .9rem;
    font-weight: 700;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.od-set-tile-note { font-size: .74rem; color: var(--od-gray-500); margin-top: 1px; }

/* A szakasz-fejléc a sorszámmal. ⚠️ `display: flex`, mert a meglévő `.od-section-title`
   és a `.h6` is sima blokk – a sorszám különben a szöveg fölé csúszna. */
.od-set-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ⚠️ A HIÁNYZÓ GYAKORISÁG jelölése (2026‑09‑06, a jóváhagyott `/design` terv). Ugyanaz a
   helyen és méretben, mint a meglévő gyakoriság-chip – csak piros, mert ez nem adat,
   hanem HIÁNY. A következményét a lap alján álló mondat írja le. */
.od-tax-freq-missing {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .4rem;
    padding: 1px 7px;
    border: 1px solid #FECACA;
    border-radius: 999px;
    background: #FEF2F2;
    font-size: .7rem;
    font-weight: 600;
    color: #B91C1C;
    white-space: nowrap;
}
.od-tax-freq-missing i { font-size: .68rem; }

/* A kártya alján álló KÖVETKEZMÉNY-sor. */
.od-tax-consequence {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1rem;
    padding: 11px 14px;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    background: #FFFBEB;
    color: #92400E;
    font-size: .82rem;
    line-height: 1.5;
}
.od-tax-consequence i { margin-top: 2px; }

/* Lezárt időszak: halványabb, de OLVASHATÓ. Nem rejtjük el és nem húzzuk át –
   a történet éppen attól hasznos, hogy vissza lehet olvasni. */
.od-addr.is-past { opacity: .62; }
.od-addr.is-past:hover { opacity: 1; }

/* Eltérő üzleti év jelzése az alapadatoknál – ugyanaz a szín, mint az
   „eltérő rendszer" figyelmeztetésé a Tevékenységek fülön. */
.od-tax-warn { color: #92400E; }

/* A JS által elrejtett, adónemhez nem tartozó mezőblokk. Az attribútum a
   `hidden`, ezt a Bootstrap `display` szabályai felülírhatnák. */
[data-od-tax-block][hidden] { display: none !important; }

/* ==========================================================================
   ADMIN → WORKEREK (od-worker-)
   A listasorok az `od-addr` mintát használják, mint a többi 1:N lista –
   itt csak a worker-specifikus jelzések újak.
   ========================================================================== */

/* A soroknak több sornyi tartalmuk van (leírás + ütemezés + utolsó eredmény),
   ezért felülre igazítjuk a badge-et és a gombokat, nem középre. */
.od-worker { align-items: flex-start; }

/* A technikai kulcs – halvány, monospace, hogy a naplóban is felismerhető
   legyen, de ne versenyezzen a megnevezéssel. */
.od-worker-key {
    margin-left: .5rem;
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: .72rem;
    color: var(--od-gray-500);
}

/* Hibára futott futás eredménye. Ugyanaz a szín, mint a többi figyelmeztetésé. */
.od-worker-failed { color: #B91C1C; }

/* A visszafordíthatatlan művelet (kuka ürítése) figyelmeztetése a beállító ablakban. */
.od-worker-warn { color: #92400E; }

/* ==========================================================================
   MUNKATERÜLET → „VÁLLALKOZÁS ADATLAPJA" ESZKÖZ (od-cst-)
   A jobb oldali sáv 380 px széles – itt minden sor kétsoros: apró felirat
   fent, az érték alatta. Egymás melletti címke+érték elrendezésnél az
   adószám és a székhely is tördelne.
   ========================================================================== */

.od-cst-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .6rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-cst-head-main { min-width: 0; flex: 1 1 auto; }

.od-cst-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--od-gray-800);
    overflow-wrap: anywhere;
}

.od-cst-open {
    flex: none;
    color: var(--od-gray-400);
    text-decoration: none;
    font-size: .85rem;
}
.od-cst-open:hover { color: var(--od-primary); }

.od-cst-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

/* A TELJES SOR a kattintható felület, nem egy külön apró ikon: ezeket a
   számokat naponta másolja a könyvelő, tehát nagy célpont kell. */
.od-cst-row {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--od-radius);
    padding: .3rem .5rem;
    position: relative;
    cursor: pointer;
}

.od-cst-row:hover,
.od-cst-row:focus-visible {
    background: var(--od-gray-100);
    border-color: var(--od-gray-300);
}

.od-cst-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--od-gray-500);
}

.od-cst-value {
    display: block;
    font-size: .82rem;
    color: var(--od-gray-800);
    overflow-wrap: anywhere;
    /* Hely a másolás-ikonnak, hogy hosszú érték se csússzon alá. */
    padding-right: 1.1rem;
}

/* Az ikon FELFEDEZHETŐSÉG: enélkül nem derülne ki, hogy a sor kattintható.
   Halványan mindig ott van, hoveren erősödik – ugyanaz a minta, mint a
   csendes mezők hover-kereténél. */
.od-cst-icon {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--od-gray-400);
    opacity: .35;
}
.od-cst-row:hover .od-cst-icon,
.od-cst-row:focus-visible .od-cst-icon { opacity: 1; color: var(--od-primary); }

/* ── Adózás szakasz ──────────────────────────────────────────────────────
   SZÁNDÉKOSAN nem néz ki kattinthatónak: a fenti sorok ÉRTÉKEK (másolhatók),
   ez viszont TÁJÉKOZTATÁS. Ha egyformák lennének, a két jelentés összemosódna. */
.od-cst-section {
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--od-gray-200);
}

.od-cst-section-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    margin-bottom: .4rem;
}

.od-cst-tax {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.od-cst-tax li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    font-size: .8rem;
    color: var(--od-gray-800);
}

.od-cst-tax-name { overflow-wrap: anywhere; }

/* Csoport-ikon a sor elején. FIX szélesség: enélkül a különböző szélességű
   ikonok után a nevek fűrészfogasan indulnának, és pont az veszne el, amiért
   az ikon bekerült – hogy a szem végig tudjon futni a listán. */
.od-cst-tax-ico {
    flex: none;
    width: 1rem;
    text-align: center;
    font-size: .78rem;
    /* Az `align-items: baseline` az ikont a betűk alapvonalához igazítaná, ami
       optikailag lecsúsztatja – ezért kap saját igazítást. */
    align-self: center;
}

/* A szín is csoportot jelöl, de VISSZAFOGOTTAN: egy 380 px-es sávban a telített
   színek versenyeznének a szöveggel. Az `od-cat-*` palettából jönnek. */
.od-cst-tax-ico-income { color: #0F766E; }
.od-cst-tax-ico-vat    { color: #1560BD; }
.od-cst-tax-ico-vatrel { color: #0369A1; }
.od-cst-tax-ico-local  { color: #B45309; }
.od-cst-tax-ico-payroll{ color: #6D28D9; }
.od-cst-tax-ico-other  { color: var(--od-gray-500); }
.od-cst-tax-ico-report { color: var(--od-gray-600); }

.od-cst-tax-chip {
    padding: 0 6px;
    border: 1px solid var(--od-gray-300);
    border-radius: 999px;
    font-size: .66rem;
    color: var(--od-gray-600);
    white-space: nowrap;
}

/* A még hatályba nem lépett sor jelzése – nem hiba, csak előrejelzés. */
.od-cst-tax-future {
    border-color: #FDE68A;
    background: #FFF7ED;
    color: #B45309;
}

/* Figyelmeztetés: szüneteltetés, vagy hiányzó adózási profil. */
.od-cst-warn {
    font-size: .76rem;
    color: #92400E;
    background: #FFF7ED;
    border: 1px solid #FDE68A;
    border-radius: var(--od-radius);
    padding: .35rem .5rem;
    margin-bottom: .4rem;
}

/* =========================================================================
   Munkaterület: „Naptár" eszköz (od-cal-)
   =========================================================================
   MINDEN méret a jobb sáv 380 px-es szélességéhez igazodik: hét oszlop, tehát
   cellánként nagyjából 44 px marad. Saját névtér – egy általános név (pl.
   .od-day) előbb-utóbb ütközne, lásd a 18. megtanult hibát. */

/* =========================================================================
   Egyszerűsített (mobil) nézet
   ========================================================================= */

/* Nézetváltó a navbarban. Formba zárt gomb, hogy statikus SSR-en is működjön –
   ugyanaz az indok, mint a cégválasztónál. */
.od-view-switch { margin: 0; }

.od-view-switch-btn {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
}

/* „Csak számítógépen" magyarázó lap. */
.od-desk-card { max-width: 560px; margin: 0 auto; }

.od-desk-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

.od-desk-from { font-size: .8rem; color: var(--od-gray-500); }
.od-desk-from code { color: var(--od-gray-600); }

.od-desk-note { font-size: .74rem; color: var(--od-gray-400); margin-top: .35rem; }

/* ⚠️ ÉRINTÉSI CÉLPONTOK. Telefonon a 40 képpont alatti vezérlő nehezen található –
   mérve öt ilyen volt a jelszó-oldalon. A 44 px az iOS és az Android ajánlása is.
   A `min-height` és nem a `height`: a több sorba törő gomb így nem csonkul. */
@media (max-width: 575.98px) {
    .btn,
    .form-control,
    .form-select,
    .dropdown-item,
    .nav-link {
        min-height: 44px;
    }

    .form-control,
    .form-select {
        /* 16 px alatt az iOS Safari BENAGYÍT a mezőre fókuszáláskor, és az egész
           elrendezés elmozdul – ezért nem kisebb. */
        font-size: 1rem;
    }

    /* A táblázatos műveletgombok kivételek: ott a sűrűség a lényeg, és a sor maga
       is kattintható felület. */
    .od-action-btn { min-height: 36px; }
}

/* =========================================================================
   Admin → Rendszer (od-sys-)
   ========================================================================= */

.od-sys-value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--od-gray-800);
    font-variant-numeric: tabular-nums;
}

.od-sys-unit { font-size: 1.1rem; font-weight: 600; color: var(--od-gray-500); margin-left: 2px; }

/* Kihasználtsági sáv. ⚠️ A szélesség EGÉSZ százalék: tizedessel magyar kultúrában
   vessző kerülne a `width` értékébe, amit a böngésző NÉMÁN eldob (14. tanulság). */
.od-sys-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--od-gray-200);
    overflow: hidden;
    margin: .6rem 0 .5rem;
}
.od-sys-bar-sm { height: 6px; margin: 0; }

.od-sys-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.od-sys-fill-ok { background: var(--od-success); }
.od-sys-fill-warn { background: #F59E0B; }
.od-sys-fill-danger { background: #DC2626; }
.od-sys-fill-info { background: var(--od-primary); }

.od-sys-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--od-gray-600);
}

/* Egy szám + felirat a rács-cellákban (tárhely, alkalmazás). */
.od-sys-stat {
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .7rem .8rem;
    height: 100%;
}

.od-sys-stat-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--od-gray-500);
    margin-bottom: .2rem;
}

.od-sys-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--od-gray-800);
    font-variant-numeric: tabular-nums;
}

.od-sys-stat-note { font-size: .74rem; color: var(--od-gray-500); margin-top: .1rem; }

/* Előzmény-grafikon. A viewBox 0–100 × 0–100, a magasságot CSS adja – így a görbe
   nyúlik, és nem kell képpontokat interpolálni a markupba. */
.od-sys-spark {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: .6rem;
    overflow: visible;
}

.od-sys-spark-line {
    fill: none;
    stroke: var(--od-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.od-sys-spark-area { fill: var(--od-primary-xlt); stroke: none; }

.od-sys-spark-note { font-size: .72rem; color: var(--od-gray-400); text-align: right; }

/* Cégválasztó a naptár fölött. Külön sorban, teljes szélességben: a cégnevek hosszúak,
   a hónapléptető mellé szorítva a legördülő pár karakter után csonkolna. */
.od-cal-scope {
    font-size: .78rem;
    margin-bottom: .5rem;
    border-color: var(--od-gray-200);
}

.od-cal-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .4rem;
}

.od-cal-title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--od-gray-800);
}

.od-cal-nav {
    border: none;
    background: transparent;
    color: var(--od-gray-600);
    width: 28px;
    height: 28px;
    border-radius: var(--od-radius);
    line-height: 1;
    transition: var(--od-transition);
}
.od-cal-nav:hover { background: var(--od-gray-100); color: var(--od-gray-800); }

/* A rács VALÓDI táblázat: hét × nap táblázatos adat, és így a képernyőolvasó is
   a hét napjaihoz köti a cellákat. */
.od-cal-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }

.od-cal-grid th {
    font-size: .62rem;
    font-weight: 600;
    color: var(--od-gray-500);
    text-transform: uppercase;
    text-align: center;
    padding-bottom: .2rem;
}

.od-cal-cell { padding: 1px; }

/* ⚠️ FIX magasság. Enélkül a jelölés nélküli napok alacsonyabbak lennének, mint a
   jelöltek, és a rács sorai hullámoznának – hónapváltáskor az egész eszköz
   magassága ugrálna. */
.od-cal-day {
    width: 100%;
    min-height: 36px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--od-radius);
    padding: .15rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1;
    transition: var(--od-transition);
}
.od-cal-day:not(:disabled) { cursor: pointer; }
.od-cal-day:not(:disabled):hover { background: var(--od-gray-100); }

.od-cal-num { font-size: .75rem; color: var(--od-gray-700); }

/* A szomszédos hónapok napjai halványak – ott vannak, de nem versenyeznek. */
.od-cal-out .od-cal-num { color: var(--od-gray-400); }

.od-cal-dot {
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--od-white);
    background: var(--od-gray-400);
    border-radius: 999px;
    min-width: 15px;
    padding: 0 3px;
    font-variant-numeric: tabular-nums;
}

/* A nap színét a LEGSÜRGŐSEBB feladata adja – lásd a ViewModel Rank() metódusát. */
.od-cal-u-over .od-cal-dot { background: #DC2626; }
.od-cal-u-today .od-cal-dot { background: #F59E0B; color: #78350F; }
.od-cal-u-soon .od-cal-dot { background: var(--od-primary); }
.od-cal-u-far .od-cal-dot { background: var(--od-gray-400); }

.od-cal-today-cell .od-cal-day { border-color: var(--od-primary); }
.od-cal-today-cell .od-cal-num { font-weight: 700; color: var(--od-primary); }

.od-cal-sel .od-cal-day {
    background: var(--od-primary-xlt);
    border-color: var(--od-primary);
}

.od-cal-today-row { text-align: center; margin-top: .3rem; }

.od-cal-today {
    border: none;
    background: transparent;
    font-size: .75rem;
    color: var(--od-primary);
    padding: .15rem .4rem;
    border-radius: var(--od-radius);
}
.od-cal-today:hover { background: var(--od-primary-xlt); }

/* ---------- Szakaszcímek ---------- */
.od-cal-sec {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--od-gray-500);
    margin: .7rem 0 .3rem;
    padding-top: .5rem;
    border-top: 1px solid var(--od-gray-200);
}
.od-cal-sec-over { color: #B91C1C; }

.od-cal-sec-num {
    margin-left: auto;
    background: #FEE2E2;
    color: #991B1B;
    border-radius: 999px;
    padding: 0 .4rem;
    font-size: .68rem;
}

.od-cal-clear {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--od-gray-500);
    font-size: .7rem;
    line-height: 1;
    padding: .15rem .3rem;
    border-radius: var(--od-radius);
}
.od-cal-clear:hover { background: var(--od-gray-100); color: var(--od-gray-800); }

/* ---------- Feladat-sorok ---------- */
.od-cal-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--od-radius);
    padding: .35rem .3rem;
    margin-bottom: .1rem;
    transition: var(--od-transition);
}
.od-cal-item:hover { background: var(--od-gray-50); border-color: var(--od-gray-200); }

/* ⚠️ A közös típusikon 34 px – a szűk sávban leszűkítjük. A SAJÁT névterünkön belül
   írjuk felül, hogy a feladatlista 34 px-es ikonja érintetlen maradjon. */
.od-cal-item .od-task-ico { width: 24px; height: 24px; border-radius: 7px; font-size: .75rem; }

.od-cal-item-main { flex: 1; min-width: 0; }

.od-cal-item-title {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--od-gray-800);
    line-height: 1.25;
}

.od-cal-item-sub { display: flex; align-items: center; gap: .35rem; }

/* A cégnév csonkul, ha kell – a határidő-chip viszont SOHA: az a döntési adat. */
.od-cal-item-meta {
    flex: 1;
    min-width: 0;
    font-size: .68rem;
    color: var(--od-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-cal-item .od-dl { flex: none; font-size: .66rem; padding: 2px 6px; }

.od-cal-more {
    display: block;
    font-size: .72rem;
    color: var(--od-gray-600);
    padding: .2rem .3rem;
}

/* Hatókör-kapcsoló a naptár tetején (saját napirend / iroda).
   ⚠️ `od-cal-mode…`, NEM `od-cal-scope`: az utóbbi a cégválasztó select osztálya,
   és két majdnem egyforma név a következő szerkesztésnél összekeverhető. */
.od-cal-modes {
    display: flex;
    gap: 2px;
    padding: 2px;
    margin-bottom: .5rem;
    border-radius: var(--od-radius);
    background: var(--od-gray-100);
}

.od-cal-mode-btn {
    flex: 1;
    padding: .3rem .4rem;
    border: 0;
    border-radius: calc(var(--od-radius) - 3px);
    background: transparent;
    color: var(--od-gray-600);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--od-transition), color var(--od-transition);
}

.od-cal-mode-btn:hover { color: var(--od-gray-800); }

/* Az aktív állás FEHÉR lapon ül: a kapcsoló így akkor is olvasható, ha a felhasználó
   nem a színt, hanem a kiemelkedést veszi észre. */
.od-cal-mode-btn.is-active {
    background: var(--od-white);
    color: var(--od-primary);
    box-shadow: var(--od-shadow-sm);
}

/* A felelős monogramja a sorban – csak iroda-nézetben. Fix méret, hogy a
   megnevezésnek szánt hely ne ugráljon soronként. */
.od-cal-who {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: .25rem;
    border-radius: 50%;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-size: .58rem;
    font-weight: 700;
    line-height: 1;
}

/* Kiosztatlan: halvány és szaggatott – ez nem egy ember, hanem a hiánya. */
.od-cal-who-none {
    background: transparent;
    border: 1px dashed var(--od-gray-400);
    color: var(--od-gray-500);
    font-size: .55rem;
}

/* ============================================================
   ÜGYFÉLKÖZPONT – érdeklődők és a folyamat-idősáv
   ============================================================
   Két új névtér: `od-lead-` (lista, fejléc) és `od-stage-` (idősáv). Mindkettő
   ellenőrizve, korábban nem szerepelt (18. megtanult hiba). */

.od-lead-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--od-radius);
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-size: 1.05rem;
}

.od-lead-link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    min-width: 0;
}

.od-lead-name {
    font-weight: 600;
    color: var(--od-gray-800);
}

.od-lead-link:hover .od-lead-name { color: var(--od-primary); }

.od-lead-mail {
    font-size: .78rem;
    color: var(--od-gray-500);
}

.od-lead-source {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--od-gray-600);
    white-space: nowrap;
}

/* ── A folyamat idősávja ─────────────────────────────────────
   ⚠️ `overflow-x: auto`, NEM tördel: hét lépés keskeny ablakban nem fér ki, tördelve
   viszont két sorba csúszna, és a kártya minden ablakméret-változásnál elmozdulna
   függőlegesen. Ugyanaz a döntés, mint a cégadatlap fülsávjánál. */
.od-stage-bar {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    margin-bottom: 1rem;
    padding-bottom: .35rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-stage {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .4rem .7rem;
    border-radius: var(--od-radius);
    text-decoration: none;
    color: var(--od-gray-600);
    transition: background-color var(--od-transition);
}

/* A zárt lépés `<span>`, nem link – a kurzor is ezt mondja. */
.od-stage-locked { cursor: default; opacity: .55; }

a.od-stage:hover { background: var(--od-gray-100); }

.od-stage-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--od-gray-300);
    background: var(--od-white);
    font-size: .78rem;
}

.od-stage-done .od-stage-dot {
    border-color: #A7F3D0;
    background: #ECFDF5;
    color: #065F46;
}

.od-stage-active .od-stage-dot {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

.od-stage-blocked .od-stage-dot {
    border-color: #FECACA;
    background: #FEF2F2;
    color: #991B1B;
}

/* min-width: 0 – enélkül a hosszú lépésnév nem tud ellipszisbe menni. */
.od-stage-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.od-stage-title {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.od-stage-done .od-stage-title,
.od-stage-active .od-stage-title { color: var(--od-gray-800); }

.od-stage-meta {
    font-size: .68rem;
    color: var(--od-gray-500);
    white-space: nowrap;
}

/* Az AKTUÁLIS lépés kap keretet: a színe önmagában nem elég erős jelzés ahhoz,
   hogy a szem azonnal megtalálja, hol áll. */
.od-stage.is-current {
    background: var(--od-primary-xlt);
    box-shadow: inset 0 0 0 1px var(--od-primary-light);
}

/* ── Lépésváltó a kártya alatt ───────────────────────────── */
.od-stage-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1rem;
}

.od-stage-nav-pos {
    font-size: .78rem;
    color: var(--od-gray-500);
    white-space: nowrap;
}

/* A lista „Hol tart" oszlopának jelölése. */
.od-stage-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ⚠️ A LEZÁRULT folyamat más SZÍN, nem csak más szöveg. A kék chip azt jelenti: „itt
   tart, itt van teendő"; a regisztrált ügyfélnél viszont nincs. Azonos színnel a
   munkatársnak minden sort el kellene olvasnia ahhoz, hogy lássa, mi maradt nyitva. */
.od-stage-chip-done {
    background: #DCFCE7;
    color: #166534;
}

/* Telefonon a lépésnév alatti dátum elmarad: a sáv így feleannyi helyet kér, és a
   lényeg (hol tartunk) megmarad. */
@media (max-width: 575.98px) {
    .od-stage-meta { display: none; }
    .od-stage { padding: .35rem .5rem; }
}

/* „Meeting egyeztetése" – a tervben lévő vállalkozás következő teendője.
   Borostyán, mert ez VÁRAKOZÁS egy emberi lépésre, nem hiba és nem kész állapot. */
.od-lead-meeting {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid #FDE68A;
    background: #FEF3C7;
    color: #92400E;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* A másolható link doboza. */
.od-lead-linkbox input { font-size: .82rem; }

/* ── Az üzleti adatok űrlapja ────────────────────────────────────────
   A választás KÁRTYA, nem sima rádiógomb: az „már működik / tervben van" a lépés
   legfontosabb kérdése, és ettől függ, hány mezőt kell kitölteni. Apró rádiógombként
   ugyanolyan súlyú lenne, mint a pénztárgép kérdése. */
.od-biz-choice {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.od-biz-opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 240px;
    padding: .7rem .9rem;
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    background: var(--od-white);
    cursor: pointer;
    transition: border-color var(--od-transition), background-color var(--od-transition);
}

.od-biz-opt:hover { border-color: var(--od-primary-light); }

.od-biz-opt.is-on {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

/* AZ ELSŐ kérdés választása SUBMIT GOMB, nem rádiógomb: statikus SSR-en egy kattintás
   elküldi a választ, és a lap a megfelelő mezőkkel jön vissza. Rádiógomb + külön
   „Tovább" gomb két lépés lenne ugyanarra. A gomb alapértelmezett stílusát visszavesszük. */
.od-biz-opt-btn {
    text-align: left;
    font: inherit;
    color: inherit;
}

.od-biz-opt-btn:focus-visible {
    outline: 2px solid var(--od-primary);
    outline-offset: 2px;
}

/* A RÉSZLETES űrlap választásai (cégforma) viszont rádiógombok maradnak – ott a
   választás nem küld el semmit, csak a beküldésig gyűjt.
   ⚠️ A rádiógomb MEGMARAD a DOM-ban (a POST-hoz kell), csak nem látszik; a választást
   a kártya kerete jelzi. `display: none` helyett `position: absolute; opacity: 0`,
   mert a display:none elem egyes böngészőkben nem fókuszálható billentyűzetről.
   ⚠️ Ez a szabály egyszer már KIESETT egy átszervezéskor, és a rádiógombok láthatóvá
   váltak a kártyák belsejében – a mérés fogta meg, nem a build.

   ⚠️ A rádiógomb a címke ELŐTT áll, TESTVÉRKÉNT – nem a címkén belül. Ez nem stílus
   kérdése: a kijelölt állapotot így a `:checked + .od-biz-opt` adja, tehát a KATTINTÁS
   pillanatában látszik. Korábban a `is-on` OSZTÁLY jelezte, amit a SZERVER renderel –
   statikus SSR-en viszont a lap kattintásra nem renderelődik újra, tehát a rádiógomb
   kijelölődött, de a kártyán SEMMI nem változott. MÉRVE (a javítás előtt): a kattintás
   után `radio.checked = true`, a keret viszont maradt `rgb(203, 213, 225)`, a háttér
   fehér, és az `is-on` nem került fel. A felhasználónak ez pontosan úgy néz ki, mintha
   a gomb nem működne – így is jelezte. */
.od-biz-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.od-biz-radio:checked + .od-biz-opt {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

/* ⚠️ A fókuszjelzés a CÍMKÉRE kerül: a rádiógomb maga láthatatlan, tehát a billentyűzetes
   használónak semmi nem mutatná, hol jár. */
.od-biz-radio:focus-visible + .od-biz-opt {
    outline: 2px solid var(--od-primary);
    outline-offset: 2px;
}

.od-biz-opt i { font-size: 1.2rem; color: var(--od-gray-500); }
.od-biz-opt.is-on i,
.od-biz-radio:checked + .od-biz-opt i { color: var(--od-primary); }

.od-biz-opt span { display: flex; flex-direction: column; line-height: 1.25; }
.od-biz-opt strong { font-size: .9rem; color: var(--od-gray-800); }
.od-biz-opt small { font-size: .74rem; color: var(--od-gray-500); }

.od-biz-choice-sm .od-biz-opt { flex: 1 1 150px; padding: .5rem .7rem; }

/* ── Tevékenységi kód élő keresője (od-lookup-) ──────────────────────
   Saját névtér: az `od-ac-` már foglalt, és egy újrahasznált osztálynév NÉMÁN omlasztja
   össze a másik komponens elrendezését (18. megtanult hiba).

   ⚠️ A találati lista ABSZOLÚT pozíciójú, tehát a befoglalónak `position: relative` kell –
   enélkül a lap tetejére ugrana. */
.od-lookup { position: relative; }

.od-lookup-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* A `20` a lapon belüli rétegekhez elég; a Bootstrap ablakok 1055 fölött ülnek, tehát
       egy megnyitott modal továbbra is a lista FÖLÉ kerül – ez a kívánt sorrend. */
    z-index: 20;
    margin: .15rem 0 0;
    padding: .25rem;
    list-style: none;
    /* ⚠️ Korlátozott magasság + saját görgetés: 25 találat különben lelógna a lapról, és a
       rövid űrlapon a lap alja nyúlna meg. */
    max-height: 16rem;
    overflow-y: auto;
    background: var(--od-white);
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-lg);
}

/* ⚠️ SZÉLESEBB lista, mint a mező – az irányítószám-keresőhöz.
   A cím-szerkesztőben az irányítószám oszlopa a rácsban `col-lg-2`, azaz ~110 px: a
   `right: 0` miatt a lista is ennyi lenne, és a „Szigetszentmiklós" bele sem férne. A
   `right: auto` engedi el a jobb szélt, a `min-width` adja a valódi méretet.
   ⚠️ `max-width: 90vw`: telefonon a rögzített 320 px kilógna a képernyőről. */
.od-lookup-wide {
    right: auto;
    min-width: 320px;
    max-width: 90vw;
}

/* ── Szabadság-tábla (od-lv-) ────────────────────────────────────────
   ⚠️ A beviteli mezők a cellában JOBBRA zártak és keskenyek: napszámok, nem szövegek.
   Széles mezőn a szám elveszne a cella bal szélén, és a hasábok nem állnának egy vonalban. */
.od-lv-table .form-control {
    height: 28px;
    min-height: 28px;
    padding: 0 .4rem;
    font-size: .85rem;
    display: inline-block;
    width: 5rem;
}

/* Az összesítő sor elválik: felette vonal, félkövér számok. */
.od-lv-total td {
    border-top: 2px solid var(--od-gray-300);
    font-weight: 600;
}

/* ⚠️ MÉG szélesebb lista – az „alkalmazás minősége" NAV-jegyzékéhez.
   Ott a megnevezések 100 karakteresek is („Nem az EHO tv. 6.§ (3) szerint fennálló
   jogviszony alapján fizetett tételes eü. hozzájárulás"), és 320 px-en minden sor négy
   sorba törne – a 69 tételes lista így átláthatatlan volna.
   ⚠️ `max-width: 92vw`: telefonon a rögzített 620 px kilógna a képernyőről. */
.od-lookup-xwide {
    right: auto;
    min-width: 620px;
    max-width: 92vw;
}

/* ⚠️ A hosszú megnevezés TÖRJÖN, ne feszítse ki a listát: a `.od-lookup-name` `min-width: 0`
   csak zsugorodni engedi, a sortörést külön kell kimondani. */
.od-lookup-xwide .od-lookup-name { white-space: normal; }

.od-lookup-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: calc(var(--od-radius) - 4px);
    cursor: pointer;
}

.od-lookup-item:hover,
.od-lookup-item.is-on { background: var(--od-primary-xlt); }

.od-lookup-code {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--od-primary);
}

/* ⚠️ `min-width: 0` KELL: enélkül a hosszú megnevezés nem tud zsugorodni, és a sor
   kifeszíti a listát (a flex elem alapból a tartalma alá nem megy). */
.od-lookup-name {
    min-width: 0;
    font-size: .85rem;
    color: var(--od-gray-700);
}

/* A jegyzék megnevezése (TEÁOR/ÖVTJ) – CSAK vegyes találatnál látszik. */
.od-lookup-sys {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: .7rem;
    font-weight: 600;
    color: var(--od-gray-500);
}

.od-lookup-empty {
    padding: .4rem .55rem;
    font-size: .85rem;
    color: var(--od-gray-500);
}

/* A kiválasztott kód megnevezése a mező alatt – visszajelzés, hogy TÉNYLEG azt választotta. */
.od-lookup-picked {
    margin-top: .25rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--od-gray-700);
}

.od-biz-note {
    padding: .6rem .8rem;
    border: 1px solid #BFDBFE;
    border-radius: var(--od-radius);
    background: #EFF6FF;
    color: #1E40AF;
    font-size: .82rem;
}

/* ── Szövegszerkesztő (od-rte-) ──────────────────────────────────────
   A Quill saját stílusa a `lib/quill/quill.snow.css`-ből jön; itt csak beillesztjük a
   felület nyelvébe.

   ⚠️ A szerkesztő MAGASSÁGA fix minimum: alapból a Quill a tartalomhoz zsugorodik, és egy
   üres mező egyetlen sor magas lenne – a felhasználó nem is látná, hogy oda írhat. */
.od-rte .ql-container {
    min-height: 9rem;
    font-family: inherit;
    font-size: .95rem;
    border-bottom-left-radius: var(--od-radius);
    border-bottom-right-radius: var(--od-radius);
    border-color: var(--od-gray-300);
}

.od-rte .ql-toolbar {
    border-top-left-radius: var(--od-radius);
    border-top-right-radius: var(--od-radius);
    border-color: var(--od-gray-300);
    background: var(--od-gray-50);
}

.od-rte .ql-editor { min-height: 9rem; }

/* A MENTETT tartalom megjelenítése (ajánlat-nézet, nyilvános döntő oldal).
   ⚠️ A tartalom `MarkupString`-gel kerül ki, tehát a védelem KIZÁRÓLAG a szerveroldali
   tisztítás (`IHtmlSanitizerService`) – itt már csak a tipográfia dolga van. */
.od-rte-view :last-child { margin-bottom: 0; }
.od-rte-view p { margin-bottom: .6rem; }
.od-rte-view ul,
.od-rte-view ol { margin-bottom: .6rem; padding-left: 1.4rem; }
.od-rte-view h1 { font-size: 1.2rem; font-weight: 700; }
.od-rte-view h2 { font-size: 1.05rem; font-weight: 700; }
.od-rte-view h3 { font-size: .98rem; font-weight: 600; }

/* ── Árajánlat: állapot-chip (od-qs-) és tételtáblázat (od-qi-) ──────
   ⚠️ Az állapot SZÁMÍTOTT (`CrmQuoteStates`), nem tárolt – a chip csak megjeleníti. */
.od-qs {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.od-qs-draft    { background: var(--od-gray-100); color: var(--od-gray-600); }
.od-qs-sent     { background: #FEF3C7; color: #92400E; }
.od-qs-accepted { background: #DCFCE7; color: #166534; }
.od-qs-rejected { background: #FEE2E2; color: #991B1B; }
.od-qs-closed   { background: var(--od-gray-100); color: var(--od-gray-500); }

/* ⚠️ `tabular-nums` KELL: arányos számjegyekkel az egymás alatti összegek nem esnének
   egy vonalba – egy ártáblázatban ez azonnal látszik. */
.od-qi-table td,
.od-qi-table th { font-variant-numeric: tabular-nums; }

.od-qi-table thead th {
    font-size: .78rem;
    font-weight: 600;
    color: var(--od-gray-500);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.od-qi-sum { color: var(--od-gray-500); white-space: nowrap; }

.od-qi-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--od-primary);
    white-space: nowrap;
}

/* A nyilvános döntő oldal két gombja. Az `od-biz-opt` alapra épül (kártyás választás),
   csak a színt adja hozzá – így a két nyilvános lap egy nyelvet beszél. */
.od-qd-accept.is-on,
.od-qd-accept:hover { border-color: #16A34A; background: #F0FDF4; }
.od-qd-accept i     { color: #16A34A; }

.od-qd-reject:hover { border-color: var(--od-gray-400); background: var(--od-gray-50); }
.od-qd-reject i     { color: var(--od-gray-500); }

/* ── E-mail beállítások: a sor állapota (od-mailstat-) ───────────────
   Három szám egymás mellett. ⚠️ Nem táblázat: három adatnál a fejlécsor több helyet
   venne el, mint amennyit magyaráz. */
.od-mailstat {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.od-mailstat-item {
    flex: 1 1 120px;
    padding: .7rem .9rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    text-align: center;
}

/* ⚠️ Az elbukott levelek doboza CSAK akkor színes, ha van is ilyen. Állandó pirossal a
   nulla is riasztásnak látszana, és a szem előbb-utóbb átsiklana fölötte. */
.od-mailstat-item.is-bad {
    border-color: #FCA5A5;
    background: #FEF2F2;
}

.od-mailstat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--od-gray-800);
    font-variant-numeric: tabular-nums;
}

.od-mailstat-item.is-bad .od-mailstat-num { color: #B91C1C; }

.od-mailstat-lbl {
    display: block;
    font-size: .78rem;
    color: var(--od-gray-500);
}

/* ── A nyilvános adatbekérő lap ──────────────────────────────────────
   Saját, szűk elrendezés: se app-navigáció, se cégválasztó – ez nem a belső felület. */
.od-intake {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

/* Márkasáv a nyilvános lapok tetején.
   ⚠️ NEM `position: fixed`, szemben a navbarral: itt nincs mihez ragadnia, és egy rövid
   űrlapnál csak elvenné a helyet a telefon képernyőjéből. */
.od-public-bar {
    background: var(--od-primary);
    box-shadow: var(--od-shadow);
}

/* ⚠️ A `.od-main` felső térköze a FIX navbar helyét tartja fenn (`--od-navbar-h`). Ezen a
   lapon a sáv NEM fix, tehát ott ez tiszta üres hely: a márkasáv és a kártya közé egy
   navbar-magasságnyi fehér csík került, amitől a lap teteje befejezetlennek látszott.
   A `.od-layout-public` osztály eleve a `PublicFormLayout` gyökerén van. */
.od-layout-public .od-main { padding-top: 0; }

.od-public-bar-inner {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 720px;
    margin: 0 auto;
    /* Ugyanaz a vízszintes térköz, mint az .od-intake-é – így a logó és a kártya bal
       széle EGY VONALBAN van. Eltérő paddinggal a sáv „elcsúszva" ülne a kártya fölött. */
    padding: .7rem 1rem;
    min-height: 56px;
}

/* A lap megnevezése a sáv jobb szélén, halványabban: ez kontextus, nem márkajelzés. */
.od-public-bar-label {
    margin-left: auto;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}

/* ⚠️ NINCS mobil-elrejtés a logó szövegére, pedig először beírtam egyet. MÉRVE 375 px-en:
   az ikon 16–52, a szöveg 62–146, a „Adatbekérő" címke 283-tól – 137 px tartalék, nincs
   átfedés. A rejtés tehát fölösleges óvatosság lett volna, ráadásul egy bizalmi kérdést
   feszegető, bejelentkezés nélküli lapról vette volna le a márkanevet. */

/* ============================================================
   BÉRSZÁMFEJTÉS – az ügyfélnek kiadott anyag (od-pay-)
   ============================================================
   Saját névtér, nem általános nevek: az `od-tool-*` esete megmutatta, hogy egy
   újrahasznált osztálynév NÉMÁN omlasztja össze a másik komponens elrendezését
   (18. megtanult hiba). Ellenőrizve: az `od-pay` előtag korábban nem szerepelt.

   ⚠️ A kártya SZÁNDÉKOSAN nem táblázat. A dokumentum-listánál mobilon pont az volt
   a baj, hogy oldalra kellett görgetni a letöltés gombig – itt a sor eleve tördel. */

.od-pay-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.od-pay-card { border-radius: var(--od-radius-lg); overflow: hidden; }

.od-pay-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-pay-icon { flex: none; }

/* min-width: 0 KÖTELEZŐ – enélkül a flex elem nem tud a tartalma alá zsugorodni,
   és a hosszú megnevezés kitolná a kiadás dátumát a kártyából. */
.od-pay-head-main { flex: 1; min-width: 0; }

.od-pay-period {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--od-gray-800);
    line-height: 1.25;
}

.od-pay-sub {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .82rem;
    color: var(--od-gray-500);
}

.od-pay-dot { color: var(--od-gray-400); }

.od-pay-shared {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.od-pay-shared-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--od-gray-500);
}

.od-pay-shared-date {
    font-size: .85rem;
    font-weight: 600;
    color: var(--od-gray-700);
    white-space: nowrap;
}

.od-pay-files { padding: .35rem .5rem; }

.od-pay-file {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .65rem;
    border-radius: var(--od-radius);
    transition: background-color var(--od-transition);
}

.od-pay-file:hover { background: var(--od-gray-50); }

.od-pay-file-ico { flex: none; color: var(--od-gray-500); }

.od-pay-file-name {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    color: var(--od-gray-800);
}

.od-pay-file-size {
    flex: none;
    font-size: .78rem;
    color: var(--od-gray-500);
    white-space: nowrap;
}

.od-pay-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem 1.15rem;
    border-top: 1px solid var(--od-gray-200);
    background: var(--od-gray-50);
}

/* Telefonon a fejléc HÁROM eleme (ikon, megnevezés, kiadás dátuma) nem fér ki egy
   sorban: 375 px-en a dátum a megnevezésre csúszna. A dátum ilyenkor a második sorba
   kerül, balra igazítva – így a szem ugyanabból az oszlopból olvassa, mint a periódust.
   A fájlméret elmarad: a letöltés gomb elérhetősége fontosabb nála. */
@media (max-width: 575.98px) {
    .od-pay-head { flex-wrap: wrap; }

    .od-pay-head-main { flex: 1 1 60%; }

    .od-pay-shared {
        flex: 1 1 100%;
        align-items: flex-start;
        flex-direction: row;
        gap: .35rem;
        padding-left: calc(38px + .85rem);
    }

    .od-pay-file-size { display: none; }
}

/* =============================================================================
   Ügyfélközpont – Onboarding (Pmt. ügyfél-átvilágítás)  ·  od-onb- névtér

   ⚠️ SAJÁT névtér, nem általános nevek. A `.od-tool-*` esete megmutatta, hogy egy
   máshol már használt osztálynév NÉMÁN omlasztja össze az elrendezést: a build
   tiszta marad, csak a lap néz ki máshogy (18. megtanult hiba).
   ============================================================================= */

/* ⚠️ `container-type` a LISTÁN: a személykártya két hasábját ehhez mérjük, nem az
   ablakhoz. A munkaterület jobb oldali eszközsávja 380 px-et vesz el, az ABLAK viszont
   ugyanolyan széles marad – képernyő-alapú töréspontnál a két hasáb egy 1100 px-es
   ablakban is megmaradna, és az adatoszlop olvashatatlanra nyomódna. Ugyanaz a döntés,
   mint a feladat-részletezőnél. */
.od-onb-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    container-type: inline-size;
}

/* A személy kártyája KÉT HASÁBBAN: balra az adatok, jobbra az okmányképek.
   ⚠️ NINCS hozzá burkoló elem: a fejléc a teljes szélességet átfogja, a másik két gyerek
   pedig magától a második sor két oszlopába kerül (sor-folytonos elhelyezés). Egy extra
   `div` csak a markupot duzzasztaná – és a mélyebb behúzás miatt az egész okmány-blokkot
   újra kellene tördelni. */
.od-onb-person {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .875rem 1rem;
    background: var(--od-white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: .75rem 1rem;
    align-items: start;
}

.od-onb-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}


.od-onb-name {
    font-weight: 600;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.od-onb-sub {
    font-size: .85rem;
    color: var(--od-gray-500);
    margin-top: .125rem;
}

/* Az állapot-chip: azonosítva / hiányzik / PEP. */
.od-onb-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.od-onb-ok {
    background: #DCFCE7;
    color: #166534;
}

/* ⚠️ A hiányzó okmány NEM piros: ez nem hiba, hanem teendő. Pirossal a munkatárs
   azt hinné, elrontott valamit – pedig csak még nem érkezett meg a fotó. */
.od-onb-missing {
    background: #FEF3C7;
    color: #92400E;
}

/* „Okmány lejárt" – PIROS, szemben a hiányzó okmánnyal (sárga), és ez tudatos eltérés a
   fenti szabálytól. A hiányzó fotó TEENDŐ: majd megérkezik. A lejárt okmány viszont
   ÁLLAPOT, ami egyben KAPU is: lejárt okmánnyal nem rögzíthető azonosítás, és a
   nyilvántartásban lévő okmányszám egy már nem létező okmányra hivatkozik. Sárgával a
   munkatárs ugyanolyan súlyúnak látná, mint egy be nem érkezett képet. */
.od-onb-expired {
    background: #FEE2E2;
    color: #991B1B;
}

.od-onb-pep {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

/* „Lezárva" – SZÜRKE, sem nem piros, sem nem sárga: ez nem hiba és nem teendő, hanem
   TÉNY. Pirossal a munkatárs azt hinné, elromlott valami; sárgával azt, hogy dolga van
   vele – pedig egy kilépett tulajdonossal épp semmi teendő nincs. */
.od-onb-closed {
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

/* A két okmányoldal EGYMÁS MELLETT, de az adatoszlop MELLETT – nem alatta.
   ⚠️ Az adatok jobb oldalán amúgy is széles üres sáv marad (a leghosszabb érték a lakcím,
   ~400 px), a képek pedig alacsonyak: egymás mellé téve pont azt a helyet töltik ki, és a
   kártya a lehető legalacsonyabb lesz. Egymás ALÁ téve a jobb hasáb kétszer olyan magas,
   mint az adatok – a kártya magasságát onnantól a képek szabják meg, feleslegesen.
   ⚠️ A felső térközt a szülő rács `row-gap`-je adja, nem `margin-top`: az a második
   hasábban fölösleges elcsúszást okozna az adatoszlophoz képest. */
.od-onb-docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

/* Keskeny kártyánál (nyitott eszközsáv vagy telefon) vissza EGY hasábra.
   ⚠️ A küszöb MÉRT: 1000 px alatt az adatoszlopnak nem maradna elég a leghosszabb címke
   („Kiemelt közszereplő (nyilatkozat)") és a lakcím értéke mellé, ha a jobb hasáb 560 px-et
   elvisz. Egy hasábra esve az okmányok is elférnek egymás mellett, tehát a kártya nem lesz
   magasabb – csak keskenyebb.

   ⚠️ **A BLOKK HELYE SZÁMÍT.** Először a `.od-onb-head` UTÁN állt – vagyis a lentebbi
   `.od-onb-docs` alapszabály (azonos, 0-1-0 specifikusság) FELÜLÍRTA, és az okmányok
   egy hasábnál is egymás alatt maradtak. A build tiszta volt, a felület meg magasabb –
   a mérés fogta meg. Ugyanaz a csapda, mint az `od-page-wrap` négy szabályánál. */
@container (max-width: 1000px) {
    .od-onb-person {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ⚠️ Egy hasábra esve az okmányok VISSZAMENNEK egymás mellé. Ott a kártya teljes
       szélessége rendelkezésre áll, és egymás alatt hagyva a kártya MAGASABB lenne,
       mint a két hasáb bevezetése ELŐTT volt – vagyis a javítás rontana ezen a
       mérettartományon. **Mérve**: 772 px-es tárolóban 676 px vs. a régi 545 px.
       Igazán keskeny kártyán (telefon) a `minmax(260px, …)` úgyis egymás alá teszi őket. */
    .od-onb-docs {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.od-onb-doc {
    border: 1px dashed var(--od-gray-300);
    border-radius: var(--od-radius);
    padding: .625rem .75rem;
    background: var(--od-gray-50);
}

.od-onb-doclabel {
    font-size: .8rem;
    font-weight: 600;
    color: var(--od-gray-700);
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .375rem;
}

.od-onb-docfile {
    font-size: .8rem;
    /* ⚠️ Hosszú fájlnév ne tolja szét a rácsot – a telefonos fotók neve gyakran
       „IMG_20260811_104233_1.jpg" alakú. */
    overflow-wrap: anywhere;
    margin-bottom: .375rem;
}

.od-onb-upload {
    display: flex;
    gap: .375rem;
    align-items: center;
    flex-wrap: wrap;
}

.od-onb-upload input[type="file"] {
    flex: 1 1 140px;
    min-width: 0;
}

/* Automatikus feltöltés a fájl kiválasztásakor (js/auto-upload.js).
   ⚠️ A submit gomb CSAK JavaScript NÉLKÜL kell – ott a fájlválasztás nem indít
      semmit. Ezért a szerver LÁTHATÓAN rendereli, és a CSS rejti el, ha a
      `<html>`-en ott az `od-js` jelölő. A jelölőt a <head>-ben álló egysoros
      szkript teszi ki: a body végén futtatva a gomb egy pillanatra felvillanna. */
.od-js .od-autoupload-btn { display: none; }

.od-autoupload-status {
    display: none;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    color: var(--od-gray-600);
}

.od-onb-upload.is-uploading .od-autoupload-status { display: inline-flex; }

/* ⚠️ A mező NEM kap `disabled`-et: a letiltott vezérlő kimarad a POST-ból, tehát a
   fájl némán nem érkezne meg. Csak kivesszük a játékból. */
.od-onb-upload.is-uploading .od-autoupload-field {
    opacity: .55;
    pointer-events: none;
}

/* A meglévő kép mellett a törlés gombja + a csere módjának kimondása.
   ⚠️ A szöveg LÁTHATÓ, nem `title`: a nyilvános adatbekérőt telefonról töltik ki,
   ahol nincs hover – ott a magyarázat nélkül a felhasználó nem tudná, hogyan
   cserélje ki az elmosódott fotót. */
.od-onb-replace {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: wrap;
}

.od-onb-missing-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--od-gray-700);
}

.od-onb-missing-list li + li {
    margin-top: .25rem;
}

/* ⚠️ 576 px alatt érintési célpont-méret: a fájlválasztó és a feltöltés gomb is
   legalább 44 px magas legyen. Ezt a lapot jellemzően TELEFONRÓL töltik ki – ott
   készül a fénykép az igazolványról. */
@media (max-width: 575.98px) {
    .od-onb-upload input[type="file"],
    .od-onb-upload .btn {
        min-height: 44px;
    }

    /* ⚠️ A kuka gomb MOSTANTÓL a csere EGYETLEN útja (a kép mellett nincs feltöltő mező),
       tehát valódi érintési célponttá kell nőnie. Mérve: enélkül 30×36 px – a nyilvános
       adatbekérőt pedig telefonról töltik ki, elmosódott fotóval a második nekifutás
       pont ezen a gombon múlik. A szűkítés `.od-onb-replace`-re szól, hogy a táblázatok
       sűrű művelet-oszlopát ne tolja szét. */
    .od-onb-replace .od-action-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .od-onb-docs {
        grid-template-columns: 1fr;
    }
}

/* Az okmánykép bélyegképe.
   ⚠️ FIX magasság, `object-fit: contain`: az álló és a fekvő fotó is ugyanakkora helyet
   foglal, tehát a rács nem ugrál attól, hogy ki hogyan tartotta a telefont.
   ⚠️ Sötét háttér: egy fehér lapról készült fotó széle különben beleolvadna a kártyába,
   és nem látszana, hol ér véget a kép. */
.od-onb-thumb {
    display: block;
    height: 96px;
    max-width: 100%;
    object-fit: contain;
    background: var(--od-gray-800);
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
}

/* ── Onboarding: azonosítás-egyeztetés ────────────────────────────────── */

/* „Egyeztetésre vár" – KÉK, nem sárga: ez nem hiányosság, hanem az iroda következő
   teendője. Sárgával a munkatárs azt hinné, az ügyfélre vár valami. */
.od-onb-wait {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

/* ⚠️ Nincs `margin-top`: a szülő rács `row-gap`-je adja a térközt. Margóval a bal és a
   jobb hasáb teteje eltérő mértékben csúszna le, és a két oszlop nem indulna egy vonalból. */
.od-onb-databox {
    min-width: 0;
}

/* A rögzített adatok listája: címke + érték párok.
   ⚠️ `auto` első oszlop: a leghosszabb címkéhez igazodik, tehát az ÉRTÉKEK egy vonalban
   kezdődnek – így lehet őket az okmánnyal végigfutva összevetni. */
.od-onb-data {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .125rem .75rem;
    margin: 0;
    font-size: .85rem;
}

/* Kiemelt adatsor-értékek (ma: az okmány lejárata).
   ⚠️ Enélkül a „nincs megadva" ugyanolyan halkan ülne a többi érték közt, mint egy kitöltött
   mező – pedig épp az a lényeg, hogy szemet szúrjon. A színek AZONOSAK a chipekével, hogy a
   fejléc és az adatsor ugyanazt a nyelvet beszélje. */
.od-onb-data dd.is-warn {
    color: #92400E;
    font-weight: 600;
}

.od-onb-data dd.is-danger {
    color: #991B1B;
    font-weight: 600;
}

/* ── Átvilágítás fül: üres állapot és nyilvántartás-kártya (`od-dd-`) ──────────
   ⚠️ SAJÁT névtér, nem a meglévő `od-onb-` bővítése: az a SZEMÉLYEK listájáé, ez a
   kártyáké. Egy kész osztály más célra pontosan a 18. megtanult hiba. */

.od-dd-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Az ikonblokk: ugyanaz a nyelv, mint az oldalfejlécek `od-page-icon`-jánál – a
   felhasználó ránézésre tudja, hogy ez egy szekció azonosítója, nem díszítés. */
.od-dd-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--od-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--od-primary-xlt);
    color: var(--od-primary);
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: enélkül a hosszú szöveg nem tud a flex-elem alá zsugorodni,
   és a jobb oldali gombot kitolja a kártyából. */
.od-dd-headmain {
    flex: 1 1 320px;
    min-width: 0;
}

.od-dd-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--od-gray-800);
    margin: 0 0 .25rem;
}

.od-dd-lead {
    color: var(--od-gray-600);
    font-size: .9rem;
    margin: 0;
}

/* ── Az üres állapot két TEENDŐJE ────────────────────────────────────────────
   ⚠️ Ez nem szépítés. Korábban három bekezdésnyi próza állt itt, benne a két teendő
   LINKKÉNT elbújtatva – a lap magyarázott, de nem kínált fel semmit. Külön dobozban,
   sorszámmal és saját gombbal a munkatárs látja, mi a következő lépés. */
.od-dd-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.od-dd-step {
    display: flex;
    gap: .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

.od-dd-step-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--od-primary);
    color: var(--od-white);
}

.od-dd-step-body { min-width: 0; }

.od-dd-step-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--od-gray-800);
    margin-bottom: .25rem;
}

.od-dd-step-text {
    font-size: .85rem;
    color: var(--od-gray-600);
    margin-bottom: .625rem;
}

/* ── A nyilvántartás tényleges tulajdonosai, chipként ────────────────────────
   ⚠️ Vesszővel felsorolva egy hosszú mondat lett belőle, amiből nem látszott, HÁNY
   emberről van szó – pedig épp az a nyilvántartás lényege. */
.od-dd-owners {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: 1rem;
}

.od-dd-owner {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .625rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: var(--od-gray-100);
    color: var(--od-gray-800);
}

.od-dd-owner i { color: var(--od-gray-500); }

/* A tulajdoni hányad SZÁMJEGYE hangsúlyosabb, mint a név mellett futó szöveg:
   a nyilvántartásban ez az „Érdekeltségének mértéke" oszlop. */
.od-dd-owner-pct {
    font-variant-numeric: tabular-nums;
    color: var(--od-primary-dark);
}

/* A jogszabályi lábjegyzet: elkülönül a tartalomtól, de nem alert – nem hiba és nem
   teendő, hanem tudnivaló. Alertként minden letöltésnél riasztásnak látszana. */
.od-dd-note {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--od-gray-200);
    font-size: .8rem;
    color: var(--od-gray-600);
}

.od-dd-note i { color: var(--od-gray-500); }

@media (max-width: 575.98px) {
    .od-dd-head { gap: .75rem; }
    .od-dd-icon { width: 38px; height: 38px; font-size: 1.1rem; }
}

.od-onb-data dt {
    color: var(--od-gray-500);
    font-weight: 500;
}

.od-onb-data dd {
    margin: 0;
    color: var(--od-gray-800);
    overflow-wrap: anywhere;
}

/* Az egyeztető ablak: okmány és adat EGYMÁS MELLETT. */
.od-onb-verify {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.od-onb-verify-img {
    display: block;
    width: 100%;
    /* ⚠️ `max-height` viewport-egységben: az okmány így akkor is egészben látszik, ha a
       fotó nagyon magas – a lap nem nő meg, hanem az ablak törzse görget. */
    max-height: 44vh;
    object-fit: contain;
    background: var(--od-gray-800);
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
}

.od-onb-verified-note {
    font-size: .85rem;
    color: var(--od-gray-700);
}

/* ⚠️ 992 px alatt egymás alá: két hasábban a kép és az adat is olvashatatlanul
   keskeny lenne. A könyvelő jellemzően asztali gépen egyeztet, de a lap nem eshet
   szét, ha valaki tabletről nézi. */
@media (max-width: 991.98px) {
    .od-onb-verify {
        grid-template-columns: 1fr;
    }

    .od-onb-verify-img {
        max-height: 50vh;
    }
}

/* Az egyeztető ablak SZÉLESEBB a szokásosnál: két hasáb kell bele (okmány + adat).
   ⚠️ Saját módosító, nem az `od-modal-wide` (620 px) átírása – az máshol is használatban
   van, és egy megnövelt szélesség ott némán szétfeszítené az ablakot. */
.od-onb-modal { width: min(1100px, calc(100vw - 2rem)); }

/* Kockázati besorolás chipjei (od-rk- névtér).
   ⚠️ A Magas SZÁNDÉKOSAN piros, az Alacsony zöld – itt a szín nem díszítés: egy listát
   átfutva ez az az adat, amit egy pillantással meg kell találni. */
.od-rk-low {
    background: #DCFCE7;
    color: #166534;
}

.od-rk-medium {
    background: #FEF3C7;
    color: #92400E;
}

.od-rk-high {
    background: #FEE2E2;
    color: #991B1B;
}

/* ── Regisztráció: adózási javaslatok ───────────────────────────────────────
   ⚠️ Saját névtér (`od-tax-suggest-`), nem az általános `od-tax-` – a 18. megtanult
   hiba szerint egy foglalt osztálynevet átvéve a másik komponens elrendezése omlana
   össze, némán.                                                                     */
.od-tax-suggest {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    overflow: hidden;
}

/* A TELJES SOR kattintható felület (`<label>`), nem csak az apró jelölőnégyzet:
   a könyvelő itt egy listát fut végig, és a nagy célpont gyorsabb és biztosabb. */
.od-tax-suggest-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .9rem;
    margin: 0;
    cursor: pointer;
}

.od-tax-suggest-row + .od-tax-suggest-row {
    border-top: 1px solid var(--od-gray-200);
}

.od-tax-suggest-row:hover {
    background: var(--od-gray-50);
}

/* ── Cég adatlap: átvilágítás ───────────────────────────────────────────────
   A besorolás indoklása szabad szöveg – sortöréssel, ahogy beírták. A `pre-wrap`
   KELL: enélkül a többsoros indoklás egyetlen bekezdéssé folyna össze, és pont az
   veszne el, amiért a mezőt szabad szövegnek hagytuk.                              */
.od-dd-reason {
    white-space: pre-wrap;
    padding: .6rem .8rem;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
}

/* ── Átvilágítás-monitor (/office/due-diligence) ─────────────────────────────
   ⚠️ `position: relative` a görgető dobozra – ugyanaz a csapda, mint a számlalistánál:
   a `visually-hidden` és minden abszolút pozicionált tartalom pozícionált ős NÉLKÜL a LAP
   koordinátarendszeréhez igazodik, és vízszintesen kitolja a dokumentumot.               */
.od-dd-scroll { position: relative; }

/* ⚠️ A „nincs átvilágítás" kosár SZÁNDÉKOSAN nem piros, hanem ibolya – pedig ez a
   legsúlyosabb állapot. A piros a LEJÁRT felülvizsgálaté; ez viszont MÁS FAJTA probléma
   (nem késés, hanem a dosszié hiánya), és MÁS a teendő is: ott felülvizsgálat kell, itt a
   teljes átvilágítás elvégzése. Azonos színnel a két kosár összemosódna.                 */
.od-tile-missing { border-left-color: #7C3AED; }
.od-tile-missing .od-task-tile-num { color: #7C3AED; }

/* Az állapot-jelvények. Színnel ÉS SZÖVEGGEL is jelölünk: a puszta szín nem elérhető
   jelzés, és nyomtatásban is elveszne.                                                   */
.od-dd-badge-missing { background: #EDE9FE; color: #5B21B6; }
.od-dd-badge-overdue { background: #FEE2E2; color: #991B1B; }
.od-dd-badge-soon    { background: #FEF3C7; color: #92400E; }
.od-dd-badge-ok      { background: #DCFCE7; color: #166534; }

/* ── Az iroda felülvizsgálati ciklusa (Irodám) ──────────────────────────────
   A két hónapmező szűk: a `form-control` alapból 100%-ot venne, és a magyarázó szöveg
   mellett aránytalanul széles lenne.                                                     */
.od-dd-cycle-input { max-width: 140px; }

/* ── Regisztráció: a MÁR rögzített kötelezettségek ──────────────────────────
   ⚠️ Saját névtér az `od-tax-suggest-` mellett: a kettő két KÜLÖN dolog (javaslat vs.
   tény), és egy közös osztály később némán összemosná a megjelenésüket.               */
.od-tax-recorded {
    list-style: none;
    margin: 0;
    padding: 0;
}

.od-tax-recorded li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .25rem 0;
}

/* ============================================================
   BEÁGYAZOTT LEGÖRDÜLŐ (almenü) – a Bootstrap 5 ezt nem tudja
   ============================================================ */
.od-submenu { position: relative; }

/* A nyitó elem `<button>`, tehát nem örökli a link-megjelenést: a `dropdown-item`
   mellé kell a teljes szélesség és a bal igazítás, különben a szöveg középre ugrik. */
.od-submenu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

/* A nyíl a sor VÉGÉN – ez mondja meg, hogy itt még nyílik valami. Enélkül a menüpont
   ugyanúgy nézne ki, mint a navigáló társai, és a felhasználó azt hinné, elromlott. */
.od-submenu-caret {
    margin-left: auto;
    font-size: .75rem;
    color: var(--od-gray-400);
}

/* NYITOTT navbar: az almenü JOBBRA nyílik, a szülő menüpont magasságában. */
.od-submenu-menu {
    position: absolute;
    top: -.5rem;          /* a szülő menü függőleges paddingját ellensúlyozza */
    left: 100%;
    margin: 0;
    display: none;
}

.od-submenu-menu.show { display: block; }

/* ⚠️ BECSUKOTT (mobil) navbarban a Bootstrap `position: static`-ra teszi a legördülőt,
   tehát NINCS Popper, ami a képernyőn tartaná – jobbra kinyitva az almenü egyszerűen
   kilógna (ez a 27. megtanult hiba). Itt ezért BEHÚZOTT, függőleges listára váltunk. */
@media (max-width: 991.98px) {
    /* ⚠️ A BEHÚZÁS a szülő `li` PADDINGJÉVEL történik, NEM az almenü marginjával – és ez
       nem stílus kérdése. Fentebb `.od-navbar .dropdown-menu { width: 100% }` áll (az a
       szabály szorította be annak idején a menüt a képernyőre), és ezt az ALMENÜ IS
       örökli: marginnal a 100% a szülő li TELJES szélességére oldódna fel, a margó pedig
       kitolná – **mérve: 3 px-cel túllógott a képernyőn**. Paddinggal a 100% már a
       szűkített tartalomdobozra vonatkozik, tehát pontosan a szülő menü széléhez simul
       (mérve: 324 px széles, jobb széle 359 – ugyanott, ahol a szülőé). */
    .od-submenu { padding-left: 1.2rem; }

    .od-submenu-menu {
        position: static;
        display: none;
        border: none;
        box-shadow: none;
        min-width: 0;
        padding: 0;
        border-left: 2px solid var(--od-gray-200);
        border-radius: 0;
    }

    /* A behúzás a li-n van, tehát a NYITÓ GOMBOT vissza kell húzni – különben az almenü
       címkéje is beljebb csúszna, mint a többi menüpont. */
    .od-submenu-toggle { margin-left: -1.2rem; width: calc(100% + 1.2rem); }

    /* A `.show` a fenti szabályt is felülírja – a sorrend számít. */
    .od-submenu-menu.show { display: block; }

    /* Lefelé mutató nyíl: vízszintesen nincs hova nyílnia. */
    .od-submenu-toggle[aria-expanded="true"] .od-submenu-caret { transform: rotate(90deg); }
}

/* ── NAV-lehívás haladásjelző ───────────────────────────────────────────────
   Három szám egy sorban; keskeny ablakban egymás alá kerül. Saját névtér, mert az
   `od-modal-*` az ablak VÁZA – a tartalom elrendezése nem tartozik rá (18. tanulság). */
.od-osa-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

/* ── NAV-számlalista ────────────────────────────────────────────────────────
   Saját névtér (`od-inv-`), mert a chipek jelentése itt más, mint a feladatoknál vagy
   az onboardingnál – közös osztállyal a két jelentés némán összemosódna (18. tanulság). */
.od-inv-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.od-inv-out { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-inv-in  { background: var(--od-gray-100);    color: var(--od-gray-700); }

/* Korrekció (sztornó/módosító) és a sztornózott eredeti – KÜLÖN szín, mert a kettő
   nem ugyanaz: az egyik a javítás, a másik a javított. */
.od-inv-corr { background: #FEF3C7; color: #92400E; }
.od-inv-void { background: #FEE2E2; color: #991B1B; }

/* ⚠️ A KÉZI tétel jelölése SEMLEGES színt kap (nem sárgát, nem pirosat): nem hiba és nem
   figyelmeztetés, hanem az adat EREDETE. Riasztó színnel a könyvelő azt hinné, valami
   javítanivaló van vele. */
.od-inv-manual { background: var(--od-primary-xlt); color: var(--od-primary-dark); }

/* ⚠️ A sztornózott sor ÁTHÚZOTT összeggel: a szem így egy pillantás alatt kiszűri azt,
   ami már nem él. Csak halványítva a felhasználó azt hinné, kevésbé fontos – nem azt,
   hogy érvénytelen. */
.od-inv-cancelled .od-num { text-decoration: line-through; opacity: .55; }

.od-inv-lines > td { background: var(--od-gray-50); }

/* ⚠️ Táblázatos szám: `tabular-nums` nélkül az egymás alatti összegek nem esnének egy
   vonalba, és az oszlop olvashatatlanná válna. */
.od-num { font-variant-numeric: tabular-nums; }

/* ── Összesítő: három nagy szám ─────────────────────────────────────────────
   ⚠️ A SZŰRŐ FÖLÖTT áll. A lap kérdése az, hogy „hogy állok" – arra ezek a számok
   válaszolnak, a szűrő pedig eszköz ehhez. Alá téve a válasz a beállítói sáv mögé
   bújna, és görgetni kellene érte. */
.od-inv-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

/* A bal oldali színsáv hordozza a jelentést (bevétel / kiadás / egyenleg), nem egy
   ikon: így a szem a SZÁMOT nézi, a besorolást pedig perifériásan veszi. */
.od-inv-stat {
    padding-left: .85rem;
    border-left: 3px solid var(--od-gray-200);
    min-width: 190px;
}

.od-inv-stat-out { border-left-color: var(--od-success); }
.od-inv-stat-in  { border-left-color: var(--od-danger); }
.od-inv-stat-bal { border-left-color: var(--od-primary); }

.od-inv-stat-label {
    font-size: .8rem;
    color: var(--od-gray-500);
    margin-bottom: .15rem;
}

.od-inv-stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--od-gray-800);
}

/* ⚠️ A negatív egyenleg PIROS. Ugyanolyan sötét számmal a „mínusz" előjel egyetlen
   karakteren múlna, és egy futó pillantásnál elveszne. */
.od-inv-neg { color: var(--od-danger); }

.od-inv-stat-sub {
    font-size: .8rem;
    color: var(--od-gray-500);
    margin-top: .1rem;
}

.od-inv-hint { color: var(--od-gray-400); cursor: help; }

/* A hiányzó bizonylatok száma SZÁNDÉKOSAN nem kap saját sort az összesítőben: a
   szűrősáv „Nincs bizonylat (N)" felirata mondja meg, és ugyanaz a kattintás szűr is.
   Az összesítő a PÉNZRŐL szól – egy más természetű negyedik sor csak hígítaná. */

/* ── Havi diagram ───────────────────────────────────────────────────────────
   A rajzolást a Chart.js végzi (`js/finance-chart.js`), a könyvtár HELYBEN van
   (`lib/chartjs/`) – a CSP `script-src 'self'`, tehát CDN-ről semmi nem jöhet.

   ⚠️ A korábbi kézi SVG helyére azért került, mert három dolog kellett, amit az csak
   sok saját kóddal tudott volna: simított görbe, lebegő adatkártya MINDKÉT adatsor
   értékével, és Y-tengely rácsvonallal. Az OptiDesk 2 irányítópultja ugyanezt
   használja – egy megszokott felület nem lehet kétféle. */
.od-inv-chart { border-top: 1px solid var(--od-gray-200); padding-top: .85rem; }

/* ⚠️ A BEFOGLALÓNAK kell a fix magasság, nem a vászonnak. A Chart.js
   `responsive: true` mellett a szülő méretéhez igazítja a vásznat, és a canvas saját
   `height` attribútumát maga írja – ha ITT adnánk meg, minden újraméretezésnél
   felülírná, és a diagram fokozatosan összenyomódna („shrinking canvas" hiba).

   ⚠️ FIX magasság azért is kell, hogy szűréskor a kártya ne ugráljon függőlegesen. */
.od-inv-chart-wrap {
    position: relative;
    height: 220px;
}

/* ── Párosítás ellenőrzése: a bizonylat kerete ──────────────────────────────
   ⚠️ Az `<iframe>`-en NINCS `sandbox` – a sandboxolt keretben nincs plugin, tehát a
   PDF NÉMÁN nem jelenne meg. A védelem a végpont saját, szűk CSP-je és a
   cégenkénti jogosultság-ellenőrzés. */
/* ⚠️ **A FORRÁS-jelölés SZÖVEGES, nem csak színkód.** A két sorfajta ugyanúgy néz ki,
   a döntés viszont mást jelent rajtuk – puszta színnel a különbség nyomtatásban és
   színtévesztéssel elveszne. Ugyanaz a szabály, mint a lista irány-ikonjánál.
   ⚠️ NEM `bg-primary`/`bg-secondary` Bootstrap-osztály: az ügyfél-badge kékje
   összemosódna a lap kiemelt gombjaival, és a jelölés vezérlőnek látszana. */
.od-audit-src-machine,
.od-audit-src-client {
    font-weight: 600;
    font-size: .75rem;
}

.od-audit-src-machine {
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

.od-audit-src-client {
    background: #EFF6FF;
    color: #1D4ED8;
}

.od-audit-frame {
    width: 100%;
    height: 460px;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-100);
    display: block;
}

/* ── AI-párosítás mérése: várakozási idő ────────────────────────────────────
   ⚠️ CSS-sáv, NEM Chart.js. Öt vödörhöz egy diagram-könyvtár fölösleges függőség
   lenne, és így JavaScript nélkül is olvasható marad – a szám a sáv MELLETT áll,
   nem benne. A szélesség EGÉSZ százalék (a Razor kerekíti): tizedessel magyar
   kultúrán vessző kerülne a `style`-ba, amit a böngésző némán eldob. */
.od-wait-stat {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .75rem 1rem;
    height: 100%;
}

/* ⚠️ A hátralék CSAK akkor kap kiemelést, ha tényleg van – egy állandóan sárga
   doboz pár nap alatt elszürkül, és a valódi torlódás veszne el benne. */
.od-wait-stat.is-open {
    border-color: var(--od-warning);
    background: #FFFBEB;
}

.od-wait-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--od-gray-800);
    font-variant-numeric: tabular-nums;
}

.od-wait-label {
    font-size: .8125rem;
    color: var(--od-gray-500);
}

/* ── Emberi audit: forrásonkénti blokk ──────────────────────────────────────
   ⚠️ SAJÁT névtér, nem az `od-wait-` bővítése: az a VÁRAKOZÁSI IDŐ kártyájáé, ez a
   két audit-populáció keretezése. Egy kész osztály más célra a 18. megtanult hiba.
   ⚠️ A két blokk közt VONAL van, nem csak térköz: enélkül a hat statisztika-doboz
   egyetlen, hatelemű rácsnak látszana – és pont az veszne el, hogy KÉT KÜLÖN
   becslésről van szó, amiket sosem szabad összeadni. */
.od-auditsrc + .od-auditsrc {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--od-gray-200);
}

.od-auditsrc-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin-bottom: .5rem;
}

.od-auditsrc-title {
    font-weight: 600;
    color: var(--od-gray-800);
}

.od-auditsrc-q {
    font-size: .8125rem;
    color: var(--od-gray-500);
}

.od-wait-row {
    display: grid;
    grid-template-columns: 8.5rem 1fr 6rem;
    align-items: center;
    gap: .75rem;
    padding: .2rem 0;
}

.od-wait-name {
    font-size: .8125rem;
    color: var(--od-gray-600);
}

.od-wait-track {
    background: var(--od-gray-100);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.od-wait-fill {
    background: var(--od-primary);
    height: 100%;
    border-radius: 999px;
}

.od-wait-num {
    font-size: .8125rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    /* ⚠️ Telefonon a fix 8,5rem-es névoszlop a sávot nullára nyomná – ott a
       felirat a sáv FÖLÉ kerül. (Az `/admin/**` amúgy is asztali, de a keskeny
       ablak valós.) */
    .od-wait-row {
        grid-template-columns: 1fr auto;
    }

    .od-wait-name {
        grid-column: 1 / -1;
    }
}

/* ── AI-párosítás mérése: szabály-verziók diagramja ─────────────────────────
   ⚠️ SAJÁT névtér (`od-rulechart`), nem az `od-inv-chart-wrap` újrahasznosítása:
   annak FIX 220 px magassága van, itt viszont a magasság a verziók számától függ,
   és a JS állítja be. Egy kész osztály MÁS célra pontosan a 18. megtanult hiba.

   ⚠️ A magasságot SZÁNDÉKOSAN nem írjuk ide: egy verziónál 110 px, négynél 284 px
   kellene. Tartalék (`min-height`) viszont KELL – ha a szkript bármiért nem fut le,
   a Chart.js nélküli üres vászon 0 magas lenne, és a kártyán egy megmagyarázhatatlan
   rés maradna. */
.od-rulechart {
    position: relative;
    min-height: 110px;
}

/* ⚠️ Ugyanaz a `!important`, mint a pénzügyi diagramnál: nélküle a Chart.js inline
   mérete nyerne, ami a devicePixelRatio-val felszorzott BITTÉRKÉP-méret. */
.od-rulechart > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ⚠️ A vászon KITÖLTI a befoglalót. A `!important` nélkül a Chart.js inline
   `style="width:…px;height:…px"` értéke nyerne, ami a devicePixelRatio-val
   felszorzott bittérkép-méret – nem a megjelenítendő méret. */
.od-inv-chart-wrap > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ⚠️ A dátumszűrő SAJÁT sávja. A `<input type="date">` természetes szélessége ~184 px,
   tehát felirattal és a gondolatjellel együtt 425 px – ez egy 375 px-es telefonon a
   LAPOT tolta ki vízszintesen (mérve). Tördelni ÉS zsugorodni is hagyjuk; a `min-width: 0`
   nélkül a flex elem nem menne a tartalma alá. */
.od-inv-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.od-inv-dates .od-input {
    flex: 1 1 145px;
    min-width: 0;
    width: auto;
}

/* ⚠️ A dátum-alap választója a FELIRAT helyén ül, tehát nem nyúlhat akkorára, mint a
   dátummezők. A fenti szabály `flex: 1 1 145px`-et adna neki is (ő is `od-input`), amitől
   ugyanolyan széles lenne, mint a mellette lévő érték – és a szem nem tudná megkülönböztetni
   a BEÁLLÍTÁST az ADATTÓL. A `0 0 auto` a leghosszabb opcióhoz („Teljesítés") méretezi. */
.od-inv-dates .od-inv-basis {
    flex: 0 0 auto;
    width: auto;
    min-width: 122px;
}

/* ⚠️ `position: relative` a görgető dobozra. A fejlécek képernyőolvasónak szánt,
   `visually-hidden` szövege `position: absolute` – pozícionált ős NÉLKÜL a LAP
   koordinátarendszeréhez igazodik, tehát kiszökik a vízszintesen görgethető dobozból,
   és a dokumentumot szélesíti ki. **Mérve: 375 px-en a lap 686 px-re nőtt.** */
.od-inv-scroll { position: relative; }

/* ── Lista ──────────────────────────────────────────────────────────────────
   ⚠️ Az IRÁNY-oszlop a Kelt ELŐTT áll, és csak ikon. A korábbi chipes „Irány" oszlop
   a sor közepén ült: a szem a fajtát a végén kereste, közben egy egész hasábot elvett
   a partner elől. */
.od-inv-dir-h, .od-inv-dir-c { width: 34px; padding-right: 0 !important; }

.od-inv-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: .85rem;
}

.od-inv-ico-out { background: #DCFCE7; color: #15803D; }
.od-inv-ico-in  { background: #FEE2E2; color: #B91C1C; }

/* ── A társított számlakép jelzője ───────────────────────────────────────────
   ⚠️ SAJÁT oszlop, nem chip a számlaszám alatt: ez a KÖNYVELŐ MUNKÁJÁNAK állapota,
   nem a bizonylaté. Fix oszlopban a szem egy vonal mentén futhat végig, és a HIÁNYZÓ
   pipa is azonnal kiugrik – a sorok közé keverve pont ez veszne el.

   ⚠️ A hiányt NEM rajzoljuk ki: 225 soron kétszáz halvány „nincs" ikon zaj lenne, és
   pont a kész sorokat nyomná el. Itt a pipa a kivétel, nem az alapállapot. */
/* ⚠️ A bal PADDING nem hagyható nullán, pedig kézenfekvő volna: az IRÁNY-oszlop
   `padding-right: 0`, tehát a két ikon közt csak a cella belső középre igazítása maradna
   rés – **mérve 3 px**, amitől egyetlen jelzésnek látszanának. Az `!important` is kell:
   a Bootstrap `.table > :not(caption) > * > *` szabálya specifikusabb (0-1-1). */
.od-inv-pair-h,
.od-inv-pair-c {
    width: 38px;
    text-align: center;
    padding-left: .5rem !important;
    padding-right: .35rem !important;
}

.od-inv-paired {
    display: inline-flex;
    color: var(--od-success);
    font-size: 1rem;
    line-height: 1;
}

/* Az ügyfél töltötte fel, de a számlaszámot nem sikerült kiolvasni – vagy ő bírálta
   felül az ellentmondást. ⚠️ BOROSTYÁN, nem piros: ez nem hiba, csak nincs bizonyíték.
   Pirossal minden harmadik ügyfél-fotó riasztásnak látszana (mérve: az OCR a fotók
   ~egyharmadánál nem talál egyértelmű számlaszámot), és a jelzés elszürkülne. */
.od-inv-paired.is-warn {
    color: var(--od-warning);
}

/* A bizonylaton egy MÁSIK számla száma szerepel – ez az egyetlen valóban cselekvésre
   hívó eset, ezért kapja az egyetlen piros jelzést az oszlopban. */
.od-inv-paired.is-contra {
    color: var(--od-danger);
}

/* ⚠️ A BRUTTÓ a hangsúlyos szám (azt fizetik ki), a nettó másodlagos – de ott marad,
   mert a könyvelőnek az az ÁFA-alap. Oszlopot összevonva az egyik közönség veszítene. */
.od-inv-table .od-inv-gross { font-weight: 600; color: var(--od-gray-800); }
.od-inv-table .od-inv-net   { color: var(--od-gray-500); }

/* ⚠️ Az ÁFA-érték a NETTÓ súlyát kapja, nem a bruttóét: a sor fő száma továbbra is a
   bruttó (azt fizetik ki). Három egyformán hangsúlyos összeggel a szemnek nem lenne
   hova kapaszkodnia a sorban. */
.od-inv-table .od-inv-vat { color: var(--od-gray-500); }

/* ⚠️ Az ÁFA-KULCS oszlopa: nem összeg, hanem BESOROLÁS – ezért kisebb és halványabb,
   és NEM `od-num`. Számként formázva („27%") a szem összegnek nézné, és a nettó–bruttó
   vonalába próbálná igazítani.
   ⚠️ `white-space: nowrap`: a „27% · 5%" felsorolás egy egységet alkot; kettétörve a
   második kulcs külön sorba csúszna, és önálló adatnak látszana. */
.od-inv-table .od-inv-rate {
    font-size: .82rem;
    color: var(--od-gray-600);
    white-space: nowrap;
}

/* ⚠️ KISZÁMOLT érték (a NAV nem küldte). A `~` a jelzés, a szín csak kíséri – színnel
   egyedül a jelentés elveszne nyomtatásban és színtévesztő szemmel is. A `title` mondja
   ki szavakkal, hogy honnan van (lásd `InvoiceVat.DerivedTitle`).
   ⚠️ SZÁNDÉKOSAN halvány, nem figyelmeztető sárga: ez nem hiba és nem hiány, hanem egy
   pontos, levezetett szám – riasztásnak öltöztetve a néző azt hinné, baj van a sorral. */
.od-inv-calc {
    color: var(--od-gray-500);
    cursor: help;
}

.od-inv-clickable { cursor: pointer; }
.od-inv-row:hover > td { background: var(--od-gray-50); }

/* ⚠️ HÓNAP-ELVÁLASZTÓ: a lista időrendi, és enélkül a szem több száz egyforma soron
   kapaszkodik. A diagram havi oszlopaival együtt ez adja a lap tájékozódási pontjait. */
.od-inv-sep > td {
    background: var(--od-gray-100);
    font-size: .78rem;
    font-weight: 600;
    color: var(--od-gray-600);
    text-transform: lowercase;
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

.od-inv-sep:hover > td { background: var(--od-gray-100); }

/* ── Részletek ablak ────────────────────────────────────────────────────────
   ⚠️ A tételek korábban a soron nyíltak le. Az overlay nem stílusváltás: ide fog
   kerülni a SZÁMLAKÉP is, hogy az ügyfél magát a bizonylatot lássa – egy táblázatsorba
   arra nincs hely, és a sorok közé ékelt kép a lista ritmusát is szétverné.

   ⚠️ `max-height` + görgethető törzs KELL. A `transform`-os középre igazítás magas
   tartalomnál a képernyő TETEJÉN lógna ki, ahonnan nem lehet visszagörgetni – ugyanaz a
   csapda, mint a cím-szerkesztő ablaknál. A `min-height: 0` a flex elemen azért kell,
   hogy a törzs tényleg zsugorodhasson a tartalma alá, és MAGÁBAN görgessen. */
.od-inv-modal {
    width: min(1080px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
}

/* ⚠️ SZÜRKE háttér a törzsön, hogy a tartalom „LAPKÉNT" váljon el tőle. A jobb oldalon
   egy VALÓDI bizonylat van; ha a bal oldal csak egymás alá rakott mezők halmaza, a szem
   nem tudja a kettőt egy párként olvasni. Ugyanaz a jelzés, amit a PDF-nézegető is ad. */
.od-inv-modal .od-modal-body {
    overflow-y: auto;
    min-height: 0;
    background: var(--od-gray-50);
    padding-top: 1rem;
}

/* ── Képpel: TELJES KÉPERNYŐ ─────────────────────────────────────────────────
   ⚠️ A méret ahhoz igazodik, ami tényleg helyet kér. Kép nélkül a fenti, tartalomhoz
   növő ablak marad – fixen teljes képernyőre állítva egy háromsoros számla egy jórészt
   ÜRES dobozban állna, ami elrontottnak látszik, nem nagyvonalúnak.

   ⚠️ Marad 1rem szegély körben: a hátterének látszania kell, különben nem derül ki, hogy
   ez egy bezárható réteg – és a háttérre kattintva sem lenne hova.

   ⚠️ `dvh` a `vh` UTÁN: telefonon a `vh` a böngésző sávjait NEM veszi le, tehát az ablak
   alja (a Bezárás gombbal) a képernyőn kívülre kerülne. A `vh` sor tartalék marad azoknak
   a böngészőknek, amelyek a `dvh`-t nem ismerik – azok egyszerűen figyelmen kívül hagyják
   a másodikat. */
/* ⚠️ A számla-ablak FÖLÉ nyíló megerősítő ablak (társítás bontása) a saját rétegét kapja.
   Mindkettő `.od-modal` (z-index 1060) és `.od-modal-backdrop` (1055), tehát a megerősítés
   HÁTTERE a számla-ablak MÖGÉ esne: a számla nem sötétedne el, a kis ablak pedig egy világos
   felületen lebegne – befejezetlennek látszana. Az `~` KIZÁRÓLAG az UTÁNA következő ablakra
   hat, tehát csak akkor lép életbe, amikor tényleg egymásra nyílnak.
   ⚠️ Ezért kell a `<ConfirmDialog>`-nak a számla-ablak UTÁN állnia a jelölésben. */
.od-inv-modal ~ .od-modal-backdrop { z-index: 1065; }
.od-inv-modal ~ .od-modal          { z-index: 1070; }

/* ⚠️ A SZÉLESSÉG a MAGASSÁGBÓL jön (`aspect-ratio`), nem a képernyő szélességéből. A cél
   „két A4-es lap egymás mellett": jobbra a bizonylat, balra a belőle olvasható kivonat.
   Puszta `100vw`-vel egy ultraszéles kijelzőn a két hasáb aránytalanul elnyúlna – a
   számlakép ugyanolyan magas maradna (a magasság szabja meg), a mellette lévő üres sáv
   viszont nőne. Az arány úgy áll, hogy a képhasáb nagyjából A4-et adjon ki teljes
   magasságban; a `max-width` pedig alacsony, széles ablaknál is a képernyőn tartja. */
.od-inv-modal.has-image {
    height: calc(100vh - 2rem);
    height: calc(100dvh - 2rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    width: auto;
    aspect-ratio: 1.15;
    max-width: calc(100vw - 2rem);
}

/* ⚠️ FIX magasságnál a törzsnek `flex: 1` KELL. Enélkül a tartalmához zsugorodna, és a
   fejléc meg a lábléc közt üres sáv maradna – az ablak magas lenne, a tartalma meg fent
   összetorlódva. */
.od-inv-modal.has-image .od-modal-body {
    flex: 1 1 auto;
    display: flex;

    /* ⚠️ Itt NEM a törzs görget, hanem a KÉT HASÁB külön. Így a számlakép a teljes
       magasságot megkapja, és nem görög ki a képből pont akkor, amikor a könyvelő a
       tételsorokat veti össze vele. */
    overflow: hidden;
}

.od-inv-modal.has-image .od-inv-doc {
    flex: 1 1 auto;
    min-height: 0;
}

/* ⚠️ `min-height: 0` KÖTELEZŐ a görgető hasábon. Enélkül a rács-elem nem tud a tartalma
   alá zsugorodni, tehát nem MAGÁBAN görget, hanem kifeszíti az ablakot – ugyanaz a
   csapda, mint a PDF szerkesztő munkafelületénél. */
.od-inv-modal.has-image .od-inv-doc-main {
    overflow-y: auto;
    min-height: 0;
    padding-right: .35rem;
}

/* A hasáb MAGA áll helyben, tehát a `sticky` fölöslegessé vált – és zavarna is: a
   `top: 0` egy nem görgő szülőben semmit nem csinálna. */
.od-inv-modal.has-image .od-inv-doc-side {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
}

/* A kép a hasáb MARADÉK magasságát kapja, nem fix 420 px-et. */
.od-inv-modal.has-image .od-inv-img,
.od-inv-modal.has-image .od-inv-img-frame,
.od-inv-modal.has-image .od-inv-img-empty {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* A fejléc és a lábléc FEHÉR marad – a köztük lévő szürke sáv mondja meg, hol a „papír". */
.od-inv-modal-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--od-gray-100);
}

/* ── A „lap" ────────────────────────────────────────────────────────────────
   ⚠️ NEM a bizonylat hasonmása: a számadatok a NAV-tól jönnek, a hiteles irat a jobb
   oldali KÉP. Ez az olvasható kivonat – a lapszél csak azt mondja meg, hol kezdődik és
   hol ér véget.

   ⚠️ `container-type: inline-size`: a belső töréspontok a LAP szélességéhez igazodnak,
   nem az ablakéhoz. Képes nézetben a lap az ablak FELÉT kapja, tehát egy képernyő-alapú
   `@media` egy 1600 px-es ablaknál is „széles"-nek hinné a 460 px-es lapot, és az eladó
   meg a vevő adatai 200 px-re nyomódnának össze. Ugyanaz a döntés, mint a feladat-
   részletező `@container`-énél. */
.od-inv-sheet {
    container-type: inline-size;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    padding: 1.35rem 1.5rem 1.5rem;
}

.od-inv-modal-title-wrap { flex: 1 1 auto; min-width: 0; }

.od-inv-modal-sub {
    font-size: .85rem;
    color: var(--od-gray-500);
    margin-top: .15rem;
}

/* ⚠️ A törzs RÁCS, egyelőre EGY hasábbal. A jobb oldalra a SZÁMLAKÉP kerül, amint a
   bizonylat képe elérhető – akkor ez a szabály lesz `1fr minmax(0, 380px)`, és a markup
   szerkezete nem változik. Ezért van a tartalom külön `-main` burkolóban már most. */
.od-inv-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* Társított számlaképnél KÉT hasáb: balra az adat, jobbra a bizonylat. Enélkül a kép a
   szöveg alá kerülne, és a lényeg – hogy a kettő EGYSZERRE látszódjon – veszne el.

   ⚠️ EGYENLŐ két hasáb, nem fix 320 px a képnek. Az ablak arányát a „két A4 egymás
   mellett" cél adja (lásd `.od-inv-modal.has-image`), és ehhez a két hasábnak is
   egyformának kell lennie – különben a kép hasábja nem A4-et adna ki. Fix szélességgel a
   nyereség mind a bal oldalra menne: a bizonylat ugyanolyan apró maradna egy 1920 px-es
   kijelzőn is, mint egy laptopon. A `minmax` alsó határa tartja olvashatónak keskeny
   ablakban. */
.od-inv-doc.has-image { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); }

.od-inv-doc-main { min-width: 0; }

/* ── A társított számlakép hasábja ───────────────────────────────────────────
   ⚠️ `position: sticky`: a tételsorok hosszúak lehetnek, és a kép enélkül kigörögne a
   képből – pont akkor, amikor a könyvelő a tételeket veti össze vele. */
.od-inv-doc-side {
    min-width: 0;
    position: sticky;
    top: 0;
    align-self: start;
}

.od-inv-img-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--od-gray-600);
    margin-bottom: .4rem;
    min-width: 0;
}

.od-inv-img-head .od-action-btn { margin-left: auto; flex-shrink: 0; }

.od-inv-img,
.od-inv-img-frame {
    width: 100%;
    height: 420px;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

/* A képnél `contain`: egy álló A4-es számlát kitöltésre nyújtva olvashatatlan lenne. */
.od-inv-img { object-fit: contain; }

.od-inv-img-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 420px;
    padding: 1rem;
    text-align: center;
    font-size: .82rem;
    color: var(--od-gray-500);
    background: var(--od-gray-50);
    border: 1px dashed var(--od-gray-300);
    border-radius: var(--od-radius);
}

.od-inv-img-empty i { font-size: 1.6rem; opacity: .4; }

/* Keskeny ablakban a kép a szöveg ALÁ kerül – 300 px hasábbal a bal oldal
   olvashatatlanul összenyomódna. */
@media (max-width: 720px) {
    .od-inv-doc.has-image { grid-template-columns: minmax(0, 1fr); }
    .od-inv-doc-side { position: static; }

    /* ⚠️ EGY hasábban a két külön görgetés értelmetlen – sőt káros: a kép alá került
       adatokhoz nem lehetne lejutni, mert a bal hasáb a saját dobozában görgetne, a
       jobb meg alatta állna. Itt a TÖRZS görgessen egyben, ahogy kép nélkül is. */
    .od-inv-modal.has-image .od-modal-body {
        display: block;
        overflow-y: auto;
    }

    .od-inv-modal.has-image .od-inv-doc-main {
        overflow: visible;
        padding-right: 0;
    }

    /* Fix magasság vissza: rugalmas hasáb nélkül a kép magassága nullára esne. */
    .od-inv-modal.has-image .od-inv-img,
    .od-inv-modal.has-image .od-inv-img-frame,
    .od-inv-modal.has-image .od-inv-img-empty {
        flex: none;
        height: 60vh;
        min-height: 320px;
    }
}

/* ── Eladó / Vevő ───────────────────────────────────────────────────────────
   Két egyenlő hasáb; 640 px alatt egymás alá. A `minmax(0, 1fr)` KELL: sima `1fr`
   mellett egy hosszú cégnév vagy cím szétfeszítené a rácsot. */
.od-inv-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--od-gray-100);
}

.od-inv-party {
    border-left: 3px solid var(--od-gray-200);
    padding-left: .8rem;
    min-width: 0;
}

.od-inv-party-role {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

.od-inv-party-name {
    font-weight: 600;
    color: var(--od-gray-800);
    margin: .1rem 0 .35rem;
}

/* Cimke | érték rács: a `dl` szemantikus, a rács pedig egy vonalba hozza az értékeket.
   A `word-break` a hosszú címet töri, nem a hasábot feszíti szét. */
.od-inv-party-rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .15rem .6rem;
    margin: 0;
    font-size: .82rem;
}

.od-inv-party-rows dt { color: var(--od-gray-500); font-weight: 400; white-space: nowrap; }
.od-inv-party-rows dd { margin: 0; color: var(--od-gray-800); overflow-wrap: anywhere; }

/* ── Dátumok, fizetés, számlaszám ───────────────────────────────────────────
   ⚠️ `auto-fit` + `minmax(130px, 1fr)`, nem fix oszlopszám. Az ötödik mező (számlaszám)
   bevezetésével a fix négy hasáb vagy egy magányos ötödik sort adna, vagy – ötre emelve –
   a keskeny lapon 80 px-es oszlopokat, ahol a „Fizetési határidő" felirat kettétörik. Így
   a lap szélessége dönt: a keskeny A4-es hasábon három, a széles ablakban öt oszlop.

   ⚠️ A 120 px alsó határ MÉRT érték, nem érzés: a leghosszabb felirat („Fizetési határidő")
   94 px, a leghosszabb érték (a számlaszám, betűközös betűvel) 118 px. Alatta a címke vagy a
   szám tördelne, és a sorok magassága ugrálna. A 410 px-es A4-hasábon ez pont HÁROM
   oszlopot ad (3 × 120 + 2 × 16 rés = 392 ≤ 410); 130-cal már csak kettőt, ötödik mezővel
   három sorban. */
.od-inv-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--od-gray-100);
}

.od-inv-meta span {
    display: block;
    font-size: .75rem;
    color: var(--od-gray-500);
}

/* ⚠️ `overflow-wrap`: a számlaszám tetszőleges hosszú lehet, és betűközös betűvel egy
   szokatlanul hosszú sorszám kilógna a hasábból. Törjön inkább. */
.od-inv-meta strong {
    color: var(--od-gray-800);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ⚠️ A töréspont a LAP szélességére néz (`@container`), nem az ablakéra. Képes nézetben a
   lap az ablak felét kapja: egy `@media (max-width: 640px)` egy 1600 px-es ablaknál nem
   ütne be, és a két fél adatai egy 460 px-es lapon 200 px-re nyomódnának – ott a
   „Közösségi adószám" felirat mellé nem férne be az érték. */
@container (max-width: 520px) {
    .od-inv-parties { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
}

/* A `.od-inv-meta` SZÁNDÉKOSAN nincs itt: az `auto-fit` magától kevesebb oszlopra vált,
   tehát egy külön töréspont csak egy második, széttartható szabály lenne. */

/* ── Tételsorok: fejlécsáv és vonalazott sorok ───────────────────────────────
   Enélkül a tételek ugyanolyan súlyúak, mint a fölöttük lévő mezők, és a lap egyetlen
   szürke tömbként olvasódik – pont az veszne el, hogy EZ a bizonylat lényege. */
.od-inv-lines-table > thead > tr > th {
    background: var(--od-gray-50);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    border-bottom: 1px solid var(--od-gray-200);
    white-space: nowrap;
}

.od-inv-lines-table > tbody > tr > td {
    border-bottom: 1px solid var(--od-gray-100);
    color: var(--od-gray-800);
}

.od-inv-lines-table > tbody > tr:last-child > td { border-bottom: none; }

/* ── Összegzés ──────────────────────────────────────────────────────────────
   ⚠️ A tételsorok ALATT és JOBBRA zárva – ez a számla megszokott felépítése, és a szem is
   ott keresi a végösszeget. Fölé téve a lap „adatlapnak" nézne ki, nem bizonylatnak.

   ⚠️ `justify-content: end` a rácson, NEM `margin-left: auto` a dobozon: így a két oszlop
   a TARTALMÁHOZ igazodik, és a cimkék meg az értékek akkor is egy vonalban maradnak, ha az
   egyik összeg hosszabb (pl. devizás számlánál a pénznem miatt). */
.od-inv-sum {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: baseline;

    /* ⚠️ A rés NULLA, a térközt a CELLÁK paddingja adja. A bruttó sora kiemelt sávot kap,
       és egy `gap` a két cella közt LYUKAT vágna a sávba – a háttér két külön darabra
       esne szét. */
    gap: 0;
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--od-gray-200);
}

.od-inv-sum dt {
    text-align: right;
    font-size: .85rem;
    font-weight: 400;
    color: var(--od-gray-500);
    padding: .2rem 1.75rem .2rem .9rem;
}

.od-inv-sum dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--od-gray-700);
    white-space: nowrap;
    padding: .2rem .9rem;
}

/* ⚠️ A BRUTTÓ a hangsúlyos szám: azt fizetik ki. A kiemelt sáv KÉT cellán fut át, ezért a
   lekerekítés is megosztva – csak a külső sarkokon.

   ⚠️ `align-self: stretch` + flexes középre igazítás MINDKÉT cellán. A rács
   `align-items: baseline`-t használ (a normál soroknál az hozza egy vonalba a címkét és az
   értéket), a sávban viszont a két cella BETŰMÉRETE eltér – **mérve: 40 px vs. 48 px
   magas, 6 px eltolással**, vagyis a sáv két külön, elcsúszott dobozként látszott. */
.od-inv-sum dt.od-inv-sum-key,
.od-inv-sum dd.od-inv-sum-total {
    margin-top: .35rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: var(--od-primary-xlt);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.od-inv-sum dt.od-inv-sum-key {
    font-size: .95rem;
    font-weight: 600;
    color: var(--od-primary-dark);
    border-radius: var(--od-radius) 0 0 var(--od-radius);
}

.od-inv-sum dd.od-inv-sum-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--od-primary-dark);
    border-radius: 0 var(--od-radius) var(--od-radius) 0;
}

/* ── Kézi pénzügyi tétel (/finances/new/…) ──────────────────────────────────
   Balra a bizonylat, jobbra az űrlap – a felhasználó ONNAN olvassa ki az adatokat,
   miközben gépel. Ezért marad a bizonylat a képen görgetés közben is. */
.od-mi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;

    /* ⚠️ `align-items: start` KÖTELEZŐ. Alapértelmezett `stretch` mellett a bal hasáb a
       rács teljes magasságára nyúlna, és a `position: sticky`-nek nem maradna hova
       elmozdulnia – a ragadás NÉMÁN nem működne, hibaüzenet nélkül. Ugyanaz a csapda,
       mint a feladat-részletező kezelősávjánál. */
    align-items: start;
}

/* A JOBB HASÁB burkolója.

   ⚠️ **KÖTELEZŐ, és nem stílus kérdése.** A rács a gyerekeit EGYESÉVEL helyezi el a két
   oszlopba: burkoló nélkül a második kártya (a „Kitöltés a bizonylatról") foglalná el a
   jobb cellát, az ŰRLAP pedig a MÁSODIK SORBA, a bizonylat ALÁ csúszna. **Ez valós hiba
   volt** – tiszta builddel, érvényes markuppal, hibátlan CSS-sel: a rács egyszerűen mást
   csinál, mint amit az ember odaképzel.

   ⚠️ Minden JÖVŐBELI kártya ide, a burkolón BELÜLRE kerül. A rácsnak pontosan KÉT
   gyereke lehet. */
.od-mi-side {
    display: flex;
    flex-direction: column;

    /* A kártyák saját `mb-3`-mal jönnek, tehát itt nem kell rés – de a `min-width: 0`
       IGEN: enélkül egy széles táblázat (a kiolvasott mezőké) kifeszítené a hasábot. */
    min-width: 0;
}

/* ⚠️ A `top` a FIX NAVBAR alá igazít. Puszta `1rem`-mel a bizonylat görgetéskor a navbar
   ALÁ csúszna – és ez is némán történne: „ragad", csak nem ott, ahol kellene. */
.od-mi-doc {
    position: sticky;
    top: calc(var(--od-navbar-h) + 1rem);
    min-width: 0;
}

/* ⚠️ `dvh` a `vh` UTÁN: telefonon a `vh` a böngésző sávjait nem veszi le. */
.od-mi-frame {
    width: 100%;
    height: calc(100vh - var(--od-navbar-h) - 9rem);
    height: calc(100dvh - var(--od-navbar-h) - 9rem);
    min-height: 420px;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

/* A devizás blokk elkülönül: forintnál meg sem jelenik, tehát a kerete mondja meg, hogy
   ez egy feltételes, összetartozó adatcsoport. */
.od-mi-fx {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    padding: .85rem 1rem 1rem;
}

/* Keskeny ablakban egymás alá: 1fr + 1fr mellett a bizonylat és az űrlap is
   olvashatatlanul összenyomódna. A ragadás ott értelmét veszti. */
@media (max-width: 900px) {
    .od-mi-grid { grid-template-columns: minmax(0, 1fr); }
    .od-mi-doc { position: static; }
    .od-mi-frame { height: 60vh; }
}

/* ── Számlakép-társítás (/documents/pairing) ────────────────────────────────
   Saját névtér (`od-pair-`), mert az elrendezés itt egészen más, mint bárhol máshol:
   egy nagy előnézet és egy munkasáv. Az OptiDesk 2 bevált arányait követi. */
.od-pair-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    height: calc(100dvh - var(--od-navbar-h) - 13rem);
    min-height: 460px;
}

/* ⚠️ A bal panel a fájl BEFOGLALÓJA: `position: relative` kell, hogy a középre igazított
   üres állapot ne a laphoz igazodjon (ugyanaz a csapda, mint a `visually-hidden`-nél). */
.od-pair-preview {
    position: relative;
    min-width: 0;
    background: var(--od-gray-100);
    border-right: 1px solid var(--od-gray-200);
}

.od-pair-frame,
.od-pair-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* `contain`: egy álló A4-es számlát kitöltésre nyújtva olvashatatlan lenne. */
.od-pair-img { object-fit: contain; padding: 1rem; }

.od-pair-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2rem;
    text-align: center;
    color: var(--od-gray-500);
    font-size: .88rem;
}

.od-pair-empty i { font-size: 2.4rem; opacity: .3; }

/* ⚠️ A jobb sáv OSZLOP-flex, `min-height: 0`-val: enélkül a számlalista nem tudna a
   tartalma alá zsugorodni, és MAGÁBAN görgetni – az egész lap nyúlna meg helyette. */
.od-pair-aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.od-pair-section {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--od-gray-200);
    flex-shrink: 0;
}

.od-pair-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    margin-bottom: .5rem;
}

/* ⚠️ A szűrősor KÉT elemből áll (irány-szegmens + időszak gomb), és az időszak gomb
   NYÚLIK (`flex: 1`). A korábbi három `width:auto` vezérlő egy `flex-wrap`-es sorban
   kiszámíthatatlanul tördelt a 380 képpontos sávban – ez volt a látható „szétcsúszás".
   Itt a tördelés nem esetleges: a szegmens fix, a gomb kitölti a maradékot. */
.od-pair-filters {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
}

.od-pair-filters .od-drp { flex: 1 1 auto; min-width: 0; }
.od-pair-filters .od-drp-trigger { width: 100%; }

.od-pair-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: none;
    border: 0;
    border-radius: var(--od-radius);
    color: var(--od-gray-500);
    font-size: .78rem;
}

.od-pair-filter-clear:hover { background: var(--od-gray-200); color: var(--od-gray-800); }

/* Ez az EGYETLEN rész, ami nyúlik és görget – a többi sáv fix magasságú. */
.od-pair-invoices {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.od-pair-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    text-align: left;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    transition: border-color var(--od-transition), background var(--od-transition);
}

.od-pair-card:hover:not(:disabled) {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

/* ⚠️ A letiltott kártya HALVÁNY, de látszik: elrejtve a felhasználó azt hinné, nincs is
   számla – pedig csak előbb képet kell választania. */
.od-pair-card:disabled { opacity: .55; cursor: not-allowed; }

.od-pair-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.od-pair-card-num { font-size: .85rem; font-weight: 600; color: var(--od-gray-800); }
.od-pair-card-sub { font-size: .74rem; color: var(--od-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-pair-card-amount { flex-shrink: 0; font-size: .85rem; font-weight: 600; color: var(--od-gray-700); }

/* ⚠️ `align-self: flex-start` KÖTELEZŐ: a `.od-pair-card-main` flex OSZLOP, tehát az
   alapértelmezett `stretch` mellett a chip a teljes hasáb szélességére nyúlna – egy pirulának
   szánt jelzésből sávot csinálva. A `max-width: 100%` a hosszú eredeti számlaszámhoz kell,
   különben a chip kitolná a kártyát. */
.od-pair-card-op {
    align-self: flex-start;
    max-width: 100%;
    margin: .15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-pair-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

.od-pair-badge {
    margin-left: auto;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .72rem;
    font-weight: 600;
}

/* ⚠️ Mindkét lista magassága KORLÁTOZOTT és magában görget: a lap egésze nem görögheti
   el a képet a szem elől, mert épp azt kell nézni társítás közben. */
.od-pair-paired-list,
.od-pair-doc-list {
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .5rem;
}

.od-pair-paired-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    min-width: 0;
}

.od-pair-doc {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4rem .5rem;
    text-align: left;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
}

.od-pair-doc:hover { border-color: var(--od-gray-400); }

/* A kijelölt kép: EZ látszik a bal oldalon, tehát erősen kell jelölni. */
.od-pair-doc.is-on {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

.od-pair-doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.od-pair-doc-name { font-size: .82rem; font-weight: 600; color: var(--od-gray-800); }

.od-pair-hint {
    padding: .6rem 1rem;
    border-top: 1px solid var(--od-gray-200);
    font-size: .78rem;
    color: var(--od-gray-600);
    flex-shrink: 0;
}

/* Keskeny ablakban a két panel egymás alá kerül: 380 px sávval a képnek semmi nem
   maradna. A magasság ilyenkor a tartalomtól függ, nem a képernyőtől. */
@media (max-width: 900px) {
    .od-pair-body { grid-template-columns: minmax(0, 1fr); height: auto; }
    .od-pair-preview { height: 320px; border-right: 0; border-bottom: 1px solid var(--od-gray-200); }
    .od-pair-invoices { max-height: 320px; }
}

/* =============================================================================
   AZ IRODA KIMENŐ SZÁMLÁI (od-oinv-)

   ⚠️ SAJÁT NÉVTÉR, és ez nem stílus kérdése: az `od-inv-` a NAV-tól lehívott
   számlák moduljáé (Bevételek és kiadások). Ugyanazt a nevet átvéve a két lap
   némán egymás elrendezését írná felül – pontosan a 18. megtanult hiba.
   ============================================================================= */

/* ── Összesítő csempék ────────────────────────────────────────────────── */
.od-oinv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.od-oinv-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 1rem;
    text-align: left;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-sm);
    transition: var(--od-transition);
}

button.od-oinv-tile { cursor: pointer; }
button.od-oinv-tile:hover { border-color: var(--od-primary-light); }

.od-oinv-tile.is-on {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

.od-oinv-tile-static { cursor: default; }

.od-oinv-tile-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

.od-oinv-tile-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--od-gray-800);
    /* Enélkül az egymás melletti csempék számai nem esnének egy vonalba. */
    font-variant-numeric: tabular-nums;
}

.od-oinv-tile-warn .od-oinv-tile-value { color: var(--od-danger); }

/* ── Táblázat ─────────────────────────────────────────────────────────── */

/* ⚠️ `position: relative` KÖTELEZŐ. A `visually-hidden` osztály `position: absolute`,
   és pozicionált ős nélkül a LAP koordinátarendszeréhez igazodik – vagyis a
   vízszintesen görgethető doboz nem tartja bent, hanem kiszélesíti a dokumentumot.
   Ez a NAV-számlák listáján valós hiba volt: 375 px-en a lap 686 px-re nőtt. */
.od-oinv-scroll { position: relative; }

.od-oinv-flag { width: 1%; padding-right: 0 !important; text-align: center; }

.od-oinv-num { font-variant-numeric: tabular-nums; }

.od-oinv-clickable { cursor: pointer; }

/* Az érvénytelenített sor halványabb – de az ÉRDEMI jelzés a chip, nem a szín:
   színvakság és nyomtatás mellett is olvashatónak kell maradnia. */
.od-oinv-void { opacity: .6; }

/* A havi kör előnézetében a beváltott kedvezmény.

   ⚠️ **NEM piros**, pedig levonás: ez nem hiba és nem tartozás, hanem az iroda SAJÁT,
   engedélyezett kedvezménye. Pirosan a könyvelő minden hónapban riasztásnak olvasná, és pár
   kör alatt elszürkítené a mellette álló valódi jelzéseket – ugyanaz az érv, amiért az
   SZJA-mentes keret sem piros.

   ⚠️ **`#92400E`, NEM `--od-warning` – és ezt a MÉRÉS kényszerítette ki, MÁSODSZOR.** Ugyanaz
   a borostyán, ami a bolt árán is elbukott: fehér táblázat-háttéren **3,19:1**, ami egy 16
   px-es, 600-as súlyú számnál a WCAG AA alatt van (a „nagy szöveg" 3:1-es küszöbe csak
   ≥18,66 px félkövértől él). A `#92400E` ugyanezen a háttéren **7,09:1**.

   ⚠️ És így a bolt ÁRA és a számlán megjelenő KEDVEZMÉNY azonos színű: ugyanaz a token
   ugyanabban a borostyánban jelenik meg mindkét oldalon. */
.od-mb-discount {
    color: #92400E;
    font-weight: 600;
    white-space: nowrap;
}

.od-oinv-detail-row > td { background: var(--od-gray-50); }
.od-oinv-detail { padding: .5rem .25rem; }

.od-oinv-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.od-oinv-detail-meta > div { display: flex; flex-direction: column; }

.od-oinv-detail-meta span {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

/* ── Chipek és státusz ────────────────────────────────────────────────── */
.od-oinv-chip {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--od-gray-600);
    background: var(--od-gray-100);
    border-radius: 999px;
}

.od-oinv-chip-storno { color: #9A3412; background: #FFEDD5; }

.od-oinv-status {
    display: inline-block;
    padding: .1rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
}

.od-oinv-status-draft { color: var(--od-gray-600); background: var(--od-gray-100); }
.od-oinv-status-issued { color: #1E40AF; background: #DBEAFE; }
.od-oinv-status-paid { color: #166534; background: #DCFCE7; }
.od-oinv-status-storno { color: #9A3412; background: #FFEDD5; }

/* ── Tételsor-szerkesztő ──────────────────────────────────────────────── */
.od-oinv-lines th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

.od-oinv-lines td { vertical-align: middle; }

/* ⚠️ Az összegzés a beviteli sorok SZERKEZETÉT másolja (jobbra zárt szám-oszlop),
   nem képpontokkal igazít – így egy oszlop-szélesség változás nem csúsztatja el. */
.od-oinv-total {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: end;
    gap: .15rem 1.5rem;
}

.od-oinv-total > div {
    display: contents;
}

.od-oinv-total > div > span:first-child {
    color: var(--od-gray-500);
    font-size: .85rem;
}

.od-oinv-total > div > span:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.od-oinv-total-sum > span {
    padding-top: .35rem;
    border-top: 1px solid var(--od-gray-200);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--od-gray-800);
}

.od-oinv-period {
    min-width: 10rem;
    text-align: center;
}

/* ⚠️ A két dátummező együtt 425 px lenne – 375 px-en az kitolná a LAPOT. Saját
   osztály engedi tördelni ÉS zsugorodni (ez a NAV-számla listáján mért hiba). */
.od-oinv-dates { flex-wrap: wrap; }
.od-oinv-dates input { min-width: 0; width: 9.5rem; }

@media (max-width: 576px) {
    .od-oinv-dates input { width: 100%; }
}

/* =============================================================================
   AI-PÁROSÍTÁS (od-aip-)

   ⚠️ Saját névtér: az `od-pair-` a kézi társítóé, az `od-inv-` a NAV-számla
   listáé. Egy közös prefix némán írná felül a másik elrendezését (18. hiba).
   ============================================================================= */

.od-aip-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 1rem;
    align-items: start;   /* ⚠️ `stretch` mellett a jobb sávnak nincs hova ragadnia */
}

@media (max-width: 1100px) {
    .od-aip-grid { grid-template-columns: minmax(0, 1fr); }
}

.od-aip-side {
    position: sticky;
    /* ⚠️ A FIX navbar alá igazít: puszta 1rem-mel a sáv görgetéskor alá csúszna. */
    top: calc(var(--od-navbar-h) + 1rem);
    max-height: calc(100vh - var(--od-navbar-h) - 2rem);
    max-height: calc(100dvh - var(--od-navbar-h) - 2rem);
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .od-aip-side { position: static; max-height: none; }
}

/* ⚠️ Az előnézet a MEGLÉVŐ `/documents/preview/` végponton megy – az ellenőrzi a
   cég-hozzáférést és saját, szűk CSP-t küld. Az iframe-en NEM lehet `sandbox`:
   attól a PDF NÉMÁN nem jelenne meg. */
.od-aip-preview {
    width: 100%;
    height: clamp(420px, calc(100dvh - var(--od-navbar-h) - 16rem), 900px);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-100);
}

.od-aip-file {
    font-size: .9rem;
    color: var(--od-gray-800);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-aip-stat { font-size: .9rem; color: var(--od-gray-800); }

/* Az ÉPPEN feldolgozás alatt álló bizonylat – a „nem akadt be" jelzés. */
.od-aip-now {
    font-size: .85rem;
    color: var(--od-gray-600);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-aip-elapsed {
    margin-left: .4rem;
    font-variant-numeric: tabular-nums;   /* enélkül a szám szélessége ugrálna */
    color: var(--od-gray-500);
}

/* ============================================================================
   FELDOLGOZÁS-JELZŐ („töltőképernyő") – od-aip-run-*

   ⚠️ Az `od-aip-` névtér BŐVÍTÉSE, nem új névtér: ugyanannak a modulnak a része.
   A 18. tanulság a MÁS célra újrahasznált osztályról szól, nem a saját modul
   bővítéséről.
   ============================================================================ */
.od-aip-run { overflow: hidden; }

/* ⚠️ A futó és a kész állapot MÁS színt kap: a kártya egyetlen pillantásból
   megmondja, dolgozik-e még. */
.od-aip-run.is-running { border-top: 3px solid var(--od-primary) !important; }
.od-aip-run.is-done    { border-top: 3px solid var(--od-success) !important; }

.od-aip-run-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .85rem;
}

.od-aip-run-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--od-radius);
    font-size: 1.25rem;
}

.is-running .od-aip-run-icon {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
}

.is-done .od-aip-run-icon {
    background: #DCFCE7;
    color: var(--od-success);
}

/* ⚠️ A lüktetés CSAK futás közben – kész állapotban egy mozgó ikon azt sugallná,
   hogy még dolgozik. */
.is-running .od-aip-run-icon i { animation: od-aip-pulse 1.6s ease-in-out infinite; }

@keyframes od-aip-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .55; transform: scale(.9); }
}

.od-aip-run-headtext { flex: 1 1 auto; min-width: 0; }

.od-aip-run-title {
    font-weight: 700;
    color: var(--od-gray-800);
}

/* A váltakozó, fázis szerinti mondat. */
.od-aip-run-line {
    font-size: .9rem;
    color: var(--od-gray-600);
    min-height: 1.35em;   /* ⚠️ enélkül a kártya magassága a szöveg váltásakor ugrálna */
}

.od-aip-run-count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;   /* enélkül a szám szélessége ugrálna */
    white-space: nowrap;
}

.od-aip-run-count-num { font-size: 1.6rem; font-weight: 800; color: var(--od-gray-800); }
.od-aip-run-count-sep { margin: 0 .15rem; color: var(--od-gray-300); }
.od-aip-run-count-tot { font-size: 1.1rem; color: var(--od-gray-500); }

.od-aip-run-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--od-gray-100);
    overflow: hidden;
}

.od-aip-run-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--od-primary);
    transition: width .4s ease;
}

.is-done .od-aip-run-fill { background: var(--od-success); }

/* ── A lépéssáv ───────────────────────────────────────────────────────────── */
.od-aip-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    margin-top: .9rem;
}

.od-aip-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--od-gray-400);
}

.od-aip-step-dot {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--od-gray-100);
    font-size: .8rem;
}

.od-aip-step.is-done { color: var(--od-gray-600); }
.od-aip-step.is-done .od-aip-step-dot { background: #DCFCE7; color: var(--od-success); }

.od-aip-step.is-active { color: var(--od-primary); font-weight: 600; }
.od-aip-step.is-active .od-aip-step-dot {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    box-shadow: 0 0 0 3px var(--od-primary-xlt);
}

.od-aip-run-file {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .85rem;
    font-size: .85rem;
    color: var(--od-gray-600);
    min-width: 0;
}

.od-aip-run-filename {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-aip-run-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-top: .9rem;
}

/* ── Ami már elkészült ────────────────────────────────────────────────────── */
.od-aip-done-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--od-gray-200);
}

.od-aip-done {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--od-gray-600);
    min-width: 0;
}

.od-aip-done-ok     { color: var(--od-success); }
.od-aip-done-manual { color: var(--od-primary); }

.od-aip-done-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A szöveg FORRÁSA (PDF szövegréteg / OCR) – a könyvelőnek tudnia kell, pontos
   vagy becsült olvasattal áll-e szemben. */
.od-aip-done-src {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--od-gray-500);
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: 999px;
    padding: .05rem .45rem;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠️ Aki kikapcsolta a mozgást, annak NE mozogjon. A jelző információt hordoz
   (szám, sáv, felirat) – az animáció csak kíséret, tehát elhagyható. */
@media (prefers-reduced-motion: reduce) {
    .is-running .od-aip-run-icon i { animation: none; }
    .od-aip-run-fill { transition: none; }
}

@media (max-width: 575.98px) {
    .od-aip-run-count-num { font-size: 1.3rem; }
    .od-aip-steps { gap: .35rem .75rem; }
}

.od-aip-source {
    font-size: .78rem;
    color: var(--od-gray-500);
    margin-bottom: .75rem;
}

.od-aip-list { display: flex; flex-direction: column; gap: .6rem; }

.od-aip-cand {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .6rem .7rem;
}

/* ⚠️ A számlaszám-találat KIEMELVE: az azonosít, a többi jel csak megerősít.
   Egyforma kártyákkal a szem nem tudná, melyikre nézzen először. */
.od-aip-cand.is-hit {
    border-color: var(--od-success);
    background: var(--od-success-xlt);
}

.od-aip-cand-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.od-aip-cand-no {
    font-weight: 600;
    font-size: .9rem;
    color: var(--od-gray-800);
    word-break: break-all;
}

/* ⚠️ A pontszám HALVÁNY és kicsi – rangsorolásra való, nem ez dönt. Hangsúlyosan
   kiírva a felhasználó küszöbként olvasná, ami nem az. */
.od-aip-points {
    flex: none;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-500);
    background: var(--od-gray-100);
    border-radius: 999px;
    padding: .05rem .45rem;
}

.od-aip-cand-meta {
    font-size: .78rem;
    color: var(--od-gray-600);
    margin-top: .15rem;
}

.od-aip-reasons {
    list-style: none;
    margin: .4rem 0 .6rem;
    padding: 0;
    font-size: .76rem;
    color: var(--od-gray-600);
}

.od-aip-reasons li::before {
    content: "✓";
    color: var(--od-success);
    margin-right: .3rem;
}

.od-aip-actions {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--od-gray-100);
}

/* =============================================================================
   SZÁMLAFORMÁTUM-PROFIL ZÓNA-SZERKESZTŐ (od-pz-)

   ⚠️ Saját névtér: az `od-pdf-` a dokumentum-szerkesztőé, az `od-crop-` a
   kivágásé. Egy közös prefix némán írná felül a másik elrendezését (18. hiba).
   ============================================================================= */

.od-pz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 1rem;
    align-items: start;   /* ⚠️ `stretch` mellett a jobb sávnak nincs hova ragadnia */
}

@media (max-width: 1100px) {
    .od-pz-grid { grid-template-columns: minmax(0, 1fr); }
}

.od-pz-side {
    position: sticky;
    /* ⚠️ A FIX navbar alá igazít: puszta 1rem-mel a sáv görgetéskor alá csúszna. */
    top: calc(var(--od-navbar-h) + 1rem);
    max-height: calc(100vh - var(--od-navbar-h) - 2rem);
    max-height: calc(100dvh - var(--od-navbar-h) - 2rem);
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .od-pz-side { position: static; max-height: none; }
}

/* ── Mezőszínek ─────────────────────────────────────────────────────────
   ⚠️ Hat téglalap ül egy számlaképen; egyforma kékkel nem lehet megmondani,
   melyik melyik – a felirat pedig kis nagyításban olvashatatlan. A kártya és a
   rajzolt zóna UGYANAZT a színt kapja (`InvoiceProfileFieldHelper.GetColorKey`),
   tehát a szem összeköti a kettőt.

   ⚠️ MINDEN árnyalat ITT van definiálva. A projekt legtöbbször ismételt hibája
   (18.) a nem létező `var(--od-…)`: az némán az öröklött vagy a kezdeti értékre
   esik vissza, tehát a keret a SZÖVEG színét venné fel, és a build tiszta marad.

   ⚠️ **RGB-HÁRMASKÉNT tároljuk, nem hexaként**, és MINDEN árnyalat ebből a hat
   értékből származik (keret, kitöltés, felirat háttere, kártya háttere). Így nincs
   tizennyolc, kézzel karbantartott változó, ami széttarthatna – és nem kell
   `color-mix()` sem, ami régebbi böngészőben NÉMÁN eldobná az egész deklarációt
   (ugyanaz a hibaosztály, mint a definiálatlan változó). */
:root {
    --od-pz-c1-rgb: 37 99 235;    /* kék      – számlaszám       */
    --od-pz-c2-rgb: 124 58 237;   /* ibolya   – partner neve     */
    --od-pz-c3-rgb: 219 39 119;   /* rózsaszín– partner adószáma */
    --od-pz-c4-rgb: 5 150 105;    /* zöld     – kiállítás napja  */
    --od-pz-c5-rgb: 217 119 6;    /* borostyán– teljesítés       */
    --od-pz-c6-rgb: 8 145 178;    /* türkiz   – fizetési határidő*/
    --od-pz-c7-rgb: 79 70 229;    /* indigó   – nettó            */
    --od-pz-c8-rgb: 190 24 93;    /* meggy    – ÁFA              */
    --od-pz-c9-rgb: 21 128 61;    /* sötétzöld– bruttó           */
    --od-pz-c10-rgb: 100 116 139; /* pala     – pénznem          */
    --od-pz-c11-rgb: 15 118 110;  /* zöldeskék– közösségi adószám*/
}

/* ⚠️ A hozzárendelések KÜLÖN SORBAN állnak, nem `{ --x: y; }` egysorosként. Az
   ellenőrző szkript a definíciót sor elején keresi (`^\s*--od-…:`), egysorosan tehát
   DEFINIÁLATLANNAK jelentené a `--od-pz-hue`-t – és egy hamis riasztás ugyanolyan
   káros, mint egy elmaradt: pár kör után senki nem nézi meg a kimenetét. */
.od-pz-c1 {
    --od-pz-hue: var(--od-pz-c1-rgb);
}

.od-pz-c2 {
    --od-pz-hue: var(--od-pz-c2-rgb);
}

.od-pz-c3 {
    --od-pz-hue: var(--od-pz-c3-rgb);
}

.od-pz-c4 {
    --od-pz-hue: var(--od-pz-c4-rgb);
}

.od-pz-c5 {
    --od-pz-hue: var(--od-pz-c5-rgb);
}

.od-pz-c6 {
    --od-pz-hue: var(--od-pz-c6-rgb);
}

.od-pz-c7 {
    --od-pz-hue: var(--od-pz-c7-rgb);
}

.od-pz-c8 {
    --od-pz-hue: var(--od-pz-c8-rgb);
}

.od-pz-c9 {
    --od-pz-hue: var(--od-pz-c9-rgb);
}

.od-pz-c10 {
    --od-pz-hue: var(--od-pz-c10-rgb);
}

.od-pz-c11 {
    --od-pz-hue: var(--od-pz-c11-rgb);
}

/* ── A rajzoló vászon ───────────────────────────────────────────────────
   ⚠️ HÁROM SZINT: `canvas` a görgethető keret, `stage` a nagyított tartalom,
   `layer` a stage-re feszítve. A réteget korábban a JS pozicionálta képpontra –
   egy görgethető kereten belül az a görgetés mértékével csúszott volna el. */
.od-pz-canvas {
    position: relative;
    display: grid;
    /* ⚠️ A `safe` KELL: sima `center` mellett a keretnél NAGYOBB tartalom bal
       felső sarkához nem lehet odagörgetni – épp oda, ahol a számla fejléce van.
       A `safe` ilyenkor `start`-ra vált. A sima `center` előtte marad tartaléknak
       azoknak a böngészőknek, amelyek a `safe` kulcsszót nem ismerik. */
    place-content: center;
    place-content: safe center;
    overflow: auto;
    /* A keret magassága: az ablakhoz igazodik, de van alsó és felső korlátja –
       enélkül alacsony ablakban használhatatlanul lapos, nagy kijelzőn pedig
       fölöslegesen magas lenne. */
    height: clamp(420px, calc(100dvh - var(--od-navbar-h) - 17rem), 900px);
    background: var(--od-gray-100);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: .5rem;
    /* A húzás alatt ne a böngésző jelöljön ki szöveget/képet. */
    user-select: none;
    cursor: crosshair;
    overscroll-behavior: contain;
    /* ⚠️ A görgetősáv helyét ELŐRE lefoglaljuk. Enélkül az illesztés oszcillálhat: a
       szélesebb tartalomtól megjelenik a sáv, attól szűkül a belső szélesség, attól
       keskenyebb lesz a tartalom, attól eltűnik a sáv… */
    scrollbar-gutter: stable;
}

/* Ha a tartalom kilóg, a `place-content` már `start`-ként viselkedik – ezt a
   `is-overflow` osztály teszi kifejezetté azoknak a böngészőknek is, ahol a
   `safe` kulcsszó nem érvényesült. */
.od-pz-canvas.is-overflow { place-content: start; }

.od-pz-canvas.is-panning { cursor: grabbing; }

.od-pz-stage {
    position: relative;
    /* A szélességet a JS állítja (nagyítás). A magasság a képarányból adódik. */
    line-height: 0;
    /* A rajzolás alatt a böngésző ne kezdjen görgetni érintésre. */
    touch-action: none;
}

.od-pz-canvas img {
    width: 100%;
    height: auto;
    /* Enélkül a kép „lóg" a saját sorában, és a zónaréteg pár képponttal elcsúszna. */
    display: block;
    box-shadow: var(--od-shadow-sm);
    background: var(--od-white);
}

/* ⚠️ A réteg a STAGE-re FESZÜL – nincs JS-es pozicionálás, tehát a nagyítás és a
   görgetés nem tudja elcsúsztatni. */
.od-pz-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.od-pz-zone {
    position: absolute;
    border: 2px solid rgb(var(--od-pz-hue, 21 96 189));
    background: rgb(var(--od-pz-hue, 21 96 189) / .14);
    border-radius: 2px;
}

/* Az AKTÍV mező zónája vastagabb és telítettebb – de a SAJÁT színében marad, nem vált
   sárgára: a szín a mező AZONOSSÁGA, azt egy kijelölés nem írhatja felül. */
.od-pz-zone.is-active {
    border-width: 3px;
    background: rgb(var(--od-pz-hue, 21 96 189) / .26);
    box-shadow: 0 0 0 1px var(--od-white);
}

.od-pz-zone.is-draft { border-style: dashed; }

/* A JAVASOLT zóna: szaggatott keret, halványabb kitöltés.

   ⚠️ A mező SAJÁT színében marad – a szín a mező azonossága, azt egy állapot nem írhatja
   felül (ugyanaz az érv, amiért az aktív zóna sem vált sárgára). A KÜLÖNBSÉG a VONAL:
   ez még nincs elfogadva, és a Mentés nem viszi el.
   ⚠️ A kitöltés halványabb az elfogadottnál, hogy ha a kettő EGYMÁSON van (a mezőnek már
   volt zónája), akkor is látszódjon, melyik melyik. */
.od-pz-zone.is-suggested {
    border-style: dashed;
    border-width: 2px;
    background: rgb(var(--od-pz-hue, 21 96 189) / .06);
}

/* ── Zóna-javaslat sávja és a mezőnkénti sorok ──────────────────────────── */

.od-pz-suggest {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.od-pz-suggest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .35rem .6rem;
    font-size: .78rem;
    border-top: 1px solid var(--od-gray-200);
    background: var(--od-primary-xlt);
}

.od-pz-suggest-row.is-miss {
    color: var(--od-gray-500);
    background: var(--od-gray-50);
}

.od-pz-suggest-hit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

/* ⚠️ A megtalált ÉRTÉK a lényeg: ebből látja a felhasználó, hogy tényleg azt találtuk-e
   meg, amit keresett. Hosszú értéknél inkább levágjuk, mint hogy szétfeszítse a kártyát. */
.od-pz-suggest-val {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

/* ⚠️ A paletta EGYETLEN borostyán árnyalata a `--od-warning` – `-dark`/`-light` párja
   NINCS, és nem is találunk ki: a definiálatlan `var()` NÉMÁN a szövegszínre esne vissza
   (18. megtanult hiba). A halvány borostyán chip a projekt máshol is használt literál
   párosa (`#FEF3C7` / `#92400E`), nem `color-mix()`: azt régebbi böngésző némán eldobja,
   és a chip háttér nélkül maradna. */
.od-pz-suggest-ocr {
    padding: 0 .3rem;
    font-size: .66rem;
    font-weight: 700;
    color: #92400E;
    background: #FEF3C7;
    border-radius: 3px;
}

.od-pz-zone-label {
    position: absolute;
    top: -1.15rem;
    left: -2px;
    padding: 0 .3rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--od-white);
    background: rgb(var(--od-pz-hue, 21 96 189));
    border-radius: 3px;
    white-space: nowrap;
}

/* ── Nagyítás-sáv ───────────────────────────────────────────────────────── */
.od-pz-zoomval {
    min-width: 4.25rem;
    font-variant-numeric: tabular-nums;
    /* ⚠️ A Bootstrap `.disabled` halványítja – itt viszont ez ÉRTÉK-kijelző, nem
       letiltott gomb: olvashatónak kell maradnia. */
    opacity: 1;
    color: var(--od-gray-800);
}

/* ── Mezőlista ──────────────────────────────────────────────────────── */
.od-pz-field {
    border: 1px solid var(--od-gray-200);
    /* A színsáv a bal szélen: a kártyát a zónához köti, de nem hangosabb nála. */
    border-left: 4px solid rgb(var(--od-pz-hue, 21 96 189));
    border-radius: var(--od-radius);
    margin-bottom: .5rem;
    transition: var(--od-transition);
}

.od-pz-field.is-active {
    border-left-width: 5px;
    /* ⚠️ Halvány, 7%-os kitöltés – ugyanabból a hármasból, mint a zóna. Külön
       „soft" színváltozókkal a kettő idővel széttarthatna. */
    background: rgb(var(--od-pz-hue, 21 96 189) / .07);
    box-shadow: var(--od-shadow-sm);
}

.od-pz-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .55rem .75rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.od-pz-field-name { font-weight: 600; color: var(--od-gray-800); font-size: .9rem; }

.od-pz-field-zone {
    font-size: .75rem;
    color: var(--od-success);
    white-space: nowrap;
}

.od-pz-field-zone i { margin-right: .25rem; }

.od-pz-field-body {
    padding: 0 .75rem .75rem;
    border-top: 1px solid var(--od-gray-100);
    padding-top: .6rem;
}

/* =============================================================================
   DÁTUM-INTERVALLUM VÁLASZTÓ (`od-drp-`)
   ============================================================================= */

/* A gomb HORGONY: a panel hozzá képest pozicionálódik. */
.od-drp { position: relative; display: inline-block; min-width: 0; }

/* ⚠️ A gomb FELIRATA maga az állapot („Előző hónapban"), nem állandó szöveg – ezért
   `text-overflow: ellipsis` és `title`: a 380 képpontos sávban a nyers tartomány
   (`2026. 07. 01. – 2026. 07. 31.`) nem fér ki, de csonkolva is olvasható marad. */
.od-drp-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    min-width: 0;
    padding: .375rem .6rem;
    background: var(--od-white);
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    font-size: .85rem;
    color: var(--od-gray-700);
    transition: border-color var(--od-transition), background var(--od-transition);
}

.od-drp-trigger:hover { border-color: var(--od-gray-400); }

/* Beállított időszaknál a gomb JELÖLVE van: enélkül a felhasználó nem látná, hogy a
   lista szűkítve van – csak azt, hogy kevés sor jött. */
.od-drp-trigger.is-on {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
    font-weight: 600;
}

.od-drp-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-drp-caret { font-size: .7rem; opacity: .6; flex-shrink: 0; }

/* A háttér elnyeli a kívülre kattintást. Átlátszó: ez nem modális ablak, a mögötte
   lévő tartalomnak látszania kell. */
.od-drp-backdrop { position: fixed; inset: 0; z-index: 1040; }

/* ⚠️ `right: 0`, nem `left: 0`: a panel (640 px) SZÉLESEBB, mint a társító sáv
   (380 px), tehát balra kell nőnie – balra igazítva a képernyőn kívülre lógna. */
.od-drp-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1045;
    display: flex;
    width: 640px;
    max-width: calc(100vw - 2rem);
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-lg);

    /* Biztonsági háló: ha a gomb mégis a képernyő alján állna, a panel MAGÁBAN
       görögjön – ne a képernyőn kívülre lógjon, ahonnan nincs visszaút. */
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.od-drp-panel:focus { outline: none; }

.od-drp-presets {
    flex: 0 0 156px;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    gap: .1rem;
    border-right: 1px solid var(--od-gray-100);
    background: var(--od-gray-50);
    border-radius: var(--od-radius-lg) 0 0 var(--od-radius-lg);
}

.od-drp-preset {
    padding: .35rem .5rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--od-radius);
    font-size: .8rem;
    color: var(--od-gray-700);
    white-space: nowrap;
}

.od-drp-preset:hover { background: var(--od-gray-200); }

.od-drp-preset.is-on {
    background: var(--od-primary);
    color: var(--od-white);
    font-weight: 600;
}

.od-drp-cal { flex: 1 1 auto; min-width: 0; padding: .75rem; }

.od-drp-inputs {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    margin-bottom: .75rem;
}

.od-drp-input { flex: 1 1 0; min-width: 0; margin: 0; }

.od-drp-input-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    margin-bottom: .15rem;
}

.od-drp-input input { font-size: .82rem; }
.od-drp-dash { color: var(--od-gray-400); padding-bottom: .4rem; }

.od-drp-months { display: flex; gap: 1rem; }
.od-drp-month { flex: 1 1 0; min-width: 0; }

.od-drp-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.od-drp-month-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--od-gray-800);
}

.od-drp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: 0;
    border-radius: var(--od-radius);
    color: var(--od-gray-600);
    flex-shrink: 0;
}

.od-drp-nav:hover { background: var(--od-gray-100); color: var(--od-gray-800); }
.od-drp-nav-spacer { width: 24px; flex-shrink: 0; }

/* A „következő" gomb a BAL hónapon csak keskeny nézetben kell (lásd a komponens
   megjegyzését) – széles panelen a jobb oldali hónapé látszik. */
.od-drp-nav-narrow { display: none; }

.od-drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }

.od-drp-dow {
    text-align: center;
    font-size: .66rem;
    font-weight: 700;
    color: var(--od-gray-500);
    padding-bottom: .2rem;
}

/* ⚠️ FIX magasság: enélkül a jelölt és a jelöletlen napok eltérő magasak lennének, a
   rács sorai hullámoznának, és hónapváltáskor a panel magassága ugrálna. */
.od-drp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    background: none;
    border: 0;
    border-radius: var(--od-radius);
    font-size: .78rem;
    color: var(--od-gray-800);
}

/* ⚠️ A hover CSAK gombra hat. A helykitöltő cella `<span>`, és enélkül az is szürke
   hátteret kapna a kurzor alatt – vagyis üresen is kattinthatónak látszana. */
button.od-drp-day:hover { background: var(--od-gray-200); }

/* ⚠️ A szomszédos hónap napjai NEM jelennek meg (valós panasz javítása): két hónap egymás
   mellett ugyanazt a napot kétszer mutatta, tehát a tartomány széle KÉTSZER volt kijelölve.
   A cella MEGMARAD, csak üres – a `CalendarGrid.Days` mindig 42 cellát ad, és helykitöltő
   nélkül a két rács eltérő magas lenne, a panel pedig hónapléptetéskor ugrálna.
   ⚠️ A `.is-out` szabály SZÁNDÉKOSAN megszűnt: a Razor már nem is adja ki azt az osztályt,
   egy ottfelejtett szabály pedig védelemnek látszana. */
.od-drp-day-empty { pointer-events: none; }

.od-drp-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--od-gray-400); }

.od-drp-day.is-range { background: var(--od-primary-xlt); color: var(--od-primary-dark); }

.od-drp-day.is-start,
.od-drp-day.is-end {
    background: var(--od-primary);
    color: var(--od-white);
    font-weight: 700;
}

.od-drp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--od-gray-100);
}

.od-drp-hint { flex: 1 1 auto; font-size: .74rem; color: var(--od-gray-500); }

/* ⚠️ Keskeny képernyőn a MÁSODIK hónap eltűnik, és a „következő" gomb átkerül az
   elsőre. A gyorsválasztók vízszintes, görgethető sorba rendeződnek – oszlopként
   a panel magasabb lenne, mint a képernyő. */
@media (max-width: 720px) {
    .od-drp-panel { flex-direction: column; }

    .od-drp-presets {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--od-gray-100);
        border-radius: var(--od-radius-lg) var(--od-radius-lg) 0 0;
    }

    .od-drp-month-second { display: none; }
    .od-drp-nav-narrow { display: inline-flex; }
    .od-drp-nav-wide { display: none; }
}

/* =============================================================================
   IRÁNY-SZŰRŐ SZEGMENS (`od-dirseg-`)
   ============================================================================= */

.od-dirseg {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    overflow: hidden;
    background: var(--od-white);
}

.od-dirseg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    background: none;
    border: 0;
    color: var(--od-gray-500);
    transition: background var(--od-transition), color var(--od-transition);
}

.od-dirseg-btn + .od-dirseg-btn { border-left: 1px solid var(--od-gray-200); }
.od-dirseg-btn:hover { background: var(--od-gray-100); }

/* ⚠️ **SZÖVEGES szegmens-gomb – és ez MÉRT hiba javítása.** Az alap `od-dirseg-btn` fix
   `36px` széles, mert IKONRA készült. Feliratot téve bele a szöveg nem fért el, és a két
   gomb EGYMÁSRA CSÚSZOTT (mérve: „Csoportosítva" és „Sorrendben" egymáson). Ahol a
   szegmens szöveges, ez a módosító kell – a magasság és a színek maradnak, csak a
   szélesség lesz a tartalomé. */
.od-dirseg-text {
    width: auto;
    padding: 0 .7rem;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ⚠️ A SZÍNEK azonosak a listák irány-ikonjáéval (`.od-inv-ico-out` / `-in`) – ez köti
   össze a szűrőt a sorokkal, mert a GLIF eltér (ott blokk, itt átlós nyíl). Eltérő
   zöldet/pirosat használva a kapcsolat elveszne. */
.od-dirseg-all.is-on { background: var(--od-gray-200); color: var(--od-gray-700); }
.od-dirseg-out.is-on { background: #DCFCE7; color: #15803D; }
.od-dirseg-in.is-on  { background: #FEE2E2; color: #B91C1C; }

/* ── Számlakép-szűrő (ugyanaz a szegmens, más jelentés) ──
   ⚠️ A SZÍNEK a listák társítás-pipájáéval egyeznek (`--od-success`), illetve a
   hiányt semleges borostyán jelzi – a PIROSAT szándékosan NEM használjuk: a hiányzó
   számlakép nem hiba, hanem teendő. Pirossal a valódi figyelmeztetések veszítenék el
   a súlyukat. */
.od-imgseg-yes.is-on { background: #DCFCE7; color: #15803D; }
.od-imgseg-no.is-on  { background: #FEF3C7; color: #92400E; }

/* A darabszám a gombon: kicsi, de OLVASHATÓ – ez a modul „hátralék" száma. */
.od-dirseg-num {
    margin-left: .25rem;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A szám miatt ez a két gomb szélesebb; a fix szélesség levágná a kétjegyű értéket. */
.od-imgseg-yes,
.od-imgseg-no { width: auto; min-width: 36px; padding: 0 .45rem; }

/* 576 px alatt érintési célpont-méret (iOS és Android ajánlás is). */
@media (max-width: 576px) {
    .od-dirseg-btn { width: 44px; height: 44px; }

    /* ⚠️ A számos gomboknál a magasság a célpont, a szélesség a tartalomé – fix
       44 px-en a háromjegyű hátralék kicsúszna. */
    .od-imgseg-yes,
    .od-imgseg-no { width: auto; min-width: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERVÁLASZTÓ (`od-pp-`) – a pénzügyi tétel űrlapján.

   ⚠️ SAJÁT névtér: az `od-inv-` a NAV-számláké, az `od-oinv-` az iroda kimenő
   számláié. Egy kész osztály MÁS célra pontosan a 18. megtanult hiba.
   ═══════════════════════════════════════════════════════════════════════════ */

.od-pp-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    background: #fff;
}

/* Kiválasztás nélkül halványabb: a doboz így nem versenyez a kitöltött mezőkkel. */
.od-pp-box.is-empty {
    border-style: dashed;
    background: var(--od-gray-50);
}

.od-pp-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--od-gray-500);
    font-size: 0.9rem;
}

.od-pp-empty i { font-size: 1.15rem; opacity: 0.5; }

/* `min-width: 0` KÖTELEZŐ: enélkül a hosszú cím nem tud zsugorodni, és a gombokat
   kitolja a dobozból (flex elem alapból nem megy a tartalma alá). */
.od-pp-current { min-width: 0; flex: 1; }

.od-pp-name {
    font-weight: 600;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.od-pp-meta {
    font-size: 0.82rem;
    color: var(--od-gray-500);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

/* ── A választó ablak találati listája ── */

.od-pp-list {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
}

.od-pp-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--od-gray-100);
    background: transparent;
}

.od-pp-item:last-child { border-bottom: 0; }
.od-pp-item:hover { background: var(--od-primary-xlt); }

.od-pp-item-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--od-gray-800);
}

.od-pp-item-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--od-gray-500);
    overflow-wrap: anywhere;
}

/* 576 px alatt érintési célpont-méret. */
@media (max-width: 576px) {
    .od-pp-item { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* ⚠️ **A kiválasztás-törlő gomb 375 px-en 44×44 px.** A mérés hozta ki: a szabály
   nélkül 30×36 px maradt volna – az ÉRINTÉSI CÉLPONT-küszöb alatt, pedig ez az
   EGYETLEN út a partner leválasztásához. Ugyanaz az eset, mint az onboarding
   okmány-kuka gombjánál.
   ⚠️ A szűkítés `.od-pp-box`-ra szól, nem az összes `.od-action-btn`-re: a
   táblázatok sűrű művelet-oszlopát nem szabad széttolni. */
@media (max-width: 576px) {
    .od-pp-box .od-action-btn { width: 44px; height: 44px; }
}

/* ============================================================================
   NAV M2M: adófolyószámla (od-ta-), foglalkoztatottak (od-ie-),
   beállítás-lap (od-m2m-).

   ⚠️ HÁROM KÜLÖN NÉVTÉR, nem egy közös „od-nav-". A három felület más szerkezetű,
   és egy közös prefix alatt az egyik szabálya némán felülírná a másikét
   (18. megtanult hiba).
   ============================================================================ */

/* ── Adófolyószámla ─────────────────────────────────────────────────────── */

.od-ta-date {
    min-width: 12rem;
}

.od-ta-total {
    font-size: 1.5rem;
    font-weight: 700;
    /* ⚠️ Táblázatos számjegyek: enélkül az egymás alatti összegek nem esnének
       egy vonalba (arányos számjegyeknél a „1" keskenyebb). */
    font-variant-numeric: tabular-nums;
}

.od-ta-debt {
    color: var(--od-danger);
}

.od-ta-over {
    color: var(--od-success);
}

/* A lefúrható sor kattintható – a kurzor a FELFEDEZHETŐSÉG jelzése. */
.od-ta-row {
    cursor: pointer;
}

.od-ta-row:hover {
    background: var(--od-primary-xlt);
}

.od-ta-detail > td {
    border-top: 0;
}

/* ⚠️ `position: relative` KÖTELEZŐ a vízszintesen görgethető táblázat-dobozon.
   A `visually-hidden` (és minden abszolút pozicionált gyerek) pozicionált ős
   nélkül a LAP koordinátarendszeréhez igazodik, tehát nem a doboz tartja bent,
   hanem kiszélesíti a dokumentumot – 375 px-en mérve ez már okozott 686 px-es
   lap-túlcsordulást a számlalistán. */
.od-ta-scroll,
.od-ie-scroll {
    position: relative;
}

/* ── Foglalkoztatottak ──────────────────────────────────────────────────── */

/* ── Foglalkoztatottak – EGY munkafelület (2026-09-13, a jóváhagyott képernyőterv A iránya) ──
   ⚠️ SAJÁT `od-ie-` névtér, NEM a közös `.od-fchip`: az a fájlban KÉTSZER van definiálva (egyszer a
   nyomtatványkód monospace „címkéje", egyszer szűrő-chip), és a kaszkád a monospace betűt áthozná (18.). */
.od-ie-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem; padding: .75rem 1rem; }
.od-ie-bar-label { font-size: .75rem; font-weight: 600; color: var(--od-gray-500); }
.od-ie-range {
    display: inline-flex; align-items: center; gap: .4rem; height: 31px; padding: 0 .55rem;
    border: 1px solid var(--od-gray-300); border-radius: 8px; background: var(--od-white); color: var(--od-gray-500);
}
.od-ie-date {
    height: 100%; padding: 0; border: 0; background: transparent; outline: none;
    font-family: inherit; font-size: .8rem; color: var(--od-gray-700); font-variant-numeric: tabular-nums;
}
.od-ie-date:focus-visible { box-shadow: 0 0 0 3px rgba(21, 96, 189, .18); border-radius: 4px; }
.od-ie-range-sep { color: var(--od-gray-400); }
.od-ie-when { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--od-gray-500); }
.od-ie-when-solo { display: flex; margin: 0 0 .75rem; }

/* Jelző-sávok: puha háttér, a munkaterület sávjának színeivel. */
.od-ie-flag { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .85rem; margin-bottom: .75rem; border-radius: var(--od-radius); font-size: .82rem; line-height: 1.45; }
.od-ie-flag-info { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-ie-flag-err { background: #FEE2E2; color: #B91C1C; }
.od-ie-flag-test { background: #FEF3C7; color: #92400E; }

/* Üres állapot: ikon-kör, cím, egy mondat – a „nincs adat" és a „sikeres, de üres" más színnel. */
.od-ie-empty { padding: 2.25rem 1.5rem; text-align: center; }
.od-ie-empty-ic { width: 52px; height: 52px; margin: 0 auto .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.od-ie-empty-ic-none { background: #EEF2FF; color: #4F46E5; }
.od-ie-empty-ic-ok { background: var(--od-success-xlt); color: var(--od-success-dark); }
.od-ie-empty h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--od-gray-800); }
.od-ie-empty p { max-width: 32rem; margin: 0 auto; font-size: .85rem; color: var(--od-gray-500); }

/* Az eredmény-kártya fejléce: szűrő-chipek balra, darabszám és kereső jobbra. */
.od-ie-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .85rem; padding: .75rem 1rem; border-bottom: 1px solid var(--od-gray-200); }
.od-ie-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.od-ie-chip {
    display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .75rem;
    border: 1px solid var(--od-gray-200); border-radius: 999px; background: var(--od-white);
    font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--od-gray-600); cursor: pointer; white-space: nowrap;
}
.od-ie-chip:hover { border-color: var(--od-primary); color: var(--od-primary); }
.od-ie-chip.is-on { background: var(--od-primary-xlt); border-color: var(--od-primary); color: var(--od-primary-dark); }
.od-ie-chip-n { color: var(--od-gray-800); font-variant-numeric: tabular-nums; }
.od-ie-chip.is-on .od-ie-chip-n { color: var(--od-primary-dark); }
.od-ie-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--od-gray-400); }
.od-ie-dot-open { background: var(--od-success); }
.od-ie-dot-susp { background: var(--od-warning); }
.od-ie-head-right { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.od-ie-count { font-size: .8rem; color: var(--od-gray-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.od-ie-search { width: 21rem; max-width: 100%; }
.od-ie-search .od-search-input { height: 36px; padding-right: 2.1rem; }
.od-ie-search-info { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--od-gray-400); cursor: help; }

/* A táblázat: ⚠️ TÁBLÁZAT-PREFIXSZEL a Bootstrap `.table > :not(caption) > * > *` szabálya ellen. */
.od-ie-table > thead > tr > th {
    padding: .6rem 1rem; background: var(--od-gray-50); border-bottom: 1px solid var(--od-gray-200);
    font-size: .75rem; font-weight: 600; color: var(--od-gray-500); white-space: nowrap;
}
.od-ie-table > tbody > tr > td { padding: .6rem 1rem; font-size: .85rem; color: var(--od-gray-700); border-bottom-color: var(--od-gray-100); }
.od-ie-name { font-weight: 600; color: var(--od-gray-800); }
.od-ie-sub { margin-top: 1px; font-size: .75rem; color: var(--od-gray-500); }
.od-ie-code {
    display: inline-block; padding: 1px 5px; border-radius: 4px; background: var(--od-gray-100);
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: .72rem; font-weight: 600; color: var(--od-gray-700);
}
.od-ie-ell { display: block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-ie-st { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.od-ie-st-open { background: var(--od-success-xlt); color: var(--od-success-dark); }
.od-ie-st-susp { background: #FEF3C7; color: #92400E; }
.od-ie-st-closed { background: var(--od-gray-100); color: var(--od-gray-600); }
.od-ie-st-sub { margin-top: 2px; font-size: .72rem; color: #92400E; white-space: nowrap; }
.od-ie-note { display: flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border-top: 1px solid var(--od-gray-100); font-size: .78rem; color: var(--od-gray-500); }

/* Telefonon: a sáv elemei egymás alá, 44 px-es érintési célpontok; a chipsor vízszintesen görgethető.
   ⚠️ A 16 px-es betű a beviteli mezőkön az iOS Safari benagyítása ellen kell. */
@media (max-width: 575.98px) {
    /* ⚠️ `nowrap` KÖTELEZŐ az oszlopba fordított sávon és fejlécen: törő (`wrap`) oszlop-flexnél a sor
       szélességét a LEGSZÉLESEBB elem tartalma adja – MÉRVE 375 px-en a chipsor 374 px-re húzta a kártyát,
       és a lap 46 px-szel vízszintesen görgetett. Egy sorban az elemek a tároló szélességét kapják. */
    .od-ie-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .od-ie-bar .od-seg { height: auto; }
    .od-ie-bar .od-seg button { flex: 1 1 0; justify-content: center; min-height: 44px; font-size: 1rem; }
    .od-ie-range { height: 44px; }
    .od-ie-date { flex: 1 1 0; min-width: 0; font-size: 1rem; }
    .od-ie-go { min-height: 46px; }
    .od-ie-when { margin-left: 0; }
    .od-ie-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .od-ie-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .od-ie-chip { flex: none; height: 44px; }
    .od-ie-head-right { flex-direction: column-reverse; align-items: stretch; gap: .4rem; }
    .od-ie-search { width: 100%; }
    .od-ie-search .od-search-input { height: 44px; font-size: 1rem; }
    .od-ie-ell { max-width: none; white-space: normal; }
}

/* ── NAV M2M beállítások ────────────────────────────────────────────────── */

.od-m2m-prog {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: 1rem;
    height: 100%;
}

/* A beállított és a hiányzó kliensprogram RÁNÉZÉSRE elkülönül: a hiányzó az
   egyetlen ok, amiért az egész modul nem működik. */
.od-m2m-prog.is-ok {
    border-color: var(--od-success);
    background: var(--od-success-xlt);
}

.od-m2m-prog.is-missing {
    border-color: var(--od-gray-300);
    background: var(--od-gray-50);
}

/* Címke–érték párok két hasábban, a címke halvány. */
.od-m2m-dl {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0;
}

.od-m2m-dl dt {
    font-weight: 500;
    color: var(--od-gray-500);
    font-size: 0.85rem;
}

.od-m2m-dl dd {
    margin: 0;
    color: var(--od-gray-800);
    word-break: break-word;
}

/* A naplózott törzs: hosszú, tördelendő, és NEM nőhet a végtelenségig. */
.od-m2m-pre {
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* A kliensprogram-azonosító másolható mezője az ÜPO-útmutatóban.

   ⚠️ A korlát azért kell, mert az érték 10 karakter: teljes szélességen (mérve 1102 px
   egy 1265 px-es ablakban) egy majdnem üres, hosszú mező áll a lépés alatt, ami inkább
   beviteli mezőnek látszik, mint másolandó értéknek.
   ⚠️ 375 px-en NEM korlátoz (22rem = 352 px, az elérhető szélesség 343), tehát a mobil
   szabályt nem veszi vissza. */
.od-m2m-clientid .input-group {
    max-width: 22rem;
}

@media (max-width: 575.98px) {
    /* ⚠️ Érintési célpont: a szűrő- és lekérdező mezők telefonon is elérhetők
       legyenek. A 16 px-es betű az iOS Safari benagyítása ellen kell. */
    .od-ta-date .form-control {
        min-height: 44px;
        font-size: 1rem;
    }

    .od-m2m-dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .od-m2m-dl dd {
        margin-bottom: 0.4rem;
    }

    /* A kliensprogram-azonosító mezője az ÜPO-útmutatóban.

       ⚠️ **MÉRT hiba javítása.** Az `input-group` előtag-címkével + gombbal 375 px-en a
       MEZŐT nyomta össze 35 képpontra – vagyis pont az az érték vált olvashatatlanná,
       amit a vállalkozónak át kell másolnia a NAV oldalára. A gomb ráadásul 32 px széles
       maradt, az érintési célpont küszöbe alatt.

       ⚠️ A betűméret 1rem: 16 px alatt az iOS Safari BENAGYÍT fókuszáláskor, és a mező
       `readonly` ugyan, de Tabbal és kijelöléskor IS fókuszt kap. */
    /* ⚠️ `.form-control`, nem `input`: a Bootstrap `.input-group-sm > .form-control`
       szabálya (0‑2‑0) SPECIFIKUSABB, mint a `.od-m2m-clientid input` (0‑1‑1) – azzal a
       betűméret NÉMÁN 14 px maradt. Mérve: elemre kötve 14px, osztályra kötve 16px. */
    .od-m2m-clientid .form-control {
        min-height: 44px;
        font-size: 1rem;
    }

    .od-m2m-clientid .btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* A hívásnapló „Válaszkód" cellája kártya-módban.

       ⚠️ **MÉRT hiba javítása.** A `td[data-label]` kártya-módban FLEX; a benne lévő
       `<div>` alapértelmezett `min-width: auto`-val NEM tud a tartalma alá zsugorodni,
       tehát egy háromsoros NAV-hibaüzenet 375 px-en 31 képpontnyi LAP-túlcsordulást
       adott. A `min-width: 0` engedi tördelni.

       ⚠️ A KÓD jobbra zárt (mint minden más érték a kártyán), a HIBAÜZENET viszont
       BALRA: egy jobbra zárt, több soros mondat olvashatatlan. */
    .od-cardtable > tbody > tr > td .od-m2m-logval {
        min-width: 0;
        text-align: right;
    }

    .od-cardtable > tbody > tr > td .od-m2m-logval > div {
        text-align: left;
    }
}

/* ============================================================================
   „Adófolyószámla" segédeszköz a munkaterület jobb sávjában (od-tat-).

   ⚠️ SAJÁT névtér, nem az `od-ta-` (a teljes lapé) bővítése: ott táblázatos,
   1600 px-es elrendezés van, itt 380 px-es kártya. Egy közös prefix alatt az
   egyik szabálya némán felülírná a másikét (18. megtanult hiba).
   ⚠️ A SZÍNEKET viszont SZÁNDÉKOSAN a lap osztályai adják (`od-ta-debt`,
   `od-ta-over`): ugyanaz a szám ugyanabban a színben – két külön piros/zöld
   mellett a szem nem kötné össze a kettőt.
   ============================================================================ */

.od-tat {
    font-size: 0.85rem;
}

/* ── Fejléc ─────────────────────────────────────────────────────────────── */

.od-tat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--od-gray-200);
    margin-bottom: 0.5rem;
}

.od-tat-when {
    color: var(--od-gray-500);
    font-size: 0.78rem;
}

.od-tat-when i {
    margin-right: 0.3rem;
}

.od-tat-open {
    color: var(--od-gray-500);
    text-decoration: none;
    flex: none;
}

.od-tat-open:hover {
    color: var(--od-primary);
}

/* ── Jelzések (teszt / múltbeli / hiba) ─────────────────────────────────── */

.od-tat-flag {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 0.35rem 0.5rem;
    border-radius: var(--od-radius);
    margin-bottom: 0.4rem;
}

.od-tat-flag-test {
    background: #FEF3C7;
    color: #92400E;
}

.od-tat-flag-hist {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

.od-tat-flag-err {
    background: #FEE2E2;
    color: #B91C1C;
}

/* ── Összesítő: két szám egymás mellett ─────────────────────────────────── */

.od-tat-sum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.od-tat-sum-cell {
    background: var(--od-gray-50);
    border-radius: var(--od-radius);
    padding: 0.4rem 0.5rem;
    min-width: 0;
}

.od-tat-sum-label {
    display: block;
    font-size: 0.72rem;
    color: var(--od-gray-500);
}

.od-tat-sum-value {
    display: block;
    font-weight: 700;
    /* ⚠️ Táblázatos számjegyek: enélkül a két összeg nem esne egy vonalba. */
    font-variant-numeric: tabular-nums;
    /* 380 px-ben egy nagy összeg kilógna – tördelés helyett zsugorodjon a betű. */
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* ── Adónem-választó ────────────────────────────────────────────────────── */

.od-tat-picker {
    margin-bottom: 0.6rem;
}

.od-tat-search {
    position: relative;
    margin-bottom: 0.35rem;
}

.od-tat-search i {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-gray-400);
    font-size: 0.8rem;
    pointer-events: none;
}

.od-tat-search .form-control {
    padding-left: 1.8rem;
}

.od-tat-empty {
    color: var(--od-gray-500);
    font-size: 0.78rem;
    text-align: center;
}

/* ── A kiválasztott adónem ──────────────────────────────────────────────── */

.od-tat-detail {
    border-top: 1px solid var(--od-gray-200);
    padding-top: 0.5rem;
}

.od-tat-bal-name {
    display: block;
    font-weight: 600;
    color: var(--od-gray-800);
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.od-tat-bal-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.od-tat-bal-value {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.od-tat-acc {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--od-gray-500);
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

/* ── Tétel-szekciók ─────────────────────────────────────────────────────── */

.od-tat-sect {
    margin-top: 0.6rem;
}

.od-tat-sect-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--od-gray-500);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--od-gray-100);
    margin-bottom: 0.35rem;
}

.od-tat-entries {
    list-style: none;
    margin: 0;
    padding: 0;
}

.od-tat-entries li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--od-gray-100);
}

.od-tat-entries li:last-child {
    border-bottom: 0;
}

/* A tétel KÉT sorban: fent a megnevezés + összeg, lent a metaadatok.
   ⚠️ Külön oszlopban a megnevezésnek ~150 px maradna, és minden tétel neve csonkulna. */
.od-tat-e-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.od-tat-e-name {
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--od-gray-800);
    min-width: 0;
    overflow-wrap: anywhere;
}

.od-tat-e-amount {
    flex: none;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.od-tat-e-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--od-gray-500);
    margin-top: 0.1rem;
}

.od-tat-e-pending {
    background: #FEF3C7;
    color: #92400E;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
}

@media (max-width: 575.98px) {
    /* Érintési célpont a mezőkön; a 16 px-es betű az iOS Safari benagyítása ellen. */
    .od-tat-search .form-control,
    .od-tat-select {
        min-height: 44px;
        font-size: 1rem;
    }

    .od-tat-sum {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   „Foglalkoztatottak" segédeszköz a munkaterület jobb sávjában (od-iet-).

   ⚠️ SAJÁT névtér, nem az `od-ie-` (a teljes lapé) bővítése: ott táblázatos,
   1600 px-es elrendezés van, itt 380 px-es kártya (18. megtanult hiba).
   ============================================================================ */

.od-iet {
    font-size: 0.85rem;
}

.od-iet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--od-gray-200);
    margin-bottom: 0.5rem;
}

.od-iet-when {
    color: var(--od-gray-500);
    font-size: 0.78rem;
}

.od-iet-when i {
    margin-right: 0.3rem;
}

.od-iet-open {
    color: var(--od-gray-500);
    text-decoration: none;
    flex: none;
}

.od-iet-open:hover {
    color: var(--od-primary);
}

/* ── Lekérdező sor: típus + két ikongomb ────────────────────────────────── */

.od-iet-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

/* A típusválasztó viszi a maradék helyet, a gombok fixek – így a sor
   380 px-ben sem tördel. */
.od-iet-type {
    flex: 1 1 auto;
    min-width: 0;
}

.od-iet-go {
    flex: none;
    /* Az ikon önmagában áll, de a gomb ne legyen keskenyebb a kényelmesnél. */
    min-width: 2.25rem;
}

/* ── Jelzések ───────────────────────────────────────────────────────────── */

.od-iet-flag {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 0.35rem 0.5rem;
    border-radius: var(--od-radius);
    margin-bottom: 0.4rem;
}

.od-iet-flag-test {
    background: #FEF3C7;
    color: #92400E;
}

.od-iet-flag-info {
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

.od-iet-flag-err {
    background: #FEE2E2;
    color: #B91C1C;
}

/* ── Összesítő ──────────────────────────────────────────────────────────── */

.od-iet-sum {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    background: var(--od-gray-50);
    border-radius: var(--od-radius);
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
}

.od-iet-sum-main {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--od-gray-800);
    font-variant-numeric: tabular-nums;
}

.od-iet-sum-label {
    font-size: 0.78rem;
    color: var(--od-gray-600);
    min-width: 0;
}

/* ── Kereső ─────────────────────────────────────────────────────────────── */

.od-iet-search {
    position: relative;
    margin-bottom: 0.45rem;
}

.od-iet-search i {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-gray-400);
    font-size: 0.8rem;
    pointer-events: none;
}

.od-iet-search .form-control {
    padding-left: 1.8rem;
}

.od-iet-empty {
    color: var(--od-gray-500);
    font-size: 0.78rem;
    text-align: center;
}

/* ── Lista ──────────────────────────────────────────────────────────────── */

/* ⚠️ GÖRGETHETŐ, nem lapozós: a sávban a lapozó-gombsor több helyet venne el,
   mint amennyit ér. A TELJES darabszám fent, az összesítőben van kiírva. */
.od-iet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 26rem;
    overflow-y: auto;
    /* A görgetősáv megjelenése ne mozdítsa el a tartalmat. */
    scrollbar-gutter: stable;
}

.od-iet-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--od-gray-100);
}

.od-iet-list li:last-child {
    border-bottom: 0;
}

.od-iet-e-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
}

.od-iet-e-name {
    font-weight: 600;
    color: var(--od-gray-800);
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.od-iet-e-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--od-gray-500);
    margin-top: 0.1rem;
}

/* ── Állapot-chipek ─────────────────────────────────────────────────────── */

.od-iet-chip {
    flex: none;
    font-size: 0.68rem;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    white-space: nowrap;
}

.od-iet-chip-open {
    background: var(--od-success-xlt);
    color: var(--od-success);
}

.od-iet-chip-susp {
    background: #FEF3C7;
    color: #92400E;
}

.od-iet-chip-closed {
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

.od-iet-note {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--od-gray-500);
    margin-top: 0.4rem;
}

@media (max-width: 575.98px) {
    .od-iet-search .form-control,
    .od-iet-type,
    .od-iet-go {
        min-height: 44px;
        font-size: 1rem;
    }

    /* ⚠️ A MAGASSÁG önmagában KEVÉS: a gomb csak ikon, tehát a szélességét is ki kell
       tolni az érintési célpont-küszöbre. A mérés 36 px-et talált. */
    .od-iet-go {
        min-width: 44px;
    }
}

/* ============================================================
   NAV-KAPCSOLAT – VEZETETT BEKÖTÉS (ügyfél oldal)   od-navsetup-
   ⚠️ SAJÁT névtér, NEM az `od-dd-step*` újrahasznosítása. Az a kártya KÉT teendőt
   rak EGYMÁS MELLÉ (`grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))`);
   egy 4-5 lépéses, SORRENDBEN olvasandó útmutatónál az oszlopos elrendezés pont a
   lényeget rontaná el – nem látszana, mi következik mi után. Egy kész osztály MÁS
   célra pontosan a 18. megtanult hiba.
   ============================================================ */
.od-navsetup-steps {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.od-navsetup-step {
    display: flex;
    gap: .75rem;
    padding: .75rem .875rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

/* ⚠️ A sorszám a lépés AZONOSSÁGA, ezért kör és kiemelt – enélkül az öt doboz
   egyforma, és nem látszik, hogy sorrend van közöttük. */
.od-navsetup-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    background: var(--od-primary);
    color: var(--od-white);
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: enélkül a flex elem nem tud a tartalma alá zsugorodni,
   és egy hosszú, nem törhető szöveg (pl. beillesztett URL) kitolná a kártyát. */
.od-navsetup-body { min-width: 0; }

.od-navsetup-title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--od-gray-800);
    margin-bottom: .2rem;
}

.od-navsetup-text {
    font-size: .875rem;
    color: var(--od-gray-600);
    margin: 0;
    line-height: 1.55;
}

/* A megnyitandó cím és a NAV-felületen látható FELIRATOK.
   ⚠️ Ugyanaz a stílus, mert ugyanaz a szerep: „ez az, amit szó szerint keresel/beírsz".
   Külön stílussal a vállalkozónak két jelrendszert kellene fejben tartania.
   ⚠️ `od-navsetup-tag` a gomb-/menüfeliratokra, `-url` a címre – a színük tér el, hogy a
   cím kattinthatónak/beírhatónak látsszon, a felirat viszont idézetnek. */
.od-navsetup-tag,
.od-navsetup-url {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    font-weight: 600;
    color: var(--od-primary);
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    /* ⚠️ `--od-radius`, NEM `--od-radius-sm`: az utóbbi NEM LÉTEZIK a palettában (csak
       `--od-radius` és `--od-radius-lg`). Definiálatlan `var()`-ra a tulajdonság a KEZDETI
       értékre esik (itt 0), tehát a keret élesre váltana – némán, tiszta build mellett.
       A 18. megtanult hiba; a `--od-gray-300` és a `--od-gray-500` után ez a HARMADIK
       alkalom, hogy nem létező árnyalatra hivatkoztam, ezért került be a változó-ellenőrzés
       a kötelező lépések közé. */
    border-radius: var(--od-radius);
    padding: .15rem .4rem;
    user-select: all;
}

/* A NAV felületén látható feliratok: semleges szín – ez IDÉZET, nem beírandó érték. */
.od-navsetup-tag {
    color: var(--od-gray-800);
    font-weight: 700;
}

/* ⚠️ A feliratsor a lépés szövege UTÁN áll, saját sorban: a mondatba fűzve a szem nem
   találná meg gyorsan, hogy „mire kell kattintani". */
.od-navsetup-tags {
    margin-top: .4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--od-gray-500);
}

/* ⚠️ 576 px alatt a sorszám és a szöveg is nagyobb: a bekötést jellemzően gépen
   végzik, de a lap az egyszerűsített (mobil) nézetben IS elérhető. */
@media (max-width: 575.98px) {
    .od-navsetup-step { padding: .625rem .75rem; }
    .od-navsetup-text { font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hiányzó bizonylatok (od-mr-)

   ⚠️ SAJÁT névtér, nem az `od-inv-` bővítése: az a NAV-számlák TÁBLÁZATOS listájáé,
   1600 px-es elrendezéssel. Ez TEENDŐ-lista, soronként egy művelettel – egy kész
   osztály más célra pontosan a 18. megtanult hiba.
   ═══════════════════════════════════════════════════════════════════════════ */

.od-mr-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.od-mr-count {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--od-warning);
    margin-right: 0.35rem;
}

.od-mr-done {
    color: var(--od-success);
}

.od-mr-lead {
    max-width: 60ch;
}

/* ── A lista fejléce KÁRTYÁN ─────────────────────────────────────────────────
   ⚠️ A lap többi eleme (bónusz-sáv, „Ellenőrizni kell", maga a lista) mind kártya –
   a csupasz szöveg közéjük ékelve úgy nézett ki, mintha kimaradt volna a formázásból.
   A keret és a lekerekítés SZÁNDÉKOSAN azonos a `.od-mr-list`-ével: a kettő egymás
   alatt áll, és eltérő szegéllyel két külön dolognak látszana. */
.od-mr-intro {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: #fff;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}

.od-mr-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    overflow: hidden;
    background: #fff;
}

.od-mr-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--od-gray-100);
}

.od-mr-item:last-child {
    border-bottom: none;
}

/* ⚠️ A feltöltés alatt a sor HALVÁNYODIK, de NEM tűnik el és nem kap `disabled`-et:
   a letiltott vezérlő kimaradna a DOM-ból, és a folyamat végén nem lenne hova
   visszatérni. A pörgő jelzés a művelet-oszlopban van. */
.od-mr-item.is-busy {
    opacity: 0.6;
}

.od-mr-main {
    flex: 1;
    min-width: 0;
}

/* ⚠️ FLEX SOR: a név csonkul, a chip NEM. Egyetlen csonkoló dobozba téve a chip egy
   hosszú szállítónévnél teljesen levágódna – mérve 375 px-en, `elementFromPoint` null. */
.od-mr-partner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-weight: 600;
    color: var(--od-gray-800);
}

.od-mr-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Az IRÁNY jelzése a hiányzó-bizonylat soron ──────────────────────────────
   ⚠️ CSAK a KIMENŐ sor kapja meg – a lista túlnyomó többsége bejövő, és minden soron
   egy „Bejövő" chip puszta zaj lenne. A KIVÉTELT jelöljük, nem az alapállapotot.

   ⚠️ A SZÍNEK azonosak a `/finances` irány-ikonjáéval (`.od-inv-ico-out`) – ez köti
   össze a két felületet. Eltérő zöldet használva a kapcsolat elveszne, és a
   felhasználónak két jelrendszert kellene fejben tartania ugyanarra. */
.od-mr-dir {
    flex-shrink: 0;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #DCFCE7;
    color: #15803D;
    vertical-align: middle;
}

/* ── HAVI BIZONYLAT-BÓNUSZ sáv ───────────────────────────────────────────────
   ⚠️ SAJÁT névtér (`od-mrb-`), nem az `od-mr-attn` újrahasznosítása: az FIGYELMEZTETÉS
   (borostyán, hibára hívja fel a figyelmet), ez viszont ÖSZTÖNZŐ. Egy kész osztály más
   célra pontosan a 18. megtanult hiba. */
.od-mrb {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.od-mrb-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.od-mrb-head > .bi {
    font-size: 1.15rem;
    color: var(--od-gray-500);
    flex-shrink: 0;
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: flex-elem alapértelmezett `min-width: auto`-ja
   megakadályozná, hogy a tartalma alá zsugorodjon – hosszú hónapnévnél a százalék
   szorulna ki a sorból. */
.od-mrb-title {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.od-mrb-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--od-gray-500);
}

.od-mrb-days {
    font-weight: 600;
    color: var(--od-gray-700);
}

.od-mrb-pct {
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--od-gray-600);
}

.od-mrb-pct > span {
    font-size: 0.85rem;
    font-weight: 600;
}

.od-mrb-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--od-gray-200);
    overflow: hidden;
    margin: 0.6rem 0 0.5rem;
}

.od-mrb-bar > span {
    display: block;
    height: 100%;
    background: var(--od-gray-500);
}

.od-mrb-note {
    font-size: 0.85rem;
    color: var(--od-gray-600);
}

/* A szint SZÍNE. ⚠️ A `is-perfect` zöldje ugyanaz a `--od-success`, amit a „Minden
   bizonylat megvan" pipa is használ – a két állítás ugyanarról szól. */
.od-mrb.is-perfect { border-color: #BBF7D0; background: #F0FDF4; }
.od-mrb.is-perfect .od-mrb-pct,
.od-mrb.is-perfect .od-mrb-head > .bi { color: var(--od-success); }
.od-mrb.is-perfect .od-mrb-bar > span { background: var(--od-success); }

.od-mrb.is-good { border-color: #BFDBFE; background: #EFF6FF; }
.od-mrb.is-good .od-mrb-pct,
.od-mrb.is-good .od-mrb-head > .bi { color: var(--od-primary); }
.od-mrb.is-good .od-mrb-bar > span { background: var(--od-primary); }

/* ⚠️ `flex-shrink: 0` – a chip inkább szorítsa a nevet, mint hogy maga tűnjön el.
   A sztornó/módosító jelölés nélkül a felhasználó az eredetivel keverné össze. */
.od-mr-op {
    flex-shrink: 0;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    vertical-align: middle;
}

.od-mr-meta {
    font-size: 0.85rem;
    color: var(--od-gray-500);
}

.od-mr-sep {
    margin: 0 0.35rem;
}

.od-mr-num {
    font-variant-numeric: tabular-nums;
}

/* ⚠️ `tabular-nums` KÖTELEZŐ: arányos számjegyekkel az egymás alatti összegek nem
   esnének egy vonalba, és a lista rendetlennek látszana. */
.od-mr-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--od-gray-800);
}

.od-mr-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.od-mr-busy {
    font-size: 0.85rem;
    color: var(--od-gray-500);
    white-space: nowrap;
}

/* ⚠️ A `<label>` a gomb, a benne lévő `InputFile` REJTETT – de `display: none` NEM
   használható: a rejtett fájlmező egyes böngészőkben nem nyílik meg kattintásra.
   A nulla méret + átlátszóság megtartja a működést. */
.od-mr-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 0;
}

.od-mr-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

/* ── Mobil ────────────────────────────────────────────────────────────────
   ⚠️ 576 px alatt a sor OSZLOPPÁ válik: vízszintesen a partner, az összeg és a két
   gomb együtt kitolná a lapot. A gombok teljes szélességűek, hogy a hüvelykujjal
   biztosan eltaláljuk őket.                                                     */
@media (max-width: 575.98px) {
    .od-mr-item {
        flex-wrap: wrap;
    }

    .od-mr-main {
        flex: 1 1 100%;
    }

    .od-mr-amount {
        flex: 1 1 auto;
    }

    .od-mr-actions {
        flex: 0 0 auto;
    }

    /* ⚠️ 44 px érintési célpont – a fotózás gombja a telefon fő művelete. */
    .od-mr-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .od-mr-btn-text {
        margin-left: 0.35rem;
    }

    /* ⚠️ **A „Fotózás" felirat telefonon ELTŰNIK – valós panasz javítása.** A korábbi
       döntés az volt, hogy marad („két csupasz ikon közül a felhasználó találgatna"),
       de a HASZNÁLAT megcáfolta: a feliratos gomb a szűk soron aránytalanul sok helyet
       vitt el. A kamera-ikon konvencionális, a mellette lévő kapocs pedig eddig is
       csak ikon volt – így a két feltöltési gomb KÖVETKEZETES lett.

       ⚠️ **NEM `display: none`, hanem LÁTHATATLANNÁ tétel** (a Bootstrap
       `.visually-hidden` mintája). A `<label>` szövege adja a gomb akadálymentes NEVÉT:
       kiszedve a képernyőolvasó egy név nélküli gombot mondana be – a `title` ezen nem
       segít, az csak LEÍRÁS. Ez a legcsendesebb fajta akadálymentességi hiba: a
       felületen semmi nem látszik belőle.

       ⚠️ **Kizárólag a `.od-mr-photo`-ra szól.** Az `od-mr-btn-text` NÉGY gombon közös,
       és az „Áttesszük" / „Mégis ez a jó" párról a feliratot NEM szabad elvenni: azok
       ELLENTÉTES műveletek (nyilak vs. hüvelykujj), ikonból nem megkülönböztethetők. */
    .od-mr-photo .od-mr-btn-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ── „Feltöltve" visszaigazoló sáv ───────────────────────────────────────────
   ⚠️ ZÖLD keret, nem sárga: ez nem teendő és nem figyelmeztetés, hanem NYUGTA –
   a felhasználó épp most csinált meg valamit. Sárgával a valódi teendők
   („Ellenőrizni kell") veszítenék el a súlyukat.
   ⚠️ SAJÁT névtér az `od-mr-` családon belül, nem az `od-mr-attn-` újrahasznosítása:
   az FIGYELMEZTETÉS, ez NYUGTA – két különböző jelentés (18. megtanult hiba). */
.od-mr-done {
    border: 1px solid #A7F3D0;
    background: #ECFDF5;
    border-radius: var(--od-radius);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.od-mr-done-head {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    color: #065F46;
}

.od-mr-done-head > .bi {
    font-size: 1.125rem;
    line-height: 1.4;
}

/* A bezáró gomb a sáv jobb szélére – a szöveg a maradékon osztozik. */
.od-mr-done-head > .btn-close {
    margin-left: auto;
    flex-shrink: 0;
}

.od-mr-done-list {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.od-mr-done-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* ⚠️ FIX méret + `object-fit: contain`: egy álló bizonylat és egy fekvő blokk
   ugyanakkora helyet foglaljon, különben a sáv soronként ugrálna. A `contain`
   (nem `cover`) azért kell, mert itt épp az a kérdés, hogy a TELJES lap
   rajta van-e – a levágott szél pont azt rejtené el, amit meg kell nézni. */
.od-mr-done-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 96px;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: #FFFFFF;
    overflow: hidden;
    display: block;
}

.od-mr-done-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.od-mr-done-main {
    min-width: 0;
    flex: 1;
}

.od-mr-done-name {
    font-weight: 600;
    color: var(--od-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-mr-done-fix {
    margin-top: .375rem;
}

@media (max-width: 575.98px) {
    /* ⚠️ 44 px érintési célpont – a megigazítás a telefon fő javító-művelete. */
    .od-mr-done-fix {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ── „Nem kell bizonylat" szakasz ────────────────────────────────────────────
   ⚠️ A megjelölt sor HALVÁNY, de nem áthúzott: nem törölt adat, csak nem teendő.
   Az áthúzás azt sugallná, hogy a számla maga érvénytelen.                      */
.od-mr-skipped {
    margin-top: 1.5rem;
}

.od-mr-item.is-skipped .od-mr-partner,
.od-mr-item.is-skipped .od-mr-amount {
    color: var(--od-gray-500);
    font-weight: 500;
}

/* ── Banki tételek: UGYANAZ a lista, MÁS FAJTA teendő ────────────────────────
   ⚠️ A szakasznak SAJÁT szabálya CSAK az elválasztásra van – a sorok, a gombok és a
   „megjelölt" blokk a számla-oldali osztályokat használják, ugyanabban a szerkezetben.
   Külön névteret nyitva a két lista előbb-utóbb máshogy nézne ki, pedig a felhasználó
   ugyanazt csinálja bennük: feltölt vagy megjelöl.

   ⚠️ A VONAL a lényeg, nem a térköz. Fölötte a SZÁMLÁKRÓL van szó (van bizonylat, csak
   nem töltötték fel), alatta a BANKRÓL (a pénz elment, de nem tudjuk, miért) – vonal
   nélkül a banki fejléc-kártya a számla-listához tapadna, és a felhasználó azt hinné,
   ugyanannak a listának a folytatása. Ugyanaz az elv, mint a menük `<hr>`-jénél.

   ⚠️ A vonal SOSEM áll a semmiben: a számla-szakasz mindig rendereli valamelyik ágát
   (lista vagy üres állapot), tehát fölötte mindig van tartalom.                        */
.od-mr-bank {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--od-gray-200);
}

/* ── „Ellenőrizni kell" – ahol a bizonylat ELLENTMOND a számlának ──────────────
   ⚠️ BOROSTYÁN, nem PIROS. A piros HIBÁT jelent; ez viszont TEENDŐ, amit az ügyfél
   egy koppintással el tud intézni. Ugyanaz a különbségtétel, mint az átvilágítás-
   monitor „Nincs átvilágítás" kosaránál és a „nincs bizonylat" szűrőnél. */
.od-mr-attn {
    border: 1px solid var(--od-warning);
    border-radius: var(--od-radius);
    background: #FFFBEB;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.od-mr-attn-head {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .5rem;
}

.od-mr-attn-head > i {
    color: var(--od-warning);
    font-size: 1.25rem;
    line-height: 1.4;
    /* ⚠️ Az ikon nem zsugorodhat: keskeny nézetben a hosszú cím különben ráfolyna. */
    flex-shrink: 0;
}

.od-mr-attn-head p {
    color: var(--od-gray-600);
}

/* A szakasz saját listája ne örökölje a fehér kártya-hátteret. */
.od-mr-attn .od-mr-list {
    background: transparent;
    border: 0;
}

.od-mr-attn-item {
    border-color: #FDE68A;
}

/* ⚠️ **A gombok TÖRDELHETŐK – és ezt a mérés kényszerítette ki.** Itt HÁROM feliratos gomb
   van (megnézés · „Áttesszük" · „Mégis ez a jó"), együtt 334 px; a szakasz keretén és
   paddingján belül 375 px-es képernyőn 309 px marad. `nowrap` mellett az utolsó gomb jobb
   széle a 383. képpontnál állt, tehát LEVÁGÓDOTT – mérve.

   ⚠️ **A feliratot NEM vesszük el helyette.** Két csupasz ikon közül („áttesszük" nyilak vs.
   hüvelykujj) a felhasználó találgatna, pedig a kettő ELLENTÉTES műveletet takar – ugyanaz
   az érv, amiért a „Fotózás" felirat is marad 375 px-en.

   ⚠️ **Az alapszabály `nowrap`-je MARAD**, mert a hiányzó-lista három gombja rövidebb
   (198 px) és ott mérve nincs túlcsordulás. Globálisan átírva egy már mért elrendezést
   mozdítanánk el bizonyíték nélkül. */
.od-mr-attn .od-mr-actions {
    flex-wrap: wrap;
    justify-content: flex-end;

    /* ⚠️ **A `flex-wrap` ÖNMAGÁBAN NEM ELÉG, és ezt is a mérés mutatta meg.** Az alapszabály
       `flex-shrink: 0`-t ad, tehát a gombsáv a 309 px-es soron belül is megtartotta a
       tartalomból adódó 334 px-et – a gyerekeinek így soha nem lett hely-hiánya, és nem
       tördeltek. Zsugorodni engedve a sáv 309-re szűkül, és a wrap ÉRVÉNYRE JUT.
       A `min-width: 0` KÖTELEZŐ mellé: enélkül a flex elem az automatikus minimális
       méreténél (a tartalomnál) nem tudna keskenyebb lenni. */
    flex-shrink: 1;
    min-width: 0;
}

.od-mr-attn-msg {
    margin-top: .25rem;
    font-size: .875rem;
    color: var(--od-gray-700);
}

/* ⚠️ Az OCR-es olvasat BECSÜLT – halványan, de KIÍRVA. Elhagyva az ügyfél
   ugyanolyan biztosnak venné, mint a PDF szövegrétegéből olvasott egyezést. */
.od-mr-attn-est {
    display: inline-block;
    margin-left: .35rem;
    color: var(--od-gray-500);
    font-size: .8125rem;
}

/* ── A könyvelő visszaküldte ───────────────────────────────────────────────── */
.od-mr-returned {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
    margin-top: .35rem;
    font-size: .875rem;
    color: var(--od-gray-700);
}

.od-mr-returned > i {
    color: var(--od-warning);
    flex-shrink: 0;
    line-height: 1.4;
}

/* ── Visszaküldés az ügyfélnek (a számla-ablak képhasábjában) ────────────────
   ⚠️ INLINE panel, nem harmadik ablak: a számla-ablak fölött már ott áll a
   ConfirmDialog a kézzel emelt z-indexével, és egy harmadik réteg megint
   rétegsorrend-matekot kívánna. */
.od-inv-return {
    margin: .5rem 0 .75rem;
    padding: .75rem;
    border: 1px solid var(--od-warning);
    border-radius: var(--od-radius);
    background: #FFFBEB;
}

.od-inv-return-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   SZÁMLATÜKÖR ÉS ROVATOK  (`od-coa-`)

   A vállalkozás adatlapjának „Számlatükör" (társas) / „Rovatok" (egyéni) füle.

   ⚠️ SAJÁT névtér, mérve szabad volt. NEM az `od-inv-` bővítése: az a NAV-tól
   lehívott számláké, és egy közös prefix némán írná felül a másik elrendezését
   (18. megtanult hiba).
   ════════════════════════════════════════════════════════════════════════════ */

/* Eszköztár: kereső + darabszám + gombok EGY sorban, tördeléssel. */
.od-coa-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.od-coa-bar .od-search-box {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 340px;
}

.od-coa-count { white-space: nowrap; }

/* ⚠️ A LEKÉPEZETLEN-szűrő (2026‑09‑06, a jóváhagyott `/design` terv). Borostyán, nem
   piros: ez nem hiba, hanem elvégzendő munka – a piros a kivonaton az „eltérés"-é. A
   bekapcsolt állapot TÖLTÖTT, hogy a szűrt nézetben egyértelmű legyen, miért látszik
   hét sor a 389-ből. */
.od-coa-gapfilter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 31px;
    padding: 0 .7rem;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    background: #FFFBEB;
    color: #92400E;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.od-coa-gapfilter:hover { background: #FEF3C7; }
.od-coa-gapfilter.is-on {
    background: var(--od-warning);
    border-color: var(--od-warning);
    color: var(--od-white);
}
.od-coa-gapfilter i { font-size: .8rem; }
.od-coa-gapnum { font-weight: 800; opacity: .75; }
.od-coa-gapfilter.is-on .od-coa-gapnum { opacity: .9; }

/* A lábléc a KÖVETKEZMÉNNYEL – a táblázat alatt, nem fölötte: a könyvelő előbb lássa a
   sorokat, és utána azt, mi lesz belőlük, ha így maradnak. */
.od-coa-gapfoot {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-top: 1px solid #FDE68A;
    background: #FFFBEB;
    color: #92400E;
    font-size: .82rem;
}
.od-coa-gapfoot .btn-link { color: #92400E; }

.od-coa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

/* A beszámoló-típus jelzése. Halvány, mert TÁJÉKOZTATÁS, nem figyelmeztetés –
   pirosra/sárgára véve a szem hibának olvasná egy hibátlan beállítást. */
.od-coa-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .85rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    color: var(--od-gray-500);
    font-size: .875rem;
}

.od-coa-note i { color: var(--od-primary); }

/* ⚠️ A táblázat MAGÁBAN görget, nem a lap. 389 sornál a fa mélysége miatt a
   Számlaszám oszlop szélesebb lehet a kártyánál – enélkül a LAP csordulna túl
   vízszintesen.
   ⚠️ `position: relative` KÖTELEZŐ: a `visually-hidden` (abszolút pozicionált)
   szöveg pozicionált ős nélkül a LAP koordinátarendszeréhez igazodna, és
   kiszökne a görgetődobozból – ez a `/finances` listáján MÉRT hiba volt. */
.od-coa-scroll {
    position: relative;
    max-height: 70vh;
    overflow: auto;
}

/* A számlaszám cellája: nyíl + behúzás + monospace szám. */
.od-coa-num {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

/* ⚠️ A nyíl és a HELYE azonos szélességű – enélkül a gyerek nélküli sorok
   száma balra ugrana a testvéreihez képest, és a fa „szakadtnak" látszana. */
.od-coa-caret,
.od-coa-caret-spacer {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}

.od-coa-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    /* ⚠️ Beégetett 6px, mert `--od-radius-sm` NEM LÉTEZIK a palettában (csak
       `--od-radius` és `--od-radius-lg`). Definiálatlan változóra hivatkozva a
       tulajdonság NÉMÁN a kezdeti értékre esne vissza, tiszta build mellett –
       a 18. megtanult hiba, amit az ellenőrző szkript fogott meg.
       ⚠️ A változónevet ITT SZÁNDÉKOSAN nem `var(...)` alakban írjuk: úgy a
       CLAUDE.md ellenőrző szkriptje ezt a MEGJEGYZÉST jelentené hiányzó
       változónak, és egy soha meg nem szűnő hamis riasztás pár hét alatt
       megtanítaná a következő olvasót, hogy hagyja figyelmen kívül. */
    border-radius: 6px;
    background: none;
    color: var(--od-gray-500);
    line-height: 1;
}

.od-coa-caret:hover {
    background: var(--od-gray-100);
    color: var(--od-gray-800);
}

/* Gyűjtő sor: halvány háttér + sötétebb szöveg. A gyűjtőhöz nem köthető
   könyvelési tétel, tehát a szemnek meg kell tudnia különböztetni. */
.od-coa-summary > td {
    background: var(--od-gray-50);
    color: var(--od-gray-800);
}

/* A rovatlista pénztárkönyv-oszlop fejléce (teljes szélességű sáv). */
.od-coa-group > td {
    background: var(--od-gray-100);
    color: var(--od-gray-800);
    font-weight: 600;
    font-size: .85rem;
}

.od-coa-group-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--od-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.od-coa-group-count {
    margin-left: .5rem;
    color: var(--od-gray-500);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    /* Egy hasábban a kereső és a gombsor is teljes szélességű: 375 px-en a
       `margin-left: auto` egy szűk sorban a gombokat a jobb szélre lökné, a
       kereső mellé, ahol nem férnek el. */
    .od-coa-bar .od-search-box { flex: 1 1 100%; max-width: none; }
    .od-coa-actions { margin-left: 0; width: 100%; }

    /* ⚠️ **A FA BEHÚZÁSA KÁRTYÁS NÉZETBEN IS MEGMARAD** – de csak úgy, hogy a
       cellát BALRA igazítjuk. Kézenfekvő volna a behúzást nullázni (a sor már nem
       táblázat-sor, hanem kártya), csakhogy akkor egy 3. szintű számla PONTOSAN ÚGY
       nézne ki, mint egy gyökér, és a nyíl becsukása magyarázat nélkül tüntetne el
       kártyákat a lista közepéről.

       ⚠️ **A `justify-content: flex-start` NÉLKÜL a behúzás FORDÍTVA olvasódna – ezt
       a mérés fogta meg.** A kártya-cellák alapszabálya `space-between`: a címke
       balra, az ÉRTÉK a JOBB szélre kerül. A behúzás a szám dobozát szélesíti, a
       doboz jobb széle viszont a kártyához tapad – tehát MÉLYEBB szint mellett a
       szám BALRÉBB csúszott (mérve: gyökér 336 px, 2. szint 319 px). A hierarchia
       jelzése így az ellenkezőjét mondta volna. */
    .od-cardtable > tbody > tr > td[data-label]:has(.od-coa-num) {
        justify-content: flex-start;
        gap: .75rem;
    }

    /* A csoport-fejléc marad teljes szélességű sáv, nem lesz kártya. */
    .od-cardtable > tbody > tr.od-coa-group {
        display: block;
        padding: .5rem .75rem;
        margin: .5rem 0 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--od-gray-100);
    }

    .od-cardtable > tbody > tr.od-coa-group > td {
        display: block;
        width: 100%;
        padding: 0;
        background: none;
    }
}

/* Az import hibalistája: MAGÁBAN görget. ⚠️ Ötven hibás sor a modal törzsébe
   engedve az egész ablakot a képernyőn kívülre nyújtaná, és a „Feltöltés indítása"
   gomb elérhetetlenné válna – pontosan az a gomb, ami miatt az ablak nyitva van. */
.od-coa-import-errors {
    max-height: 12rem;
    overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   ÁFA-BEVALLÁSI SOROK  (`od-vrr-`)

   Az Admin → Beállítások CSAK OLVASHATÓ katalógus-fülének stílusa.

   ⚠️ SAJÁT névtér, nem az `od-coa-` bővítése: az a CÉG számlatükréé (fa, behúzás,
   nyitó-csukó nyilak), ez egy lapos, jogszabályi lista. Egy kész osztály más célra
   pontosan a 18. megtanult hiba.
   ════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `position: relative` KÖTELEZŐ: a fejlécekben `visually-hidden` szöveg ül
   (az „igen"/„nem" képernyőolvasónak), az pedig `position: absolute` – pozicionált
   ős nélkül a LAP koordinátarendszeréhez igazodna, és 375 px-en kitolná a lapot.
   Ez a `/finances` listán MÉRT hiba volt (686 px-re nőtt a dokumentum). */
.od-vrr-scroll {
    position: relative;
    border-radius: var(--od-radius);
}

/* Szekció-fejléc: teljes szélességű sáv a táblázaton belül. */
.od-vrr-table > tbody > tr.od-vrr-section > td {
    background: var(--od-gray-100);
    color: var(--od-gray-700);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .55rem .75rem;
}

/* Számított sor: halvány, de NEM áthúzott – az azt sugallná, hogy érvénytelen. */
.od-vrr-table > tbody > tr.od-vrr-computed > td {
    color: var(--od-gray-500);
    background: var(--od-gray-50);
}

.od-vrr-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--od-gray-200);
    color: var(--od-gray-600);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.od-vrr-yes { color: var(--od-success); }
.od-vrr-no { color: var(--od-gray-400); }

@media (max-width: 575.98px) {
    /* A szekció-fejléc kártyás nézetben is SÁV marad, nem esik cellákra szét.
       A specifikussága (0-2-2) nagyobb az általános kártya-szabályénál (0-1-3),
       tehát nem a sorrenden múlik. */
    .od-cardtable > tbody > tr.od-vrr-section {
        display: block;
        padding: .5rem .75rem;
        margin: .5rem 0 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--od-gray-100);
    }

    .od-cardtable > tbody > tr.od-vrr-section > td {
        display: block;
        width: 100%;
        padding: 0;
        background: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBIL: SZÉLES TÁBLÁZAT → KÁRTYÁK  (`od-cardtable`)

   ⚠️ **Mérve a felhasználó telefonján, négy lapon**: 375 px-en a `/finances`
   10 oszlopos, 1536 px széles táblájából a `Kelt` és a `Számlaszám` látszott, a
   maradék NYOLC levágva; a `/fees`-en a `Bruttó`, az `/employments`-en a
   `Jogviszony`, a `/tax-account`-on a `Kötelezettség` csonkult. A görgetődoboz
   megvédi a LAPOT a túlcsordulástól, de a listát nem teszi használhatóvá:
   soronként oldalra kell húzogatni.

   ⚠️ **A minta a `/receipts` lapé** (`od-mr-`): az kártyás, és 375 px-en mérve
   hibátlan. Nem új találmány – a projektben MÁR bevált megoldást visszük át.

   ⚠️ **EGY mechanizmus, nem négy másolat.** A táblázat `od-cardtable` osztályt
   kap, a cellák pedig `data-label`-t; a többi ebből következik. Táblánként
   újraírva a négy változat előbb-utóbb eltérne, és pont a legritkábban nézett
   lapon maradna el egy javítás.

   ⚠️ **KIZÁRÓLAG ebben a `@media` blokkban.** Az asztali nézet egyetlen
   képponttal sem mozdulhat – **mérve**: asztalon a `display` végig
   `table`/`table-row`/`table-header-group`, és a `data-label`-ök `::before`
   tartalma `none`, tehát a címkék meg sem jelennek.

   ⚠️ **SEMMI nem tűnik el.** MINDEN cella megjelenik, csak más elrendezésben:
   fent az azonosítók, alattuk címke–érték párok. Oszlopot elrejtve a
   felhasználónak fogalma sem lenne, hogy van még adat – ugyanaz a szabály,
   mint a címek `+N` jelzésénél.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

    /* A vízszintes görgetés kikapcsol – kártyáknál nincs mit oldalra húzni.
       ⚠️ A `position: relative` MARAD (a görgetődobozok alapszabálya): az tartja
       bent a képernyőolvasónak szánt `visually-hidden` fejlécszöveget. */
    .od-cardtable-wrap { overflow-x: visible; }

    .od-cardtable,
    .od-cardtable > tbody { display: block; }

    /* A fejléc címkéi a cellák elé költöznek (`data-label`), tehát a fejlécsor
       feleslegessé válik. */
    .od-cardtable > thead { display: none; }

    .od-cardtable > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem .5rem;
        padding: .7rem .8rem;
        margin-bottom: .55rem;
        border: 1px solid var(--od-gray-200);
        border-radius: var(--od-radius);
        background: var(--od-white);
    }

    /* A cellák szegélye és belső térköze a kártyán belül zavarna: a kártya maga
       adja a keretet. Alapból MINDEN cella teljes szélességű sor. */
    .od-cardtable > tbody > tr > td {
        flex: 0 0 100%;
        border: 0;
        padding: 0;
        background: none;
        text-align: left;
    }

    /* A sor-hover a KÁRTYÁRA kerül; cellánként festve a kártya foltos lenne. */
    .od-cardtable > tbody > tr:hover > td { background: none; }
    .od-cardtable > tbody > tr:hover { background: var(--od-gray-50); }

    /* Címkés cella = címke balra, érték jobbra. A címke NÉLKÜLI cella
       kártyacím vagy művelet – az marad sima, balra zárt blokk. */
    .od-cardtable > tbody > tr > td[data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .od-cardtable > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .8rem;
        font-weight: 500;
        color: var(--od-gray-500);
        text-align: left;
        white-space: nowrap;
    }

    /* ⚠️ A bank-import `od-bsi-tight` cellái VISSZAVESZIK a tördelés-tiltást: az az
       ASZTALI táblázatnak szól (ott a tördelés szétdobja a sort), kártyán viszont a
       hosszú érték kitolná a kártyát – ott a tördelés a HELYES viselkedés. */
    .od-cardtable > tbody > tr > td.od-bsi-tight { white-space: normal; }

    /* ── /finances: fejlécsáv a kártya tetején ────────────────────────────────
       ⚠️ Az `order` KELL: a DOM-ban a bizonylat-pipa a MÁSODIK cella (a táblázat
       oszlopsorrendje szerint), a kártyán viszont a számlaszám UTÁN a helye.
       ⚠️ A specifikusság 0-2-0, a fenti általános szabályé 0-1-3 – tehát ezek
       NYERNEK, és nem a sorrenden múlik. */
    .od-inv-row > .od-inv-dir-c  { order: 1; flex: 0 0 auto; }
    .od-inv-row > .od-inv-num-c  { order: 2; flex: 1 1 auto; min-width: 0; }
    .od-inv-row > .od-inv-pair-c { order: 3; flex: 0 0 auto; }
    .od-inv-row > .od-inv-act-c  { order: 4; flex: 0 0 auto; }

    .od-inv-row > .od-inv-partner-c {
        order: 5;
        padding-bottom: .5rem !important;
        border-bottom: 1px solid var(--od-gray-100) !important;
    }

    .od-inv-row > .od-inv-date-c { order: 6; }
    .od-inv-row > .od-inv-net    { order: 7; }
    .od-inv-row > .od-inv-rate   { order: 8; }
    .od-inv-row > .od-inv-vat    { order: 9; }

    /* A bruttó a sor fő száma – a kártyán is ez emelkedjen ki. */
    .od-inv-row > .od-inv-gross  { order: 10; font-size: 1.02rem; }

    /* A hónap-elválasztó teljes szélességű sávcím marad, a kártyákon KÍVÜL.
       ⚠️ Osztály-szelektor (0-2-2), tehát felülírja a fenti általános
       kártya-szabályt (0-1-3) – a sorrendtől függetlenül. */
    .od-cardtable > tbody > tr.od-inv-sep {
        display: block;
        padding: 0;
        margin: .5rem 0 .35rem;
        border: 0;
        background: none;
    }

    .od-cardtable > tbody > tr.od-inv-sep > td {
        display: block;
        border-radius: var(--od-radius);
    }

    /* ── /fees: a lenyitó chevron a számlaszám MELLETT marad ──
       ⚠️ A `width: auto` KÖTELEZŐ, és ezt a MÉRÉS hozta ki. Az alapszabály
       `width: 1%` – ez a szokásos táblázat-trükk a „legyen olyan keskeny, amilyen
       csak lehet" oszlopra. Flex-elemként viszont a 1% **3,14 px**-re oldódik fel,
       miközben a benne lévő chevron 16 px: a cella görgethető dobozzá vált, és az
       ikon kilógott belőle. Táblázaton kívül a `width: 1%` értelmét veszti. */
    .od-cardtable > tbody > tr > td.od-oinv-flag { flex: 0 0 auto; width: auto; }
    .od-cardtable > tbody > tr > td.od-oinv-flag + td { flex: 1 1 auto; min-width: 0; }

    /* ── Érintési célpont a kártyákon ──
       ⚠️ **Mérve: a művelet-gombok 30 × 36 px-esek voltak**, a 44 px-es küszöb alatt.
       ⚠️ A SZÉLESSÉGET is ki kell tolni, nem csak a magasságot – ikonos gombnál a
       puszta `min-height` kevés (ezt a Foglalkoztatottak eszköznél már megmérte a
       projekt: ott 36 × 44 maradt volna).
       ⚠️ A szűkítés `.od-cardtable`-re szól, NEM az összes `.od-action-btn`-re: az
       asztali táblázatok sűrű művelet-oszlopát nem szabad széttolni. */
    .od-cardtable .od-action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* ── Lenyíló RÉSZLETSOROK: teljes szélességű panelek, nem kártyák ──
       ⚠️ Ezek `colspan`-os sorok (az adónem tételei, illetve a számla tételsorai).
       Kártyává alakítva a bennük lévő SAJÁT táblázat kapná a kártya-keretet, és a
       panel egy kártyán belüli kártyának látszana. */
    .od-cardtable > tbody > tr.od-ta-detail,
    .od-cardtable > tbody > tr.od-oinv-detail-row {
        display: block;
        padding: 0;
        margin: -.35rem 0 .55rem;
        border: 0;
        background: none;
    }

    .od-cardtable > tbody > tr.od-ta-detail > td,
    .od-cardtable > tbody > tr.od-oinv-detail-row > td {
        display: block;
        border-radius: var(--od-radius);
    }
}

/* ── Évi keretek: melyik érték él most (Admin) ───────────────────────────────
   ⚠️ SAJÁT névtér, nem az `od-dd-badge-` újrahasznosítása: az az ÁTVILÁGÍTÁS
   monitorozásáé, és egy kész osztály más célra pontosan a 18. megtanult hiba.
   A színek viszont SZÁNDÉKOSAN azonosak az ottaniakkal – ugyanaz a jelentés
   (rendben / előre jelzett) ne nézzen ki kétféleképpen a rendszerben.          */
.od-tp-badge-live   { background: #DCFCE7; color: #166534; }
.od-tp-badge-future { background: #DBEAFE; color: #1E40AF; }

.od-tp-badge-live,
.od-tp-badge-future {
    font-weight: 600;
    font-size: .72rem;
    padding: .18rem .45rem;
    border-radius: 999px;
}

/* ── Értékhatár-figyelő (/finances) ──────────────────────────────────────────
   ⚠️ SAJÁT névtér (`od-rt-`), nem az `od-inv-` bővítése: az a NAV-számla-listáé.
   Egy kész osztály más célra pontosan a 18. megtanult hiba.                     */

/* A kártya LENYITÓ FEJLÉCE. ⚠️ SAJÁT névtér (`od-thr-`), nem az `od-collapse-`
   bővítése: az egy KÁRTYÁN BELÜLI, szürke hátterű blokké (Kézi megadás,
   ONYA-útmutató) – ez maga a kártya fejléce, fehér háttérrel és a Bootstrap
   `card-body` paddingjával (1rem), hogy a nyitott tartalommal egy vonalban álljon.
   ⚠️ A NYILAT viszont ONNAN vesszük át (`od-collapse-arrow`): az ugyanaz a dolog
   (nyitásjelző), és lemásolva a két forgatás előbb-utóbb széttartana.            */
.od-thr-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
    cursor: pointer;
    /* A böngésző alapértelmezett háromszögét levesszük – sajátot rajzolunk. */
    list-style: none;
}

.od-thr-head::-webkit-details-marker { display: none; }
.od-thr-head:hover { background: var(--od-gray-50); border-radius: var(--od-radius); }

.od-thr-title { font-weight: 600; font-size: .95rem; }

/* ⚠️ `margin-left: auto` tolja a jobb szélre – de a `flex-wrap` miatt keskeny
   képernyőn SAJÁT SORBA kerül, nem szorítja össze a címet.                       */
.od-thr-sum {
    margin-left: auto;
    font-size: .82rem;
    color: var(--od-gray-500);
}

/* A csukott fejlécen is látszó jelzés.
   ⚠️ BOROSTYÁN, nem piros: a „közeledik", a „hiányzó értékhatár" és a „hiányos
   bevétel" nem hiba, hanem tudnivaló. A pirosat az ÁTLÉPÉS-nek tartjuk fenn –
   közös színnel a szem nem tudná megkülönböztetni a kettőt, és pár hét alatt
   mindkettőt megszokná. Ugyanaz a szín, mint az `is-near` soré.                  */
.od-thr-flag {
    font-size: .78rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    white-space: nowrap;
}

/* ⚠️ **RÁCS, nem egymás alatti sávok.** Három teljes szélességű sor egy 1600 px-es
   lapon fölöslegesen magas kártyát adott: a tartalom a bal harmadban ült, a jobb
   kétharmad üresen. Az `auto-fit` mindig egyenlő oszlopokat ad, és a magasságot
   soronként maga osztja el – `h-100` sem kell hozzá.
   ⚠️ A `minmax(min(320px, 100%), 1fr)` belső `min()`-je KÖTELEZŐ: puszta
   `minmax(320px, 1fr)` mellett egy 320 px-nél keskenyebb képernyőn az oszlop nem
   tudna a tartalma alá menni, és a LAP csordulna túl vízszintesen.                */
.od-rt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: .75rem;
}

/* ⚠️ NINCS `margin-bottom` és nincs `:last-child` kivétel: a térközt a rács `gap`-je
   adja. Margóval a kettő ÖSSZEADÓDNA, és a sorok közt más rés lenne, mint az
   oszlopok közt. (A korábbi, egymás alatti elrendezés margója itt már halott szabály
   lenne – az pedig szándéknak látszik a következő olvasónak.)
   ⚠️ `min-width: 0`: a rács-elem alapértelmezett `min-width: auto`-ja megakadályozná,
   hogy a tartalma alá zsugorodjon – egy hosszú, nem törhető összeg kitolná az oszlopot. */
.od-rt-row {
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--od-gray-200);
    border-left-width: 4px;
    border-radius: var(--od-radius);
}

/* A színek MEGEGYEZNEK az átvilágítás-monitor kosaraiéval: ugyanaz a jelentés
   (rendben / közeledik / lejárt) ne nézzen ki kétféleképpen a rendszerben.       */
.od-rt-row.is-approaching { border-left-color: #D97706; background: #FFFBEB; }
.od-rt-row.is-near        { border-left-color: #D97706; background: #FEF3C7; }
.od-rt-row.is-over        { border-left-color: #DC2626; background: #FEE2E2; }

/* Az SZJA-mentes keret sora IBOLYA, nem a plafonok borostyán/piros skáláján.
   ⚠️ Ez MÁS FAJTA dolog: a plafon átlépése baj (megszűnik az adózási mód), a
   kereté viszont a normális működés – a vállalkozó jól keresett, és onnantól
   adózik. Ugyanabban a színskálában a szem riasztásnak olvasná, és pár hét alatt
   megszokná, hogy a jelzés nem jelent semmit – épp ott gyengítve, ahol számít.
   ⚠️ Az IBOLYA a projekt bevált „más fajta dolog" színe (`od-tile-missing`, az
   átvilágítás-monitor „Nincs átvilágítás" kosara), és MINDKÉT felületen ugyanez –
   a kék az irányítópulton MÁR foglalt („közeledik" szint), tehát ott ütközne.    */
.od-rt-row.is-taxfree { border-left-color: var(--od-taxfree); background: #F3EEFF; }

/* A sáv FIX magasságú: enélkül a sorok magassága a kitöltöttségtől függene, és a
   kártya minden betöltéskor máshogy nézne ki.                                    */
.od-rt-bar {
    height: 8px;
    margin-top: .4rem;
    border-radius: 999px;
    background: var(--od-gray-200);
    overflow: hidden;
}

.od-rt-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--od-gray-500);
}

.od-rt-row.is-approaching .od-rt-fill,
.od-rt-row.is-near .od-rt-fill { background: #D97706; }
.od-rt-row.is-over .od-rt-fill { background: #DC2626; }
.od-rt-row.is-taxfree .od-rt-fill { background: var(--od-taxfree); }

/* ── A 100%-os határ jelölése túllépéskor ────────────────────────────────────
   Túllépésnél a sáv EGÉSZE a tényleges arány: a határ alatti rész borostyán, a
   jeltől a végéig piros, a kettő közt szaggatott piros vonal.

   ⚠️ A `has-over` osztály KÖTELEZŐ a szelektorokban, nem elég az `is-over`. Az
   utóbbi a SZINT (>= 100%), és PONTOSAN 100%-nál nincs mit jelölni – ott a tele
   piros sáv marad. A kettőt összevonva a határon álló vállalkozás sávja némán
   borostyánra váltana, vagyis ELVESZÍTENÉ a piros jelzést.                     */
.od-rt-bar { position: relative; }

/* ⚠️ Enélkül a jel és a túllépő szakasz PIROSON PIROS lenne – vagyis pont az nem
   látszana, amiért az egész jelölés készült.                                    */
.od-rt-row.is-over .od-rt-bar.has-over .od-rt-fill { background: #D97706; }

.od-rt-over {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: #DC2626;
}

/* ⚠️ A szaggatást `repeating-linear-gradient` adja, NEM `border-left: dashed`. A
   sáv 8 px magas: ott a keret-szaggatás egyetlen vonást adna, tehát nem látszana
   szaggatottnak. Így 2 px vonás / 2 px rés → négy szakasz.
   ⚠️ A rés FEHÉR, nem átlátszó: a vonal a borostyán és a piros HATÁRÁN áll, tehát
   a jobb fele piroson ülne – átlátszó réssel ott beleolvadna a háttérbe.        */
.od-rt-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(to bottom, #DC2626 0 2px, #FFFFFF 2px 4px);
}

/* ⚠️ Az SZJA-mentes keret jelölése IBOLYA, nem piros: a keret elfogyása a NORMÁLIS
   működés, nem hiba – ezért nem lesz belőle teendő sem. Pirosra véve minden ősszel
   ott állna, és pár hét alatt elszürkítené a mellette lévő VALÓDI jelzéseket.
   A GEOMETRIA viszont ugyanaz: e nélkül ugyanabban a kártyában az egyik sáv
   megmutatná a túllépés mértékét, a másik nem.
   ⚠️ Ütközés nincs a fenti `is-over` szabállyal: a mentes keret sora sosem kap
   szint-osztályt, azt a markup fixen `is-taxfree`-ként rendereli.                */
.od-rt-row.is-taxfree .od-rt-bar.has-over .od-rt-fill { background: #A78BFA; }
.od-rt-row.is-taxfree .od-rt-over { background: var(--od-taxfree); }
.od-rt-row.is-taxfree .od-rt-mark {
    background: repeating-linear-gradient(to bottom, var(--od-taxfree) 0 2px, #FFFFFF 2px 4px);
}

/* ⚠️ `tabular-nums`: a százalék a sáv fölött áll, és arányos számjegyekkel a
   sorok közt ugrálna, ami mozgásnak látszana ott, ahol nincs változás.           */
.od-rt-pct {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* „Időarányos" jelölés a sor nevén.
   ⚠️ SEMLEGES szürke, nem borostyán és nem piros: ez nem figyelmeztetés, hanem a
   plafon SZÁMÍTÁSI MÓDJA – tény, nem baj. Riasztó színnel a szem hibának olvasná
   egy teljesen szabályos, év közben indult vállalkozásnál, és a valódi jelzések
   (közeledik / átlépve) veszítenék el a súlyukat.                                 */
.od-rt-flag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Fizetési naptár (/finances/payments) ────────────────────────────────────
   ⚠️ SAJÁT névtér (`od-pay-`), nem az `od-ta-` (adófolyószámla) bővítése: az egy
   MÁSIK lap táblázatos elrendezéséé. A SZÍNEKET viszont onnan vesszük át
   (`od-ta-debt`, `od-ta-over`) – ugyanaz a szám ugyanabban a színben, különben a
   szem nem kötné össze a két felületet.                                         */
.od-pay-row {
    display: grid;
    grid-template-columns: 1fr auto minmax(0, 15rem);
    gap: .75rem;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-pay-row:last-child { border-bottom: none; }

.od-pay-row.is-overdue { background: #FEF2F2; }

.od-pay-amount {
    font-weight: 600;
    /* ⚠️ `tabular-nums`: arányos számjegyekkel az egymás alatti összegek nem esnének
       egy vonalba, és a szem nem tudná összehasonlítani őket.                     */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.od-pay-when { font-weight: 600; }
.od-pay-row.is-overdue .od-pay-when { color: var(--od-danger); }

/* A TELJES számlaszám a kattintható felület, nem egy külön apró ikon: ezt a számot
   a felhasználó egy utaláshoz másolja át, tehát nagy célpont kell.                */
.od-pay-copy {
    border: 1px solid transparent;
    background: none;
    padding: .25rem .4rem;
    border-radius: var(--od-radius);
    font-size: .85rem;
    text-align: left;
    width: 100%;
}

.od-pay-copy:hover {
    border-color: var(--od-gray-300);
    background: var(--od-gray-100);
}

/* ⚠️ 760 px alatt EGY hasáb: három oszlopban a számlaszámnak ~90 px maradna, ami
   olvashatatlan – pedig épp azt kell átmásolni.                                  */
@media (max-width: 760px) {
    .od-pay-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .od-pay-amount { text-align: left; }

    /* Érintési célpont – a másolás itt a lap egyetlen valódi művelete. */
    .od-pay-copy { min-height: 44px; }
}

/* ⚠️ `min-width: 0` a rács-elemeken KÖTELEZŐ: a grid item alapértelmezett
   `min-width: auto` értéke MEGAKADÁLYOZZA, hogy a tartalma alá zsugorodjon – egy
   hosszú feladat-megnevezés így szétfeszítené a rácsot, és a számlaszám oszlopa
   kiszorulna. Ugyanaz a csapda, mint a flexes hasáboknál a PDF szerkesztőben.   */
.od-pay-main {
    min-width: 0;
    overflow-wrap: anywhere;
}

.od-pay-account {
    min-width: 0;
    text-align: right;
}

@media (max-width: 760px) {
    .od-pay-account { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL: A SZŰRŐSÁV EGY GOMB MÖGÉ  (`od-inv-filterpanel`)

   ⚠️ **Mérve a felhasználó telefonján**: a `/finances` hat vezérlője egymás alá
   tördelve a képernyő nagyobbik felét elvette – a kereső, az irány-szegmens, a
   dátum-alap + időszak, a pénznem, a kép-szűrő és a „Csak a korrekciók" után a
   LISTÁBÓL alig maradt látható valami. Számítógépen ugyanez EGY sorba fér, ezért
   ott nincs is mit javítani.

   ⚠️ **A NAGY NÉZET KÉPPONTRA VÁLTOZATLAN**, és ez a szabály lényege: a panel
   576 px fölött `display: contents`, tehát dobozként nem is létezik – a gyerekei
   közvetlenül a szülő `d-flex … gap-2 flex-wrap` sávjának elemei maradnak,
   ugyanazzal a térközzel és tördeléssel. A gomb ott `display: none`.

   ⚠️ **A DARABSZÁM a gombon KÖTELEZŐ.** A becsukott panel mögött a beállított
   szűrő láthatatlan lenne: a felhasználó rövid listát látna, és nem tudná, miért.
   Ez a társító lap tölcsér-gombjánál MÁR EGYSZER megtörtént, és ott ezért is
   került ki a panel mögül a szűrő – itt hat vezérlővel az nem járható út, tehát
   a jelzést kell megadni helyette.

   ⚠️ **A KERESŐ a panelen KÍVÜL marad.** Az a leggyakrabban használt vezérlő;
   gomb mögé téve minden keresés két koppintás lenne. Ezért nem is számít bele a
   darabszámba (lásd `InvoiceListViewModel.ActiveFilterCount`).
   ═════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `display: contents`, nem `display: flex`: így a panel nem hoz be egy plusz
   flex-szintet, amitől a gyerekei a nagy nézetben MÁSKÉNT tördelnének. */
.od-inv-filterpanel { display: contents; }

/* A gomb 576 px fölött nem létezik. */
.od-inv-filter-toggle { display: none; }

@media (max-width: 575.98px) {
    .od-inv-filter-toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        min-height: 44px;               /* érintési célpont */
        padding: .5rem .75rem;
        border: 1px solid var(--od-gray-300);
        border-radius: var(--od-radius);
        background: var(--od-white);
        color: var(--od-gray-700);
        font-size: .95rem;
        font-weight: 500;
    }

    /* ⚠️ Beállított szűrőnél a GOMB MAGA is jelez, nem csak a szám: becsukott
       panel mellett ez az egyetlen nyom, hogy a lista szűkítve van. */
    .od-inv-filter-toggle:has(.od-inv-filter-badge) {
        border-color: var(--od-primary);
        color: var(--od-primary);
    }

    .od-inv-filter-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 .35rem;
        border-radius: 999px;
        background: var(--od-primary);
        color: var(--od-white);
        font-size: .78rem;
        font-weight: 600;
    }

    .od-inv-filter-caret { margin-left: auto; }

    /* ⚠️ `display: none`, nem `height: 0` + `overflow: hidden`: a becsukott panel
       vezérlőit a billentyűzet és a képernyőolvasó sem érheti el. Fél-rejtve a
       Tab-bal olyan mezőkbe lehetne lépni, amiket a felhasználó nem is lát. */
    .od-inv-filterpanel {
        display: none;
        flex-direction: column;
        gap: .5rem;
        width: 100%;
    }

    .od-inv-filterpanel.is-open { display: flex; }

    /* ⚠️ Az ikon-szegmensek, a jelölőnégyzet és a törlés gomb a TARTALMUK
       szélessége. A `stretch` (a column-flex alapértelmezése) teljes szélességre
       nyújtaná őket, és a három 36/44 px-es gomb egy ~311 px-es dobozban a bal
       szélre húzódna, jobbra üres sávval – vezérlőnek se néznének ki. */
    .od-inv-filterpanel > .od-dirseg,
    .od-inv-filterpanel > .form-check,
    .od-inv-filterpanel > .btn { align-self: flex-start; }

    /* A dátum-alap + időszak páros viszont IGENIS töltse ki a sort: az a kettő
       együtt olvasandó („MELYIK dátum szerint, MELYIK időszakban"). */
    .od-inv-dates { width: 100%; }

    /* ⚠️ ÉRINTÉSI CÉLPONTOK – mindkettőt a MÉRÉS hozta ki, nem elvi megfontolás:
       az időszak-gomb 34 px, a jelölőnégyzet 16 × 16 px volt 375 px-en. A szűkítés
       SZÁNDÉKOSAN a panelre szól, nem a megosztott komponensre: a `DateRangePicker`
       máshol (társító lap) is fut, és egy MÁR MÉRT elrendezést nem mozdítunk el
       bizonyíték nélkül. */
    .od-inv-filterpanel .od-drp-trigger { min-height: 44px; }

    /* ⚠️ A jelölőnégyzetnél nem a NÉGYZET a célpont, hanem a CÍMKE (`for`-ral kötve).
       A Bootstrap `float: left` + negatív margója flex-elemként hatástalan, ezért a
       bal padding is kiesik – a rést a `gap` adja. */
    .od-inv-filterpanel > .form-check {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        margin-bottom: 0;
        padding-left: 0;
    }

    .od-inv-filterpanel > .form-check .form-check-input {
        float: none;
        margin: 0;
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
    }

    .od-inv-filterpanel > .form-check .form-check-label { padding: .6rem 0; }
}

/* ============================================================
   ÚJRACSATLAKOZÁSI ABLAK  (od-rc-)

   A Blazor beépített ablakát váltja ki, hogy a szöveg MAGYAR legyen – a
   keretrendszerbe égetett angol mondatokat lefordítani nem lehet.
   A markup az App.razor-ban van, a gombok kezelője a js/reconnect.js-ben.

   ⚠️ A `components-reconnect-*` osztályok KÖTÖTTEK: a `blazor.web.js` teszi ki
   őket, tehát nem nevezhetők át. A saját nevek az `od-rc-` névtérben állnak.
   ============================================================ */

/* ⚠️ Az ALAPÁLLAPOT REJTETT, és ez nem óvatoskodás: a keretrendszer `hide()`-ja NEM
   tünteti el az elemet, csak `components-reconnect-hide` osztályt tesz rá – az
   elrejtés innentől a CSS dolga. Osztály nélkül (minden lapbetöltéskor) is rejtve
   kell lennie, különben az ablak MINDEN oldalon ott ülne a képernyő közepén. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    /* A toast (1080) fölött: ha nincs kapcsolat, minden más üzenet másodlagos. */
    z-index: 1090;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .55);
    color-scheme: light only;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
}

.od-rc-card {
    width: min(420px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    background: var(--od-white);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-lg);
    text-align: center;
}

/* Állapotonként EGY blokk látszik. ⚠️ A `…-retrying` osztályt a keretrendszer a
   `…-show` MELLÉ teszi, nem helyette – ezért kell a 3. szabály, ami a magasabb
   specifikusságával (0-3-0 a 0-2-0 ellen) kikapcsolja alatta az első blokkot. */
.od-rc-block { display: none; }
.components-reconnect-show .od-rc-b-show { display: block; }
.components-reconnect-show.components-reconnect-retrying .od-rc-b-show { display: none; }
.components-reconnect-retrying .od-rc-b-retrying { display: block; }
.components-reconnect-failed .od-rc-b-failed { display: block; }
.components-reconnect-rejected .od-rc-b-rejected { display: block; }
.components-reconnect-paused .od-rc-b-paused { display: block; }
.components-reconnect-resume-failed .od-rc-b-resume-failed { display: block; }

/* A `retrying` blokkon belül KÉT szöveg váltakozik. ⚠️ A keretrendszer a `…-retrying`
   osztályt RAJTA HAGYJA az ablakon, amikor a visszaszámlálás nullára ér és épp fut a
   következő kísérlet – MÉRVE: a felirat „Újrapróbálkozás 0 másodperc múlva" lett, vagyis
   épp a dolgozó állapotban hazudott. Az `od-rc-counting` jelzőt a js/reconnect.js billenti
   a keretrendszer SAJÁT állapot-eseményéből. */
.od-rc-wait,
.od-rc-now { display: none; }
#components-reconnect-modal.od-rc-counting .od-rc-wait { display: block; }
#components-reconnect-modal:not(.od-rc-counting) .od-rc-now { display: block; }

/* A pörgő CSAK a két dolgozó állapotban – hibánál egy örökké pörgő jelzés azt
   sugallná, hogy még történik valami. */
.od-rc-spinner { display: none; }
.components-reconnect-show .od-rc-spinner,
.components-reconnect-retrying .od-rc-spinner {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 3px solid var(--od-gray-200);
    border-top-color: var(--od-primary);
    border-radius: 50%;
    animation: od-rc-spin .9s linear infinite;
}

@keyframes od-rc-spin {
    to { transform: rotate(360deg); }
}

/* Az animáció csak kíséret: az információt a szöveg és a számláló hordozza. */
@media (prefers-reduced-motion: reduce) {
    .components-reconnect-show .od-rc-spinner,
    .components-reconnect-retrying .od-rc-spinner { animation: none; }
}

.od-rc-title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--od-gray-800);
}

.od-rc-text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--od-gray-600);
}

.od-rc-hint {
    margin: .75rem 0 0;
    font-size: .85rem;
    color: var(--od-gray-500);
    /* A számláló másodpercenként változik – arányos számjegyekkel a szöveg ugrálna. */
    font-variant-numeric: tabular-nums;
}

.od-rc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem;
}

.od-rc-btn {
    min-height: 44px;
    padding: .5rem 1.1rem;
    border: 1px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    background: var(--od-white);
    color: var(--od-gray-700);
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
}

.od-rc-btn:hover { background: var(--od-gray-50); }

.od-rc-btn-primary {
    border-color: var(--od-primary);
    background: var(--od-primary);
    color: var(--od-white);
}

.od-rc-btn-primary:hover { background: var(--od-primary-dark); }

/* ============================================================
   RENDSZERNAPLÓ  (od-audit-)
   ============================================================ */

.od-audit-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--od-gray-100);
    color: var(--od-gray-700);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ⚠️ A biztonsági szempontból érdekes műveletek (letöltés, export, megtekintés)
   BOROSTYÁN, nem piros: azok nem hibák, hanem olyan tények, amiket ÉRDEMES megnézni.
   Ugyanaz a különbségtétel, mint az átvilágítás-monitor „Nincs átvilágítás" kosaránál. */
.od-audit-badge.is-warn {
    background: #FEF3C7;
    color: #92400E;
}

/* A piros KIZÁRÓLAG az elutasított és a hibára futott műveleté. */
.od-audit-badge.is-bad {
    background: #FEE2E2;
    color: #B91C1C;
}

/* ⚠️ A megváltozott mezők listája MEZŐNEVEKBŐL áll, ami hosszú lehet. Két sor után
   csonkolunk – a teljes lista a `title`-ben marad. */
.od-audit-fields {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ============================================================
   TÁRHELY-KERET (vállalkozásonként) – a Dokumentumok lap sávja
   ============================================================
   ⚠️ SAJÁT névtér: az `od-rt-` az értékhatároké, az `od-dc-bar-` az irányítópult
   kártyáié. Egy kész osztály MÁS célra pontosan a 18. megtanult hiba.                   */
.od-quota {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: #fff;
    padding: .6rem .9rem;
}

.od-quota-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.od-quota-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--od-gray-600);
}

/* ⚠️ `tabular-nums`: a sáv fölötti szám gépeléskor/frissüléskor NE ugráljon vízszintesen.
   Arányos számjegyekkel a „12,4 MB" és a „98,1 MB" más széles, és a felirat rángatna.   */
.od-quota-value {
    font-size: .85rem;
    color: var(--od-gray-600);
    font-variant-numeric: tabular-nums;
}

.od-quota-pct {
    color: var(--od-gray-500);
    margin-left: .15rem;
}

.od-quota-track {
    margin-top: .4rem;
    height: 6px;
    border-radius: 999px;
    background: var(--od-gray-200);
    overflow: hidden;
}

/* ⚠️ `display: block` KELL: a `<span>` alapból soron belüli, azon a `width` nem hat –
   a sáv NÉMÁN nulla széles maradna, és a szabály hibátlannak látszana.                  */
.od-quota-fill {
    display: block;
    height: 100%;
    background: var(--od-primary);
    border-radius: inherit;
}

.od-quota-note {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--od-gray-600);
}

/* ⚠️ A „Kuka megnyitása" `<button>`, nem `<a>`: statikus href-je nem lenne (a kuka
   ugyanazon a lapon, állapotváltással nyílik). A link-megjelenést kézzel adjuk vissza. */
.od-quota-link {
    text-decoration: underline;
    font-size: .8rem;
}

/* ── 80% fölött ──────────────────────────────────────────────────────────── */
.od-quota.is-warn {
    border-color: #FDE68A;
    background: #FFFBEB;
}

.od-quota.is-warn .od-quota-fill { background: var(--od-warning); }
.od-quota.is-warn .od-quota-label,
.od-quota.is-warn .od-quota-note { color: #92400E; }

/* ── Betelt ──────────────────────────────────────────────────────────────── */
.od-quota.is-full {
    border-color: #FECACA;
    background: #FEF2F2;
}

.od-quota.is-full .od-quota-fill { background: var(--od-danger); }
.od-quota.is-full .od-quota-label,
.od-quota.is-full .od-quota-note { color: #B91C1C; }

/* ---------- Üzemeltetői közlemények (od-ann-) ----------
   ⚠️ SAJÁT névtér, NEM az `od-dash-` bővítése. Az a TEENDŐLISTÁÉ (sorok bal színsávval,
   „Emlékeztess később" gombbal); ez más fajta dolog, saját kártyával és X gombbal. Egy kész
   osztály MÁS célra pontosan a 18. megtanult hiba – ott a PDF-szerkesztő vette át a
   munkaterület `.od-tool-panel` osztályát, és a munkafelület nullára esett össze.

   ⚠️ A `.od-dash-band` és a `.od-dash-band-title` viszont KÖZÖS: a sáv kerete és címsora
   ugyanaz a fajta dolog, mint a Teendőké – lemásolva a kettő előbb-utóbb széttartana, és a
   két sáv címe eltérő magasságban ülne.
   ------------------------------------------------------------------------------------- */

.od-ann-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.od-ann-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1rem;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);

    /* A bal színsáv adja a fajtát – ugyanaz a jelrendszer, mint a teendőknél. */
    border-left: 4px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-sm);
}

.od-ann-icon { font-size: 1.25rem; line-height: 1.5; color: var(--od-gray-400); }

.od-ann-body { flex: 1; min-width: 0; }

.od-ann-headline { font-weight: 600; color: var(--od-gray-800); }

/* ⚠️ A hír CÍME halványabb és kisebb: a FAJTA a főcím. */
.od-ann-title { font-size: .85rem; color: var(--od-gray-500); margin-top: .15rem; }

.od-ann-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.od-ann-read { white-space: nowrap; }

/* ⚠️ Az X SZÁNDÉKOSAN halvány és keret nélküli: nem művelet-gomb, hanem elrejtés. Piros
   vagy kiemelt gombként versenyezne az „Elolvasom" gombbal, pedig az a fontosabb. */
.od-ann-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--od-radius);
    background: transparent;
    color: var(--od-gray-400);
    transition: var(--od-transition);
}

.od-ann-close:hover {
    background: var(--od-gray-100);
    color: var(--od-gray-700);
}

.od-ann-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--od-gray-500);
    text-decoration: none;
}

.od-ann-more:hover { color: var(--od-primary); text-decoration: underline; }

/* ── A négy fajta színe ─────────────────────────────────────────────────────────────
   ⚠️ A `--od-success-xlt` és a `--od-primary-xlt` MÁR LÉTEZIK; a másik kettő halvány
   hátterét itt írjuk ki nyersen, mert a palettában nincs `danger-xlt`/`warning-xlt`. Ha
   valaha bekerülnek, EZEKET kell változóra cserélni – nem újakat felvenni melléjük. */

.od-ann-card.is-update { border-left-color: var(--od-success); background: var(--od-success-xlt); }
.od-ann-card.is-update .od-ann-icon { color: var(--od-success); }

.od-ann-card.is-maintenance { border-left-color: var(--od-warning); background: #FFFBEB; }
.od-ann-card.is-maintenance .od-ann-icon { color: var(--od-warning); }

.od-ann-card.is-incident { border-left-color: var(--od-danger); background: #FEF2F2; }
.od-ann-card.is-incident .od-ann-icon { color: var(--od-danger); }

.od-ann-card.is-info { border-left-color: var(--od-primary-light); background: var(--od-primary-xlt); }
.od-ann-card.is-info .od-ann-icon { color: var(--od-primary); }

/* ── A /kozlemenyek lap ─────────────────────────────────────────────────────────────── */

.od-ann-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.od-ann-post {
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    box-shadow: var(--od-shadow-sm);
    padding: 1.25rem;

    /* ⚠️ A FIX navbar alá görgetve a horgonyzott kártya teteje a sáv MÖGÉ csúszna. A
       `scroll-margin-top` ezt tolja le – enélkül a link a hírre visz, de a címe nem
       látszik, és a felhasználó azt hinné, rossz helyre került. */
    scroll-margin-top: calc(var(--od-navbar-h) + 1rem);
}

.od-ann-post.is-update { border-left-color: var(--od-success); }
.od-ann-post.is-maintenance { border-left-color: var(--od-warning); }
.od-ann-post.is-incident { border-left-color: var(--od-danger); }
.od-ann-post.is-info { border-left-color: var(--od-primary-light); }

/* ⚠️ A HORGONYZOTT hír kiemelése. Enélkül a felhasználó egy hosszú listában nem tudná,
   MELYIK hírhez jött.

   ⚠️ **`is-target` OSZTÁLY, NEM `:target` – és ez MÉRT hiba javítása.** A `:target` a
   fragment-NAVIGÁCIÓ pillanatában értékelődik ki; ez a lap viszont interaktív, tehát az
   irányítópultról érkezve csak `pushState` történik, és a kártya csak KÉSŐBB kerül a DOM-ba.
   Mérve: a hír kirenderelődött, a `:target` viszont NEM illeszkedett (`null`) – a kiemelés
   némán elmaradt. Az osztályt a szerver adja ki, tehát mindkét belépési úton (teljes
   betöltés ÉS interaktív navigáció) ugyanúgy működik. */
.od-ann-post.is-target {
    box-shadow: var(--od-shadow);
    border-color: var(--od-primary-light);
}

.od-ann-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.od-ann-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

.od-ann-badge.is-update { background: var(--od-success-xlt); color: #15803D; }
.od-ann-badge.is-maintenance { background: #FEF3C7; color: #92400E; }
.od-ann-badge.is-incident { background: #FEE2E2; color: #B91C1C; }
.od-ann-badge.is-info { background: var(--od-primary-xlt); color: #1D4ED8; }

.od-ann-post-date { font-size: .82rem; color: var(--od-gray-500); }

.od-ann-post-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--od-gray-800);
    margin: 0 0 .6rem;
}

.od-ann-window {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
    border-radius: var(--od-radius);
    background: #FFFBEB;
    color: #92400E;
    font-weight: 600;
    font-size: .9rem;
}

/* ⚠️ A LEZAJLOTT karbantartás semlegessé válik – de NEM tűnik el: ez az archívum, és a
   felhasználónak vissza kell tudnia keresni, mi volt. */
.od-ann-window.is-past {
    background: var(--od-gray-100);
    color: var(--od-gray-500);
    font-weight: 500;
}

.od-ann-past-tag {
    font-size: .78rem;
    font-weight: 500;
    color: var(--od-gray-500);
}

.od-ann-post-body { color: var(--od-gray-700); }
.od-ann-post-body :last-child { margin-bottom: 0; }

.od-ann-post-foot {
    margin-top: 1rem;
    padding-top: .6rem;
    border-top: 1px solid var(--od-gray-100);
    font-size: .8rem;
    color: var(--od-gray-500);
}

/* ── Admin lista ────────────────────────────────────────────────────────────────────── */

.od-ann-admin-title { font-weight: 600; color: var(--od-gray-800); }
.od-ann-admin-sub { font-size: .82rem; color: var(--od-gray-500); margin-top: .1rem; }

.od-ann-state {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}

.od-ann-state.is-live { background: var(--od-success-xlt); color: #15803D; }
.od-ann-state.is-draft { background: var(--od-gray-100); color: var(--od-gray-500); }

/* ⚠️ A lábléc gombjai TÖRDELHETNEK: négy parancs is állhat egymás mellett (Visszavonás,
   Újra megmutatom, Mégse, Mentés), ami keskeny ablakban nem fér ki. */
.od-ann-footer { flex-wrap: wrap; }

@media (max-width: 575.98px) {
    /* ⚠️ Érintési célpont. Ikonos gombnál a SZÉLESSÉGET is ki kell tolni – a puszta
       `min-height` kevés, és a mérés a foglalkoztatottak eszközénél pontosan ezt hozta ki
       (36 × 44 px maradt volna). */
    .od-ann-close { width: 44px; height: 44px; }

    /* A kártya tördel: a gombok külön sorba kerülnek, teljes szélességben. */
    .od-ann-card { flex-wrap: wrap; }
    .od-ann-actions { width: 100%; }
    .od-ann-read { flex: 1; }
}

/* =============================================================================
   XP ÉS TOKEN (`od-rw-`)

   SAJÁT névtér, nem a meglévők bővítése: a jelvények a NAVBARBAN és a `/jutalmak`
   lapon is megjelennek, két különböző környezetben. Egy kész osztály más célra
   pontosan a 18. megtanult hiba.
   ============================================================================= */

/* ── A navbar gombján lévő jelvények ─────────────────────────────────────── */

/* ⚠️ A jelvények a NÉV ALATT állnak, az e-mail cím helyén – ezért NINCS bal térköz
   (az a név MELLETTI elhelyezés maradéka lenne), csak egy hajszálnyi felső, hogy a
   két sor ne tapadjon össze. */
.od-rw-chips {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
}

.od-rw-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
    background: var(--od-primary-xlt);
    color: var(--od-primary);

    /* ⚠️ A jelvény sosem zsugorodhat a tartalma alá: a navbar flex-sorában a
       `flex-shrink` alapértéke 1, amitől a szám levágódna – és épp az a szám a
       tartalom. Ugyanaz a csapda, mint a `/receipts` sztornó-chipjénél. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* ⚠️ A token BOROSTYÁN, nem kék: a szint és az egyenleg KÉT különböző dolog, és egy
   színben a szem egyetlen adatnak olvasná őket. */
.od-rw-chip-token {
    background: #FEF3C7;
    color: #92400E;
}

/* A szint NEVE a jelvényen belül. ⚠️ Csak asztali nézetben: keskeny navbarban a
   „Kiemelt partner" ~90 képpontot kér, és a gomb amúgy is a képernyő majdnem teljes
   szélességét kitölti – ott a szám és az ikon önmagában is elég, a nevet a legördülő
   fejléce mondja ki. Ugyanaz a feltételes minta, mint a chevronnál. */
.od-rw-chip-name { display: none; }

/* ⚠️ A navbar kinyitási töréspontjával EGYÜTT (1200 px, `xl`). */
@media (min-width: 1200px) {
    /* ⚠️ `block`, nem `inline` – a szülő (`.od-rw-chip`) FLEX konténer, ami a gyerekei
       `display` értékét amúgy is blokkosítja („blockified"). `inline`-t írva a forrás mást
       mondana, mint amit a böngésző csinál – MÉRVE: a számított érték `block`. */
    .od-rw-chip-name { display: block; }
}

/* ── A profil-menü fejléce ───────────────────────────────────────────────── */

/* ⚠️ `<a>`-ként a böngésző alapértelmezett link-kékje FELÜLÍRNÁ a belső színeket –
   ezért kell a `color: inherit` és a `text-decoration: none`. Ugyanaz a tanulság,
   mint az irányítópult NAV-egyenleg sávjánál. */
.od-rw-head {
    display: block;
    padding: .5rem 1rem .75rem;
    color: inherit;
    text-decoration: none;
    transition: background var(--od-transition);
}

.od-rw-head:hover,
.od-rw-head:focus-visible {
    background: var(--od-gray-50);
    color: inherit;
}

.od-rw-level {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.od-rw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--od-primary);
    color: var(--od-white);
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.od-rw-badge-lg {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: flex-elem alapértelmezett `min-width: auto`-ja
   megakadályozná, hogy a hosszú szintnév a tartalma alá zsugorodjon – a jelvény
   helyett a szöveg lógna ki. */
.od-rw-level-text { min-width: 0; }

.od-rw-name {
    font-weight: 600;
    color: var(--od-gray-800);
    line-height: 1.2;
}

.od-rw-name-lg { font-size: 1.25rem; }

.od-rw-sub {
    font-size: .8rem;
    color: var(--od-gray-500);
}

/* ── Haladássáv ──────────────────────────────────────────────────────────── */

.od-rw-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--od-gray-200);
    overflow: hidden;
    margin-top: .5rem;
}

.od-rw-bar-lg { height: 10px; }

.od-rw-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--od-primary);
}

/* ── Pénztárca ───────────────────────────────────────────────────────────── */

.od-rw-wallet {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--od-gray-200);
    font-size: .85rem;
    color: var(--od-gray-600);
}

.od-rw-wallet > .bi { color: var(--od-warning); }

.od-rw-wallet-value {
    font-weight: 700;
    color: var(--od-gray-800);
}

/* ⚠️ A cégnév CSONKOL, nem tördel: a legördülő szélessége kötött, és egy hosszú név
   kitolná. A teljes név a `/jutalmak` lapon látszik. */
.od-rw-wallet-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── A `/jutalmak` lap ───────────────────────────────────────────────────── */

.od-rw-tokens {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--od-gray-800);
    line-height: 1.2;
}

.od-rw-tokens > .bi { color: var(--od-warning); }

/* A kiegészítés (pl. számlaszám) a művelet neve MELLETT, halványan. */
.od-rw-details {
    margin-left: .4rem;
    font-size: .8rem;
    color: var(--od-gray-500);
}

.od-rw-when {
    font-size: .85rem;
    color: var(--od-gray-500);
    white-space: nowrap;
}


/* ── Bolt (a `/jutalmak` lapon) ──────────────────────────────────────────── */

.od-rw-shop {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
}

.od-rw-shop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--od-radius);
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    color: var(--od-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: flex-elem alapértelmezett `min-width: auto`-ja
   megakadályozná, hogy a hosszabb csomagnév a tartalma alá zsugorodjon – a gomb
   helyett a szöveg tolná ki a sort. */
.od-rw-shop-main { flex: 1; min-width: 0; }

/* Az ÁR és a gomb egy oszlopban, az ár FELÜL. ⚠️ `align-items: stretch`, hogy a gomb
   pontosan az ár szélességét vegye fel – így a kettő egy blokként olvasható, nem két
   egymás alá csúszott elemként. */
.od-rw-shop-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    /* MÉRT érték: az ár ~105 px, a gomb ~110 px – enélkül a két elem szélessége
       csomagonként eltérne, és több bolti tételnél csipkés lenne a jobb szél. */
    min-width: 148px;
}

/* ⚠️ **A SZÍN `#92400E`, NEM a `--od-warning` (#D97706)** – pedig az a token/érme
   színe a pénztárcán és a navbar jelvényén. Az a `--od-gray-50` hátterű bolti soron
   csak **3,0:1** kontrasztot ad, ami a nagy számnál épp átmegy, a kis „token"
   feliratnál viszont NEM. A `#92400E` a projekt bevált sötét borostyánja (15+ helyen,
   pl. `.od-badge-ugyfel`), és ugyanezen a háttéren **6,8:1**.

   ⚠️ Az ÉRME és a SZÁM azonos színű: két, alig eltérő borostyán egymás mellett
   elrontott felületnek látszana, nem hierarchiának. A rangsort a MÉRET adja. */
.od-rw-price {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #92400E;
    /* Az ár EGY egység – tördelve a mértékegység önálló adatnak látszana. */
    white-space: nowrap;
}

/* ⚠️ Az érme SZÁNDÉKOSAN kisebb a számnál: 1.5rem-en a glif 24 px lenne, és a saját
   ára elől venné el a figyelmet.

   ⚠️ **A `vertical-align: middle` FELÜLÍRJA a bootstrap-icons `-.125em` alapértékét,
   és ez MÉRT döntés.** Az az alapérték AZONOS betűméretű ikonra van hangolva; egy 17 px-es
   érme mellé tett 24 px-es számnál a kisebb glifet az alapvonal felé nyomja. Mérve, az
   érme középpontjának eltérése a számjegyek sordobozának közepétől: `-.125em` **5 px**,
   `baseline` 3 px, **`middle` 1 px**. */
.od-rw-price > .bi {
    font-size: 1.05rem;
    margin-right: .3rem;
    vertical-align: middle;
}

.od-rw-price-unit {
    font-size: .9rem;
    font-weight: 600;
}

/* A lejárt csomag sora halvány – de NEM áthúzott: az azt sugallná, hogy a vásárlás
   érvénytelen volt, holott megtörtént és a helyét be is töltötte. */
.od-rw-grant-expired { color: var(--od-gray-500); }

.od-rw-grant-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    white-space: nowrap;
}

.od-rw-grant-badge.is-active {
    background: var(--od-success-xlt);
    color: var(--od-success);
}

@media (max-width: 575.98px) {
    /* ⚠️ A gomb TELJES szélességű és 44 px magas – érintési célpont. A sor tördel, mert
       az ikon + név + ár + gomb 375 px-en nem fér el egy sorban. Az ár ilyenkor a
       teljes szélességű gomb FÖLÉ kerül, középre – a sorrend („mennyibe kerül", majd
       „megveszem") ugyanaz marad, mint asztali nézetben. */
    .od-rw-shop { flex-wrap: wrap; }
    .od-rw-shop-action { width: 100%; }
    .od-rw-shop-action > .btn { width: 100%; min-height: 44px; }
}

/* =============================================================================
   VEVŐ / SZÁLLÍTÓ KÖNYVELÉS  (od-bk-)

   ⚠️ SAJÁT névtér, nem az `od-inv-` (a NAV-számla lista) bővítése: az egy OLVASÓ
   táblázat, ez egy SZERKESZTŐ – a sűrűsége, a mezői és a viselkedése is más. Egy
   közös prefix némán írná felül a másik elrendezését (18. megtanult hiba).
   ============================================================================= */

/* ── Számla-választó sáv ───────────────────────────────────────────── */

.od-bk-picker {
    background: #fff;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    padding: 12px;
}

.od-bk-picker-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.od-bk-search { flex: 1 1 240px; min-width: 0; }

.od-bk-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.od-bk-pager-label {
    font-size: .8rem;
    color: var(--od-gray-500);
    white-space: nowrap;
    min-width: 8rem;
    text-align: center;
}

.od-bk-empty {
    font-size: .85rem;
    color: var(--od-gray-500);
    padding: 8px 2px;
}

/* A „mind el van intézve" mondat KIEGÉSZÍTÉSE (hány számláról van szó). ⚠️ Külön
   sorban, halványabban: ez TÉNY-kiegészítés, nem a fő üzenet – egy sorba fűzve a
   szem a darabszámot olvasná el elsőként. */
.od-bk-empty-sub {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--od-gray-400);
}

/* ⚠️ VÍZSZINTESEN görgethető sor, nem tördelő rács: a sáv magassága így ÁLLANDÓ.
   Tördelve a lap alatta lévő űrlapja minden lapozásnál függőlegesen elmozdulna, és
   a könyvelő szeme minden számlánál újra keresné a mezőket. */
.od-bk-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-gutter: stable;
}

.od-bk-card {
    flex: 0 0 auto;
    width: 190px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.od-bk-card:hover { border-color: var(--od-gray-300); background: var(--od-gray-50); }

.od-bk-card.is-on {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

.od-bk-card-num {
    font-weight: 600;
    font-size: .82rem;
    color: var(--od-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-bk-card-partner {
    font-size: .76rem;
    color: var(--od-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-bk-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    font-size: .74rem;
    color: var(--od-gray-500);
}

.od-bk-card-amount { font-weight: 600; color: var(--od-gray-800); white-space: nowrap; }

.od-bk-card-flag {
    align-self: flex-start;
    max-width: 100%;
    font-size: .68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--od-gray-100);
    color: var(--od-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-bk-card-flag.is-corr { background: #FEF3C7; color: #92400E; }

/* ── Rács: űrlap + ragadós számlakép ───────────────────────────────── */

/* ⚠️ **`@container`, NEM `@media` – és ez nem stílus kérdése.** A munkaterület jobb oldali
   eszközsávja 380 px-et vesz el, az ABLAK viszont ugyanolyan széles marad: képernyő-alapú
   töréspontnál egy nyitott jegyzet mellett a lap SZÉLESNEK hinné magát, és a bal hasáb
   összenyomódna. Ugyanaz a döntés, mint a feladat-részletezőnél és a személy-kártyánál.
   A horgony a rács SZÜLŐJE – egy elem nem tudja a saját oszlopait a saját méretétől
   függővé tenni. */
.od-bk-board { container-type: inline-size; }

.od-bk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.od-bk-main { min-width: 0; }

.od-bk-side { min-width: 0; }

/* ⚠️ **`display: none`, NEM feltételes renderelés.** Az `<iframe>` a DOM-ban marad, tehát a
   PDF-nézegető állapota (oldalszám, nagyítás, görgetés) túléli az összecsukást – kivéve
   téve minden visszanyitás újratöltené a fájlt. Ugyanaz a szabály, mint a munkaterületi
   eszközök összecsukásánál.
   ⚠️ A kép hasábját a rács `has-image` osztálya adja; összecsukott állapotban az KIMARAD,
   tehát a táblázat megkapja a teljes szélességet – itt csak az üres hasábot rejtjük el. */
.od-bk-side.is-collapsed { display: none; }

.od-bk-imgcard { overflow: hidden; }

.od-bk-frame {
    width: 100%;
    /* Egy hasábban (keskeny konténer) a kép fix magasságot kap – rugalmas hasáb nélkül
       a magassága nullára esne. */
    height: 60vh;
    border: 0;
    display: block;
    background: var(--od-gray-100);
}

/* ── Két hasáb: űrlap + ragadós számlakép ──────────────────────────── */

/* ⚠️ A küszöb a KONTÉNERRE vonatkozik, ami a lap paddingjával és az ikonsávval szűkebb
   az ablaknál – 1000 px konténer nagyjából egy 1100 px-es ablaknak felel meg. */
@container (min-width: 1000px) {
    /* ⚠️ `align-items: start` KÖTELEZŐ: alapértelmezett `stretch` mellett az oldalsáv a
       rács teljes magasságára nyúlik, és a `position: sticky`-nek nem marad hova
       elmozdulnia – a ragadás NÉMÁN nem működik, hibaüzenet nélkül. */
    .od-bk-grid.has-image {
        grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
        align-items: start;
    }

    .od-bk-side {
        position: sticky;
        /* ⚠️ A FIX navbar alá igazít – puszta `1rem`-mel a kártya a sáv MÖGÉ csúszna. */
        top: calc(var(--od-navbar-h) + 1rem);
    }

    /* ⚠️ **A MAGASSÁG a KÖTŐ MÉRET, nem a szélesség** – ezt könnyű elrontani. Egy A4 lap
       660 px szélesen 933 px MAGAS: ha a keret ennél alacsonyabb, a PDF-nézegető a
       MAGASSÁGRA illeszt, és a hasáb szélesítéséből SEMMI nem látszik. A keret ezért a
       képernyő maradékát kapja: 80 px a ragadás teteje, ~46 px a kártyafejléc, a többi
       levegő. ⚠️ A `dvh` a `vh` UTÁN áll – telefonon a `vh` a böngésző sávjait nem veszi
       le, tehát a keret alja a képernyőn kívülre kerülne. */
    .od-bk-frame {
        height: 70vh;
        height: clamp(360px, calc(100dvh - 150px), 1100px);
    }
}

/* ⚠️ **A KÉPHASÁB A KIHASZNÁLHATÓ MAGASSÁGHOZ igazodik, nem egy kerek számhoz** – és ez a
   szakasz legfontosabb döntése. A PDF-nézegető a lapot a keretbe ILLESZTI, tehát a
   rendereltnél szélesebb hasáb NEM ad semmit, csak elveszi a helyet az űrlaptól. A lap
   szélessége = magasság × 595/842 (A4 aránya) ≈ magasság × 0,707 – ezt írjuk ki.

   **Mérve, ugyanazon a fixtúrán:** 720 px magas ablakban a keret magassága a kötő méret,
   tehát a szélesítés ott 0 hasznot adna – a `clamp` alsó ága emiatt VISSZAAD a 420-ra, és
   a rövid képernyő elrendezése VÁLTOZATLAN marad. 1080p-n (≈940 px ablak) viszont
   **420 → 558 px** a kirajzolt lap (+33% szélesség, +77% terület).

   ⚠️ A konténer-küszöb (1400) azért kell, mert szűk lapon a bal hasáb a tételtáblázat
   fix oszlopai alá esne, és a „Tétel neve" mező összenyomódna – mérve 64 px-re, ami
   olvashatatlan. Széles lapon a szűkített fix oszlopok mellett 200 px fölött marad. */
/* ⚠️ **KÉT korlát kell, és a MÁSODIKAT a VALÓDI gépen mérve derült ki.** A magasságból
   számolt szélesség önmagában egy MAGAS képernyőn (3840×1465) elszabadul: a hasáb 900
   px-re nőtt, a bal hasáb pedig összement. A második korlát tehát nem elhagyható –
   a kettő közül a KISEBB nyer.

   ⚠️ **A KORLÁT MÉRTÉKE viszont MEGVÁLTOZOTT, mert a táblázat GÖRGET** (a felhasználó
   választása, 2026-08-26). Amíg összenyomódott, a `cqi`-korlát a „Tétel neve" oszlopot
   védte – ma nincs mit védeni tőle: a szűk hely görgetéssé válik, nem olvashatatlan
   mezővé. A korlát ezért MÁST mond: az ŰRLAP kap egy alsó határt (600 px), és minden
   további hely a KÉPÉ. Ez a felhasználó kimondott döntése: „a felszabaduló hely a képé".

   ⚠️ A 600 px nem a táblázat szélessége (az úgyis görget), hanem amennyi a fejléc-rács, az
   egyenleg-sáv és a gombsor OLVASHATÓ elrendezéséhez kell. */
@container (min-width: 1520px) {
    .od-bk-grid.has-image {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, clamp(420px, min(calc((100dvh - 150px) * 0.707), calc(100cqi - 600px)), 900px));
    }
}

/* ── A számla fejléce ──────────────────────────────────────────────── */

.od-bk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.od-bk-head-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--od-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.od-bk-head-sub { font-size: .85rem; color: var(--od-gray-500); }

.od-bk-dot { margin: 0 6px; color: var(--od-gray-300); }

.od-bk-voucher {
    font-weight: 600;
    font-size: .85rem;
    color: var(--od-success);
    background: var(--od-success-xlt);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

.od-bk-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 10px 16px;
    margin-top: 14px;
}

.od-bk-meta > div { display: flex; flex-direction: column; min-width: 0; }

/* ⚠️ **`> div > span`, nem csupasz `span` – és ez MÉRT hiba javítása.** A rule a mező
   CÍMKÉJÉRE szól („Kelt", „Teljesítés"), ami a div KÖZVETLEN gyereke. Csupasz `span`-ként
   viszont a `<strong>`-on BELÜLI „javítva" chipre is ráment (0‑1‑1 a chip 0‑1‑0-ja ellen),
   és NÉMÁN átfestette szürkére: mérve `rgb(100,116,139)` volt az ibolya helyett, a
   háttere viszont a chipé maradt. A build tiszta, a szabály ott van – csak a szín más
   (18. megtanult hiba). */
.od-bk-meta > div > span { font-size: .72rem; color: var(--od-gray-500); }
.od-bk-meta strong { font-size: .88rem; color: var(--od-gray-800); font-weight: 600; }

.od-bk-note {
    font-size: .82rem;
    color: var(--od-gray-500);
    background: var(--od-gray-50);
    border-radius: var(--od-radius);
    padding: 8px 12px;
}

/* ── A partner-számla választója (bizonylat-szinten) ──────────────────
   ⚠️ KORLÁTOZOTT szélesség, `width: auto` NÉLKÜL. A `width: auto` űrlapelemnél
   TARTALOMHOZ igazodó szélességet jelent, és a leghosszabb megnevezés
   („Kötelezettségek áruszállításból és szolgáltatásból (szállítók)") a fejléc
   fölé nőne, kiszorítva az „Új sor" gombot. A `max-width` + `text-overflow`
   párossal a lista TELJES szövege a lenyitáskor látszik, a becsukott mező
   viszont fegyelmezett marad.
   ⚠️ `min-width` is kell: enélkül egy rövid számnál (`311`) a mező annyira
   összemenne, hogy a kiválasztott érték sem látszana. */
/* A 280px-es felso hatar a fejlecsavot MASODIK SORBA torte a szuk (szamlakepes) hasabban:
   155 + 280 + 220 + kozok = 671 px a 620 px-es savban. 220-ra veve 611 px - EGY sor.
   A valasztott szam ELEJE (a lenyeg) igy is teljesen latszik, a hosszu megnevezes pedig
   amugy is ellipszissel csonkolt; a teljes szoveg a lenyitott listaban ott van. */
.od-bk-partner-sel {
    min-width: 160px;
    max-width: 220px;
    text-overflow: ellipsis;
}

/* A "Mind egy FK-ra" es az "Uj sor" EGYUTT tordel.
   FIGYELEM: `nowrap` KELL - enelkul a fejlecsav sajat `flex-wrap`-je kettevagja oket, es az
   "Uj sor" magara marad egy sorral lejjebb (a felhasznalo ezt jelezte). */
.od-bk-linebtns {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
}

/* ── Tételsor-táblázat ─────────────────────────────────────────────── */

/* ⚠️ `position: relative` a görgetődobozon: a képernyőolvasónak szánt, abszolút
   pozicionált rejtett szöveg különben a LAP koordinátarendszeréhez igazodna, és
   vízszintesen kitolná az egész oldalt (a `/finances` listáján ez mért hiba volt). */
.od-bk-scroll { position: relative; }

.od-bk-table { font-size: .8rem; }
.od-bk-table > :not(caption) > * > * { padding: .35rem .4rem; }
.od-bk-table .form-control-sm,
.od-bk-table .form-select-sm { font-size: .78rem; padding: .18rem .4rem; }

/* ⚠️ **A `min-width` teszi a görgetést TÉNYLEGES viselkedéssé** – ez a szakasz lényege, és
   egy MÉRT hiba javítása. A `width` a `<th>`-n csak JAVASLAT: szűk helyen a böngésző az
   auto-layouttal ÖSSZENYOMJA az oszlopokat, ahelyett hogy görgetne, és a veszteséget a
   táblázat EGYETLEN rugalmas oszlopa („Tétel neve") nyeli el – mérve 284 → 187 px, devizás
   számlán 174. A görgetődoboz (`.od-bk-scroll`, `overflow-x: auto`) MEGVOLT, csak sosem
   volt mit görgetnie.

   ⚠️ **A `min-width` MEGSZŰNT** – a sorok CSAK MEGTEKINTHETŐK (a felhasználó kérése,
   2026‑08‑26), tehát nincs mit összenyomni: a szöveges cellák `white-space: nowrap`-je adja
   a természetes minimumot, és a táblázat pontosan annyi helyet kér, amennyi a TARTALOM.
   Beviteli mezőknél ez nem működött – azok a `min-width` nélkül a tartalmuk alá zsugorodtak,
   és a veszteséget a névoszlop nyelte el (mérve 284 → 187 px).
   ⚠️ A görgetődoboz MEGMARAD: hosszú tételnevekkel a tartalom így is szélesebb lehet a
   hasábnál, és akkor görgetnie KELL – csak most ritkábban.
   ⚠️ Az `is-foreign` jelző emiatt már nem állít `min-width`-et; a devizás EGGYEL TÖBB
   oszlopa magától szélesíti a táblázatot. A jelzőt a modul adja ki, mert a CSS az
   oszlopszámot nem tudhatja – a tételtáblázat `min-width`-én kívül máshol is használjuk. */

/* ⚠️ **`width: 1%` + `nowrap` = „legyen olyan keskeny, amilyen a tartalma".** Fix
   képpont-szélességgel a rövid értékek („04", „0", „mentes") üres helyet foglalnának, épp
   azt, amit a felhasználó a tételnévnek szánt. A `width: 1%` táblázatban jelenti ezt –
   kártyás (flex) elrendezésben NEM, ott eltörik (27. tanulság), de ez a táblázat asztali
   nézetben marad. */
.od-bk-c-rate,
.od-bk-c-row,
.od-bk-c-money,
.od-bk-c-acc { width: 1%; white-space: nowrap; }

/* ⚠️ A főkönyv-cella ALATT ott a szám NEVE is – korlát nélkül az nyelné el a hasábot.
   A `max-width` + a jelzés saját ellipszise együtt tartja kordában. */
.od-bk-c-acc { max-width: 230px; }

/* ── A csak megtekinthető cella ─────────────────────────────────────
   ⚠️ **A sorok NEM szerkeszthetők közvetlenül** (a felhasználó kérése): a szerkesztés a
   ceruzával nyíló ablakban megy, a számlakép mellett. Így a cella pont annyi helyet foglal,
   amennyi a szöveg – és a sor olvasható adatsor lesz, nem doboz-tenger.
   ⚠️ **Az AUTOMATIZMUSOK VÁLTOZATLANOK**: a sorok a NAV tételsoraiból keletkeznek, a
   könyvelési memória javasol (💡), az ÁFA-kulcs váltása állítja a bevallási sort, és az
   összegek egymásból számolódnak – mindez az ablakban UGYANAZOKON a kezelőkön fut. */
.od-bk-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Egy vonalban a szerkesztő mezők belső paddingjával – enélkül a táblázat sorai
       elmozdulnának, amikor egy sort épp szerkesztünk az ablakban. */
    padding: .18rem .4rem;
}

/* A tételnév az EGYETLEN rugalmas cella: kapja a maradékot, de ne feszítse szét a sort. */
.od-bk-cell-name { min-width: 0; flex: 1 1 auto; }

/* ⚠️ `tabular-nums`: az összegek egymás alatt EGY vonalban álljanak – arányos
   számjegyekkel a tizedesek elcsúsznának, és a hasábot nem lehetne végigfutni. */
.od-bk-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ⚠️ **A hiányzó érték KIMONDVA, nem üres cella.** Egy üres hely mellett a könyvelő nem
   tudná, hogy nincs kitöltve, vagy csak nem fért ki – és a főkönyvi szám KÖTELEZŐ, tehát
   a mentés is elakadna rajta. */
.od-bk-empty-cell { color: var(--od-gray-400); font-style: italic; }

/* ⚠️ A sorszám a tétel-cellában, a mező ELŐTT – nem külön oszlopban. `flex-shrink: 0`,
   különben a rugalmas névoszlop szűkülésekor a szám maga tördelne. */
.od-bk-name { display: flex; align-items: center; gap: 6px; }
.od-bk-name .form-control { min-width: 0; }
.od-bk-lineno { color: var(--od-gray-500); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ⚠️ A fordított adózás jelzése az ÁFA-kulcs ALATT. Halvány, nem riasztó: ez a sor egy
   TULAJDONSÁGA, nem hiba – pirosra véve a szem bajnak olvasná. */
.od-bk-rev-chip {
    display: block;
    margin-top: 2px;
    font-size: .62rem;
    line-height: 1.2;
    color: var(--od-gray-500);
    cursor: help;
}

/* ⚠️ 56 → 92 px: ide KÉT gomb került (szerkesztés + törlés) a lámpa-jelzés mellé. A
   szélesítés a görgetés miatt már nem a névoszlop rovására megy. */
.od-bk-c-act { width: 92px; white-space: nowrap; }

/* ⚠️ **A MŰVELET-OSZLOP RAGAD, különben kigörögne a képből** – épp a törlés és a
   sor-szerkesztő gombja válna elérhetetlenné vízszintes görgetés után.

   ⚠️ **SAJÁT HÁTTÉR KÖTELEZŐ.** A `sticky` cella nem takar: háttér nélkül a mögötte
   elgörgő oszlopok ÁTLÁTSZANÁNAK rajta, és a gombok olvashatatlan kásán ülnének. A
   Bootstrap a `.table > :not(caption) > * > *` szabállyal már ad `background-color:
   var(--bs-table-bg)` értéket, de azt itt KIMONDJUK: egy jövőbeli `table-striped` vagy
   `table-hover` különben némán átlátszóvá tenné.

   ⚠️ A `z-index` a fejlécen magasabb: a `thead` cellája a `tbody` fölött kell maradjon,
   amikor a lap függőlegesen is görög. */
.od-bk-table .od-bk-c-act {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -6px 0 6px -6px rgb(15 23 42 / .18);
}

.od-bk-table thead .od-bk-c-act {
    z-index: 2;
    background: var(--od-gray-100);
}

.od-bk-table .od-bk-c-money .form-control { text-align: right; }

/* A SZÁMÍTOTT érték nem beviteli mező – ne is nézzen ki annak. */
.od-bk-calc {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
    font-weight: 600;
}

.od-bk-rate { display: flex; align-items: center; gap: 3px; }

/* ⚠️ Az árfolyam FORRÁSA a szám mellett, halványan. Nem figyelmeztetés – ez a NORMÁLIS
   működés (MNB középárfolyam) –, de látszania kell: a bizonylat forintösszegei ebből
   keletkeznek, és a szám eltér attól, ami a papíron áll. */
.od-bk-rate-src {
    display: block;
    font-size: .74rem;
    color: var(--od-gray-500);
}

/* ⚠️ A HIÁNYZÓ árfolyam viszont TEENDŐ: enélkül a számla nem könyvelhető. Borostyán, nem
   piros – nem hiba, hanem egy elérhetetlen külső szolgáltatás következménye, amit a
   könyvelő kézi megadással old fel. */
.od-bk-rate-missing { color: var(--od-warning); }

/* ⚠️ A fejléc összegeiből LEVEZETETT kulcs jelzése. Nem hiba és nem figyelmeztetés –
   ezért halvány, nem piros –, de látszania KELL: vegyes kulcsú számlán a hányados
   hihető, de hamis százalékot adhat. */
.od-bk-derived {
    color: var(--od-warning);
    font-weight: 700;
    cursor: help;
}

.od-bk-acc-ok,
.od-bk-acc-bad {
    display: block;
    font-size: .68rem;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-bk-acc-ok { color: var(--od-gray-500); }
.od-bk-acc-bad { color: var(--od-danger); font-weight: 600; }

.od-bk-sugg { color: var(--od-warning); margin-right: 4px; cursor: help; }

/* ── Főkönyvi szám választó (LedgerAccountPicker) ──────────────────── */

/* ⚠️ SAJÁT névtér, NEM az `od-bk-acc-` bővítése: az a TÁBLÁZAT szűk oszlopának
   egysoros jelzése (`nowrap` + ellipszis), ez viszont egy önálló vezérlő az
   ablakban. Egy kész osztály más célra pontosan a 18. megtanult hiba. */
.od-accsel-q { margin-bottom: .35rem; }

/* ⚠️ **A HÁROM mező sorának burkolója – EZ a lebegő lista horgonya.** `position: relative`
   nélkül a lista a legközelebbi pozicionált őshöz (az ablakhoz) igazodna, és a rossz helyen
   nyílna ki. A `col`-ok SZÁNDÉKOSAN nem pozicionáltak (a Bootstrap sem teszi azzá őket) –
   különben a lista a saját hasábjára szűkülne, a felhasználó kérése viszont az volt, hogy
   „a lista mindig alattuk jelenjen meg EGÉSZBEN". */
.od-accsel-row { position: relative; }

/* ⚠️ A lista a HÁROM mező alatt lebeg, a sor teljes szélességében.
   ⚠️ **SAJÁT HÁTTÉR ÉS ÁRNYÉK KÖTELEZŐ**: lebegő elem takar – háttér nélkül az alatta lévő
   „Fordított adózású sor" jelölőnégyzet ÁTLÁTSZANA rajta, és a lista olvashatatlan kásán
   ülne. Ugyanaz a szabály, mint a ragadó művelet-oszlopnál.
   ⚠️ A `z-index` a modal saját rétegén BELÜL marad: ez nem új réteg, csak a testvérei fölé
   kell kerülnie. */
/* ⚠️ **A háttér-réteg: kívülre kattintva ZÁR.** A lista eddig csak választásra vagy a
   keresőmezőn lenyomott Escape-re zárult – a legördülőknél megszokott „kattints mellé"
   nem működött. A TÁBLÁZATBAN ez érezhetőbb, mint az ablakban: ott a lista a következő sor
   fölött lebeg, tehát vagy választani kell, vagy nincs mivel becsukni.
   ⚠️ `fixed`, nem `absolute`: a teljes képernyőt le kell fednie, függetlenül attól, hogy a
   picker melyik pozicionált ősben ül.
   ⚠️ A `z-index` a popper ALATT (4 vs. 5): magára a listára kattintva NEM zár. */
.od-accsel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
}

.od-accsel-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    margin-top: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}

/* ⚠️ `tabular-nums`: a főkönyvi számok egymás alatt EGY vonalban álljanak –
   arányos számjegyekkel a lista rendezettsége nem látszana.
   ⚠️ A MAGASSÁGOT a `size="5"` adja, nem CSS: fix magassággal a böngésző
   sorszámítása és a mi értékünk elcsúszhatna. */
.od-accsel-list { font-size: .875rem; font-variant-numeric: tabular-nums; }

.od-accsel-count { color: var(--od-gray-500); }

/* ── Egyenleg-sáv ──────────────────────────────────────────────────── */

.od-bk-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .82rem;
    padding: 10px 14px;
    border-top: 1px solid var(--od-gray-200);
}

.od-bk-balance.is-ok { color: var(--od-gray-500); }

/* ⚠️ BOROSTYÁN, nem piros: az eltérés nem hiba, hanem MÉG NEM KÉSZ állapot – a
   könyvelő épp most gépel. A pirosat a valódi elutasításnak tartjuk fenn. */
.od-bk-balance.is-off {
    color: #92400E;
    background: #FFFBEB;
}

.od-bk-balance-sums { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── A fejléc JAVÍTÁSÁNAK jelzései ─────────────────────────────────── */

/* ⚠️ A javított mező jelzése NEM elhagyható: a `/finances` lista ugyanarról a számláról a
   NAV eredetijét mutatja (a felhasználó kimondott döntése). Jelölés nélkül a két képernyő
   ellentmondása HIBÁNAK látszana, és a könyvelő a felületre gyanakodna.
   ⚠️ IBOLYA, nem piros és nem borostyán: ez nem hiba és nem figyelmeztetés, hanem „más
   fajta dolog" – a projekt bevált jele erre (`od-tile-missing`, SZJA-mentes keret). */
.od-bk-fixed {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #F3E8FF;
    color: #7C3AED;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
    cursor: help;
}

/* ⚠️ BOROSTYÁN, nem piros: a józansági észrevétel FIGYELMEZTETÉS, nem kapu – a könyvelő
   épp a hatóság adatát javítja, és a „szokatlan" sorrend valós is lehet. Pirossal a szem
   hibának olvasná, és pár hét alatt megszokná. */
.od-bk-warn {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    /* ⚠️ Beégetett 6px, mert `--od-radius-sm` NEM LÉTEZIK a palettában (csak `--od-radius`
       és `--od-radius-lg`). Definiálatlan `var()` NÉMÁN a kezdeti értékre esne vissza – a
       sarok élessé válna, és a build attól még tiszta maradna (18. megtanult hiba). */
    border-radius: 6px;
    background: #FFFBEB;
    color: #92400E;
    font-size: .82rem;
}

/* A javító gomb és a kép-kapcsoló EGY csoportban, a fejléc jobb szélén.
   ⚠️ **A közös burkoló MÉRT hiba javítása**: a fejléc `justify-content: space-between`,
   ami az elemeket EGYENLETESEN osztja el – három elemnél (bal blokk · ceruza · kapcsoló)
   a ceruza KÖZÉPRE csúszott. Burkolóval a kettő EGY elem, tehát együtt kerül jobbra.
   ⚠️ `flex: 0 0 auto` KÖTELEZŐ: alapértelmezett `flex-shrink: 1` mellett a csoport a hosszú
   partnernév miatt összenyomódna, és az ikonok levágódnának. */
.od-bk-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    /* ⚠️ **`margin-left: auto` KÖTELEZŐ, és ez MÉRT hiba javítása.** A fejléc `flex-wrap:
       wrap`: hosszú számlaszámnál (`A26200020/1369/00007`) a bal blokk 568 px lett egy
       620 px-es fejlécben, tehát a gombcsoport ÚJ SORBA került – ott pedig a
       `space-between` egyetlen elemet BALRA tesz. Mérve: `x = 0, y = 58`, vagyis a két
       gomb a partnernév alatt, a bal szélen ült. A `margin-left: auto` a tördelt sorban is
       a jobb szélre viszi. */
    margin-left: auto;
}

/* ── SZERKESZTŐ ABLAKOK (fejléc és egy sor) ────────────────────────────────
   ⚠️ **A KÖNYVELŐ A BIZONYLATRÓL MÁSOL** – ezért van a számlakép az ablakban is, nem csak
   a lapon. Ugyanaz a szerkezet, mint a Pmt. egyeztető ablakában (`od-onb-modal`): bal
   oldalt a mezők, jobbra a kép NAGYBAN.

   ⚠️ SAJÁT névtér (`od-bk-m…`), nem az `od-inv-modal` újrahasznosítása: az a NAV-számla
   RÉSZLETEZŐJE (csak olvasás, `od-inv-doc` rácsra épül), ez SZERKESZTŐ űrlap. Egy kész
   osztály más célra pont a 18. megtanult hiba. */
.od-bk-modal {
    width: min(1000px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    display: flex;
    flex-direction: column;
}

.od-bk-modal .od-modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* Tomeges netto fokonyv: egyetlen mezo, de a szamlanevek hosszuak - a 480px-es
   alapertelmezes levagna oket.
   FIGYELEM: ez SZANDEKOSAN nem `od-bk-modal`, tehat NINCS rajta `overflow-y: auto`.
   A valaszto lebegő listaja igy nem vagodik el; gorgetodobozban elvagodna. */
.od-bk-bulk {
    width: min(620px, calc(100vw - 2rem));
}

.od-bk-mgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.od-bk-mform { min-width: 0; }

/* Kép nélkül a hasáb ki sem rajzolódik – üresen kitéve az ablak felét venné el semmiért. */
.od-bk-mimg { display: none; }

/* ── Képpel: két hasáb, teljes magasság ───────────────────────────────── */

/* ⚠️ `dvh` a `vh` UTÁN: telefonon a `vh` a böngésző sávjait NEM veszi le, tehát az ablak
   alja (a záró gombokkal) a képernyőn kívülre kerülne. */
.od-bk-modal.has-image {
    width: min(1440px, calc(100vw - 2rem));
    height: calc(100vh - 2rem);
    height: calc(100dvh - 2rem);
}

/* ⚠️ FIX magasságnál a törzsnek `flex: 1` KELL – enélkül a tartalmához zsugorodna, és a
   fejléc meg a lábléc közt üres sáv maradna. */
.od-bk-modal.has-image .od-modal-body {
    flex: 1 1 auto;
    display: flex;
    /* ⚠️ Itt NEM a törzs görget, hanem a KÉT HASÁB külön: így a kép a teljes magasságot
       megkapja, és nem görög ki a képből, amikor a könyvelő épp róla másol. */
    overflow: hidden;
}

.od-bk-modal.has-image .od-bk-mgrid {
    flex: 1 1 auto;
    min-height: 0;
    /* ⚠️ A KÉP hasábja a MAGASSÁGBÓL számol (A4 arány ≈ 0,707) – ugyanaz a mért geometria,
       mint a lapon: a PDF-nézegető a lapot a keretbe ILLESZTI, tehát a rendereltnél
       szélesebb hasáb SEMMIT nem ad, csak elveszi a helyet az űrlaptól. */
    /* ⚠️ A levonás (250 px) MÉRT érték, nem becslés: az ablak fejléce, lábléce és a törzs
       paddingja ennyit vesz el a magasságból. 200-zal mérve a hasáb 566 px lett, a
       kirajzolt lap viszont csak 529 – a 37 px különbség ÜRES sáv lett volna a bizonylat
       mellett, az űrlap rovására. */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, clamp(320px, min(calc((100dvh - 250px) * 0.707), 46cqi), 820px));
}

/* ⚠️ `min-height: 0` KÖTELEZŐ a görgető hasábon: enélkül a rács-elem nem tud a tartalma
   alá zsugorodni, tehát nem MAGÁBAN görget, hanem kifeszíti az ablakot. */
.od-bk-modal.has-image .od-bk-mform {
    overflow-y: auto;
    min-height: 0;
    padding-right: .35rem;
}

.od-bk-modal.has-image .od-bk-mimg {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border: 1px solid var(--od-gray-200);
    border-radius: 6px;   /* ⚠️ `--od-radius-sm` NEM LÉTEZIK – lásd fent */
    overflow: hidden;
    background: var(--od-gray-100);
}

.od-bk-mimg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fff;
    border-bottom: 1px solid var(--od-gray-200);
    min-width: 0;
}

/* A keret a hasáb MARADÉK magasságát kapja, nem fix értéket. */
.od-bk-mframe {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
    display: block;
    background: var(--od-gray-100);
}

/* ⚠️ Az ablak KI IS MONDJA, hogy itt semmi nem mentődik: a sorok a lap „Könyvelés mentése"
   gombjával kerülnek az adatbázisba. Enélkül a „Kész" gomb mentésnek látszana, és a
   felhasználó elnavigálna a munkájával. */
.od-bk-mfoot-note {
    margin-left: auto;
    font-size: .78rem;
    color: var(--od-gray-500);
}

/* ⚠️ Az ablak a KONTÉNER-lekérdezéshez horgony kell (`cqi` a rácsban). */
.od-bk-modal.has-image .od-modal-body { container-type: inline-size; }

@media (max-width: 991.98px) {
    /* Keskeny képernyőn a kép a mezők ALÁ kerül: két hasábban egyik sem lenne olvasható. */
    .od-bk-modal.has-image {
        height: auto;
        max-height: calc(100dvh - 2rem);
    }

    .od-bk-modal.has-image .od-modal-body {
        display: block;
        overflow-y: auto;
    }

    .od-bk-modal.has-image .od-bk-mgrid { grid-template-columns: 1fr; }
    .od-bk-modal.has-image .od-bk-mform { overflow: visible; }
    .od-bk-modal.has-image .od-bk-mimg { height: 55vh; height: 55dvh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÉNZÜGYI NYILVÁNTARTÁS (od-fr-)

   ⚠️ SAJÁT NÉVTÉR, nem az `od-bk-` (könyvelő tételtáblája) bővítése: az egy SZERKESZTŐ
   rács beviteli mezőkkel, ez egy OLVASÓ lista. Egy kész osztály más célra pontosan a
   18. megtanult hiba – és a két lap egymás mellett fut a Könyvelés menüben.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `position: relative` KÖTELEZŐ: a fejlécek `visually-hidden` szövege `position:
   absolute`, és pozicionált ős nélkül a LAP koordinátarendszeréhez igazodna – vagyis a
   vízszintesen görgethető doboz nem tartaná bent, hanem kiszélesítené a dokumentumot.
   Ugyanaz a csapda, amit a `/finances` táblázatánál 375 px-en MÉRTÜNK (a lap 686 px). */
.od-fr-scroll { position: relative; }

/* ⚠️ **A `min-width` teszi a görgetést TÉNYLEGES viselkedéssé.** A `width` a `<th>`-n csak
   JAVASLAT: szűk helyen a böngésző auto-layouttal ÖSSZENYOMJA az oszlopokat, ahelyett hogy
   görgetne, és a veszteséget a táblázat EGYETLEN rugalmas oszlopa (a Partner) nyeli el.
   Ez a könyvelő tételtáblájánál MÉRT hiba volt (284 → 146 px), ne kövessük el újra. */
.od-fr-table { font-size: .8rem; min-width: 1280px; }
.od-fr-table > :not(caption) > * > * { padding: .4rem .45rem; }

/* A kijelölő oszlop. `width: 1%` NEM jó ide: a tartalomhoz igazodó szélesség egy
   38 px-es jelölőnégyzetnél a fejléc szövegétől függne. */
.od-fr-c-sel { width: 34px; text-align: center; padding-right: 0 !important; }

.od-fr-c-dir { width: 34px; text-align: center; padding-right: 0 !important; }

/* ⚠️ Az IRÁNY fejlécének gombja CSAK egy ikont tartalmaz (a felirata `visually-hidden`),
   tehát magától 12×17 px – mérve. Bosszantóan apró célpont ahhoz, hogy a felhasználó
   megfordítsa vele a sorrendet, ezért a gomb a CELLA egészét kitölti. A többi fejlécnél
   erre nincs szükség: ott a felirat maga adja a felületet. */
th.od-fr-c-dir .od-sort-btn { width: 100%; justify-content: center; }
.od-fr-c-voucher { width: 96px; }
.od-fr-c-date { width: 100px; white-space: nowrap; }
.od-fr-c-inv { width: 130px; }
.od-fr-c-partner { min-width: 160px; }
.od-fr-c-acc { width: 112px; }
.od-fr-c-vat { width: 92px; white-space: nowrap; }
.od-fr-c-vatrow { width: 74px; white-space: nowrap; }
.od-fr-c-num { width: 104px; text-align: right; white-space: nowrap; }
.od-fr-c-exp { width: 44px; text-align: center; }

.od-fr-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }

/* A kijelölt sor halvány kiemelése. ⚠️ A `td` szintjén, mert a Bootstrap
   `.table > :not(caption) > * > *` szabálya a CELLÁRA tesz háttér-árnyékot – a soron
   megadva a cellák háttere NÉMÁN felülírná. */
.od-fr-row.is-selected > td { background-color: var(--od-primary-xlt); }

/* A műveletek doboza: EGYÜTT marad, nem tördel külön (a könyvelő lap fejlécsávjának
   tanulsága). A `flex-shrink: 1` + `min-width: 0` KELL, különben szűk sávban a gombok
   nem tudnának a doboz alá zsugorodni, és kilógnának. */
.od-fr-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;

    /* ⚠️ **A VONAL a CSOPORTOSÍTÁS, nem díszítés.** A letöltés a szűrők MELLETT áll (nem
       a sáv jobb szélén – lásd a komponens megjegyzését), tehát valami meg kell mondja,
       hol ér véget a SZŰRÉS és hol kezdődik a MŰVELET. Ugyanaz az elv, mint a menük
       `<hr>`-jénél.

       ⚠️ A `margin-left` NEM `auto`: azzal a doboz a sáv jobb szélére ugrana, és a mérve
       949 px-es üres hézag túloldalán „lebegne”. */
    margin-left: .25rem;
    padding-left: .75rem;
    border-left: 1px solid var(--od-gray-200);
}

/* A bizonylatszám AZONOSÍTÓ – egyforma szélességű számjegyekkel egymás alá esik. */
.od-fr-voucher {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--od-gray-800);
    white-space: nowrap;
}

/* A főkönyvi számok: azonosítók, nem szöveg. */
.od-fr-acc {
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}

/* ⚠️ A hosszú partnernév és számlaszám CSONKOL, nem tördel: tördelve a sorok magassága
   soronként változna, és a lista ritmusa szétesne. */
.od-fr-ellip {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠️ IBOLYA, a projekt bevált „más fajta dolog" színe (`od-tile-missing`, SZJA-mentes
   keret): a javítás nem hiba és nem figyelmeztetés, hanem a SZÁMÍTÁS forrásának a jelzése.
   Pirosra véve a szem hibának olvasná egy szabályosan javított számlán. */
.od-fr-fixed {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 600;
    background: #EDE9FE;
    color: #7C3AED;
    vertical-align: middle;
}

.od-fr-row.is-open > td { background: var(--od-gray-50); }

/* ── A lenyitott tételsorok ─────────────────────────────────────────── */

.od-fr-detail > td { background: var(--od-gray-50); padding: 0 !important; }

.od-fr-lines { padding: .75rem 1rem 1rem; }
.od-fr-lines > table { font-size: .78rem; background: #fff; }
.od-fr-lines > table > :not(caption) > * > * { padding: .3rem .4rem; }

.od-fr-l-no { width: 34px; color: var(--od-gray-500); }
.od-fr-l-rate { width: 78px; white-space: nowrap; }
.od-fr-l-row { width: 66px; }
.od-fr-l-acc { width: 86px; font-variant-numeric: tabular-nums; }
.od-fr-l-num { width: 104px; text-align: right; white-space: nowrap; }

.od-fr-lines-foot { margin-top: .6rem; }

/* Kis jelölő a tételsoron (fordított adózás). */
.od-fr-tag {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 600;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

/* ── Összegzés ──────────────────────────────────────────────────────── */

/* ⚠️ `auto-fit`, nem Bootstrap-oszlopok: egy irány esetén a kártya a teljes szélességet
   kapja, kettőnél egyenlően osztozik – így nem marad csipkés jobb szél.
   ⚠️ A belső `min()` KÖTELEZŐ: puszta `minmax(280px, 1fr)` mellett egy 280 px-nél
   keskenyebb panelen az oszlop nem tudna a tartalma alá menni, és a lap túlcsordulna. */
.od-fr-sums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: .75rem;
}

.od-fr-sum {
    background: #fff;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    box-shadow: 0 1px 2px rgb(15 23 42 / .04);
    padding: .75rem 1rem;
}

.od-fr-sum-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--od-gray-800);
    margin-bottom: .5rem;
}

.od-fr-sum-count {
    margin-left: auto;
    font-weight: 500;
    font-size: .78rem;
    color: var(--od-gray-500);
}

/* ⚠️ Az irány színe UGYANAZ, mint a sorok ikonjáé és a szűrő szegmenséé – az köti össze
   a három helyet. Eltérő árnyalattal a kapcsolat elveszne. */
.od-fr-sum.is-out .od-fr-sum-head i { color: var(--od-success); }
.od-fr-sum.is-in .od-fr-sum-head i { color: var(--od-danger); }

/* Címke–érték párok két oszlopban, a számok jobbra zárva és egy vonalban. */
.od-fr-sum-rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .75rem;
    font-size: .82rem;
}

.od-fr-sum-rows > span { color: var(--od-gray-500); }

.od-fr-sum-rows > strong {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}

/* ── Szűrősáv ───────────────────────────────────────────────────────── */

/* ⚠️ A kereső NEM zsugorodhat a használhatatlanságig, de tördelhet – ugyanaz a döntés,
   mint a `/finances` `od-inv-dates` osztályánál, ami egy 375 px-es telefonon a LAPOT
   tolta ki vízszintesen. */
.od-fr-filters .od-search-box { flex: 1 1 220px; min-width: 180px; max-width: 420px; }

/* ⚠️ **NINCS mobil érintési-célpont szabály, és ez MÉRÉS eredménye.** Az `/konyveles/**`
   rajta van a `DeviceDetection.BlockedPrefixes` listáján (mérve), tehát egyszerűsített
   (telefonos) nézetben `/desktop-only`-ra terelődik: a 375 px itt KESKENY ASZTALI ablakot
   jelent, ahol egér van. Ugyanaz a döntés, mint az `/office` lapozójánál, ahol a gombok
   32 px-esek maradnak.

   ⚠️ Az első változatban volt ilyen szabály – de CSAK a szűrősáv gombjaira hatott, a
   lapozóéra nem: mérve 32×44 vs. 32×32. Egy FÉLIG alkalmazott mobil szabály rosszabb a
   hiányánál, mert azt sugallja, hogy a lap érintésre készült. */

/* ═══════════════════════════════════════════════════════════════════
   PÉNZTÁR ÉS BANK  (od-cb-)
   ═══════════════════════════════════════════════════════════════════

   ⚠️ SAJÁT névtér, nem az `od-bk-` (a vevő/szállító könyvelésé) bővítése: az egy KÉT
   HASÁBOS, számlaképes szerkesztő; ez egy KÖNYV (időrendi lista futó egyenleggel). Egy
   kész osztály más célra pontosan a 18. megtanult hiba – a `.od-bk-` szabályai itt
   némán elmozdítanák az elrendezést.

   ⚠️ A névtér foglaltságát MÉRTEM a bevezetés előtt: `grep -c "^\.od-cb" app.css` → 0,
   negatív kontrollal (`od-bk` → 90), tehát a keresés lát. */

/* A szűrő-/műveletsáv: számla-választó, év, gombok – EGY sorban. */
.od-cb-bar {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ⚠️ A rugalmas kitöltő a BALRA igazítást adja: a gombok így a sáv jobb szélére
   kerülnek, DE a vezérlők nem csúsznak szét. A `margin-left: auto` a gombokon
   ugyanezt adná, csak a sáv első és utolsó eleme közt akkor a teljes maradék üres
   hely nyílna ki – a pénzügyi nyilvántartásnál ez MÉRT panasz volt (949 px hézag). */
.od-cb-bar-spacer { flex: 1 1 auto; }

/* ⚠️ `min-width` ÉS `max-width`: a `width: auto` űrlapelemnél TARTALOMHOZ igazodó
   szélességet jelent, tehát a leghosszabb pénztárnév kiszorítaná a gombokat; `min-width`
   nélkül viszont egy rövid névnél a kiválasztott érték sem látszana. */
.od-cb-select { min-width: 220px; max-width: 340px; }
.od-cb-year { min-width: 96px; }

/* ⚠️ `position: relative` KÖTELEZŐ a görgetődobozon: a `visually-hidden` fejlécszöveg
   `position: absolute`, és pozicionált ős nélkül a LAP koordinátarendszeréhez igazodna –
   vagyis a doboz nem tartaná bent, hanem a dokumentumot szélesítené ki. Ez a `/finances`
   listáján MÉRT hiba volt (375 px-en a lap 686 px-re nőtt). */
.od-cb-scroll { position: relative; }

.od-cb-table { min-width: 900px; }

/* ── A KÖNYV SORAI: KOMPAKT ────────────────────────────────────────────────────────
   ⚠️ **MÉRT hiba javítása** (a felhasználó kérése: *„kicsit kompaktabb sorokat szeretnék,
   hogy egy kijelzőn többet is lehessen olvasni"*). A sor 47 px volt, és ebből 30-at a sor
   végi szem-ikon foglalt (30 + 2×8 px Bootstrap-cellabelső = 46, plusz szegély). A szöveg
   magától 40-et kért volna.

   ⚠️ **A DÖNTŐ lépés az IKON-OSZLOP törlése volt, nem a padding.** Pusztán a belsőt
   szűkítve a sor a 30 px-es gombon MEGÁLLT volna – a gomb a padló. Az ikon ráadásul
   fölösleges volt: a sorra kattintás ugyanazt csinálta. A billentyűzetes elérést a
   bizonylatszám linkje vette át, ami nem kér külön oszlopot.

   ⚠️ A `.od-cb-table` PREFIX kötelező: a Bootstrap `.table > :not(caption) > * > *`
   (0-1-1) minden cellára ráír `padding`-et, a csupasz osztály némán alulmaradna. */
.od-cb-table > :not(caption) > * > * { padding: .3rem .45rem; }

.od-cb-table tbody td { font-size: .85rem; line-height: 1.4; }

/* A bizonylatszám linkje: a sor egésze is kattintható, ez a BILLENTYŰZETES út.
   ⚠️ Aláhúzás nélkül, mert a teljes sor amúgy is kattintható – az aláhúzás azt
   sugallná, hogy csak ez a szó az. Fókuszban viszont LÁTSZANIA kell. */
.od-cb-table a.od-cb-voucher { color: var(--od-primary); text-decoration: none; }
.od-cb-table a.od-cb-voucher:hover { text-decoration: underline; }

/* ⚠️ **AZ `.od-cb-lines` TÁBLÁZAT MEGSZŰNT** (2026-09-04): a bizonylat tételsorai
   `table`-ről CSS-rácsra kerültek (`.od-cbl`, lásd lent), mert a sorhoz MÁSODIK,
   halványabb sáv is tartozik. A hozzá tartozó szabályok ezért innen KIKERÜLTEK, nem
   maradtak „hátha" alapon: a holt szabály a következő olvasót arról győzné meg, hogy a
   lap még táblázat, és a Bootstrap-ütközésekről szóló indoklást a rácsra próbálná
   alkalmazni. A `.od-cb-table` (a KÖNYV listája) érintetlen – az továbbra is táblázat. */

/* ⚠️ MIND A HÁROM szabály a TÁBLÁZAT-osztályról indul, és ez MÉRT hiba javítása.
   A Bootstrap `.table > :not(caption) > * > *` (0-1-1) MINDEN cellára ráír `color`-t és
   `background-color`-t; a csupasz `.od-cb-neg` (0-1-0) tehát NÉMÁN alulmaradt – mérve a
   negatív egyenleg `rgb(0,0,0)` volt a piros helyett, vagyis pont a figyelmeztetés veszett
   el. A `td`-s alak (`.od-cb-opening td`, 0-1-1) csak azért hatott, mert az `app.css`
   KÉSŐBB töltődik – az viszont a betöltési sorrenden múlna, ami a projektben már okozott
   néma hibát (`od-page-wrap`, `@container`). A táblázat-prefixszel mindhárom 0-2-1, tehát
   szerkezetileg nyer. */

/* A nyitó egyenleg sora: a futó egyenleg innen indul. */
.od-cb-table .od-cb-opening td {
    background: var(--od-gray-50);
    color: var(--od-gray-500);
    font-size: .9rem;
}

.od-cb-table .od-cb-total td {
    background: var(--od-gray-50);
    font-weight: 600;
    border-top: 2px solid var(--od-gray-200);
}

/* ── A HÁROM ÖSSZEG-OSZLOP SZÍNE ─────────────────────────────────────────────────────
   (a felhasználó kimondott kérése, 2026-08-30)

   bevétel ZÖLD · kiadás NARANCS · egyenleg KÉK

   ⚠️ **A KIADÁS NARANCS, NEM PIROS – és ez nem ízlés kérdése.** A piros ezen a lapon MÁR
   FOGLALT: a NEGATÍV egyenlegé (lásd lent), ami valódi figyelmeztetés. A kiadást is
   pirosra véve minden sor pirosat mutatna, és a jelzés pár nap alatt elszürkülne – pont
   az veszne el, amiért a piros ott van. A kiadás NORMÁLIS működés, nem hiba.

   ⚠️ **TÁBLÁZAT-PREFIX KÖTELEZŐ** (0-2-1): a Bootstrap `.table > :not(caption) > * > *`
   szabálya (0-1-1) MINDEN cellára ráír `color`-t, tehát a csupasz osztály NÉMÁN
   alulmaradna. Ez a lapon MÁR EGYSZER MÉRT hiba volt (`od-cb-neg`).

   ⚠️ A NYITÓ sor egyenlege SZÁNDÉKOSAN halvány marad (`od-cb-opening`, 0-2-1 ugyanígy):
   az nem „az" egyenleg, hanem a kiindulás – kékre véve adatnak látszana. */
.od-cb-table td.od-cb-in { color: var(--od-success); }

.od-cb-table td.od-cb-out { color: var(--od-warning); }

.od-cb-table td.od-cb-bal { color: var(--od-primary); }

/* ⚠️ A negatív egyenleg PIROS – de ez FIGYELMEZTETÉS, nem hiba: pénztárnál valódi jelzés
   (készpénz nem lehet mínusz), banknál lehet folyószámlahitel is. A magyarázatot a lap
   tetején álló sáv adja, nem a szín.
   ⚠️ **A kék UTÁN áll, azonos specifikussággal (0-2-1), tehát NYER** – a sorrend cseréje
   némán elvenné a figyelmeztetést. */
.od-cb-table td.od-cb-neg { color: var(--od-danger); }

.od-cb-clickable { cursor: pointer; }

/* A törzs-ablak szerkesztő blokkjai. */
.od-cb-editor {
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    padding: 1rem;
}

/* A tételsor szűk mezői – a táblázat így a tartalomhoz igazodik, nem a leghosszabb
   értékhez. */
.od-cb-rate { min-width: 92px; }
.od-cb-row { min-width: 80px; }

/* ⚠️ Az `.od-cb-acc` (a főkönyvi mező régi szélessége) KIKERÜLT: azt a `datalist`-es
   `<input>` használta, amit a `LedgerAccountPicker` váltott ki. Egy osztály nélküli
   szabály szándéknak látszana a következő olvasónak (18. tanulság). */

/* ⚠️ **Az összeg-mezők SZÉLESÍTVE – valós panasz javítása.** A `width:1%` fejléc a
   „legyen olyan keskeny, amilyen a tartalma" trükk; az `AmountInput` így 72 px-re szorult,
   amiben egy `1 234 567,00` (12 karakter) sem fér ki, és a szám levágódik. A 130 px a
   tízmilliós nagyságrendet is elviszi – banknál az valós. */
.od-cb-amt { min-width: 130px; }

/* ── A főkönyv/rovat KERESHETŐ választója a tételtáblázatban ────────── */

/* ⚠️ **A CELLA a lebegő lista horgonya.** Enélkül a legközelebbi pozicionált ős a
   `.od-cb-scroll` görgetődoboz lenne, és a lista a DOBOZ aljához igazodna – vagyis a
   táblázat alá, a rossz helyre. */
.od-cbl .od-cb-accell { position: relative; }

/* ⚠️ **JOBBRA igazítva, nem a cella szélességében.** A `LedgerAccountPicker` alapszabálya
   `left: 0; right: 0`, ami a HÁROM mező sorát fogja át az ablakban – itt viszont a horgony
   egy ~140 px-es cella, amiben a „5111 – Anyagköltség" olvashatatlan lenne. A `right: 0`
   miatt a lista a cella jobb szélétől BALRA nyúlik, tehát a táblázat jobb szélén sem lóg ki
   (utána már csak a keskeny művelet-oszlop áll). */
.od-cbl .od-accsel-pop {
    left: auto;
    right: 0;
    min-width: 340px;
}

/* ⚠️ **A GÖRGETŐDOBOZ HELYET CSINÁL a nyitott listának – és ez MÉRT hiba javítása.** A
   `.table-responsive` `overflow-x: auto`, amitől a böngésző az `overflow-y`-t is `auto`-ra
   teszi (CSS-spec): a lebegő lista `position: absolute`, tehát KIKERÜL a normál
   elrendezésből, a doboz magasságát nem növeli – mérve **179 képponttal túlnyúlt**, és az
   alján az `elementFromPoint` SEMMIT adott vissza, vagyis elvágódott.
   A `:has()` csak akkor ad alsó teret, amikor tényleg nyitva van egy lista – állandó
   paddinggal a kártya alján mindig ott ülne egy üres sáv. */
.od-cb-scroll:has(.od-accsel-pop),
.od-cbl-scroll:has(.od-accsel-pop) { padding-bottom: 240px; }

/* ⚠️ A főkönyv/rovat alatti ÉLŐ visszajelzés (a szám NEVE, vagy a hiba oka). A `datalist`
   ismert gyengéje, hogy bármit be lehet gépelni, és csak mentéskor derül ki – ez a
   visszajelzés zárja be: a felhasználó AZONNAL látja, mit írt be. */
.od-cb-hint {
    display: block;
    font-size: .75rem;
    color: var(--od-gray-500);
    margin-top: .15rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Kiegyenlítés ───────────────────────────────────────────────────── */

/* A KIEGYENLÍTETTSÉG jelzése – a pénzügyi nyilvántartásban és a választóban.

   ⚠️ **A „nem eldönthető” SZÁNDÉKOSAN nem piros**, hanem semleges szürke: az nem hiba,
   hanem hiányzó adat (a devizás számla forintosított értéke a részletes NAV-lehívásból
   jön, ami kérés-költségvetéssel csordogál). Pirossal a szem hibának olvasná, és pár hét
   alatt elszürkítené a valódi jelzéseket – ugyanaz az érv, mint az időarányos értékhatár
   semleges chipjénél. */
.od-settle-chip {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.od-settle-chip.is-open     { background: var(--od-gray-100); color: var(--od-gray-600); }
.od-settle-chip.is-partial  { background: #FEF3C7;            color: #92400E; }
.od-settle-chip.is-settled  { background: #DCFCE7;            color: #15803D; }
.od-settle-chip.is-unknown  { background: var(--od-gray-100); color: var(--od-gray-500); }

/* A kiegyenlítettség SZŰRŐJE – a `od-dirseg` szerkezetére épül, saját színekkel.
   ⚠️ A színek a fenti chipekével AZONOSAK: az köti össze a szűrőt a listával. Eltérő
   árnyalattal a könyvelőnek két jelrendszert kellene fejben tartania ugyanarra. */
.od-settleseg-open.is-on     { background: var(--od-gray-200); color: var(--od-gray-700); }
.od-settleseg-partial.is-on  { background: #FEF3C7;            color: #92400E; }
.od-settleseg-settled.is-on  { background: #DCFCE7;            color: #15803D; }

/* A nyilvántartás kiegyenlítés-oszlopa. ⚠️ `width: 1%` + `nowrap`: a chip a saját
   szélességét kéri, a maradékot a partner- és a tételnév-oszlop kapja. */
.od-fr-c-settle {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* A KIVÁLASZTOTT állapot jelzése – ma a tételsor kiegyenlítés-cellájában és a
   bizonylatkép nevénél.
   ⚠️ A hozzá tartozó `.od-sp-btn` (a soronkénti választó ikonos gombja) 2026-08-29-én
   KIKERÜLT: a választás a bizonylat fejlécéből, a `SettlementDialog` ablakából megy,
   tehát a gomb halott osztály lett volna. A magassága 30 px volt, hogy a sor magassága
   NE függjön attól, be van-e állítva a kiegyenlítés – ez a szempont a mai, „chip vagy
   gondolatjel” párosnál is él, ezért kell mérni. */
.od-sp-current {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 170px;
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: flex-elem alapértelmezett `min-width: auto`-val nem tud a
   tartalma alá zsugorodni, tehát a hosszú számlaszám kitolná a cellát. */
.od-sp-num {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
}

/* A KÖNYV sorában: hány számlát egyenlít ki a bizonylat. */
.od-cb-settle-chip {
    display: inline-block;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   TÖBB SZÁMLA KIEGYENLÍTÉSE – a bizonylat fejlécéből nyíló ablak
   (`SettlementDialog`).

   ⚠️ SAJÁT szélesség-modifier, NEM az `od-modal-wide` (620 px) vagy az
   `od-modal-form` (880 px): itt HÉT oszlopos táblázat van, és a
   620 px-be a partner meg a három összeg nem fér ki olvashatóan.
   Egy kész osztályt MÁS célra használva pontosan a 18. tanulságba
   futnánk – ezért kap sajátot.
   ============================================================ */
.od-sd-modal { width: min(940px, calc(100vw - 2rem)); }

/* ============================================================================
   FORDÍTOTT ÁFA KÖNYVELÉSE  (od-rv-)
   ----------------------------------------------------------------------------
   Két szakasz, mindkettő önállóan pipálható – az alanyi adómentes cég csak a
   fizetendőt könyveli. A szakasz `fieldset`, a jelölő a `legend`-ben: így a
   képernyőolvasó a mezőket a hozzájuk tartozó jelölővel együtt mondja.
   ============================================================================ */
.od-rv-modal { width: min(720px, calc(100vw - 2rem)); }

.od-rv-common {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.od-rv-block {
    border: 1px solid var(--od-gray-200);
    border-radius: 10px;
    padding: .35rem .9rem .9rem;
    margin-bottom: .9rem;
}

/* A KIJELÖLT szakasz kiemelve: a felhasználónak egy pillantásból látnia kell,
   melyik oldal fog ténylegesen bizonylatot kapni. */
.od-rv-block.is-on {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

.od-rv-legend {
    float: none;
    width: auto;
    padding: 0 .35rem;
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
}

.od-rv-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--od-gray-700);
}
.od-rv-check input { margin: 0; }

.od-rv-grid {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 130px;
    gap: .6rem;
    margin-bottom: .7rem;
}

/* A HÁROM LÁB – a főkönyvi szám és a T/K jelölés a szám mellett, ahogy a
   könyvelő a bizonylaton is látja. */
.od-rv-legs {
    display: grid;
    gap: .25rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--od-gray-200);
}

.od-rv-leg {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 80px 24px;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
}

.od-rv-leg-name { color: var(--od-gray-500); }

.od-rv-leg-sum {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--od-gray-800);
}

.od-rv-leg-acc {
    font-family: var(--od-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    color: var(--od-gray-700);
}

/* A T és a K SZÍNNEL is elválik, nem csak betűvel: a két oldal felcserélése a
   legdrágább hiba ezen a felületen, és a bizonylat attól még egyensúlyozna. */
.od-rv-leg-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: .74rem;
    font-weight: 700;
}
.od-rv-leg-side.is-debit { background: #FEF2F2; color: #B91C1C; }
.od-rv-leg-side.is-credit { background: #EFF6FF; color: #1D4ED8; }

@media (max-width: 575.98px) {
    .od-rv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ⚠️ A lista MAGA görget, nem az ablak: enélkül a fejléc és a lábléc
   (a „Hozzáadás (N)" gombbal) kicsúszna a képernyőből – épp az a gomb,
   amiért az ablak nyitva van. Ugyanaz a szabály, mint az import-ablak
   hibalistájánál. */
.od-sd-list {
    max-height: min(46vh, 380px);
    overflow: auto;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
}

.od-sd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

/* ⚠️ **A FEJLÉC GÖRGETÉS KÖZBEN IS LÁTSZIK** (a felhasználó kérése) – enélkül
   a hetedik sornál már nem tudni, melyik szám a bruttó és melyik a hátralék.
   ⚠️ A `th` alatti vonal `inset` ÁRNYÉK, nem `border`: `border-collapse:
   collapse` mellett a ragadó cella kerete elcsúszik görgetéskor. */
.od-sd-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--od-gray-50);
    box-shadow: inset 0 -1px 0 var(--od-gray-200);
    padding: .5rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    text-align: left;
    white-space: nowrap;
}

.od-sd-table tbody tr {
    border-bottom: 1px solid var(--od-gray-100);
    cursor: pointer;
}

.od-sd-table tbody tr:last-child { border-bottom: 0; }
.od-sd-table tbody tr:hover      { background: var(--od-primary-xlt); }
.od-sd-table tbody tr.is-on      { background: var(--od-primary-xlt); }

/* A MÁR felvett számla: látszik, de nem választható. Elrejtve a könyvelő
   azt hinné, eltűnt a listából. */
.od-sd-table tbody tr.is-used       { cursor: default; opacity: .5; }
.od-sd-table tbody tr.is-used:hover { background: none; }

.od-sd-table td {
    padding: .45rem .6rem;
    vertical-align: middle;
    white-space: nowrap;
}

.od-sd-chk {
    display: block;
    width: 16px;
    height: 16px;
    accent-color: var(--od-primary);
    cursor: inherit;
}

.od-sd-num {
    font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: .8rem;
    font-weight: 600;
    color: var(--od-primary-dark);
}

/* ⚠️ A partner az EGYETLEN rugalmas oszlop: a `max-width` + ellipszis tartja
   a táblázatot a helyén, különben egy hosszú cégnév kitolná a hét oszlopot. */
.od-sd-partner {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--od-gray-600);
}

.od-sd-date   { color: var(--od-gray-500); font-size: .82rem; }
.od-sd-remain { font-weight: 600; }

.od-sd-tag {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: .62rem;
    font-weight: 600;
    background: var(--od-primary-xlt);
    color: var(--od-primary-dark);
}

.od-sd-fx {
    display: block;
    font-size: .65rem;
    font-weight: 400;
    color: var(--od-gray-500);
}

/* A lábléc BALRA a darabszám, JOBBRA a gombok – az alap `od-modal-footer`
   mindent jobbra told. */
.od-sd-footer {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.od-sd-count { font-size: .87rem; color: var(--od-gray-600); }

/* ---------------------------------------------------------------------------
   Árfolyam-sor a kijelölt, DEVIZÁS számla alatt.

   ⚠️ A sor a fölötte lévő számla RÉSZE, nem önálló tétel: halvány háttér és
   FELSŐ keret NÉLKÜL – így a szem a kettőt egy egységként olvassa. Külön
   kerettel új sornak látszana, és a könyvelő azt hinné, kétszer jelölt ki.
   --------------------------------------------------------------------------- */
.od-sd-table tbody tr.od-sd-fxrow {
    background: var(--od-gray-50);
    cursor: default;
    border-bottom: 1px solid var(--od-gray-100);
}

/* ⚠️ A `:hover` a testvér sorok szabályát ütné ki, ezért KIÍRVA: enélkül az
   árfolyam-sor a kék kijelölés-színt venné fel, és önálló, kattintható sornak
   látszana – pedig épp az nem. */
.od-sd-table tbody tr.od-sd-fxrow:hover { background: var(--od-gray-50); }

/* ⚠️ A `white-space: nowrap` az általános cella-szabályból jönne, itt viszont a
   magyarázó szöveg TÖRDELHET kell legyen – egy sorban a figyelmeztetés kitolná
   a táblázatot. */
.od-sd-fxrow td { white-space: normal; }

.od-sd-fx-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem 1rem;
}

.od-sd-fx-lbl {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    margin-bottom: .15rem;
}

/* ⚠️ Fix szélesség: a két mező a hat tizedes árfolyamot és a forintot is
   elviseli, viszont nem nyúlik el a rugalmas sávban. */
.od-sd-fx-in {
    width: 150px;
    font-size: .85rem;
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: flex-elem alapértelmezett `min-width: auto`-ja
   mellett a hosszú figyelmeztetés nem tudna a tartalma alá zsugorodni, tehát
   kitolná a sort – és vele az egész táblázatot. */
.od-sd-fx-info {
    flex: 1 1 260px;
    min-width: 0;
    font-size: .8rem;
    line-height: 1.35;
}

.od-sd-fx-cur {
    display: block;
    font-weight: 600;
    color: var(--od-gray-600);
}

/* ⚠️ A nyereség ZÖLD, a veszteség PIROS – ugyanaz a két változó, amit a
   pénztárkönyv bevétel/kiadás oszlopa is használ, tehát a szem ugyanazt a
   jelrendszert olvassa. A hiányzó beállítás BOROSTYÁN: az nem hiba, hanem
   TEENDŐ (a piros az ÁTLÉPÉSÉ). */
.od-sd-fx-gain { color: var(--od-success); font-weight: 600; }
.od-sd-fx-loss { color: var(--od-danger);  font-weight: 600; }
.od-sd-fx-warn { color: var(--od-warning); font-weight: 600; }

/* A bizonylat kiegyenlítés-összegzője: a „Tételsorok" kártyafejléc és a görgethető
   táblázat KÖZÖTT. ⚠️ Nem a kártyafejlécben van, mert ott a két gomb mellé szorulva
   tördelne; és nem a táblázat alatt, mert a hosszú bizonylat aljára görgetni kellene
   érte – a kijelölés viszont FENT, az ablakban történik. */
.od-cb-settlebar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    background: var(--od-primary-xlt);
    border-top: 1px solid var(--od-gray-200);
    border-bottom: 1px solid var(--od-gray-200);
    color: var(--od-gray-700);
    font-size: .87rem;
}

.od-cb-settlebar i { color: var(--od-primary); }

/* ── A KÖNYV SZŰRŐSÁVJA ────────────────────────────────────────────────────────────
   ⚠️ A keresődoboz RUGALMAS, de KORLÁTOZOTT: korlát nélkül elnyelné a sáv maradékát, és a
   szegmensek a következő sorba tördelnének. A felső határ a leghosszabb helyőrzőhöz van
   szabva. */
.od-cb-searchbox { flex: 1 1 280px; max-width: 420px; min-width: 0; }

/* ⚠️ Az időszak-választó FIX szélességű – a felhasználó kérése (2026‑09‑04). A gomb
   felirata MAGA az állapot („Minden időszak" vagy a teljes, kiírt tartomány), tehát
   rugalmas szélességgel minden váltáskor átméreteződne, és vele az egész szűrősáv
   elrendezése megugrana. A méret a leghosszabb alakra van szabva. */
.od-cb-drp .od-drp { width: 256px; }
.od-cb-drp .od-drp-trigger { width: 100%; }

/* ⚠️ **A KÖNYV IRÁNY-SZÍNEI: zöld bevétel, BOROSTYÁN kiadás.** A közös `DirectionFilter`
   zöld–PIROS párja a SZÁMLA irányáé; ezen a lapon a piros FOGLALT – a negatív egyenlegé.
   Kiadásra véve minden második sor riasztana, és a valódi jelzés elszürkülne.
   ⚠️ A borostyán pár nem új szín: ugyanaz, amit az `od-imgseg-no` is használ. */
.od-cbseg-in.is-on  { background: #DCFCE7; color: #15803D; }
.od-cbseg-out.is-on { background: #FEF3C7; color: #92400E; }

/* ── Kattintható fejléc-cella (rendezés) ──────────────────────────────────────────
   ⚠️ `button`, nem kattintható `th`: a cellára kötött kezelő egérrel működne, de a `th`
   nem fókuszálható, tehát billentyűzettel elérhetetlen lenne.
   ⚠️ A gomb ÖRÖKLI a fejléc tipográfiáját (`font: inherit`), különben a rendezhető és a
   statikus oszlopok felirata eltérő méretű lenne – a fejléc szétesne. */
.od-cb-sortbtn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.od-cb-sortbtn:hover { color: var(--od-primary); }
.od-cb-sortbtn.is-on { color: var(--od-primary); }
.od-cb-sortbtn i { font-size: .7rem; }

/* A szűrés-jelző sáv: kimondja, hogy nem a teljes könyv látszik – és hogy az
   egyenleg-oszlop ettől függetlenül valódi. */
.od-cb-filterbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--od-primary-xlt);
    border-bottom: 1px solid var(--od-gray-200);
    color: var(--od-gray-700);
    font-size: .85rem;
}

.od-cb-filterbar i { color: var(--od-primary); }

/* ⚠️ Szűrt nézetben KÉT összegző sor áll egymás alatt; a MÁSODIK (az évé) halványabb,
   különben a két egyforma súlyú sor azt sugallná, hogy ugyanarról beszélnek. */
.od-cb-table .od-cb-total-year td { color: var(--od-gray-500); border-top: 1px solid var(--od-gray-200); }

/* KIADÁSNÁL a kiegyenlítés-kártya ÜRES állapota: kimondja, hogy a kihagyás is szabályos. */
.od-cb-settlenone {
    padding: .55rem 1rem;
    border-top: 1px solid var(--od-gray-200);
    color: var(--od-gray-500);
    font-size: .85rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   A BIZONYLAT-SZERKESZTŐ ÚJ ELRENDEZÉSE  (2026-09-04, jóváhagyott terv)

   ⚠️ **Ugyanaz az `od-cb-` névtér**, nem újabb: ezek a szabályok UGYANANNAK a modulnak
   (pénztár/bank) a részei. A tételsorok rácsa kapott saját, RÖVIDEBB előtagot
   (`od-cbl-` = cash-bank lines), mert azok egyetlen összefüggő szerkezetet írnak le, és
   a soronkénti szabályokban az `od-cb-lines-` minden sorban zajos lenne.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── Irányváltó: kétállású kapcsoló a lap fejlécében ─────────────────────────────────
   ⚠️ A KIVÁLASZTOTT oldal TÖMÖR színt kap, nem keretet: a keretes jelölés a szomszédos,
   ugyanolyan méretű gomb mellett nem elég erős – kinyitás nélkül kellene megmondania,
   melyik állapotban vagyunk. */
.od-cb-dirswitch {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--od-gray-100);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
}

.od-cb-dirbtn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 32px;
    padding: 0 .85rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--od-gray-500);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--od-transition);
}

/* ⚠️ A `:not()` KÖTELEZŐ: enélkül a hover az AKTÍV gomb fehér szövegét is átírná
   sötétszürkére a tömör zöld/narancs alapon – vagyis pont a kiválasztott állapot
   olvashatatlanná válna az egér alatt. */
.od-cb-dirbtn:not(.is-in):not(.is-out):hover {
    background: var(--od-white);
    color: var(--od-gray-800);
}

.od-cb-dirbtn.is-in  { background: var(--od-success); color: var(--od-white); font-weight: 700; }
.od-cb-dirbtn.is-out { background: var(--od-warning); color: var(--od-white); font-weight: 700; }
.od-cb-dirbtn i { font-size: 1.05rem; line-height: 1; }

/* ── Ragadós összeg- és művelet-sáv ──────────────────────────────────────────────────
   ⚠️ **A `top` a FIX navbar magasságából számol** – puszta `0`-val a sáv a navbar MÖGÉ
   csúszna, és a ragadás pont akkor tűnne el, amikor kellene. Ugyanaz a képlet, amit a
   képhasáb is használ.

   ⚠️ **A BAL SZEGÉLY hordozza az irány színét, nem a háttér.** Teli zöld vagy narancs
   háttéren a sávban álló Mentés gomb (tömör kék) elveszne, és a szín a lap
   legnagyobb felületét foglalná el – a jelzés így pont ott gyengülne, ahol a
   tételsorok bruttó cellái is színt használnak. */
.od-cb-sumbar {
    position: sticky;
    top: calc(var(--od-navbar-h) + .5rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .8rem 1.25rem;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-300);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-sm);
}

.od-cb-sumbar.is-in  { border-left-color: var(--od-success); }
.od-cb-sumbar.is-out { border-left-color: var(--od-warning); }

.od-cb-sumbar-main {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    min-width: 0;
}

.od-cb-sumfig { display: flex; flex-direction: column; min-width: 0; }

.od-cb-sumfig-label { font-size: .78rem; color: var(--od-gray-500); }

.od-cb-sumfig-value { font-size: 1.55rem; font-weight: 800; line-height: 1.2; }

.od-cb-sumbar.is-in  .od-cb-sumfig-value { color: var(--od-success); }
.od-cb-sumbar.is-out .od-cb-sumfig-value { color: var(--od-warning); }

.od-cb-sumsep {
    flex: 0 0 auto;
    width: 1px;
    min-height: 38px;
    align-self: stretch;
    background: var(--od-gray-200);
}

.od-cb-sumbal { font-size: 1.05rem; font-weight: 700; color: var(--od-primary); }

/* ⚠️ A negatív egyenleg PIROS – FIGYELMEZTETÉS, nem hiba (pénztárnál készpénz nem lehet
   mínusz, banknál lehet folyószámlahitel). Ugyanaz a szabály, ami a KÖNYV oszlopában is
   él; a kék UTÁN áll, azonos specifikussággal, tehát nyer. */
.od-cb-sumbal.is-neg { color: var(--od-danger); }

.od-cb-sumbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* ── AZ ŰRLAP-OSZLOP SAJÁT MÉRETKONTÉNERE ───────────────────────────────────────────
   ⚠️ **A töréspontoknak az ŰRLAP-OSZLOPOT kell mérniük, nem a teljes board-ot** – ez
   MÉRT hiba javítása (2026‑09‑04). Nyitott képhasáb mellett 4K képernyőn a board 1568 px,
   az űrlapnak viszont csak **650 px** marad (a képhasáb 900 px-ig nőhet). A board-ra néző
   küszöb ilyenkor sosem sül el, és a szűk oszlopban a partner neve hat sorba tört.

   ⚠️ **NEVESÍTETT konténer** (`od-cbe`), és a lekérdezések is névvel hivatkoznak rá: így
   a szabály akkor is a helyes ősre néz, ha később bárki új konténert tesz közé.

   ⚠️ Az osztály CSAK a bizonylat-szerkesztőn ül az `od-cbi-main`-en – azt ugyanis HÁROM
   lap használja, és a közös osztályra téve mindháromon átírná, melyik ősre néznek a
   bennük álló `@container` szabályok (18. tanulság). */
.od-cbe-col { container: od-cbe / inline-size; }

/* ── A fejléc-adatok EGY sora: Kelt · Partner · Megjegyzés ───────────────────────────
   ⚠️ **FLEX, wrap-pal – NEM rács, és ez nem stílus kérdése.** Három rögzített rács-oszlop
   egy 650 px-es hasábban fejenként ~230 px-et adna, amiben egy cégnév és egy cím
   olvashatatlanra tördelődik. A `flex-wrap` viszont AKKOR tör sort, amikor tényleg
   elfogyott a hely – töréspont nélkül, bármilyen szélességnél helyesen.

   ⚠️ A Kelt FIX, szűk sávot kap (`0 0 170px`): a dátum szélessége adott, rugalmas sávban
   csak üres helyet nyelne el. A másik kettő `1 1 260px`: a 260 px az az alsó határ,
   ami alatt inkább új sorba kerülnek, mint hogy összepréselődjenek. */
.od-cb-headrow {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.od-cb-headcell { min-width: 0; }

.od-cb-headrow > .od-cb-headcell:first-child { flex: 0 0 170px; }
.od-cb-headrow > .od-cb-headcell:not(:first-child) { flex: 1 1 260px; }

/* A bizonylatkép a kártya LÁBÁBA került – szaggatott vonal választja el az adatoktól,
   mert csatolmány, nem adat.

   ⚠️ **EGYETLEN SOR: a címke és a gombok egymás mellett** (a felhasználó kérése,
   2026‑09‑04). Korábban a címke, a gombok és a súgó három sort vitt el; nyitott
   képhasábnál ez az űrlap magasságának a nyolcada volt, egy olyan funkcióért, amit a
   bizonylatok nagyobb részén nem is használnak. `flex-wrap`: nagyon szűk hasábban a
   gombok azért még sort tudnak törni. */
.od-cb-headfoot {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--od-gray-200);
}

/* ⚠️ `span`, nem `label` – a `form-label` alsó margója és blokk-alakja új sorba
   kényszerítené, és pont a tömörséget venné el. */
.od-cb-headfoot-lbl {
    font-size: .8rem;
    font-weight: 600;
    color: var(--od-gray-600);
}

/* ── A tételsorok RÁCSA (`od-cbl-`) ──────────────────────────────────────────────────
   ⚠️ **A HÁROM rács-sor (fejléc, tétel, összegző) UGYANAZT az oszlopdefiníciót kapja,
   egyetlen szabályban.** Külön felsorolva egy oszlop szélesítése három helyen kellene,
   és az elmaradt harmadik NÉMÁN elcsúsztatná az összegzőt a fejléchez képest – ez a
   táblázatos alaknál a `colspan` elfelejtéseként már valós hiba volt. */
.od-cbl-scroll { position: relative; overflow-x: auto; }

.od-cbl { min-width: 1120px; }

/* ⚠️ **KILENC sáv, a GÉPELÉS sorrendjében**: # · Megnevezés · ÁFA% · B.sor · Nettó · ÁFA ·
   Bruttó · Főkönyv · művelet. Az ÁFA-kulcs és a bevallási sor SZÁNDÉKOSAN az összegek ELŐTT
   áll (a felhasználó kérése, 2026‑09‑04): így a NETTÓ–ÁFA–BRUTTÓ hármas egyben marad, és
   egy pillantással összevethető a bizonylattal – nem vágja ketté egy legördülő. */
.od-cbl-head,
.od-cbl-grid,
.od-cbl-total {
    display: grid;
    grid-template-columns: 30px minmax(150px, 1fr) 100px 110px 140px 130px 150px 160px 34px;
    gap: .5rem;
    align-items: center;
}

.od-cbl-head {
    padding: .5rem 1rem;
    background: var(--od-gray-50);
    border-top: 1px solid var(--od-gray-200);
    border-bottom: 1px solid var(--od-gray-200);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

.od-cbl-r { text-align: right; }

.od-cbl-row { padding: .5rem 1rem; border-bottom: 1px solid var(--od-gray-100); }

.od-cbl-no { font-size: .85rem; color: var(--od-gray-400); }

.od-cbl-cell { min-width: 0; }

.od-cbl-del { text-align: right; }

/* ⚠️ A BRUTTÓ cellája kiemelt: az az EGYETLEN szám, amit a papír bizonylatról
   ellenőriznek – a nettó és az ÁFA többnyire számított érték. A szín az IRÁNYÉ
   (bevétel zöld, kiadás narancs), a rács osztályáról öröklődik. */
.od-cbl-gross .form-control { background: var(--od-gray-50); font-weight: 700; }
.od-cbl.is-in  .od-cbl-gross .form-control { color: var(--od-success); }
.od-cbl.is-out .od-cbl-gross .form-control { color: var(--od-warning); }

/* ── A sor LÁBA: CSAK a kiegyenlítés jelzése, és CSAK ha van ─────────────────────────
   ⚠️ A behúzás a SORSZÁM oszlopával egyezik (30 px + a rács hézaga), így a jelzés a
   megnevezés alá kerül, nem a sor bal szélére.

   ⚠️ **A bevallási sor mezője INNEN a rácsba került** (2026‑09‑04): itt lent minden soron
   elvitt egy sormagasságot, üresen is. A láb így már csak kiegyenlítésnél jelenik meg –
   a bizonylatok nagyobb részén egyáltalán nem rajzolódik ki. */
.od-cbl-foot {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: .35rem 0 .1rem calc(30px + .5rem);
    font-size: .78rem;
    color: var(--od-gray-400);
}

.od-cbl-settle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .6rem;
    background: var(--od-success-xlt);
    border: 1px solid var(--od-success-line);
    border-radius: 999px;
    color: var(--od-success-dark);
    font-weight: 600;
}

.od-cbl-settlex {
    padding: 0 0 0 .2rem;
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}

.od-cbl-settlex:hover { opacity: 1; }

.od-cbl-total {
    padding: .7rem 1rem;
    background: var(--od-gray-50);
    border-top: 2px solid var(--od-gray-200);
    font-weight: 600;
}

.od-cbl-totalgross { font-size: 1.05rem; font-weight: 800; }
.od-cbl.is-in  .od-cbl-totalgross { color: var(--od-success); }
.od-cbl.is-out .od-cbl-totalgross { color: var(--od-warning); }

/* ── SZŰK munkaterület: a rács KÁRTYÁKRA bomlik ──────────────────────────────────────
   ⚠️ A küszöb a KONTÉNERRE vonatkozik (`od-cbi-board`), nem az ablakra: a munkaterület
   jobb eszközsávja 380 px-et vesz el, miközben az ablak ugyanolyan széles marad.
   Képernyő-alapú töréspontnál egy nyitott jegyzet mellett a rács SZÉLESNEK hinné magát.

   ⚠️ **A cellák a `data-label`-jükből kapják a feliratot** – a rács fejléce itt eltűnik,
   és felirat nélkül a négy szám (nettó, ÁFA%, ÁFA, bruttó) megkülönböztethetetlen
   lenne. A `::before` tartalma ezért NEM dekoráció: adat. */
@container od-cbe (max-width: 860px) {
    .od-cbl { min-width: 0; }
    .od-cbl-head { display: none; }

    /* ⚠️ **HAT sáv, nem kettő – hogy a NETTÓ · ÁFA · BRUTTÓ egymás MELLÉ férjen.** A
       felhasználó kérése (2026‑09‑04): *„Számlakép megjelenéskor is a nettó áfa bruttó
       egymás mellé kerüljön, és fölé kerüljön az áfa % és a bevallási sor, így jobban
       átláthatóbb lesz."* Kétoszlopos rácsban a három összeg NEM fér egy sorba; hat
       sávval a hármas 2-2-2, a fölötte lévő páros 3-3 arányban osztozik. */
    .od-cbl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem .5rem; }

    .od-cbl-cell::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .1rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--od-gray-400);
    }

    /* ⚠️ A MEGNEVEZÉS és a FŐKÖNYV teljes szélességű: mindkettő SZÖVEG, és fél oszlopban
       a „5111 – Anyagköltség" alak levágódna – a főkönyvi szám neve pont az, amiből a
       könyvelő ellenőrzi, hogy jót választott. ⚠️ A főkönyv cellája `.od-cb-accell`-ként
       hivatkozva: a `data-label`-je egyéni vállalkozónál „Rovat", tehát arra szűrve a
       szabály ott NÉMÁN kimaradna. */
    .od-cbl-cell[data-label="Megnevezés"],
    .od-cbl-grid > .od-cb-accell { grid-column: 1 / -1; }

    /* A besoroló páros: ÁFA-kulcs és bevallási sor, FÉL-FÉL sorban, az összegek FÖLÖTT. */
    .od-cbl-cell[data-label="ÁFA%"]  { grid-column: 1 / 4; }
    .od-cbl-cell[data-label="B.sor"] { grid-column: 4 / -1; }

    /* Az összeg-hármas EGY sorban, harmadolva. */
    .od-cbl-cell[data-label="Nettó"]  { grid-column: 1 / 3; }
    .od-cbl-cell[data-label="ÁFA"]    { grid-column: 3 / 5; }
    .od-cbl-cell[data-label="Bruttó"] { grid-column: 5 / -1; }

    /* ⚠️ A sorszám és a törlés EGY sorba, a kártya TETEJÉRE – a `grid-row` nélkül a
       törlés a rács végén, a főkönyv mellé sodródna, ahol a mellényúlás ára a legnagyobb. */
    .od-cbl-no  { grid-column: 1 / 4; grid-row: 1; }
    .od-cbl-del { grid-column: 4 / -1; grid-row: 1; }

    /* ── Az ÖSSZEGZŐ EGY SORBAN marad ────────────────────────────────────────────────
       ⚠️ **MÉRT hiba javítása** (a felhasználó jelezte: *„az összesen sor szét van csúszva,
       ha van számlakép"*). Rácsban a három összeg a kártya-alakban két sorba tört, és a
       feliratuk külön sorba került föléjük – egy háromtagú összegzőből öt sor lett.
       Flexben egy sorban sorakoznak, a felirat pedig a szám ELÉ kerül, nem fölé. */
    .od-cbl-total {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .3rem .9rem;
        padding: .6rem 1rem;
    }

    /* Az üres kitöltő cellák a rács sávjait tartották – flexben lyukat ütnének. */
    .od-cbl-total > span:empty { display: none; }
    .od-cbl-total > strong { margin-right: auto; }

    .od-cbl-total > [data-label]::before {
        content: attr(data-label) " ";
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--od-gray-400);
    }

    .od-cbl-foot { margin-left: 0; }
}

/* ⚠️ **A KELT CSAK A LEGSZŰKEBB alakban kap teljes sort – és ez MÉRT finomítás.** Először a
   860 px-es küszöbhöz kötöttem, de ott ez ELVETT: nyitott képhasáb mellett (652 px-es
   űrlap-oszlop) a dátum egyedül foglalt egy 620 px-es sort, a partner pedig a maradékon
   osztozva **302 px**-re szorult. A szabályt levéve ugyanott a Kelt (170 px) és a partner
   EGY sorba fér, a partner **466 px**-t kap, a Megjegyzés megy a második sorba.
   520 px alatt viszont tényleg nincs értelme 170 px-en tartani: ott a mellette maradó
   hely már túl kevés bármelyik szöveges mezőnek. */
@container od-cbe (max-width: 520px) {
    .od-cb-headrow > .od-cb-headcell:first-child { flex: 1 1 100%; }
}

/* ── A bizonylat képhasábja: számlakép és bizonylatkép ───────────────
   ⚠️ **SAJÁT névtér (`od-cbi-`), NEM az `od-bk-` újrahasznosítása.** Az a vevő/szállító
   könyvelés bemért elrendezése, aminek a bal hasábjában egy tíz oszlopos tételtáblázat
   ül – a küszöbei ahhoz vannak szabva. Közösre véve a két lap elrendezése egymáshoz
   kötődne, és az egyik hangolása NÉMÁN elmozdítaná a másikat (18. tanulság).

   ⚠️ **VÁLLALT ÁRA, kimondva: KÉT megvalósítás van ugyanarra a fogalomra** (ragadós,
   összecsukható A4-előnézet). A felhasználó kimondott döntése (4a), hogy a bemért
   könyvelő laphoz most ne nyúljunk. **Ha harmadik helyre is kell képhasáb, KI KELL
   emelni közös komponensbe** – addig a két blokk geometriája szándékosan azonos, és
   együtt kell módosítani. */

.od-cbi-board { container-type: inline-size; }

.od-cbi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.od-cbi-main { min-width: 0; }

/* ⚠️ `display: none`, NEM feltételes renderelés – az `<iframe>` a DOM-ban marad, tehát a
   PDF-nézegető oldalszáma és nagyítása túléli az összecsukást. A hasáb OSZLOPÁT a rács
   `has-image` osztálya adja; összecsukva az kimarad, tehát az űrlap a teljes szélességet
   kapja – itt csak az üres hasábot rejtjük el. */
.od-cbi-side { min-width: 0; }
.od-cbi-side.is-collapsed { display: none; }

.od-cbi-card { overflow: hidden; }

.od-cbi-head {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .6rem .75rem;
}

.od-cbi-tabs { display: flex; gap: .25rem; }

.od-cbi-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border: 1px solid var(--od-gray-200);
    /* ⚠️ A paletta CSAK `--od-radius` (10px) és `--od-radius-lg` (16px) árnyalatot ismer –
       egy `--od-radius-sm` NÉMÁN a kezdeti értékre esne vissza (18. tanulság). Ez a fül
       kicsi vezérlő, ezért kiírt 6px, nem a 10px-es alapérték. */
    border-radius: 6px;
    background: #fff;
    color: var(--od-gray-600);
    font-size: .82rem;
    line-height: 1.2;
    cursor: pointer;
}

.od-cbi-tab:hover { background: var(--od-gray-50); }

.od-cbi-tab.is-on {
    background: var(--od-primary-xlt);
    border-color: var(--od-primary);
    color: var(--od-primary);
    font-weight: 600;
}

.od-cbi-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.od-cbi-nav { display: flex; align-items: center; gap: .15rem; flex: 0 0 auto; }

/* ⚠️ `tabular-nums`: a `1/3` → `2/3` váltásnál arányos számjegyekkel a nyilak
   elmozdulnának a felhasználó keze alól. */
.od-cbi-pos {
    font-size: .8rem;
    color: var(--od-gray-500);
    font-variant-numeric: tabular-nums;
    min-width: 2.2rem;
    text-align: center;
}

/* ⚠️ `min-width: 0` KÖTELEZŐ: enélkül a flex-elem nem tud a tartalma alá zsugorodni,
   tehát a hosszú fájlnév kitolná a gombokat a fejlécből. */
.od-cbi-name { min-width: 0; font-size: .82rem; color: var(--od-gray-600); }

.od-cbi-frame {
    width: 100%;
    /* Egy hasábban (keskeny konténer) a kép FIX magasságot kap – rugalmas hasáb nélkül a
       magassága nullára esne. */
    height: 60vh;
    border: 0;
    display: block;
    background: var(--od-gray-100);
}

/* ⚠️ A küszöb a KONTÉNERRE vonatkozik, ami a lap paddingjával és az ikonsávval szűkebb
   az ablaknál – 1000 px konténer nagyjából egy 1100 px-es ablaknak felel meg. */
@container (min-width: 1000px) {
    /* ⚠️ `align-items: start` KÖTELEZŐ: alapértelmezett `stretch` mellett az oldalsáv a
       rács teljes magasságára nyúlik, és a `position: sticky`-nek nem marad hova
       elmozdulnia – a ragadás NÉMÁN nem működik, hibaüzenet nélkül. */
    .od-cbi-grid.has-image {
        grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
        align-items: start;
    }

    .od-cbi-side {
        position: sticky;
        /* ⚠️ A FIX navbar alá igazít – puszta `1rem`-mel a kártya a sáv MÖGÉ csúszna. */
        top: calc(var(--od-navbar-h) + 1rem);
    }

    /* ⚠️ **A MAGASSÁG a KÖTŐ MÉRET, nem a szélesség.** A PDF-nézegető a lapot a keretbe
       ILLESZTI: ha a keret alacsony, a szélesítésből SEMMI nem látszik. A keret ezért a
       képernyő maradékát kapja. ⚠️ A `dvh` a `vh` UTÁN áll – telefonon a `vh` a böngésző
       sávjait nem veszi le, tehát a keret alja a képernyőn kívülre kerülne. */
    .od-cbi-frame {
        height: 70vh;
        height: clamp(360px, calc(100dvh - 150px), 1100px);
    }
}

/* ⚠️ **KÉT korlát, és a KISEBB nyer.** A magasságból számolt szélesség (A4 aránya ≈
   0,707) önmagában egy MAGAS képernyőn elszabadulna, és az űrlap összemenne; a második
   korlát ezért az ŰRLAPNAK ad alsó határt (600 px). A tételtáblázat úgyis a saját
   dobozában görget, tehát a szűk hely ott görgetés, nem olvashatatlan mező. */
@container (min-width: 1520px) {
    .od-cbi-grid.has-image {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, clamp(420px, min(calc((100dvh - 150px) * 0.707), calc(100cqi - 600px)), 900px));
    }
}

/* ═══ Bankkivonat-beolvasás: idősáv és a tételes nézet (`od-bsi-`) ═══════════════════
   ⚠️ SAJÁT névtér, de a KÉPHASÁB az `od-cbi-` CSS-t használja – nem másolat, hanem
   UGYANAZ. A geometria (A4-arány, ragadás, két korlát) így egy helyen marad; másolva a
   bizonylat-szerkesztő és a bankkivonat előbb-utóbb széttartana. */

/* ── Szűrősáv + egyenleg a sorok fölött ────────────────────────────────────────────
   ⚠️ A szűrő BALRA, az egyenleg JOBBRA (`margin-left: auto`) – a felhasználó kimondott
   kérése. Tördeléskor (keskeny ablak) az egyenleg új sorba kerül, de akkor is a jobb
   szélen marad: a `justify-content` nélkül a bal szélre ugrana, és a kettő
   megkülönböztethetetlen lenne. */
.od-bsi-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin-bottom: .75rem;
}

.od-bsi-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1.5rem;
    margin-left: auto;
}

.od-bsi-bal {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.od-bsi-bal-label {
    font-size: .8rem;
    color: var(--od-gray-500);
}

/* ⚠️ `tabular-nums`: a két egyenleg EGYMÁS MELLETT áll, és arányos számjegyekkel a
   forintok nem esnének egy vonalba – pont az összevetés veszne el, amiért kiírjuk. */
.od-bsi-bal-value {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--od-gray-800);
}

/* ⚠️ A VÁRHATÓ halványabb: az a BECSLÉS (mi lesz, ha lekönyveljük), a másik a TÉNY.
   Azonos súllyal a szem nem tudná, melyikhez mérje a bank valódi egyenlegét. */
.od-bsi-bal-value.is-expected {
    color: var(--od-gray-500);
}

/* ⚠️ A NEGATÍV egyenleg banknál lehet VALÓS (folyószámlahitel), ezért jelzés, nem hiba –
   ugyanaz a döntés, mint a bankkönyv `FirstNegative`-jánál. */
.od-bsi-bal-value.is-neg {
    color: var(--od-danger);
}

/* Az idősáv: vízszintesen görgethető sor, kártyákkal.
   ⚠️ A sáv MAGÁBAN görget (`overflow-x: auto`), nem a lap – 200 soros kivonatnál
   különben a lap csordulna túl vízszintesen. */
/* ── A KÉT FELSŐ KÁRTYA: EGYEZTETÉS + HALADÁS ───────────────────────────────────────
   A köteg két kérdése egymás mellett: „megvan-e minden sor?" (egyeztetés) és „hol tartok
   a munkával?" (haladás).
   ⚠️ **`flex-wrap`, nem kézzel írt töréspont** (98/b tanulság): a két kártya magától kerül
   egymás alá, amikor nem fér el. Az egyeztetés kap nagyobb alapméretet – abban NÉGY szám
   áll egymás mellett, a haladásban egy csík és a jelmagyarázat. */
.od-bsi-topcards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.od-bsi-topcards > .od-bsi-reccard { flex: 1 1 460px; }
.od-bsi-topcards > .od-bsi-progresscard { flex: 1 1 320px; margin-bottom: 0; }

/* ⚠️ A BAL SZEGÉLY színe ÁLLÍTÁS: zöld = a kivonat kiadja a saját záró egyenlegét, piros =
   eltérés, szürke = nincs mihez mérni. A „nincs adat" SOHA nem zöld – az egy meg nem
   történt ellenőrzést mutatna sikeresnek. */
.od-bsi-reccard {
    min-width: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    background: var(--od-white);
}

.od-bsi-reccard.is-ok      { border-left-color: var(--od-success); }
.od-bsi-reccard.is-bad     { border-left-color: var(--od-danger); }
.od-bsi-reccard.is-unknown { border-left-color: var(--od-gray-300); }

.od-bsi-reccard-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: .9rem;
}

.od-bsi-reccard.is-ok  .od-bsi-reccard-head i { color: var(--od-success); }
.od-bsi-reccard.is-bad .od-bsi-reccard-head i { color: var(--od-danger); }
.od-bsi-reccard.is-unknown .od-bsi-reccard-head i { color: var(--od-gray-400); }

/* ⚠️ A négy szám RÁCSBAN, `minmax(0, 1fr)`-rel: a `1fr` alapja `auto` lenne, tehát egy
   hosszú összeg szétnyomná a szomszédait, és a levezetés nem állna egy vonalban. */
.od-bsi-reccard-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .5rem .9rem;
}

.od-bsi-reccard-label { font-size: .72rem; color: var(--od-gray-400); }
.od-bsi-reccard-value { font-size: .95rem; font-weight: 600; color: var(--od-gray-700); }
.od-bsi-reccard-value.is-strong { font-size: 1.05rem; font-weight: 700; color: var(--od-primary); }
.od-bsi-reccard-value.is-ok { color: var(--od-success); }

.od-bsi-reccard-diff {
    margin-top: .55rem;
    font-size: .78rem;
    color: var(--od-gray-600);
}

/* ── HALADÁS-KÁRTYA a részletező lapon (`od-bsi-progresscard`) ──────────────────────
   ⚠️ A csík a köteg ÖSSZETÉTELÉT mutatja (mennyi kész, mennyi vár, milyen csoportban); a
   POZÍCIÓT – hogy hol tartasz a sorrendben – az Egyesével nézet saját sávja mondja meg.
   Két külön kérdés, ezért két külön elem. */
.od-bsi-progresscard {
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-white);
}

.od-bsi-progresscard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .875rem;
    margin-bottom: .5rem;
}

.od-bsi-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--od-gray-600);
}

.od-bsi-legend > span { display: inline-flex; align-items: center; gap: .35rem; }

/* ⚠️ `display: inline-block` az `<i>`-n: a Bootstrap Icons alap `i` inline, tehát a
   szélesség/magasság NÉMÁN nem hatna, és a pötty láthatatlan maradna. */
.od-bsi-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* A POZÍCIÓ-sáv az Egyesével nézetben. */
.od-bsi-position { margin-bottom: .75rem; }

.od-bsi-position-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .85rem;
    margin-bottom: .35rem;
}

/* ⚠️ A CSOPORT-SZÍNEK itt is ugyanazok, mint a csoport-fejléceken és a jelmagyarázatban –
   egy halmaz EGY színt kap az egész lapon. A zöld kizárólag a lekönyvelt soré. */
.od-bsi-progress > .is-matched, .od-bsi-dot.is-matched { background: var(--od-primary); }
.od-bsi-progress > .is-rule,    .od-bsi-dot.is-rule    { background: #818CF8; }
.od-bsi-progress > .is-decide,  .od-bsi-dot.is-decide  { background: var(--od-warning); }
.od-bsi-dot.is-booked  { background: var(--od-success); }
.od-bsi-dot.is-skipped { background: var(--od-gray-300); }

/* ── EJTŐMEZŐ a kivonat feltöltéséhez (`od-bsi-drop`) ───────────────────────────────
   ⚠️ A doboz egy `<label>`, benne a VALÓDI `InputFile`-lal: a feltöltés így ugyanazon a
   bevált úton megy (méretkorlát, magic byte), csak a vezérlő néz ki másképp. */
.od-bsi-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 132px;
    padding: 1.1rem;
    border: 2px dashed var(--od-gray-300);
    border-radius: 12px;
    background: var(--od-gray-50);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--od-transition), background var(--od-transition);
}

.od-bsi-drop:hover { border-color: var(--od-primary-light); background: var(--od-primary-xlt); }

/* ⚠️ **NEM `display: none`, és nem is `d-none`.** A rejtett fájlmezőnek FÓKUSZÁLHATÓNAK
   kell maradnia, különben a feltöltés billentyűzettel elérhetetlen. Ez a bevett alak:
   nulla méret, átlátszó, de a fókusz-fában bent marad. */
.od-bsi-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    inset: 0;
    margin: auto;
}

/* A fókuszt a DOBOZON mutatjuk meg: a rejtett mezőn nem látszana. */
.od-bsi-drop:has(.od-bsi-drop-input:focus-visible) {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(21, 96, 189, .12);
}

.od-bsi-drop-icon { font-size: 1.6rem; color: var(--od-gray-400); line-height: 1; }
.od-bsi-drop-title { font-size: .95rem; font-weight: 600; color: var(--od-gray-700); }
.od-bsi-drop-hint { font-size: .8rem; color: var(--od-gray-500); }

/* ── FÉLBEHAGYOTT BEOLVASÁS a beolvasás-lap tetején ─────────────────────────────────
   ⚠️ A BAL SZEGÉLY hordozza a jelzést, nem a háttér: a kártyában egy tömör kék „Folytatás"
   gomb áll, amit egy színes háttér elnyomna. Ugyanaz a szabály, mint a bizonylat-szerkesztő
   ragadós összeg-sávjánál. */
.od-bsi-unfinished { border-left: 4px solid var(--od-warning) !important; }

.od-bsi-unfinished-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.od-bsi-unfinished-row + .od-bsi-unfinished-row {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--od-gray-200);
}

.od-bsi-unfinished-main { flex: 1 1 260px; min-width: 0; }

.od-bsi-unfinished-count { font-size: .85rem; margin-top: .2rem; color: var(--od-warning); }

/* ⚠️ A csík HÁROM sávja `flex`-ben ül, a szélességet a `style` adja százalékban. A
   `min-width: 0` KELL: enélkül egy 1%-os sáv a tartalma (semmi) helyett a flex alapméretét
   kapná, és a három arány nem a valóságot mutatná. */
.od-bsi-progress {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--od-gray-100);
}

/* ⚠️ **A MÉRETKORLÁT CSAK a beolvasás lapján érvényes – és ez MÉRT hiba javítása.** Ott a
   csík egy VÍZSZINTES sorban ül (fájlnév · csík · „Folytatás" gomb), tehát kell neki
   rugalmas alapméret és felső korlát. A részletező lapon viszont ugyanez az osztály BLOKK
   szinten áll, teljes szélességű kártyában: a `max-width: 420px` ott némán levágta – mérve
   **420 px egy 1536 px-es kártyában**, vagyis a haladás-kártya és a pozíció-sáv is a
   negyedéig volt kihúzva. Egy kész osztály MÁS kontextusban pontosan a 18. megtanult hiba. */
.od-bsi-unfinished-row .od-bsi-progress { flex: 1 1 220px; max-width: 420px; }

.od-bsi-progress > span { min-width: 0; }

/* A SZÍNEK a részletező lapét követik: zöld = lekönyvelve, szürke = kihagyva,
   kék = még vár. Két helyen más színnel a néző azt hinné, más dolgot mérünk. */
.od-bsi-progress > .is-booked  { background: var(--od-success); }
.od-bsi-progress > .is-skipped { background: var(--od-gray-300); }
.od-bsi-progress > .is-pending { background: var(--od-primary); }

/* ⚠️ A doboz FÓKUSZ-szabályai ELTÁVOLÍTVA (2026‑09‑04): a `tabindex="0"` megszűnt, mert a
   gyorsbillentyűk azóta DOKUMENTUM-szintűek (`js/bank-keys.js`) – a fókuszra várva a
   parancsok némán nem futottak le. Fókuszálhatatlan elemen a `:focus-visible` halott
   szabály lett volna. */

/* ── AZ EGYESÉVEL NÉZET SOR-FEJLÉCE ─────────────────────────────────────────────────
   ⚠️ A hangsúly a PARTNEREN és az ÖSSZEGEN van: egy sor feldolgozásakor az a két kérdés,
   hogy kivel és mennyiről van szó. A dátumot a kivonat sorrendje amúgy is megadja, ezért
   az kicsi és halvány. */
.od-bsi-single-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-bsi-single-who { min-width: 0; flex: 1 1 320px; }
.od-bsi-single-date { font-size: .82rem; color: var(--od-gray-500); }
/* ⚠️ A partner-választó gomb a NÉV SORÁBAN áll (a tervben a partner a fejléc része, tehát
   külön címkés mező ugyanazt mondaná el kétszer). `flex-wrap` KELL: hosszú partnernév
   mellett a gomb különben kitolná a fejlécet. */
.od-bsi-single-partner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--od-gray-800);
}

.od-bsi-single-pbtn { padding: .1rem .4rem; line-height: 1.2; }
.od-bsi-single-meta { font-size: .85rem; color: var(--od-gray-500); margin-top: .1rem; }

.od-bsi-single-right { flex: 0 0 auto; text-align: right; }

/* ⚠️ `tabular-nums` az `od-num`-ból: a nagy összeg így soronként EGY vonalban áll,
   amikor a felhasználó a nyilakkal lépked. Arányos számjegyekkel a szám ugrálna. */
.od-bsi-single-amount { font-size: 1.75rem; font-weight: 800; line-height: 1.15; }
.od-bsi-single-amount.is-in  { color: var(--od-success); }
.od-bsi-single-amount.is-out { color: var(--od-warning); }

/* „Miért van ebben a csoportban?" – a szín a csoportjáé, a nyelv ugyanaz, mint a
   csoport-fejléceken és a haladás-csíkon. */
.od-bsi-why {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .6rem .85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    font-size: .85rem;
}

.od-bsi-why.is-matched { background: var(--od-primary-xlt); border-color: #DBEAFE; }
.od-bsi-why.is-matched i, .od-bsi-why.is-matched strong { color: var(--od-primary-dark); }
.od-bsi-why.is-rule    { background: #EEF2FF; border-color: #C7D2FE; }
.od-bsi-why.is-rule i, .od-bsi-why.is-rule strong { color: #3730A3; }
.od-bsi-why.is-decide  { background: #FFFBEB; border-color: #FDE68A; }
.od-bsi-why.is-decide i, .od-bsi-why.is-decide strong { color: #92400E; }

/* ── A POZÍCIÓ-SÁV TAGOLT alakja (`od-bsi-steps`) ───────────────────────────────────
   ⚠️ SORONKÉNT egy szakasz, 3 px réssel – a terv szerint. A folytonos csík csak arányt
   mond; a szakaszokból MEGSZÁMOLHATÓ, hány sor van hátra, és egyesével dolgozva pont ez a
   kérdés. Hosszú kötegen a Razor visszavált a folytonos csíkra (`PositionSegmentLimit`).
   ⚠️ `min-width: 0` a szakaszokon: enélkül egy 39 elemű sávban mindegyik a saját
   alapméretét kérné, és a sáv kilógna a kártyából. */
/* ⚠️ `align-items: flex-end`: az AKTÍV szakasz magasabb, és alul kell egy vonalban
   maradnia a többivel – középre igazítva a sáv „hullámzana". */
.od-bsi-steps { display: flex; align-items: flex-end; gap: 3px; min-height: 14px; }

.od-bsi-steps > span {
    flex: 1 1 0;
    min-width: 0;
    height: 8px;
    border-radius: 2px;
    background: var(--od-gray-200);
}

/* ⚠️ **A SZAKASZ SZÍNE a SOR ÁLLAPOTA** – ugyanaz a nyelv, mint a haladás-csíkon és a
   csoport-fejléceken: zöld = lekönyvelve, szürke = kihagyva, kék = párosítva, indigó =
   szabály, borostyán = döntést kér. Két külön színkészlettel ugyanaz a sor a két sávon
   más dolognak látszana. */
.od-bsi-steps > span.is-booked  { background: var(--od-success); }
.od-bsi-steps > span.is-skipped { background: var(--od-gray-300); }
.od-bsi-steps > span.is-matched { background: var(--od-primary); }
.od-bsi-steps > span.is-rule    { background: #818CF8; }
.od-bsi-steps > span.is-decide  { background: var(--od-warning); }

/* ⚠️ Az AKTÍV szakasz MAGASSÁGGAL jelöl, nem színnel: a színt már az állapot foglalja,
   tehát a pozíciónak másik jelzés kell – különben a kettő elfedné egymást. */
.od-bsi-steps > span.is-current {
    height: 14px;
    box-shadow: inset 0 0 0 1px rgb(15 23 42 / 35%);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   BANKI KÖNYVELÉSI SZABÁLYOK (`od-brl-*`) – a 2026‑09‑05-i terv szerint
   ⚠️ A lap SAJÁT névtere. A szabály-sor MONDAT („HA … AKKOR …"), nem hét táblázat-cella;
   a jelvények az OptiDesk-paletta halvány chipjei (ugyanazok, mint a bankkivonat lapján),
   nem a Bootstrap alapszínei (#198754 / #ffc107) – két palettával a lap kétféle zöldet
   mutatott ugyanarra az állításra.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── HATÁS-KÁRTYA: dolgoznak-e a szabályok? ─────────────────────────────────────── */
.od-brl-impact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    background: var(--od-white);
    border-radius: 6px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.od-brl-impact-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .95rem; }
.od-brl-impact-title i { font-size: 1.05rem; }
.od-brl-impact-meta { font-size: .8rem; color: var(--od-gray-400); }

.od-brl-stats { display: flex; align-items: center; gap: 1.6rem; }
.od-brl-stat-label { font-size: .72rem; color: var(--od-gray-400); }
.od-brl-stat-value { font-size: 1.05rem; font-weight: 700; }
.od-brl-stat-value.is-live  { color: var(--od-success-dark); }
/* ⚠️ A „csak tipp" a lap egyetlen valódi TEENDŐJE – ezért borostyán, a többi semleges. */
.od-brl-stat-value.is-tip   { color: var(--od-warning); }
.od-brl-stat-value.is-muted { color: var(--od-gray-500); }

/* ── A LISTA KÁRTYÁJA ÉS A SZŰRŐSÁV ─────────────────────────────────────────────── */
.od-brl-card { overflow: hidden; }

.od-brl-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-brl-search { position: relative; width: 300px; }
.od-brl-search i {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-gray-400);
    font-size: .85rem;
    pointer-events: none;
}
.od-brl-search .form-control { height: 34px; padding-left: 2rem; }

.od-brl-chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* A szűrő-chipek: a kiválasztott TÖMÖR színt kap (UI-szabály), nem keretet. */
.od-brl-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 .75rem;
    border-radius: 999px;
    border: 1px solid var(--od-gray-200);
    background: var(--od-white);
    color: var(--od-gray-600);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--od-transition), color var(--od-transition);
}
.od-brl-chip:not(.is-on):hover { background: var(--od-gray-100); }
.od-brl-chip.is-on { background: var(--od-primary); border-color: var(--od-primary); color: var(--od-white); font-weight: 600; }
.od-brl-chip.is-tip { border-color: #FDE68A; background: #FFFBEB; color: #92400E; font-weight: 600; }
.od-brl-chip.is-tip.is-on { background: var(--od-warning); border-color: var(--od-warning); color: var(--od-white); }

/* ── A SZABÁLY-SOR ──────────────────────────────────────────────────────────────────
   ⚠️ `minmax(0, 1fr)` a mondat oszlopán: a `1fr` alapja `auto` lenne, tehát egy hosszú
   közlemény-minta szétnyomná a jobb oldali oszlopokat. */
/* ⚠️ Az első oszlop 64 px, nem a terv 52-e – MÉRT javítás: a „SORREND" fejléc-felirat
   (.72rem, nagybetűs, ritkított) 52 px-en két sorba tört („SORREN / D"). */
.od-brl-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 128px 104px 138px;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--od-gray-100);
    border-left: 3px solid transparent;
}

.od-brl-head {
    padding-top: .55rem;
    padding-bottom: .55rem;
    border-top: 0;
    background: var(--od-gray-50);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}

/* ⚠️ A BAL SZEGÉLY a lista PÁSZTÁZÁSÁHOZ való: kék = saját, szürke = beépített,
   borostyán = csak tipp (a teendő). A kikapcsolt sor egésze halványul. */
.od-brl-row.is-own     { border-left-color: var(--od-primary); }
.od-brl-row.is-builtin { border-left-color: var(--od-gray-200); }
.od-brl-row.is-tip     { border-left-color: var(--od-warning); background: #FFFDF7; }
.od-brl-row.is-off     { opacity: .55; }

.od-brl-prio { text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--od-gray-400); }
.od-brl-main { min-width: 0; }

.od-brl-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
    font-size: .95rem;
    font-weight: 700;
}

.od-brl-line { font-size: .82rem; color: var(--od-gray-600); line-height: 1.55; }
.od-brl-line em, .od-brl-sentence em { font-style: normal; font-weight: 600; color: var(--od-gray-800); }
.od-brl-if   { color: var(--od-gray-500); font-weight: 700; margin-right: .25rem; }
.od-brl-then { color: var(--od-primary-dark); font-weight: 700; margin-right: .25rem; }
.od-brl-dot  { color: var(--od-gray-300); margin: 0 .35rem; }

.od-brl-tipnote { margin-top: .3rem; font-size: .78rem; color: #92400E; }

/* Szöveges link-gomb a sorban (a teendő). `font: inherit`, hogy a mondat betűje maradjon. */
.od-brl-link {
    padding: 0;
    margin-left: .35rem;
    border: 0;
    background: none;
    color: var(--od-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.od-brl-link:hover { color: var(--od-primary-dark); }

.od-brl-usage   { text-align: right; }
.od-brl-usage-n { font-size: .95rem; font-weight: 700; }
.od-brl-usage-d { font-size: .72rem; color: var(--od-gray-400); }

.od-brl-actions { display: flex; gap: 4px; justify-content: flex-end; }
/* Admin előtt a globális szabály szerkesztése BOROSTYÁN: minden iroda minden cégére hat. */
.od-brl-act-global:hover { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }

/* A jelvények – az OptiDesk-paletta halvány chipjei. */
.od-brl-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}
.od-brl-tag.is-live    { background: var(--od-success-xlt); color: var(--od-success-dark); border: 1px solid var(--od-success-line); }
.od-brl-tag.is-off     { background: var(--od-gray-100); color: var(--od-gray-600); }
.od-brl-tag.is-tip     { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.od-brl-tag.is-own     { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-brl-tag.is-builtin { background: var(--od-gray-100); color: var(--od-gray-600); }
.od-brl-tag.is-global  { background: #FEF3C7; color: #92400E; }

/* Csoport-fejléc a „Saját / beépített" nézetben. */
.od-brl-group {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--od-gray-200);
    background: var(--od-gray-50);
    font-size: .85rem;
    color: var(--od-gray-600);
}
.od-brl-group i { color: var(--od-gray-500); }
.od-brl-group span { font-size: .78rem; color: var(--od-gray-500); }
.od-brl-group.is-own { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-brl-group.is-own i { color: var(--od-primary); }

.od-brl-empty { padding: 1.6rem; text-align: center; border-top: 1px solid var(--od-gray-100); }
.od-brl-empty i { display: block; font-size: 1.8rem; color: var(--od-gray-300); margin-bottom: .35rem; }

/* ── AZ ABLAK ───────────────────────────────────────────────────────────────────────
   ⚠️ 1040 px (a mai `od-modal-form` 880): a jobb hasábban az ÉLŐ PRÓBA áll. Ez az
   egyetlen méret-változtatás, amit a terv kért. */
.od-brl-modal { width: min(1040px, calc(100vw - 2rem)); }

.od-brl-mhead {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: 1.25rem 1.5rem .9rem;
    border-bottom: 1px solid var(--od-gray-100);
}
.od-brl-mhead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.od-brl-switch { display: flex; align-items: center; gap: .5rem; padding-left: 0; font-size: .8rem; color: var(--od-gray-500); }
.od-brl-switch .form-check-input { margin: 0; }

/* A szabály ÉLŐ MONDATA a fejlécben – a terv legfontosabb hozzáadása. */
.od-brl-sentence {
    padding: .6rem .9rem;
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    font-size: .9rem;
    line-height: 1.6;
    color: var(--od-gray-800);
}
.od-brl-arrow { color: var(--od-gray-300); margin: 0 .4rem; }

/* ⚠️ A törzs paddingja NULLA: a két hasáb a saját belső térközét adja, a jobb oldali
   háttere és bal szegélye különben nem érne az ablak széléig. Két osztály, hogy erősebb
   legyen a `.od-modal-form .od-modal-body` szabálynál. */
.od-brl-modal .od-modal-body { padding: 0; }

/* ⚠️ A főkönyv-választó lebegő listája a GÖRGETŐ törzsben nyílik – helyet kell neki
   csinálni, amíg nyitva van (ugyanaz a `:has()` minta, mint a pénztár/bank könyvben). */
.od-brl-modal .od-modal-body:has(.od-accsel-pop) { padding-bottom: 240px; }

.od-brl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 348px; align-items: stretch; }

.od-brl-editor { padding: 1.25rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 1.25rem; }
.od-brl-namerow { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 1rem; }

/* A HA és az AKKOR blokk. ⚠️ `overflow: visible`: a lebegő lista kilóg a blokkból. */
.od-brl-block { border: 1px solid var(--od-gray-200); border-radius: var(--od-radius); }
.od-brl-block.is-then { border-color: #DBEAFE; }

.od-brl-block-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    background: var(--od-gray-50);
    border-bottom: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius) var(--od-radius) 0 0;
    font-size: .88rem;
}
.od-brl-block.is-then .od-brl-block-head { background: var(--od-primary-xlt); border-bottom-color: #DBEAFE; }
.od-brl-block-head span:last-child { font-size: .78rem; color: var(--od-gray-500); }

.od-brl-badge-if, .od-brl-badge-then {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 .4rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.od-brl-badge-if   { background: var(--od-gray-200); color: var(--od-gray-700); }
.od-brl-badge-then { background: var(--od-primary); color: var(--od-white); min-width: 48px; }

.od-brl-block-body { padding: .9rem; display: flex; flex-direction: column; gap: .75rem; }
.od-brl-block-body .form-label { font-size: .85rem; margin-bottom: .3rem; }

/* Mező-PÁR, közte az „ÉS" kötőszó: a feltételek így mondatként olvashatók. */
.od-brl-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: .6rem; align-items: start; }
.od-brl-pair.is-plain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.od-brl-and {
    padding-top: 2.35rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--od-gray-400);
}

/* Az irány háromállású kapcsolója – teljes szélességű, egyenlő gombokkal. */
.od-brl-dir { display: flex; width: 100%; }
.od-brl-dir .od-dirseg-btn { flex: 1 1 0; height: 38px; }

/* ⚠️ A főkönyv-választó lebegő listájának HORGONYA (99/b tanulság). */
.od-brl-pick { position: relative; }
.od-brl-warn { color: #92400E; }

/* ── AZ ÉLŐ PRÓBA HASÁBJA ───────────────────────────────────────────────────────── */
.od-brl-try {
    background: var(--od-gray-50);
    border-left: 1px solid var(--od-gray-200);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.od-brl-try-title { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 700; }
.od-brl-try-title i { color: #7C3AED; }
.od-brl-try-meta { font-size: .75rem; color: var(--od-gray-400); margin-top: 2px; }

/* A három állapot: találat (fehér) · nincs (borostyán) · TÚL TÁG (piros – a veszélyes). */
.od-brl-try-box { background: var(--od-white); border: 1px solid var(--od-gray-200); border-radius: var(--od-radius); padding: .75rem .9rem; }
.od-brl-try-box.is-none  { background: #FFFBEB; border-color: #FDE68A; }
.od-brl-try-box.is-broad { background: #FEF2F2; border-color: #FECACA; }

.od-brl-try-count { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; color: var(--od-gray-600); }
.od-brl-try-count .od-num { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--od-primary); }
.od-brl-try-box.is-none .od-brl-try-count,  .od-brl-try-box.is-none .od-brl-try-count .od-num  { color: #92400E; }
.od-brl-try-box.is-broad .od-brl-try-count, .od-brl-try-box.is-broad .od-brl-try-count .od-num { color: var(--od-danger); }

.od-brl-try-text { font-size: .75rem; color: var(--od-gray-400); margin-top: .15rem; line-height: 1.5; }
.od-brl-try-box.is-none .od-brl-try-text  { color: #92400E; }
.od-brl-try-box.is-broad .od-brl-try-text { color: #B91C1C; }

.od-brl-hits { display: flex; flex-direction: column; gap: .4rem; }
.od-brl-hit { background: var(--od-white); border: 1px solid var(--od-gray-200); border-radius: 8px; padding: .5rem .7rem; }
.od-brl-hit-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.od-brl-hit-who { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-brl-hit-amt { font-weight: 700; white-space: nowrap; }
.od-brl-hit-amt.is-in  { color: var(--od-success); }
.od-brl-hit-amt.is-out { color: var(--od-warning); }
.od-brl-hit-sub { font-size: .72rem; color: var(--od-gray-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-brl-hit-more { font-size: .75rem; color: var(--od-gray-400); padding-left: 2px; }

.od-brl-try-foot {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--od-gray-200);
    font-size: .75rem;
    color: var(--od-gray-500);
    line-height: 1.5;
}

.od-brl-mfoot { align-items: center; }

/* Keskeny ablakban a két hasáb egymás alá – a próba a szerkesztő ALÁ kerül. */
@media (max-width: 1100px) {
    .od-brl-cols { grid-template-columns: minmax(0, 1fr); }
    .od-brl-try { border-left: 0; border-top: 1px solid var(--od-gray-200); }
}

/* ⚠️ **A LEBEGŐ FŐKÖNYV-LISTA HORGONYA.** A `LedgerAccountPicker` legördülője
   `position: absolute; top: 100%`, tehát a legközelebbi POZICIONÁLT őséhez igazodik – a
   hívó dolga, hogy az a mező doboza legyen. Enélkül itt a kártya volt a horgony, és a
   lista MÉRVE 222 px-rel a mező alatt, a kártya alján nyílt ki. */
.od-bsi-pick { position: relative; }

/* ── A SZÁMLA EGYETLEN SORBAN (`od-bsi-link`) ───────────────────────────────────────
   ⚠️ Nem címkés űrlapmező: a sorok többségén ez egy gomb, amit meg sem kell nyomni –
   teljes értékű mezőként ugyanakkora súlyt kapna, mint a főkönyvi szám. */
.od-bsi-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.od-bsi-link-label { font-size: .85rem; color: var(--od-gray-600); }

/* ── AZ EGYESÉVEL NÉZET MŰVELET-SÁVJA (`od-bsi-actions`) ────────────────────────────
   ⚠️ **EGY sorban kell maradnia számlakép mellett is** (a felhasználó kérése): ott a bal
   hasáb feleakkora, és a törött sáv elcsúsztatta a gombokat a kártya aljához képest.
   ⚠️ **NEVESÍTETT konténer** (98. tanulság): a `@container` a legközelebbi olyan ŐST méri,
   amelyiken `container-type` van – név nélkül egy külső doboz (a teljes szélességű board)
   is elsülhetne, és a küszöb sosem teljesülne. A sáv SAJÁT MAGÁT méri. */
.od-bsi-actions {
    container: od-bsi-act / inline-size;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
}

/* ⚠️ **`white-space: nowrap` a gombokon – ez MÉRT hiba javítása.** A `flex-shrink` alapból
   `1`, tehát szűk sávban a gombok ÖSSZENYOMÓDNAK, és a szöveg a gombon BELÜL törik két
   sorba: mérve **62 px magas gombok** a 38 helyett, vagyis a sáv „egy sorban" volt, mégis
   kétszer olyan magas. A törés így a gomb min-content szélességén áll meg. */
.od-bsi-actions .btn { white-space: nowrap; }

/* ⚠️ A SZŰK sávban a feliratok elmaradnak, az ikon és a billentyű marad – a `title`
   ilyenkor is elmondja, mit csinál a gomb. A küszöb MÉRT, nem becsült: a három gomb a
   feliratokkal + a két nyíl + a léptetés-jelzés együtt ~664 px, a számlaképes hasáb
   viszont csak 630 px – ezért 700 px a határ. */
@container od-bsi-act (max-width: 700px) {
    .od-bsi-lbl { display: none; }
}

/* ⚠️ A VÉGSŐ tartalék: nagyon keskeny sávban INKÁBB törjön, mint kilógjon. A `nowrap` a
   normál eseté, nem dogma – egy kilógó gomb elérhetetlen. A küszöb a feliratok NÉLKÜLI
   szélességből jön (~496 px). */
@container od-bsi-act (max-width: 480px) {
    .od-bsi-actions { flex-wrap: wrap; }
}

/* A léptető nyilak és a billentyű-jelzés. */
.od-bsi-step { display: flex; align-items: center; gap: .4rem; }
.od-bsi-step-hint { font-size: .78rem; color: var(--od-gray-400); white-space: nowrap; }

/* A gombra írt billentyű – halvány, hogy a feliratot ne nyomja el. */
.od-bsi-kbd {
    padding: .05rem .3rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 4px;
    background: rgba(255, 255, 255, .16);
    font-size: .7rem;
    font-family: inherit;
    color: inherit;
}

/* ⚠️ VILÁGOS változat a KERETES gombokhoz: az alap `od-bsi-kbd` fehér áttetszőséggel
   dolgozik, ami tömör kék gombon jó, fehér gombon viszont LÁTHATATLAN lenne. */
.od-bsi-kbd-light {
    border-color: var(--od-gray-300);
    background: var(--od-gray-100);
    color: var(--od-gray-600);
}

/* ── CSOPORT-FEJLÉC a sorok között (`od-bsi-group`) ──────────────────────────────────
   ⚠️ **A SZÍNEK ÁLLÍTÁST jelentenek.** A ZÖLD ezen a lapon KIZÁRÓLAG az elkészült soré; a
   várakozó csoportok kék (párosítva) · indigó (szabály) · borostyán (döntést kér). Az első
   terven a zöld egyszerre jelentett „kész"-t és „párosítva, de vár"-t – ugyanazon a
   képernyőn két ellentétes állítás.

   ⚠️ TÁBLÁZAT-PREFIX kötelező: a Bootstrap `.table > :not(caption) > * > *` (0-1-1) minden
   cellára ráír `background-color`-t, a csupasz osztály NÉMÁN alulmaradna. A `table-hover`
   ráadásul `box-shadow`-val dolgozik, ezért a fejléc-sorra azt is le kell tiltani –
   különben a csoport-fejléc az egér alatt sornak látszana. */
.od-cardtable > tbody > tr.od-bsi-group > td {
    padding: .45rem .75rem;
    border-top: 1px solid var(--od-gray-200);
    --bs-table-accent-bg: transparent;
}

.od-cardtable > tbody > tr.od-bsi-group:hover > td { box-shadow: none; }

.od-bsi-group-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-size: .85rem;
}

.od-bsi-group-why { color: var(--od-gray-500); font-size: .8rem; }

.od-cardtable > tbody > tr.od-bsi-group.is-matched > td { background: var(--od-primary-xlt); }
.od-cardtable > tbody > tr.od-bsi-group.is-matched i,
.od-cardtable > tbody > tr.od-bsi-group.is-matched strong { color: var(--od-primary-dark); }

.od-cardtable > tbody > tr.od-bsi-group.is-rule > td { background: #EEF2FF; }
.od-cardtable > tbody > tr.od-bsi-group.is-rule i,
.od-cardtable > tbody > tr.od-bsi-group.is-rule strong { color: #3730A3; }

.od-cardtable > tbody > tr.od-bsi-group.is-decide > td { background: #FFFBEB; }
.od-cardtable > tbody > tr.od-bsi-group.is-decide i,
.od-cardtable > tbody > tr.od-bsi-group.is-decide strong { color: #92400E; }

.od-cardtable > tbody > tr.od-bsi-group.is-done > td { background: var(--od-success-xlt); }
.od-cardtable > tbody > tr.od-bsi-group.is-done i,
.od-cardtable > tbody > tr.od-bsi-group.is-done strong { color: var(--od-success-dark); }

/* ── EGYEZTETÉS-NÉZET (`od-bsi-rec-`) ────────────────────────────────────────────────
   ⚠️ **A SZÍNEK ITT ÁLLÍTÁST jelentenek, nem hangulatot**: zöld = a beolvasás bizonyítottan
   teljes; borostyán = eltérés, tehát KERESNI kell; szürke = nincs mihez mérni. A piros
   SZÁNDÉKOSAN kimarad: az eltérés nem hiba, hanem elvégzendő munka – pirosra véve minden
   CSV-s kivonat riasztana. */
.od-bsi-rec { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0 .25rem; }

.od-bsi-rec-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-300);
    border-radius: var(--od-radius-lg);
    background: var(--od-white);
}

.od-bsi-rec-head i { font-size: 1.1rem; line-height: 1.4; }

.od-bsi-rec-head.is-ok      { border-left-color: var(--od-success); }
.od-bsi-rec-head.is-ok i    { color: var(--od-success); }
.od-bsi-rec-head.is-diff    { border-left-color: var(--od-warning); }
.od-bsi-rec-head.is-diff i  { color: var(--od-warning); }
.od-bsi-rec-head.is-unknown i { color: var(--od-gray-400); }

/* ⚠️ A LEVEZETÉS rácsban áll, nem szövegben: a négy szám EGY VONALBAN olvasható, és a
   műveleti jelek (+ = ≠) a saját sávjukban. Mondatba írva a szem nem tudná összevetni
   őket – pont az összehasonlítás veszne el, amiért a blokk létezik. */
.od-bsi-rec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: .5rem;
    align-items: stretch;
}

.od-bsi-rec-cell {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem;
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-white);
    min-width: 0;
}

.od-bsi-rec-cell.is-ok { border-color: var(--od-success-line); background: var(--od-success-xlt); }

.od-bsi-rec-label { font-size: .75rem; color: var(--od-gray-500); }

.od-bsi-rec-value { font-size: 1.05rem; font-weight: 700; color: var(--od-gray-800); }

.od-bsi-rec-cell.is-ok .od-bsi-rec-value { color: var(--od-success-dark); }

.od-bsi-rec-op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--od-gray-400);
}

/* A kivonat egyenlegének KÉZI megadása – csak akkor jelenik meg, ha a fájl nem hordozta. */
.od-bsi-rec-manual {
    padding: .75rem .9rem;
    border: 1px dashed var(--od-gray-300);
    border-radius: var(--od-radius);
    background: var(--od-white);
}

.od-bsi-rec-manual-title {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .85rem;
    margin-bottom: .6rem;
}

.od-bsi-rec-manual-title i { color: var(--od-gray-500); }

.od-bsi-rec-manual-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.od-bsi-rec-manual-label { font-size: .8rem; color: var(--od-gray-600); }

/* ⚠️ FIX szélesség: az `AmountInput` `form-control`-ja alapból blokk-szintű, tehát korlát
   nélkül a sávot elnyelné, és a két mező meg a gombok külön sorba tördelnének. */
.od-bsi-rec-input { width: 150px; min-width: 150px; }

/* A KÖNYVELT oldal külön sávban: más kérdésre válaszol, mint a levezetés. */
.od-bsi-rec-booked {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding: .6rem .9rem;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    font-size: .875rem;
    color: var(--od-gray-700);
}

/* ⚠️ Szűk munkaterületen a hét sávos levezetés olvashatatlan – ott egymás ALÁ kerül, és a
   műveleti jelek kimaradnak (a sorrend maga mondja a levezetést). */
@container (max-width: 900px) {
    .od-bsi-rec-grid { grid-template-columns: minmax(0, 1fr); }
    .od-bsi-rec-op { display: none; }
}

.od-bsi-timeline {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .25rem .25rem .75rem;
    margin-bottom: 1rem;
    /* A görgetősáv megjelenése ne mozdítsa el a kártyákat. */
    scrollbar-gutter: stable;
}

.od-bsi-tl {
    flex: 0 0 auto;
    min-width: 9.5rem;
    max-width: 13rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .5rem .65rem;
    background: #fff;
    border: 1px solid var(--od-gray-200);
    border-left: 3px solid var(--od-gray-300);
    border-radius: var(--od-radius);
    text-align: left;
    position: relative;
}

.od-bsi-tl:hover { background: var(--od-gray-50); }

/* ⚠️ Az AKTÍV kártya kerete és háttere is jelöl – a puszta szín nem elérhető jelzés,
   ezért a markupban `aria-selected` is van. */
.od-bsi-tl.is-on {
    background: var(--od-primary-xlt);
    border-color: var(--od-primary);
    box-shadow: 0 0 0 1px var(--od-primary) inset;
}

/* A bal szegély az ÁLLAPOTOT mondja meg: irány (zöld/piros), majd a feldolgozottság. */
.od-bsi-tl.is-in { border-left-color: var(--od-success); }
.od-bsi-tl.is-out { border-left-color: var(--od-danger); }
.od-bsi-tl.is-dup { border-left-color: var(--od-warning); }
.od-bsi-tl.is-booked { border-left-color: var(--od-success); opacity: .55; }
.od-bsi-tl.is-skipped { border-left-color: var(--od-gray-400); opacity: .55; }

.od-bsi-tl-date {
    font-size: .75rem;
    color: var(--od-gray-500);
    font-variant-numeric: tabular-nums;
}

/* ⚠️ `tabular-nums`: az összegek egymás mellett, arányos számjegyekkel nem esnének
   egy vonalba, és a sáv olvashatatlanná válna. */
.od-bsi-tl-amount {
    font-weight: 600;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ⚠️ `min-width: 0` + `max-width: 100%` KÖTELEZŐ: enélkül a hosszú partnernév kitolná a
   kártyát, és a sáv kártyái eltérő szélességűek lennének. */
.od-bsi-tl-name {
    min-width: 0;
    max-width: 100%;
    font-size: .78rem;
    color: var(--od-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-bsi-tl-flag {
    position: absolute;
    top: .35rem;
    right: .45rem;
    font-size: .8rem;
    color: var(--od-gray-500);
}

/* A tételes nézet mezői. */
.od-bsi-big {
    margin-left: .5rem;
    font-variant-numeric: tabular-nums;
}

.od-bsi-big.is-in { color: var(--od-success); }
.od-bsi-big.is-out { color: var(--od-danger); }

/* A kivonat nyers közleménye – olvasható, de nem szerkeszthető: a `Megjegyzés` mező
   az, ami a bizonylatra kerül. */
.od-bsi-comm {
    padding: .5rem .75rem;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    font-size: .9rem;
    word-break: break-word;
}

/* Nem szerkeszthető érték a tételes nézetben – a mezők magasságával egy vonalban. */
.od-bsi-value {
    min-height: 38px;
    display: flex;
    align-items: center;
    font-size: .95rem;
}

/* A lista szerkeszthető mezői. ⚠️ FIX szélesség: a `datalist`-es mező tartalomhoz
   igazodva soronként más széles lenne, és az oszlop ugrálna a szerkesztés közben. */
.od-bsi-code { width: 8rem; min-width: 8rem; }
.od-bsi-notes { min-width: 12rem; }

/* A BIZONYTALAN besorolási javaslat jele a főkönyv/rovat cellában – a `Javaslat` oszlop
   helyett (az 117 px-et vitt el, és a táblázat emiatt görgetett).
   ⚠️ A cella `nowrap` + `flex`: enélkül a `~` a mező ALÁ csúszna, és a sor kétsoros lenne.
   ⚠️ A `~` a projekt bevált jele arra, hogy „ez nem bizonyíték" (lásd `InvoiceAmount`);
      a BOROSTYÁN szín a többi tipp-jelzéssel egyezik, a `cursor: help` pedig felfedezhetővé
      teszi, hogy van mögötte magyarázat. */
.od-bsi-acccell { white-space: nowrap; }
.od-bsi-acccell > * { vertical-align: middle; }
.od-bsi-tip {
    margin-left: .35rem;
    color: var(--od-warning);
    font-weight: 700;
    cursor: help;
}

/* EGY SOR = EGY SOR. ⚠️ Valós panasz javítása: a tíz oszlopos táblázatban a dátum
   (`2026. 01. 05.`) HÁROM sorba tört, a partnernév melletti gomb és a kiegyenlítés-jelvény
   melletti két gomb pedig a szöveg ALÁ csúszott – egyetlen sor így 3-4 sor magas lett, és
   a lista átláthatatlanná vált.

   ⚠️ A HOSSZ-KORLÁTOZÁS NEM ITT VAN: a hosszú tartalmat a cellán BELÜLI
   `text-truncate` + `max-width` vágja el (partnernév 12rem, közlemény 16rem). Ez a
   szabály csak azt mondja ki, hogy a cella nem TÖRDEL – tehát a tördelés helyett a
   táblázat lesz szélesebb, és szükség esetén a saját dobozában görget. Ugyanaz a
   csere, amit a vevő/szállító könyvelés tételtáblázatánál is vállaltunk. */
.od-bsi-tight { white-space: nowrap; }

/* ── BIZONYLAT BEKÉRÉSE (opt-in) ─────────────────────────────────────────────────
   ⚠️ A gomb az ÁLLAPOT cellában ül, a badge mellett – a táblázatnak nincs
   művelet-oszlopa, és egy tizenegyedik oszlop visszahozná a görgetést, ami miatt
   két oszlop épp kikerült.

   ⚠️ KIKAPCSOLVA HALVÁNY, nem láthatatlan: a bekérés a KIVÉTEL, nem az alapállapot
   (a lista opt-in, alapból üres). Minden soron erős ikont rajzolva a szem nem
   találná meg a MÁR bekérteket – pont az veszne el, amiért a jelzés létezik.
   Hoverre viszont erősödik: ez a FELFEDEZHETŐSÉG, ugyanaz a minta, mint a csendes
   mezők hover-kereténél. */
/* ⚠️ A badge és a bekérés-gomb EGY egység. Enélkül a kártyás nézet `space-between`-je
   szétlökné őket (mérve: 75 px üres tér közöttük) – lásd a markup megjegyzését. */
.od-bsi-statusgroup {
    display: inline-flex;
    align-items: center;
}

.od-bsi-req {
    /* ⚠️ A MÉRET a SOR magasságához igazodik, nem a felirathoz: a sor 47 px, tehát egy
       28 px-es célpont ELFÉR anélkül, hogy a táblázat magasabb lenne. Mérve: 47 → 47 px.
       A csupasz gomb 25 × 19 px lett volna – egérrel is apró. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    margin-left: .25rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--od-gray-400);
    border: none;
    background: none;
}

.od-bsi-req:hover,
.od-bsi-req:focus-visible { color: var(--od-primary); }

.od-bsi-req.is-on,
.od-bsi-req.is-on:hover { color: var(--od-warning); }

/* ⚠️ A SZÁMLÁLÓ nem badge: az ÁLLAPOTOT jelöl, ez viszont ÖSSZEGZÉS a szűrősávban –
   badge-ként a sorok jelvényeivel keveredne. A szín a gomb bekapcsolt állapotáé,
   hogy a szem összekösse a kettőt. */
.od-bsi-reqcount {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--od-warning);
    font-size: .875rem;
    font-weight: 600;
}

/* ── TELJES KIEGYENLÍTÉS (árfolyam-különbözet) ───────────────────────────────────
   ⚠️ A SZERKEZETET a KÖZÖS `od-action-btn` adja (30 × 30, mobil szabály, letiltott
   állapot) – ez táblázatsor művelet-gombja, mint a szomszédai. Itt CSAK a SZÍN a
   sajátunk, pontosan úgy, ahogy az `od-action-close` is csak egy hover-színt ad.

   ⚠️ **A bekapcsolt állapot `--od-primary`, NEM `--od-warning`** – tudatos eltérés a
   bizonylat-bekérő `od-bsi-req`-től. Az TEENDŐT jelöl (borostyán: „ezt még be kell
   szerezni"); ez viszont a könyvelő KIMONDOTT DÖNTÉSE arról, hogyan könyveljük a sort.
   Borostyánra véve a szem hiányként olvasná, és a valódi teendő-jelzések mellett
   elszürkülne – ugyanaz az érv, amiért az „időarányos" chip is semleges színt kapott. */
/* ⚠️ A HÁROM érték a kék `od-action-edit:hover` családjáé (`#EBF3FC` / `#1560BD` /
   `#B8D4F5`) – így a gomb a szomszédaival EGY nyelvet beszél. A keret beégetett, mert a
   palettában NINCS ilyen árnyalat (`--od-primary-light` a #4A90D9, ami keretnek túl
   erős): egy nem létező változóra hivatkozva a tulajdonság NÉMÁN a szövegszínre esne
   vissza (18. tanulság), ezért mérve van, hogy minden `var()` név létezik. */
.od-bsi-fx { color: var(--od-gray-400); }

.od-bsi-fx:hover,
.od-bsi-fx:focus-visible {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    border-color: #B8D4F5;
}

/* ⚠️ A bekapcsolt állapot HÁTTERET is kap, nem csak betűszínt: a sűrű művelet-oszlopban
   a puszta szín-eltérés egy 16 px-es ikonon alig látszik. Ez ugyanaz a `--od-primary-xlt`,
   amivel a projekt a kijelölt sorokat és az aktív szegmenst is jelöli. */
.od-bsi-fx.is-on,
.od-bsi-fx.is-on:hover,
.od-bsi-fx.is-on:focus-visible {
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    border-color: #B8D4F5;
}

/* ── A BONTÁS-ABLAK ──────────────────────────────────────────────────────────────
   ⚠️ SAJÁT szélesség-modifier, NEM az `od-modal-wide` (620 px) vagy az `od-modal-form`
   (880 px) újrahasznosítása: itt sorokkal bővülő táblázat van, és egy kész osztályt
   más célra használva pontosan a 18. tanulságba futnánk.

   ⚠️ A `transform`-os középre igazítás magas tartalomnál MINDKÉT irányban kilógna –
   20 soros bontásnál mérve 480 px fent ÉS lent –, és a képernyő TETEJÉRŐL nem lehet
   visszagörgetni: pont a „Mentés" gomb válna elérhetetlenné. Ezért `max-height` +
   görgethető törzs, a projekt bevált mintája szerint. */
.od-bsi-splitmodal {
    width: min(980px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;                /* a lekerekített sarkok vágjanak */
}

/* ⚠️ A `min-height: 0` KÖTELEZŐ: enélkül a flex elem nem tud a tartalma alá
   zsugorodni, és a belső görgetés helyett az ABLAK nő meg – vagyis a `max-height`
   némán hatástalan lenne. */
.od-bsi-splitmodal .od-modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* A fejléc: balra a banki tétel azonosítása, jobbra az ÖSSZEG, amit a soroknak ki kell
   adniuk. ⚠️ Az összeg nélkül a felhasználó nem tudná, mihez igazodjon. */
.od-bsi-splithead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    margin-bottom: 1rem;
}

.od-bsi-big {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ⚠️ A SZÍNEK a lista irány-jelzésével AZONOSAK – a szem így köti össze a kettőt. */
.od-bsi-big.is-in { color: var(--od-success); }
.od-bsi-big.is-out { color: var(--od-danger); }

/* Az ÉLŐ egyenleg-jelzés. ⚠️ A „nem stimmel" állapot BOROSTYÁN, nem piros: ez nem hiba,
   hanem egy félbe hagyott kitöltés – a felhasználó épp gépel. Pirosra véve a szem
   riasztásként olvasná végig a bontás felvitelét. */
.od-bsi-splitsum {
    display: inline-flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 600;
}

.od-bsi-splitsum.is-ok { color: var(--od-success); }
.od-bsi-splitsum.is-off { color: var(--od-warning); }

/* ⚠️ **Az összeg-mező SZÉLESÍTVE – valós panasz javítása, és a MÁSODIK előfordulása
   ugyanannak a hibának.** A `width:1%` fejléc a „legyen olyan keskeny, amilyen a
   tartalma" trükk; az `AmountInput` így **55 px**-re szorult, amiben már a `400 000`
   (95 px) is LEVÁGÓDIK – a felhasználó képernyőképén a beírt `65` bal széle csonkult.

   ⚠️ A pénztár/bank tételtáblázata (`.od-cb-amt`, 130 px) UGYANEZT a hibát javította, de
   a szabályt NEM hasznosítjuk újra: ez másik táblázat, másik ablakban – közösre véve a
   kettő geometriája összekötődne, és az egyik hangolása némán elmozdítaná a másikat
   (18. tanulság). A 160 px azért TÖBB a 130-nál, mert itt a levonás miatt ELŐJEL is áll a
   szám előtt: a `-1 234 567,89` mérve **143 px**-t kér. */
.od-bsi-amt { min-width: 160px; }

/* ⚠️ **A főkönyv- és a B.sor-oszlop a TARTALMÁHOZ szűkül.** Mérve mindkettő **226 px**
   volt egy 128 px-es (`8rem`) mező körül – vagyis kétszer ~98 px állt üresen, miközben az
   összeg levágódott. A `width:1%` itt BIZTONSÁGOS (szemben az összeggel), mert a
   `.od-bsi-code` FIX `min-width: 8rem`-et hoz magával, tehát nem tud a tartalma alá menni.
   A felszabaduló hely a Megjegyzésé és az Összegé. */
.od-bsi-splitmodal th.od-bsi-shrink { width: 1%; }

/* ⚠️ **A LÁBLÉC TÖRDELHET – és ez MÉRT hiba javítása.** A globális `.od-modal-footer`
   `flex-wrap` NÉLKÜL áll (két gombra az helyes); itt viszont HÁROM gomb van, és a
   „Bontás megszüntetése" + „Mégse" + „Mentés" együtt 305 px – egy 343 px-es ablakban
   a belső paddinggal már nem fér el. **Mérve 375 px-en: a bal szélső gomb KILÓGOTT.**

   ⚠️ A szűkítés a SAJÁT névtérre szól, nem a globális szabály átírása: azt a projekt
   tucatnyi ablaka használja, és egy MÁR MÉRT elrendezést nem mozdítunk el bizonyíték
   nélkül. */
.od-bsi-splitmodal .od-modal-footer { flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   VEGYES KÖNYVELÉS (od-mx-)

   ⚠️ **SAJÁT névtér, NEM az `od-cb-` újrahasznosítása.** Az a pénztár/bank BEMÉRT
   tételtáblázata (tíz oszlop, futó egyenleggel, saját szín-szabályokkal); ez soronként
   KÉT főkönyvi választót visz, és a hangolása más küszöböket kíván. Közösre véve a két
   táblázat geometriája összekötődne, és az egyik igazítása NÉMÁN elmozdítaná a másikat
   (18. megtanult hiba).

   ⚠️ A **geometria SZÁNDÉKOSAN a pénztáréval azonos alapról indul** – a könyvelő ugyanazt
   a mozdulatot végzi mindkét lapon. Ami eltér, azt itt külön kimondjuk.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ A görgetődoboz `position: relative` – enélkül a `visually-hidden` fejlécszöveg
   (`position: absolute`) a LAP koordinátarendszeréhez igazodna, és vízszintesen kitolná
   a dokumentumot (a `/finances` MÉRT hibája). */
/* ═══ A TÉTELSOROK RÁCSA – táblázat helyett (a felhasználó kérése, 2026‑09‑05) ═════════════
   ⚠️ A táblázat-sor EGY alakot tud: a képhasáb mellett (a fél szélességű űrlap-oszlopban) a
   tíz oszlop vízszintes görgetőt kapott, a főkönyv NEVE pedig egy 1%-os cellában ÖTSOROSRA tört
   („Jegyzett, de még be nem fizetett tőke"). A rács `grid-template-areas`-szal KÉT alakot ad:
   széles hasábban egy sor (rövidebb Megnevezés, 190 px-es T/K cella, amiben a név két sorban
   elfér), szűk hasábban a kért tagolás – Megnevezés · alatta T és K · alatta ÁFA% és a
   bevallási sor · alatta Nettó · ÁFA · Bruttó.

   ⚠️ **NEVESÍTETT konténer** (98. tanulság): a küszöb az ŰRLAP-OSZLOP szélességét méri, nem a
   board-ét és nem a kép LÉTÉT – 4K-n a kép mellett is széles a hasáb, ott az egysoros alak
   a jó. A konténer maga a görgető-doboz (`od-mx-scroll`), ami a kártya teljes szélessége. */
.od-mx-scroll { position: relative; }
.od-mx-col { container: od-mx-col / inline-size; }

.od-mx-grid { min-width: 0; }

/* ⚠️ A `minmax(160px, 1fr)` a Megnevezésen: a „hosszúnak találom" válasza – eddig ez az
   EGYETLEN rugalmas oszlop nyelte el a teljes fölösleget. A T/K 190 px: annyi, amennyiben a
   főkönyv neve KÉT sorban elfér, nem ötben. */
.od-mx-ghead,
.od-mx-line {
    display: grid;
    grid-template-columns: 28px minmax(160px, 1fr) 190px 190px 120px 84px 120px 110px 150px 34px;
    grid-template-areas:
        "no notes t k net rate vat gross settle del"
        ".  foot  foot foot foot foot foot foot foot foot";
    gap: .35rem .6rem;
    align-items: start;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--od-gray-100);
}

.od-mx-ghead {
    grid-template-areas: "no notes t k net rate vat gross settle del";
    align-items: center;
    padding: .5rem .75rem;
    background: var(--od-gray-50);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-500);
}
.od-mx-ghead .e { text-align: right; }

.od-mx-c { min-width: 0; }
.od-mx-c-no     { grid-area: no; color: var(--od-gray-400); font-size: .85rem; padding-top: .4rem; }
.od-mx-c-notes  { grid-area: notes; }
.od-mx-c-t      { grid-area: t; }
.od-mx-c-k      { grid-area: k; }
.od-mx-c-net    { grid-area: net; }
.od-mx-c-rate   { grid-area: rate; }
.od-mx-c-vat    { grid-area: vat; }
.od-mx-c-gross  { grid-area: gross; text-align: right; }
.od-mx-c-settle { grid-area: settle; }
.od-mx-c-del    { grid-area: del; text-align: right; }
.od-mx-c-foot   { grid-area: foot; }

.od-mx-grossv { display: inline-block; padding-top: .4rem; font-weight: 600; }
.od-mx-none { display: inline-block; padding-top: .35rem; }

/* A cella kis címkéje – CSAK a szűk alakban, a fejléc-sor helyett. */
.od-mx-cl {
    display: none;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-400);
    margin-bottom: .15rem;
}

/* ⚠️ **A CELLA a lebegő lista horgonya** (99/b). Enélkül a legközelebbi pozicionált ős a
   görgető-doboz lenne, és a lista a DOBOZ aljához igazodna. A lista BALRA nyílik, a cella
   szélességénél szélesebben (a „5111 – Anyagköltség" 190 px-en olvashatatlan lenne). */
.od-mx-accell { position: relative; }
.od-mx-accell .od-accsel-pop { left: 0; right: auto; min-width: 340px; }

/* ⚠️ A FŐKÖNYV NEVE a mező alatt – a „picit jobban olvasható" válasza. A picker a nevet
   csupasz `span.text-muted`-ként adja; itt KÉT sorig tördelhet (nem `nowrap`), kisebb betűvel.
   A hiba-változat (`text-danger`: nincs a számlatükörben) ugyanígy. */
.od-mx-accell > div > span.text-muted,
.od-mx-accell > div > span.text-danger {
    display: block;
    font-size: .75rem;
    line-height: 1.3;
    margin-top: .15rem;
}

/* Az ÁFA-láb választója: a lista balra, a sor teljes szélességébe. */
.od-mx-vatacc { position: relative; min-width: 220px; }
.od-mx-vatacc .od-accsel-pop { left: 0; right: auto; min-width: 340px; }

/* ⚠️ HELY a nyitott listának: a `position: absolute` lista a doboz magasságát nem növeli, a
   kártya alján elvágódna. A `:has()` csak nyitott listánál ad alsó teret. */
.od-mx-scroll:has(.od-accsel-pop) { padding-bottom: 240px; }

/* Az ÖSSZESEN sor – CÍMKÉZETT számok, nem oszlop-igazítás: a két alakban az oszlopok máshol
   állnak, egy pozícióhoz kötött lábléc az egyikben elcsúszna. */
.od-mx-gfoot {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: .6rem .75rem;
    background: var(--od-gray-50);
    border-top: 2px solid var(--od-gray-200);
}
.od-mx-gfoot-lbl { margin-right: auto; font-weight: 600; }
.od-mx-gfig { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; }
.od-mx-gfig small { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--od-gray-400); }
.od-mx-gfig.is-gross { font-weight: 800; }

/* ⚠️ **Az összeg-mezőknek `min-width` KELL** – egy `400 000` különben levágódik (a
   projektben már kétszer előfordult). */
.od-mx-amt { min-width: 110px; }
.od-mx-rate { min-width: 80px; }
.od-mx-row { min-width: 90px; }

/* ── A SZŰK ALAK: a képhasáb melletti fél hasáb ─────────────────────────────────────────
   ⚠️ 14 sáv: a sorszám + 12 egyenlő + a törlés. A 12 azért, mert a sor háromféleképpen
   oszlik: 2 (T · K), 3 (Nettó · ÁFA · Bruttó) és 1:2 (ÁFA% · a láb) – mind egész sávszám.
   ⚠️ A küszöb MÉRT: a képhasáb mellett az űrlap-oszlop ~700–800 px; az egysoros alak
   1150 px-től fér el. */
@container od-mx-col (max-width: 1100px) {
    .od-mx-ghead { display: none; }
    .od-mx-cl { display: block; }

    .od-mx-line {
        grid-template-columns: 28px repeat(12, minmax(0, 1fr)) 34px;
        grid-template-areas:
            "no notes notes notes notes notes notes notes notes notes settle settle settle del"
            ".  t     t     t     t     t     t     k     k     k     k      k      k      ."
            ".  rate  rate  rate  rate  foot  foot  foot  foot  foot  foot   foot   foot   ."
            ".  net   net   net   net   vat   vat   vat   vat   gross gross  gross  gross  .";
        row-gap: .6rem;
    }

    .od-mx-c-gross { text-align: left; }
    .od-mx-grossv { padding-top: .2rem; font-size: .95rem; }
    .od-mx-c-del { padding-top: 1.1rem; }
    .od-mx-c-foot { align-self: end; }
}

/* ⚠️ **ITT SZÁNDÉKOSAN NINCS `.od-mx-linebtns` szabály – és ez MÉRÉS eredménye.** Először
   `flex-wrap: nowrap`-ot írtam ide, a bank-import bevált tanulságára hivatkozva („a két
   gomb közös dobozban marad, nem tördel külön"). A szabály viszont KÉTSZERESEN hatástalan
   volt:
     1. a markupban ott a Bootstrap `flex-wrap` segédosztálya, ami `!important`-tal ír –
        tehát a sajátom soha nem is érvényesült,
     2. és **1024 px-en (a `/konyveles/**` valós legkeskenyebb asztali esete) a két alak
        KARAKTERRE azonos**: egy sor, 31 px-es gombok, 0 levágott felirat.
   A bank-import tanulságának a FELTÉTELE tehát nem áll fenn (ott két gomb egy szűk sávban
   TÉNYLEG külön tördelt). Egy semmit nem csináló CSS-szabály szándéknak látszana a
   következő olvasónak (18. tanulság) – ezért került ki, a markupból az osztállyal együtt. */

/* A lista sorai kattinthatók (a bizonylat megnyitása). */
.od-mx-row-click { cursor: pointer; }

/* ⚠️ **Az év-választó `min-width`-e KÖTELEZŐ, `max-width`-e nem kell.** Űrlapelemnél a
   `width: auto` TARTALOMHOZ igazodó szélességet jelent, ami itt egy négyjegyű szám + a
   legördülő nyila – a mező a felénél keskenyebb lenne, mint amit a nyíl paddingja kér, és
   a kiválasztott év a nyíl alá csúszna. Felső korlát viszont nem kell (szemben a
   pénztár/bank SZÁMLA-választójával, ahol a leghosszabb pénztárnév kiszorítaná a gombokat):
   az évszám hossza kötött.

   ⚠️ SAJÁT osztály, NEM a pénztár/bank `.od-cb-year`-e: az az ő névtere, és egy kész
   osztály más modulban pontosan a 18. megtanult hiba – egy ottani hangolás itt némán
   mozdítaná el az elrendezést. A névtér foglaltságát MÉRTEM (`od-mx-year` → 0 találat,
   negatív kontrollal `od-mx` → 16). */
.od-mx-year { min-width: 104px; }

/* ═══ A VEGYES KÖNYVELÉS A 2026‑09‑05-i TERV SZERINT (`design/vegyes/`) ══════════════════
   ⚠️ A pénztár/bank könyv és bizonylat NYELVE: a KÖZÖS osztályokat használjuk (`od-cb-table`,
   `od-cb-voucher`, `od-cb-total-year`, `od-cb-sumbar`, `od-brl-chip`, `od-brl-tag`) – ugyanaz a
   dolog három könyvön ugyanúgy nézzen ki. Ide CSAK az kerül, ami a vegyesben MÁS. */

/* ── A LISTA ─────────────────────────────────────────────────────────────────────── */

/* A sorozat sávja („VE-2026/0001 – 0031 · a sorozat évenként fut") az év-választó mellett,
   az alapvonalhoz igazítva. */
.od-mx-series { font-size: .8rem; color: var(--od-gray-600); padding-bottom: .55rem; }

/* Főkönyvi szám szűrő – a kereső alakja, saját ikonnal. ⚠️ `position: relative` az ikon
   horgonyához; a `padding-left` a helyét tartja (a kereső 18. tanulságos csapdája). */
.od-mx-acct { position: relative; width: 190px; }
.od-mx-acct i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-gray-400);
    font-size: .9rem;
    pointer-events: none;
}
.od-mx-acct .form-control { padding-left: 2.1rem; }

/* A chip számlálója – halványabb, mint a felirat; bekapcsolva örökli a fehéret. */
.od-brl-chip-n { color: var(--od-gray-400); margin-left: .15rem; }
.od-brl-chip.is-on .od-brl-chip-n { color: inherit; opacity: .85; }

/* A bizonylat-cella: szám + gemkapocs + „N számla" chip egy sorban. */
.od-mx-voucher { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

/* ⚠️ A KÖNYVELÉS oszlop: `T 5221 → K 482`. A T/K betű kicsi és halvány, a szám félkövér –
   a szem a SZÁMPÁRT keresi, a betű csak az oldalt mondja meg. */
.od-mx-tk { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-size: .82rem; }
.od-mx-tk i { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .04em; color: var(--od-gray-400); }
.od-mx-tk b { font-weight: 700; color: var(--od-gray-800); }
.od-mx-tk-arrow { color: var(--od-gray-300); }
.od-mx-tk-more { color: var(--od-gray-400); font-size: .78rem; margin-left: .2rem; }

/* ⚠️ A közös `od-cb-table` 900 px-es alapszélessége a KÖNYV hét oszlopához van szabva; a
   vegyes lista is hét oszlopos, de a „Könyvelés" hosszabb – ezért kicsit több. */
.od-mx-table { min-width: 960px; }
.od-mx-table .od-mx-total-year td { font-weight: 600; }
.od-mx-table .od-mx-total-year td:last-child { font-weight: 800; color: var(--od-gray-800); }
.od-mx-pagesize { width: auto; min-width: 64px; }

/* ── A BIZONYLAT SZERKESZTŐJE ────────────────────────────────────────────────────── */

/* ⚠️ A ragadós sáv a KÖZÖS `od-cb-sumbar`; itt nincs irány, tehát a bal szegély a vegyes
   könyvelés fejléc-ikonjának lilája – ugyanaz a jel, ami a lapot azonosítja. Az összeg
   színe semleges (nem zöld/narancs): a vegyes bizonylat se bevétel, se kiadás. */
.od-cb-sumbar.is-mixed { border-left-color: #7c3aed; }
.od-cb-sumbar.is-mixed .od-cb-sumfig-value { color: var(--od-gray-800); }
.od-mx-sumsplit { color: var(--od-gray-700); }

/* „Soronként kiegyensúlyozott · 3 sor" – a közös `od-brl-tag is-live` chip, kicsit
   nagyobb: a sávban áll, nem egy táblázat-cellában. */
.od-mx-balanced { font-size: .78rem; padding: 4px 10px; line-height: 20px; }
.od-mx-balanced i { font-size: .8rem; }

/* A Törlés ELKÜLÖNÍTVE a Mégse/Mentés párostól. */
.od-mx-delete { margin-right: .75rem; }

/* ── A SOR LÁBA (az ÁFA-adatok) ──────────────────────────────────────────────────────
   ⚠️ A `od-mx-vatrow` cellája eddig egy MÁSODIK, teljes űrlap-sor volt címkékkel és
   `align-items-end` ráccsal; most egy halvány, egysoros láb. A vezérlők kisebbek, de
   szerkeszthetők – az információ nem tűnik el, csak nem verseng a fő mezőkkel. */
.od-mx-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .6rem;
    font-size: .78rem;
    color: var(--od-gray-600);
}
.od-mx-foottag {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--od-gray-400);
}
.od-mx-footdot { color: var(--od-gray-300); }
.od-mx-footlbl { margin: 0; color: var(--od-gray-600); }
.od-mx-footwhy { color: var(--od-gray-400); }
.od-mx-foot .form-check { display: flex; align-items: center; gap: .35rem; min-height: 0; padding-left: 0; }
.od-mx-foot .form-check-input { margin: 0; }
.od-mx-foot .form-check-label { font-size: .78rem; }
.od-mx-foot .od-mx-row { width: 90px; }
.od-mx-foot .od-mx-vatacc { min-width: 200px; }
/* A lábban a picker keresőmezője alatt nincs második sor: a `margin-bottom` az űrlap-alaké. */
.od-mx-foot .od-accsel-q { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   FŐKÖNYVI KIVONAT ÉS KARTON (`od-gl-`)

   ⚠️ SAJÁT névtér, NEM a pénzügyi nyilvántartás `od-fr-`-je vagy a vegyes `od-mx-`-e:
   azok a saját, bemért elrendezésük – egy ottani hangolás itt némán mozdítaná el a
   táblázatot (18. megtanult hiba). A névtér foglaltságát MÉRTEM: `od-gl` → 0 találat,
   negatív kontrollal `od-mx` → 16.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `position: relative` KÖTELEZŐ a görgetődobozon: a `visually-hidden` és minden
   abszolút pozicionált gyerek különben a LAP koordinátarendszeréhez igazodna, és
   kiszélesítené a dokumentumot (a `/finances` MÉRT hibája). */
.od-gl-scroll { position: relative; }

.od-gl-year { min-width: 104px; }

.od-gl-table { font-size: .85rem; }
.od-gl-table > :not(caption) > * > * { padding: .45rem .5rem; }
.od-gl-table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--od-gray-500);
}

/* ⚠️ `tabular-nums` a számlaszámon is: a fa-behúzás mellett arányos számjegyekkel a
   szintek nem esnének egy vonalba, és a hierarchia jelzése veszne el. */
.od-gl-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ⚠️ A tükörben NEM szereplő szám jelölése 2026‑09‑05 óta PIROS chip (`.od-gl-sum-chip.is-missing`,
   lent), a terv szerint – a korábbi dőlt szürke szöveg (`od-gl-missing`) megszűnt. A chip
   háttere (#FEF2F2) független a sor szürke sávjától, a #B91C1C rajta 5,9:1 – a WCAG-érv áll. */

/* ⚠️ A gyűjtő chip SEMLEGES szürke, nem figyelmeztető: a gyűjtő számla a NORMÁLIS
   működés része, nem hiba – riasztó színnel a szem a számlatükör minden csomópontján
   figyelmeztetést látna. */
.od-gl-sum-chip {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--od-gray-100);
    color: var(--od-gray-500);
    white-space: nowrap;
}

/* ⚠️ A TÁBLÁZAT-PREFIX KÖTELEZŐ (0-2-1): a Bootstrap `.table > :not(caption) > * > *`
   szabálya (0-1-1) MINDEN cellára ráír `color`-t, tehát a csupasz osztály NÉMÁN
   alulmaradna – ez a projektben MÁR MÉRT hiba volt (`od-cb-neg`). */
.od-gl-table td.od-gl-balance { font-weight: 600; }

.od-gl-table tr.od-gl-open > td { background: var(--od-primary-xlt); }

/* ── A FA SZINTJEI: a háttér lefelé VILÁGOSODIK ────────────────────────────────
   Az `1` közepesen szürke, a `11` világosabb, a `111` alig, a `1111`-től fehér. A
   számlaszámok tagolása így a SORON is látszik, nem csak a behúzáson – egy 458 soros
   számlatükörben a szem a színsávok mentén tudja végigfutni a csoportokat.

   ⚠️ **SZÜRKE, nem kék, és ez nem ízlés.** A kék ezen a táblázaton MÁR FOGLALT: a
      nyitott sor jelzése (`od-gl-open`, `--od-primary-xlt`). Kék skálával a kiválasztás
      – az EGYETLEN állapot, amit a felhasználó maga állít – beleolvadna a hierarchiába.
      Ugyanaz az érv, amiért az SZJA-mentes keret is ibolya lett az irányítópulton.

   ⚠️ A MEGLÉVŐ szürke palettát használjuk, nem új árnyalatokat: a `gray-200` → `100`
      → `50` → fehér lépcső épp négy szintet ad, és a projekt minden más felülete
      ugyanezekből az értékekből dolgozik.

   ⚠️ **A `:not(.od-gl-open)` KÖTELEZŐ, nem óvatosság.** Nélküle a mélység-szabály
      (0-3-3) FELÜLÍRNÁ a nyitott sor kékjét (0-2-2) – vagyis a kiválasztás jelzése
      NÉMÁN eltűnne, méghozzá pont a gyökér- és a második szinten. Kizárással a kettő
      nem is találkozik, tehát a sorrendtől sem függ.

   ⚠️ A TÁBLÁZAT-PREFIX itt is kötelező: a Bootstrap `.table > :not(caption) > * > *`
      MINDEN cellára ráír `background-color: var(--bs-table-bg)`-t. A `table-hover`
      viszont `box-shadow`-val dolgozik (`--bs-table-bg-state`), tehát a hover ezekre a
      sorokra is ráborul – a szint-szín alatta marad, csak sötétedik. */
.od-gl-table > tbody > tr.od-gl-d0:not(.od-gl-open) > td { background: var(--od-gray-200); }
.od-gl-table > tbody > tr.od-gl-d1:not(.od-gl-open) > td { background: var(--od-gray-100); }
.od-gl-table > tbody > tr.od-gl-d2:not(.od-gl-open) > td { background: var(--od-gray-50); }

.od-gl-table tfoot tr.od-gl-total > td {
    background: var(--od-gray-50);
    font-weight: 700;
    border-top: 2px solid var(--od-gray-200);
}

/* ── A KARTON, a soron lenyitva ────────────────────────────────────────────── */

/* ⚠️ A karton a NYITOTT sorhoz kötve: kék vonal fent (a nyitott sor alsó szegélye helyett) és
   vastagabb kék vonal lent; a bal behúzás (56 px) a számlaszám oszlopához igazítja (a terv). */
.od-gl-table tr.od-gl-cardrow > td {
    background: var(--od-gray-50);
    border-top: 1px solid #DBEAFE;
    border-bottom: 2px solid #DBEAFE;
}
.od-gl-table tr.od-gl-open > td { border-bottom: 0; }

.od-gl-card { padding: 12px 16px 14px 56px; }

/* ⚠️ **FLEX, hogy a partner-szűrő a JOBB szélre kerüljön** (`ms-auto`). A szűrő a kartonhoz
   tartozik, nem a lap fejlécéhez: fentre téve egy csukott kartonnál is ott ülne, és nem
   lenne mire hatnia. Az `align-items: center` a szám és a select alapvonalát hozza egy
   vonalba; `baseline`-nal a select alsó kerete a szöveg alá csúszna. */
.od-gl-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .85rem;
    margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}

/* ⚠️ **`max-width` KELL, `min-width: 0` PEDIG KÖTELEZŐ – és ez MÉRT hiba javítása.** A címke
   „Név (adószám) (egyenleg)" alakú, ami egy hosszú cégnévnél 60+ karakter: felső korlát
   nélkül a select a kartont szélesítené ki, és a táblázat vízszintesen elmozdulna.
   ⚠️ A 320 px viszont ÖNMAGÁBAN nem elég. A `.od-gl-card-head` FLEX konténer, a select tehát
   flex-elem, aminek az alapértelmezett `min-width: auto`-ja megakadályozza, hogy a TARTALMA
   alá zsugorodjon – kártyás nézetben a doboz 283 px, a mező mégis 320 maradt, és **21 px-cel
   kilógott a kártyából** (mérve 375 px-en). A `min-width: 0` engedi a zsugorodást; a
   `max-width` a felső határ marad. A kettő EGYÜTT véd: külön-külön egyik sem elég.
   ⚠️ NEM `min-width: <px>` – az lenne a káros, mert újra beragasztaná a mezőt egy szűk
   kártyába. Itt épp az ellenkezőjéről van szó. */
.od-gl-partnersel {
    max-width: 320px;
    min-width: 0;
    width: auto;
}

/* ⚠️ A karton SAJÁT dobozában görget, nem a lap: nyolc oszlopa van, és a szülő
   táblázatot kiszélesítve az EGÉSZ kivonat vízszintesen elmozdulna. */
/* ⚠️ FÜGGŐLEGESEN is korlátos (a terv: „további 281 tétel · görgethető"): egy 286 tételes vevő-karton
   különben a kivonat közepébe tolna 9 000 px-t, és a következő számla sorát senki nem találná. */
.od-gl-cardscroll { position: relative; max-height: 520px; overflow: auto; }

.od-gl-cardtable { font-size: .78rem; background: #fff; min-width: 900px; }
.od-gl-cardtable > :not(caption) > * > * { padding: .3rem .4rem; }
/* ⚠️ A karton fejléce a SAJÁT dobozához tapad (`top: 0`), NEM a navbarhoz: a
   `.od-gl-cardscroll` maga görget (`max-height: 520px; overflow: auto`), tehát a
   `sticky` referenciája a doboz, nem az ablak. Navbar-magasságú eltolással a fejléc a
   doboz teteje alá 64 px-re állna, és az első sorok FÖLÉ kerülnének – ez volt az éles hiba. */
.od-gl-cardtable > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--od-gray-50);
    box-shadow: inset 0 -1px 0 var(--od-gray-200);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--od-gray-500);
    white-space: nowrap;
}

.od-gl-src {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--od-gray-100);
    color: var(--od-gray-500);
    white-space: nowrap;
}

.od-gl-counter { font-variant-numeric: tabular-nums; white-space: nowrap; }

.od-gl-cardtable tfoot tr.od-gl-cardfoot > td {
    font-weight: 700;
    border-top: 2px solid var(--od-gray-200);
}

/* ── A hibás bizonylatok listája a diagnosztika-sávban ─────────────────────
   ⚠️ SAJÁT névtér (`od-gl-issue…`), nem a fenti karton-tábláé: az a SZÁMLA tételeit
   sorolja fehér háttéren, ez a HIBÁS bizonylatokat egy figyelmeztető sávban. Egy kész
   osztályt más célra használva pontosan a 18. tanulságba futnánk. */

/* ⚠️ A korábbi `od-gl-issuebox` és `od-gl-issues > summary` (a `details` a figyelmeztető sávban)
   2026‑09‑05-én MEGSZŰNT: a lista az állapot-sáv gombjára nyílik (`od-gl-issuesbox`, lent). A
   halott szabályok törölve – a nem hivatkozott szabály a 18. tanulság tükörképe. */

/* ⚠️ A táblázat a SAJÁT dobozában görget, nem a lap. Kilenc oszlop keskeny ablakban nem fér ki. */
.od-gl-issues-wrap { position: relative; margin-top: .5rem; }

.od-gl-issues-table {
    font-size: .78rem;
    background: #fff;
    min-width: 860px;
}

.od-gl-issues-table > :not(caption) > * > * { padding: .35rem .5rem; }

.od-gl-issues-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--od-gray-500);
    background: var(--od-gray-50);
    white-space: nowrap;
}

/* ⚠️ A bizonylatszám EGY egység (`V-2026/0001`) – kettétörve a szem két adatnak látná. */
.od-gl-issue-voucher { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* A partnernév a leghosszabb szabad szöveg a sorban: csonkoljuk, a teljes a `title`-ben. */
.od-gl-issue-partner {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠️ TÁBLÁZAT-PREFIX KÖTELEZŐ: a Bootstrap `.table > :not(caption) > * > *` szabálya
   (0‑1‑1) MINDEN cellára ráír `color`-t, tehát a csupasz osztály NÉMÁN alulmaradna –
   ez a pénztárkönyv `od-cb-neg`-jénél MÁR EGYSZER mért hiba volt. */
.od-gl-issues-table td.od-gl-issue-diff { color: var(--od-danger); font-weight: 700; }

.od-gl-issue-why { font-size: .74rem; color: var(--od-gray-600); min-width: 16rem; }

.od-gl-issue-open { white-space: nowrap; }

/* ⚠️ A `/konyveles/**` rajta van a `DeviceDetection.BlockedPrefixes` listán, tehát
   telefonon a lap `/desktop-only`-ra terel – a 375 px itt KESKENY ASZTALI ablakot
   jelent. A kártyásítás így is kell: a hat oszlop egy szűk ablakban olvashatatlan. */
@media (max-width: 575.98px) {

    /* Az ÖSSZESEN sor TÁBLÁZAT-SOR marad: a három összeg egy vonalban tartozik össze,
       és kártyaként a „Tartozik / Követel / Egyenleg" hármas szétesne. Nem feszít ki
       semmit (nincs rajta `min-width`), tehát a lapot nem tudja túlcsordítani.
       A specifikussága (0-2-2) nagyobb az általános kártya-szabályénál (0-1-3),
       tehát nem a sorrenden múlik. */
    .od-cardtable.od-gl-table tr.od-gl-total { display: table-row; }
    .od-cardtable.od-gl-table tr.od-gl-total > td { display: table-cell; }

    /* ⚠️ A KARTON sora viszont NEM maradhat táblázat-sor – ez MÉRT hiba javítása.
       A beágyazott karton-tábla `min-width: 900px`-e kifeszítené a `colspan`-os sort,
       azon át a külső táblázatot, a közös `.od-cardtable-wrap` pedig mobilon
       `overflow-x: visible` (ott kártyáknál nincs mit oldalra húzni) – tehát a
       túlcsordulás a LAPRA szállna: mérve **575 px**, negatív kontrollal (a sort
       elrejtve 0). A sor ezért a KÖZÖS kártya-szabályon marad (`display: flex`), és
       csak a cellát igazítjuk. */
    /* ── A SZINT-ÁRNYALAT a KÁRTYÁRA kerül, nem a cellákra ─────────────────────
       Cellánként festve a kártya foltos lenne: a sor paddingja (`.7rem .8rem`) a
       cellákon KÍVÜL van, tehát fehér csík maradna a szürke sávok körül. Ugyanaz az
       érv, amiért a sor-hover is a kártyára megy, nem a cellákra.

       ⚠️ A cella-levétel specifikussága 0-4-3, az asztali szabályé 0-3-3 – tehát a
          mobil ág NEM a sorrenden múlik. A `:not(.od-gl-open)` mindkét helyen kell:
          a nyitott sor kékje a CELLÁKON ül, azt itt nem szabad levenni. */
    .od-cardtable.od-gl-table > tbody > tr.od-gl-d0:not(.od-gl-open) > td,
    .od-cardtable.od-gl-table > tbody > tr.od-gl-d1:not(.od-gl-open) > td,
    .od-cardtable.od-gl-table > tbody > tr.od-gl-d2:not(.od-gl-open) > td { background: none; }

    .od-cardtable.od-gl-table > tbody > tr.od-gl-d0:not(.od-gl-open) { background: var(--od-gray-200); }
    .od-cardtable.od-gl-table > tbody > tr.od-gl-d1:not(.od-gl-open) { background: var(--od-gray-100); }
    .od-cardtable.od-gl-table > tbody > tr.od-gl-d2:not(.od-gl-open) { background: var(--od-gray-50); }

    /* ⚠️ A hover INSET ÁRNYÉKKAL megy, nem háttérrel – a közös kártya-szabály
       (`background: var(--od-gray-50)`, 0-2-2) a szint-színnél (0-4-2) amúgy is
       alulmaradna, vagyis a kurzor alatt NÉMÁN elmaradna a visszajelzés. Az árnyék
       RÁBORUL bármelyik árnyalatra – pontosan úgy, ahogy a Bootstrap is csinálja
       asztali nézetben (`--bs-table-bg-state`). */
    .od-cardtable.od-gl-table > tbody > tr:hover {
        box-shadow: inset 0 0 0 9999px rgba(30, 41, 59, .05);
    }

    .od-cardtable.od-gl-table tr.od-gl-cardrow > td {
        display: block;
        /* ⚠️ `min-width: 0` KÖTELEZŐ: a flex-elem alapértelmezett `min-width: auto`-ja
           megakadályozná, hogy a 900 px-es tartalma alá zsugorodjon – enélkül a
           `flex: 0 0 100%` sem segít, és a görgetődoboz nem kapna véges szélességet. */
        min-width: 0;
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   FŐKÖNYVI KIVONAT – a `/design` terv szerinti ráncfelvarrás (2026‑09‑05, `design/fokonyvi-kivonat/`)

   Ami itt új: az ÁLLAPOT-SÁV három kártyája, a SZŰRŐSÁV (keresés · osztály-chipek · nulla-kapcsoló),
   a csukható gyűjtő és a Karton gomb, a T/K betűs egyenleg, a RAGADÓS fejléc és Összesen, a karton
   fejléc-számai és futó egyenlege. A fa szint-árnyalatai, a karton és a diagnosztika táblája a fenti,
   MÉRT szabályokon maradtak.

   ⚠️ A chipek a KÖZÖS `od-brl-chip` (szűrő-chip) családból; a kis címkék és a nagy pill-ek saját
   `od-gl-tag` / `od-gl-chip` – a bank szabályok `od-brl-tag`-je más méret és más jelentés.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Az állapot-sáv ────────────────────────────────────────────────────────────────── */

/* KÉT kártya (a középső, az év állapota, a felhasználó kérésére megszűnt – 2026‑09‑05). */
.od-gl-status {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
    margin-bottom: 1rem;
}

/* ⚠️ A SZÍN a bal szegélyen és a chipen, nem a háttéren – a teli szín a lap legnagyobb
   felületét foglalná el, és a három kártya egymást kiabálná túl. Szegély nélkül = rendben. */
.od-gl-stcard {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: 14px 20px;
    background: var(--od-white);
    border: 1px solid var(--od-gray-200);
    border-left: 4px solid var(--od-gray-200);
    border-radius: var(--od-radius-lg);
    box-shadow: var(--od-shadow-sm);
}
.od-gl-stcard.is-col { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.od-gl-stcard.is-ok   { border-left-color: var(--od-success); }
.od-gl-stcard.is-warn { border-left-color: var(--od-warning); }
.od-gl-stcard.is-bad  { border-left-color: var(--od-danger); }

.od-gl-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-gl-stlbl { font-size: .78rem; font-weight: 500; color: var(--od-gray-500); }
.od-gl-stlbl b { color: var(--od-gray-700); }
.od-gl-stcard.is-ok .od-gl-stlbl b { color: var(--od-success-dark); }
.od-gl-stval { font-size: 1.45rem; font-weight: 800; line-height: 1.2; color: var(--od-gray-800); }
.od-gl-stsep { flex: 0 0 auto; width: 1px; min-height: 38px; align-self: stretch; background: var(--od-gray-200); }

.od-gl-strow { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--od-gray-600); min-width: 0; }
.od-gl-strow > span { min-width: 0; }
.od-gl-strow > a { font-size: .78rem; white-space: nowrap; }
.od-gl-stnote { font-size: .74rem; color: var(--od-gray-400); }
.od-gl-stnote.is-warn { color: #92400E; }

/* A „Záróval együtt" kapcsoló a SZŰRŐSÁVBAN, az év-választó és a „lezárt év" címke mellett (az év
   kártyája megszűnt). `padding-left: 0` a Bootstrap 2,5 em-es párnázása ellen. */
.od-gl-toolbar .od-gl-closing-switch { padding: 0; margin: 0; min-height: 0; font-size: .8rem; display: flex; align-items: center; gap: .5rem; }
.od-gl-toolbar .od-gl-closing-switch .form-check-input { margin: 0; flex: 0 0 auto; }
.od-gl-toolbar .od-gl-closing-switch .form-check-label { color: var(--od-gray-600); cursor: pointer; }

/* A nagy pill (30 px) az egyensúlyhoz és a diagnosztikához; a kis címke (22 px) a sorokhoz. */
.od-gl-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
}
.od-gl-chip i { font-size: .8rem; }
.od-gl-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}
.od-gl-tag i { font-size: .7rem; }
.od-gl-chip.is-ok,   .od-gl-tag.is-ok   { background: var(--od-success-xlt); color: var(--od-success-dark); border-color: var(--od-success-line); }
.od-gl-chip.is-warn, .od-gl-tag.is-warn { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.od-gl-chip.is-bad,  .od-gl-tag.is-bad  { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.od-gl-chip.is-off,  .od-gl-tag.is-off  { background: var(--od-gray-100); color: var(--od-gray-600); }

/* KÉK: „ez a kiemelt / alapértelmezett" – nem állapot-értékelés, hanem szerep. Ezért nem
   zöld (az „rendben"-t jelentene) és nem szürke (az „semleges/kikapcsolt"). */
.od-gl-chip.is-blue, .od-gl-tag.is-blue { background: var(--od-primary-xlt); color: var(--od-primary-dark); border-color: #DBEAFE; }

/* KISEBB méret táblázat-cellába: ott a chip kíséret, nem főszereplő – teljes méretben
   megnövelné a sormagasságot, és a szöveges cellák mellett hangosabb lenne a kelleténél. */
.od-gl-chip.is-sm { height: 20px; padding: 0 7px; font-size: .68rem; }

.od-gl-issuestoggle { font-size: .78rem; text-decoration: none; white-space: nowrap; }
.od-gl-issuestoggle:hover { text-decoration: underline; }

/* A hibás bizonylatok doboza a sáv alatt – borostyán keret, a mai `alert-warning` helyett. */
.od-gl-issuesbox {
    margin-bottom: 1rem;
    border: 1px solid #FDE68A;
    border-radius: var(--od-radius);
    background: #FFFBEB;
    overflow: hidden;
}
.od-gl-issueshead {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid #FDE68A;
    font-size: .82rem;
    color: #92400E;
}
.od-gl-issueshead > span { color: #B45309; }
.od-gl-issuesbox .od-gl-issues-wrap { margin-top: 0; }
.od-gl-issuesbox .od-gl-issues-table thead th { color: #92400E; }

@media (max-width: 991.98px) {
    .od-gl-status { grid-template-columns: minmax(0, 1fr); }
    .od-gl-stcard { flex-wrap: wrap; gap: 14px; }
    .od-gl-stsep { display: none; }
}

/* ── A szűrősáv ───────────────────────────────────────────────────────────────────── */

.od-gl-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--od-gray-200);
}
.od-gl-toolbar .od-gl-year { width: auto; min-width: 96px; }

.od-gl-search { position: relative; display: flex; align-items: center; width: 300px; max-width: 100%; }
.od-gl-search > i { position: absolute; left: 10px; color: var(--od-gray-400); font-size: .85rem; pointer-events: none; }
.od-gl-search .form-control { padding-left: 30px; padding-right: 96px; }
.od-gl-search .form-control::-webkit-search-cancel-button { display: none; }
.od-gl-hits { position: absolute; right: 30px; font-size: .74rem; color: var(--od-gray-400); white-space: nowrap; pointer-events: none; }
.od-gl-clear {
    position: absolute;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--od-gray-500);
    font-size: .75rem;
    cursor: pointer;
}
.od-gl-clear:hover { background: var(--od-gray-100); color: var(--od-gray-800); }

.od-gl-classes { margin-left: 6px; gap: 6px; }
.od-gl-classes .od-brl-chip { height: 28px; padding: 0 .65rem; font-size: .78rem; font-weight: 600; }
/* A nulla találatú osztály chipje KATTINTHATÓ marad (a terv), csak halványabb: rákattintva a
   „Nincs a szűrésnek megfelelő számla" sor és a Szűrők törlése mondja meg, mi történt. */
.od-gl-classes .od-brl-chip.is-zero:not(.is-on) { color: var(--od-gray-400); }

/* ⚠️ `padding-left: 0` KÖTELEZŐ: a Bootstrap `.form-switch` 2,5 em bal párnázást ad, és a
   kapcsoló `margin-left: -2.5em`-je húzza vissza – a margót nullázva a párnázás egy üres csíkként
   marad a kapcsoló ELŐTT (a felülvizsgálat találata; ugyanez a csapda a `.od-mx-foot .form-check`-nél). */
.od-gl-zero { margin: 0 0 0 10px; padding-left: 0; min-height: 0; display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--od-gray-600); }
.od-gl-zero .form-check-input { margin: 0; flex: 0 0 auto; }
.od-gl-zero .form-check-label { cursor: pointer; }
.od-gl-zero .form-check-input:disabled ~ .form-check-label { cursor: default; opacity: .6; }

/* ── A táblázat: RAGADÓS fejléc és Összesen ─────────────────────────────────────────
   ⚠️ A doboz asztali nézetben NEM görget (a `.table-responsive` `overflow-x: auto`-ja
   kikapcsolva): görgető-dobozban a `sticky` a doboz belsejéhez tapadna, amit senki nem görget,
   az ablakhoz viszont csak akkor, ha egyetlen ős sem vág. A hét oszlop 576 px fölött kifér
   (nincs `min-width`); alatta a kártyás nézet amúgy is `overflow-x: visible`.
   ⚠️ A `top` a FIX navbar magassága: puszta `0`-val a fejléc a navbar MÖGÉ csúszna. */
.od-gl-scroll { overflow: visible; }
.od-gl-main { overflow: visible; }

/* ⚠️ **KÖZVETLEN gyerek (`>`), és ez MÉRT, éles hiba javítása (2026‑09‑07).** Leszármazott
   szelektorral (`.od-gl-table thead th`) a szabály a BEÁGYAZOTT karton-táblázat fejlécére is
   ráült – az viszont a SAJÁT dobozában görget (`.od-gl-cardscroll`, `max-height: 520px`),
   ahol a `top: 64px` nem a navbar alá tapaszt, hanem 64 PIXELLEL A DOBOZ TETEJE ALÁ. Így a
   karton első sora a fejléc FÖLÖTT jelent meg, a fejléc pedig a sorok közé csúszott.
   ⚠️ A CSS-ben a beágyazott táblázat nem „másik komponens": ami nem `>`-vel van kötve, az
   MINDEN mélységben illeszkedik – itt a kivonat sora nyitja ki a kartont, tehát a két
   táblázat egymásba ágyazódik. */
.od-gl-table > thead > tr > th {
    position: sticky;
    top: var(--od-navbar-h);
    z-index: 2;
    background: var(--od-gray-50);
    box-shadow: inset 0 -1px 0 var(--od-gray-200);
}

/* ── KÉTSOROS fejléc (2026‑09‑05, a felhasználó kérése): „Forgalom" és „Egyenleg" csoport, alattuk
   Tartozik · Követel. A csoport-sor FIX magasságú (30 px), mert a második sor ragadása ennyivel
   lejjebb tapad – `auto` magassággal a két sor egymásra csúszna görgetéskor. */
.od-gl-table > thead > tr.od-gl-thgroups > th { height: 30px; padding-top: 0; padding-bottom: 0; vertical-align: bottom; }
.od-gl-table > thead > tr.od-gl-thgroups > th[rowspan] { vertical-align: middle; }
.od-gl-table > thead > tr.od-gl-thsubs > th { top: calc(var(--od-navbar-h) + 30px); box-shadow: inset 0 -1px 0 var(--od-gray-200); }
.od-gl-table th.od-gl-thgroup {
    text-align: center;
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--od-gray-700);
    box-shadow: inset 0 -1px 0 var(--od-gray-300);
}
.od-gl-table th.od-gl-thsub { padding-top: .35rem; padding-bottom: .35rem; }
/* ⚠️ Az egyenleg-oszloppár NEM kap saját hátteret (a felhasználó visszajelzése: „más lett a
   háttere, ne térjen el") – a szint-árnyalatok soronként egységesek; a csoportot a fejléc
   és a T/K szín választja el a forgalomtól, nem sáv. */
.od-gl-table td.od-gl-balance.is-t { color: var(--od-primary-dark); }
.od-gl-table td.od-gl-balance.is-k { color: #B91C1C; }
.od-gl-table tfoot tr.od-gl-total > td {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.od-gl-totallbl { font-weight: 800; }
.od-gl-totallbl span { font-weight: 400; color: var(--od-gray-500); font-size: .8rem; }

.od-gl-thfold, .od-gl-fold { width: 34px; }
.od-gl-thact { width: 96px; }
.od-gl-act { white-space: nowrap; }

/* A csukó gomb: a chevron a gyűjtő sor elején – a KARTON a sor végén, tehát a kettő nem téveszthető össze. */
.od-gl-foldbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--od-gray-500);
    cursor: pointer;
}
.od-gl-foldbtn:hover { background: rgba(30, 41, 59, .08); color: var(--od-gray-800); }

/* A Karton gomb – kicsi, körvonalas; nyitva tömör kék (az egyetlen állapot, amit a felhasználó maga állít). */
.od-gl-kbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--od-gray-300);
    border-radius: 6px;
    background: var(--od-white);
    color: var(--od-gray-600);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.od-gl-kbtn:hover { background: var(--od-gray-100); color: var(--od-gray-800); text-decoration: none; }
.od-gl-kbtn.is-on { background: var(--od-primary); border-color: var(--od-primary); color: var(--od-white); }
.od-gl-kbtn.is-on:hover { background: var(--od-primary-dark); border-color: var(--od-primary-dark); color: var(--od-white); }
.od-gl-kbtn:disabled { opacity: .5; cursor: default; }
.od-gl-kbtn.dropdown-toggle::after { margin-left: .35rem; }

/* ⚠️ Az egyenleg T/K BETŰS alakja (`od-gl-side`) 2026‑09‑05 délután MEGSZŰNT: a felhasználó kérésére
   az egyenleg KÉT oszlop lett (Tartozik · Követel) az „Egyenleg" csoport-fejléc alatt – lásd fent. */
.od-gl-dash { color: var(--od-gray-300); }

/* A keresés: a találat kiemelve, az őse halványan. */
.od-gl-mark { background: #FEF3C7; color: inherit; border-radius: 2px; padding: 0 1px; }
.od-gl-table > tbody > tr.od-gl-dim > td { color: var(--od-gray-400); }

.od-gl-sum-chip.is-folded { color: var(--od-gray-400); background: transparent; border: 1px dashed var(--od-gray-300); }
.od-gl-sum-chip.is-missing { background: #FEF2F2; color: #B91C1C; }
.od-gl-chartlink { font-size: .78rem; margin-left: .4rem; white-space: nowrap; }
.od-gl-nohit { font-size: .85rem; }

/* ── A karton fejléce: számok · szűrő · kapcsolók ────────────────────────────────── */

.od-gl-card-head { gap: .5rem 1.25rem; align-items: center; margin-bottom: .6rem; }
.od-gl-card-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.od-gl-card-title strong { font-size: 1rem; }
.od-gl-card-title .text-muted { font-size: .9rem; }
.od-gl-card-head .od-gl-stsep { min-height: 30px; }
.od-gl-fig { display: flex; flex-direction: column; gap: 2px; }
.od-gl-fig > span:first-child { font-size: .72rem; color: var(--od-gray-500); }
.od-gl-fig > span:last-child { font-size: 1.05rem; font-weight: 800; color: var(--od-gray-700); }
.od-gl-fig.is-bal > span:last-child { color: var(--od-primary-dark); }
.od-gl-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.od-gl-card-tools .od-gl-partnersel { width: auto; max-width: 260px; min-width: 0; }

/* A karton tábla: a nyitó sor halvány, a futó egyenleg vastag, a havi részösszeg szürke sáv. */
.od-gl-cardtable > tbody > tr.od-gl-openingrow > td { background: #FCFDFE; color: var(--od-gray-500); }
.od-gl-cardtable td.od-gl-running { font-weight: 600; }
.od-gl-cardtable tfoot td.od-gl-runfoot { color: var(--od-primary-dark); }
.od-gl-cardtable > tbody > tr.od-gl-monthrow > td {
    background: var(--od-gray-50);
    color: var(--od-gray-500);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--od-gray-200);
}
.od-gl-partnercell, .od-gl-notescell { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Üres állapot ─────────────────────────────────────────────────────────────────── */

.od-gl-empty { margin: 16px; padding: 26px; border: 1px dashed var(--od-gray-300); border-radius: 8px; text-align: center; }
.od-gl-empty > i { font-size: 30px; color: var(--od-gray-300); }
.od-gl-empty-title { font-size: .9rem; font-weight: 600; margin-top: 8px; }
.od-gl-empty-note { max-width: 440px; margin: 5px auto 14px; font-size: .75rem; color: var(--od-gray-500); line-height: 1.5; }
.od-gl-empty-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 575.98px) {
    /* Kártyás nézetben a fejléc rejtett, az Összesen táblázat-sor marad – a ragadás ott is él. */
    .od-cardtable.od-gl-table .od-gl-fold { flex: 0 0 auto; }
    .od-cardtable.od-gl-table .od-gl-act { flex: 0 0 auto; margin-left: auto; }
    /* A karton 56 px-es behúzása szűk ablakban a szélesség hatodát vinné el. */
    .od-cardtable.od-gl-table .od-gl-card { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   ÉVNYITÓ ÉS ÉVZÁRÓ NAPLÓ – a KÖZÖS szerkesztő (od-yj-), a `/design` terv szerint
   (2026‑09‑05, `design/nyito-zaro/`)

   ⚠️ **EGY névtér a KÉT lapnak.** A nyitó és a záró ugyanaz a szerkesztő-szerkezet (fejléc
   egy sorban · egysoros rács-sorok, a szám és a név EGY cellában · Tartozik és Követel két oszlopban (2026‑09‑15)), a záró
   csak egy oszlopot (Ellenszámla) és a szakasz-fejlécet teszi hozzá – ezt a rács `is-closing`
   módosítója adja. Két névtérrel (a korábbi `od-oj-` + `od-cj-`) ugyanaz a szabály két
   példányban élt, és az egyik hangolása a másikról lemaradt volna.

   ⚠️ **A ragadós sáv a KÖZÖS `od-cb-sumbar`** (pénztár/bank · vegyes · ide): a saját
   `is-yearend` csak a bal szegély színét adja (teal = a két lap ikonja), az `is-closed` a
   lezárt év zöldjét. A számok semlegesek; a záró eredménye kap színt (`od-yj-result`).

   ⚠️ **NEM az `od-mx-` rács újrahasznosítása** (18. tanulság): az tíz oszlopos, két
   főkönyvi választóval és a szűk alak konténer-lekérdezésével; ez hét/nyolc oszlopos, EGY
   választóval, és keskeny helyen GÖRGET (a `/konyveles/**` telefonon nem is érhető el).
   Ami közös, az a NYELV, nem a szabály. A névtér foglaltságát MÉRTEM: `od-yj-` → 0 találat,
   negatív kontroll `od-mx-` → 40+.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── A ragadós sáv módosítói ────────────────────────────────────────────────────────── */

.od-cb-sumbar.is-yearend { border-left-color: #0d9488; }
.od-cb-sumbar.is-yearend .od-cb-sumfig-value { color: var(--od-gray-800); }
.od-cb-sumbar.is-yearend.is-closed { border-left-color: var(--od-success); }

/* ⚠️ 2026‑09‑15: VÉKONYABB sáv – CSAK az `is-yearend` módosítóval. Az `od-cb-sumbar` a pénztár/bank és
   a vegyes bizonylat sávja is; ott semmi nem változik. A szám a tipográfiai lépcső `hero`-ja
   (24 px / 700), a függőleges belső tér a ritmus 8 px-e. */
.od-cb-sumbar.is-yearend { padding: 8px 20px; }
.od-cb-sumbar.is-yearend .od-cb-sumfig-label { font-size: 12px; }
.od-cb-sumbar.is-yearend .od-cb-sumfig-value { font-size: 24px; font-weight: 700; }
.od-cb-sumbar.is-yearend .od-cb-sumsep { min-height: 36px; }

/* Az adózott eredmény: az EGYETLEN szám a lapon, aminek az előjele üzenet. A kis felirat
   (nyereség / veszteség) a szám után, kisebb betűvel – a szám marad a hangsúly. */
.od-cb-sumbar.is-yearend .od-yj-result.is-profit { color: var(--od-success); }
.od-cb-sumbar.is-yearend .od-yj-result.is-loss   { color: var(--od-danger); }
.od-yj-result small { font-size: .85rem; font-weight: 600; margin-left: .3rem; }
.od-yj-result.is-profit small { color: var(--od-success-dark); }
.od-yj-result.is-loss small   { color: var(--od-danger); }
.od-yj-result:not(.is-profit):not(.is-loss) small { color: var(--od-gray-400); }

.od-yj-after { font-size: 1.05rem; font-weight: 700; color: var(--od-gray-700); white-space: nowrap; }

/* ⚠️ A CHIP állapotai: zöld = rendben · BOROSTYÁN = még nem kész (a könyvelő gépel; a
   Mentés tiltva, az ok kiírva) · PIROS = hiba (a záróban a generált sorokból ez már a
   főkönyv hibája) · szürke = nincs sor. A pill a sávban 30 px, a szakasz-fejlécben 22 px. */
.od-yj-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.od-yj-chip i { font-size: .85rem; }
.od-yj-chip.is-ok      { background: var(--od-success-xlt); color: var(--od-success-dark); border-color: var(--od-success-line); }
.od-yj-chip.is-pending { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.od-yj-chip.is-bad     { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.od-yj-chip.is-off     { background: var(--od-gray-100); color: var(--od-gray-600); border-color: var(--od-gray-200); }

/* ⚠️ 2026‑09‑15: a ROMBOLÓ művelet (a nyitó Törlése, a záró feloldása) NINCS a sávban – a kártya ALJÁN
   áll, jobbra (docs/ui-ux.md, „Szerkesztő-lapok: RAGADÓS … sáv": a távolság maga a védelem).
   Korábban a sávban, a Mentés mellett ült, csak margóval elválasztva. */
.od-yj-cardfoot {
    display: flex;
    justify-content: flex-end;
    padding: 8px 20px;
    border-top: 1px solid var(--od-gray-100);
}

/* ── A fejléc-kártya: EGY sor (év · dátum · megnevezés · ellenszámla) ───────────────── */

/* ⚠️ 2026‑09‑15: a fejléc-adatok a tételek KÁRTYÁJÁN állnak (`od-yj-fields`), nem külön kártyán –
   külön kártyával az első tételsor ~330 px-nél kezdődött. */
.od-yj-fields {
    padding: 16px 20px;
    border-bottom: 1px solid var(--od-gray-200);
}

.od-yj-head {
    display: grid;
    grid-template-columns: 110px 170px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: end;
}
.od-yj-head.is-closing { grid-template-columns: 110px 170px minmax(0, 1fr) 360px; }
.od-yj-head > div { min-width: 0; }

.od-yj-lbl { display: block; font-size: 12px; font-weight: 500; color: var(--od-gray-500); margin-bottom: 4px; }
/* ⓘ háttér-tudnivaló a felirat mellett (docs/ui-ux.md, „ⓘ háttér-tudnivaló") – a jogviszony lapjának mintája. */
.od-yj-info { margin-left: 4px; color: var(--od-gray-400); cursor: help; line-height: 1; }
.od-yj-lbl span { color: var(--od-gray-400); font-weight: 400; }

/* ⚠️ **NEM beviteli mező, csak úgy NÉZ KI**: a 491 (illetve a 493 · 419 · 492) a számlatükör
   besorolásából jön. A háttér és a lakat mondja meg, hogy itt nincs mit beírni; letiltott
   `<input>`-ként a felhasználó megpróbálná javítani, és nem értené, miért nem lehet. */
.od-yj-counterbox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 31px;   /* = form-control-sm (mérve 31 px asztali nézetben; 576 px alatt a közös szabály 44-re emeli a mezőket) */
    padding: 0 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: var(--od-gray-50);
    font-size: .875rem;
    color: var(--od-gray-800);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
}
.od-yj-counterbox b { font-weight: 700; }
.od-yj-cname { color: var(--od-gray-500); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.od-yj-cstep { color: var(--od-gray-500); font-size: .78rem; }
.od-yj-cdot  { color: var(--od-gray-300); }
.od-yj-counterbox .bi-lock { margin-left: auto; color: var(--od-gray-400); font-size: .8rem; }

/* A kártya LÁBA a mai kék magyarázó doboz helyett: egy halvány sor. A figyelmeztető
   változat (`is-warn`) borostyán, a lezárt évé (`is-closed`) zöld lakattal. */
.od-yj-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--od-gray-500);
    line-height: 1.5;
}
.od-yj-foot > i { flex: 0 0 auto; margin-top: 2px; color: var(--od-gray-400); }
.od-yj-foot b { color: var(--od-gray-700); }
.od-yj-foot.is-closed > i { color: var(--od-success-dark); }
.od-yj-foot.is-warn { color: #92400E; border-top: 0; margin-top: 8px; padding-top: 0; }
.od-yj-foot.is-warn > i { color: var(--od-warning); }
.od-yj-foot.is-warn b { color: #78350F; }

@media (max-width: 991.98px) {
    .od-yj-head, .od-yj-head.is-closing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .od-yj-head, .od-yj-head.is-closing { grid-template-columns: minmax(0, 1fr); }
}

/* ── A tételek kártyája ─────────────────────────────────────────────────────────────── */

.od-yj-card { overflow: hidden; }

.od-yj-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 48px;
    padding: 8px 20px;
}
.od-yj-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.od-yj-title strong { font-size: 15px; }
.od-yj-meta { font-size: 12px; color: var(--od-gray-500); }
.od-yj-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Az „Új sor" ELSŐDLEGES körvonalas gomb – a Bootstrap `btn-outline-primary` a saját
   kékjét hozná, nem a tokent. */
.od-yj-btn-new {
    border: 1px solid var(--od-primary);
    color: var(--od-primary);
    background: var(--od-white);
    font-weight: 600;
}
.od-yj-btn-new:hover { background: var(--od-primary-xlt); color: var(--od-primary-dark); border-color: var(--od-primary-dark); }

/* A gombra írt forrás-címke: HONNAN jön az átemelés (a záróból / a kivonatból). */
.od-yj-srctag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    margin-left: .35rem;
    border-radius: 5px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.od-yj-srctag.is-closing { background: var(--od-success-xlt); color: var(--od-success-dark); border: 1px solid var(--od-success-line); }
.od-yj-srctag.is-ledger  { background: var(--od-gray-100); color: var(--od-gray-600); border: 1px solid var(--od-gray-200); }

/* ⚠️ A görgető-doboz: `position: relative` (a `visually-hidden` és az abszolút elemek
   horgonya), és **HELY a nyitott listának** – a `position: absolute` lista a doboz
   magasságát nem növeli, a kártya alján elvágódna. A `:has()` csak nyitott listánál ad
   alsó teret (állandó paddinggal a kártya alján mindig ott ülne egy üres sáv). */
.od-yj-scroll { position: relative; overflow-x: auto; }
.od-yj-scroll:has(.od-accsel-pop) { padding-bottom: 240px; }

/* ⚠️ **EGY oszlop-sablon** (2026‑09‑15, az „A · egysoros rács" terv): a fejléc, a sor, a csoport- és
   szakasz-sor és az Összesen UGYANABBÓL a változóból él (docs/ui-ux.md, „Tétel-rácsok") – külön
   felsorolva egy oszlop szélesítése négy helyen kellene, és az elmaradt negyedik NÉMÁN elcsúsztatná
   a részösszeget. Nyitó: # · főkönyvi szám és név · Partner · Megjegyzés · Tartozik · Követel ·
   törlés; a záró (`is-closing`) az Ellenszámla oszlopot a Követel után teszi.
   ⚠️ **A `min-width` teszi a görgetést TÉNYLEGES viselkedéssé**: a Partner és a Megjegyzés 150 px
   alá szorulva olvashatatlan. 1056 = 44+320+140+140+40 + 6×8 rés + 2×12 párnázás + 2×150; a záró
   1160 (+96 és egy rés). A tervben 340 / 150 px állt: 20 / 10 px-szel keskenyebben 1280 px-es
   ablakban a záró sem görget. */
.od-yj-grid {
    --od-yj-cols: 44px 320px minmax(150px, 1fr) minmax(150px, 1fr) 140px 140px 40px;
    min-width: 1056px;
}
.od-yj-grid.is-closing {
    --od-yj-cols: 44px 320px minmax(150px, 1fr) minmax(150px, 1fr) 140px 140px 96px 40px;
    min-width: 1160px;
}

.od-yj-ghead,
.od-yj-line,
.od-yj-sec,
.od-yj-gfoot {
    display: grid;
    grid-template-columns: var(--od-yj-cols);
    column-gap: 8px;
    align-items: center;
    padding: 0 12px;
}

.od-yj-ghead {
    background: var(--od-gray-50);
    border-top: 1px solid var(--od-gray-200);
    border-bottom: 1px solid var(--od-gray-200);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--od-gray-500);
    line-height: 32px;
    white-space: nowrap;
}
.od-yj-ghead .n { text-align: right; }
/* A jobbra igazított fejléc-cella a MEZŐ szövegével egy vonalban: a mező 8 px párnázás + 1 px keret. */
.od-yj-ghead .e { text-align: right; padding-right: 9px; }

/* ⚠️ **A sor 36 px, EGY vonalon** (a korábbi 54 / 64 / 80 helyett): 30 px-es mezők, 3 + 2 px tér és az
   1 px-es alsó vonal. */
.od-yj-line { min-height: 36px; padding-top: 3px; padding-bottom: 2px; border-bottom: 1px solid var(--od-gray-100); }
.od-yj-line > * { min-width: 0; }
.od-yj-line:hover { background: var(--od-gray-50); }
.od-yj-line:focus-within { background: #F5F9FE; }

/* A SZÁMÍTOTT sor (pénztár/bank a törzsből) halvány háttérrel; a HIBÁS záró sor pirossal –
   az ok a név HELYÉN (`is-err`), a kapu a service-ben. */
.od-yj-line.is-computed { background: #FCFDFE; }
.od-yj-line.is-invalid  { background: #FEF2F2; }

.od-yj-no { color: var(--od-gray-500); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* ⚠️ **A CELLA a lebegő lista horgonya** (99/b tanulság). Enélkül a legközelebbi pozicionált
   ős a görgető-doboz lenne, és a lista a DOBOZ aljához igazodna. BALRA nyitjuk, a cellánál
   szélesebben: a „5111 – Anyagköltség" 260 px-en még elfér, a lista 340-en olvasható. */
.od-yj-acc { position: relative; }
.od-yj-acc .od-accsel-pop { left: 0; right: auto; min-width: 340px; }

/* ⚠️ **A SZÁM ÉS A NÉV EGY SORBAN, EGY cellában** (2026‑09‑15) – a KÖZÖS `LedgerAccountPicker`
   módosítása NÉLKÜL: a komponens a `Hint`-et a mező UTÁN rendereli, tehát a cella gyökere flex-sor
   lesz. A mező keskeny (a számlaszám legfeljebb 20 karakter, a hosszabb a mezőn belül görget),
   mellette a név „…"-vel, a teljes név a `title`-ben. Korábban a név a mező ALATT állt, és a
   260 px-es oszlopban két sorba törve 54 / 64 / 80 px-es sorokat adott (mérve 2026‑09‑05).
   ⚠️ A picker 12 másik helyen is él – minden szabály az `.od-yj-acc` alatt. A lebegő lista
   (`absolute`) és a háttér-réteg (`fixed`) nem flex-elem, a sort nem tolja szét. */
.od-yj-acc > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* ⚠️ A `min-width: 0` NEM elhagyható – MÉRT hiba (2026‑09‑15): a flex-elem alapból `min-width: auto`,
   és egy `<input>` tartalmi minimuma a `size` alapértéke (~20 karakter) – a 81 px-es flex-alap mellett
   a mező 165 px széles maradt, a névnek alig jutott hely. */
.od-yj-acc .od-accsel-q { flex: 0 0 calc(9ch + 18px); width: auto; min-width: 0; margin-bottom: 0; }
.od-yj-hint {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--od-gray-500);
}
.od-yj-hint.is-err { color: #B91C1C; font-weight: 600; }

/* Nyitott listánál a mező kitölti a cellát (a keresőszónak hely kell), a név elbújik. */
.od-yj-acc.is-open .od-accsel-q { flex: 1 1 auto; }
.od-yj-acc.is-open .od-yj-hint { display: none; }

/* A csak olvasható számla-cella: ugyanaz a sor – a szám vastagon, mellette a név (vagy a hiba). */
.od-yj-accro { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 9px; }
.od-yj-accro b { flex: 0 0 auto; font-size: 13px; font-weight: 700; }
.od-yj-accro span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--od-gray-500); }
.od-yj-accro span.is-err { color: #B91C1C; font-weight: 600; }

/* Csak olvasható szöveg-cellák: egy sor, a többlet ellipszissel (a teljes érték a `title`-ben). */
.od-yj-txt {
    padding-left: 9px;
    font-size: 13px;
    color: var(--od-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-yj-txt.is-empty { color: var(--od-gray-400); }
.od-yj-amtro { text-align: right; font-weight: 600; font-size: 13px; padding-right: 9px; }

/* ⚠️ **NYUGALOMBAN SZÖVEG, egér alatt és fókuszban MEZŐ** (2026‑09‑15): a rács mezői átlátszó kerettel
   és háttérrel; egér alatt a sor mezői szürke keretet, fókuszban a közös kék keretet kapnak. ⚠️ Nem
   csak egér: a billentyűzettel érkező fókusz ugyanazt adja (`:focus`). A 0-2-0 / 0-3-0
   specifikusság az `od-input` (0-1-0) és a Bootstrap `.form-control:focus` (0-2-0) ellen; az
   `AmountInput` korábban az `od-input` 47 px-ét hozta (mérve). */
.od-yj-line .form-control,
.od-yj-line .od-yj-amt {
    height: 30px;
    min-height: 0;
    padding: 0 8px;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
}
.od-yj-line:hover .form-control { border-color: var(--od-gray-300); background: var(--od-white); }
.od-yj-line .form-control:focus {
    border-color: var(--od-primary);
    background: var(--od-white);
    box-shadow: 0 0 0 3px rgba(21, 96, 189, .12);
    outline: none;
}

/* Nyugalomban a partner és a megjegyzés helykitöltője sem látszik – harminc sor „Név vagy
   adószám…" zaja ellen; egér alatt és fókuszban visszajön. A számlaszám „válasszon…"-ja marad:
   az új sor különben üresnek látszana. */
.od-yj-line .od-yj-partner::placeholder,
.od-yj-line .od-yj-notes::placeholder { color: transparent; }
.od-yj-line:hover .od-yj-partner::placeholder,
.od-yj-line:hover .od-yj-notes::placeholder,
.od-yj-line .od-yj-partner:focus::placeholder,
.od-yj-line .od-yj-notes:focus::placeholder { color: var(--od-gray-400); }

.od-yj-amt { text-align: right; }

/* ⚠️ A korábbi kétállású T/K kapcsoló (`od-yj-tk`) 2026‑09‑15 óta NINCS: Tartozik és Követel két
   összeg-oszlop (a felhasználó döntése), a leképezés a KÖZÖS `OpeningJournal.ApplySideAmount`. */

/* A záró sor ellenszámlája chipként – a szakasz adja, nem a felhasználó. */
.od-yj-cnt {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--od-gray-100);
    color: var(--od-gray-600);
    font-size: .75rem;
    font-weight: 700;
}

/* A lakat a törlés helyén – ugyanaz a 30×30-as doboz, mint az `od-action-btn`. */
.od-yj-lock {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    color: var(--od-gray-400);
}

/* ── A csoport- és szakasz-fejlécek ─────────────────────────────────────────────────── */

/* A nyitó két csoportja (számított · kézi): szürke sáv, a jobb szélén a részösszeg. A sor
   kimondja, HONNAN jönnek a sorok és hol javíthatók – a sor maga nem magyaráz. */
.od-yj-sec {
    min-height: 30px;
    background: var(--od-gray-50);
    border-top: 1px solid var(--od-gray-200);
    border-bottom: 1px solid var(--od-gray-200);
    font-size: 12px;
    color: var(--od-gray-600);
}
/* A csoport / szakasz címe a bal NÉGY oszlopon; a részösszeg a Tartozik és a Követel oszlop ALATT. */
.od-yj-seclbl {
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-left: 4px;
    white-space: nowrap;
    overflow: hidden;
}
.od-yj-seclbl > i { color: var(--od-gray-500); }
.od-yj-seclbl strong { color: var(--od-gray-700); }
.od-yj-seclbl > span:not([class]),
.od-yj-secdesc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.od-yj-seclbl .od-yj-chip { margin-left: auto; }
.od-yj-secsum { text-align: right; padding-right: 9px; font-weight: 700; color: var(--od-gray-700); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A záró három szakasza: kék sáv sorszám-jelvénnyel – a MONDAT: mi záródik, mire,
   részösszeg, és egyensúlyoz-e (az ellenszámla-CSOPORT, nem a szakasz maga). */
.od-yj-sec.is-step { min-height: 34px; background: var(--od-primary-xlt); border-color: #DBEAFE; }
.od-yj-sec.is-step strong { font-size: 13px; color: var(--od-primary-dark); }
.od-yj-sec.is-step .od-yj-secsum { color: var(--od-primary-dark); }

/* ⚠️ ÖSSZECSUKÁS (2026‑09‑15, alapból nyitva): a chevron gomb az `aria-expanded`-et SZTRINGKÉNT viszi;
   csukva „N sor · összecsukva", és ha a csukott szakaszban hibás sor van, pirosan „N hibás sor" –
   hibás sor nem bújhat el a tiltott Mentés mögött. */
.od-yj-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--od-primary);
    cursor: pointer;
}
.od-yj-toggle:hover { background: #DBEAFE; }
.od-yj-toggle:focus-visible { outline: 2px solid var(--od-primary); outline-offset: 1px; }
.od-yj-folded,
.od-yj-badrows {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
}
.od-yj-folded  { background: var(--od-white); border: 1px solid #DBEAFE; color: var(--od-primary); }
.od-yj-badrows { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.od-yj-secno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--od-primary);
    color: var(--od-white);
    font-size: .78rem;
    font-weight: 800;
}
.od-yj-sec .od-yj-chip { height: 22px; padding: 0 8px; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.od-yj-sec .od-yj-chip i { font-size: .75rem; }

/* ── Összesen: a Tartozik és a Követel oszlop ALATT, mellette az Eltérés ──────────────────────── */

.od-yj-gfoot {
    min-height: 42px;
    background: var(--od-gray-50);
    border-top: 2px solid var(--od-gray-200);
}
.od-yj-gfoot-lbl {
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-left: 4px;
    font-size: 13px;
    font-weight: 700;
}
.od-yj-gnote { font-size: 12px; font-weight: 400; color: var(--od-gray-500); }
.od-yj-gsum { text-align: right; padding-right: 9px; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Az Eltérés a két összeg MELLETT: zöld = egyensúlyoz · borostyán (nyitó) = még nem kész · piros (záró) = hiba. */
.od-yj-gdiff { font-size: 12px; font-weight: 600; white-space: nowrap; }
.od-yj-gdiff.is-ok  { color: var(--od-success-dark); }
.od-yj-gdiff.is-off { color: #92400E; }
.od-yj-gdiff.is-bad { color: #B91C1C; }

/* ── Üres állapot: a lap legvalószínűbb következő lépése ELSŐDLEGES gombként ─────────── */

.od-yj-empty {
    margin: 12px;
    padding: 26px;
    border: 1px dashed var(--od-gray-300);
    border-radius: 8px;
    text-align: center;
}
.od-yj-empty > i { font-size: 30px; color: var(--od-gray-300); }
.od-yj-empty-title { font-size: .9rem; font-weight: 600; margin-top: 8px; }
.od-yj-empty-note { max-width: 480px; margin: 5px auto 14px; font-size: .75rem; color: var(--od-gray-500); line-height: 1.5; }
.od-yj-empty-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   BESZÁMOLÓ – MÉRLEG ÉS EREDMÉNYKIMUTATÁS (`od-fs-`)

   ⚠️ SAJÁT névtér, nem a kivonat `od-gl-`-je: a beszámoló táblázata NÉGY oszlopos, fix
   sorkészletű, behúzott – a kivonat hangolása itt némán elmozdítaná (18. tanulság). A
   névtér foglaltságát mértem: `od-fs` → 0 találat az app.css-ben és a Components alatt,
   negatív kontrollal `od-gl` → 30+.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ A doboz NEM görget (`overflow: visible`, 2026‑09‑05): a ragadós fejléc és a ragadós összesen
   csak így tapad az ABLAKHOZ – a kivonat mért szabálya. Öt oszlop, nincs `min-width`. */
.od-fs-main { overflow: visible; }
.od-fs-scroll { position: relative; overflow: visible; }

.od-fs-year { min-width: 104px; }

.od-fs-table { font-size: .85rem; }
.od-fs-table > :not(caption) > * > * { padding: .35rem .5rem; }
.od-fs-table thead th {
    position: sticky; top: var(--od-navbar-h); z-index: 2;
    background: var(--od-gray-50);
    box-shadow: inset 0 -1px 0 var(--od-gray-200);
    vertical-align: bottom;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--od-gray-500);
    white-space: nowrap;
}

.od-fs-col { width: 15%; min-width: 150px; }
.od-fs-name { min-width: 0; }
.od-fs-table th.od-fs-src, .od-fs-table td.od-fs-src { width: 110px; text-align: right; white-space: nowrap; }
.od-fs-table tr.od-fs-detail > td { font-weight: 400; }

.od-fs-unit {
    display: block;
    font-size: .66rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--od-gray-500);
}

/* A sorkód halványan a név ELŐTT: a könyvelő a nyomtatvány kódját keresi („A.II.3"),
   nem a hosszú nevet. */
.od-fs-code {
    display: inline-block;
    min-width: 3.4rem;
    margin-right: .35rem;
    font-family: var(--bs-font-monospace);
    font-size: .74rem;
    font-weight: 600;
    color: var(--od-gray-500);
    font-variant-numeric: tabular-nums;
}

/* ⚠️ A TÁBLÁZAT-PREFIX kötelező a Bootstrap `.table > … > *` ellen (0-2-1).
   A szakasz-cím SÖTÉT sáv (ESZKÖZÖK / FORRÁSOK), a 0. szintű számolt sor szürke sáv – a `/design`
   terv (2026‑09‑05); az üres külső csoport halvány, „üres · elrejtve" jelöléssel. */
.od-fs-table tr.od-fs-head > td {
    background: var(--od-gray-700);
    color: var(--od-white);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.od-fs-table tr.od-fs-computed > td { font-weight: 600; }
.od-fs-table tr.od-fs-level0 > td { background: var(--od-gray-200); border-top: 0; font-weight: 800; }
.od-fs-table tr.od-fs-emptygroup > td { color: var(--od-gray-400); font-weight: 700; }
.od-fs-table tr.od-fs-grandtotal > td { background: var(--od-gray-100); border-top: 2px solid var(--od-gray-300); }

/* Az EK eredmény-sorai (A · C · D) kiemelt sávot kapnak; a „D" a jel szerint zöld/piros. */
.od-fs-table tr.od-fs-result > td { background: var(--od-gray-100); }
.od-fs-table tr.od-fs-result.is-profit > td { background: var(--od-success-xlt); border-top: 2px solid var(--od-success-line); }
.od-fs-table tr.od-fs-result.is-loss > td   { background: #FEF2F2; border-top: 2px solid #FECACA; }
.od-fs-table tr.od-fs-result.is-profit > td.od-fs-cell:last-of-type { color: var(--od-success-dark); }

.od-fs-table tr.od-fs-memo > td {
    color: var(--od-gray-600);
    font-style: italic;
    font-size: .8rem;
}

/* ⚠️ **A SZÁM MINDEN sorban JOBBRA zárt, és ez MÉRT hiba javítása** (a felhasználó jelezte:
   „az összegző balra kizártak, az alatta lévők jobbra – megtévesztő"). Az ok: a részsor
   cellájában egy FLEX-doboz (`od-fs-cellwrap`, `justify-content: flex-end`) húzta jobbra a
   számot, a SZÁMOLT sor viszont csak egy csupasz `span`-t tartalmaz – a közös `od-num`
   osztály pedig KIZÁRÓLAG `tabular-nums`-ot ad, igazítást NEM. Az igazítás ezért a CELLÁRA
   kerül (fejlécre is), nem a benne álló dobozra: így a sor fajtájától FÜGGETLENÜL egy
   vonalba esik minden szám.

   ⚠️ TÁBLÁZAT-PREFIX (0-2-1): a Bootstrap `.table > :not(caption) > * > *` szabálya ma nem ír
   `text-align`-t, de a saját `.od-fs-table > :not(caption) > * > *` igen ír a cellákra
   (`padding`) – a csupasz osztálynévvel a következő ilyen kiegészítés némán alulmaradna. */
.od-fs-table th.od-fs-col,
.od-fs-table td.od-fs-cell { text-align: right; }

.od-fs-table td.od-fs-cell { font-variant-numeric: tabular-nums; }

/* A cella maga a gomb: a teljes cellára kattintva nyílik a szerkesztő. A körvonal csak
   fókuszban és egérrel látszik – nyugalmi állapotban a lap egy nyomtatványnak néz ki. */
.od-fs-cellwrap {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
    width: 100%;
}

.od-fs-cellbtn {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .15rem .5rem;
    font: inherit;
    color: inherit;
    cursor: text;
    text-align: right;
    min-width: 5rem;
}
.od-fs-cellbtn:hover,
.od-fs-cellbtn:focus-visible {
    border-color: var(--od-gray-300);
    background: var(--od-gray-50);
    outline: none;
}

/* ⚠️ A felülírt cella JELÖLT – a terv szerint SÁRGA CHIP a számon, ceruzával (2026‑09‑05; korábban a
   teljes cella volt sárga, bal szegéllyel). A jelölés a felülírás lényege (3a döntés): jelöletlenül
   a könyvelő nem tudná, melyik szám jött a főkönyvből és melyik tőle. A táblázat-prefix itt is kell. */
.od-fs-table td.od-fs-ovr { background: transparent; box-shadow: none; }
.od-fs-table td.od-fs-ovr .od-fs-cellbtn { background: #FEF3C7; border-color: #FDE68A; color: #78350F; font-weight: 600; }
.od-fs-ovrpen { font-size: .66rem; color: #B45309; }
.od-fs-table tr.od-fs-open > td { background: var(--od-primary-xlt); border-bottom: 0; }
.od-fs-table td.od-fs-editing { background: var(--od-primary-xlt); }

.od-fs-reset {
    background: transparent;
    border: 0;
    padding: 0 .15rem;
    color: var(--od-gray-500);
    line-height: 1;
    cursor: pointer;
}
.od-fs-reset:hover { color: var(--od-danger); }
.od-fs-reset:disabled { opacity: .4; cursor: default; }

.od-fs-editor {
    display: flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
}
/* ⚠️ Az `AmountInput` az `od-input` párnázását hozza (mérve 47 px a beszámolón is, 2026‑09‑05), a sor
   31 px-es – a nyitó `od-yj-amt` szabályának mása, 0-2-0 az `od-input` 0-1-0-ja ellen. */
.od-fs-editor .od-fs-input {
    max-width: 9.5rem;
    text-align: right;
    height: 31px;
    min-height: 0;
    padding: .25rem .5rem;
    font-size: .875rem;
    border-width: 1px;
    border-radius: 6px;
}

/* A D.VII jelölése: „az eredménykimutatásból" címke (a régi `od-fs-auto` ikon helyett). */
.od-fs-autotag { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-fs-eklink { font-size: .74rem; text-decoration: none; }

.od-fs-company-mark { font-size: .75rem; }

/* ⚠️ A `od-fs-badge-*`, `od-fs-issuebox` és `od-fs-issues > summary` 2026‑09‑05-én MEGSZŰNT: az
   egyezőség az állapot-sávra (`od-gl-chip`), a kimaradt számlák a sáv alatti dobozba (`od-gl-issuesbox`)
   kerültek – a kivonat ráncfelvarrásával KÖZÖS család. */
.od-fs-issues-wrap { max-height: 260px; overflow: auto; margin-top: 0; background: #fff; }
.od-fs-issues-table { font-size: .8rem; }
.od-fs-issues-table thead th { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #92400E; }
.od-fs-issuesfoot { padding: 8px 12px; font-size: .78rem; color: #92400E; border-top: 1px solid #FDE68A; }

/* ═══ A `/design` terv szerinti ráncfelvarrás (2026‑09‑05) – ami a családon (od-gl-st*, od-gl-toolbar,
   od-gl-kbtn, od-gl-issuesbox, od-gl-empty) túl a beszámoló SAJÁTJA ═══ */

/* Az eredmény az állapot-sávon és a fülön: zöld nyereség, piros veszteség. */
.od-gl-stcard .od-fs-net.is-profit { color: var(--od-success); }
.od-gl-stcard .od-fs-net.is-loss   { color: var(--od-danger); }
.od-fs-net small { font-size: .85rem; font-weight: 600; margin-left: .3rem; }
.od-fs-net.is-profit small { color: var(--od-success-dark); }
.od-fs-net.is-loss small   { color: var(--od-danger); }
.od-fs-resultrow { display: flex; align-items: center; gap: 14px; }
.od-fs-resultnote { margin-left: auto; text-align: right; font-size: .74rem; color: var(--od-gray-400); line-height: 1.35; }
.od-fs-ovrtag { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-fs-openingnote { font-size: .78rem; color: #92400E; }

/* A kétállású választók: a kivonat T/K kapcsolójának mintája, szöveges gombokkal.
   ⚠️ KÖZÖS névtér (`od-seg`), nem a beszámolóé (`od-fs-seg` volt 2026‑09‑12-ig): az irányítópult
   diagram-nézetváltója ugyanez a vezérlő. Lemásolva a két példány az első módosításnál széttartana,
   és ugyanaz a kapcsoló két lapon máshogy nézne ki. */
.od-seg { display: inline-flex; height: 31px; border: 1px solid var(--od-gray-300); border-radius: 8px; overflow: hidden; background: var(--od-white); }
.od-seg button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; border: 0; background: transparent;
    font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--od-gray-500); cursor: pointer; white-space: nowrap;
}
.od-seg button + button { border-left: 1px solid var(--od-gray-200); }
.od-seg button.is-on { background: var(--od-primary); color: var(--od-white); }
.od-seg button:not(.is-on):hover { background: var(--od-gray-100); }
/* A fülek a saját számukkal. */
.od-fs-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 10px 16px 0; background: var(--od-gray-50); border-bottom: 1px solid var(--od-gray-200); }
.od-fs-tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin-bottom: -1px;
    border: 1px solid transparent; border-radius: 10px 10px 0 0; background: transparent;
    font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--od-gray-500); cursor: pointer;
}
.od-fs-tab:hover { color: var(--od-gray-800); }
.od-fs-tab.is-on { background: var(--od-white); border-color: var(--od-gray-200); border-bottom-color: var(--od-white); color: var(--od-gray-800); font-weight: 700; }
.od-fs-tab.is-on i { color: var(--od-primary); }
.od-fs-tabchip { height: 22px; font-size: .72rem; padding: 0 8px; }
.od-fs-tabnet { font-size: .78rem; font-weight: 700; color: var(--od-gray-500); }
.od-fs-tabnet.is-profit { color: var(--od-success-dark); }
.od-fs-tabnet.is-loss   { color: var(--od-danger); }
.od-fs-tabhint { margin-left: auto; padding-bottom: 8px; font-size: .78rem; color: var(--od-gray-400); }

/* Ragadós összesen – a fejléc ragadóssága a `thead th` szabályában (fent), a doboz nem görget. */
.od-fs-table tfoot tr.od-fs-total > td {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--od-gray-100); border-top: 2px solid var(--od-gray-300); font-weight: 800; min-height: 44px;
}
.od-fs-totallbl span { font-weight: 400; color: var(--od-gray-500); font-size: .8rem; }
.od-fs-totalpair { display: inline-flex; flex-direction: column; align-items: flex-end; }
.od-fs-totalpair small { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--od-gray-400); }
.od-fs-table td.od-fs-cell.is-profit { color: var(--od-success-dark); }
.od-fs-table td.od-fs-cell.is-loss   { color: var(--od-danger); }

/* A szerkesztő ✓ ✕ gombjai (a sor- és cella-állapotok szabályai fent, a cella-gomb mellett). */
.od-fs-editbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--od-gray-300); background: var(--od-white); color: var(--od-gray-500); cursor: pointer;
}
.od-fs-editbtn.is-save { background: var(--od-primary); border-color: var(--od-primary); color: var(--od-white); }
.od-fs-editbtn:disabled { opacity: .5; cursor: default; }

/* A FORRÁS-panel: a nyitott sorhoz kötve kék vonalakkal, 58 px behúzással (a kivonat kartonjának mintája). */
.od-fs-table tr.od-fs-srcrow > td { background: var(--od-gray-50); border-top: 1px solid #DBEAFE; border-bottom: 2px solid #DBEAFE; }
.od-fs-srcpanel { padding: 10px 16px 12px 58px; }
.od-fs-srchead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: .8rem; color: var(--od-gray-600); }
.od-fs-srchead strong { color: var(--od-gray-700); }
.od-fs-srchead a { font-size: .78rem; white-space: nowrap; }
.od-fs-srcbox { background: var(--od-white); border: 1px solid var(--od-gray-200); border-radius: 8px; overflow: hidden; }
.od-fs-srcg { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px 150px 150px 100px; column-gap: 10px; align-items: center; padding: 0 12px; font-size: .78rem; }
.od-fs-srcg .e { text-align: right; }
.od-fs-srcghead { background: var(--od-gray-50); border-bottom: 1px solid var(--od-gray-200); font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--od-gray-500); line-height: 28px; }
.od-fs-srcline { min-height: 30px; border-bottom: 1px solid var(--od-gray-100); }
.od-fs-srcline.is-inherited { color: var(--od-gray-500); }
.od-fs-srcline.is-inherited .od-gl-src { font-style: italic; }
.od-fs-srcline .is-plus  { color: var(--od-success-dark); }
.od-fs-srcline .is-minus { color: #B91C1C; }
.od-fs-srcname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-fs-srclink { font-size: .74rem; }
.od-fs-srcfoot { min-height: 32px; background: var(--od-gray-50); border-top: 2px solid var(--od-gray-200); font-weight: 700; }
.od-fs-srcfootlbl { grid-column: 1 / 3; }
.od-fs-srceq { color: var(--od-gray-500); font-weight: 600; }

/* Ugyanaz a szabály a diagnosztika egyenleg-oszlopára: ott is csupasz `od-num` áll, tehát
   igazítás nélkül a szám balra esne – a fő táblázattal együtt javítva. */
.od-fs-issues-table th.od-num,
.od-fs-issues-table td.od-num { text-align: right; }

/* ⚠️ Az évzáró napló saját `od-cj-` névtere 2026‑09‑05-én MEGSZŰNT: a lap a nyitóval közös
   `od-yj-` szerkesztőre épült át (lásd fent), a rács `is-closing` módosítójával. */

/* ⚠️ A kivonat „Záróval együtt" kapcsolója 2026‑09‑05 óta az ÁLLAPOT-SÁV év-kártyáján áll, nem a
   szűrősávban – a szabálya a kivonat blokkjában (`.od-gl-stcard .od-gl-closing-switch`). */

@media (max-width: 767.98px) {
    .od-fs-col { min-width: 110px; }
    .od-fs-code { display: block; min-width: 0; margin: 0; }
}

/* ── Számlatükör-fül: beszámoló-sor leképezés (`od-coa-map`) ─────────────────────
   A számlatükör saját `od-coa-` névterébe tartozik, nem a beszámoló `od-fs-`-ébe: a
   fül a Vállalkozás adatlapján él, és a beszámoló táblázatának hangolása itt nem
   mozdíthat el semmit. */
.od-coa-map { border-top: 1px dashed var(--od-gray-300); padding-top: .75rem; margin-top: .25rem; }
.od-coa-map-sec { width: 8.5rem; flex: 0 0 auto; }
.od-coa-map-row { flex: 1 1 12rem; min-width: 12rem; }
.od-coa-map-sign { width: 3.6rem; flex: 0 0 auto; }

/* A táblázat cellája: kompakt, tabuláris; az ÖRÖKÖLT halványan és dőlten – a saját
   beállítás és az örökölt között a szemnek EGY pillantással különbséget kell tennie,
   mert csak a saját íródik a mentéskor. */
.od-coa-mapcell {
    font-family: var(--bs-font-monospace);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--od-gray-700);
}
.od-coa-mapcell.od-coa-map-inherited { color: var(--od-gray-500); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   IRODA MUNKATÁRSAI (`od-staff-`) – az irodavezetői cím jelvénye.

   ⚠️ Az irodavezető jelvénye NEM a semleges `text-bg-light`: a lap egyetlen kérdése az,
   KI a vezető, és egy azonos színű lista ezt épp elrejtené. A zöld a „megerősített
   állapot" színe a projektben (a beszámoló egyezőség-jelvénye is az).
   ═══════════════════════════════════════════════════════════════════════════ */
.od-staff-manager {
    background: var(--od-success-xlt);
    color: var(--od-success);
    border: 1px solid var(--od-success);
    font-weight: 600;
}

/* ── A havi számla FIZETÉSI HATÁRIDEJE (Számlázás fül) ────────────────────────
   Két szabály közül lehet választani, ezért a három mező egy KERETES blokkba
   került: enélkül a mód-választó és a hozzá tartozó mezők ugyanolyan súlyúak
   lennének, mint a fölöttük álló fizetési mód, és nem látszana, hogy összetartoznak. */
.od-due-block {
    border: 1px solid var(--od-gray-200);
    border-radius: var(--od-radius);
    background: var(--od-gray-50);
    padding: 14px 16px 16px;
}

.od-due-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .75rem;
}

.od-due-modes {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* A választó CHIP, nem legördülő: két lehetőség van, és a chip mindkettőt egyszerre
   mutatja – a legördülőben a nem választott mód létezéséről sem tudna a felhasználó. */
.od-due-mode {
    border: 1px solid var(--od-gray-300);
    border-radius: 999px;
    background: var(--od-white);
    color: var(--od-gray-700);
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .8rem;
    line-height: 1.2;
    cursor: pointer;
}

.od-due-mode:hover { border-color: var(--od-primary); color: var(--od-primary); }

.od-due-mode.is-on {
    background: var(--od-primary);
    border-color: var(--od-primary);
    color: var(--od-white);
}

/* A kiszámolt dátum – NEM beviteli mező, tehát nem is úgy néz ki: a keret nélküli,
   kiemelt szám mondja meg, hogy ez eredmény, nem valami, amit át lehet írni. */
.od-due-preview {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 .25rem;
    font-weight: 700;
    color: var(--od-primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALKALMAZOTTI TÖRZS (`od-er-`) – a jóváhagyott /design terv, 2026-09-09.

   ⚠️ SAJÁT névtér, de az ÁLLAPOT-KÁRTYÁKAT és a CHIPEKET a főkönyvi kivonat
   családjától kölcsönzi (`od-gl-stcard`, `od-gl-tag is-ok/is-warn/is-off`): a
   „rendben / figyelem / lezárt" jelentés a programban EGY vizuális nyelv – két
   külön készlettel a könyvelőnek két szótárat kellene fejben tartania. Ugyanaz a
   döntés, mint a cég adatlapjának állapot-sávjánál.
   ═══════════════════════════════════════════════════════════════════════════ */

/* LILA: a foglalkoztatási TÍPUS jelölése – nem állapot-értékelés. A kék már a
   „kiemelt/alapértelmezett" szerepé, a zöld az „rendben"-é; a típusnak saját hang
   kell, különben a szem állapotnak olvasná. */
.od-gl-chip.is-violet, .od-gl-tag.is-violet {
    background: #F5F3FF;
    color: #6D28D9;
    border-color: #DDD6FE;
}

/* ⚠️ TÁBLÁZAT-PREFIX kell a Bootstrap `.table > :not(caption) > * > *` ellen –
   enélkül a sor háttere némán elveszne (18. tanulság). */
.od-er-table > tbody > tr.is-past > * {
    background: var(--od-gray-50);
    color: var(--od-gray-500);
}

.od-er-table > tbody > tr.is-expiring > * {
    background: #FFFDF5;
}

/* „ugyanaz az ember, másik jogviszony" – a NÉV alatt, halkan. Enélkül két sor két
   embernek látszana. */
.od-er-multi {
    font-size: .74rem;
    font-weight: 600;
    color: #6D28D9;
}

/* „nem értelmezett" – szemben a „nincs kitöltve"-vel. A kettő MÁS: az egyik szabály,
   a másik hiány, és a könyvelőnek tudnia kell, melyikről van szó. */
.od-er-na {
    color: var(--od-gray-400);
    font-style: italic;
}

/* ⚠️ A fülsáv eddig LINKEKBŐL állt (a cég adatlapja statikus SSR, ott a fül egy `<a>`).
   Az alkalmazotti törzs személy-lapja viszont interaktív, ott a fül `<button>` – az pedig
   NEM örökli a link-megjelenést: a böngésző alapértelmezett gomb-háttere és -kerete
   átütne a sávon. Ugyanaz a javítás, mint az `.od-submenu-toggle`-nél. */
button.od-sheet-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
}

button.od-sheet-tab.is-active {
    border-bottom-color: var(--od-primary);
}

/* ⚠️ TÁBLÁZAT-PREFIX a Bootstrap `.table > :not(caption) > * > *` ellen (18. tanulság). */
.od-er-table > tbody > tr.is-bad > * {
    background: #FFFAFA;
}

/* Szakaszcím az alkalmazotti törzs hosszú űrlapjain. A T1041 mezőkészlete tizenöt mező –
   csoportok nélkül a szem elveszne benne, egy külön kártya viszont széttördelné a mentést. */
.od-er-sect {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-600);
    padding-bottom: .35rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--od-gray-200);
}

/* ── ALKALMAZOTTI TÖRZS – összegző sáv, eszközsor, lap (2026-09-14, a jóváhagyott terv A iránya) ──
   ⚠️ A chipek, a kereső és a táblázat a Foglalkoztatottak `od-ie-` osztályai – egy vizuális nyelv;
   itt csak az kap saját osztályt, ami valóban más. */

/* Összegző sáv: a három magas kártya helyett EGY kártya, négy cella. */
.od-er-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.od-er-sum-cell { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .875rem 1.25rem; }
.od-er-sum-cell + .od-er-sum-cell { border-left: 1px solid var(--od-gray-200); }
.od-er-sum-lbl { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; color: var(--od-gray-500); }
.od-er-sum-row { display: flex; align-items: baseline; gap: .625rem; min-width: 0; }
.od-er-sum-val { flex: none; font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: var(--od-gray-800); white-space: nowrap; }
/* ⚠️ TÖRDEL, nem csonkul: a terv felmérése szerint 1440 px-en a típus-bontás levágódott volna. */
.od-er-sum-note { min-width: 0; font-size: .75rem; line-height: 1.4; color: var(--od-gray-500); overflow-wrap: anywhere; }

/* Eszközsor: az első sor a kereső és a szűrők, a második a chipek. */
.od-er-tb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--od-gray-200); }
.od-er-tb:first-child { border-bottom-color: var(--od-gray-100); }

/* A típus-legördülő: a felirat a dobozon BELÜL, hogy a sáv egy sorba férjen. */
.od-er-dd { position: relative; display: inline-flex; align-items: center; height: 36px; margin: 0; border: 1px solid var(--od-gray-300); border-radius: 8px; background: var(--od-white); }
.od-er-dd:focus-within { border-color: var(--od-primary); box-shadow: 0 0 0 3px rgba(21, 96, 189, .12); }
.od-er-dd-k { padding-left: .75rem; font-size: .8125rem; font-weight: 500; color: var(--od-gray-500); white-space: nowrap; }
.od-er-dd-sel {
    appearance: none; -webkit-appearance: none; height: 34px; max-width: 18rem; padding: 0 1.9rem 0 .375rem;
    border: 0; background: transparent; outline: none; cursor: pointer; text-overflow: ellipsis;
    font-family: inherit; font-size: .8125rem; font-weight: 600; color: var(--od-gray-800);
}
.od-er-dd-chev { position: absolute; right: .625rem; top: 50%; transform: translateY(-50%); font-size: .7rem; color: var(--od-gray-500); pointer-events: none; }
.od-er-range { display: inline-flex; align-items: center; gap: .5rem; }
.od-er-range-k { font-size: .75rem; font-weight: 600; color: var(--od-gray-500); white-space: nowrap; }
.od-er-clear {
    display: inline-flex; align-items: center; gap: .375rem; height: 32px; padding: 0 .625rem; border: 0; border-radius: 6px;
    background: transparent; font-family: inherit; font-size: .8125rem; font-weight: 600; color: var(--od-primary); cursor: pointer;
}
.od-er-clear:hover { background: var(--od-primary-xlt); }
.od-er-vsep { width: 1px; height: 22px; margin: 0 .25rem; background: var(--od-gray-200); }
.od-er-tb-lbl { font-size: .75rem; font-weight: 600; color: var(--od-gray-500); white-space: nowrap; }
.od-er-count { margin-left: auto; }

/* „Figyelmet kér" kapcsolók: bekapcsolva BOROSTYÁN, nem kék – teendőről szólnak, nem nézetről. */
.od-ie-chip.od-er-flag .od-er-flag-ic { color: #D97706; }
.od-ie-chip.od-er-flag.is-on { background: #FFFBEB; border-color: #D97706; color: #92400E; }
.od-ie-chip.od-er-flag.is-on .od-ie-chip-n { color: #92400E; }

/* A táblázat cellái. ⚠️ A HIÁNY ikonnal is jelöl, nem csak színnel (színtévesztő). */
.od-er-name { font-weight: 600; }
.od-er-amt { font-weight: 600; color: var(--od-gray-800); white-space: nowrap; }
.od-er-miss { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: #92400E; white-space: nowrap; }
.od-er-miss .bi { color: #D97706; }
.od-er-stsub { display: flex; margin-top: 3px; }

/* ⚠️ Asztalon a tábla ne a leghosszabb FEOR-névhez igazodjon: automatikus elrendezésben a 22rem-es
   FEOR-név 384 px-et vitt el, a Név 100, a Szerződés 131 px-re szorult, és MÉRVE két sor 97 px magas
   lett (a név és a dátumpár is két sorba tört). A teljes FEOR-név a `title`-ben marad.
   ⚠️ 12rem, nem 16: 16rem mellett a nem törő dátumpárral 1280 px-es tartalomszélességen a tábla MÉRVE
   23 px-szel túlnyúlt a dobozán. */
@media (min-width: 576px) {
    .od-er-table .od-ie-ell { max-width: 12rem; }
    .od-er-table .od-er-name,
    .od-er-table .od-er-multi,
    .od-er-table > tbody > tr > td[data-label="Szerződés"] { white-space: nowrap; }
}

/* Láb: darabszám balra, lapozó és oldalméret jobbra. */
.od-er-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .5rem 1rem; border-top: 1px solid var(--od-gray-200); font-size: .8rem; color: var(--od-gray-500); }
.od-er-foot-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

/* Üres vállalkozás: két kiinduló út. */
.od-er-first { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3.5rem 1.5rem; text-align: center; }
.od-er-first-ic { width: 56px; height: 56px; margin-bottom: .25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F5F3FF; color: #7C3AED; font-size: 1.5rem; }
.od-er-first h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--od-gray-800); }
.od-er-first p { max-width: 32.5rem; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--od-gray-500); }
.od-er-first-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
.od-er-first-meta { display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: .75rem; color: var(--od-gray-500); }

/* Az Új dolgozó ablaka. */
.od-er-modal .od-modal-body { color: var(--od-gray-800); }
.od-er-modal-hint { display: flex; align-items: flex-start; gap: .375rem; margin-top: 1rem; font-size: .75rem; line-height: 1.5; color: var(--od-gray-600); }

@media (max-width: 1199.98px) {
    .od-er-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .od-er-sum-cell:nth-child(3) { border-left: 0; }
    .od-er-sum-cell:nth-child(n+3) { border-top: 1px solid var(--od-gray-200); }
}

/* Telefonon: a sáv egy oszlop, az eszközsor elemei egymás alá, a chipsor vízszintesen görgethető,
   44 px-es célpontok. ⚠️ `nowrap` az oszlopba fordított soron: törő oszlop-flexnél a legszélesebb
   elem (a chipsor) húzná szét a kártyát – a Foglalkoztatottak lapon MÉRVE 46 px túlcsordulás lett belőle. */
@media (max-width: 575.98px) {
    .od-er-sum { grid-template-columns: minmax(0, 1fr); }
    .od-er-sum-cell + .od-er-sum-cell { border-left: 0; border-top: 1px solid var(--od-gray-200); }
    .od-er-tb { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .od-er-tb .od-ie-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .od-er-tb .od-ie-chip { flex: none; height: 44px; }
    .od-er-vsep { display: none; }
    .od-er-count { margin-left: 0; }
    .od-er-dd { height: 44px; }
    .od-er-dd-sel { flex: 1 1 0; min-width: 0; max-width: none; height: 42px; font-size: 1rem; }
    .od-er-tb .od-inv-filterpanel > .od-er-clear { align-self: flex-start; height: 44px; }
    .od-er-go { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    /* ⚠️ Kártyán a cella flex-sor (felirat | tartalom): a tartalom zsugorodhasson, és a hosszú típuscímke
       („Nem önálló tevékenységből származó jövedelem", 292 px) TÖRDELJEN – egy sorban MÉRVE 85 px-es
       lap-túlcsordulást okozott. CSAK ezen a táblán: a közös `od-cardtable` szabálya máshol már mért. */
    .od-er-table > tbody > tr > td[data-label] > div { min-width: 0; }
    .od-er-table .od-gl-tag { white-space: normal; }
    .od-er-foot, .od-er-foot-pager { justify-content: center; }
    .od-er-foot .od-pager-nav, .od-er-foot .od-pager-num { min-width: 44px; min-height: 44px; }
}

/* ── EGYEZTETÉS A NAV-ADATTAL – pillanatkép-sáv, mezőnkénti összevetés (2026-09-14, a jóváhagyott terv A iránya) ──
   ⚠️ A chipek, a kereső, a fejléc és a tábla a Foglalkoztatottak `od-ie-` osztályai, a sor-háttér az `od-er-table`
   szabálya; saját (`od-rc-`) osztályt csak a pillanatkép-sáv és az összevetett cella kapott. */
/* ⚠️ `flex-direction: row` KELL: a Bootstrap `.card` alapból OSZLOP-flex, és nélküle a sáv elemei egymás alá kerültek –
   MÉRVE 174 px magas lett egy sor helyett. */
.od-rc-ctx { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.od-rc-ctx-lbl { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; color: var(--od-gray-500); }
.od-rc-ctx-val { font-size: .875rem; font-weight: 600; color: var(--od-gray-800); }
.od-rc-ctx-go { margin-left: auto; }
.od-rc-ctx .od-gl-tag .bi { margin-right: .25rem; }

/* A NAV-nál üres pillanatkép – feltételes, egysoros jelzés a kártya tetején. */
.od-rc-flag { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid #FDE68A; background: #FFFBEB; color: #92400E; font-size: .82rem; line-height: 1.45; border-radius: var(--od-radius-lg) var(--od-radius-lg) 0 0; }

/* A két chip-pötty, ami a Foglalkoztatottak lapon nem kellett. ⚠️ A színek az állapot-címkékéi (is-bad, is-violet). */
.od-ie-dot.od-rc-dot-bad { background: #DC2626; }
.od-ie-dot.od-rc-dot-missing { background: #7C3AED; }

/* Név alatt: a párosítás módja. ⚠️ Ikon IS jelöl, nem csak a szín (színtévesztő). */
.od-rc-navname { font-weight: 600; color: var(--od-gray-800); }
.od-rc-by { display: flex; align-items: center; gap: .3rem; margin-top: 3px; font-size: .75rem; color: var(--od-gray-500); white-space: nowrap; }
.od-rc-by.is-sure .bi { color: var(--od-success); }
.od-rc-by.is-guess { color: #92400E; }
.od-rc-by.is-guess .bi { color: #D97706; }

/* Az összevetett cella: egyezésnél egy érték, eltérésnél két sor „törzs" / „NAV" jelöléssel. */
.od-rc-cmp { display: flex; flex-direction: column; gap: 4px; }
.od-rc-line { display: flex; align-items: center; gap: .375rem; white-space: nowrap; }
.od-rc-side {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 18px; padding: 0 5px;
    border-radius: 4px; background: var(--od-gray-100); color: var(--od-gray-600); font-size: .66rem; font-weight: 700; letter-spacing: .02em;
}
.od-rc-side.is-nav { background: var(--od-primary-xlt); color: var(--od-primary-dark); }
.od-rc-v.font-monospace { font-size: .8rem; }
.od-rc-v.is-diff { padding: 0 5px; border-radius: 4px; background: #FFFBEB; box-shadow: inset 0 0 0 1px #FDE68A; color: #92400E; font-weight: 600; }
.od-rc-action { white-space: nowrap; }

/* Láb: a párosítás jelmagyarázata + a teendők száma. */
.od-rc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1rem; border-top: 1px solid var(--od-gray-200); background: var(--od-gray-50); border-radius: 0 0 var(--od-radius-lg) var(--od-radius-lg); font-size: .78rem; color: var(--od-gray-500); }
.od-rc-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.od-rc-legend > span { display: inline-flex; align-items: center; gap: .3rem; }
.od-rc-legend .is-sure { color: var(--od-success); }
.od-rc-legend .is-guess { color: #D97706; }

@media (max-width: 575.98px) {
    .od-rc-ctx { align-items: flex-start; }
    .od-rc-ctx-go { margin-left: 0; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .od-rc-table > tbody > tr > td[data-label] > div { min-width: 0; }
    .od-rc-action { min-height: 44px; display: inline-flex; align-items: center; }
    .od-rc-foot { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A DOLGOZÓ ALAPADATAI (`od-pb-` = payroll basics) – a jóváhagyott `/design`
   terv, 2026‑09‑09.

   ⚠️ **A FELIRAT A MEZŐ BAL OLDALÁN áll, nem fölötte.** Ez a lap egyetlen
   legfontosabb döntése: 17 mező van, és a felirat fölé írva minden sor ~20
   px-szel magasabb, a szem pedig kétszer annyit ugrik (felirat-fölött-mező,
   felirat-fölött-mező). Bal oldali felirattal a feliratok EGY oszlopban
   futnak, a mezők egy másikban – így a lap ~620 px, a korábbi ~880 helyett,
   és kisebb monitoron sincs görgetés.

   ⚠️ **KÉT HASÁB, DE NEM RÁCCSAL.** A hasábok külön `div`-ek, mert a
   TAB-SORREND a DOM-sorrend: egy kéthasábos CSS-rácsban a fókusz SORONKÉNT
   ugrálna keresztbe a két hasáb között (név → azonosító → név → azonosító),
   holott a kitöltés oszlop-irányú. Ezt a `display: grid`-es első változat
   némán elrontotta volna – a felület ugyanúgy néz ki, a billentyűzet viszont
   használhatatlan lenne.

   ⚠️ **MEZŐ-MAGYARÁZAT NINCS.** A könyvelőnek a „Tíz számjegy" nem információ.
   Egyetlen kérdőjel maradt, az EU adóazonosítón (`od-pb-q`): ott a „nincs
   formátum-ellenőrzés, mert tagállamonként más" tényleg nem következtethető ki.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A két hasáb. ⚠️ `align-items: flex-start`: enélkül a rövidebb hasáb mezői
   szétnyúlnának, hogy kitöltsék a magasabb hasáb magasságát. */
.od-pb-cols {
    display: flex;
    align-items: flex-start;
    gap: 2.1rem;
}

.od-pb-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.od-pb-grp { display: flex; flex-direction: column; gap: .3rem; }

/* Csoport-fejléc. ⚠️ A SZÁMOZÁS megmarad: a könyvelő telefonon diktálva is meg
   tudja nevezni, hol áll („a hármas csoportban"). Alacsonyabb, mint az
   `od-er-sect`, mert itt öt csoport van egy lapon, nem kettő. */
.od-pb-sect {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 1.4rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--od-gray-200);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--od-gray-600);
}

.od-pb-sect-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 4px;
    background: var(--od-primary-xlt);
    color: var(--od-primary);
    font-size: .62rem;
    font-weight: 800;
}

.od-pb-rows { display: flex; flex-direction: column; gap: .3rem; }

/* A sor: fix feliratoszlop + a mező. ⚠️ A 7.5rem MÉRT érték, nem kerekítés: a
   leghosszabb felirat itt a „Születési ország", és ennél szűkebb oszlopban
   kettőbe törne – a törés pedig pont az egyoszlopos olvasást vinné el. */
.od-pb-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
}

.od-pb-lb {
    font-size: .78rem;
    font-weight: 500;
    color: var(--od-gray-600);
    line-height: 1.2;
    margin: 0;
}

.od-pb-fw { display: flex; align-items: center; gap: .35rem; min-width: 0; }

/* ⚠️ A mező magassága 30 px – a Bootstrap alap ~38. A `form-control`-t NEM
   írjuk át globálisan: ez a sűrűség ennek a lapnak a döntése, és egy globális
   átméretezés a program MINDEN űrlapját elmozdítaná. */
.od-pb-fw .form-control,
.od-pb-fw .form-select {
    height: 30px;
    min-height: 30px;
    padding: 0 .55rem;
    font-size: .85rem;
    border-radius: 6px;
    border-color: var(--od-gray-300);
}

.od-pb-fw .form-control:hover,
.od-pb-fw .form-select:hover { border-color: var(--od-gray-400); }

/* A fókuszgyűrű a program MEGLÉVŐ mintája (`.od-tk-quiet .form-control:focus`).
   ⚠️ Ez itt nem dísz, hanem a billentyűzetes kitöltés egyetlen visszajelzése:
   enélkül tabolás közben nem látszik, hol állunk. */
.od-pb-fw .form-control:focus,
.od-pb-fw .form-select:focus {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(21, 96, 189, .12);
    outline: none;
}

.od-pb-fw .form-control:disabled,
.od-pb-fw .form-select:disabled {
    background: var(--od-gray-100);
    color: var(--od-gray-400);
    border-color: var(--od-gray-200);
}

.od-pb-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Kérdőjel-ikon. ⚠️ NATÍV `title` tooltip, nem saját buborék: a sajátunk
   billentyűzetről nem jönne fel, és ezen a lapon épp a billentyűzet a lényeg.
   `type="button"` KELL – enélkül a gomb elküldené az űrlapot. */
.od-pb-q {
    flex: none;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--od-gray-300);
    background: var(--od-white);
    color: var(--od-gray-500);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.od-pb-q:hover,
.od-pb-q:focus-visible { border-color: var(--od-primary); color: var(--od-primary); }

/* A „megegyezik a viselt névvel" jelölő. Három mezőt kapcsol ki – és a Tab át
   is ugorja őket, mert a letiltott mező kiesik a fókusz-sorrendből. */
.od-pb-same {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: var(--od-gray-600);
    margin: 0;
    cursor: pointer;
}

.od-pb-same input { width: 14px; height: 14px; margin: 0; flex: none; }

/* ── HIÁNYSÁV ────────────────────────────────────────────────────────────────
   ⚠️ EGY SOR, nem doboz. Ugyanaz a három szín, mint az `od-note-warn`-ban
   (#FDE68A / #FFFBEB / #92400E), hogy a kettő ránézésre összetartozzon – de a
   magassága 30 px, nem ~54: kártya-méretben ez tolta le az űrlapot a
   látótérből, pedig CÍMKE, nem olvasmány. */
.od-pb-strip {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 30px;
    padding: 0 .7rem;
    border-radius: 8px;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-pb-strip.is-warn { border: 1px solid #FDE68A; background: #FFFBEB; color: #92400E; }
.od-pb-strip.is-ok { border: 1px solid var(--od-success-line); background: var(--od-success-xlt); color: var(--od-success-dark); }
.od-pb-strip i { flex: none; }

/* A fülsáv jobb szélére írt billentyű-súgó. ⚠️ Az `me-auto` helyett külön elem:
   a fülsáv `od-sheet-tabs` a program közös osztálya, azt nem alakítjuk át egy
   modul kedvéért. */
.od-pb-tabhint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
    padding-right: .6rem;
    font-size: .72rem;
    color: var(--od-gray-400);
    white-space: nowrap;
}

/* A számolt belépés–kilépés a mentés-sáv jobb oldalán. */
.od-pb-calc { font-size: .76rem; color: var(--od-gray-500); }

/* ── ÉLŐ JELZÉS A MEZŐ MELLETT (`od-pb-flag`) ────────────────────────────────
   Az adóazonosítóból számolt születési dátum visszajelzése és az ellenőrző szám
   figyelmeztetése.

   ⚠️ **A MEZŐ MELLÉ, nem alá.** A kör egész lényege a kompaktság volt: a mezők ALÁ
   írt sorok pont azt a magasságot adnák vissza, amit levettünk. A jelzés a mező
   SORÁBAN áll, ott, ahol a `?` ikon is – így nulla képpontot visz el.

   ⚠️ **CSAK akkor jelenik meg, ha van mit mondani** – nem állandó súgó. Ez a
   különbség a törölt „Tíz számjegy" magyarázatokhoz képest: az mindig ott volt és
   semmit nem mondott, ez pedig egy KONKRÉT eltérésre hívja fel a figyelmet.

   ⚠️ A teljes mondat a `title`-ben van: a sorban csak a rövid alak fér el, de a
   könyvelőnek tudnia kell, MIÉRT szól a program. */
.od-pb-flag {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex: none;
    max-width: 12rem;
    padding: 0 .35rem;
    height: 20px;
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.od-pb-flag.is-info { background: var(--od-primary-xlt); color: var(--od-primary-dark); border: 1px solid var(--od-primary-light); }
.od-pb-flag.is-warn { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.od-pb-flag i { flex: none; font-size: .75rem; }

/* ⚠️ Az ELTÉRŐ születési dátum mezője SÁRGA KERETET kap. A chip önmagában halk: egy
   adathibát – amit épp azért keresünk, mert az ügyvezető rosszul diktálta – a szemnek
   a MEZŐN kell észrevennie. A `!important` a Bootstrap `.form-control` keretét írja
   felül; a hover/focus szabályok utána következnek, hogy a fókusz továbbra is kék. */
.od-pb-fw.has-warn .form-control { border-color: var(--od-warning) !important; background: #FFFBEB; }
.od-pb-fw.has-warn .form-control:focus { border-color: var(--od-primary) !important; background: var(--od-white); }

/* ═══════════════════════════════════════════════════════════════════════════
   A DOLGOZÓ CÍMEI (`od-pa-` = payroll address) – a jóváhagyott `/design` terv,
   2026‑09‑09.

   ⚠️ **ITT A FELIRAT A MEZŐ FELETT ÁLL, nem balra – és ez SZÁNDÉKOSAN más, mint az
   Alapadatok fülön.** A döntés a mezők SZÁMÁTÓL függ, nem stílustól: az Alapadatokon
   17 mező áll egymás alatt, tehát a felirat fölé írva 17-szer jön a plusz sormagasság.
   Itt 10 mező van, VÍZSZINTESEN három sorba rendezve – összesen három plusz
   sormagasság –, és a mezők így szélesebbek lehetnek, ami a településnek és a
   közterület nevének kell.

   ⚠️ **A TAB-SORREND itt SORFOLYTONOS** (balról jobbra, majd a következő sor), pontosan
   ahogy egy címet diktálnak. A rács itt tehát NEM okoz gondot – az Alapadatokon azért
   kellett két külön hasáb-div, mert ott a bejárás OSZLOP-irányú (125. tanulság).
   ═══════════════════════════════════════════════════════════════════════════ */

.od-pa-rows { display: flex; flex-direction: column; gap: .55rem; }

/* Egy sor: a rács-oszlopokat a hívó adja meg inline, mert soronként másak. */
.od-pa-row { display: grid; align-items: end; column-gap: .75rem; row-gap: .55rem; }

.od-pa-fg { display: flex; flex-direction: column; min-width: 0; }

.od-pa-lbrow { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; min-height: 1.05rem; }

.od-pa-lb {
    display: block;
    font-size: .74rem;
    font-weight: 500;
    color: var(--od-gray-600);
    line-height: 1.2;
    margin: 0;
}

/* Ugyanaz a 30 px-es sűrűség, mint az Alapadatok fülön – egy lap, egy ritmus.
   ⚠️ A `form-control`-t itt sem írjuk át globálisan. */
.od-pa-fld,
.od-pa-fw .form-control,
.od-pa-fw .form-select {
    height: 30px;
    min-height: 30px;
    padding: 0 .55rem;
    font-size: .85rem;
    border-radius: 6px;
    border-color: var(--od-gray-300);
}

.od-pa-fld:hover,
.od-pa-fw .form-control:hover,
.od-pa-fw .form-select:hover { border-color: var(--od-gray-400); }

.od-pa-fld:focus,
.od-pa-fw .form-control:focus,
.od-pa-fw .form-select:focus {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(21, 96, 189, .12);
    outline: none;
}

.od-pa-fw { position: relative; display: flex; align-items: center; gap: .35rem; min-width: 0; }

/* ── A KÉT MÓD (`od-pa-modes`) · a fül legfontosabb döntése ───────────────────
   „Költözés" ÚJ sort ír és lezárja a régit; „Javítás" a kijelölt sort írja át,
   előzmény nélkül.

   ⚠️ **Rosszul választva NÉMÁN romlik el az előzmény**: egy elgépelt házszám
   javítása új sorként rögzítve azt állítaná, hogy a dolgozó aznap elköltözött; egy
   valódi költözés javításként rögzítve pedig ELTÜNTETNÉ, hol lakott korábban. Ezért
   VÁLASZTÓ, nem egy gomb két jelentéssel. */
.od-pa-modes {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--od-gray-100);
    border: 1px solid var(--od-gray-200);
    border-radius: 8px;
}

.od-pa-mode {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 26px;
    padding: 0 .65rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: .78rem;
    font-weight: 600;
    color: var(--od-gray-600);
}

.od-pa-mode:hover { color: var(--od-gray-800); }

.od-pa-mode.is-active {
    background: var(--od-white);
    color: var(--od-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.od-pa-mode:disabled { opacity: .45; }

/* ── A KÖVETKEZMÉNY kiírva, nem tooltipben ───────────────────────────────────
   A mentés egy MÁSIK sort is megváltoztat (lezárja a korábbi élőt), és ezt a
   könyvelőnek a mentés ELŐTT kell látnia. */
.od-pa-conseq {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .7rem;
    min-height: 30px;
    border-radius: 8px;
    font-size: .78rem;
}

.od-pa-conseq.is-info { background: var(--od-primary-xlt); border: 1px solid var(--od-primary-light); color: var(--od-primary-dark); }
.od-pa-conseq.is-warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.od-pa-conseq i { flex: none; }

/* A KIJELÖLT cím sora a táblázatban. ⚠️ TÁBLÁZAT-PREFIX kell a Bootstrap
   `.table > :not(caption) > * > *` ellen, különben a háttér némán nem érvényesül. */
.table > tbody > tr.od-pa-picked > * {
    background: var(--od-primary-xlt);
    box-shadow: inset 3px 0 0 var(--od-primary);
}

/* ── A NAV OLVASOTT ADATA (`od-pa-navstrip`) ─────────────────────────────────
   ⚠️ NEM mező-alakú, és ez szándékos: ez a pillanatképből OLVASOTT adat. Egy
   letiltott beviteli mező azt sugallná, hogy elvileg írható lenne. */
.od-pa-navstrip {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border-radius: 10px;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    font-size: .8rem;
}

.od-pa-navstrip .k {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-400);
}

.od-pa-navstrip .v { font-weight: 600; }

/* ── AZ AKTUÁLIS ÖSSZEG (`od-pa-current`) ────────────────────────────────────
   ⚠️ OLVASOTT érték: az előzmény legfrissebb, mai napnál nem későbbi sora. NEM
   beviteli mező – egy beírható „aktuális bér" MÁSODIK IGAZSÁGOT csinálna, és a
   kettő némán széttarthatna. */
.od-pa-current {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: var(--od-gray-50);
    border: 1px solid var(--od-gray-200);
    font-size: .8rem;
}

.od-pa-current .amt {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.od-pa-current .k {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--od-gray-400);
}

.od-pa-current .v { font-weight: 600; }

/* ── KIFIZETÉS: KÉTÁLLÁSÚ KAPCSOLÓ (`od-pa-pay`) ─────────────────────────────
   A program kimondott szabálya: ha a választás a rekord FAJTÁJÁT dönti el – és itt
   ez dönti el, hogy a bankszámlaszám egyáltalán kérdés-e –, akkor KAPCSOLÓ, nem
   `select`: így az aktuális állapot kinyitás nélkül is látszik.

   ⚠️ A kiválasztott oldal TÖMÖR színt kap, nem keretet: szomszédos, azonos méretű
   gomb mellett a keretes jelölés nem elég erős.

   ⚠️ A hover-szabály `:not(.is-active)`-kal szűkítve, különben az egér az AKTÍV gomb
   fehér szövegét is átírná, és pont a kiválasztott állapot válna olvashatatlanná. */
.od-pa-pay {
    display: inline-flex;
    border: 1px solid var(--od-gray-300);
    border-radius: 8px;
    overflow: hidden;
}

.od-pa-paybtn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 34px;
    padding: 0 1rem;
    border: 0;
    background: var(--od-white);
    font-size: .84rem;
    font-weight: 600;
    color: var(--od-gray-600);
}

.od-pa-paybtn + .od-pa-paybtn { border-left: 1px solid var(--od-gray-300); }

.od-pa-paybtn:not(.is-active):hover { background: var(--od-gray-50); color: var(--od-gray-800); }

.od-pa-paybtn.is-active { background: var(--od-primary); color: var(--od-white); }

/* ── KESKENY ABLAK ───────────────────────────────────────────────────────────
   ⚠️ Az öt mezős sor telefonon használhatatlan: minden mező EGY oszlopba kerül.
   A felirat itt is a mező felett marad – ez a forma eleve azt teszi. */
@media (max-width: 900px) {
    .od-pa-row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── KESKENY ABLAK ───────────────────────────────────────────────────────────
   ⚠️ Két hasáb telefonon HASZNÁLHATATLAN: a 7.5rem-es feliratoszlop mellett a
   mezőnek pár tucat képpont maradna. 900 px alatt EGY hasáb – a bal oldali
   felirat viszont MARAD, mert az adja a kompaktságot, és egy hasábban is
   ugyanabban az oszlopban futnak a feliratok.

   ⚠️ A billentyű-súgó ELTŰNIK: érintőképernyőn nincs `Ctrl`, tehát ott az a
   sáv csak helyet vinne el – és olyat ígérne, ami nem is elérhető. */
@media (max-width: 900px) {
    .od-pb-cols { flex-direction: column; gap: .85rem; }
    .od-pb-tabhint { display: none; }
}

/* ⚠️ 576 px alatt a felirat a mező FÖLÉ kerül: ennél szűkebb kijelzőn a
   7.5rem-es oszlop már a mezőt szorítaná össze, és a hosszabb feliratok
   („Születési ország") kettőbe törnének – pont az egyoszlopos olvasás vész el,
   amiért a bal oldali felirat létezik. Itt tehát a másik forma a helyes. */
@media (max-width: 576px) {
    .od-pb-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .od-pb-fw .form-control,
    .od-pb-fw .form-select { height: 38px; min-height: 38px; }
}