.emu-worktime-manager {
    border: 1px solid #eaeaea;
    border-radius: 1rem;
}
.emu-worktime-manager .emu-sidebar {
    background: #f3f3f3;
    border-radius: 1rem 0 0 1rem;
}
.emu-worktime-manager .emu-content {
    border-radius: 0 1rem 1rem 0;
}
.emu-worktime-manager .emu-content.rounded {
    border-radius: 1rem!important;
}
.emu-worktime-manager .loading-overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 200%;
    z-index: 50;
    background: #000000a6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emu-worktime-manager .queued {
    outline: 2px solid var(--orange);
}
.dark-mode .emu-worktime-manager {
    border: 1px solid #4c535a;
}
.dark-mode .emu-worktime-manager .emu-sidebar {
    background: var(--dark-level-2);
}
.dark-mode .btn-gray-300 {
    background: #32353a;
    border-color: #32353a;
}
.dark-mode .btn-gray-400 {
    background: #282b2f;
    border-color: #282b2f;
}
.schedule-table {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.schedule-table tr > td.fixed, .schedule-table tr > th.fixed {
    position: sticky;
    background: #fff;
    left: -2px;
    z-index: 50;
}
.schedule-table tr > td.fixed.fixed-top, .schedule-table tr > th.fixed.fixed-top {
    left: initial;
    top: -2px;
    z-index: 40;
}
.schedule-table.vertical td {
    width:3.4rem
}
.dark-mode .schedule-table tr > td.fixed, .dark-mode .schedule-table tr > th.fixed {
    background: var(--dark-level-1);
}
.table.schedule-table th, .table.schedule-table td {
    padding: .3rem;
}
.schedule-table [is-invalid] {
    position:relative;
}
.schedule-table [is-invalid]::after {
    content: "\f06a";
    position:absolute;
    right:2px;
    top:0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--danger);
    font-size:.8em
}
.olm-toggle-summary {
    position: absolute;
    left: 0;
    font-size: .8rem;
    background: var(--secondary);
    padding: 2px 5px;
    border-radius: 0.2rem;
    cursor: pointer;
    transform: translateX(-50%);
    white-space: nowrap;
}

.emu-sum-hours {
    position: absolute;
    left: 0;
    background: #fff;
    color: var(--gray-600);
    line-height: 0.9;
    padding-bottom: 2px;
    transform: translateX(-50%);
    bottom: 1px;
    font-size: .7rem;
}
.emu-summary-table {
    table-layout: fixed;
}
.emu-summary-table td {
    width: 3rem!important;
}

.dark-mode .emu-sum-hours {
    background: var(--dark-level-1);
}
tr:hover .emu-sum-hours {
    background: none;
}
.dark-mode tr:hover .emu-sum-hours {
    background: rgb(70, 76, 80);
}
.table.table-editable td .form-control:not([readonly]) {
    background-color: transparent;
}
/*
.emu-sum-hours::after, .emu-sum-hours::before {
    content: " ";
    height: 4px;
    width: 20px;
    display: block;
    position: absolute;
    top: 6px;
    border: 1px solid var(--gray-600);
    border-bottom-width: 0;
}

.emu-sum-hours::after {
    left: 16px;
    border-left-width: 0;
    border-top-right-radius: 2px;
}

.emu-sum-hours::before {
    right: 15px;
    border-right-width: 0;
    border-top-left-radius: 2px;
}
*/

.dark-mode .olm-toggle-summary,
.dark-mode .olm-summary-reload {
    background: var(--dark-level-2) !important;
}
.dark-mode .olm-toggle-summary::after {
    border-color: var(--dark-level-2) transparent transparent transparent;

}
.dark-mode .olm-date-range {
    color: #fff !important;}


@keyframes changingWidth {
    0% {
        width: calc(var(--w1) * 1%);
    }
    15% {
        width: calc(var(--w1) * 1%);
    }
    40% {
        width: calc(var(--w2) * 1%);
    }
    55% {
        width: calc(var(--w2) * 1%);
    }
    80% {
        width: calc(var(--w3) * 1%);
    }
    90% {
        width: calc(var(--w3) * 1%);
    }
    100% {
        width: calc(var(--w1) * 1%);
    }
}

.loader-stripe {
    --m: 1.35; /* Random multiplier */
    --w: 20; /* Random default width */
    --w2: calc(var(--w) * var(--m));
    --w1: calc(var(--w2) * var(--m));
    --w3: calc(var(--w1) * var(--m));

    --anim-delay: 0;

    height: .8rem;
    background: var(--gray-300);
    animation: changingWidth;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-delay: var(--anim-delay)s;
    transition: all .3s;

    margin-bottom:2px;
}


.emu-worktime-manager {
    border: 1px solid #eaeaea;
    border-radius: 1rem;
}
.emu-worktime-manager .emu-sidebar {
    background: #f3f3f3;
    border-radius: 1rem 0 0 1rem;
}
.emu-worktime-manager .emu-content {
    border-radius: 0 1rem 1rem 0;
}
.emu-worktime-manager .emu-content.rounded {
    border-radius: 1rem!important;
}
.dark-mode .emu-worktime-manager {
    border: 1px solid #4c535a;
}
.dark-mode .emu-worktime-manager .emu-sidebar {
    background: var(--dark-level-2);
}
.dark-mode .btn-gray-300 {
    background: #32353a;
    border-color: #32353a;
}
.dark-mode .btn-gray-400 {
    background: #282b2f;
    border-color: #282b2f;
}
.schedule-table {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.schedule-table tr > td.fixed, .schedule-table tr > th.fixed {
    position: sticky;
    background: #fff;
    left: -2px;
    z-index: 50;
}
.schedule-table tr > td.fixed.fixed-top, .schedule-table tr > th.fixed.fixed-top {
    left: initial;
    top: -2px;
    z-index: 40;
}
.schedule-table.vertical td {
    width:3.4rem
}
.dark-mode .schedule-table tr > td.fixed, .dark-mode .schedule-table tr > th.fixed {
    background: var(--dark-level-1);
}
.table.schedule-table th, .table.schedule-table td {
    padding: .3rem;
}
.schedule-table [is-invalid] {
    position:relative;
}
.schedule-table [is-invalid]::after {
    content: "\f06a";
    position:absolute;
    right:2px;
    top:0;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--danger);
    font-size:.8em
}
.olm-toggle-summary {
    position: absolute;
    left: 0;
    font-size: .8rem;
    background: var(--secondary);
    padding: 2px 5px;
    border-radius: 0.2rem;
    cursor: pointer;
    transform: translateX(-50%);
    white-space: nowrap;
}

.emu-sum-hours {
    position: absolute;
    left: 0;
    background: #fff;
    color: var(--gray-600);
    line-height: 0.9;
    padding-bottom: 2px;
    transform: translateX(-50%);
    bottom: 1px;
    font-size: .7rem;
}
.v-2 .emu-sum-hours {
    left: 50%;
}
.time-field {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    text-align: center;
    min-width: 6rem;
    width: 100%;
}
.time-field:not([readonly]) {
    background: #e7e7e7;
}

.emu-summary-table {
    table-layout: fixed;
}
.emu-summary-table td {
    width: 3rem!important;
}
.nowrap {
    white-space: nowrap;
}
.dark-mode .emu-sum-hours {
    background: var(--dark-level-1);
}
tr:hover .emu-sum-hours {
    background: none;
}
.dark-mode tr:hover .emu-sum-hours {
    background: rgb(70, 76, 80);
}
/*
.emu-sum-hours::after, .emu-sum-hours::before {
    content: " ";
    height: 4px;
    width: 20px;
    display: block;
    position: absolute;
    top: 6px;
    border: 1px solid var(--gray-600);
    border-bottom-width: 0;
}

.emu-sum-hours::after {
    left: 16px;
    border-left-width: 0;
    border-top-right-radius: 2px;
}

.emu-sum-hours::before {
    right: 15px;
    border-right-width: 0;
    border-top-left-radius: 2px;
}
*/

.dark-mode .olm-toggle-summary,
.dark-mode .olm-summary-reload {
    background: var(--dark-level-2) !important;
}
.dark-mode .olm-toggle-summary::after {
    border-color: var(--dark-level-2) transparent transparent transparent;

}
.dark-mode .olm-date-range {
    color: #fff !important;}


@keyframes changingWidth {
    0% {
        width: calc(var(--w1) * 1%);
    }
    15% {
        width: calc(var(--w1) * 1%);
    }
    40% {
        width: calc(var(--w2) * 1%);
    }
    55% {
        width: calc(var(--w2) * 1%);
    }
    80% {
        width: calc(var(--w3) * 1%);
    }
    90% {
        width: calc(var(--w3) * 1%);
    }
    100% {
        width: calc(var(--w1) * 1%);
    }
}

.loader-stripe {
    --m: 1.35; /* Random multiplier */
    --w: 20; /* Random default width */
    --w2: calc(var(--w) * var(--m));
    --w1: calc(var(--w2) * var(--m));
    --w3: calc(var(--w1) * var(--m));

    --anim-delay: 0;

    height: .8rem;
    background: var(--gray-300);
    animation: changingWidth;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-delay: var(--anim-delay)s;
    transition: all .3s;

    margin-bottom:2px;
}









.additional-details > div > .align-items-center.mb-3, .additional-details > div > .align-items-center.mb-3 + div {
    adisplay: none !important;
}




































.docs-operator thead th {
    text-align:center;
    padding:10px;
}

.docs-operator tbody td {
    padding: 2px;
}

.docs-operator .uniqueheight {
    height: 500px;
    overflow: auto;
}

.docs-operator table {
    width:100%;
}

.docs-operator table tbody tr td.centering {
    text-align:center;
}


.docs-operator input.toright {
    text-align:right;
}

.docs-operator table tbody tr td.odd {
    background-color:#ffffff;
}
.docs-operator table tbody tr td.even {
    background-color:#f7f7f7;
}

/*HA VAN BENNE INPUT LEVESZI A PADDINGOT */
.docs-operator tbody td:has(input) {
    padding:0;
}
.docs-operator tbody td input {
    padding: 4px 5px;
}


.file-field[readonly], .form-control.file-field[readonly] {
    border:none;
    background: transparent;
    padding:0px;
}
.custom-items thead th {
    padding:6px;
    margin:0;
}

.custom-items tbody td {
    padding:7px;
}

.custom-items .customheight {
    max-height: 800px;
    overflow: auto;
    border: 1px solid #dfdfdf;
    border-radius: 0.45rem;

}

.custom-items table {
    width:100%;
    line-height:1rem;
}

.custom-items table thead th span.thssum {
    font-weight:bold;
    font-size:1.1rem;
}

.custom-items table tbody tr td.righting {
    text-align:right;
}

.custom-items table tbody tr td.fbold {
    font-weight:bold;
}

.custom-items table tbody tr td.funder {
    text-decoration: underline;
}

.custom-items table tbody tr td span.editable {
    border: 1px solid #cbd5e0;
    border-radius: 0.45rem;
    background-color:#ffffff;
    padding:4px 0;
}
.custom-items table tbody tr td.editableodd {
    border: 1px solid #cbd5e0;
    border-radius: 0.45rem;
}

.custom-items tbody td input {
    background: transparent;
}


.custom-items table tbody tr td.odd {
    background-color:#ffffff;
}
.custom-items table tbody tr td.even {
    background-color:#f7f7f7;
}


.custom-items table tbody tr td.noteditable {
    background-color:#e4e4e4;
}
.custom-items table tbody tr td.noteditableOdd {
    background-color:#cfcfcf;
}


.custom-items input.toright {
    text-align:right;
}


/*HA VAN BENNE INPUT LEVESZI A PADDINGOT */
.custom-items tbody td:has(input) {
    padding:0
}
.custom-items tbody td input {
    padding: 8px 8px
}

.b-form-tags .b-form-tags-list {
    font-size:15px;
}


/*.docs-operator thead th {
    text-align:center;
    padding:10px;
}

.docs-operator tbody td {
    padding: 2px;
}

.docs-operator .customheight {
    height: 500px;
    overflow: auto;
}

.docs-operator table {
    width:100%;
}

.docs-operator table tbody tr td.centering {
    text-align:center;
}


.docs-operator input.toright {
    text-align:right;
}

.docs-operator table tbody tr td.odd {
    background-color:#ffffff;
}
.docs-operator table tbody tr td.even {
    background-color:#f7f7f7;
}

/*HA VAN BENNE INPUT LEVESZI A PADDINGOT */
/*.docs-operator tbody td:has(input) {
    padding:0
}
.docs-operator tbody td input {
    padding: 4px 4px;
    background-color: grey;
}


.file-field[readonly], .form-control.file-field[readonly] {
    border:none;
    background: transparent;
    padding:0px;
}*/


.docs-operator input.toright {
    text-align:right;
}

td:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    border-radius: 4px;
  }
  


.docs-operator input.toright {
    text-align:right;
}

.docs-operator input.toright {
    text-align:right;
}

td:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    border-radius: 4px;
  }
  
/* ==========================================================================
   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.
   ========================================================================== */

/* BETU (F94, 2026-09-14): a keret MINDEN komponens CSS-et egy csomagba fuz
   (/api/generator/css), ahol ez a lap KOZEPRE kerul. Egy @import ott a CSS
   szabvanya szerint ervenytelen, a bongeszo NEMAN eldobta -- a Barlow senkinek
   nem toltodott be (Segoe UI latszott). Az @font-face barhol ervenyes.
   A szabalyok a Google Fonts css2 valaszabol, VALTOZATLANUL: csak a Barlow,
   latin + latin-ext (a magyar o/u ekezet a latin-extben van), 300-700.
   A Fira Sans csak tartalek-betu volt, ezt nem toltjuk. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3p-ks6VospT4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3p-ks51os.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_Ass52Hs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3_-gs6VospT4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3_-gs51os.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E30-8s6VospT4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3t-4s6VospT4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3t-4s51os.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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,
body #app .dropdown-menu .dropdown-item,
body #app .dropdown-menu a.dropdown-item,
body #app a.dropdown-item,
body #app .dropdown-item {
  color: var(--text-main, #18181b) !important;
  background-color: transparent !important;
}

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

body #app .dropdown-menu .dropdown-item:hover *,
body #app .dropdown-menu .dropdown-item:focus *,
body #app .dropdown-menu .dropdown-item.active *,
body #app .dropdown-item:hover *,
body #app .dropdown-item:focus *,
body #app .dropdown-item.active * {
  color: #ffffff !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 */
.crud-table .form-control,
.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;
}

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

.crud-table thead tr:last-child .form-control,
.crud-table thead tr:last-child .custom-select,
.crud-table thead tr:nth-child(2) .form-control,
.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;
}

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

.crud-table thead tr:last-child .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;
}

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

.crud-table thead tr:last-child .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 */
.crud-table tbody td: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: 768px) and (min-height: 560px) {
  /* 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) {
    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) {
    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 {
    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 .crud-table thead tr th,
html body #app .crud-table thead tr:first-child th,
html body #app .crud-table thead tr:nth-child(1) 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: var(--bg-card, #fff) !important; /* KM 2026-10-07: sotet modban is a tema kartyaszine */
}

/* Á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),
.crud-table:has(tbody td:nth-child(2) .btn),
.crud-table:has(tbody td:nth-child(3) .btn),
.crud-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) {
  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) {
  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) {
  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) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}


/* ==========================================================================
   Munkaidő modul (.schedule-table / worktime-manager) felülbírálás és védelem
   ========================================================================== */
html body #app .schedule-table {
  table-layout: auto !important;
  width: auto !important;
}

