/* Auto-generated by bin/build_css.php — do not edit directly.
 * Edit the source files under src/View/Css/ instead, then re-run the script. */

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

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

/*
 * A HTML szerkesztő nagyítva (`rich-text.js`, „Nagyítás" gomb): az ablakot
 * kitölti, a lap elsötétül mögötte. A TinyMCE a magasságot soron belül
 * állítja, ezért kell az !important.
 */
.tox.tox-tinymce.cx-editor-full {
    position: fixed !important;
    inset: 24px;
    z-index: 2000;
    width: auto !important;
    height: auto !important;
    box-shadow: 0 0 0 100vmax rgba(15, 17, 26, 0.55);
}
body.cx-editor-open {
    overflow: hidden;
}

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

/*
 * Értesítés-csengő a topbarban. Nem a főoldalon: az értesítés minden
 * oldalról el kell hogy érhető legyen, különben csak akkor látszik, ha
 * valaki épp az áttekintőn van.
 */
.cx-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface);
    color: var(--cx-muted);
    font-size: 1.05rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.cx-bell:hover,
.cx-bell[aria-expanded="true"] {
    color: var(--cx-primary);
    border-color: var(--cx-primary);
}

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

/* Az olvasatlan szám a csengő jobb felső sarkában. */
.cx-bell__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cx-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--cx-surface);
}

.cx-bell__menu {
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius);
    overflow: hidden;
}

.cx-bell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cx-border);
}

.cx-bell__head h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

/* A lista magassága kötött: nyolc értesítés fölött scrollozzon a lenyíló,
   ne a fél oldal. */
