/* Asztal – Projekt elszámolás — a 32-es Tervező-stílus szerint (tokenek: components 124).
   A sorok háttere a projekt tárolt státuszszíne (adat, a JS adja) — a CSS nem fedi el; a cellabetű ezért fixen sötét,
   sötét módban is (a státuszszínek világosak). */
.spoon-elsz { padding: 2px 0 0; }
.spn-elsz-fej { display: flex; align-items: center; gap: var(--t-gap-3); flex-wrap: wrap; margin-bottom: var(--t-gap-2); }
.spn-elsz-cim { font-size: 15px; font-weight: 600; color: var(--t-ink-kiemelt); }
.spn-elsz-darab { font-weight: 600; color: var(--t-ink-masod); }
.spn-elsz-jel { white-space: nowrap; }
.spn-elsz-minta-szerk, .spn-elsz-minta-link { font-weight: 600; color: var(--t-nezd-ink); padding: 0 3px; border-radius: 3px; }
.spn-elsz-minta-szerk { border-bottom: 1px solid var(--t-nezd); }
.spn-elsz-minta-link { text-decoration: underline; text-underline-offset: 2px; }
.spn-elsz-hiba {
  display: flex; align-items: center; gap: var(--t-gap-2); margin-bottom: var(--t-gap-2); padding: 6px 10px;
  background: var(--t-atmeneti-halvany); border: 1px solid var(--t-atmeneti); color: var(--t-atmeneti-ink);
  border-radius: var(--t-r-kis); font-size: var(--t-fs-ui);
}

.spoon-elsz-wrap {
  position: relative; overflow: auto; max-height: calc(100vh - 170px);
  border: 1px solid var(--t-keret); border-radius: var(--t-r-kartya); background: var(--t-felulet); box-shadow: var(--t-arnyek);
}
.spoon-elsz-table {
  border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content;
  font: var(--t-fs-ui)/1.45 var(--t-font); font-variant-numeric: tabular-nums;
}
.spoon-elsz-table th {
  position: sticky; top: 0; z-index: 2; height: 38px; padding: 2px 4px;
  font-size: var(--t-fs-jel); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
  text-align: center; white-space: nowrap; color: var(--t-ink-halvany);
  background-color: var(--t-sav); border-bottom: 1px solid var(--t-keret); border-right: 1px solid var(--t-keret);
}
.spoon-elsz-table td {
  padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #18181b;
  border-bottom: 1px solid rgba(24, 24, 27, .07); border-right: 1px solid rgba(24, 24, 27, .07);
}
.spoon-elsz-table td.sticky { position: sticky; z-index: 1; }
.spoon-elsz-table th.sticky { z-index: 3; }
.spoon-elsz-table tbody tr:hover td { filter: brightness(0.96); }
/* a skin `body #app a { color: var(--accent-color) !important }` szabálya ellen erősebb szelektor kell */
body #app .spoon-elsz-table td a { color: #7d6136 !important; font-weight: 500; }
body #app .spoon-elsz-table td a:hover { color: #5f4826 !important; text-decoration: underline; }

/* tétel rögzítése (kattintható érték): „nézd meg” — van mögötte tartalom */
.spoon-elsz-link { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(125, 97, 54, .45); text-underline-offset: 2px; }
.spoon-elsz-link:hover { text-decoration-color: #7d6136; }
/* szerkeszthető érték: halvány alsó vonal, rámutatáskor arany keret */
.spoon-elsz-edit { display: block; cursor: text; min-height: 18px; border-bottom: 1px solid rgba(196, 158, 111, .45); }
.spoon-elsz-edit:hover { box-shadow: inset 0 0 0 1px #C49E6F; background: rgba(196, 158, 111, .12); border-radius: 3px; }
.spoon-elsz-saving { opacity: 0.5; }
.spoon-elsz-input {
  width: 100%; box-sizing: border-box; text-align: right; font: var(--t-fs-ui)/1.3 var(--t-font); font-variant-numeric: tabular-nums;
  padding: 0 3px; border: 1px solid #C49E6F; border-radius: 3px; background: #ffffff; color: #18181b;
  box-shadow: 0 0 0 3px rgba(196, 158, 111, .2); outline: none;
}
.spn-elsz-ures { color: var(--t-ink-halvany) !important; text-align: center; padding: 18px 12px !important; white-space: normal !important; background: var(--t-felulet); }
/* 2026-10-26 (user): a szerkeszthető cella a sor színének halványabb árnyalata (fehér réteg a státuszszín fölött) */
td:has(> .spoon-elsz-edit), td:has(> .spoon-elsz-input) { background-image: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) !important; }
body.dark-mode td:has(> .spoon-elsz-edit), body.dark-mode td:has(> .spoon-elsz-input) { background-image: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) !important; }

/* Emlékeztető-jelző — a 32-es Tervező-stílus szerint (tokenek: components 124). Jelentés: lejárt = dolgod van vele, ma = átmeneti. */
.spoon-emlek { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; z-index: 2; }

