.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;
    width: 100%!important;
    border-collapse: collapse;
}
.emu-summary-table td {
    padding: 0 3px!important;
    height: 28px!important;
    line-height: 28px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    box-sizing: border-box!important;
}
.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;
}
.emu-summary-table td:not(:first-child) {
    width: 3.4rem!important;
    min-width: 3.4rem!important;
    max-width: 3.4rem!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;
}
/* Kérdőív adatok (custom-datas-editor) — Tervező-stílus szerint, 2026-10-16.
   Minden szabály a .kerdoiv-adatok alá szűkítve: a komponens stílusa globálisan
   töltődik be, ezért semmi nem szivároghat ki a keret többi felületére.
   A színek a globális skin (components 9999) változóira épülnek hex-tartalékkal,
   így a sötét mód (body.dark-mode) magától követ. */
.kerdoiv-adatok {
    --ka-ink-k:   var(--text-active, #09090b);
    --ka-ink:     var(--text-main, #18181b);
    --ka-ink-2:   #44444d;
    --ka-ink-3:   var(--text-muted, #71717a);
    --ka-ink-off: #a1a1aa;
    --ka-line:    var(--border-color, #e4e4e7);
    --ka-card:    var(--bg-card, #ffffff);
    --ka-head:    var(--table-header-bg, #fafafa);
    --ka-hover:   var(--table-row-hover, #fafafa);
    --ka-chip:    var(--bg-main, #f4f4f5);
    --ka-input:   var(--input-bg, #ffffff);
    --ka-gold:      var(--accent-color, #C49E6F);
    --ka-gold-ink:  #7d6136;
    --ka-gold-soft: var(--accent-glow, rgba(196, 158, 111, .15));
    --ka-ok:        #4b7b58;
    --ka-ok-ink:    #2f5c37;
    --ka-ok-soft:   #eef4ef;
    --ka-bad:       #c08a86;
    --ka-bad-ink:   #97302b;
    --ka-bad-soft:  #fbeeed;
    --ka-tmp:       #d9b45a;
    --ka-tmp-ink:   #8a6512;
    --ka-tmp-soft:  #fdf6e6;

    font-size: 13px;
    line-height: 1.5;
    color: var(--ka-ink);
    font-variant-numeric: tabular-nums;
}
body.dark-mode .kerdoiv-adatok {
    --ka-ink-2:     #d4d4d8;
    --ka-ink-off:   #71717a;
    --ka-gold-ink:  #e8d7bd;
    --ka-ok:        #6f9d7c;
    --ka-ok-ink:    #cfe3d4;
    --ka-ok-soft:   rgba(111, 157, 124, .14);
    --ka-bad:       #c98e89;
    --ka-bad-ink:   #f0cfcc;
    --ka-bad-soft:  rgba(201, 142, 137, .14);
    --ka-tmp-ink:   #f0dfae;
    --ka-tmp-soft:  rgba(217, 180, 90, .14);
}
.kerdoiv-adatok *, .kerdoiv-adatok *::before, .kerdoiv-adatok *::after { box-sizing: border-box; }
.kerdoiv-adatok :focus-visible { outline: 2px solid var(--ka-gold); outline-offset: 2px; }

/* --- eszközsáv --- */
/* Rács: széles képernyőn a három szűrő egy sorban, egyforma szélességgel;
   keskenyebben kettő, mobilon egymás alatt, teljes szélességben. */
.kerdoiv-adatok .ka-toolbar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 8px;
    max-width: 1100px; padding: 0 0 12px;
}
.kerdoiv-adatok .ka-field {
    position: relative; display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0; height: 34px; margin: 0; padding: 0 10px;
    border: 1px solid var(--ka-line); border-radius: 6px; background: var(--ka-input);
    color: var(--ka-ink-3); font-weight: 400;
}
.kerdoiv-adatok .ka-field:focus-within { border-color: var(--ka-gold); box-shadow: 0 0 0 3px var(--ka-gold-soft); }
.kerdoiv-adatok .ka-field input,
.kerdoiv-adatok .ka-field select,
.kerdoiv-adatok .ka-field .custom-select {
    flex: 1; min-width: 0; height: 30px; padding: 0; margin: 0;
    border: 0; outline: 0; box-shadow: none; background-color: transparent;
    font: inherit; font-size: 13px; color: var(--ka-ink);
}
.kerdoiv-adatok .ka-field input::placeholder { color: var(--ka-ink-off); }
.kerdoiv-adatok .ka-field .fa { font-size: 12px; color: var(--ka-ink-3); }
.kerdoiv-adatok .ka-field-select .custom-select { padding-right: 18px; background-position: right 0 center; cursor: pointer; }
.kerdoiv-adatok .ka-lbl {
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ka-ink-3); font-weight: 500; white-space: nowrap;
}

.kerdoiv-adatok .ka-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
    border: 1px solid var(--ka-line); border-radius: 6px; background: var(--ka-card);
    color: var(--ka-ink); font: inherit; font-size: 13px; cursor: pointer;
}
.kerdoiv-adatok .ka-btn:hover { border-color: var(--ka-ink-3); }
.kerdoiv-adatok .ka-btn-primary {
    border-color: var(--ka-gold); background: var(--ka-gold-soft); color: var(--ka-gold-ink); font-weight: 500;
}

/* --- táblázat --- */
.kerdoiv-adatok .ka-scroll {
    max-height: 640px; overflow: auto;
    border: 1px solid var(--ka-line); border-radius: 8px; background: var(--ka-card);
}
.kerdoiv-adatok .ka-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; line-height: 1.35; }
.kerdoiv-adatok .ka-table thead th {
    position: sticky; z-index: 2; background: var(--ka-head); text-align: left; vertical-align: bottom;
    padding: 0 12px; border-bottom: 1px solid var(--ka-line);
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; color: var(--ka-ink-3);
}
.kerdoiv-adatok .ka-table thead tr.ka-group th { top: 0; height: 30px; padding-top: 8px; border-bottom: 0; color: var(--ka-ink-2); }
.kerdoiv-adatok .ka-table thead tr.ka-cols th { top: 30px; height: 30px; }
.kerdoiv-adatok .ka-grp { display: block; padding-bottom: 5px; border-bottom: 1px solid var(--ka-line); }
.kerdoiv-adatok .ka-center { text-align: center; }
.kerdoiv-adatok .ka-num { text-align: right; }
.kerdoiv-adatok .ka-sort {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
}
.kerdoiv-adatok .ka-sort:hover { color: var(--ka-ink); }
.kerdoiv-adatok .ka-sort .fa { font-size: 10px; }

.kerdoiv-adatok .ka-table tbody td {
    padding: 8px 12px; vertical-align: top; background: var(--ka-card);
    border-bottom: 1px solid var(--ka-line);
}
.kerdoiv-adatok .ka-table tbody tr:last-child td { border-bottom: 0; }
.kerdoiv-adatok .ka-table tbody tr:hover td { background: var(--ka-hover); }
.kerdoiv-adatok .ka-table tbody tr.is-saved td { background: var(--ka-ok-soft); transition: background-color .4s; }
.kerdoiv-adatok .ka-name { padding-top: 6px; font-weight: 500; color: var(--ka-ink-k); }

/* --- számmező (a keret number komponense: input.form-control.number-field) --- */
.kerdoiv-adatok .ka-nfield {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
    width: 76px; height: 30px; margin: 0; padding: 0 8px;
    border: 1px solid var(--ka-line); border-radius: 6px; background: var(--ka-input); cursor: text;
}
.kerdoiv-adatok .ka-nfield:hover { border-color: var(--ka-ink-off); }
.kerdoiv-adatok .ka-nfield:focus-within { border-color: var(--ka-gold); box-shadow: 0 0 0 3px var(--ka-gold-soft); }
.kerdoiv-adatok .ka-nfield.empty { border-style: dashed; background: transparent; }
.kerdoiv-adatok .ka-nfield.err { border-style: solid; border-color: var(--ka-bad); background: var(--ka-bad-soft); }
.kerdoiv-adatok .ka-nfield .number-field {
    width: 100%; min-width: 0; height: 28px; padding: 0; margin: 0;
    border: 0; outline: 0; box-shadow: none; background: transparent;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--ka-ink); text-align: right;
}
.kerdoiv-adatok .ka-nfield .number-field::placeholder { color: var(--ka-ink-off); font-weight: 400; }
.kerdoiv-adatok .ka-nfield .number-field:disabled { color: var(--ka-ink-off); }
.kerdoiv-adatok .ka-unit { font-size: 11px; color: var(--ka-ink-3); }
.kerdoiv-adatok .ka-nerr { display: block; margin-top: 3px; font-size: 11px; color: var(--ka-bad-ink); }

/* --- címlista (a keret tags komponense: b-form-tags) --- */
.kerdoiv-adatok .ka-tags.b-form-tags {
    min-height: 30px; height: auto; padding: 3px; margin: 0;
    border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none;
    font-size: 13px;
}
.kerdoiv-adatok .ka-tags.b-form-tags:hover { border-color: var(--ka-line); }
.kerdoiv-adatok .ka-tags.b-form-tags.focus,
.kerdoiv-adatok .ka-tags.b-form-tags:focus-within {
    border-color: var(--ka-gold); box-shadow: 0 0 0 3px var(--ka-gold-soft); background: var(--ka-input);
}
.kerdoiv-adatok .ka-tags .b-form-tags-list { gap: 4px; margin: 0; }
.kerdoiv-adatok .ka-tags .b-form-tag {
    display: inline-flex; align-items: center; gap: 2px; height: 24px; max-width: 100%;
    margin: 0 !important; padding: 0 2px 0 8px;
    border: 1px solid var(--ka-line); border-radius: 6px; background: var(--ka-chip);
    color: var(--ka-ink); font-size: 13px; font-weight: 400; line-height: 22px;
}
.kerdoiv-adatok .ka-tags .b-form-tag-remove {
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0; padding: 0;
    border-radius: 4px; color: var(--ka-ink-3); opacity: 1; font-size: 15px; font-weight: 400; text-shadow: none;
}
.kerdoiv-adatok .ka-tags .b-form-tag-remove:hover { background: var(--ka-bad-soft); color: var(--ka-bad-ink); }
/* a BootstrapVue 2 ezt az osztályt elírva adja ki: b-from-tags-field */
.kerdoiv-adatok .ka-tags .b-from-tags-field,
.kerdoiv-adatok .ka-tags .b-form-tags-field { flex: 1 1 150px; min-width: 150px; margin: 0 !important; }
.kerdoiv-adatok .ka-tags .b-form-tags-input {
    height: 24px; padding: 0 8px !important;
    border: 1px dashed var(--ka-ink-off) !important; border-radius: 6px;
    font-size: 13px; color: var(--ka-ink);
}
.kerdoiv-adatok .ka-tags .b-form-tags-input::placeholder { color: var(--ka-ink-off); }
.kerdoiv-adatok .ka-tags .b-form-tags-input:focus { border-color: transparent !important; }
.kerdoiv-adatok .ka-tags .b-form-tags-button { display: none; }
.kerdoiv-adatok .ka-tags .invalid-feedback,
.kerdoiv-adatok .ka-tags .form-text { margin: 2px 4px 0; font-size: 11px; color: var(--ka-bad-ink); }

/* --- mentés állapota --- */
.kerdoiv-adatok .ka-state {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; margin-top: 4px; padding: 0 8px;
    border: 1px solid; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap;
}
.kerdoiv-adatok .ka-state.saving { border-color: var(--ka-tmp); background: var(--ka-tmp-soft); color: var(--ka-tmp-ink); }
.kerdoiv-adatok .ka-state.saved  { border-color: var(--ka-ok);  background: var(--ka-ok-soft);  color: var(--ka-ok-ink); }
.kerdoiv-adatok .ka-state.error  { border-color: var(--ka-bad); background: var(--ka-bad-soft); color: var(--ka-bad-ink); }

/* --- üres állapot, tipp --- */
.kerdoiv-adatok .ka-empty { padding: 40px 16px; text-align: center; }
.kerdoiv-adatok .ka-empty-title { margin: 0 0 4px; font-weight: 500; color: var(--ka-ink); }
.kerdoiv-adatok .ka-empty-sub { margin: 0 0 12px; color: var(--ka-ink-3); }
.kerdoiv-adatok .ka-tip { margin: 8px 2px 0; font-size: 11px; color: var(--ka-ink-3); }

/* --- a globális skin (components 9999) .form-control / .custom-select szabályai
   !important-tal adnak keretet, hátteret, paddingot és fókuszt. A mezőink keretét
   a csomagoló (.ka-field, .ka-nfield, .ka-tags) rajzolja, ezért a belső vezérlőn
   ezeket itt, a komponensre szűkítve kikapcsoljuk. --- */
.kerdoiv-adatok .ka-nfield .number-field,
.kerdoiv-adatok .ka-nfield .number-field:focus,
.kerdoiv-adatok .ka-field .custom-select,
.kerdoiv-adatok .ka-field .custom-select:focus {
    border: 0 !important; background-color: transparent !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 0 !important; color: var(--ka-ink) !important; transition: none !important;
}
.kerdoiv-adatok .ka-field .custom-select { padding-right: 18px !important; }
.kerdoiv-adatok .ka-field input { font-weight: 400; }
.kerdoiv-adatok .ka-tags.b-form-tags.form-control {
    border: 1px solid transparent !important; background-color: transparent !important;
    padding: 3px !important; color: var(--ka-ink) !important; box-shadow: none !important;
}
.kerdoiv-adatok .ka-tags.b-form-tags.form-control:hover { border-color: var(--ka-line) !important; }
.kerdoiv-adatok .ka-tags .b-form-tag.badge {
    background-color: var(--ka-chip) !important; color: var(--ka-ink) !important;
    border: 1px solid var(--ka-line) !important;
}
.kerdoiv-adatok .ka-tags.b-form-tags.form-control.focus,
.kerdoiv-adatok .ka-tags.b-form-tags.form-control:focus-within {
    border-color: var(--ka-gold) !important; background-color: var(--ka-input) !important;
    box-shadow: 0 0 0 3px var(--ka-gold-soft) !important;
}

.kerdoiv-adatok .ka-field input,
.kerdoiv-adatok .ka-field .custom-select { font-size: 13px !important; height: 32px !important; }

@media (max-width: 900px) {
    .kerdoiv-adatok .ka-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kerdoiv-adatok .ka-field-select { grid-column: 1 / -1; }
}
/* mobilcímke: asztali nézetben a fejléc mondja meg, mi az oszlop */
.kerdoiv-adatok .ka-mlbl { display: none; }

/* --- tablet és telefon: minden kérdőív egy kártya, vízszintes görgetés nélkül ---
   1. sor: név + mentés állapota; 2. sor: a két nap és a létszám egymás mellett;
   alatta a két címlista teljes szélességben, saját címkével. */
@media (max-width: 768px) {
    .kerdoiv-adatok .ka-scroll { max-height: none; overflow: visible; border: 0; background: transparent; }
    .kerdoiv-adatok .ka-table,
    .kerdoiv-adatok .ka-table tbody { display: block; width: 100%; min-width: 0; }
    .kerdoiv-adatok .ka-table colgroup,
    .kerdoiv-adatok .ka-table thead { display: none; }
    .kerdoiv-adatok .ka-table tbody tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 10px;
        margin: 0 0 10px; padding: 12px;
        border: 1px solid var(--ka-line); border-radius: 8px; background: var(--ka-card);
    }
    .kerdoiv-adatok .ka-table tbody td { display: block; padding: 0; border: 0; background: transparent; min-width: 0; }
    .kerdoiv-adatok .ka-table tbody tr:hover td { background: transparent; }
    .kerdoiv-adatok .ka-table tbody tr.is-saved { background: var(--ka-ok-soft); border-color: var(--ka-ok); }
    .kerdoiv-adatok .ka-table tbody tr.is-saved td { background: transparent; }

    .kerdoiv-adatok .ka-c-name { grid-column: 1 / 3; grid-row: 1; align-self: center; }
    .kerdoiv-adatok .ka-name { padding: 0; font-size: 15px; font-weight: 600; }
    .kerdoiv-adatok .ka-c-state { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
    .kerdoiv-adatok .ka-c-state .ka-state { margin: 0; }
    .kerdoiv-adatok .ka-c-num { text-align: left; display: flex !important; flex-direction: column; justify-content: flex-end; }
    .kerdoiv-adatok .ka-c-tags { grid-column: 1 / -1; }

    .kerdoiv-adatok .ka-mlbl {
        display: block; margin: 0 0 4px; font-size: 12px; line-height: 1.25;
        font-weight: 500; color: var(--ka-ink-3);
    }
    .kerdoiv-adatok .ka-nfield { width: 100%; height: 40px; }
    .kerdoiv-adatok .ka-nerr { text-align: left; }

    .kerdoiv-adatok .ka-tags.b-form-tags.form-control { border-color: var(--ka-line) !important; background-color: var(--ka-input) !important; padding: 4px !important; }
    .kerdoiv-adatok .ka-tags .b-form-tag { height: 32px; font-size: 14px; max-width: 100%; }
    .kerdoiv-adatok .ka-tags .b-form-tag-content { overflow: hidden; text-overflow: ellipsis; }
    .kerdoiv-adatok .ka-tags .b-form-tag-remove { width: 28px; height: 28px; font-size: 18px; }
    .kerdoiv-adatok .ka-tags .b-from-tags-field,
    .kerdoiv-adatok .ka-tags .b-form-tags-field { flex-basis: 100%; min-width: 0; }
    .kerdoiv-adatok .ka-tags .b-form-tags-input { height: 32px; }
    .kerdoiv-adatok .ka-tip { display: none; }
}

/* tableten a két címlista egymás mellett fér el */
@media (min-width: 601px) and (max-width: 768px) {
    .kerdoiv-adatok .ka-table tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .kerdoiv-adatok .ka-c-name { grid-column: 1 / 5; }
    .kerdoiv-adatok .ka-c-state { grid-column: 5 / 7; }
    .kerdoiv-adatok .ka-c-num { grid-column: span 2; }
    .kerdoiv-adatok .ka-c-tags { grid-column: span 3; }
}

@media (max-width: 600px) {
    .kerdoiv-adatok .ka-nfield .number-field,
    .kerdoiv-adatok .ka-tags .b-form-tags-input { font-size: 16px !important; }
    .kerdoiv-adatok .ka-toolbar { grid-template-columns: minmax(0, 1fr); }
    .kerdoiv-adatok .ka-field { height: 40px; }
    .kerdoiv-adatok .ka-field input,
    .kerdoiv-adatok .ka-field .custom-select { font-size: 16px !important; height: 38px !important; }
    .kerdoiv-adatok .ka-btn { justify-content: center; height: 40px; }
}

.subunit-editor .subunit-create-panel { max-width: 920px; }
.subunit-editor .subunit-create-panel label { font-weight: 600; }
.subunit-editor .subunit-create-panel .close { font-size: 1.5rem; }

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



.docs-operator input.toright {
    text-align:right;
}
.subunit-editor .subunit-create-panel { max-width: 920px; }
.subunit-editor .subunit-create-panel label { font-weight: 600; }
.subunit-editor .subunit-create-panel .close { font-size: 1.5rem; }



.efo-editor .efo-editor-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.efo-editor .efo-editor-scroll .table-editor { min-width: 900px; }
.efo-editor tr.efo-row-target td { box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, .35); }

/* A komponens gyokere FLEX-GYEREK az app-hejban (#app = "wrapper d-flex h-100").
   A flex-item alapertelmezett `min-width: auto` miatt NEM tud a tartalma ala zsugorodni,
   ezert az oldal vizszintesen tullogott (merve: 1325px egy 796px-es ablakban), es a jobbra
   igazitott vezerlok kicsusztak a kepernyorol. Ez a ket sor a javitas. */
/* 09-allapotfelmeres 2. -- A ZSUGORODAS-JAVITAS A GYOKERRE KELL.
   Az "#app" `d-flex`, tehat a route-komponens gyokere FLEX-GYEREK, es a
   `min-width: auto` miatt nem tud zsugorodni -> a tartalom kifele nyomja a
   jobbra igazitott vezerloket. Ez a hiba a projekt legelejen egyszer mar
   megvolt (1325 px egy 796 px-es ablakban), es 2026-09-06-an VISSZATERT,
   amikor a keret-hej miatt a gyoker egy szinttel feljebb kerult: a javitas
   a `.tervezo-root`-on ult, a valodi flex-gyerek viszont a dinamikus,
   osztaly nelkuli <div> lett -> 1773 px egy 883 px-es ablakban.
   A regressziot a D6 proba fogta meg. Ezert az osztaly MOSTANTOL a GYOKEREN van. */
.tervezo-shell { min-width: 0; max-width: 100%; width: 100%; }
/* A betumeret LEHORGONYOZVA: a 9999-es skin `body #app { font-size: 112% }`-ot ir,
   ami a suru listat is felnagyitana. A Tervezo px-ben dolgozik, es innentol a
   sajat 13 px-es alapjarol -- ez a csomag szandeka (31-design-atadas.md 2. lepes). */
.tervezo-root { padding: 12px; min-width: 0; max-width: 100%;
                font-size: var(--tervezo-fs-ui); }

/* A fokusz MINDIG lathato es arany -- a bongeszo kekje sehol. A komponensre
   szukitve, hogy a keret tobbi felulete valtozatlan maradjon. */
.tervezo-root :focus-visible {
    outline: 2px solid var(--tervezo-nezd);
    outline-offset: 2px;
}

/* ==========================================================================
   TOKEN-RETEG -- C-vodor 1. lepes (2026-09-14), terv: redesign/31-design-atadas.md
   A semleges ertekek a keret 9999-es skinjebol jonnek `var(--skin-nev, tartalek)`
   alakban. MERVE: a skin `body.dark-mode` blokkja mind a hetet atirja, amit itt
   hasznalunk (bg-main, bg-card, border-color, table-header-bg, text-active,
   card-shadow, accent-glow), ezert a semlegesek sotet modban maguktol kovetnek.
   A hex tartalek akkor lep be, ha a skin nincs betoltve.

   IDE SOHA NE KERULJON a hat MERT valtozo deklaracioja:
     --tervezo-keret-h / --tervezo-bar-h / --tervezo-sav-h / --tervezo-edit-h
     (es az auditnal --audit-keret-h / --audit-bar-h)
   Azokat a JS a $el-re, azaz a .tervezo-shell-re irja (component.js:3142-3167),
   es a .tervezo-root annak a GYEREKE -- egy itteni deklaracio learnyekolna az
   orokolt, mert erteket. Elesben 2026-09-07-en pontosan ez tortent az auditnal. */
.tervezo-root {
    /* semleges skala */
    --tervezo-ink-kiemelt: var(--text-active, #09090b);
    --tervezo-ink:         var(--text-main, #18181b);
    --tervezo-ink-masod:   #44444d;
    --tervezo-ink-halvany: var(--text-muted, #71717a);
    --tervezo-ink-inaktiv: #a1a1aa;
    --tervezo-keret:       var(--border-color, #e4e4e7);
    --tervezo-lap:         var(--bg-main, #f4f4f5);
    --tervezo-sav:         var(--table-header-bg, #fafafa);
    --tervezo-felulet:     var(--bg-card, #ffffff);
    --tervezo-arnyek:      var(--card-shadow, 0 4px 20px rgba(24, 24, 27, .05));

    /* ot jelentes-szin: keret / tinta / halvany kitoltes */
    --tervezo-nezd:             var(--accent-color, #c49e6f);
    --tervezo-nezd-ink:         #7d6136;
    --tervezo-nezd-halvany:     var(--accent-glow, rgba(196, 158, 111, .12));
    --tervezo-nezd-eros:        rgba(196, 158, 111, .22);
    /* A KITOLTOTT arany felirata. SZANDEKOSAN fix, nem var(--text-active): az
       sotet modban #fafafa-ra fordulna, es a vilagos arany (#BDA588) FELETT
       2,2:1-re esne. Igy vilagosban 8,7:1, sotetben 8,4:1. NE tedd tokenne,
       ami a semleges skalaval egyutt fordul. */
    --tervezo-nezd-kontraszt:   #09090b;
    --tervezo-ok:               #4b7b58;
    --tervezo-ok-ink:           #2f5c37;
    --tervezo-ok-halvany:       #eef4ef;
    --tervezo-teendo:           #c08a86;
    --tervezo-teendo-ink:       #97302b;
    --tervezo-teendo-halvany:   #fbeeed;
    --tervezo-atmeneti:         #d9b45a;
    --tervezo-atmeneti-ink:     #8a6512;
    --tervezo-atmeneti-halvany: #fdf6e6;

    /* forma: harom lekerekites, negy terkoz */
    --tervezo-r-kis:    6px;
    --tervezo-r-kartya: 8px;
    --tervezo-gap-1:  4px;
    --tervezo-gap-2:  8px;
    --tervezo-gap-3: 12px;
    --tervezo-gap-4: 20px;

    /* negy betumeret */
    --tervezo-fs-jel:    11px;
    --tervezo-fs-ui:     13px;
    --tervezo-fs-szoveg: 15px;   /* USER-DONTES 2026-09-27. Elozmeny: 2026-09-15-en 17 px lett,
                                    "egy fokon a fejlec-cimmel, a szerepet a VASTAGSAG valasztja
                                    el". A 48-as lap az AI-valaszra 15 px-et kert; a user ugy
                                    dontott, hogy ne uj, otodik fok szulessen, hanem a FOLYO
                                    SZOVEG alljon at 15 px-re -- az egesz Tervezoben. A skala
                                    igy tovabbra is NEGY fok: 11 / 13 / 15 / 17. A fejlec-cim
                                    (--tervezo-fs-cim) marad 17 px, tehat a szekcio-nev mostantol
                                    egy fokkal a kerdes es a valasz FOLOTT all. */
    --tervezo-fs-cim:    17px;
}

/* Sotet mod: a semlegeseket a skin mar atforditotta (ugyanazok a valtozonevek),
   es a --tervezo-nezd is koveti, mert az --accent-color sotetben #BDA588 lesz.
   Itt csak az a negy jelentes-szin kell, aminek nincs skin-parja. */
body.dark-mode .tervezo-root {
    --tervezo-ink-masod:   #d4d4d8;
    --tervezo-ink-inaktiv: #71717a;

    --tervezo-nezd-ink:         #e8d7bd;
    --tervezo-nezd-eros:        rgba(189, 165, 136, .24);
    --tervezo-ok:               #6f9d7c;
    --tervezo-ok-ink:           #cfe3d4;
    --tervezo-ok-halvany:       rgba(111, 157, 124, .14);
    --tervezo-teendo:           #c98e89;
    --tervezo-teendo-ink:       #f0cfcc;
    --tervezo-teendo-halvany:   rgba(201, 142, 137, .14);
    --tervezo-atmeneti:         #d9b45a;
    --tervezo-atmeneti-ink:     #f0dfae;
    --tervezo-atmeneti-halvany: rgba(217, 180, 90, .14);
}

.tervezo-muted { color: var(--tervezo-ink-halvany); }
.tervezo-small { font-size: var(--tervezo-fs-ui); }
.tervezo-error { color: var(--tervezo-teendo-ink); }
.tervezo-denied { max-width: 520px; padding: 24px 0; }
.tervezo-diag { max-width: 720px; padding: 16px; background: var(--tervezo-atmeneti-halvany);
                border: 1px solid var(--tervezo-atmeneti); border-radius: var(--tervezo-r-kis); }

/* Egy kompakt sticky sor a mai negy sav helyett (1.3) */
.tervezo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
               position: sticky; top: var(--tervezo-keret-h, 0px); z-index: 5; background: var(--tervezo-felulet);
               border-bottom: 1px solid var(--tervezo-keret); padding: 8px 0; margin-bottom: 12px; }
.tervezo-title { font-weight: 600; }
/* A rovid valtozatok alapbol rejtve; a 700 px-es toresponton csereluk oket
   (a .tervezo-lbl mar ott is elrejtodik -- lasd a media-blokkot). */
.tervezo-kis-lbl { display: none; }
.tervezo-spacer { flex: 1 1 auto; }

.tervezo-chip { display: inline-block; padding: 2px 8px; border-radius: var(--tervezo-r-kis);
                background: var(--tervezo-lap); color: var(--tervezo-ink); font-size: var(--tervezo-fs-ui); white-space: nowrap; }
.tervezo-chip-sm { font-size: var(--tervezo-fs-jel); padding: 1px 6px; }
.tervezo-chip-plan { background: var(--tervezo-ok-halvany); color: var(--tervezo-ok-ink); font-weight: 600; }

/* Adaptiv vaz: rail csak nagy kerdoivnel */
.tervezo-body { display: block; }
.tervezo-with-nav { display: flex; align-items: flex-start; gap: 20px; }
/* 8. A PANEL 220 -> 330 px (33-as lista, 2026-09-14). MERVE, mielott hozzanyultam:
     950 px nezeten  220 px panel -> kerdes-oszlop 643 px, a 3 szakasznevbol 2 LEVAGVA
     950 px nezeten  330 px panel -> kerdes-oszlop 533 px, LEVAGVA: EGY SEM
   Az ar latszolag 110 px a kerdes-oszlopbol -- de a bekezdes sorhossza `62ch`-nal
   amugy is el van vagva: MERVE mindket esetben 501 px (`min(100%, 501px)`).
   Vagyis az olvasastol NEM vesz el semmit, a nevek viszont kiolvashatova valnak.
   ⚠️ 900 px ALATT ez nem szamit: ott a panel vizszintes csikka alakul (lasd a
   lentebbi media-blokkot), es a teljes szelesseget megkapja -- merve 883 px-en
   852 px. A csapat 883 px-es laptopja tehat a toresponton KIVUL esik. */
/* 2026-09-15, user-visszajelzes ("az egesz szakaszvalaszto tul szeles, pazarlo"): 330 -> 260 px.
   A nev nem vagodik le egy sorra, hanem LEGFELJEBB KET SORBA tordel (lent, a 901 px feletti blokk):
   a leghosszabb elo szakasznev 13 px-en MERVE 368 px, ez ket sorba befer. */
.tervezo-nav { flex: 0 0 260px; position: sticky; top: 56px; max-height: calc(100vh - 80px);
               overflow-y: auto; border-right: 1px solid var(--tervezo-keret); padding-right: 12px; }
.tervezo-nav-item { display: flex; gap: 6px; padding: 4px 0; color: var(--tervezo-ink);
                    text-decoration: none; font-size: var(--tervezo-fs-ui); }
.tervezo-nav-item:hover { color: var(--tervezo-nezd); }
/* A szekcio-lista kapcsoloja: nyitva teljes szelessegu fejlec-gomb, csukva egy
   keskeny, ragados csik a navigator helyen (a tartalom megkapja a felszabadult
   220 px-et). A felirat MINDKET allapotban megmondja, mi tortenik. */
.tervezo-nav-valt { background: var(--tervezo-felulet); border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kartya);
                    padding: 2px 8px; font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-masod); cursor: pointer;
                    text-align: left; }
.tervezo-nav-valt:hover { border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-ink); }
.tervezo-nav > .tervezo-nav-valt { display: block; width: 100%; margin-bottom: 6px; }
/* Csukva KESKENY csik: a felirat csak az ikon + a szekciok SZAMA (a teljes szoveg a
   tooltipben) -- kulonben a "becsukott" oldalsav is ~150 px-et vitt el a 883 px-bol
   (user-visszajelzes #33). A res is szukebb ilyenkor. */
.tervezo-nav-zart { flex: 0 0 auto; align-self: flex-start; position: sticky; top: 56px;
                    white-space: nowrap; padding: 2px 5px; text-align: center; }
.tervezo-nav-zart .tervezo-nav-zart-lbl { margin-left: 3px; font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink-halvany); }
.tervezo-nav-csukva { gap: 8px; }
/* Pontozo mod: haladas + szazalek a navigatorban. A cimke amugy is levagodik
   (220 px), ezert a jeloles JOBBRA kerul es nem tordel. */
.tervezo-nav-pont { margin-left: auto; font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
                    white-space: nowrap; flex: 0 0 auto; }
.tervezo-nav-pont-kesz { color: var(--tervezo-ok-ink); font-weight: 600; }
.tervezo-nav-roman { color: var(--tervezo-ink-halvany); flex: 0 0 auto; }
.tervezo-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tervezo-content { flex: 1 1 auto; min-width: 0; }

.tervezo-section { margin-bottom: 28px; }
.tervezo-section-head { border-bottom: 1px solid var(--tervezo-keret); padding-bottom: 6px; margin-bottom: 12px; }

/* A KERDES KARTYA (latvany-cel 3a + 32-tervezo-stilus .t-kartya, 2026-09-14).
   MERVE a valtoztatas elott: a tetel hattere ATLATSZO volt, keret/lekerekites/arnyek
   nelkul -- a tartalom kozvetlenul a szurke lapon ult, hajszalvonallal elvalasztva.
   A stiluslap feher kartyat ir elo (#ffffff, 1px keret, 8px, egy arnyek) a
   #f4f4f5-os lapon. A BAL keret vastagabb: az viszi az allapot-savot. */
.tervezo-item {
    background: var(--tervezo-felulet);
    border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kartya);
    box-shadow: var(--tervezo-arnyek);
    padding: 12px 16px;
    margin: 0 0 var(--tervezo-gap-2);
}
/* A KERDES es a VALASZ az OLVASOTT szoveg: 15px, nyugodt sorkoz. Eddig egyik sem
   kapott sajat meretet, tehat a kerettol orokolt -- a 9999-es skin `body #app`
   112%-a igy 16 -> 17,9 px-re nagyitotta oket. A `62ch` sorhosszt 2026-09-10-en
   16 px mellett mertek, tehat a skin azt a merest mar elvitte; a leghorgonyzas
   visszahozza a mert allapot koze. */
.tervezo-item-q { font-weight: 500; margin-bottom: 4px;
                  font-size: var(--tervezo-fs-szoveg); line-height: 1.65; }
/* ── P-54 GTD-feladatok panelje ────────────────────────────────────────────
   Vekony funkcio (merve: 21 tetel az egesz tenantban), ezert NEM kap uj
   szin-nyelvet: a meglevo chip-skalan all, es a leiras a megjegyzesek
   megjeleniteset koveti. */
.tervezo-task { padding: 6px 0; border-bottom: 1px solid var(--tervezo-lap); }
.tervezo-task:last-child { border-bottom: 0; }
.tervezo-task-fej { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tervezo-task-leiras { margin-top: 2px; white-space: pre-wrap; }
.tervezo-task-kesz { background: var(--tervezo-ok-halvany); border: 1px solid var(--tervezo-ok); color: var(--tervezo-ok-ink); }
.tervezo-task-lejart { background: var(--tervezo-teendo-halvany); border: 1px solid var(--tervezo-teendo); color: var(--tervezo-teendo-ink); }
.tervezo-task-muvelet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tervezo-task-uj { margin-top: 8px; }
.tervezo-task-form { margin-top: 10px; padding: 8px; border: 1px solid var(--tervezo-nezd); border-radius: var(--tervezo-r-kis);
                     background: var(--tervezo-nezd-halvany); }
.tervezo-task-form-fej { display: flex; align-items: center; justify-content: space-between;
                         gap: 8px; margin-bottom: 6px; }
/* Kerdes-kikapcsolas a kerdes elott (pontozo mod). Halvany alapbol -- 116 soron
   nem lehet hangsulyos -, de kikapcsolt allapotban PIROS, mert az allapot
   erdemi: a kikapcsolt kerdes a pontszamba sem szamit bele. */
.tervezo-ki-btn { border: 0; background: none; padding: 0 6px 0 0; color: var(--tervezo-ink-inaktiv);
                  cursor: pointer; font-size: var(--tervezo-fs-ui); line-height: 1; }
.tervezo-ki-btn:hover { color: var(--tervezo-nezd); }
.tervezo-ki-btn-off { color: var(--tervezo-teendo); }
/* A valasz-szoveg merete NAGYITHATO a savbol (user-keres 2026-09-25). A szorzot a
   komponens gyokere adja (`--tervezo-valasz-nagyitas`); ha nincs, az alapmeret marad.
   UGYANEZ a szorzo hat a szerkesztore is -- lasd a .ql-editor szabalyt lentebb. */
.tervezo-item-a { margin-bottom: 4px;
                  font-size: calc(var(--tervezo-fs-szoveg) * var(--tervezo-valasz-nagyitas, 1));
                  line-height: 1.65; }
.tervezo-item-a img { max-width: 100%; }

/* ── 3.4: OLVASHATO SOR-HOSSZ (mérve 2026-09-10, F61) ───────────────────────
   A valasz-szoveg a 883 px-es munkakornyezetben 851 px szelesen futott, ami
   14 px-es betunel MERVE 126 karakter/sor -- a tipografiai optimum 60-80. Ilyen
   hosszu sorokon a szem nehezen talal vissza a kovetkezo sor elejere, es ez a
   "kusza / nehezen olvashato" panasz (00-domain-context 4.A) merheto fele.
   Merve az is, hogy MENNYIT kell olvasni: 2026-ban atlag 1102 karakter/tetel,
   a tetelek 18%-a 1500 karakter felett.

   A szukites a SZOVEG-elemekre szol, NEM a dobozra: a KEPEK es TABLAZATOK
   teljes szelessegben maradnak, mert azokat a szukites rontana (a beagyazott
   kep mar most 49%-ra kicsinyitve latszik -- lasd a 3.4 masodik teteleet).
   A `ch` egyseg a betumerettel skalazodik, a `min()` pedig kis kepernyon a
   100%-ot valasztja, tehat 375 px-en semmi nem valtozik. */
.tervezo-item-a > p,
.tervezo-item-a > ul,
.tervezo-item-a > ol,
.tervezo-item-a > h1, .tervezo-item-a > h2, .tervezo-item-a > h3,
.tervezo-item-a > h4, .tervezo-item-a > h5, .tervezo-item-a > h6,
.tervezo-item-a > blockquote {
    max-width: min(100%, 62ch);
}
/* MERVE 2026-09-10, KOZVETLENUL A BEALLITAS UTAN: a kep is 851 -> 431 px-re esett,
   mert a Word-bol jott kepek `<p><img></p>` alakban ulnek, es a bekezdes szukitese
   igy a KEPRE is hatott. A kepet a szukites RONTJA (a natur 1749 px mar igy is
   49%-ra kicsinyitve latszott), ezert a kepet/tablazatot tartalmazo bekezdes
   TELJES szelessegu marad. A `:has()` a Chrome 105+ tudja; ha egy bongeszo megsem,
   a degradacio a szukebb kep -- a szoveg olvashatosaga akkor is megmarad. */
.tervezo-item-a > p:has(img),
.tervezo-item-a > p:has(table),
.tervezo-item-a > p:has(iframe),
.tervezo-item-a > table,
.tervezo-char .ql-editor > p:has(img) {
    max-width: 100%;
}
/* Szerkesztes kozben UGYANEZ: amit olvasva jol tordel, azt irva is. */
.tervezo-char .ql-editor > p,
.tervezo-char .ql-editor > ul,
.tervezo-char .ql-editor > ol,
.tervezo-char .ql-editor > blockquote {
    max-width: min(100%, 62ch);
}
/* 19. A cimkesort ELVALASZTO VONAL zarja el a valasztol (latvany-cel 3a):
   a kartyan belul ket kulonbozo dolog all egymas alatt -- a TARTALOM es a ROLA
   SZOLO allitasok. A vonal ezt a hatart mondja ki. */
.tervezo-item-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
                     border-top: 1px solid var(--tervezo-lap);
                     margin-top: var(--tervezo-gap-3); padding-top: var(--tervezo-gap-2); }

/* Kis monitor: a rail osszecsukodik (1.3 - a felhasznalok kis kepernyon dolgoznak) */
/* 2026-09-15, user-dontes ("kicsi kepernyon inkabb ne is legyen"): 900 px alatt NINCS szakaszvalaszto.
   MERVE elotte (5044, 9 szakasz): 90 px magas vizszintes csik, NEM ragados (gorgetes utan eltunik),
   oldalra gorgetendo (375 px-en 734 px tartalom 351 px-en), a nevek nem latszanak (883 px-en "Ce..."),
   es az elso kerdest 357 px-re nyomta. A csukott allapot gombja (.tervezo-nav-zart) is rejtett. */
@media (max-width: 900px) {
    .tervezo-with-nav { display: block; }
    .tervezo-nav, .tervezo-nav-zart { display: none; }
}

/* ── Mentés-állapot (2.2 / R3) ─────────────────────────────────────────── */
.tervezo-save { display: inline-flex; align-items: center; gap: 6px;
                font-size: var(--tervezo-fs-ui); white-space: nowrap; }
.tervezo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tervezo-ink-inaktiv); flex: 0 0 auto; }
.tervezo-save-saved  { color: var(--tervezo-ok-ink); } .tervezo-save-saved  .tervezo-dot { background: var(--tervezo-ok); }
.tervezo-save-dirty  { color: var(--tervezo-atmeneti-ink); } .tervezo-save-dirty  .tervezo-dot { background: var(--tervezo-atmeneti); }
.tervezo-save-saving { color: var(--tervezo-nezd-ink); } .tervezo-save-saving .tervezo-dot { background: var(--tervezo-nezd);
                       animation: tervezo-pulse 1s infinite; }
.tervezo-save-error  { color: var(--tervezo-teendo-ink); } .tervezo-save-error  .tervezo-dot { background: var(--tervezo-teendo); }
@keyframes tervezo-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.tervezo-retry { padding: 1px 8px; font-size: var(--tervezo-fs-jel); }
/* TENY-CHIP. A lila par (#e9d8fd / #4c1d95) az ot jelentes egyikebe sem
   sorolhato volt, a szabaly szerint tehat nem jelentest hordoz -> semleges. */
.tervezo-chip-lock { background: var(--tervezo-lap); border: 1px solid var(--tervezo-keret);
                     color: var(--tervezo-ink-masod); cursor: default; }

.tervezo-notice,
/* A segedanyag-panel ures-uzenete UGYANUGY nez ki, de SAJAT osztalya van -- lasd a
   sablon kommentjet: kulonben elvinne a munkalista ures-szuro probajanak (R6)
   szelektorat. */
.tervezo-docs-notice { background: var(--tervezo-nezd-halvany); border: 1px solid var(--tervezo-nezd); color: var(--tervezo-nezd-ink);
                  border-radius: var(--tervezo-r-kis); padding: 8px 12px; margin-bottom: 12px; }

/* ── TIPUS-KAPU (2026-09-09) ───────────────────────────────────────────────
   A pontozos (nem-char) iv figyelmeztetese. SARGA, nem kek: ez nem tajekoztatas,
   hanem KORLATOZAS -- a felulet itt kevesebbet tud, mint amit a felhasznalo var.
   Sajat osztaly (nem tervezo-notice): a megosztott osztalynev 2026-09-08-an ket
   idegen probat buktatott meg helyes termek mellett. */
.tervezo-tipuskapu { background: var(--tervezo-atmeneti-halvany); border: 1px solid var(--tervezo-atmeneti); color: var(--tervezo-atmeneti-ink);
                     border-radius: var(--tervezo-r-kis); padding: 8px 12px; margin-bottom: 12px; }
.tervezo-tipuskapu .tervezo-small { margin-top: 4px; }
/* A pontszam olvashato alakja: elteres a szerkesztheto teruletektol, hogy ne
   tunjon kattinthatonak. */
.tervezo-pont-ro { color: var(--tervezo-ink-masod); background: var(--tervezo-sav); border: 1px solid var(--tervezo-keret);
                   border-radius: var(--tervezo-r-kis); padding: 4px 8px; display: inline-block; }

/* -- 3.3 PONTOZO MOD (range) -------------------------------------------
   Terv: redesign/21-pontozo-kitolto-spec.md
   A meret a 883x552 CSS px-es munkakornyezetre van szabva (a user gepe): ot gomb
   + az elozo evi jeloles egy sorban elfer, a hosszu kerdes (atlag 147 karakter)
   pedig folotte, sajat soraiban tordel. */
.tervezo-pont { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tervezo-pontsor { display: inline-flex; gap: 4px; padding: 2px; border-radius: var(--tervezo-r-kartya);
                   border: 1px solid transparent; }
/* A billentyuzetes pontozas (1-5) EGY tetelre hat -> LATSZANIA kell, melyikre. */
.tervezo-pont-fokusz { border-color: var(--tervezo-nezd); background: var(--tervezo-nezd-halvany);
                       box-shadow: 0 0 0 2px var(--tervezo-nezd-halvany); }
.tervezo-pontbtn { min-width: 38px; height: 30px; padding: 0 6px; cursor: pointer;
                   background: var(--tervezo-felulet); border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                   color: var(--tervezo-ink); font-size: var(--tervezo-fs-ui); line-height: 28px; }
.tervezo-pontbtn:hover:not([disabled]) { border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-ink);
                                         background: var(--tervezo-nezd-halvany); }
.tervezo-pontbtn-on { background: var(--tervezo-nezd); border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-kontraszt);
                      font-weight: 600; }
.tervezo-pontbtn-on:hover:not([disabled]) { background: var(--tervezo-nezd-ink); border-color: var(--tervezo-nezd-ink);
                                            color: var(--tervezo-felulet); }
/* Elozo szezon pontja: jelzes-erteku, nem vezerlo -> szaggatott, halvany. */
.tervezo-elozoev { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany); background: var(--tervezo-sav);
                   border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); padding: 1px 8px;
                   white-space: nowrap; }
/* Pontozasi haladas a ragados savban -- ugyanaz a nyelv, mint az atolvasas-jelzo. */
.tervezo-pont-haladas { font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink-masod); background: var(--tervezo-lap);
                        border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kartya);
                        padding: 2px 10px; white-space: nowrap; }
