/* ============================================================
   Falcon UI overrides for BSS Worklines
   - Globálisan egységesíti a form-controlokat, gombokat, checkboxokat
   - DevExpress (ASPxTextBox, BootstrapButton, ASPxCheckBox) Falcon kinézet
   - Bootstrap 5 form-floating support
   - Töltse be a Master page-ekbe a theme.css UTÁN (azért, hogy felülírjon)
   ============================================================ */

/* ---------- 1) FORM-CONTROL (textbox, asp:TextBox) ---------- */
/* Bootstrap form-control alap — rounded, halvány határvonal, fókusz halo */
.form-control,
.form-select,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
textarea.form-control {
    border-radius: 0.5rem;
    border: 1px solid var(--falcon-input-border-color, #d8e2ef);
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.5;
    background-color: var(--falcon-input-bg, #fff);
    color: var(--falcon-input-color, #344050);
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #b6c1d2;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.15);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f9fafd;
    opacity: 0.85;
}

/* ---------- Méretvariánsok ------------------------------------------------
   ✅ Hibajavítás (2026-08-12): a szöveges mező és a legördülő EGYFORMA magas.

   MI VOLT A BAJ — két külön ok, együtt:

   1) SPECIFIKUSSÁG. A fenti szabályunk `input[type="text"].form-control`
      alakú, ami elem + attribútum + osztály = (0,2,1). A méretvariáns viszont
      csak `.form-control-sm` volt = (0,1,0). Így a -sm variáns SOSEM tudta
      érvényesíteni a saját paddingját/betűméretét a szöveges mezőkön: azok a
      NAGY méretet kapták (padding 0.45rem, font-size 0.85rem), miközben a
      <select> a téma szerinti kis méretet. Innen a szemmel látható eltérés.
      Ezért itt UGYANOLYAN specifikussággal írjuk fel a -sm variánst is.

   2) ELTÉRŐ ÉRTÉKEK. A Falcon téma (theme.css) eleve EGYEZTETTE a kettőt:
        .form-control-sm : font-size 0.875rem, padding 0.1875rem 0.75rem
        .form-select-sm  : font-size 0.875rem, padding-top/bottom 0.1875rem
      Mindkettő 1.5 × 14px + 3px + 3px + 2px keret = 29px. A mi korábbi
      0.8rem / 0.25rem értékeink bontották el ezt a párosítást — most
      visszaállunk a téma értékeire, tehát a magasság SZÁMÍTOTTAN egyezik,
      nem egy általunk tippelt pixelszám.

   ⚠️ A <select> elemet itt SEM állítjuk (se height, se padding): fix magasság
   megadása levágta a kiválasztott szöveget (l. a module-forms.css "SELECT —
   natív méretezés" blokkját). A szöveges mezőt igazítjuk a selecthez.
   ------------------------------------------------------------------------ */
.form-control-sm,
input[type="text"].form-control-sm,
input[type="password"].form-control-sm,
input[type="email"].form-control-sm,
input[type="number"].form-control-sm,
input[type="tel"].form-control-sm,
input[type="url"].form-control-sm,
input[type="search"].form-control-sm,
input[type="date"].form-control-sm,
input[type="datetime-local"].form-control-sm {
    border-radius: 0.4rem;
    padding: 0.1875rem 0.75rem;
    font-size: 0.875rem;
}

.form-control-lg,
input[type="text"].form-control-lg,
input[type="password"].form-control-lg,
input[type="email"].form-control-lg,
input[type="number"].form-control-lg,
input[type="tel"].form-control-lg,
input[type="url"].form-control-lg,
input[type="search"].form-control-lg {
    border-radius: 0.6rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
}

/* ---------- SELECT méretvariáns — MÉRÉSSEL IGAZOLT JAVÍTÁS ---------------
   ✅ 2026-08-12. Mért értékek DevToolsból, a javítás ELŐTT:
        input.form-control.form-control-sm  →  28.99 px   (helyes)
        select.form-select.form-select-sm   →  35.74 px   (túl magas)

   OK: a fájl tetején (1. blokk) a `.form-select` is szerepel a bázis
   szelektorlistában, `padding: 0.45rem` és `font-size: 0.85rem` értékkel.
   Ennek specifikussága (0,1,0) — PONTOSAN annyi, mint a theme.css
   `.form-select-sm`-jének. Egyenlőségnél a KÉSŐBB betöltött fájl győz, és a
   falcon-overrides.css a theme.css UTÁN jön (l. a fájl fejlécében). Ezért a
   `-sm` variáns SOHA nem érvényesült a legördülőkön: azok a bázis (nagy)
   méretet kapták, míg a szöveges mezők — az előző javítás után — a kicsit.
   Ez ugyanaz a csapda, mint az inputoknál, csak a másik oldalon.

   ⚠️ CSAK a függőleges paddingot és a betűméretet állítjuk. `height`-ot és
   `line-height`-ot a <select>-re TUDATOSAN NEM adunk: pontosan az vágta le
   korábban a kiválasztott szöveget (l. module-forms.css "SELECT — natív
   méretezés"). A vízszintes paddinghoz sem nyúlunk, hogy a legördülő nyíl
   helye és a szöveg behúzása ne mozduljon el a többi lapon.

   SZÁMÍTÁS a javítás után: 1.5 × 0.875rem (21px) + 3px + 3px + keret ≈ 29 px,
   ami megegyezik az input mért 28.99 px-ével.

   ⚠️ MÁSODIK NEKIFUTÁS (a mérés szerint az első nem hatott): ebben a fájlban
   LENTEBB van még egy blokk, `select.form-control, select.form-select` néven,
   `padding: 0.45rem 2rem 0.45rem 0.85rem; font-size: 0.85rem` értékkel. Annak
   specifikussága (0,1,1) — PONTOSAN annyi, mint egy `select.form-select-sm`-nek,
   viszont KÉSŐBB áll a fájlban, ezért az győzött. Ezért itt a legördülő
   variánsát HÁROM osztállyal írjuk (`select.form-select.form-select-sm` =
   (0,2,1)), így a dokumentum-sorrend már nem befolyásolja az eredményt.
   ------------------------------------------------------------------------ */
.form-select-sm,
select.form-select-sm,
select.form-select.form-select-sm {
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
    font-size: 0.875rem;
}

.form-select-lg,
select.form-select-lg,
select.form-select.form-select-lg {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1rem;
}

/* ---------- KÖZÖS MAGASSÁG-ALAP (min-height) -----------------------------
   ✅ 2026-08-12. Miért kell a padding/betűméret egyeztetése MELLETT is:
   a <select> tartalommagasságát a böngésző a saját sor-boxából számolja, és a
   module-forms.css szándékosan `line-height: normal !important`-ot ad rá (a
   szövegvágás elkerülésére). A `normal` értéke fontkészlet-függő (~1.4), tehát
   a legördülő természetes magassága nem pontosan ugyanaz, mint a `line-height:
   1.5`-tel számoló szöveges mezőé — néhány tized/egy pixel eltérés maradhat,
   amit stíluslapból nem lehet kiszámolni.

   A min-height ezt kiveszi a képletből: mindkét vezérlőnek UGYANEZ a padlója,
   így a végső magasság determinisztikusan egyezik.

   ⚠️ Miért BIZTONSÁGOS a <select>-en: a `min-height` csak NÖVELHETI a boxot,
   soha nem szorítja össze a tartalmat — a korábbi szövegvágást a fix `height`
   + `line-height` okozta, nem a min-height (l. module-forms.css "SELECT —
   natív méretezés"). `height`-ot itt sem adunk.

   Az érték az input MÉRT magassága (28.99 px → 29px).

   Miért CSAK a <select> kap itt min-height-et: a szöveges mező már 29px-et kap
   a theme.css `.form-control-sm` min-height-jából (és a module-forms.css
   ugyanezt a képletet ismétli) — ott tehát nincs mit pótolni. A legördülőnek
   volt hiányzó padlója, ezért `!important` sem kell: a `min-height: 0`-t
   kivettük a module-forms.css-ből, így ezt a szabályt már semmi nem üti.
   ------------------------------------------------------------------------ */
:root {
    --wl-input-h-sm: 29px;
}

.form-select-sm,
select.form-select-sm,
select.form-select.form-select-sm {
    min-height: var(--wl-input-h-sm);
}

/* ---------- 2) DEVEXPRESS EDITORS — SZÁNDÉKOSAN NINCS FELÜLÍRÁS ----------
   ⚠️ 2026-08-12: az összes globális DevExpress editor-felülírás KI LETT VÉVE,
   hogy minden DevExpress vezérlő a SAJÁT alap (téma szerinti) kinézetét kapja.

   MI VOLT ITT: .dxeEditAreaSys / .dxeEditArea(+_Material/_Office365/_Moderno),
   a .dxeTextBoxSys / .dxeButtonEditSys wrapperek, a .dxeFocused fókuszállapot,
   a .dxeDisabled/.dxeReadOnly és a .dxeListBoxItem legördülő-elemek — mind
   `!important`-tal, szuffix nélküli és részben szuffixált osztálynevekre.

   MIÉRT KELLETT KIVENNI: ezek a szabályok NEM csak az önálló textboxokra
   hatottak, hanem MINDEN DevExpress vezérlő belsejére is, ahol ugyanezek az
   osztályok előfordulnak — például az ASPxHtmlEditor ESZKÖZTÁRÁRA (a
   betűtípus/méret választók és a színválasztók ASPxComboBox-ok, tehát
   .dxeTextBoxSys / .dxeEditAreaSys osztályokat viselnek). A 0.4rem 0.85rem
   padding és a fix font-size szétfeszítette az eszköztár fix magasságú
   elemeit: a szerkesztő toolbarja "szétesett". A szerkesztőnek egyébként
   NINCS saját toolbar-konfigurációja — a hiba tisztán CSS-eredetű volt.

   ⚠️ HATÓKÖR: ez a változás SOK lapot érint (minden ASPxTextBox, ASPxComboBox,
   ASPxDateEdit, ASPxSpinEdit stb. a DevExpress alap kinézetét kapja). Ez
   tudatos döntés volt — l. a szűrősornál ugyanezt a következtetést lentebb.
   Ha egy KONKRÉT lapon mégis Bootstrap-kinézet kell egy DX vezérlőre, arra a
   module-forms.css bevált mintája való: a szabályokat `.form-control`-lal
   együtt kell felírni (pl. `.dxeTextBoxSys.form-control { … }`), így csak arra
   a vezérlőre hat, amelyre a CssClass="form-control" ki van írva.
   -------------------------------------------------------------------------- */

/* ---------- 2b) DEVEXPRESS VEZÉRLŐK EGYSÉGES MAGASSÁGA ------------------
   ✅ Új (2026-08-12): a textbox, a combo és a dátumválasztó ugyanolyan magas.

   REFERENCIA: a 34 px / 32 px pár nem tetszőleges — a module-forms.css már
   EZT használta a `.form-control` osztályt is viselő DevExpress vezérlőkre
   (l. ott az 1. és 3. blokkot). Eddig viszont csak azokon a lapokon és csak
   azokon a vezérlőkön érvényesült, ahol a CssClass="form-control" ki volt
   írva — a többi a DevExpress téma szerinti, egymástól eltérő magasságot
   kapta. Itt globálissá tesszük, CssClass nélkül is.

   EGY SZÁM: ha más magasság kell, elég a --wl-dx-control-h értéket átírni
   (a belső a külső mínusz 2 px keret). A module-forms.css ugyanezt a két
   változót használja, tehát a két fájl nem tud elcsúszni egymástól.

   ⚠️ SZÁNDÉKOSAN CSAK MAGASSÁG-JELLEGŰ tulajdonságokat állítunk (height /
   line-height), keretet, hátteret, paddingot NEM. Ez teszi lehetővé, hogy az
   ASPxHtmlEditor eszköztárán egyetlen `height: auto` visszaállítással
   TELJESEN semlegesíteni tudjuk (l. lentebb) — a korábbi, mindent felülíró
   blokkok pont azért feszítették szét a toolbart, mert ott keretet és
   paddingot is kényszerítettek.
   ------------------------------------------------------------------------ */
:root {
    --wl-dx-control-h: 34px;        /* külső vezérlő (wrapper tábla) */
    --wl-dx-control-inner-h: 32px;  /* belső beírómező / gombcella */
}

/* Külső wrapper: ASPxTextBox, ASPxComboBox, ASPxDateEdit, ASPxSpinEdit */
.dxeTextBoxSys,
.dxeTextBox,
.dxeButtonEditSys,
.dxeButtonEdit,
table.dxeTextBoxSys,
table.dxeButtonEditSys {
    height: var(--wl-dx-control-h) !important;
    min-height: var(--wl-dx-control-h) !important;
    max-height: var(--wl-dx-control-h) !important;
}

/* Belső beírómező */
.dxeTextBoxSys .dxeEditArea,
.dxeButtonEditSys .dxeEditArea,
.dxeTextBoxSys input[type="text"],
.dxeButtonEditSys input[type="text"],
.dxeTextBoxSys input[type="password"] {
    height: var(--wl-dx-control-inner-h) !important;
    min-height: var(--wl-dx-control-inner-h) !important;
    max-height: var(--wl-dx-control-inner-h) !important;
    line-height: var(--wl-dx-control-inner-h) !important;
}

/* Legördülő nyíl / naptár gomb — igazodjon a belső magassághoz. */
.dxeButtonEditSys .dxeButtonEditButton,
.dxeButtonEditSys .dxeButtonEditButtonHover,
.dxeButtonEditSys .dxeButtonEditButtonPressed,
.dxeButtonEditSys .dxeCalendarButton {
    height: var(--wl-dx-control-inner-h) !important;
}

/* ------------------------------------------------------------------------
   ⚠️ 2026-09-07 — SPIN GOMBOK: FÉL MAGASSÁG. MÁR NEM A SPIN-EDIT MIATT.

   A HIBA, AMIT ORVOSOL: a fenti szabály a fel/le nyilaknak IS a teljes belső
   magasságot (32px) adta. Egy legördülő- vagy naptár-gombnál ez helyes, mert
   AZ EGY GOMB. Egy fel/le pár viszont EGYMÁS ALÁ renderel — így 2 × 32 = 64px
   lett egy 34px magas kontrollban, és a lefelé nyíl kicsúszott a mező alá.

   ⚠️ ELŐSZÖR TÖRÖLTEM EZT A BLOKKOT, AZZAL AZ INDOKLÁSSAL, HOGY „az összes
   ASPxSpinEdit lecserélődött, tehát nincs mit igazítani". EZ TÉVEDÉS VOLT:
   az ASPxTimeEdit UGYANEZT a két osztályt (.dxeSpinIncButton /
   .dxeSpinDecButton) rendereli .dxeButtonEditSys alatt, és abból négy élő
   példány van — HrAttendance (teStart, teEnd) és LeaveRequest (txtOtStart,
   txtOtEnd). A törléssel a jelenléti és a túlóra-popupon hoztam volna vissza
   a kicsúszó nyilat. A szabály tehát marad, csak az indoklása változik.

   A .dxeSpinEditSys szelektorok kikerültek: olyan kontroll már nincs.
   A helyes érték a belső magasság FELE; a calc() 1px-et levesz az
   elválasztó vonalra.
   ------------------------------------------------------------------------ */
:root {
    --wl-dx-spin-btn-h: calc((var(--wl-dx-control-inner-h) - 1px) / 2);
}

.dxeButtonEditSys .dxeSpinIncButton,
.dxeButtonEditSys .dxeSpinDecButton {
    height: var(--wl-dx-spin-btn-h) !important;
    min-height: var(--wl-dx-spin-btn-h) !important;
    max-height: var(--wl-dx-spin-btn-h) !important;
    line-height: var(--wl-dx-spin-btn-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* A gombokat tartó cella ne nyúljon túl a kontrollon, és felülre igazodjon. */
.dxeButtonEditSys td.dxic:has(.dxeSpinIncButton) {
    vertical-align: top !important;
}

/* ⚠️ KIVÉTEL 1 — MEMO (többsoros): a fix magasság ott értelmetlen lenne. */
.dxeMemoSys,
.dxeMemo,
.dxeMemoSys .dxeEditArea,
.dxeMemoSys textarea {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.5 !important;
}

/* ⚠️ KIVÉTEL 2 — ASPxHtmlEditor: az ESZKÖZTÁR combói ugyanezeket az
   osztályokat viselik, ezért ott a fix magasságot teljesen visszavonjuk.
   Ez a `height: auto` elég, mert fentebb CSAK magasságot állítottunk. */
[class*="dxheControl"] .dxeTextBoxSys,
[class*="dxheControl"] .dxeButtonEditSys,
[class*="dxheControl"] table[class*="dxe"],
[class*="dxheControl"] .dxeEditArea,
[class*="dxheControl"] input[type="text"],
[class*="dxheControl"] .dxeButtonEditButton,
[class*="dxheControl"] .dxeCalendarButton {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: normal !important;
}

/* MEGJEGYZÉS a natív <select>-ről: a Bootstrap .form-select magasságát
   SZÁNDÉKOSAN nem bántjuk. A module-forms.css-ben külön figyelmeztetés áll
   erről: <select>-re fix height/line-height megadása levágta a kiválasztott
   szöveget (ezt a hibát egyszer már végigjártuk). */

/* ---------- 3) BUTTONS ---------- */
/* Bootstrap btn — Falcon stilus */
.btn {
    border-radius: 0.4rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: none;
}

.btn-sm { border-radius: 0.35rem; padding: 0.25rem 0.7rem; font-size: 0.78rem; }
.btn-lg { border-radius: 0.5rem; padding: 0.6rem 1.4rem; font-size: 1rem; }

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary,
.btn-dark {
    border-width: 1px;
}

.btn-primary:hover,
.btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.2); }
.btn-success:hover,
.btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(0, 210, 122, 0.2); }
.btn-danger:hover,
.btn-danger:focus { box-shadow: 0 0 0 0.2rem rgba(230, 55, 87, 0.2); }

/* DevExpress BootstrapButton wrapper */
.dxbsButton {
    border-radius: 0.4rem !important;
}

/* ⚠️ 2026-08-12: a tisztán DevExpress ASPxButton felülírása (.dxbButton /
   .dxbButtonSys / input.dxbButton[type="submit"] + a hover-állapot) SZINTÉN
   KI LETT VÉVE, ugyanabból az okból, mint a fenti editor-blokkok: a kék
   background-color + padding `!important`-tal MINDEN DevExpress gombra hatott,
   beleértve az ASPxHtmlEditor eszköztárának gombjait is, ami ott kék téglákat
   csinált a szokásos ikonos gombok helyett.
   A .dxbsButton (DevExpress BOOTSTRAP button) szabálya SZÁNDÉKOSAN MARADT: az
   egy másik vezérlőcsalád, amit eleve Bootstrap-kinézetre szántak. */

/* DevExpress GridView command oszlop gombok */
.dxgvCommandColumnItem {
    border-radius: 0.35rem !important;
    padding: 0.2rem 0.55rem !important;
}

/* ---------- 4) CHECKBOXES ---------- */
/* Bootstrap 5 form-check */
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    background-color: #fff;
    border: 1px solid #b6c1d2;
    border-radius: 0.3em !important;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.form-check-input:checked {
    background-color: #2c7be5;
    border-color: #2c7be5;
}

.form-check-input:focus {
    border-color: #b6c1d2;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.15);
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-label {
    color: #344050;
    font-size: 0.85rem;
    padding-left: 0.25rem;
    cursor: pointer;
}

/* Switch (form-switch) */
.form-switch .form-check-input {
    border-radius: 2em !important;
    width: 2em;
}

/* ---------- 5) DEVEXPRESS ASPxCheckBox ---------- */
/* DX checkbox span és input együtt — Falcon look */
.dxeBase_Theme .dxICheckBox,
.dxICheckBox,
.dxICheckBox_Theme {
    border-radius: 0.3rem !important;
}

.dxichSys {
    border-radius: 0.3rem !important;
    border: 1px solid #b6c1d2 !important;
    background-color: #fff !important;
    width: 1.1em !important;
    height: 1.1em !important;
    transition: background-color 0.15s, border-color 0.15s !important;
}

/* Checked állapot a span-en */
.dxICheckBox.dxichChecked .dxichSys,
.dxichChecked .dxichSys,
.dxichSys.dxichChecked {
    background-color: #2c7be5 !important;
    border-color: #2c7be5 !important;
}

/* DX checkbox label */
.dxeBase_Theme.dxICheckBox span,
.dxICheckBox span {
    color: #344050 !important;
    font-size: 0.85rem !important;
    padding-left: 0.4rem !important;
}

/* ---------- 6) FORM-FLOATING (Bootstrap 5) ---------- */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.25rem + 2px);
    padding: 1rem 0.85rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.form-floating > label {
    padding: 1rem 0.85rem;
    color: #6c757d;
    font-size: 0.85rem;
    border: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.7;
    transform: scale(0.78) translateY(-0.5rem) translateX(0.15rem);
}

/* ---------- 7) FORM-LABEL ---------- */
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: #344050;
}

/* ---------- 8) INPUT GROUP ---------- */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: 0.5rem;
}