.cx-bell__list {
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cx-bell__item {
    border-bottom: 1px solid var(--cx-border);
}

.cx-bell__item:last-child {
    border-bottom: none;
}

/*
 * A sor egy űrlap-gomb és nem link: a kattintás olvasottnak jelöli az
 * értesítést, ami állapotváltozás — az pedig POST, nem GET.
 */
.cx-bell__link {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    background: none;
    text-align: left;
    color: var(--cx-text);
    transition: background 0.12s ease;
}

.cx-bell__link:hover {
    background: var(--cx-primary-soft);
}

.cx-bell__item.is-unread .cx-bell__link {
    background: rgba(var(--cx-primary-rgb), 0.05);
}

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

.cx-bell__icon--danger { background: #fdeaee; color: #a72c42; }
.cx-bell__icon--warning { background: #fdf3e0; color: #7d5314; }
.cx-bell__icon--success { background: #e6f7ef; color: #16794f; }

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

.cx-bell__title {
    font-size: 0.86rem;
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.35;
}

.cx-bell__text {
    font-size: 0.79rem;
    color: #4a5164;
    margin: 0 0 3px;

    /* Két sor után elvágjuk: a lenyíló áttekintés, nem olvasófelület. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cx-bell__meta {
    font-size: 0.72rem;
    color: var(--cx-muted);
}

.cx-bell__empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--cx-muted);
    font-size: 0.86rem;
}

.cx-bell__foot {
    padding: 10px 14px;
    border-top: 1px solid var(--cx-border);
    text-align: center;
    background: #fafbfe;
}

.cx-bell__foot a {
    font-size: 0.84rem;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .cx-bell__menu {
        width: calc(100vw - 24px);
    }
}

/*
 * Diagram-tartók és egyszerű sávok.
 *
 * A Chart.js reszponzív módban a szülő magasságát követi, ezért a tartónak
 * KELL fix magasság — enélkül a canvas minden újrarajzolásnál nőne, és a lap
 * végtelenül lefelé csúszna.
 */
.cx-chart {
    position: relative;
    height: 240px;
}

.cx-chart--donut {
    height: 190px;
}

@media (max-width: 575.98px) {
    .cx-chart {
        height: 200px;
    }
}

/*
 * Vízszintes arány-sáv. Ott használjuk, ahol a szám és az arány együtt
 * olvasható (üzletág bontás, upsell tölcsér) — oda nem kell canvas.
 */
/*
 * A display: block mindkettőn kell: a táblázatokban div-ként használjuk, a
 * dashboard tölcsérében viszont span-ként (mert egy <a> grid-cellájában van, és
 * ott nem lehet blokk-szintű elem a jelölésben). Inline elemre nem hat sem a
 * szélesség, sem a magasság — enélkül a sáv nulla pixel széles.
 */
.cx-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #eef0f7;
    overflow: hidden;
}

.cx-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cx-primary);
    transition: width 0.3s ease;

    /* A nulla százalék is látszódjon egy hajszálnyit, hogy a sor ne tűnjön
       elrontottnak. */
    min-width: 2px;
}

/* Hosszú név ne tolja szét a kártyát. */
.min-w-0 {
    min-width: 0;
}

.min-w-0 a,
.min-w-0 div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Upsell tölcsér a dashboardon.
 *
 * Nem oszlopos, hanem egymás alatti sávos felépítés: így a sávok hosszának
 * fogyása adja ki a tölcsér alakot, és ez teljes szélességben tényleg
 * olvasható. Öt szűk hasábban ugyanez nem látszana.
 *
 * Minden szakasz link (a szűrt upsell listára visz), ezért saját hover- és
 * fókusz-állapotot kap.
 */
.cx-funnel {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cx-funnel__stage {
    display: grid;

    /* címke | darab | érték | sáv | arány */
    grid-template-columns: minmax(140px, 200px) 56px 130px 1fr 52px;
    align-items: center;
    gap: 16px;

    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Akinek nincs bevétel-jogosultsága, annál az érték-hasáb el is marad. */
.cx-funnel--no-value .cx-funnel__stage {
    grid-template-columns: minmax(140px, 200px) 56px 1fr 52px;
}

.cx-funnel__stage:hover,
.cx-funnel__stage:focus-visible {
    background: var(--cx-primary-soft);
    border-color: var(--cx-primary-border);
    color: inherit;
}

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

.cx-funnel__label {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A nyíl csak hoverre jelenik meg, hogy a sor alaphelyzetben tiszta legyen. */
.cx-funnel__label .bi {
    margin-left: 4px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cx-funnel__stage:hover .cx-funnel__label .bi,
.cx-funnel__stage:focus-visible .cx-funnel__label .bi {
    opacity: 1;
    color: var(--cx-primary);
}

.cx-funnel__count {
    font-size: 1.05rem;
    font-weight: 600;

    /* Fix szélességű számjegyek: a darabszámok így egymás alatt igazodnak. */
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cx-funnel__value,
.cx-funnel__rate {
    font-size: 0.8rem;
    color: var(--cx-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* A sáv saját cellában van, hogy a grid ne nyújtsa fel a magasságát. */
.cx-funnel__track {
    display: block;
    min-width: 0;
}

/*
 * Szűk kijelzőn a grid összeomlik: címke és darabszám egy sorban, az érték és
 * az arány alatta, a sáv pedig teljes szélességben.
 */
@media (max-width: 767.98px) {
    .cx-funnel__stage,
    .cx-funnel--no-value .cx-funnel__stage {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
    }

    .cx-funnel__value {
        text-align: left;
        grid-column: 1;
    }

    .cx-funnel__rate {
        grid-column: 2;
    }

    .cx-funnel__track {
        grid-column: 1 / -1;
    }
}

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

/*
 * Aktivitási idővonal és folyamat-lépés lista. Mindkettő ugyanazt a bal oldali
 * vonal + jelölő mintát használja, csak a jelölő tartalma más.
 */
.cx-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.cx-timeline__item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}

.cx-timeline__item:last-child {
    padding-bottom: 0;
}

/* A jelölőket összekötő vonal — az utolsó elem alatt nem folytatódik. */
.cx-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 38px;
    bottom: 0;
    width: 2px;
    background: var(--cx-border);
}

.cx-timeline__marker {
    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;
    font-weight: 700;
    z-index: 1;
    border: 2px solid var(--cx-surface);
}

.cx-timeline__marker--success { background: #e6f7ef; color: #16794f; }
.cx-timeline__marker--warning { background: #fdf3e0; color: #96631a; }
.cx-timeline__marker--danger { background: #fdeaee; color: #a72c42; }
.cx-timeline__marker--muted { background: #f1f3f9; color: #8b93a6; }

/* Az ügyfél tette, nem mi: se nem hiba, se nem elvégzett munka. */
.cx-timeline__marker--primary { background: var(--cx-primary-soft); color: var(--cx-primary-dark); }

.cx-timeline__body {
    min-width: 0;
    flex: 1;
    padding-top: 2px;
}

.cx-timeline__title {
    font-size: 0.94rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.cx-timeline__meta {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    color: var(--cx-muted);
    font-size: 0.79rem;
}

.cx-timeline__text {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: #4a5164;
}

/*
 * Összesített életút. Több száz bejegyzés fut egymás alatt, ezért a sorok
 * szorosabbak, mint az ügyfél saját timeline-ján: ott húsz sor van, itt hatvan.
 */
.cx-timeline--feed .cx-timeline__item {
    padding-bottom: 14px;
}

/* Az életút-jelölés csak a „minden esemény" nézetben látszik, ott viszont ez
   az egyetlen dolog, ami kiemel egy sort a többi közül. */
.cx-timeline__key {
    display: inline-flex;
    align-items: center;
    color: var(--cx-primary-dark);
    font-weight: 600;
}

/*
 * Folyamat lépés. A zárolt lépés halványabb, mert a felhasználó nem tud vele
 * dolgozni — a kapufeltétele még nem teljesült.
 */
.cx-step {
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    padding: 14px 16px;
    background: var(--cx-surface);
    transition: border-color 0.15s ease;
}

.cx-step.is-current {
    border-color: var(--cx-primary);
    box-shadow: 0 0 0 3px rgba(var(--cx-primary-rgb), 0.08);
}

.cx-step.is-locked {
    background: #fafbfe;
    opacity: 0.7;
}

.cx-step.is-overdue {
    border-color: #f0aebb;
    background: #fffafb;
}

.cx-step__gate {
    margin: 8px 0 0;
    padding: 9px 12px;
    border-radius: var(--cx-radius-sm);
    background: #f6f7fc;
    border: 1px dashed #dfe3ee;
    font-size: 0.84rem;
    color: #4a5164;
}

.cx-step__output {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--cx-muted);
}

/* ==========================================================================
   SOR MELLETTI SZERKESZTÉS
   ==========================================================================

   Az előzmény/teendő módosító űrlapja a saját sora alatt nyílik ki, nem külön
   lapon: a szomszédos bejegyzések adják a szövegkörnyezetet, és pont azokhoz
   képest javít az ember.

   A `<details>` és nem JS-es lenyitás, mert így SZKRIPT NÉLKÜL is működik —
   ugyanaz az elv, mint az űrlapnál: a JS csak megjelenítés.
   ========================================================================== */

.cx-inline-edit__toggle {
    display: inline-block;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--cx-muted);
    /* A nyilat levesszük: a gomb feliratából és az ikonból amúgy is látszik,
       mire való, és a natív marker minden böngészőben máshogy néz ki. */
    list-style: none;
    user-select: none;
}

.cx-inline-edit__toggle::-webkit-details-marker {
    display: none;
}

.cx-inline-edit__toggle:hover {
    color: var(--cx-text);
    text-decoration: underline;
}

.cx-inline-edit[open] > .cx-inline-edit__toggle {
    color: var(--cx-text);
    font-weight: 600;
}

.cx-inline-edit__body {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--cx-border);
    border-radius: 0.5rem;
    background: var(--cx-bg);
}

/*
 * ÚJ BEJEGYZÉS az Életút tetején.
 *
 * A felvétel űrlapja a lista FÖLÖTT nyílik ki, nem egy oldalsávban: a
 * lead lapján a jobb hasábban már a szakaszváltó és a kapcsolattartók
 * állnak, és egy harmadik kártyával az űrlap a hajtás alá csúszna. Itt a
 * gomb ott van, ahol a kolléga a listát olvassa.
 *
 * `<details>`, mint a sor melletti szerkesztés: szkript nélkül is nyílik.
 */
.cx-timeline-new {
    border-bottom: 1px solid var(--cx-border);
    padding: 0.75rem 1rem;
}

.cx-timeline-new > summary {
    list-style: none;
}

.cx-timeline-new > summary::-webkit-details-marker {
    display: none;
}

.cx-timeline-new__body {
    margin-top: 0.75rem;
    max-width: 44rem;
}

/* A szűrősor alatti magyarázó sor (a lead lapján: mi van a listában). */
.cx-timeline-scope {
    margin: 0;
    padding: 0.75rem 1rem 0;
    font-size: 0.82rem;
    color: var(--cx-muted);
}

/*
 * Ügyfél-üzenetek: a beszélgetés nézete.
 *
 * Két oldal van, és a különbségük nem lehet csak a szín: a buborék OLDALA is
 * eltér (mi jobbra, az ügyfél balra), mert a színt egy színlátási zavarral élő
 * kolléga nem feltétlenül különbözteti meg — és itt az a kérdés, hogy „ki
 * mondta ezt", nem díszítés.
 *
 * A belső jegyzet a harmadik fajta, és szándékosan KILÓG a beszélgetésből:
 * szaggatott szegély, teljes szélesség, saját felirat. Ha úgy néz ki, mint egy
 * üzenet, egyszer valaki azt hiszi, hogy elküldte az ügyfélnek.
 */
.cx-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cx-thread__msg {
    max-width: 78%;
    border-radius: var(--cx-radius-sm);
    padding: 12px 14px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
}

/* Az ügyfél üzenete: balra, semleges háttérrel. */
.cx-thread__msg--theirs {
    align-self: flex-start;
    background: var(--cx-bg);
}

/* A mi válaszunk: jobbra, a márkaszín halvány változatával. */
.cx-thread__msg--ours {
    align-self: flex-end;
    background: var(--cx-primary-soft);
    border-color: var(--cx-primary-border);
}

/*
 * Belső jegyzet. Teljes szélesség és szaggatott szegély: nem a beszélgetés
 * része, hanem megjegyzés RÓLA.
 */
.cx-thread__msg--internal {
    align-self: stretch;
    max-width: 100%;
    background: #fdf7ec;
    border: 1px dashed #d8ab52;
}

.cx-thread__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.78rem;
    color: var(--cx-muted);
}

.cx-thread__author {
    font-weight: 600;
    color: var(--cx-text);
}

/* A törzs a felhasználó által írt szöveg: a sortöréseket meg kell tartani, de
   a hosszú, szóköz nélküli szöveg (egy beillesztett URL) ne feszítse szét a
   buborékot. */
.cx-thread__body {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* A „kinél van a labda" jelölő a listában. Nem státusz, hanem az utolsó
   üzenet szerzőjéből számolt érték — a saját színe ezért nem a státuszé. */
.cx-thread-wait {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

.cx-thread-wait--us {
    background: #fdecef;
    color: #a33b50;
}

.cx-thread-wait--customer {
    background: var(--cx-bg);
    color: var(--cx-muted);
}

/* A téma-lista sorai: a tárgy és az ügyfél egymás alatt, hogy a hosszú tárgy
   ne tolja szét a táblázatot. */
.cx-thread-row__subject {
    font-weight: 600;
    color: var(--cx-text);
}

.cx-thread-row__meta {
    font-size: 0.78rem;
    color: var(--cx-muted);
}

/* A kapcsolódó rekordok jelölői a téma fejlécében. */
.cx-thread-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 640px) {
    /* Mobilon a 78% már nem hagy elég helyet a szövegnek; ott az oldal-eltérés
       és a szín együtt is elég a két fél elkülönítéséhez. */
    .cx-thread__msg {
        max-width: 92%;
    }
}

/*
 * Csatolmány-lista egy üzenetben.
 *
 * Nem bélyegkép, hanem fájlnév: egy beszélgetésben a NÉV az információ
 * („szerzodes-v3.pdf"), nem a kép tartalma. Az egész sor kattintható, mert a
 * hosszú fájlnév mobilon sorba tör, és egy pici link-felület használhatatlan.
 */
.cx-attach {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.cx-attach__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface);
    color: var(--cx-text);
    text-decoration: none;
    font-size: 0.84rem;
}

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

.cx-attach__item i {
    color: var(--cx-primary);
    flex-shrink: 0;
}

/* A név kapja a maradék helyet, és hosszú név esetén elvágjuk — a méret
   viszont mindig látszik, mert az a letöltés előtti döntés alapja. */
.cx-attach__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-attach__size {
    flex-shrink: 0;
    color: var(--cx-muted);
    font-size: 0.76rem;
}

/*
 * Frissen, LAPFRISSÍTÉS NÉLKÜL érkezett üzenet.
 *
 * Rövid felvillanás, aztán vissza a normál kinézetre: aki épp a lapot
 * nézi, észreveszi az új sort, aki később görget oda, annak már nem
 * villog semmi. Az animáció `forwards`, tehát nem ugrik vissza a
 * kiindulóra a végén.
 */
.cx-thread__msg.is-new {
    animation: cx-msg-arrive 1.6s ease-out forwards;
}

@keyframes cx-msg-arrive {
    from { background: var(--cx-primary-soft); }
    to   { background: transparent; }
}

/* Aki kikapcsolta az animációkat, annak nem villogunk. */
@media (prefers-reduced-motion: reduce) {
    .cx-thread__msg.is-new { animation: none; }
}

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

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