.tervezo-pont-teljes { color: var(--tervezo-ok-ink); background: var(--tervezo-ok-halvany); border-color: var(--tervezo-ok); }

/* ── Inline szerkesztés (1.3/b: nincs mód-kapcsoló) ────────────────────── */
.tervezo-editable { border: 1px solid transparent; border-radius: var(--tervezo-r-kis);
                    padding: 6px 8px; margin: -6px -8px 4px -8px;
                    transition: border-color .12s, background-color .12s; min-height: 1.6em; }
.tervezo-editable:hover:not(.tervezo-ro) { border-color: var(--tervezo-keret); }
.tervezo-editable:focus { outline: none; border-color: var(--tervezo-nezd); background: var(--tervezo-felulet);
                          box-shadow: 0 0 0 3px var(--tervezo-nezd-halvany); }
.tervezo-editable.tervezo-ro { padding: 0; margin: 0 0 4px 0; }
.tervezo-editable p:last-child { margin-bottom: 0; }
.tervezo-num { width: 110px; padding: 4px 8px; border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); }

/* Tétel mentés-állapot jelzése (diszkrét, bal szélen) */
/* A bal keret VASTAGABB -- ez a sav helye. Statusz nelkul a SEMLEGES keret-szint
   viseli, kulonben a kartya bal oldala kiszakadna. */
.tervezo-item { border-left-width: 3px; border-left-color: var(--tervezo-keret); }

/* A BAL SAV AZ ATNEZESI ALLAPOTOT is viszi (latvany-cel 3a, 2026-09-14).
   Eddig a sav KIZAROLAG a mentes-allapotot mutatta (dirty/saving/error), tehat a
   tetelek tulnyomo reszen LATHATATLAN volt: a lista lapos maradt, hajszalvonalakkal.
   A latvany-cel minden kerdesnel mutat savot, es az a STATUSZ szine.
   A szin ugyanabbol a leképezésből jon, mint a statusz-chip (`statusClass`), tehat
   a sav es a chip nem tud ellentmondani egymasnak.
   ⚠️ A MENTES-ALLAPOT FELULIRJA: az atmeneti es surgos, ez pedig tartos. Ezert
   allnak a `.tervezo-is-*` szabalyok EZEK UTAN -- azonos specifikussagnal a
   kesobbi nyer, tehat a sorrend itt SZERZODES, ne cserelodjon meg. */
.tervezo-rail-mod  { border-left-color: var(--tervezo-teendo); }
.tervezo-rail-kesz { border-left-color: var(--tervezo-nezd); }
.tervezo-rail-ok   { border-left-color: var(--tervezo-ok); }

.tervezo-is-dirty  { border-left-color: var(--tervezo-atmeneti); }
.tervezo-is-saving { border-left-color: var(--tervezo-nezd); }
.tervezo-is-error  { border-left-color: var(--tervezo-teendo); background: var(--tervezo-teendo-halvany); }
.tervezo-item-state { color: var(--tervezo-ink-halvany); }
.tervezo-is-error .tervezo-item-state { color: var(--tervezo-teendo-ink); }

/* ── 3.1: LUSTA rich-text szerkesztő ───────────────────────────────────── */
.tervezo-char { position: relative; }
.tervezo-placeholder { color: var(--tervezo-ink-inaktiv); font-style: italic; }
.tervezo-item-active { background: var(--tervezo-sav); }

/* A Quill alapstílusa nagy, keretes doboz — itt dokumentum-szerűvé szelídítjük (R1) */
.tervezo-char .quillWrapper { border: 1px solid var(--tervezo-nezd); border-radius: var(--tervezo-r-kis);
                              background: var(--tervezo-felulet); box-shadow: 0 0 0 3px var(--tervezo-nezd-halvany); }
.tervezo-char .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--tervezo-keret);
                                    padding: 3px 6px 3px 4px; border-radius: var(--tervezo-r-kis) var(--tervezo-r-kis) 0 0; background: var(--tervezo-sav); }
/* Kisebb formazo-ikonok (visszajelzes #4): a Quill alapja 28x24 gomb / 18px ikon */
.tervezo-char .ql-toolbar.ql-snow button { width: 22px; height: 20px; padding: 2px 3px; }
.tervezo-char .quillWrapper .ql-snow.ql-toolbar button svg,
.tervezo-char .quillWrapper .ql-toolbar.ql-snow button svg { width: 15px; height: 15px; }
/* D5-mérés (2026-09-10): a sáv a 2/2-es margó után is 35 px volt, és a maradékot
   NEM a padding adta, hanem a Quill `.ql-formats` elemének 10 px ALSÓ margója
   (20 gomb + 10 margó + 4 padding + 1 szegély = 35). A margó a több sorra töréshez
   való — a 7 gombunk 154 px, ami 375 px-en is egy sor (mérve), tehát nem kell. */
.tervezo-char .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; margin-bottom: 0; }
.tervezo-char .ql-container.ql-snow { border: 0; font-size: inherit; font-family: inherit; }
/* SZERKESZTES KOZBEN UGYANAKKORA: kulonben a szoveg ugrana, amikor belekattintasz. */
.tervezo-char .ql-editor { min-height: 90px; padding: 10px 12px;
                           font-size: calc(var(--tervezo-fs-szoveg) * var(--tervezo-valasz-nagyitas, 1)); }

/* TELJES NEZET (user-keres 2026-09-26, 1. merfoldko). A doboz helyben marad a DOM-ban,
   csak fix pozicioba kerul -- ezert a Quill peldanya, a szoveg es a visszavonas-verem
   erintetlen. A z-index SZANDEKOSAN 1040: az AI-panel (1050) es a modalis burok (1100)
   FOLOTTE marad, igy a teljes nezet mellett is lehet az AI-t hasznalni. */
.tervezo-char.tervezo-teljes {
    position: fixed; inset: 0; z-index: 1040;
    display: flex; flex-direction: column;
    background: var(--tervezo-felulet);
    padding: 0 var(--tervezo-gap-3) var(--tervezo-gap-3);
}
/* A fejlec a teljes nezet tetejen ul; itt mar nincs mit "ragadnia". */
.tervezo-char.tervezo-teljes .tervezo-edit-head { position: static; flex: 0 0 auto; }
/* A szerkeszto (a keret sajat komponense) toltse ki a maradekot. A `min-height: 0`
   kotelezo: nelkule a flex-gyerek nem zsugorodhat, es a mezo kilogna a kepernyorol. */
.tervezo-char.tervezo-teljes > *:last-child { flex: 1 1 auto; min-height: 0;
                                              display: flex; flex-direction: column; }
.tervezo-char.tervezo-teljes .ql-container { flex: 1 1 auto; min-height: 0;
                                             display: flex; flex-direction: column; }
.tervezo-char.tervezo-teljes .ql-editor { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* A HOSSZU SOR olvashatatlan: a szoveg-oszlop szeles, de nem vegtelen. A doboz maga
   kitolti az ablakot -- ez a kap csak a betuk sorhosszat fogja. */
.tervezo-char.tervezo-teljes .ql-toolbar,
.tervezo-char.tervezo-teljes .ql-container { width: 100%; max-width: 1100px;
                                             margin-left: auto; margin-right: auto; }
.tervezo-teljes-gomb { flex: 0 0 auto; margin-left: 6px; padding: 2px 8px; cursor: pointer;
                       border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                       background: transparent; color: var(--tervezo-ink-masod);
                       font-size: var(--tervezo-fs-ui); line-height: 1.35; }
.tervezo-teljes-gomb:hover { border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-ink);
                             background: var(--tervezo-nezd-halvany); }
.tervezo-teljes-gomb.tervezo-teljes-on { border-color: var(--tervezo-nezd);
                                         background: var(--tervezo-nezd-halvany);
                                         color: var(--tervezo-nezd-ink); }

/* TELJES NEZET AZ AI-PANELEN (2. merfoldko). Ugyanaz az elv, mint a szerkesztonel:
   a mezo/uzenet NEM koltozik a DOM-ban, csak osztalyt kap -- igy a `v-model` kotes,
   a mar begepelt szoveg es a valasz gombjai (beemeles, reszenkent) erintetlenek.
   RETEGZES -- FIGYELEM, ITT EGY CSAPDA VAN (merve 2026-09-26):
   az AI-panel `position: fixed` + `z-index: 1050`, ezzel SAJAT RETEG-KORNYEZETET nyit.
   A benne levo mezo `z-index: 1060` erteke ezert CSAK A PANELEN BELUL szamit -- kifele
   az egesz panel 1050-nek latszik. Elsore tettem egy sotetito hattert 1055-re, es az
   RATERULT a kinagyitott mezore: a mezo feher maradt, de szurken latszott (a hatter
   55%-os fekete) -- a user kepernyokepe ezt mutatta. A hatter azota KIKERULT: a
   kinagyitott elem a sav alatt ugyis mindent lefed, tehat se nem latszana, se nem
   lenne rakattinthato. Ami maradt:
       1050  AI-panel    -- es benne, SAJAT kornyezetben, a kinagyitott mezo (1060)
       1061  felso sav   -- a gyokeren all, ezert a panel folott van
   A mezo 1060-as erteke a panelen BELUL kell: a panel sajat tartalma (lab, keszek) fole. */
.tervezo-ai-teljes-sav { position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 1061;
                         display: flex; align-items: center; gap: var(--tervezo-gap-2);
                         padding: 0 var(--tervezo-gap-3);
                         background: var(--tervezo-felulet);
                         border-bottom: 1px solid var(--tervezo-keret); }
/* A kilepo gomb a sav jobb szelen ult, halvanyan -- konnyu volt nem eszrevenni, es a
   felhasznalo bennragadtnak erezhette magat a teljes nezetben (user-keres 2026-09-27). */
.tervezo-ai-teljes-sav .tervezo-ai-atv { padding: 6px 14px; font-size: var(--tervezo-fs-ui);
                                         border-width: 2px; border-color: var(--tervezo-nezd);
                                         color: var(--tervezo-nezd); font-weight: 600; }
/* Hoverkor a gomb betelik arannyal. A felirat NEM feher: az az aranyon 3:1 alatt
   van. A kitoltott arany olvashato tintaja a --tervezo-nezd-kontraszt (8,7:1). */
.tervezo-ai-teljes-sav .tervezo-ai-atv:hover { background: var(--tervezo-nezd);
                                               color: var(--tervezo-nezd-kontraszt); }
.tervezo-ai-teljes-cim { flex: 1 1 auto; min-width: 0; font-weight: 600;
                         font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink);
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A kinagyitott elem a sav ALATT kezdodik. A szoveg-oszlop itt is megall 1100 px-nel:
   a doboz kitolti az ablakot, csak a SORHOSSZ van fogva -- kulonben olvashatatlan. */
.tervezo-ai-input.tervezo-ai-teljes,
.tervezo-ai-uz.tervezo-ai-teljes {
    position: fixed; top: 44px; left: 0; right: 0; bottom: 0; z-index: 1060;
    max-width: none; width: auto; margin: 0; border-radius: 0;
    background: var(--tervezo-felulet);
    padding: var(--tervezo-gap-3) max(var(--tervezo-gap-3), calc((100vw - 1100px) / 2));
    overflow: auto;
}
.tervezo-ai-input.tervezo-ai-teljes { resize: none; border: 0; box-shadow: none; }
.tervezo-ai-input.tervezo-ai-teljes:focus { box-shadow: none; }
/* Kinagyitva a valasz nem "buborek": nincs csik, nincs arnyek, csak a szoveg. */
.tervezo-ai-uz.tervezo-ai-teljes { border: 0; box-shadow: none; align-self: stretch; }
.tervezo-ai-teljes-on { border-color: var(--tervezo-nezd) !important;
                        background: var(--tervezo-nezd-halvany) !important;
                        color: var(--tervezo-nezd-ink) !important; }

/* A nagyito a SZERKESZTO FEJLECEBEN: harom kicsi gomb egy keretben (user-dontes
   2026-09-26). Korabban a felso savban allt, de a sav iras kozben NEM ragados
   (tobb hely a szovegnek) -- igy epp akkor gorgott el, amikor a legtobbet ernenek.
   A fejlec viszont ragadós, tehat iras kozben vegig eleresheto.
   A belso gombok szelektora SZANDEKOSAN ket osztalyos (0,2,0): a fejlec altalanos
   `.tervezo-edit-head button` szabalya (0,1,1) kulonben keretet adna nekik. */
.tervezo-nagyito { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px;
                   flex: 0 0 auto;
                   border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                   padding: 1px; }
.tervezo-nagyito .tervezo-nagyito-gomb,
.tervezo-nagyito .tervezo-nagyito-ertek { border: 0; background: transparent; color: var(--tervezo-ink);
                         font-size: var(--tervezo-fs-jel); line-height: 1; padding: 3px 6px;
                         border-radius: var(--tervezo-r-kis); cursor: pointer; }
.tervezo-nagyito .tervezo-nagyito-ertek { color: var(--tervezo-ink-halvany); font-variant-numeric: tabular-nums; }
.tervezo-nagyito .tervezo-nagyito-gomb:hover:not(:disabled),
.tervezo-nagyito .tervezo-nagyito-ertek:hover { background: var(--tervezo-atmeneti-halvany); }
.tervezo-nagyito .tervezo-nagyito-gomb:disabled { color: var(--tervezo-ink-inaktiv); cursor: default; }

/* NYOMTATASKOR alapmeret: a papirra a nagyitas nem valo. */
@media print { .tervezo-editor { --tervezo-valasz-nagyitas: 1 !important; } }
.tervezo-char .ql-editor.ql-blank::before { color: var(--tervezo-ink-inaktiv); font-style: italic; left: 12px; }
.tervezo-char .ql-editor p:last-child { margin-bottom: 0; }

/* Kis monitoron a formázósáv törhet, ne nyelje a helyet */
@media (max-width: 900px) {
    .tervezo-char .ql-toolbar.ql-snow { padding: 2px 4px; }
    .tervezo-char .ql-editor { min-height: 70px; }
}

/* ── 3.2: Útmutató (tooltip) — elsőrangú, inline panel ─────────────────── */
.tervezo-guide { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
                 margin: 2px 0 8px 0; font-size: var(--tervezo-fs-ui); }
.tervezo-guide-open { display: block; }
.tervezo-guide-toggle { background: none; border: 0; padding: 0; cursor: pointer;
                        color: var(--tervezo-nezd-ink); font-size: var(--tervezo-fs-ui); white-space: nowrap; }
.tervezo-guide-toggle:hover { text-decoration: underline; }
.tervezo-caret { display: inline-block; width: 10px; color: var(--tervezo-ink-halvany); }
.tervezo-guide-preview { color: var(--tervezo-ink-halvany); cursor: pointer; overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.tervezo-guide-preview:hover { color: var(--tervezo-ink-masod); }
.tervezo-guide-body { margin-top: 6px; padding: 10px 12px; background: var(--tervezo-sav);
                      border-left: 3px solid var(--tervezo-nezd); border-radius: 0 var(--tervezo-r-kis) var(--tervezo-r-kis) 0;
                      max-height: 420px; overflow-y: auto; line-height: 1.5; }
.tervezo-guide-body p:last-child { margin-bottom: 0; }

/* ── 3.2: ritka affordanciák — csak ha VAN tartalom ────────────────────── */
/* A TARTALMAS affordanciak (megjegyzes / SMART / best practice) hangsulyosak: olvaso
   nezetben, egy hosszu valasz ALATT konnyen elsiklik rajtuk a szem, pedig a review-folyamat
   (4.0/4.1) eppen ezekre epul. A statusz-chipek (.tervezo-chip) semlegesek maradnak. */
.tervezo-aff { background: var(--tervezo-nezd-halvany); border: 1px solid var(--tervezo-nezd); border-radius: var(--tervezo-r-kis);
               padding: 2px 10px; font-size: var(--tervezo-fs-ui); font-weight: 500;
               color: var(--tervezo-nezd-ink); cursor: pointer; }
.tervezo-aff:hover { background: var(--tervezo-nezd-halvany); border-color: var(--tervezo-nezd); }
.tervezo-aff-on { background: var(--tervezo-nezd); color: var(--tervezo-nezd-kontraszt); }

/* ── 3.2: "⋯" menü — csak hoverre / aktív tételnél (R10) ───────────────── */
.tervezo-menu-wrap { position: relative; display: inline-block; }
/* A "..." KORABBAN opacity:0-n allt hoverig (R10). A user haromszor jelezte, hogy
   nem talalja a mogotte levo muveleteket -> a felulet-protokoll K5 szerint ami nem
   latszik, az nincs. Egyetlen halvany ikon meg mindig 7 helyett 1 -- az R10 lenyege megmarad. */
.tervezo-menu-btn { background: none; border: 0; color: var(--tervezo-ink-halvany); cursor: pointer;
                    padding: 0 6px; line-height: 1; font-size: var(--tervezo-fs-cim);
                    opacity: .55; transition: opacity .12s, color .12s; white-space: nowrap; }
/* A puszta "..." harom kulon visszajelzesben bizonyult megtalalhatatlannak
   (07 #14, #15, #21), ezert feliratot kapott. Kis kepernyon a felirat elrejtozik,
   de a cim (title) ott is megmondja, mi ez. */
.tervezo-menu-lbl { font-size: var(--tervezo-fs-jel); letter-spacing: .01em; }
@media (max-width: 640px) { .tervezo-menu-lbl { display: none; } }
/* 36-spec (user-dontes 2026-09-15): a TETEL "Muveletek" gombja a stiluslap ELSODLEGES gombja --
   arany korvonal, halvany arany kitoltes, arany-barna tinta, mindig teljes erovel.
   Merve elotte: keret 0, opacity .55, 11 px-es felirat -> "nem akadnak ra".
   A fejlec "Kerdoiv" gombja (.tervezo-menu-btn-bar) szandekosan NEM valtozik -> a szabaly a meta-sorra szukit. */
.tervezo-item-meta .tervezo-menu-btn { background: var(--tervezo-nezd-halvany); border: 1px solid var(--tervezo-nezd);
                                       border-radius: var(--tervezo-r-kis); color: var(--tervezo-nezd-ink); opacity: 1;
                                       padding: 2px 10px; line-height: 1.5; font-size: var(--tervezo-fs-ui); font-weight: 500; }
.tervezo-item-meta .tervezo-menu-btn .tervezo-menu-lbl { font-size: inherit; letter-spacing: normal; }
.tervezo-item-meta .tervezo-menu-btn:hover,
.tervezo-item-meta .tervezo-menu-btn-on { color: var(--tervezo-nezd-ink); border-color: var(--tervezo-nezd-ink); }

/* A "meg nincs ilyen" belepok: halvanyabbak a tartalmas chipeknel, hogy a
   TARTALOM maradjon a hangsulyos (08-protokoll 4.: a hely a gyakorisagbol kovetkezik). */
/* P-27: visszavonasi pont = ATMENETI allapot -> sarga (12-vizualis-szotar 2.3).
   Vezerlo-chip a MEGLEVO .tervezo-aff meret-skalajan: nincs uj meret, nincs uj
   szin, nincs otodik chip-fajta -- modosito a meglevo osztalyon. */
.tervezo-aff-undo { background: var(--tervezo-atmeneti-halvany); border-color: var(--tervezo-atmeneti); color: var(--tervezo-atmeneti-ink); }
.tervezo-aff-undo:hover { background: var(--tervezo-atmeneti-halvany); border-color: var(--tervezo-atmeneti); color: var(--tervezo-atmeneti-ink); }
.tervezo-aff-add { background: var(--tervezo-felulet); border-style: dashed; color: var(--tervezo-ink-halvany); font-weight: 400; }
.tervezo-aff-add:hover { background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink); border-color: var(--tervezo-nezd); }
.tervezo-item:hover .tervezo-menu-btn,
.tervezo-item-active .tervezo-menu-btn,
.tervezo-menu-btn-on { opacity: 1; }
.tervezo-menu-btn:hover, .tervezo-menu-btn-on { color: var(--tervezo-nezd); }
.tervezo-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 190px;
                background: var(--tervezo-felulet); border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                box-shadow: var(--tervezo-arnyek); padding: 4px; display: block; }
.tervezo-menu button { display: block; width: 100%; text-align: left; background: none;
                       border: 0; padding: 7px 10px; border-radius: var(--tervezo-r-kis); font-size: var(--tervezo-fs-ui); cursor: pointer; }
.tervezo-menu button:hover { background: var(--tervezo-lap); }
/* P-51: romboló menüpont -- a szotar 2.3 szerint a piros azt jelenti, "dolgod van vele";
   itt figyelmeztetes, ezert csak a SZOVEG piros, a hatter hoverre valik azza. */
.tervezo-menu button.tervezo-menu-danger { color: var(--tervezo-teendo-ink); }
.tervezo-menu button.tervezo-menu-danger:hover { background: var(--tervezo-teendo-halvany); }
.tervezo-menu button[disabled] { opacity: .5; cursor: default; }
/* A felso savban a "..." NEM hoverre elesedik (ott nincs tetel-hover) -- mindig latszik. */
.tervezo-menu-btn-bar { opacity: 1; }

/* P-50: megjegyzes torlese -- halvany "x" a soron, ket lepesben.
   A .tervezo-comment-head mar flex (lentebb definialva), a spacer ott mukodik. */
.tervezo-comment-del { background: none; border: 0; color: var(--tervezo-ink-inaktiv); cursor: pointer;
                       line-height: 1; padding: 0 4px; font-size: var(--tervezo-fs-cim); }
.tervezo-comment-del:hover { color: var(--tervezo-teendo-ink); }
.tervezo-comment-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                       margin-top: 4px; font-size: var(--tervezo-fs-ui); color: var(--tervezo-teendo-ink); }

/* ── 3.2: kinyitott affordancia-tartalom ──────────────────────────────── */
.tervezo-extra { margin-top: 8px; padding: 10px 12px; background: var(--tervezo-sav);
                 border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); font-size: var(--tervezo-fs-ui); }
.tervezo-comment { padding: 6px 0; border-bottom: 1px solid var(--tervezo-lap); }
.tervezo-comment:last-of-type { border-bottom: 0; }
.tervezo-comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.tervezo-comment-new { display: flex; gap: 8px; margin-top: 8px; }
.tervezo-cinput { flex: 1 1 auto; padding: 5px 9px; border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); }

/* ── 3.2 / WS-K: AI-műveletek (on-demand, a "⋯" mögül) ────────────────── */
.tervezo-ai-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tervezo-ai-busy { display: flex; align-items: center; gap: 10px; color: var(--tervezo-nezd-ink); }
.tervezo-ai-busy::before { content: ''; width: 10px; height: 10px; border-radius: 50%;
                           background: var(--tervezo-nezd); animation: tervezo-pulse 1s infinite; }
.tervezo-ai-warn { background: var(--tervezo-atmeneti-halvany); border: 1px solid var(--tervezo-atmeneti); color: var(--tervezo-atmeneti-ink);
                   border-radius: var(--tervezo-r-kis); padding: 6px 9px; margin: 6px 0; }
.tervezo-ai-ok   { background: var(--tervezo-ok-halvany); border: 1px solid var(--tervezo-ok); color: var(--tervezo-ok-ink);
                   border-radius: var(--tervezo-r-kis); padding: 6px 9px; margin: 6px 0;
                   display: flex; align-items: center; gap: 10px; }
.tervezo-ai-goal { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0;
                   border-bottom: 1px solid var(--tervezo-lap); cursor: pointer; font-weight: 400; }
.tervezo-ai-goal:last-of-type { border-bottom: 0; }
.tervezo-ai-goal input { margin-top: 4px; flex: 0 0 auto; }
.tervezo-ai-note { color: var(--tervezo-ink-masod); font-size: var(--tervezo-fs-ui); padding: 3px 0 3px 10px;
                   border-left: 3px solid var(--tervezo-atmeneti); margin-bottom: 4px; }
.tervezo-ai-preview { margin: 8px 0; padding: 8px 10px; background: var(--tervezo-felulet);
                      border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                      max-height: 320px; overflow-y: auto; }
.tervezo-ai-preview p:last-child { margin-bottom: 0; }
.tervezo-ai-actions { display: flex; gap: 8px; margin-top: 8px; }
.tervezo-menu button[disabled] { color: var(--tervezo-ink-inaktiv); cursor: default; }
.tervezo-menu button[disabled]:hover { background: none; }

/* ── 3.2: best practice (JSON-lista, tételenkénti Kész/Terv választással) ── */
.tervezo-bp-list { max-height: 420px; overflow-y: auto; }
.tervezo-bp-row { display: flex; gap: 10px; align-items: flex-start;
                  padding: 7px 0; border-bottom: 1px solid var(--tervezo-lap); }
.tervezo-bp-row:last-child { border-bottom: 0; }
.tervezo-bp-choice { flex: 0 0 auto; display: flex; gap: 4px; padding-top: 1px; }
.tervezo-bp-text { flex: 1 1 auto; min-width: 0; }
.tervezo-bp-title { display: block; font-weight: 600; }
.tervezo-bp-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                   overflow: hidden; font-size: var(--tervezo-fs-ui); line-height: 1.4; }

/* ── Látszó kilépés a szerkesztőből (visszajelzés #1, 2026-09-05) ─────────
   A működés a 3.1 óta megvolt (Esc + kattintás kívülre), csak nem látszott.
   A gomb CSAK az aktív tételnél van a DOM-ban, így az R1/R10 nem sérül. */
.tervezo-edit-head button { display: inline-flex; align-items: center;
                                 padding: 1px 10px; font-size: var(--tervezo-fs-jel); line-height: 1.6;
                                 cursor: pointer; border-radius: var(--tervezo-r-kartya); border: 1px solid transparent; }
.tervezo-editor-done { color: var(--tervezo-ok-ink); background: var(--tervezo-ok-halvany); border-color: var(--tervezo-ok); }
.tervezo-editor-done:hover { background: var(--tervezo-ok-halvany); border-color: var(--tervezo-ok); }
.tervezo-editor-done:active { background: var(--tervezo-ok); }
.tervezo-editor-undo { color: var(--tervezo-ink-masod); background: var(--tervezo-lap); border-color: var(--tervezo-keret); }
.tervezo-editor-undo:hover:not([disabled]) { background: var(--tervezo-lap); border-color: var(--tervezo-keret); }
.tervezo-editor-undo[disabled] { color: var(--tervezo-ink-inaktiv); background: var(--tervezo-sav);
                                 border-color: var(--tervezo-lap); cursor: default; }

/* Kis kepernyon csak az ikonok maradnak, hogy ne szoritsak a formazosavot */

