/* ============================================================
   CommercialsW – Global Theme with Dark Mode Support
   ============================================================ */

:root {
    --bg-primary: #f0f2f5;
    --surface: #ffffff;
    --surface-elevated: #ffffff;      /* felugró, dropdown */
    --surface-hover: #f1f5f9;         /* hover állapot */
    --surface-alt: #f1f5f9;           /* beágyazott kártya, alt panel */
    --surface-2: #f3f4f6;             /* másodlagos panel */
    --text-primary: #1a1a2e;
    --text: var(--text-primary);      /* alias — több komponens ezt használja */
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-disabled: #cbd5e1;         /* inaktív, timestamp */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;         /* hangsúlyos keret */
    --accent: #DF3677;
    --accent2: #F04E8C;
    --accent-hover: var(--accent2);
    --accent-dark: #B91E5A;           /* brand — pressed */
    --success: #15803d;               /* siker — világos háttéren olvasható */
    --danger: #DF3677;                /* hiba/kritikus */
    --warning: #b45309;               /* folyamatban/figyelmeztetés */
    --info: #0369a1;                  /* metaadat/link */
    --row-odd: #f8fafc;
    --row-selected: #fce3ed;          /* brand magenta-tinted */
    --radius: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
    color-scheme: light;
}

/* Dark Mode Theme — 42NET "Professional Dark Broadcast UI" palette
   (forrás: !Promt\ui-design-system.prompt.md). Csak a token-ÉRTÉKEK változnak; a
   komponensek érintetlenek. Brand: 42NET magenta #DF3677. */
/* Owner-döntés (2026-07-24, mért WCAG-elemzéssel): a lilás felület-létra a kézikönyv "broadcast
   kékes-fekete" iránya felé tolva — hidegebb árnyalat, kevesebb telítettség, VÁLTOZATLAN #0F1117 alap.
   A szövegskála kontrasztra hangolva: secondary 5,3→7,0:1 · muted 3,7→5,3:1 (AA-bukóból AA+).
   A brand magenta marad az akcentus; a LINK szerepszíne a kézikönyv kékje (#5BB8FF, 8,2:1 AAA) —
   a magenta link a szürke felületen 3,95:1 volt, azaz WCAG AA-bukó ("beleolvad"). */
[data-theme="dark"] {
    --bg-primary: #0C0E13;            /* legmélyebb réteg: ablakháttér — a kézikönyv #0F1117-nél egy
                                         fokkal mélyebb (owner: "látszódjon a feketesedés") */
    --surface: #12151B;               /* kártya, panel */
    --surface-elevated: #1A1F28;      /* felugró, dropdown */
    --surface-hover: #1F2530;         /* hover állapot */
    --surface-alt: #151920;           /* beágyazott kártya, alt panel */
    --surface-2: #161B22;             /* másodlagos panel */
    --text-primary: #F0F2FF;          /* főadat — 15,8:1 */
    --text-secondary: #9BA3B8;        /* felirat, label — 7,0:1 (AAA-közeli) */
    --text-muted: #838CA6;            /* halványabb segédszöveg — 5,3:1 (AA+) */
    --text-disabled: #565D73;         /* inaktív, timestamp — szándékosan halk */
    --border: #262D38;                /* alap elválasztó */
    --border-strong: #333C48;         /* hangsúlyos keret */
    --accent: #DF3677;                /* 42NET brand magenta */
    --accent2: #F04E8C;               /* brand light — hover */
    --accent-dark: #B91E5A;           /* brand — pressed */
    --success: #4EC98A;               /* siker */
    --danger: #DF3677;                /* hiba/kritikus */
    --warning: #F0A030;               /* folyamatban/figyelmeztetés */
    --info: #5BB8FF;                  /* metaadat/link */
    --row-odd: #14171E;
    --row-selected: #2A1B24;          /* brand-tintás kijelölés, lila-leejtés nélkül */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.5);

    /* Bootstrap CSS-változók a broadcast dark palettához igazítva */
    --bs-body-color: #F0F2FF;
    --bs-body-bg: #0C0E13;
    --bs-emphasis-color: #F0F2FF;
    --bs-emphasis-color-rgb: 240, 242, 255;
    --bs-border-color: #262D38;
    --bs-secondary-color: #9BA3B8;
    --bs-tertiary-bg: #12151B;
    color-scheme: dark;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s ease, color 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }

