/* Generálta: bin/console assets:build – NE szerkeszd közvetlenül.
 * A forrás: core/css (manifest.php sorrendben) és az alkalmazás css/ mappája. */

/*
 * Az egész felület színpalettája. Ha témát kell váltani, elvileg elég ezt a
 * fájlt átírni: a többi réteg csak ezekre a változókra hivatkozik.
 *
 * A *-rgb változatok azért kellenek, mert az rgba() nem tud hex változót
 * fogadni — enélkül a fókuszgyűrűk és az árnyékok bedrótozott színt kapnának.
 *
 * Kontraszt: minden szöveg-háttér pár legalább 4,5:1 (WCAG AA), a színen lévő
 * ikonok legalább 3:1. A státuszszínek ezért nem világosabbak: a fehér ikon
 * olvashatósága szab határt, nem az esztétika.
 *
 * Ez az állítás egy ideig NEM volt igaz: a `--cx-muted` 3,45:1-et adott a lap
 * hátterén. A komment nem ellenőrzi magát — a párokat számolni kell. A jelenlegi
 * legkisebb arány a jelölőkön van (warning pill: 4,66:1).
 */
:root {
    --cx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --cx-bg: #f4f5fa;
    --cx-surface: #ffffff;
    --cx-text: #1c2333;
    /*
     * A halvány szöveg. #7c8494 volt, ami fehér kártyán 3,76:1, a lap
     * hátterén 3,45:1 — MINDKETTŐ a WCAG AA 4,5:1 küszöbe ALATT, pedig ez a
     * szín kis betűs szövegen van (0,76–0,86rem: dátum, „3 db", meta sorok).
     * A mostani érték 5,36:1 fehéren és 4,93:1 a lap hátterén, és megegyezik
     * a portál `--px-text-muted` értékével — egy szín, egy helyen javítva.
     */
    --cx-muted: #636b7a;
    --cx-border: #e6e7f1;

    /* Visszafogott, de nem kimosott lila akcent. A gombon fehér szöveggel
       5,74:1. Körülbelül félúton a korábbi élénk #8b2fef és a túl halvány
       #6f5fc4 között — utóbbi pasztellebb volt a kelleténél. */
    --cx-primary: #7745db;
    --cx-primary-dark: #642bd6;
    --cx-primary-soft: #f4f1fc;
    --cx-primary-border: #e4dbf5;
    --cx-primary-rgb: 119, 69, 219;

    /* A Bootstrap alapból kék linkszínt használ; a márkaszínre írjuk át. */
    --bs-link-color-rgb: var(--cx-primary-rgb);
    --bs-link-hover-color-rgb: 100, 43, 214;

    /* Az oldalsáv visszakapott a mélységéből: sötét háttéren a hosszú menü
       olvashatóbb, és a navigáció határozottabban elválik a tartalomtól. */
    --cx-sidebar-from: #2d1f50;
    --cx-sidebar-to: #4d2f8a;
    --cx-sidebar-text: #d2cae2;
    --cx-sidebar-text-active: #ffffff;
    --cx-sidebar-text-rgb: 210, 202, 226;

    /* Státuszszínek. Sötétebbek, mint amilyen "pasztell" lenne, mert fehér
       ikon van rajtuk — a korábbi sárga csak 2,24:1-et adott. */
    --cx-success: #2f8f68;
    --cx-warning: #b0761f;
    --cx-danger: #c9556a;

    --cx-radius: 14px;
    --cx-radius-sm: 10px;

    /* Az elemek közti egységes függőleges ritmus. A kártyák és a számkártya-
       sorok is ezt használják, hogy ne csússzon el a kettő egymáshoz képest. */
    --cx-gap: 24px;

    /* Az árnyék a paletta hue-jára hangolva, hogy ne szürkés legyen. */
    --cx-shadow-rgb: 44, 38, 74;
    --cx-shadow: 0 8px 24px rgba(var(--cx-shadow-rgb), 0.06);
    --cx-shadow-lg: 0 20px 45px rgba(var(--cx-shadow-rgb), 0.16);
}

/*
 * SÖTÉT TÉMA (UX-07).
 *
 * A felület a `variables.css` változóira épül, tehát a téma nagyrészt EGY
 * második paletta. A `data-theme="dark"` a <html>-en ül (a `theme.js` teszi
 * rá a <head>-ben, a lap kirajzolása ELŐTT — különben a lap egy pillanatra
 * fehéren villanna). Mellé a Bootstrap saját `data-bs-theme="dark"`-ja kerül,
 * így a táblázatok, űrlapmezők és legördülők is sötétek.
 *
 * Ami alább jön a palettán túl: azok a komponensek, amik BEÉGETETT világos
 * hátteret kaptak (jelölők, idővonal-pöttyök, figyelmeztetés-lista). A
 * kontrasztot sötét háttéren is legalább 4,5:1-re állítottam a szövegnél.
 */