/* menüszámláló: dolgod van vele, halvány kitöltés */
.spoon-emlek-badge {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center;
  font: 600 var(--t-fs-jel)/18px var(--t-font); font-variant-numeric: tabular-nums;
  background: var(--t-teendo-halvany); color: var(--t-teendo-ink); border: 1px solid var(--t-teendo);
}
body .sidebar .spoon-emlek-badge { background: #fbeeed; color: #97302b; border-color: #c08a86; }

/* ablak (a b-modal a body-ba kerül, ezért a modal-class-ból indulunk) */
.spn-modal-emlek .modal-content {
  font-family: var(--t-font); background: var(--t-felulet); color: var(--t-ink);
  border: 1px solid var(--t-keret); border-radius: var(--t-r-kartya); box-shadow: var(--t-arnyek);
}
.spn-modal-emlek .modal-header, .spn-modal-emlek .modal-footer { border-color: var(--t-keret); }
.spn-modal-emlek .modal-title { font-size: 15px; font-weight: 600; }
.spn-modal-emlek .modal-body { padding: var(--t-gap-3) var(--t-gap-4); background: var(--t-lap); }

.spoon-emlek-item {
  background: var(--t-felulet); border: 1px solid var(--t-keret); border-left: 3px solid var(--t-semleges);
  border-radius: var(--t-r-kartya); padding: 10px 12px; margin-bottom: var(--t-gap-2);
}
.spoon-emlek-item.spoon-emlek-expired { border-left-color: var(--t-teendo); }
.spoon-emlek-item.spoon-emlek-today { border-left-color: var(--t-atmeneti); }
.spn-emlek-fej { display: flex; align-items: center; gap: var(--t-gap-2); }
.spn-emlek-cim { flex: 1 1 auto; min-width: 0; font-size: var(--t-fs-ui); font-weight: 600; color: var(--t-ink-kiemelt); }
.spn-emlek-ido { margin: 2px 0 0 16px; }
/* az esedékesség fontos: vastag, nagyobb, alapszínű (user, 2026-10-16) */
.spn-meta.spn-emlek-ido { font-size: 14px; font-weight: 700; color: var(--t-ink); }
.spn-meta.spn-emlek-ido i { color: var(--t-ink-halvany); font-weight: 400; }
.spoon-emlek-msg { white-space: pre-line; margin: 6px 0 0 16px; font-size: var(--t-fs-ui); line-height: 1.55; color: var(--t-ink-masod); }
.spn-emlek-gombok { display: flex; flex-wrap: wrap; gap: var(--t-gap-2); margin: 10px 0 0 16px; }
/* keskeny ablakban / telefonon a gombok sose lógjanak ki (user, 2026-10-16): a két zöld gomb teljes sor, a halasztások egy sorban */
@media (max-width: 575.98px) {
  .spn-emlek-gombok, .spn-meta.spn-emlek-ido { margin-left: 0; }
  .spn-emlek-gombok .spn-btn { justify-content: center; }
  .spn-emlek-gombok .spn-btn-ok { flex: 1 1 100%; }
  .spn-emlek-gombok .spn-btn:not(.spn-btn-ok) { flex: 1 1 0; }
  .spn-emlek-fej { flex-wrap: wrap; }
}
.spn-emlek-ures { text-align: center; padding: 28px 12px; color: var(--t-ink-masod); font-size: var(--t-fs-ui); }
.spn-emlek-ures > i { font-size: 22px; color: var(--t-ink-inaktiv); display: block; margin-bottom: 8px; }
.spn-emlek-ures .spn-meta { margin-top: 4px; }

/* lejárt-emlékeztető buborék: kártya, csengő a „dolgod van vele” halvány körében, elsődleges gomb körvonalas */
.toasted.spoon-emlek-toast {
  display: flex !important; align-items: center !important; gap: var(--t-gap-3);
  background: var(--t-felulet) !important; color: var(--t-ink) !important;
  border: 1px solid var(--t-keret) !important; border-left: 3px solid var(--t-teendo) !important;
  border-radius: var(--t-r-kartya) !important; box-shadow: 0 8px 24px rgba(24, 24, 27, .14) !important;
  padding: 10px 10px 10px 12px !important; min-height: 0 !important; max-width: 440px;
  font: var(--t-fs-ui)/1.4 var(--t-font) !important;
}
body.dark-mode .toasted.spoon-emlek-toast { box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important; }
.toasted.spoon-emlek-toast::before, .toasted.spoon-emlek-toast::after { content: none !important; display: none !important; }
.toasted.spoon-emlek-toast > i, .toasted.spoon-emlek-toast > .material-icons { display: none !important; }
.spoon-emlek-toast .spoon-toast-ikon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-teendo-halvany); color: var(--t-teendo-ink); border: 1px solid var(--t-teendo); font-size: 14px;
}
.spoon-emlek-toast .spoon-toast-ikon i { margin: 0 !important; line-height: 1 !important; }
.spoon-emlek-toast .spoon-toast-szoveg { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.spoon-emlek-toast .spoon-toast-cim { font-weight: 600; color: var(--t-ink-kiemelt); }
.spoon-emlek-toast .spoon-toast-meta { font-size: var(--t-fs-jel); color: var(--t-ink-halvany); }
.spoon-emlek-toast .action {
  margin: 0 !important; border-radius: var(--t-r-kis) !important; text-transform: none !important;
  letter-spacing: 0 !important; text-decoration: none !important; font: 500 var(--t-fs-ui)/1.5 var(--t-font) !important;
}
.spoon-emlek-toast .action.spoon-toast-gomb {
  padding: 3px 12px !important; background: var(--t-nezd-halvany) !important;
  border: 1px solid var(--t-nezd) !important; color: var(--t-nezd-ink) !important;
}
.spoon-emlek-toast .action.spoon-toast-gomb:hover { background: var(--t-nezd-halvany-2) !important; }
.spoon-emlek-toast .action.spoon-toast-bezar { padding: 2px 8px !important; color: var(--t-ink-halvany) !important; font-size: 16px !important; }
.spoon-emlek-toast .action.spoon-toast-bezar:hover { color: var(--t-ink) !important; }

/* ==========================================================================
   SPOON arculat-kiegészítés a közös skin (9999) mellé — 2026-10-16
   Cél-stílus: Eventrend Tervező (tenants/KIWI_00008/controlling-accounts-dashboards/redesign/32-tervezo-stilus.md).
   Öt jelentés-szín (nézd meg · rendben · dolgod van vele · átmeneti · semleges), négy elem-fajta, három betűméret.
   Minden SPOON-felület (komponensek, adatlapi blokkok, űrlapok) ezeket a változókat és az spn-* osztályokat használja.
   ========================================================================== */
:root {
  --t-font: 'Barlow', 'Fira Sans', ui-sans-serif, system-ui, sans-serif;
  --t-fs-jel: 11px;
  --t-fs-ui: 13px;
  --t-fs-szoveg: 15px;

  --t-ink-kiemelt: #09090b;
  --t-ink: #18181b;
  --t-ink-masod: #44444d;
  --t-ink-halvany: #71717a;
  --t-ink-inaktiv: #a1a1aa;
  --t-keret: #e4e4e7;
  --t-lap: #f4f4f5;
  --t-sav: #fafafa;
  --t-felulet: #ffffff;

  --t-nezd: #C49E6F;
  --t-nezd-ink: #7d6136;
  --t-nezd-halvany: rgba(196, 158, 111, .12);
  --t-nezd-halvany-2: rgba(196, 158, 111, .22);
  --t-ok: #4b7b58;
  --t-ok-ink: #2f5c37;
  --t-ok-halvany: #eef4ef;
  --t-teendo: #c08a86;
  --t-teendo-ink: #97302b;
  --t-teendo-halvany: #fbeeed;
  --t-atmeneti: #d9b45a;
  --t-atmeneti-ink: #8a6512;
  --t-atmeneti-halvany: #fdf6e6;
  --t-semleges: #e4e4e7;
  --t-semleges-ink: #44444d;
  --t-semleges-halvany: #f4f4f5;

  --t-r-kis: 6px;
  --t-r-kartya: 8px;
  --t-gap-1: 4px;
  --t-gap-2: 8px;
  --t-gap-3: 12px;
  --t-gap-4: 20px;
  --t-arnyek: 0 4px 20px rgba(24, 24, 27, .05);
}

/* Sötét mód: ugyanaz az öt jelentés, világosabb tintával; a kártya Discord-szürke (user, 2026-10-15) */
body.dark-mode {
  --t-ink-kiemelt: #fafafa;
  --t-ink: #f2f3f5;
  --t-ink-masod: #d4d4d8;
  --t-ink-halvany: #a1a1aa;
  --t-ink-inaktiv: #71717a;
  --t-keret: #3f4147;
  --t-lap: #2b2d31;
  --t-sav: #2b2d31;
  --t-felulet: #313338;

  --t-nezd: #BDA588;
  --t-nezd-ink: #e8d7bd;
  --t-nezd-halvany: rgba(189, 165, 136, .14);
  --t-nezd-halvany-2: rgba(189, 165, 136, .26);
  --t-ok: #6f9d7c;
  --t-ok-ink: #cfe3d4;
  --t-ok-halvany: rgba(111, 157, 124, .16);
  --t-teendo: #c98e89;
  --t-teendo-ink: #f0cfcc;
  --t-teendo-halvany: rgba(201, 142, 137, .16);
  --t-atmeneti: #d9b45a;
  --t-atmeneti-ink: #f0dfae;
  --t-atmeneti-halvany: rgba(217, 180, 90, .16);
  --t-semleges: #4e5058;
  --t-semleges-ink: #d4d4d8;
  --t-semleges-halvany: #2b2d31;

  --t-arnyek: 0 4px 20px rgba(0, 0, 0, .3);
}

/* --- közös SPOON-elemek (spn-*): a 32-es négy elem-fajtája és két gombja ------------------------------ */
.spn { font-family: var(--t-font); font-variant-numeric: tabular-nums; color: var(--t-ink); }
.spn-kicsi-fejlec {
  font-size: var(--t-fs-jel); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--t-ink-halvany);
}
.spn-meta { font-size: var(--t-fs-jel); color: var(--t-ink-halvany); }
.spn-panel {
  background: var(--t-sav); border: 1px solid var(--t-keret); border-radius: var(--t-r-kartya); padding: 10px 12px;
}