/* --------------------------------------------------------------------------
   1. SAROK CELLÁK (Fejléc bal oszlopai: Összesítő és Dátum / Munkavállaló)
   Függőlegesen ÉS vízszintesen is rögzítettek, ezért MINDEN felett kell maradniuk!
   -------------------------------------------------------------------------- */

/* Fejlec 1. sor - Osszesito sarok (Ures fejlec) */
html body #app .schedule-table > thead:nth-of-type(1) > tr > th.emu-summary-col,
html body #app .schedule-table thead:nth-of-type(1) th.emu-summary-col {
  position: sticky !important;
  top: -2px !important;
  left: -2px !important;
  z-index: 80 !important;
  height: 36px !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  padding: 0 !important;
}

/* Fejlec 2. sor - Osszesito sarok (BEO O, BEO NETT, PIH N cimkek tablazata) */
html body #app .schedule-table > thead:nth-of-type(2) > tr > th.emu-summary-col,
html body #app .schedule-table thead:nth-of-type(2) th.emu-summary-col {
  position: sticky !important;
  top: 34px !important;
  left: -2px !important;
  z-index: 80 !important;
  background-color: #fff !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Fejlec 1. sor - Datum sarok (Datum felirat + Osszesito osszecsuko gomb) */
html body #app .schedule-table > thead:nth-of-type(1) > tr > th.emu-worker-col,
html body #app .schedule-table thead:nth-of-type(1) th.emu-worker-col {
  position: sticky !important;
  top: -2px !important;
  z-index: 75 !important;
  background-color: #fff !important;
  height: 36px !important;
  max-height: 36px !important;
  line-height: normal !important;
  padding: 0.35rem 0.5rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Fejlec 2. sor - Munkavallalo sarok (Munkavallalo felirat + Mindent kijelol) */
html body #app .schedule-table > thead:nth-of-type(2) > tr > th.emu-worker-col,
html body #app .schedule-table thead:nth-of-type(2) th.emu-worker-col {
  position: sticky !important;
  top: 34px !important;
  z-index: 75 !important;
  background-color: #fff !important;
  height: auto !important;
  max-height: none !important;
  line-height: normal !important;
  padding: 0.35rem 0.5rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   2. GORGETO FEJLEC CELLAK (Napok datumai es Kezd / Veg oszlopfejlecek)
   Fuggolegesen rogzitettek (top), de vizszintesen A SAROK CELLAK MOGE csusznak!
   -------------------------------------------------------------------------- */

/* Fejlec 1. sor - Naptari napok (09. 01. Kedd stb.) */
html body #app .schedule-table > thead:nth-of-type(1) > tr > th:not(.emu-summary-col):not(.emu-worker-col),
html body #app .schedule-table thead:nth-of-type(1) th:not(.emu-summary-col):not(.emu-worker-col) {
  position: sticky !important;
  top: -2px !important;
  z-index: 45 !important;
  background-color: #fff !important;
  height: 36px !important;
  max-height: 36px !important;
  line-height: normal !important;
  padding: 0.35rem 0.5rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Fejlec 2. sor - Kezd / Veg feliratok */
html body #app .schedule-table > thead:nth-of-type(2) > tr > th:not(.emu-summary-col):not(.emu-worker-col),
html body #app .schedule-table thead:nth-of-type(2) th:not(.emu-summary-col):not(.emu-worker-col) {
  position: sticky !important;
  top: 34px !important;
  z-index: 40 !important;
  background-color: #fff !important;
  height: auto !important;
  max-height: none !important;
  line-height: normal !important;
  padding: 0.35rem 0.5rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3. TÖRZS RÖGZÍTETT BAL OLDALI OSZLOPOK (Összesítő értékek és Munkavállaló nevek)
   Vízszintesen rögzítettek (left), de függőleges görgetéskor a fejléc alá csúsznak!
   -------------------------------------------------------------------------- */

/* Összesítő adatsor cella */
html body #app .schedule-table tbody tr > td.emu-summary-col {
  position: sticky !important;
  left: -2px !important;
  z-index: 30 !important;
  background-color: #fff !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Munkavállaló névcella (nem kijelölt) */
html body #app .schedule-table tbody tr > td.emu-worker-col:not(.bg-info),
html body #app .schedule-table tbody tr > td.fixed:not(.emu-summary-col):not(.bg-info) {
  position: sticky !important;
  z-index: 25 !important;
  background-color: #fff !important;
}

/* Kijelölt munkavállaló sor/cella kiemelése (bg-info text-white) */
html body #app .schedule-table tbody tr > td.emu-worker-col.bg-info,
html body #app .schedule-table tbody tr > td.fixed.bg-info {
  position: sticky !important;
  background-color: #17a2b8 !important;
  color: #fff !important;
  z-index: 25 !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
}

html body #app .schedule-table tbody tr > td.fixed.bg-info *,
html body #app .schedule-table tbody tr > td.emu-worker-col.bg-info * {
  color: #fff !important;
}

html body #app .schedule-table tbody td.fixed {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. ÖSSZESÍTŐ BELSŐ TÁBLÁZAT (.emu-summary-table) FORMÁZÁSA
   -------------------------------------------------------------------------- */
html body #app .schedule-table th.emu-summary-col,
html body #app .schedule-table td.emu-summary-col,
html body #app .schedule-table tbody td.fixed:has(.emu-summary-table),
html body #app .schedule-table thead th.fixed:has(.emu-summary-table) {
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body #app .schedule-table .emu-summary-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

html body #app .schedule-table .emu-summary-table td,
html body #app .schedule-table .emu-summary-table th {
  padding: 0 3px !important;
  height: 28px !important;
  line-height: 28px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  border: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

html body #app .schedule-table .emu-summary-table td:first-child {
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  max-width: 2.4rem !important;
  text-align: center !important;
  padding: 0 !important;
}

html body #app .schedule-table .emu-summary-table td:not(:first-child) {
  width: 3.4rem !important;
  min-width: 3.4rem !important;
  max-width: 3.4rem !important;
}

/* Összesítő fejléc feliratok (BEO Ó, BEO NETT, PIH N stb.) */
html body #app .schedule-table thead .emu-summary-table td {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--text-muted, #6c757d) !important;
  text-align: center !important;
  letter-spacing: -0.2px !important;
  padding: 0 2px !important;
}

/* Összesítő értékek (számok: 176, 22, 8, 88 stb.) */
html body #app .schedule-table tbody .emu-summary-table td:not(:first-child) {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--green, #28a745) !important;
  text-align: right !important;
  padding-right: 5px !important;
}

/* Munkavállaló névcella mérete */
html body #app .schedule-table td.emu-worker-col,
html body #app .schedule-table th.emu-worker-col,
html body #app .schedule-table tbody td.fixed:not(:has(.emu-summary-table)) {
  width: auto !important;
  min-width: 150px !important;
  max-width: none !important;
  text-align: left !important;
  padding: 0.2rem 0.6rem !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   5. MUNKAIDŐ BEVITELI CELLÁK (Kezd / Vég beviteli mezők a napoknál)
   -------------------------------------------------------------------------- */
html body #app .schedule-table > thead > tr > th:not(.fixed):not(.emu-summary-col):not(.emu-worker-col),
html body #app .schedule-table > tbody > tr > td:not(.fixed):not(.emu-summary-col):not(.emu-worker-col) {
  min-width: 5.6rem !important;
  width: 5.6rem !important;
  padding: 0 !important;
  z-index: 1 !important;
}

html body #app .schedule-table td .form-control,
html body #app .schedule-table td input {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  padding: 0 4px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: 'Barlow', monospace, sans-serif !important;
  letter-spacing: -0.3px !important;
  width: 100% !important;
  min-width: 5.6rem !important;
  text-align: center !important;
  background-color: transparent !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* Óraszám badge a cella alján */
html body #app .schedule-table td .emu-sum-hours {
  position: absolute !important;
  left: 0 !important;
  bottom: 1px !important;
  transform: translateX(-50%) !important;
  background-color: #fff !important;
  color: var(--gray-600) !important;
  line-height: 0.9 !important;
  padding: 0 2px !important;
  font-size: 0.7rem !important;
  z-index: 5 !important;
}

/* --------------------------------------------------------------------------
   6. SÖTÉT MÓD (Dark mode) TÁMOGATÁS
   -------------------------------------------------------------------------- */
html body.dark-mode #app .schedule-table thead th,
html body.dark-mode #app .schedule-table tr > td.fixed:not(.bg-info),
html body.dark-mode #app .schedule-table tr > td.emu-summary-col,
html body.dark-mode #app .schedule-table tr > td.emu-worker-col:not(.bg-info) {
  background-color: var(--dark-level-1, #1e2227) !important;
}
html body.dark-mode #app .schedule-table tr > td.fixed.bg-info,
html body.dark-mode #app .schedule-table tr > th.fixed.bg-info,
html body.dark-mode #app .schedule-table tr > td.emu-worker-col.bg-info {
  background-color: #17a2b8 !important;
  color: #fff !important;
}
html body.dark-mode #app .schedule-table td .emu-sum-hours {
  background-color: var(--dark-level-1, #1e2227) !important;
}


/* Nyitó/záró gomb a Munkaidő fejlécben (Összesítő lenyitás / becsukás) */
html body #app .schedule-table:not(.vertical) .olm-toggle-summary {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin-right: 8px !important;
  font-size: 0.75rem !important;
  border-radius: 4px !important;
  background: #e9ecef !important;
  color: #495057 !important;
  border: 1px solid #ced4da !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html body #app .schedule-table:not(.vertical) .olm-toggle-summary:hover {
  background: #ff6600 !important;
  color: #ffffff !important;
  border-color: #ff6600 !important;
}

html body #app .dark-mode .schedule-table:not(.vertical) .olm-toggle-summary {
  background: #32353a !important;
  color: #e0e0e0 !important;
  border-color: #4c535a !important;
}

html body #app .dark-mode .schedule-table:not(.vertical) .olm-toggle-summary:hover {
  background: #ff6600 !important;
  color: #ffffff !important;
  border-color: #ff6600 !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;
}

/* === KM 2026-10-07: sotet mod — a kartya kerete a tema keretszine === */
html body.dark-mode #app .main-content .card {
    border-color: var(--border-color) !important;
}

/* === KM 2026-10-07: oldalsav gorgetese ===
   Az alapkod a torzset fix fejlecmagassaggal szamolja (100% - 7.5rem), de 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;
}

/* Munkavállaló adatlap – csoportok elválasztása (2026-10-15, gombaudit B)
   A csoportok szürke alapon önálló fehér lapok; csíkozott sorok; olvasható mezőnevek (zinc-500, ~4.8:1). */
body #app .crud-details-sections {
  background: #f4f4f5;
  border-radius: 8px;
  padding: 10px;
  gap: 10px;
}
body #app .crud-details-section {
  background: #fff;
  border: 1px solid #d4d4d8 !important;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 4px 14px rgba(24, 24, 27, .04);
  overflow: hidden;
}
body #app .crud-details-section__head {
  background: #fafafa;
  padding: 8px 12px;
  border-radius: 0;
}
body #app .crud-details-section__head[aria-expanded="true"] {
  border-bottom: 1px solid #e4e4e7;
}
body #app .crud-details-section__head:hover {
  background: #f4f4f5;
}
body #app .crud-details-section__title {
  color: #3f3f46;
  font-weight: 700;
}
body #app .crud-details-section--empty .crud-details-section__title {
  color: #a1a1aa;
}
body #app .crud-details-section__table {
  margin: 4px 0 6px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body #app .crud-details-section__table td {
  border-top: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  vertical-align: middle;
}
body #app .crud-details-section__table tr:nth-child(even) td {
  background: #fafafa;
}
body #app .crud-details-section__table td.crud-details-section__label {
  color: #71717a !important;
  padding-left: 12px !important;
}
body #app .crud-details-section__table td.crud-details-section__value {
  color: #18181b;
  font-weight: 500;
}
body #app .crud-details-section__items {
  padding: 2px 2px 0;
}
/* Szerepkörök kártya (calculated-field) ugyanabban a stílusban */
body #app .jk-kartya {
  border-color: #d4d4d8 !important;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 4px 14px rgba(24, 24, 27, .04);
}

body.dark-mode #app .crud-details-sections { background: #18181b; }
body.dark-mode #app .crud-details-section { background: #27272a; border-color: #3f3f46 !important; box-shadow: none; }
body.dark-mode #app .crud-details-section__head { background: #303036; }
body.dark-mode #app .crud-details-section__head[aria-expanded="true"] { border-bottom-color: #3f3f46; }
body.dark-mode #app .crud-details-section__title { color: #e4e4e7; }
body.dark-mode #app .crud-details-section__table tr:nth-child(even) td { background: #2e2e33; }
body.dark-mode #app .crud-details-section__table td.crud-details-section__label { color: #a1a1aa !important; }
body.dark-mode #app .crud-details-section__table td.crud-details-section__value { color: #f4f4f5; }

/* Gombsor tömörítése (2026-10-15, gombaudit): a grid-item gombok (col-auto + col-md-N) tartalom szerinti szélességet kapnak,
   egyenletes 8 px-es közzel; a col-md-N rögzített szélessége szétszórta őket. */
body #app .row:has(> .col-auto[class*="col-md-"] .btn) {
  margin-left: -4px;
  margin-right: -4px;
  row-gap: 8px;
  align-items: center;
}
body #app .row > .col-auto[class*="col-md-"]:has(.btn) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
body #app .row > .col-auto[class*="col-md-"]:has(.btn) .btn {
  white-space: nowrap;
}

/* Gombsor telefonon is folyamatos (2026-10-17, gombaudit): az adatlap Szerkesztés-sávjában (crud-middle-bar) a rács és a sora display:contents,
   így a Szerkesztés és a művelet-gombok egy balra zárt, sorba törő sort alkotnak minden szélességen (eddig keskeny képernyőn jobb oldali oszlopba szorultak). */
body #app .crud-middle-bar {
  column-gap: 8px;
  row-gap: 8px;
  align-items: center;
}
body #app .crud-middle-bar > div:last-child,
body #app .crud-middle-bar > div:last-child > .row {
  display: contents;
}
body #app .crud-middle-bar > div:last-child > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body #app .crud-middle-bar > div:last-child > .row > .col-12:not(.col-auto) {
  flex: 0 0 100%;
  max-width: 100%;
}
/* 2026-10-24 (KIWI_00061 forgatókönyv-próba L1/L2): elsődleges gomb olvashatósága — sötét felirat az arany háttéren
   (fehér: 2,5:1 -> sötét: világos módban 7,1:1, sötét módban 7,5:1; WCAG AA), és a szerepkör-kártya kerete sötét módban. */
.btn-primary,
.btn-success,
body #app .btn-primary,
body #app .btn-success {
  color: #18181b !important;
}
body.dark-mode #app .jk-kartya {
  border-color: #3f3f46 !important;
  box-shadow: none;
}