:root[data-theme="dark"] {
    color-scheme: dark;

    --cx-bg: #12141c;
    --cx-surface: #1b1e29;
    --cx-text: #e4e6ef;
    --cx-muted: #a3a9b9;
    --cx-border: #2d3142;

    --cx-primary: #9d7df2;
    --cx-primary-dark: #b9a2f7;
    --cx-primary-soft: #262038;
    --cx-primary-border: #3b3160;
    --cx-primary-rgb: 157, 125, 242;
    --bs-link-hover-color-rgb: 185, 162, 247;

    --cx-sidebar-from: #151022;
    --cx-sidebar-to: #2a1d4d;

    --cx-success: #3fae80;
    --cx-warning: #d19a3e;
    --cx-danger: #e07488;

    --cx-shadow-rgb: 0, 0, 0;
    --cx-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --cx-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5);

    --bs-body-bg: var(--cx-bg);
    --bs-body-color: var(--cx-text);
    --bs-border-color: var(--cx-border);
    --bs-secondary-color: var(--cx-muted);
}

:root[data-theme="dark"] body {
    background: var(--cx-bg);
    color: var(--cx-text);
}

/* Jelölők: a világos pasztell helyett áttetsző szín, világos betűvel. */
:root[data-theme="dark"] .cx-pill--neutral,
:root[data-theme="dark"] .cx-timeline__marker--muted,
:root[data-theme="dark"] .cx-tabs__count {
    background: #262a38;
    color: #c3c8d6;
    border-color: #343949;
}
:root[data-theme="dark"] .cx-pill--info { background: rgba(80, 140, 230, 0.16); color: #9cc3ff; border-color: rgba(80, 140, 230, 0.35); }
:root[data-theme="dark"] .cx-pill--success,
:root[data-theme="dark"] .cx-timeline__marker--success,
:root[data-theme="dark"] .cx-bell__icon--success { background: rgba(63, 174, 128, 0.16); color: #7fdcb2; border-color: rgba(63, 174, 128, 0.35); }
:root[data-theme="dark"] .cx-pill--warning,
:root[data-theme="dark"] .cx-timeline__marker--warning,
:root[data-theme="dark"] .cx-bell__icon--warning,
:root[data-theme="dark"] .cx-warning-list li { background: rgba(209, 154, 62, 0.14); color: #f0c783; border-color: rgba(209, 154, 62, 0.35); }
:root[data-theme="dark"] .cx-pill--danger,
:root[data-theme="dark"] .cx-timeline__marker--danger,
:root[data-theme="dark"] .cx-bell__icon--danger,
:root[data-theme="dark"] .cx-warning-list li.is-critical { background: rgba(224, 116, 136, 0.14); color: #f4a5b3; border-color: rgba(224, 116, 136, 0.35); }

/* Beégetett világos felületek. */
:root[data-theme="dark"] .cx-step.is-locked,
:root[data-theme="dark"] .cx-bell__foot,
:root[data-theme="dark"] .cx-step__gate,
:root[data-theme="dark"] .cx-matrix__group th,
:root[data-theme="dark"] .cx-matrix__group td,
:root[data-theme="dark"] .cx-matrix tbody tr:hover td,
:root[data-theme="dark"] .bg-body-tertiary {
    background: #202432 !important;
    color: var(--cx-text);
    border-color: var(--cx-border);
}
:root[data-theme="dark"] .cx-step.is-overdue { background: rgba(224, 116, 136, 0.08); }
:root[data-theme="dark"] .text-muted { color: var(--cx-muted) !important; }
:root[data-theme="dark"] .text-dark { color: var(--cx-text) !important; }
:root[data-theme="dark"] .bg-light { background: #262a38 !important; }

/* A téma-kapcsoló ikonja: a sötét témában a nap, a világosban a hold. */
.cx-theme-toggle .bi-sun { display: none; }
:root[data-theme="dark"] .cx-theme-toggle .bi-sun { display: inline-block; }
:root[data-theme="dark"] .cx-theme-toggle .bi-moon-stars { display: none; }

/* Morzsamenü (UX-07). */
.cx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--cx-muted);
}
.cx-breadcrumb a { color: var(--cx-muted); text-decoration: none; }
.cx-breadcrumb a:hover { color: var(--cx-primary); }
.cx-breadcrumb__sep { opacity: 0.6; }

/* A billentyűparancsok súgója. */
.cx-kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 6px;
    border: 1px solid var(--cx-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--cx-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    text-align: center;
}

/*
 * Select2: a bootstrap-5 témája BEÉGETETT világos színekkel dolgozik (#fff,
 * #212529), nem a Bootstrap változóival — a `data-bs-theme="dark"` ezért nem
 * hat rá, és a legördülő a sötét lapon fehéren nyílt ki. A lenyíló rész a
 * <body> végére kerül, nem a mező mellé, tehát a szabály nem köthető a
 * szülőhöz.
 */
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--cx-surface);
    border-color: var(--cx-border);
    color: var(--cx-text);
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3a9b9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--cx-text);
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__message,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__group {
    color: var(--cx-muted) !important;
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: #2a2f40;
    color: var(--cx-text);
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: var(--cx-primary-soft);
    color: var(--cx-primary-dark);
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--cx-text);
    border-color: var(--cx-border);
    background-color: #262a38;
}
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    color: var(--cx-text);
}
/* A törlő X-ek sötét SVG-k: világosra fordítva. */
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove {
    filter: invert(1) grayscale(1) brightness(1.4);
}
:root[data-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: #202432;
    color: var(--cx-muted);
}

body {
    font-family: var(--cx-font);
    background: var(--cx-bg);
    color: var(--cx-text);
}

a {
    text-decoration: none;
}

.btn {
    border-radius: var(--cx-radius-sm);
}