.input-group > :first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-text {
    background-color: #f9fafd;
    border: 1px solid #d8e2ef;
    color: #6c757d;
    font-size: 0.85rem;
}

/* ---------- 9) VALIDATION / IS-INVALID ---------- */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #e63757;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(230, 55, 87, 0.15);
}

.invalid-feedback {
    color: #e63757;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ---------- 10) SELECT (asp:DropDownList renderel <select>-et) ---------- */
/* ⚠️ Ez a szabály HELYES és bizonyítottan működik: a sys_AuditLog.aspx ugyanezt
   kapja (a master page tölti be minden lapra), és ott a legördülők rendben
   jelennek meg. A "levágott szöveg" hibát NEM ez okozta, hanem a
   Content/css/module-forms.css fix magasság-szabálya — l. az ottani
   "SELECT — NATÍV MÉRETEZÉS" blokkot. Ezt a szabályt szándékosan NEM
   módosítjuk, hogy a stílus egységes maradjon a működő lapokkal. */
select.form-control,
select.form-select {
    border-radius: 0.5rem;
    padding: 0.45rem 2rem 0.45rem 0.85rem;
    border: 1px solid #d8e2ef;
    background-color: #fff;
    font-size: 0.85rem;
}

/* ---------- 11) JELSZÓ TOGGLE (Login/Register-ben használt minta) ---------- */
.input-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #94a3b8;
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 3;
}