.spn-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-fs-ui); line-height: 1.5;
  border-radius: var(--t-r-kis); padding: 1px 9px; white-space: nowrap; border: 1px solid var(--t-semleges);
  background: var(--t-semleges-halvany); color: var(--t-semleges-ink);
}
.spn-chip.spn-ok       { background: var(--t-ok-halvany);       border-color: var(--t-ok);       color: var(--t-ok-ink); }
.spn-chip.spn-teendo   { background: var(--t-teendo-halvany);   border-color: var(--t-teendo);   color: var(--t-teendo-ink); }
.spn-chip.spn-atmeneti { background: var(--t-atmeneti-halvany); border-color: var(--t-atmeneti); color: var(--t-atmeneti-ink); }
.spn-chip.spn-nezd     { background: var(--t-nezd-halvany);     border-color: var(--t-nezd);     color: var(--t-nezd-ink); cursor: pointer; }

.spn-btn {
  font: 500 var(--t-fs-ui)/1.5 var(--t-font); border-radius: var(--t-r-kis); padding: 3px 12px; cursor: pointer;
  background: var(--t-felulet); border: 1px solid var(--t-keret); color: var(--t-ink-masod); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.spn-btn:hover { border-color: var(--t-ink-inaktiv); color: var(--t-ink); text-decoration: none; }
.spn-btn:disabled { opacity: .55; cursor: default; }
.spn-btn-elso { background: var(--t-nezd-halvany); border-color: var(--t-nezd); color: var(--t-nezd-ink); }
.spn-btn-elso:hover { background: var(--t-nezd-halvany-2); color: var(--t-nezd-ink); border-color: var(--t-nezd); }
.spn-btn-ok { background: var(--t-ok-halvany); border-color: var(--t-ok); color: var(--t-ok-ink); }
.spn-btn-ok:hover { border-color: var(--t-ok-ink); color: var(--t-ok-ink); }
.spn-btn-veszes { background: var(--t-felulet); border-color: var(--t-teendo); color: var(--t-teendo-ink); }
.spn-btn-veszes:hover { background: var(--t-teendo-halvany); border-color: var(--t-teendo); color: var(--t-teendo-ink); }
/* user-functions gombok (btn_class „btn spn-btn …”): a Bootstrap .btn mellett is a 32-es forma */
.btn.spn-btn { box-shadow: none; }
.btn.spn-btn:focus { box-shadow: 0 0 0 3px var(--t-nezd-halvany); }
.spn-btn-ikon { padding: 2px 7px; border: 0; background: transparent; color: var(--t-ink-halvany); }
.spn-btn-ikon:hover { background: rgba(24, 24, 27, .06); color: var(--t-ink); }
body.dark-mode .spn-btn-ikon:hover { background: rgba(255, 255, 255, .08); }
.spn-btn:focus-visible, .spn-chip:focus-visible { outline: 2px solid var(--t-nezd); outline-offset: 2px; }

/* a skin `body #app a { color: var(--accent-color) !important }` ellen: a link-chip a „nézd meg” tintáját viszi */
body #app a.spn-chip, body #app a.spn-btn { text-decoration: none !important; }
body #app a.spn-chip.spn-nezd { color: var(--t-nezd-ink) !important; }
body #app a.spn-chip.spn-nezd:hover { background: var(--t-nezd-halvany-2); }

/* --- adatlapi blokkok (sys_api calculated-field: a HTML-t az SQL adja) --- */
.spn-blokk { font-size: var(--t-fs-ui); line-height: 1.5; padding: 2px 0 var(--t-gap-2); }
.spn-blokk .spn-kicsi-fejlec { margin-right: 2px; }
.spn-blokk-fej { display: flex; align-items: center; gap: var(--t-gap-2); flex-wrap: wrap; margin-bottom: 6px; }
.spn-blokk .spn-chip i { font-size: 11px; }
.spn-haladas-sav {
  height: 8px; border-radius: 4px; overflow: hidden; background: var(--t-semleges-halvany); border: 1px solid var(--t-keret);
}
.spn-haladas-sav > div { height: 100%; border-radius: 4px 0 0 4px; }
.spn-haladas-skala {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-size: var(--t-fs-jel); color: var(--t-ink-halvany); text-transform: uppercase; letter-spacing: .04em;
}
.spn-kapcs { display: flex; align-items: center; gap: var(--t-gap-2); flex-wrap: wrap; }
.spn-kapcs-nev { font-weight: 600; color: var(--t-ink-kiemelt); margin-right: 2px; }
.spn-info {
  display: flex; gap: var(--t-gap-3); align-items: flex-start; margin: 2px 0 var(--t-gap-2);
  background: var(--t-sav); border: 1px solid var(--t-keret); border-radius: var(--t-r-kartya); padding: 10px 14px;
}
.spn-info-ikon { color: var(--t-nezd); font-size: 16px; margin-top: 2px; }
.spn-info-cim { font-weight: 600; color: var(--t-ink-kiemelt); }
.spn-info-szoveg { color: var(--t-ink-masod); margin-top: 2px; }
.spn-info-szoveg b { font-weight: 600; color: var(--t-ink); }

/* --- műveleti űrlapok (Webform2 html-mezők és a 36 codes.js szövegei) --- */
.spn-urlap-bev { margin-bottom: var(--t-gap-2); }
.spn-urlap-szoveg { font-size: var(--t-fs-ui); line-height: 1.55; color: var(--t-ink-masod); margin-top: 2px; }
.spn-uzenet {
  display: flex; gap: var(--t-gap-2); align-items: flex-start; margin: 6px 0 var(--t-gap-2); padding: 8px 12px;
  font-size: var(--t-fs-ui); line-height: 1.5; border-radius: var(--t-r-kis);
  background: var(--t-sav); border: 1px solid var(--t-keret); color: var(--t-ink-masod);
}
.spn-uzenet > i { margin-top: 3px; color: var(--t-ink-halvany); }
.spn-uzenet.spn-teendo { background: var(--t-teendo-halvany); border-color: var(--t-teendo); color: var(--t-teendo-ink); }
.spn-uzenet.spn-teendo > i { color: var(--t-teendo-ink); }
.spn-uzenet.spn-atmeneti { background: var(--t-atmeneti-halvany); border-color: var(--t-atmeneti); color: var(--t-atmeneti-ink); }
.spn-szakasz {
  display: flex; align-items: baseline; gap: var(--t-gap-2); margin: var(--t-gap-3) 0 2px; padding-top: var(--t-gap-2);
  border-top: 1px solid var(--t-keret);
}
.spn-esemeny-sor {
  display: flex; align-items: center; gap: var(--t-gap-2); flex-wrap: wrap; margin-top: var(--t-gap-2); padding-top: var(--t-gap-2);
  border-top: 1px solid var(--t-lap); font-size: var(--t-fs-ui);
}
.spn-esemeny-szam { font-size: var(--t-fs-jel); font-weight: 600; color: var(--t-ink-halvany); min-width: 18px; }
.spn-esemeny-nev { font-weight: 600; color: var(--t-ink-kiemelt); }
.spn-chip.spn-chip-halk { background: transparent; color: var(--t-ink-halvany); border-color: var(--t-keret); }
/* űrlapok projekt-fejléce (valueAPI {{projekt_info}} / t35_info) és a jutalék-előnézet listája */
.spn-projekt { margin: 4px 0 var(--t-gap-2); font-size: var(--t-fs-ui); line-height: 1.5; }
.spn-projekt-cim { font-weight: 600; color: var(--t-ink-kiemelt); }
.spn-projekt .spn-meta { font-size: var(--t-fs-ui); color: var(--t-ink-masod); }
.spn-projekt .spn-meta b { font-weight: 600; color: var(--t-ink); }
.spn-projekt .spn-uzenet { margin: 6px 0 0; }
.spn-lista { margin: 6px 0 var(--t-gap-2); padding-left: 18px; font-size: var(--t-fs-ui); line-height: 1.6; color: var(--t-ink-masod); }
.spn-lista b { font-weight: 600; color: var(--t-ink); font-variant-numeric: tabular-nums; }

/* jelentés-pont (kis kör) */
.spn-pont { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t-semleges); flex: 0 0 8px; }
.spn-pont.spn-ok { background: var(--t-ok); }
.spn-pont.spn-teendo { background: var(--t-teendo); }
.spn-pont.spn-atmeneti { background: var(--t-atmeneti); }
.spn-pont.spn-nezd { background: var(--t-nezd); }