.btn-primary {
    background: var(--cx-primary);
    border-color: var(--cx-primary);
    /* Bootstrap bakes its blue in as literal per-component custom
       properties (not var(--bs-primary)), so :active/:focus states need
       their own overrides here rather than a single :root variable. */
    --bs-btn-active-bg: var(--cx-primary-dark);
    --bs-btn-active-border-color: var(--cx-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--cx-primary-rgb);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--cx-primary-dark);
    border-color: var(--cx-primary-dark);
}

/* A körvonalas változat is a márkaszínt kapja – a kijelölt választógomb
   (.btn-check:checked) a Bootstrap „active” változóit használja. */
.btn-outline-primary {
    --bs-btn-color: var(--cx-primary);
    --bs-btn-border-color: var(--cx-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cx-primary);
    --bs-btn-hover-border-color: var(--cx-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cx-primary);
    --bs-btn-active-border-color: var(--cx-primary);
    --bs-btn-focus-shadow-rgb: var(--cx-primary-rgb);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cx-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--cx-primary-rgb), 0.15);
}

.page-link {
    color: var(--cx-primary);
}

.page-item.active .page-link {
    background: var(--cx-primary);
    border-color: var(--cx-primary);
}

/* Dropdown items (profile/logout menu etc.) flash Bootstrap's default blue
   on press — :active uses --bs-dropdown-link-active-bg, baked in as literal
   #0d6efd on .dropdown-menu itself. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--cx-primary);
}

.cx-shell {
    display: flex;
    min-height: 100vh;
}

.cx-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--cx-sidebar-from), var(--cx-sidebar-to));
    color: var(--cx-sidebar-text);
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;

    /* Subtle scrollbar: hidden until you hover the sidebar or scroll it. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}

.cx-sidebar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.cx-sidebar::-webkit-scrollbar {
    width: 8px;
}

.cx-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.cx-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.cx-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
}

.cx-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.cx-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 48, 0.45);
    z-index: 15;
}

.cx-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 8px 10px 24px;
    text-decoration: none;
}

.cx-sidebar__brand:hover {
    color: #fff;
    opacity: 0.9;
}

.cx-sidebar__brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 4px;
    border-radius: 10px;
    background: #fff;
}

.cx-sidebar__brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cx-sidebar__footer {
    margin: 12px 10px 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.cx-sidebar__footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.cx-sidebar__footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.cx-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cx-topbar {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cx-topbar__title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    /* A hosszú oldalcím inkább levágódjon, mint hogy kitolja a sávból a
       nyelvválasztót és a profilt. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-topbar__toggle {
    border: none;
    background: none;
    font-size: 1.4rem;
    color: var(--cx-text);
}

.cx-content {
    padding: 28px;
    flex: 1;
}

@media (max-width: 991.98px) {
    .cx-sidebar {
        position: fixed;
        left: -280px;
        z-index: 20;
        transition: left 0.2s ease;
        box-shadow: var(--cx-shadow-lg);
    }

    .cx-sidebar.is-open {
        left: 0;
    }

    .cx-backdrop.is-visible {
        display: block;
    }
}

/* Global refined scrollbar for the rest of the app (light surfaces). */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 132, 148, 0.35) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(124, 132, 148, 0.28);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 132, 148, 0.5);
    background-clip: content-box;
}

/* The sidebar keeps its own (light-on-dark) rules above. */
.cx-sidebar {
    scrollbar-color: transparent transparent;
}

/*
 * Impersonálás jelzése. Amikor a szuper admin más felhasználó szemszögéből
 * néz be, ezt egy pillanatra sem lehet elfelejteni: a sáv a lap tetején
 * marad, és tartalmazza a visszalépés linkjét.
 */
.cx-impersonation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 20px;
    background: #7d2a12;
    color: #ffe9df;
    font-size: 0.86rem;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 30;
}

.cx-impersonation i {
    font-size: 1rem;
}

.cx-impersonation strong {
    color: #fff;
}

.cx-impersonation a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.cx-impersonation a:hover {
    color: #ffd9c9;
}

/*
 * A kilépés GOMB, nem link: állapotot változtat, tehát POST-on és a CSRF-kapun
 * megy át. Linknek látszik, mert a sávban ez a megszokott — de a böngésző
 * szempontjából űrlap-küldés.
 */
.cx-impersonation__stop {
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

.cx-impersonation__stop:hover {
    color: #ffd9c9;
}

/* Impersonálás alatt a topbar nem tapadhat a lap tetejére, mert a sáv van ott. */
.cx-shell.is-impersonating .cx-topbar {
    top: 0;
}

.cx-card {
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    margin-bottom: var(--cx-gap);
    /* Clip inner content (tables, pagination footers) to the card's rounded
       corners so the last table row's bottom corners aren't square. */
    overflow: hidden;
}

.cx-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cx-border);
}

.cx-card__header h2 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0;
}

.cx-card__body {
    padding: 22px;
}

/*
 * Számkártya-sor. Ugyanannyi hely alatta, mint a kártyák között — Bootstrap
 * utility helyett saját osztály, mert így a ritmus egy helyen dől el, és nem
 * lehet elrontani sablononként (korábban mb-1 volt: 4px a 24 helyett).
 */
.cx-stats {
    margin-bottom: var(--cx-gap);
}

.cx-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    padding: 18px 20px;
    height: 100%;
    position: relative;
}