html body #app .sched-root {
    --sched-page: #f4f4f5; --sched-surf: #fff; --sched-head: #fafafa; --sched-band: #f7f7f8;
    --sched-line: #ececee; --sched-line-s: #d4d4d8;
    --sched-ink: #18181b; --sched-ink-2: #44444d; --sched-ink-3: #71717a; --sched-mut: #a1a1aa;
    --sched-acc: var(--primary, #C49E6F); --sched-acc-ink: #7d6136; --sched-acc-soft: rgba(196, 158, 111, .16);
    --sched-dan: #97302b; --sched-dan-soft: #fbeeed;
    --sched-wait: #d9b45a; --sched-wait-soft: #fdf6e6; --sched-wait-ink: #8a6512;
    --sched-ok: #2f5c37; --sched-ok-soft: #eef4ef; --sched-ok-line: #4b7b58; --sched-chg: #eaf2fb;   /* I-04: a közlés óta módosult cella */
    --sched-rest: #d4d4d8; --sched-rest-ink: #27272a; --sched-hole: #fff;
    --sched-lock-a: #f6f6f7; --sched-lock-b: #ececee;
    --sched-row: 28px; --sched-fz: .75rem; --sched-name-w: 13.5rem; --sched-day-w: 6rem; --sched-tail-w: 4rem; --sched-week-w: 5.25rem;
    display: flex; flex-direction: column; min-width: 0; height: calc(100vh - var(--sched-offset, 5rem));
    background: var(--sched-surf); color: var(--sched-ink); font-size: var(--sched-fz); border: 1px solid var(--sched-line); border-radius: .5rem; overflow: hidden;
}
html body.dark-mode #app .sched-root {
    --sched-page: #111113; --sched-surf: #1c1c1f; --sched-head: #242428; --sched-band: #212124;
    --sched-line: #2c2c31; --sched-line-s: #3f3f46;
    --sched-ink: #f4f4f5; --sched-ink-2: #d4d4d8; --sched-ink-3: #a1a1aa; --sched-mut: #71717a;
    --sched-acc-ink: #e8d7bd; --sched-acc-soft: rgba(189, 165, 136, .2);
    --sched-dan: #f0a9a4; --sched-dan-soft: rgba(201, 142, 137, .18);
    --sched-wait-soft: rgba(217, 180, 90, .16); --sched-wait-ink: #f0dfae;
    --sched-ok: #9fd0ac; --sched-ok-soft: rgba(111, 157, 124, .18); --sched-ok-line: #6f9d7c; --sched-chg: rgba(96, 145, 210, .2);
    --sched-rest: #3f3f46; --sched-rest-ink: #d4d4d8; --sched-hole: #1c1c1f;
    --sched-lock-a: #1c1c1f; --sched-lock-b: #29292e;
}
html body #app .sched-root.is-compact { --sched-row: 26px; --sched-fz: .6875rem; --sched-name-w: 9.5rem; --sched-day-w: 4.75rem; --sched-tail-w: 2.75rem; --sched-week-w: 3.25rem; }
html body #app .sched-root .sched-flex { flex: 1 1 auto; min-width: 0; }
html body #app .sched-root .sched-sep { width: 1px; height: 1rem; background: var(--sched-line-s); flex: 0 0 auto; }

/* ---- Eszköztár ---- */
html body #app .sched-root .sched-toolbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: .375rem; padding: .5rem .75rem .4375rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-toolbar.is-compact { padding: .375rem .5rem; }
/* F-53: szűk helyen a tömör eszköztár lenyílói (egység, nézet) zsugorodnak, hogy a Közzététel és a ⋯ mindig kiférjen (tördelés helyett: a ⋯ menüje jobbra nyílik) */
html body #app .sched-root .sched-toolbar.is-compact .sched-select { flex: 0 1 auto; min-width: 6rem; max-width: 11rem; text-overflow: ellipsis; }
html body #app .sched-root .sched-toolbar.is-compact .sched-tag { flex: 0 0 auto; }   /* F-57: a „Tervezett beosztás” címke nem zsugorodik; a lenyílók igen (súgóban a teljes név) */
html body #app .sched-root .sched-tb-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
html body #app .sched-root .sched-title { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; }
html body #app .sched-root .sched-seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--sched-line-s); border-radius: .375rem; overflow: hidden; }
html body #app .sched-root .sched-seg > button { height: 1.625rem; padding: 0 .625rem; border: 0; border-radius: 0; background: var(--sched-surf); color: var(--sched-ink-2); font-size: .8125rem; white-space: nowrap; }
html body #app .sched-root .sched-seg > button + button { border-left: 1px solid var(--sched-line-s); }
html body #app .sched-root .sched-seg > button:hover { color: var(--sched-ink); background: var(--sched-head); }
html body #app .sched-root .sched-seg > button.is-on { background: var(--sched-acc); color: #18181b; font-weight: 500; }
html body #app .sched-root .sched-seg > button.is-soft { background: var(--sched-acc-soft); color: var(--sched-ink); font-weight: 500; }
html body #app .sched-root .sched-seg > .sched-period { font-weight: 500; color: var(--sched-ink); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-btn { height: 1.625rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .625rem; font-size: .75rem; color: var(--sched-ink-2); background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .375rem; white-space: nowrap; }
html body #app .sched-root .sched-btn:hover:not(:disabled) { color: var(--sched-ink); border-color: var(--sched-ink-3); }
html body #app .sched-root .sched-btn.is-accent { color: var(--sched-acc-ink); background: var(--sched-acc-soft); border-color: var(--sched-acc); font-weight: 500; }
html body #app .sched-root .sched-btn.is-primary { color: #18181b; background: var(--sched-acc); border-color: var(--sched-acc); font-weight: 500; font-size: .8125rem; padding: 0 .75rem; }
html body #app .sched-root .sched-btn:disabled { opacity: .45; }
html body #app .sched-root .sched-chip { height: 1.375rem; padding: 0 .5rem; border: 0; border-radius: .375rem; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body #app .sched-root .sched-chip.is-danger { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-chip.is-wait { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }
html body #app .sched-root .sched-tag { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem; font-size: .75rem; font-weight: 600; color: var(--sched-acc-ink); background: var(--sched-acc-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { html body #app .sched-root .sched-tag { display: none; } }
html body #app .sched-root .sched-save { font-size: .75rem; color: var(--sched-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-save.is-error { color: var(--sched-dan); }
html body #app .sched-root .sched-icon-ghost { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--sched-ink-3); font-weight: 600; }
html body #app .sched-root .sched-icon-ghost:hover { background: rgba(24, 24, 27, .06); color: var(--sched-ink); }
html body #app .sched-root .sched-select { width: auto; height: 1.5rem; padding: 0 1.5rem 0 .5rem; font-size: .75rem; background-color: var(--sched-surf); color: var(--sched-ink-2); border: 1px solid var(--sched-line-s); border-radius: .375rem; }
html body #app .sched-root :focus-visible { outline: 2px solid var(--sched-acc); outline-offset: 2px; box-shadow: none; }

/* ---- Sávok a rács fölött ---- */
html body #app .sched-root .sched-banner { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin: .5rem .75rem 0; padding: .4375rem .625rem; font-size: .8125rem; color: var(--sched-ink-2); background: var(--sched-head); border: 1px solid var(--sched-line); border-radius: .375rem; }
html body #app .sched-root .sched-banner.is-danger { color: var(--sched-ink); background: var(--sched-dan-soft); border-color: var(--sched-dan); }
html body #app .sched-root .sched-dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--sched-dan); flex: 0 0 auto; }

/* ---- Törzs és rács ---- */
html body #app .sched-root .sched-body { flex: 1 1 auto; min-height: 0; display: flex; gap: .5rem; position: relative; }
html body #app .sched-root .sched-grid { flex: 1 1 auto; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 0 .75rem; position: relative; font-variant-numeric: tabular-nums; }
html body #app .sched-root.is-compact .sched-grid { padding: 0 .5rem; }
html body #app .sched-root .sched-row { display: flex; width: max-content; min-width: 100%; border-bottom: 1px solid var(--sched-line); background: var(--sched-surf); }
html body #app .sched-root .sched-c { flex: 0 0 var(--sched-day-w); height: calc(var(--sched-row) - 1px); box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 .25rem; white-space: nowrap; overflow: hidden; }
html body #app .sched-root .sched-c.sched-name { flex-basis: var(--sched-name-w); justify-content: flex-start; gap: .375rem; padding: 0 .5rem 0 1.375rem; border-right: 1px solid var(--sched-line-s); position: sticky; left: 0; z-index: 2; background: inherit; }
html body #app .sched-root .sched-c.sched-tail { flex-basis: var(--sched-tail-w); justify-content: flex-end; padding-right: .5rem; }
html body #app .sched-root .sched-c.sched-tail.is-first { flex-basis: var(--sched-week-w); border-left: 1px solid var(--sched-line-s); position: sticky; right: var(--sched-tail-w); z-index: 2; background: inherit; }
html body #app .sched-root .sched-c.sched-tail:last-child { position: sticky; right: 0; z-index: 2; background: inherit; }
html body #app .sched-root .sched-c.sched-tail.is-muted { color: var(--sched-ink-3); }
html body #app .sched-root .sched-c.sched-tail.is-neg { color: var(--sched-dan); font-weight: 600; }

/* Fejléc */
html body #app .sched-root .sched-head { position: sticky; top: 0; z-index: 4; background: var(--sched-head); border-bottom-color: var(--sched-line-s); }
html body #app .sched-root .sched-head .sched-c { height: 2.75rem; }
html body #app .sched-root.is-compact .sched-head .sched-c { height: 2.5rem; }
html body #app .sched-root .sched-tail-h { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
html body #app .sched-root .sched-tail-h small { font-size: .5625rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
html body #app .sched-root .sched-head .sched-name,
html body #app .sched-root .sched-head .sched-tail { align-items: flex-end; padding-bottom: .375rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-ink-3); }
html body #app .sched-root .sched-head .sched-name { padding-left: .5rem; }
html body #app .sched-root .sched-head .sched-day { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1875rem; padding: 0 .375rem; }
html body #app .sched-root .sched-head .sched-day.is-axis { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-day-l { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-day-l b { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sched-ink-2); margin-right: .25rem; }
html body #app .sched-root .sched-head .is-weekend .sched-day-l b { color: var(--sched-dan); }
html body #app .sched-root .sched-daystate { font-size: .625rem; line-height: .875rem; padding: 0 .3125rem; border-radius: .25rem; border: 1px solid var(--sched-line-s); color: var(--sched-ink-3); }
html body #app .sched-root .sched-daystate.is-ready { border-color: var(--sched-acc); color: var(--sched-acc-ink); }
html body #app .sched-root .sched-daystate.is-published { border-color: var(--sched-ok-line); background: var(--sched-ok-soft); color: var(--sched-ok); }

/* Sávok */
html body #app .sched-root .sched-bandhead { position: sticky; left: 0; display: flex; align-items: center; gap: .5rem; height: 1.5rem; padding: 0 .5rem; width: max-content; min-width: 100%; box-sizing: border-box; background: var(--sched-band); border-bottom: 1px solid var(--sched-line); cursor: pointer; }
html body #app .sched-root .sched-chev { font-size: .625rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-bandtitle { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-acc-ink); white-space: nowrap; }
html body #app .sched-root .sched-bandnote { font-size: .6875rem; color: var(--sched-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-bandrow { background: var(--sched-band); }
html body #app .sched-root .sched-bandrow .sched-c { height: 1.3125rem; font-size: .6875rem; color: var(--sched-ink-2); }
html body #app .sched-root .sched-bandrow.is-total .sched-c { font-weight: 600; color: var(--sched-ink); }
html body #app .sched-root .sched-in { width: 100%; height: 100%; border: 0; background: transparent; text-align: center; font: inherit; color: inherit; }
html body #app .sched-root .sched-in:focus { box-shadow: inset 0 0 0 2px var(--sched-acc); outline: 0; }
html body #app .sched-root .sched-cov { padding: 0 .4375rem; border-radius: .3125rem; font-weight: 500; }
html body #app .sched-root .sched-cov.is-under { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-cov.is-ok { color: var(--sched-ok); background: var(--sched-ok-soft); }
html body #app .sched-root .sched-cov.is-over { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }

/* Részleg- és dolgozósor */
html body #app .sched-root .sched-row.is-dept { background: var(--sched-head); position: sticky; top: var(--sched-sticky-top, 2.75rem); z-index: 3; }
html body #app .sched-root .sched-row.is-dept .sched-name { padding-left: .5rem; font-size: inherit; }
html body #app .sched-root .sched-row.is-dept .sched-name b { font-weight: 600; }
html body #app .sched-root .sched-row.is-dept .sched-day { font-size: .6875rem; font-weight: 500; color: var(--sched-ink-3); }
html body #app .sched-root .sched-row.is-cursor-row .sched-name { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-src { flex: 0 0 auto; font-size: .5625rem; font-weight: 600; letter-spacing: .04em; line-height: .875rem; padding: 0 .25rem; color: #fff; border-radius: .1875rem; }
html body #app .sched-root .sched-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
html body #app .sched-root .sched-label.is-open { font-weight: 400; font-style: italic; color: var(--sched-acc-ink); border: 1px dashed var(--sched-mut); border-radius: .25rem; padding: 0 .3125rem; }
/* M3c: névtelen hely (állandó-, EFO-hely): dőlt név; a „· betöltetlen” / „· betöltve: …” / „· „EFO 1” helyén” jelzés; a típus nélküli hely jele szaggatott kerettel */
html body #app .sched-root .sched-label.is-place { font-weight: 400; font-style: italic; color: var(--sched-ink-2); }
html body #app .sched-root .sched-place-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .6875rem; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-place-note.is-filled { color: var(--sched-ink-3); }
html body #app .sched-root .sched-src.is-place { color: var(--sched-ink-2); background: transparent; border: 1px dashed var(--sched-mut); line-height: .75rem; }
html body #app .sched-root .sched-chg.is-assign, html body #app .sched-root .sched-chg.is-unassign { color: var(--sched-acc-ink); border-color: var(--sched-acc); }
html body #app .sched-root .sched-sub { flex: 0 0 auto; margin-left: auto; font-size: .625rem; color: var(--sched-ink-3); }

/* Cella */
html body #app .sched-root .sched-cell { position: relative; cursor: cell; }
html body #app .sched-root .sched-cell .sched-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-cell.is-open-slot .sched-v { font-style: italic; color: var(--sched-acc-ink); }
/* A3: a HR-napsor tájékoztató értéke (0 mód) nem része a tervnek: dőlt, halvány szöveg; a teli színű (távollét, szabadnap) cellán csak dőlt */
html body #app .sched-root .sched-cell.is-hr .sched-v { font-style: italic; }
html body #app .sched-root .sched-cell.is-hr:not(.is-absence):not(.is-rest) .sched-v { color: var(--sched-ink-3); }
html body #app .sched-root .sched-cell.is-rest { background: var(--sched-rest); color: var(--sched-rest-ink); font-weight: 600; }
html body #app .sched-root .sched-cell.is-absence { color: #fff; font-weight: 600; }   /* háttér: a kategória színe, inline :style */
html body #app .sched-root .sched-cell.is-conflict { background: var(--sched-dan-soft); }
html body #app .sched-root .sched-cell.is-rule { background: var(--sched-wait-soft); }
html body #app .sched-root .sched-cell.is-invalid { background: var(--sched-dan-soft); color: var(--sched-dan); font-weight: 600; }
html body #app .sched-root .sched-cell.is-locked { background: repeating-linear-gradient(135deg, var(--sched-lock-a) 0 5px, var(--sched-lock-b) 5px 10px); color: var(--sched-ink-3); cursor: not-allowed; }
html body #app .sched-root .sched-cell.is-error { box-shadow: inset 0 0 0 2px var(--sched-dan); }
html body #app .sched-root .sched-cell.is-selected:not(.is-absence):not(.is-rest) { background: var(--sched-acc-soft); box-shadow: inset 0 0 0 1px var(--sched-acc); }
html body #app .sched-root .sched-cell.is-selected.is-absence,
html body #app .sched-root .sched-cell.is-selected.is-rest { box-shadow: inset 0 0 0 2px var(--sched-acc), inset 0 0 0 3px var(--sched-hole); }
html body #app .sched-root .sched-cell.is-paste-target { box-shadow: inset 0 0 0 1px var(--sched-acc); background-image: linear-gradient(var(--sched-acc-soft), var(--sched-acc-soft)); }
html body #app .sched-root .sched-cell:focus,
html body #app .sched-root .sched-cell.is-cursor { outline: 0; box-shadow: inset 0 0 0 2px var(--sched-acc); }
html body #app .sched-root .sched-mark { position: absolute; right: 3px; top: 1px; font-size: .625rem; font-weight: 700; line-height: 1.1; }
html body #app .sched-root .sched-mark.is-conflict { color: var(--sched-dan); }
html body #app .sched-root .sched-mark.is-rule { color: var(--sched-wait-ink); }
html body #app .sched-root .sched-dotc { position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; }
html body #app .sched-root .sched-dotc.is-error { background: var(--sched-dan); }
html body #app .sched-root .sched-dotc.is-saving { background: var(--sched-wait); }
html body #app .sched-root .sched-dotc.is-modified { background: var(--sched-acc); }
html body #app .sched-root.is-readonly .sched-cell { cursor: default; }