/* --- lista-cellák rámutatási súgója (user, 2026-10-16) ------------------------------------------------------------
   A natív gyorsnézet (.text-quick-look > span) rámutatáskor kisebb, eltolt, átlátszó hátterű szövegpéldányt rajzolt
   („szellemkép”). Most ugyanaz a kártya, mint a skin túlcsordulás-súgója (td.has-overflow::after, 9999 szkript):
   minden szöveges cellán így jelenik meg; ahol a skin-súgó él (hosszú szöveg), ott a gyorsnézet rejtve, hogy ne legyen dupla. */
.crud-table tbody td .text-quick-look { position: relative; }
.crud-table tbody td .text-quick-look.text-quick-look.text-quick-look > span {
  display: none !important;
}
.crud-table tbody td:not(.has-overflow) .text-quick-look.text-quick-look.text-quick-look:hover > span {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  position: absolute !important; left: 4px !important; right: auto !important; top: -8px !important; bottom: auto !important;
  transform: translateY(-100%) !important; width: auto !important; height: auto !important; max-width: 420px;
  margin: 0 !important; padding: 5.6px 8.4px !important; z-index: 99999 !important;
  background: var(--t-felulet) !important; color: var(--t-ink) !important;
  border: 1px solid var(--t-keret) !important; border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important;
  font: 400 12.25px/1.4 var(--t-font) !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* Lista fejléc és szűrő-lenyíló rétegzése (user, 2026-10-16): a sorok beépített szerkesztőmezője (z 15) és rejtett
   szövege (z 10) a fejléccellák (z 12) és a ragadós szűrősor (z 15) fölé került → a sorok szövege átlátszott a szűrőn
   és a lenyíló menün. A fejléc mindig a sorok fölött legyen; a név-rámutatási kártya (z 99999) továbbra is legfelül. */
html body #app .crud-table > thead > tr > th {
  z-index: 20 !important;
  background-color: var(--t-sav) !important; /* átlátszatlan: sötét módban 2%-os volt, görgetéskor átlátszottak a sorok */
}
@media (min-width: 992px) {
  html body #app .crud-table > thead:nth-of-type(1) { z-index: 22 !important; }
  html body #app .crud-table > thead:nth-of-type(2) { z-index: 21 !important; }
}
html body #app .crud-table > thead .dropdown-menu {
  padding: 4px !important;
}
html body #app .crud-table > thead .dropdown-menu .dropdown-item,
html body #app .crud-table > thead .dropdown-menu li > a {
  color: var(--t-ink) !important;
  font-size: var(--t-fs-ui) !important;
  font-weight: 500 !important;
  border-radius: var(--t-r-kis);
  padding: 6px 10px !important;
}
html body #app .crud-table > thead .dropdown-menu .dropdown-item:hover,
html body #app .crud-table > thead .dropdown-menu .dropdown-item:focus,
html body #app .crud-table > thead .dropdown-menu li > a:hover {
  background: var(--t-nezd-halvany-2) !important;
  color: var(--t-ink-kiemelt) !important;
}
html body #app .crud-table > thead .dropdown-menu .dropdown-item.active,
html body #app .crud-table > thead .dropdown-menu li.active > a {
  background: var(--t-nezd) !important;
  color: #ffffff !important;
}

/* Színezett listasor rámutatáskor (user, 2026-10-16): a skin a cellákat világos `--table-row-hover`-re festette, a sor saját
   (pl. fehér) betűszíne viszont maradt → fehér betű világos alapon. A színezett sor megtartja a saját színét, és csak
   enyhén sötétedik; így a sor betűszíne (fehér a pirosón, zöld a halványzöldön) mindig olvasható. */
html body #app .crud-table > tbody > tr[style*="background-color"]:hover > td {
  background: transparent !important;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .14) !important;
}
html body #app .crud-table > tbody > tr[style*="background-color"]:hover {
  outline: 1px solid rgba(0, 0, 0, .22);
  outline-offset: -1px;
}
/* Gomb sose legyen szélesebb a helyénél, a felirata ne törjön szét (user, 2026-10-16: mobilbarát) */
.spn-btn { max-width: 100%; white-space: nowrap; flex-shrink: 0; }

/* Dokumentum feltöltése gomb az adatlap műveleti sorában (user, 2026-10-16; directives spoon-<api>-docup).
   Csak ikon, mint az Excel-gomb (user, 2026-10-16); súgó a title-ben (124 szkript). A második gomb a kamera: asztali gépen rejtve. */
/* a Kiwi2 a két gombot nem törő dobozba teszi → keskeny helyen egymásra csúsztak (2026-10-16 mobilpróba) */
div:has(> .btn.spn-docup) { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal !important; max-width: 100%; }
div:has(> .btn.spn-docup) { align-items: center; }
/* a felső sorban az Excel-gombbal azonos méret (csak ikon: a sormagasság adja a 36 px-t) */
.btn.spn-docup { display: inline-block; text-align: center; min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn.spn-docup ~ .btn.spn-docup { display: none; }
}
/* Kiwi2 felső eszközsor tördelése (Létrehozás / nézetek / Excel / Dokumentum feltöltése): a sor flex, de nem tördel →
   keskeny ablakban a gombok kilógtak (2026-10-16 mobilpróba). Felismerés: a Létrehozás gomb slot-only dobozát tartalmazó sor. */
html body #app div.mb-3.align-items-center:has(> .d-inline-block[slot-only]) { flex-wrap: wrap; row-gap: 6px; }

/* Teremfoglalás ütközésfigyelmeztetés (124 szkript, 2026-10-19): a skin színeivel, jól olvasható */
.toasted.spn-terem-utkozes { background: var(--t-atmeneti-halvany) !important; color: var(--t-atmeneti-ink) !important;
  border: 1px solid var(--t-atmeneti) !important; font: 500 var(--t-fs-ui)/1.45 var(--t-font) !important; max-width: 420px; }
.toasted.spn-terem-utkozes .action { color: var(--t-atmeneti-ink) !important; }

/* --- rámutatási súgó MINDIG a cella fölött (user, 2026-10-19) -------------------------------------------------------
   A skin túlcsordulás-súgója (td.has-overflow::after) a cella közepére került, így rálógott a mezőre (pl. a Foglal pipára
   „false” felirattal). Most minden mezőtípusnál a cella fölé kerül, ugyanoda, ahová a gyorsnézet; pipás cellán nincs súgó. */
html body .crud-table tbody td[data-field].has-overflow::after {
  top: auto !important; bottom: calc(100% + 4px) !important; left: 4px !important; transform: none !important;
}
html body .crud-table tbody td[data-field].has-overflow:has(input[type="checkbox"])::after,
html body .crud-table tbody td[data-field].has-overflow:has(input[type="checkbox"]):hover::after {
  display: none !important;
}

/* --- projekt-fejléc M1 (2026-10-20): azonosító sor + 7 pontos lépéssor (sys_api 27) ----------------------------------
   Terv: outputs/SPOON_KIWI2_ATALLAS/PROJEKT_ADATLAP_FEJLEC_DIZAJNTERV.md. A státuszszín adat: inline --spn-lepes-szin / -ink. */
