.reservation-calendar .calendar-layout > span, .reservation-calendar .calendar-day-header {
    font-size: 1.3em;
}

.reservation-calendar .calendar-title .btn:first-child {
    display:none
}

.reservation-calendar .calendar-layout > span, .reservation-calendar .calendar-day-header {
    font-size: 1.3em;
}

.reservation-calendar .calendar-title .btn:first-child {
    display:none
}

.desk-setup-table {
    table-layout: fixed;
}
.desk-setup-table th, .desk-setup-table td {
    width: 69px;
}
.desk-setup-table .weekend + .weekend {
    border-right: 2px solid #f35454;
}
.params-table td:empty::before {
    content: "—";
}





/* ==========================================================================
   Kiwi2 Alkalmazás Globális Stíluslap (m.tableversum.com adaptív téma)
   Azonosító (ID): 9999 | Név: custom-global-skin
   
   FEJLESZTÉSI TAPASZTALATOK ÉS TANULSÁGOK (LESSONS LEARNED):
   --------------------------------------------------------------------------
   1. Gyorsítótárazás és Cache-busting:
      - A Kiwi CRM a stíluslapokat adatbázisból tölti be és a `date_modified` mező 
        alapján gyorsítótárazza a kliensoldalon. A stíluslap módosítása után a 
        `date_modified` mezőt kötelező a frissítés időpontjára módosítani, különben 
        a böngészők a régi (cache-elt) verziót jelenítik meg.
   
   2. Bezárt oldalsáv aktív ikon háttér (Tall Capsule hiba):
      - A bezárt oldalsávban (.sidebar.closed) a menüpontok alapértelmezett 
        magassága (min-height: 2.4rem) megmarad, míg a szélességük lecsökken, így 
        az aktív elem fehér háttere függőlegesen megnyúlt ovális kapszulává válik.
      - Megoldás: A `.sb-item-content` szélességét és magasságát azonos méretűre 
        (1.8rem) kell korlátozni, a függőleges min-height-et és line-height-et felülírva, 
        hogy szabályos négyzetes (border-radius: 6px) ikondobozt kapjunk.
   
   3. Ikonok aszimmetrikus igazítása (Off-center hiba):
      - Nyitott állapotban az ikonoknak `.sb-item-icon { margin-right: 0.6rem }` 
        szabály ad térközt a felirat előtt. Bezárt állapotban ez a margó aszimmetrikusan 
        eltolja az ikont balra a négyzetes kijelölőn belül.
      - Megoldás: A bezárt oldalsáv ikonjainál kötelező a `margin: 0 !important` és 
        `padding: 0 !important` használata a tökéletes horizontális és vertikális 
        középre igazításhoz.
   
   4. Kattinthatósági probléma (router-link elrejtése):
      - A bezárt oldalsávban el kell rejteni a feliratokat, almenü-nyilakat és egyéb 
        nem kívánt elemeket. Egy naiv szelektor (`*:not(.sb-item-icon)`) elrejti a 
        navigációért felelős, abszolút pozicionált `.sb-item-path` (router-link) 
        elemet is, így a menüpontok kattinthatatlanná válnak.
      - Megoldás: A kivételszabályt ki kell terjeszteni a link elemre is: 
        `> *:not(.sb-item-icon):not(.sb-item-path) { display: none !important; }`.
      5. Oszlopszélesség-állítás és th overflow:
      - Ha a fejléc cellákra (.table th) overflow: hidden szabályt teszünk, a böngésző 
        levágja a cellákból kilógó abszolút pozicionált átméretező sávokat (span[style*="col-resize"]). 
        Ez a kattintható felületet 8px-ről 4px-re csökkenti a határvonal bal oldalán, és 
        teljesen használhatatlanná teszi a szomszédos cella felől.
      - Megoldás: A fejléc th-k overflow szabályát alapértelmezetten (overflow: visible) kell hagyni, 
        és az átméretezési zóna (span) :hover::after pseudo-elemére kell tenni a vizuális highlight vonalat.

   6. Sormagasság finomhangolása (List/Admin vs View):
      - A táblázatos elrendezések sűrűségének növelésére a fejléc (.table th) és cella (.table td) 
        függőleges paddingjét 0.75rem-ről 0.34rem-re csökkentettük (30%-os magasságcsökkenés a list/admin nézetben).
      - A részletes (view/details) nézetben (.crud-details-table td) a sormagasságot 20% + további 15%-kal 
        csökkentettük, a függőleges paddinget 0.33rem-re állítva a jobb olvashatóság érdekében.
      7. Cella tartalom lebegő megjelenítése (Hover Tooltip - Feltételes és Vibrálásmentes):
      - Csak akkor jelenik meg a lebegő tooltip, ha a cella tartalma ténylegesen csonkolt (overflowing).
      - Egy globális JS eseményfigyelő (mouseover) a scrollWidth > clientWidth feltétellel detektálja 
        az overflow állapotot, és a cella formázott szöveges értékét elmenti a szülő td[data-tooltip] attribútumába.
      - A tooltip egy td::after pszeudo-elemként jelenik meg absolute pozicionálással, így a cella 
        valódi tartalma (input vagy div) folyamatosan a normál áramlásban (relative flow) marad.
      - Mivel a cella fizikai magassága és elrendezése sosem omlik össze (collapse), a lebegtetés 
        teljesen vibrálásmentes és stabil.
      - A pointer-events: none szabály biztosítja a kattinthatóságot és az inline szerkeszthetőséget.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. VILÁGOS MÓD (LIGHT MODE) - ALAPÉRTELMEZETT BEÁLLÍTÁSOK
     ------------------------------------------------------------------------ */
  --bg-main: #f4f4f5;        /* Zinc-100: Kellemes, modern világos háttér */
  --bg-sidebar: #3f3f46;     /* Zinc-700: Sötét oldalsáv világos módban is (Tableversum) */
  --bg-card: #ffffff;        /* Kártyák háttere: tiszta fehér */
  --border-color: #e4e4e7;   /* Szegélyek és elválasztó vonalak (Zinc-200) */
  --accent-color: #C49E6F;   /* Tableversum Arany/Homok */
  --accent-hover: #BDA588;   /* Világosabb arany gombok hover állapotához */
  --accent-glow: rgba(196, 158, 111, 0.15); /* Enyhe arany ragyogás fókusz állapotokhoz */
  --text-main: #18181b;      /* Fő szövegszín: nagyon sötét szürke (Zinc-900) */
  --text-muted: #71717a;     /* Halvány szöveg (Zinc-500) */
  --text-active: #09090b;    /* Kiemelt szöveg: fekete/mélysötét (Zinc-950) */
  --font-family: 'Barlow', 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  
  /* Világos mód specifikus árnyékok és háttér-tranzíciók */
  --hover-bg: rgba(24, 24, 27, 0.04);      /* Finom sötétedés a fő kontentben */
  --selected-bg: rgba(196, 158, 111, 0.08);  /* Kiválasztott elem háttérszíne */
  --card-shadow: 0 4px 20px rgba(24, 24, 27, 0.05); /* Lágy árnyék a kártyák alatt */
  --sidebar-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); /* Oldalsáv sötét árnyéka */
  --input-bg: #ffffff;                     /* Beviteli mezők fehér háttere */
  --input-focus-bg: #ffffff;               /* Beviteli mező háttere aktív állapotban */
  --table-header-bg: #fafafa;              /* Táblázat fejléc enyhe szürke háttere */
  --table-row-hover: #fafafa;              /* Táblázat sorok hover háttere */
  --icon-active: #C49E6F;                  /* Aktív ikonok színe (arany) */

  /* Oldalsáv (Sidebar) specifikus változók világos módban (hogy sötét maradjon) */
  --sidebar-text: #d4d4d8;                 /* Halvány szürke ikonok/szövegek (Zinc-300) */
  --sidebar-text-active: #18181b;          /* Sötétszürke szöveg aktív elemnél (Zinc-900) */
  --sidebar-item-active-bg: #ffffff;       /* Fehér háttér aktív elemnél */
  --sidebar-border-color: #27272a;         /* Sötét elválasztó vonalak (Zinc-800) */

  /* Eszköztár (Toolbar) specifikus változók világos módban (hogy sötét maradjon) */
  --bg-toolbar: #3f3f46;                   /* Sötét oldalsávval azonos színű toolbar (Zinc-700) */
  --text-toolbar: #fafafa;                 /* Világos szövegek a toolbarban (Zinc-50) */
  --toolbar-input-bg: #27272a;             /* Sötétebb beviteli mezők a toolbarban (Zinc-800) */
  --toolbar-border-color: #52525b;         /* Szegély a toolbar inputoknak */

  /* Rendszerszínek (Tableversum sémára szabva) */
  --red: #dc3545;
  --yellow: #ffc107;
  --green: #28a745;
  --blue: #007bff;
  --indigo: #6610f2;
  --orange: #fd7e14;
  --white: #ffffff;
  --light: #f8f9fa;
  --dark: #343a40;
}