/* Paletta */
html body #app .sched-root .sched-palette { position: absolute; z-index: 6; width: 14.75rem; display: flex; flex-direction: column; gap: .125rem; padding: .375rem; background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .5rem; box-shadow: 0 4px 20px rgba(24, 24, 27, .14); }
html body #app .sched-root .sched-palette-in { height: 1.75rem; margin-bottom: .25rem; padding: 0 .5rem; font-size: .8125rem; color: var(--sched-ink); background: var(--sched-surf); border: 1px solid var(--sched-acc); border-radius: .375rem; box-shadow: 0 0 0 3px var(--sched-acc-soft); }
html body #app .sched-root .sched-palette-opt { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: .375rem; font-size: .8125rem; color: var(--sched-ink-2); cursor: pointer; }
html body #app .sched-root .sched-palette-opt.is-on { background: var(--sched-acc-soft); color: var(--sched-ink); }
html body #app .sched-root .sched-palette-h { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-swatch { width: .875rem; height: .875rem; border-radius: .1875rem; flex: 0 0 auto; }
html body #app .sched-root .sched-palette-help { margin-top: .1875rem; padding: .3125rem .5rem .125rem; border-top: 1px solid var(--sched-line); font-size: .6875rem; color: var(--sched-ink-3); }

/* Oldalpanel */
html body #app .sched-root .sched-panel { flex: 0 0 16.375rem; display: flex; flex-direction: column; min-height: 0; background: var(--sched-band); border-left: 1px solid var(--sched-line); }
html body #app .sched-root .sched-panel.is-overlay { position: absolute; right: 0; top: 0; bottom: 0; z-index: 8; border: 1px solid var(--sched-line-s); border-radius: .5rem; box-shadow: 0 4px 20px rgba(24, 24, 27, .12); }
html body #app .sched-root .sched-panel-head { display: flex; align-items: center; gap: .5rem; padding: .625rem .5rem .5rem .875rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-panel-head b { display: block; font-size: .875rem; font-weight: 600; }
html body #app .sched-root .sched-panel-head small { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-panel-body { flex: 1 1 auto; overflow-y: auto; padding-bottom: .75rem; }
html body #app .sched-root .sched-panel-h { padding: .875rem .875rem .25rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-panel-h span { margin-left: .375rem; font-weight: 400; color: var(--sched-ink-3); }
html body #app .sched-root .sched-panel-list { margin: 0; padding: 0; list-style: none; background: var(--sched-surf); border-block: 1px solid var(--sched-line); }
html body #app .sched-root .sched-panel-list li { display: flex; align-items: center; gap: .5rem; min-height: 1.875rem; padding: 0 .625rem 0 .875rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-panel-list li:last-child { border-bottom: 0; }
html body #app .sched-root .sched-panel-list li > button { flex: 1; display: flex; align-items: center; gap: .4375rem; padding: 0; border: 0; background: transparent; color: inherit; font-size: .8125rem; font-weight: 500; text-align: left; }
html body #app .sched-root .sched-panel-list small { font-size: .6875rem; color: var(--sched-ink-3); font-weight: 400; }
html body #app .sched-root .sched-panel-list li.sched-slot { padding-block: .25rem; }
html body #app .sched-root .sched-panel-list li.sched-slot.is-today { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-slot-t { display: flex; flex-direction: column; min-width: 0; }
html body #app .sched-root .sched-slot-t .sched-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
html body #app .sched-root .sched-panel-list li > button.sched-slot-btn { flex: 0 0 auto; padding: 0 .5rem; border: 1px solid var(--sched-line-s); border-radius: .375rem; background: var(--sched-surf); font-size: .75rem; min-height: 1.5rem; }
html body #app .sched-root .sched-panel-list li > button.sched-slot-btn.is-accent { border-color: var(--sched-acc); background: var(--sched-acc-soft); color: var(--sched-acc-ink); }
html body #app .sched-root .sched-panel-note { margin: .375rem .875rem 0; font-size: .6875rem; line-height: 1.5; color: var(--sched-ink-3); }

/* Láb */
html body #app .sched-root .sched-foot { flex: 0 0 1.75rem; display: flex; align-items: center; gap: .625rem; padding: 0 .75rem; border-top: 1px solid var(--sched-line); font-size: .75rem; min-width: 0; }
html body #app .sched-root.is-compact .sched-foot { flex-basis: 1.5rem; }
html body #app .sched-root .sched-foot-count { color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-foot-msg { flex: 1 1 auto; min-width: 0; color: var(--sched-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-foot-msg.is-danger { color: var(--sched-dan); }
html body #app .sched-root .sched-foot-msg.is-wait { color: var(--sched-wait-ink); }