/*
 * Az egész kártyát kattinthatóvá tevő, átfedő link. Külön elemként fedi a
 * kártyát, nem pedig körbezárja — így a kártyán belüli saját linkek (pl. a
 * lejárt összeg) nem kerülnek linkbe linkként, ami érvénytelen HTML lenne.
 */
.cx-stat__link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

/* A kártyán belüli valódi linkek az átfedés fölé kerülnek. */
.cx-stat a:not(.cx-stat__link) {
    position: relative;
    z-index: 2;
}

.cx-stat:has(.cx-stat__link) {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cx-stat:has(.cx-stat__link:hover) {
    border-color: var(--cx-primary);
    box-shadow: 0 6px 18px rgba(var(--cx-primary-rgb), 0.16);
    transform: translateY(-1px);
}

.cx-stat__link:focus-visible {
    outline: 2px solid var(--cx-primary);
    outline-offset: 2px;
}

.cx-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: var(--cx-primary);
    flex-shrink: 0;
}

.cx-stat--warning .cx-stat__icon { background: var(--cx-warning); }
.cx-stat--danger .cx-stat__icon { background: var(--cx-danger); }
.cx-stat--success .cx-stat__icon { background: var(--cx-success); }

.cx-stat__label {
    color: var(--cx-muted);
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.cx-stat__value {
    font-size: 1.35rem;
    font-weight: 700;
}

.cx-timeline-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-primary-soft);
    color: var(--cx-primary);
    font-size: 1rem;
}

/*
 * Health Score megoszlás egy sora.
 *
 * Az EGÉSZ sor kattintható. Korábban csak a színes címke volt link, a szám és
 * a százalék nem — pedig ugyanarra a szűrt ügyféllistára vezet, tehát a
 * „85 (68%)"-ra kattintva a felhasználó joggal várt valamit.
 *
 * Az átfedő link nem zárja körbe a tartalmat (a linkbe zárt link érvénytelen
 * HTML), és a negatív vízszintes margó azért van, hogy a hover-háttér a
 * szöveg mellett is legyen néhány pixel — enélkül a betűkhöz tapadna.
 */
.cx-health-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid var(--cx-border);
    border-radius: 8px;
}

.cx-health-row__link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.cx-health-row:has(.cx-health-row__link) {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cx-health-row:has(.cx-health-row__link:hover) {
    background: var(--cx-primary-soft);
}

.cx-health-row__link:focus-visible {
    outline: 2px solid var(--cx-primary);
    outline-offset: -2px;
}

/*
 * Többválasztós szűrő (Select2) a kártyák szűrősávjában. Sok kipipált érték
 * chipje sok sorba tör, ezért a mező magassága korlátozott és belül csúszik —
 * enélkül a szűrő magasabb lett volna, mint amit szűr.
 */
.cx-filter-multi .select2-selection--multiple {
    max-height: 6.5rem;
    overflow-y: auto;
}

/*
 * Dashboard hero sáv: bevétel-diagram + Customer Health Score, 2:1 arányban.
 *
 * Ez az EGYETLEN hely az áttekintőn, ahol fix felosztás van, és itt azért
 * bírja el, mert nem jogosultság-függő halmazt kell elhelyezni, hanem
 * konkrétan ezt a két kártyát — a sablon csak akkor rajzolja ki a sávot, ha
 * mindkettő megvan. Mindkettő fix magasságú diagramra épül, tehát a
 * magasságuk közel azonos (mérve: 383 és 432 pixel), a rács pedig egy szintre
 * hozza őket. A maradék hely így a rövidebb kártya ALJÁN gyűlik össze, nem a
 * tartalom körül — a kártya törzse felül kezdődik.
 */
.cx-dash-hero {
    display: grid;
    gap: var(--cx-gap);
    margin-bottom: var(--cx-gap);
}

@media (min-width: 1200px) {
    .cx-dash-hero {
        grid-template-columns: 2fr 1fr;
    }
}

/* A ritmust a rács réstávja adja, nem a kártya saját alsó margója. */
.cx-dash-hero > .cx-card {
    margin-bottom: 0;
}

/*
 * Dashboard: pakoló kártya-folyam.
 *
 * A kártyák magassága szerepkörtől függ — a jogosultság dönti el, melyik
 * látszik —, ezért egy fix két-hasábos felosztás mindig ragged lesz. Két
 * megoldást próbáltunk, és mindkettő rosszabb volt:
 *
 *   1. Hagyni a hézagot: a rövidebb hasáb alatt üres sáv maradt, és az alatta
 *      következő teljes szélességű kártya csak a hosszabb hasáb alja után
 *      indult.
 *   2. Kinyújtani az utolsó kártyát a sor aljáig: így két majdnem üres kártya
 *      lett ~950 pixel magas, a tartalmuk meg a közepén lógott. Ez volt a
 *      csúnyább.
 *
 * A CSS többhasábos elrendezés harmadik utat ad: a böngésző a folyamot
 * MAGÁTÓL kiegyenlíti a hasábok között, és egyetlen kártyát sem nyújt meg. A
 * kártya akkora, amekkora a tartalma; az üres hely a rövidebb hasáb ALJÁN
 * gyűlik össze, ahol nem tűnik fel.
 *
 * A `break-inside: avoid` tartja egyben a kártyákat — enélkül egy táblázat
 * kettévágódna a két hasáb között.
 */
.cx-dash-masonry {
    column-gap: var(--cx-gap);

    /* A folyam saját alsó margója tartja el az alatta jövő teljes szélességű
       kártyát: a kártyák margója felül van, tehát a folyam alsó éle pontosan
       az utolsó kártya alján záródik. */
    margin-bottom: var(--cx-gap);
}

@media (min-width: 1200px) {
    .cx-dash-masonry {
        column-count: 2;
    }
}

.cx-dash-masonry > .cx-card {
    break-inside: avoid;

    /*
     * A ritmus a kártya FELSŐ margójából jön, nem az alsóból.
     *
     * Az alsó margó nem működött: a hasáb aljára eső margót a böngésző
     * levágja, tehát a folyam pont ott záródott le, ahol az utolsó kártya
     * véget ért — a tölcsér nulla hézaggal tapadt hozzá.
     */
    margin-bottom: 0;
    margin-top: var(--cx-gap);
}

.cx-dash-masonry > .cx-card:first-child {
    margin-top: 0;
}

/*
 * A megnyerés szabálya a lead adatlapján, a szakasz-váltó fölött.
 *
 * MIÉRT VAN KIÍRVA. A „Megnyert" szándékosan nincs a legördülőben (azt az
 * aláírt szerződés hozza) — de a HIÁNY nem magyarázat, csak zavar. Eddig csak
 * az tudta meg a szabályt, aki előbb beleütközött a hibaüzenetbe.
 *
 * Halkabb, mint egy figyelmeztetés: ez nem hiba, hanem a folyamat működése.
 * Bal oldali sáv, mert így akkor is elválik a fölötte lévő tartalomtól, ha
 * valaki később átszínezi a kártyát.
 */
.cx-won-rule {
    margin: 0 0 12px;
    padding: 8px 10px 8px 12px;
    border-left: 3px solid var(--cx-primary-border);
    background: var(--cx-bg);
    border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--cx-text);
}

