/* ==========================================================================
   EmeLOG - KÖZÖS STÍLUS (v42, docs/DESIGN_RENDSZER.md)
   Minden "app" oldal a templates/_head_kozos.html-en keresztül tölti be (a Bootstrap UTÁN, az oldalak saját <style>-jai ELŐTT).

   Mit tartalmaz:
     1. Design-tokenek (--hd-*, --el-*): színek, méretek. Világos ÉS sötét témában is.
     2. A sötét téma "Vezérlőpult-kinézete" (v42 óta mindenhol): a Bootstrap sötét témájának változóit írjuk át,
        így a kártyák, modálok, legördülők, táblázatok, űrlapmezők mind egyformán követik. (A Vezérlőpult
        eddig ezt az emelőgépes dashboard.html saját <style>-jában tartalmazta - onnan ide került.)
     3. Fejléc (.el-fejlec), eszköztár-gombok (.el-eszkozsor), lábléc (.el-lablec), a lebegő téma-kapcsoló
        (.el-tema-lebego) és a fejléc-rögzítő kitűző (.el-rogzit-gomb).
   A téma-/kitűző-kapcsolást a static/js/tema.js végzi (a <head>-ben tölt be, hogy ne villanjon rossz téma).
   ========================================================================== */

/* ---------- 1. Design-tokenek ---------- */
:root {
    /* Vezérlőpult-színek (világos téma: a megszokott Bootstrap-színek) */
    --hd-card-bg: var(--bs-card-bg, #fff);
    --hd-card-border: var(--bs-border-color, #dee2e6);
    --hd-text-muted: var(--bs-secondary-color, #6c757d);
    --hd-green: #198754;
    --hd-yellow: #ffc107;
    --hd-orange: #fd7e14;
    --hd-red: #dc3545;
    --hd-blue: #0d6efd;
    --hd-font: inherit;

    /* Méret-skála (EGY érték, hogy a gombok/ikonok mindenhol egyformák legyenek):
       - fejléc / eszköztár gomb: 2.5rem magas, az ikon 1rem
       - táblázatsori műveleti gomb: Bootstrap .btn-sm, 2rem magas (v50), az ikon 0.875rem, egyforma széles
       - űrlap/oldal fő gombja: alap .btn */
    --el-gomb-magassag: 2.5rem;
    --el-gomb-ikon: 1rem;
    --el-gomb-kicsi-magassag: 2rem;
    --el-gomb-kicsi-ikon: 0.875rem;
    --el-fejlec-logo: 125px;   /* v85: az EMELOG Database logó 2,5:1 arányú (a régi Defensys 2:1 volt) - a 125 px ugyanakkora (50 px) magasságot ad */
    --el-fejlec-z: 1030;
    /* Maximális oldalszélesség (v62): a Full HD-szélesség. Ennél szélesebb képernyőn (ultrawide, 2560/3440/3840 px) a teljes oldal
       - fejléc, tartalom, lábléc együtt - középre kerül, két oldalt üres sáv marad; Full HD-n és keskenyebben semmi sem változik. */
    --el-max-szelesseg: 1920px;
}

[data-bs-theme="dark"] {
    --hd-bg: #0a0e16;
    --hd-card-bg: #121a26;
    --hd-card-border: rgba(255, 255, 255, 0.07);
    --hd-text-muted: #7c8aa0;
    --hd-green: #2dd4a7;
    --hd-yellow: #ffd23f;
    --hd-orange: #ff9f43;
    --hd-red: #ff5c7a;
    --hd-blue: #5aa9ff;
    --hd-font: 'JetBrains Mono', monospace;

    /* A Bootstrap sötét változóinak átírása a Vezérlőpult-palettára: ettől lesz minden oldal egységes. */
    --bs-body-bg: #0a0e16;
    --bs-body-bg-rgb: 10, 14, 22;
    --bs-secondary-bg: #121a26;
    --bs-secondary-bg-rgb: 18, 26, 38;
    --bs-tertiary-bg: #0e1520;
    --bs-tertiary-bg-rgb: 14, 21, 32;
    --bs-border-color: rgba(255, 255, 255, 0.12);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.07);
}

[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--hd-card-bg);
    --bs-card-border-color: var(--hd-card-border);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
}
[data-bs-theme="dark"] .modal-content {
    --bs-modal-bg: var(--hd-card-bg);
    --bs-modal-border-color: var(--hd-card-border);
}
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--hd-card-bg);
    --bs-dropdown-border-color: var(--hd-card-border);
}
[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: var(--hd-card-bg);
    --bs-list-group-border-color: var(--hd-card-border);
}
[data-bs-theme="dark"] .offcanvas {
    --bs-offcanvas-bg: var(--hd-card-bg);
}