/* Üres hét, betöltés */
html body #app .sched-root .sched-empty { margin: 1.25rem auto 1.25rem .75rem; max-width: 36rem; }   /* K-25: az oldalpanel üres héten is a jobb szélen */
html body #app .sched-root .sched-empty-title { font-size: .875rem; font-weight: 600; }
html body #app .sched-root .sched-empty-text { margin-top: .25rem; font-size: .75rem; line-height: 1.5; color: var(--sched-ink-2); }
html body #app .sched-root .sched-empty-actions { display: flex; gap: .375rem; margin-top: .625rem; }
html body #app .sched-root .sched-skel { height: .5625rem; border-radius: .25rem; background: var(--sched-line); animation: sched-pulse 1.2s ease-in-out infinite alternate; }
@keyframes sched-pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { html body #app .sched-root .sched-skel { animation: none; } }

/* Párbeszéd (közzététel, beillesztés, felülírás) */
html body #app .sched-root .sched-dialog-backdrop { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; background: rgba(24, 24, 27, .35); }
html body #app .sched-root .sched-dialog { width: min(36rem, 100%); max-height: calc(100vh - 6rem); display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.125rem; background: var(--sched-surf); color: var(--sched-ink); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); overflow: auto; }
html body #app .sched-root .sched-dialog-title { margin: 0; font-size: .9375rem; font-weight: 600; }
html body #app .sched-root .sched-dialog-actions { display: flex; justify-content: flex-end; gap: .375rem; margin-top: .25rem; }
html body #app .sched-root .sched-changes { border: 1px solid var(--sched-line); border-radius: .375rem; font-size: .8125rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-changes > div { display: flex; gap: .625rem; padding: .375rem .625rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-changes .is-add { color: var(--sched-ok); font-weight: 600; }
html body #app .sched-root .sched-changes .is-mod { color: var(--sched-wait-ink); font-weight: 600; }
html body #app .sched-root .sched-changes .is-del { color: var(--sched-dan); font-weight: 600; }

/* Rendezvény és csoport: ugyanaz a .sched-row / .sched-c rács, más oszlopokkal */
html body #app .sched-root[data-view=event] .sched-c.sched-day { flex: 1 1 0; height: auto; min-height: calc(var(--sched-row) + .5rem); flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: .25rem; padding: .375rem .625rem; white-space: normal; }
html body #app .sched-root .sched-pchip { display: inline-flex; align-items: center; gap: .375rem; height: 1.375rem; padding: 0 .4375rem 0 0; font-size: .75rem; background: var(--sched-surf); border: 1px solid var(--sched-line); border-radius: .3125rem; overflow: hidden; white-space: nowrap; }
html body #app .sched-root .sched-pchip::before { content: ""; width: 3px; align-self: stretch; background: var(--sched-pchip-color, transparent); }
html body #app .sched-root .sched-pchip.is-open { font-style: italic; color: var(--sched-acc-ink); background: transparent; border-style: dashed; border-color: var(--sched-mut); }
html body #app .sched-root .sched-count { padding: .0625rem .5rem; border-radius: .375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-count.is-full { color: var(--sched-ok); background: var(--sched-ok-soft); }
html body #app .sched-root .sched-count.is-short { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-dstate { display: inline-block; width: .75rem; height: .75rem; box-sizing: border-box; border-radius: .1875rem; border: 1px solid var(--sched-line-s); }
html body #app .sched-root .sched-dstate.is-published { background: var(--sched-ok-soft); border-color: var(--sched-ok-line); }
html body #app .sched-root .sched-dstate.is-ready { border-color: var(--sched-acc); }
html body #app .sched-root .sched-dstate.is-none { border-style: dashed; border-color: var(--sched-mut); }

/* ---- S1 kiegészítések (a design átadó szabályain felül) ---- */
html body #app .sched-root { position: relative; }
html body #app .sched-root[data-span=month] { --sched-day-w: 5rem; }
html body #app .sched-root[data-span=month].is-compact { --sched-day-w: 4.5rem; }
html body #app .sched-root .sched-save.is-saving { color: var(--sched-wait-ink); }
html body #app .sched-root .sched-save.is-saved { color: var(--sched-ok); }
html body #app .sched-root .sched-cell { user-select: none; }
html body #app .sched-root .sched-spacer { flex: 0 0 auto; }
html body #app .sched-root .sched-field { height: 1.625rem; padding: 0 .5rem; font-size: .8125rem; color: var(--sched-ink); background-color: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .375rem; min-width: 0; }
html body #app .sched-root .sched-field.is-narrow { width: 4rem; }
html body #app .sched-root .sched-field.is-unit { width: 7rem; }   /* mértékegység-mező: a helyőrző („egység: fő”, „pl. Ft/vendég”) kiférjen */
html body #app .sched-root .sched-pop { position: absolute; z-index: 9; display: flex; align-items: center; gap: .375rem; margin: .25rem .75rem 0; padding: .375rem; background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .5rem; box-shadow: 0 4px 20px rgba(24, 24, 27, .14); }
html body #app .sched-root .sched-dialog-text { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--sched-ink-2); }
html body #app .sched-root .sched-dialog-text.is-danger { color: var(--sched-dan); }
/* M3c: sablon-alkalmazás (betöltési mód kártyái, előnézet) és a „Ki tölti be?” párbeszéd — a meglévő tokenekkel, új szín nélkül */
html body #app .sched-root .sched-tpl-lbl { font-size: .75rem; color: var(--sched-ink-3); padding: 0; margin: 0 0 .25rem; }
html body #app .sched-root .sched-tpl-select { width: 100%; height: 1.875rem; font-size: .8125rem; color: var(--sched-ink); }
html body #app .sched-root .sched-tpl-set { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
html body #app .sched-root .sched-tpl-set.is-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; }
html body #app .sched-root .sched-tpl-set.is-row > .sched-tpl-lbl { width: 100%; }
html body #app .sched-root .sched-tpl-card { display: flex; gap: .625rem; align-items: flex-start; margin: 0; padding: .625rem .75rem; border: 1px solid var(--sched-line); border-radius: .5rem; cursor: pointer; font-weight: 400; }
html body #app .sched-root .sched-tpl-card.is-on { border-color: var(--sched-acc); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-tpl-card input, html body #app .sched-root .sched-tpl-radio input { margin: .125rem 0 0; accent-color: var(--sched-acc); }
html body #app .sched-root .sched-tpl-card-b { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
html body #app .sched-root .sched-tpl-card-b b { font-size: .8125rem; font-weight: 600; color: var(--sched-ink); }
html body #app .sched-root .sched-tpl-card-b span { font-size: .75rem; line-height: 1.45; color: var(--sched-ink-2); }
html body #app .sched-root .sched-tpl-radio { display: inline-flex; gap: .375rem; align-items: center; margin: 0; font-size: .8125rem; font-weight: 400; color: var(--sched-ink); cursor: pointer; }
html body #app .sched-root .sched-tpl-preview { display: flex; flex-direction: column; gap: .375rem; padding: .625rem .75rem; font-size: .8125rem; line-height: 1.45; color: var(--sched-ink-2); background: var(--sched-head); border: 1px solid var(--sched-line); border-radius: .5rem; }
html body #app .sched-root .sched-tpl-preview b { color: var(--sched-ink); font-weight: 600; }
html body #app .sched-root .sched-tpl-preview .is-stale { opacity: .55; }
html body #app .sched-root .sched-tpl-preview .is-danger { color: var(--sched-dan); }
html body #app .sched-root .sched-tpl-skip { font-size: .75rem; color: var(--sched-ink-2); }
html body #app .sched-root .sched-tpl-slots { display: flex; flex-wrap: wrap; gap: .375rem; }
html body #app .sched-root .sched-tpl-slot { font-size: .6875rem; line-height: 1.4; padding: .125rem .5rem; border-radius: 999px; color: var(--sched-ink-2); background: var(--sched-surf); border: 1px solid var(--sched-line-s); white-space: nowrap; }
html body #app .sched-root .sched-tpl-slot.is-more { border-style: dashed; }
html body #app .sched-root .sched-assign { width: min(30rem, 100%); }
html body #app .sched-root .sched-assign-head { display: flex; flex-direction: column; gap: .25rem; }
html body #app .sched-root .sched-assign-sub { font-size: .75rem; color: var(--sched-ink-2); }
html body #app .sched-root .sched-assign-hint { font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-assign-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-assign-tab { height: 1.875rem; padding: 0 .75rem; font-size: .8125rem; color: var(--sched-ink-3); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
html body #app .sched-root .sched-assign-tab.is-on { color: var(--sched-ink); font-weight: 600; border-bottom-color: var(--sched-acc); }
html body #app .sched-root .sched-assign .sched-field { width: 100%; height: 1.875rem; }
html body #app .sched-root .sched-assign-list { display: flex; flex-direction: column; max-height: 15.75rem; overflow: auto; border: 1px solid var(--sched-line); border-radius: .5rem; }
html body #app .sched-root .sched-assign-opt { display: flex; flex-direction: column; gap: .0625rem; padding: .5625rem .75rem; border-bottom: 1px solid var(--sched-line); cursor: pointer; }
html body #app .sched-root .sched-assign-opt:last-child { border-bottom: 0; }
html body #app .sched-root .sched-assign-opt:hover { background: var(--sched-head); }
html body #app .sched-root .sched-assign-opt.is-on { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-assign-opt.is-on .sched-assign-name { font-weight: 600; }
html body #app .sched-root .sched-assign-name { font-size: .8125rem; color: var(--sched-ink); }
html body #app .sched-root .sched-assign-note { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-assign-empty { padding: .5625rem .75rem; font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-assign-err { font-size: .75rem; color: var(--sched-dan); }
html body #app .sched-root .sched-help-key { flex: 0 0 11rem; font-weight: 600; }
html body #app .sched-root .sched-changes .sched-flex { color: var(--sched-ink); }

/* Beállítások nézet */
html body #app .sched-root .sched-settings { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
html body #app .sched-root .sched-settings .sched-banner { margin: .25rem .75rem .5rem; }
html body #app .sched-root .sched-set-panel .sched-banner { margin: 0 0 .5rem; }
html body #app .sched-root .sched-set-sec { max-width: 60rem; margin-bottom: 1.25rem; }
html body #app .sched-root .sched-set-h { margin: 0 0 .125rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-set-h.is-gap { margin-top: 1.25rem; }   /* a táblázat utáni alcím (pl. Működés) */
html body #app .sched-root .sched-set-h .sched-sub { margin-left: .375rem; font-weight: 400; color: var(--sched-ink-3); }
html body #app .sched-root .sched-set-note { margin: 0 0 .5rem; font-size: .75rem; line-height: 1.5; color: var(--sched-ink-3); }
html body #app .sched-root .sched-set-table { border-block: 1px solid var(--sched-line); overflow-x: auto; }
html body #app .sched-root .sched-set-row { display: grid; grid-template-columns: minmax(10rem, 1.6fr) 11rem 14rem 6rem 6.5rem; align-items: center; gap: .5rem; min-width: 44rem; min-height: 2rem; padding: .125rem .5rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-set-row:last-child { border-bottom: 0; }
html body #app .sched-root .sched-set-row.is-codes { grid-template-columns: 7rem minmax(8rem, 1fr) 8rem 4rem; min-width: 28rem; }
html body #app .sched-root .sched-set-row.is-rules { grid-template-columns: minmax(14rem, 2.4fr) 4rem 6.5rem minmax(10rem, 1.4fr); min-width: 40rem; padding-top: .375rem; padding-bottom: .375rem; }
html body #app .sched-root .sched-set-row.is-rules .is-on { font-weight: 600; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-set-row.is-rules .is-off { color: var(--sched-ink-3); }
html body #app .sched-root .sched-set-row.is-head { min-height: 1.625rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-ink-3); background: var(--sched-head); }
html body #app .sched-root .sched-set-name { display: flex; align-items: center; gap: .375rem; min-width: 0; }
html body #app .sched-root .sched-set-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--sched-ink-2); }
/* M4: a Sorok tábla „Napi óra” oszlopa (csak költség-jogosultnak) és a szerkeszthető keret; a munkarend neve halvány súgóként a keret alatt */
html body #app .sched-root .sched-set-row.is-daily { grid-template-columns: minmax(10rem, 1.6fr) 11rem 14rem 6rem 5rem 6.5rem; min-width: 49rem; }
html body #app .sched-root .sched-dialog .sched-field-label { display: block; margin: .5rem 0 .25rem; font-size: .75rem; font-weight: 600; color: var(--sched-ink-2); }
html body #app .sched-root .sched-set-num .sched-field { width: 100%; box-sizing: border-box; height: 1.5rem; text-align: right; }   /* F-56: a mező ne lógjon az Eltávolít gombba (a befogadó oldal box-sizing-jától függetlenül) */
/* I-03: a heti kép nézete (teljes képernyős réteg; nyomtatáskor csak ez látszik) */
html body #app .sched-root .sched-shot-wrap { position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; background: var(--sched-page); overflow: auto; }
html body #app .sched-root .sched-shot-actions { position: sticky; top: 0; display: flex; gap: .5rem; padding: .625rem 1rem; background: var(--sched-surf); border-bottom: 1px solid var(--sched-line); z-index: 1; }
html body #app .sched-root .sched-shot { margin: 1rem auto; padding: 1.5rem; max-width: 72rem; width: calc(100% - 2rem); box-sizing: border-box; background: #fff; color: #18181b; border: 1px solid var(--sched-line); border-radius: .5rem; }
html body #app .sched-root .sched-shot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
html body #app .sched-root .sched-shot-unit { display: block; font-size: 1.5rem; }
html body #app .sched-root .sched-shot-week { display: block; margin-top: .25rem; font-size: 1rem; color: #44444d; }
html body #app .sched-root .sched-shot-status { padding: .25rem .625rem; border-radius: .375rem; font-size: .875rem; font-weight: 600; background: #fff4e0; color: #8a5a12; }
html body #app .sched-root .sched-shot-status.is-ok { background: #eef4ef; color: #2f5c37; }
html body #app .sched-root .sched-shot-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
html body #app .sched-root .sched-shot-table thead th { padding: .5rem .625rem; background: #f4f4f5; text-align: left; font-weight: 400; color: #44444d; white-space: nowrap; }
html body #app .sched-root .sched-shot-table thead th b { color: #18181b; text-transform: uppercase; }
html body #app .sched-root .sched-shot-table thead th.is-weekend b { color: #a8455a; }
html body #app .sched-root .sched-shot-table tbody th { padding: .5rem .625rem; text-align: left; font-weight: 600; white-space: nowrap; }
html body #app .sched-root .sched-shot-table tbody th.is-place { font-style: italic; font-weight: 400; color: #44444d; }
html body #app .sched-root .sched-shot-table td { padding: .5rem .625rem; border-top: 1px solid #ececee; white-space: nowrap; }
html body #app .sched-root .sched-shot-table tr.is-dept td { padding-top: .875rem; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7d6136; border-top: 0; }
html body #app .sched-root .sched-shot-table td.is-absence { color: #2f80c9; font-weight: 600; }
html body #app .sched-root .sched-shot-table td.is-rest { color: #71717a; font-weight: 600; }
html body #app .sched-root .sched-shot-table td.is-changed, html body #app .sched-root .sched-shot-item.is-changed { background: var(--sched-chg); }
html body #app .sched-root .sched-shot-days { display: none; }
html body #app .sched-root .sched-shot-days h3 { margin: 1rem 0 .375rem; font-size: 1.0625rem; font-weight: 400; }
html body #app .sched-root .sched-shot-item { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .25rem; border-top: 1px solid #ececee; font-size: 1.0625rem; }
html body #app .sched-root .sched-shot-item.is-empty { color: #71717a; }
html body #app .sched-root .sched-shot-open, html body #app .sched-root .sched-shot-note { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .9375rem; color: #44444d; }
@media (max-width: 640px) {
    html body #app .sched-root .sched-shot { padding: 1rem; }
    html body #app .sched-root .sched-shot-head { flex-direction: column; }
    html body #app .sched-root .sched-shot-table { display: none; }
    html body #app .sched-root .sched-shot-days { display: block; }
}
@media print {
    html body * { visibility: hidden; }
    html body #app .sched-root .sched-shot-wrap .sched-shot, html body #app .sched-root .sched-shot-wrap .sched-shot * { visibility: visible; }
    html body #app .sched-root .sched-shot-wrap { position: absolute; inset: 0; background: #fff; }
    html body #app .sched-root .sched-shot { position: absolute; left: 0; top: 0; margin: 0; width: 100%; max-width: none; border: 0; }
    html body #app .sched-root .sched-shot-actions { display: none; }
}
/* I-05: készség-címkék, a hozzáadó lenyíló és a szűrő */
html body #app .sched-root .sched-set-name:has(.sched-skill-tags) { flex-wrap: wrap; row-gap: .125rem; }
html body #app .sched-root .sched-skill-tags { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .5rem; vertical-align: middle; }
html body #app .sched-root .sched-skill-tag { display: inline-flex; align-items: center; gap: .125rem; padding: 0 .375rem; border-radius: 1rem; background: var(--sched-acc-soft); color: var(--sched-acc-ink); font-size: .6875rem; line-height: 1.125rem; }
html body #app .sched-root .sched-skill-x { border: 0; padding: 0 .125rem; background: transparent; color: inherit; font-size: .75rem; line-height: 1; cursor: pointer; }
html body #app .sched-root .sched-skill-add { height: 1.125rem; padding: 0 .25rem; border: 1px dashed var(--sched-line-s); border-radius: 1rem; background: var(--sched-surf); color: var(--sched-ink-2); font-size: .6875rem; }
html body #app .sched-root .sched-skill-filter { max-width: 13rem; }
/* F-11: a mai nap */
html body #app .sched-root .sched-head .sched-day.is-today { box-shadow: inset 0 -2px 0 var(--sched-acc); }
html body #app .sched-root .sched-today { margin-left: .25rem; padding: 0 .25rem; border-radius: .1875rem; background: var(--sched-acc); color: #fff; font-size: .5625rem; font-weight: 600; letter-spacing: .03em; vertical-align: 1px; }
/* I-04 / F-10: a közlés óta módosult és törölt cella */
html body #app .sched-root .sched-cell.is-changed { background-color: var(--sched-chg); }
html body #app .sched-root .sched-cell.is-deleted-pub .sched-v { text-decoration: line-through; color: var(--sched-ink-3); opacity: .75; }
html body #app .sched-root .sched-legend { display: flex; align-items: center; gap: .5rem; margin: 0 0 .375rem; padding: 0 .75rem; font-size: .75rem; color: var(--sched-ink-2); }
html body #app .sched-root .sched-legend-sw { width: .875rem; height: .875rem; border-radius: .1875rem; background: var(--sched-chg); border: 1px solid var(--sched-line); flex: 0 0 auto; }
/* F-13: a panel összecsukható csoportja */
html body #app .sched-root .sched-panel-toggle { display: flex; align-items: center; gap: .25rem; width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }
html body #app .sched-root .sched-move { display: inline-flex; gap: 2px; margin-right: .375rem; flex: 0 0 auto; vertical-align: middle; }
html body #app .sched-root .sched-move-btn { width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid var(--sched-line); border-radius: .25rem; background: var(--sched-surf); color: var(--sched-ink-2); font-size: .5625rem; line-height: 1; cursor: pointer; }
html body #app .sched-root .sched-move-btn:hover:not(:disabled) { border-color: var(--sched-acc); color: var(--sched-acc-ink); }
html body #app .sched-root .sched-move-btn:disabled { opacity: .35; cursor: default; }
html body #app .sched-root .sched-set-row.is-dept { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
html body #app .sched-root .sched-set-row.is-dept .sched-field { width: 18rem; max-width: 100%; }
html body #app .sched-root .sched-place-note.is-link { border: 0; padding: 0; background: transparent; font-family: inherit; line-height: inherit; text-align: left; white-space: nowrap; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
html body #app .sched-root .sched-place-note.is-link:hover { color: var(--sched-acc-ink); }
html body #app .sched-root .sched-set-num .sched-field::placeholder { color: var(--sched-ink-3); font-size: .6875rem; }   /* K-14: „nincs megadva” kiférjen */
html body #app .sched-root .sched-set-hint { display: block; overflow-wrap: anywhere; font-size: .625rem; line-height: 1.2; color: var(--sched-ink-3); text-align: right; }   /* F-57: a munkarend neve tördelhet, nem vágódik le */
html body #app .sched-root .sched-set-empty { padding: .5rem; font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-set-form { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .5rem; }
html body #app .sched-root .sched-set-cands { margin: 0 0 .25rem; padding: 0; max-height: 14rem; overflow-y: auto; list-style: none; border-block: 1px solid var(--sched-line); }
html body #app .sched-root .sched-set-cands li { display: flex; align-items: center; min-height: 1.875rem; padding: 0 .625rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-set-cands li:last-child { border-bottom: 0; }
html body #app .sched-root .sched-set-cands label { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; cursor: pointer; }
html body #app .sched-root .sched-set-cands small { color: var(--sched-ink-3); }
html body #app .sched-root .sched-set-efo { margin-top: .75rem; }
html body #app .sched-root .sched-set-efo .sched-field { width: 100%; max-width: 22rem; margin: .25rem 0 .375rem; }
html body #app .sched-root .sched-set-efo .sched-set-note { margin: 0 0 .375rem; }
html body #app .sched-root .sched-set-efo .sched-banner { margin: 0 0 .375rem; }
html body #app .sched-root .sched-dialog .sched-wide { width: 100%; box-sizing: border-box; margin: 0 0 .75rem; }   /* K-23: a mező ne érjen a párbeszéd széléig */

/* S2/1: termelékenység (árbevétel / munkaóra) */
html body #app .sched-root .sched-bandrow.is-kpi.is-rev { background: var(--sched-surf); }
html body #app .sched-root .sched-bandrow .sched-rev { padding: 0; }
html body #app .sched-root .sched-rev-in { width: 100%; height: 100%; padding: 0 .375rem; border: 0; background: transparent; text-align: right; font: inherit; color: var(--sched-ink); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-rev-in::placeholder { color: var(--sched-mut); text-align: right; }
html body #app .sched-root .sched-rev-prev { margin-left: auto; flex: 0 0 auto; height: 1rem; padding: 0 .3125rem; border: 1px solid var(--sched-line-s); border-radius: .25rem; background: var(--sched-surf); font-size: .5625rem; line-height: 1; color: var(--sched-ink-2); white-space: nowrap; cursor: pointer; }
html body #app .sched-root .sched-rev-prev:hover { border-color: var(--sched-acc); color: var(--sched-acc-ink); }
html body #app .sched-root.is-compact .sched-rev-prev { display: none; }
/* F-23: a Ft / munkaóra hangsúlyosan: eszköztár-blokk és kiemelt tábla-sor */
html body #app .sched-root .sched-kpimain { flex: 0 0 auto; display: flex; align-items: stretch; border: 1px solid var(--sched-acc); border-radius: .5rem; overflow: hidden; background: var(--sched-surf); }
html body #app .sched-root .sched-kpimain-c { display: flex; flex-direction: column; justify-content: center; padding: .125rem .625rem; border-left: 1px solid var(--sched-line); color: var(--sched-ink-2); }
html body #app .sched-root .sched-kpimain-c:first-child { border-left: 0; }
html body #app .sched-root .sched-kpimain-c.is-day { background: var(--sched-acc-soft); color: var(--sched-acc-ink); }
html body #app .sched-root .sched-kpimain-c.is-ok .sched-kpimain-v { color: var(--sched-ok); }
html body #app .sched-root .sched-kpimain-c.is-wait { background: var(--sched-wait-soft); color: var(--sched-wait-ink); }
html body #app .sched-root .sched-kpimain-c.is-low { background: var(--sched-dan-soft); color: var(--sched-dan); }
html body #app .sched-root .sched-kpimain-l { white-space: nowrap; font-size: .5625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; opacity: .85; }
html body #app .sched-root .sched-kpimain-v { font-size: .9375rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body #app .sched-root .sched-kpimain-v small { margin-left: .25rem; font-size: .6875rem; font-weight: 600; }
html body #app .sched-root .sched-kpimain-c:not(.is-day) .sched-kpimain-v { font-size: .8125rem; font-weight: 600; }
html body #app .sched-root .sched-kpimain-chip { font-weight: 600; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-c { height: 2rem; font-size: .8125rem; font-weight: 600; color: var(--sched-ok); background: var(--sched-acc-soft); border-bottom: 2px solid var(--sched-acc); }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-c.sched-name { color: var(--sched-ink); }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-c.sched-name .sched-bandlbl { font-weight: 700; }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-kpi.is-wait { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-kpi.is-low { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-kpi-dev { font-size: .6875rem; }
/* F-55: a heti cella keskeny (az Óra oszlop szélessége): az eltérés a súgóban, a szám elfér; az alap sor heti száma kisebb betűvel */
html body #app .sched-root .sched-c.sched-tail.sched-kpi .sched-kpi-dev { display: none; }
html body #app .sched-root .sched-bandrow.is-kpi.is-main .sched-c.sched-tail { font-size: .75rem; }
html body #app .sched-root .sched-rev-in:focus { box-shadow: inset 0 0 0 2px var(--sched-acc); outline: 0; background: var(--sched-surf); }
html body #app .sched-root .sched-bandrow.is-kpi .sched-day, html body #app .sched-root .sched-bandrow.is-kpi .sched-tail { text-align: right; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-bandrow.is-perhour .sched-c { font-weight: 600; }
html body #app .sched-root .sched-kpi.is-ok { color: var(--sched-ink-2); background: transparent; }
html body #app .sched-root .sched-kpi.is-wait { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }
html body #app .sched-root .sched-kpi.is-low { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-set-row.is-kpisrc { grid-template-columns: minmax(12rem, 1.6fr) minmax(10rem, 1fr); min-width: 24rem; }
html body #app .sched-root .sched-set-row.is-kpiline { grid-template-columns: minmax(12rem, 1.6fr) minmax(10rem, 1fr); min-width: 24rem; }
html body #app .sched-root .sched-set-lbl { margin: 0; font-size: .75rem; font-weight: 500; color: var(--sched-ink-2); }
html body #app .sched-root .sched-c.sched-tail.sched-kpi.is-ok { color: var(--sched-ink-2); background: transparent; }
html body #app .sched-root .sched-c.sched-tail.sched-kpi.is-wait { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }
html body #app .sched-root .sched-c.sched-tail.sched-kpi.is-low { color: var(--sched-dan); background: var(--sched-dan-soft); }

/* ---- A szelet: Képességek, szakaszlista, Mutatók, Költség ---- */
html body #app .sched-root .sched-caps { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: .875rem; padding: .375rem .75rem; border-bottom: 1px solid var(--sched-line); background: var(--sched-head); }
html body #app .sched-root .sched-caps-lbl { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-ink-3); }
html body #app .sched-root .sched-caps-note { margin-left: auto; font-size: .6875rem; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-switch { position: relative; display: inline-flex; align-items: center; gap: .4375rem; margin: 0; font-size: .75rem; color: var(--sched-ink); cursor: pointer; }
html body #app .sched-root .sched-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
html body #app .sched-root .sched-switch-track { position: relative; width: 1.625rem; height: .875rem; border-radius: .4375rem; background: var(--sched-line-s); transition: background .12s; }
html body #app .sched-root .sched-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: .625rem; height: .625rem; border-radius: 50%; background: #fff; transition: left .12s; }
html body #app .sched-root .sched-switch input:checked + .sched-switch-track { background: var(--sched-acc); }
html body #app .sched-root .sched-switch input:checked + .sched-switch-track::after { left: calc(100% - .625rem - 2px); }
html body #app .sched-root .sched-switch input:focus-visible + .sched-switch-track { box-shadow: 0 0 0 2px var(--sched-acc-soft), 0 0 0 1px var(--sched-acc); }
html body #app .sched-root .sched-switch input:disabled + .sched-switch-track { opacity: .45; }

html body #app .sched-root .sched-set-body { flex: 1 1 auto; min-height: 0; display: flex; }
html body #app .sched-root .sched-set-body.is-narrow { flex-direction: column; }
html body #app .sched-root .sched-set-nav { flex: 0 0 13.25rem; display: flex; flex-direction: column; gap: 1px; padding: .375rem; border-right: 1px solid var(--sched-line); overflow: auto; outline: 0; }
html body #app .sched-root .sched-set-navitem { display: flex; flex-direction: column; gap: 1px; padding: .3125rem .5625rem; border-radius: .375rem; cursor: pointer; }
html body #app .sched-root .sched-set-navitem:hover { background: var(--sched-band); }
html body #app .sched-root .sched-set-navitem.is-active { background: var(--sched-acc-soft); box-shadow: inset 0 0 0 1px var(--sched-acc); }
html body #app .sched-root .sched-set-nav:focus-visible .sched-set-navitem.is-active { box-shadow: inset 0 0 0 2px var(--sched-acc); }
html body #app .sched-root .sched-set-navname { font-size: .8125rem; font-weight: 500; color: var(--sched-ink); }
html body #app .sched-root .sched-set-navitem.is-active .sched-set-navname { font-weight: 600; }
html body #app .sched-root .sched-set-navsum { font-size: .6875rem; color: var(--sched-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-set-navsum.is-wait { color: var(--sched-wait-ink); }
html body #app .sched-root .sched-set-navhint { margin-top: auto; padding: .375rem .5625rem .125rem; font-size: .6875rem; color: var(--sched-mut); }
html body #app .sched-root .sched-set-pick { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .375rem .75rem; border-bottom: 1px solid var(--sched-line); font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-set-pick label { margin: 0; }
html body #app .sched-root .sched-set-pick .sched-field { width: auto; max-width: 22rem; height: 1.625rem; font-weight: 500; }
html body #app .sched-root .sched-set-pick .sched-set-navhint { margin: 0 0 0 auto; padding: 0; }
html body #app .sched-root .sched-set-pos { white-space: nowrap; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-set-panel { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: .75rem 1rem 1rem; }
html body #app .sched-root .sched-set-body.is-narrow .sched-set-panel { padding: .5rem .75rem .75rem; }

html body #app .sched-root .sched-kpi-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
html body #app .sched-root .sched-kpi-top .sched-set-h { margin: 0; }
html body #app .sched-root .sched-kpi-sub { margin-top: 1rem; }
html body #app .sched-root .sched-kpi-list .sched-set-row { grid-template-columns: 10.5rem minmax(0, 1fr) minmax(0, 1.6fr) 7.5rem 1.25rem; height: 2rem; cursor: pointer; }
html body #app .sched-root .sched-kpi-list .sched-set-row:hover { background: var(--sched-band); }
html body #app .sched-root .sched-kpi-list .sched-set-row.is-head { height: 1.625rem; cursor: default; }
html body #app .sched-root .sched-tag-def { font-size: .625rem; font-weight: 500; padding: 0 .3125rem; border: 1px solid var(--sched-line-s); border-radius: .25rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .375rem; }
html body #app .sched-root .sched-line-chip { height: 1.5rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .5rem; font-size: .75rem; color: var(--sched-ink-2); background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .375rem; }
html body #app .sched-root .sched-line-chip small { font-size: .625rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-line-chip.is-on { color: var(--sched-ink); border-color: var(--sched-acc); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-link { padding: 0; border: 0; background: transparent; color: var(--sched-acc-ink); font-size: inherit; text-decoration: underline; cursor: pointer; }
html body #app .sched-root .sched-kpi-hours { margin-top: .75rem; }
html body #app .sched-root .sched-kpi-crumb { display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem; font-size: .8125rem; }
html body #app .sched-root .sched-crumb-sep { color: var(--sched-ink-3); }
html body #app .sched-root .sched-kpi-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1rem; align-items: start; }
html body #app .sched-root .sched-set-body.is-narrow .sched-kpi-edit { gap: .5rem .75rem; }
html body #app .sched-root .sched-kfield { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
html body #app .sched-root .sched-kfield.is-wide { grid-column: 1 / -1; }
html body #app .sched-root .sched-flabel { margin: 0; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-ink-3); }
html body #app .sched-root .sched-krow { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; }
html body #app .sched-root .sched-note { font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-kpi-ratio { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
html body #app .sched-root .sched-kpi-ratio .sched-div { font-size: 1rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-div { font-size: 1rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-kside { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: .25rem; }
html body #app .sched-root .sched-kside .sched-set-note { margin: 0; }
html body #app .sched-root .sched-check { display: inline-flex; align-items: center; gap: .3125rem; margin: 0; font-size: .75rem; color: var(--sched-ink-2); cursor: pointer; }
html body #app .sched-root .sched-goal-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto 1.125rem; gap: .5rem; align-items: center; min-height: 1.875rem; padding: 0 .5rem; border-bottom: 1px solid var(--sched-line); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-goal-row.is-draft { grid-template-columns: 7.5rem minmax(0, 1fr) auto auto; }
html body #app .sched-root .sched-goal-row .sched-field { text-align: right; height: 1.5rem; }
html body #app .sched-root .sched-goal-row input[type=date] { text-align: left; }
html body #app .sched-root .sched-goal-from { font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-goal-tag { font-size: .6875rem; padding: 0 .375rem; border-radius: .25rem; white-space: nowrap; color: var(--sched-ink-3); }
html body #app .sched-root .sched-goal-tag.is-now { color: var(--sched-acc-ink); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-field.is-error { border-color: var(--sched-dan); }
html body #app .sched-root .sched-field.is-unset::placeholder { color: var(--sched-wait-ink); }
html body #app .sched-root .sched-field-err { font-size: .75rem; color: var(--sched-dan); }
html body #app .sched-root .sched-save.is-all { color: var(--sched-ink-3); }

html body #app .sched-root .sched-info { display: flex; align-items: flex-start; gap: .5625rem; margin: .5rem 0; padding: .5rem .6875rem; border: 1px solid var(--sched-line-s); border-radius: .375rem; background: var(--sched-head); font-size: .8125rem; line-height: 1.45; }
html body #app .sched-root .sched-info-ic { flex: 0 0 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--sched-ink-3); color: var(--sched-ink-3); font-size: .625rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
html body #app .sched-root .sched-cost-rule { margin-top: .5rem; }
html body #app .sched-root .sched-set-row.is-costtype { grid-template-columns: minmax(10rem, 1.2fr) 10rem minmax(0, 1.6fr); min-width: 28rem; min-height: 1.875rem; }
html body #app .sched-root .sched-set-row.is-costperson { grid-template-columns: minmax(10rem, 1.3fr) 10rem minmax(0, 1fr); min-width: 28rem; min-height: 1.875rem; }
html body #app .sched-root .sched-set-row.is-costtype .sched-field, html body #app .sched-root .sched-set-row.is-costperson .sched-field { width: 100%; text-align: right; height: 1.5rem; }
html body #app .sched-root .sched-cost-src { justify-self: start; font-size: .75rem; padding: 0 .4375rem; border-radius: .25rem; white-space: nowrap; color: var(--sched-ink-3); }
html body #app .sched-root .sched-cost-src.is-manual { color: var(--sched-acc-ink); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-cost-src.is-missing { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }

/* ---- Mutatók sáv a táblán ---- */
html body #app .sched-root .sched-band { display: block; width: max-content; min-width: 100%; }
html body #app .sched-root .sched-bandrow.is-head { cursor: pointer; }
html body #app .sched-root .sched-c.sched-bandspan { flex: 1 0 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: 0 .5rem; overflow: hidden; white-space: nowrap; font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-seg.is-mini { display: inline-flex; gap: 0; }
html body #app .sched-root .sched-seg.is-mini > button { height: 1rem; padding: 0 .375rem; font-size: .6875rem; line-height: 1; border: 1px solid var(--sched-line-s); background: transparent; color: var(--sched-ink-3); }
html body #app .sched-root .sched-seg.is-mini > button + button { border-left: 0; }
html body #app .sched-root .sched-seg.is-mini > button.is-on { background: var(--sched-acc-soft); color: var(--sched-ink); font-weight: 600; }
html body #app .sched-root .sched-bandlbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-bandgoal { margin-left: auto; padding-left: .375rem; font-size: .625rem; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-bandlbl.is-muted { font-weight: 400; color: var(--sched-ink-3); }
html body #app .sched-root .sched-kpi { justify-content: flex-end; gap: .25rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-kpi.is-low { font-weight: 600; }
html body #app .sched-root .sched-kpi-dev { font-size: .625rem; font-weight: 600; }
html body #app .sched-root .sched-cost { justify-content: flex-end; color: var(--sched-ink-2); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-cost.is-none { color: var(--sched-mut); }
html body #app .sched-root .sched-c.sched-bandspan .sched-chip { display: inline-flex; align-items: center; height: 1rem; padding: 0 .375rem; border-radius: .25rem; font-size: .6875rem; font-weight: 600; color: var(--sched-ink-2); }
html body #app .sched-root .sched-c.sched-bandspan .sched-chip.is-wait { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }
html body #app .sched-root .sched-c.sched-bandspan .sched-chip.is-low { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-kfield > .sched-seg { align-self: flex-start; }

/* Hibajegyzék nézet */
html body #app .sched-root .sched-issues { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
html body #app .sched-root .sched-iss-filter { flex: 0 0 auto; display: flex; align-items: center; gap: .375rem; padding: .375rem .625rem; border-bottom: 1px solid var(--sched-line); background: var(--sched-head); }
html body #app .sched-root .sched-iss-chip { height: 1.375rem; display: inline-flex; align-items: center; gap: .3125rem; padding: 0 .5rem; font-size: .75rem; border: 1px solid var(--sched-line-s); border-radius: .6875rem; background: var(--sched-surf); color: var(--sched-ink); cursor: pointer; }
html body #app .sched-root .sched-iss-chip.is-on { border-color: var(--sched-acc); background: var(--sched-acc-soft); font-weight: 600; }
html body #app .sched-root .sched-iss-chip-n { font-size: .6875rem; color: var(--sched-ink-3); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-iss-pick { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; margin: 0; }
html body #app .sched-root .sched-iss-pick .sched-field { width: auto; height: 1.5rem; }
html body #app .sched-root .sched-iss-list { flex: 1 1 auto; min-height: 0; overflow: auto; outline: 0; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-iss-bhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .5rem; height: 1.375rem; padding: 0 .625rem; background: var(--sched-head); border-bottom: 1px solid var(--sched-line);
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-iss-block.is-gap .sched-iss-bhead { background: var(--sched-dan-soft); color: var(--sched-dan); }
html body #app .sched-root .sched-iss-bsub { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--sched-ink-3); }
html body #app .sched-root .sched-iss-row { display: grid; grid-template-columns: 6.75rem 8.75rem 10.625rem 6.875rem minmax(0, 1fr) 4.375rem; column-gap: .625rem; align-items: center;
  min-height: 1.875rem; padding: 0 .625rem; border-bottom: 1px solid var(--sched-line); font-size: .8125rem; cursor: pointer; }