.spn-fejleckartya {
  background: var(--t-felulet); border: 1px solid var(--t-keret); border-radius: var(--t-r-kartya);
  box-shadow: var(--t-arnyek); padding: 14px 16px 12px; margin: 0 0 12px;
}
.spn-fk-azon {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--t-keret);
}
.spn-fk-bal { flex: 1 1 320px; min-width: 0; }
.spn-fk-cim {
  font-size: var(--t-fs-szoveg); font-weight: 700; line-height: 1.3; color: var(--t-ink-kiemelt);
  margin: 2px 0 4px; overflow-wrap: anywhere;
}
.spn-fk-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-fs-ui); color: var(--t-ink-masod); }
.spn-fk-meta > span { display: inline-flex; align-items: center; white-space: nowrap; }
.spn-fk-meta i { width: 14px; margin-right: 6px; text-align: center; color: var(--t-ink-halvany); font-size: 12px; }
.spn-fk-jobb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.spn-fejleckartya .spn-lepessor { list-style: none; display: flex; margin: 14px 0 8px; padding: 0; }
.spn-lepessor > li { flex: 1 1 0; position: relative; min-width: 0; text-align: center; }
.spn-lepessor > li::before {
  content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--t-keret); z-index: 0;
}
.spn-lepessor > li:first-child::before { display: none; }
.spn-lepessor > li.spn-lepes-kesz::before, .spn-lepessor > li.spn-lepes-most::before { background: var(--spn-lepes-ink, var(--t-ink-masod)); }
.spn-lepes-pont {
  position: relative; z-index: 1; display: block; box-sizing: border-box; margin: 1px auto 0;
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--t-keret); background: var(--t-felulet);
}
.spn-lepes-kesz .spn-lepes-pont { background: var(--spn-lepes-ink, var(--t-ink-masod)); border-color: var(--spn-lepes-ink, var(--t-ink-masod)); }
.spn-lepes-most .spn-lepes-pont {
  width: 18px; height: 18px; margin-top: -1px; background: var(--spn-lepes-szin, var(--t-nezd-halvany));
  border-color: var(--spn-lepes-ink, var(--t-ink)); box-shadow: 0 0 0 3px var(--t-nezd-halvany);
}
.spn-lepes-nev {
  display: block; margin-top: 6px; padding: 0 2px; line-height: 1.25;
  font-size: var(--t-fs-jel); text-transform: uppercase; letter-spacing: .05em; color: var(--t-ink-halvany);
}
.spn-lepes-kesz .spn-lepes-nev { color: var(--t-ink-masod); }
.spn-lepes-most .spn-lepes-nev { color: var(--t-ink-kiemelt); font-weight: 600; }
.spn-lepessor-mellek { opacity: .45; }
.spn-lepes-also {
  display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap;
  font-size: var(--t-fs-ui); color: var(--t-ink-masod);
}
.spn-lepes-also b { color: var(--t-ink-kiemelt); font-weight: 600; }
.spn-fejleckartya .spn-uzenet { margin: 4px 0 0; }
.spn-fejleckartya .spn-uzenet i { margin-top: 3px; }
/* sötét módban a státusz sötét betűszíne a sötét kártyán nem látszana: a kész lépés semleges világos tintát kap */
body.dark-mode .spn-lepessor > li.spn-lepes-kesz::before, body.dark-mode .spn-lepessor > li.spn-lepes-most::before { background: var(--t-ink-halvany); }
body.dark-mode .spn-lepes-kesz .spn-lepes-pont { background: var(--t-ink-halvany); border-color: var(--t-ink-halvany); }
body.dark-mode .spn-lepes-most .spn-lepes-pont { border-color: var(--t-ink); }
.spn-lepes-nev { word-break: keep-all; overflow-wrap: normal; hyphens: none; }
@media (max-width: 768px) {
  .spn-fejleckartya { padding: 12px 12px 10px; }
  .spn-fejleckartya .spn-lepessor { margin: 12px 0 6px; }
  .spn-lepes-nev { display: none; }
}

/* --- projekt-fejléc M2 (2026-10-20): kapcsolattartó-sor + gombsor; a haladás-kártya csak státuszkövetés (user) ---------- */
.spn-fejleckartya .spn-blokk-fej { margin-bottom: 0; }
.spn-fejleckartya .spn-lepessor { margin: 14px 0 10px; }
.spn-lepessor > li { cursor: default; }
.spn-lepes-also { font-size: var(--t-fs-ui); color: var(--t-ink-masod); }
.spn-kapcs-sor { gap: 8px 10px; padding: 2px 0; }
.spn-kapcs-szoveg { display: inline-flex; flex-direction: column; line-height: 1.3; margin-right: 6px; min-width: 0; }
.spn-kapcs-szoveg .spn-meta { font-size: var(--t-fs-ui); }
.spn-monogram {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-semleges-halvany); border: 1px solid var(--t-keret); color: var(--t-ink-masod); font: 600 12px/1 var(--t-font);
}
.spn-monogram-ures { color: var(--t-ink-inaktiv); }
.spn-kapcs-oszlop, .spn-gomb-oszlop { align-self: center; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 575.98px) {
  .spn-gomb-oszlop .btn-group, .spn-gomb-oszlop .dropdown, .spn-gomb-oszlop .spn-btn, .spn-gomb-oszlop .dropdown > .btn { width: 100%; }
  .spn-gomb-oszlop .spn-btn, .spn-gomb-oszlop .dropdown > .btn { min-height: 44px; justify-content: center; }
}
/* M2 javítás: a grid „width” col-md-N osztálya ne szorítsa össze a gombokat; a következő-lépés sor egy szöveg */
.row > .spn-gomb-oszlop { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; }
.spn-fejleckartya .spn-lepes-also { display: block; }
@media (max-width: 575.98px) {
  .row > .spn-gomb-oszlop { flex: 0 0 100% !important; width: 100% !important; }
}
/* M2 javítás 2: a kapcsolattartó saját, teljes szélességű sor; alatta a gombsor */
.row > .spn-kapcs-oszlop { flex: 0 0 100% !important; max-width: 100% !important; }

/* --- adatlap-feliratok teljesen (user, 2026-10-20): a skin 140 px-es, egysoros, „…”-tal levágott felirat-cellája helyett
   a felirat törik (szóhatáron), a szélesség marad; a sor függőlegesen középre igazított marad. */