/*
 * KI-BE CSUKHATÓ KÁRTYA — `<details class="cx-card cx-card--collapsible">`,
 * a fejléc a `<summary>`.
 *
 * `<details>` és nem JS-es lenyitás: szkript nélkül is működik, és a
 * böngésző maga kezeli a billentyűzetet (Enter / szóköz). Csukva a fejléc
 * alsó vonala eltűnik, különben egy üres sáv lógna alatta.
 */
.cx-card--collapsible > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.cx-card--collapsible > summary::-webkit-details-marker {
    display: none;
}

.cx-card--collapsible:not([open]) > summary {
    border-bottom: 0;
}

.cx-card__chevron {
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--cx-muted);
    transition: transform 0.15s ease;
}

.cx-card--collapsible[open] .cx-card__chevron {
    transform: rotate(90deg);
}

/*
 * Tól–ig szűrő (`ui.range_field`): két bemenet egy hasábban. A Bootstrap
 * alap belső margójával a dátummező 1280 pixelen levágta a saját dátumát
 * („éééé. hh. n"), ezért a párnázás itt szűkebb.
 */
.cx-range .form-control {
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.cx-range .input-group-text {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.cx-range input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 2px;
    padding: 0;
}

.cx-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-nav__group-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--cx-sidebar-text-rgb), 0.78);
    padding: 16px 10px 6px;
}

.cx-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--cx-radius-sm);
    color: var(--cx-sidebar-text);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.cx-nav__link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.cx-nav__link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cx-sidebar-text-active);
}

.cx-nav__link.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cx-sidebar-text-active);
}

.cx-table thead th {
    color: var(--cx-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    border-bottom-width: 1px;
    padding: 8px 16px;
    white-space: nowrap;
}

.cx-table td {
    padding: 7px 16px;
    vertical-align: middle;
    font-size: 0.9rem;
}

.cx-table tbody tr:hover {
    background: var(--cx-primary-soft);
}

/* Small square thumbnail in list rows */
.cx-row-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-primary-soft);
    color: var(--cx-muted);
    border: 1px solid var(--cx-border);
}

.cx-row-thumb--empty {
    font-size: 1rem;
}

/*
 * RENDEZHETŐ OSZLOPCÍM (`ui.sort_th`). A link örökli a fejléc stílusát — nem
 * lehet kék, aláhúzott link-sor a táblázat tetején —, a nyíl pedig halvány,
 * amíg az oszlop nincs kiválasztva, hogy a fejléc ne legyen zajos.
 */
.cx-sort-th__link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.cx-sort-th__link:hover {
    color: var(--cx-text);
}

.cx-sort-th__icon {
    font-size: 0.7em;
    margin-left: 0.2rem;
    opacity: 0.35;
}

.cx-sort-th__link.is-active {
    color: var(--cx-text);
}

.cx-sort-th__link.is-active .cx-sort-th__icon {
    opacity: 1;
}

/* A tömeges kijelölő oszlop (LISTA-05): keskeny, hogy a lead neve kapja a helyet. */
.cx-bulk-col {
    width: 2rem;
    padding-right: 0 !important;
}

.cx-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cx-primary-soft);
    border: none;
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    color: var(--cx-text);
    font-weight: 500;
    font-size: 0.9rem;
}