html body #app .sched-root .sched-iss-row:hover { background: var(--sched-band); }
html body #app .sched-root .sched-iss-row.is-sel { background: var(--sched-acc-soft); box-shadow: inset 0 0 0 1px var(--sched-acc); }
html body #app .sched-root .sched-iss-list:focus-visible .sched-iss-row.is-sel { box-shadow: inset 0 0 0 2px var(--sched-acc); }
html body #app .sched-root .sched-iss-sev { justify-self: start; font-size: .6875rem; font-weight: 600; padding: 1px .375rem; border-radius: .25rem; white-space: nowrap; }
html body #app .sched-root .sched-iss-sev.is-error { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-iss-sev.is-warn { color: var(--sched-wait-ink); background: var(--sched-wait-soft); }
html body #app .sched-root .sched-iss-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-iss-who { display: flex; align-items: center; gap: .375rem; min-width: 0; }
html body #app .sched-root .sched-iss-who > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-iss-who .is-open { font-style: italic; }
html body #app .sched-root .sched-iss-when, html body #app .sched-root .sched-iss-text { color: var(--sched-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-iss-jump { justify-self: end; font-size: .75rem; color: var(--sched-acc-ink); white-space: nowrap; }
html body #app .sched-root .sched-issues.is-narrow .sched-iss-row { grid-template-columns: 3.25rem 7.375rem minmax(0, 1fr) 5.75rem 1.375rem; min-height: 2.25rem; padding: .1875rem .625rem; font-size: .75rem; }
html body #app .sched-root .sched-issues.is-narrow .sched-iss-text { grid-column: 2 / -1; grid-row: 2; font-size: .6875rem; color: var(--sched-ink-3); margin-top: -2px; }
html body #app .sched-root .sched-iss-foot { flex: 0 0 1.375rem; display: flex; align-items: center; gap: .625rem; padding: 0 .625rem; border-top: 1px solid var(--sched-line); font-size: .6875rem; color: var(--sched-ink-3); white-space: nowrap; overflow: hidden; }
html body #app .sched-root .sched-iss-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 0 2.5rem; text-align: center; }