body.dark-mode {
  /* ------------------------------------------------------------------------
     2. SÖTÉT MÓD (DARK MODE) - FELÜLÍRÁSOK
     ------------------------------------------------------------------------ */
  --bg-main: #18181b;        /* Zinc-900: Modern mélysötét háttér */
  --bg-sidebar: #27272a;     /* Zinc-800: Kicsit világosabb sötétszürke oldalsáv */
  --bg-card: #27272a;        /* Kártyák háttere: Zinc-800 */
  --border-color: #3f3f46;   /* Sötét szegélyek (Zinc-700) */
  --accent-color: #BDA588;   /* Hangsúlyos sötét mód szín: Világosabb homok/arany */
  --accent-hover: #C49E6F;   /* Sötétebb arany gombok hover állapotához */
  --accent-glow: rgba(189, 165, 136, 0.2); /* Homok ragyogás sötét módban */
  --text-main: #f4f4f5;      /* Főszöveg sötét módban: világos szürke (Zinc-100) */
  --text-muted: #a1a1aa;     /* Halvány szöveg sötét módban (Zinc-400) */
  --text-active: #fafafa;    /* Kiemelt szöveg sötét módban: tiszta fehér (Zinc-50) */
  
  /* Sötét mód specifikus árnyékok és háttér-tranzíciók */
  --hover-bg: rgba(255, 255, 255, 0.04);      /* Finom világosodás rámutatáskor */
  --selected-bg: rgba(189, 165, 136, 0.12);    /* Kiválasztott elem háttérfénye */
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Erősebb árnyék sötét módban */
  --sidebar-shadow: 2px 0 12px rgba(0, 0, 0, 0.3); /* Oldalsáv sötét árnyéka */
  --input-bg: rgba(255, 255, 255, 0.03);      /* Sötétített beviteli mezők */
  --input-focus-bg: rgba(255, 255, 255, 0.05);/* Kicsit világosabb aktív beviteli mező */
  --table-header-bg: rgba(255, 255, 255, 0.02);/* Táblázat fejléc sötét háttere */
  --table-row-hover: rgba(255, 255, 255, 0.02);/* Táblázat sorok sötét hovere */
  --icon-active: #BDA588;                      /* Aktív ikonok színe (homok/arany) */

  /* Oldalsáv (Sidebar) sötét módú változói (kissé lágyabb tónusok) */
  --sidebar-text: #a1a1aa;
  --sidebar-text-active: #fafafa;
  --sidebar-item-active-bg: #3f3f46;           /* Sötétebb aktív háttér sötét módban (Zinc-700) */
  --sidebar-border-color: #18181b;

  /* Eszköztár (Toolbar) sötét módú változói */
  --bg-toolbar: #27272a;                       /* Sötét oldalsávval azonos színű toolbar (Zinc-800) */
  --text-toolbar: #fafafa;
  --toolbar-input-bg: #18181b;                 /* Sötétebb beviteli mezők a toolbarban (Zinc-900) */
  --toolbar-border-color: #3f3f46;

  /* Rendszerszínek felülírása sötét módban */
  --red: #dc3545;
  --yellow: #ffc107;
  --green: #28a745;
  --blue: #007bff;
  --indigo: #6610f2;
  --orange: #fd7e14;
  --white: #ffffff;
  --light: #f8f9fa;
  --dark: #343a40;
}