body {
    /* v62: ultrawide képernyőn az oldal ne nyúljon szét - legfeljebb --el-max-szelesseg széles és középen áll (a háttér a vászon egészét kitölti). */
    max-width: var(--el-max-szelesseg);
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s, color 0.3s;
    /* Az oldal legalább a képernyő magas, a lábléc (margin-top:auto) így mindig alul van. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > * { flex-shrink: 0; }
[data-bs-theme="dark"] body { background-color: var(--hd-bg); }

/* Súgó (?) gomb a kártyák címsorában - eddig a dashboard.html saját stílusa volt */
.sugo-gomb {
    width: 20px; height: 20px; padding: 0; line-height: 1; border-radius: 50%;
    font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; margin-left: 4px;
}

/* ---------- 2. Fejléc és eszköztár ---------- */
.el-fejlec {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}
/* Alapból a fejléc az oldallal együtt mozog; a kitűzővel (tema.js) rögzíthető. */
html[data-fejlec-rogzitett="1"] .el-fejlec {
    position: sticky;
    top: 0;
    z-index: var(--el-fejlec-z);
}
.el-fejlec .navbar-brand img { width: var(--el-fejlec-logo); height: auto; }

/* Eszköztár: minden gomb egyforma magas, az ikonok egyforma szélesek - a szöveges gombok is. */
.el-eszkozsor { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.el-eszkozsor .btn,
.el-menusor .btn,
.el-rogzit-gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: var(--el-gomb-magassag);
    height: var(--el-gomb-magassag);
    padding: 0 0.75rem;
    font-size: var(--el-gomb-ikon);
    line-height: 1;
    font-weight: 600;
}
.el-eszkozsor .btn i,
.el-menusor .btn i,
.el-rogzit-gomb i {
    font-size: var(--el-gomb-ikon);
    width: 1.15em;
    text-align: center;
}

/* Menüsor (v43): a modul fő menüpontjai a fejléc alsó sorában; az aktív pont kitöltött (btn-primary). 1400 px alatt csak ikon (a title/aria-label marad). */
.el-menusor { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color)); }
@media (max-width: 1399.98px) { .el-menusor .el-menucimke { display: none; } }
/* Ugyanez a szabály vonatkozik a Beállítások fülsorára (.el-fulek, lásd lejjebb) is - 1400 px alatt itt is csak ikon marad (v60). Külön szabályban, hogy a
   fenti .el-menusor sor szó szerint változatlan maradjon (l. tests/t_design.py O3). */
@media (max-width: 1399.98px) { .el-fulek .el-menucimke { display: none; } }

/* Oldal-szintű művelet-sáv a fejléc alatt (pl. "Új cég", CSV-export): ugyanaz a gombméret, jobbra igazítva */
.el-oldal-muveletek { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.el-oldal-muveletek .btn { display: inline-flex; align-items: center; gap: 0.4rem; height: var(--el-gomb-magassag); font-weight: 600; }

/* Fejléc-rögzítő kitűző: kikapcsolva ferde, bekapcsolva egyenes és kiemelt */
.el-rogzit-gomb i { transition: transform 0.15s ease; transform: rotate(35deg); }
html[data-fejlec-rogzitett="1"] .el-rogzit-gomb i { transform: rotate(0deg); }
html[data-fejlec-rogzitett="1"] .el-rogzit-gomb {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-primary);
}