.toggle-password:hover { color: #475569; }

/* Form-floating-ben a toggle picit feljebb (mert a textbox magasabb) */
.form-floating .toggle-password {
    top: 50%;
    right: 0.85rem;
}

/* ---------- 12) CARD (Falcon look — körítés a form köré) ---------- */
.card {
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    box-shadow: 0 0.1rem 0.35rem 0 rgba(50, 50, 93, 0.05);
}

/* ============================================================
   FONT AWESOME CSS-ONLY KOMPATIBILITÁS
   A Falcon theme.css alapból FA SVG-with-JS-szel készült:
     .fa-icon-wait { opacity: 0 }
     .fontawesome-i2svg-active .fa-icon-wait { opacity: 1 }
   A FA JS adta volna hozzá a body-hez a 'fontawesome-i2svg-active'
   osztályt, miután SVG-re konvertálta az ikonokat.
   De a projekt CSS-only webfontot használ (font-awesome/6.7.2/all.min.css),
   ezért a JS sosem fut le, az ikonok láthatatlanok maradnak.
   Felülírjuk hogy mindig láthatóak legyenek.
   ============================================================ */
.fa-icon-wait,
.fa-icon-wait > .fas,
.fa-icon-wait > .far,
.fa-icon-wait > .fab,
.fa-icon-wait > .fa {
    opacity: 1 !important;
    visibility: visible !important;
}

/* data-fa-transform="shrink-N" attribútumokat a CSS-only webfont
   ignorálja, ezért közelítő font-size csökkentéssel szimuláljuk.
   Csak akkor érvényes, ha NINCS inline font-size override. */
[data-fa-transform*="shrink-2"]:not([style*="font-size"]) { font-size: 0.85em; }
[data-fa-transform*="shrink-3"]:not([style*="font-size"]) { font-size: 0.78em; }
[data-fa-transform*="shrink-4"]:not([style*="font-size"]) { font-size: 0.70em; }
[data-fa-transform*="shrink-6"]:not([style*="font-size"]) { font-size: 0.55em; }

/* ---------- 13a) NAVBAR ICON SOR — ikonok közti távolság ---------- */
/* A felső navbar ikonsorában (theme switcher, harang, nyelv, avatar)
   szellősebb gap, hogy ne lógjanak össze a kattintási területek. */
.navbar-nav-icons {
    gap: 0.6rem;
    align-items: center;
}

/* Fallback olyan böngészőkre, ahol a flex-gap támogatás gyenge */
@supports not (gap: 0.6rem) {
    .navbar-nav-icons > .nav-item + .nav-item {
        margin-left: 0.6rem;
    }
}

/* A theme-switcher li-ének padding-jét hangoljuk, hogy konzisztens legyen
   a többi ikonnal (eredetileg ps-2 pe-0 volt, ami aszimmetrikus). */
.navbar-nav-icons > li.nav-item.ps-2.pe-0 {
    padding-left: 0 !important;
}

/* ---------- 13) NOTIFICATION BELL — pulse animáció új notif esetén ---------- */
@keyframes wl-bell-shake {
    0%, 100% { transform: rotate(0); }
    10%, 30%, 50% { transform: rotate(-12deg); }
    20%, 40%, 60% { transform: rotate(12deg); }
    70% { transform: rotate(0); }
}

.wl-bell-pulse > span.fas.fa-bell {
    animation: wl-bell-shake 0.9s ease-in-out infinite;
    color: #e63757 !important;
    transform-origin: 50% 0;
}

/* ------------------------------------------------------------
   Notif tételek a haranghoz tartozó legördülőben — KÁRTYÁS nézet.

   ⚠️ A .list-group-flush (l. WL.master dropdown markup) szándékosan
   kivesz minden keretet és lekerekítést, hogy a tételek összefüggő
   listát alkossanak. Itt ezt ÍRJUK FELÜL: minden tétel önálló kártya,
   oldalt levegővel. Ezért kell a felülíró érték több helyen — nem
   feleslegesen van ott.
   ------------------------------------------------------------ */
/* ⚠️ A SZELEKTOR SZÁNDÉKOSAN CSAK AZ OSZTÁLYRA ÉPÜL.
   A korábbi változat `.dropdown-menu-notification .list-group-flush > ...`
   volt, ami két RAJTUNK KÍVÜLI dologtól függött: hogy a legördülő megtartja
   a Falcon-témától kapott osztálynevét, és hogy a tétel közvetlen gyereke
   marad a listának. A `wl-not-item` osztályt viszont EGYETLEN hely állítja
   elő (WL.master.vb, a notif-tétel renderelése), tehát az önmagában pontos
   és nem tud elcsúszni a téma frissítésekor. */
.wl-not-item {
    /* Oldalsó levegő: a kártya nem ér hozzá a legördülő széléhez. */
    margin: 0.35rem 0.6rem !important;
    padding: 0.6rem 0.75rem !important;
    /* A .list-group-flush minden keretet és lekerekítést kivesz
       (border-width: 0 0 1px; border-radius: 0), ezért kell a felülírás. */
    border: 1px solid #e3e6ed !important;
    border-radius: 0.6rem !important;
    background-color: #fff;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* A lista tetején/alján a flush-nál elmaradó térköz pótlása, hogy az
   első és az utolsó kártya se tapadjon a fejléchez / lábléchez. */
.wl-not-item:first-child { margin-top: 0.5rem !important; }
.wl-not-item:last-child  { margin-bottom: 0.5rem !important; }

.wl-not-item:hover {
    background-color: #f9fafd;
    box-shadow: 0 0.25rem 0.5rem rgba(31, 45, 65, 0.08);
    transform: translateY(-1px);
}

/* Olvasatlan tétel — bal oldali kék jelzés.
   A vastagabb bal szegély kiváltja a kártya saját keretét azon az oldalon,
   ezért a lekerekítést itt ÚJRA ki kell mondani: enélkül a bal sarkok
   elszögletesednének. */
.wl-not-unread {
    background-color: #f0f6ff !important;
    border-left: 3px solid #2c7be5 !important;
    border-radius: 0.6rem !important;
}

.wl-not-unread .fw-semibold {
    color: #1f4e79 !important;
}

/* A csoportcím („ÚJ") a kártyák bal élére igazodjon — enélkül a kártyák
   beljebb kezdődnének, mint a fölöttük lévő felirat. */
.dropdown-menu-notification .list-group-title {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

/* ============================================================
   14) NOTIFICATIONS PAGE — kártyás megjelenítés
   ============================================================ */

.notifications-page .notif-kpi-card {
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notifications-page .notif-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(31, 45, 65, 0.08) !important;
}

.notifications-page .notif-kpi-icon {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background-color: #f9fafd;
}

.notifications-page .notif-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.notifications-page .notif-kpi-label {
    font-size: 0.78rem;
    color: var(--bs-secondary);
    margin-top: 2px;
}

/* --- Filter pill-ek --- */
.notifications-page .notif-filter-group .btn {
    border-radius: 999px !important;
    padding: 0.3rem 0.85rem;
    font-weight: 500;
    border-color: #d8e2ef;
    color: #344050;
}

.notifications-page .notif-filter-group .btn + .btn {
    margin-left: 4px;
}

.notifications-page .notif-filter-group .btn.active {
    background-color: #2c7be5 !important;
    border-color: #2c7be5 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(44, 123, 229, 0.25);
}

.notifications-page .notif-filter-group .btn:hover:not(.active) {
    background-color: #f1f3fa;
}

/* --- Notif lista item --- */
.notifications-page .notif-list {
    border-radius: 0.75rem;
    overflow: hidden;
}

.notifications-page .notif-item {
    padding: 1rem 1.25rem;
    border-left: 4px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: default;
}

.notifications-page .notif-item:hover {
    background-color: #f9fafd;
}

.notifications-page .notif-item.notif-unread {
    background-color: #f0f6ff;
    border-left-color: #2c7be5;
}

.notifications-page .notif-item.notif-unread:hover {
    background-color: #e6f1fb;
}

.notifications-page .notif-item.notif-important {
    border-left-color: #f5803e;
}

.notifications-page .notif-item.notif-unread.notif-important {
    border-left-color: #f5803e;
    background-color: #fff5ec;
}

/* --- Avatar / ikon --- */
.notifications-page .notif-avatar {
    width: 44px;
    height: 44px;
}

.notifications-page .notif-avatar-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
}

.notifications-page .notif-avatar-icon,
.notifications-page .notif-avatar-initials {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.notifications-page .notif-avatar-icon i {
    font-size: 1.1rem;
}

/* --- Tartalom --- */
.notifications-page .notif-sender {
    font-size: 0.9rem;
    color: #344050;
}

.notifications-page .notif-subject {
    font-size: 0.92rem;
    color: #232e3c;
    line-height: 1.4;
}

.notifications-page .notif-item.notif-unread .notif-subject {
    color: #0c2964;
}

.notifications-page .notif-preview {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notifications-page .notif-date {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* --- Akció gombok (csak hover-en jelennek meg desktop-on) --- */
.notifications-page .notif-actions {
    opacity: 0.4;
    transition: opacity 0.15s ease;
    display: flex;
    gap: 2px;
}

.notifications-page .notif-item:hover .notif-actions {
    opacity: 1;
}

.notifications-page .notif-actions .btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
}

.notifications-page .notif-actions .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* --- "Olvasott" → a check gombot elrejtjük --- */
.notifications-page .notif-item:not(.notif-unread) .notif-mark-btn {
    display: none;
}

/* --- Üres állapot --- */
.notifications-page .notif-empty {
    padding: 3rem 1rem;
}

.notifications-page .notif-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    display: block;
}

/* --- Min-width 0 a flexgrow-os tartalomhoz, hogy a text-overflow működjön --- */
.notifications-page .min-width-0 {
    min-width: 0;
}

/* --- Mobile: akció gombok mindig láthatóak --- */
@media (max-width: 575.98px) {
    .notifications-page .notif-actions {
        opacity: 1;
    }
    .notifications-page .notif-item {
        padding: 0.75rem 0.85rem;
    }
}

/* ============================================================
   15) MODAL — Globális függőleges + vízszintes középre igazítás
   Bootstrap JS display:block-ot állít a .modal-ra megnyitáskor,
   ezért a .modal.show szelektorral kell felülírni display:flex-re.
   A .show osztály csak a látható modalokon van jelen, a hide/none
   működés megmarad. Vízszintes középre igazítás a margin: auto-tól jön.
   ============================================================ */
.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    margin-top: auto;
    margin-bottom: auto;
}

/* ============================================================
   16) DEVEXPRESS ASPxGridView — egyszerű, lapos Falcon-kinézet
   ✅ Hibajavítás (2026-08): a nyers DevExpress "Moderno" grid-téma
   (fejsor, szűrősor, üres-állapot) vizuálisan idegen volt a Falcon/
   Bootstrap felület mellett — túl nagy térközök, aránytalan üres-
   állapot ikon+szöveg, egyenetlen fejsor. A cél NEM a DevExpress
   kidobása, csak a keretezés/térköz/tipográfia egyszerűsítése úgy,
   hogy illeszkedjen a többi (form-control-alapú) vezérlőhöz. A
   szűrősor szerkesztői szögletesek maradhatnak (nincs border-radius
   rájuk kényszerítve) — ez szándékos, a felhasználói kérés szerint.
   Mindhárom osztálynevet (generikus + "_Moderno" + "_MetropolisBlue"
   témaszuffixált) célozzuk — kiderült, hogy 6 lapon (pl. HrInvitationList,
   VehicleList, DriverAdmin, MenuEditor, MenuSystem, ps_ViewEvent) a grid
   explicit Theme="MetropolisBlue"-t kapott a globális GlobalTheme="Moderno"
   helyett, ezért ott a "_Moderno" szuffixú szabályok nem találtak semmit.
   ============================================================ */

/* --- Grid külső keret --- */
.dxgvControl,
.dxgvControl_Moderno,
.dxgvControl_MetropolisBlue {
    border: 1px solid #e3e6f0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.dxgvControl table,
.dxgvControl_Moderno table,
.dxgvControl_MetropolisBlue table {
    font-size: 0.85rem !important;
}

/* --- Fejsor: lapos, halvány háttér, kompakt padding --- */
.dxgvHeader,
.dxgvHeader_Moderno,
.dxgvHeader_MetropolisBlue {
    background-color: #f9fafd !important;
    background-image: none !important;
    color: #5e6e82 !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 0.75rem !important;
    border-bottom: 1px solid #e3e6f0 !important;
    border-right: none !important;
    vertical-align: middle !important;
}

/* Rendezés-nyíl ikon — ne foglaljon túl sok helyet */
.dxgvHeader .dx-vam,
.dxgvHeader_Moderno .dx-vam,
.dxgvHeader_MetropolisBlue .dx-vam {
    vertical-align: middle !important;
}

/* --- Adatsorok: kompakt padding, halvány elválasztó --- */
.dxgvDataRow td,
.dxgvDataRow_Moderno td,
.dxgvDataRow_MetropolisBlue td {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.85rem !important;
    color: #344050 !important;
    border-bottom: 1px solid #f1f3fa !important;
    border-right: none !important;
    vertical-align: middle !important;
}

.dxgvAltRow td,
.dxgvAltRow_Moderno td,
.dxgvAltRow_MetropolisBlue td {
    background-color: #fbfcfe !important;
}

.dxgvDataRow:hover td,
.dxgvDataRow_Moderno:hover td,
.dxgvDataRow_MetropolisBlue:hover td {
    background-color: #f5f8fd !important;
}

.dxgvFocusedRow td,
.dxgvFocusedRow_Moderno td,
.dxgvFocusedRow_MetropolisBlue td,
.dxgvSelectedRow td,
.dxgvSelectedRow_Moderno td,
.dxgvSelectedRow_MetropolisBlue td {
    background-color: #eaf1fc !important;
}

/* --- Szűrősor (Settings ShowFilterRow="True") --------------------------
   ✅ Újraírva 2026-08-12.

   MI VOLT A BAJ: a szűrősor szerkesztői nem töltötték ki a cellát — keskeny,
   a cella szélességéhez nem igazodó kis dobozokként lógtak a fejléc alatt.
   A régi szabály itt CSAK a cella paddingjét, hátterét és a szövegméretet
   állította; a szerkesztő SZÉLESSÉGÉHEZ (.dxeTextBoxSys / .dxeButtonEditSys)
   soha nem nyúlt hozzá. A teljes, működő szabálykészlet egyedül a
   penstore.css-ben volt meg, ezért csak a PenStore lapokon nézett ki jól.

   MIÉRT [class*="dxgvFilterRow"]: a DevExpress csak a TÉMASZUFFIXÁLT
   osztálynevet rendereli (dxgvFilterRow_Moderno, _MetropolisBlue, _Office365,
   _Aqua...), és a grid-szintű Theme="..." felülírja a globális
   GlobalTheme="Moderno"-t (WL.master.vb Page_Init). A szuffixek felsorolása
   ezért törékeny — a részleges egyezés MINDEN témára hat, új témára is.
   ---------------------------------------------------------------------- */

/* Cella: kompakt, középre igazított */
[class*="dxgvFilterRow"] > td {
    padding: 4px 6px !important;
    vertical-align: middle !important;
    background-color: #fff !important;
    border-bottom: 1px solid #e3e6f0 !important;
    border-right: none !important;
}

/* A szerkesztő TÖLTSE KI a cellát — ez volt a hiányzó szabály */
[class*="dxgvFilterRow"] table[class*="dxe"],
[class*="dxgvFilterRow"] .dxeTextBoxSys,
[class*="dxgvFilterRow"] .dxeButtonEditSys {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 0.25rem !important;
    background-color: #fff !important;
    box-shadow: none !important;
    border-collapse: separate !important;
    overflow: hidden;
}

/* A DevExpress szerkesztő belső táblájának saját térközei ki */
[class*="dxgvFilterRow"] table[class*="dxe"] td {
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: middle !important;
}

/* Beírt szöveg: a külső keret ad rámát, a belső mező legyen csupasz */
[class*="dxgvFilterRow"] input[type="text"],
[class*="dxgvFilterRow"] .dxeEditArea,
[class*="dxgvFilterRow"] .dxeEditAreaSys {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 0.5rem !important;
    font-size: 0.8125rem !important;
    line-height: 28px !important;
    color: #344050 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    vertical-align: middle !important;
}

/* Legördülő nyíl / naptár gomb: illeszkedjen a 30px-es kerethez */
[class*="dxgvFilterRow"] .dxeButton,
[class*="dxgvFilterRow"] .dxeButtonEditButton,
[class*="dxgvFilterRow"] .dxeButtonEditButtonHover,
[class*="dxgvFilterRow"] .dxeButtonEditButtonPressed,
[class*="dxgvFilterRow"] .dxeCalendarButton {
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* ============================================================
   3) BAL OLDALI MENÜ SZÉLESSÉGE  (UI kör, 2026-09-10)
   ------------------------------------------------------------
   Kérés: „a bal oldali menü legyen 5-6 pixellel szélesebb".

   ⚠️ NÉGY ÉRTÉKET KELL EGYÜTT MOZGATNI, NEM KETTŐT.
   Az első nekifutás csak a sáv `max-width`-ét és a tartalom `margin-left`-jét
   tolta el — attól a menü NEM lett szélesebb, csak egy 6px-es üres csík
   keletkezett mellette. A Falcon ugyanis a BELSŐ paneleket is külön rögzíti,
   és a menüpontok tényleges szélességét (meg a szövegek levágását) AZOK adják:

     .navbar-vertical.navbar-expand-xl              max-width   12.625rem → 13rem
     … .navbar-collapse                             width       12.625rem → 13rem
     … .navbar-vertical-content                     width       12.625rem → 13rem
     … + .content                                   margin-left 15.625rem → 16rem

   Mind a négy PONTOSAN 0.375rem-mel (6px) nő. A sáv és a tartalom-margó
   között eleve 3rem a különbség (a sáv margó/padding-je), ezt megtartjuk —
   ha csak az egyiket mozgatnánk, vagy a menü csúszna a tartalom alá, vagy
   üres csík maradna.

   ⚠️ A navbar-card / -vibrant / -inverted VÁLTOZATOKAT SZÁNDÉKOSAN KIHAGYJUK.
   Azoknál a theme.css `max-width: 14.625rem !important`-tel rögzíti a sávot,
   amit egy sima szabály nem tud felülírni — a tartalom margóját viszont
   eltolnánk, tehát ott CSAK az üres csík keletkezne, szélesebb menü nélkül.
   Ezek a stílusok futásidőben, localStorage-ból kapcsolódnak be
   (l. WL.Master 361-364), ezért a `:not(...)` szűrés a markupból nem látszik.

   ⚠️ AZ ÖSSZECSUKOTT ÁLLAPOTOT SZÁNDÉKOSAN NEM BÁNTJUK.
   A `.navbar-vertical-collapsed …` szabályok (3.125rem) érintetlenek:
   ott a sáv csak ikonsáv, a 6px ott vizuálisan értelmetlen lenne.

   ⚠️ MIÉRT ITT, ÉS NEM A theme.css-BEN.
   A theme.css a Falcon szállított fájlja; egy témafrissítés felülírná.
   Ez a fájl a WL.Master-ben a theme.css UTÁN töltődik be, tehát azonos
   specifikusság mellett is ez nyer — nem kell !important.

   A .navbar-expand-xl a WL.Master tényleges osztálya. Ha valaki egyszer
   .navbar-expand-xxl-re vált, ITT IS át kell írni mind a négy szabályt.
   ============================================================ */
@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl {
        max-width: 13rem;
    }

    .navbar-vertical.navbar-expand-xl .navbar-collapse,
    .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        width: 13rem;
    }

    /* Csak az ALAP (transparent) változat tartalom-margója. A -card/-vibrant/
       -inverted szándékosan kimarad — l. a fenti indoklást. */
    .navbar-vertical.navbar-expand-xl:not(.navbar-card):not(.navbar-vibrant):not(.navbar-inverted) + .content {
        margin-left: 16rem;
    }
}

/* ============================================================
   4) BÉRLŐ ARCULATA A FELSŐ SÁVBAN  (UI kör, 2026-09-10, v2)
   ------------------------------------------------------------
   v1-ben a blokk a jobb oldali ikoncsoport első eleme volt.
   A kért végállapot: a bérlő logója a felső sáv KÖZEPÉN, és
   cégnév CSAK akkor, ha nincs logó (l. WL.master.vb
   RenderTenantBrand).

   ⚠️ Miért abszolút pozicionálás, és nem `mx-auto`?
   A navbar bal (hamburger + Worklines-logó) és jobb (négy ikon)
   oldala nem egyforma széles, ezért a flexbox „középre" a
   MARADÉK hely közepét jelentené — vizuálisan nem a sáv közepét.
   Ráadásul minden ikon-változás (értesítés-badge, impersonation
   sáv) arrébb tolná. Abszolút pozicionálással a logó a sáv
   geometriai közepén marad, bármi történik a két szélén.

   ⚠️ A tartalmazó blokk a `.navbar-top`, mert az `position:
   sticky` (theme.css:27469) — pozicionált elem. Ezért NEM
   állítunk rá `position: relative`-t: az kilőné a sticky
   viselkedést (a felső sáv nem ragadna a lap tetejére).

   ⚠️ `pointer-events: none`: a blokk szélesebb lehet a látható
   tartalmánál, és átlóg a nav fölött. Kattintást soha nem foghat
   el a hamburgertől vagy az ikonoktól. A blokk nem interaktív,
   így ez semmit nem visz el.

   ⚠️ `z-index: 0`: a `.navbar-nav-icons .dropdown-menu` abszolút
   pozicionált (theme.css:27480), így a legördülők a logó FÖLÉ
   kell kerüljenek — ezért a logó kap alacsony (de nem negatív)
   rétegsorrendet.

   A logó magasságát KÖTJÜK, a szélességét nem: a feltöltött képek
   aránya bérlőnként más (van széles feliratos és van négyzetes
   embléma). Fix magasság + auto szélesség mellett mindkettő
   rendesen néz ki, és a felső sáv magassága nem ugrál.
   ============================================================ */
.wl-tenant-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 40%;
    pointer-events: none;
    z-index: 0;
}