/* ==========================================================================
   3. GLOBÁLIS RESET ÉS ALAPSTÍLUSOK
   ========================================================================== */
body, #app, .wrapper {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: var(--font-family) !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease; /* Lágy átmenet módváltáskor */
}

/* Kötelező mezők piros csillag jelölése és hibaüzenetek */
.text-danger,
span.text-danger {
  color: var(--red) !important;
}

/* ==========================================================================
   4. SIDEBAR (OLDALSÁV) ARCULATA
   ========================================================================== */
.sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--sidebar-border-color, var(--border-color)) !important;
  box-shadow: var(--sidebar-shadow) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
}

/* Oldalsáv fejléce (logó és becsukó gomb szekciója) */
.sidebar .sb-header {
  border-bottom: 1px solid var(--sidebar-border-color, var(--border-color)) !important;
  padding: 1rem !important;
  background-color: var(--bg-sidebar) !important;
  transition: background-color 0.3s ease !important;
}

/* Oldalsáv elemek sormagasság-alapú kompakt igazítása */
.sidebar .sb-item {
  line-height: 2.4rem !important;
  min-height: 2.4rem !important;
}

/* Oldalsáv menüpontok tartalomdoboza */
.sidebar .sb-item-content {
  background-color: transparent !important;
  color: var(--sidebar-text) !important;
  border-radius: 8px !important;
  margin: 0.25rem 0.5rem !important;
  padding: 0 !important; /* A padding-top/bottom 0 a függőleges igazítás miatt */
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  line-height: 2.4rem !important;
  min-height: 2.4rem !important;
}

/* Nyitott oldalsáv esetén a szöveg helyének biztosítása az ikon mellett */
.sidebar:not(.closed) .sb-item-content {
  padding: 0 1rem 0 2.6rem !important; 
}

/* Másodlagos (level 2) menüpontok behúzása a hierarchia jelzésére */
.sidebar:not(.closed) .sb-item[level="2"] .sb-item-content {
  padding-left: 3.35rem !important; 
}

/* Másodlagos menüpontok ikonjainak eltolása a behúzáshoz igazodva */
.sidebar:not(.closed) .sb-item[level="2"] .sb-item-icon {
  left: 3.35rem !important; 
}

/* Becsukott oldalsáv menüpontjainak belső margója */
.sidebar.closed .sb-item-content {
  padding: 0 !important;
}

/* Oldalsáv elemek hover (egér ráhúzás) állapota */
.sidebar .sb-item-content:hover,
body #app .sidebar .sb-item-content:hover,
body #app .sidebar .sb-item-content:hover * {
  background: var(--hover-bg) !important;
  color: #ffffff !important;
}

/* Kiválasztott/Aktív oldalsáv elem stílusa (fehér háttér, sötét szöveg, elegáns árnyék) */
body #app .sidebar .sb-item.selected > .sb-item-content,
.sidebar .sb-item.selected > .sb-item-content {
  background: var(--sidebar-item-active-bg) !important;
  color: var(--sidebar-text-active) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body #app .sidebar .sb-item.selected > .sb-item-content *,
body #app .sidebar .sb-item.selected > .sb-item-content .sb-item-label,
body #app .sidebar .sb-item.selected > .sb-item-content .sb-item-icon,
.sidebar .sb-item.selected > .sb-item-content .sb-item-label,
.sidebar .sb-item.selected > .sb-item-content .sb-item-icon {
  color: var(--sidebar-text-active) !important;
  background: transparent !important;
}

/* Oldalsáv ikonok stílusa */
.sidebar .sb-item-icon {
  color: var(--sidebar-text) !important;
  margin-right: 0.6rem !important;
  font-size: 1.05rem !important;
  transition: color 0.2s !important;
}

/* Ikonok színezése rámutatáskor vagy kiválasztott elemnél */
.sidebar .sb-item-content:hover .sb-item-icon {
  color: #ffffff !important;
}

.sidebar .sb-item.selected .sb-item-icon {
  color: var(--sidebar-text-active) !important;
}

/* Oldalsáv szöveges címkék stílusa */
.sidebar .sb-item-label {
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

/* Almenü lenyitó nyilak az oldalsávban */
.sidebar .sb-subitems-toggler {
  color: var(--sidebar-text) !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s, color 0.2s !important;
}

.sidebar .sb-subitems-toggler:hover {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   5. ESZKÖZTÁR (TOOLBAR / HEADER)
   ========================================================================== */
body #app .toolbar,
.toolbar {
  background: var(--bg-toolbar) !important;
  border-bottom: 1px solid var(--sidebar-border-color, var(--border-color)) !important;
  padding: 0.75rem 1.5rem !important;
  color: var(--text-toolbar) !important;
  transition: background-color 0.3s ease !important;
}

/* Eszköztár színei (szövegek, gombok, ikonok, linkek) */
body #app .toolbar *,
body #app .toolbar .text-dark,
body #app .toolbar .text-muted,
body #app .toolbar .dropdown-toggle,
body #app .toolbar .btn,
body #app .toolbar .btn-link,
body #app .toolbar .nav-link,
body #app .toolbar a,
.toolbar,
.toolbar *,
.toolbar .btn,
.toolbar .btn-link,
.toolbar .nav-link,
.toolbar a,
.toolbar .dropdown-toggle {
  color: var(--text-toolbar) !important;
}

/* Eszköztár interaktív elemeinek alapértelmezett átlátszó háttere (kivéve beviteli mezők) */
body #app .toolbar .dropdown-toggle,
body #app .toolbar .btn,
body #app .toolbar .btn-dropdown,
body #app .toolbar .btn-dropdown.dropdown-toggle,
body #app .toolbar .nav-link,
body #app .toolbar #configuration-level-popover {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Eszköztár interaktív elemeinek hover állapota */
body #app .toolbar a:hover,
body #app .toolbar a:hover *,
body #app .toolbar .btn:hover,
body #app .toolbar .btn:hover *,
body #app .toolbar .dropdown-toggle:hover,
body #app .toolbar .dropdown-toggle:hover *,
body #app .toolbar .nav-link:hover,
body #app .toolbar .nav-link:hover *,
body #app .toolbar .btn-dropdown:hover,
body #app .toolbar .btn-dropdown:hover *,
body #app .toolbar #configuration-level-popover:hover,
.toolbar a:hover,
.toolbar .btn:hover,
.toolbar .dropdown-toggle:hover,
.toolbar .nav-link:hover {
  color: var(--accent-color) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: transparent !important;
}

/* Eszköztárból nyíló dropdown menüpontok szövegszínének visszaállítása (ne legyen fehér a fehér alapon) */
body #app .toolbar .dropdown-menu *,
body #app .toolbar .dropdown-item {
  color: var(--text-main) !important;
}

body #app .toolbar .dropdown-item:hover,
body #app .toolbar .dropdown-item:focus,
body #app .toolbar .dropdown-item.active {
  color: #ffffff !important;
  background-color: var(--accent-color) !important;
}

/* Felhasználó dropdown gomb igazítása */
.toolbar .dropdown-toggle {
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

.toolbar .show > .dropdown-toggle,
.toolbar .dropdown-toggle:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text-toolbar) !important;
  box-shadow: none !important;
}

