/* === Belépő-oldalak (AuthLayout) === */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;   /* mobil: a 100vh az URL-sávot is beleszámolja (#1839/H) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eclipse-bg, #fafbfc);
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--eclipse-bg-elevated, #fff);
    border: 1px solid var(--eclipse-line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(17, 24, 39, 0.08);
    padding: 32px 28px;
    font-family: var(--sans, Inter, system-ui, sans-serif);
}

.auth-card__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
.auth-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--eclipse-corona, #d4a574);
    box-shadow: 0 0 12px var(--eclipse-corona, #d4a574);
}
.auth-card__name {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--eclipse-ink, #111827);
}

.auth-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -.015em;
    margin: 0 0 6px;
    color: var(--eclipse-ink, #0e131d);
}
.auth-sub {
    font-size: 13px;
    color: var(--eclipse-ink-subtle, #6b7280);
    margin: 0 0 20px;
}

.auth-field {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--eclipse-ink-muted, #4b5563);
}

.auth-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--eclipse-ink, #111827);
    background: #fff;
    border: 1px solid var(--eclipse-line, #e5e7eb);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus {
    outline: none;
    border-color: var(--eclipse-corona, #d4a574);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18);
}
.auth-input:disabled {
    background: #f3f4f6;
    color: var(--eclipse-ink-muted, #6b7280);
    cursor: default;
}
.auth-input--code {
    letter-spacing: 0.4em;
    text-align: center;
    font-family: var(--mono, "JetBrains Mono", monospace);
    font-size: 20px;
}

.auth-btn {
    width: 100%;
    height: 42px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--eclipse-corona, #d4a574);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .15s;
}
.auth-btn:hover {
    background: var(--eclipse-corona-deep, #a67c48);
}
.auth-btn svg { width: 16px; height: 16px; }

/* Belépő-flow (login / 2FA / reset) — sötét „ink" pirula a referencia szerint.
   A Fiók-oldal corona-gombját nem érinti (az nem .auth-formbox alatt van). */