/* Fülek (v48, mobil-javítás v60): a Beállítások oldal fülei (Bootstrap tab) a főmenü gombjainak kinézetét kapják: egyforma magas, ikon + szöveg, az aktív
   kitöltött (mint a .btn-primary). 1400 px alatt - ugyanúgy, mint a .el-menusor-nál - csak ikon marad, a szöveg a .el-menucimke span-ben van, ennek
   elrejtését a fenti, önálló "@media (max-width: 1399.98px) { .el-fulek .el-menucimke { display: none; } }" szabály végzi. (Az 576 px alatti
   egysoros görgethető sáv, l. v51, ettől
   függetlenül megmarad - a rövidebb, ikon-only gombok ritkán szorulnak rá, de nem árt.)
   A markup: <ul class="nav el-fulek"> <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" ...><i class="fa-solid ..."></i><span class="el-menucimke">Szöveg</span></button></li> ... (a Bootstrap tab-JS a .nav-link-en váltja az .active-ot). */
.el-fulek { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; list-style: none; border: 0; }
.el-fulek .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: var(--el-gomb-magassag);
    height: var(--el-gomb-magassag);
    padding: 0 0.75rem;
    font-size: var(--el-gomb-ikon);
    line-height: 1;
    font-weight: 600;
    color: var(--bs-secondary);
    background: transparent;
    border: 1px solid var(--bs-secondary);
    border-radius: var(--bs-border-radius);
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
.el-fulek .nav-link i { font-size: var(--el-gomb-ikon); width: 1.15em; text-align: center; }
.el-fulek .nav-link:hover, .el-fulek .nav-link:focus-visible { color: #fff; background-color: var(--bs-secondary); }
.el-fulek .nav-link.active, .el-fulek .nav-link.active:hover { color: #fff; background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* Kis gombok (v50): a táblázatsori és kártyán belüli műveleti gombok (Bootstrap .btn-sm) egyformák: egyforma magas (2rem), az ikon egyforma széles
   (1.15em) - így az ikon-only gombok (szerkesztés, törlés, kulcs, szem...) pontosan egyforma négyzetek, és az ikon + szöveg gombokban a szöveg
   mindig ugyanonnan indul. A fő (alap méretű) gomb és a fejléc / menüsor gombjai (2.5rem) változatlanok. */
.btn-sm, .btn-group-sm > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: var(--el-gomb-kicsi-magassag);
    min-width: var(--el-gomb-kicsi-magassag);
    line-height: 1.2;
    vertical-align: middle;
}
.btn-sm i.fa-solid, .btn-sm i.fa-regular, .btn-sm i.fas, .btn-sm i.far, .btn-group-sm > .btn i.fa-solid, .btn-group-sm > .btn i.fa-regular {
    font-size: var(--el-gomb-kicsi-ikon);
    width: 1.15em;
    text-align: center;
}

/* ---------- 2/c. Okostelefon / érintés (v51, docs/MOBIL_TERV.md) ----------
   Elv: az okostelefon az asztali design KOMPAKT változata - csak azt javítjuk, ami mérhetően hibás (túlcsordulás, kis érintési célpont, soktörő fülsor, szűk modál).
   Az egeres (asztali) kinézet pixelre változatlan: az érintési szabályok a (pointer: coarse), a telefonosak a max-width: 575.98px lekérdezésben vannak. */

/* Érintés (telefon + érintős tablet): a célméret 2.5rem (40 px) - ugyanaz, mint a fejléc / menü gombjaié, nincs új méret-skála. A beviteli mezők betűje 16 px (az iOS különben ráközelít). */
@media (pointer: coarse) {
    .btn-sm, .btn-group-sm > .btn { min-height: var(--el-gomb-magassag); min-width: var(--el-gomb-magassag); }
    .form-control, .form-select { min-height: var(--el-gomb-magassag); font-size: 1rem; }
    .dropdown-item, .list-group-item-action { min-height: var(--el-gomb-magassag); display: flex; align-items: center; }
    .form-check:not(.form-switch) > .form-check-input { width: 1.3em; height: 1.3em; margin-top: 0.1em; }
    /* v58: a sima .btn is legalább 40 px (a Bootstrap alap 38 px); a jelölőnégyzetek / rádiók 1.4rem, a kapcsolók (switch) 2.5em x 1.4em (a címke 0.5em-mel odébb kezdődik); a fejléc logó-hivatkozásának érintési felülete 40 px magas (a ::after kiterjeszti, az elrendezés / fejléc-magasság nem változik) */
    .btn:not(.btn-sm):not(.btn-lg) { min-height: var(--el-gomb-magassag); min-width: var(--el-gomb-magassag); }
    .form-check-input[type="checkbox"]:not([role="switch"]), .form-check-input[type="radio"] { width: 1.4rem; height: 1.4rem; }
    .form-switch { padding-left: 3em; }
    .form-switch .form-check-input { width: 2.5em; height: 1.4em; margin-left: -3em; }
    .el-fejlec .navbar-brand { position: relative; }
    .el-fejlec .navbar-brand::after { content: ""; position: absolute; inset: -8px 0; }
    /* Select2 (kereshető legördülő, bootstrap-5 téma - Új gép / Szerkesztés, Beállítások, Felhasználók): a mező és a találati sorok 40 px-esek, a keresőmező betűje 16 px (v55) */
    html .select2-container--bootstrap-5 .select2-selection { min-height: var(--el-gomb-magassag); font-size: 1rem; }
    html .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { min-height: var(--el-gomb-magassag); display: flex; align-items: center; }
    html .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { min-height: var(--el-gomb-magassag); font-size: 1rem; }
}

/* Okostelefon (< 576 px) */
@media (max-width: 575.98px) {
    /* Nagy modálok teljes képernyősek (a kis megerősítő ablakok maradnak). A 33 modált nem kell egyenként átírni. */
    .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: none; width: 100%; height: 100%; min-height: 100%; margin: 0; }
    .modal-dialog.modal-xl .modal-content, .modal-dialog.modal-lg .modal-content { min-height: 100%; border-radius: 0; border: 0; }
    /* Fülek (.el-fulek, v48 / v61): telefonon középre igazítva és sortörve - ugyanúgy, mint a fő menüsor (a feliratot az 1400 px alatti szabály rejti: .el-fulek .el-menucimke, l. fent; a fül címe a title / aria-label-ben marad). A 10 ikon-fül 2 sor, nincs vízszintes görgetés. */
    .el-fulek { justify-content: center; }
    .el-fulek .nav-link i { width: auto; }
    /* Fejléc (v53, a megrendelő döntése: MINDEN elem középre igazított). 1. sor: logó + oldalcím egymás mellett, középen; 2. sor: a gombok; alatta a menü, középre igazítva és sortörve
       (minden pont látszik, nincs vízszintes görgetés; a menüpont feliratai telefonon rejtettek - az aktív pont kék, az oldal címe a fejlécben / az oldal tetején látszik); a felhasználó gomb csak ikon (a név a legördülő fejlécében van). */
    .el-fejlec .container-fluid > .d-flex { justify-content: center; text-align: center; }
    .el-fejlec .container-fluid > .d-flex > h1 { margin-right: 0 !important; font-size: 1.15rem; min-width: 0; }
    .el-fejlec .el-eszkozsor { flex: 0 0 100%; justify-content: center; }
    .el-fejlec .el-felhasznalonev { display: none; }
    .el-menusor { justify-content: center; }
    /* A középre igazított kártyás oldalakon (belépés, QR-oldalak) a lábléc ablak aljára rögzített: oldalt hely marad a lebegő téma-kapcsolónak, hogy ne takarja a szöveget */
    body.el-kozepre > .el-lablec { padding-left: 3.75rem; padding-right: 3.75rem; }
    /* Kártyás táblázat (v54, .el-tabla-kartya): a széles lista telefonon sor = kártya. A sorok flex-kártyák, a cellák "Címke: érték" párok (a címke a td data-cimke attribútumából jön,
       a címke nélküli cella - név, státusz, műveletek - teljes sorszélességű). A fejléc sor a rendezés-gombok vízszintesen görgethető sávja (a th data-action="rendez-oszlop" működik tovább).
       A sor háttere / betűszíne a Bootstrap sor-állapot osztályokból (table-danger stb.) jön. A JS által elrejtett (.d-none) oszlopok itt is rejtettek maradnak - az oszlopválasztó telefonon is működik. Asztalon (>= 576 px) a szabály nem hat, a táblázat pixelre változatlan. */
    .el-tabla-kartya, .el-tabla-kartya > tbody { display: block; width: 100%; }
    /* A fejléc alapból rejtett (a cellák címkéi a data-cimke-ből jönnek); csak a rendezhető táblázatokban (.el-tabla-rendezheto) látszik, rendezés-gombok sávjaként */
    .el-tabla-kartya > thead { display: none; }
    .el-tabla-rendezheto > thead { display: block; width: 100%; }
    .el-tabla-rendezheto > thead > tr { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.375rem; overflow-x: auto; padding: 0.5rem 0.75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .el-tabla-rendezheto > thead > tr::-webkit-scrollbar { display: none; }
    .el-tabla-rendezheto > thead > tr::before { content: "Rendezés:"; flex: 0 0 auto; font-size: 0.75rem; opacity: 0.7; }
    .el-tabla-rendezheto > thead > tr > th:not([data-action="rendez-oszlop"]):not(.col-valaszto) { display: none; }
    .el-tabla-rendezheto > thead > tr > th[data-action="rendez-oszlop"], .el-tabla-rendezheto > thead > tr > th.col-valaszto { flex: 0 0 auto; display: block; width: auto !important; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: transparent; white-space: nowrap; }
    .el-tabla-rendezheto > thead .th-kozepre { min-height: var(--el-gomb-magassag); padding: 0 0.75rem; }
    .el-tabla-kartya > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.75rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--bs-border-color);
        background-color: var(--bs-table-bg); color: var(--bs-table-color); }
    .el-tabla-kartya > tbody > tr > td { display: block; order: 3; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; font-size: 0.85rem; min-width: 0; }
    .el-tabla-kartya > tbody > tr > td[data-cimke]::before { content: attr(data-cimke) ": "; font-size: 0.75rem; opacity: 0.7; }
    .el-tabla-kartya > tbody > tr > td.col-valaszto { order: 0; align-self: flex-start; padding-top: 0.2rem; }
    .el-tabla-kartya > tbody > tr > td.col-megnevezes, .el-tabla-kartya > tbody > tr > td.el-kartya-cim { order: 1; flex: 1 1 0; font-size: 1rem; overflow-wrap: anywhere; }
    .el-tabla-kartya > tbody > tr > td.el-kartya-cim { font-weight: 600; flex-basis: 60%; }
    .el-tabla-kartya > tbody > tr > td.col-statusz, .el-tabla-kartya > tbody > tr > td.el-kartya-statusz { order: 2; flex: 0 0 100%; margin: 0.25rem 0; }
    .el-tabla-kartya > tbody > tr > td.col-muveletek, .el-tabla-kartya > tbody > tr > td.el-kartya-muvelet { order: 9; flex: 0 0 100%; margin-top: 0.5rem; }
    .el-tabla-kartya > tbody > tr > td.el-kartya-muvelet { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .el-tabla-kartya > tbody > tr > td[colspan] { flex: 0 0 100%; text-align: center; }
    /* Ragadós művelet-sáv (v55, .el-urlap-sav): a leghosszabb űrlapok (Új gép / Szerkesztés, Vizsgálati rögzítő) Mentés gombja telefonon az ablak aljához tapad, így hosszú görgetés után is
       kéznél van. A sáv az űrlap utolsó eleme, ezért az űrlap végén a helyén marad (nem takar mezőt). Háttere a kártya háttere (.bg-body-tertiary), oldalt a kártya belső margójáig ér (--bs-card-spacer-x), alul a safe-area. Asztalon nem hat. */
    .el-urlap-sav { position: sticky; bottom: 0; z-index: 10; background-color: var(--bs-tertiary-bg); margin-left: calc(-1 * var(--bs-card-spacer-x, 1rem)); margin-right: calc(-1 * var(--bs-card-spacer-x, 1rem)); padding: 0.625rem var(--bs-card-spacer-x, 1rem) calc(0.625rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.12); }
    /* A legördülő menü nem lóghat ki a képernyőről */
    .dropdown-menu { max-width: calc(100vw - 1rem); }
}