/* Eszköztárban lévő beviteli mezők és lenyíló listák */
.toolbar input, 
.toolbar select, 
.toolbar .form-control {
  background-color: var(--toolbar-input-bg) !important;
  border: 1px solid var(--toolbar-border-color) !important;
  color: var(--text-toolbar) !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
}

.toolbar input:focus, 
.toolbar select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 6px var(--accent-glow) !important;
}

.toolbar input::placeholder,
.toolbar .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.8 !important;
}

/* ==========================================================================
   6. KÁRTYÁK ÉS KONTÉNEREK
   ========================================================================== */
.card, 
.crud-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  box-shadow: var(--card-shadow) !important;
  padding: 1.25rem !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Kártyák címei */
.card-title,
.crud-card-title {
  color: var(--text-active) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   7. TÁBLÁZATOK (GRIDS) STÍLUSA
   ========================================================================== */
.table, 
.crud-table {
  color: var(--text-main) !important;
}
.crud-table {
  table-layout: fixed !important;
}

/* Táblázat fejlécek */
.table th,
.crud-table th {
  background: var(--table-header-bg) !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-color) !important;
  padding: 0 0.85rem !important;
  height: 28px !important;
  line-height: 28px !important;
  position: relative !important;
  min-width: 60px !important;
}

.table th::after, 
.crud-table th::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 6px !important;
  height: 100% !important;
  cursor: col-resize !important;
  background-color: transparent !important;
  z-index: 2 !important;
  transition: background-color 0.2s ease !important;
}

.table th:hover::after, 
.crud-table th:hover::after {
  background-color: var(--accent-color) !important;
}

/* Táblázat cellák */
.table td, 
.crud-table td {
  border-top: 1px solid var(--border-color) !important;
  padding: 0 0.85rem !important;
  background-color: transparent;
  vertical-align: middle !important;
  height: 28px !important;
  line-height: 28px !important;
}

/* Táblázat sorok hover állapota */
.table tbody tr:hover td, 
.crud-table tbody tr:hover td {
  background: var(--table-row-hover);
}

/* Mezők és szűrők átlátszósága táblázat cellákban (line_formatter színezés támogatása) */
.table td .form-control,
.crud-table td .form-control,
.table td .custom-select,
.crud-table td .custom-select,
.table td .multiselect__tags,
.crud-table td .multiselect__tags {
  background-color: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}

/* ==========================================================================
   8. BEVITELI MEZŐK ÉS ADATBEVITEL STÍLUSA
   ========================================================================== */
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.custom-select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  transition: all 0.2s ease !important;
}

/* Beviteli mezők fókusz állapota (arany szegély + enyhe fény) */
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.custom-select:focus {
  background-color: var(--input-focus-bg) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 6px var(--accent-glow) !important;
  outline: none !important;
}

/* Böngésző alapértelmezett választó (select) opcióinak színei */
select option {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
}

/* ==========================================================================
   9. DROPDOWN LENYÍLÓ GOMBOK ÉS VÁLASZTÓK STÍLUSA
   ========================================================================== */
.dropdown-toggle,
.btn.dropdown-toggle,
.btn-dropdown,
.btn-dropdown.dropdown-toggle {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.show > .dropdown-toggle,
.show > .btn.dropdown-toggle,
.dropdown-toggle:hover,
.btn.dropdown-toggle:hover,
.btn-dropdown.dropdown-toggle:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-active) !important;
  border-color: var(--border-color) !important;
}

.dropdown-toggle:focus,
.btn.dropdown-toggle:focus,
.btn-dropdown.dropdown-toggle:focus {
  outline: none !important;
  box-shadow: 0 0 6px var(--accent-glow) !important;
  border-color: var(--accent-color) !important;
}

/* ==========================================================================
   10. VUE MULTISELECT ÉS BOOTSTRAP DROPDOWNS
   ========================================================================== */
.multiselect,
.multiselect__tags,
.multiselect__single,
.multiselect__input {
  background-color: transparent !important;
  color: var(--text-main) !important;
}

.multiselect__tags {
  border: 1px solid var(--border-color) !important;
  background-color: var(--input-bg) !important;
  border-radius: 6px !important;
}

.multiselect__content-wrapper {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  box-shadow: var(--card-shadow) !important;
}

.multiselect__option {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
}