.wl-tenant-logo {
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* ⚠️ A `max-width: 100%` NEM dekoráció: ez korlátozza a flex-elem automatikus
   minimális szélességét, e nélkül a `text-overflow: ellipsis` néma módon nem
   csinálna semmit (a szöveg egyszerűen kilógna). Ne töröld. */
.wl-tenant-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
}

/* Fókusz-visszajelzés, a Bootstrap mezőkkel egyező hangsúllyal */
[class*="dxgvFilterRow"] .dxeTextBoxSys:focus-within,
[class*="dxgvFilterRow"] .dxeButtonEditSys:focus-within {
    border-color: #9ec2f3 !important;
}

/* --- Üres-állapot sor: ne foglaljon feleslegesen sok helyet --- */
.dxgvEmptyDataRow td,
.dxgvEmptyDataRow_Moderno td,
.dxgvEmptyDataRow_MetropolisBlue td {
    padding: 1.5rem 1rem !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
}

.dxgvEmptyDataRow td i,
.dxgvEmptyDataRow_Moderno td i,
.dxgvEmptyDataRow_MetropolisBlue td i,
.dxgvEmptyDataRow td .fas,
.dxgvEmptyDataRow_Moderno td .fas,
.dxgvEmptyDataRow_MetropolisBlue td .fas {
    font-size: 1.6rem !important;
    opacity: 0.4;
    display: block;
    margin-bottom: 0.4rem;
}