.auth-formbox .auth-btn { height: 46px; background: var(--eclipse-ink, #111827); }
.auth-formbox .auth-btn:hover { background: #000; }

/* Beküldés alatt: letiltott + spinner (a backend hideg-indulásakor lassú első POST jelzése) */
.auth-btn:disabled {
    cursor: default;
    opacity: .72;
}
.auth-btn:disabled:hover {
    background: var(--eclipse-corona, #d4a574);
}
.auth-btn.is-loading {
    position: relative;
    color: transparent;
}
.auth-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-btn-spin .6s linear infinite;
}
@keyframes auth-btn-spin {
    to { transform: rotate(360deg); }
}

.auth-error {
    background: #fef2f2;
    color: var(--eclipse-danger, #dc2626);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.auth-info {
    background: var(--corona-soft, rgba(200,147,102,.12));
    color: var(--corona-deep, #8d5d33);
    border: 1px solid rgba(200,147,102,.34);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.auth-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--eclipse-signal, #3b82f6);
    text-decoration: none;
}
.auth-link:hover {
    text-decoration: underline;
}

.auth-hint {
    font-size: 12px;
    color: var(--eclipse-ink-faint, #9ca3af);
}

.auth-btn--link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 42px;
    padding: 0 16px;
}

.auth-field .validation-message {
    color: var(--eclipse-danger, #dc2626);
    font-size: 12px;
}

/* === Topbar belépett-user szekció (MainLayout) === */
.topbar__user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar__user-email {
    font-size: 13px;
    color: #cbd5e1;
    text-decoration: none;
    transition: color .15s;
}
a.topbar__user-email:hover {
    color: #fff;
    text-decoration: underline;
}

/* === Fiók oldal (MainLayout content) === */
.fiok-wrap {
    max-width: 420px;
    /* A topbar-layout .content-je csak padding-top-ot ad — vízszintes levegő kell,
       különben a tartalom a bal képernyőszélhez tapad. */
    margin: 0 1.5rem;
    font-family: var(--sans, Inter, system-ui, sans-serif);
}
.fiok-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--eclipse-ink, #111827);
    margin: 24px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--eclipse-line, #e5e7eb);
}
.fiok-ok {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}
.topbar__logout {
    font-size: 13px;
    font-weight: 500;
    color: #e5e7eb;
    background: transparent;
    border: 1px solid rgba(229, 231, 235, 0.3);
    border-radius: 9999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.topbar__logout:hover {
    background: rgba(229, 231, 235, 0.12);
    border-color: rgba(229, 231, 235, 0.55);
}

/* === Dealer-felhasználó kezelő (MainLayout content) === */
.dfa-wrap {
    box-sizing: border-box;
    /* Super-wide monitoron ne nyúljon szét; középre igazítva (margin: auto). */
    max-width: 1400px;
    margin: 0 auto;
    /* Vízszintes levegő keskeny képernyőn — a topbar-layout .content-je csak padding-top-ot ad. */
    padding: 0 1.5rem;
    font-family: var(--sans, Inter, system-ui, sans-serif);
}
.dfa-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
    color: var(--eclipse-ink, #0e131d);
}
.dfa-muted {
    font-size: 13px;
    color: var(--eclipse-ink-subtle, #6b7280);
}
.dfa-empty {
    background: var(--eclipse-bg-elevated, #fff);
    border: 1px solid var(--eclipse-line, #e5e7eb);
    border-radius: 10px;
    padding: 18px 16px;
    font-size: 14px;
    color: var(--eclipse-ink-muted, #4b5563);
    max-width: 560px;
}
.dfa-toolbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dfa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.dfa-field > label {
    font-size: 13px;
    font-weight: 500;
    color: var(--eclipse-ink-muted, #4b5563);
}
.dfa-ok {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}
.dfa-grid {
    margin-bottom: 8px;
}
.dfa-recordinfo {
    font-size: 12px;
    color: var(--eclipse-ink-subtle, #6b7280);
    margin-bottom: 16px;
}
.dfa-recordinfo--szurt {
    color: crimson;
    font-weight: 600;
}
.dfa-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dfa-editor-area {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: stretch;   /* editor és előzmény-panel egyforma magas */
}
.dfa-editor {
    flex: 1.7 1 480px;      /* a teret kitölti, a panellel együtt = grid szélessége */
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
    background: var(--eclipse-bg-elevated, #fff);
    border: 1px solid var(--eclipse-line, #e5e7eb);
    border-radius: 12px;
    padding: 22px 28px;
}
.dfa-editor-col {
    flex: 1 1 300px;
    min-width: 300px;
}
.dfa-loginlog {
    flex: 1 1 320px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* a magasságot az editor adja, a tartalom belül scrollozik */
    background: var(--eclipse-bg-elevated, #fff);
    border: 1px solid var(--eclipse-line, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
}
.dfa-loginlog-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--eclipse-ink, #111827);
    margin: 0 0 12px;
}
.dfa-loginlog-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.dfa-loginlog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dfa-loginlog-table th {
    text-align: left;
    font-weight: 600;
    color: var(--eclipse-ink-muted, #4b5563);
    border-bottom: 1px solid var(--eclipse-line, #e5e7eb);
    padding: 5px 8px;
}
.dfa-loginlog-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--eclipse-bg, #f3f4f6);
    color: var(--eclipse-ink, #111827);
}
.dfa-login-ok { color: #15803d; }
.dfa-login-fail { color: var(--eclipse-danger, #dc2626); }
.dfa-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dfa-form-row > label {
    flex: 0 0 110px;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    color: var(--eclipse-ink-muted, #4b5563);
}
.dfa-check-label {
    font-size: 13px;
    color: var(--eclipse-ink-muted, #4b5563);
}
.dfa-readonly {
    font-size: 13px;
    color: var(--eclipse-ink-subtle, #6b7280);
}
.dfa-buttons {
    /* Teljes szélesség (= grid), így a Mentés/Mégse a grid jobb széléhez igazodik. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.dfa-buttons-left,
.dfa-buttons-right {
    display: flex;
    gap: 10px;
}
/* Egységes gombméret — ne a szöveghez igazodjon. A szélességet a leghosszabb felirat
   ("Meghívó újraküldése", #1908) szabja meg, hogy egyik gombon se vágódjon el a szöveg. */
.dfa-buttons .rz-button {
    width: 190px;
    justify-content: center;
}

/* ============================================================
   Felhasználók képernyő — design-direkció illesztés
   (gomb-szín, sor-kijelölés, grid státusz/ikonok)
   ============================================================ */

/* Másodlagos gomb: fehér + keret (NEM kék) — a kék csak adat/info */
.dfa-buttons .rz-button.rz-secondary {
    background: var(--eclipse-bg-elevated, #fff) !important;
    color: var(--eclipse-ink, #0e131d) !important;
    border: 1px solid var(--eclipse-line-bright, #d6dae3) !important;
    box-shadow: none !important;
}
.dfa-buttons .rz-button.rz-secondary:hover {
    background: var(--eclipse-bg-surface, #eef1f5) !important;
    border-color: #c4cad6 !important;
}

/* Kijelölt sor: corona-arany + bal sáv (NEM lila) */
.dfa-grid .rz-data-row.rz-state-highlight,
.dfa-grid .rz-data-row.rz-state-highlight:hover,
.dfa-grid .rz-data-row.rz-selected,
.dfa-grid tr.rz-selected,
.dfa-grid tr.rz-state-highlight > td,
.dfa-grid tr.rz-selected > td {
    background: rgba(200, 147, 102, 0.18) !important;
    color: var(--eclipse-ink, #0e131d) !important;
}
.dfa-grid .rz-data-row.rz-state-highlight > td:first-child,
.dfa-grid tr.rz-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--eclipse-corona, #c89366);
}
/* Sor-kattintás navigál a szerkesztőbe → kéz-kurzor a sorokon */
.dfa-grid .rz-data-row { cursor: pointer; }
.dfa-grid .rz-data-row:hover > td {
    background: rgba(200, 147, 102, 0.07) !important;
}

/* Aktív/inaktív státusz — dot-pill */
.dfa-stat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--eclipse-ink-muted, #4b5563); }
.dfa-stat .d { width: 7px; height: 7px; border-radius: 50%; background: var(--eclipse-ink-faint, #9aa3b2); }
.dfa-stat.on { color: #15803d; }
.dfa-stat.on .d { background: #15803d; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.10); }

/* Zöld pipa a 2FA / email oszlopban */
.dfa-chk { color: #15803d; display: inline-flex; align-items: center; }
.dfa-chk svg { width: 15px; height: 15px; }

/* ============================================================
   Felhasználók — design-direkció illesztés, 2. kör
   (page-head, grid lekerekítés/fejléc/cellák, rekordinfo,
    szerkesztő-cím, login-tábla tipográfia, pill-gombok)
   ============================================================ */

/* Felső levegő + page-head */
.dfa-wrap { padding-top: 32px; padding-bottom: 64px; }
.dfa-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--eclipse-line, #e6e8ee); padding-bottom: 18px; margin-bottom: 22px; }
.dfa-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--eclipse-corona-deep, #8d5d33); }
.dfa-pagehead .dfa-title { margin: 6px 0 0; }
.dfa-pagemeta { display: flex; flex-direction: column; gap: 4px; text-align: right; padding-bottom: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--eclipse-ink-faint, #9aa3b2); }
/* Ajánlat-törzs fejléc jobb oldal: meta + "Új ajánlat" gomb egy sorban */
.dfa-headright { display: flex; align-items: flex-end; gap: 22px; }
.dfa-newbtn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px 0 17px; background: var(--eclipse-dark, #0a0e1a); color: #fff; border-radius: 9px; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(10,14,26,.18); transition: transform .15s ease, box-shadow .15s ease; }
.dfa-newbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10,14,26,.28); color: #fff; }
.dfa-newbtn .dfa-newbtn-ico { color: var(--corona, #c89366); flex: 0 0 auto; }

/* Keresés címke */
.dfa-field > label { font-size: 12.5px; font-weight: 500; color: var(--eclipse-ink-muted, #4b5563); }

/* DataGrid — lekerekítés + árnyék */
.dfa-grid { border: 1px solid var(--eclipse-line, #e6e8ee); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 rgba(17,24,39,.02), 0 8px 28px rgba(17,24,39,.04); }
.dfa-grid .rz-datatable { border: none !important; }
/* Fejléc: surface háttér, kiskapitális, halvány szöveg */
.dfa-grid .rz-datatable-thead th,
.dfa-grid thead th { background: var(--eclipse-bg-surface, #eef1f5) !important; border-bottom: 1px solid var(--eclipse-line, #e6e8ee) !important; }
.dfa-grid .rz-column-title-content,
.dfa-grid .rz-column-title { text-transform: uppercase !important; letter-spacing: .10em !important; font-size: 11px !important; font-weight: 500 !important; color: var(--eclipse-ink-muted, #4b5563) !important; }
/* Cellák: Inter 13px, egységes */
.dfa-grid .rz-data-row td,
.dfa-grid .rz-cell-data { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: var(--eclipse-ink, #0e131d); }
/* Státusz-badge-ek azonos méretűek a gridben (a globális .pill érintetlen) */
.dfa-grid .pill { min-width: 108px; justify-content: center; }
/* Kijelölt sor szövege: ink (ne kék/lila) */
.dfa-grid tr.rz-selected .rz-cell-data,
.dfa-grid tr.rz-state-highlight .rz-cell-data { color: var(--eclipse-ink, #0e131d) !important; }
/* Dátum oszlop mono + tabular */
.dfa-date { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--eclipse-ink-muted, #4b5563); }

/* Rekordok száma */
.dfa-recordinfo { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--eclipse-ink-subtle, #6b7280); margin: 12px 2px 24px; }
.dfa-recordinfo--szurt { color: var(--eclipse-corona-deep, #8d5d33); font-weight: 600; }

/* Szerkesztő panel cím + szellősebb sorok */
.dfa-editor { gap: 16px 80px; }
.dfa-editor-title { flex: 0 0 100%; margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--eclipse-ink, #0e131d); }
.dfa-form-row { margin-bottom: 14px; }

/* Belépési előzmények — tipográfia a mintához */
.dfa-loginlog-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--eclipse-ink, #0e131d); }
.dfa-loginlog-table th { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--eclipse-ink-subtle, #6b7280); }
.dfa-loginlog-table td:first-child { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--eclipse-ink-muted, #4b5563); }
.dfa-loginlog-table td:last-child { font-family: 'JetBrains Mono', monospace; color: var(--eclipse-ink-faint, #9aa3b2); }

/* Gombok: pill forma */
.dfa-buttons .rz-button { border-radius: 9999px !important; }

/* ============================================================
   Felhasználók — finomítás, 3. kör
   ============================================================ */

/* Szerkesztő: a mezők kitöltik a sort, hogy az email kiférjen */
.dfa-form-row > label { flex: 0 0 96px; }
.dfa-form-row .rz-textbox,
.dfa-form-row .rz-dropdown { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
.dfa-form-row .rz-textbox input { width: 100% !important; }
/* Egységes sormagasság → a Létrehozva a mintához igazodik (nem csúszik az Állapot mellé) */
.dfa-form-row { min-height: 34px; }

/* Kereső mező: magasság + placeholder szín a mintához */
.dfa-search-row .rz-textbox { height: 34px !important; }
.dfa-search-row .rz-textbox input { height: 34px !important; line-height: 34px !important; }
.dfa-search-row .rz-textbox input::placeholder { color: var(--eclipse-ink-faint, #9aa3b2) !important; opacity: 1; }

/* Rekordok száma: a mintával egyező méret */
.dfa-recordinfo { font-size: 11px !important; }

/* Belépési előzmények: eredmény NEM félkövér (mintához igazítva) */
.dfa-login-ok, .dfa-login-fail { font-weight: 400 !important; }

/* Grid fejléc: kisebb tracking, hogy az "Email visszaig." és "Létrehozva" kiférjen */
.dfa-grid .rz-column-title-content,
.dfa-grid .rz-column-title { letter-spacing: .04em !important; }

/* Panel-fejlécek (a kérdésre): finom hairline a cím alatt */
.dfa-editor-title {
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--eclipse-line, #e6e8ee);
}
.dfa-loginlog-title {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--eclipse-line, #e6e8ee);
}

/* ============================================================
   Email kiférjen a szerkesztőben: bal blokk szélesebb,
   kisebb címke + belső oszlopköz, zsugorodás engedélyezve
   ============================================================ */
.dfa-editor { gap: 14px 48px !important; }
.dfa-editor-col { flex: 1 1 0 !important; min-width: 0 !important; }
.dfa-editor-col:first-of-type { flex-grow: 1.45 !important; }
.dfa-form-row > label { flex: 0 0 84px !important; }
.dfa-form-row .rz-textbox,
.dfa-form-row .rz-dropdown { min-width: 0 !important; }

/* ============================================================
   Fejléc-szűrősor (FilterMode.SimpleWithMenu)
   - az inline operátor-gomb (*a*) elrejtve: tiszta input,
     az operátorok a fejléc tölcsér-menüjében (Advanced popup)
   - input + dropdown egységes 28px, kerekített
   ============================================================ */
.dfa-grid .rz-cell-filter { padding: 0 8px 9px !important; background: var(--eclipse-bg-surface, #eef1f5) !important; }
/* a .rz-cell-filter-label a KONTÉNER (operátor + input) — flex, hogy ne csússzanak egymásra */
.dfa-grid .rz-cell-filter-label { display: flex !important; align-items: center; gap: 4px; width: 100%; }
/* inline operátor-gomb (*a*/contains) elrejtése a letisztult gyorsszűrőhöz */
.dfa-grid .rz-cell-filter-label > .rz-button:first-child,
.dfa-grid .rz-cell-filter-label > button:first-child,
.dfa-grid .rz-cell-filter-operator { display: none !important; }
/* input / dropdown / dátumválasztó */
.dfa-grid .rz-cell-filter .rz-textbox,
.dfa-grid .rz-cell-filter .rz-dropdown,
.dfa-grid .rz-cell-filter .rz-datepicker {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
    height: 28px !important; min-height: 28px !important;
    background: var(--eclipse-bg-elevated, #fff) !important;
    border: 1px solid var(--eclipse-line-bright, #d6dae3) !important;
    border-radius: 6px !important; font-size: 11.5px !important;
}
.dfa-grid .rz-cell-filter .rz-textbox:focus,
.dfa-grid .rz-cell-filter .rz-dropdown:focus-within {
    border-color: var(--eclipse-corona, #c89366) !important;
    box-shadow: 0 0 0 3px var(--corona-soft, rgba(200,147,102,.14)) !important;
}
.dfa-grid .rz-cell-filter input::placeholder { color: var(--eclipse-ink-faint, #9aa3b2) !important; opacity: 1; }
/* fejléc tölcsér-menü ikon (részletes/Advanced szűrő) */
.dfa-grid .rz-grid-filter-icon { color: var(--eclipse-ink-faint, #9aa3b2); cursor: pointer; }
.dfa-grid .rz-grid-filter-icon:hover { color: var(--eclipse-corona-deep, #8d5d33); }

/* Kapcsoló-chipek (grid képességei) — a grid fölött, jobbra */
.dfa-capabilities { display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; margin:0 0 12px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--eclipse-ink-subtle,#6b7280); }
.dfa-cap { display:inline-flex; align-items:center; gap:6px; background:var(--eclipse-bg-surface,#eef1f5); border:1px solid var(--eclipse-line,#e6e8ee); border-radius:999px; padding:5px 11px; }
.dfa-cap .d { width:5px; height:5px; border-radius:50%; background:var(--eclipse-corona,#c89366); }

/* Chip-gombok: gomb-reset + aktív/inaktív állapot (kattintható kapcsolók) */
.dfa-cap { font: inherit; cursor: pointer; transition: opacity .12s, border-color .12s; }
.dfa-cap:hover { border-color: var(--eclipse-line-strong, #c4cad6); }
.dfa-cap.off { opacity: .5; }
.dfa-cap.off .d { background: var(--eclipse-ink-faint, #9aa3b2); }

/* ============================================================
   Csoportosító panel — HELYES Radzen 10.3.1 osztályok
   .rz-group-header (sáv) / .rz-group-header-drop (szöveg)
   ============================================================ */
.dfa-grid .rz-group-header {
    background: repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(200,147,102,.035) 9px, rgba(200,147,102,.035) 18px) !important;
    border: 1px dashed var(--eclipse-line-strong, #c4cad6) !important;
    border-radius: 8px !important;
    padding: 11px 16px !important;
    margin: 0 0 12px !important;
}
.dfa-grid .rz-group-header-drop,
.dfa-grid .rz-group-header-drop * {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--eclipse-ink-subtle, #6b7280) !important;
}
/* behúzott csoport-oszlop chip corona stílusban */
.dfa-grid .rz-group-header .rz-button {
    background: var(--corona-soft, rgba(200,147,102,.14)) !important;
    border: 1px solid rgba(200,147,102,.30) !important;
    color: var(--eclipse-corona-deep, #8d5d33) !important;
    border-radius: 999px !important;
}

/* ============================================================
   Ajánlat-törzs: szám- és dátum-oszlopok mono + tabular.
   NEM a .rz-text-align-right osztály alapján célozzuk: a Radzen 10.3.1
   azt a fejléc-th-ra teszi (a body-td-n nem megbízható), .rz-data-cell
   osztály pedig egyáltalán nincs. Helyette a felhasználók-grid bevált
   mintáját követjük (vö. .dfa-date): az érintett cellák Template-jébe
   <span class="mono"> kerül, és ez a szabály fogja meg. A közvetlen
   illeszkedés a span-re felülírja a szülő .rz-cell-data örökölt
   Inter !important-jét is, ezért itt nincs szükség !important-ra.
   A fejléc (th) érintetlen marad — ott nincs .mono span.
   ============================================================ */
.dfa-grid .mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Kezdőlap — lead (megosztott utility)
   ============================================================ */
.dfa-lead { font-size: 16px; color: var(--eclipse-ink-muted, #4b5563); max-width: 620px; margin: 18px 0 40px; text-wrap: pretty; }

/* ============================================================
   Kezdőlap — B · Munkaasztal
   ============================================================ */

/* a kezdőlapon a .dfa-wrap felső paddingjét nullázzuk, hogy a sötét sáv a topbarhoz simuljon */
.dfa-wrap.home { padding-top: 0; }

/* --- sötét sáv (full-bleed) ---
   A sáv a .dfa-wrap oldalsó paddingjából tör ki negatív margóval. NEM 100vw:
   az a görgetősávot is beleszámolja, ezért asztali böngészőben a sáv a
   görgetősáv szélességével túllógott, és vízszintes oldalgörgetést adott
   (#1839/H). Csere-ár: 1400px-nél szélesebb monitoron a sáv a wrap széléig
   ér, nem a képernyőéig. A margó a BP-M sávban a wrap paddingjával együtt vált. */
.home-band {
    position: relative;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    background: var(--eclipse-dark, #0a0e1a);
    border-bottom: 1px solid #161c2b;
    overflow: hidden;
}
.home-band::before {
    content: "";
    position: absolute; left: 46%; top: -220px;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(212,165,116,.22), rgba(212,165,116,.08) 44%, transparent 66%);
    pointer-events: none;
}
.home-band__inner {
    max-width: 1180px; margin: 0 auto; padding: 22px 1.5rem;
    position: relative; display: flex; align-items: center;
    justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.home-band__eyebrow {
    font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .2em; color: var(--corona, #c89366);
}
.home-band__title {
    font-family: var(--serif, 'Instrument Serif', Georgia, serif);
    font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -.01em;
    color: #fff; margin: 4px 0 0;
}
.home-band__title em { font-style: italic; color: var(--corona-bright, #e8c48e); }
.home-band__sub { font-size: 13px; color: #9aa3b2; }
.home-band__sub b { color: #e5e7eb; font-weight: 600; }

/* --- dealer-identitás a fejlécben --- */
.home-dealer { display:inline-flex; align-items:center; gap:10px; margin-top:12px; padding:7px 14px 7px 10px;
    border:1px solid rgba(200,147,102,.34); background:rgba(200,147,102,.10); border-radius:999px; }
.home-dealer__ic { width:26px; height:26px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--corona,#c89366), var(--corona-deep,#8d5d33)); color:#fff; }
.home-dealer__ic svg { width:15px; height:15px; }
.home-dealer__txt { display:flex; flex-direction:column; line-height:1.1; }
.home-dealer__lbl { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--corona,#c89366); }
.home-dealer__nev { font-size:13.5px; font-weight:600; color:#fff; letter-spacing:.005em; }
.home-dealer__role { margin-left:4px; padding:2px 8px; border-radius:999px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
    text-transform:uppercase; background:rgba(255,255,255,.08); color:#cbd5e1; border:1px solid rgba(255,255,255,.14); }

.home-pad { max-width: 1180px; margin: 24px auto 0; padding: 0 1.5rem; }

/* --- kétoszlopos rács --- */
.home-grid {
    max-width: 1180px; margin: 24px auto 70px; padding: 0 1.5rem;
    display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start;
}
.home-rail { display: flex; flex-direction: column; gap: 16px; }
.home-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.home-card { background: var(--eclipse-bg-elevated, #fff); border: 1px solid var(--eclipse-line, #e6e8ee); border-radius: 14px; }
.home-card__head {
    font-size: 14px; font-weight: 600; letter-spacing: -.005em;
    padding: 15px 18px; border-bottom: 1px solid var(--eclipse-line, #e6e8ee);
    display: flex; align-items: baseline; justify-content: space-between;
    color: var(--eclipse-ink, #0e131d);
}
.home-card__head a { font-family: var(--mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--eclipse-corona-deep, #8d5d33); text-decoration: none; }
.home-card__head a:hover { text-decoration: underline; }
.home-card__body { padding: 16px 18px; }
.home-card__hint { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint,#9aa3b2); }

/* Havi aktivitás — oszlopdiagram */
.trend { display:flex; align-items:flex-end; gap:14px; height:160px; padding-top:8px; }
.trend__col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.trend__barwrap { width:100%; max-width:46px; display:flex; align-items:flex-end; justify-content:center; flex:1; }
.trend__bar { width:100%; max-width:46px; min-height:4px; border-radius:7px 7px 3px 3px;
    background:linear-gradient(180deg, var(--corona,#c89366), var(--corona-deep,#8d5d33)); }
.trend__bar--most { background:linear-gradient(180deg, var(--corona-bright,#e8c48e), var(--corona,#c89366)); box-shadow:0 0 0 1px rgba(200,147,102,.4); }
.trend__val { font-family:var(--mono); font-size:12px; color:var(--ink,#0e131d); font-variant-numeric:tabular-nums; }
.trend__lbl { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-subtle,#6b7280); }
.trend__foot { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line,#e6e8ee); }
.trend__foot span { font-size:12.5px; color:var(--ink-subtle,#6b7280); }
.trend__foot b { font-family:var(--mono); color:var(--ink,#0e131d); }
.trend__up { color:var(--success,#15803d) !important; font-weight:500; }
.trend__down { color:var(--danger,#b91c1c) !important; font-weight:500; }

/* Top ajánlatadók — ranglista */
.lead { display:flex; flex-direction:column; }
.lead__row { display:grid; grid-template-columns: 24px 34px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line,#e6e8ee); }
.lead__row:first-child { border-top:none; }
.lead__rank { font-family:var(--mono); font-size:13px; color:var(--ink-faint,#9aa3b2); text-align:center; }
.lead__row:first-child .lead__rank { color:var(--corona-deep,#8d5d33); font-weight:600; }
.lead__av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:600;
    background:var(--corona-soft, rgba(200,147,102,.14)); color:var(--corona-deep,#8d5d33); }
.lead__meta { min-width:0; }
.lead__nev { font-size:13.5px; font-weight:600; color:var(--ink,#0e131d); }
.lead__bar { height:6px; border-radius:3px; margin-top:5px; background:var(--bg-surface,#eef1f5); overflow:hidden; }
.lead__bar i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--corona,#c89366), var(--corona-deep,#8d5d33)); }
.lead__db { font-family:var(--mono); font-size:13px; color:var(--ink,#0e131d); font-variant-numeric:tabular-nums; text-align:right; }
.lead__db small { display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-subtle,#6b7280); }

/* --- gombok --- */
.home-actions { display: flex; flex-direction: column; gap: 10px; }
.hbtn {
    display: flex; align-items: center; gap: 11px; border-radius: 12px;
    padding: 14px 16px; font-size: 14px; font-weight: 500; text-decoration: none;
    border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.hbtn small { display: block; font-size: 11px; font-weight: 400; margin-top: 2px; letter-spacing: 0; }
.hbtn__ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hbtn__ic svg { width: 18px; height: 18px; }
.hbtn--primary { background: var(--eclipse-corona, #c89366); color: #11141b; font-weight: 600; }
.hbtn--primary:hover { background: var(--corona-bright, #e8c48e); transform: translateY(-1px); }
.hbtn--primary small { color: rgba(17,20,27,.62); }
.hbtn--primary .hbtn__ic { background: rgba(17,20,27,.12); color: #11141b; }
.hbtn--ghost { background: var(--eclipse-bg-elevated, #fff); color: var(--eclipse-ink, #0e131d); border-color: var(--eclipse-line-bright, #d6dae3); }
.hbtn--ghost:hover { border-color: var(--eclipse-corona, #c89366); color: var(--eclipse-corona-deep, #8d5d33); }
.hbtn--ghost .hbtn__ic { background: var(--corona-soft, rgba(200,147,102,.14)); color: var(--eclipse-corona-deep, #8d5d33); }

/* --- státusz-sáv --- */
.status-bar { display: flex; gap: 2px; height: 12px; border-radius: 5px; overflow: hidden; margin-bottom: 14px; }
.status-bar i { display: block; min-width: 3px;
    background: color-mix(in srgb, var(--seg) 25%, #fff);
    box-shadow: inset 0 0 0 1.5px var(--seg); }
.status-legend { display: flex; flex-direction: column; gap: 9px; }
.status-item { display: grid; grid-template-columns: 11px 1fr auto; gap: 9px; align-items: center; font-size: 13px; color: var(--eclipse-ink-muted, #4b5563); }
.status-item__sw { width: 11px; height: 11px; border-radius: 3px;
    background: color-mix(in srgb, var(--seg) 25%, #fff);
    box-shadow: inset 0 0 0 1.5px var(--seg); }
.status-item b { font-family: var(--mono, monospace); font-size: 12.5px; color: var(--eclipse-ink, #0e131d); font-variant-numeric: tabular-nums; }

/* --- admin --- */
.home-admins { padding-top: 6px; padding-bottom: 16px; }
.home-admin { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--eclipse-line, #e6e8ee); }
.home-admin:first-child { border-top: none; }
.home-admin__av { width: 34px; height: 34px; border-radius: 50%; background: var(--corona-soft, rgba(200,147,102,.14)); color: var(--eclipse-corona-deep, #8d5d33); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.home-admin__meta { min-width: 0; }
.home-admin__nev { display: block; font-size: 13.5px; font-weight: 600; color: var(--eclipse-ink, #0e131d); }
.home-admin__mail { font-size: 12px; color: var(--eclipse-corona-deep, #8d5d33); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.home-admin__mail:hover { text-decoration: underline; }

/* --- KPI --- */
.home-kpi { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--eclipse-bg-elevated, #fff); border: 1px solid var(--eclipse-line, #e6e8ee); border-radius: 14px; overflow: hidden; }
.home-kpi__cell { padding: 16px 18px; border-right: 1px solid var(--eclipse-line, #e6e8ee); }
.home-kpi__cell:last-child { border-right: none; }
.home-kpi__label { font-family: var(--mono, monospace); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--eclipse-ink-subtle, #6b7280); }
.home-kpi__value { font-family: var(--serif, 'Instrument Serif', Georgia, serif); font-size: 30px; line-height: 1; color: var(--eclipse-ink, #0e131d); margin-top: 8px; letter-spacing: -.01em; }
.home-kpi__value small { font-family: var(--mono, monospace); font-size: 11px; color: var(--eclipse-ink-subtle, #6b7280); margin-left: 4px; }

/* --- legutóbbi ajánlatok táblázat --- */
.recent__head { display: grid; grid-template-columns: 120px 1fr 140px 120px 70px; gap: 12px; padding: 11px 20px; background: var(--eclipse-bg-surface, #eef1f5); border-bottom: 1px solid var(--eclipse-line, #e6e8ee); font-family: var(--mono, monospace); font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--eclipse-ink-subtle, #6b7280); }
.recent__row { display: grid; grid-template-columns: 120px 1fr 140px 120px 70px; gap: 12px; padding: 13px 20px; align-items: center; border-bottom: 1px solid var(--eclipse-line, #e6e8ee); text-decoration: none; transition: background .12s; }
.recent__row:last-child { border-bottom: none; }
.recent__row:hover { background: rgba(200, 147, 102, 0.07); }
.recent__no { font-family: var(--mono, monospace); font-size: 12.5px; color: var(--eclipse-corona-deep, #8d5d33); font-weight: 500; }
.recent__ugyfel { font-size: 13.5px; color: var(--eclipse-ink, #0e131d); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent__sum { font-family: var(--mono, monospace); font-size: 12.5px; color: var(--eclipse-ink, #0e131d); font-variant-numeric: tabular-nums; text-align: right; }
.recent__datum { font-family: var(--mono, monospace); font-size: 11px; color: var(--eclipse-ink-faint, #9aa3b2); text-align: right; }

/* a meglévő .pill komponens (tokens.diff.css) adja a badge formáját + színét;
   a táblázat-cellában balra igazítjuk + egységes szélesség (mint a grid badge-ei): */
.recent__row .pill { justify-self: start; min-width: 108px; justify-content: center; }

/* --- reszponzív (töréspontok: tokens.diff.css „BREAKPOINTOK — SSOT”, #1839) --- */
/* BP-M — tablet álló és alatta: a rail a fő oszlop fölé kerül (volt: 980px) */
@media (max-width: 899px) {
    .home-grid { grid-template-columns: 1fr; }

    /* A .dfa-wrap BP-M-ben 1rem oldalpaddingra vált — a kezdőlap saját
       konténerei is, különben 16px-szel keskenyebb tartalommal dolgoznak. */
    .home-grid, .home-pad { padding-left: 1rem; padding-right: 1rem; }
    .home-band { margin-left: -1rem; margin-right: -1rem; }
    .home-band__inner { padding: 18px 1rem; }

    /* KPI 2×2: négy cellában a 30px-es serif érték és a hosszabb címkék tördelnek */
    .home-kpi { grid-template-columns: repeat(2, 1fr); }
    .home-kpi__cell:nth-child(2) { border-right: none; }
    .home-kpi__cell:nth-child(-n+2) { border-bottom: 1px solid var(--eclipse-line, #e6e8ee); }

    /* Legutóbbi ajánlatok: a dátum kimarad, hogy az ügyfélnév oszlopa ne fogyjon el
       (a fix oszlopok összege 600px körül ~54px-re nyomta) */
    .recent__head, .recent__row { grid-template-columns: 112px 1fr 128px auto; gap: 10px; padding-left: 16px; padding-right: 16px; }
    .recent__head span:nth-child(5), .recent__row .recent__datum { display: none; }
}

/* BP-S — telefon álló (volt: 620px) */
@media (max-width: 599px) {
    .home-band__title { font-size: 22px; }
    .home-band__inner { gap: 14px; }

    /* hosszú dealer-név ne feszítse a pirulát */
    .home-dealer { max-width: 100%; }
    .home-dealer__txt { min-width: 0; }
    .home-dealer__nev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .recent__head { display: none; }
    .recent__row { grid-template-columns: 1fr auto; }
    .recent__row .recent__sum, .recent__row .recent__datum { display: none; }

    /* hat oszlop 390px-en: a gap adja vissza a helyet a feliratoknak */
    .trend { gap: 8px; }
}

/* ============================================================
   Belépő-oldalak — split layout (márkapanel + űrlap)
   AuthLayout: .auth-split > .auth-brandside + .auth-formside
   ============================================================ */
.auth-split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; min-height: 100dvh; }

/* bal: márka + stock fotó */
.auth-brandside { position: relative; overflow: hidden; background: var(--eclipse-dark, #0a0e1a) url('/img/login-bg.jpg') center/cover no-repeat; }
.auth-brandside__scrim { position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(120% 80% at 80% 8%, rgba(212,165,116,.30), transparent 52%),
      linear-gradient(180deg, rgba(10,14,26,.42) 0%, rgba(10,14,26,.26) 30%, rgba(10,14,26,.58) 68%, rgba(10,14,26,.86) 100%); }
.auth-brandside__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; color: #fff; }
.auth-brandside__top { display: flex; align-items: center; gap: 12px; }
.auth-brandside__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--eclipse-corona, #d4a574); box-shadow: 0 0 14px var(--eclipse-corona, #d4a574); }
.auth-brandside__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; letter-spacing: .01em; }
.auth-brandside__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--eclipse-corona, #d4a574); margin-bottom: 14px; text-shadow: 0 1px 16px rgba(10,14,26,.9); }
.auth-brandside__head { font-family: 'Instrument Serif', Georgia, serif; font-size: 46px; line-height: 1.04; letter-spacing: -.015em; max-width: 13ch; margin: 0; font-weight: 400; text-shadow: 0 1px 24px rgba(10,14,26,.85); }
.auth-brandside__sub { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 42ch; text-shadow: 0 1px 18px rgba(10,14,26,.85); }
.auth-brandside__foot { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* jobb: űrlap */
.auth-formside { display: flex; align-items: center; justify-content: center; padding: 48px 28px; background: var(--eclipse-bg, #f7f8fa); }
.auth-formbox { width: 100%; max-width: 380px; }

/* BP-M — tablet álló és alatta: a márkapanel a űrlap fölé (volt: 880px) */
@media (max-width: 899px) {
    /* Egy oszlop, két sor. A sor-definíció kötelező: alapértelmezett auto sorok
       mellett a konténer min-height-ját a stretch szétosztaná a két sor között,
       és a márkapanel a min-height-je TÖBBSZÖRÖSÉRE nőne az űrlap rovására. */
    .auth-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-brandside { min-height: 210px; }
    .auth-brandside__inner { padding: 28px 24px; }
    .auth-brandside__head { font-size: 30px; }
    .auth-brandside__sub, .auth-brandside__foot { display: none; }
    .auth-formside { padding: 36px 22px; }
}

/* BP-S — telefon álló: a márkapanel csak fejléc-sávnyi, az űrlap kapja a helyet (#1839/H) */
@media (max-width: 599px) {
    .auth-brandside { min-height: 132px; }
    .auth-brandside__inner { padding: 18px; }
    .auth-brandside__eyebrow { margin-bottom: 8px; }
    .auth-brandside__head { font-size: 24px; max-width: none; }
    .auth-formside { padding: 26px 18px 40px; }
    .auth-title { font-size: 32px; }
}

/* ============================================================
   Ajánlat-törzs — 23. kör: oszlop-átrendezés, teljes szélesség,
   lábléc, kijelölés-kontraszt (rögzített cellákon is)
   ============================================================ */

/* 1) A grid töltse ki az oldalt (a 1400px-es wrap-cap feloldása ezen az oldalon) */
.dfa-wrap--wide { max-width: none; }
.dfa-wrap--wide .dfa-grid,
.dfa-wrap--wide .dfa-grid .rz-datatable { width: 100% !important; }
/* a belső táblák töltsék ki a kártyát; a slackot az utolsó (nem rögzített) oszlop nyeli el */
.dfa-wrap--wide .dfa-grid table { min-width: 100% !important; }

/* 1/b) A Radzen szűrő-operátor jelző ("*A*" = Tartalmazza, "A*" = kezdődik, "=" stb.) a
   design fontjához igazítva — a Radzen default megjelenése elütött. Két formában renderelődik
   (oszlopszélességtől függően): .rz-current-filter (a tölcsér mellett) és .rz-filter-button
   (az input fölé tűzve). !important kell, mert a Radzen-szabályok specifikusabbak. */
.dfa-wrap .rz-current-filter,
.dfa-wrap .rz-filter-button {
    font-family: var(--mono, 'JetBrains Mono', monospace) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    color: var(--ink-faint, #9aa3b2) !important;
}

/* Keskeny oszlopnál a "*A*" operátor-gomb az inputba van tűzve (abszolút) — a Radzen-default-nál
   kissé jobbra ült, balra húzzuk. Csak az inset-et állítjuk (a gomb többi default-ja marad). */
.dfa-wrap .rz-filter-button {
    inset-inline-start: -3px !important;
}

/* Ugyanez a szűrő-operátor SZIMBÓLUM a felugró operátor-menüben (.rz-filter-menu-symbol).
   A menü body-szintű overlay-ben renderelődik (a .dfa-wrap-on KÍVÜL), ezért globálisan célozzuk.
   + kis térköz a felirat elé (eddig összeért: "*A*Tartalmazza"). */
.rz-filter-menu-symbol {
    font-family: var(--mono, 'JetBrains Mono', monospace) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    color: var(--ink-faint, #9aa3b2) !important;
    margin-inline-end: 10px;
}

/* Az operátor-menü FELIRATAI (Tartalmazza, Egyenlő stb. — a .rz-filter-menu-item gombon belüli
   osztály nélküli span) a design sima (sans) fontjára. A szimbólum-span mono marad (saját szabály). */
.rz-filter-menu-item {
    font-family: var(--sans, Inter, sans-serif) !important;
    font-size: 13px !important;
}

/* 2) Kártya-keret a grid + lábléc köré (kerek sarok / árnyék ide kerül) */
.dfa-gridcard {
    width: 100%;
    border: 1px solid var(--eclipse-line, #e6e8ee);
    border-radius: 10px;
    overflow: hidden;
    background: var(--eclipse-bg-elevated, #fff);
    box-shadow: 0 1px 0 rgba(17,24,39,.02), 0 8px 28px rgba(17,24,39,.04);
    margin-bottom: 8px;
}
.dfa-gridcard > .dfa-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* 3) Lábléc: rekordszám + „görgess oldalra" felirat */
.dfa-gridfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    border-top: 1px solid var(--eclipse-line, #e6e8ee);
    background: var(--eclipse-bg-elevated, #fff);
}
.dfa-gridfoot .dfa-recordinfo { margin: 0 !important; }
.dfa-scrollhint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--eclipse-ink-faint, #9aa3b2);
}
.dfa-scrollhint svg { width: 14px; height: 14px; }

/* 4) Kijelölés legyen jól látható — a RÖGZÍTETT (sticky) cellák is kapják meg
      a corona-árnyalatot, különben átlátszatlan fehér hátterük elnyeli a kiemelést */
.dfa-grid tr.rz-selected > td,
.dfa-grid tr.rz-state-highlight > td,
.dfa-grid .rz-data-row.rz-selected > td,
.dfa-grid .rz-data-row.rz-state-highlight > td {
    background: rgba(200, 147, 102, 0.22) !important;
    color: var(--eclipse-ink, #0e131d) !important;
}
.dfa-grid .rz-data-row:hover > td.rz-frozen-cell { background: #fbf6f0 !important; }
.dfa-grid tr.rz-selected > td.rz-frozen-cell,
.dfa-grid tr.rz-state-highlight > td.rz-frozen-cell { background: #f4e7d4 !important; }
/* corona bal-sáv az első (Státusz) cellán */
.dfa-grid tr.rz-selected > td:first-child,
.dfa-grid tr.rz-state-highlight > td:first-child {
    box-shadow: inset 3px 0 0 var(--eclipse-corona, #c89366) !important;
}
/* rögzített fejléc-cellák surface háttere */
.dfa-grid thead th.rz-frozen-cell,
.dfa-grid .rz-datatable-thead th.rz-frozen-cell { background: var(--eclipse-bg-surface, #eef1f5) !important; }

/* ====================================================================== */
/* FEJLÉC — név + monogram (felülírja a régi .topbar__user-email-t)        */
/* ====================================================================== */
.topbar__user{margin-left:auto; display:flex; align-items:center; gap:14px}
.topbar__id{display:flex; align-items:center; gap:10px; text-decoration:none}
.topbar__name{font-size:13px; font-weight:500; color:#e5e7eb; line-height:1; transition:color .14s}
.topbar__id:hover .topbar__name{color:#fff}
.topbar__avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--corona,#c89366), var(--corona-deep,#8d5d33));
  display:grid; place-items:center; font-size:11.5px; font-weight:600; color:#fff; letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(200,147,102,.4), 0 2px 8px rgba(141,93,51,.4);
}

/* App-szintű dealer-választó a fejlécben (több dealeres user) */
.topbar__dealer{display:flex; align-items:center; margin:0}
.topbar__dealer-select{
  font-size:13px; font-weight:500; color:#e5e7eb; line-height:1;
  background:rgba(229,231,235,.06); border:1px solid rgba(229,231,235,.3);
  border-radius:9999px; padding:6px 30px 6px 14px; cursor:pointer;
  appearance:none; -webkit-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='%23cbd5e1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
  transition:background-color .15s, border-color .15s;
}
.topbar__dealer-select:hover{background-color:rgba(229,231,235,.12); border-color:rgba(229,231,235,.55)}
.topbar__dealer-select:focus{outline:none; border-color:var(--corona,#c89366)}
.topbar__dealer-select option{color:#1f2937}

/* ====================================================================== */
/* FIÓK / JELSZÓ-MÓDOSÍTÁS — középre szervezett, kártyás elrendezés        */
/* ====================================================================== */
.fiok-page{display:flex; justify-content:center; align-items:flex-start; padding:52px 24px 64px}
.fiok-account{width:100%; max-width:480px; display:flex; flex-direction:column; gap:22px;
  font-family:var(--sans, Inter, system-ui, sans-serif)}

/* identitás */
.ident{display:flex; align-items:center; gap:15px}
.ident__avatar{
  width:54px; height:54px; border-radius:16px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--corona,#c89366), var(--corona-deep,#8d5d33));
  display:grid; place-items:center; font-size:19px; font-weight:600; color:#fff;
  box-shadow:0 0 0 1px rgba(200,147,102,.35), 0 8px 20px -6px rgba(141,93,51,.55);
}
.ident__meta{display:flex; flex:1 1 auto; flex-direction:column; gap:4px; min-width:0}
.ident__eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--corona-deep,#8d5d33)}
.ident__name{font-family:var(--serif); font-size:30px; line-height:1.08; color:var(--ink,#0e131d);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ident__email{font-size:13px; color:var(--ink-subtle,#6b7280); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* kártya */
.fiok-card{background:var(--bg-elev,#fff); border:1px solid var(--line,#e6e8ee); border-radius:var(--radius-lg,14px);
  box-shadow:0 1px 0 rgba(17,24,39,.02), 0 10px 30px rgba(17,24,39,.05); overflow:hidden}
.fiok-card__head{display:flex; align-items:center; gap:13px; padding:20px 24px; border-bottom:1px solid var(--line,#e6e8ee)}
.fiok-card__icon{width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--corona-soft, rgba(200,147,102,.14)); color:var(--corona-deep,#8d5d33)}
.fiok-card__icon svg{width:20px; height:20px}
.fiok-card__head h2{margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink,#0e131d)}
.fiok-card__head p{margin:2px 0 0; font-size:12.5px; color:var(--ink-subtle,#6b7280)}
.fiok-card__body{padding:22px 24px 24px}

/* sikeres sáv (a régi .fiok-ok átstílozása) */
.fiok-ok{display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:12px 14px;
  border-radius:var(--radius-md,10px); background:var(--success-soft, rgba(21,128,61,.12));
  border:1px solid rgba(21,128,61,.28); color:var(--success,#15803d); font-size:13px; font-weight:500}
.fiok-ok svg{width:17px; height:17px; flex:0 0 auto}

/* mező + szem-ikon (a meglévő .auth-field/.auth-input megmarad, csak kiegészül) */
.fiok-inputwrap{position:relative}
.fiok-inputwrap .auth-input{height:44px; padding-right:44px; border-radius:10px}
.fiok-reveal{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; background:none; color:var(--ink-faint,#9aa3b2);
  cursor:pointer; border-radius:8px; display:grid; place-items:center; transition:.12s}
.fiok-reveal:hover{background:var(--bg-surface,#eef1f5); color:var(--ink-muted,#4b5563)}
.fiok-reveal svg{width:17px; height:17px; display:block}
.fiok-reveal .i-eyeoff{display:none}
.fiok-reveal.is-revealed .i-eye{display:none}
.fiok-reveal.is-revealed .i-eyeoff{display:block}

/* erősség-mérő */
.fiok-strength{margin-top:9px}
.fiok-strength__bars{display:flex; gap:5px}
.fiok-strength__bars span{flex:1; height:4px; border-radius:999px; background:var(--line-bright,#d6dae3); transition:background .2s}
.fiok-strength__label{font-size:11px; font-family:var(--mono); letter-spacing:.05em; color:var(--ink-faint,#9aa3b2); margin-top:6px; height:14px}
.fiok-strength[data-score="1"] .fiok-strength__bars span:nth-child(-n+1){background:var(--danger,#b91c1c)}
.fiok-strength[data-score="2"] .fiok-strength__bars span:nth-child(-n+2){background:var(--warning,#b45309)}
.fiok-strength[data-score="3"] .fiok-strength__bars span:nth-child(-n+3){background:#b8860b}
.fiok-strength[data-score="4"] .fiok-strength__bars span{background:var(--success,#15803d)}

/* submit — a meglévő .auth-btn corona-pirula + ikon */
.fiok-submit{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px}
.fiok-submit svg{width:16px; height:16px}

/* Reszponzív esés (#1839/H) — töréspontok: tokens.diff.css „BREAKPOINTOK — SSOT" */
/* BP-M — tablet álló és alatta */
@media (max-width: 899px) {
  .fiok-page{padding:32px 1rem 48px}
}
/* BP-S — telefon álló: a kártya-paddingok és az identitás-blokk szűkülnek */
@media (max-width: 599px) {
  .fiok-page{padding:24px 1rem 40px}
  .fiok-account{gap:18px}
  .ident{gap:12px}
  .ident__avatar{width:46px; height:46px; border-radius:14px; font-size:17px}
  .ident__name{font-size:24px}
  .fiok-card__head{padding:16px; gap:11px}
  .fiok-card__body{padding:18px 16px 20px}
}

@media (prefers-reduced-motion:reduce){
  .fiok-strength__bars span,.topbar__name,.fiok-reveal{transition:none!important}
}

/* ==========================================================================
   #1839 / P2 — AJÁNLAT-LISTA MOBIL KÁRTYANÉZET  (D tétel)
   --------------------------------------------------------------------------
   A kártyalistát NEM media query kapcsolja: a komponens rendereli, ha a
   ViewportFigyelő „mobil" sávot jelez (a Radzen fix oszlopszélességei inline
   colgroup-ban vannak, CSS-ből nem üthetők felül). Ezek a szabályok ezért
   töréspont NÉLKÜL állnak — csak kis kijelzőn kerülnek egyáltalán DOM-ba.
   ========================================================================== */

/* ── Szűrő-sáv (szabadszöveg + státusz) ── */
.ajl-szuro {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
.ajl-szuro__input,
.ajl-szuro__select {
    box-sizing: border-box;
    height: 44px;                       /* érintőfelület (#1839/C-vel egyező) */
    font-family: var(--sans, Inter, system-ui, sans-serif);
    font-size: 16px;                    /* iOS: 16px alatt fókuszkor benagyít */
    color: var(--eclipse-ink, #0e131d);
    background: var(--eclipse-bg-elevated, #fff);
    border: 1px solid var(--eclipse-line, #e6e8ee);
    border-radius: 10px;
    padding: 0 13px;
}
/* Tableten egy sorban fér el a kettő, telefonon egymás alá tördel */
.ajl-szuro__input {
    flex: 2 1 220px;
    min-width: 0;
    -webkit-appearance: none;           /* iOS: a type=search saját kerete/lekerekítése */
    appearance: none;
}
.ajl-szuro__input::placeholder { color: var(--eclipse-ink-faint, #9aa3b2); opacity: 1; }
.ajl-szuro__input:focus,
.ajl-szuro__select:focus {
    outline: none;
    border-color: var(--eclipse-corona, #c89366);
    box-shadow: 0 0 0 3px rgba(200,147,102,.22);
}
.ajl-szuro__select {
    flex: 1 1 170px;
    padding-right: 34px;
    appearance: none;
    -webkit-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='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ── Kártyalista ── */
.ajl-lista { display: flex; flex-direction: column; gap: 10px; }

.ajl-kartya {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--eclipse-bg-elevated, #fff);
    border: 1px solid var(--eclipse-line, #e6e8ee);
    border-radius: 12px;
    padding: 13px 15px 14px;
    box-shadow: 0 1px 0 rgba(17,24,39,.02), 0 6px 18px rgba(17,24,39,.04);
}
.ajl-kartya:active { border-color: var(--eclipse-corona, #c89366); background: #fdfaf7; }

.ajl-kartya__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.ajl-kartya__szam { font-size: 13px; font-weight: 600; color: var(--eclipse-ink, #0e131d); }
/* a globális .pill adja a badge formáját; a gridbeli 108px-es minimum itt nem kell */
.ajl-kartya .pill { flex: 0 0 auto; font-size: 11px; }

.ajl-kartya__partner {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--eclipse-ink, #0e131d);
}
.ajl-kartya__sor {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--eclipse-ink-subtle, #6b7280);
}

/* Három érték egy sorban — a mono/tabular számok egymás alá igazodnak */
.ajl-kartya__ertekek {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--eclipse-line, #e6e8ee);
}
.ajl-ert { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ajl-ert .k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eclipse-ink-faint, #9aa3b2);
}
.ajl-ert .n {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--eclipse-ink, #0e131d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajl-kartya__lab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--eclipse-ink-faint, #9aa3b2);
}
.ajl-kartya__dealer {
    background: var(--eclipse-bg-surface, #eef1f5);
    border-radius: 999px;
    padding: 2px 9px;
    color: var(--eclipse-ink-muted, #4b5563);
}
.ajl-kartya__eszkoz {
    margin-top: 6px;
    font-size: 12px;
    color: var(--eclipse-ink-muted, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   #1839 / P2 — dfa-* BLOKK RESZPONZÍV ESÉSE  (G tétel)
   Töréspontok: tokens.diff.css „BREAKPOINTOK — SSOT".
   ========================================================================== */

/* BP-M — tablet álló és alatta */
@media (max-width: 899px) {
    .dfa-wrap { padding-left: 1rem; padding-right: 1rem; padding-top: 22px; }

    /* Fejléc: a cím és a jobb oldali blokk (meta + „Új ajánlat") egymás alá */
    .dfa-pagehead { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
    .dfa-headright { flex-wrap: wrap; gap: 12px; align-items: center; }
    .dfa-pagemeta { text-align: left; }
    .dfa-title { font-size: 32px; }

    /* Szerkesztő + belépési napló: egyoszlopos, a 300px-es alap-szélesség feloldva */
    .dfa-editor-area { gap: 14px; }
    .dfa-editor { flex: 1 1 100%; gap: 12px 32px !important; padding: 18px 18px; }
    .dfa-editor-col { flex: 1 1 100% !important; min-width: 0 !important; }
    .dfa-loginlog { flex: 1 1 100%; min-width: 0; max-height: 320px; }
    /* a naplótábla 3 oszlopa keskeny kijelzőn belül görgethető, az oldal nem */
    .dfa-loginlog-scroll { overflow-x: auto; }

    /* Gombsor: a fix 160px-es szélesség helyett tördelhető, nyúló gombok */
    .dfa-buttons { flex-wrap: wrap; gap: 10px; }
    .dfa-buttons-left,
    .dfa-buttons-right { flex-wrap: wrap; flex: 1 1 auto; }
    .dfa-buttons .rz-button { width: auto !important; flex: 1 1 auto; min-width: 132px; }

    /* Kereső: a fejléc-sáv teljes szélességében */
    .dfa-toolbar { align-items: stretch; }
    .dfa-field { width: 100%; }
    .dfa-search-row { width: 100%; }
    .dfa-search-row .rz-textbox { flex: 1 1 auto; min-width: 0 !important; width: auto !important; }
}

/* BP-S — telefon álló */
@media (max-width: 599px) {
    .dfa-title { font-size: 27px; }
    .dfa-headright { width: 100%; justify-content: space-between; }
    .dfa-newbtn { flex: 0 0 auto; }

    /* Grid-képesség kapcsolók (virtualizálás, oszlop-szűrés, rendezés, csoportosítás)
       asztali funkciókat kapcsolnak — telefonon nincs értelmük. A .dfa-scope (Saját ⇄
       Csoport ajánlatai) ugyanezt az osztályt viseli, de az ADAT-hatókört állítja: marad. */
    .dfa-capabilities:not(.dfa-scope) { display: none; }
    .dfa-capabilities.dfa-scope { justify-content: flex-start; }

    /* Űrlapsor: a címke a mező FÖLÉ (a 110px-es jobbra zárt oszlop elfogyna) */
    .dfa-form-row { flex-direction: column; align-items: stretch; gap: 5px; }
    .dfa-form-row > label { flex: 0 0 auto !important; text-align: left; }
    /* az „Állapot" sor checkbox + felirat marad egy sorban */
    .dfa-form-row:has(.dfa-check-label) { flex-direction: row; align-items: center; gap: 10px; }

    .dfa-loginlog-table { font-size: 12px; }
    .dfa-loginlog-table th,
    .dfa-loginlog-table td { padding: 5px 6px; }
}