html body .crud-details-table tr > td:nth-child(2n+1) {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  line-height: 1.3 !important; padding-top: 6px !important; padding-bottom: 6px !important;
  overflow-wrap: break-word; word-break: normal; hyphens: manual;
}
/* --- projekt-adatlap: Riportok gomb halványzöld, elkülönítve a műveleti gomboktól (2026-10-21, user) ---------------- */
/* a skin .dropdown-toggle / .btn-secondary szabálya !important, ezért itt is az kell */
/* 2026-10-21 (user): a Riportok külön sorban, a Státuszváltás alatt */
.row > .spn-riport-oszlop { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding-top: 2px; }
html body .spn-riport-oszlop .dropdown > .btn.dropdown-toggle {
  background-color: #e3f1e6 !important; border: 1px solid #b4d5bc !important; color: var(--t-ok-ink) !important;
  font-weight: 600; box-shadow: none !important;
}
html body .spn-riport-oszlop .dropdown > .btn.dropdown-toggle:hover, html body .spn-riport-oszlop .dropdown > .btn.dropdown-toggle:focus,
html body .spn-riport-oszlop .dropdown.show > .btn.dropdown-toggle { background-color: #d3e9d9 !important; border-color: #98c4a3 !important; }
html body.dark-mode .spn-riport-oszlop .dropdown > .btn.dropdown-toggle {
  background-color: rgba(111, 157, 124, .16) !important; border-color: rgba(111, 157, 124, .5) !important; color: var(--t-ok-ink) !important;
}
html body.dark-mode .spn-riport-oszlop .dropdown > .btn.dropdown-toggle:hover,
html body.dark-mode .spn-riport-oszlop .dropdown.show > .btn.dropdown-toggle { background-color: rgba(111, 157, 124, .28) !important; }
@media (max-width: 575.98px) {
  .row > .spn-riport-oszlop { margin-top: 6px; }
}
/* 2026-10-22 (user): Dokumentumok lista — a Fájl cella letölt, ezért linkként látszik (a skin color:inherit-je helyett) */
html body .crud-table tbody tr td .form-control.file-field[readonly] { color: rgb(196, 158, 111) !important; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(196, 158, 111, .45); }
html body .crud-table tbody tr td .form-control.file-field[readonly]:hover { text-decoration-color: currentColor; }
/* 2026-10-22 (ügyfél): projekt naptár — termek sor */
.spn-naptar-termek { font-size: .92em; opacity: .9; }
.spn-naptar-termek i { margin-right: 2px; }
/* 2026-10-22 (ügyfél): projekt szerkesztő ablak — Adatlap / Státuszváltás gomb */
.crud-form-actions .spn-form-gombok { margin-left: 6px; }
.crud-form-actions .spn-form-gombok .btn { margin-right: 4px; }
/* 2026-10-26 (user): projekt naptár — kezdés–befejezés időpont a bejegyzés elején */
.spn-naptar-ido { font-weight: 700; margin-right: 2px; }
/* 2026-10-27 (ügyfél): projekt naptár telefonon — a cellában idő (kezdés–vége) / cégnév / RSZ / terem egy-egy sorban (10-29: az idő is látszik) */
@media (max-width: 767.98px) {
  .calendar-event-item:has(.spn-naptar-ido) { max-height: 68px !important; }
  .calendar-event-item .spn-naptar-sep { display: none; }
  .calendar-event-item .spn-naptar-ido { display: block; white-space: normal; overflow-wrap: anywhere; letter-spacing: -.02em; }
  .calendar-event-item .spn-nl-1, .calendar-event-item .spn-naptar-rsz, .calendar-event-item .spn-naptar-termek {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
/* 2026-11-03 (user): adatlapon a szövegdoboz mezők (Leírás, Vendégkör) dobozként, a teljes szöveggel — eddig 2 sor, keret nélkül, levágva */
html body #app textarea.form-control.multitext[readonly] {
  min-height: 4.5em !important; max-height: 16em !important;
  overflow-y: auto !important; resize: vertical !important; white-space: pre-wrap;
  border: 1px solid var(--t-keret) !important; border-radius: 6px !important; background-color: var(--t-sav) !important;
  padding: 6px 8px !important; line-height: 1.4 !important; color: var(--t-ink) !important;
}
@supports (field-sizing: content) {
  html body #app textarea.form-control.multitext[readonly] { field-sizing: content; height: auto !important; }
}



/* ==========================================================================
   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: 28px !important; max-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 28px !important; max-height: 28px !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;
  }
}



/* === Módosítás: A mezőnév és a szűrők sora max 28px magas legyen === */
/* A cella paddingjának eltávolítása és fix 28px magasság beállítása */
html body #app .table thead tr th,
html body #app .crud-table thead tr th,
html body #app .table thead tr:first-child th,
html body #app .crud-table thead tr:first-child th,
html body #app .table thead tr:nth-child(1) th,
html body #app .crud-table thead tr:nth-child(1) th,
html body #app .table thead th,
html body #app .crud-table thead th {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  height: 28px !important;
  max-height: 28px !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

/* A filterek és gombok (inputok) magasságának fixálása 24px-re */
html body .crud-table thead th .crud-filter .form-control,
html body .crud-table thead th .crud-filter .custom-select,
html body .crud-table thead th .crud-filter .btn,
html body .crud-table thead th .crud-filter .input-group-prepend,
html body .crud-table thead th .crud-filter .input-group-text,
html body .crud-table thead th .crud-filter .multiselect,
html body .crud-table thead th .crud-filter .multiselect__tags,
html body .table thead th .crud-filter .form-control,
html body .table thead th .crud-filter .custom-select,
html body .table thead th .crud-filter .btn,
html body .table thead th .crud-filter .input-group-prepend,
html body .table thead th .crud-filter .input-group-text,
html body .table thead th .crud-filter .multiselect,
html body .table thead th .crud-filter .multiselect__tags {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 22px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13px !important;
}

/* Gombok és ikonok tartalmának középre igazítása a kisebb magasság miatt */
html body .crud-table thead th .crud-filter .btn,
html body .crud-table thead th .crud-filter .input-group-prepend,
html body .crud-table thead th .crud-filter .input-group-text,
html body .table thead th .crud-filter .btn,
html body .table thead th .crud-filter .input-group-prepend,
html body .table thead th .crud-filter .input-group-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Külön a belső div (dropdown btn-group) magasságát is fixáljuk */
html body .crud-table thead th .crud-filter .dropdown.btn-group,
html body .table thead th .crud-filter .dropdown.btn-group {
  height: 24px !important;
}

/* Szöveg címke (label) magasságának optimalizálása */
html body .crud-table thead th > span,
html body .crud-table thead th > div:not(.crud-filter),
html body .table thead th > span,
html body .table thead th > div:not(.crud-filter) {
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  display: inline-block !important;
}




/* === A gombsor és a táblázat közötti távolság csökkentése === */
/* A táblázat feletti láthatatlan betöltő csík (skeleton) foglalja a helyet (visibility: hidden miatt), ezt eltávolítjuk a flow-ból */
html body #app .card-body > div > .b-skeleton.invisible {
  display: none !important;
}

/* Extra védelem, ha az alsó div-nek van margója */
html body #app .card-body > div > div.row.mt-1 {
  margin-top: 0 !important;
}

html body #app .table-responsive {
  margin-top: 0 !important;
}

html body #app .crud-table {
  margin-top: 0 !important;
}





/* === A kártya (card) lekerekítése és szegélyezése a távolságok megőrzésével === */
html body #app .main-content .card {
    border-radius: 8px !important;
    border: 1px solid #ced4da !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: #fff !important;
}

/* Átlátszó háttér, hogy a kártya fehér háttere és lekerekítése érvényesüljön,
   valamint minden padding és margó módosítás eltávolítva, hogy a távolságok eredetiek maradjanak! */
html body #app .main-content .card .card-header {
    background-color: transparent !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom: none !important;
}

html body #app .main-content .card .card-body,
html body #app .main-content .card .table-responsive,
html body #app .main-content .card .crud-table {
    background-color: transparent !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !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;
}
/* ==========================================================================
   Sorműveletek gombok átlapolódásának javítása (Dinamikus)
   ========================================================================== */

/* Ha bármely CRUD tábla első 4 oszlopának valamelyikében gomb (.btn) található,
   állítsuk a táblázatot auto-layoutra, hogy a böngésző dinamikusan méretezhesse az oszlopot. */
.crud-table:has(tbody td:nth-child(1) .btn),
.table:has(tbody td:nth-child(1) .btn),
.crud-table:has(tbody td:nth-child(2) .btn),
.table:has(tbody td:nth-child(2) .btn),
.crud-table:has(tbody td:nth-child(3) .btn),
.table:has(tbody td:nth-child(3) .btn),
.crud-table:has(tbody td:nth-child(4) .btn),
.table:has(tbody td:nth-child(4) .btn) {
  table-layout: auto !important;
}