/* Tábla: számláló gomb, „−1 fő”, ugrás-lábléc */
html body #app .sched-root .sched-iss-btn { flex: 0 0 auto; white-space: nowrap; }
html body #app .sched-root .sched-iss-btn .sched-iss-count { font-weight: 600; color: var(--sched-dan); }
html body #app .sched-root .sched-iss-btn .sched-iss-count.is-warn { color: var(--sched-wait-ink); }
html body #app .sched-root .sched-miss { margin-left: .3125rem; font-size: .625rem; font-weight: 600; padding: 0 .25rem; border-radius: .1875rem; color: var(--sched-dan); background: var(--sched-dan-soft); cursor: pointer; }
html body #app .sched-root .sched-c.is-iss-focus { box-shadow: inset 0 0 0 2px var(--sched-acc); }
html body #app .sched-root .sched-dayhead.is-iss-day { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-foot.is-issue-mode { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-foot.is-issue-mode .sched-foot-pos { font-weight: 600; color: var(--sched-acc-ink); }

/* Szabályok */
html body #app .sched-root .sched-rule-table { border: 1px solid var(--sched-line); border-radius: .375rem; overflow: hidden; font-size: .8125rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-rule-row { display: grid; gap: .5rem; align-items: center; height: 2rem; padding: 0 .625rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-rule-row.is-head { height: 1.625rem; background: var(--sched-head); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sched-ink-3); }
html body #app .sched-root .sched-rule-row.is-new .sched-field { color: var(--sched-mut); }
html body #app .sched-root .sched-rule-need .sched-rule-row { grid-template-columns: minmax(0, 1.4fr) 4.375rem 4.375rem 1rem minmax(0, 1fr) 3.5rem 1.125rem; }
html body #app .sched-root .sched-rule-min .sched-rule-row { grid-template-columns: minmax(0, 1fr) 4.75rem 5rem 13.25rem 7.375rem 1.125rem; }
html body #app .sched-root .sched-set-body.is-narrow .sched-rule-need .sched-rule-row { grid-template-columns: minmax(0, 1.3fr) 3.25rem 3.25rem .75rem minmax(0, 1fr) 2.75rem .875rem; }
html body #app .sched-root .sched-set-body.is-narrow .sched-rule-min .sched-rule-row { grid-template-columns: 6rem 4rem 4rem minmax(0, 1fr) 6rem .875rem; }
html body #app .sched-root .sched-rule-row .sched-field { height: 1.5rem; }
html body #app .sched-root .sched-rule-row .sched-field.is-num { text-align: right; }
html body #app .sched-root .sched-field.is-warn { border-color: var(--sched-wait-ink); }
html body #app .sched-root .sched-rule-note { padding: 3px .625rem 4px; font-size: .6875rem; color: var(--sched-wait-ink); background: var(--sched-wait-soft); border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-rule-err { padding: 3px .625rem 4px; font-size: .6875rem; color: var(--sched-dan); border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-daychip { width: 1.75rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: .625rem; border: 1px solid var(--sched-line-s); border-radius: .25rem; color: var(--sched-mut); background: transparent; cursor: pointer; }
html body #app .sched-root .sched-daychip.is-on { border-color: var(--sched-acc); background: var(--sched-acc-soft); color: var(--sched-ink); font-weight: 600; }
html body #app .sched-root .sched-set-body.is-narrow .sched-daychip { width: 1.375rem; }
html body #app .sched-root .sched-rule-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .875rem 1rem; border: 1px dashed var(--sched-line-s); border-radius: .375rem; font-size: .8125rem; color: var(--sched-ink-2); }

/* G, B, C szelet kiegészítések (a design átadó szabályain felül) */
html body #app .sched-root .sched-iss-loading { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .625rem; }
html body #app .sched-root .sched-iss-loading-t { font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-iss-ok { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; color: var(--sched-ok); background: var(--sched-ok-soft); }
html body #app .sched-root .sched-iss-empty b { font-size: .875rem; font-weight: 600; }
html body #app .sched-root .sched-iss-empty-sub { font-size: .75rem; color: var(--sched-ink-3); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-iss-checked { font-size: .75rem; color: var(--sched-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-iss-checked.is-stale { color: var(--sched-wait-ink); }
html body #app .sched-root .sched-iss-btn.is-stale .sched-iss-count { opacity: .5; }
html body #app .sched-root .sched-foot-keys { flex: 0 0 auto; margin-left: auto; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-foot.is-issue-mode .sched-foot-msg { color: var(--sched-ink); }
html body #app .sched-root .sched-link.is-danger { color: var(--sched-dan); }
html body #app .sched-root .sched-rule-tabs { margin: .375rem 0 .5rem; }
html body #app .sched-root .sched-rule-arrow { text-align: center; color: var(--sched-ink-3); }
html body #app .sched-root .sched-rule-row .sched-field { width: 100%; box-sizing: border-box; }
html body #app .sched-root .sched-rule-row .sched-field.is-error { border-color: var(--sched-dan); }
html body #app .sched-root .sched-rule-row .sched-set-num { padding-right: .25rem; }
html body #app .sched-root .sched-rule-unit { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
html body #app .sched-root .sched-rule-unit small { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-rule-days { display: flex; align-items: center; gap: .125rem; min-width: 0; }
html body #app .sched-root .sched-rule-need .sched-rule-row.is-ask, html body #app .sched-root .sched-rule-min .sched-rule-row.is-ask { display: flex; justify-content: space-between; background: var(--sched-dan-soft); color: var(--sched-ink); }
html body #app .sched-root .sched-rule-row.is-new { background: var(--sched-band); }
html body #app .sched-root .sched-rule-note + .sched-rule-note { border-top: 0; }
html body #app .sched-root .sched-iss-row .sched-iss-jump { cursor: pointer; }

/* H szelet: Változásnapló (cella-előzmények, Napló nézet, lábléc-link). Tokenek: a meglévők; új szín nincs. */
/* Típus-címke és régi → új */
html body #app .sched-root .sched-chg { justify-self: start; font-size: .6875rem; font-weight: 600; line-height: 1.0625rem; padding: 0 .375rem; border-radius: .25rem; border: 1px solid transparent; white-space: nowrap; }
html body #app .sched-root .sched-chg.is-edit { color: var(--sched-acc-ink); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-chg.is-delete, html body #app .sched-root .sched-chg.is-remove { color: var(--sched-dan); background: var(--sched-dan-soft); }
html body #app .sched-root .sched-chg.is-pattern, html body #app .sched-root .sched-chg.is-copy, html body #app .sched-root .sched-chg.is-template, html body #app .sched-root .sched-chg.is-daystate { color: var(--sched-ink-2); border-color: var(--sched-line-s); }
html body #app .sched-root .sched-chg.is-publish { color: var(--sched-ok); background: var(--sched-ok-soft); }
html body #app .sched-root .sched-diff { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-diff .is-old { color: var(--sched-ink-3); }
html body #app .sched-root .sched-diff .is-arr { color: var(--sched-mut); }
html body #app .sched-root .sched-diff .is-new { font-weight: 600; color: var(--sched-ink); }
html body #app .sched-root .sched-diff .is-new.is-del { font-style: italic; color: var(--sched-dan); }
html body #app .sched-root .sched-diff .is-pub { color: var(--sched-ok); font-weight: 600; }

/* Cella-menü (jobb klikk) */
html body #app .sched-root .sched-ctx { position: absolute; z-index: 24; min-width: 9rem; padding: .25rem; background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .5rem; box-shadow: 0 4px 20px rgba(24, 24, 27, .14); }
html body #app .sched-root .sched-ctx-item { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .25rem .5rem; border: 0; border-radius: .375rem; background: transparent; color: var(--sched-ink-2); font-size: .8125rem; text-align: left; }
html body #app .sched-root .sched-ctx-item:hover, html body #app .sched-root .sched-ctx-item:focus-visible { background: var(--sched-acc-soft); color: var(--sched-ink); }
html body #app .sched-root .sched-ctx-key { margin-left: auto; font-size: .6875rem; color: var(--sched-ink-3); }

/* Cella-előzmények */
html body #app .sched-root .sched-hist { position: absolute; z-index: 25; width: 25.25rem; max-height: calc(100% - 3rem); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: .75rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-hist.is-narrow { width: 24.5rem; }
html body #app .sched-root .sched-hist-head { display: flex; align-items: baseline; gap: .5rem; padding: .5625rem .75rem .125rem; }
html body #app .sched-root .sched-hist-head b { font-size: .8125rem; font-weight: 600; }
html body #app .sched-root .sched-hist-head > span:not(.sched-flex) { color: var(--sched-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-hist-now { padding: 0 .75rem .4375rem; font-size: .6875rem; color: var(--sched-ink-3); border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-hist-list { flex: 1 1 auto; min-height: 0; overflow: auto; outline: 0; }
html body #app .sched-root .sched-hist-list:focus-visible { outline: 2px solid var(--sched-acc); outline-offset: -2px; }
html body #app .sched-root .sched-hist-item { display: flex; flex-direction: column; gap: 2px; padding: .375rem .75rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-hist-item.is-pub { background: var(--sched-head); }
html body #app .sched-root .sched-hist-l1 { display: flex; align-items: center; gap: .5rem; min-width: 0; }
html body #app .sched-root .sched-hist-l2 { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-hist-empty { display: flex; flex-direction: column; gap: .25rem; padding: .875rem .75rem; border-bottom: 1px solid var(--sched-line); }
html body #app .sched-root .sched-hist-empty b { font-size: .8125rem; font-weight: 600; }
html body #app .sched-root .sched-hist-empty span { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-hist-loading { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
html body #app .sched-root .sched-hist-err { padding: .625rem .75rem; color: var(--sched-dan); }
html body #app .sched-root .sched-hist-foot { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .375rem .75rem; font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-hist-foot .sched-link { color: var(--sched-acc-ink); font-weight: 500; }

/* Napló nézet: a sor- és napfejléc-magasság rögzített (px: az ablakozás ezekre számol, a gyökér betűmérettől függetlenül) */
html body #app .sched-root .sched-log { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
html body #app .sched-root .sched-log-filter { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem; border-bottom: 1px solid var(--sched-line); background: var(--sched-head); font-size: .75rem; white-space: nowrap; }
html body #app .sched-root .sched-log-pick { display: inline-flex; align-items: center; gap: .375rem; margin: 0; color: var(--sched-ink-3); }
html body #app .sched-root .sched-log-pick .sched-field { width: auto; height: 1.5rem; color: var(--sched-ink); font-weight: 500; }
html body #app .sched-root .sched-log-pick.is-on .sched-field { border-color: var(--sched-acc); background-color: var(--sched-acc-soft); font-weight: 600; }
html body #app .sched-root .sched-log-pub { color: var(--sched-ink-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-log-list { flex: 1 1 auto; min-height: 0; overflow: auto; outline: 0; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-log .sched-iss-bhead { height: 22px; box-sizing: border-box; }
html body #app .sched-root .sched-log-row { box-sizing: border-box; display: grid; grid-template-columns: 5.75rem 11.25rem minmax(0, 1fr) 7.5rem 7.5rem 4.375rem; column-gap: .625rem; align-items: center;
  height: 30px; padding: 0 .625rem; border-bottom: 1px solid var(--sched-line); font-size: .8125rem; cursor: pointer; }
html body #app .sched-root .sched-log-row:hover { background: var(--sched-band); }
html body #app .sched-root .sched-log-row.is-pub { background: var(--sched-head); }
html body #app .sched-root .sched-log-row.is-sel { background: var(--sched-acc-soft); box-shadow: inset 0 0 0 1px var(--sched-acc); }
html body #app .sched-root .sched-log-list:focus-visible .sched-log-row.is-sel { box-shadow: inset 0 0 0 2px var(--sched-acc); }
html body #app .sched-root .sched-log-by, html body #app .sched-root .sched-log-at { color: var(--sched-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-log-gone { justify-self: end; font-size: .75rem; color: var(--sched-mut); white-space: nowrap; }
html body #app .sched-root .sched-log.is-narrow .sched-log-row { grid-template-columns: 4.75rem 8.75rem minmax(0, 1fr) 1.375rem; height: 36px; padding: 3px .625rem; font-size: .75rem; }
html body #app .sched-root .sched-log-meta { grid-column: 2 / -1; grid-row: 2; margin-top: -2px; font-size: .6875rem; color: var(--sched-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-log-errbox { margin: .75rem .625rem; padding: .5rem .625rem; border: 1px solid var(--sched-dan); border-radius: .375rem; color: var(--sched-dan); font-size: .8125rem; }
html body #app .sched-root .sched-log-more { padding: .5rem .625rem; font-size: .75rem; color: var(--sched-ink-3); text-align: center; }

/* Tábla lábléce: Napló-link a közölt, módosított cellán */
html body #app .sched-root .sched-foot-hint { flex: 0 0 auto; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-foot-log { flex: 0 0 auto; color: var(--sched-acc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* D1 szelet: a sor menüje (jobb klikk a néven, Shift+F10). Tokenek: a meglévők; új szín nincs. */
html body #app .sched-root .sched-rmenu-wrap { display: contents; }
html body #app .sched-root .sched-rmenu { position: absolute; z-index: 30; width: 11rem; box-sizing: border-box; max-height: calc(100% - .5rem); overflow: auto; padding: .25rem; background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .4375rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); font-size: .8125rem; outline: 0; }
html body #app .sched-root .sched-rmenu.is-sub { width: 12.875rem; }
html body #app .sched-root .sched-rmenu-item { width: 100%; display: flex; align-items: center; gap: .5rem; height: 1.625rem; padding: 0 .5rem; border: 0; border-radius: .3125rem; background: transparent; color: var(--sched-ink); text-align: left; cursor: pointer; white-space: nowrap; }
html body #app .sched-root .sched-rmenu-item:hover, html body #app .sched-root .sched-rmenu-item.is-on, html body #app .sched-root .sched-rmenu-item:focus-visible { background: var(--sched-acc-soft); outline: 0; }
html body #app .sched-root .sched-rmenu-item.is-muted { color: var(--sched-mut); height: 1.375rem; }
html body #app .sched-root .sched-rmenu-r { margin-left: auto; font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-rmenu-dot { flex: 0 0 .625rem; width: .625rem; font-size: .625rem; color: var(--sched-acc); }
html body #app .sched-root .sched-rmenu-head { padding: .1875rem .5rem .25rem; font-size: .6875rem; color: var(--sched-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #app .sched-root .sched-rmenu-group { margin-top: .125rem; padding: .25rem .5rem .125rem; border-top: 1px solid var(--sched-line); font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-rmenu-help { margin-top: .125rem; padding: .1875rem .5rem .125rem; border-top: 1px solid var(--sched-line); font-size: .6875rem; color: var(--sched-ink-3); }

/* A soron: a pozíció-felirat a név mellett; .is-compact-ban a név vágódik előbb, a felirat marad */
html body #app .sched-root .sched-name .sched-label { flex: 0 1 auto; min-width: 0; }
html body #app .sched-root .sched-pos { flex: 0 0 auto; font-size: .625rem; line-height: .875rem; padding: 0 .25rem; border: 1px solid var(--sched-line); border-radius: .1875rem; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-pos.is-bad { border-color: transparent; color: var(--sched-dan); background: var(--sched-dan-soft); }