.multiselect__option--highlight {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

.multiselect__option--selected {
  background-color: rgba(196, 158, 111, 0.2) !important;
  color: var(--text-active) !important;
}

.clear,
.clear i,
.clear-filter-btn {
  color: var(--text-muted) !important;
}

.clear:hover i,
.clear-filter-btn:hover i {
  color: var(--text-active) !important;
}

.dropdown-menu {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 6px !important;
}

.dropdown-item {
  color: var(--text-main) !important;
  background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

/* ==========================================================================
   11. AUTOCOMPLETE (TYPEAHEAD) ÉS DATEPICKER PANELEK
   ========================================================================== */
.vue-bootstrap-typeahead .list-group {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.vue-bootstrap-typeahead .list-group-item {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

.vue-bootstrap-typeahead .list-group-item:hover,
.vue-bootstrap-typeahead .list-group-item.active {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

.vdp-datepicker__calendar,
.mx-datepicker-popup,
.flatpickr-calendar {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow) !important;
}

.vdp-datepicker__calendar header span:hover,
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled):hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

/* ==========================================================================
   12. GOMBOK (BUTTONS) ÉS POPUPOK (MODALS) STÍLUSA
   ========================================================================== */
/* Gombok (Elsődleges és sikeres mentés) */
.btn-primary, 
.btn-success {
  background: var(--accent-color) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(196, 158, 111, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-success:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 4px 12px rgba(196, 158, 111, 0.4) !important;
}

/* Másodlagos visszamondás gombok */
.btn-secondary,
.btn-info,
.btn-light,
.btn-outline-secondary {
  background-color: #f4f4f5 !important; /* Zinc-100 */
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.btn-info:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
  background-color: #e4e4e7 !important; /* Zinc-200 */
  color: var(--text-active) !important;
  border-color: var(--accent-color) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-info,
body.dark-mode .btn-light,
body.dark-mode .btn-outline-secondary {
  background-color: #3f3f46 !important; /* Zinc-700 */
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-info:hover,
body.dark-mode .btn-light:hover,
body.dark-mode .btn-outline-secondary:hover {
  background-color: #52525b !important; /* Zinc-600 */
  color: var(--text-active) !important;
  border-color: var(--accent-color) !important;
}

/* Modális ablakok (Popupok) háttere és kerete */
body #app .modal-content,
body #app .modal-header,
body #app .modal-body,
body #app .modal-footer,
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
  background: var(--bg-card) !important; /* Visszaállítva var(--bg-card)-ra, hogy világos módban fehér legyen */
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

body #app .modal-content {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.3s ease !important;
}

body #app .modal-header,
.modal-header {
  border-bottom: 1px solid var(--border-color) !important;
}

body #app .modal-header *,
body #app .modal-content .modal-title,
.modal-header *,
.modal-content .modal-title {
  color: var(--text-active) !important;
}

body #app .modal-footer,
.modal-footer {
  border-top: 1px solid var(--border-color) !important;
}

/* Form feliratok kontrasztja felugró ablakban és űrlapokon */
body #app label,
body #app .form-group label,
body #app .form-control-label,
.modal-body label,
.form-group label,
.form-control-label {
  color: var(--text-main) !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   13. FELSŐ KERESŐSÁV ELREJTÉSE
   ========================================================================== */
.toolbar .form-control[placeholder*="kereséshez"],
.toolbar input[placeholder*="kereséshez"] {
  display: none !important;
}

.toolbar .search-icon,
.toolbar .input-group-text,
.toolbar .input-group-append,
.toolbar .fa-search,
.toolbar [class*="search"] svg,
.toolbar [class*="search"] i {
  display: none !important;
}

/* ==========================================================================
   14. SIDEBAR BRAND ÉS TOGGLER JAVÍTÁSA (OLVASHATÓSÁG ÉS IGAZÍTÁS)
   ========================================================================== */
body #app .sidebar .sb-header,
body #app .sidebar .sb-header-top {
  background-color: var(--bg-sidebar) !important;
}

body #app .sidebar .brand-text {
  color: var(--text-toolbar, #ffffff) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

body #app .sidebar .sidebar-toggler,
body #app .sidebar .sidebar-toggler i,
body #app .sidebar .sidebar-toggler .fa,
body #app .sidebar .sidebar-toggler .fas,
body #app .sidebar .sidebar-toggler .far {
  color: var(--sidebar-text, #d4d4d8) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body #app .sidebar .sidebar-toggler:hover,
body #app .sidebar .sidebar-toggler:hover i {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Oldalsáv, fő tartalom és eszköztár igazítása (fehér csík eltüntetése) */
@media (min-width: 576px) {
  body #app .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
  }
  
  body #app .main-content {
    padding-top: 4rem !important; /* Megakadályozza, hogy a tartalom a fix fejléc alá csússzon */
  }
  
  body #app .compact .main-content,
  body #app .main-content.compact,
  .compact .main-content {
    padding-top: 2.8rem !important; /* Kompakt mód esetén alacsonyabb a fejléc */
  }
  
  /* Nyitott oldalsáv állapota */
  body #app .sidebar:not(.closed) {
    width: 240px !important;
  }
  body #app .main-content:not(.expand) {
    padding-left: 240px !important;
  }
  body #app .main-content:not(.expand) .toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 240px !important;
    right: 0 !important;
    width: auto !important;
  }

  /* Becsukott/Összezárt oldalsáv állapota */
  body #app .sidebar.closed {
    width: 2.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  body #app .sidebar.closed .sb-item-content {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    min-height: 1.8rem !important;
    line-height: 1.8rem !important;
    margin: 0.35rem auto !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  
  body #app .sidebar.closed .sb-item-content > *:not(.sb-item-icon):not(.sb-item-path) {
    display: none !important;
  }
  
  body #app .sidebar.closed .sb-item-icon {
    position: static !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
  }
  
  body #app .sidebar.closed .sb-subitems {
    display: none !important; /* Elrejti a rész-menüpontokat a bezárt oldalsávban, megakadályozva a függőleges kijelölés-túlnyúlást */
  }
  
  body #app .main-content.expand {
    padding-left: 2.5rem !important;
  }
  body #app .main-content.expand .toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 2.5rem !important;
    right: 0 !important;
    width: auto !important;
  }
}

/* ==========================================================================
   15. WIDGETEK, RÉSZLETEK ÉS EGYÉB MEZŐK FINOMHANGOLÁSA (TABLEVERSUM ARCULAT)
   ========================================================================== */