/* Biztonsági sáv (iPhone alsó sáv / ívelt sarkok - a viewport meta viewport-fit=cover-t kér) */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* ---------- 3. Lábléc ---------- */
.el-lablec {
    align-self: stretch;          /* a középre igazított (align-items:center) body-kon is teljes szélességű */
    margin-top: auto;
    padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    text-align: center;
}

/* A "középre igazított" kártyás oldalak (belépés, modulválasztó, 2FA, aktiválás): a body-juk saját flex-középre igazítást ad
   (<body class="el-kozepre">), ezért a lábléc itt az ablak aljára van rögzítve, hogy a kártya továbbra is pontosan középen maradjon. */
body.el-kozepre { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
body.el-kozepre > .el-lablec { position: fixed; left: 0; right: 0; bottom: 0; margin-top: 0; }

/* ---------- 3/b. Sötét téma: a sablonokban "világosra" kódolt Bootstrap-osztályok (table-light, bg-light, bg-white) ---------- */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: #172234;
    --bs-table-border-color: var(--hd-card-border);
    --bs-table-striped-bg: #1b2739;
    --bs-table-hover-bg: #1b2739;
    color: var(--bs-body-color);
}
/* A .bg-light / .bg-white csak ott kap sötét hátteret, ahol nincs mellette .text-dark / .badge (azok szándékosan világos "címkék": sötét betűvel olvashatók maradnak). */
[data-bs-theme="dark"] .bg-light:not(.text-dark):not(.badge) { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color); }
[data-bs-theme="dark"] .bg-white:not(.text-dark):not(.badge) { background-color: var(--hd-card-bg) !important; color: var(--bs-body-color); }