/* ===== KPI Row ===== */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.kpi-icon.bg-blue   { background: linear-gradient(135deg, #DF3677, #F04E8C); }
.kpi-icon.bg-green  { background: linear-gradient(135deg, #4EC98A, #4EC98A); }
.kpi-icon.bg-purple { background: linear-gradient(135deg, #9B8BFF, #9B8BFF); }
.kpi-icon.bg-orange { background: linear-gradient(135deg, #F0A030, #F0A030); }

.kpi-body { display: flex; flex-direction: column; }
.kpi-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.3; }

/* ===== Charts Row ===== */
.charts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

/* Bar chart */
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    height: 180px;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.bar {
    width: 100%;
    max-width: 42px;
    background: linear-gradient(180deg, #DF3677, #DF3677);
    border-radius: 6px 6px 0 0;
    position: relative;
    cursor: pointer;
    transition: filter 0.15s;
    min-height: 6px;
}

.bar:hover { filter: brightness(1.15); }

.bar-tip {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.bar:hover .bar-tip { opacity: 1; }

.bar-lbl {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    font-weight: 500;
}

/* Donut */
.donut-area {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.donut {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.donut-hole {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-num { font-size: 1.15rem; font-weight: 700; }
.donut-sub { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; }

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.dot.bg-blue   { background: #DF3677; }
.dot.bg-purple { background: #9B8BFF; }
.dot.bg-green  { background: #4EC98A; }
.dot.bg-orange { background: #F0A030; }

/* ============================================================
   MENU CARDS
   ============================================================ */
.menu-section {
    margin-top: 0.5rem;
}

.menu-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.875rem;
}

/* Single menu card (link) */
.menu-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
    cursor: pointer;
}

.menu-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(223,54,119,0.13);
    transform: translateY(-2px);
    color: var(--text-primary);
}

.menu-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(223,54,119,0.1), rgba(240,78,140,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--accent);
    flex-shrink: 0;
    transition: all 0.2s;
}

.menu-card:hover .menu-card-icon {
    background: linear-gradient(135deg, #DF3677, #F04E8C);
    color: #fff;
}

.menu-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
}

.menu-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.25rem;
}

/* Card with children */
.menu-card.has-children {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: default;
}

.menu-card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.menu-card-header:hover {
    background: rgba(223,54,119,0.04);
}

.menu-card-header:hover .menu-card-icon {
    background: linear-gradient(135deg, #DF3677, #F04E8C);
    color: #fff;
}

.menu-card-arrow {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.25s;
    margin-left: auto;
}

.menu-card-arrow.open {
    transform: rotate(180deg);
}

/* Submenu panel */
.submenu-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1.25rem;
    border-top: 0 solid var(--border);
}

.submenu-panel.open {
    max-height: 500px;
    padding: 0.5rem 1.25rem 1rem;
    border-top: 1px solid var(--border);
}

.submenu-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
    font-weight: 500;
}

.submenu-link:hover {
    background: rgba(223,54,119,0.08);
    color: var(--accent);
}

.submenu-link i {
    font-size: 0.9rem;
    width: 1.1rem;
    text-align: center;
}

/* ============================================================
   DATA PAGES – shared styles
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-heading { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.2rem; letter-spacing: -0.02em; }
.page-description { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }

.btn-accent {
    background: linear-gradient(135deg, #DF3677, #F04E8C);
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(223,54,119,0.3);
    font-family: inherit;
}

.btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(223,54,119,0.4);
}

/* Data card */
.data-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Stacked cards ran into each other with no gap. The adjacent-sibling selector adds the gap ONLY
   between consecutive cards, so single-card pages keep their exact previous layout. */
.data-card + .data-card {
    margin-top: 1rem;
}

/* ── LOCK-DOWN (rendszerszintű): egy searchable-select/multiselect legördülője abszolút pozicionált,
   ezért a kártya overflow:hidden-je levágná. Ez a :has() szabály MINDEN jelenlegi és jövőbeli kártyára
   automatikusan feloldja a vágást, így nem lehet elfelejteni. (Modern böngésző / WebView2 támogatja a
   :has()-t; ha egy régi böngésző nem, a szelektort figyelmen kívül hagyja — a régi inline overflow:visible
   ott továbbra is véd.) */
.data-card:has(.searchable-select),
.card:has(.searchable-select),
.card-body:has(.searchable-select),
.card-toolbar:has(.searchable-select) {
    overflow: visible;
}

.card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
    flex-wrap: wrap;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.375rem 0.875rem;
    flex: 1;
    max-width: 480px;
    transition: all 0.2s;
}

.search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(223,54,119,0.12);
}

.search-box i { color: var(--text-muted); font-size: 0.875rem; }

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8125rem;
    color: var(--text-primary);
    width: 100%;
    font-family: inherit;
}

.search-box input::placeholder { color: var(--text-muted); }

.toolbar-actions { display: flex; gap: 0.5rem; }

.btn-toolbar {
    background: transparent;
    /* Same readable treatment as .btn-secondary: interactive border + primary icon colour. */
    border: 1px solid var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.btn-toolbar:hover {
    background: var(--bg-primary);
    border-color: var(--accent);
    color: var(--text-primary);
}

.btn-toolbar.active-view {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-icon {
    background: transparent;
    /* Same readable treatment as .btn-secondary: interactive border + primary icon colour. */
    border: 1px solid var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.15s;
    margin-right: 0.2rem;
}

.btn-icon:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Clickable cell link */
/* Kattintható cella-link — brand magenta (owner-döntés 2026-07-24: a kék linkszín-kísérlet VISSZAVONVA,
   a link is magenta marad). */
.btn-link-cell {
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    transition: color 0.15s;
}

.btn-link-cell:hover {
    color: var(--accent2);
    text-decoration: underline;
}

/* ===== Spinner animation ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Disabled button styles */
.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.card-body { padding: 1.25rem; }
.card-body.p-0 {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
}

/* ===== QuickGrid ===== */
/* A QuickGrid alaptémája --col-gap:1rem-et tesz MINDEN fejléc-cella jobb oldalára (.col-header-content
   padding-right) ÉS a data-cellák jobb paddingjébe (0.4rem + col-gap) — EZ okozta a „rendezés ↔ hamburger"
   nagy térközt és a szélesre húzott oszlopokat MINDEN griden. Levisszük 0.25rem-re → jóval tömörebb, globálisan. */
.data-grid { width: 100%; border-collapse: collapse; --col-gap: 0.25rem !important; }

.data-grid th {
    background: var(--bg-primary) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.45rem !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}

/* SŰRŰ RÁCS — globális kánon (owner-döntés, 2026-07-24): minden grid-sor PONTOSAN EGY SOR magas.
   Tördelés tilos, a túllógó szöveg ellipszissel csonkul; a függőleges padding negyedelve. Ugyanakkora
   képernyőn ~2× annyi adat. Először a Dalok griden bizonyított, innen kánonná emelve. */
.data-grid td {
    padding: 0.12rem 0.45rem !important;
    font-size: 0.8125rem;
    line-height: 1.2;
    /* Tabular számjegyek: az összegek/darabszámok oszlopban igazodnak, és a szám-nehéz oldalak
       (pl. Vezetői áttekintés) nem hatnak „más betűtípusnak" a proporcionális számjegyek miatt. */
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 17rem;
}

/* Cellán belüli szerkesztők (inline-edit gridek: SearchableSelect, input) — az ellipszis-kezelés
   overflow:hidden-je levágná az abszolút pozicionált legördülőt, ezért ezekben a cellákban feloldjuk.
   Ugyanaz a :has()-lockdown minta, mint a kártyáknál. */
.data-grid td:has(.searchable-select),
.data-grid td:has(input),
.data-grid td:has(textarea) {
    overflow: visible;
    max-width: none;
}

/* Művelet-cellák (ikon-gombsor) és badge-cellák: a szöveg-csonkolás (max-width + overflow:hidden)
   RÁJUK NEM vonatkozhat — a gombsor nem "szöveg", nem vágható le a fele. A cella a tartalmához méretezik. */
.data-grid td:has(.btn-icon),
.data-grid td:has(.cue-badge) {
    overflow: visible;
    max-width: none;
}

/* Fejléc/oszlop-illesztés kánon (a Megrendelések oldalról emelve, owner-döntés): a tábla a TARTALMÁHOZ
   méretezik (max-content), nem húzza szét az oszlopokat a képernyő-szélesség — a fejléc-felirat és a
   szűrő-hamburger egymás mellett marad, nem úszik szét. Korábban a Megrendelesek.razor page-lokál
   stílusa volt, ezért a többi grid nem örökölte. */
.data-grid-fit { width: max-content !important; }
.data-grid-fit th, .data-grid-fit td { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }

/* Kijelölt sor (owner-kérés: legyen "rákattintottam"-érzet). A QuickGrid nem ad sor-osztály hookot,
   ezért a kijelölt sor cellájába egy láthatatlan .row-sel-mark kerül, és a :has() emeli ki a TELJES
   sort: brand-tintás háttér + magenta él a bal oldalon. */
.row-sel-mark { display: none; }

.data-grid tbody tr:has(.row-sel-mark) {
    background: color-mix(in srgb, var(--accent) 11%, transparent) !important;
}

.data-grid tbody tr:has(.row-sel-mark) td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* A művelet-oszlop ikonjai a sűrű sorhoz méretezve (a modal-footer 38px-e külön kontextus, nem érinti). */
.data-grid .btn-icon {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}

.data-grid tbody tr { transition: background 0.1s; }
.data-grid tbody tr:hover { background: rgba(223,54,119,0.04) !important; }
.data-grid tbody tr:last-child td { border-bottom: none !important; }

/* Horizontal scroll container — required for the sticky right-pinned column below. */
.grid-scroll-wrapper { overflow-x: auto; }

/* Right-pinned "actions" column: stays visible while the grid scrolls horizontally. */
.data-grid td.col-sticky-right,
.data-grid th.col-sticky-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: -8px 0 10px -8px rgba(0,0,0,0.22);
    white-space: nowrap;
}
.data-grid th.col-sticky-right {
    background: var(--bg-primary) !important;
    z-index: 3;
}
/* Match the row hover tint on the pinned cell (which has an opaque background). */
.data-grid tbody tr:hover td.col-sticky-right {
    background-image: linear-gradient(rgba(223,54,119,0.04), rgba(223,54,119,0.04));
}

/* Status badges */
.status-badge {
    display: inline-flex;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active   { background: rgba(16,185,129,0.1); color: #059669; }
.status-progress { background: rgba(223,54,119,0.1); color: #B91E5A; }
.status-closed   { background: rgba(100,116,139,0.1); color: #475569; }
.status-pending  { background: rgba(245,158,11,0.1); color: #d97706; }

/* ============================================================
   FILTER PANEL
   ============================================================ */
.filter-panel {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: rgba(223,54,119,0.02);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label {
    font-size: 0.675rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select,
.filter-group input {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.625rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface);
    min-width: 120px;
    outline: none;
    transition: border-color 0.15s;
}

.filter-group select:focus,
.filter-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(223,54,119,0.1);
}

.btn-filter-clear {
    background: transparent;
    /* Same readable treatment as .btn-secondary: interactive border + primary text. */
    border: 1px solid var(--text-muted);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: inherit;
    transition: all 0.15s;
    align-self: flex-end;
}

.btn-filter-clear:hover {
    background: rgba(239,68,68,0.08);
    border-color: #ef4444;
    color: #ef4444;
}

/* .filter-chip is styled by the CANONICAL CHIP rule (search "CANONICAL CHIP" in this file). */

/* ============================================================
   MODAL DIALOG
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}

/* Unified modal width: every modal matches the "Megrendelés szerkesztése" (order editor) modal.
   Canonical width = .modal-xl (max-width:80vw, min-width:816px). The base + lg + xl tiers all resolve
   to the same width so modals are uniform regardless of which class the markup uses. Below 900px the
   min-width is released so the dialog never overflows a small/mobile viewport. */
.modal-dialog {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 80vw;
    min-width: 816px;
    /* Cap the dialog to the viewport so a tall modal never overflows off-screen; the body scrolls and
       the header/tabs/footer stay pinned, so the Save button is ALWAYS reachable. */
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    animation: modalIn 0.2s ease;
    pointer-events: auto;
}

/* Pin the chrome; only the body scrolls. */
.modal-dialog > .modal-header,
.modal-dialog > .modal-tabs,
.modal-dialog > .modal-footer {
    flex: 0 0 auto;
}

.modal-lg {
    max-width: 80vw;
    min-width: 816px;
}

.modal-xl {
    max-width: 80vw;
    min-width: 816px;
}

@media (max-width: 900px) {
    .modal-dialog,
    .modal-lg,
    .modal-xl {
        max-width: 96vw;
        min-width: 0;
    }
}

/* ============================================================
   GLOBAL RESPONSIVE LAYER — narrow-screen fallbacks shared by EVERY page.
   The desktop layout is untouched; this only reflows/stacks the common
   building blocks (filters, toolbars, charts, detail grids, page headers)
   so no page overflows the viewport on tablets/phones. Per-page grids that
   already use auto-fit/auto-fill/flex-wrap reflow on their own and need
   nothing here.
   ============================================================ */
@media (max-width: 768px) {
    /* 3-up chart row → single column */
    .charts-row { grid-template-columns: 1fr; }

    /* Filter panel + toolbars: controls take full width instead of overflowing the row */
    .filter-panel { gap: 0.6rem; }
    .filter-group { flex: 1 1 100%; }
    .filter-group select,
    .filter-group input { width: 100%; min-width: 0; }

    .search-box { max-width: none; width: 100%; }
    .card-toolbar { align-items: stretch; }

    /* Page header stacks: title over its action button */
    .page-header { flex-direction: column; align-items: stretch; }

    /* Form rows (dates, payment, any label:field row) WRAP instead of overflowing on phones */
    .form-row { flex-wrap: wrap; }
    .form-row > .form-group { flex: 1 1 140px; min-width: 0; }

    /* Two-up inline grids (eladó+vevő, etc.) collapse to one column */
    .grid-2-mobile { grid-template-columns: 1fr !important; }

    /* Tighter breathing room so modal/card content isn't clipped on narrow screens */
    .modal-body { padding: 0.85rem; }
    .card-body { padding: 0.9rem; }

    /* Tables inside cards/modals keep their own horizontal scroll — never push the page sideways */
    .card, .modal-dialog { max-width: 100%; }
}

@media (max-width: 480px) {
    /* label:value detail pairs stack vertically on very narrow (phone) screens */
    .detail-grid { grid-template-columns: 1fr; }
    .detail-label { border-bottom: none; padding-bottom: 0; }
    .detail-value { padding-top: 0.15rem; }

    .kpi-value { font-size: 1.2rem; }
    .page-heading { font-size: 1.25rem; }
}

/* Responsive utility layouts used by a few pages that had inline fixed grids (can't @media inline).
   Desktop proportions are preserved; they collapse to a single column on narrow screens. */
.split-300 { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; }
.split-320 { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; }
.transfer-3 { display: grid; grid-template-columns: 1fr auto 1fr; }

@media (max-width: 640px) {
    .split-300, .split-320 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .transfer-3 { grid-template-columns: 1fr; }
    /* the middle arrow column reads better centred once the panes stack */
    .transfer-3 > * { justify-self: stretch; }
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
}

.modal-close:hover { color: var(--text-primary); }

/* ===== Brand-pink framed checkbox — the ONE approved checkbox look =====
   Applied GLOBALLY to EVERY input[type=checkbox] so the native "gagyi" box never renders anywhere
   (now or in future); .gratis-check is kept as an explicit alias. The tick is a scalable SVG background
   (background-size %) so it stays crisp at any size, incl. the small list checkboxes. */
input[type="checkbox"],
.gratis-check {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex: 0 0 auto;
    border: 2px solid var(--accent);
    border-radius: 4px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 66% 66%;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: background-color 0.15s, border-color 0.15s;
}
input[type="checkbox"]:checked,
.gratis-check:checked {
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled,
.gratis-check:disabled {
    opacity: 0.5;
    cursor: default;
}

.modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    /* The body is the ONLY scrollable region of the dialog. flex:1 + min-height:0 lets it shrink inside
       the height-capped flex column so overflow scrolls here instead of pushing the footer off-screen. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* Footer action row alignment: .btn-icon is a fixed 30px square, while the text buttons compute to
   ~36-38px from padding + line-height, so the left icon row read as visibly shorter than Mégse/Mentés.
   Normalise all footer controls to one height HERE ONLY — list grids keep the compact 30px icon. */
.modal-footer .btn-icon {
    width: 38px;
    height: 38px;
}

.modal-footer .btn,
.modal-footer .btn-secondary,
.modal-footer .btn-accent,
.modal-footer .btn-danger {
    min-height: 38px;
}

/* ===== ReportPager bar ===== */
.rp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    font-size: 0.82rem;
}

.rp-count { color: var(--text-muted); white-space: nowrap; }
.rp-count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rp-dot { opacity: 0.5; margin: 0 0.15rem; }
.rp-nav { display: flex; align-items: center; gap: 0.2rem; }

.rp-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.rp-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.rp-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.rp-page {
    min-width: 68px;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.rp-page strong { color: var(--text-primary); }

.rp-size { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; color: var(--text-muted); cursor: pointer; }
.rp-size-select { min-width: 6.5rem; }

/* ===== Match-review table (Számla-párosítás) =====
   Class-driven cells on purpose: this grid can render hundreds of rows, and in Blazor Server EVERY inline
   style attribute is part of the render diff pushed over SignalR. Hoisting the repeated per-cell padding,
   colour and size into classes cuts that payload by roughly an order of magnitude, so the table paints
   near-instantly instead of streaming a wall of attributes on each reload. */
.mr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.mr-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    text-align: left;
    padding: 0.3rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
}

.mr-table td {
    padding: 0.18rem 0.6rem;   /* sűrű-rács kánon */
    line-height: 1.25;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.mr-table tbody tr { transition: background 0.12s; }
.mr-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.mr-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }

.mr-num { font-weight: 600; white-space: nowrap; }
.mr-money { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-nowrap { white-space: nowrap; }
.mr-right { text-align: right; white-space: nowrap; }
.mr-sub { color: var(--text-muted); font-size: 0.78rem; }
.mr-muted { color: var(--text-muted); }
.mr-campaign { color: var(--accent); font-size: 0.72rem; margin-top: 0.1rem; }
.mr-axes { color: var(--text-muted); font-size: 0.66rem; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.mr-note { color: var(--warning); font-size: 0.66rem; margin-top: 0.15rem; max-width: 220px; white-space: normal; }
.mr-raw { color: var(--warning); font-size: 0.66rem; margin-left: 0.25rem; }
.mr-method { color: var(--text-muted); font-size: 0.72rem; margin-left: 0.3rem; }

/* Confidence meter — headline % plus a bar, so certainty reads at a glance while scanning. */
.mr-conf { display: inline-flex; align-items: center; gap: 0.4rem; }
.mr-conf-val { font-size: 0.74rem; font-weight: 800; min-width: 2.7rem; text-align: right; font-variant-numeric: tabular-nums; }
.mr-conf-bar {
    width: 54px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 13%, transparent);
    overflow: hidden;
    flex: 0 0 auto;
}
.mr-conf-fill { height: 100%; border-radius: 999px; transition: width 0.2s; }
.mr-fill-hi { background: var(--success); }
.mr-fill-mid { background: var(--warning); }
.mr-fill-lo { background: var(--text-muted); }
.mr-conf-hi { color: var(--success); }
.mr-conf-mid { color: var(--warning); }
.mr-conf-lo { color: var(--text-muted); }

/* Status pill — modifier classes instead of a per-row inline background. */
.mr-pill {
    display: inline-block;
    font-size: 0.67rem;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}

.mr-pill.mr-auto { background: var(--success); }
.mr-pill.mr-manual { background: var(--accent); }
.mr-pill.mr-suggested { background: var(--warning); }
.mr-pill.mr-rejected { background: var(--danger); }
.mr-pill.mr-unknown { background: var(--text-muted); }

/* Inline szerkeszthető Összeg cella a Számla-párosítás rácsán — a Tömeges szerkesztés oldal
   .obe-cell / .obe-input mintája (kattintható érték → keskeny, akcent-keretes input). */
.mr-editcell { display: inline-block; min-height: 1.1rem; min-width: 3rem; cursor: pointer; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.mr-editcell:hover { opacity: 0.75; }
.mr-edit-input { width: 110px; box-sizing: border-box; height: 30px; font-size: 0.8125rem; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--text-primary); text-align: right; }

/* A riport-táblák (Kimutatások, .table osztály) is a sűrű-rács kánont követik. A cellák inline
   paddingjét is felülírja (!important) — a sorok itt is egysoros magasságúak. A tördelést itt NEM
   tiltjuk (jegyzet/megnevezés cellák szándékosan törhetnek), csak a térközt negyedeljük. */
table.table td,
table.table th {
    padding: 0.16rem 0.5rem !important;
    line-height: 1.25;
}

.mr-empty { padding: 2.25rem; text-align: center; color: var(--text-muted); }
.mr-empty i { font-size: 1.75rem; }
.mr-empty div { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .mr-table tbody tr,
    .mr-conf-fill,
    .rp-btn { transition: none; }
}

/* ===== Detail Grid (label : value pairs) ===== */
.detail-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0;
    font-size: 0.85rem;
}

.detail-label {
    padding: 0.45rem 0.75rem 0.45rem 0;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.detail-value {
    padding: 0.45rem 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-height: 2rem;
}

.detail-grid > .detail-label:nth-last-child(2),
.detail-grid > .detail-value:last-child {
    border-bottom: none;
}

/* ===== Waveform Player ===== */
.dispo-waveform-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.dispo-waveform-canvas-wrap {
    position: relative;
    width: 100%;
    height: 80px;
    background: var(--surface-alt);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.dispo-waveform-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.dispo-waveform-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(223, 54, 119, 0.12);
    pointer-events: none;
    transition: width 0.05s linear;
}

.dispo-waveform-playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--accent);
    pointer-events: none;
    transition: left 0.05s linear;
}

.dispo-player-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dispo-player-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.dispo-player-btn:hover {
    background: var(--accent-hover, #B91E5A);
    transform: scale(1.05);
}

.dispo-player-btn:disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.dispo-player-time {
    font-family: 'Rubik', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-width: 80px;
}

.dispo-player-seek {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.dispo-player-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.dispo-player-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

/* ===== Audio Loudness KPIs ===== */
.dispo-loudness-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.dispo-loudness-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-alt);
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
}

.dispo-loudness-chip i {
    font-size: 0.85rem;
    color: var(--accent);
}

.dispo-loudness-chip .chip-label {
    color: var(--text-muted);
    font-weight: 500;
}

.dispo-loudness-chip .chip-value {
    font-weight: 700;
    font-family: 'Rubik', monospace;
    color: var(--text-primary);
}

/* ============================================================
   DISPO GRID — napi/heti diszpó mátrix (RadioBlokkok / /blokkok/{id})
   Sűrű, színkódolt, VB6-auto-diszpó ihlette mátrix modern kivitelben.
   Oszlop = nap, sor = óra; a blokk-kártyák a blokktípus színét hordozzák
   (typeColor inline). Tokenvezérelt, light + dark.
   ============================================================ */

/* local tokens */
.dispo-week-wrapper,
.dispo-day-single,
.dispo-hour-view {
    --dispo-firstcol: 52px;
    --dispo-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dispo-snap: cubic-bezier(.2, .8, .25, 1);
}

/* ---- HOUR TIMELINE BAR (0–23 gyorssáv) ---- */
.dispo-timeline-bar {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(var(--surface), var(--surface));
    scrollbar-width: auto;
}
.dispo-tl-btn {
    position: relative;
    flex: 1 0 30px;
    min-width: 30px;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    transition: background-color .12s var(--dispo-snap),
                color .12s var(--dispo-snap),
                border-color .12s var(--dispo-snap),
                transform .12s var(--dispo-snap);
}
.dispo-tl-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.dispo-tl-hour { font-size: .72rem; font-weight: 600; line-height: 1; }
.dispo-tl-dot {
    font-size: .56rem;
    font-weight: 700;
    line-height: 1;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.dispo-tl-btn.dispo-tl-has {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-primary));
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
.dispo-tl-btn.dispo-tl-active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent) 60%, transparent);
}
.dispo-tl-active .dispo-tl-dot { background: rgba(255,255,255,.25); color: #fff; }

/* ---- TABLE WRAPPER (heti / rádió-összevetés) ---- */
.dispo-week-wrapper {
    position: relative;
    max-height: calc(100vh - 300px);
    overflow: auto;
    scrollbar-width: auto;
    scrollbar-color: var(--border) transparent;
}

/* header grid (sarok + nap-fejlécek) */
.dispo-tt {
    display: grid;
    grid-template-columns: var(--dispo-firstcol) repeat(7, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 6;
}
.dispo-tt-corner {
    position: sticky;
    left: 0;
    z-index: 7;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.dispo-tt-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0.4rem 0.3rem;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    box-shadow: inset 0 -1px 0 var(--border);
}
.dispo-day-name {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.dispo-day-date {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.1;
}
.dispo-today-badge {
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.dispo-tt-day-summary {
    margin-top: 1px;
    font-size: .6rem;
    font-weight: 600;
    color: var(--accent);
}
.dispo-tt-day-summary.dispo-tt-nofile { color: var(--text-muted); opacity: .6; }
.dispo-tt-day-head.dispo-tt-today {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 18%, var(--bg-primary)),
        color-mix(in srgb, var(--accent) 9%, var(--bg-primary)));
    box-shadow: inset 0 -2px 0 var(--accent);
}
.dispo-tt-day-head.dispo-tt-today .dispo-day-date { color: var(--accent); }
.dispo-tt-day-head.dispo-tt-weekend {
    background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-primary));
}

/* body */
.dispo-tt-body { display: flex; flex-direction: column; }
.dispo-tt-body-radios { display: grid; }   /* inline grid-template-columns from markup */

.dispo-tt-row {
    display: grid;
    grid-template-columns: var(--dispo-firstcol) repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    min-height: 34px;
}
.dispo-tt-row:last-child { border-bottom: none; }
.dispo-tt-row-empty { min-height: 22px; opacity: .85; }
.dispo-tt-row-empty .dispo-tt-hour { color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.dispo-tt-row-empty .dispo-tt-cell { background: color-mix(in srgb, var(--text-muted) 3%, transparent); }

/* hour label (első oszlop) */
.dispo-tt-hour {
    position: sticky;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.25rem 0.5rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}
.dispo-tt-hour > span { position: sticky; top: 38px; }

/* cells */
.dispo-tt-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 3px;
    border-left: 1px solid var(--border);
    min-width: 0;
}
.dispo-tt-cell-today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.dispo-tt-cell-weekend { background: color-mix(in srgb, var(--text-muted) 4%, transparent); }
.dispo-tt-nofile-mark { color: var(--text-muted); opacity: .35; font-size: .8rem; padding: 0.15rem 0.35rem; }

/* ---- BLOCK CARD (a rács szíve) ---- */
.dispo-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 4px 7px 5px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .12s var(--dispo-snap),
                box-shadow .12s var(--dispo-snap),
                border-color .12s var(--dispo-snap);
}
.dispo-block:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.dispo-block-empty { opacity: .62; }
.dispo-block-empty:hover { opacity: 1; }
.dispo-block-drop-target {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.dispo-block-head {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.dispo-block-time {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--text-primary);
    flex-shrink: 0;
}
.dispo-block-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.dispo-block-count {
    flex-shrink: 0;
    min-width: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.dispo-bar-track {
    margin-top: 4px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    overflow: hidden;
}
.dispo-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .25s var(--dispo-snap);
}
.dispo-block-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .6rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.dispo-pct { font-weight: 700; }

/* large variant (napi / órás nézet) */
.dispo-block-lg { padding: 8px 12px 10px; border-radius: 10px; }
.dispo-block-lg .dispo-block-time { font-size: .95rem; }
.dispo-block-lg .dispo-block-name { font-size: .8rem; }
.dispo-block-lg .dispo-bar-track { height: 6px; margin-top: 7px; }
.dispo-block-lg .dispo-block-stats { font-size: .72rem; margin-top: 5px; }

/* ---- ITEM LIST (kinyitott blokk) ---- */
.dispo-items-panel {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dispo-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: .72rem;
    color: var(--text-secondary);
    transition: background-color .1s var(--dispo-snap);
}
.dispo-item-rich:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dispo-item-rich { cursor: grab; }
.dispo-item-dragging { opacity: .45; cursor: grabbing; }
.dispo-drag-grip { color: var(--text-muted); opacity: .5; font-size: .75rem; cursor: grab; flex-shrink: 0; }
.dispo-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.dispo-item-len {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dispo-ind-high { color: var(--warning); font-size: .72rem; flex-shrink: 0; }
.dispo-ind-strict { color: #ef4444; font-size: .72rem; flex-shrink: 0; }

/* Hiányzó hangfájl — piros jelzés (VB6 paritás) */
.dispo-ind-missing { color: #ef4444; font-size: .8rem; flex-shrink: 0; }
.dispo-item-missing {
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: inset 3px 0 0 0 #ef4444;
}
.dispo-item-missing .dispo-item-title {
    color: #ef4444;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, .5);
}

.dispo-item-detail-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 5px;
    display: inline-flex;
    flex-shrink: 0;
    transition: color .12s, background-color .12s;
}
.dispo-item-detail-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* flag pills */
.dispo-flag {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 4px;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-secondary);
}
.dispo-flag-b { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.dispo-flag-m { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; }
.dispo-flag-p { background: color-mix(in srgb, #10b981 20%, transparent); color: #059669; }

/* drag & drop indicators */
.dispo-drop-indicator {
    height: 2px;
    margin: 1px 4px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.dispo-drop-zone { min-height: 8px; }
.dispo-drop-zone-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 6px;
    font-size: .64rem;
    color: var(--accent);
}

/* ---- DAY / HOUR VIEW ---- */
.dispo-day-single { overflow: auto; max-height: calc(100vh - 300px); }
.dispo-tt-body-day .dispo-tt-row-day {
    display: grid;
    grid-template-columns: 58px 1fr;
    min-height: 40px;
}
.dispo-tt-hour-day {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: background-color .12s var(--dispo-snap);
}
.dispo-tt-hour-day.dispo-hour-active { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent); }
.dispo-tt-hour-day:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.dispo-hour-count {
    min-width: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    text-align: center;
}
.dispo-tt-cell-day { padding: 6px 8px; }
.dispo-tt-cell-blocks { display: flex; flex-direction: column; gap: 6px; }
.dispo-tt-cell-summary { margin-top: 5px; font-size: .68rem; color: var(--text-muted); }

.dispo-hour-view { padding: 1rem 1.25rem 1.25rem; }
.dispo-hour-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}
.dispo-hour-blocks-lg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

/* empty state */
.dispo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    color: var(--text-muted);
    font-size: .82rem;
    text-align: center;
}

/* ---- TOAST (base) + SAVING OVERLAY ---- */
.dispo-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: .85rem;
    font-weight: 500;
    animation: dispoToastIn .25s var(--dispo-spring, cubic-bezier(.34,1.56,.64,1));
}
@keyframes dispoToastIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dispo-saving-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    backdrop-filter: blur(2px);
    color: var(--text-secondary);
    font-size: .9rem;
}
.dispo-saving-spinner {
    font-size: 1.8rem;
    color: var(--accent);
    display: inline-flex;
    animation: spin 0.9s linear infinite;
}

/* ---- DARK THEME tweaks ---- */
[data-theme="dark"] .dispo-tt-corner,
[data-theme="dark"] .dispo-tt-day-head { background: var(--bg-primary); }
[data-theme="dark"] .dispo-block { background: color-mix(in srgb, var(--surface) 88%, transparent); }
[data-theme="dark"] .dispo-flag-m { color: #fbbf24; }
[data-theme="dark"] .dispo-flag-p { color: #34d399; }

@media (prefers-reduced-motion: reduce) {
    .dispo-tl-btn, .dispo-block, .dispo-item-row, .dispo-bar-fill,
    .dispo-tt-hour-day, .dispo-item-detail-btn {
        transition: background-color .08s linear, color .08s linear, border-color .08s linear !important;
    }
    .dispo-tl-btn:hover, .dispo-block:hover { transform: none !important; }
    .dispo-toast, .dispo-saving-spinner { animation: none !important; }
}

/* ===== Tabs ===== */
.modal-tabs {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: none;
    padding: 0.75rem 1.25rem 0;
    gap: 0.375rem;
    overflow-x: auto;
    /* overflow-x:auto forces overflow-y to compute as `auto`, which spawns a PHANTOM vertical scrollbar the
       instant the tab row is a hair too tall (active-tab shadow + the horizontal scrollbar's own height). That
       phantom bar steals ~15px of width and tips the tabs into overflowing horizontally too. Pinning
       overflow-y:hidden breaks the loop: the tab bar takes its natural height and never scrolls vertically. */
    overflow-y: hidden;
    background: var(--bg-primary);
}

.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: inherit;
    position: relative;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(223,54,119,0.06);
}

.tab-btn.active {
    color: var(--accent);
    background: var(--surface);
    border-color: var(--border);
    font-weight: 600;
    box-shadow: 0 -2px 6px rgba(223,54,119,0.08);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--surface);
}

.tab-btn i {
    font-size: 0.85rem;
    opacity: 0.7;
}

.tab-btn.active i {
    opacity: 1;
    color: var(--accent);
}

/* ===== Form controls ===== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

/* A stand-alone .form-group placed DIRECTLY in the (flex-column) .modal-body must NOT stretch vertically —
   flex:1 is only meant for horizontal splitting inside a .form-row. Without this, a fixed-height modal
   spreads its single-field rows (Cím, Sorszám…) apart; they must stay compact at the top with the extra
   space collecting at the bottom. Fields inside a .form-row keep flex:1 (they split the row width). */
.modal-body > .form-group {
    flex: 0 0 auto;
}

.form-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-input {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(223,54,119,0.12);
}

/* Text boxes: drop the heavy frame (owner: "nem kell keret a szöveghez") — a soft filled surface reads cleaner.
   A subtle inset ring on focus keeps it usable without the boxy border. */
.form-textarea {
    border: none !important;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
    border-radius: 8px;
}
.form-textarea:focus {
    box-shadow: inset 0 0 0 1.5px var(--accent) !important;
}

.form-row {
    display: flex;
    gap: 0.875rem;
}

.btn-secondary {
    background: transparent;
    /* Readable in both themes: a proper interactive border (--text-muted, not the faint --border
       divider token) and primary text. Higher contrast, still neutral — no new colours introduced. */
    border: 1px solid var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.btn-secondary:hover {
    background: var(--bg-primary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Danger (outline) button — same shape as .btn-secondary, danger-coloured. */
.btn-danger {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--danger, #E74C3C) 55%, transparent);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--danger, #E74C3C);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.btn-danger:hover {
    background: var(--danger, #E74C3C);
    border-color: var(--danger, #E74C3C);
    color: #fff;
}
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Alert bar ===== */
.alert-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1rem;
    animation: alertIn 0.2s ease;
}

@keyframes alertIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.alert-success {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    color: #059669;
}

.alert-error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    color: #dc2626;
}

/* Neutral, non-alarming notice (e.g. "code sent"). Theme-token based, so it follows light/dark. */
.alert-info {
    background: color-mix(in srgb, var(--info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--info) 24%, transparent);
    color: var(--info);
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

.alert-close:hover { opacity: 1; }

/* Color swatch */
.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border);
    vertical-align: middle;
    margin-right: 0.35rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.color-swatch-lg {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.color-code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.form-color-input {
    width: 42px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--surface);
    transition: border-color 0.15s;
}

.form-color-input:hover {
    border-color: var(--accent);
}

.form-color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.form-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ===== Toggle switch ===== */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--surface);
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(18px);
}

.toggle-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ===== Range slider ===== */
.range-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    transition: background 0.15s;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(223,54,119,0.3);
    transition: transform 0.15s;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(223,54,119,0.3);
}

.range-value {
    min-width: 28px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(223,54,119,0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

/* ============================================================
   SEARCHABLE SELECT
   ============================================================ */
.searchable-select {
    position: relative;
    width: 100%;
}

.searchable-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
    font-family: inherit;
}

.searchable-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.searchable-select.open .searchable-select-chevron {
    transform: rotate(180deg);
}

.searchable-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 160px;
    background: var(--surface-elevated, var(--surface));
    /* soft border + strong elevation instead of a heavy accent outline — modern floating panel */
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: searchableSelectIn 0.15s ease;
}

/* Accent focus ring on the trigger while the dropdown is open (matches the chip tint language). */
.searchable-select.open .searchable-select-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

@keyframes searchableSelectIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.searchable-select-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.searchable-select-search i {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.searchable-select-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8125rem;
    color: var(--text-primary);
    width: 100%;
    font-family: inherit;
}

.searchable-select-search input::placeholder {
    color: var(--text-muted);
}

.searchable-select-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    flex-shrink: 0;
}

.searchable-select-clear:hover {
    color: #ef4444;
}

.searchable-select-items {
    max-height: 300px;
    overflow-y: auto;
    padding: 0.3rem;
}

.searchable-select-item {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-select-item:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.searchable-select-item.selected {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: color-mix(in srgb, var(--accent) 82%, white);
    font-weight: 600;
}

/* Opt-in "add new" row (SearchableSelect OnAddNew): visually distinct accent action,
   separated from the pickable items above it. */
.searchable-select-item.searchable-select-add {
    color: var(--accent);
    font-weight: 600;
    border-top: 1px solid var(--border);
    margin-top: 0.15rem;
    white-space: normal;
}
.searchable-select-item.searchable-select-add:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.searchable-select-item.searchable-select-add strong {
    color: color-mix(in srgb, var(--accent) 88%, white);
}

/* Per-item colour dot for coloured SearchableMultiSelect chips/options (participants) */
.ss-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.searchable-select-dropdown {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* --- SearchableSelect clear button hover --- */
.searchable-select-clear:hover {
    color: #ef4444;
}

/* --- SearchableMultiSelect selected chips (pill + subtle circular remove) --- */
/* .multi-select-tag + .multi-select-tag-remove are styled by the CANONICAL CHIP rule (search "CANONICAL CHIP"). */

/* --- Toggle slider knob --- */
.toggle-slider::after {
    background: var(--surface);
}

/* --- Card data background --- */
.card.data-card,
.chart-card {
    background: var(--surface);
}

/* --- Dispo components --- */
.dispo-toast-success {
    background: #065f46;
    color: #d1fae5;
}

.dispo-toast-error {
    background: #7f1d1d;
    color: #fee2e2;
}

/* --- Page header --- */
.page-heading,
.page-description {
    color: var(--text-primary);
}

.page-description {
    color: var(--text-secondary);
}

/* --- Modal overlay darker in dark mode --- */
.modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* ===== Dark Mode Overrides ===== */
[data-theme="dark"] .status-active   { background: rgba(16,185,129,0.15); color: #34d399; }
[data-theme="dark"] .status-progress { background: rgba(223,54,119,0.15); color: #a5b4fc; }
[data-theme="dark"] .status-closed   { background: rgba(100,116,139,0.15); color: #94a3b8; }
[data-theme="dark"] .status-pending  { background: rgba(245,158,11,0.15); color: #fbbf24; }

[data-theme="dark"] .alert-success {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.3);
    color: #34d399;
}

[data-theme="dark"] .alert-error {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .filter-group select,
[data-theme="dark"] .filter-group input {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .form-input option {
    background: var(--surface);
    color: var(--text-primary);
}

[data-theme="dark"] .data-grid tbody tr:hover {
    background: rgba(129,140,248,0.08) !important;
}

[data-theme="dark"] .btn-accent {
    box-shadow: 0 2px 8px rgba(223,54,119,0.2);
}

[data-theme="dark"] .btn-accent:hover {
    box-shadow: 0 4px 12px rgba(223,54,119,0.3);
}

/* --- Scrollbar styling --- */
/* Globális (oldal) görgetősáv — NORMÁL méret, hogy ne takarja ki a tartalmat */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border: 2px solid var(--bg-primary);
    border-radius: 8px;
    background-clip: padding-box;
    min-height: 32px;
    min-width: 32px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: var(--accent2);
    background-clip: padding-box;
}

/* Rács-görgetősávok (Beosztás / Gantt / RadioBlokkok) — vastagabb, jól megfogható */
.grid-scroll-wrapper::-webkit-scrollbar,
.dispo-week-wrapper::-webkit-scrollbar,
.dispo-day-single::-webkit-scrollbar,
.dispo-hour-view::-webkit-scrollbar,
.gantt-wrapper::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}

/* ===== Beosztás blokk hover-kártya (JS-pozícionált, body-höz fűzve) ===== */
.bhp {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    max-width: 340px;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5));
}

.bhp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px 9px;
    color: var(--text-primary);
    min-width: 210px;
}

.bhp-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.bhp-time {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.bhp-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.bhp-cnt {
    flex-shrink: 0;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bhp-track {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    overflow: hidden;
    margin-bottom: 7px;
}

.bhp-fill {
    height: 100%;
    border-radius: 999px;
}

.bhp-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 280px;
    overflow: hidden;
}

.bhp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text-muted) 7%, transparent);
}

.bhp-item.bhp-mine {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.bhp-it-t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--text-primary);
}

.bhp-it-l {
    flex-shrink: 0;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.bhp-empty {
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
    padding: 4px;
}

/* ===== Help / Súgó content ===== */
.help-content {
    max-width: 900px;
    line-height: 1.8;
    font-size: 0.9rem;
    padding: 2rem;
}

/* "Újdonságok" popup: the scrolling region is the modal body, so the scrollbar sits at the dialog's
   right edge; the text itself keeps a centred reading column. (Previously the 900 px-capped
   .help-content WAS the scroll container inside a much wider dialog — the content hugged the left
   side and the scrollbar landed in the middle of the screen.) */
.whatsnew-body {
    padding: 0;
}

.whatsnew-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem 2rem 2rem;
}

.help-content h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--accent);
}

.help-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--border);
}

.help-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.help-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.25rem;
    font-size: 0.85rem;
}

.help-content th,
.help-content td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.help-content th {
    background: var(--bg-primary);
    font-weight: 600;
}

.help-content blockquote {
    border-left: 4px solid var(--accent);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: var(--bg-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-secondary);
}

.help-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.help-content ul,
.help-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.help-content li {
    margin: 0.25rem 0;
}

.help-content code {
    background: var(--bg-primary);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.help-content strong {
    font-weight: 600;
}

.help-content p {
    margin: 0.5rem 0;
}

/* ===== Login Page ===== */
.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 42NET HQ / Detroit backdrop — the LoginLayout sets a RANDOM image inline (background-image) per page load;
       the solid colour renders INSTANTLY and is the fallback if an image ever fails. The photos are cached
       ~0.4–0.5 MB static JPEGs layered via a CSS background, so they NEVER block the page render or the login
       form — loading speed is unaffected. */
    background-color: var(--bg-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1rem;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem 2rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0.75rem 0 0.25rem;
    color: var(--text-primary);
}

.login-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrapper > i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.login-input {
    padding-left: 2.25rem !important;
}

.login-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Two-factor: the login's second step ─────────────────────────────────── */

.login-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-muted);
}