/* Kártya fejlécek és láblécek */
.card-header,
.crud-card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-active) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.25rem !important;
}

.card-footer,
.crud-card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 0.75rem 1.25rem !important;
}

/* Fókusz és beviteli mező finomítások */
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.custom-select,
.custom-file-label,
.input-group-text {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  transition: all 0.2s ease !important;
}

.input-group-text {
  background-color: var(--light) !important;
  color: var(--text-muted) !important;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label {
  background-color: var(--input-focus-bg) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem var(--accent-glow) !important;
  outline: none !important;
}

/* Checkboxok és rádiógombok */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem var(--accent-glow) !important;
}

/* Fülek (Tabs) stílusa */
.nav-tabs {
  border-bottom: 1px solid var(--border-color) !important;
}

.nav-tabs .nav-link {
  border: 1px solid transparent !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--border-color) var(--border-color) transparent !important;
  color: var(--text-active) !important;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) var(--border-color) var(--bg-card) !important;
  color: var(--accent-color) !important;
  font-weight: 600 !important;
}

.nav-pills .nav-link {
  border-radius: 6px !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease !important;
}

.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

/* Listák (List Groups) */
.list-group-item {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

.list-group-item.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

/* Rendszerüzenetek (Alerts) */
.alert {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
}

.alert-success {
  background-color: rgba(22, 101, 52, 0.08) !important;
  border-color: rgba(22, 101, 52, 0.15) !important;
  color: var(--green) !important;
}

.alert-danger {
  background-color: rgba(195, 35, 39, 0.08) !important;
  border-color: rgba(195, 35, 39, 0.15) !important;
  color: var(--red) !important;
}

.alert-warning {
  background-color: rgba(202, 138, 4, 0.08) !important;
  border-color: rgba(202, 138, 4, 0.15) !important;
  color: var(--yellow) !important;
}

.alert-info {
  background-color: rgba(21, 94, 117, 0.08) !important;
  border-color: rgba(21, 94, 117, 0.15) !important;
  color: var(--blue) !important;
}

/* Betöltő csík stílusa (Tableversum arany/homok) */
#app .b-skeleton,
#app .b-skeleton-text,
#app .b-skeleton.bg-primary,
#app .b-skeleton.bg-success,
#app .bg-success[ref="loader"],
#app .bg-primary[ref="loader"] {
  background-color: var(--accent-color) !important;
  background-image: linear-gradient(90deg, var(--accent-color) 25%, var(--accent-hover) 50%, var(--accent-color) 75%) !important;
  background-size: 200% 100% !important;
  color: #ffffff !important;
}

/* Globális linkek stílusa (Tableversum arany/homok) */
body #app a {
  color: var(--accent-color) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body #app a:hover,
body #app a:focus {
  color: var(--accent-hover) !important;
  text-decoration: underline !important;
}

/* Gombok és egyéb komponensek szöveg-alátámasztásának eltüntetése */
body #app a.btn,
body #app .btn a,
body #app .dropdown-item,
body #app .nav-link,
body #app .sidebar a {
  text-decoration: none !important;
}

/* Oldalsáv linkjeinek színe (maradjon a sidebar szövegszíne és ne legyen aláhúzva) */
body #app .sidebar a,
body #app .sidebar .sb-item-label,
body #app .sidebar .sb-item-content a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ==========================================================================
   KÍSÉRLET: Kísérleti betűméret-növelés (revertáláshoz töröld ezt a blokkot)
   Cél: A betűméretek növelése a térközök (padding, margin, layout) változása nélkül.
   ========================================================================== */
body #app {
  font-size: 112% !important; /* Örökölt alapértelmezett betűméret növelése 12%-kal */
}

/* Kifejezett betűméretek arányos növelése 10-12%-kal: */
body #app .sidebar .sb-item-label {
  font-size: 0.98rem !important; /* 0.875rem -> 0.98rem */
}

body #app .sidebar .sb-item-icon {
  font-size: 1.18rem !important; /* 1.05rem -> 1.18rem */
}

body #app .sidebar.closed .sb-item-icon {
  font-size: 1.18rem !important; /* 1.05rem -> 1.18rem */
}

body #app .sidebar .brand-text {
  font-size: 1.23rem !important; /* 1.1rem -> 1.23rem */
}

body #app .toolbar input, 
body #app .toolbar select, 
body #app .toolbar .form-control {
  font-size: 0.98rem !important; /* 0.875rem -> 0.98rem */
}

body #app .table th, 
body #app .crud-table th {
  font-size: 0.84rem !important; /* 0.75rem -> 0.84rem */
}

body #app .form-control,
body #app .form-group input,
body #app .form-group select,
body #app .form-group textarea,
body #app .custom-select {
  font-size: 0.98rem !important; /* Beviteli mezők szövegmérete */
}

body #app label,
body #app .form-group label,
body #app .form-control-label {
  font-size: 0.98rem !important; /* Címkék szövegmérete */
}

body #app .btn {
  font-size: 0.98rem !important; /* Gombok betűmérete */
}

/* ==========================================================================
   16. GRIDS / TÁBLÁZATOK SZŰRŐ DROPDOWN RÉTEGZŐDÉS ÉS LÁTHATÓSÁG JAVÍTÁSA
   Azonosító: dropdown-stacking-fix
   Cél: A fejléc szűrőcellák (th és td a második sorban) z-indexének és overflow-jának 
        beállítása, hogy a szűrő lenyílók, multiselectek és dátumválasztók láthatóak 
        legyenek, és mindig lefelé nyíljanak a cellák felett.
   ========================================================================== */
.table thead:last-of-type th,
.table thead:last-of-type td,
.table thead tr:last-child th,
.table thead tr:last-child td,
.table thead tr:nth-child(2) th,
.table thead tr:nth-child(2) td,
.crud-table thead:last-of-type th,
.crud-table thead:last-of-type td,
.crud-table thead tr:last-child th,
.crud-table thead tr:last-child td,
.crud-table thead tr:nth-child(2) th,
.crud-table thead tr:nth-child(2) td {
  overflow: visible !important;
  position: relative !important;
  z-index: 12 !important;
}