/* Beállítások › Pozíciók: Lista (a Szabályok táblájának soraival) és Engedélyezés (mátrix; a sorok px-magassága egyezik a sor-ablakozással: SCHED_POS_ROW_H / SCHED_POS_HEAD_H) */
html body #app .sched-root .sched-pos-list .sched-rule-row { grid-template-columns: 1.125rem minmax(0, 20rem) minmax(0, 1fr) 1.125rem; height: 1.875rem; }
html body #app .sched-root .sched-set-body.is-narrow .sched-pos-list .sched-rule-row { grid-template-columns: .875rem minmax(0, 1fr) minmax(0, 1fr) .875rem; }
html body #app .sched-root .sched-pos-list .sched-rule-row.is-head { height: 1.625rem; }
html body #app .sched-root .sched-pos-list .sched-rule-row.is-ask { display: flex; justify-content: space-between; background: var(--sched-dan-soft); color: var(--sched-ink); }
html body #app .sched-root .sched-pos-list .sched-rule-row.is-drag { opacity: .5; }
html body #app .sched-root .sched-pos-list .sched-rule-row.is-over { box-shadow: inset 0 2px 0 var(--sched-acc); }
html body #app .sched-root .sched-pos-grip { color: var(--sched-mut); font-size: .6875rem; letter-spacing: -2px; text-align: center; cursor: grab; user-select: none; }
html body #app .sched-root .sched-pos-use { font-size: .75rem; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-pos-matrix { max-height: 420px; border: 1px solid var(--sched-line); border-radius: .375rem; overflow: auto; font-size: .8125rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-pos-matrix .sched-rule-row { grid-template-columns: minmax(0, 1.5fr) repeat(var(--pos-n), minmax(0, 1fr)) 5.25rem; box-sizing: border-box; height: 28px; }
html body #app .sched-root .sched-pos-matrix .sched-rule-row.is-head { position: sticky; top: 0; z-index: 1; height: 30px; text-transform: none; letter-spacing: .02em; }
html body #app .sched-root .sched-pos-matrix .sched-rule-row.is-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
html body #app .sched-root .sched-pos-matrix .sched-rule-row.is-head span:first-child { text-align: left; }
html body #app .sched-root .sched-pos-matrix .sched-rule-row.is-err { background: var(--sched-dan-soft); }
html body #app .sched-root .sched-pos-person { display: flex; align-items: center; gap: .375rem; min-width: 0; }
html body #app .sched-root .sched-pos-cell { display: flex; align-items: center; justify-content: center; min-width: 0; }
html body #app .sched-root .sched-chk { justify-self: center; width: .9375rem; height: .9375rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--sched-line-s); border-radius: .1875rem; background: transparent; font-size: .625rem; font-weight: 600; color: var(--sched-acc-ink); cursor: pointer; }
html body #app .sched-root .sched-chk.is-on { border-color: var(--sched-acc); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-chk:focus-visible { outline: 2px solid var(--sched-acc); outline-offset: 1px; }
html body #app .sched-root .sched-chk-ro { font-size: .75rem; font-weight: 600; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-pos-sum { font-size: .75rem; color: var(--sched-ink-2); text-align: right; white-space: nowrap; }
html body #app .sched-root .sched-pos-sum.is-any { color: var(--sched-mut); }
html body #app .sched-root .sched-pos-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 1rem; padding: .25rem 0; font-size: .8125rem; }
html body #app .sched-root .sched-pos-pick.is-err { background: var(--sched-dan-soft); }
html body #app .sched-root .sched-pos-pick label { display: flex; align-items: center; gap: .5rem; height: 1.5rem; margin: 0; min-width: 0; }
html body #app .sched-root .sched-pos-pick label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* E szelet: ismétlődő minta (↻ jel a soron, Minta felugró, előnézet a táblán és a láblécben). Tokenek: a meglévők; új szín nincs. */
html body #app .sched-root .sched-rmenu-item .sched-rmenu-r { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #app .sched-root .sched-pat { flex: 0 0 auto; font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-name.is-pat-src { background: var(--sched-acc-soft); }
html body #app .sched-root .sched-cell.is-pat-target { outline: 1px dashed var(--sched-acc); outline-offset: -3px; }
html body #app .sched-root .sched-cell.is-pat-target .sched-v { font-style: italic; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-cell.is-pat-filled { background: var(--sched-wait-soft); box-shadow: inset 0 0 0 2px var(--sched-wait-ink); }
html body #app .sched-root .sched-foot.is-pat-mode .sched-foot-pos { font-weight: 600; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-foot.is-pat-mode .sched-foot-msg { color: var(--sched-ink); }

/* A felugró: a kártya jobb oldalán az eszköztár alatt (széles: 452 px, keskeny: 420 px, a tetején); alacsony ablakban görgethető */
html body #app .sched-root .sched-pat-pop { position: absolute; z-index: 25; top: 2.75rem; right: .5rem; width: 28.25rem; max-width: calc(100% - 1rem); max-height: calc(100% - 3.25rem); overflow: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: .5rem; padding: .75rem .875rem;
  background: var(--sched-surf); border: 1px solid var(--sched-line-s); border-radius: .5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: .75rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-pat-pop.is-narrow { top: .25rem; width: 26.25rem; max-height: calc(100% - .5rem); gap: .375rem; padding: .5625rem .75rem; }
html body #app .sched-root .sched-pat-head { display: flex; align-items: baseline; gap: .5rem; }
html body #app .sched-root .sched-pat-head b { font-size: .8125rem; font-weight: 600; }
html body #app .sched-root .sched-pat-head > span:not(.sched-flex) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sched-ink-3); }
html body #app .sched-root .sched-pat-ask { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .625rem; padding: .375rem .5625rem; border-radius: .375rem; background: var(--sched-dan-soft); color: var(--sched-ink); }
html body #app .sched-root .sched-pat-fields { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .875rem; }
html body #app .sched-root .sched-pat-fields label { display: inline-flex; align-items: center; gap: .375rem; margin: 0; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-pat-fields .sched-field { height: 1.5rem; width: auto; color: var(--sched-ink); }
html body #app .sched-root .sched-pat-fields .sched-field.is-num { width: 2.25rem; text-align: right; }
html body #app .sched-root .sched-field.is-err { border-color: var(--sched-dan); color: var(--sched-dan); }
html body #app .sched-root .sched-pat-err { margin-top: -3px; font-size: .6875rem; color: var(--sched-dan); }
html body #app .sched-root .sched-pat-grid { display: flex; flex-direction: column; gap: 3px; }
html body #app .sched-root .sched-pat-grid.is-dim { opacity: .45; }
html body #app .sched-root .sched-pat-row { display: grid; grid-template-columns: 5.375rem repeat(7, minmax(0, 1fr)); gap: 3px; align-items: center; }
html body #app .sched-root .sched-pat-pop.is-narrow .sched-pat-row { grid-template-columns: 4.5rem repeat(7, minmax(0, 1fr)); }
html body #app .sched-root .sched-pat-row.is-head span { font-size: .625rem; color: var(--sched-ink-3); text-align: center; }
html body #app .sched-root .sched-pat-wl { white-space: nowrap; font-size: .625rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-pat-wl b { font-size: .75rem; font-weight: 600; color: var(--sched-ink); }
html body #app .sched-root .sched-pat-cell { height: 1.5rem; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--sched-line-s); border-radius: .25rem; background: transparent; font-size: .625rem; color: var(--sched-ink); cursor: pointer; }
html body #app .sched-root .sched-pat-pop.is-narrow .sched-pat-cell { height: 1.25rem; }
html body #app .sched-root .sched-pat-cell.is-on { border-color: var(--sched-acc); background: var(--sched-acc-soft); }
html body #app .sched-root .sched-pat-cell:focus-visible { outline: 2px solid var(--sched-acc); outline-offset: 1px; }
html body #app .sched-root .sched-pat-note, html body #app .sched-root .sched-pat-foot, html body #app .sched-root .sched-pat-days { font-size: .6875rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-pat-prev { padding: .375rem .5625rem; border: 1px solid var(--sched-line); border-radius: .375rem; background: var(--sched-head); line-height: 1.4; }
html body #app .sched-root .sched-pat-prev.is-muted { color: var(--sched-ink-3); }
html body #app .sched-root .sched-pat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }

/* F szelet: elérhetőség (jel a táblán, Beállítások › Elérhetőség rács, Elérhetők panel kiegészítés). Tokenek: a meglévők; új szín nincs, a sötét módhoz nem kell külön szabály.
   A rács sorainak px-magassága egyezik a sor-ablakozással (SCHED_AVAIL_ROW_H / SCHED_AVAIL_HEAD_H). */
html body #app .sched-root .sched-na { position: absolute; left: 3px; bottom: 3px; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--sched-dan); border-radius: 50%; pointer-events: none; }
html body #app .sched-root .sched-av-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin: .375rem 0 .5rem; font-size: .75rem; }
html body #app .sched-root .sched-av-legend { margin-left: auto; color: var(--sched-ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
html body #app .sched-root .sched-av-legend b.is-yes { color: var(--sched-ok); }
html body #app .sched-root .sched-av-legend b.is-no { color: var(--sched-dan); }
html body #app .sched-root .sched-av-key { display: inline-block; width: .875rem; height: .75rem; box-sizing: border-box; border: 1px solid var(--sched-line); border-radius: .1875rem; }
html body #app .sched-root .sched-av-legend-note { margin: .25rem 0 .5rem; }
/* K-09: a „⋯” menü csoportjai, menü-kinézettel (a menü a gyökéren belül nyílik) */
html body #app .sched-root .dropdown-menu .dropdown-item { color: var(--sched-ink); text-decoration: none; font-size: .8125rem; padding: .3125rem 1rem; }
html body #app .sched-root .dropdown-menu .dropdown-item:hover, html body #app .sched-root .dropdown-menu .dropdown-item:focus { background: var(--sched-band); color: var(--sched-ink); text-decoration: none; }
html body #app .sched-root .dropdown-menu li[role=presentation] { margin: 0; padding: 0; list-style: none; }
html body #app .sched-root .dropdown-menu .sched-menu-h { margin: 0; padding: .375rem 1rem .125rem; font-size: .625rem; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sched-ink-3); }
html body #app .sched-root .dropdown-menu .dropdown-divider { height: 0; margin: .25rem 0; border: 0; border-top: 1px solid var(--sched-line); }
html body #app .sched-root .sched-films-btn { white-space: nowrap; flex: 0 0 auto; }
html body #app .sched-root .sched-av-period { display: inline-flex; align-items: center; height: 1.625rem; padding: 0 .625rem; border-left: 1px solid var(--sched-line-s); border-right: 1px solid var(--sched-line-s); background: var(--sched-surf); white-space: nowrap; }
html body #app .sched-root .sched-av-loading { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 0; }
html body #app .sched-root .sched-av-grid { max-height: 420px; border: 1px solid var(--sched-line); border-radius: .375rem; overflow: auto; min-height: 0; font-size: .8125rem; font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-av-grid .sched-rule-row { grid-template-columns: minmax(0, 1fr) 12rem repeat(7, 3.875rem);   /* F-38: „Csak a megadott napokon” kifér (188 px) */ gap: .375rem; box-sizing: border-box; height: 28px; }
html body #app .sched-root .sched-av-grid .sched-rule-row.is-head { position: sticky; top: 0; z-index: 1; height: 30px; text-transform: none; letter-spacing: .02em; }
html body #app .sched-root .sched-av-grid .sched-rule-row.is-err { background: var(--sched-dan-soft); }
html body #app .sched-root .sched-av-grid .sched-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #app .sched-root .sched-av-hd { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; text-align: center; }
html body #app .sched-root .sched-av-hd b { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sched-ink-2); }
html body #app .sched-root .sched-av-hd small { font-size: .6875rem; font-weight: 400; color: var(--sched-ink-3); }   /* K-17: akkora, mint a Tábla napfeje */
html body #app .sched-root .sched-av-late { flex: 0 0 auto; font-size: .6875rem; color: var(--sched-wait-ink); white-space: nowrap; }
html body #app .sched-root .sched-av-mode-ro { font-size: .75rem; color: var(--sched-ink-2); white-space: nowrap; }
html body #app .sched-root .sched-av-c { display: flex; align-items: center; justify-content: center; min-width: 0; }
html body #app .sched-root .sched-av { width: 100%; height: 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--sched-line); border-radius: .25rem;
  background: transparent; color: var(--sched-mut); font-size: .6875rem; cursor: pointer; }
html body #app .sched-root .sched-av.is-yes { border: 1px solid transparent; background: var(--sched-ok-soft); color: var(--sched-ok); font-weight: 600; }
html body #app .sched-root .sched-av.is-no { border: 1px solid transparent; background: var(--sched-dan-soft); color: var(--sched-dan); font-weight: 600; }
html body #app .sched-root .sched-av.is-err { box-shadow: 0 0 0 1.5px var(--sched-dan); }
html body #app .sched-root .sched-av.is-ro { cursor: default; }
html body #app .sched-root .sched-av:focus-visible { box-shadow: 0 0 0 2px var(--sched-acc); outline: 0; }
html body #app .sched-root .sched-av-one { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .375rem; margin-bottom: .375rem; }
html body #app .sched-root .sched-av-one .sched-av { height: 46px; flex-direction: column; gap: 2px; border-radius: .375rem; font-size: .875rem; }
html body #app .sched-root .sched-av-one .sched-av small { font-size: .6875rem; font-weight: 400; color: var(--sched-ink-3); white-space: nowrap; }
html body #app .sched-root .sched-panel-list .sched-av-said { margin-left: auto; font-size: .6875rem; color: var(--sched-ink-3); font-weight: 400; }
html body #app .sched-root .sched-panel-hidden { margin-top: .25rem; padding: .5rem .625rem; border-top: 1px solid var(--sched-line); font-size: .75rem; color: var(--sched-ink-3); }
/* M6: részleg-választás a felvételkor (több részlegnél kötelező) */
html body #app .sched-root .sched-select.is-error { border-color: var(--sched-wait-ink); }
html body #app .sched-root .sched-set-note.is-warn { color: var(--sched-wait-ink); }
/* Oktatófilmek (2026-10-13): a fejléc gombja és a lista */
html body #app .sched-root .sched-films-btn { white-space: nowrap; }
html body #app .sched-root .sched-films { width: min(40rem, 100%); }
html body #app .sched-root .sched-films-list { display: flex; flex-direction: column; border: 1px solid var(--sched-line); border-radius: .375rem; overflow: hidden; }
html body #app .sched-root .sched-film { display: flex; align-items: flex-start; gap: .75rem; width: 100%; padding: .5rem .75rem; border: 0; border-bottom: 1px solid var(--sched-line); background: var(--sched-surf); color: var(--sched-ink); text-align: left; font: inherit; cursor: pointer; }
html body #app .sched-root .sched-film:last-child { border-bottom: 0; }
html body #app .sched-root .sched-film:hover, html body #app .sched-root .sched-film:focus-visible { background: var(--sched-acc-soft); outline: none; }
html body #app .sched-root .sched-film:focus-visible { box-shadow: inset 0 0 0 2px var(--sched-acc); }
html body #app .sched-root .sched-film:disabled { cursor: progress; opacity: .7; }
html body #app .sched-root .sched-film-part { flex: 0 0 1.5rem; font-weight: 600; color: var(--sched-acc-ink); font-variant-numeric: tabular-nums; }
html body #app .sched-root .sched-film-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
html body #app .sched-root .sched-film-title { font-size: .875rem; font-weight: 600; }
html body #app .sched-root .sched-film-sum { font-size: .75rem; color: var(--sched-ink-3); }
html body #app .sched-root .sched-film-note { font-size: .6875rem; color: var(--sched-acc-ink); }
html body #app .sched-root .sched-film-len { flex: 0 0 auto; font-size: .75rem; color: var(--sched-ink-3); font-variant-numeric: tabular-nums; }

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