.tfa-intro {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.tfa-intro-icon {
    font-size: 1.25rem;
    color: var(--accent);
    line-height: 1.4;
}

.tfa-intro-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.125rem;
}

.tfa-intro-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* The code box is the focus of the step: large, spaced and unmistakably numeric. */
.tfa-code-input {
    width: 100%;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-indent: 0.35em;   /* re-centres text that letter-spacing pushes left */
    padding: 0.6rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

.tfa-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.tfa-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tfa-link:hover:not(:disabled) { text-decoration: underline; }
.tfa-link:disabled { opacity: 0.5; cursor: default; }

.tfa-help {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── Two-factor: the settings page ───────────────────────────────────────── */

.tfa-status,
.tfa-section-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.tfa-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Flat, tinted chips — never glossy (canonical chip design). */
.tfa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}

.tfa-badge.on {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.tfa-badge.warn {
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: var(--warning);
}

.tfa-done {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.tfa-enroll {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* A QR must stay dark-on-light to scan reliably — so the plate keeps its white
   background in dark mode too, deliberately ignoring the theme. */
.tfa-qr-plate {
    background: #fff;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    line-height: 0;
    flex: 0 0 auto;
}

.tfa-qr-plate svg {
    width: 190px;
    height: 190px;
    display: block;
}

.tfa-enroll-steps {
    flex: 1 1 260px;
    min-width: 260px;
}

.tfa-enroll-steps ol {
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.tfa-manual {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.tfa-manual code {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    user-select: all;
}

/* A 6-digit code needs a box sized to 6 digits — full width made it look like a text field. */
.tfa-enroll-steps .tfa-code-input {
    font-size: 1.35rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    width: auto;
    max-width: 13rem;
}

/* Breathing room between the code box and the Confirm / Cancel buttons. */
.tfa-enroll-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.tfa-device-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tfa-device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.tfa-device-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.tfa-device-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tfa-recovery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4rem;
    margin-top: 0.75rem;
}

/* ── Two-factor: on/off switches on the maintenance page ─────────────────── */

.tfa-policy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: center;
}

.tfa-policy-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tfa-policy-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.tfa-policy-state {
    font-size: 0.8125rem;
    color: var(--text-muted);
    min-width: 1.5rem;
}

.tfa-days-input {
    width: 4.5rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.875rem;
    text-align: center;
}

/* Compact toggle — sized to sit inside a dense grid row without growing it. */
.tfa-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    vertical-align: middle;
}

.tfa-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.15s ease;
}

.tfa-switch.on {
    background: var(--accent);
    border-color: var(--accent);
}

.tfa-switch.on .tfa-switch-knob { transform: translateX(18px); }

.tfa-switch:disabled { opacity: 0.45; cursor: default; }
.tfa-switch:not(:disabled):hover { border-color: var(--accent); }

/* Per-method switches inside a grid row: flat, tinted, never glossy. */
.tfa-method-cell {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}

.tfa-method {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tfa-method:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tfa-method:disabled { opacity: 0.45; cursor: default; }

.tfa-method.on {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    color: var(--success);
}

/* Required but not yet set up by the user — deliberately distinct from "on". */
.tfa-method.pending {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--warning) 34%, transparent);
    color: var(--warning);
}

/* Low recovery-code count in the admin table — a nudge, not an alarm. */
.tfa-count-warn {
    color: var(--warning);
    font-weight: 600;
}

.tfa-recovery-grid code {
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-align: center;
    user-select: all;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ===== ONAIR Statistics Grid & Report ===== */
.onair-grid-wrapper {
    /* Both axes scroll inside a bounded, generous panel. NOTE: this wrapper is a direct flex child
       of the flex-column .modal-body; because it is an overflow (scroll) container, its flex
       min-height:auto resolves to 0, so with the default flex-shrink:1 the whole 24-row heatmap
       collapsed to a sliver ("annyira alacsony, hogy nem látszik semmi belőle") whenever the
       filters/mail-panel above it took the room. flex:0 0 auto stops the collapse; max-height keeps
       it self-contained (the modal-body scrolls for the rest). */
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex: 0 0 auto;
    max-height: 60vh;
}

.onair-grid {
    border-collapse: collapse;
    font-size: 0.7rem;
    min-width: 100%;
}

.onair-grid th,
.onair-grid td {
    padding: 0.15rem 0.25rem;
    text-align: center;
    border: 1px solid var(--border);
    min-width: 26px;
    height: 22px;
}

.onair-grid thead th {
    background: var(--bg-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.onair-grid-corner {
    position: sticky;
    left: 0;
    z-index: 2 !important;
    background: var(--bg-primary) !important;
}

.onair-grid-hour {
    font-weight: 600;
    background: var(--bg-primary);
    position: sticky;
    left: 0;
    z-index: 1;
}

.onair-grid-hit {
    background: #ef4444;
    color: #fff;
    font-weight: 700;
}

[data-theme="dark"] .onair-grid-hit {
    background: #dc2626;
}

/* --- OnAir Report --- */
.onair-report {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    font-family: "Segoe UI", system-ui, sans-serif;
    max-height: 400px;
    overflow-y: auto;
}

/* ===== Broadcast Schedule Grid (Scatter) ===== */
.broadcast-grid-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.broadcast-grid {
    border-collapse: collapse;
    font-size: 0.65rem;
    min-width: 100%;
}

.broadcast-grid th,
.broadcast-grid td {
    padding: 0.1rem 0.15rem;
    text-align: center;
    border: 1px solid var(--border);
    min-width: 18px;
    height: 20px;
}

.broadcast-grid thead th {
    background: var(--bg-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.broadcast-grid-corner {
    position: sticky;
    left: 0;
    z-index: 2 !important;
    background: var(--bg-primary) !important;
    min-width: 42px;
}

.broadcast-grid-month {
    font-weight: 400;
    font-size: 0.58rem;
    color: var(--text-muted);
}

.broadcast-grid-time {
    font-weight: 600;
    font-size: 0.7rem;
    background: var(--bg-primary);
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    padding: 0.1rem 0.35rem;
}

.broadcast-grid-today {
    background: rgba(59, 130, 246, 0.1) !important;
    border-bottom: 2px solid var(--accent) !important;
}

.broadcast-grid-empty {
    background: transparent;
}

.broadcast-dot-past,
.broadcast-dot-future {
    text-align: center;
    vertical-align: middle;
}

.broadcast-dot-past {
    background: rgba(107, 114, 128, 0.12);
}

.broadcast-dot-future {
    background: rgba(34, 197, 94, 0.08);
}

.broadcast-dot-past .broadcast-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.broadcast-dot-future .broadcast-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

[data-theme="dark"] .broadcast-dot-past {
    background: rgba(107, 114, 128, 0.2);
}

[data-theme="dark"] .broadcast-dot-future {
    background: rgba(34, 197, 94, 0.15);
}

.onair-report-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.onair-report-sound {
    margin-bottom: 0.75rem;
}

.onair-report-sound-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--accent);
}

.onair-report-entry {
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}

.onair-report-count {
    padding-left: 1.25rem;
    font-weight: 600;
    margin-top: 0.15rem;
    font-size: 0.78rem;
}

.onair-report-total {
    border-top: 2px solid var(--border);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ===== Design-system additions ===== */

/* Small modifier for any button (btn-accent / btn-secondary / btn-link). */
.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
}

/* Link-style button: accent text, no chrome, subtle hover wash. */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    color: var(--accent);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-link:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

/* ===== Auto-diszpó attribute filter (segmented: Ki / Kizár / Kényszerít) ===== */
.attr-filter { display: inline-flex; align-items: center; gap: 0.35rem; }
.attr-filter-label { font-size: 0.78rem; color: var(--text-secondary); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.seg-btn {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.42rem;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: background 0.12s, color 0.12s;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.seg-on-off  { background: color-mix(in srgb, var(--text-muted) 22%, transparent); color: var(--text-primary); }
.seg-on-excl { background: #E74C3C; color: #fff; }
.seg-on-req  { background: #27AE60; color: #fff; }

/* ===== Diszpozíció (manual dispo editor) ===== */
.dz-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
.dz-left { min-width: 0; }
.dz-columns { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
.dz-col { flex: 0 0 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dz-col-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--accent) 8%, transparent); border-bottom: 1px solid var(--border); }

/* 0–24h hour navigation strip */
.dz-hours { display: flex; flex-wrap: nowrap; gap: 2px; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); background: var(--bg-primary); }
.dz-hour { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.62rem; font-variant-numeric: tabular-nums; padding: 0.15rem 0; border-radius: 3px; color: var(--text-muted); text-decoration: none; }
a.dz-hour:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.dz-hour-has { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 700; }
.dz-hour-empty { opacity: 0.4; }
.dz-hours-top { border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; }

/* Time-aligned multi-radio grid — calendar style: subtle horizontal hour lines + one vertical time axis,
   blocks are clean cards (no per-cell boxing / "labyrinth"). Same time = same horizontal row. */
.dz-grid { display: grid; gap: 0; align-items: start; border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: auto; max-height: calc(100vh - 14rem); background: var(--bg-primary); }
.dz-grid-corner { position: sticky; top: 0; left: 0; z-index: 4; background: var(--surface); border-bottom: 2px solid var(--border); border-right: 1px solid var(--border); }
.dz-grid-radiohead { position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--accent) 8%, transparent); border-bottom: 2px solid var(--border); padding: 0.5rem 0.75rem; display: flex; flex-direction: row; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dz-grid-radiohead strong { font-size: 0.9rem; }
.dz-rh-date { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* day prepared from the daily template (no saved dispo file yet — created on first save) */
.dz-rh-tpl { font-size: 0.66rem; font-weight: 700; white-space: nowrap; padding: 0.1rem 0.45rem; border-radius: 4px; color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.dz-rh-stats { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
/* time axis (left gutter): right border = the single vertical axis; top border aligns with the hour line */
.dz-grid-time { position: sticky; left: 0; z-index: 2; background: var(--bg-primary); border-top: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); border-right: 1px solid var(--border); padding: 0.55rem 0.45rem 0.5rem 0.3rem; text-align: right; font-weight: 700; font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* content cells: only a faint top hour line + a faint column divider, no boxing */
.dz-grid-cell { border-top: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); border-left: 1px solid color-mix(in srgb, var(--text-muted) 9%, transparent); padding: 0.5rem; min-width: 0; }

/* audio status (green = has sound, red = missing) */
.dz-aud { font-size: 0.72rem; flex-shrink: 0; }
.dz-aud-ok { color: #10b981; }
.dz-aud-miss { color: #ef4444; }

.dz-block { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0.5rem 0.65rem; box-shadow: var(--shadow-sm); }
.dz-block + .dz-block { margin-top: 0.5rem; }
.dz-block.dz-block-droppable:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-md); }
.dz-block-stats { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--text-muted); margin-top: 0.15rem; }
.dz-pct { font-weight: 700; }
.dz-uniq { font-size: 0.62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dz-uniq-warn { color: var(--warning); }
.dz-item-ord { min-width: 1.3rem; text-align: right; color: var(--text-muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; }
.dz-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dz-ind-high { font-size: 0.62rem; font-weight: 700; color: var(--warning); white-space: nowrap; }
.dz-ind-strict { color: #ef4444; font-size: 0.72rem; }
.dz-block-droppable { cursor: copy; }
.dz-block-droppable:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dz-block-head { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.78rem; }
.dz-block-time { font-weight: 700; color: var(--accent); }
.dz-block-name { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-block-fill { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.dz-block-fill.dz-over { color: #E74C3C; font-weight: 700; }
.dz-fillbar { position: relative; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); margin: 0.3rem 0; overflow: hidden; }
.dz-fillbar-in { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); }
.dz-fillbar-actual { position: absolute; top: 0; left: 0; height: 100%; }
.dz-fillbar-in.dz-over-bg { background: #E74C3C; }

.dz-item { display: flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0; font-size: 0.74rem; }
.dz-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-item-len { color: var(--text-muted); font-size: 0.68rem; min-width: 2.2rem; text-align: right; }
.btn-icon.dz-mini { padding: 0.05rem 0.2rem; font-size: 0.65rem; }

.dz-right { position: sticky; top: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 9rem); }
.dz-right-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.dz-tabs { display: inline-flex; gap: 0.25rem; }
.dz-tab { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 0.22rem 0.55rem; font-size: 0.76rem; font-family: inherit; color: var(--text-secondary); cursor: pointer; }
.dz-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dz-quick { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; }
.dz-quick.on { color: var(--accent); font-weight: 700; }
.dz-selinfo { padding: 0.4rem 0.6rem; font-size: 0.74rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; }
.dz-filters { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.dz-list { overflow-y: auto; flex: 1; }
.dz-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); cursor: pointer; }
.dz-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dz-row.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dz-selmark { font-size: 1.05rem; flex-shrink: 0; color: var(--text-muted); }
.dz-row.sel .dz-selmark { color: var(--accent); }
.dz-row-main { display: flex; flex-direction: column; min-width: 0; }
.dz-row-title { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-row-sub { font-size: 0.68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== CLX editor (broadcast look) ===== */
.clx-edit { gap: 0; }
.clx-edit-head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.85rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
.clx-type-badge { background: var(--accent); color: #fff; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.25rem 0.5rem; border-radius: 6px; }
.clx-title-input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); background: var(--surface); outline: none; }
.clx-title-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(223,54,119,0.12); }
.clx-head-meta { display: flex; gap: 1rem; font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.clx-total strong { color: var(--accent); }

.clx-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem 0.85rem; margin-bottom: 1rem; }
.clx-meta-grid .form-group { margin: 0; }

.clx-signals { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; background: var(--bg-primary); }
.clx-signals-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-weight: 700; font-size: 0.85rem; }
.clx-slot { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 0.45rem; }
.clx-slot:last-child { margin-bottom: 0; }
.clx-slot-label { min-width: 88px; font-weight: 700; font-size: 0.8rem; color: var(--text-secondary); }
.clx-slot-pick { flex: 1; min-width: 0; }
.clx-slot-len { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--text-muted); }
.clx-slot-vol { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: var(--text-muted); }
.clx-pfl { width: 30px; height: 30px; border-radius: 7px; border: none; background: color-mix(in srgb, #10b981 18%, transparent); color: #10b981; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s; }
.clx-pfl:hover:not(:disabled) { background: #10b981; color: #fff; }
.clx-pfl:disabled { opacity: 0.4; cursor: default; }
.dz-sig { font-size: 0.74rem; color: var(--text-secondary); }

/* ===== CLX editor: settings section + chips + per-slot volume ===== */
.clx-section { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; background: var(--bg-primary); margin-bottom: 1rem; }
.clx-section-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.6rem; }
.clx-section-sub { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }
.clx-grouphint { font-weight: 400; color: var(--text-muted); font-size: 0.72rem; }
.clx-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem 0.85rem; }
.clx-settings-grid .form-group { margin: 0; }
.clx-span2 { grid-column: span 2; }
.clx-span4 { grid-column: 1 / -1; }
.clx-kind { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.clx-kind-opt { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; padding: 0.28rem 0.5rem; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; background: var(--surface); }
.clx-kind-opt.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.clx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.clx-chips-empty { font-size: 0.78rem; color: var(--text-muted); }
.chip { font-size: 0.74rem; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all 0.12s; }
.chip:hover { border-color: var(--accent); }
.chip-on { background: color-mix(in srgb, var(--chip-color, var(--accent)) 16%, transparent); border-color: color-mix(in srgb, var(--chip-color, var(--accent)) 42%, transparent); color: color-mix(in srgb, var(--chip-color, var(--accent)) 82%, white); font-weight: 600; }
.clx-vol-input { width: 56px; text-align: right; }
.clx-slot-vol-empty { min-width: 78px; }
.clx-loading { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-muted); padding: 0.4rem 0.2rem 0.7rem; }
.btn-danger { background: #E74C3C; border: 1px solid #E74C3C; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #c0392b; border-color: #c0392b; }
.btn-danger:disabled { opacity: 0.6; cursor: default; }
.clx-dots { flex: 0 0 auto; width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text-secondary); cursor: pointer; font-weight: 700; line-height: 1; padding: 0; }
.clx-dots:hover { border-color: var(--accent); color: var(--accent); }
.clx-sigpick-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.clx-sigpick-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--border); }
.clx-sigpick-row:last-child { border-bottom: none; }
.clx-sigpick-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.clx-sigpick-title { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clx-sigpick-len { font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--text-muted); min-width: 64px; text-align: right; }

/* ===== Shortfall ("hiány") report ===== */
.shortfall { font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: baseline; gap: 0.35rem; }
.shortfall-deficit { color: #E74C3C; }   /* hiány */
.shortfall-ok      { color: #27AE60; }   /* elég / tartalék */
.shortfall-neutral { color: var(--text-muted); }
.shortfall-diff    { font-weight: 700; }
.shortfall-muted   { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }

/* ===== Auto-diszpó per-interval day toggles (green=on / red=off) ===== */
.dpr-day {
    min-width: 1.85rem;
    padding: 0.16rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    transition: filter 0.12s;
}
.dpr-day:hover { filter: brightness(1.1); }
.dpr-on  { background: #27AE60; }   /* zöld = engedélyezett */
.dpr-off { background: #E74C3C; }   /* piros = tiltott */

.dpr-everyn {
    width: auto;
    min-width: 92px;
    padding: 0.18rem 1.5rem 0.18rem 0.45rem;
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

/* ===== Auto-diszpó result matrix (day × time, band-coloured) ===== */
.dispo-matrix-wrap {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.dispo-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    line-height: 1.1;
}

/* Stretch the matrix to fill the available width (date columns share the space evenly). */
.dispo-matrix-fill {
    width: 100%;
    table-layout: fixed;
}

/* Interactive Fix-mode cells: clickable, with a subtle hover affordance. */
.dispo-matrix td.fix-cell {
    cursor: pointer;
    user-select: none;
    transition: filter 0.1s;
}
.dispo-matrix td.fix-cell:hover { filter: brightness(1.18); }

.dispo-matrix th,
.dispo-matrix td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    min-width: 40px;
}

.dispo-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    font-weight: 600;
}

.dispo-matrix .dispo-time-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    font-weight: 600;
    min-width: 52px;
}

.dispo-matrix thead th.dispo-corner {
    z-index: 3;
}

/* Native <select> with the form-input look: drop the grey OS control and draw our own chevron. */
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    padding-right: 1.7rem;
    cursor: pointer;
}

/* ============================================================
   QuickGrid — 42NET dark + magenta integration
   (overrides the package default white popup / black icons)
   ============================================================ */

/* Column-filter popup: replace the white frame with the elevated dark surface + magenta border */
.col-options {
    background: var(--surface-elevated, var(--surface)) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
    color: var(--text-primary) !important;
    padding: 0.6rem !important;
    min-width: 210px;
}

/* Column-filter popup contents: theme the inner text/range inputs to the dark surface — the browser-default
   (unstyled) input background reads as a pale "brown" frame on the dark theme. Scoped to the app's own
   .col-filter-pop / .rng inputs, so the MultiSelectChips search below is untouched. */
.col-filter-pop { display: flex; flex-direction: column; gap: 0.35rem; }
.col-filter-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.rng { display: flex; gap: 0.4rem; }
.col-filter-pop input,
.rng input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    font-size: 0.8125rem !important;
    outline: none;
}
.col-filter-pop input:focus,
.rng input:focus { border-color: var(--accent) !important; }
.col-filter-pop input::placeholder,
.rng input::placeholder { color: var(--text-muted); opacity: 1; }

/* The header "options" (hamburger) icon: the package draws a black SVG via background-image, and
   currentColor does NOT apply to a background-image SVG → we must swap the image for a magenta-filled one. */
.col-options-button {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.5 0 21 24" fill="none" stroke="%23DF3677" stroke-width="2.4"><path d="M4 6h16M4 12h16M4 18h16"/></svg>') center center / 1rem no-repeat !important;
    opacity: 1 !important;
}

/* Sort indicator is a black-filled SVG background → swap for a magenta-filled one (and stop dimming it) */
.quickgrid[theme=default] .sort-indicator { opacity: 1 !important; }
.col-sort-asc .sort-indicator,
.col-sort-desc .sort-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23DF3677" d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z"/></svg>') !important;
}

/* Paginator: visible separator + magenta arrow glyphs (the default ones are black SVGs → invisible on dark) */
.paginator { border-top: 1px solid var(--border) !important; color: var(--text-primary); }
.paginator .go-first, .paginator .go-last {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90) scale(0.8)" transform-origin="12 12"><path fill="%23DF3677" d="m 2,1.5 l 10,17.5 l 10,-17.5 l -10,7.75 l -10,-7.75 z"/><rect fill="%23DF3677" height="2" width="20" y="20.5" x="2"/></g></svg>') !important;
}
.paginator .go-previous, .paginator .go-next {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90)" transform-origin="12 12"><path fill="%23DF3677" d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 11 z"/></g></svg>') !important;
}
.paginator nav button:not([disabled]):hover {
    background-color: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Grid footer: page-size picker + paginator on one row (picker left, pager grows right) */
.grid-footer { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.grid-footer .paginator { flex: 1 1 auto; border-top: none !important; }
.grid-footer { border-top: 1px solid var(--border); padding-top: 0.35rem; margin-top: 0.25rem; }
.page-size-picker { width: 112px; flex: 0 0 auto; }

/* Egységes doboz-magasság a grid-láb MINDEN elemére (owner-kérés): egy sorban három különböző magasság
   volt. A LEGMAGASABBHOZ (a lapméret-választó ~36px-éhez) igazítunk — nem lefelé zsugorítunk. */
.grid-footer .searchable-select-trigger {
    height: 36px;
    min-height: 36px !important;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}

.grid-footer .paginator {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 36px;
    align-items: center;
}

.grid-footer .paginator nav button {
    width: 36px !important;
    height: 36px !important;
}

/* ============================================================
   MultiSelectChips — column-filter multi-select (search + checkbox list + chips)
   ============================================================ */
/* Fluid width so inline filter columns FIT their flex slot (fixed 256px overflowed the ~170px slot and the
   neighbouring column, making them collide). In a QuickGrid col-options popup it fills the popup (min 210px). */
.ms-filter { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; min-width: 0; }

/* Összecsukható (inline) mód: alapból csak a fejléc + a kiválasztott badge-ek látszanak, így
   szűrés nélkül egyetlen sornyi helyet foglal. */
.ms-collapsible { gap: 0.3rem; }
.ms-head {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; cursor: pointer;
    background: transparent; border: 1px solid var(--border); border-radius: 7px;
    padding: 0.32rem 0.55rem; color: var(--text-muted); font-size: 0.8rem; font-family: inherit;
    text-align: left; transition: border-color 0.15s, color 0.15s;
}
.ms-head:hover { border-color: var(--accent); color: var(--text); }
.ms-head-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-head-count {
    display: inline-block; min-width: 1.15rem; text-align: center; font-weight: 700;
    background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
    border-radius: 999px; padding: 0 0.35rem;
}

.ms-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 84px; overflow-y: auto; }
/* ══ CANONICAL CHIP — the DEFAULT chip/tag/filter-pill design across the whole app ═══════════════════
   Flat, tinted (modern label look — Linear/GitHub/Notion): the element's colour (--chip-color, set inline;
   defaults to the brand accent) as a SUBTLE background tint + a soft colour border + bright colour text. No
   gloss, no saturated fill. Every removable selection chip shares this one rule. To colour a chip, set
   `style="--chip-color:#RRGGBB"` on it; otherwise it uses the brand accent. */
.ms-chip,
.multi-select-tag,
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 6px 2px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 100%;
    white-space: nowrap;
    color: color-mix(in srgb, var(--chip-color, var(--accent)) 82%, white);
    background: color-mix(in srgb, var(--chip-color, var(--accent)) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 40%, transparent);
    border-radius: 999px;
}
/* the remove (×) button inside any chip */
.ms-chip button,
.multi-select-tag .multi-select-tag-remove,
.filter-chip button {
    all: unset;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 2px;
}
.ms-chip button:hover,
.multi-select-tag .multi-select-tag-remove:hover,
.filter-chip button:hover { opacity: 1; }

.ms-search { position: relative; }
.ms-search i { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.78rem; pointer-events: none; }
.ms-search input {
    width: 100%; padding: 0.35rem 0.5rem 0.35rem 1.7rem;
    font-size: 0.82rem; color: var(--text-primary);
    background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 6px;
}

.ms-list {
    max-height: 210px; overflow-y: auto;
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 6px;
}
.ms-item {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.5rem; font-size: 0.82rem; cursor: pointer; color: var(--text-primary);
}
.ms-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ms-item.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ms-item input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.ms-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-empty { padding: 0.4rem 0.5rem; font-size: 0.78rem; color: var(--text-muted); }

.ms-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--text-muted); }
.ms-clear {
    border: none; background: none; cursor: pointer;
    color: var(--accent); font-size: 0.74rem; padding: 0;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.ms-clear:hover { color: var(--accent2); }
/* ── Report grids: linked names + info tooltips (kimutatások) ─────────────────
   Partner/entity names in report grids are REAL links opening the profile page
   in a NEW TAB (two-monitor compare workflow) — no separate icon buttons.
   Parenthetical explanations are banned from the screen; use <InfoTip> instead. */
.grid-link {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-strong);
    cursor: pointer;
}
.grid-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Info marker — a small brand badge that lights up on hover, instead of a flat grey glyph. */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    cursor: help;
    margin-left: 0.35rem;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.info-tip:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
                0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ===== 42NET tooltip (tooltip.js) =====
   Replaces the OS `title` bubble app-wide. Painted client-side from the hoisted title text, so it costs
   no server round-trip — it appears in ~90ms instead of the browser's ~500ms, follows the theme, and can
   show a heading + bullet structure for the long explanations (e.g. the match-confidence breakdown). */
.tip42 {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    max-width: 340px;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32),
                0 0 22px color-mix(in srgb, var(--accent) 26%, transparent);
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.97);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.tip42.on { opacity: 1; transform: translateY(0) scale(1); }

