/* =============================================================================
   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;
    --od-warning:       #D97706;
    --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;
}

/* Összecsukott (mobil) navbar: a fix magasság és a sorirány itt akadályt jelentene */
@media (max-width: 991.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;
}

@media (max-width: 991.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);
}

/* ============================================================
   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; }

.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;
}

.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: #7C3AED; }
.od-dc-bar-row.is-taxfree .od-dc-bar-mark {
    background: repeating-linear-gradient(to bottom, #7C3AED 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: #7C3AED; }
.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);
}
.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; }

.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);
}

/* ---------- 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);
}

.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);
}

/* Az épp szerkesztett sor jelölve – enélkül a lenti űrlapból nem derülne ki,
   MELYIK címet szerkeszti a felhasználó. */
.od-addr.is-editing {
    border-color: var(--od-primary);
    background: var(--od-primary-xlt);
}

.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; }

/* ---------- 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); }

/* ---------- 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;
}

/* 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;
}

.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; }

.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); }

/* ⚠️ 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 ──────────────────────────────────────────────────── */

.od-ie-field {
    min-width: 11rem;
}

/* ── 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;
}

@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,
    .od-ie-field .form-control,
    .od-ie-field .form-select {
        min-height: 44px;
        font-size: 1rem;
    }

    .od-m2m-dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .od-m2m-dl dd {
        margin-bottom: 0.4rem;
    }
}

/* ============================================================================
   „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;
}

.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;
}

/* ⚠️ `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;
}

/* ── „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;
}

/* ════════════════════════════════════════════════════════════════════════════
   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;
    }

    /* ── /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: #7C3AED; 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: #7C3AED; }

/* ── 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: #7C3AED; }
.od-rt-row.is-taxfree .od-rt-mark {
    background: repeating-linear-gradient(to bottom, #7C3AED 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; }
}