/* --- Csoport-panel / lábsor / lapozó --- */
.dxgvGroupPanel,
.dxgvGroupPanel_Moderno,
.dxgvGroupPanel_MetropolisBlue {
    padding: 0.5rem 0.75rem !important;
    background-color: #f9fafd !important;
    font-size: 0.8rem !important;
}

.dxpLite,
.dxpLite_Moderno,
.dxpLite_MetropolisBlue,
.dxpControl,
.dxpControl_Moderno,
.dxpControl_MetropolisBlue {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    background-color: #f9fafd !important;
    border-top: 1px solid #e3e6f0 !important;
}

/* --- Command oszlop gombjai a sorban — kisebb, szöveg nélküli ikon-gomb érzés --- */
.dxgvCommandColumn,
.dxgvCommandColumn_Moderno,
.dxgvCommandColumn_MetropolisBlue {
    text-align: center !important;
}

/* ========================================================================
   ⚠️ 2026-09-07 — FONTAWESOME GYORSGOMBOK A RÁCS MŰVELETI OSZLOPÁBAN

   MI VOLT: a DevExpress CustomButton a saját sprite-ikonját (IconID) ÉS a
   resx-ből jövő szöveget is kirakta („Szerkesztés", „Visszavonás",
   „Visszafordítás"). Három gombnál ez szétfeszítette az oszlopot, és
   elütött az alkalmazás többi részének FontAwesome-os képétől.

   ⚠️ MIÉRT CSS-BŐL, ÉS MIÉRT ID-ALAPÚ SZELEKTORRAL:
   A CustomButton.Text-be HTML-t írni csak `EncodeHtml="False"` mellett
   lehetne, azt viszont a GridViewCommandColumn-on NEM tudtam igazolni a
   DevExpress v26.1 szerelvényben — nem építek olyan attribútumra, ami
   parse-hibát adhat (ez a `Settings-AllowSort` tanulsága). A CustomButton
   ToolTip property-je szintén nem igazolható, ezért a tooltip az
   Image.ToolTip-en van, kódból (l. LeaveRequest.ApplyGridButtonTooltips).

   A DevExpress a custom button linkjét olyan id-vel rendereli, ami
   tartalmazza a gomb ID-jét — erre lehet stabilan illeszteni. A DX-képet
   elrejtjük, és ::before-ral tesszük ki az FA glyphöt.

   FONTOS: a `content` glyph-kódok a FontAwesome 6 Free „solid" készletből
   valók; a `font-family` és a `font-weight: 900` együtt kell, különben a
   böngésző nem a solid arcot választja, és üres négyzet jelenik meg.
   ======================================================================== */