@media (max-width: 700px) {
    .tervezo-char .ql-toolbar.ql-snow { padding: 2px 4px 2px 3px; }
    .tervezo-editor-actions { top: 3px; gap: 4px; }
    .tervezo-editor-actions button { padding: 1px 7px; }
    .tervezo-lbl { display: none; }
    /* ── Kis kepernyo / mobil (merve 2026-09-09) ────────────────────────────
       A RAGADOS sav 375 px-en 142 px-re (8 sorra) nott, ami a nezet 24%-a --
       es mivel ragados, ALLANDOAN elviszi. Negy szukites, mind mert okbol:
         1. a billentyu-tipp ertelmetlen (nincs billentyuzet),
         2. a hosszu feliratok rovid valtozatra cserelnek,
         3. a kerdoiv neve EGY sorban marad (levagva; a teljes nev a tooltipben),
         4. kisebb res es belso margo.
       A cel: a sav ne vigyen el tobbet a nezet ~15%-anal. */
    .tervezo-pont-tipp { display: none; }
    .tervezo-kis-lbl { display: inline; }
    .tervezo-bar { gap: 8px; padding: 6px 0; }
    /* A rugalmas kitolto elem kis kepernyon SAJAT SORBA tordelt (merve: 45 px egy
       kulon soron) -- ott nincs mit "szethuzni", a vezerlok pakoljanak szorosan. */
    .tervezo-spacer { display: none; }
    .tervezo-title { flex: 0 1 auto; min-width: 0; max-width: 45vw;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Útmutató beemelése a válaszba (D10 parity) */
.tervezo-guide-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* ── Kikapcsolt kérdés (moderated=0) — parity a mai editor szem-gombjával ── */
.tervezo-item-off .tervezo-item-q { color: var(--tervezo-ink-halvany); font-weight: 400; }
.tervezo-item-off { opacity: .75; }
.tervezo-off-note { color: var(--tervezo-ink-halvany); font-style: italic; font-size: var(--tervezo-fs-ui); margin-bottom: 4px; }
/* 2026-10-08: a szerkeszto nem tudja a valasz egy reszet megjeleniteni -> modositasnal elveszne */
.tervezo-edit-figyelem { margin: 6px 0; padding: 8px 12px; border-radius: var(--tervezo-r-kis);
    border: 1px solid var(--tervezo-teendo); background: var(--tervezo-teendo-halvany);
    color: var(--tervezo-teendo-ink); font-size: var(--tervezo-fs-ui); line-height: 1.45; }
.tervezo-chip-off { background: var(--tervezo-lap); border: 1px solid var(--tervezo-keret);
                    color: var(--tervezo-ink-halvany); cursor: default; }

/* Helyesírás gomb a szerkesztő akciósávjában (csak szerkesztés közben) */
.tervezo-editor-spell { color: var(--tervezo-nezd-ink); background: var(--tervezo-nezd-halvany); border-color: var(--tervezo-nezd); }
.tervezo-editor-spell:hover:not([disabled]) { background: var(--tervezo-nezd-halvany); border-color: var(--tervezo-nezd); }
.tervezo-editor-spell[disabled] { color: var(--tervezo-ink-inaktiv); background: var(--tervezo-sav);
                                  border-color: var(--tervezo-lap); cursor: default; }

/* LETISZTAZAS (46 SS45). A helyesiras TESTVERE, ezert ugyanugy nez ki -- de a sajat
   szine a "teendo" helyett SEMLEGES: ez nem hibajavitas, hanem fogalmazas-csiszolas. */
.tervezo-editor-tiszta { color: var(--tervezo-ink-masod); background: var(--tervezo-sav);
                         border-color: var(--tervezo-keret); }
.tervezo-editor-tiszta:hover:not([disabled]) { background: var(--tervezo-nezd-halvany);
                                               border-color: var(--tervezo-nezd);
                                               color: var(--tervezo-nezd-ink); }
.tervezo-editor-tiszta[disabled] { color: var(--tervezo-ink-inaktiv);
                                   background: var(--tervezo-sav);
                                   border-color: var(--tervezo-lap); cursor: default; }
/* Az EREDETI/LETISZTAZOTT valto a mertek mellett ul, jobbra. */
.tervezo-tiszta-valt { margin-left: auto; }
.tervezo-ai-count:has(.tervezo-tiszta-valt) { display: flex; align-items: center; gap: 8px; }
/* Az eredeti visszafogottabb: azt mar ismeri, az UJ a fo. */
.tervezo-tiszta-eredeti { background: var(--tervezo-sav); color: var(--tervezo-ink-masod); }
.tervezo-tiszta-uj { border-left: 3px solid var(--tervezo-nezd); }

/* ── RAGADÓS szerkesztő-fejléc (user-visszajelzés: hosszú szövegnél kigörög) ──
   A kérdés ÉS a vezérlők a képernyőn maradnak, alattuk a Quill formázósávja is.

   A `top` értékek MÉRÉSBŐL jönnek, nem beégetve (P-55, 2026-09-06). A felső sáv
   magassága nem állandó: sorra tör, ha sok elem van benne (dimenzió-választó,
   „Mind elfogadva", haladás-blokk, mentés-jelző) vagy keskeny az ablak — és
   olyankor a beégetett 42 px mellett a fejléc ALÁCSÚSZOTT volna. A komponens
   a `--tervezo-keret-h`, a `--tervezo-bar-h` és a `--tervezo-edit-h` változókat futásidőben.
   A `--tervezo-keret-h` a KERET topbarjának mért magassága (App.vue -> <toolbar>,
   sticky/top:0/z-index 1025). Keret nélkül 0 -> a lánc változatlanul viselkedik.
   (mérés + resize-figyelő); a `var(...)` második paramétere csak vészhelyzeti
   tartalék, ha a mérés valamiért nem futna le. */
/* ── D5 (2026-09-10): a lánc eltolása a `--tervezo-sav-h`-ból, NEM a mért
   `--tervezo-bar-h`-ból. A kettő általában egyenlő, de amíg AKTÍV a szerkesztő, a
   felső sáv nem ragadós (elgörög), tehát nem takar semmit -> az eltolás 0, miközben a
   MÉRT magasság változatlanul a sáv magassága (P-55 / N1-N4 azt méri).
   Mérve 883x552-n: a lánc 154 px (a nézet 28%-a) volt, ebből 76 px a sáv. */
.tervezo-edit-head { position: sticky; z-index: 4;
                     top: calc(var(--tervezo-keret-h, 0px) + var(--tervezo-sav-h, 42px));
                     display: flex; align-items: center; gap: 6px;
                     background: var(--tervezo-felulet); padding: 6px 0; margin-bottom: 2px;
                     border-bottom: 1px solid var(--tervezo-keret); }
/* A mentés-állapot (R3) a fejlécben: a sáv elgörög, de a kitöltőnek írás közben KELL
   tudnia, mentve van-e. Nem új szótár — ugyanaz az elem, ugyanaz a szín és szöveg. */
.tervezo-edit-head .tervezo-save,
.tervezo-edit-head .tervezo-retry { flex: 0 0 auto; }
.tervezo-edit-q { font-weight: 600; min-width: 0; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
/* a fejléc viszi a kérdést, ezért a tétel saját címsora ilyenkor rejtve — ne duplázzon */
.tervezo-item-active .tervezo-item-q { display: none; }

.tervezo-item-active .quillWrapper .ql-toolbar.ql-snow {
    position: sticky; z-index: 3;
    top: calc(var(--tervezo-keret-h, 0px) + var(--tervezo-sav-h, 42px) + var(--tervezo-edit-h, 38px));
    /* D5: mérve 43 px volt, miközben a 7 gomb csak 20 px -- a maradék 23 px puszta
       keret. A computed margó (8px/4px) NEM egyezett a saját 202. sori szabályunkkal
       (3px/3px), tehát valami felülírta; ez a szelektor (három osztály) nagyobb
       specifikusságú, mint a Quill alapstílusa és a 900 px-es média-blokk is. */
    padding: 2px 4px;
}
/* D5-mérés (2026-09-10): a `.ql-formats` 10 px-es alsó margója a 202. sor környéki
   szabályunk ellenére MEGMARADT (mérve: computed 10px, holott 0-t írtunk elő). Nem
   specifikusság-hiba: a `.quillWrapper .ql-snow.ql-toolbar .ql-formats` UGYANANNYI
   osztály (0,4,0), mint a `.tervezo-char .ql-toolbar.ql-snow .ql-formats` -- és a
   quillWrapper stíluslapja a komponens CSS-e UTÁN tölt be, egyenlőnél pedig a későbbi
   nyer. Ez ugyanaz a csapda, ami a formázósáv paddingjánál is félrevezetett (a computed
   8px/4px nem egyezett a stíluslapunk 3px/3px-ével). Öt osztály -> biztosan nyer. */
.tervezo-item-active .quillWrapper .ql-toolbar.ql-snow .ql-formats { margin-bottom: 0; }
/* A navigátor is a sáv alá igazodik. */
.tervezo-nav, .tervezo-nav-zart { top: calc(var(--tervezo-keret-h, 0px) + var(--tervezo-sav-h, 42px) + 14px) !important;
              max-height: calc(100vh - var(--tervezo-keret-h, 0px) - var(--tervezo-sav-h, 42px) - 28px) !important; }

/* ── D5: a felső sáv NEM ragadós, amíg aktív a szerkesztő ────────────────
   Mérve (iframe, 552 px magas nézet, 5011 ÉS 5317): a ragadós lánc 883 px-en
   154 px = a nézet 28%-a, 375 px-en 205 px = 37%. A 154-ből 76 px a felső sáv,
   és annak minden vezérlője (navigáció, dimenzió-választó, review-státusz,
   átolvasási haladás, tömeges elfogadás) írás közben NEM munka-eszköz.
   Egy görgetéssel visszajön, kilépéskor azonnal visszaragad. */
.tervezo-bar-nem-ragad { position: static !important; }

/* Törlés a megjegyzés/SMART soroknál — halvány, hoverre erősödik */
.tervezo-del { background: none; border: 0; color: var(--tervezo-ink-inaktiv); cursor: pointer;
               font-size: var(--tervezo-fs-cim); line-height: 1; padding: 0 4px; }
.tervezo-del:hover { color: var(--tervezo-teendo-ink); }

/* ── Átolvasási haladás (privát réteg) ───────────────────────────────────
   A vonal CSAK akkor jelenik meg, ha van haladás ÉS van még hátra -- aki nem
   használja, annak semmi nem kerül a képernyőre. */
.tervezo-progress { font-size: var(--tervezo-fs-ui); color: var(--tervezo-nezd-ink); background: var(--tervezo-nezd-halvany);
                    border: 1px solid var(--tervezo-nezd); border-radius: var(--tervezo-r-kartya);
                    padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.tervezo-progress:hover:not([disabled]) { background: var(--tervezo-nezd-halvany); }
/* Kesz allapot: nincs hova ugrani -> nem gomb tobbe, csak allapotjelzo. */
.tervezo-progress[disabled] { cursor: default; color: var(--tervezo-ok-ink);
                              background: var(--tervezo-ok-halvany); border-color: var(--tervezo-ok); }
.tervezo-progress-reset { font-size: var(--tervezo-fs-ui); line-height: 1; color: var(--tervezo-ink-halvany);
                          background: transparent; border: 1px solid var(--tervezo-keret);
                          border-radius: var(--tervezo-r-kartya); padding: 2px 8px; cursor: pointer; }
.tervezo-progress-reset:hover { background: var(--tervezo-teendo-halvany); color: var(--tervezo-teendo-ink); border-color: var(--tervezo-teendo); }

/* Ugras utani rovid kiemeles: a gorgetes vegen latszodjon, HOVA erkeztunk. */
.tervezo-item-flash { animation: tervezoFlash 1.8s ease-out 1; }
@keyframes tervezoFlash {
    0%   { background: var(--tervezo-atmeneti-halvany); border-left-color: var(--tervezo-atmeneti); }
    100% { background: transparent; }
}

/* Helyesiras: szo-szintu kiemeles. A javitott szo zolden, a regi halvanyan
   athuzva mellette -- igy nem kell 2000 karaktert osszeolvasni (user, 09-06). */
.tervezo-diff ins { text-decoration: none; background: var(--tervezo-ok-halvany); color: var(--tervezo-ok-ink);
                    border-radius: var(--tervezo-r-kis); padding: 0 2px; }
.tervezo-diff del { color: var(--tervezo-ink-inaktiv); background: var(--tervezo-lap); border-radius: var(--tervezo-r-kis);
                    padding: 0 2px; margin-right: 2px; }
.tervezo-ai-count { font-size: var(--tervezo-fs-ui); margin-bottom: 6px; }
.tervezo-ai-count .tervezo-diff-uj { background: var(--tervezo-ok-halvany); color: var(--tervezo-ok-ink);
                                     border-radius: var(--tervezo-r-kis); padding: 0 4px; }
.tervezo-ai-count .tervezo-diff-regi { color: var(--tervezo-ink-inaktiv); background: var(--tervezo-lap);
                                       border-radius: var(--tervezo-r-kis); padding: 0 4px;
                                       text-decoration: line-through; }
.tervezo-ai-why { border-left: 3px solid var(--tervezo-keret); padding-left: 8px; margin-bottom: 8px; }

.tervezo-progress-off { font-size: var(--tervezo-fs-ui); line-height: 1; color: var(--tervezo-ink-inaktiv);
                        background: transparent; border: 1px solid transparent;
                        border-radius: var(--tervezo-r-kartya); padding: 2px 7px; cursor: pointer; }
.tervezo-progress-off:hover { color: var(--tervezo-ink-masod); border-color: var(--tervezo-keret); background: var(--tervezo-sav); }
/* Kikapcsolva EGYETLEN latszo nyom marad -- kulonben nem lenne visszaut (G0/4.) */
.tervezo-progress-back { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-inaktiv); background: transparent;
                         border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                         padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.tervezo-progress-back:hover { color: var(--tervezo-nezd-ink); border-color: var(--tervezo-nezd); background: var(--tervezo-nezd-halvany); }
/* 36/B (user-keres 2026-09-15): a szamlalo, a nullazas es a kikapcsolas EGY funkcio -> EGY keret,
   belso elvalasztoval (a stiluslap ket-allasu valasztojanak mintaja, nem uj elem-fajta).
   A gombok sajat keretet nem viselnek, a csoport kerete fogja ossze oket. */
.tervezo-halad-csoport { display: inline-flex; align-items: stretch; white-space: nowrap; vertical-align: middle;
                         border: 1px solid var(--tervezo-nezd); border-radius: var(--tervezo-r-kartya); overflow: hidden; }
.tervezo-halad-csoport > button { border: 0; border-radius: 0; margin: 0; }
.tervezo-halad-csoport > button + button { border-left: 1px solid var(--tervezo-nezd); }
.tervezo-halad-csoport > .tervezo-progress-reset,
.tervezo-halad-csoport > .tervezo-progress-off { background: var(--tervezo-felulet); color: var(--tervezo-nezd-ink); padding: 2px 8px; }
.tervezo-halad-csoport > .tervezo-progress-reset:hover { background: var(--tervezo-teendo-halvany); color: var(--tervezo-teendo-ink); }
.tervezo-halad-csoport > .tervezo-progress-off:hover { background: var(--tervezo-sav); color: var(--tervezo-ink-masod); }

.tervezo-bookmark { position: relative; height: 0; margin: 14px 0 20px 0;
                    border-top: 2px dashed var(--tervezo-nezd); }
.tervezo-bookmark-label { position: absolute; top: -9px; left: 0;
                          background: var(--tervezo-felulet); padding: 0 8px;
                          font-size: var(--tervezo-fs-jel); color: var(--tervezo-nezd-ink); white-space: nowrap; }
/* A vonal FOGANTYUJA: a kezi mozgatas oda kerul, ahol a fogalom lakik -- nem csak
   a harom pont menu melyere (G2: felfedezhetoseg). */
.tervezo-bookmark-grip { position: absolute; top: -11px; right: 0;
                         background: var(--tervezo-felulet); padding: 0 4px; display: inline-flex; gap: 2px; }
.tervezo-bookmark-grip button { font-size: var(--tervezo-fs-jel); line-height: 1.4; color: var(--tervezo-nezd-ink);
                                background: var(--tervezo-felulet); border: 1px solid var(--tervezo-nezd-halvany);
                                border-radius: var(--tervezo-r-kis); padding: 0 6px; cursor: pointer; }
.tervezo-bookmark-grip button:hover { background: var(--tervezo-nezd-halvany); }

/* ── D2 + D3: státusz-beállítás (11-statusz-spec.md) ─────────────────────── */
/* Dimenzió-választó a fejlécben: EGY aktív dimenzióban dolgozunk (user-döntés Q1). */
.tervezo-dimsel { display: inline-flex; align-items: center; gap: 4px; }
.tervezo-dimsel button { font-size: var(--tervezo-fs-jel); padding: 2px 9px; border-radius: var(--tervezo-r-kartya);
                         border: 1px solid var(--tervezo-keret); background: var(--tervezo-felulet); color: var(--tervezo-ink-halvany); cursor: pointer; }
.tervezo-dimsel button:hover { border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-ink); }
.tervezo-dim-on { background: var(--tervezo-nezd) !important; border-color: var(--tervezo-nezd) !important; color: var(--tervezo-nezd-kontraszt) !important; }
/* 2026-10-15: a dimenzio a szerepbol adodik -- a felirat-gomb nem kattinthato, de nem is szurke */
.tervezo-dimsel button:disabled { opacity: 1; cursor: default; }

/* A státusz-chip EGYBEN a vezérlő: kattintásra nyílik a választó. */
.tervezo-status-wrap { position: relative; display: inline-block; }
.tervezo-status-chip { cursor: pointer; border-style: solid; white-space: nowrap; }
.tervezo-status-chip:hover { filter: brightness(.96); }
.tervezo-status-open { box-shadow: 0 0 0 2px var(--tervezo-nezd-eros); }
.tervezo-status-other { opacity: .7; }
.tervezo-st-semleges { background: var(--tervezo-felulet); border: 1px dashed var(--tervezo-keret); color: var(--tervezo-ink-halvany); }
.tervezo-st-mod  { background: var(--tervezo-teendo-halvany); border: 1px solid var(--tervezo-teendo); color: var(--tervezo-teendo-ink); }
.tervezo-st-kesz { background: var(--tervezo-nezd-halvany); border: 1px solid var(--tervezo-nezd); color: var(--tervezo-nezd-ink); }
.tervezo-st-ok   { background: var(--tervezo-ok-halvany); border: 1px solid var(--tervezo-ok); color: var(--tervezo-ok-ink); }
/* Nem szoveges iv ELO kitoltottsege a munkalistan (2026-09-30). A ZOLD az "Elfogadva"
   jele, ezert a kitoltott iv NEM zold: reszben = semleges, teljesen = arany "nezd meg"
   (ugyanaz, mint a szoveges iv "kesz" allapota -- az atnezore var). */
.tervezo-wl-kitoltes { background: var(--tervezo-felulet); border: 1px dashed var(--tervezo-keret); color: var(--tervezo-ink-masod); }
.tervezo-wl-kitoltes-teljes { background: var(--tervezo-nezd-halvany); border: 1px solid var(--tervezo-nezd); color: var(--tervezo-nezd-ink); }

.tervezo-status-menu { position: absolute; left: 0; top: 100%; z-index: 25; min-width: 210px;
                       background: var(--tervezo-felulet); border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                       box-shadow: var(--tervezo-arnyek); padding: 5px; display: block; }
.tervezo-status-menu button { display: block; width: 100%; text-align: left; margin: 2px 0;
                              border-radius: var(--tervezo-r-kis); padding: 6px 9px; font-size: var(--tervezo-fs-ui); cursor: pointer; }
.tervezo-status-menu button:hover { filter: brightness(.95); }
.tervezo-status-head { display: block; font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany); line-height: 1.35;
                       padding: 4px 9px 7px 9px; border-bottom: 1px solid var(--tervezo-lap); margin-bottom: 4px; }
.tervezo-status-clear { background: var(--tervezo-felulet); border: 1px dashed var(--tervezo-keret); color: var(--tervezo-ink-halvany); }

/* Tömeges elfogadás: a szekció fejlécében és a kérdőív szintjén (user-döntés Q2). */
.tervezo-accept-sec { margin-left: 10px; font-size: var(--tervezo-fs-jel); font-weight: 400; vertical-align: middle;
                      background: var(--tervezo-felulet); border: 1px solid var(--tervezo-ok); color: var(--tervezo-ok-ink);
                      border-radius: var(--tervezo-r-kartya); padding: 2px 9px; cursor: pointer; }
/* 15. TOMOR ZOLD (latvany-cel 3a). A feher felirat a #4b7b58-on 4,9:1 -- megfelel. */
.tervezo-accept-sec { background: var(--tervezo-ok); border-color: var(--tervezo-ok); color: var(--tervezo-felulet); }
.tervezo-accept-sec:hover { background: var(--tervezo-ok-ink); border-color: var(--tervezo-ok-ink); }
.tervezo-accept-all { font-size: var(--tervezo-fs-jel); background: var(--tervezo-felulet); border: 1px solid var(--tervezo-ok); color: var(--tervezo-ok-ink);
                      border-radius: var(--tervezo-r-kartya); padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.tervezo-accept-all:hover { background: var(--tervezo-ok-halvany); }
/* Visszajelzo uzenet: a kuldonek nincs e-mail cime -> nem kap masolatot (2026-09-30). */
.tervezo-wl-uz-nincs-cc { color: var(--tervezo-atmeneti-ink); }

/* ELOTOLTES A TAVALYIBOL (user-keres 2026-09-30). A gomb a sav tobbi gombjanak formajat
   viseli; arany (nezd), mert a kitoltot egy LEHETOSEGRE hivja fel. A megerosito sav es a
   tetel-chip SARGA (atmeneti): a tavalyi szoveg meg teendo -- at kell nezni, mi valtozott
   (12-vizualis-szotar 2.3). */
.tervezo-tavalyi-btn { font-size: var(--tervezo-fs-jel); background: var(--tervezo-felulet);
                       border: 1px solid var(--tervezo-nezd); color: var(--tervezo-nezd-ink);
                       border-radius: var(--tervezo-r-kartya); padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.tervezo-tavalyi-btn:hover,
.tervezo-tavalyi-btn-on { background: var(--tervezo-nezd-halvany); }
.tervezo-tavalyi-sav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tervezo-gap-2);
                       margin: 6px 0; padding: 8px 12px; font-size: var(--tervezo-fs-ui); line-height: 1.5;
                       background: var(--tervezo-atmeneti-halvany); color: var(--tervezo-atmeneti-ink);
                       border: 1px solid var(--tervezo-atmeneti); border-radius: var(--tervezo-r-kartya); }
.tervezo-tavalyi-sav .tervezo-ai-atv { padding: 4px 12px; font-size: var(--tervezo-fs-ui); }
.tervezo-tavalyi-kesz { color: var(--tervezo-ink-masod); }
.tervezo-tavalyi-chip { background: var(--tervezo-atmeneti-halvany); color: var(--tervezo-atmeneti-ink);
                        border: 1px solid var(--tervezo-atmeneti); }
.tervezo-notice-ok { background: var(--tervezo-ok-halvany); border-color: var(--tervezo-ok); color: var(--tervezo-ok-ink); }

/* ════ 4.0 MUNKALISTA (P-49) ═══════════════════════════════════════════════
   Terv: redesign/13-munkalista-spec.md
   A vizualis szotar (12-vizualis-szotar) szerint:
     * a szuro-gombok VEZERLO-chipek (keret + allapot-szin, cursor:pointer)
     * a statusz a LISTAN teny-chip -- itt NEM kattinthato (a review a szerkesztoben van)
     * szaggatott keret TILOS: az "meg nincs ilyen"-t jelent
   Meret-skala: tetel-elem (.84em / 2px 10px / radius 10px), terkoz-ritmus 4/8/12/20. */
.tervezo-worklist { padding: 12px; min-width: 0; max-width: 100%; }

/* A keret topbarja ala ragad -- a valtozo futasidoben mert (P-55 / F36). */
.tervezo-wl-bar { position: sticky; top: var(--tervezo-keret-h, 0px); z-index: 5;
                  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                  background: var(--tervezo-felulet); border-bottom: 1px solid var(--tervezo-keret);
                  padding: 8px 0; margin-bottom: 8px; }
.tervezo-wl-ev { font-size: var(--tervezo-fs-ui); padding: 2px 8px; border: 1px solid var(--tervezo-keret);
                 border-radius: var(--tervezo-r-kartya); background: var(--tervezo-felulet); cursor: pointer; }

.tervezo-wl-filters { display: flex; align-items: center; gap: 8px;
                      flex-wrap: wrap; margin-bottom: 12px; }
.tervezo-wl-f { background: var(--tervezo-felulet); border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kartya);
                padding: 2px 10px; font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink-masod); cursor: pointer; }
.tervezo-wl-f:hover { border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-ink); }
/* 9. A BEKAPCSOLT SZURO TOMOR KITOLTES (user-dontes, 2026-09-14).
   TUDATOS KIVETEL a 32-tervezo-stilus "ne tolts ki nagy feluletet akcent-szinnel"
   szabalya alol. Indok: a szuro allapota olvasat-befolyasolo teny -- ha nem latszik
   egy pillantasra, a felhasznalo FELREOLVASSA a listat (hianyzonak hisz olyat, amit
   csak a szuro rejt). A kivetel HATARA: kizarolag a bekapcsolt szuro- es vezerlo-chip.
   A felirat fix sotet tinta (--tervezo-nezd-kontraszt), mert a feher az aranyon
   2,5:1 lenne -- lasd ugyanott. */
.tervezo-wl-f-on { background: var(--tervezo-nezd); border-color: var(--tervezo-nezd); color: var(--tervezo-nezd-kontraszt); font-weight: 500; }

.tervezo-wl-list { display: block; }
.tervezo-wl-group { border-bottom: 1px solid var(--tervezo-lap); }
.tervezo-wl-head { display: flex; align-items: center; gap: 8px; width: 100%;
                   background: none; border: 0; text-align: left; cursor: pointer;
                   padding: 8px 4px;
                   /* A cegsor gombjai (Hatteranyag, Word, Fejlesztendok, Visszajelzo uzenet,
                      IT-visszajelzes) egyutt ~780 px-et kernek. Tores nelkul keskeny ablakban
                      az EGESZ lap vizszintesen kilogott (merve 2026-09-30, 490 px-es nezet:
                      933 px szeles dokumentum). */
                   flex-wrap: wrap; row-gap: 6px; }
.tervezo-wl-head:hover { background: var(--tervezo-sav); }
.tervezo-wl-caret { color: var(--tervezo-ink-halvany); width: 12px; flex: 0 0 12px; }
.tervezo-wl-acc { font-weight: 600; }
/* A hiany kiemelese: SARGA = atmeneti allapot (12-vizualis-szotar 2.3) -- valamit
   meg tenni kell vele, de nem a mi dolgunk (a kitoltore var), tehat NEM piros. */
.tervezo-wl-hiany { font-size: var(--tervezo-fs-ui); color: var(--tervezo-atmeneti-ink); }

.tervezo-wl-rows { padding: 0 0 8px 20px; }
.tervezo-wl-row { display: flex; align-items: center; gap: 8px; width: 100%;
                  background: none; border: 0; text-align: left; cursor: pointer;
                  padding: 5px 8px; border-radius: var(--tervezo-r-kis); }
.tervezo-wl-row:hover { background: var(--tervezo-nezd-halvany); }
/* K5: a sor-kattintas az egyetlen "rejtett" muvelet -> a cimke link-stilusu */
.tervezo-wl-tema { color: var(--tervezo-nezd-ink); }
.tervezo-wl-row:hover .tervezo-wl-tema { text-decoration: underline; }
.tervezo-wl-db { flex: 0 0 auto; white-space: nowrap; }
.tervezo-wl-halad { font-size: var(--tervezo-fs-ui); color: var(--tervezo-nezd-ink); white-space: nowrap; }
/* user-keres 2026-09-15: kis tavolsag a munkalista "Tervezo" cime ele (csak a munkalista savjan). */
.tervezo-wl-bar > .tervezo-title { margin-left: var(--tervezo-gap-2, 8px); }
.tervezo-wl-ures { background: var(--tervezo-lap); border: 1px solid var(--tervezo-keret);
                   color: var(--tervezo-ink-halvany); cursor: default; }

/* ── 4.2/B: „Módosítást igényel" + indoklás egy mozdulatban ─────────────── */
/* A szotar szerint (12-vizualis-szotar 2.3) a PIROS azt jelenti: dolgod van vele.
   Itt pontosan ez a helyzet -- a kitoltonek tennie kell valamit. */
.tervezo-ask { border: 1px solid var(--tervezo-teendo); background: var(--tervezo-teendo-halvany); border-radius: var(--tervezo-r-kis);
               padding: 8px 10px; margin-bottom: 8px; }
.tervezo-ask-cim { font-weight: 600; color: var(--tervezo-teendo-ink); margin-bottom: 4px; font-size: var(--tervezo-fs-ui); }
.tervezo-ask-sor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
/* A hianyzo indoklas NEM hiba, csak hiany -> sarga (atmeneti allapot), nem piros. */
.tervezo-nincs-indok { background: var(--tervezo-atmeneti-halvany); color: var(--tervezo-atmeneti-ink); border: 1px solid var(--tervezo-atmeneti); }
/* 4.2/C: a TETEL-szintu keresek a munkalistan. Piros = dolgod van vele (szotar 2.3). */
.tervezo-wl-keres { font-size: var(--tervezo-fs-ui); color: var(--tervezo-teendo-ink); font-weight: 500; }
.tervezo-wl-keres-chip { background: var(--tervezo-teendo-halvany); color: var(--tervezo-teendo-ink); border: 1px solid var(--tervezo-teendo); }
.tervezo-wl-kesz-chip { background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink); border: 1px solid var(--tervezo-nezd); }
/* 4.1/P-52: „mi valtozott a keresem ota" panel fejlece */
.tervezo-valtozas-fej { font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink-masod); margin-bottom: 6px;
                        padding-bottom: 6px; border-bottom: 1px solid var(--tervezo-keret); }
/* 4.1/P-53: tetel-szurok a szerkesztoben -- ugyanaz a chip-nyelv, mint a munkalistan */
.tervezo-itemfilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                       margin: 8px 0 12px; }
.tervezo-itemfilter-jel { font-size: var(--tervezo-fs-ui); color: var(--tervezo-atmeneti-ink); }

/* ── 4.4 / P-102: TERVEZESI SEGEDANYAGOK panel a munkalistan ─────────────────
   User-igeny 2026-09-08: 15-20 tervezeshez kapcsolodo Word-doksi legyen
   letoltheto, kategoriakkal attekinthetoen, es evente frissul.
   Becsukva EGY sor magas -- nem tolja el a munkat, de a szamlaloval
   felfedezheto (G2). A user gepe 883 CSS px szeles (merve), ezert a sor
   szeles kepernyore optimalizalt racs helyett TORDELHETO flex. */
.tervezo-docs { margin: 8px 0 4px; border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); background: var(--tervezo-felulet); }

.tervezo-docs-fej {
    display: flex; align-items: center; gap: 6px;
    width: 100%; text-align: left; padding: 7px 10px;
    border: 0; background: transparent; cursor: pointer;
    font-size: var(--tervezo-fs-ui); font-weight: 600; color: var(--tervezo-ink);
}
.tervezo-docs-fej:hover { background: var(--tervezo-sav); }
.tervezo-docs-nyil { color: var(--tervezo-ink-halvany); font-size: var(--tervezo-fs-jel); }
.tervezo-docs-szam { color: var(--tervezo-ink-halvany); font-weight: 400; }

.tervezo-docs-torzs { padding: 2px 10px 10px; border-top: 1px solid var(--tervezo-lap); }

.tervezo-docs-csoport { margin-top: 8px; }
.tervezo-docs-csoport-fej {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: var(--tervezo-fs-ui); font-weight: 600; color: var(--tervezo-ink-halvany);
    padding: 2px 0 4px; border-bottom: 1px solid var(--tervezo-lap);
}

/* A SOR tordelhet: 883 px-es viewporton a hosszu doksi-nevek mellett a
   meret + a gomb kulonben kifolyna. */
.tervezo-docs-sor {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 5px 0; border-bottom: 1px solid var(--tervezo-sav); font-size: var(--tervezo-fs-ui);
}
.tervezo-docs-nev { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.tervezo-docs-meret { flex: 0 0 auto; }

/* A kiterjesztes-jelzo: kicsi, halvany, EGYSEGES szelesseg -- igy a nevek
   egy vonalban kezdodnek. */
.tervezo-docs-kit {
    flex: 0 0 34px; text-align: center;
    font-size: var(--tervezo-fs-jel); text-transform: uppercase; letter-spacing: .3px;
    color: var(--tervezo-ink-halvany); background: var(--tervezo-lap); border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kis); padding: 1px 0;
}

.tervezo-docs-hiba { color: var(--tervezo-teendo-ink); font-size: var(--tervezo-fs-ui); display: inline-flex; align-items: center; gap: 6px; }

/* A MUTATOTT terv-ev a panel fejlecben -- kicsi, halvany, de leolvashato. */
.tervezo-docs-ev {
    font-size: var(--tervezo-fs-jel); font-weight: 400; color: var(--tervezo-ink-halvany);
    background: var(--tervezo-lap); border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); padding: 0 7px;
}
/* Ev-valaszto chipek (csak tobb ev eseten jelennek meg). */
.tervezo-docs-evek { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0 2px; }

/* ── D12-parity: SMART-cél szerkesztése HELYBEN (2026-09-10) ─────────────
   A mai editor a lista alji mezőjébe másolja a szöveget; ott a beírás alatt
   lévő ÚJ cél piszkozata elveszik. Itt a sor a saját helyén válik mezővé. */
.tervezo-smart-szerk { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.tervezo-smart-szerk .tervezo-cinput { flex: 1 1 auto; min-width: 0; }
/* A ceruza halvány, mint a törlés — de hoverre KÉK (nem piros): nem romboló. */
.tervezo-smart-edit:hover { color: var(--tervezo-nezd-ink); }

/* ── 3.4/b: KÉP-NAGYÍTÁS (mérve 2026-09-10, F61/O4) ──────────────────────
   A tervekbe ágyazott képek natúr 1749x692-esek, és 851x337-en (49%) látszottak
   — a bennük lévő diagram-szöveg fele méreten. A felirat a FELFEDEZHETŐSÉG
   (K5: a hover-kurzor önmagában nem elég), a nagyítás pedig natúr méretben,
   görgethetően mutatja a képet. */
.tervezo-kep-info { display: block; font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany); margin: 2px 0 6px;
                    cursor: default; }
.tervezo-nagyitas { position: fixed; inset: 0; z-index: 1100; background: rgba(20,22,26,.88);
                    display: flex; flex-direction: column; }
.tervezo-nagyitas-sav { flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
                        justify-content: flex-end; padding: 6px 10px; color: var(--tervezo-keret); }
.tervezo-nagyitas-meret { font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink-inaktiv); }
.tervezo-nagyitas-zar { background: none; border: 1px solid var(--tervezo-ink-halvany); border-radius: var(--tervezo-r-kis);
                        color: var(--tervezo-keret); cursor: pointer; font-size: var(--tervezo-fs-cim); line-height: 1;
                        padding: 2px 10px; }
.tervezo-nagyitas-zar:hover { background: var(--tervezo-ink); border-color: var(--tervezo-ink-inaktiv); }
/* A torzs gorget, ha a kep nagyobb a nezetnel -- a kep NEM zsugorodik. */
.tervezo-nagyitas-torzs { flex: 1 1 auto; overflow: auto; padding: 0 10px 10px;
                          display: flex; align-items: flex-start; justify-content: center; }
.tervezo-nagyitas-kep { max-width: none; background: var(--tervezo-felulet); }

/* ── 3.4/c: KERESŐ a nagy íveken (mérve 2026-09-10, F61/O7) ─────────────
   A 479 tételes ív 95 képernyő magas, egyetlen fejezettel — ott a
   fejezet-navigátor tárgy nélküli. A sáv kompakt: egy mező, a találat-szám
   és a törlés; nem visz el helyet a tartalomtól. */
.tervezo-kereso-sav { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.tervezo-kereso { flex: 0 1 320px; min-width: 0; padding: 3px 8px; font-size: var(--tervezo-fs-ui);
                  border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); }
.tervezo-kereso:focus { outline: none; border-color: var(--tervezo-nezd);
                        box-shadow: 0 0 0 3px var(--tervezo-nezd-halvany); }
.tervezo-kereso-torol { background: none; border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kartya);
                        color: var(--tervezo-ink-halvany); cursor: pointer; font-size: var(--tervezo-fs-ui); line-height: 1;
                        padding: 2px 8px; }
.tervezo-kereso-torol:hover { background: var(--tervezo-sav); color: var(--tervezo-nezd-ink); border-color: var(--tervezo-nezd); }
/* A "nincs találat" üzenet SAJÁT osztálya (ugyanaz a megjelenés, mint a
   típus-kapunál, de külön horgony — lásd a sablon kommentjét). */
.tervezo-nincs-talalat { background: var(--tervezo-nezd-halvany); border: 1px solid var(--tervezo-nezd); color: var(--tervezo-nezd-ink);
                         border-radius: var(--tervezo-r-kis); padding: 8px 12px; margin-bottom: 12px; }


/* ================= 5.2 OSSZEGZO TABLAZAT (ideali allapot pontozas) =================
   Terv: redesign/23-audit-osszegzo-spec.md
   SAJAT eloteg (tervezo-ossz-): a projektben mar ketszer vitte el egy uj elem a
   szomszed proba szelektorat, ezert itt semmi nem oszt osztalyt masikkal. */

.tervezo-ossz {
    border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kis);
    margin: 0 0 12px;
    background: var(--tervezo-felulet);
}

.tervezo-ossz-fej {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: var(--tervezo-sav);
    padding: 8px 12px;
    font-weight: 600;
    border-radius: var(--tervezo-r-kis) var(--tervezo-r-kis) 0 0;
    cursor: pointer;
}

.tervezo-ossz-fej:hover { background: var(--tervezo-lap); }

.tervezo-ossz-nyil { display: inline-block; width: 12px; color: var(--tervezo-ink-halvany); }

.tervezo-ossz-ev {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--tervezo-r-kartya);
    background: var(--tervezo-nezd-halvany);
    color: var(--tervezo-ink);
    font-size: var(--tervezo-fs-jel);
    font-weight: 600;
}

.tervezo-ossz-torzs { padding: 10px 12px 12px; }

.tervezo-ossz-valaszto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

/* SAJAT osztaly, NEM tervezo-notice es NEM tervezo-docs-notice: mindkettot mas
   uzenet hasznalja, es egy szelektor mar ketszer szedte fel a rossz szoveget. */
.tervezo-ossz-notice {
    padding: 10px 12px;
    background: var(--tervezo-sav);
    border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kis);
    color: var(--tervezo-ink-masod);
    font-size: var(--tervezo-fs-ui);
}

.tervezo-ossz-osszefoglalo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
}

.tervezo-ossz-nagy { font-size: var(--tervezo-fs-cim); font-weight: 700; color: var(--tervezo-ink); }

.tervezo-ossz-figyelem { background: var(--tervezo-atmeneti-halvany); border-color: var(--tervezo-atmeneti); color: var(--tervezo-atmeneti-ink); }

/* A TABLAZAT a SAJAT keretén belül gorget. Merve: 18 temakor + cegnev nem fer ki
   883 px-en -- a LAP viszont nem csordulhat tul, ezert itt van az overflow. */
.tervezo-ossz-keret {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kis);
    -webkit-overflow-scrolling: touch;
}

.tervezo-ossz-tabla {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tervezo-fs-jel);
    width: auto;
    margin: 0;
}

.tervezo-ossz-tabla th,
.tervezo-ossz-tabla td {
    border-right: 1px solid var(--tervezo-lap);
    border-bottom: 1px solid var(--tervezo-lap);
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
}

/* A CEGNEV a helyen marad vizszintes gorgetesnel -- kulonben 18 oszlop utan
   nem tudni, melyik sort olvassuk. */
.tervezo-ossz-cegfej,
.tervezo-ossz-cegnev {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--tervezo-felulet);
    text-align: left;
    font-weight: 500;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--tervezo-keret);
}

.tervezo-ossz-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--tervezo-sav);
    font-weight: 600;
    color: var(--tervezo-ink-masod);
}

.tervezo-ossz-cegfej { z-index: 4; }

.tervezo-ossz-oszlopfej { min-width: 30px; cursor: help; }

.tervezo-ossz-osszfej,
.tervezo-ossz-lefedfej { min-width: 52px; }

.tervezo-ossz-cella { min-width: 30px; cursor: help; font-variant-numeric: tabular-nums; }

.tervezo-ossz-ossz { font-weight: 700; border-left: 2px solid var(--tervezo-keret); }

.tervezo-ossz-lefed {
    color: var(--tervezo-ink-halvany);
    font-size: var(--tervezo-fs-jel);
    font-variant-numeric: tabular-nums;
}

.tervezo-ossz-lefed-keves { color: var(--tervezo-atmeneti-ink); background: var(--tervezo-atmeneti-halvany); font-weight: 600; }
.tervezo-ossz-lefed-nulla { color: var(--tervezo-ink-inaktiv); }

/* SZIN-SAVOK. A NULL (nincs kitoltve) SAJAT szint kap, NEM a "rossz" szinet:
   a piros azt sugallna, hogy megmertuk es rossz -- pedig el sem kezdtek. */