.cx-user-pill__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cx-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Telefonon csak a monogram marad, hogy a topbar tartalma kiférjen; a név a
   lenyíló menüből és az aria-label-ből továbbra is elérhető. */
@media (max-width: 575.98px) {
    .cx-user-pill {
        gap: 0;
        padding: 6px;
    }

    .cx-user-pill__name,
    .cx-user-pill__caret {
        display: none;
    }
}

/*
 * Státusz- és minősítés-jelölők. Egyetlen .cx-pill alap, amit a modifier
 * színez — így minden státuszlista (ügyfél, szolgáltatás, ajánlat, szerződés,
 * számla, projekt, upsell) ugyanúgy néz ki, és egy új státusz csak egy
 * modifier osztály.
 */
.cx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}

.cx-pill--neutral {
    background: #f1f3f9;
    color: #5c6478;
    border-color: #e2e6f0;
}

.cx-pill--info {
    background: #e8f1ff;
    color: #1c5fbd;
    border-color: #d0e2fb;
}

.cx-pill--primary {
    background: var(--cx-primary-soft);
    color: var(--cx-primary-dark);
    border-color: var(--cx-primary-border);
}

.cx-pill--success {
    background: #e6f7ef;
    color: #16794f;
    border-color: #cdeddf;
}

.cx-pill--warning {
    background: #fdf3e0;
    color: #96631a;
    border-color: #f7e3c0;
}

.cx-pill--danger {
    background: #fdeaee;
    color: #a72c42;
    border-color: #f8d3da;
}

/*
 * Customer Health Score pont. A szín önmagában nem elég információ
 * (színvakság), ezért mindig szöveges címke vagy title tartozik hozzá.
 */
.cx-health {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.cx-health__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.cx-health--green .cx-health__dot { background: var(--cx-success); }
.cx-health--yellow .cx-health__dot { background: var(--cx-warning); }
.cx-health--red .cx-health__dot { background: var(--cx-danger); }
.cx-health--none .cx-health__dot { background: #c9cedd; }

.cx-health--green { color: #16794f; }
.cx-health--yellow { color: #96631a; }
.cx-health--red { color: #a72c42; }
.cx-health--none { color: var(--cx-muted); }

/* Ügyfélminősítés (A/B/C/D) — négyzetes, monogramszerű jelölő. */
.cx-rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

.cx-rating--A { background: #16794f; }
.cx-rating--B { background: #2f80ed; }
.cx-rating--C { background: #d19022; }
.cx-rating--D { background: #b3364c; }

/* Üzletág-jelölő: a business_units.color adja a bal szélső sávot. */
.cx-unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
}

.cx-unit__swatch {
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--cx-muted);
    flex-shrink: 0;
}

/* Figyelmeztetés-lista az ügyfél áttekintőn. */
.cx-warning-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cx-warning-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    padding: 9px 12px;
    border-radius: var(--cx-radius-sm);
    background: #fdf3e0;
    border: 1px solid #f7e3c0;
    color: #7d5314;
}

.cx-warning-list li.is-critical {
    background: #fdeaee;
    border-color: #f8d3da;
    color: #8f2438;
}

.cx-warning-list i {
    margin-top: 2px;
    flex-shrink: 0;
}

/*
 * „Még nincs szerződése" — az érdeklődő adatlapjának fejlécében.
 *
 * NEM pötty (pill) és nem figyelmeztetés: az érdeklődő nem hiba és nem
 * kockázat, csak egy másik életszakasz. Ezért halk szürke, a státusz-pötty
 * MELLETT — az mondja meg, mi ez, ez pedig azt, hogy mit jelent.
 *
 * Azért van rá saját osztály és nem egy `text-muted`, mert a fejléc
 * flexbox-elem: sortöréskor a pötty alá kell kerülnie, nem mellé szorulnia.
 */
.cx-prospect-note {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--cx-muted);
    white-space: nowrap;
}

@media (max-width: 575px) {
    /* Mobilon a nowrap kitolná a fejlécet; ott inkább törjön. */
    .cx-prospect-note {
        white-space: normal;
    }
}

/*
 * Ügyfél adatlap fülek. A fülek nem JS-es tabok, hanem külön URL-ek
 * (/customers/{id}/contacts, /szolgaltatasok, …) — így megoszthatók,
 * bookmarkolhatók, és a böngésző vissza gombja is helyesen működik.
 */
.cx-detail-head {
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.cx-detail-head__top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 22px 18px;
    flex-wrap: wrap;
}

.cx-detail-head__title {
    min-width: 0;
    flex: 1;
}

.cx-detail-head__title h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
}

.cx-detail-head__meta {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    color: var(--cx-muted);
    font-size: 0.86rem;
}

.cx-detail-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/*
 * Fülsáv. Szűk kijelzőn vízszintesen csúszik, az asztali nézetben TÖRIK.
 *
 * Korábban mindenhol csúszott, és ez asztali gépen elfedte a tartalmat: az
 * ügyfél adatlapján 12 fül 1637 pixel, egy 1440 pixeles ablakban 1112 hely van
 * — 525 pixel, azaz négy fül (köztük a Timeline) egyszerűen nem látszott.
 * Odacsúszni meg csak ujjal lehetett: a scrollbar szándékosan rejtett, tehát
 * egérrel nem volt mivel.
 *
 * Ezért asztali nézetben a sáv több sorba tör: minden fül látszik, és nem kell
 * hozzá se görgetés, se nyilak. Szűk kijelzőn marad a csúszás, mert ott a 12
 * fül négy sort foglalna, és a lap tetejét ennyi fül tolná le.
 */
.cx-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    border-top: 1px solid var(--cx-border);
    overflow-x: auto;
    /* A fülsáv vízszintesen csúszik, a lap teste nem tolódik el vele. */
    scrollbar-width: none;
}

.cx-tabs::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .cx-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.cx-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    color: var(--cx-muted);
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.cx-tabs__link:hover {
    color: var(--cx-text);
}

.cx-tabs__link.is-active {
    color: var(--cx-primary);
    border-bottom-color: var(--cx-primary);
    font-weight: 600;
}

.cx-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f3f9;
    color: #5c6478;
    font-size: 0.7rem;
    font-weight: 700;
}

.cx-tabs__link.is-active .cx-tabs__count {
    background: var(--cx-primary-soft);
    color: var(--cx-primary-dark);
}

/* Kulcs-érték párok az adatlap füleken. */
.cx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px 28px;
    margin: 0;
}

.cx-facts__label {
    color: var(--cx-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-bottom: 2px;
}

.cx-facts__value {
    font-size: 0.94rem;
    word-break: break-word;
}

.cx-facts__value--muted {
    color: var(--cx-muted);
}

/* Adatforrás és frissesség jelzése a pénzügyi méret mellett. */
.cx-data-origin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--cx-muted);
    margin-top: 3px;
}