/* 1. oszlop tágítása gomb esetén */
.crud-table:has(tbody td:nth-child(1) .btn) tbody td:nth-child(1),
.crud-table:has(tbody td:nth-child(1) .btn) thead th:nth-child(1),
.table:has(tbody td:nth-child(1) .btn) tbody td:nth-child(1),
.table:has(tbody td:nth-child(1) .btn) thead th:nth-child(1) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* 2. oszlop tágítása gomb esetén */
.crud-table:has(tbody td:nth-child(2) .btn) tbody td:nth-child(2),
.crud-table:has(tbody td:nth-child(2) .btn) thead th:nth-child(2),
.table:has(tbody td:nth-child(2) .btn) tbody td:nth-child(2),
.table:has(tbody td:nth-child(2) .btn) thead th:nth-child(2) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* 3. oszlop tágítása gomb esetén */
.crud-table:has(tbody td:nth-child(3) .btn) tbody td:nth-child(3),
.crud-table:has(tbody td:nth-child(3) .btn) thead th:nth-child(3),
.table:has(tbody td:nth-child(3) .btn) tbody td:nth-child(3),
.table:has(tbody td:nth-child(3) .btn) thead th:nth-child(3) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* 4. oszlop tágítása gomb esetén */
.crud-table:has(tbody td:nth-child(4) .btn) tbody td:nth-child(4),
.crud-table:has(tbody td:nth-child(4) .btn) thead th:nth-child(4),
.table:has(tbody td:nth-child(4) .btn) tbody td:nth-child(4),
.table:has(tbody td:nth-child(4) .btn) thead th:nth-child(4) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* A Bootstrap tooltip ne takarja el az alatta levő szűrőtörlő gombot. */
.tooltip {
  pointer-events: none !important;
}


/* Üres lista: maradjon hely a szűrősor alatti tooltipnek. */
.table-responsive:has(> .crud-table tbody:empty) {
  min-height: 180px !important;
}


/* TABLEVERSUM list-filter dropdown hover contrast */
body #app .crud-filter .dropdown-menu .dropdown-item:hover,
body #app .crud-filter .dropdown-menu .dropdown-item:focus,
body #app .crud-filter .dropdown-menu .dropdown-item:active {
  color: #111111 !important;
  text-decoration: none !important;
}

/* === KiwiLab 2026-10-07: lista oszlopszuro-lenyilo ===
   Az alapkod (app.js) position:fixed-del szamolja a menu helyet, a fenti `.table thead .dropdown-menu { top:100% }`
   szabaly fix pozicional az ablak magassagat jelenti -> a menu az ablak ala kerult. A menut a sajat szuromezoje ala
   kenyszeritjuk, es amig nyitva van, a tablazat nem vagja le. */
body #app .table-responsive:has(thead .dropdown-menu.show) {
    /* Az app.js nyitaskor soron belul `overflow-x: initial`-t ir ra -> a tablazat kilog, a lap oldalra ugrik.
       A gorgetes marad, a tarolo pedig nyitott menunel magasabb, hogy a menu kiferjen. */
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    min-height: 22rem !important;
}
body #app .table thead th.crud-filter-cell .dropdown-menu.show {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    z-index: 1060 !important;
}
body #app .table thead th.crud-filter-cell:nth-last-child(-n+3) .dropdown-menu.show {
    left: auto !important;
    right: 0 !important;
}

/* === KiwiLab 2026-10-07: oldalsav gorgetese ===
   Az alapkod a torzset fix fejlecmagassaggal szamolja (100% - 7.5rem), a skin fejlece magasabb,
   ezert a torzs alja (a lefele gorgeto nyillal) az ablak ala csuszott. A torzs most a maradek helyet tolti ki. */
body #app .sidebar {
    display: flex !important;
    flex-direction: column !important;
}
body #app .sidebar > .sb-header {
    flex: 0 0 auto !important;
}
body #app .sidebar > .sb-body {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* KIWILAB kompakt lista-sűrítés 2026-10-28 — KEZDET (forrás: SPOON components 124) */
/* kompakt lista: 21 px-es sor (alul 1 px), kisebb betű (10-29: 10.2px; #app a 9999 .form-control .98rem-je ellen) */
html body #app .compact .crud-table:not(.crud-details-table) tbody td { height: 21px !important; padding-bottom: 1px !important; line-height: 18px !important; font-size: 10.2px !important; }
html body #app .compact .crud-table:not(.crud-details-table) tbody .form-control,
html body #app .compact .crud-table:not(.crud-details-table) tbody .custom-select { height: 18px !important; min-height: 18px !important; line-height: 18px !important; font-size: 10.2px !important; }
html body #app .compact .crud-table:not(.crud-details-table) tbody td .btn-sm { line-height: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body #app .compact .crud-table:not(.crud-details-table) thead th .crud-header-label { font-size: .78rem; }
/* kompakt lista: kisebb tér a modulnév körül, az eszközsor alatt és a lap alján */
html body .compact .card:has(> .card-body > .crud-page--list) { padding-top: 6px !important; padding-bottom: 4px !important; }
html body .compact .card:has(> .card-body > .crud-page--list) > .card-header { padding-top: 4px !important; padding-bottom: 4px !important; }
html body .compact .card:has(> .card-body > .crud-page--list) > .card-body { padding-bottom: 4px !important; }
html body .compact .crud-page--list > .crud-toolbar { margin-bottom: 8px !important; }
/* kompakt lista: magasabb táblázatdoboz, a lapozó lejjebb */
@media (min-width: 992.02px) {
  html body #app .compact .crud-page--list .table-responsive { max-height: calc(100vh - 188px) !important; margin-bottom: 6px !important; }
  html body .compact .crud-page--list .pagination { margin-bottom: 4px !important; }
}
/* KIWILAB kompakt lista-sűrítés 2026-10-28 — VÉGE */

/* KIWILAB szűrőlenyíló-javítás 2026-10-28 — KEZDET (forrás: SPOON components 124) */
/* nyitott fejlécszűrő-lenyíló: kevés vagy nulla sornál se vágódjon le */
@media (min-width: 992.02px) {
  body #app .table-responsive:has(.crud-filter-cell .dropdown-window) { min-height: 400px !important; max-height: max(400px, calc(100vh - 260px)) !important; }
  html body #app .compact .crud-page--list .table-responsive:has(.crud-filter-cell .dropdown-window) { max-height: max(400px, calc(100vh - 188px)) !important; }
}
/* 992 px alatt a core középre nyitja a lenyílót; a „lefelé nyíljon” szabály ott a képernyő alá tolná */
@media (max-width: 992px) {
  html body .table thead .dropdown-window, html body .crud-table thead .dropdown-window {
    top: 1rem !important; left: 50% !important; bottom: auto !important; right: auto !important;
  }
  /* a nyitott lenyíló cellája a felső sáv (1025) és az oldalmenü (1030) fölé kerül */
  html body #app .table > thead > tr > th:has(.dropdown-window), html body #app .crud-table > thead > tr > th:has(.dropdown-window) { z-index: 1135 !important; }
}
/* KIWILAB szűrőlenyíló-javítás 2026-10-28 — VÉGE */

/* KIWILAB listacella-térköz 2026-10-29 — KEZDET (forrás: SPOON components 124) */
/* lista: kisebb oldalsó térköz a cellákban (0.85rem helyett a fejléccel egyező 0.3rem), az első (jelölő) oszlop kivételével */
html body #app .crud-table:not(.crud-details-table) tbody td:not(:first-child) { padding-left: .3rem !important; padding-right: .3rem !important; }
/* KIWILAB listacella-térköz 2026-10-29 — VÉGE */

/* KIWILAB sötét kártyaháttér 2026-10-30 — KEZDET (forrás: SPOON components 124) */
/* sötét módban a kártyák (lista, rács) háttere szürke — a fenti `.main-content .card { background-color: #fff !important }` helyett */
html body.dark-mode #app .main-content .card,
html body.dark-mode #app .card,
html body.dark-mode #app .crud-card {
    background-color: #313338 !important;
    border-color: #3f4147 !important;
}
/* KIWILAB sötét kártyaháttér 2026-10-30 — VÉGE */

/* KIWILAB színezett sor sötét módban 2026-10-30 — KEZDET */
/* a sorszínező csak világos hátteret ad (betűszínt nem) → sötét módban is sötét betű; a saját betűszínt adó sor (pl. piros) marad */
html body.dark-mode #app .crud-table > tbody > tr[style*="background"]:not([style^="color"]):not([style*=" color:"]) > td {
    color: #18181b !important;
}
/* KIWILAB színezett sor sötét módban 2026-10-30 — VÉGE */