.tervezo-ossz-jo      { background: var(--tervezo-ok-halvany); color: var(--tervezo-ok-ink); }
/* A "kozepes" fok EGYBEOLVAD a "jo"-val: kulon szinnel HATODIK jelentes lenne.
   A cellaban ott all a szazalek is (osszCellaSzoveg), tehat a fok kiolvashato
   marad -- a szin csak megerosites. (2026-09-14) */
.tervezo-ossz-kozepes { background: var(--tervezo-ok-halvany); color: var(--tervezo-ok-ink); }
.tervezo-ossz-gyenge  { background: var(--tervezo-atmeneti-halvany); color: var(--tervezo-atmeneti-ink); }
.tervezo-ossz-rossz   { background: var(--tervezo-teendo-halvany); color: var(--tervezo-teendo-ink); }
.tervezo-ossz-ures    { background: var(--tervezo-sav); color: var(--tervezo-ink-inaktiv); }
.tervezo-ossz-nincs   { background: var(--tervezo-lap); color: var(--tervezo-ink-inaktiv); }

/* A RESZLEGESEN kitoltott cella LATHATOAN mas: a szam onmagaban felrevezet
   (merve: 3% kiirva, 93% a megadott valaszokon). */
.tervezo-ossz-reszleges {
    background-image: repeating-linear-gradient(
        135deg, rgba(0, 0, 0, .07) 0, rgba(0, 0, 0, .07) 1px, transparent 1px, transparent 4px);
}

/* JELMAGYARAZAT: itt allnak a temakor-nevek EGYSZER, az atlagukkal. */
.tervezo-ossz-jelmagyarazat { margin-top: 10px; }

.tervezo-ossz-jm-fej { margin-bottom: 4px; }

.tervezo-ossz-jm-sor {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: var(--tervezo-fs-ui);
    border-bottom: 1px solid var(--tervezo-lap);
}

.tervezo-ossz-jm-szam {
    flex: 0 0 22px;
    text-align: center;
    font-weight: 700;
    color: var(--tervezo-ink-masod);
    background: var(--tervezo-lap);
    border-radius: var(--tervezo-r-kis);
}

.tervezo-ossz-jm-nev { flex: 1 1 auto; min-width: 0; }

.tervezo-ossz-jm-ertek {
    flex: 0 0 48px;
    text-align: center;
    font-weight: 700;
    border-radius: var(--tervezo-r-kis);
    padding: 1px 0;
    font-variant-numeric: tabular-nums;
}

/* KIS MONITOR / mobil: a cegnev-oszlop szukebb, hogy tobb temakor lassek egyszerre. */
@media (max-width: 700px) {
    .tervezo-ossz-cegfej,
    .tervezo-ossz-cegnev { max-width: 118px; }
    .tervezo-ossz-jm-nev { font-size: var(--tervezo-fs-jel); }
}

/* "nincs kerdes": az iven MINDEN kerdes ki van kapcsolva. Sajat jeloles, mert ez NEM
   ugyanaz, mint a "nem kezdte el" (lefed-nulla) -- ott van mit kitolteni, itt nincs. */
.tervezo-ossz-nincs-kerdes {
    color: var(--tervezo-atmeneti-ink);
    background: var(--tervezo-atmeneti-halvany);
    border-radius: var(--tervezo-r-kis);
    padding: 0 4px;
    font-size: var(--tervezo-fs-jel);
    cursor: help;
}

/* ===== 24-es spec: KOR-valaszto, ket fel, pontozo- es holding-jeloles ===== */

/* Mit takar a kor: a felirat eve (Tervezo-2026) es az adat eve (2025) ELTER,
   ezert a felulet KIMONDJA mindkettot -- kulonben a szam hazudna. */
.tervezo-wl-koralc { margin-left: 6px; white-space: nowrap; }

/* A holding-vezeto ceg MAS kerdoiv-keszletet kap (merve: 4 ilyen account). */
.tervezo-wl-holding {
    background: var(--tervezo-nezd-halvany);
    border-color: var(--tervezo-nezd);
    color: var(--tervezo-nezd-ink);
    margin-left: 6px;
}

/* AI-KOLTSEGSZAMLALO (user-dontes 2026-09-24): nem figyelmezteto jelzes, hanem
   informacio -- ezert HALVANY, nem szines. A ceg fejlecben csak ott jelenik meg,
   ahol mar van hasznalat. */
.tervezo-wl-aikoltseg {
    margin-left: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A ket fel a cegen BELUL: feliratos valaszto, NEM kulon becsukhato blokk --
   harmadik szintet nem hozunk be (a felhasznalo a ceg szintjen dolgozik). */
.tervezo-wl-fel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 2px;
    font-size: var(--tervezo-fs-jel);
}

.tervezo-wl-fel-cim {
    font-weight: 600;
    color: var(--tervezo-ink-masod);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tervezo-wl-fel-vonal {
    flex: 1 1 auto;
    height: 1px;
    background: var(--tervezo-keret);
}

/* A SOR TIPUS-JELE. Minden soron ott van (user-keres, 2026-09-11), hogy a jel
   OSZLOP legyen: a cimkek egy vonalban kezdodnek, a lista nem "billen" a
   pontozos soroknal. Rogzitett szelesseg kell hozza, kulonben a kulonbozo
   glifak mas-mas helyre tolnak. */
.tervezo-wl-tip {
    flex: 0 0 14px;
    width: 14px;
    text-align: center;
    font-size: var(--tervezo-fs-ui);
    line-height: 1;
    cursor: help;
}

/* A PONTOZOS iv jele KIEMELT marad: ez a tipus az, amit kulon keresni szoktak
   (F70/2 -- eddig a lekerdezes a tipust at sem adta). */
.tervezo-wl-pont { color: var(--tervezo-ok-ink); }

/* A tobbi tipus SEMLEGES: jelen van, de nem versenyez a cimkevel. */
.tervezo-wl-tip-halvany { color: var(--tervezo-ink-inaktiv); }

/* A pontozo-szuro zold aga ugyanigy tomor. A FEHER felirat a #4b7b58-on 4,9:1 --
   megfelel, ezert itt nem kell fix sotet tinta. */
.tervezo-wl-f-pont.tervezo-wl-f-on { background: var(--tervezo-ok); border-color: var(--tervezo-ok); color: var(--tervezo-felulet); }

/* ===== 25-os spec: WORD-LETOLTES ===== */

/* A sorban levo Word-gomb. SAJAT osztaly (nem `tervezo-chip`): a chipek allapotot
   jeleznek, ez viszont MUVELET -- ha ugyanugy nezne ki, a felhasznalo nem tudna,
   melyikre lehet kattintani. */
.tervezo-wl-word {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kis);
    background: var(--tervezo-felulet);
    color: var(--tervezo-ink);
    font-size: var(--tervezo-fs-jel);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tervezo-wl-word:hover { background: var(--tervezo-lap); border-color: var(--tervezo-ink-inaktiv); }

/* Keszul: a gomb KIMONDJA, es nem ugy nez ki, mintha kattinthato lenne. */
.tervezo-wl-word-tolt { color: var(--tervezo-ink-halvany); background: var(--tervezo-lap); cursor: default; }

/* Hiba: sikert NEM hazudunk -- latszik, es ujra hasznalhato. */
.tervezo-wl-word-hiba { color: var(--tervezo-teendo-ink); background: var(--tervezo-teendo-halvany); border-color: var(--tervezo-teendo); }

/* A szerkeszto fejlecben a gomb a tobbi vezerlo melle all. */
.tervezo-word-gomb { white-space: nowrap; }

/* A CEG-szintu Word-gomb: ugyanaz az alak, mint a soron levo, de a ceg-fejlecben all. */
.tervezo-wl-word-ceg { margin-left: 10px; }

/* ---------- 7.2 FEJLESZTENDOK panel (27-es spec) ---------- */
/* A gomb a ceg-fejlecben. SAJAT osztaly: a `.tervezo-wl-word` mar a sor- ES a
   ceg-gombon is rajta van, es a proba korabban emiatt merte a rossz elemet (F75). */
.tervezo-wl-fejl {
    margin-left: 10px;
    padding: 2px 9px;
    border: 1px solid var(--tervezo-nezd);
    border-radius: var(--tervezo-r-kartya);
    background: var(--tervezo-nezd-halvany);
    color: var(--tervezo-atmeneti-ink);
    font-size: var(--tervezo-fs-jel);
    white-space: nowrap;
    cursor: pointer;
}
.tervezo-wl-fejl:hover { background: var(--tervezo-nezd-halvany); }
.tervezo-wl-fejl-nyitva { background: var(--tervezo-nezd-halvany); border-color: var(--tervezo-nezd); }

.tervezo-wl-fejl-panel {
    margin: 0 0 6px 26px;
    padding: 10px 12px;
    border-left: 3px solid var(--tervezo-nezd);
    background: var(--tervezo-nezd-halvany);
    border-radius: 0 var(--tervezo-r-kis) var(--tervezo-r-kis) 0;
}

.tervezo-wl-fejl-fejlec {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: var(--tervezo-fs-ui);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tervezo-nezd-halvany);
}
.tervezo-wl-fejl-word { margin-left: auto; }

.tervezo-wl-fejl-terulet { margin-top: 10px; }
.tervezo-wl-fejl-cim {
    font-weight: 600;
    font-size: var(--tervezo-fs-ui);
    color: var(--tervezo-nezd-ink);
    margin-bottom: 3px;
}
.tervezo-wl-fejl-suly {
    font-size: var(--tervezo-fs-jel);
    color: var(--tervezo-atmeneti-ink);
    margin: 6px 0 2px 0;
}
.tervezo-wl-fejl-sor {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 2px 0;
    font-size: var(--tervezo-fs-ui);
    line-height: 1.45;
}
/* A kerdes rich-text lehet: a beagyazott bekezdesek ne toljanak szet mindent. */
.tervezo-wl-fejl-kerdes { flex: 1 1 auto; min-width: 0; }
.tervezo-wl-fejl-kerdes p { margin: 0; display: inline; }
.tervezo-wl-fejl-pont {
    flex: 0 0 auto;
    color: var(--tervezo-ink-halvany);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tervezo-wl-fejl-ures,
.tervezo-wl-fejl-hiba { font-size: var(--tervezo-fs-ui); padding: 4px 0; }
.tervezo-wl-fejl-hiba { color: var(--tervezo-teendo-ink); }

/* ---------- 28-as spec: belepo az IT-visszajelzes feluletere ---------- */
/* A `permission` kapun belul all (O.Planner.Access) -- akinek a munkalista
   latszik, annak a visszajelzes-felulet is jar. */
.tervezo-wl-itlink {
    margin-left: 10px;
    padding: 2px 9px;
    border: 1px solid var(--tervezo-nezd);
    border-radius: var(--tervezo-r-kartya);
    background: var(--tervezo-nezd-halvany);
    color: var(--tervezo-nezd-ink);
    font-size: var(--tervezo-fs-jel);
    white-space: nowrap;
    text-decoration: none;
}
.tervezo-wl-itlink:hover { background: var(--tervezo-nezd-halvany); text-decoration: none; }

/* ---------- 28-as spec: IT-visszajelzes panel a ceg soraban ---------- */
/* A ceg soraban all, mert az IT-tag CEGENKENT dolgozik (merve: 69% vs 2%). */
.tervezo-wl-it {
    margin-left: 8px; padding: 2px 9px;
    border: 1px solid var(--tervezo-nezd); border-radius: var(--tervezo-r-kartya);
    background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink);
    font-size: var(--tervezo-fs-jel); white-space: nowrap; cursor: pointer;
}
.tervezo-wl-it:hover { background: var(--tervezo-nezd-halvany); }
.tervezo-wl-it-nyitva { background: var(--tervezo-nezd-halvany); border-color: var(--tervezo-nezd); }

.tervezo-wl-it-panel {
    margin: 0 0 6px 26px; padding: 10px 12px;
    border-left: 3px solid var(--tervezo-nezd); background: var(--tervezo-nezd-halvany);
    border-radius: 0 var(--tervezo-r-kis) var(--tervezo-r-kis) 0;
}
.tervezo-wl-it-fejlec {
    font-size: var(--tervezo-fs-ui); margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--tervezo-nezd-halvany);
}
.tervezo-wl-it-terulet { margin-bottom: 12px; }
.tervezo-wl-it-cim {
    display: flex; align-items: baseline; gap: 6px;
    font-weight: 600; font-size: var(--tervezo-fs-ui); color: var(--tervezo-nezd-ink); margin-bottom: 3px;
}
.tervezo-wl-it-hiany { font-weight: 400; font-size: var(--tervezo-fs-jel); color: var(--tervezo-teendo-ink); }

.tervezo-wl-it-regi,
.tervezo-wl-it-hozzaszolas {
    font-size: var(--tervezo-fs-ui); line-height: 1.5;
    padding: 5px 9px; margin: 4px 0; border-radius: var(--tervezo-r-kis);
}
.tervezo-wl-it-regi { background: var(--tervezo-nezd-halvany); border-left: 2px solid var(--tervezo-nezd); }
.tervezo-wl-it-regi-cim { font-size: var(--tervezo-fs-jel); color: var(--tervezo-atmeneti-ink); margin-bottom: 2px; }
.tervezo-wl-it-regi p, .tervezo-wl-it-hozzaszolas p { margin: 0 0 4px 0; }

/* AZ ELOZO KOR szovege -- SEMLEGES, mert nem cselekszel tole: nem szerkesztheto es
   nem vezetheto at. Szandekosan halvanyabb, mint a mostani kor arany savja, es
   SZAGGATOTT KERETET NEM KAP: az a jel az "itt meg nincs semmi" jelentesre foglalt. */
.tervezo-wl-it-elozo {
    font-size: var(--tervezo-fs-ui); line-height: 1.5;
    padding: 5px 9px; margin: 4px 0; border-radius: var(--tervezo-r-kis);
    background: var(--tervezo-lap);
    border-left: 2px solid var(--tervezo-keret);
    color: var(--tervezo-ink-masod);
}
.tervezo-wl-it-elozo-cim {
    display: flex; align-items: baseline; gap: 6px;
    font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany); margin-bottom: 2px;
}
.tervezo-wl-it-elozo-jel { color: var(--tervezo-ink-inaktiv); }
.tervezo-wl-it-elozo p { margin: 0 0 4px 0; }
.tervezo-wl-it-hozzaszolas { background: var(--tervezo-nezd-halvany); border-left: 2px solid var(--tervezo-nezd); }
.tervezo-wl-it-hsz-fej { display: flex; align-items: baseline; gap: 6px; font-size: var(--tervezo-fs-jel); margin-bottom: 2px; }
.tervezo-wl-it-hsz-szoveg { white-space: pre-wrap; }

.tervezo-wl-it-uj { margin-top: 4px; }
.tervezo-wl-it-mezo {
    width: 100%; padding: 6px 8px; border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
    font: inherit; font-size: var(--tervezo-fs-ui); line-height: 1.5; resize: vertical;
}
.tervezo-wl-it-gombsor { display: flex; gap: 6px; margin-top: 4px; }
.tervezo-wl-it-btn {
    padding: 3px 10px; border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
    background: var(--tervezo-felulet); font-size: var(--tervezo-fs-ui); cursor: pointer;
}
.tervezo-wl-it-btn-fo { background: var(--tervezo-nezd-ink); border-color: var(--tervezo-nezd-ink); color: var(--tervezo-felulet); }
.tervezo-wl-it-btn-fo:disabled { opacity: .55; cursor: default; }
.tervezo-wl-it-link {
    border: 0; background: none; color: var(--tervezo-nezd-ink); font-size: var(--tervezo-fs-jel);
    cursor: pointer; padding: 0; text-decoration: underline;
}
.tervezo-wl-it-hiba { color: var(--tervezo-teendo-ink); font-size: var(--tervezo-fs-ui); }

/* ---------- 19-es spec SS12: VISSZAJELZO UZENET a ceg soraban ----------
   A JOVAHAGYOTT LATVANYTERVBOL beture atemelve (user: "Tetszik", 2026-09-28):
   .session/2026-09-28_terv-kitoltes/uzenet-panel-elonezet.html. Csak a meglevo
   Tervezo-valtozokbol dolgozik. A nyitogomb semleges, NYITVA arany -- igy nem mosodik
   ossze a szomszed IT-chippel. A cimzettek kerek cimkek; a tovabbi cimek cimke-mezo. */
.tervezo-wl-uzenet {
    margin-left: 8px; padding: 2px 9px;
    border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kartya);
    background: var(--tervezo-felulet); color: var(--tervezo-ink-masod);
    font-size: var(--tervezo-fs-jel); white-space: nowrap; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tervezo-wl-uzenet:hover { border-color: var(--tervezo-nezd);
    background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink); }
.tervezo-wl-uzenet-nyitva { border-color: var(--tervezo-nezd);
    background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink); }

.tervezo-wl-uz-panel {
    margin: 0 0 6px 26px; padding: 10px 12px; max-width: 720px;
    border-left: 3px solid var(--tervezo-nezd);
    background: var(--tervezo-felulet);
    border-radius: 0 var(--tervezo-r-kis) var(--tervezo-r-kis) 0;
    box-shadow: var(--tervezo-arnyek);
}
.tervezo-wl-uz-fej { display: flex; align-items: baseline; gap: var(--tervezo-gap-2);
    padding-bottom: 6px; margin-bottom: var(--tervezo-gap-2);
    border-bottom: 1px solid var(--tervezo-keret); font-size: var(--tervezo-fs-ui); }

.tervezo-wl-uz-cimzettek { display: flex; flex-wrap: wrap; gap: var(--tervezo-gap-1);
    margin-bottom: var(--tervezo-gap-2); }
.tervezo-wl-uz-cimzett { display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border: 1px solid var(--tervezo-keret);
    border-radius: 999px; background: var(--tervezo-felulet);
    font-size: var(--tervezo-fs-ui); cursor: pointer; user-select: none;
    transition: background .12s ease, border-color .12s ease; }
.tervezo-wl-uz-cimzett:hover { border-color: var(--tervezo-nezd); }
.tervezo-wl-uz-cimzett input { margin: 0; accent-color: var(--tervezo-nezd); }
.tervezo-wl-uz-cimzett:has(input:checked) { border-color: var(--tervezo-nezd);
    background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink); }
.tervezo-wl-uz-nincs-email { cursor: default; color: var(--tervezo-ink-inaktiv);
    background: var(--tervezo-lap); border-style: dashed; }
.tervezo-wl-uz-nincs-email:hover { border-color: var(--tervezo-keret); }

.tervezo-wl-uz-cimkesor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tervezo-gap-1);
    padding: 4px 6px; margin-bottom: var(--tervezo-gap-2);
    border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
    background: var(--tervezo-felulet); }
.tervezo-wl-uz-cimkesor:focus-within { border-color: var(--tervezo-nezd); }
.tervezo-wl-uz-cimke { display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 4px 2px 9px; border-radius: 999px;
    border: 1px solid var(--tervezo-nezd); background: var(--tervezo-nezd-halvany);
    color: var(--tervezo-nezd-ink); font-size: var(--tervezo-fs-ui); }
.tervezo-wl-uz-cimke-x { border: 0; background: transparent; cursor: pointer;
    color: inherit; font-size: 14px; line-height: 1; padding: 0 3px; opacity: .7; }
.tervezo-wl-uz-cimke-x:hover { opacity: 1; }
.tervezo-wl-uz-cimke-rossz { border-color: var(--tervezo-teendo);
    background: var(--tervezo-teendo-halvany); color: var(--tervezo-teendo-ink); }
.tervezo-wl-uz-cimek { flex: 1 1 140px; min-width: 120px; border: 0; outline: 0;
    padding: 3px 2px; font: inherit; font-size: var(--tervezo-fs-ui);
    background: transparent; color: var(--tervezo-ink); }
.tervezo-wl-uz-sugo { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
    margin: -4px 0 var(--tervezo-gap-2) 2px; }

.tervezo-wl-uz-it { display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: var(--tervezo-gap-2); font-size: var(--tervezo-fs-ui); cursor: pointer; }
.tervezo-wl-uz-it input { margin: 0; accent-color: var(--tervezo-nezd); }

.tervezo-wl-uz-szoveg { width: 100%; box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
    font: inherit; font-size: var(--tervezo-fs-ui); line-height: 1.5; resize: vertical;
    background: var(--tervezo-felulet); color: var(--tervezo-ink); }
.tervezo-wl-uz-szoveg:focus { outline: 0; border-color: var(--tervezo-nezd); }

.tervezo-wl-uz-lab { display: flex; align-items: center; gap: var(--tervezo-gap-2);
    margin-top: var(--tervezo-gap-2); }
.tervezo-wl-uz-ok { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ok-ink);
    background: var(--tervezo-ok-halvany); border: 1px solid var(--tervezo-ok);
    border-radius: var(--tervezo-r-kis); padding: 2px 8px; }


/* ==========================================================================
   KET GOMB -- C-vodor 3. lepes (2026-09-14), terv: redesign/31-design-atadas.md
   A felulet Bootstrap-gombokat hasznal. MERVE 2026-09-14 a 9999-es skinben:
     btn-outline-secondary -> a skin MAR a kivant masodlagos gombba teszi
                              (vilagos alap, szurke keret, 6px, hoveren arany) -> NEM nyulunk hozza
     btn-outline-primary   -> a skin NEM erinti, tehat a Bootstrap KEKJE maradt
     btn-outline-danger    -> a skin NEM erinti, tehat a Bootstrap PIROSA maradt
   Ezt a kettot irjuk at. Sajat eloteg + nagyobb specifikussag, !important NELKUL
   (a keret CSS-e utanunk tolt be, de a .tervezo-root .btn.<osztaly> (0,3,0)
   a Bootstrap (0,1,0) fole megy fuggetlenul a sorrendtol).
   ========================================================================== */

/* ELSODLEGES: arany korvonal + halvany arany kitoltes. Egy kepernyon keves van belole. */
.tervezo-root .btn.btn-outline-primary {
    background: var(--tervezo-nezd-halvany);
    border-color: var(--tervezo-nezd);
    color: var(--tervezo-nezd-ink);
    border-radius: var(--tervezo-r-kis);
    font-size: var(--tervezo-fs-ui);
    font-weight: 500;
}
.tervezo-root .btn.btn-outline-primary:hover:not([disabled]),
.tervezo-root .btn.btn-outline-primary:focus {
    background: var(--tervezo-nezd-eros);
    border-color: var(--tervezo-nezd);
    color: var(--tervezo-nezd-ink);
}
.tervezo-root .btn.btn-outline-primary[disabled] { opacity: .55; }

/* DESZTRUKTIV: NEM harmadik gomb-stilus, hanem a masodlagos ALAKJA piros tintaval.
   Teli piros nincs -- a piros soha nem disz. */
.tervezo-root .btn.btn-outline-danger {
    background: var(--tervezo-felulet);
    border-color: var(--tervezo-teendo);
    color: var(--tervezo-teendo-ink);
    border-radius: var(--tervezo-r-kis);
    font-size: var(--tervezo-fs-ui);
    font-weight: 500;
}
.tervezo-root .btn.btn-outline-danger:hover:not([disabled]),
.tervezo-root .btn.btn-outline-danger:focus {
    background: var(--tervezo-teendo-halvany);
    border-color: var(--tervezo-teendo);
    color: var(--tervezo-teendo-ink);
}

/* A masodlagos gomb meretet a skin nem allitja; a 13px a mi skalank. */
.tervezo-root .btn.btn-outline-secondary { font-size: var(--tervezo-fs-ui); }

/* A KOR-SZINTU ures allapot magyarazata (C-vodor 4. lepes, 2026-09-14).
   SEMLEGES, nem sarga: ez nem hibaag, hanem a vart allapot -- a terv-ivek a
   szezon indulasakor szuletnek. A sarga a "mindjart eldol" jelentesre foglalt. */
.tervezo-wl-kor-notice {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tervezo-gap-2);
    margin: 0 0 var(--tervezo-gap-3);
    padding: 10px 12px;
    background: var(--tervezo-sav);
    border: 1px solid var(--tervezo-keret);
    border-left: 3px solid var(--tervezo-nezd);
    border-radius: var(--tervezo-r-kartya);
    font-size: var(--tervezo-fs-ui);
    color: var(--tervezo-ink-masod);
    line-height: 1.5;
}

/* TELEFONON a dimenzio-valaszto FELIRATA elmarad (C-vodor 4. lepes, 2026-09-14).
   MERVE 375 px-en: a valaszto 175 px volt a 344 px-es savbol -- a fele. A ket gomb
   (IT / Holding) magaert beszel, a magyarazat pedig a `title`-ben marad.
   A sav igy NEGY sorrol HAROMRA rovidul. A 700-as toresponthoz igazodik, ahol a
   tobbi hosszu felirat is rovid valtozatra cserel. */
@media (max-width: 700px) {
    .tervezo-dimsel-lbl { display: none; }
}

/* A BEILLESZTETT TARTALOM SAJAT CIMSORAI (C-vodor 4. lepes, 2026-09-14).
   A valaszok Wordbol jonnek, es hoznak magukkal h1-h6-ot. Azok a bongeszo
   alapmeretevel rendereltek -- elesben mert h1 ~32 px a 15 px-es olvasott
   szoveg mellett, ami a lapot szetteszi es ellentmond a "negy betumeret, es
   nincs otodik" szabalynak. A tartalom NEM veszik el: a hierarchia megmarad
   (meret + vastagsag), csak a MI skalankon belul.
   A `:where()` NULLA specifikussagot ad, tehat ha egy tetel sajat stilust hoz,
   az tovabbra is felulirja -- nem eroszakoljuk ra a tartalomra. */
.tervezo-item-a :where(h1),
.tervezo-item-a :where(h2) {
    font-size: var(--tervezo-fs-cim);
    line-height: 1.35;
    margin: var(--tervezo-gap-4) 0 var(--tervezo-gap-2);
}
.tervezo-item-a :where(h3),
.tervezo-item-a :where(h4),
.tervezo-item-a :where(h5),
.tervezo-item-a :where(h6) {
    font-size: var(--tervezo-fs-szoveg);
    font-weight: 600;
    line-height: 1.45;
    margin: var(--tervezo-gap-3) 0 var(--tervezo-gap-1);
}

/* A szekcio-lista ALJAN az osszegzes (latvany-cel 3a, 2026-09-14). */
.tervezo-nav-ossz {
    margin-top: var(--tervezo-gap-3);
    padding-top: var(--tervezo-gap-2);
    border-top: 1px solid var(--tervezo-keret);
    font-size: var(--tervezo-fs-jel);
    color: var(--tervezo-ink-halvany);
}

/* ==========================================================================
   LATVANY-ELTERESEK, "tiszta megjelenes" tetelek -- redesign/33-latvany-elteresek.md
   (2026-09-14). Mind a `3a` latvany-celhoz igazit, uj adat nelkul.
   ========================================================================== */

/* 1. A SZEKCIO-LISTA PANEL: feher lap a szurke oldalon, nem csak egy elvalaszto
   vonal. Eddig atlatszo volt, jobbrol egy hajszalvonallal. */
.tervezo-nav {
    /* A 330 px a TELJES szelesseg legyen: a projektben nincs globalis
       `box-sizing: border-box`, ezert a keret es a belso margo raraddodna --
       merve 382 px jott ki a 330 helyett. */
    box-sizing: border-box;
    background: var(--tervezo-felulet);
    border: 1px solid var(--tervezo-keret);
    border-radius: var(--tervezo-r-kartya);
    box-shadow: var(--tervezo-arnyek);
    padding: var(--tervezo-gap-2);   /* 12 -> 8 px (2026-09-15): a nev elotti hezag reszeként */
}

/* 2. A panel FEJLECE: cim + kis becsukas-ikon, a teljes szelessegu gomb helyett. */
.tervezo-nav-fej {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tervezo-gap-2);
    margin-bottom: var(--tervezo-gap-2);
}
.tervezo-nav-cim {
    font-size: var(--tervezo-fs-jel); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tervezo-ink-halvany);
}
.tervezo-nav-fej .tervezo-nav-valt {
    padding: 0 6px; line-height: 1.4; border: 0; background: transparent;
    color: var(--tervezo-ink-inaktiv); font-size: var(--tervezo-fs-cim);   /* ikon-fok, mint a tobbi ikon-gomb */
}
.tervezo-nav-fej .tervezo-nav-valt:hover { color: var(--tervezo-nezd); background: transparent; }

/* 3. + 4. + 7. A SZEKCIO-TETEL: a romai szam SAJAT OSZLOPBAN, a nev alatt
   HALADAS-SAV a szammal. Eddig egyetlen sor volt, csak szammal. */
.tervezo-nav-item {
    display: grid;
    /* 30 px: 13 px-en a leghosszabb elo szam (XVIII., 54 ivnek 18 szakasza van) MERVE 29 px.
       A 26 px-es oszlopbol mar 15 px-en is kilogott a XVII. es a XVIII. */
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: var(--tervezo-gap-2);
    align-items: baseline;
    padding: var(--tervezo-gap-2);
    border-left: 3px solid transparent;
    border-radius: var(--tervezo-r-kis);
}
.tervezo-nav-item:hover { background: var(--tervezo-sav); color: var(--tervezo-ink); }
/* 3. Az AKTIV szekcio: halvany arany lap + arany sav. */
.tervezo-nav-item-aktiv,
.tervezo-nav-item-aktiv:hover {
    background: var(--tervezo-nezd-halvany);
    border-left-color: var(--tervezo-nezd);
}
.tervezo-nav-roman {
    grid-row: 1 / span 2;
    font-size: var(--tervezo-fs-ui);   /* a panel NEM olvasott szoveg -- nem no a 17 px-szel */
    color: var(--tervezo-ink-inaktiv);
    text-align: right;
}
.tervezo-nav-label { grid-column: 2; }
/* 4. A haladas-sav es a szam egy sorban, a nev ALATT. */
.tervezo-nav-sor2 {
    grid-column: 2;
    display: flex; align-items: center; gap: var(--tervezo-gap-2);
    margin-top: 5px;
}
.tervezo-nav-bar {
    flex: 1 1 auto; height: 3px; min-width: 0;
    background: var(--tervezo-keret); border-radius: 2px; overflow: hidden;
}
.tervezo-nav-bar > i { display: block; height: 100%; background: var(--tervezo-nezd); }
.tervezo-nav-bar-kesz > i { background: var(--tervezo-ok); }
.tervezo-nav-item .tervezo-nav-pont { margin-left: 0; flex: 0 0 auto; }

/* 2026-09-15, user-visszajelzes ("a szakaszvalaszto szovege elotti tavolsag tul nagy").
   MERVE 5011-en: a panel szeletol a nevig 61 px = 12 panel-margo + 3 sav + 8 tetel-margo
   + 30 romai-oszlop + 8 koz, mikozben az "I." 7 px, a "III." 14 px. A fix 30 px a 18
   szakaszos ivek XVIII.-a miatt kellett -- a 3 szakaszos iven 16-23 px-et pazarolt.
   Megoldas: a romai szam oszlopa az IV LEGHOSSZABB szamahoz igazodik. A szakasz-tetelek
   kulon racsok, ezert a KOZOS oszlop a panel racsan all, a tetelek `subgrid`-del veszik at.
   Ha a bongeszo nem tud subgridet, a fenti `30px minmax(0,1fr)` marad (a sor ervenytelen).
   CSAK 900 px felett: alatta a panel vizszintes csik (lasd a 900-as media-blokkot), es egy
   kesobbi `display: grid` azt felulirna. */