/* A gomb-link maga: kerek, halvány hátterű ikon-gomb */
.dxgvCommandColumn a[id*="btnEditLeave"],
.dxgvCommandColumn a[id*="btnCancelLeave"],
.dxgvCommandColumn a[id*="btnRevokeDecl"],
.dxgvCommandColumn a[id*="btnEditOt"],
.dxgvCommandColumn a[id*="btnCancelOt"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 2px;
    border-radius: 6px;
    text-decoration: none !important;
    color: #5e6e82;
    background: transparent;
    transition: background-color .12s ease, color .12s ease;

    /* ⚠️ A FELIRAT ELREJTÉSE — de NEM üres Text-tel.
       A DevExpress CustomButton üres Text esetén a GOMB ID-JÉT rendereli
       feliratként (ez a hiba produkálta a „btnEditLeave" szövegeket a
       rácsban). Ezért a Text valódi marad (a tooltip szövege), és itt
       nullázzuk a méretét. A ::before glyph saját font-size-ot kap, tehát
       az látszik. A szöveg a DOM-ban marad — akadálymentesség. */
    font-size: 0 !important;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
}

.dxgvCommandColumn a[id*="btnEditLeave"]:hover,
.dxgvCommandColumn a[id*="btnCancelLeave"]:hover,
.dxgvCommandColumn a[id*="btnRevokeDecl"]:hover,
.dxgvCommandColumn a[id*="btnEditOt"]:hover,
.dxgvCommandColumn a[id*="btnCancelOt"]:hover {
    background: #edf2f9;
}

