.v-calendar-weekly__day.v-present [data-day] {
    background-color: var(--orange)!important;
    color: #fff;
    font-weight: bold;
}
.v-calendar-daily__intervals-body,
.v-calendar-daily__intervals-head {
    width: 25px !important;
}
.v-calendar .v-btn--fab.v-size--default {
    background: none;
    border-radius: 0;
    height: auto;
    width: auto;
}
.v-calendar-daily__interval-text {
    white-space: nowrap;
}
@media (max-width: 552px) {
    .calendar-card {
        background: none;
    }
}




















































.km-root { --km-warn-bg: #fdf3e1; --km-warn-border: #e8c27a; --km-warn-text: #8a5a00;
           --km-ok-bg: #eaf6ed; --km-ok-border: #9fd0ac; --km-ok-text: #1e7b34;
           --km-err-bg: #fcecee; --km-err-border: #eaa1a8; --km-err-text: #a71d2a;
           --km-soft: #fafafa; --km-ph: #a1a1aa; min-width: 0; color: var(--text-main); }
body.dark-mode .km-root { --km-warn-bg: rgba(232,194,122,.12); --km-warn-border: #7a6230; --km-warn-text: #f0d08a;
           --km-ok-bg: rgba(40,167,69,.14); --km-ok-border: #2f6b3d; --km-ok-text: #8fd6a1;
           --km-err-bg: rgba(220,53,69,.14); --km-err-border: #7a2a33; --km-err-text: #f2a3ab;
           --km-soft: rgba(255,255,255,.03); --km-ph: #71717a; }

.km-root .km-h1 { margin: 0 0 14px; font-size: 1.375rem; font-weight: 600; }
.km-root .km-crumb { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-crumb a { color: var(--text-muted); }
.km-root .km-flex { flex: 1 1 auto; min-width: 0; }
.km-root.km-pagehead { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.km-root .km-count { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Gombok: egy elsődleges, egy másodlagos */
.km-root .btn.km-btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn.km-btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #18181b; }
.km-root .btn.km-btn-secondary { background: var(--bg-card); border-color: var(--border-color); color: var(--text-main); font-weight: 500; }
.km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-card); color: var(--text-main); }
.km-root .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); outline: 0; }
.km-root .btn i { font-size: .75rem; margin-right: .375rem; }

/* Rács */
.km-root .km-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 67.5rem; }
@media (min-width: 992px) { .km-root .km-grid { grid-template-columns: minmax(0, 1fr) 18.75rem; } .km-root .km-preview { position: sticky; top: calc(var(--sticky-top-offset, 0px) + 1rem); } }
.km-root .km-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .5rem; box-shadow: var(--card-shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 575.98px) { .km-root .km-card { padding: 1rem; } }
.km-root .km-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .75rem; }
@media (min-width: 576px) { .km-root .km-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Szakaszok és mezők */
.km-root .km-section { display: flex; flex-direction: column; }
.km-root .km-section-title { margin-bottom: .75rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.km-root .km-section-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.km-root .form-group { margin-bottom: .75rem; }
.km-root .form-group > label, .km-root .col-form-label { font-size: .8125rem; font-weight: 500; color: var(--text-main); margin-bottom: .3125rem; padding: 0; }
.km-root .km-req { color: var(--red, #dc3545); }
.km-root .km-alt { color: var(--text-muted); font-weight: 400; }
.km-root .form-control, .km-root .custom-select { height: 2.25rem; font-size: .875rem; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: .375rem; color: var(--text-main); }
.km-root textarea.form-control { height: auto; line-height: 1.45; }
.km-root .form-control::placeholder { color: var(--km-ph); }
.km-root .form-control:focus, .km-root .custom-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .form-control.is-invalid, .km-root .custom-select.is-invalid { border-color: var(--red, #dc3545); background-image: none; padding-right: .75rem; }
.km-root .invalid-feedback { font-size: .75rem; color: var(--km-err-text); }
.km-root .form-text { font-size: .75rem; color: var(--text-muted); }
.km-root .km-contact { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: .375rem; }
.km-root .km-contact.is-ok { color: var(--km-ok-text); }
.km-root .km-contact.is-error { color: var(--km-err-text); }
.km-root .km-parent { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-parent .form-group:last-child, .km-root .km-parent .km-pair .form-group { margin-bottom: 0; }

/* Szegmens (Kinek szól?, tanácsadó) */
.km-root .btn-group-toggle .btn.btn-km-seg { height: 2.125rem; padding: 0 .875rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: none; }
.km-root .btn-group-toggle .btn.btn-km-seg.active { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn-group-toggle .btn.btn-km-seg.focus { box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .km-seg-full { display: flex; } .km-root .km-seg-full .btn { flex: 1 1 0; }

/* Ajánlat-kártyák */
.km-root .km-option { display: flex; gap: .625rem; margin: 0 0 .625rem; padding: .6875rem .75rem; border: 1px solid var(--border-color); border-radius: .5rem; background: var(--bg-card); cursor: pointer; }
.km-root .km-option.is-on { border-color: var(--accent-color); background: var(--accent-glow); }
.km-root .km-option input { accent-color: var(--accent-color); margin-top: .1875rem; }
.km-root .km-option strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-option small { display: block; font-size: .75rem; color: var(--text-muted); }

/* „Mentéskor ez történik” és „Ez jön létre” lista */
.km-root .km-preview { padding: 1rem; gap: .875rem; }
.km-root .km-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.km-root .km-steps li { display: flex; gap: .625rem; }
.km-root .km-steps strong { display: block; font-size: .875rem; font-weight: 600; }
.km-root .km-steps small { display: block; font-size: .75rem; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.km-root .km-step-ic { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--text-main); font-size: .6875rem; }
.km-root .km-steps li.is-muted strong { color: var(--text-muted); }
.km-root .km-steps li.is-muted .km-step-ic { background: transparent; color: var(--km-ph); }
.km-root .km-steps li.is-warn { padding: .625rem; background: var(--km-warn-bg); border-radius: .375rem; }
.km-root .km-steps li.is-warn small { color: var(--text-main); }
.km-root .km-steps li.is-warn .km-step-ic { background: transparent; color: var(--km-warn-text); }
.km-root .km-steps li.is-done .km-step-ic { background: var(--km-ok-bg); color: var(--km-ok-text); }
.km-root .km-steps li.is-running .km-step-ic { background: transparent; color: var(--accent-color); }
.km-root .km-steps li.is-wait .km-step-ic { background: transparent; border: 1px dashed var(--km-ph); }
.km-root .km-steps li.is-wait strong, .km-root .km-steps li.is-skip strong { color: var(--text-muted); }
.km-root .km-steps li.is-skip .km-step-ic { background: transparent; border: 1px solid var(--border-color); color: var(--km-ph); }
.km-root .km-steps li.is-fail .km-step-ic { background: var(--km-err-bg); color: var(--km-err-text); }
.km-root .km-steps li.is-fail small { color: var(--km-err-text); }
.km-root .km-errsum { font-size: .8125rem; font-weight: 500; color: var(--km-err-text); }
.km-root .km-save { height: 2.5rem; font-size: .9375rem; }
.km-root .km-hint { font-size: .75rem; color: var(--text-muted); text-align: center; }

/* Eredménysáv */
.km-root .alert.km-alert { display: flex; align-items: flex-start; gap: .75rem; max-width: 67.5rem; padding: .75rem .875rem; border-radius: .5rem; color: var(--text-main); }
.km-root .alert.km-alert > i { font-size: 1rem; margin-top: .125rem; }
.km-root .km-alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; font-size: .8125rem; line-height: 1.5; }
.km-root .km-alert-body strong { font-size: .9375rem; font-weight: 600; }
.km-root .km-alert-link { font-size: .8125rem; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.km-root .alert-success.km-alert { background: var(--km-ok-bg); border-color: var(--km-ok-border); } .km-root .alert-success.km-alert > i, .km-root .alert-success .km-alert-link { color: var(--km-ok-text); }
.km-root .alert-warning.km-alert { background: var(--km-warn-bg); border-color: var(--km-warn-border); } .km-root .alert-warning.km-alert > i, .km-root .alert-warning .km-alert-link { color: var(--km-warn-text); }
.km-root .alert-danger.km-alert { background: var(--km-err-bg); border-color: var(--km-err-border); } .km-root .alert-danger.km-alert > i { color: var(--km-err-text); }

/* Modál */
.km-root .modal-content { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: .625rem; }
.km-root .modal-header, .km-root .modal-footer { border-color: var(--border-color); padding: 1rem 1.25rem; }
.km-root .modal-footer { gap: .5rem; } .km-root .modal-footer > * { margin: 0; }
.km-root .km-mtitle { font-size: 1.125rem; font-weight: 600; }
.km-root .km-msub { font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
.km-root .km-footnote { flex: 1; font-size: .75rem; color: var(--text-muted); }
.km-root .km-mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 768px) { .km-root .km-mgrid:not(.is-single) { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-mleft.is-locked { opacity: .55; pointer-events: none; }
.km-root .km-leadcard { margin-bottom: .875rem; padding: .75rem .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-leadcard-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.km-root .km-leadcard-head strong { font-size: .9375rem; }
.km-root .km-leadcard-head small { font-size: .75rem; color: var(--text-muted); }
.km-root .km-pill { font-size: .75rem; padding: 0 .4375rem; border: 1px solid var(--accent-color); border-radius: .625rem; }
.km-root .km-leadcard dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .1875rem .625rem; margin: 0; font-size: .8125rem; }
.km-root .km-leadcard dt { font-weight: 400; color: var(--text-muted); }
.km-root .km-leadcard dd { margin: 0; overflow-wrap: anywhere; } .km-root .km-leadcard dd.is-muted { color: var(--text-muted); }
.km-root .km-plan { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.125rem; border: 1px dashed var(--border-color); border-radius: .5rem; font-size: .8125rem; color: var(--text-muted); }
.km-root .km-empty i { font-size: 1.25rem; } .km-root .km-empty strong { font-size: .9375rem; color: var(--text-main); }
.km-root .km-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent-color); border-color: var(--accent-color); }
.km-root .km-switch strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-switch small { display: block; font-size: .75rem; color: var(--text-muted); } .km-root .km-switch small.is-warn { color: var(--km-warn-text); }
@media (max-width: 575.98px) {
  .km-modal-full .modal-dialog { margin: 0; max-width: none; height: 100%; }
  .km-modal-full .modal-content { min-height: 100%; border: 0; border-radius: 0; }
}

/* Kiwi kereten beluli igazitasok */
.km-root.km-intake { padding: 1rem; }
.km-root.km-pagehead { margin-bottom: 1rem; }
.km-root .km-loading { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 0; color: var(--text-muted); font-size: .875rem; }
.km-root .km-crumb i { font-size: .625rem; margin-left: .25rem; }
.km-root .km-section-title i { margin-right: .25rem; }

/* --- Skin-utkozesek (a 9999-es skin !important-tal festi a gombokat, linkeket, alerteket) ---
   Csak a .km-root alatt, ezert itt kivetelesen !important. */
body .km-root .btn.km-btn-primary, body .km-root a.btn.km-btn-primary, body #app .km-root a.btn.km-btn-primary, body .km-root .btn.km-btn-primary:hover, body #app .km-root .btn.km-btn-primary:hover, body .km-root a.btn.km-btn-primary:hover, body #app .km-root a.btn.km-btn-primary:hover, body .km-root .btn.km-btn-primary:focus, body #app .km-root .btn.km-btn-primary:focus, body .km-root a.btn.km-btn-primary:visited, body #app .km-root a.btn.km-btn-primary:visited { color: #18181b !important; }body .km-root .btn.km-btn-primary *, body #app .km-root .btn.km-btn-primary *, body .km-root .btn.km-btn-secondary *, body #app .km-root .btn.km-btn-secondary * { color: inherit !important; }body .km-root .btn.km-btn-secondary, body #app .km-root .btn.km-btn-secondary, body .km-root a.btn.km-btn-secondary, body #app .km-root a.btn.km-btn-secondary, body .km-root .btn.km-btn-secondary:visited, body #app .km-root .btn.km-btn-secondary:visited { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; box-shadow: none !important; }body .km-root .btn.km-btn-secondary:hover:not(:disabled), body #app .km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted) !important; color: var(--text-main) !important; background: var(--bg-card) !important; }body .km-root .btn-group-toggle .btn.btn-km-seg.active, body #app .km-root .btn-group-toggle .btn.btn-km-seg.active { color: #18181b !important; }body .km-root .alert.km-alert, body #app .km-root .alert.km-alert { color: var(--text-main) !important; }body .km-root .alert-success.km-alert, body #app .km-root .alert-success.km-alert { background: var(--km-ok-bg) !important; border: 1px solid var(--km-ok-border) !important; }body .km-root .alert-warning.km-alert, body #app .km-root .alert-warning.km-alert { background: var(--km-warn-bg) !important; border: 1px solid var(--km-warn-border) !important; }body .km-root .alert-danger.km-alert, body #app .km-root .alert-danger.km-alert { background: var(--km-err-bg) !important; border: 1px solid var(--km-err-border) !important; }body .km-root .alert-success.km-alert > i, body #app .km-root .alert-success.km-alert > i, body .km-root .alert-success .km-alert-link, body #app .km-root .alert-success .km-alert-link { color: var(--km-ok-text) !important; }body .km-root .alert-warning.km-alert > i, body #app .km-root .alert-warning.km-alert > i, body .km-root .alert-warning .km-alert-link, body #app .km-root .alert-warning .km-alert-link { color: var(--km-warn-text) !important; }body .km-root .alert-danger.km-alert > i, body #app .km-root .alert-danger.km-alert > i { color: var(--km-err-text) !important; }body .km-root .km-alert-body span, body #app .km-root .km-alert-body span { color: var(--text-main) !important; }/* Lista oszlopszuro-lenyilo: a skin a .table-responsive-ot levagja (overflow + max-height), ezert a fejlecbol nyilo menu a sorok ala szorul. Amig egy menu nyitva van, a levagas szunetel. */
body #app .leads-module-container .table-responsive:has(thead .dropdown-menu.show) {
  /* Az app.js nyitaskor soron belul overflow-x: initial-t ir ra -> szeles tablanal a lap oldalra ugrott.
     A gorgetes marad, a tarolo nyitott menunel magasabb, hogy a menu kiferjen (KIWI_00056-on mert megoldas). */
  overflow-x: auto !important; overflow-y: auto !important; max-height: none !important; min-height: 22rem !important; }
/* A Kiwi alapkod (app.js lenyilo-direktiva) position:fixed-del, egy rossz fejlec-elem meretebol szamolja a menu helyet,
   ezert a menu a sarokba, a sorok ala kerul. A soron beluli stilust itt a sajat gombja ala kenyszeritjuk. */
body #app .leads-module-container .crud-table thead .dropdown-menu.show {
  position: absolute !important; top: 100% !important; bottom: auto !important;
  right: 0 !important; left: auto !important; transform: none !important;
  min-width: 100% !important; z-index: 1060 !important; max-height: 300px !important; }

body #app .km-root .km-crumb a, body #app .km-root .km-crumb a:hover { color: var(--text-muted) !important; text-decoration: none !important; }
body #app .leads-module-container .crud-table thead th:nth-child(-n+3) .dropdown-menu.show { left: 0 !important; right: auto !important; }

/* Lead-beallitasok (106) */
.km-root.km-settings .km-grid { max-width: 75rem; }
@media (min-width: 992px) { .km-root.km-settings .km-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-typehead { display: none; }
.km-root .km-typerow { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; gap: .5rem; align-items: end; padding: .75rem 0; border-top: 1px solid var(--border-color); }
.km-root .km-typerow:first-of-type, .km-root .km-typehead + .km-typerow { border-top: 0; }
.km-root .km-typename { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; }
.km-root .km-typerow .km-typefield { margin: 0; min-width: 0; }
.km-root .km-typerow .km-f-prod { grid-column: 1 / -1; }
.km-root .km-typenote { grid-column: 1 / -1; font-size: .75rem; color: var(--text-muted); display: flex; gap: .375rem; align-items: baseline; }
.km-root .km-typenote.is-warn { color: var(--km-warn-text); }
.km-root .km-mlabel { font-size: .75rem !important; color: var(--text-muted) !important; font-weight: 400 !important; }
@media (min-width: 768px) {
  .km-root .km-typehead, .km-root .km-typerow { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.6fr) 2.25rem minmax(0, 1.3fr); gap: .625rem; align-items: center; }
  .km-root .km-typehead { padding-bottom: .375rem; font-size: .75rem; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
  .km-root .km-typename { grid-column: auto; font-weight: 500; }
  .km-root .km-typerow .km-f-prod { grid-column: auto; }
  .km-root .km-typerow .km-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .km-root .km-typenote { grid-column: 2 / -1; margin-top: -.25rem; }
}
.km-root .btn.km-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.km-root .btn.km-btn-icon i { margin: 0; font-size: .8125rem; }
.km-root .km-checks .custom-control { margin-bottom: .5rem; }
.km-root .km-switch.custom-switch .custom-control-label { padding-top: .0625rem; }
.km-root .km-nochange { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-preview .btn + .btn { margin-top: 0; }
/* A skin 7px fuggoleges belso margot ad: 2.25rem magassagban a szoveg alja levagodott. */
body #app .km-root input.form-control, body #app .km-root .custom-select { padding-top: 0 !important; padding-bottom: 0 !important; }
body #app .km-root .custom-select { padding-right: 1.75rem !important; text-overflow: ellipsis; }

.km-root { --km-warn-bg: #fdf3e1; --km-warn-border: #e8c27a; --km-warn-text: #8a5a00;
           --km-ok-bg: #eaf6ed; --km-ok-border: #9fd0ac; --km-ok-text: #1e7b34;
           --km-err-bg: #fcecee; --km-err-border: #eaa1a8; --km-err-text: #a71d2a;
           --km-soft: #fafafa; --km-ph: #a1a1aa; min-width: 0; color: var(--text-main); }
body.dark-mode .km-root { --km-warn-bg: rgba(232,194,122,.12); --km-warn-border: #7a6230; --km-warn-text: #f0d08a;
           --km-ok-bg: rgba(40,167,69,.14); --km-ok-border: #2f6b3d; --km-ok-text: #8fd6a1;
           --km-err-bg: rgba(220,53,69,.14); --km-err-border: #7a2a33; --km-err-text: #f2a3ab;
           --km-soft: rgba(255,255,255,.03); --km-ph: #71717a; }

.km-root .km-h1 { margin: 0 0 14px; font-size: 1.375rem; font-weight: 600; }
.km-root .km-crumb { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-crumb a { color: var(--text-muted); }
.km-root .km-flex { flex: 1 1 auto; min-width: 0; }
.km-root.km-pagehead { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.km-root .km-count { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Gombok: egy elsődleges, egy másodlagos */
.km-root .btn.km-btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn.km-btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #18181b; }
.km-root .btn.km-btn-secondary { background: var(--bg-card); border-color: var(--border-color); color: var(--text-main); font-weight: 500; }
.km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-card); color: var(--text-main); }
.km-root .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); outline: 0; }
.km-root .btn i { font-size: .75rem; margin-right: .375rem; }

/* Rács */
.km-root .km-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 67.5rem; }
@media (min-width: 992px) { .km-root .km-grid { grid-template-columns: minmax(0, 1fr) 18.75rem; } .km-root .km-preview { position: sticky; top: calc(var(--sticky-top-offset, 0px) + 1rem); } }
.km-root .km-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .5rem; box-shadow: var(--card-shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 575.98px) { .km-root .km-card { padding: 1rem; } }
.km-root .km-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .75rem; }
@media (min-width: 576px) { .km-root .km-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Szakaszok és mezők */
.km-root .km-section { display: flex; flex-direction: column; }
.km-root .km-section-title { margin-bottom: .75rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.km-root .km-section-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.km-root .form-group { margin-bottom: .75rem; }
.km-root .form-group > label, .km-root .col-form-label { font-size: .8125rem; font-weight: 500; color: var(--text-main); margin-bottom: .3125rem; padding: 0; }
.km-root .km-req { color: var(--red, #dc3545); }
.km-root .km-alt { color: var(--text-muted); font-weight: 400; }
.km-root .form-control, .km-root .custom-select { height: 2.25rem; font-size: .875rem; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: .375rem; color: var(--text-main); }
.km-root textarea.form-control { height: auto; line-height: 1.45; }
.km-root .form-control::placeholder { color: var(--km-ph); }
.km-root .form-control:focus, .km-root .custom-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .form-control.is-invalid, .km-root .custom-select.is-invalid { border-color: var(--red, #dc3545); background-image: none; padding-right: .75rem; }
.km-root .invalid-feedback { font-size: .75rem; color: var(--km-err-text); }
.km-root .form-text { font-size: .75rem; color: var(--text-muted); }
.km-root .km-contact { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: .375rem; }
.km-root .km-contact.is-ok { color: var(--km-ok-text); }
.km-root .km-contact.is-error { color: var(--km-err-text); }
.km-root .km-parent { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-parent .form-group:last-child, .km-root .km-parent .km-pair .form-group { margin-bottom: 0; }

/* Szegmens (Kinek szól?, tanácsadó) */
.km-root .btn-group-toggle .btn.btn-km-seg { height: 2.125rem; padding: 0 .875rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: none; }
.km-root .btn-group-toggle .btn.btn-km-seg.active { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn-group-toggle .btn.btn-km-seg.focus { box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .km-seg-full { display: flex; } .km-root .km-seg-full .btn { flex: 1 1 0; }

/* Ajánlat-kártyák */
.km-root .km-option { display: flex; gap: .625rem; margin: 0 0 .625rem; padding: .6875rem .75rem; border: 1px solid var(--border-color); border-radius: .5rem; background: var(--bg-card); cursor: pointer; }
.km-root .km-option.is-on { border-color: var(--accent-color); background: var(--accent-glow); }
.km-root .km-option input { accent-color: var(--accent-color); margin-top: .1875rem; }
.km-root .km-option strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-option small { display: block; font-size: .75rem; color: var(--text-muted); }

/* „Mentéskor ez történik” és „Ez jön létre” lista */
.km-root .km-preview { padding: 1rem; gap: .875rem; }
.km-root .km-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.km-root .km-steps li { display: flex; gap: .625rem; }
.km-root .km-steps strong { display: block; font-size: .875rem; font-weight: 600; }
.km-root .km-steps small { display: block; font-size: .75rem; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.km-root .km-step-ic { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--text-main); font-size: .6875rem; }
.km-root .km-steps li.is-muted strong { color: var(--text-muted); }
.km-root .km-steps li.is-muted .km-step-ic { background: transparent; color: var(--km-ph); }
.km-root .km-steps li.is-warn { padding: .625rem; background: var(--km-warn-bg); border-radius: .375rem; }
.km-root .km-steps li.is-warn small { color: var(--text-main); }
.km-root .km-steps li.is-warn .km-step-ic { background: transparent; color: var(--km-warn-text); }
.km-root .km-steps li.is-done .km-step-ic { background: var(--km-ok-bg); color: var(--km-ok-text); }
.km-root .km-steps li.is-running .km-step-ic { background: transparent; color: var(--accent-color); }
.km-root .km-steps li.is-wait .km-step-ic { background: transparent; border: 1px dashed var(--km-ph); }
.km-root .km-steps li.is-wait strong, .km-root .km-steps li.is-skip strong { color: var(--text-muted); }
.km-root .km-steps li.is-skip .km-step-ic { background: transparent; border: 1px solid var(--border-color); color: var(--km-ph); }
.km-root .km-steps li.is-fail .km-step-ic { background: var(--km-err-bg); color: var(--km-err-text); }
.km-root .km-steps li.is-fail small { color: var(--km-err-text); }
.km-root .km-errsum { font-size: .8125rem; font-weight: 500; color: var(--km-err-text); }
.km-root .km-save { height: 2.5rem; font-size: .9375rem; }
.km-root .km-hint { font-size: .75rem; color: var(--text-muted); text-align: center; }

/* Eredménysáv */
.km-root .alert.km-alert { display: flex; align-items: flex-start; gap: .75rem; max-width: 67.5rem; padding: .75rem .875rem; border-radius: .5rem; color: var(--text-main); }
.km-root .alert.km-alert > i { font-size: 1rem; margin-top: .125rem; }
.km-root .km-alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; font-size: .8125rem; line-height: 1.5; }
.km-root .km-alert-body strong { font-size: .9375rem; font-weight: 600; }
.km-root .km-alert-link { font-size: .8125rem; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.km-root .alert-success.km-alert { background: var(--km-ok-bg); border-color: var(--km-ok-border); } .km-root .alert-success.km-alert > i, .km-root .alert-success .km-alert-link { color: var(--km-ok-text); }
.km-root .alert-warning.km-alert { background: var(--km-warn-bg); border-color: var(--km-warn-border); } .km-root .alert-warning.km-alert > i, .km-root .alert-warning .km-alert-link { color: var(--km-warn-text); }
.km-root .alert-danger.km-alert { background: var(--km-err-bg); border-color: var(--km-err-border); } .km-root .alert-danger.km-alert > i { color: var(--km-err-text); }

/* Modál */
.km-root .modal-content { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: .625rem; }
.km-root .modal-header, .km-root .modal-footer { border-color: var(--border-color); padding: 1rem 1.25rem; }
.km-root .modal-footer { gap: .5rem; } .km-root .modal-footer > * { margin: 0; }
.km-root .km-mtitle { font-size: 1.125rem; font-weight: 600; }
.km-root .km-msub { font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
.km-root .km-footnote { flex: 1; font-size: .75rem; color: var(--text-muted); }
.km-root .km-mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 768px) { .km-root .km-mgrid:not(.is-single) { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-mleft.is-locked { opacity: .55; pointer-events: none; }
.km-root .km-leadcard { margin-bottom: .875rem; padding: .75rem .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-leadcard-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.km-root .km-leadcard-head strong { font-size: .9375rem; }
.km-root .km-leadcard-head small { font-size: .75rem; color: var(--text-muted); }
.km-root .km-pill { font-size: .75rem; padding: 0 .4375rem; border: 1px solid var(--accent-color); border-radius: .625rem; }
.km-root .km-leadcard dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .1875rem .625rem; margin: 0; font-size: .8125rem; }
.km-root .km-leadcard dt { font-weight: 400; color: var(--text-muted); }
.km-root .km-leadcard dd { margin: 0; overflow-wrap: anywhere; } .km-root .km-leadcard dd.is-muted { color: var(--text-muted); }
.km-root .km-plan { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.125rem; border: 1px dashed var(--border-color); border-radius: .5rem; font-size: .8125rem; color: var(--text-muted); }
.km-root .km-empty i { font-size: 1.25rem; } .km-root .km-empty strong { font-size: .9375rem; color: var(--text-main); }
.km-root .km-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent-color); border-color: var(--accent-color); }
.km-root .km-switch strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-switch small { display: block; font-size: .75rem; color: var(--text-muted); } .km-root .km-switch small.is-warn { color: var(--km-warn-text); }
@media (max-width: 575.98px) {
  .km-modal-full .modal-dialog { margin: 0; max-width: none; height: 100%; }
  .km-modal-full .modal-content { min-height: 100%; border: 0; border-radius: 0; }
}

/* Kiwi kereten beluli igazitasok */
.km-root.km-intake { padding: 1rem; }
.km-root.km-pagehead { margin-bottom: 1rem; }
.km-root .km-loading { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 0; color: var(--text-muted); font-size: .875rem; }
.km-root .km-crumb i { font-size: .625rem; margin-left: .25rem; }
.km-root .km-section-title i { margin-right: .25rem; }

/* --- Skin-utkozesek (a 9999-es skin !important-tal festi a gombokat, linkeket, alerteket) ---
   Csak a .km-root alatt, ezert itt kivetelesen !important. */
body .km-root .btn.km-btn-primary, body .km-root a.btn.km-btn-primary, body #app .km-root a.btn.km-btn-primary, body .km-root .btn.km-btn-primary:hover, body #app .km-root .btn.km-btn-primary:hover, body .km-root a.btn.km-btn-primary:hover, body #app .km-root a.btn.km-btn-primary:hover, body .km-root .btn.km-btn-primary:focus, body #app .km-root .btn.km-btn-primary:focus, body .km-root a.btn.km-btn-primary:visited, body #app .km-root a.btn.km-btn-primary:visited { color: #18181b !important; }body .km-root .btn.km-btn-primary *, body #app .km-root .btn.km-btn-primary *, body .km-root .btn.km-btn-secondary *, body #app .km-root .btn.km-btn-secondary * { color: inherit !important; }body .km-root .btn.km-btn-secondary, body #app .km-root .btn.km-btn-secondary, body .km-root a.btn.km-btn-secondary, body #app .km-root a.btn.km-btn-secondary, body .km-root .btn.km-btn-secondary:visited, body #app .km-root .btn.km-btn-secondary:visited { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; box-shadow: none !important; }body .km-root .btn.km-btn-secondary:hover:not(:disabled), body #app .km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted) !important; color: var(--text-main) !important; background: var(--bg-card) !important; }body .km-root .btn-group-toggle .btn.btn-km-seg.active, body #app .km-root .btn-group-toggle .btn.btn-km-seg.active { color: #18181b !important; }body .km-root .alert.km-alert, body #app .km-root .alert.km-alert { color: var(--text-main) !important; }body .km-root .alert-success.km-alert, body #app .km-root .alert-success.km-alert { background: var(--km-ok-bg) !important; border: 1px solid var(--km-ok-border) !important; }body .km-root .alert-warning.km-alert, body #app .km-root .alert-warning.km-alert { background: var(--km-warn-bg) !important; border: 1px solid var(--km-warn-border) !important; }body .km-root .alert-danger.km-alert, body #app .km-root .alert-danger.km-alert { background: var(--km-err-bg) !important; border: 1px solid var(--km-err-border) !important; }body .km-root .alert-success.km-alert > i, body #app .km-root .alert-success.km-alert > i, body .km-root .alert-success .km-alert-link, body #app .km-root .alert-success .km-alert-link { color: var(--km-ok-text) !important; }body .km-root .alert-warning.km-alert > i, body #app .km-root .alert-warning.km-alert > i, body .km-root .alert-warning .km-alert-link, body #app .km-root .alert-warning .km-alert-link { color: var(--km-warn-text) !important; }body .km-root .alert-danger.km-alert > i, body #app .km-root .alert-danger.km-alert > i { color: var(--km-err-text) !important; }body .km-root .km-alert-body span, body #app .km-root .km-alert-body span { color: var(--text-main) !important; }/* Lista oszlopszuro-lenyilo: a skin a .table-responsive-ot levagja (overflow + max-height), ezert a fejlecbol nyilo menu a sorok ala szorul. Amig egy menu nyitva van, a levagas szunetel. */
body #app .leads-module-container .table-responsive:has(thead .dropdown-menu.show) {
  /* Az app.js nyitaskor soron belul overflow-x: initial-t ir ra -> szeles tablanal a lap oldalra ugrott.
     A gorgetes marad, a tarolo nyitott menunel magasabb, hogy a menu kiferjen (KIWI_00056-on mert megoldas). */
  overflow-x: auto !important; overflow-y: auto !important; max-height: none !important; min-height: 22rem !important; }
/* A Kiwi alapkod (app.js lenyilo-direktiva) position:fixed-del, egy rossz fejlec-elem meretebol szamolja a menu helyet,
   ezert a menu a sarokba, a sorok ala kerul. A soron beluli stilust itt a sajat gombja ala kenyszeritjuk. */
body #app .leads-module-container .crud-table thead .dropdown-menu.show {
  position: absolute !important; top: 100% !important; bottom: auto !important;
  right: 0 !important; left: auto !important; transform: none !important;
  min-width: 100% !important; z-index: 1060 !important; max-height: 300px !important; }

body #app .km-root .km-crumb a, body #app .km-root .km-crumb a:hover { color: var(--text-muted) !important; text-decoration: none !important; }
body #app .leads-module-container .crud-table thead th:nth-child(-n+3) .dropdown-menu.show { left: 0 !important; right: auto !important; }

/* Lead-beallitasok (106) */
.km-root.km-settings .km-grid { max-width: 75rem; }
@media (min-width: 992px) { .km-root.km-settings .km-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-typehead { display: none; }
.km-root .km-typerow { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; gap: .5rem; align-items: end; padding: .75rem 0; border-top: 1px solid var(--border-color); }
.km-root .km-typerow:first-of-type, .km-root .km-typehead + .km-typerow { border-top: 0; }
.km-root .km-typename { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; }
.km-root .km-typerow .km-typefield { margin: 0; min-width: 0; }
.km-root .km-typerow .km-f-prod { grid-column: 1 / -1; }
.km-root .km-typenote { grid-column: 1 / -1; font-size: .75rem; color: var(--text-muted); display: flex; gap: .375rem; align-items: baseline; }
.km-root .km-typenote.is-warn { color: var(--km-warn-text); }
.km-root .km-mlabel { font-size: .75rem !important; color: var(--text-muted) !important; font-weight: 400 !important; }
@media (min-width: 768px) {
  .km-root .km-typehead, .km-root .km-typerow { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.6fr) 2.25rem minmax(0, 1.3fr); gap: .625rem; align-items: center; }
  .km-root .km-typehead { padding-bottom: .375rem; font-size: .75rem; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
  .km-root .km-typename { grid-column: auto; font-weight: 500; }
  .km-root .km-typerow .km-f-prod { grid-column: auto; }
  .km-root .km-typerow .km-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .km-root .km-typenote { grid-column: 2 / -1; margin-top: -.25rem; }
}
.km-root .btn.km-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.km-root .btn.km-btn-icon i { margin: 0; font-size: .8125rem; }
.km-root .km-checks .custom-control { margin-bottom: .5rem; }
.km-root .km-switch.custom-switch .custom-control-label { padding-top: .0625rem; }
.km-root .km-nochange { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-preview .btn + .btn { margin-top: 0; }
/* A skin 7px fuggoleges belso margot ad: 2.25rem magassagban a szoveg alja levagodott. */
body #app .km-root input.form-control, body #app .km-root .custom-select { padding-top: 0 !important; padding-bottom: 0 !important; }
body #app .km-root .custom-select { padding-right: 1.75rem !important; text-overflow: ellipsis; }

.km-root { --km-warn-bg: #fdf3e1; --km-warn-border: #e8c27a; --km-warn-text: #8a5a00;
           --km-ok-bg: #eaf6ed; --km-ok-border: #9fd0ac; --km-ok-text: #1e7b34;
           --km-err-bg: #fcecee; --km-err-border: #eaa1a8; --km-err-text: #a71d2a;
           --km-soft: #fafafa; --km-ph: #a1a1aa; min-width: 0; color: var(--text-main); }
body.dark-mode .km-root { --km-warn-bg: rgba(232,194,122,.12); --km-warn-border: #7a6230; --km-warn-text: #f0d08a;
           --km-ok-bg: rgba(40,167,69,.14); --km-ok-border: #2f6b3d; --km-ok-text: #8fd6a1;
           --km-err-bg: rgba(220,53,69,.14); --km-err-border: #7a2a33; --km-err-text: #f2a3ab;
           --km-soft: rgba(255,255,255,.03); --km-ph: #71717a; }

.km-root .km-h1 { margin: 0 0 14px; font-size: 1.375rem; font-weight: 600; }
.km-root .km-crumb { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-crumb a { color: var(--text-muted); }
.km-root .km-flex { flex: 1 1 auto; min-width: 0; }
.km-root.km-pagehead { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.km-root .km-count { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Gombok: egy elsődleges, egy másodlagos */
.km-root .btn.km-btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn.km-btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #18181b; }
.km-root .btn.km-btn-secondary { background: var(--bg-card); border-color: var(--border-color); color: var(--text-main); font-weight: 500; }
.km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-card); color: var(--text-main); }
.km-root .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); outline: 0; }
.km-root .btn i { font-size: .75rem; margin-right: .375rem; }

/* Rács */
.km-root .km-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 67.5rem; }
@media (min-width: 992px) { .km-root .km-grid { grid-template-columns: minmax(0, 1fr) 18.75rem; } .km-root .km-preview { position: sticky; top: calc(var(--sticky-top-offset, 0px) + 1rem); } }
.km-root .km-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .5rem; box-shadow: var(--card-shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 575.98px) { .km-root .km-card { padding: 1rem; } }
.km-root .km-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .75rem; }
@media (min-width: 576px) { .km-root .km-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Szakaszok és mezők */
.km-root .km-section { display: flex; flex-direction: column; }
.km-root .km-section-title { margin-bottom: .75rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.km-root .km-section-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.km-root .form-group { margin-bottom: .75rem; }
.km-root .form-group > label, .km-root .col-form-label { font-size: .8125rem; font-weight: 500; color: var(--text-main); margin-bottom: .3125rem; padding: 0; }
.km-root .km-req { color: var(--red, #dc3545); }
.km-root .km-alt { color: var(--text-muted); font-weight: 400; }
.km-root .form-control, .km-root .custom-select { height: 2.25rem; font-size: .875rem; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: .375rem; color: var(--text-main); }
.km-root textarea.form-control { height: auto; line-height: 1.45; }
.km-root .form-control::placeholder { color: var(--km-ph); }
.km-root .form-control:focus, .km-root .custom-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .form-control.is-invalid, .km-root .custom-select.is-invalid { border-color: var(--red, #dc3545); background-image: none; padding-right: .75rem; }
.km-root .invalid-feedback { font-size: .75rem; color: var(--km-err-text); }
.km-root .form-text { font-size: .75rem; color: var(--text-muted); }
.km-root .km-contact { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: .375rem; }
.km-root .km-contact.is-ok { color: var(--km-ok-text); }
.km-root .km-contact.is-error { color: var(--km-err-text); }
.km-root .km-parent { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-parent .form-group:last-child, .km-root .km-parent .km-pair .form-group { margin-bottom: 0; }

/* Szegmens (Kinek szól?, tanácsadó) */
.km-root .btn-group-toggle .btn.btn-km-seg { height: 2.125rem; padding: 0 .875rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: none; }
.km-root .btn-group-toggle .btn.btn-km-seg.active { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn-group-toggle .btn.btn-km-seg.focus { box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .km-seg-full { display: flex; } .km-root .km-seg-full .btn { flex: 1 1 0; }

/* Ajánlat-kártyák */
.km-root .km-option { display: flex; gap: .625rem; margin: 0 0 .625rem; padding: .6875rem .75rem; border: 1px solid var(--border-color); border-radius: .5rem; background: var(--bg-card); cursor: pointer; }
.km-root .km-option.is-on { border-color: var(--accent-color); background: var(--accent-glow); }
.km-root .km-option input { accent-color: var(--accent-color); margin-top: .1875rem; }
.km-root .km-option strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-option small { display: block; font-size: .75rem; color: var(--text-muted); }

/* „Mentéskor ez történik” és „Ez jön létre” lista */
.km-root .km-preview { padding: 1rem; gap: .875rem; }
.km-root .km-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.km-root .km-steps li { display: flex; gap: .625rem; }
.km-root .km-steps strong { display: block; font-size: .875rem; font-weight: 600; }
.km-root .km-steps small { display: block; font-size: .75rem; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.km-root .km-step-ic { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--text-main); font-size: .6875rem; }
.km-root .km-steps li.is-muted strong { color: var(--text-muted); }
.km-root .km-steps li.is-muted .km-step-ic { background: transparent; color: var(--km-ph); }
.km-root .km-steps li.is-warn { padding: .625rem; background: var(--km-warn-bg); border-radius: .375rem; }
.km-root .km-steps li.is-warn small { color: var(--text-main); }
.km-root .km-steps li.is-warn .km-step-ic { background: transparent; color: var(--km-warn-text); }
.km-root .km-steps li.is-done .km-step-ic { background: var(--km-ok-bg); color: var(--km-ok-text); }
.km-root .km-steps li.is-running .km-step-ic { background: transparent; color: var(--accent-color); }
.km-root .km-steps li.is-wait .km-step-ic { background: transparent; border: 1px dashed var(--km-ph); }
.km-root .km-steps li.is-wait strong, .km-root .km-steps li.is-skip strong { color: var(--text-muted); }
.km-root .km-steps li.is-skip .km-step-ic { background: transparent; border: 1px solid var(--border-color); color: var(--km-ph); }
.km-root .km-steps li.is-fail .km-step-ic { background: var(--km-err-bg); color: var(--km-err-text); }
.km-root .km-steps li.is-fail small { color: var(--km-err-text); }
.km-root .km-errsum { font-size: .8125rem; font-weight: 500; color: var(--km-err-text); }
.km-root .km-save { height: 2.5rem; font-size: .9375rem; }
.km-root .km-hint { font-size: .75rem; color: var(--text-muted); text-align: center; }

/* Eredménysáv */
.km-root .alert.km-alert { display: flex; align-items: flex-start; gap: .75rem; max-width: 67.5rem; padding: .75rem .875rem; border-radius: .5rem; color: var(--text-main); }
.km-root .alert.km-alert > i { font-size: 1rem; margin-top: .125rem; }
.km-root .km-alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; font-size: .8125rem; line-height: 1.5; }
.km-root .km-alert-body strong { font-size: .9375rem; font-weight: 600; }
.km-root .km-alert-link { font-size: .8125rem; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.km-root .alert-success.km-alert { background: var(--km-ok-bg); border-color: var(--km-ok-border); } .km-root .alert-success.km-alert > i, .km-root .alert-success .km-alert-link { color: var(--km-ok-text); }
.km-root .alert-warning.km-alert { background: var(--km-warn-bg); border-color: var(--km-warn-border); } .km-root .alert-warning.km-alert > i, .km-root .alert-warning .km-alert-link { color: var(--km-warn-text); }
.km-root .alert-danger.km-alert { background: var(--km-err-bg); border-color: var(--km-err-border); } .km-root .alert-danger.km-alert > i { color: var(--km-err-text); }

/* Modál */
.km-root .modal-content { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: .625rem; }
.km-root .modal-header, .km-root .modal-footer { border-color: var(--border-color); padding: 1rem 1.25rem; }
.km-root .modal-footer { gap: .5rem; } .km-root .modal-footer > * { margin: 0; }
.km-root .km-mtitle { font-size: 1.125rem; font-weight: 600; }
.km-root .km-msub { font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
.km-root .km-footnote { flex: 1; font-size: .75rem; color: var(--text-muted); }
.km-root .km-mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 768px) { .km-root .km-mgrid:not(.is-single) { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-mleft.is-locked { opacity: .55; pointer-events: none; }
.km-root .km-leadcard { margin-bottom: .875rem; padding: .75rem .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-leadcard-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.km-root .km-leadcard-head strong { font-size: .9375rem; }
.km-root .km-leadcard-head small { font-size: .75rem; color: var(--text-muted); }
.km-root .km-pill { font-size: .75rem; padding: 0 .4375rem; border: 1px solid var(--accent-color); border-radius: .625rem; }
.km-root .km-leadcard dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .1875rem .625rem; margin: 0; font-size: .8125rem; }
.km-root .km-leadcard dt { font-weight: 400; color: var(--text-muted); }
.km-root .km-leadcard dd { margin: 0; overflow-wrap: anywhere; } .km-root .km-leadcard dd.is-muted { color: var(--text-muted); }
.km-root .km-plan { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.125rem; border: 1px dashed var(--border-color); border-radius: .5rem; font-size: .8125rem; color: var(--text-muted); }
.km-root .km-empty i { font-size: 1.25rem; } .km-root .km-empty strong { font-size: .9375rem; color: var(--text-main); }
.km-root .km-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent-color); border-color: var(--accent-color); }
.km-root .km-switch strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-switch small { display: block; font-size: .75rem; color: var(--text-muted); } .km-root .km-switch small.is-warn { color: var(--km-warn-text); }
@media (max-width: 575.98px) {
  .km-modal-full .modal-dialog { margin: 0; max-width: none; height: 100%; }
  .km-modal-full .modal-content { min-height: 100%; border: 0; border-radius: 0; }
}

/* Kiwi kereten beluli igazitasok */
.km-root.km-intake { padding: 1rem; }
.km-root.km-pagehead { margin-bottom: 1rem; }
.km-root .km-loading { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 0; color: var(--text-muted); font-size: .875rem; }
.km-root .km-crumb i { font-size: .625rem; margin-left: .25rem; }
.km-root .km-section-title i { margin-right: .25rem; }

/* --- Skin-utkozesek (a 9999-es skin !important-tal festi a gombokat, linkeket, alerteket) ---
   Csak a .km-root alatt, ezert itt kivetelesen !important. */
body .km-root .btn.km-btn-primary, body .km-root a.btn.km-btn-primary, body #app .km-root a.btn.km-btn-primary, body .km-root .btn.km-btn-primary:hover, body #app .km-root .btn.km-btn-primary:hover, body .km-root a.btn.km-btn-primary:hover, body #app .km-root a.btn.km-btn-primary:hover, body .km-root .btn.km-btn-primary:focus, body #app .km-root .btn.km-btn-primary:focus, body .km-root a.btn.km-btn-primary:visited, body #app .km-root a.btn.km-btn-primary:visited { color: #18181b !important; }body .km-root .btn.km-btn-primary *, body #app .km-root .btn.km-btn-primary *, body .km-root .btn.km-btn-secondary *, body #app .km-root .btn.km-btn-secondary * { color: inherit !important; }body .km-root .btn.km-btn-secondary, body #app .km-root .btn.km-btn-secondary, body .km-root a.btn.km-btn-secondary, body #app .km-root a.btn.km-btn-secondary, body .km-root .btn.km-btn-secondary:visited, body #app .km-root .btn.km-btn-secondary:visited { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; box-shadow: none !important; }body .km-root .btn.km-btn-secondary:hover:not(:disabled), body #app .km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted) !important; color: var(--text-main) !important; background: var(--bg-card) !important; }body .km-root .btn-group-toggle .btn.btn-km-seg.active, body #app .km-root .btn-group-toggle .btn.btn-km-seg.active { color: #18181b !important; }body .km-root .alert.km-alert, body #app .km-root .alert.km-alert { color: var(--text-main) !important; }body .km-root .alert-success.km-alert, body #app .km-root .alert-success.km-alert { background: var(--km-ok-bg) !important; border: 1px solid var(--km-ok-border) !important; }body .km-root .alert-warning.km-alert, body #app .km-root .alert-warning.km-alert { background: var(--km-warn-bg) !important; border: 1px solid var(--km-warn-border) !important; }body .km-root .alert-danger.km-alert, body #app .km-root .alert-danger.km-alert { background: var(--km-err-bg) !important; border: 1px solid var(--km-err-border) !important; }body .km-root .alert-success.km-alert > i, body #app .km-root .alert-success.km-alert > i, body .km-root .alert-success .km-alert-link, body #app .km-root .alert-success .km-alert-link { color: var(--km-ok-text) !important; }body .km-root .alert-warning.km-alert > i, body #app .km-root .alert-warning.km-alert > i, body .km-root .alert-warning .km-alert-link, body #app .km-root .alert-warning .km-alert-link { color: var(--km-warn-text) !important; }body .km-root .alert-danger.km-alert > i, body #app .km-root .alert-danger.km-alert > i { color: var(--km-err-text) !important; }body .km-root .km-alert-body span, body #app .km-root .km-alert-body span { color: var(--text-main) !important; }/* Lista oszlopszuro-lenyilo: a skin a .table-responsive-ot levagja (overflow + max-height), ezert a fejlecbol nyilo menu a sorok ala szorul. Amig egy menu nyitva van, a levagas szunetel. */
body #app .leads-module-container .table-responsive:has(thead .dropdown-menu.show) {
  /* Az app.js nyitaskor soron belul overflow-x: initial-t ir ra -> szeles tablanal a lap oldalra ugrott.
     A gorgetes marad, a tarolo nyitott menunel magasabb, hogy a menu kiferjen (KIWI_00056-on mert megoldas). */
  overflow-x: auto !important; overflow-y: auto !important; max-height: none !important; min-height: 22rem !important; }
/* A Kiwi alapkod (app.js lenyilo-direktiva) position:fixed-del, egy rossz fejlec-elem meretebol szamolja a menu helyet,
   ezert a menu a sarokba, a sorok ala kerul. A soron beluli stilust itt a sajat gombja ala kenyszeritjuk. */
body #app .leads-module-container .crud-table thead .dropdown-menu.show {
  position: absolute !important; top: 100% !important; bottom: auto !important;
  right: 0 !important; left: auto !important; transform: none !important;
  min-width: 100% !important; z-index: 1060 !important; max-height: 300px !important; }

body #app .km-root .km-crumb a, body #app .km-root .km-crumb a:hover { color: var(--text-muted) !important; text-decoration: none !important; }
body #app .leads-module-container .crud-table thead th:nth-child(-n+3) .dropdown-menu.show { left: 0 !important; right: auto !important; }

/* Lead-beallitasok (106) */
.km-root.km-settings .km-grid { max-width: 75rem; }
@media (min-width: 992px) { .km-root.km-settings .km-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-typehead { display: none; }
.km-root .km-typerow { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; gap: .5rem; align-items: end; padding: .75rem 0; border-top: 1px solid var(--border-color); }
.km-root .km-typerow:first-of-type, .km-root .km-typehead + .km-typerow { border-top: 0; }
.km-root .km-typename { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; }
.km-root .km-typerow .km-typefield { margin: 0; min-width: 0; }
.km-root .km-typerow .km-f-prod { grid-column: 1 / -1; }
.km-root .km-typenote { grid-column: 1 / -1; font-size: .75rem; color: var(--text-muted); display: flex; gap: .375rem; align-items: baseline; }
.km-root .km-typenote.is-warn { color: var(--km-warn-text); }
.km-root .km-mlabel { font-size: .75rem !important; color: var(--text-muted) !important; font-weight: 400 !important; }
@media (min-width: 768px) {
  .km-root .km-typehead, .km-root .km-typerow { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.6fr) 2.25rem minmax(0, 1.3fr); gap: .625rem; align-items: center; }
  .km-root .km-typehead { padding-bottom: .375rem; font-size: .75rem; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
  .km-root .km-typename { grid-column: auto; font-weight: 500; }
  .km-root .km-typerow .km-f-prod { grid-column: auto; }
  .km-root .km-typerow .km-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .km-root .km-typenote { grid-column: 2 / -1; margin-top: -.25rem; }
}
.km-root .btn.km-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.km-root .btn.km-btn-icon i { margin: 0; font-size: .8125rem; }
.km-root .km-checks .custom-control { margin-bottom: .5rem; }
.km-root .km-switch.custom-switch .custom-control-label { padding-top: .0625rem; }
.km-root .km-nochange { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-preview .btn + .btn { margin-top: 0; }
/* A skin 7px fuggoleges belso margot ad: 2.25rem magassagban a szoveg alja levagodott. */
body #app .km-root input.form-control, body #app .km-root .custom-select { padding-top: 0 !important; padding-bottom: 0 !important; }
body #app .km-root .custom-select { padding-right: 1.75rem !important; text-overflow: ellipsis; }

.km-root { --km-warn-bg: #fdf3e1; --km-warn-border: #e8c27a; --km-warn-text: #8a5a00;
           --km-ok-bg: #eaf6ed; --km-ok-border: #9fd0ac; --km-ok-text: #1e7b34;
           --km-err-bg: #fcecee; --km-err-border: #eaa1a8; --km-err-text: #a71d2a;
           --km-soft: #fafafa; --km-ph: #a1a1aa; min-width: 0; color: var(--text-main); }
body.dark-mode .km-root { --km-warn-bg: rgba(232,194,122,.12); --km-warn-border: #7a6230; --km-warn-text: #f0d08a;
           --km-ok-bg: rgba(40,167,69,.14); --km-ok-border: #2f6b3d; --km-ok-text: #8fd6a1;
           --km-err-bg: rgba(220,53,69,.14); --km-err-border: #7a2a33; --km-err-text: #f2a3ab;
           --km-soft: rgba(255,255,255,.03); --km-ph: #71717a; }

.km-root .km-h1 { margin: 0 0 14px; font-size: 1.375rem; font-weight: 600; }
.km-root .km-crumb { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-crumb a { color: var(--text-muted); }
.km-root .km-flex { flex: 1 1 auto; min-width: 0; }
.km-root.km-pagehead { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.km-root .km-count { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Gombok: egy elsődleges, egy másodlagos */
.km-root .btn.km-btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn.km-btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #18181b; }
.km-root .btn.km-btn-secondary { background: var(--bg-card); border-color: var(--border-color); color: var(--text-main); font-weight: 500; }
.km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-card); color: var(--text-main); }
.km-root .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); outline: 0; }
.km-root .btn i { font-size: .75rem; margin-right: .375rem; }

/* Rács */
.km-root .km-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 67.5rem; }
@media (min-width: 992px) { .km-root .km-grid { grid-template-columns: minmax(0, 1fr) 18.75rem; } .km-root .km-preview { position: sticky; top: calc(var(--sticky-top-offset, 0px) + 1rem); } }
.km-root .km-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .5rem; box-shadow: var(--card-shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 575.98px) { .km-root .km-card { padding: 1rem; } }
.km-root .km-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .75rem; }
@media (min-width: 576px) { .km-root .km-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Szakaszok és mezők */
.km-root .km-section { display: flex; flex-direction: column; }
.km-root .km-section-title { margin-bottom: .75rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.km-root .km-section-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.km-root .form-group { margin-bottom: .75rem; }
.km-root .form-group > label, .km-root .col-form-label { font-size: .8125rem; font-weight: 500; color: var(--text-main); margin-bottom: .3125rem; padding: 0; }
.km-root .km-req { color: var(--red, #dc3545); }
.km-root .km-alt { color: var(--text-muted); font-weight: 400; }
.km-root .form-control, .km-root .custom-select { height: 2.25rem; font-size: .875rem; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: .375rem; color: var(--text-main); }
.km-root textarea.form-control { height: auto; line-height: 1.45; }
.km-root .form-control::placeholder { color: var(--km-ph); }
.km-root .form-control:focus, .km-root .custom-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .form-control.is-invalid, .km-root .custom-select.is-invalid { border-color: var(--red, #dc3545); background-image: none; padding-right: .75rem; }
.km-root .invalid-feedback { font-size: .75rem; color: var(--km-err-text); }
.km-root .form-text { font-size: .75rem; color: var(--text-muted); }
.km-root .km-contact { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: .375rem; }
.km-root .km-contact.is-ok { color: var(--km-ok-text); }
.km-root .km-contact.is-error { color: var(--km-err-text); }
.km-root .km-parent { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-parent .form-group:last-child, .km-root .km-parent .km-pair .form-group { margin-bottom: 0; }

/* Szegmens (Kinek szól?, tanácsadó) */
.km-root .btn-group-toggle .btn.btn-km-seg { height: 2.125rem; padding: 0 .875rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: none; }
.km-root .btn-group-toggle .btn.btn-km-seg.active { background: var(--accent-color); border-color: var(--accent-color); color: #18181b; font-weight: 600; }
.km-root .btn-group-toggle .btn.btn-km-seg.focus { box-shadow: 0 0 0 3px var(--accent-glow); }
.km-root .km-seg-full { display: flex; } .km-root .km-seg-full .btn { flex: 1 1 0; }

/* Ajánlat-kártyák */
.km-root .km-option { display: flex; gap: .625rem; margin: 0 0 .625rem; padding: .6875rem .75rem; border: 1px solid var(--border-color); border-radius: .5rem; background: var(--bg-card); cursor: pointer; }
.km-root .km-option.is-on { border-color: var(--accent-color); background: var(--accent-glow); }
.km-root .km-option input { accent-color: var(--accent-color); margin-top: .1875rem; }
.km-root .km-option strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-option small { display: block; font-size: .75rem; color: var(--text-muted); }

/* „Mentéskor ez történik” és „Ez jön létre” lista */
.km-root .km-preview { padding: 1rem; gap: .875rem; }
.km-root .km-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.km-root .km-steps li { display: flex; gap: .625rem; }
.km-root .km-steps strong { display: block; font-size: .875rem; font-weight: 600; }
.km-root .km-steps small { display: block; font-size: .75rem; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.km-root .km-step-ic { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--text-main); font-size: .6875rem; }
.km-root .km-steps li.is-muted strong { color: var(--text-muted); }
.km-root .km-steps li.is-muted .km-step-ic { background: transparent; color: var(--km-ph); }
.km-root .km-steps li.is-warn { padding: .625rem; background: var(--km-warn-bg); border-radius: .375rem; }
.km-root .km-steps li.is-warn small { color: var(--text-main); }
.km-root .km-steps li.is-warn .km-step-ic { background: transparent; color: var(--km-warn-text); }
.km-root .km-steps li.is-done .km-step-ic { background: var(--km-ok-bg); color: var(--km-ok-text); }
.km-root .km-steps li.is-running .km-step-ic { background: transparent; color: var(--accent-color); }
.km-root .km-steps li.is-wait .km-step-ic { background: transparent; border: 1px dashed var(--km-ph); }
.km-root .km-steps li.is-wait strong, .km-root .km-steps li.is-skip strong { color: var(--text-muted); }
.km-root .km-steps li.is-skip .km-step-ic { background: transparent; border: 1px solid var(--border-color); color: var(--km-ph); }
.km-root .km-steps li.is-fail .km-step-ic { background: var(--km-err-bg); color: var(--km-err-text); }
.km-root .km-steps li.is-fail small { color: var(--km-err-text); }
.km-root .km-errsum { font-size: .8125rem; font-weight: 500; color: var(--km-err-text); }
.km-root .km-save { height: 2.5rem; font-size: .9375rem; }
.km-root .km-hint { font-size: .75rem; color: var(--text-muted); text-align: center; }

/* Eredménysáv */
.km-root .alert.km-alert { display: flex; align-items: flex-start; gap: .75rem; max-width: 67.5rem; padding: .75rem .875rem; border-radius: .5rem; color: var(--text-main); }
.km-root .alert.km-alert > i { font-size: 1rem; margin-top: .125rem; }
.km-root .km-alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; font-size: .8125rem; line-height: 1.5; }
.km-root .km-alert-body strong { font-size: .9375rem; font-weight: 600; }
.km-root .km-alert-link { font-size: .8125rem; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.km-root .alert-success.km-alert { background: var(--km-ok-bg); border-color: var(--km-ok-border); } .km-root .alert-success.km-alert > i, .km-root .alert-success .km-alert-link { color: var(--km-ok-text); }
.km-root .alert-warning.km-alert { background: var(--km-warn-bg); border-color: var(--km-warn-border); } .km-root .alert-warning.km-alert > i, .km-root .alert-warning .km-alert-link { color: var(--km-warn-text); }
.km-root .alert-danger.km-alert { background: var(--km-err-bg); border-color: var(--km-err-border); } .km-root .alert-danger.km-alert > i { color: var(--km-err-text); }

/* Modál */
.km-root .modal-content { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); border-radius: .625rem; }
.km-root .modal-header, .km-root .modal-footer { border-color: var(--border-color); padding: 1rem 1.25rem; }
.km-root .modal-footer { gap: .5rem; } .km-root .modal-footer > * { margin: 0; }
.km-root .km-mtitle { font-size: 1.125rem; font-weight: 600; }
.km-root .km-msub { font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
.km-root .km-footnote { flex: 1; font-size: .75rem; color: var(--text-muted); }
.km-root .km-mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 768px) { .km-root .km-mgrid:not(.is-single) { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-mleft.is-locked { opacity: .55; pointer-events: none; }
.km-root .km-leadcard { margin-bottom: .875rem; padding: .75rem .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-leadcard-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.km-root .km-leadcard-head strong { font-size: .9375rem; }
.km-root .km-leadcard-head small { font-size: .75rem; color: var(--text-muted); }
.km-root .km-pill { font-size: .75rem; padding: 0 .4375rem; border: 1px solid var(--accent-color); border-radius: .625rem; }
.km-root .km-leadcard dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .1875rem .625rem; margin: 0; font-size: .8125rem; }
.km-root .km-leadcard dt { font-weight: 400; color: var(--text-muted); }
.km-root .km-leadcard dd { margin: 0; overflow-wrap: anywhere; } .km-root .km-leadcard dd.is-muted { color: var(--text-muted); }
.km-root .km-plan { padding: .875rem; background: var(--km-soft); border: 1px solid var(--border-color); border-radius: .5rem; }
.km-root .km-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.125rem; border: 1px dashed var(--border-color); border-radius: .5rem; font-size: .8125rem; color: var(--text-muted); }
.km-root .km-empty i { font-size: 1.25rem; } .km-root .km-empty strong { font-size: .9375rem; color: var(--text-main); }
.km-root .km-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent-color); border-color: var(--accent-color); }
.km-root .km-switch strong { display: block; font-size: .875rem; font-weight: 500; }
.km-root .km-switch small { display: block; font-size: .75rem; color: var(--text-muted); } .km-root .km-switch small.is-warn { color: var(--km-warn-text); }
@media (max-width: 575.98px) {
  .km-modal-full .modal-dialog { margin: 0; max-width: none; height: 100%; }
  .km-modal-full .modal-content { min-height: 100%; border: 0; border-radius: 0; }
}

/* Kiwi kereten beluli igazitasok */
.km-root.km-intake { padding: 1rem; }
.km-root.km-pagehead { margin-bottom: 1rem; }
.km-root .km-loading { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 0; color: var(--text-muted); font-size: .875rem; }
.km-root .km-crumb i { font-size: .625rem; margin-left: .25rem; }
.km-root .km-section-title i { margin-right: .25rem; }

/* --- Skin-utkozesek (a 9999-es skin !important-tal festi a gombokat, linkeket, alerteket) ---
   Csak a .km-root alatt, ezert itt kivetelesen !important. */
body .km-root .btn.km-btn-primary, body .km-root a.btn.km-btn-primary, body #app .km-root a.btn.km-btn-primary, body .km-root .btn.km-btn-primary:hover, body #app .km-root .btn.km-btn-primary:hover, body .km-root a.btn.km-btn-primary:hover, body #app .km-root a.btn.km-btn-primary:hover, body .km-root .btn.km-btn-primary:focus, body #app .km-root .btn.km-btn-primary:focus, body .km-root a.btn.km-btn-primary:visited, body #app .km-root a.btn.km-btn-primary:visited { color: #18181b !important; }body .km-root .btn.km-btn-primary *, body #app .km-root .btn.km-btn-primary *, body .km-root .btn.km-btn-secondary *, body #app .km-root .btn.km-btn-secondary * { color: inherit !important; }body .km-root .btn.km-btn-secondary, body #app .km-root .btn.km-btn-secondary, body .km-root a.btn.km-btn-secondary, body #app .km-root a.btn.km-btn-secondary, body .km-root .btn.km-btn-secondary:visited, body #app .km-root .btn.km-btn-secondary:visited { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; box-shadow: none !important; }body .km-root .btn.km-btn-secondary:hover:not(:disabled), body #app .km-root .btn.km-btn-secondary:hover:not(:disabled) { border-color: var(--text-muted) !important; color: var(--text-main) !important; background: var(--bg-card) !important; }body .km-root .btn-group-toggle .btn.btn-km-seg.active, body #app .km-root .btn-group-toggle .btn.btn-km-seg.active { color: #18181b !important; }body .km-root .alert.km-alert, body #app .km-root .alert.km-alert { color: var(--text-main) !important; }body .km-root .alert-success.km-alert, body #app .km-root .alert-success.km-alert { background: var(--km-ok-bg) !important; border: 1px solid var(--km-ok-border) !important; }body .km-root .alert-warning.km-alert, body #app .km-root .alert-warning.km-alert { background: var(--km-warn-bg) !important; border: 1px solid var(--km-warn-border) !important; }body .km-root .alert-danger.km-alert, body #app .km-root .alert-danger.km-alert { background: var(--km-err-bg) !important; border: 1px solid var(--km-err-border) !important; }body .km-root .alert-success.km-alert > i, body #app .km-root .alert-success.km-alert > i, body .km-root .alert-success .km-alert-link, body #app .km-root .alert-success .km-alert-link { color: var(--km-ok-text) !important; }body .km-root .alert-warning.km-alert > i, body #app .km-root .alert-warning.km-alert > i, body .km-root .alert-warning .km-alert-link, body #app .km-root .alert-warning .km-alert-link { color: var(--km-warn-text) !important; }body .km-root .alert-danger.km-alert > i, body #app .km-root .alert-danger.km-alert > i { color: var(--km-err-text) !important; }body .km-root .km-alert-body span, body #app .km-root .km-alert-body span { color: var(--text-main) !important; }/* Lista oszlopszuro-lenyilo: a skin a .table-responsive-ot levagja (overflow + max-height), ezert a fejlecbol nyilo menu a sorok ala szorul. Amig egy menu nyitva van, a levagas szunetel. */
body #app .leads-module-container .table-responsive:has(thead .dropdown-menu.show) {
  /* Az app.js nyitaskor soron belul overflow-x: initial-t ir ra -> szeles tablanal a lap oldalra ugrott.
     A gorgetes marad, a tarolo nyitott menunel magasabb, hogy a menu kiferjen (KIWI_00056-on mert megoldas). */
  overflow-x: auto !important; overflow-y: auto !important; max-height: none !important; min-height: 22rem !important; }
/* A Kiwi alapkod (app.js lenyilo-direktiva) position:fixed-del, egy rossz fejlec-elem meretebol szamolja a menu helyet,
   ezert a menu a sarokba, a sorok ala kerul. A soron beluli stilust itt a sajat gombja ala kenyszeritjuk. */
body #app .leads-module-container .crud-table thead .dropdown-menu.show {
  position: absolute !important; top: 100% !important; bottom: auto !important;
  right: 0 !important; left: auto !important; transform: none !important;
  min-width: 100% !important; z-index: 1060 !important; max-height: 300px !important; }

body #app .km-root .km-crumb a, body #app .km-root .km-crumb a:hover { color: var(--text-muted) !important; text-decoration: none !important; }
body #app .leads-module-container .crud-table thead th:nth-child(-n+3) .dropdown-menu.show { left: 0 !important; right: auto !important; }

/* Lead-beallitasok (106) */
.km-root.km-settings .km-grid { max-width: 75rem; }
@media (min-width: 992px) { .km-root.km-settings .km-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.km-root .km-typehead { display: none; }
.km-root .km-typerow { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; gap: .5rem; align-items: end; padding: .75rem 0; border-top: 1px solid var(--border-color); }
.km-root .km-typerow:first-of-type, .km-root .km-typehead + .km-typerow { border-top: 0; }
.km-root .km-typename { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; }
.km-root .km-typerow .km-typefield { margin: 0; min-width: 0; }
.km-root .km-typerow .km-f-prod { grid-column: 1 / -1; }
.km-root .km-typenote { grid-column: 1 / -1; font-size: .75rem; color: var(--text-muted); display: flex; gap: .375rem; align-items: baseline; }
.km-root .km-typenote.is-warn { color: var(--km-warn-text); }
.km-root .km-mlabel { font-size: .75rem !important; color: var(--text-muted) !important; font-weight: 400 !important; }
@media (min-width: 768px) {
  .km-root .km-typehead, .km-root .km-typerow { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(0, 1.6fr) 2.25rem minmax(0, 1.3fr); gap: .625rem; align-items: center; }
  .km-root .km-typehead { padding-bottom: .375rem; font-size: .75rem; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
  .km-root .km-typename { grid-column: auto; font-weight: 500; }
  .km-root .km-typerow .km-f-prod { grid-column: auto; }
  .km-root .km-typerow .km-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .km-root .km-typenote { grid-column: 2 / -1; margin-top: -.25rem; }
}
.km-root .btn.km-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.km-root .btn.km-btn-icon i { margin: 0; font-size: .8125rem; }
.km-root .km-checks .custom-control { margin-bottom: .5rem; }
.km-root .km-switch.custom-switch .custom-control-label { padding-top: .0625rem; }
.km-root .km-nochange { font-size: .8125rem; color: var(--text-muted); }
.km-root .km-preview .btn + .btn { margin-top: 0; }
/* A skin 7px fuggoleges belso margot ad: 2.25rem magassagban a szoveg alja levagodott. */
body #app .km-root input.form-control, body #app .km-root .custom-select { padding-top: 0 !important; padding-bottom: 0 !important; }
body #app .km-root .custom-select { padding-right: 1.75rem !important; text-overflow: ellipsis; }

/* Tanácsadók kezelése (components 107) — a közös km- formanyelvre épül; a Kiwi2 gyökér-betűmérete 14 px. */
.km-root.km-advisors { padding: 1rem; }
.km-root.km-advisors .km-titlebar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .125rem 0 1rem; }
.km-root.km-advisors .km-titlebar .km-h1 { margin: 0; }
.km-root.km-advisors .km-adv-grid { max-width: 75rem; }
@media (min-width: 992px) { .km-root.km-advisors .km-adv-grid { grid-template-columns: minmax(0, 1fr) 23rem; } }
.km-root.km-advisors .km-adv-list { padding: 1.25rem 0 .75rem; gap: .75rem; }
.km-root.km-advisors .km-adv-list .km-section-title { padding: 0 1.25rem; margin: 0; }
.km-root.km-advisors .km-adv-list .km-hint { text-align: left; padding: 0 1.25rem; }
.km-root.km-advisors .km-adv-scroll { overflow-x: auto; }
.km-root.km-advisors .km-adv-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.km-root.km-advisors .km-adv-table th { padding: .5rem .875rem; border-bottom: 1px solid var(--border-color); font-size: .75rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); text-align: left; white-space: nowrap; }
.km-root.km-advisors .km-adv-table td { padding: .75rem .875rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.km-root.km-advisors .km-adv-table th:first-child, .km-root.km-advisors .km-adv-table td:first-child { padding-left: 1.25rem; }
.km-root.km-advisors .km-adv-table th:last-child, .km-root.km-advisors .km-adv-table td:last-child { padding-right: 1.25rem; }
.km-root.km-advisors .km-adv-table tbody tr:hover { background: var(--km-soft); }
.km-root.km-advisors .km-adv-table tbody tr.is-selected { background: var(--accent-glow); }
.km-root.km-advisors .km-adv-name { font-weight: 600; white-space: nowrap; }
.km-root.km-advisors .km-adv-mail { color: var(--text-muted); word-break: break-all; }
.km-root.km-advisors .km-adv-act { text-align: right; white-space: nowrap; }
.km-root.km-advisors .km-adv-link { white-space: nowrap; font-size: .875rem; }
.km-root.km-advisors .km-adv-link i { font-size: .75rem; margin-right: .25rem; }
.km-root.km-advisors .km-adv-missing { color: var(--km-warn-text); }
.km-root.km-advisors .km-adv-act .btn { height: 2.125rem; padding: 0 .875rem; font-size: .875rem; }
.km-root.km-advisors .km-adv-table td.km-empty { display: table-cell; border: 0; padding: 1.25rem; }
.km-root.km-advisors .km-adv-table .km-pill { display: inline-block; padding: .125rem .625rem; border: 0; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.km-root.km-advisors .km-adv-table .km-pill.is-ok { background: var(--km-ok-bg); color: var(--km-ok-text); }
.km-root.km-advisors .km-adv-table .km-pill.is-off { background: var(--km-soft); color: var(--text-muted); border: 1px solid var(--border-color); }
.km-root.km-advisors .km-adv-panel { padding: 1.25rem; gap: .875rem; }
.km-root.km-advisors .km-adv-panel .km-section-title { margin: 0; }
.km-root.km-advisors .km-adv-form { display: flex; flex-direction: column; gap: .125rem; }
.km-root.km-advisors .km-adv-form .form-text { font-size: .75rem; }
.km-root.km-advisors .km-adv-active { align-items: flex-start; margin: .25rem 0 .75rem; }
.km-root.km-advisors .km-adv-active .custom-control { min-height: 1.25rem; }
.km-root.km-advisors .km-adv-form .km-save { margin-bottom: .5rem; }
.km-root.km-advisors .km-adv-form .km-hint { margin-top: .5rem; }
.km-root.km-advisors .km-adv-empty { display: flex; flex-direction: column; gap: .625rem; line-height: 1.5; }

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

/* === KiwiLab 2026-10-16: lista fejléc, szűrő-lenyíló és színezett sor rámutatás (SPOON-on bevált javítás) ===
   1) A sorok beépített szerkesztőmezője (z 15) és rejtett szövege (z 10) a fejléccellák (z 12) és a ragadós szűrősor (z 15)
      fölé került → a sorok szövege átlátszott a szűrőn és a lenyíló menün. A fejléc mindig a sorok fölött legyen.
   2) A fejléc háttere sötét módban szinte átlátszó volt → görgetéskor átlátszottak a sorok. Átlátszatlan alap + a megszokott árnyalat.
   3) Színezett sor (pl. piros alap, fehér betű) rámutatáskor világos hátteret kapott, a fehér betű eltűnt → a sor megtartja
      a saját színét, és csak enyhén sötétedik. */
html body #app .crud-table > thead > tr > th {
  z-index: 20 !important;
  background: linear-gradient(var(--table-header-bg, #fafafa), var(--table-header-bg, #fafafa)), var(--kw-fejlec-alap, var(--bg-card, #ffffff)) !important;
}
@media (min-width: 992px) {
  html body #app .crud-table > thead:nth-of-type(1) { z-index: 22 !important; }
  html body #app .crud-table > thead:nth-of-type(2) { z-index: 21 !important; }
}
html body #app .crud-table > thead .dropdown-menu {
  padding: 4px !important;
}
html body #app .crud-table > thead .dropdown-menu .dropdown-item,
html body #app .crud-table > thead .dropdown-menu li > a {
  color: var(--text-main) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px;
  padding: 6px 10px !important;
}
html body #app .crud-table > thead .dropdown-menu .dropdown-item:hover,
html body #app .crud-table > thead .dropdown-menu .dropdown-item:focus,
html body #app .crud-table > thead .dropdown-menu li > a:hover {
  background: var(--accent-glow) !important;
  color: var(--text-active) !important;
}
html body #app .crud-table > tbody > tr[style*="background-color"]:hover > td {
  background: transparent !important;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .14) !important;
}
html body #app .crud-table > tbody > tr[style*="background-color"]:hover {
  outline: 1px solid rgba(0, 0, 0, .22);
  outline-offset: -1px;
}

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