@media (min-width: 901px) {
    .tervezo-nav {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: var(--tervezo-gap-2);
        align-content: start;
    }
    .tervezo-nav > * { grid-column: 1 / -1; }
    .tervezo-nav-item { grid-template-columns: subgrid; }
    /* A nev legfeljebb KET sorban; a teljes nev a `title`-ben. */
    .tervezo-nav-label {
        white-space: normal;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

/* 11. A SZURO HATOKORE kimondva: a szamok az AKTIV dimenziora ertendok.
   Enelkul a "Modositasra var 2" ugy olvasodik, mintha az egesz iven 2 lenne. */
.tervezo-itemfilter-hatokor {
    font-size: var(--tervezo-fs-jel);
    color: var(--tervezo-ink-halvany);
    margin: -2px 0 var(--tervezo-gap-2);
}

/* 12. + 14. A SZEKCIO-FEJLEC: kulon "N. SZAKASZ" cimke, majd a nev, es a sor
   maradekat VONAL tolti ki. Eddig egy also hajszalvonal zarta a fejlecet. */
.tervezo-section-head {
    display: flex; align-items: baseline; gap: var(--tervezo-gap-2);
    flex-wrap: wrap;
    border-bottom: 0; padding-bottom: 0;
}
.tervezo-section-cimke {
    font-size: var(--tervezo-fs-jel); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tervezo-nezd-ink);
    flex: 0 0 auto;
}
.tervezo-section-nev { font-size: var(--tervezo-fs-cim); font-weight: 600; flex: 0 0 auto; }
.tervezo-section-vonal {
    flex: 1 1 40px; min-width: 20px; height: 1px;
    background: var(--tervezo-keret);
}

/* 22. A SZERKESZTES ALATTI valasz ARANY KERETES doboz -- a latvany-celon ez
   mondja meg, hol all a kurzor. A Quill sajat kerete 0 volt. */
.tervezo-item-active .ql-container {
    border: 1px solid var(--tervezo-nezd);
    border-radius: var(--tervezo-r-kis);
    background: var(--tervezo-felulet);
}
.tervezo-item-active .ql-toolbar { border-radius: var(--tervezo-r-kis) var(--tervezo-r-kis) 0 0; }

/* ── 33-as lista: uj adatot mutato tetelek (2026-09-14) ───────────────────── */

/* 5. Szekcio-szintu statusz-chipek az oldalsavban. Sajat sorban, a haladas ALATT:
   a szekcio-tetel igy harom sorbol all (nev / sav+szam / chipek), es a chipek
   nem szoritjak ossze a nevet. */
.tervezo-nav-chipek {
    grid-column: 2;
    display: flex; flex-wrap: wrap; gap: var(--tervezo-gap-1);
    margin-top: 5px;
}
.tervezo-nav-chipek .tervezo-chip { cursor: default; }

/* 6. A kikapcsolt kerdesek szama: SAJAT SOR az osszegzes alatt, halvanyabban --
   ez magyarazat, nem eredmeny. */
.tervezo-nav-ossz-mellek {
    display: block; margin-top: 3px;
    color: var(--tervezo-ink-inaktiv);
}

/* 16. A kerdes sorszama a szoveg ELOTT. FLEX, nem racs (javitva 2026-09-15): a
   `auto 1fr auto` racsban a MASODIK gyerek kapta a rugalmas oszlopot -- char iven
   a suly-chip, pontozo iven a kikapcsolo szem-ikon --, az 0 px-re zsugorodott, a
   kerdes szovege pedig a harmadik oszlopba szorult (MERVE: 5011 es 5044,
   `13.7px 0px 834px`). Flexben a sorrend a jelolesbol jon, barmi all a sorban. */
.tervezo-item-q {
    display: flex;
    column-gap: var(--tervezo-gap-2);
    align-items: baseline;
}
.tervezo-item-szam,
.tervezo-item-q > .tervezo-ki-btn { flex: 0 0 auto; }
.tervezo-item-szam {
    color: var(--tervezo-ink-inaktiv);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 17. A suly-chip KIVEVE (user-dontes 2026-09-15). */

/* 18. Az utmutato CSUKOTT sora: cimke + elonezet + hossz, egy sorban.
   Az elonezet rovidul, a hossz nem -- a hossz a donteshez kell. */
.tervezo-guide-toggle {
    display: flex; align-items: baseline; gap: var(--tervezo-gap-2);
    width: 100%; text-align: left;
}
.tervezo-guide-cimke {
    font-size: var(--tervezo-fs-jel); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tervezo-ink-halvany);
    flex: 0 0 auto;
}
.tervezo-guide-elonezet {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--tervezo-ink-halvany);
}
.tervezo-guide-hossz {
    flex: 0 0 auto;
    font-size: var(--tervezo-fs-jel);
    color: var(--tervezo-ink-inaktiv);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   MUNKALISTA -- 34-es lista (redesign/34-munkalista-elteresek.md, 2026-09-15)
   A `4b` latvany-celhoz igazit. A SAV-szabalyok a `.tervezo-wl-bar`-ra szukitve:
   a dimenzio-kapcsolo a szerkeszto fejleceben is ott van, azt NEM bantjuk.
   ========================================================================== */

/* 1. A cim a kepernyo EGYETLEN fejlec-cime (32-es stiluslap: 17 px, egy darab). */
.tervezo-wl-bar .tervezo-title { font-size: var(--tervezo-fs-cim); }
/* 2. A kor-magyarazat kis jel, nem felulet-szoveg. */
.tervezo-wl-bar .tervezo-wl-koralc { font-size: var(--tervezo-fs-jel); }
/* 3. Fuggoleges elvalaszto a kor es a nezopont kozott. */
.tervezo-wl-valaszto { flex: 0 0 1px; width: 1px; height: 18px; background: var(--tervezo-keret); }
.tervezo-wl-bar .tervezo-dimsel-lbl {
    font-size: var(--tervezo-fs-jel); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tervezo-ink-halvany); margin-right: 6px;
}
/* 4. IT / Holding EGY KERETBEN: szegmentalt kapcsolo, a gombok osszeernek. */
.tervezo-wl-bar .tervezo-dimsel { gap: 0; }
.tervezo-wl-bar .tervezo-dimsel button { border-radius: 0; margin-left: -1px; font-size: var(--tervezo-fs-ui); padding: 2px 12px; }
.tervezo-wl-bar .tervezo-dimsel button:first-of-type { border-radius: var(--tervezo-r-kis) 0 0 var(--tervezo-r-kis); margin-left: 0; }
.tervezo-wl-bar .tervezo-dimsel button:last-of-type { border-radius: 0 var(--tervezo-r-kis) var(--tervezo-r-kis) 0; }
/* 5. Osszesito a sav jobb szelen. */
.tervezo-wl-osszesito { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 6. A szam ZAROJEL NELKUL, a felirat utan. */
.tervezo-wl-f-szam { margin-left: 4px; font-variant-numeric: tabular-nums; }
/* 7. A nullas szuro OTT VAN, csak nem hivogat. A bekapcsolt allapot mindig erosebb. */
.tervezo-wl-f-nulla { color: var(--tervezo-ink-inaktiv); border-color: var(--tervezo-lap); }
/* 8. A tipus-szuro mas fajta vezerlo (a tobbi ALLAPOTOT szur): elkulonul. */
.tervezo-wl-filters .tervezo-wl-f-pont { margin-left: var(--tervezo-gap-3); }

/* 9. A cegsor halvany savon: a ceg a munka egysege, a sorai alatta. */
.tervezo-wl-head { background: var(--tervezo-sav); }
.tervezo-wl-head:hover { background: var(--tervezo-sav); box-shadow: inset 0 0 0 1px var(--tervezo-keret); }
/* 12. A ket osszesito kozt nincs pont, csak koz. */
.tervezo-wl-head .tervezo-wl-hiany,
.tervezo-wl-head .tervezo-wl-keres { margin-left: var(--tervezo-gap-2); }

/* 13. A temakor neve SOTET TINTA (latvany-cel 4b). A korabbi K5-os link-szin helyett a
   kattinthatosagot az aláhúzás es a kurzor mondja ki, ami megmarad. */
.tervezo-wl-tema { color: var(--tervezo-ink); }
/* 14. Hajszalvonal a sorok kozott. */
.tervezo-wl-row,
.tervezo-wl-hiany-sor { border-bottom: 1px solid var(--tervezo-lap); border-radius: 0; }

/* 15-16. A sor jobb oldala OSZLOPOKBAN: rogzitett szelessegu helyek, jobbra zarva. */
.tervezo-wl-c-allapot { flex: 0 0 180px; text-align: right; white-space: nowrap; }
.tervezo-wl-row .tervezo-wl-db,
.tervezo-wl-hiany-sor .tervezo-wl-db { flex: 0 0 64px; text-align: right; }
.tervezo-wl-c-halad { flex: 0 0 72px; text-align: right; white-space: nowrap; font-size: var(--tervezo-fs-ui); }
.tervezo-wl-c-word { flex: 0 0 50px; text-align: right; }
.tervezo-wl-c-word .tervezo-wl-word { margin-left: 0; }
.tervezo-wl-ures-jel { color: var(--tervezo-ink-inaktiv); }

/* 6/C. A "nincs kerdoiv" sor: ugyanaz az alak, mint a valodi sor, de HALVANY es nem kattinthato. */
.tervezo-wl-hiany-sor { display: flex; align-items: center; gap: 8px; width: 100%;
                        padding: 5px 8px; cursor: default; }
.tervezo-wl-hiany-sor .tervezo-wl-tema { color: var(--tervezo-ink-halvany); }
.tervezo-wl-hiany-sor .tervezo-wl-db { color: var(--tervezo-ink-inaktiv); }

/* A BAL OLDALI TERKOZ (user-visszajelzes 2026-09-15, kepernyokeppel). MERVE 1280 px-en:
   a cim 71 px-nel kezdodott, a becsukott oldalsav 35 px-nel er veget -- a 36 px harom
   retegbol allt: a keret `col`-ja 12 + a `.tervezo-root` 12 + a `.tervezo-worklist` 12.
   A ket utolso a MIENK, es duplan rakodott egymasra. A munkalistarol mindkettot levesszuk,
   igy a cim a keret sajat tartalmi szelere (47 px) kerul, oda, ahol a keret tobbi oldala is
   kezdodik. A gyoker margojat CSAK a munkalistan vesszuk le (`:has`): a szerkeszto ugyanezt a
   gyokeret keret NELKUL hasznalja, ott a 12 px kell. `:has` nelkuli bongeszoben a gyoker
   margoja marad (59 px) -- a munkalista-doboze akkor is lekerul. */
.tervezo-worklist { padding-left: 0; padding-right: 0; }
.tervezo-root:has(.tervezo-worklist) { padding-left: 0; padding-right: 0; }

/* Kis kepernyon a rogzitett oszlopok nem ferne el: ott a sor tordel, mint eddig. */
@media (max-width: 700px) {
    .tervezo-wl-c-allapot, .tervezo-wl-row .tervezo-wl-db, .tervezo-wl-hiany-sor .tervezo-wl-db,
    .tervezo-wl-c-halad, .tervezo-wl-c-word { flex: 0 0 auto; }
    .tervezo-wl-valaszto { display: none; }
}

/* ============================ 6.3/AI: AI-segito chat ============================
   Benyilo panel a szerkeszto mellett (vezetoi meeting 2026-09-23). A kep-nagyitas
   (z-index 1100) FOLE nem megy: az a legfelso reteg. Mobilon teljes szelesseg. */
/* AZ AI-GOMB FELTUNOBB (user-keres 2026-09-25). Eddig halvany volt: feher kitoltes,
   vekony keret -- egy uj funkciot igy senki nem talal meg. Mostantol a haz ELSODLEGES
   jelolese: telt arany kitoltes + a ra tervezett sotet tinta (8,7:1 kontraszt, lasd a
   --tervezo-nezd-kontraszt token megjegyzeset), nagyobb meret es erosebb arnyek.
   ⚠️ A regi szabaly a NEM LETEZO `--tervezo-arany` valtozot hasznalta: az ervenytelen
   var() miatt a keret a szoveg szinere esett vissza, tehat az aranynak szant korvonal
   SOHA nem latszott. A helyes token: --tervezo-nezd. */
/* A lebego nyitogomb. A 48-as lap 2.5 korvonalas valtozatot javasolt, de kimondta,
   hogy a feltunoseget ELESBEN a user donti el -- es hogy ha nem eleg, "a kitoltes
   maradhat, de a tinta akkor --tervezo-nezd-kontraszt legyen, ne feher".
   USER-DONTES 2026-09-27, elesben megnezve: legyen ismet hangosabb.
   Ezert TELI arany + SOTET tinta. A feher felirat NEM jon vissza: az az aranyon
   3:1 alatt van, a --tervezo-nezd-kontraszt viszont 8,7:1 (lasd a token megjegyzeset).
   Az arnyek a szotar EGYETLEN arnyeka marad -- a korabbi sajat, erosebb arnyek nem
   jott vissza: a feltunoseget a szin adja, nem egy masodik arnyek-fajta. */
.tervezo-ai-nyito { position: fixed; right: 18px; bottom: 18px; z-index: 1040;
                    display: inline-flex; align-items: center; gap: 8px;
                    padding: 12px 20px; border-radius: 999px; cursor: pointer;
                    border: 1px solid var(--tervezo-nezd);
                    background: var(--tervezo-nezd);
                    color: var(--tervezo-nezd-kontraszt);
                    box-shadow: var(--tervezo-arnyek);
                    font-size: var(--tervezo-fs-ui); font-weight: 600; }
.tervezo-ai-nyito:hover { filter: brightness(1.06); }
.tervezo-ai-nyito:active { transform: translateY(1px); }
.tervezo-ai-nyito-jel { font-size: 1.15em; line-height: 1; }

/* A CHAT-panel: jobbra dokkolt, teljes magassagu fiok.
   FIGYELEM -- a `.tervezo-ai` osztalyt NEM csak ez viseli: a tetelen BELULI
   `aismart` (1793) es `aispell` (1816) panelek is. Ezert a fiok-stilus CSAK a
   masodik osztallyal egyutt ervenyes. 2026-09-25: csupasz `.tervezo-ai`-kent a
   helyesiras-eredmeny is teljes magassagu fiokka valt, `top: 0`-val a ragados
   sav moge -- ettol bukott az I2 ("az eredmeny ODA kerul, ahol a felhasznalo
   nez"). A komponens-proba ezt mostantol ORZI. */
.tervezo-ai.tervezo-ai-panel {
              position: fixed; right: 0; top: 0; bottom: 0; width: 420px; max-width: 100vw;
              z-index: 1050; display: flex; flex-direction: column;
              background: var(--tervezo-felulet); border-left: 1px solid var(--tervezo-keret);
              box-shadow: var(--tervezo-arnyek); }
/* ZONA-SZINEK (48-as lap, 1. szabaly): SZURKE = beallitas, FEHER = tartalom.
   A fejlec es a beviteli sav a lap-szurken ul, koztuk a beszelgetes feheren --
   igy ranezesre latszik, hol allitasz es hol olvasol.
   A korabbi akcent-gradiens KIKERULT: a zona-hatart a szin-valtas jeloli, nem
   egy dekoracio, ami ket felulet kozott atmenetet szinlel. A cim elol a csillag
   is elmarad -- a panel neve elmondja, mi ez. */
.tervezo-ai-fej { flex: 0 0 auto; position: relative;
                  display: flex; flex-direction: column; gap: var(--tervezo-gap-1);
                  padding: 8px 12px; border-bottom: 1px solid var(--tervezo-keret);
                  background: var(--tervezo-lap); }
/* 1. sor: a panel neve es a ket muvelet. 2. sor: a CEL es a "Lat" chip.
   SORKOZ 1.25 (merve, 2026-09-27): a 17 px-es cimre a torzsszoveg 1,6-os sorkoze
   orokolodott, ettol a sor 27 px lett -- egy cimnek viszont nem kell laza sorkoz.
   Igy 22 px, es a 48-as lap 1.2 magassag-celjahoz ez 5 px. */
.tervezo-ai-fejsor { display: flex; align-items: center; gap: var(--tervezo-gap-2);
                     line-height: 1.25; }
.tervezo-ai-celsor { display: flex; align-items: center; gap: var(--tervezo-gap-2);
                     min-width: 0; }
/* A kis-fejlec ("CEL" / "EGYSEGEK"): tenykozlo cimke, nem kattinthato. */
.tervezo-ai-cimke { flex: 0 0 auto; font-size: var(--tervezo-fs-jel); font-weight: 600;
                    letter-spacing: .08em; color: var(--tervezo-ink-halvany); }
/* A "..." menu gombja. A zaro gomb margo-automatikaja itt mar nem kell: a sort a
   kitolto elem huzza szet, kulonben a ket gomb kozott is felosztana a helyet. */
.tervezo-ai-menu-gomb { background: none; border: 0; padding: 0 6px; cursor: pointer;
                        line-height: 1; letter-spacing: .05em;
                        font-size: var(--tervezo-fs-cim); color: var(--tervezo-ink-inaktiv); }
.tervezo-ai-menu-gomb:hover { color: var(--tervezo-ink); }
.tervezo-ai-fejsor .tervezo-ai-zar { margin-left: 0; }
/* A menu a fejlec ALJARA nyilik, a panel sajat arnyekaval. A `relative` a fejlecen
   all, ezert a menu nem tud kilogni a panelbol. */
.tervezo-ai-menu { position: absolute; top: 100%; right: 10px; z-index: 2;
                   min-width: 200px; padding: var(--tervezo-gap-1);
                   display: flex; flex-direction: column;
                   background: var(--tervezo-felulet);
                   border: 1px solid var(--tervezo-keret);
                   border-radius: var(--tervezo-r-kartya);
                   box-shadow: var(--tervezo-arnyek); }
.tervezo-ai-menu-cim { padding: 4px 8px 5px; font-size: var(--tervezo-fs-jel);
                       font-weight: 600; letter-spacing: .04em;
                       color: var(--tervezo-ink-halvany); }
.tervezo-ai-menu-sor { text-align: left; background: none; border: 0; cursor: pointer;
                       padding: 5px 8px; border-radius: var(--tervezo-r-kis);
                       font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink); }
.tervezo-ai-menu-sor:hover:not(:disabled) { background: var(--tervezo-nezd-halvany);
                                            color: var(--tervezo-nezd-ink); }
.tervezo-ai-menu-sor:disabled { cursor: default; color: var(--tervezo-ink-inaktiv); }

/* A "Lat" chip: AFFORDANCIA -- van mogotte tartalom, kinyithato (szotar 2.1:
   folytonos keret, kurzor-valtas). Ha egy anyag sincs kijelolve, TEENDO-szinu:
   ilyenkor a kuldes is tiltott, tehat a felhasznalonak dolga van vele. */
.tervezo-ai-lat { flex: 0 0 auto; margin-left: auto; cursor: pointer;
                  padding: 2px 10px; border-radius: 10px;
                  border: 1px solid var(--tervezo-nezd);
                  background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink);
                  font-size: var(--tervezo-fs-jel); white-space: nowrap; }
.tervezo-ai-lat:hover { background: var(--tervezo-nezd-eros); }
.tervezo-ai-lat-teendo { border-color: var(--tervezo-teendo);
                         background: var(--tervezo-teendo-halvany);
                         color: var(--tervezo-teendo-ink); }
.tervezo-ai-lat-teendo:hover { background: var(--tervezo-teendo-halvany); }

/* A "LAT" LAP: a fejlec alol nyilik, es SZURKE -- beallitas, nem tartalom. */
.tervezo-ai-lat-lap { flex: 0 0 auto; max-height: 55%; overflow-y: auto;
                      padding: var(--tervezo-gap-3) 12px var(--tervezo-gap-2);
                      display: flex; flex-direction: column; gap: var(--tervezo-gap-3);
                      background: var(--tervezo-lap);
                      border-bottom: 1px solid var(--tervezo-keret); }
.tervezo-ai-lat-blokk { display: flex; flex-direction: column; gap: var(--tervezo-gap-1); }
.tervezo-ai-lat-fej { display: flex; align-items: baseline; gap: var(--tervezo-gap-2);
                      flex-wrap: wrap; }
.tervezo-ai-lat-nev { font-size: var(--tervezo-fs-ui); font-weight: 600;
                      color: var(--tervezo-ink); }
.tervezo-ai-lat-fej .tervezo-ai-anyagszam { margin-left: 0; }
.tervezo-ai-lat-fej a { margin-left: auto; color: var(--tervezo-ink-masod);
                        text-decoration: underline; font-size: var(--tervezo-fs-jel); }
.tervezo-ai-lat-fej a + a { margin-left: var(--tervezo-gap-2); }
.tervezo-ai-lat-fej a:hover { color: var(--tervezo-ink); }
.tervezo-ai-lat-racs { display: flex; flex-direction: column; gap: 3px; }
/* Az iv nyolc-kilenc anyaga KET OSZLOPBAN fer el a 420 px-es panelen. */
.tervezo-ai-lat-ket { display: grid; grid-template-columns: 1fr 1fr;
                      gap: 3px var(--tervezo-gap-2); }
.tervezo-ai-lat-lab { display: flex; align-items: center; gap: var(--tervezo-gap-2);
                      padding-top: var(--tervezo-gap-2);
                      border-top: 1px solid var(--tervezo-keret); }

/* "AI dolgozik a kovetkezo valaszon..." (46 SS48; 48-as lap 2.2).
   A regi valtozat egy 6 px-es halvany pont volt a fejlecben -- ALIG LATHATOAN, es
   emiatt a felhasznalo azt hitte, nem tortenik semmi. Eloszor keretes chip lett
   belole, most pedig ATKOLTOZOTT a beszelgetes aljara: oda, ahol a kovetkezo valasz
   meg fog jelenni. Ott keresi a szem, es nem kell chipnek latszania -- a valasznak
   sincs doboza. Harom lepcsosen lukteto pont + kiemelo szin; a `role="status"` +
   `aria-live` miatt a kepernyoolvaso is bemondja. */
.tervezo-ai-allapot { align-self: stretch; display: flex; align-items: center; gap: 7px;
                      padding: 2px 0;
                      color: var(--tervezo-nezd); font-size: var(--tervezo-fs-ui);
                      font-weight: 600; letter-spacing: .01em; }
.tervezo-ai-pont { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
                   background: currentColor; display: inline-block;
                   animation: tervezo-ai-lüktet 1.2s ease-in-out infinite; }
.tervezo-ai-pont:nth-child(2) { animation-delay: .18s; }
.tervezo-ai-pont:nth-child(3) { animation-delay: .36s; }
@keyframes tervezo-ai-lüktet { 0%, 100% { opacity: .2; transform: scale(.8); }
                               50%      { opacity: 1;  transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
    .tervezo-ai-pont { animation: none; opacity: .85; }
}
.tervezo-ai-cim { flex: 0 0 auto; font-size: var(--tervezo-fs-cim); font-weight: 600; }
/* A megnyitott kerdes neve. Ez a CEL-sor EGYETLEN zsugorodo eleme: hosszu kerdesnel
   harom pontra vagjuk, hogy a "Lat" chip soha ne csusszon ki a panelbol. A teljes
   nev a tooltipben all.
   48-as lap 2.1: SOTET tinta, 13 px -- eddig halvany-szurke, 11 px volt, es a
   felhasznalo nem talalta meg a fejlec zajaban. A "· " elotag sem kell tobbe:
   a sort mar a "CEL" kis-fejlec nyitja. */
.tervezo-ai-hol { flex: 0 1 auto; min-width: 0; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap;
                  font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink); }
/* A CEL ROVID HIVATKOZASA ("I.3") -- user-keres 2026-09-27.
   MIERT KELL: szerkesztes kozben a kerdes SZOVEGE eltunik a laprol
   (`.tervezo-item-active .tervezo-item-q { display: none }`), a panel pedig
   takarja a szerkesztot. A hosszu nev raadasul harom pontra vagodik a fejlecben.
   A rovid jel viszont mindig kifer, es a kerdoiven is ez all a kerdes elott --
   tehat vissza lehet talalni vele. Ugyanaz a forras, mint a beemelo gombon. */
.tervezo-ai-celjel { display: inline-block; margin-right: 6px; padding: 0 5px;
                     border-radius: var(--tervezo-r-kis);
                     background: var(--tervezo-nezd-halvany); color: var(--tervezo-nezd-ink);
                     font-size: var(--tervezo-fs-jel); font-weight: 700; }
.tervezo-ai-zar { margin-left: auto; background: none; border: none; cursor: pointer;
                  font-size: var(--tervezo-fs-cim); line-height: 1; color: var(--tervezo-ink-inaktiv); }
.tervezo-ai-zar:hover { color: var(--tervezo-ink); }

/* A BESZELGETES a FEHER zona: ide csak tartalom kerul (kerdes, valasz, jelzes).
   A hatteret kiirjuk, nem a panelrol orokoljuk -- igy a ket szurke sav kozott
   akkor is megmarad a feher lap, ha a panel alapja valaha valtozik. */
.tervezo-ai-torzs { flex: 1 1 auto; overflow-y: auto; padding: 12px;
                    display: flex; flex-direction: column; gap: var(--tervezo-gap-2);
                    background: var(--tervezo-felulet);
                    scrollbar-width: thin; }
.tervezo-ai-torzs::-webkit-scrollbar { width: 8px; }
.tervezo-ai-torzs::-webkit-scrollbar-thumb { background: var(--tervezo-keret); border-radius: 999px; }
.tervezo-ai-torzs::-webkit-scrollbar-thumb:hover { background: var(--tervezo-ink-inaktiv); }
/* URES ALLAPOT (48-as lap 2.2): egy mondat, alatta a kesz keresek LISTAKENT.
   A korabbi szaggatott keretes, kozepre zart doboz kikerult: a szotarban (12-es lap
   2.1) a szaggatott keret MINDIG azt jelenti, hogy "itt meg nincs semmi, kezdd el" --
   itt viszont nagyon is van mit tenni, csak meg nem tetted. */
.tervezo-ai-ures { display: flex; flex-direction: column; gap: var(--tervezo-gap-3);
                   color: var(--tervezo-ink-masod); font-size: var(--tervezo-fs-ui);
                   line-height: 1.5; padding: var(--tervezo-gap-2) 0; }
.tervezo-ai-ures b { color: var(--tervezo-ink); }
.tervezo-ai-ures-mondat { margin: 0; }
/* A lista EGY keretben ul, a sorok kozott hajszalvonallal -- igy egy dolognak
   latszik, nem negy kulon gombnak. */
.tervezo-ai-ures-lista { display: flex; flex-direction: column;
                         border: 1px solid var(--tervezo-keret);
                         border-radius: var(--tervezo-r-kartya); overflow: hidden; }
.tervezo-ai-ures-sor { display: flex; flex-direction: column; gap: 1px;
                       text-align: left; background: none; border: 0; cursor: pointer;
                       padding: 8px 10px; }
.tervezo-ai-ures-sor + .tervezo-ai-ures-sor { border-top: 1px solid var(--tervezo-keret); }
.tervezo-ai-ures-sor:hover:not(:disabled) { background: var(--tervezo-nezd-halvany); }
.tervezo-ai-ures-sor:disabled { cursor: default; }
.tervezo-ai-ures-nev { font-size: var(--tervezo-fs-ui); font-weight: 600;
                       color: var(--tervezo-ink); }
.tervezo-ai-ures-sor:disabled .tervezo-ai-ures-nev { color: var(--tervezo-ink-inaktiv); }
.tervezo-ai-ures-leiras { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
                          line-height: 1.4; }

/* Egy uzenet = egy SOR: folul a kis cimke, alatta maga az uzenet. A cimke a
   buborekon KIVUL all (nem tartalom), a muvelet-gombok viszont BELUL maradnak --
   a teljes ablakos nezet ugyanis az uzenet-dobozt nagyitja ki, es a gomboknak
   ott is vele kell menniuk (48-as lap 3.: az elem nem koltozik a DOM-ban). */
.tervezo-ai-sor { display: flex; flex-direction: column; gap: 3px; max-width: 92%; }
.tervezo-ai-sor-user { align-self: flex-end; align-items: flex-end; }
.tervezo-ai-sor-assistant { align-self: stretch; max-width: 100%; }
.tervezo-ai-kicimke { display: flex; align-items: center; gap: 5px;
                      font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany); }
/* Az "AI" jel: kis arany korvonal. Nem chip es nem gomb -- csak annyit mond,
   hogy innentol a gep beszel. */
.tervezo-ai-jel { display: inline-block; padding: 0 5px; border-radius: 999px;
                  border: 1px solid var(--tervezo-nezd); color: var(--tervezo-nezd-ink);
                  font-size: var(--tervezo-fs-jel); font-weight: 700;
                  letter-spacing: .04em; line-height: 1.4; }

.tervezo-ai-uz { padding: 9px 12px; border-radius: var(--tervezo-r-kartya);
                 font-size: var(--tervezo-fs-szoveg); word-break: break-word;
                 line-height: 1.55; }
/* A `pre-wrap` a SZOVEGEN all, nem a buborekon -- user-jelzes 2026-09-27.
   MIERT: a buborekban a szoveg utan sablon-megjegyzesek allnak, es kozottuk
   SZOKOZ-CSOMOPONTOK maradnak. A `pre-wrap` ezeket nem nyeli le, hanem valodi
   tartalomkent rajzolja ki -- igy egy FANTOM URES SOR keletkezett a szoveg alatt.
   MERVE: a buborek 64 px volt 41 helyett, azaz 23 px (egy sormagassag) folosleg.
   A szovegre huzva a sortoresek tovabbra is megmaradnak, a szokozok viszont
   osszecsuknak, ahogy kell.
   FIGYELEM: ez a szabaly a `.tervezo-ai-formazott` ELOTT kell alljon -- az a
   valaszra `normal`-ra allitja vissza, es azonos sulyu szabalyok kozul a kesobbi nyer. */
.tervezo-ai-szoveg { white-space: pre-wrap; }
/* A SAJAT kerdes buborek: HALVANY SZURKE, jobbra igazitva, a sarka "befele" tort --
   igy ranezesre elvalik a valasztol, olvasas nelkul is.
   48-as lap 2.2: a korabbi arany buborek es arany keret KIKERULT. Az arany a
   panelen a fo muveletet jeloli; egy elkuldott kerdes nem muvelet, hanem elozmeny,
   ezert semleges. A keret is elmarad: a feher lapon a szurke kitoltes eleg. */
.tervezo-ai-user { background: var(--tervezo-lap);
                   border-bottom-right-radius: var(--tervezo-r-kis);
                   color: var(--tervezo-ink); }

/* A VALASZ a panel leghosszabb szovege -- OLVASHATOSAG az elso (user-visszajelzes
   2026-09-25: "a szines hatteren adott valasz rontja az olvashatosagot, mert nem
   kontrasztos"). Elobb a mustar hatter esett ki, most a doboz is:
   48-as lap 2.2 -- NINCS doboza, NINCS bal csikja. Ket oka van.
   1) A sarga csik a szotarban (12-es lap 2.3) "nem mentett, atmeneti allapotot"
      jelent. Egy kesz valaszon ez jelentes-utkozes volt.
   2) A valasz a beszelgetes torzse, nem egy betet: keretbe zarva a feher lapon
      idegen testnek latszott. Most egyszeruen ott all a lapon.
   A sorkoz 1.55 helyett 1.6: doboz nelkul a hosszu bekezdes tobb levegot kivan. */
.tervezo-ai-assistant {
    background: none;
    color: var(--tervezo-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    line-height: 1.6;
}

/* A formazott valasz tipografiaja. A `pre-wrap` itt KI van kapcsolva: a tagolast mar a
   jelolok adjak, kulonben minden sorvegbol ures sor lenne. */
.tervezo-ai-formazott { white-space: normal; }
.tervezo-ai-formazott > *:first-child { margin-top: 0; }
.tervezo-ai-formazott > *:last-child { margin-bottom: 0; }
.tervezo-ai-formazott p { margin: 0 0 8px; }
.tervezo-ai-formazott h4 { margin: 12px 0 6px; font-size: var(--tervezo-fs-szoveg);
                           font-weight: 700; color: var(--tervezo-ink-kiemelt); }
.tervezo-ai-formazott ul,
.tervezo-ai-formazott ol { margin: 0 0 8px; padding-left: 20px; }
.tervezo-ai-formazott li { margin: 0 0 3px; }
.tervezo-ai-formazott hr { border: 0; border-top: 1px solid var(--tervezo-keret); margin: 10px 0; }
.tervezo-ai-formazott strong { font-weight: 700; color: var(--tervezo-ink-kiemelt); }
.tervezo-ai-hiba { font-size: var(--tervezo-fs-ui); color: #a3372f; }

/* A LAB korabban egy szovegfal volt: kesz keresek, kapcsolo, harom lenyilo es a mezo
   mind egymas hegyen-hatan, azonos sulyban. Most a lab kulon alapot kap (elvalik a
   beszelgetestol), a szakaszok kozott halvany elvalaszto fut, es a lenyilok sajat
   kis dobozban ulnek -- igy a szem megtalalja, hol kezdodik valami uj. */
.tervezo-ai-lab { flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--tervezo-keret);
                  display: flex; flex-direction: column; gap: var(--tervezo-gap-2);
                  background: var(--tervezo-lap); }
.tervezo-ai-lab > .tervezo-ai-anyagok + .tervezo-ai-anyagok { border-top: 1px solid var(--tervezo-keret);
                                                              padding-top: var(--tervezo-gap-2); }
.tervezo-ai-input { width: 100%; resize: vertical; font-size: var(--tervezo-fs-szoveg);
                    border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis); padding: 6px 8px; }
/* A mezo alapbol a lab szurke alapjan ul: legyen FEHER, hogy latszodjon, ide kell irni.
   Fokuszban akcent-keret -- a bongeszo alapertelmezett kek gyuruje idegen lenne itt. */
.tervezo-ai-input { background: var(--tervezo-felulet); color: var(--tervezo-ink); }
.tervezo-ai-input:focus { outline: none; border-color: var(--tervezo-nezd);
                          box-shadow: 0 0 0 3px var(--tervezo-nezd-halvany); }
.tervezo-ai-input::placeholder { color: var(--tervezo-ink-inaktiv); }
.tervezo-ai-gombok { display: flex; gap: var(--tervezo-gap-2); justify-content: flex-end;
                     align-items: center; }
/* A beviteli sav gombjai NAGYOBBAK, mint a valasz alatti apro muvelet-gombok:
   ezekre celoz a felhasznalo minden fordulonal. Uj osztaly NEM kell hozza -- a
   meretet a sor adja. */
.tervezo-ai-gombok .tervezo-ai-atv { padding: 5px 14px; font-size: var(--tervezo-fs-ui); }
/* A "Kesz keres" lenyilo gombja: VEZERLO-chip (szotar 2.1) -- allitasz vele, ezert
   keret + allapot-szin, nyitva kitoltott. */
/* A FUGGOLEGES margo 5 px, nem 6 (merve, 2026-09-27): igy az eszkozsor 34 px helyett
   32 px, es a 48-as lap 1.2 magassag-celjahoz ez tovabbi 2 px. A gomb igy is 32 px
   magas, tehat kenyelmesen celozhato marad. */
.tervezo-ai-eszkoz { padding: 5px 12px; border-radius: var(--tervezo-r-kis); cursor: pointer;
                     border: 1px solid var(--tervezo-keret); background: var(--tervezo-felulet);
                     color: var(--tervezo-ink-masod); font-size: var(--tervezo-fs-ui);
                     white-space: nowrap;
                     transition: background .12s ease, border-color .12s ease, color .12s ease; }
.tervezo-ai-eszkoz:hover { border-color: var(--tervezo-nezd);
                           background: var(--tervezo-nezd-halvany);
                           color: var(--tervezo-nezd-ink); }
.tervezo-ai-eszkoz-on { border-color: var(--tervezo-nezd);
                        background: var(--tervezo-nezd-halvany);
                        color: var(--tervezo-nezd-ink); font-weight: 600; }
/* IKON-GOMB: negyzetes, csak a jel van benne. A jelentest a `title` es az
   `aria-label` hordozza -- a jel maga `aria-hidden`. */
.tervezo-ai-ikon { display: inline-flex; align-items: center; justify-content: center;
                   min-width: 30px; font-size: var(--tervezo-fs-ui); line-height: 1.2; }
.tervezo-ai-gombok .tervezo-ai-ikon { padding: 6px 8px; }

/* A "Lat" lap nyitva HALVANYITJA a beszelgetest: igy egyertelmu, hogy most
   allitasz, nem olvasol. Csak fenyero, nem `display` -- a gorgetes helye marad. */
.tervezo-ai-torzs-halvany { opacity: .45; }

/* 6.3/AI-2: kesz keresek. Chip-sor a beviteli mezo felett; a 420 px-es panelen tobb
   sorba tordel. Tiltva (nincs nyitott kerdes vagy fut egy fordulo) halvany, de OLVASHATO:
   a felhasznalonak latnia kell, mi lesz elerheto. */
/* 48-as lap 2.3: a chip-sor LENYILO lett. Kinyitva sajat, feher lapon ul a szurke
   savon -- igy latszik, hogy egy kulon reteg, nem a sav allando resze. */
.tervezo-ai-keszek { display: flex; flex-wrap: wrap; gap: var(--tervezo-gap-1);
                     padding: var(--tervezo-gap-2); border-radius: var(--tervezo-r-kartya);
                     background: var(--tervezo-felulet);
                     border: 1px solid var(--tervezo-keret); }
.tervezo-ai-kesz { padding: 4px 11px; border-radius: 999px; cursor: pointer;
                   border: 1px solid var(--tervezo-keret); background: var(--tervezo-felulet);
                   color: var(--tervezo-ink-masod); font-size: var(--tervezo-fs-ui); line-height: 1.4;
                   transition: background .12s ease, border-color .12s ease, color .12s ease; }
.tervezo-ai-kesz:hover:not(:disabled) { background: var(--tervezo-nezd-halvany);
                                        border-color: var(--tervezo-nezd);
                                        color: var(--tervezo-nezd-ink); }
.tervezo-ai-kesz:active:not(:disabled) { transform: translateY(1px); }
/* A TILTOTT allapot NEM szaggatott. A szotar (12-es lap 2.1) szerint a szaggatott
   keret MINDIG azt jelenti: "itt meg nincs semmi" -- egy tiltott gomb viszont van,
   csak most nem elerheto. Halvany, de folytonos keret. */
.tervezo-ai-kesz:disabled { cursor: default; color: var(--tervezo-ink-inaktiv);
                            border-color: var(--tervezo-keret); background: transparent; }

/* 6.3/AI-3: atvitel a tervbe. A gombsor a valasz ALATT ul, hogy a szoveg maradjon
   a fo dolog; reszenkent nezetben minden blokk egy jelolonegyzet. */
.tervezo-ai-atvitel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                      margin-top: var(--tervezo-gap-2); }
.tervezo-ai-atv { padding: 3px 9px; border-radius: var(--tervezo-r-kis); cursor: pointer;
                  border: 1px solid var(--tervezo-keret); background: var(--tervezo-felulet);
                  color: var(--tervezo-ink-masod); font-size: var(--tervezo-fs-jel);
                  transition: background .12s ease, border-color .12s ease, color .12s ease; }
/* A FO MUVELET: a "Beemelem a tervbe" ugyanugy nezett ki, mint a tobbi -- pedig
   ezert van az egesz valasz. 46 SS48-ban TELI arany + FEHER felirat lett belole;
   a 48-as lap 2.2 ezt ket okbol modositja:
     1) a feher az aranyon 3:1 alatt van (a teli arany olvashato felirata a
        --tervezo-nezd-kontraszt, nem a feher -- lasd a token megjegyzeset),
     2) a TELI arany a szotarban a "bekapcsolt vezerlo" jele; egy muvelet-gombon
        ezert masra tanit.
   Elsodleges gomb = arany korvonal + halvany arany kitoltes + arany-barna tinta. */
.tervezo-ai-atv-fo:not(:disabled) { background: var(--tervezo-nezd-halvany);
                                    border-color: var(--tervezo-nezd);
                                    color: var(--tervezo-nezd-ink); font-weight: 600; }

/* TELJES ABLAKBAN a gombok egy szeles, vilagos lapon alltak, apron -- a felhasznalo
   korberajzolta, hogy alig lathatok (user-keres 2026-09-27). Ott nagyobbak es
   kontrasztosabbak. A panelben valo meretuk valtozatlan. */
.tervezo-ai-teljes .tervezo-ai-atvitel { gap: 10px; margin-top: 14px; }
.tervezo-ai-teljes .tervezo-ai-atv { padding: 8px 16px; font-size: var(--tervezo-fs-ui);
                                     border-width: 2px; }
.tervezo-ai-teljes .tervezo-ai-atv:not(.tervezo-ai-atv-fo):not(:disabled) {
                                     color: var(--tervezo-ink); }

.tervezo-ai-atv:hover:not(:disabled) { border-color: var(--tervezo-nezd);
                                       background: var(--tervezo-nezd-halvany);
                                       color: var(--tervezo-nezd-ink); }
/* A fo muvelet hovere a GENERIKUS utan all: azonos sulyu szabalyok kozul a kesobbi
   nyer. (Korabban forditva volt, ezert a teli arany gomb hoverkor halvanyra valtott
   -- pont a kiemelest vesztette el, amiert kiemelt volt.) Erosebb kitoltes, azonos
   tinta: a gomb nem "vilagit ki", csak megerosodik. */
.tervezo-ai-atv-fo:not(:disabled):hover { background: var(--tervezo-nezd-eros);
                                          border-color: var(--tervezo-nezd);
                                          color: var(--tervezo-nezd-ink); }
/* Ugyanaz az ok, mint a kesz kereseknel: a szaggatott keret az "itt meg nincs
   semmi" jele, nem a "most nem elerheto" jele. */
.tervezo-ai-atv:disabled { cursor: default; color: var(--tervezo-ink-inaktiv);
                           border-color: var(--tervezo-keret); background: transparent; }
.tervezo-ai-reszek { display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
                     padding: 6px 8px; border-radius: var(--tervezo-r-kis);
                     background: var(--tervezo-lap); }
.tervezo-ai-resz { display: flex; align-items: flex-start; gap: 6px; margin: 0;
                   font-size: var(--tervezo-fs-jel); font-weight: 400; cursor: pointer;
                   white-space: pre-wrap; }
.tervezo-ai-resz input { margin-top: 3px; flex: 0 0 auto; }
/* 6.3/AI-5: elvitel-sor a beszelgetes alatt. */
.tervezo-ai-elvitel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
                      font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-inaktiv); }

.tervezo-ai-jelzes { font-size: var(--tervezo-fs-ui); color: var(--tervezo-ok-ink);
                     background: var(--tervezo-ok-halvany); border: 1px solid var(--tervezo-ok);
                     border-radius: var(--tervezo-r-kis); padding: 6px 8px; }

/* 48-as lap 2.3: A VALASZ MODJA -- haromallasu valaszto a ket korabbi jelolonegyzet
   helyett. Ugyanaz a lenyilo-forma, mint a kesz kereseknel: feher lap a szurke savon.
   Minden allas alatt egy rovid leiras all: a nevbol egyedul nem derulne ki, mit tesz. */
.tervezo-ai-modlista { display: flex; flex-direction: column;
                       border: 1px solid var(--tervezo-keret);
                       border-radius: var(--tervezo-r-kartya); overflow: hidden;
                       background: var(--tervezo-felulet); }
.tervezo-ai-modsor { display: grid; grid-template-columns: 18px 1fr;
                     text-align: left; background: none; border: 0; cursor: pointer;
                     padding: 7px 10px; column-gap: var(--tervezo-gap-1); }
.tervezo-ai-modsor + .tervezo-ai-modsor { border-top: 1px solid var(--tervezo-keret); }
.tervezo-ai-modsor:hover:not(:disabled) { background: var(--tervezo-nezd-halvany); }
.tervezo-ai-modsor:disabled { cursor: default; color: var(--tervezo-ink-inaktiv); }
.tervezo-ai-modjel { grid-row: 1 / span 2; color: var(--tervezo-nezd-ink);
                     font-size: var(--tervezo-fs-ui); line-height: 1.4; }
.tervezo-ai-modnev { font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink); }
.tervezo-ai-modsor-on .tervezo-ai-modnev { font-weight: 600; color: var(--tervezo-nezd-ink); }
.tervezo-ai-modleiras { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
                        line-height: 1.4; }