/* ---------- 3/c. Select2 (bootstrap-5 téma): téma-tudatos színek (v56) ----------
   A select2-bootstrap-5-theme 1.3.0 fix (világos) színekkel jön - sötét módban fehér mező / lenyíló lett. Itt a Bootstrap-változókra (--bs-body-bg, --bs-body-color, --bs-border-color, ...) és a
   közös kártya-hátterre (--hd-card-bg) kötjük, így a mező ugyanúgy néz ki, mint a .form-select, és a téma-váltással együtt vált. A fókusz-kék, a kiemelt (primary) kijelölt sor és a méretek maradnak.
   A szelektorok szándékosan ugyanolyan hosszúak, mint a téma sajátjai (a téma CSS-e az oldalak <head>-jében az emelog.css UTÁN töltődik, ezért a szelektorok `html` előtagot kapnak: eggyel nagyobb fajlagosság). A nyíl / törlő ikon SVG-je sötét módban világos. */
html .select2-container--bootstrap-5 .select2-selection { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: var(--bs-border-color); }
html .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--bs-body-color); }
html .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: var(--bs-secondary-color); }
html .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
html .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field { color: var(--bs-body-color); }
html .select2-container--bootstrap-5 .select2-dropdown { color: var(--bs-body-color); background-color: var(--hd-card-bg); }
html .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: var(--bs-border-color); }
html .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message { color: var(--bs-secondary-color); }
html .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { color: var(--bs-body-color); background-color: var(--bs-primary-bg-subtle); }
html .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled, html .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled=true] { color: var(--bs-secondary-color); }
html .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group { color: var(--bs-secondary-color); }
html .select2-container--bootstrap-5.select2-container--disabled .select2-selection, html .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection { color: var(--bs-secondary-color); background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear, [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover, [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover, [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); }

/* ---------- 4. Lebegő téma-kapcsoló (fejléc nélküli oldalakra: belépés, 2FA, modulválasztó stb.) ---------- */
.el-tema-lebego {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
}
.el-tema-lebego .btn {
    width: var(--el-gomb-magassag);
    height: var(--el-gomb-magassag);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
}

/* ---------- 5. Nyomtatás: a keretelemek nem kerülnek a papírra ---------- */
@media print {
    .el-fejlec, .el-lablec, .el-tema-lebego { display: none !important; }
}