/* Oktatófilm-indító: az EFO-rács indító (#10004) gombjának formavilága; a párbeszéd a Beosztástervező (#10006) filmlistájáé. */
.okf-launcher { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
/* az EFO napi oldal (#10005) és a Munkaidő kezdőlap (main-ui) sávja: a gomb jobbra, a kártya fölött */
.okf-bar { display: flex; justify-content: flex-end; margin: 1rem 1rem 0; }
.okf-bar .okf-launcher-sep { display: none; }
/* a jobb felső sarok: a legközelebbi pozicionált ős (a CRUD kártyája / az oldal burkolója) jobb felső sarkában, a címsor vonalában */
.okf-launcher.okf-corner { position: absolute; top: .9rem; right: 1rem; z-index: 5; }
.okf-launcher.okf-corner .okf-launcher-sep { display: none; }
.okf-launcher-sep { width: 1px; height: 1.5rem; background: #d4d4d8; }
.okf-launcher-btn { height: 2.25rem; display: inline-flex; align-items: center; gap: .5rem; padding: 0 .875rem; border: 1px solid #C49E6F; border-radius: .375rem;
  background: rgba(196, 158, 111, .12); color: #7d6136; font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.okf-launcher-btn:hover { background: rgba(196, 158, 111, .28); }
.okf-launcher-btn:focus { outline: 0; box-shadow: 0 0 0 3px rgba(196, 158, 111, .35); }
/* „új film” jelzés (architecture/79): sötét arany címke a gombon, kétszeri finom felvillanással; a lista megnyitásakor eltűnik */
.okf-launcher-btn.has-new { border-color: #a07b4c; background: rgba(196, 158, 111, .22); }
.okf-new-badge { display: inline-flex; align-items: center; height: 1.25rem; margin-left: .125rem; padding: 0 .45rem; border-radius: .625rem; background: #7d6136; color: #fff;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1; animation: okf-new-pulse 1.6s ease-out 2; }
@keyframes okf-new-pulse { 0% { box-shadow: 0 0 0 0 rgba(125, 97, 54, .55); } 100% { box-shadow: 0 0 0 .5rem rgba(125, 97, 54, 0); } }
@media (prefers-reduced-motion: reduce) { .okf-new-badge { animation: none; } }
.okf-film-new { display: inline-block; margin-left: .5rem; padding: 0 .375rem; border-radius: .375rem; background: #7d6136; color: #fff; font-size: .625rem; font-weight: 700;
  letter-spacing: .04em; line-height: 1.1rem; vertical-align: .0625rem; }
.okf-backdrop { position: fixed; inset: 0; z-index: 1055; background: rgba(24, 24, 27, .35); display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem 1rem; }
.okf-dialog { width: min(42rem, 100%); max-height: calc(100vh - 4rem); display: flex; flex-direction: column; background: #fff; color: #18181b; border-radius: .5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); padding: .875rem 1rem 1rem; text-align: left; }
.okf-head { display: flex; align-items: center; gap: .5rem; }
.okf-title { margin: 0; font-size: 1rem; font-weight: 600; }
.okf-flex { flex: 1 1 auto; }
.okf-icon-ghost { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: #71717a; font-size: 1.1rem; cursor: pointer; }
.okf-icon-ghost:hover { background: rgba(24, 24, 27, .06); color: #18181b; }
.okf-note { margin: .25rem 0 .5rem; font-size: .8125rem; color: #71717a; }
.okf-note.is-warn { color: #8a6512; }
.okf-body { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: .75rem; }
.okf-surface-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7d6136; }
.okf-here { font-weight: 500; text-transform: none; letter-spacing: 0; color: #18181b; background: rgba(196, 158, 111, .16); border-radius: .375rem; padding: 0 .375rem; }
.okf-list { display: flex; flex-direction: column; border: 1px solid #ececee; border-radius: .375rem; overflow: hidden; }
.okf-film { display: flex; align-items: flex-start; gap: .75rem; width: 100%; padding: .5rem .75rem; border: 0; border-bottom: 1px solid #ececee; background: #fff; color: #18181b; text-align: left; font: inherit; cursor: pointer; }
.okf-film:last-child { border-bottom: 0; }
.okf-film:hover, .okf-film:focus-visible { background: rgba(196, 158, 111, .16); outline: none; }
.okf-film:focus-visible { box-shadow: inset 0 0 0 2px #C49E6F; }
.okf-film:disabled { cursor: progress; opacity: .7; }
.okf-film-part { flex: 0 0 2rem; font-weight: 600; color: #7d6136; font-variant-numeric: tabular-nums; }
.okf-film-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.okf-film-title { font-size: .875rem; font-weight: 600; }
.okf-film-sum { font-size: .75rem; color: #71717a; }
.okf-film-len { flex: 0 0 auto; font-size: .75rem; color: #71717a; font-variant-numeric: tabular-nums; }
.dark-mode .okf-launcher-btn { color: #e8d7bd; background: rgba(189, 165, 136, .2); }
.dark-mode .okf-launcher-sep { background: #4c535a; }
.dark-mode .okf-dialog, .dark-mode .okf-film { background: var(--dark-level-1, #24272b); color: #f4f4f5; }
.dark-mode .okf-list, .dark-mode .okf-film { border-color: #34383e; }
.dark-mode .okf-film:hover, .dark-mode .okf-film:focus-visible { background: rgba(189, 165, 136, .2); }
.dark-mode .okf-launcher-btn.has-new { border-color: #bda588; }
.dark-mode .okf-new-badge, .dark-mode .okf-film-new { background: #bda588; color: #18181b; }
/* Felső sáv mód (film-toolbar, architecture/80 D1): a sáv színén átlátszó, arany keretes gomb; a szöveg a sáv színét örökli (sötét és világos
   sávon is olvasható). Ahol az oldalhoz nincs film, az elem nem foglal helyet (D5). A sáv konténere nagybetűs: itt kikapcsolva. */
.okf-launcher.okf-toolbar { padding: 0 .5rem; text-transform: none; }
.okf-launcher.okf-toolbar.is-empty { display: none; }
.okf-launcher.okf-toolbar .okf-launcher-btn { position: relative; height: 2.25rem; border-color: #C49E6F; background: transparent; color: inherit; }
.okf-launcher.okf-toolbar .okf-launcher-btn:hover { background: rgba(196, 158, 111, .2); }
.okf-launcher.okf-toolbar .okf-launcher-btn.has-new { border-color: #C49E6F; background: rgba(196, 158, 111, .12); }
.okf-launcher.okf-toolbar .okf-new-badge { background: #C49E6F; color: #18181b; }
.okf-launcher.okf-toolbar .okf-tb-icon, .okf-launcher.okf-toolbar .okf-tb-dot { display: none; }
/* < 768 px (Bootstrap md alatt): csak ikon, a nem látott filmek száma arany pöttyben */
@media (max-width: 767.98px) {
  .okf-launcher.okf-toolbar { padding: 0 .25rem; }
  .okf-launcher.okf-toolbar .okf-launcher-btn, .okf-launcher.okf-toolbar .okf-launcher-btn.has-new { width: 2.25rem; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .okf-launcher.okf-toolbar .okf-tb-text, .okf-launcher.okf-toolbar .okf-new-badge { display: none; }
  .okf-launcher.okf-toolbar .okf-tb-icon { display: inline-block; font-size: 1.25rem; line-height: 1; }
  .okf-launcher.okf-toolbar .okf-tb-dot { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: .05rem; right: -.05rem; min-width: 1.1rem;
    height: 1.1rem; padding: 0 .25rem; border-radius: .55rem; background: #C49E6F; color: #18181b; font-size: .625rem; font-weight: 700; line-height: 1; }
}
/* a <body>-ba költözött párbeszéd a lap betűjét kapja (a skin a #app alatt állítja) */
body > .okf-layer { font-family: inherit; text-transform: none; }