/* 6.3/AI-2: anyag-valaszto. Osszecsukva EGY sor (szamlaloval), hogy a panel alja ne
   teljen meg; kinyitva nyolc jelolonegyzet. */
.tervezo-ai-anyagfej { display: flex; align-items: center; gap: 6px; width: 100%;
                       background: none; border: 0; padding: 3px 2px; cursor: pointer;
                       border-radius: var(--tervezo-r-kis);
                       color: var(--tervezo-ink-masod); font-size: var(--tervezo-fs-ui); }
/* A sav mostantol maga is szurke, ezert a feher hover-alap "tartalomnak" latszana
   (48-as lap, 1. szabaly). Helyette halvany akcent: ez a kiemeles nyelve. */
.tervezo-ai-anyagfej:hover { color: var(--tervezo-ink); background: var(--tervezo-nezd-halvany); }
.tervezo-ai-anyagjel { width: 10px; color: var(--tervezo-ink-inaktiv); }
/* A SZAMLALO chip: ranezesre lathato, hany anyag van kijelolve. */
.tervezo-ai-anyagszam { margin-left: auto; color: var(--tervezo-ink-halvany);
                        font-size: var(--tervezo-fs-jel); background: var(--tervezo-felulet);
                        border-radius: 999px; padding: 1px 8px; }
.tervezo-ai-anyagfej:hover .tervezo-ai-anyagszam { background: var(--tervezo-nezd-halvany);
                                                   color: var(--tervezo-nezd-ink); }
.tervezo-ai-anyaglista { display: flex; flex-direction: column; gap: 3px;
                         padding: 4px 0 2px 16px; }
.tervezo-ai-anyag { display: flex; align-items: flex-start; gap: 6px; margin: 0;
                    font-size: var(--tervezo-fs-ui); font-weight: 400; cursor: pointer; }
.tervezo-ai-anyag input { margin-top: 3px; flex: 0 0 auto; }
.tervezo-ai-anyagsugo { color: var(--tervezo-ink-inaktiv); font-size: var(--tervezo-fs-jel);
                        padding-top: 4px; }
.tervezo-ai-anyagures { color: #a3372f; font-size: var(--tervezo-fs-jel); padding-top: 2px; }
/* 6.3/AI-4: az egyseg-valaszto a fenti osztalyokat ujrahasznalja; csak a
   Mind / Egyik sem hivatkozasok kellenek hozza. */
.tervezo-ai-anyagsugo a { color: var(--tervezo-ink-masod); text-decoration: underline; }
.tervezo-ai-anyagsugo a:hover { color: var(--tervezo-ink); }

@media (max-width: 900px) { .tervezo-ai.tervezo-ai-panel { width: 100vw; } }
/* 700 px alatt a felso sav kitolto eleme el van rejtve (sajat sorba tordelt, nincs
   mit szethuzni). Az AI-panel viszont ott mar TELJES SZELES, es a fejlec-, valasz-
   es eszkozsor-elrendezese eppen a kitoltore epul -- nelkule balra torlodnanak.
   Sajat elotag + nagyobb specifikussag, ahogy a 29-es leltar 7. korlatja eloirja. */
@media (max-width: 700px) {
    .tervezo-ai.tervezo-ai-panel .tervezo-spacer { display: block; }
}

/* ── HATTERANYAG FELTOLTESE (46 SS43, user-keres 2026-09-25) ────────────────
   A kitolto a SAJAT egysegehez tolt fel, a munkalista cegsorabol inditva. */
.tervezo-wl-feltolt { margin-left: 6px; font-size: var(--tervezo-fs-jel);
                      color: var(--tervezo-nezd-ink); white-space: nowrap; cursor: pointer;
                      border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kis);
                      padding: 1px 8px; }
.tervezo-wl-feltolt:hover { border-color: var(--tervezo-nezd);
                            background: var(--tervezo-nezd-halvany); }

/* HATTERANYAG-GYORSNEZET (user-keres 2026-09-26). Szelesebb, mint a feltolto ablak:
   ot oszlop fer el benne. A torzs onalloan gorgetheto -- a fejlec es a labjegyzet marad. */
.tervezo-anyagnezet { width: min(920px, 96vw); max-height: 86vh; margin: auto;
                      display: flex; flex-direction: column;
                      background: var(--tervezo-felulet); border-radius: var(--tervezo-r-kartya);
                      box-shadow: var(--tervezo-arnyek); overflow: hidden; }
.tervezo-anyagnezet-torzs { flex: 1 1 auto; overflow: auto; padding: 10px 14px; }
.tervezo-anyagnezet-lab { flex: 0 0 auto; padding: 8px 14px;
                          border-top: 1px solid var(--tervezo-keret);
                          font-size: var(--tervezo-fs-jel); }
/* EGY SZEKCIO = EGY EGYSEG. A fejlec egyszer mondja ki az egyseget, nem minden sor. */
.tervezo-anyag-csoport { margin: 0 0 var(--tervezo-gap-4); }
.tervezo-anyag-csoport:last-child { margin-bottom: var(--tervezo-gap-2); }
.tervezo-anyag-fej { display: flex; align-items: center; gap: var(--tervezo-gap-2);
                     margin: 0 0 var(--tervezo-gap-2); padding-bottom: 5px;
                     border-bottom: 1px solid var(--tervezo-keret); }
.tervezo-anyag-jel { color: var(--tervezo-nezd); font-size: 9px; line-height: 1; }
.tervezo-anyag-cim { font-size: var(--tervezo-fs-ui); font-weight: 600; color: var(--tervezo-ink); }
/* A mindenkinek szolo (kozos) blokk visszafogottabb: a felhasznalo a SAJAT egysegeit kezeli. */
.tervezo-anyag-kozos .tervezo-anyag-jel { color: var(--tervezo-ink-inaktiv); }
.tervezo-anyag-kozos .tervezo-anyag-cim { color: var(--tervezo-ink-halvany); font-weight: 500; }

.tervezo-anyag-lista { list-style: none; margin: 0; padding: 0; }
.tervezo-anyag-sor { display: flex; align-items: flex-start; gap: var(--tervezo-gap-2);
                     padding: 7px 8px; border-radius: var(--tervezo-r-kis); }
.tervezo-anyag-sor + .tervezo-anyag-sor { margin-top: 2px; }
.tervezo-anyag-sor:hover { background: var(--tervezo-sav); }
.tervezo-anyag-ikon { flex: 0 0 auto; font-size: 14px; line-height: 1.35;
                      filter: grayscale(1); opacity: .55; }