/* Kényszerítjük a lenyíló ablakokat és a multiselect ablakokat, hogy lefelé nyíljanak és ne fedjék a beviteli mezőket */
.table thead .dropdown-window,
.crud-table thead .dropdown-window {
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
}

.table thead .dropdown-menu,
.crud-table thead .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
}

.table thead .multiselect__content-wrapper,
.crud-table thead .multiselect__content-wrapper {
  top: 100% !important;
  bottom: auto !important;
}

/* Az utolsó 3 oszlop esetén a multiselect ablakot jobbra igazítjuk, hogy ne lógjon ki a képernyőről */
.table thead th:nth-last-child(-n+3) .dropdown-window,
.table thead td:nth-last-child(-n+3) .dropdown-window,
.crud-table thead th:nth-last-child(-n+3) .dropdown-window,
.crud-table thead td:nth-last-child(-n+3) .dropdown-window {
  left: auto !important;
  right: 0 !important;
}

/* Oszlopszélesség-állítás javítása: A fejléc th::after vizuális elválasztó vonala 
   átkattinthatóvá tétele, hogy ne blokkolja az alatta fekvő interaktív méretező span-t */
.table th::after, 
.crud-table th::after {
  pointer-events: none !important;
}

/* Részletes (view/details) nézet sormagasságának csökkentése 20%-kal (0.75rem -> 0.6rem padding) */
/* Részletes (view/details) nézet cellák magassága pontosan 28px */
.crud-details-table {
  width: 100% !important;
  table-layout: auto !important;
}

.crud-details-table td {
  height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 28px !important;
  vertical-align: middle !important;
}