.cx-data-origin.is-stale {
    color: #96631a;
}

.cx-auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #7745db 0%, #2d1f50 55%, #1b1233 100%);
    position: relative;
    overflow: hidden;
}

.cx-auth-decor {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 40%),
                radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.06), transparent 45%);
}

.cx-auth-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 380px;
}

.cx-auth-card {
    background: var(--cx-surface);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow-lg);
    padding: 40px 36px;
    width: 100%;
}

.cx-auth-footer {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.cx-auth-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.cx-auth-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.cx-auth-card__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.cx-auth-card__brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 4px;
    border-radius: 10px;
    background: #fff;
}

.cx-auth-card__brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cx-auth-card__subtitle {
    color: var(--cx-muted);
    font-size: 0.88rem;
    margin-bottom: 24px;
}

/* A "elfelejtett jelszó" link a kártya alján. */
.cx-auth-links {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.85rem;
}

.cx-auth-links a {
    color: var(--cx-primary);
}

.cx-auth-links a:hover {
    text-decoration: underline;
}

/*
 * A 2FA beállító lap QR kódja. Fehér keret, mert a telefon kamerája a kód
 * körüli „csendes zónát” (világos sávot) igényli – sötét témában is.
 */
.cx-totp-qr {
    background: #fff;
    padding: 10px;
    border-radius: var(--cx-radius-sm);
    line-height: 0;
    flex-shrink: 0;
}

.cx-totp-qr img,
.cx-totp-qr canvas {
    display: block;
}

/*
 * Jog-mátrix szerkesztő. Sok szerepkör × sok jogosultság, ezért a
 * jogosultság-nevek oszlopa és a szerepkör-fejléc is tapad, hogy görgetés
 * közben mindig látszódjon, melyik cellában vagyunk.
 */
.cx-matrix-wrap {
    overflow: auto;
    max-height: calc(100vh - 260px);
}

.cx-matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.86rem;
}

.cx-matrix th,
.cx-matrix td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cx-border);
    background: var(--cx-surface);
}

.cx-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--cx-text);
    text-align: center;
    border-bottom: 2px solid var(--cx-border);
    vertical-align: bottom;
    line-height: 1.3;
}

.cx-matrix thead th:first-child {
    left: 0;
    z-index: 4;
    text-align: left;
    min-width: 280px;
}

.cx-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    font-weight: 500;
    min-width: 280px;
    border-right: 1px solid var(--cx-border);
}

.cx-matrix tbody th code {
    display: block;
    font-size: 0.7rem;
    color: var(--cx-muted);
    margin-top: 1px;
}

.cx-matrix td {
    text-align: center;
    width: 110px;
}

.cx-matrix tbody tr:hover th,
.cx-matrix tbody tr:hover td {
    background: var(--cx-primary-soft);
}

/* Csoportfejléc a jogosultság-csoportok között. */
.cx-matrix__group th {
    position: sticky;
    left: 0;
    background: #f6f7fc;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--cx-muted);
    padding-top: 14px;
}

.cx-matrix__group td {
    background: #f6f7fc;
}

/*
 * A szuper admin oszlopa nem szerkeszthető: nála a teljes hozzáférés a
 * kódból jön, hogy egy félreütés ne zárja ki az utolsó admint sem.
 */
.cx-matrix__locked {
    color: var(--cx-success);
    opacity: 0.65;
}

/* Foglalási naptár (views/bookings/*.twig). */

/* Napi nézet: oszloponként egy állás, soronként egy időrács-egység. */
.cx-day-grid {
    display: grid;
    grid-template-columns: 64px repeat(var(--bays, 1), minmax(150px, 1fr));
    grid-auto-rows: 38px;
    min-width: calc(64px + var(--bays, 1) * 150px);
}

.cx-day-grid__head {
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--cx-surface, #fff);
    border-bottom: 1px solid var(--cx-border);
    font-weight: 600;
    font-size: .85rem;
    padding: 6px 8px;
}