.tervezo-anyag-szoveg { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tervezo-anyag-nev { font-size: var(--tervezo-fs-ui); color: var(--tervezo-ink);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tervezo-anyag-meta { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tervezo-anyag-muvelet { flex: 0 0 auto; display: flex; align-items: center;
                         gap: var(--tervezo-gap-1); }

/* A torles ALAPBAN visszafogott (halvany x), es csak a soron allva valik hangsulyossa --
   nem akarjuk, hogy egy lista tele legyen piros gombokkal. */
/* HATTERANYAG-JELZES: alapban halvany, bekapcsolva akcent -- ranezesre latszik, melyik
   anyagba nezhet bele az AI. A kukatol elteroen ez MINDIG latszik: allapotot mutat,
   nem muveletet kinal. */
.tervezo-anyag-jelzo { border: 1px solid var(--tervezo-keret); background: transparent;
                       cursor: pointer; line-height: 1.4; padding: 2px 7px;
                       border-radius: 999px; color: var(--tervezo-ink-inaktiv);
                       font-size: var(--tervezo-fs-jel); letter-spacing: .02em;
                       transition: background .12s ease, border-color .12s ease, color .12s ease; }
.tervezo-anyag-jelzo:hover:not(:disabled) { border-color: var(--tervezo-nezd);
                                            color: var(--tervezo-nezd-ink); }
.tervezo-anyag-jelzo-on { border-color: var(--tervezo-nezd);
                          background: var(--tervezo-nezd-halvany);
                          color: var(--tervezo-nezd-ink); font-weight: 600; }
.tervezo-anyag-jelzo:disabled { cursor: default; opacity: .6; }

.tervezo-anyag-kuka { border: 0; background: transparent; cursor: pointer; line-height: 1;
                      padding: 3px 6px; border-radius: var(--tervezo-r-kis);
                      color: var(--tervezo-ink-inaktiv); font-size: var(--tervezo-fs-ui);
                      opacity: 0; transition: opacity .12s ease, color .12s ease; }
.tervezo-anyag-sor:hover .tervezo-anyag-kuka,
.tervezo-anyag-kuka:focus-visible { opacity: 1; }
.tervezo-anyag-kuka:hover:not(:disabled) { color: var(--tervezo-teendo-ink);
                                           background: var(--tervezo-teendo-halvany); }
/* Erintokepernyon nincs hover -- ott mindig latszodjon. */
@media (hover: none) { .tervezo-anyag-kuka { opacity: 1; } }

.tervezo-anyag-kerdes { display: inline-flex; align-items: center; gap: var(--tervezo-gap-1);
                        font-size: var(--tervezo-fs-jel); color: var(--tervezo-teendo-ink);
                        background: var(--tervezo-teendo-halvany); padding: 2px 4px 2px 8px;
                        border-radius: var(--tervezo-r-kartya); }
.tervezo-anyag-igen,
.tervezo-anyag-megse { border: 1px solid transparent; cursor: pointer; padding: 2px 8px;
                       border-radius: var(--tervezo-r-kis); font-size: var(--tervezo-fs-jel);
                       line-height: 1.5; }
.tervezo-anyag-igen { background: var(--tervezo-teendo); color: #fff; font-weight: 600; }
.tervezo-anyag-igen:hover:not(:disabled) { filter: brightness(1.06); }
.tervezo-anyag-megse { background: transparent; color: var(--tervezo-teendo-ink); }
.tervezo-anyag-megse:hover:not(:disabled) { border-color: var(--tervezo-teendo); }

.tervezo-anyag-ures { display: flex; flex-direction: column; align-items: center;
                      gap: var(--tervezo-gap-1); padding: var(--tervezo-gap-4) 0;
                      color: var(--tervezo-ink-halvany); text-align: center; }
.tervezo-anyag-uresjel { font-size: 26px; opacity: .35; filter: grayscale(1); }

.tervezo-wl-anyaggomb { margin-left: 6px; padding: 2px 10px; cursor: pointer;
                        border: 1px solid var(--tervezo-keret); border-radius: var(--tervezo-r-kartya);
                        background: transparent; color: var(--tervezo-ink);
                        font-size: var(--tervezo-fs-jel); line-height: 1.6; }
.tervezo-wl-anyaggomb:hover { border-color: var(--tervezo-nezd); }

.tervezo-feltolt-ablak { width: min(520px, 92vw); background: var(--tervezo-felulet);
                         border-radius: var(--tervezo-r-kartya); box-shadow: var(--tervezo-arnyek);
                         display: flex; flex-direction: column; overflow: hidden; }
.tervezo-feltolt-fej { display: flex; align-items: center; gap: var(--tervezo-gap-2);
                       padding: 10px 12px; border-bottom: 1px solid var(--tervezo-keret);
                       font-size: var(--tervezo-fs-cim); font-weight: 600; }
.tervezo-feltolt-torzs { padding: 12px; display: flex; flex-direction: column;
                         gap: var(--tervezo-gap-2); }
.tervezo-feltolt-sor { display: flex; align-items: center; gap: var(--tervezo-gap-2); }
.tervezo-feltolt-cimke { flex: 0 0 64px; font-size: var(--tervezo-fs-jel);
                         color: var(--tervezo-ink-halvany); }
/* Az EGYSEG szandekosan NEM mezo, hanem kiirt ertek: nem allithato at. */
.tervezo-feltolt-fix { font-weight: 600; }
.tervezo-feltolt-sugo { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
                        line-height: 1.5; }
.tervezo-feltolt-figyelem { font-size: var(--tervezo-fs-jel); color: var(--tervezo-atmeneti-ink);
                            background: var(--tervezo-atmeneti-halvany);
                            border-radius: var(--tervezo-r-kis); padding: 6px 8px; }
.tervezo-feltolt-hiba { font-size: var(--tervezo-fs-jel); color: var(--tervezo-teendo-ink);
                        background: var(--tervezo-teendo-halvany);
                        border-radius: var(--tervezo-r-kis); padding: 6px 8px; }
.tervezo-feltolt-kesz { font-size: var(--tervezo-fs-jel); color: var(--tervezo-ok-ink);
                        background: var(--tervezo-ok-halvany);
                        border-radius: var(--tervezo-r-kis); padding: 6px 8px; }
.tervezo-feltolt-lab { display: flex; justify-content: flex-end; gap: var(--tervezo-gap-2);
                       padding: 10px 12px; border-top: 1px solid var(--tervezo-keret); }
.tervezo-feltolt-kuld { border-color: var(--tervezo-nezd); font-weight: 600; }

/* TOBB FAJL (user-keres 2026-09-30): fajlonkent egy sor -- fent a NEV (szerkesztheto),
   alatta a fajlnev, meret es az allapot. Sok fajlnal a lista SAJAT maga gorget, hogy a
   gombsor az ablak aljan maradjon. */
.tervezo-feltolt-lista { display: flex; flex-direction: column; gap: 6px;
                         max-height: 260px; overflow-y: auto; }
.tervezo-feltolt-fajl { padding: 6px 8px; border: 1px solid var(--tervezo-keret);
                        border-left-width: 3px; border-radius: var(--tervezo-r-kis);
                        background: var(--tervezo-lap); }
.tervezo-feltolt-fajl-fo { display: flex; align-items: center; gap: 6px; }
.tervezo-feltolt-fajl-fo .tervezo-cinput { flex: 1 1 auto; min-width: 0; }
.tervezo-feltolt-fajl-meta { display: flex; align-items: baseline; gap: 4px; margin-top: 3px;
                             font-size: var(--tervezo-fs-jel); color: var(--tervezo-ink-halvany);
                             min-width: 0; overflow-wrap: anywhere; }
.tervezo-feltolt-nemolvas { color: var(--tervezo-atmeneti-ink); }
.tervezo-feltolt-allapot { white-space: nowrap; }
.tervezo-feltolt-f-fut  { border-left-color: var(--tervezo-nezd); }
.tervezo-feltolt-f-kesz { border-left-color: var(--tervezo-ok); }
.tervezo-feltolt-f-kesz .tervezo-feltolt-allapot { color: var(--tervezo-ok-ink); }
.tervezo-feltolt-f-hiba { border-left-color: var(--tervezo-teendo); }
.tervezo-feltolt-f-hiba .tervezo-feltolt-allapot { color: var(--tervezo-teendo-ink); }

/* Auditor-munkalap — 5.1. Terv: redesign/17-auditor-munkalap-spec.md */

/* A DINAMIKUS GYOKER (<component :is>) osztaly NELKUL zsugorodas-vedtelen marad:
   a Tervezonel elesben 1773 px lett egy 883 px-es ablakban (F34). Ezert a hej
   kap sajat osztalyt, es azon all a zsugorodas-javitas. */
.audit-shell { min-width: 0; max-width: 100%; width: 100%; }

/* ⚠️ IDE NE KERULJON `--audit-keret-h` / `--audit-bar-h` DEKLARACIO!
   A JS a MERT erteket a komponens gyokerere (`$el`) irja -- keret-hejban ez az App.vue
   gyokere, tehat a `.audit-root` ANNAK a leszarmazottja. Ha itt ujradeklaralnank a
   valtozot, az LEARNYEKOLNA az orokolt, mert erteket, es 0-n ragadna.
   ELESBEN MERVE (2026-09-07): pontosan ez tortent -- gorgetve a ragadós sav BECSUSZOTT
   a KiwiPro toolbarja ala (sav teteje 0 px, toolbar alja 39 px), mikozben a meres jo volt.
   A hianyzo erteket a `var(--x, <fallback>)` masodik parametere fedi le, ahogy a Tervezonel. */

/* ==========================================================================
   TOKEN-RETEG -- C-vodor 1. lepes (2026-09-14), terv: redesign/31-design-atadas.md
   Ugyanaz a rend, mint a Tervezonel: a semlegesek a keret 9999-es skinjebol
   jonnek, ezert a sotet mod magatol kovet. A `.audit-root` a `.audit-shell`
   GYEREKE, es a JS a shell-re ir -- ezert ide szin-token KERULHET, de a ket
   MERT valtozo (--audit-keret-h / --audit-bar-h) SOHA. Lasd a fenti figyelmeztetest. */
.audit-root {
    --audit-ink:         var(--text-main, #18181b);
    --audit-ink-halvany: var(--text-muted, #71717a);
    --audit-ink-inaktiv: #a1a1aa;
    --audit-keret:       var(--border-color, #e4e4e7);
    --audit-lap:         var(--bg-main, #f4f4f5);
    --audit-sav:         var(--table-header-bg, #fafafa);
    --audit-felulet:     var(--bg-card, #ffffff);
    --audit-arnyek:      var(--card-shadow, 0 4px 20px rgba(24, 24, 27, .05));

    --audit-nezd:           var(--accent-color, #c49e6f);
    --audit-nezd-ink:       #7d6136;
    --audit-nezd-halvany:   var(--accent-glow, rgba(196, 158, 111, .12));
    /* A KITOLTOTT arany felirata -- SZANDEKOSAN fix, lasd a Tervezo azonos tokenjet. */
    --audit-nezd-kontraszt: #09090b;
    --audit-atmeneti:       #d9b45a;
    --audit-atmeneti-ink:   #8a6512;
    --audit-ok:             #4b7b58;
    --audit-ok-ink:         #2f5c37;
    --audit-ok-halvany:     #eef4ef;
    --audit-teendo:         #c08a86;
    --audit-teendo-ink:     #97302b;
    --audit-teendo-halvany: #fbeeed;

    --audit-r-kis:    6px;
    --audit-r-kartya: 8px;

    /* HAROM betumeret (2026-09-15): a 15 px-es fok megszunt, ahogy a Tervezoben is --
       az olvasott szoveg egy fokon all a fejlec-cimmel (32-es stiluslap). */
    --audit-fs-jel:    11px;
    --audit-fs-ui:     13px;
    --audit-fs-szoveg: 17px;
    --audit-fs-cim:    17px;
}

body.dark-mode .audit-root {
    --audit-ink-inaktiv: #71717a;

    --audit-nezd-ink:       #e8d7bd;
    --audit-ok:             #6f9d7c;
    --audit-ok-ink:         #cfe3d4;
    --audit-ok-halvany:     rgba(111, 157, 124, .14);
    --audit-teendo:         #c98e89;
    --audit-teendo-ink:     #f0cfcc;
    --audit-teendo-halvany: rgba(201, 142, 137, .14);
}

.audit-muted { color: var(--audit-ink-halvany); }
.audit-small { font-size: var(--audit-fs-ui); }
.audit-error { margin: 16px; padding: 12px 14px; border: 1px solid var(--audit-teendo); background: var(--audit-teendo-halvany); color: var(--audit-teendo-ink); border-radius: var(--audit-r-kis); }
.audit-nincs { margin: 24px; max-width: 620px; }
.audit-nincs h2 { margin: 0 0 8px; font-size: var(--audit-fs-cim); }
.audit-ures { padding: 24px; }

/* --- ragadós sáv: a KERET toolbarja ALA ragad, nem ala csuszik (P-68) --- */
.audit-bar {
    position: sticky;
    top: var(--audit-keret-h, 0px);
    z-index: 20;
    background: var(--audit-felulet);
    border-bottom: 1px solid var(--audit-keret);
    padding: 8px 12px;
}
.audit-bar-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.audit-cim { font-size: var(--audit-fs-szoveg); }
.audit-select { padding: 3px 6px; border: 1px solid var(--audit-keret); border-radius: var(--audit-r-kis); background: var(--audit-felulet); }
.audit-kapcsolo { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: var(--audit-fs-ui); cursor: pointer; }
.audit-tolt { font-size: var(--audit-fs-ui); color: var(--audit-ink); }
.audit-hiba-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--audit-teendo-halvany); color: var(--audit-teendo-ink); border: 1px solid var(--audit-teendo);
    border-radius: var(--audit-r-kis); padding: 2px 8px; font-size: var(--audit-fs-ui);
}
.audit-notice-ok {
    margin-top: 8px; padding: 6px 10px; font-size: var(--audit-fs-ui);
    background: var(--audit-ok-halvany); border: 1px solid var(--audit-ok); color: var(--audit-ok-ink); border-radius: var(--audit-r-kis);
}

.audit-btn {
    padding: 3px 10px; border: 1px solid var(--audit-keret); border-radius: var(--audit-r-kis);
    background: var(--audit-sav); cursor: pointer; font-size: var(--audit-fs-ui);
}
.audit-btn:hover { background: var(--audit-lap); }
.audit-btn:disabled { opacity: .5; cursor: default; }
.audit-btn-mini { padding: 1px 7px; font-size: var(--audit-fs-ui); }
.audit-btn-danger { border-color: var(--audit-teendo); color: var(--audit-teendo-ink); background: var(--audit-felulet); }

/* --- torzs: bal oldalt az egysegek, jobbra a munkalap --- */
.audit-torzs { display: flex; align-items: flex-start; gap: 0; min-width: 0; }

.audit-egysegek {
    /* 22. visszajelzes (2026-09-08, user-dontes): 240 -> 180px, ES becsukhato.
       MERVE 883px-es viewporton (2093-HR iv, 111 tetel), a kerdes-szoveg oszlopa:
           240px sav -> 260px, atlag 4,31 sor, max 8, 103/111 harom+ soros
           180px sav -> 320px, atlag 3,50 sor
           becsukva  -> 500px, atlag 2,40 sor, max 4, 45/111
       A becsukas a nagy nyereseg; a 180px a nyitott allapotot javitja meg egy kicsit. */
    flex: 0 0 180px; width: 180px; min-width: 0;
    border-right: 1px solid var(--audit-keret);
    position: sticky;
    top: calc(var(--audit-keret-h, 0px) + var(--audit-bar-h, 48px));
    max-height: calc(100vh - var(--audit-keret-h, 0px) - var(--audit-bar-h, 48px));
    overflow-y: auto;
}
.audit-egysegek-fej { padding: 8px 12px; font-size: var(--audit-fs-ui); color: var(--audit-ink-halvany); border-bottom: 1px solid var(--audit-lap); }
.audit-egyseg {
    display: block; width: 100%; text-align: left;
    padding: 7px 12px; border: 0; border-bottom: 1px solid var(--audit-lap);
    background: var(--audit-felulet); cursor: pointer; font-size: var(--audit-fs-ui);
}
.audit-egyseg:hover { background: var(--audit-sav); }
.audit-egyseg-aktiv { background: var(--audit-nezd-halvany); box-shadow: inset 3px 0 0 var(--audit-nezd); }
/* 180px-en a hosszu nevek mar nem fernek egy sorba (merve: a leghosszabb 34 karakter,
   "New York Palota Budapest F&B (CER)"; 240px-en 0 nev tordelodott). Ezert LEGFELJEBB
   2 sor, utana harom pont -- a teljes nev a `title`-ben ott van (HTML). A hosszu, szokoz
   nelkuli reszek is tordelhetnek, hogy ne folyjanak ki a savbol. */
.audit-egyseg-nev {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}

/* A be/kicsukas kapcsoloja. MINDKET allapotban a fejlecben van (G2), es becsukva a
   kivalasztott egyseg nevet is viseli -- a nev kulonben elveszne, mert a munkalap
   <h2>-je nem ragados. A nev hosszan se tolja szet a fejlecet. */
.audit-sav-valt { display: inline-flex; align-items: center; gap: 2px; max-width: 260px; }
.audit-sav-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-egyseg-szam { display: block; font-size: var(--audit-fs-jel); color: var(--audit-ink-halvany); margin-top: 1px; }
.audit-sav { display: block; height: 3px; background: var(--audit-keret); border-radius: var(--audit-r-kis); margin-top: 4px; }
.audit-sav > i { display: block; height: 100%; background: var(--audit-nezd); border-radius: var(--audit-r-kis); }

.audit-munkalap { flex: 1 1 auto; min-width: 0; padding: 0 14px 40px; }
.audit-lap-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 6px; }
.audit-lap-fej h2 { margin: 0; font-size: var(--audit-fs-cim); }

.audit-szekcio { margin: 14px 0 0; }
.audit-szekcio-fej {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--audit-keret); margin-bottom: 2px;
}
.audit-szekcio-fej h3 { margin: 0; font-size: var(--audit-fs-szoveg); flex: 1 1 auto; min-width: 0; }

.audit-sor {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 7px 6px; border-bottom: 1px solid var(--audit-lap);
}
.audit-sor:hover { background: var(--audit-sav); }
.audit-kerdes { flex: 1 1 auto; min-width: 0; font-size: var(--audit-fs-ui); line-height: 1.45; }
/* A suly-jelzes ("x3") KIVEVE (user-dontes 2026-09-15, a Tervezo szerkesztojevel egyutt: "a sulyozas egyaltalan nem kell"). */

.audit-ertekek { flex: 0 0 auto; display: flex; gap: 3px; }
.audit-ertek {
    width: 30px; height: 28px; padding: 0;
    border: 1px solid var(--audit-keret); border-radius: var(--audit-r-kis); background: var(--audit-felulet);
    cursor: pointer; font-size: var(--audit-fs-ui); color: var(--audit-ink);
}
.audit-ertek:hover { background: var(--audit-lap); }
.audit-ertek-aktiv { background: var(--audit-nezd); border-color: var(--audit-nezd); color: var(--audit-nezd-kontraszt); font-weight: 600; }
.audit-ertek-torol { color: var(--audit-ink-inaktiv); }
.audit-ertek-torol.audit-ertek-aktiv { background: var(--audit-ink-halvany); border-color: var(--audit-ink-halvany); color: var(--audit-felulet); }

.audit-vezetoi { flex: 0 0 74px; text-align: right; font-size: var(--audit-fs-ui); }

/* A mentes-allapot LATHATO. A mai dashboard-audit-ban ez hianyzik: ott egy elszallt
   PATCH utan is bejelolve marad a gomb (A2). */
.audit-allapot { flex: 0 0 auto; font-size: var(--audit-fs-jel); color: var(--audit-ink-halvany); align-self: center; }
.audit-kuldes .audit-allapot { color: var(--audit-atmeneti-ink); }
.audit-hiba { background: var(--audit-teendo-halvany); }
.audit-hiba .audit-allapot { color: var(--audit-teendo-ink); font-weight: 600; }

@media (max-width: 780px) {
    .audit-torzs { flex-direction: column; }
    .audit-egysegek {
        flex: 1 1 auto; width: 100%; max-height: 220px;
        border-right: 0; border-bottom: 1px solid var(--audit-keret); position: static;
    }
    .audit-sor { flex-wrap: wrap; }
}

/* --- S1: 2-3 masik egyseg eredmenye a sor vegen (csak olvasas) --- */
.audit-ref-sav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0 8px; }
.audit-ref-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--audit-lap); border: 1px solid var(--audit-keret); border-radius: var(--audit-r-kis);
    padding: 2px 4px 2px 10px; font-size: var(--audit-fs-ui);
}
.audit-ref-x { border: 0; background: transparent; cursor: pointer; color: var(--audit-ink-halvany); font-size: var(--audit-fs-szoveg); line-height: 1; padding: 0 4px; }
.audit-ref-x:hover { color: var(--audit-teendo-ink); }
.audit-ref-valaszto { font-size: var(--audit-fs-ui); }

/* A fejlec-cimke es a cella UGYANAZT a szelesseget kapja, kulonben nem all oszlopba. */
.audit-ref-fej {
    flex: 0 0 58px; width: 58px; text-align: right;
    font-size: var(--audit-fs-jel); color: var(--audit-ink-inaktiv);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-ref-cella {
    flex: 0 0 58px; width: 58px; text-align: right;
    font-size: var(--audit-fs-ui); color: var(--audit-ink-halvany); align-self: center;
}

/* KI es MIKOR ertekelt -- jelzes erteku, ezert HALVANY es KICSI: ne vonja el a
   figyelmet a pontozasrol, de egy pillantassal leolvashato legyen. */
.audit-nevjegy {
    flex: 0 0 118px; width: 118px; align-self: center;
    font-size: var(--audit-fs-jel); line-height: 1.2; color: var(--audit-ink-inaktiv); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   AUDITOR-MUNKALAP IGAZITASA a Tervezo stilusahoz (user-keres, 2026-09-15)
   Sajat latvany-cel NINCS (a design-atadas csak a 4a / 4b / 3a kepernyot sorolja);
   a merce a 32-es stiluslap es a mar atallitott Tervezo. MERVE elotte, 1280 px-en,
   kivalasztott egyseggel (And Event Holding, 111 tetel) -- a szamok a szabalyoknal.
   A proba (Y-blokk) osztalyneveihez NEM nyulunk.
   ========================================================================== */

/* 1. BETUMERET-HORGONY. A 9999-es skin `body #app { font-size: 112% }`-ot ir, a gyoker
   pedig nem rogzitette az alapot: a sav, a legordulok, a sorok es az ures-felirat MERVE
   12,6 px-en alltak. Ugyanaz a horgony, mint a `.tervezo-root`-on. */
.audit-root { font-size: var(--audit-fs-ui); }

/* 2. A FOKUSZ mindig lathato es arany. MERVE elotte: `outline: none`. */
.audit-root :focus-visible { outline: 2px solid var(--audit-nezd); outline-offset: 2px; }

/* 3. FEJLECEK: 600-as vastagsag, a megszunt 15 px-es fok nelkul. A sav cime a Tervezo
   szerkesztojenek mintajat koveti (13/600 a savban), mert a munkalap sajat fejlec-cime
   az egyseg neve (h2). MERVE elotte: cim 15/700 · h2 17/500 · h3 15/500. */
.audit-cim { font-size: var(--audit-fs-ui); font-weight: 600; }
.audit-lap-fej h2 { font-weight: 600; }
.audit-szekcio-fej h3 { font-size: var(--audit-fs-cim); font-weight: 600; }
.audit-ref-x { font-size: var(--audit-fs-cim); }

/* 4. GOMBOK a stiluslap szerint: a masodlagos FEHER alapu, szurke kerettel, hoveren a
   keret sotetedik (MERVE elotte: #fafafa alap, hoveren szurke kitoltes). A destruktiv
   ugyanez az alak piros tintaval. */
.audit-btn { background: var(--audit-felulet); color: var(--audit-ink); font-weight: 500; padding: 3px 12px; }
.audit-btn:hover { background: var(--audit-felulet); border-color: var(--audit-ink-inaktiv); }
.audit-btn-mini { padding: 1px 8px; }
.audit-btn-danger:hover { background: var(--audit-teendo-halvany); border-color: var(--audit-teendo); }

/* 5. Az egyseg-lista fejlece KISKAPITALIS cimke, mint a Tervezo "SZAKASZOK"-a. */
.audit-egysegek-fej { font-size: var(--audit-fs-jel); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* 6. Legordulok es a kapcsolo. MERVE elotte: a legordulo felirata fekete (rgb 0,0,0) es
   12,6 px, a "Vezetoi ertek" cimke 13,72 px / 500 (a keret `label`-szabalya nyert). */
.audit-select { color: var(--audit-ink); font-size: var(--audit-fs-ui); }
/* MERVE a deploy utan: a skin `body #app label { font-size: .98rem !important; font-weight: 500 !important }`
   szabalya MEGIS nyert (13,72 px / 500), mert !important + azonosito. A `label` elemet nem cserelhetjuk
   le -- attol kattinthato a felirat a jelolonegyzettel egyutt --, ezert szuken celzott, azonosito-erosseggel
   es !important-tal all itt, CSAK az auditor egyetlen kapcsolojara. */
#app .audit-root label.audit-kapcsolo { font-size: var(--audit-fs-ui) !important; font-weight: 400 !important; }

/* 7. A "NINCS ERTEKELES" bekapcsolva NEM teli szurke. Ertekeletlen ivnel ez az alapallapot,
   tehat MERVE mind a 111 soron egy sotetszurke (#71717a) kitoltott gomb allt. Teli kitoltes
   csak a bekapcsolt vezerlo-chipnek jar (az 1-5 ertek arany); az "ures" allapot halvany. */
.audit-ertek-torol.audit-ertek-aktiv {
    background: var(--audit-lap); border-color: var(--audit-ink-inaktiv);
    color: var(--audit-ink-halvany); font-weight: 600;
}

.tervezo-atjaro-varakozas {
    padding: 16px;
    color: #6b7280;
    font-size: 13px;
}

.tervezo-atjaro-hiba {
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.5;
}

.tervezo-atjaro-cim {
    font-weight: 600;
    margin-bottom: 4px;
}

.tervezo-atjaro-segitseg {
    margin-top: 6px;
    color: #9a3412;
    font-size: 12px;
}

/* ==========================================================================
   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: 992px) {
  /* Erőteljesebben levágott magasság, hogy a vizszintes csúszka valóban a képernyőn maradjon! */
  body #app .table-responsive {
    max-height: calc(100vh - 260px) !important;
    overflow-y: auto !important;
  }
  
  body #app .crud-table,
  body #app .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  
  /* 1. Fejléc: Mezőnevek (legfelül ragad a saját konténerében) */
  body #app .crud-table thead:nth-of-type(1) {
    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%;
}

.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;
    display: flex;
    align-items: center;
    justify-content: center;
}
.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;
    /* A Bootstrap .fixed-top right: 0-t is ad: a rács saját vízszintes görgetésénél a nap-fejlécek
       a jobb szélre tapadtak és egymásra csúsztak (mért, 2026-10-02). Csak függőlegesen tapadjon. */
    right: auto;
    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 {
    position: absolute;
}
.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;
    transform: translateX(-50%);
    bottom: 1px;
}
.emu-summary-table {
    table-layout: fixed;
    width: 100%!important;
    border-collapse: collapse;
}
.emu-summary-table td {
    padding: 0 3px!important;
    height: 28px!important;
    line-height: 28px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    box-sizing: border-box!important;
}
.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;
}
.emu-summary-table td:not(:first-child) {
    width: 3.4rem!important;
    min-width: 3.4rem!important;
    max-width: 3.4rem!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;
}
/* A flex-oszlop alapértelmezett min-width: auto értéke miatt a rejtett dolgozólistánál a jobb oszlop a táblázat
   teljes szélességére nőtt, és az egész oldal vízszintesen görgetett (mért: 5098 px egy 883 px-es ablakban).
   min-width: 0 mellett a táblázat saját görgetősávja működik. */
.emu-worktime-manager .emu-content { min-width: 0; }
/* A komponens gyökere az alkalmazás flex-keretében (wrapper d-flex) ül: min-width: auto mellett a tartalomhoz,
   azaz a több ezer pixeles rácshoz nőtt. Korlátozva a rács a saját görgetősávjában görget. */
.emu-worktime-root { min-width: 0; flex: 1 1 auto; max-width: 100%; }
/* Tömör eszköztár (alacsony vagy keskeny ablak): kisebb gombok és fejléc, egysoros állapotsor. */
.emu-worktime-manager .wt-status { display: inline-block; max-width: min(28rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: .85rem; }
.emu-worktime-manager .wt-compact .wt-title { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.emu-worktime-manager .wt-compact .wt-title-type,
.emu-worktime-manager .wt-compact .wt-title-date button { font-size: 1.05rem !important; }
.emu-worktime-manager .wt-compact .wt-title-date { margin-left: 1rem !important; }
.emu-worktime-manager .wt-compact .btn,
.emu-worktime-manager .wt-compact .dropdown-toggle { padding: .2rem .45rem; font-size: .8rem; }
.emu-worktime-manager .wt-compact .mt-2 { margin-top: .25rem !important; }
.emu-worktime-manager .wt-compact .mr-3 { margin-right: .4rem !important; }
/* Keretben (<app>) keskeny ablakban a platform menüje 15rem-et elvesz: az állapotsor a maradék szélességhez igazodik. */
.emu-worktime-manager .wt-compact .wt-status { max-width: min(16rem, 100%); font-size: .75rem; }
/* Munkaidőrács: csendes eszköztár, tagolt rács. A kijelölés arany, a hiba piros, a mentés alatti sárga, a távollét teli jogcímszín. */
.emu-worktime-manager {
    --wtg-surface: #fff; --wtg-head: #fafafa; --wtg-weekend: #f1f1f2;
    --wtg-line: #ececee; --wtg-line-day: #d4d4d8; --wtg-line-ui: #d4d4d8;
    --wtg-ink: #18181b; --wtg-ink-2: #44444d; --wtg-ink-3: #71717a; --wtg-muted: #a1a1aa;
    /* A téma gombjai aranyak (btn-primary: rgb(196,158,111)), de a --primary változó zöld (#38a169) maradt (mért 2026-10-02): rögzített arany. */
    --wtg-accent: #C49E6F; --wtg-accent-ink: #7d6136; --wtg-accent-soft: rgba(196, 158, 111, .16);
    --wtg-danger: #97302b; --wtg-danger-soft: #fbeeed; --wtg-danger-line: #c08a86;
    --wtg-wait: #d9b45a; --wtg-wait-soft: #fdf6e6; --wtg-wait-ink: #8a6512;
    --wtg-ok: #2f5c37;
}
.dark-mode .emu-worktime-manager {
    --wtg-surface: var(--dark-level-1, #24272b); --wtg-head: #2b2e33; --wtg-weekend: #30343a;
    --wtg-line: #34383e; --wtg-line-day: #4c535a; --wtg-line-ui: #4c535a;
    --wtg-ink: #f4f4f5; --wtg-ink-2: #d4d4d8; --wtg-ink-3: #a1a1aa; --wtg-muted: #71717a;
    --wtg-accent-ink: #e8d7bd; --wtg-accent-soft: rgba(189, 165, 136, .2);
    --wtg-danger: #f0a9a4; --wtg-danger-soft: rgba(201, 142, 137, .16); --wtg-danger-line: #c98e89;
    --wtg-wait-soft: rgba(217, 180, 90, .16); --wtg-wait-ink: #f0dfae; --wtg-ok: #9fd0ac;
}

/* ---- Eszköztár ---- */
.emu-worktime-manager .wt-tb { align-items: center !important; row-gap: .375rem; }
.emu-worktime-manager .wt-tb > div { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-right: 0 !important; padding-right: .625rem; min-width: 0; max-width: 100%; }
/* Keskeny ablakban a csoport gombjai tördelődnek (flex nowrap mellett 375 px-en 595 px széles lett az oldal, P10, 2026-10-02). */
.emu-worktime-manager .wt-tb .wt-seg { flex-wrap: nowrap; }
/* Hajszálvonal a csoportok között */
.emu-worktime-manager .wt-tb > div + div { padding-left: .625rem; border-left: 1px solid var(--wtg-line-ui); }
.emu-worktime-manager .wt-tb > div > .btn + .btn { margin-left: 0; }

/* Minden gomb csendes: fehér alap, szürke keret (a btn-secondary osztály a tesztek miatt marad). */
.emu-worktime-manager .emu-content .btn-secondary,
.emu-worktime-manager .emu-content .dropdown-toggle.btn-secondary,
.emu-worktime-manager .emu-content .btn-outline-secondary {
    height: 1.75rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .625rem;
    font-size: .8125rem; font-weight: 400; line-height: 1;
    color: var(--wtg-ink-2); background: var(--wtg-surface); border: 1px solid var(--wtg-line-ui); border-radius: .375rem; box-shadow: none;
}
.emu-worktime-manager .emu-content .btn-secondary:hover:not(:disabled),
.emu-worktime-manager .emu-content .btn-outline-secondary:hover:not(:disabled) { color: var(--wtg-ink); border-color: var(--wtg-ink-3); background: var(--wtg-surface); }
.emu-worktime-manager .emu-content .btn-secondary:active:not(:disabled),
.emu-worktime-manager .emu-content .btn-secondary.active,
.emu-worktime-manager .emu-content .show > .dropdown-toggle.btn-secondary { color: var(--wtg-ink); background: var(--wtg-head); border-color: var(--wtg-ink-3); }
.emu-worktime-manager .emu-content .btn-secondary:disabled,
.emu-worktime-manager .emu-content .btn-secondary.disabled { opacity: .45; color: var(--wtg-ink-2); background: var(--wtg-surface); border-color: var(--wtg-line-ui); }
.emu-worktime-manager .emu-content .btn:focus-visible { outline: 2px solid var(--wtg-accent); outline-offset: 2px; box-shadow: none; }
.emu-worktime-manager .emu-content .btn-outline-secondary[data-test=grid-help] { width: 1.75rem; justify-content: center; padding: 0; border-color: transparent; font-weight: 600; color: var(--wtg-ink-3); }

/* A két kiemelt gomb: Dolgozók (panelt nyit) és Ellenőrzés (a fő lépés). */
.emu-worktime-manager .emu-content .btn[data-test=toggle-people],
.emu-worktime-manager .emu-content .wt-validate {
    color: var(--wtg-accent-ink); background: var(--wtg-accent-soft); border: 1px solid var(--wtg-accent); font-weight: 500;
    height: 1.75rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .75rem; font-size: .8125rem; border-radius: .375rem;
}
.emu-worktime-manager .emu-content .btn[data-test=toggle-people]:hover,
.emu-worktime-manager .emu-content .wt-validate:hover:not(:disabled) { background: rgba(196, 158, 111, .26); color: var(--wtg-accent-ink); }
.emu-worktime-manager .emu-content .btn[data-test=toggle-people] .badge { font-size: .6875rem; font-weight: 600; padding: .0625rem .3125rem; color: #18181b; background: var(--wtg-accent); border-radius: .375rem; }

/* Időszak: összetartozó gombok egy blokkban */
.emu-worktime-manager .wt-tb .wt-seg { gap: 0; }
.emu-worktime-manager .wt-tb .wt-seg > .btn { border-radius: 0; margin-left: -1px; }
.emu-worktime-manager .wt-tb .wt-seg > .btn:first-of-type { border-radius: .375rem 0 0 .375rem; margin-left: 0; }
.emu-worktime-manager .wt-tb .wt-seg > .btn:last-of-type { border-radius: 0 .375rem .375rem 0; }

/* Ellenőrzés-eredmény és állapotsor */
.emu-worktime-manager .wt-tb-2 .text-danger { color: var(--wtg-danger) !important; }
.emu-worktime-manager .wt-status { padding: .125rem .5625rem; color: var(--wtg-ink-2); background: var(--wtg-head); border: 1px solid var(--wtg-line); border-radius: .375rem; font-variant-numeric: tabular-nums; }

/* Tömör eszköztár: ugyanez kisebben */
.emu-worktime-manager .wt-compact .btn-secondary,
.emu-worktime-manager .wt-compact .dropdown-toggle.btn-secondary,
.emu-worktime-manager .wt-compact .btn-outline-secondary,
.emu-worktime-manager .wt-compact .btn[data-test=toggle-people],
.emu-worktime-manager .wt-compact .wt-validate { height: 1.5rem; padding: 0 .5rem; font-size: .75rem; }
.emu-worktime-manager .wt-compact .wt-tb > div { padding-right: .4rem; }
.emu-worktime-manager .wt-compact .wt-tb > div + div { padding-left: .4rem; }

/* ---- Rács ---- */
.emu-worktime-manager .table.schedule-table { border-color: var(--wtg-line); color: var(--wtg-ink); font-variant-numeric: tabular-nums; }
.emu-worktime-manager .table-bordered.schedule-table th,
.emu-worktime-manager .table-bordered.schedule-table td { border-color: var(--wtg-line); }
/* A napok (fordított nézetben a dolgozók) között erősebb vonal */
.emu-worktime-manager .table-bordered.schedule-table .wt-day-end { border-right-color: var(--wtg-line-day); }
.emu-worktime-manager .schedule-table .emu-worker-col { border-right: 1px solid var(--wtg-line-day); }

/* Fejléc: nagybetűs, halvány alap; ünnep/hétvége színe a naptárból jön (text-* osztály), alapja halvány szürke */
.emu-worktime-manager .schedule-table thead th { background: var(--wtg-head); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--wtg-ink-3); vertical-align: middle; }
.emu-worktime-manager .schedule-table thead + thead th { font-size: .625rem; color: var(--wtg-muted); }
.emu-worktime-manager .schedule-table thead th.text-danger { color: var(--wtg-danger) !important; background: var(--wtg-weekend); }
.emu-worktime-manager .schedule-table tr > th.fixed { background: var(--wtg-head); }

/* Dolgozó-cella */
.emu-worktime-manager .schedule-table td.emu-worker-col { font-size: .8125rem; color: var(--wtg-ink); }
.emu-worktime-manager .schedule-table td.emu-worker-col .fa,
.emu-worktime-manager .schedule-table td.emu-worker-col .far { font-size: .75rem; color: var(--wtg-muted); }
.emu-worktime-manager .schedule-table td.emu-worker-col .fa:hover,
.emu-worktime-manager .schedule-table td.emu-worker-col .far:hover { color: var(--wtg-ink); }
.emu-worktime-manager .schedule-table td.emu-worker-col .text-danger { font-size: .6875rem; color: var(--wtg-danger) !important; }
/* Névkijelölés (G · A változat, 2026-10-21): pipa a név előtt, a dolgozó sora/oszlopa halvány tónus keret nélkül —
   így nem keverhető a cellakijelöléssel (arany keret) és a szerkesztett cella tengelyével (arany aláhúzás). */
.emu-worktime-manager .schedule-table .wt-row-selected,
.emu-worktime-manager .schedule-table tr > td.fixed.wt-row-selected,
.emu-worktime-manager .schedule-table tr > th.fixed.wt-row-selected { background: color-mix(in srgb, var(--wtg-accent) 12%, var(--wtg-surface)); color: var(--wtg-accent-ink); font-weight: 600; }
.emu-worktime-manager .schedule-table td.is-person-selected { background-color: color-mix(in srgb, var(--wtg-accent) 7%, transparent); }
.emu-worktime-manager .schedule-table td.is-person-selected .form-control:not([readonly]):not(:focus) { background-color: transparent; }
.emu-worktime-manager .schedule-table.wt-name-lines td.is-grid-selected.is-person-selected,
.emu-worktime-manager .schedule-table.wt-name-lines td.is-grid-selected.is-person-selected:has(.form-control[readonly]) { box-shadow: none; background-image: none; }
.emu-worktime-manager .wt-check { position: relative; display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px;
  border: 1.5px solid var(--wtg-muted); border-radius: 3px; background: var(--wtg-surface); box-sizing: border-box; pointer-events: none; }
.emu-worktime-manager .wt-check.is-on { background: var(--wtg-accent); border-color: var(--wtg-accent); }
.emu-worktime-manager .wt-check.is-on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.emu-worktime-manager .wt-check.is-part::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: var(--wtg-accent); }
.emu-worktime-manager button.wt-check { pointer-events: auto; cursor: pointer; padding: 0; }
.emu-worktime-manager button.wt-check:focus-visible { outline: 2px solid var(--wtg-accent); outline-offset: 2px; }
/* Kijelölés-sáv: a régi állapotsor helyén; kijelöléskor arany keretes, darabszámmal és megszüntető linkkel. */
.emu-worktime-manager .wt-selbar { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-height: 1.5rem; padding: .0625rem .25rem;
  font-size: .75rem; color: var(--wtg-ink-3); border: 1px solid transparent; border-radius: .375rem; font-variant-numeric: tabular-nums; }
.emu-worktime-manager .wt-selbar.is-on { padding: .0625rem .625rem; color: var(--wtg-ink); background: var(--wtg-surface); border-color: var(--wtg-accent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wtg-accent) 25%, transparent); }
.emu-worktime-manager .wt-selbar-pill { min-width: 1.375rem; text-align: center; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 0 .5rem;
  background: var(--wtg-accent); color: #fff; }
.emu-worktime-manager .wt-selbar.is-on [data-test="selection-status"] { font-weight: 600; color: var(--wtg-accent-ink); }
.emu-worktime-manager .wt-selbar-sep { width: 1px; align-self: stretch; background: var(--wtg-line-ui); }
.emu-worktime-manager .wt-selbar a { color: var(--wtg-accent-ink); font-weight: 500; }

/* Időcella */
.emu-worktime-manager .schedule-table td .form-control { height: 2.125rem; border: 0; border-radius: 0; font-size: .8125rem; color: var(--wtg-ink); font-variant-numeric: tabular-nums; box-shadow: none; }
.emu-worktime-manager .schedule-table td .form-control:focus { box-shadow: inset 0 0 0 2px var(--wtg-accent); background: var(--wtg-surface); }
.emu-worktime-manager .schedule-table td .form-control:disabled { background: transparent; opacity: .45; }
.emu-worktime-manager .table-hover.schedule-table tbody tr:hover { background: rgba(24, 24, 27, .025); }

/* Távollét: teli jogcímszín (a td inline háttere), a readonly mező átlátszó, a rövidítés félkövér és a jogcím színével */
.emu-worktime-manager .schedule-table td .form-control[readonly] { background: transparent; color: inherit; font-weight: 600; letter-spacing: .02em; }

/* Kijelölés (az EFO-rács mintájára): arany keret és halvány arany alap a CELLÁN, nem a mezőn. Az alap háttérkép-réteg, így a
   távollét teli jogcímszíne és a hétvége háttere fölött is látszik; távollétnél a jogcímszín marad, a keret 2 px + fehér hézag. */
.emu-worktime-manager .schedule-table td.is-grid-selected { box-shadow: inset 0 0 0 1px var(--wtg-accent); background-image: linear-gradient(var(--wtg-accent-soft), var(--wtg-accent-soft)); }
.emu-worktime-manager .schedule-table td.is-grid-selected .form-control:not([readonly]):not(:focus) { background-color: transparent; }
.emu-worktime-manager .schedule-table td.is-grid-selected:has(.form-control[readonly]) { box-shadow: inset 0 0 0 2px var(--wtg-accent), inset 0 0 0 3px #fff; }

/* Hiba: piros keret és pont; a tooltip mondja az okot */
.emu-worktime-manager .schedule-table td.is-error-target { outline: 0; box-shadow: inset 0 0 0 2px var(--wtg-danger), inset 0 0 0 3px #fff; }
.emu-worktime-manager .schedule-table [is-invalid]::after { content: ""; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--wtg-danger); font-size: 0; }

/* Mentés alatt / sorban áll: sárga, amíg a szerver vissza nem igazol */
.emu-worktime-manager .queued { outline: 0; box-shadow: inset 0 0 0 2px var(--wtg-wait); }
.emu-worktime-manager .loading-overlay { background: rgba(255, 255, 255, .72); color: var(--wtg-wait-ink); }
.dark-mode .emu-worktime-manager .loading-overlay { background: rgba(0, 0, 0, .45); }

/* Napi óraszám a Vég cella alján */
.emu-worktime-manager .emu-sum-hours { font-size: .625rem; line-height: 1; color: var(--wtg-ink-3); background: var(--wtg-surface); padding: 0 .1875rem; border-radius: .1875rem; }

/* Összesítő */
.emu-worktime-manager .wt-sum-val { color: var(--wtg-ok); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.emu-worktime-manager .olm-toggle-summary { background: var(--wtg-surface); color: var(--wtg-ink-3); border: 1px solid var(--wtg-line-ui); border-radius: .25rem; }
/* Dolgozópanel: fent fejléc + kereső, csak a középső rész görget, alul mindig látható Alkalmaz / Mégse. */
.emu-worktime-manager > .row { position: relative; }
.emu-worktime-manager .wt-people {
    --wtp-bg: #f6f6f7; --wtp-surface: #fff; --wtp-line: #e4e4e7; --wtp-line-strong: #d4d4d8;
    --wtp-ink: #18181b; --wtp-ink-2: #44444d; --wtp-ink-3: #71717a; --wtp-muted: #a1a1aa;
    --wtp-accent: #C49E6F; --wtp-accent-ink: #7d6136; --wtp-accent-soft: rgba(196, 158, 111, .12);
    --wtp-danger: #97302b;
    --wtp-row: 1.75rem; --wtp-field: 2rem;
    min-height: 0; padding: 0; overflow: hidden; flex-direction: column;
    background: var(--wtp-bg); color: var(--wtp-ink); font-size: .8125rem;
}
.dark-mode .emu-worktime-manager .wt-people {
    --wtp-bg: var(--dark-level-2, #2b2e33); --wtp-surface: #24272b; --wtp-line: #3a3e44; --wtp-line-strong: #4c535a;
    --wtp-ink: #f4f4f5; --wtp-ink-2: #d4d4d8; --wtp-ink-3: #a1a1aa; --wtp-muted: #71717a;
    --wtp-accent-ink: #e8d7bd; --wtp-accent-soft: rgba(189, 165, 136, .16); --wtp-danger: #f0a9a4;
}
/* Oszlop mód: a rács mellett, a lap görgetésekor a helyén marad; a magassága rögzített, hogy csak a lista görgessen. */
.emu-worktime-manager .wt-people:not(.wt-people-overlay) { position: sticky; top: 0; height: calc(100vh - 5rem); max-height: calc(100vh - 5rem); }
/* Panel mód (alacsony vagy keskeny ablak): a rács fölé nyílik, háttérre kattintva vagy Esc-re bezárul. */
.emu-worktime-manager .wt-people.wt-people-overlay {
    /* A rács rögzített sarokcellája z-index 75: a panel mindenképp fölötte legyen (a Bootstrap-ablakok 1040-e alatt). */
    position: absolute; left: 0; top: 0; z-index: 1010; overscroll-behavior: contain;
    width: min(20rem, 90vw); max-width: 90vw; height: max(16rem, calc(100vh - 6rem));
    background: var(--wtp-surface); border: 1px solid var(--wtp-line-strong); border-radius: .5rem;
    box-shadow: 0 4px 20px rgba(24, 24, 27, .12);
    --wtp-row: 1.5rem; --wtp-field: 1.75rem;
}
.emu-worktime-manager .wt-people-backdrop { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1005; background: rgba(24, 24, 27, .18); border-radius: 1rem; }

/* Fejléc */
.emu-worktime-manager .wt-people .wt-people-head { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .25rem .875rem; }
.emu-worktime-manager .wt-people-overlay .wt-people-head { padding: .25rem .375rem .125rem .75rem; background: var(--wtp-bg); }
.emu-worktime-manager .wt-people .wt-people-title { font-size: .9375rem; font-weight: 600; }
.emu-worktime-manager .wt-people .wt-people-count { font-size: .75rem; color: var(--wtp-ink-2); background: var(--wtp-surface); border: 1px solid var(--wtp-line); border-radius: .375rem; padding: 0 .4375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emu-worktime-manager .wt-people .wt-people-iconbtn { 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(--wtp-ink-3); font-size: .8125rem; font-weight: 600; line-height: 1; }
.emu-worktime-manager .wt-people .wt-people-iconbtn[data-test=people-close] { font-size: 1.125rem; font-weight: 400; }
.emu-worktime-manager .wt-people .wt-people-iconbtn:hover { background: rgba(24, 24, 27, .06); color: var(--wtp-ink); }
.emu-worktime-manager .wt-people .wt-people-help { flex: 0 0 auto; padding: .25rem .875rem .375rem; font-size: .75rem; line-height: 1.6; color: var(--wtp-ink-2); }
.emu-worktime-manager .wt-people .wt-people-help kbd { font-size: .6875rem; padding: 0 .25rem; color: var(--wtp-ink); background: var(--wtp-surface); border: 1px solid var(--wtp-line-strong); border-radius: .25rem; box-shadow: none; }

/* Kereső és szűrők gombja */
.emu-worktime-manager .wt-people .wt-people-searchrow { flex: 0 0 auto; display: flex; gap: .375rem; padding: .25rem .625rem .5rem; border-bottom: 1px solid var(--wtp-line); }
.emu-worktime-manager .wt-people-overlay .wt-people-searchrow { padding: .125rem .5rem .3125rem; background: var(--wtp-bg); }
.emu-worktime-manager .wt-people .wt-people-search { position: relative; flex: 1 1 auto; min-width: 0; }
.emu-worktime-manager .wt-people .wt-people-search .fa-search { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--wtp-ink-3); pointer-events: none; }
.emu-worktime-manager .wt-people .wt-people-search .form-control { height: var(--wtp-field); padding: 0 .5rem 0 1.75rem; font-size: .8125rem; background: var(--wtp-surface); border-color: var(--wtp-line-strong); border-radius: .375rem; color: var(--wtp-ink); }
.emu-worktime-manager .wt-people .wt-people-search .form-control:focus { border-color: var(--wtp-accent); box-shadow: 0 0 0 3px rgba(196, 158, 111, .2); }
.emu-worktime-manager .wt-people .wt-people-filterbtn { flex: 0 0 auto; height: var(--wtp-field); display: inline-flex; align-items: center; gap: .375rem; padding: 0 .5625rem; font-size: .8125rem; color: var(--wtp-ink-2); background: var(--wtp-surface); border: 1px solid var(--wtp-line-strong); border-radius: .375rem; }
.emu-worktime-manager .wt-people .wt-people-filterbtn:hover,
.emu-worktime-manager .wt-people .wt-people-filterbtn.is-open { border-color: var(--wtp-ink-3); color: var(--wtp-ink); }
.emu-worktime-manager .wt-people .wt-people-filterbadge { font-size: .6875rem; font-weight: 600; line-height: 1.1rem; padding: 0 .375rem; color: #18181b; background: var(--wtp-accent); border-radius: .375rem; font-variant-numeric: tabular-nums; }

/* Aktív szűrők címkeként */
.emu-worktime-manager .wt-people .wt-people-chips { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: .3125rem; padding: .25rem .5rem; border-bottom: 1px solid var(--wtp-line); }
.emu-worktime-manager .wt-people-overlay .wt-people-chips { flex-wrap: nowrap; overflow: hidden; background: var(--wtp-bg); }
.emu-worktime-manager .wt-people .wt-people-chip { display: inline-flex; align-items: center; gap: .125rem; min-width: 0; max-width: 9rem; padding: 0 .125rem 0 .5rem; font-size: .75rem; color: var(--wtp-accent-ink); background: var(--wtp-accent-soft); border: 1px solid var(--wtp-accent); border-radius: .375rem; }
.emu-worktime-manager .wt-people .wt-people-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emu-worktime-manager .wt-people .wt-people-chip button { padding: 0 .25rem; border: 0; background: transparent; color: inherit; font-size: .875rem; line-height: 1.2; border-radius: .25rem; }
.emu-worktime-manager .wt-people .wt-people-chip button:hover { background: rgba(196, 158, 111, .22); }
.emu-worktime-manager .wt-people .wt-people-link { padding: 0 .25rem; border: 0; background: transparent; font-size: .75rem; color: var(--wtp-ink-2); text-decoration: underline; white-space: nowrap; }
.emu-worktime-manager .wt-people .wt-people-link:hover { color: var(--wtp-ink); }
.emu-worktime-manager .wt-people .wt-people-link:disabled { opacity: .45; text-decoration: none; }

/* Középső, görgethető rész */
.emu-worktime-manager .wt-people .wt-people-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--wtp-surface); }
/* A szűrők lenyíló listája a mező szélességén belül marad (különben vízszintes görgetősáv nyílt a panel alján). */
.emu-worktime-manager .wt-people .wt-people-ffield .list-group { max-width: 100%; }
.emu-worktime-manager .wt-people .wt-people-ffield .list-group-item { padding: .25rem .5rem; font-size: .75rem; white-space: normal; }

/* Szűrők */
.emu-worktime-manager .wt-people .wt-people-filters { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .3125rem .5rem; align-items: center; padding: .5rem .625rem; background: var(--wtp-bg); border-bottom: 1px solid var(--wtp-line); }
.emu-worktime-manager .wt-people .wt-people-filters[style*="display: none"] { display: none; }
.emu-worktime-manager .wt-people .wt-people-flabel { font-size: .75rem; color: var(--wtp-ink-2); }
.emu-worktime-manager .wt-people .wt-people-ffield { position: relative; min-width: 0; }
.emu-worktime-manager .wt-people .wt-people-ffield .form-control,
.emu-worktime-manager .wt-people .wt-people-ffield .custom-select { height: var(--wtp-field); font-size: .8125rem; background-color: var(--wtp-surface); border-color: var(--wtp-line-strong); border-radius: .375rem; color: var(--wtp-ink); }
.emu-worktime-manager .wt-people .wt-people-ffield.is-active .form-control,
.emu-worktime-manager .wt-people .wt-people-ffield.is-active .custom-select { border-color: var(--wtp-accent); }
.emu-worktime-manager .wt-people .wt-people-ffield .form-control { padding-right: 1.75rem; }
.emu-worktime-manager .wt-people .wt-people-fclear { position: absolute; right: .125rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: var(--wtp-ink-3); font-size: 1rem; line-height: 1; z-index: 3; }
.emu-worktime-manager .wt-people .wt-people-fclear:hover { color: var(--wtp-ink); background: rgba(24, 24, 27, .06); }
/* A platform témája a .form-control / .custom-select belső margóját !important-tal adja (.5rem .75rem): a 24 px-es mezőben
   a szöveg levágódott, a nagyító a kereső szövegére csúszott (mért 2026-10-02). */
.emu-worktime-manager .wt-people .wt-people-search .form-control { padding: 0 .5rem 0 1.75rem !important; line-height: calc(var(--wtp-field) - 2px); }
.emu-worktime-manager .wt-people .wt-people-ffield .form-control,
.emu-worktime-manager .wt-people .wt-people-ffield .custom-select { padding: 0 1.75rem 0 .5rem !important; line-height: calc(var(--wtp-field) - 2px); }
.emu-worktime-manager .wt-people .wt-people-factions { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; margin-top: .125rem; }

/* Találatszám + kiválasztás */
.emu-worktime-manager .wt-people .wt-people-listhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .125rem; height: var(--wtp-row); padding: 0 .375rem 0 .875rem; background: var(--wtp-surface); border-bottom: 1px solid var(--wtp-line); }
.emu-worktime-manager .wt-people-overlay .wt-people-listhead { padding-left: .75rem; }
.emu-worktime-manager .wt-people .wt-people-total { flex: 1 1 auto; font-size: .75rem; color: var(--wtp-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emu-worktime-manager .wt-people .wt-people-select { display: flex; }
.emu-worktime-manager .wt-people .wt-people-select button { padding: .0625rem .375rem; border: 0; border-radius: .375rem; background: transparent; font-size: .75rem; color: var(--wtp-ink-2); white-space: nowrap; }
.emu-worktime-manager .wt-people .wt-people-select button:hover { background: rgba(24, 24, 27, .06); color: var(--wtp-ink); }

/* Névlista */
.emu-worktime-manager .wt-people .wt-people-list { margin: 0; padding: 0; }
.emu-worktime-manager .wt-people .wt-people-row { display: flex; align-items: center; height: var(--wtp-row); padding-right: .375rem; }
.emu-worktime-manager .wt-people .wt-people-row:hover { background: rgba(24, 24, 27, .035); }
.emu-worktime-manager .wt-people .wt-people-row.is-selected { background: var(--wtp-accent-soft); }
.emu-worktime-manager .wt-people .wt-people-row.is-selected .wt-people-name { font-weight: 500; }
.emu-worktime-manager .wt-people .wt-people-row:focus-within { box-shadow: inset 0 0 0 2px var(--wtp-accent); }
.emu-worktime-manager .wt-people .wt-people-label { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: .5rem; margin: 0; padding-left: .875rem; cursor: pointer; }
.emu-worktime-manager .wt-people-overlay .wt-people-label { padding-left: .75rem; }
.emu-worktime-manager .wt-people .wt-people-label input[type=checkbox] { flex: 0 0 auto; width: .875rem; height: .875rem; margin: 0; accent-color: var(--wtp-accent); }
.emu-worktime-manager .wt-people .wt-people-label input[type=checkbox]:focus { outline: none; }
.emu-worktime-manager .wt-people .wt-people-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.emu-worktime-manager .wt-people .wt-people-ended { flex: 0 0 auto; font-size: .75rem; color: var(--wtp-danger); }
.emu-worktime-manager .wt-people .wt-people-edit { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: var(--wtp-muted); font-size: .75rem; }
.emu-worktime-manager .wt-people .wt-people-edit:hover { color: var(--wtp-ink); background: rgba(24, 24, 27, .06); }
.emu-worktime-manager .wt-people .wt-people-pager { margin: .5rem 0; }

/* Betöltés, üres, hiba */
.emu-worktime-manager .wt-people .wt-people-loading { display: flex; flex-direction: column; gap: .75rem; padding: .625rem .875rem; }
.emu-worktime-manager .wt-people .wt-people-skel { height: .625rem; border-radius: .25rem; background: var(--wtp-line); animation: wtp-pulse 1.2s ease-in-out infinite alternate; }
.emu-worktime-manager .wt-people .wt-people-skel:nth-child(even) { animation-delay: .3s; }
@keyframes wtp-pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .emu-worktime-manager .wt-people .wt-people-skel { animation: none; } }
.emu-worktime-manager .wt-people .wt-people-state { padding: .75rem .875rem; }
.emu-worktime-manager .wt-people .wt-people-state-title { font-size: .8125rem; font-weight: 600; }
.emu-worktime-manager .wt-people .wt-people-state-text { margin-top: .125rem; font-size: .75rem; line-height: 1.5; color: var(--wtp-ink-2); }
.emu-worktime-manager .wt-people .wt-people-state-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.emu-worktime-manager .wt-people .wt-people-state.is-error .wt-people-state-title { color: var(--wtp-danger); }

/* Gombsor */
.emu-worktime-manager .wt-people .wt-people-footer { flex: 0 0 auto; display: flex; gap: .375rem; padding: .5rem .625rem; background: var(--wtp-bg); border-top: 1px solid var(--wtp-line); }
.emu-worktime-manager .wt-people-overlay .wt-people-footer { padding: .375rem .5rem; }
.emu-worktime-manager .wt-compact.emu-content { padding-left: .5rem !important; }
/* Látható-sor ablak kitöltő sora: a td magasságát a rács stílusa rögzíti, ezért a belső blokk adja a magasságot. */
.emu-worktime-manager .schedule-table tr.wt-row-spacer > td { padding: 0 !important; border: 0 !important; height: auto !important; background: transparent; }
.emu-worktime-manager .schedule-table tr.wt-row-spacer > td > div { width: 1px; }
/* Fordított nézet oszlop-ablaka: a kitöltő fejléccella belső blokkja adja a kihagyott oszlopok szélességét. */
.emu-worktime-manager .schedule-table th.wt-col-spacer,
.emu-worktime-manager .schedule-table td.wt-col-spacer { padding: 0 !important; border: 0 !important; background: transparent; }
.emu-worktime-manager .schedule-table th.wt-col-spacer > div { height: 1px; }
/* Sűrűbb rács (20%-kal kisebb cella: 78×35 → 63×28 px, a betűméret marad). A cellaméretet egy platform-szintű
   `html body #app .schedule-table td …` szabály rögzíti (min-width 5.6rem, height/min-height 34px, !important);
   a #table-container azonosító miatt ez a blokk erősebb. A stílus minden oldalon betöltődik, és a régi rács (#16)
   is #table-container-t használ, ezért a .wt-grid-host (csak a tesztrácsban van) szűkít rá. */
html body #app #table-container .wt-grid-host .schedule-table td[data-grid-col] { min-width: 4.48rem !important; width: 4.48rem !important; max-width: 4.48rem !important; height: 28px !important; }
html body #app #table-container .wt-grid-host .schedule-table td[data-grid-col] input,
html body #app #table-container .wt-grid-host .schedule-table td[data-grid-col] .form-control { min-width: 0 !important; min-height: 0 !important; height: 27px !important; line-height: 27px !important; }
html body #app #table-container .wt-grid-host .schedule-table > thead > tr > th:not(.fixed) { min-width: 4.48rem !important; width: 4.48rem !important; }
html body #app #table-container .wt-grid-host .schedule-table > thead > tr > th[colspan="2"] { min-width: 8.96rem !important; width: 8.96rem !important; }
html body #app #table-container .wt-grid-host .schedule-table tbody td.emu-worker-col { padding-top: 0 !important; padding-bottom: 0 !important; height: 28px !important; line-height: 27px !important; }
/* Fordított nézet: a dolgozó neve a fejlécben több sorba törhet, különben a név szélesítené az oszlopot. */
html body #app #table-container .wt-grid-host .schedule-table.vertical > thead > tr > th[colspan="2"] { white-space: normal !important; line-height: 1.2 !important; }
html body #app #table-container .wt-grid-host .schedule-table.vertical tbody td:not([data-grid-col]) { padding-top: 0 !important; padding-bottom: 0 !important; height: 28px !important; line-height: 27px !important; }
/* Vízszintes nézet: a dátumos fejlécsor is 20%-kal alacsonyabb (36 → 29 px). A Kezd/Vég sor rögzített helyzete a sablonban
   inline `top:34px`; ezt az új magassághoz kell igazítani (-2 px kezdő eltolás + 29 px), különben rés vagy átfedés lenne. */
html body #app #table-container .wt-grid-host .schedule-table:not(.vertical) > thead:first-of-type > tr > th { height: 29px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body #app #table-container .wt-grid-host .schedule-table:not(.vertical) > thead:nth-of-type(2) > tr > th { top: 27px !important; }

/* EFO-rács: a munkaidőrács formavilága (munkaidoracs-atadas.md). Saját osztálynevek, hogy a platform
   .schedule-table / .table szabályai (rögzített cellaméret, !important magasság) ne hassanak rá. */
.efo-grid {
    --efo-surface: #fff; --efo-head: #fafafa; --efo-line: #ececee; --efo-line-strong: #d4d4d8;
    --efo-ink: #18181b; --efo-ink-2: #44444d; --efo-ink-3: #71717a; --efo-muted: #a1a1aa;
    --efo-accent: #C49E6F; --efo-accent-ink: #7d6136; --efo-accent-soft: rgba(196, 158, 111, .16);
    --efo-danger: #97302b; --efo-danger-soft: #fbeeed;
    --efo-wait: #d9b45a; --efo-wait-soft: #fdf6e6; --efo-wait-ink: #8a6512; --efo-ok: #2f5c37;
    color: var(--efo-ink); font-size: .8125rem; min-width: 0; max-width: 100%;
}
.dark-mode .efo-grid {
    --efo-surface: var(--dark-level-1, #24272b); --efo-head: #2b2e33; --efo-line: #34383e; --efo-line-strong: #4c535a;
    --efo-ink: #f4f4f5; --efo-ink-2: #d4d4d8; --efo-ink-3: #a1a1aa; --efo-muted: #71717a;
    --efo-accent-ink: #e8d7bd; --efo-accent-soft: rgba(189, 165, 136, .2);
    --efo-danger: #f0a9a4; --efo-danger-soft: rgba(201, 142, 137, .16);
    --efo-wait-soft: rgba(217, 180, 90, .16); --efo-wait-ink: #f0dfae; --efo-ok: #9fd0ac;
}
.efo-grid-page { padding: 1rem; background: var(--efo-surface); border-radius: .5rem; margin: 1rem; }
.efo-grid-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 .5rem; }
.efo-grid-badge { font-size: .6875rem; font-weight: 600; color: #18181b; background: var(--efo-accent); border-radius: .375rem; padding: .0625rem .375rem; vertical-align: middle; }
.efo-grid-pickform { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.efo-grid-pickform label { margin: 0; color: var(--efo-ink-2); }
.efo-grid-pickform input { width: 9rem; }

.efo-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.efo-grid-meta { color: var(--efo-ink-2); display: flex; flex-wrap: wrap; gap: .375rem; }
.efo-grid-meta strong { color: var(--efo-ink); }
.efo-grid-hidden { color: var(--efo-ink-3); }
.efo-grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.efo-grid-btn { height: 1.75rem; padding: 0 .625rem; font-size: .8125rem; line-height: 1; border: 1px solid var(--efo-line-strong); background: var(--efo-surface); color: var(--efo-ink); border-radius: .375rem; }
.efo-grid-btn:hover { border-color: var(--efo-accent); }
.efo-grid-missing { color: var(--efo-wait-ink); background: var(--efo-wait-soft); border-radius: .375rem; padding: .125rem .125rem .125rem .5rem; display: inline-flex; align-items: center; gap: .5rem; }
.efo-grid-complete { color: var(--efo-ok); }
.efo-grid-unsaved { color: var(--efo-wait-ink); font-weight: 600; }
.efo-grid-toggle { margin: 0; display: inline-flex; align-items: center; gap: .25rem; color: var(--efo-ink-2); cursor: pointer; }
.efo-grid-toggle.has-data { color: var(--efo-warn, #a15c00); font-weight: 600; }
.efo-grid-loading, .efo-grid-empty { color: var(--efo-ink-3); padding: .5rem 0; }

/* Rács: saját görgetősáv; a névoszlop és a fejléc rögzített */
.efo-grid-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-grid-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.efo-grid-table th, .efo-grid-table td { border-right: 1px solid var(--efo-line); border-bottom: 1px solid var(--efo-line); padding: 0; height: 28px; vertical-align: middle; white-space: nowrap; }
.efo-grid-table thead th { position: sticky; top: 0; z-index: 2; background: var(--efo-head); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--efo-ink-3); padding: 0 .5rem; text-align: center; }
.efo-grid-table thead tr.efo-fill-row th { top: 28px; padding: 0; text-transform: none; letter-spacing: 0; background: var(--efo-accent-soft); }
.efo-grid-table thead tr.efo-fill-row th.efo-fill-label { padding: 0 .5rem; color: var(--efo-accent-ink); text-align: left; background: color-mix(in srgb, var(--efo-accent) 16%, var(--efo-surface)); }
.efo-grid-table .efo-sticky { position: sticky; left: 0; z-index: 1; background: var(--efo-surface); border-right: 1px solid var(--efo-line-strong); }
.efo-grid-table thead .efo-sticky { z-index: 3; background: var(--efo-head); }
.efo-grid-table td.efo-col-name { padding: 0 .5rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.efo-grid-table td.efo-col-date { padding: 0 .5rem; color: var(--efo-ink-2); font-variant-numeric: tabular-nums; }
.efo-grid-table .efo-col-time { width: 4.5rem; min-width: 4.5rem; }
.efo-grid-table .efo-col-money { width: 6.5rem; min-width: 6.5rem; }
.efo-grid-table .efo-col-bool { width: 5.5rem; min-width: 5.5rem; text-align: center; white-space: normal; line-height: 1.15; }
.efo-grid-table .efo-col-text { min-width: 12rem; }
.efo-grid-table td.efo-col-hours { padding: 0 .5rem; text-align: right; color: var(--efo-ink-3); font-variant-numeric: tabular-nums; min-width: 3rem; }
.efo-grid-table .efo-col-status { min-width: 7rem; max-width: 16rem; padding: 0 .5rem; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.efo-grid-table tbody tr:hover td { background-color: rgba(24, 24, 27, .02); }
.efo-grid-table tbody tr.is-cancelled td:not(.efo-col-name) { color: var(--efo-muted); }

/* Cellamező */
.efo-grid-table .efo-input { display: block; width: 100%; height: 27px; border: 0; border-radius: 0; padding: 0 .375rem; background: transparent; color: var(--efo-ink); font: inherit; text-align: center; font-variant-numeric: tabular-nums; outline: 0; }
.efo-grid-table .efo-col-money .efo-input { text-align: right; }
.efo-grid-table .efo-input-text { text-align: left; }
.efo-grid-table .efo-input:focus { box-shadow: inset 0 0 0 2px var(--efo-accent); background: var(--efo-surface); }
.efo-grid-table .efo-check { width: 1rem; height: 1rem; accent-color: var(--efo-accent); cursor: pointer; }
.efo-grid-table .efo-check:focus { outline: 2px solid var(--efo-accent); outline-offset: 2px; }
.efo-grid-table .efo-fill-row .efo-input { background: var(--efo-surface); }
.efo-grid-table .efo-fill-row .efo-input::placeholder { color: var(--efo-muted); }

/* Kijelölés, hiány, hiba */
.efo-grid-table td.is-selected { box-shadow: inset 0 0 0 1px var(--efo-accent); background-color: var(--efo-accent-soft); }
.efo-grid-table td.is-missing { background-color: var(--efo-wait-soft); }
.efo-grid-table td.is-invalid, .efo-grid-table .efo-input.is-invalid { box-shadow: inset 0 0 0 2px var(--efo-danger); background-color: var(--efo-danger-soft); }

/* Sor-állapot */
.efo-status { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: .75rem; }
.efo-status-saving { color: var(--efo-wait-ink); }
.efo-status-saved { color: var(--efo-ok); }
.efo-status-pending { color: var(--efo-wait-ink); }
.efo-status-invalid, .efo-status-error { color: var(--efo-danger); }
.efo-grid-help { margin: .5rem 0 0; font-size: .75rem; color: var(--efo-ink-3); }

/* Felülírás-kérdés */
.efo-dialog-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(24, 24, 27, .35); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.efo-dialog { background: var(--efo-surface); color: var(--efo-ink); border-radius: .5rem; padding: 1rem 1.25rem; max-width: 24rem; width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.efo-dialog-text { margin: 0 0 .75rem; font-size: .9375rem; }
.efo-dialog-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.efo-dialog-buttons .btn:focus { box-shadow: 0 0 0 2px var(--efo-accent); }

/* ===== 2. mérföldkő: a Claude Design átadója szerint (efo-racs-atadas.md 4. fejezet), változtatás nélkül ===== */
/* ---- Közös rács: módosítások ---- */
.efo-grid { --efo-col-mark: 26px; }
.efo-grid-table .efo-col-mark { position: sticky; left: 0; z-index: 1; width: var(--efo-col-mark); min-width: var(--efo-col-mark); max-width: var(--efo-col-mark); padding: 0; text-align: center; background: var(--efo-surface); }
.efo-grid-table thead .efo-col-mark { z-index: 3; background: var(--efo-head); }
.efo-grid-table thead tr.efo-fill-row th.efo-col-mark { background: color-mix(in srgb, var(--efo-accent) 12%, var(--efo-surface)); }
.efo-grid-table .efo-sticky.efo-col-name { left: var(--efo-col-mark); }
.efo-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: .8125rem; line-height: 1; }
.efo-mark-missing, .efo-mark-saving, .efo-mark-pending, .efo-mark-invalid { color: var(--efo-wait-ink); }
.efo-mark-pending, .efo-mark-invalid { font-size: .6875rem; }
.efo-mark-saved { color: var(--efo-ok); }
.efo-mark-error { border-radius: 50%; background: var(--efo-danger); color: #fff; font-size: .6875rem; font-weight: 600; }
.dark-mode .efo-mark-error { color: #18181b; }

/* Vonalak: oszlopok között nincs, sorok között mindenhol egyforma 1 px. Függőleges csak az azonosító blokk és a bér után. */
.efo-grid { --efo-row-line: #f1f1f2; --efo-band: #f7f7f8; }
.dark-mode .efo-grid { --efo-row-line: #2f3338; --efo-band: #282b30; }
.efo-grid-table th, .efo-grid-table td { border-right: 0; border-bottom: 1px solid var(--efo-row-line); }
.efo-grid-table thead th { border-bottom-color: var(--efo-line); }
.efo-grid-table thead tr.efo-fill-row th { border-bottom-color: var(--efo-line-strong); }
.efo-grid-table .efo-sticky.efo-col-name { border-right: 0; }
.efo-grid-table .efo-id-end { border-right: 1px solid var(--efo-line-strong); }
.efo-grid-table .efo-col-money { border-right: 1px solid var(--efo-line); }

/* Szöveges oszlopok: balra zárnak, a végük vágódik */
.efo-grid-table td.efo-col-name, .efo-grid-table td.efo-col-date, .efo-grid-table td.efo-col-res { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efo-grid-table thead th.efo-col-name, .efo-grid-table thead th.efo-col-date, .efo-grid-table thead th.efo-col-res { text-align: left; }
.efo-grid-table td.efo-col-date, .efo-grid-table td.efo-col-res { padding: 0 .5rem; font-size: .75rem; color: var(--efo-ink-2); font-variant-numeric: tabular-nums; }
.efo-grid-table td.efo-col-res { min-width: 6.5rem; }
.efo-grid-table td.efo-col-hours { font-size: .75rem; }
.efo-grid-table .efo-col-bool .efo-check { opacity: .55; }
.efo-grid-table .efo-col-bool .efo-check:checked, .efo-grid-table .efo-col-bool .efo-check:focus { opacity: 1; }
.efo-grid-table thead tr.efo-fill-row th { background: var(--efo-head); }
.efo-grid-table thead tr.efo-fill-row th.efo-fill-label { background: color-mix(in srgb, var(--efo-accent) 22%, var(--efo-surface)); }

/* Bejelentés-csoport: váltakozó sávháttér, nem vonal */
.efo-grid-table tbody tr.is-band td { background-color: var(--efo-band); }
.efo-grid-table tbody tr.is-band td.is-selected { background-color: var(--efo-accent-soft); }

/* A hiányzó cella: sárga „—” a mező helyén, nem kitöltés és nem aláhúzás */
.efo-grid-table td.is-missing { background-color: transparent; }
.efo-grid-table tbody tr.is-band td.is-missing { background-color: var(--efo-band); }
.efo-grid-table td.is-missing .efo-input::placeholder { color: #b8892a; font-style: normal; }
.dark-mode .efo-grid-table td.is-missing .efo-input::placeholder { color: #d9b45a; }

/* Tengely és Mindenkinek-cél */
.efo-grid-table thead th.is-axis, .efo-grid-table thead th.is-fill-target { background: color-mix(in srgb, var(--efo-accent) 30%, var(--efo-head)); color: var(--efo-accent-ink); }
.efo-grid-table .efo-input::placeholder { color: color-mix(in srgb, var(--efo-accent-ink) 60%, transparent); font-style: italic; }

/* Üzenetsor az aktív sorra */
.efo-grid-msg { display: flex; align-items: center; gap: .5rem; min-height: 1.375rem; margin-top: .375rem; font-size: .75rem; color: var(--efo-ink-3); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.efo-grid-msg.is-missing, .efo-grid-msg.is-pending { color: var(--efo-wait-ink); }
.efo-grid-msg.is-invalid, .efo-grid-msg.is-error { color: var(--efo-danger); }
.efo-grid-missing { border: 0; font: inherit; cursor: pointer; }
.efo-grid-missing kbd { font-size: .6875rem; padding: 0 .375rem; color: var(--efo-ink); background: var(--efo-surface); border: 1px solid var(--efo-line-strong); border-radius: .3125rem; box-shadow: none; }
.efo-flex { flex: 1 1 auto; }
.efo-sep { width: 1px; height: 1rem; background: var(--efo-line); }
.efo-icon { width: 1.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.efo-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: var(--efo-ink-3); font-size: .8125rem; font-weight: 600; }
.efo-icon-ghost:hover { background: rgba(24, 24, 27, .06); color: var(--efo-ink); }
.efo-close { font-size: 1.25rem; font-weight: 400; }

/* ---- Kijelöltek ablaka ---- */
.efo-modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(24, 24, 27, .35); display: flex; align-items: flex-start; justify-content: center; padding: 1.25rem; }
.efo-modal { display: flex; flex-direction: column; width: min(1100px, 100%); height: 100%; min-height: 0; background: var(--efo-surface); color: var(--efo-ink); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); overflow: hidden; }
.efo-modal-head { flex: 0 0 2.75rem; display: flex; align-items: center; gap: .625rem; min-width: 0; padding: 0 .5rem 0 .875rem; background: var(--efo-head); border-bottom: 1px solid var(--efo-line-strong); }
.efo-modal-title { margin: 0; font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.efo-modal-meta { font-size: .75rem; color: var(--efo-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efo-fill-hint { flex: 0 0 1.875rem; display: flex; align-items: center; gap: .625rem; min-width: 0; padding: 0 .875rem; font-size: .75rem; background: var(--efo-accent-soft); border-bottom: 1px solid var(--efo-accent); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.efo-fill-hint b { font-weight: 600; }
.efo-fill-hint-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--efo-accent-ink); }
.efo-fill-hint-note { color: var(--efo-ink-2); }
.efo-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: .5rem .75rem; }
.efo-modal-body .efo-grid-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.efo-modal-foot { flex: 0 0 2.75rem; display: flex; align-items: center; gap: .75rem; padding: 0 .75rem 0 .875rem; background: var(--efo-head); border-top: 1px solid var(--efo-line-strong); font-size: .75rem; color: var(--efo-ink-2); font-variant-numeric: tabular-nums; }
.efo-modal-foot b { color: var(--efo-wait-ink); font-weight: 600; }
.efo-modal-foot.is-confirm { background: var(--efo-wait-soft); border-top-color: var(--efo-wait); font-size: .8125rem; color: var(--efo-ink); }
.efo-modal-foot.is-confirm b { color: var(--efo-ink); }
.efo-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--efo-wait); flex: 0 0 auto; }
@media (max-height: 600px) {
    .efo-modal-backdrop { padding: .375rem; }
    .efo-modal-head, .efo-modal-foot { flex-basis: 2.5rem; }
    .efo-modal-body { padding: .375rem .5rem; }
}

/* ---- Napi nézet ---- */
.efo-day-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.efo-day-row { display: flex; align-items: center; gap: .625rem; min-width: 0; flex-wrap: nowrap; }
.efo-day-title { margin: 0; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.efo-day-range-text { font-size: .8125rem; color: var(--efo-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efo-seg { display: inline-flex; border: 1px solid var(--efo-line-strong); border-radius: .375rem; overflow: hidden; }
.efo-seg button { height: 1.625rem; padding: 0 .625rem; border: 0; background: var(--efo-surface); color: var(--efo-ink-2); font-size: .8125rem; white-space: nowrap; }
.efo-seg button + button { border-left: 1px solid var(--efo-line-strong); }
.efo-seg button:hover { color: var(--efo-ink); background: var(--efo-head); }
.efo-seg button.is-on { background: var(--efo-accent); color: #18181b; font-weight: 500; }
.efo-toggle-chip { height: 1.75rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .625rem; font-size: .8125rem; color: var(--efo-accent-ink); background: var(--efo-surface); border: 1px solid var(--efo-accent); border-radius: .375rem; white-space: nowrap; }
.efo-toggle-chip.is-on { background: var(--efo-accent); color: #18181b; font-weight: 500; }
.efo-day-search { position: relative; width: 14.5rem; flex: 0 1 auto; min-width: 8rem; }
.efo-day-search.is-narrow { width: 9.5rem; }
.efo-day-search .fa-search { position: absolute; left: .5625rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--efo-ink-3); pointer-events: none; }
.efo-day-search .form-control { height: 1.75rem; padding: 0 .5rem 0 1.625rem; font-size: .8125rem; background: var(--efo-surface); border-color: var(--efo-line-strong); border-radius: .375rem; color: var(--efo-ink); }
.efo-day-search .form-control:focus { border-color: var(--efo-accent); box-shadow: 0 0 0 3px var(--efo-accent-soft); }
.efo-day-sum { font-size: .75rem; color: var(--efo-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efo-day-range-select { width: auto; height: 1.625rem; font-size: .8125rem; }
.efo-grid[data-frame=day] .efo-grid-scroll { max-height: calc(100vh - var(--efo-day-offset, 13rem)); }
.efo-grid[data-frame=day] .efo-day-head.is-compact + * .efo-grid-scroll { --efo-day-offset: 8.5rem; }

/* Alacsony ablak: keskenyebb oszlopok */
@media (max-width: 960px) {
    .efo-grid-table td.efo-col-name { max-width: 8rem; }
    .efo-grid-table .efo-col-time { width: 3.75rem; min-width: 3.75rem; }
    .efo-grid-table .efo-col-money { width: 5.75rem; min-width: 5.75rem; }
    .efo-grid-table .efo-col-bool { width: 4.25rem; min-width: 4.25rem; }
}

/* ---- Állapotok ---- */
.efo-state { padding: .875rem; border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-state-title { font-size: .8125rem; font-weight: 600; }
.efo-state-text { margin-top: .125rem; font-size: .75rem; line-height: 1.5; color: var(--efo-ink-2); }
.efo-state-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.efo-state.is-error .efo-state-title { color: var(--efo-danger); }
.efo-skel-row { display: flex; align-items: center; gap: .875rem; height: 28px; padding: 0 .625rem; border-bottom: 1px solid var(--efo-line); }
.efo-skel { height: .5625rem; border-radius: .25rem; background: var(--efo-line); animation: efo-pulse 1.2s ease-in-out infinite alternate; }
@keyframes efo-pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .efo-skel { animation: none; } }

/* ---- Kiegészítések az átadóhoz ---- */
.efo-frame { min-width: 0; }
.efo-muted { color: var(--efo-ink-3); }
.efo-grid-msg-text { overflow: hidden; text-overflow: ellipsis; }
.efo-grid-missing { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .375rem .125rem .5rem; }
.efo-skeleton { border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-modal .efo-grid-msg { flex: 0 0 auto; }
.efo-modal .efo-grid-help { flex: 0 0 auto; }

/* Napi nézet kiegészítései: egyéni időszak, tömör "⋯" menü (a tervezői CSS mellé). */
.efo-day-custom { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .625rem; border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-day-custom label { display: inline-flex; align-items: center; gap: .375rem; margin: 0; font-size: .8125rem; color: var(--efo-ink-2); }
.efo-day-custom .form-control { width: 9.5rem; height: 1.75rem; font-size: .8125rem; }
.efo-day-custom-error { font-size: .8125rem; color: var(--efo-danger); }
.efo-more { position: relative; display: inline-flex; }
.efo-more-menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: .25rem; min-width: 12rem; padding: .5rem; background: var(--efo-surface); border: 1px solid var(--efo-line-strong); border-radius: .375rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.efo-more-text { font-size: .75rem; color: var(--efo-ink-2); white-space: nowrap; }
.efo-more-item { border: 0; background: transparent; text-align: left; padding: .25rem .375rem; font-size: .8125rem; color: var(--efo-ink); border-radius: .25rem; }
.efo-more-item:hover { background: var(--efo-head); }
/* A platform űrlap-stílusa felülírja a tervezői méreteket (mért: a select 7 px-es függőleges belső margója levágja a szöveget,
   a kereső bal margója 10,5 px, így az ikon a szövegre csúszik): magasabb fajlagossággal visszaállítva. */
html body #app .efo-grid .efo-day-row select.efo-day-range-select { height: 1.75rem !important; min-width: 7.5rem; padding: 0 1.75rem 0 .5rem !important; line-height: 1.625rem; font-size: .8125rem; }
html body #app .efo-grid .efo-day-search input.form-control { height: 1.75rem !important; padding: 0 .5rem 0 1.75rem !important; }
html body #app .efo-grid .efo-day-custom input.form-control { height: 1.75rem !important; padding: 0 .375rem !important; }
/* Sor-ablakozás: a ki nem rajzolt sorok helye (vonal és háttér nélkül). */
.efo-grid-table tbody tr.efo-pad td { padding: 0; border: 0; background: transparent; }

/* EFO-rács: a munkaidőrács formavilága (munkaidoracs-atadas.md). Saját osztálynevek, hogy a platform
   .schedule-table / .table szabályai (rögzített cellaméret, !important magasság) ne hassanak rá. */
.efo-grid {
    --efo-surface: #fff; --efo-head: #fafafa; --efo-line: #ececee; --efo-line-strong: #d4d4d8;
    --efo-ink: #18181b; --efo-ink-2: #44444d; --efo-ink-3: #71717a; --efo-muted: #a1a1aa;
    --efo-accent: #C49E6F; --efo-accent-ink: #7d6136; --efo-accent-soft: rgba(196, 158, 111, .16);
    --efo-danger: #97302b; --efo-danger-soft: #fbeeed;
    --efo-wait: #d9b45a; --efo-wait-soft: #fdf6e6; --efo-wait-ink: #8a6512; --efo-ok: #2f5c37;
    color: var(--efo-ink); font-size: .8125rem; min-width: 0; max-width: 100%;
}
.dark-mode .efo-grid {
    --efo-surface: var(--dark-level-1, #24272b); --efo-head: #2b2e33; --efo-line: #34383e; --efo-line-strong: #4c535a;
    --efo-ink: #f4f4f5; --efo-ink-2: #d4d4d8; --efo-ink-3: #a1a1aa; --efo-muted: #71717a;
    --efo-accent-ink: #e8d7bd; --efo-accent-soft: rgba(189, 165, 136, .2);
    --efo-danger: #f0a9a4; --efo-danger-soft: rgba(201, 142, 137, .16);
    --efo-wait-soft: rgba(217, 180, 90, .16); --efo-wait-ink: #f0dfae; --efo-ok: #9fd0ac;
}
.efo-grid-page { padding: 1rem; background: var(--efo-surface); border-radius: .5rem; margin: 1rem; }
.efo-grid-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 .5rem; }
.efo-grid-badge { font-size: .6875rem; font-weight: 600; color: #18181b; background: var(--efo-accent); border-radius: .375rem; padding: .0625rem .375rem; vertical-align: middle; }
.efo-grid-pickform { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.efo-grid-pickform label { margin: 0; color: var(--efo-ink-2); }
.efo-grid-pickform input { width: 9rem; }

.efo-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.efo-grid-meta { color: var(--efo-ink-2); display: flex; flex-wrap: wrap; gap: .375rem; }
.efo-grid-meta strong { color: var(--efo-ink); }
.efo-grid-hidden { color: var(--efo-ink-3); }
.efo-grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.efo-grid-btn { height: 1.75rem; padding: 0 .625rem; font-size: .8125rem; line-height: 1; border: 1px solid var(--efo-line-strong); background: var(--efo-surface); color: var(--efo-ink); border-radius: .375rem; }
.efo-grid-btn:hover { border-color: var(--efo-accent); }
.efo-grid-missing { color: var(--efo-wait-ink); background: var(--efo-wait-soft); border-radius: .375rem; padding: .125rem .125rem .125rem .5rem; display: inline-flex; align-items: center; gap: .5rem; }
.efo-grid-complete { color: var(--efo-ok); }
.efo-grid-unsaved { color: var(--efo-wait-ink); font-weight: 600; }
.efo-grid-toggle { margin: 0; display: inline-flex; align-items: center; gap: .25rem; color: var(--efo-ink-2); cursor: pointer; }
.efo-grid-loading, .efo-grid-empty { color: var(--efo-ink-3); padding: .5rem 0; }

/* Rács: saját görgetősáv; a névoszlop és a fejléc rögzített */
.efo-grid-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-grid-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.efo-grid-table th, .efo-grid-table td { border-right: 1px solid var(--efo-line); border-bottom: 1px solid var(--efo-line); padding: 0; height: 28px; vertical-align: middle; white-space: nowrap; }
.efo-grid-table thead th { position: sticky; top: 0; z-index: 2; background: var(--efo-head); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--efo-ink-3); padding: 0 .5rem; text-align: center; }
.efo-grid-table thead tr.efo-fill-row th { top: 28px; padding: 0; text-transform: none; letter-spacing: 0; background: var(--efo-accent-soft); }
.efo-grid-table thead tr.efo-fill-row th.efo-fill-label { padding: 0 .5rem; color: var(--efo-accent-ink); text-align: left; background: color-mix(in srgb, var(--efo-accent) 16%, var(--efo-surface)); }
.efo-grid-table .efo-sticky { position: sticky; left: 0; z-index: 1; background: var(--efo-surface); border-right: 1px solid var(--efo-line-strong); }
.efo-grid-table thead .efo-sticky { z-index: 3; background: var(--efo-head); }
.efo-grid-table td.efo-col-name { padding: 0 .5rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.efo-grid-table td.efo-col-date { padding: 0 .5rem; color: var(--efo-ink-2); font-variant-numeric: tabular-nums; }
.efo-grid-table .efo-col-time { width: 4.5rem; min-width: 4.5rem; }
.efo-grid-table .efo-col-money { width: 6.5rem; min-width: 6.5rem; }
.efo-grid-table .efo-col-bool { width: 5.5rem; min-width: 5.5rem; text-align: center; white-space: normal; line-height: 1.15; }
.efo-grid-table .efo-col-text { min-width: 12rem; }
.efo-grid-table td.efo-col-hours { padding: 0 .5rem; text-align: right; color: var(--efo-ink-3); font-variant-numeric: tabular-nums; min-width: 3rem; }
.efo-grid-table .efo-col-status { min-width: 7rem; max-width: 16rem; padding: 0 .5rem; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.efo-grid-table tbody tr:hover td { background-color: rgba(24, 24, 27, .02); }
.efo-grid-table tbody tr.is-cancelled td:not(.efo-col-name) { color: var(--efo-muted); }

/* Cellamező */
.efo-grid-table .efo-input { display: block; width: 100%; height: 27px; border: 0; border-radius: 0; padding: 0 .375rem; background: transparent; color: var(--efo-ink); font: inherit; text-align: center; font-variant-numeric: tabular-nums; outline: 0; }
.efo-grid-table .efo-col-money .efo-input { text-align: right; }
.efo-grid-table .efo-input-text { text-align: left; }
.efo-grid-table .efo-input:focus { box-shadow: inset 0 0 0 2px var(--efo-accent); background: var(--efo-surface); }
.efo-grid-table .efo-check { width: 1rem; height: 1rem; accent-color: var(--efo-accent); cursor: pointer; }
.efo-grid-table .efo-check:focus { outline: 2px solid var(--efo-accent); outline-offset: 2px; }
.efo-grid-table .efo-fill-row .efo-input { background: var(--efo-surface); }
.efo-grid-table .efo-fill-row .efo-input::placeholder { color: var(--efo-muted); }

/* Kijelölés, hiány, hiba */
.efo-grid-table td.is-selected { box-shadow: inset 0 0 0 1px var(--efo-accent); background-color: var(--efo-accent-soft); }
.efo-grid-table td.is-missing { background-color: var(--efo-wait-soft); }
.efo-grid-table td.is-invalid, .efo-grid-table .efo-input.is-invalid { box-shadow: inset 0 0 0 2px var(--efo-danger); background-color: var(--efo-danger-soft); }

/* Sor-állapot */
.efo-status { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: .75rem; }
.efo-status-saving { color: var(--efo-wait-ink); }
.efo-status-saved { color: var(--efo-ok); }
.efo-status-pending { color: var(--efo-wait-ink); }
.efo-status-invalid, .efo-status-error { color: var(--efo-danger); }
.efo-grid-help { margin: .5rem 0 0; font-size: .75rem; color: var(--efo-ink-3); }

/* Felülírás-kérdés */
.efo-dialog-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(24, 24, 27, .35); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.efo-dialog { background: var(--efo-surface); color: var(--efo-ink); border-radius: .5rem; padding: 1rem 1.25rem; max-width: 24rem; width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.efo-dialog-text { margin: 0 0 .75rem; font-size: .9375rem; }
.efo-dialog-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.efo-dialog-buttons .btn:focus { box-shadow: 0 0 0 2px var(--efo-accent); }

/* ===== 2. mérföldkő: a Claude Design átadója szerint (efo-racs-atadas.md 4. fejezet), változtatás nélkül ===== */
/* ---- Közös rács: módosítások ---- */
.efo-grid { --efo-col-mark: 26px; }
.efo-grid-table .efo-col-mark { position: sticky; left: 0; z-index: 1; width: var(--efo-col-mark); min-width: var(--efo-col-mark); max-width: var(--efo-col-mark); padding: 0; text-align: center; background: var(--efo-surface); }
.efo-grid-table thead .efo-col-mark { z-index: 3; background: var(--efo-head); }
.efo-grid-table thead tr.efo-fill-row th.efo-col-mark { background: color-mix(in srgb, var(--efo-accent) 12%, var(--efo-surface)); }
.efo-grid-table .efo-sticky.efo-col-name { left: var(--efo-col-mark); }
.efo-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: .8125rem; line-height: 1; }
.efo-mark-missing, .efo-mark-saving, .efo-mark-pending, .efo-mark-invalid { color: var(--efo-wait-ink); }
.efo-mark-pending, .efo-mark-invalid { font-size: .6875rem; }
.efo-mark-saved { color: var(--efo-ok); }
.efo-mark-error { border-radius: 50%; background: var(--efo-danger); color: #fff; font-size: .6875rem; font-weight: 600; }
.dark-mode .efo-mark-error { color: #18181b; }

/* Vonalak: oszlopok között nincs, sorok között mindenhol egyforma 1 px. Függőleges csak az azonosító blokk és a bér után. */
.efo-grid { --efo-row-line: #f1f1f2; --efo-band: #f7f7f8; }
.dark-mode .efo-grid { --efo-row-line: #2f3338; --efo-band: #282b30; }
.efo-grid-table th, .efo-grid-table td { border-right: 0; border-bottom: 1px solid var(--efo-row-line); }
.efo-grid-table thead th { border-bottom-color: var(--efo-line); }
.efo-grid-table thead tr.efo-fill-row th { border-bottom-color: var(--efo-line-strong); }
.efo-grid-table .efo-sticky.efo-col-name { border-right: 0; }
.efo-grid-table .efo-id-end { border-right: 1px solid var(--efo-line-strong); }
.efo-grid-table .efo-col-money { border-right: 1px solid var(--efo-line); }

/* Szöveges oszlopok: balra zárnak, a végük vágódik */
.efo-grid-table td.efo-col-name, .efo-grid-table td.efo-col-date, .efo-grid-table td.efo-col-res { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efo-grid-table thead th.efo-col-name, .efo-grid-table thead th.efo-col-date, .efo-grid-table thead th.efo-col-res { text-align: left; }
.efo-grid-table td.efo-col-date, .efo-grid-table td.efo-col-res { padding: 0 .5rem; font-size: .75rem; color: var(--efo-ink-2); font-variant-numeric: tabular-nums; }
.efo-grid-table td.efo-col-res { min-width: 6.5rem; }
.efo-grid-table td.efo-col-hours { font-size: .75rem; }
.efo-grid-table .efo-col-bool .efo-check { opacity: .55; }
.efo-grid-table .efo-col-bool .efo-check:checked, .efo-grid-table .efo-col-bool .efo-check:focus { opacity: 1; }
.efo-grid-table thead tr.efo-fill-row th { background: var(--efo-head); }
.efo-grid-table thead tr.efo-fill-row th.efo-fill-label { background: color-mix(in srgb, var(--efo-accent) 22%, var(--efo-surface)); }

/* Bejelentés-csoport: váltakozó sávháttér, nem vonal */
.efo-grid-table tbody tr.is-band td { background-color: var(--efo-band); }
.efo-grid-table tbody tr.is-band td.is-selected { background-color: var(--efo-accent-soft); }

/* A hiányzó cella: sárga „—” a mező helyén, nem kitöltés és nem aláhúzás */
.efo-grid-table td.is-missing { background-color: transparent; }
.efo-grid-table tbody tr.is-band td.is-missing { background-color: var(--efo-band); }
.efo-grid-table td.is-missing .efo-input::placeholder { color: #b8892a; font-style: normal; }
.dark-mode .efo-grid-table td.is-missing .efo-input::placeholder { color: #d9b45a; }

/* Tengely és Mindenkinek-cél */
.efo-grid-table thead th.is-axis, .efo-grid-table thead th.is-fill-target { background: color-mix(in srgb, var(--efo-accent) 30%, var(--efo-head)); color: var(--efo-accent-ink); }
.efo-grid-table .efo-input::placeholder { color: color-mix(in srgb, var(--efo-accent-ink) 60%, transparent); font-style: italic; }

/* Üzenetsor az aktív sorra */
.efo-grid-msg { display: flex; align-items: center; gap: .5rem; min-height: 1.375rem; margin-top: .375rem; font-size: .75rem; color: var(--efo-ink-3); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.efo-grid-msg.is-missing, .efo-grid-msg.is-pending { color: var(--efo-wait-ink); }
.efo-grid-msg.is-invalid, .efo-grid-msg.is-error { color: var(--efo-danger); }
.efo-grid-missing { border: 0; font: inherit; cursor: pointer; }
.efo-grid-missing kbd { font-size: .6875rem; padding: 0 .375rem; color: var(--efo-ink); background: var(--efo-surface); border: 1px solid var(--efo-line-strong); border-radius: .3125rem; box-shadow: none; }
.efo-flex { flex: 1 1 auto; }
.efo-sep { width: 1px; height: 1rem; background: var(--efo-line); }
.efo-icon { width: 1.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.efo-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: var(--efo-ink-3); font-size: .8125rem; font-weight: 600; }
.efo-icon-ghost:hover { background: rgba(24, 24, 27, .06); color: var(--efo-ink); }
.efo-close { font-size: 1.25rem; font-weight: 400; }

/* ---- Kijelöltek ablaka ---- */
.efo-modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(24, 24, 27, .35); display: flex; align-items: flex-start; justify-content: center; padding: 1.25rem; }
.efo-modal { display: flex; flex-direction: column; width: min(1100px, 100%); height: 100%; min-height: 0; background: var(--efo-surface); color: var(--efo-ink); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); overflow: hidden; }
.efo-modal-head { flex: 0 0 2.75rem; display: flex; align-items: center; gap: .625rem; min-width: 0; padding: 0 .5rem 0 .875rem; background: var(--efo-head); border-bottom: 1px solid var(--efo-line-strong); }
.efo-modal-title { margin: 0; font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.efo-modal-meta { font-size: .75rem; color: var(--efo-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efo-fill-hint { flex: 0 0 1.875rem; display: flex; align-items: center; gap: .625rem; min-width: 0; padding: 0 .875rem; font-size: .75rem; background: var(--efo-accent-soft); border-bottom: 1px solid var(--efo-accent); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.efo-fill-hint b { font-weight: 600; }
.efo-fill-hint-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--efo-accent-ink); }
.efo-fill-hint-note { color: var(--efo-ink-2); }
.efo-modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: .5rem .75rem; }
.efo-modal-body .efo-grid-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.efo-modal-foot { flex: 0 0 2.75rem; display: flex; align-items: center; gap: .75rem; padding: 0 .75rem 0 .875rem; background: var(--efo-head); border-top: 1px solid var(--efo-line-strong); font-size: .75rem; color: var(--efo-ink-2); font-variant-numeric: tabular-nums; }
.efo-modal-foot b { color: var(--efo-wait-ink); font-weight: 600; }
.efo-modal-foot.is-confirm { background: var(--efo-wait-soft); border-top-color: var(--efo-wait); font-size: .8125rem; color: var(--efo-ink); }
.efo-modal-foot.is-confirm b { color: var(--efo-ink); }
.efo-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--efo-wait); flex: 0 0 auto; }
@media (max-height: 600px) {
    .efo-modal-backdrop { padding: .375rem; }
    .efo-modal-head, .efo-modal-foot { flex-basis: 2.5rem; }
    .efo-modal-body { padding: .375rem .5rem; }
}

/* ---- Napi nézet ---- */
.efo-day-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.efo-day-row { display: flex; align-items: center; gap: .625rem; min-width: 0; flex-wrap: nowrap; }
.efo-day-title { margin: 0; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.efo-day-range-text { font-size: .8125rem; color: var(--efo-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efo-seg { display: inline-flex; border: 1px solid var(--efo-line-strong); border-radius: .375rem; overflow: hidden; }
.efo-seg button { height: 1.625rem; padding: 0 .625rem; border: 0; background: var(--efo-surface); color: var(--efo-ink-2); font-size: .8125rem; white-space: nowrap; }
.efo-seg button + button { border-left: 1px solid var(--efo-line-strong); }
.efo-seg button:hover { color: var(--efo-ink); background: var(--efo-head); }
.efo-seg button.is-on { background: var(--efo-accent); color: #18181b; font-weight: 500; }
.efo-toggle-chip { height: 1.75rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .625rem; font-size: .8125rem; color: var(--efo-accent-ink); background: var(--efo-surface); border: 1px solid var(--efo-accent); border-radius: .375rem; white-space: nowrap; }
.efo-toggle-chip.is-on { background: var(--efo-accent); color: #18181b; font-weight: 500; }
.efo-day-search { position: relative; width: 14.5rem; flex: 0 1 auto; min-width: 8rem; }
.efo-day-search.is-narrow { width: 9.5rem; }
.efo-day-search .fa-search { position: absolute; left: .5625rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--efo-ink-3); pointer-events: none; }
.efo-day-search .form-control { height: 1.75rem; padding: 0 .5rem 0 1.625rem; font-size: .8125rem; background: var(--efo-surface); border-color: var(--efo-line-strong); border-radius: .375rem; color: var(--efo-ink); }
.efo-day-search .form-control:focus { border-color: var(--efo-accent); box-shadow: 0 0 0 3px var(--efo-accent-soft); }
.efo-day-sum { font-size: .75rem; color: var(--efo-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efo-day-range-select { width: auto; height: 1.625rem; font-size: .8125rem; }
.efo-grid[data-frame=day] .efo-grid-scroll { max-height: calc(100vh - var(--efo-day-offset, 13rem)); }
.efo-grid[data-frame=day] .efo-day-head.is-compact + * .efo-grid-scroll { --efo-day-offset: 8.5rem; }

/* Alacsony ablak: keskenyebb oszlopok */
@media (max-width: 960px) {
    .efo-grid-table td.efo-col-name { max-width: 8rem; }
    .efo-grid-table .efo-col-time { width: 3.75rem; min-width: 3.75rem; }
    .efo-grid-table .efo-col-money { width: 5.75rem; min-width: 5.75rem; }
    .efo-grid-table .efo-col-bool { width: 4.25rem; min-width: 4.25rem; }
}

/* ---- Állapotok ---- */
.efo-state { padding: .875rem; border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-state-title { font-size: .8125rem; font-weight: 600; }
.efo-state-text { margin-top: .125rem; font-size: .75rem; line-height: 1.5; color: var(--efo-ink-2); }
.efo-state-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.efo-state.is-error .efo-state-title { color: var(--efo-danger); }
.efo-skel-row { display: flex; align-items: center; gap: .875rem; height: 28px; padding: 0 .625rem; border-bottom: 1px solid var(--efo-line); }
.efo-skel { height: .5625rem; border-radius: .25rem; background: var(--efo-line); animation: efo-pulse 1.2s ease-in-out infinite alternate; }
@keyframes efo-pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .efo-skel { animation: none; } }

/* ---- Kiegészítések az átadóhoz ---- */
.efo-frame { min-width: 0; }
.efo-muted { color: var(--efo-ink-3); }
.efo-grid-msg-text { overflow: hidden; text-overflow: ellipsis; }
.efo-grid-missing { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .375rem .125rem .5rem; }
.efo-skeleton { border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-modal .efo-grid-msg { flex: 0 0 auto; }
.efo-modal .efo-grid-help { flex: 0 0 auto; }

/* Napi nézet kiegészítései: egyéni időszak, tömör "⋯" menü (a tervezői CSS mellé). */
.efo-day-custom { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .625rem; border: 1px solid var(--efo-line-strong); border-radius: .375rem; background: var(--efo-surface); }
.efo-day-custom label { display: inline-flex; align-items: center; gap: .375rem; margin: 0; font-size: .8125rem; color: var(--efo-ink-2); }
.efo-day-custom .form-control { width: 9.5rem; height: 1.75rem; font-size: .8125rem; }
.efo-day-custom-error { font-size: .8125rem; color: var(--efo-danger); }
.efo-more { position: relative; display: inline-flex; }
.efo-more-menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: .25rem; min-width: 12rem; padding: .5rem; background: var(--efo-surface); border: 1px solid var(--efo-line-strong); border-radius: .375rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.efo-more-text { font-size: .75rem; color: var(--efo-ink-2); white-space: nowrap; }
.efo-more-item { border: 0; background: transparent; text-align: left; padding: .25rem .375rem; font-size: .8125rem; color: var(--efo-ink); border-radius: .25rem; }
.efo-more-item:hover { background: var(--efo-head); }
/* A platform űrlap-stílusa felülírja a tervezői méreteket (mért: a select 7 px-es függőleges belső margója levágja a szöveget,
   a kereső bal margója 10,5 px, így az ikon a szövegre csúszik): magasabb fajlagossággal visszaállítva. */
html body #app .efo-grid .efo-day-row select.efo-day-range-select { height: 1.75rem !important; min-width: 7.5rem; padding: 0 1.75rem 0 .5rem !important; line-height: 1.625rem; font-size: .8125rem; }
html body #app .efo-grid .efo-day-search input.form-control { height: 1.75rem !important; padding: 0 .5rem 0 1.75rem !important; }
html body #app .efo-grid .efo-day-custom input.form-control { height: 1.75rem !important; padding: 0 .375rem !important; }
/* Sor-ablakozás: a ki nem rajzolt sorok helye (vonal és háttér nélkül). */
.efo-grid-table tbody tr.efo-pad td { padding: 0; border: 0; background: transparent; }

/* EFO-rács indító: másodlagos gomb (arany körvonal, halvány arany kitöltés), a Létrehozás marad az egyetlen teli gomb. */
.efo-launcher { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.efo-launcher-sep { width: 1px; height: 1.5rem; background: #d4d4d8; }
.efo-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, .16); color: #7d6136; font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.efo-launcher-btn:hover:not(:disabled) { background: rgba(196, 158, 111, .28); }
.efo-launcher-btn:focus { outline: 0; box-shadow: 0 0 0 3px rgba(196, 158, 111, .35); }
.efo-launcher-btn:disabled { opacity: .55; cursor: not-allowed; }
.efo-launcher-badge { min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 600; color: #18181b; background: #C49E6F; border-radius: .625rem; font-variant-numeric: tabular-nums; }
.dark-mode .efo-launcher-btn { color: #e8d7bd; background: rgba(189, 165, 136, .2); }
.dark-mode .efo-launcher-sep { background: #4c535a; }

/* EFO napi kitöltés: a megjelenést az efo-grid adja. */

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