/* A DevExpress sprite-képét elrejtjük — az FA glyph veszi át a helyét.
   A ToolTip az <img> alt/title-jén ül, ezért a képet NEM töröljük ki a
   DOM-ból (display:none), csak nullára méretezzük: így a tooltip megmarad. */
.dxgvCommandColumn a[id*="btnEditLeave"] img,
.dxgvCommandColumn a[id*="btnCancelLeave"] img,
.dxgvCommandColumn a[id*="btnRevokeDecl"] img,
.dxgvCommandColumn a[id*="btnEditOt"] img,
.dxgvCommandColumn a[id*="btnCancelOt"] img {
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
    position: absolute;
}

/* Az FA glyph — közös alap */
.dxgvCommandColumn a[id*="btnEditLeave"]::before,
.dxgvCommandColumn a[id*="btnCancelLeave"]::before,
.dxgvCommandColumn a[id*="btnRevokeDecl"]::before,
.dxgvCommandColumn a[id*="btnEditOt"]::before,
.dxgvCommandColumn a[id*="btnCancelOt"]::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}

/* Szerkesztés — toll */
.dxgvCommandColumn a[id*="btnEditLeave"]::before,
.dxgvCommandColumn a[id*="btnEditOt"]::before { content: "\f304"; }

/* Visszavonás — X, piros hangsúllyal (romboló művelet) */
.dxgvCommandColumn a[id*="btnCancelLeave"]::before,
.dxgvCommandColumn a[id*="btnCancelOt"]::before { content: "\f00d"; color: #d1495b; }

/* Bejelentés visszafordítása — visszanyíl */
.dxgvCommandColumn a[id*="btnRevokeDecl"]::before { content: "\f0e2"; color: #2c7be5; }

/* ============================================================
   KAPCSOLÓ (toggle) — GLOBÁLIS
   ============================================================
   ✅ 2026-09-15 — a GroupAdmin.aspx lap-helyi megoldásából emelve ide, hogy
   MINDEN lap használhassa. A GroupAdmin <style> blokkja elhagyható, ha ez a
   fájl ki van szolgálva; addig a kettő azonos, tehát nem ütközik.

   MIÉRT NEM a Bootstrap .form-switch:
   az asp:CheckBox a renderelt HTML-t környezettől függően <span>-be csomagolja
   (pl. Enabled=False esetén), a Bootstrap switch viszont szigorú szülő/testvér
   struktúrára épül. Ez korábban DUPLA vezérlőt (checkbox + kapcsoló egymás
   mellett), majd sima checkboxot eredményezett. Az alábbi :has()-alapú
   megoldás a struktúrától FÜGGETLENÜL megtalálja a bemenetet.

   HASZNÁLAT (a code-behind .Checked logikája VÁLTOZATLAN marad):
       <label class="wl-switch">
           <asp:CheckBox ID="chkX" runat="server" />
           <span class="wl-switch-track" aria-hidden="true"></span>
           <span class="wl-switch-text">Felirat</span>
       </label>

   ⚠️ A CheckBox-on NE legyen CssClass és NE legyen Text:
      - CssClass Text nélkül a körülvevő <span>-re kerül, nem az <input>-ra;
      - a Text saját <label>-t rendereltetne, ami ütközik a burkoló label-lel.
      A feliratot a .wl-switch-text span adja. A kattintást a burkoló <label>
      natívan kezeli — nincs szükség "for" attribútumra és JS-re sem.
   ============================================================ */
.wl-switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.wl-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 1.25rem;
    background: #dee2e6;
    border: 1px solid #ced4da;
    border-radius: 999px;
    transition: background-color .16s ease, border-color .16s ease;
}

.wl-switch-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: .17rem;
    width: .86rem;
    height: .86rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
    transform: translateY(-50%);
    transition: left .16s ease;
}