.cx-day-grid__time {
    grid-column: 1;
    font-size: .75rem;
    color: var(--cx-muted);
    padding: 2px 8px 0 0;
    text-align: right;
    border-top: 1px solid var(--cx-border);
}

.cx-day-grid__cell {
    border-top: 1px solid var(--cx-border);
    border-left: 1px solid var(--cx-border);
    display: block;
}

.cx-day-grid__cell--closed {
    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, .035) 6px 12px);
}

a.cx-day-grid__cell:hover {
    background: var(--cx-primary-soft);
}

a.cx-day-grid__cell:hover::after {
    content: "+";
    display: block;
    text-align: center;
    color: var(--cx-primary);
    font-weight: 600;
    line-height: 36px;
}

.cx-day-grid__booking {
    z-index: 2;
    margin: 2px 4px;
    padding: 3px 8px;
    border-radius: 8px;
    border-left: 4px solid var(--cx-primary);
    background: var(--cx-primary-soft);
    color: var(--cx-text);
    font-size: .8rem;
    line-height: 1.25;
    overflow: hidden;
}

.cx-day-grid__booking:hover {
    color: var(--cx-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.cx-day-grid__booking--arrived { border-left-color: #e0a800; background: #fff6d6; }
.cx-day-grid__booking--done { border-left-color: #257051; background: #e6f4ec; }

/* Havi nézet. */
.cx-month td {
    width: 14.28%;
    height: 84px;
    vertical-align: top;
    padding: 6px;
}

.cx-month__day { font-weight: 600; font-size: .85rem; }
.cx-month td.is-other { opacity: .45; }
.cx-month td.is-closed { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, .035) 6px 12px); }
.cx-month td.is-today .cx-month__day { color: var(--cx-primary); }

/*
 * Pénzügy: oszlopdiagram (szkript és könyvtár nélkül, tiszta CSS) és
 * arány-sávok a bontó táblázatokban.
 */
.fin-chart {
    display: flex;
    align-items: stretch;
    gap: 3px;
    height: 200px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cx-border);
}

.fin-chart__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.fin-chart__bar {
    background: var(--cx-primary);
    border-radius: 4px 4px 0 0;
    min-height: 1px;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.fin-chart__col:hover .fin-chart__bar {
    opacity: 1;
}

.fin-chart__label {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 0.7rem;
    color: var(--cx-muted);
    white-space: nowrap;
}

.fin-share {
    position: relative;
    height: 20px;
    background: var(--cx-primary-soft);
    border-radius: 4px;
    overflow: hidden;
    min-width: 70px;
}

.fin-share__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--cx-primary);
    opacity: 0.35;
}

.fin-share span {
    position: relative;
    font-size: 0.75rem;
    padding: 0 6px;
    line-height: 20px;
}

/* QR-olvasó (Gumi Hotel → Beolvasás): kamerakép négyzetes kerettel. */
.cx-scan__view {
    position: relative;
    overflow: hidden;
    border-radius: var(--cx-radius, 10px);
    background: #111;
    aspect-ratio: 4 / 3;
}
.cx-scan__view video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cx-scan__frame {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 58%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
    pointer-events: none;
}

/* Leltár: kisebb kamerakép a beolvasó mező mellett; csak futás közben látszik. */
.cx-scan__view--compact {
    aspect-ratio: 16 / 9;
    display: none;
}
.cx-scan.is-running .cx-scan__view--compact {
    display: block;
}

/* Fotók a szett adatlapján. */
.cx-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .5rem;
}
.cx-photo-grid figure {
    position: relative;
    margin: 0;
}
.cx-photo-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
}
.cx-photo-grid form {
    position: absolute;
    top: 4px;
    right: 4px;
}

/* Új fotók előnézete feltöltés előtt (photo-input.js). */
.cx-photo-grid--new figure > button {
    position: absolute;
    top: 4px;
    right: 4px;
}
.cx-photo-grid--new figure > .badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
}

/* Telefonos finomítások (PWA). */
@media (max-width: 575.98px) {
    /* A kártyafejléc címe és a mellette lévő címkék / gombok törhetnek két sorba. */
    .cx-card__header {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    /* A telephely-sáv magyarázó szövege telefonon csak helyet foglal. */
    .cx-site-bar__hint {
        display: none;
    }
}

/* Telepített (önálló ablakos) módban a felső sáv ne kerüljön a telefon állapotsora alá. */
.is-standalone .cx-topbar {
    padding-top: env(safe-area-inset-top);
}

/* Telephely-sáv a telephelyhez kötött lapok tetején (views/common/site_bar.twig). */
.cx-site-bar {
    border-left: 4px solid var(--cx-primary);
}

.cx-site-bar__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 14px 20px;
}

.cx-site-bar__current {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cx-site-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cx-primary-soft);
    color: var(--cx-primary);
    font-size: 1.15rem;
}

.cx-site-bar__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cx-muted);
}

.cx-site-bar__name {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.cx-site-bar__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.cx-site-bar__hint {
    padding: 0 20px 12px;
    font-size: .85rem;
    color: var(--cx-muted);
}

@media (max-width: 575.98px) {
    .cx-site-bar__choices { margin-left: 0; width: 100%; }
    .cx-site-bar__choices .btn { flex: 1 1 auto; }
}