/* Eltávolítjuk a form-group alatti margót a részletek táblázatban, és nem korlátozzuk a magasságát fixen, hogy a td függőlegesen tudja igazítani a checkboxot */
.crud-details-table .form-group {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.crud-details-table .form-group .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.crud-details-table .form-group .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tömörítjük a beviteli mezőket */
.crud-details-table .form-control,
.crud-details-table .custom-select {
  height: 22px !important;
  min-height: 22px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.9rem !important;
  line-height: 22px !important;
}

/* Tömörítjük a multiselect mezőket, ha lennének a táblázatban */
.crud-details-table .multiselect {
  min-height: 22px !important;
  height: 22px !important;
}

.crud-details-table .multiselect__tags {
  min-height: 22px !important;
  height: 22px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0.25rem !important;
}

.crud-details-table .multiselect__select {
  height: 20px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.crud-details-table .multiselect__single {
  line-height: 20px !important;
  margin-bottom: 0 !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* Igazítjuk a checkboxokat */
.crud-details-table input[type="checkbox"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
  cursor: pointer;
}

/* Igazítjuk a címke (label) cellák függőleges elhelyezkedését */
.crud-details-table tr > td:nth-child(odd) {
  vertical-align: middle !important;
  line-height: 28px !important;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 0.5rem !important;
}

.crud-details-table tr > td:nth-child(2n) {
  width: auto !important;
}

/* Lista és admin nézetekben lévő mezők és szűrők magasságának tömörítése */
.table .form-control,
.crud-table .form-control,
.table .custom-select,
.crud-table .custom-select {
  height: 22px !important;
  min-height: 22px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 22px !important;
  font-size: 0.9rem !important;
}

.table .multiselect,
.crud-table .multiselect {
  min-height: 22px !important;
  height: 22px !important;
}

.table .multiselect__tags,
.crud-table .multiselect__tags {
  min-height: 22px !important;
  height: 22px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0.25rem !important;
}

.table .multiselect__select,
.crud-table .multiselect__select {
  height: 20px !important;
  padding: 0 !important;
}

.table .multiselect__single,
.crud-table .multiselect__single {
  line-height: 20px !important;
  margin-bottom: 0 !important;
}

.table input[type="checkbox"],
.crud-table input[type="checkbox"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

/* Táblázat fejléc szűrők magassága pontosan 34px (nem csúszik össze) */
.table thead tr:last-child th,
.table thead tr:last-child td,
.crud-table thead tr:last-child th,
.crud-table thead tr:last-child td,
.table thead tr:nth-child(2) th,
.table thead tr:nth-child(2) td,
.crud-table thead tr:nth-child(2) th,
.crud-table thead tr:nth-child(2) td {
  height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 34px !important;
  vertical-align: middle !important;
}

.table thead tr:last-child .form-control,
.crud-table thead tr:last-child .form-control,
.table thead tr:last-child .custom-select,
.crud-table thead tr:last-child .custom-select,
.table thead tr:nth-child(2) .form-control,
.crud-table thead tr:nth-child(2) .form-control,
.table thead tr:nth-child(2) .custom-select,
.crud-table thead tr:nth-child(2) .custom-select {
  height: 26px !important;
  min-height: 26px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 0.875rem !important;
  line-height: 20px !important;
}

.table thead tr:last-child .multiselect,
.crud-table thead tr:last-child .multiselect,
.table thead tr:nth-child(2) .multiselect,
.crud-table thead tr:nth-child(2) .multiselect {
  min-height: 26px !important;
  height: 26px !important;
}

.table thead tr:last-child .multiselect__tags,
.crud-table thead tr:last-child .multiselect__tags,
.table thead tr:nth-child(2) .multiselect__tags,
.crud-table thead tr:nth-child(2) .multiselect__tags {
  min-height: 26px !important;
  height: 26px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border-radius: 0.25rem !important;
  line-height: 20px !important;
}

.table thead tr:last-child .multiselect__select,
.crud-table thead tr:last-child .multiselect__select,
.table thead tr:nth-child(2) .multiselect__select,
.crud-table thead tr:nth-child(2) .multiselect__select {
  height: 24px !important;
  padding: 0 !important;
}

.table thead tr:last-child .multiselect__single,
.crud-table thead tr:last-child .multiselect__single,
.table thead tr:nth-child(2) .multiselect__single,
.crud-table thead tr:nth-child(2) .multiselect__single {
  line-height: 20px !important;
  margin-bottom: 0 !important;
}

/* Lista és admin nézetekben az első három oszlop szélességének és margóinak optimalizálása */

/* 1. oszlop: Checkbox */
.table:not(.crud-details-table) tbody td:first-child,
.crud-table tbody td:first-child,
.table thead:nth-of-type(2) tr th:first-child,
.crud-table thead:nth-of-type(2) tr th:first-child {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* 2. oszlop: Sorszám */
.table tbody td.serial-number-column,
.crud-table tbody td.serial-number-column,
.table thead:nth-of-type(2) tr th.serial-number-column,
.crud-table thead:nth-of-type(2) tr th.serial-number-column {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* Két oszlopot átfogó fejléc cella (sorrend állító gomb) igazítása */
.table thead:first-of-type tr th.serial-number-column,
.crud-table thead:first-of-type tr th.serial-number-column {
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
  width: 52px !important;
  max-width: 52px !important;
  min-width: 52px !important;
  text-align: center !important;
}

/* 3. oszlop: Műveletek (Művelet gombok) */
.table tbody td.serial-number-column + td,
.crud-table tbody td.serial-number-column + td,
.table thead:first-of-type tr th.serial-number-column + th,
.crud-table thead:first-of-type tr th.serial-number-column + th,
.table thead:nth-of-type(2) tr th.serial-number-column + th,
.crud-table thead:nth-of-type(2) tr th.serial-number-column + th {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  padding-left: 0.15rem !important;
  padding-right: 0.5rem !important; /* Nagyobb jobb oldali margó a kuka utáni távolság növelésére */
  white-space: nowrap !important;
  text-align: left !important;
}

/* Cella tartalom lebegő kiemelése (tooltip) hover esetén, ha a tartalom nem fér ki */
.crud-table td[data-field] {
  position: relative !important;
}

.crud-table td[data-field].has-overflow::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  top: 50% !important;
  left: 0.85rem !important;
  transform: translateY(-50%) !important;
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 0.4rem 0.6rem !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  z-index: 99999 !important; /* Lebegés a táblázat többi eleme felett */
  width: max-content !important;
  max-width: 450px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important; /* Kattintások átengedése */
  display: none !important;
  color: var(--text-main) !important;
  font-size: 0.875rem !important;
  font-weight: normal !important;
  text-transform: none !important;
}

.crud-table td[data-field].has-overflow:hover::after {
  display: block !important;
}






/* ==========================================================================
   17. KÍSÉRLET: Ragadós fejléc (Sticky Header) - DINAMIKUS JS+CSS
   ========================================================================== */
@media (min-width: 992px) {
  /* Erőteljesebben levágott magasság, hogy a vizszintes csúszka valóban a képernyőn maradjon! */
  body #app .table-responsive {
    max-height: calc(100vh - 260px) !important;
    overflow-y: auto !important;
  }
  
  body #app .crud-table,
  body #app .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  
  /* 1. Fejléc: Mezőnevek (legfelül ragad a saját konténerében) */
  body #app .crud-table thead:nth-of-type(1),
  body #app .table thead:nth-of-type(1) {
    position: sticky !important;
    top: 0 !important;
    z-index: 16 !important;
  }
  
  /* 2. Fejléc: Szűrők (az első alatt ragad a JS által beállított változó alapján) */
  body #app .crud-table thead:nth-of-type(2),
  body #app .table thead:nth-of-type(2) {
    position: sticky !important;
    top: var(--sticky-top-offset, 36px) !important; 
    z-index: 15 !important;
  }
  
  /* Cella hátterek és szegélyek javítása */
  body #app .crud-table thead th,
  body #app .crud-table thead td,
  body #app .table thead th,
  body #app .table thead td {
    background-color: var(--table-header-bg, #fafafa) !important;
    position: relative !important;
    top: auto !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-top: none !important;
  }
}
/* ==========================================================================
   Automatikus Gomb és Widget Elrendezés (kiwi-action-col) V5
   --------------------------------------------------------------------------
   Cél: user-functions és calculated-field widgetek egyenletes, gyári
        gombokhoz igazodó elrendezése a CRUD toolbar/middle sávokban.
   
   Probléma: A Grid/Item.vue wrapper div alapértelmezésben col-md-4 (33%)
   szélességet kap a Bootstrap gridtől. Ha a toolbar row-ban vannak más
   komponensek is (document-viewer, uploader), azok is 33%-ot foglalnak,
   szétnyomva a sort és egyenetlen réseket hagyva a gombok között.
   
   Megoldás: Ha a .row bármely gyermeke .kiwi-action-col, az ÖSSZES col-*
   gyermeket auto szélességre állítjuk, és a row negatív margóját töröljük.
   ========================================================================== */

/* --- 1. Szülő .row normalizálása (negatív margó eltüntetése, gap alapú térköz) --- */
.row:has(> .kiwi-action-col) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 6px;
    align-items: center;
}

/* --- 2. MINDEN col-* gyermek auto-méretezése a sorban --- */
.row:has(> .kiwi-action-col) > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- 3. Kártya-keret és háttér eltüntetése (ha a widget card template-et használ) --- */
.kiwi-action-col > .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.kiwi-action-col > .card > .card-header {
    display: none !important;
}

.kiwi-action-col > .card > .card-body {
    padding: 0 !important;
}

/* --- 4. Nem-kártya wrapper kompakt megjelenés --- */
.kiwi-action-col > div:not(.card) {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* --- 5. Belső gomb-konténerek vertikális igazítása --- */
.kiwi-action-col .btn-group,
.kiwi-action-col .btn-toolbar,
.kiwi-action-col .d-flex,
.kiwi-action-col .d-inline-flex {
    align-items: center !important;
    min-height: 38px;
}

/* --- 6. Rejtett widgetek ne hagyjanak üres teret --- */
.kiwi-action-col[style*="display: none"],
.kiwi-action-col[style*="display:none"],
.kiwi-action-col:empty {
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 7. Modern :has() alapú üres-wrapper elrejtés --- */
.kiwi-action-col:has(> div:empty),
.kiwi-action-col:has(> .card > .card-body:empty) {
    display: none !important;
}