/* Caret — --tip-ax is set by the script so it keeps pointing at the target after edge-clamping. */
.tip42::after {
    content: "";
    position: absolute;
    left: var(--tip-ax, 50%);
    bottom: -5px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.tip42.tip42-below::after {
    bottom: auto;
    top: -5px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.tip42-head {
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.tip42-row { color: var(--text-secondary); }
.tip42-gap { height: 0.3rem; }

.tip42-li {
    position: relative;
    padding-left: 0.8rem;
    color: var(--text-secondary);
}

.tip42-li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .tip42 { transition: none; }
    .info-tip { transition: none; }
}

/* Heatmap/matrix cards hug their content instead of stretching full width. */
.fit-card { max-width: max-content; }

/* ============================================================
   RECONNECT OVERLAY — Detroit "pit-stop" theme.
   Replaces Blazor's default white reconnect box. Hidden by default; Blazor toggles the state classes
   (components-reconnect-show / -failed / -rejected while trying, -hide when back). blazorReconnect.js
   reveals .reconnect-escalate after 3 minutes of no recovery.
   ============================================================ */
.reconnect-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(1200px 600px at 50% -10%, rgba(223,54,119,0.18), transparent 60%),
                rgba(6, 8, 15, 0.90);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
/* Blazor shows the overlay only while genuinely trying to reconnect or after it has failed/been rejected. */
.reconnect-overlay.components-reconnect-show,
.reconnect-overlay.components-reconnect-failed,
.reconnect-overlay.components-reconnect-rejected {
    display: flex;
    animation: reconnect-fade 0.25s ease;
}
@keyframes reconnect-fade { from { opacity: 0; } to { opacity: 1; } }

.reconnect-card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    color: #ECEFF6;
    background: linear-gradient(180deg, #171A24 0%, #0F1117 100%);
    border: 1px solid rgba(223, 54, 119, 0.35);
    border-radius: 18px;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
    font-family: 'Inter', system-ui, sans-serif;
}
.reconnect-skyline {
    font-size: 1.9rem;
    letter-spacing: 0.25rem;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
    animation: reconnect-cruise 3.2s ease-in-out infinite;
}
@keyframes reconnect-cruise {
    0%, 100% { transform: translateX(-6px); }
    50%      { transform: translateX(6px); }
}
.reconnect-spinner {
    width: 46px;
    height: 46px;
    margin: 1.1rem auto 0.4rem;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.12);
    border-top-color: #DF3677;
    border-right-color: #F04E8C;
    animation: reconnect-spin 0.9s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }

.reconnect-title {
    margin: 0.6rem 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}
.reconnect-text {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #B9C0CE;
}
.reconnect-text strong { color: #fff; }
.reconnect-attempt {
    margin: 0;
    font-size: 0.78rem;
    color: #7B8397;
    font-variant-numeric: tabular-nums;
}

/* Escalation block — hidden until blazorReconnect.js reveals it after 3 minutes of no recovery. */
.reconnect-escalate {
    display: none;
    margin-top: 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #FFE3AA;
    background: rgba(240, 173, 78, 0.10);
    border: 1px solid rgba(240, 173, 78, 0.45);
}
.reconnect-escalate.visible {
    display: block;
    animation: reconnect-fade 0.3s ease;
}
.reconnect-escalate .bi { color: #F0AD4E; margin-right: 0.35rem; }
.reconnect-escalate strong { color: #FFCF7A; }

/* ═══════════════════════════════════════════════════════════════════════
   42NET VIVID — élénk gradiens-réteg (owner-döntés, 2026-08-07)
   A Maxton admin-sablon (codervent) színnyelve adaptálva: 310°-os telített
   gradiens-párok. A primer pár (#7928ca→#ff0080) a 42NET-magenta rokona,
   ezért a brand-gradiens ebből él. A réteg ADDITÍV: tokenek + utility-
   osztályok — meglévő komponenst nem ír felül, kivéve a .btn-accent
   feljebb definiált gradiensét, amit a vivid primer vált (kaszkád-sorrend).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --grd-primary: linear-gradient(310deg, #7928ca, #ff0080);
    --grd-success: linear-gradient(310deg, #17ad37, #98ec2d);
    --grd-danger: linear-gradient(310deg, #ee0979, #ff6a00);
    --grd-info: linear-gradient(310deg, #00c6fb, #005bea);
    --grd-warning: linear-gradient(310deg, #f7971e, #ffd200);
    --grd-violet: linear-gradient(310deg, #3494e6, #ec6ead);
    --grd-royal: linear-gradient(-20deg, #2b5876, #4e4376);
    --grd-branding: linear-gradient(180deg, #2af598, #009efd);
    --grd-deep-blue: linear-gradient(90deg, #6a11cb, #2575fc);
    --glow-primary: 0 4px 16px rgba(255, 0, 128, .38);
    --glow-success: 0 4px 16px rgba(23, 173, 55, .38);
    --glow-danger: 0 4px 16px rgba(238, 9, 121, .38);
    --glow-info: 0 4px 16px rgba(0, 91, 234, .38);
    --glow-warning: 0 4px 16px rgba(247, 151, 30, .38);
    --glow-violet: 0 4px 16px rgba(236, 110, 173, .38);
}

/* Gradiens hátterek (Maxton bg-grd-* megfelelők) */
.bg-grd-primary { background-image: var(--grd-primary) !important; color: #fff; }
.bg-grd-success { background-image: var(--grd-success) !important; color: #fff; }
.bg-grd-danger { background-image: var(--grd-danger) !important; color: #fff; }
.bg-grd-info { background-image: var(--grd-info) !important; color: #fff; }
.bg-grd-warning { background-image: var(--grd-warning) !important; color: #1d1400; }
.bg-grd-violet { background-image: var(--grd-violet) !important; color: #fff; }
.bg-grd-royal { background-image: var(--grd-royal) !important; color: #fff; }
.bg-grd-branding { background-image: var(--grd-branding) !important; color: #fff; }
.bg-grd-deep-blue { background-image: var(--grd-deep-blue) !important; color: #fff; }

/* Gradiens gombok — bármely meglévő gombosztály mellé tehető kiegészítő */
.btn-grd {
    border: none;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-grd:hover { transform: translateY(-1px); filter: saturate(1.15); }
.btn-grd-primary { background-image: var(--grd-primary); }
.btn-grd-primary:hover { box-shadow: var(--glow-primary); }
.btn-grd-success { background-image: var(--grd-success); }
.btn-grd-success:hover { box-shadow: var(--glow-success); }
.btn-grd-danger { background-image: var(--grd-danger); }
.btn-grd-danger:hover { box-shadow: var(--glow-danger); }
.btn-grd-info { background-image: var(--grd-info); }
.btn-grd-info:hover { box-shadow: var(--glow-info); }
.btn-grd-warning { background-image: var(--grd-warning); color: #1d1400 !important; }
.btn-grd-warning:hover { box-shadow: var(--glow-warning); }
.btn-grd-violet { background-image: var(--grd-violet); }
.btn-grd-violet:hover { box-shadow: var(--glow-violet); }
.btn-grd-royal { background-image: var(--grd-royal); }
.btn-grd-deep-blue { background-image: var(--grd-deep-blue); }

/* Gradiens ikon-csempe (widget-fejek, app-sávok, statisztika-kártyák) */
.grd-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background-image: var(--grd-primary);
    box-shadow: var(--glow-primary);
}

/* A fő akciógomb app-szerte a vivid primer gradienst kapja. */
.btn-accent {
    background-image: var(--grd-primary);
}
.btn-accent:hover {
    box-shadow: var(--glow-primary);
}
/* ===================================================================
   JOGOSULTSÁG-KONZOL — admin-console elrendezés, 42NET VIVID színnyelv:
   kontextus-sáv + bal alkalmazás-sáv + fejléc-panel + kapcsolós fa.
   Minden app saját gradiens-személyiséget visel (g-* → app.css --grd-*).
   =================================================================== */

.g-primary { --app-grd: var(--grd-primary); --app-glow: var(--glow-primary); }
.g-success { --app-grd: var(--grd-success); --app-glow: var(--glow-success); }
.g-danger { --app-grd: var(--grd-danger); --app-glow: var(--glow-danger); }
.g-info { --app-grd: var(--grd-info); --app-glow: var(--glow-info); }
.g-warning { --app-grd: var(--grd-warning); --app-glow: var(--glow-warning); }
.g-violet { --app-grd: var(--grd-violet); --app-glow: var(--glow-violet); }
.g-royal { --app-grd: var(--grd-royal); --app-glow: var(--glow-primary); }
.g-branding { --app-grd: var(--grd-branding); --app-glow: var(--glow-info); }
.g-deep-blue { --app-grd: var(--grd-deep-blue); --app-glow: var(--glow-info); }

/* --- Kontextus-sáv: MELYIK csoport jogait állítjuk --- */
.pc-context {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    margin-bottom: .65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 10px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%,
        var(--surface) 60%);
}

.pc-context-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-image: var(--grd-primary);
    color: #fff;
    font-size: .95rem;
    box-shadow: var(--glow-primary);
    flex-shrink: 0;
}

.pc-context-text {
    font-size: .92rem;
    color: var(--text-secondary);
}

.pc-context-text strong {
    color: var(--text);
    font-size: 1rem;
}

.pc-context-chip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 600;
}

/* --- Konzol-héj: bal sáv + tartalom --- */
.pc {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    height: 56vh;
    min-height: 380px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

/* --- Bal alkalmazás-sáv --- */
.pc-rail {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .55rem;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.pc-rail-title {
    padding: 0 .45rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
}

.pc-app {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .55rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.pc-app:hover {
    background: var(--surface-hover);
}

.pc-app.active {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
}

/* Minden app-ikon a SAJÁT gradiensét viseli — a bal sáv önmagában színes térkép. */
.pc-app-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-image: var(--app-grd, var(--grd-primary));
    border: none;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
    filter: saturate(.55) brightness(.9);
    transition: all .15s ease;
}

.pc-app:hover .pc-app-ico {
    filter: saturate(.9);
}

.pc-app.active .pc-app-ico {
    filter: none;
    box-shadow: var(--app-glow, var(--glow-primary));
}

.pc-app-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-app-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-app-sub {
    font-size: .7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Tartalom-oszlop --- */
.pc-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- App-fejléc: ikon-csempe + név + statisztika --- */
.pc-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-alt), var(--surface));
}

/* Az app gradiens-aláhúzása — a fejléc tetején futó színcsík. */
.pc-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background-image: var(--app-grd, var(--grd-primary));
}

.pc-head-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background-image: var(--app-grd, var(--grd-primary));
    color: #fff;
    font-size: 1.35rem;
    box-shadow: var(--app-glow, var(--glow-primary));
    flex-shrink: 0;
}

.pc-head-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-head-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
}

.pc-head-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

.pc-stats {
    margin-left: auto;
    display: flex;
}

.pc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 .95rem;
    border-left: 1px solid var(--border);
}

.pc-stat:first-child {
    border-left: none;
}

.pc-stat b {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    background-image: var(--app-grd, var(--grd-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pc-stat span {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

/* --- Futtatási sáv: szegmentált 3-állású kapcsoló --- */
.pc-launch {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    font-size: .84rem;
}

.pc-launch-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-secondary);
}

.pc-launch-label i {
    color: var(--accent);
}

.pc-launch-label strong {
    color: var(--text);
}

.pc-seg {
    margin-left: auto;
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.pc-seg button {
    padding: .28rem .8rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}

.pc-seg button.on {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.pc-seg button.on.allow {
    background-image: var(--grd-success);
    color: #fff;
    box-shadow: var(--glow-success);
}

.pc-seg button.on.deny {
    background-image: var(--grd-danger);
    color: #fff;
    box-shadow: var(--glow-danger);
}

/* --- Eszközsor --- */
.pc-toolbar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-bottom: 1px solid var(--border);
}

.pc-search {
    position: relative;
    width: 260px;
    max-width: 45%;
}

.pc-search i {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .82rem;
    pointer-events: none;
}

.pc-search input {
    width: 100%;
    padding: .4rem .6rem .4rem 1.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: .84rem;
}

.pc-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.pc-tool {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 32px;
    padding: 0 .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}

.pc-tool:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pc-toolbar-spacer {
    flex: 1;
}

/* A tömeges gombok gradiens-gombként (app.css .btn-grd) — itt csak a méret sűrűbb. */
.pc-bulk {
    height: 32px;
    padding: 0 .8rem !important;
    font-size: .78rem !important;
}

/* --- Rács: fejléc és sorok KÖZÖS oszloprenden --- */
.pc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px 96px 116px 44px;
    align-items: center;
    min-height: 36px;
}

.pc-grid-head {
    border-bottom: 2px solid var(--border);
    background: var(--surface-2);
    min-height: 34px;
}

.pc-grid-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
    cursor: default;
}

.pc-grid-head span i {
    font-size: .85rem;
    color: var(--accent);
}

.pc-grid-head span:first-child {
    justify-content: flex-start;
    padding-left: .85rem;
}

/* --- A fa --- */
.pc-tree {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pc-tree .pc-row {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.pc-tree .pc-row.leaf:nth-child(even) {
    background: var(--row-odd);
}

.pc-tree .pc-row.branch {
    background: color-mix(in srgb, var(--surface-alt) 85%, transparent);
}

.pc-tree .pc-row:hover {
    background: var(--row-selected);
}

.pc-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .15rem .5rem .15rem .55rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Fa-vezetővonalak: minden mélységi szint egy függőleges vonal. */
.pc-guide {
    align-self: stretch;
    width: 15px;
    border-left: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    margin-left: 9px;
    flex-shrink: 0;
}

.pc-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.pc-chev:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.pc-title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .86rem;
    color: var(--text);
}

.branch .pc-title {
    font-weight: 650;
}

.pc-count {
    padding: 0 .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.pc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 55%, transparent);
    margin-left: .5rem;
    flex-shrink: 0;
}

.pc-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

/* --- Kapcsoló (checkbox helyett — konzol-kánon) --- */
.pc-sw {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    cursor: pointer;
}

.pc-sw input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pc-sw span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 28%, var(--surface-2));
    border: 1px solid var(--border);
    transition: all .15s ease;
}

.pc-sw span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .15s ease;
}

.pc-sw input:checked + span {
    background-image: var(--app-grd, var(--grd-primary));
    border-color: transparent;
    box-shadow: var(--app-glow, var(--glow-primary));
}

.pc-sw input:checked + span::after {
    transform: translateX(14px);
}

.pc-sw input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Állapot-jelvény --- */
.pc-pill {
    padding: .14rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.pc-pill.s0 {
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
}

.pc-pill.s1 {
    background-image: var(--grd-success);
    color: #fff;
}

.pc-pill.s2 {
    background-image: var(--grd-warning);
    color: #1d1400;
}

.pc-pill.s3 {
    background-image: var(--grd-danger);
    color: #fff;
}

/* --- Ág-szintű „lefelé alkalmaz" --- */
.pc-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .95rem;
}

.pc-apply:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

/* --- Lábjegyzet --- */
.pc-foot {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    font-size: .74rem;
    color: var(--text-muted);
}

.pc-foot i {
    color: var(--info);
}

/* A user-felülbírálás konzol rácsa: nincs „lefelé alkalmaz" oszlop — 5 oszlopos változat. */
.pc-row.pc-tri-grid {
    grid-template-columns: minmax(0, 1fr) 96px 96px 96px 116px;
}

/* --- Háromállású felülbírálás-cella (user-szintű jogok: öröklés / engedve / tiltva) --- */
.pc-tri {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.pc-tri button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: .68rem;
    cursor: pointer;
    transition: all .12s ease;
}

.pc-tri button:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.pc-tri button.on-inherit {
    background: var(--surface);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.pc-tri button.on-grant {
    background-image: var(--grd-success);
    color: #fff;
    box-shadow: var(--glow-success);
}

.pc-tri button.on-deny {
    background-image: var(--grd-danger);
    color: #fff;
    box-shadow: var(--glow-danger);
}

/* Egyéni-jog jelvény (van-e a soron felülbírálás) */
.pc-pill.s-custom {
    background-image: var(--grd-violet);
    color: #fff;
}