.wl-switch-text { font-size: .85rem; color: #344050; }

/* Csak akkor rejtjük el a natív jelölőnégyzetet, ha a böngésző támogatja a
   :has()-t — különben egy halott sávot kapnánk kattinthatatlanul. */
@supports selector(:has(*)) {
    .wl-switch input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .wl-switch:has(input:checked) .wl-switch-track {
        background: #2c7be5;
        border-color: #2c7be5;
    }

    .wl-switch:has(input:checked) .wl-switch-track::after {
        left: calc(100% - 1.03rem);
    }

    .wl-switch:has(input:disabled) { opacity: .55; cursor: not-allowed; }

    .wl-switch:has(input:focus-visible) .wl-switch-track {
        box-shadow: 0 0 0 .2rem rgba(44, 123, 229, .25);
    }
}

/* Régi böngésző (nincs :has()): a sávot elrejtjük, a natív checkbox látszik. */
@supports not selector(:has(*)) {
    .wl-switch-track { display: none; }
}

/* ⚠️ Letiltott asp:CheckBox: a WebForms ilyenkor NEM az <input>-ra teszi a
   disabled stílust, hanem egy <span class="aspNetDisabled"> burkolót rendereltet
   köré. Az a span a .wl-switch flex-konténerének önálló eleme lenne, és behúzna
   még egy `gap`-nyi (.6rem) térközt a sáv elé — a kapcsoló elcsúszna a feliratához
   képest, de CSAK letiltott állapotban, ezért könnyű nem észrevenni.
   A display:contents kiveszi a spant a flex-elrendezésből úgy, hogy a benne lévő
   <input> a helyén marad (display:none-t NEM szabad: azzal a checkbox maga tűnne
   el, és a :has(input:checked) szelektorok is működésképtelenné válnának).
   Első előfordulás: Offers\OfferEdit.aspx chkIsEvent (OfferEdit.aspx.vb → Enabled=False). */
.wl-switch > span.aspNetDisabled { display: contents; }

/* ============================================================
   KAPCSOLÓ asp:CheckBox-hoz SZERKEZETVÁLTOZTATÁS NÉLKÜL — .wl-toggle
   ============================================================
   ✅ 2026-10-02 — A .wl-switch (fent) külön sáv-spant és szöveg nélküli
   CheckBox-ot igényel. Sok lapon viszont a CheckBox feliratát a code-behind
   állítja (chkX.Text = …), vagy a CheckBox egy táblázatcellában áll — ott a
   szerkezet átírása kockázatos. A .wl-toggle MAGÁT a natív <input>-ot rajzolja
   kapcsolónak (appearance: none), így:

       <asp:CheckBox ID="chkX" runat="server" CssClass="wl-toggle" />
           → <span class="wl-toggle"><input type="checkbox" …><label …>Felirat</label></span>

   működik felirattal és felirat nélkül, Enabled=False-szal (aspNetDisabled
   span) és repeaterben is. Natív HTML inputon: <input type="checkbox" class="wl-toggle">.
   A színek és méretek a .wl-switch-csel azonosak.

   ⚠️ Kijelölő (sor-kijelölés, „mind kijelölése", jogosultság-mátrix)
   checkboxra SZÁNDÉKOSAN NE tedd rá — azok a felületi konvenció szerint
   jelölőnégyzetek maradnak.
   ============================================================ */
.wl-toggle { display: inline-flex; align-items: center; gap: .5rem; }
.wl-toggle input[type="checkbox"],
input[type="checkbox"].wl-toggle {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 1.25rem;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ced4da;
    border-radius: 999px;
    background-color: #dee2e6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    transition: background-position .16s ease, background-color .16s ease, border-color .16s ease;
}
.wl-toggle input[type="checkbox"]:checked,
input[type="checkbox"].wl-toggle:checked {
    background-color: #2c7be5;
    border-color: #2c7be5;
    background-position: right center;
}
.wl-toggle input[type="checkbox"]:focus-visible,
input[type="checkbox"].wl-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(44, 123, 229, .25);
}
.wl-toggle input[type="checkbox"]:disabled,
input[type="checkbox"].wl-toggle:disabled { opacity: .55; cursor: not-allowed; }
.wl-toggle label { margin: 0; cursor: pointer; }
/* Sor: kapcsoló + külön <label for> (a korábbi .form-check szerkezet helyett). */
.wl-toggle-row { display: flex; align-items: center; gap: .5rem; }
.wl-toggle-row > label { margin: 0; cursor: pointer; }
span.wl-toggle-row, label.wl-toggle-row { display: inline-flex; }

/* ============================================================
   EZRES TAGOLÁSÚ SZÁMMEZŐ — .wl-num  (Content/js/wl-number.js)
   ============================================================
   ✅ 2026-10-02 — A mező „1 234 567" alakban mutatja az értéket, beküldés
   előtt a szkript visszaalakítja tagolás nélkülire. Jobbra igazítva.
   ============================================================ */
input.wl-num { text-align: right; font-variant-numeric: tabular-nums; }
/* DevExpress ASPxTextBox: a .wl-num a burkolóra kerül, a mező a benne lévő input. */
.wl-num input[type="text"] { text-align: right; font-variant-numeric: tabular-nums; }