/* ==========================================================================
   Unikén CRM — "Műszerfal" designrendszer
   --------------------------------------------------------------------------
   KONCEPCIÓ
   Nem SaaS-dashboard, hanem ipari vezérlőpult. A rendszerben IBC tartályok,
   göngyöleg, raklap és fűrészáru mozog — a vizuális nyelv ehhez igazodik:
   folyamatirányító panelek, jelzőlámpák, kalibrált műszerek.

   HÁROM ALAPELV
   1. A szám a főszereplő. Minden numerikus érték monospace, tabuláris
      számjegyekkel, hogy oszlopban egymás alá essen. Ez nyilvántartás.
   2. A szín jelentést hordoz, nem díszít. A jelzőszínek az ipari
      gépjelzés konvencióit követik: borostyán = figyelmet igényel,
      zöld = fut / megnyert, piros = hiba / elvesztett, acélkék = információ.
   3. Minden panel felirattal és állapotjelzővel indul — mint egy
      műszerfalon a címkézett modulok.

   TIPOGRÁFIA
   Barlow — közterületi jelzőtáblák betűtípusából származik, ipari karakter.
   Barlow Condensed — nagybetűs panelfeliratokhoz, mint a gépeken.
   IBM Plex Mono — minden számhoz. Mérnöki örökség, tabuláris számjegyek.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENEK
   -------------------------------------------------------------------------- */

:root {
    /* Felületek — világos mód (hideg beton, nem szürke) */
    --paper:        #EDF0F3;
    --panel:        #FFFFFF;
    --panel-raised: #F7F9FA;
    --panel-sunken: #E4E9ED;

    /* Vonalak */
    --line:         #D5DCE2;
    --line-strong:  #B9C4CD;

    /* Szöveg */
    --ink:          #0F1720;
    --ink-soft:     #5A6874;
    --ink-faint:    #8B98A4;

    /* Jelzőszínek — ipari gépjelzés konvenciója */
    --signal:       #E08700;   /* borostyán: figyelmet igényel */
    --signal-bg:    #FFF4E0;
    --steel:        #0E7C97;   /* acélkék: információ, interaktív */
    --steel-bg:     #E2F2F6;
    --run:          #12855A;   /* zöld: fut / megnyert */
    --run-bg:       #E1F5EC;
    --fault:        #C8353A;   /* piros: hiba / elvesztett */
    --fault-bg:     #FCEAEA;

    /* Geometria — szűk sugarak, mert a műszer nem lekerekített */
    --r-sm: 3px;
    --r-md: 5px;
    --r-lg: 8px;

    /* Kompatibilitás a régi változónevekkel */
    --bg-color:       var(--paper);
    --card-bg:        var(--panel);
    --sidebar-bg:     var(--panel);
    --text-color:     var(--ink);
    --border-color:   var(--line);
    --menu-hover-bg:  var(--panel-sunken);
}

[data-bs-theme="dark"] {
    --paper:        #0A0F14;
    --panel:        #10171F;
    --panel-raised: #17212B;
    --panel-sunken: #1C2833;

    --line:         #253340;
    --line-strong:  #35485A;

    --ink:          #E8EFF5;
    --ink-soft:     #91A3B3;
    --ink-faint:    #64768A;

    --signal:       #FFAE2E;
    --signal-bg:    #2A1F08;
    --steel:        #3EC5E3;
    --steel-bg:     #0A2A33;
    --run:          #2BD68D;
    --run-bg:       #06281B;
    --fault:        #FF5F63;
    --fault-bg:     #2B0E10;
}

/* --------------------------------------------------------------------------
   2. TIPOGRÁFIA
   -------------------------------------------------------------------------- */

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* Minden szám monospace, tabuláris számjegyekkel — ez nyilvántartás */
.num, .metric-value, td.num, .table td .num,
.pagination .page-link, .badge.num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Panelfeliratok — nagybetűs kondenzált, mint a gépeken */
.plate {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1;
}

/* --------------------------------------------------------------------------
   3. ELRENDEZÉS — VEZÉRLŐPULT
   -------------------------------------------------------------------------- */

.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--line);
    min-height: 100vh;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* A bal sáv tetején futó jelzőcsík — a rendszer "él".
   Acélkék a vezérszín; a borostyán csak akkor jelenik meg, ha van
   figyelmet igénylő tétel (a .has-alerts osztályt a PHP teszi rá). */
.sidebar::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--steel);
}
.sidebar.has-alerts::before {
    background: linear-gradient(90deg,
        var(--steel) 0%, var(--steel) 72%,
        var(--signal) 72%, var(--signal) 100%);
}

.main-content {
    padding: 28px 32px;
}

/* --------------------------------------------------------------------------
   4. MENÜ
   -------------------------------------------------------------------------- */

.menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    margin: 1px 10px;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.menu-item i {
    font-size: 1.05rem;
    margin-right: 0;
    width: 18px;
    text-align: center;
    color: var(--ink-faint);
    transition: color .14s ease;
}

.menu-item:hover {
    background: var(--panel-sunken);
    color: var(--ink);
}
.menu-item:hover i { color: var(--steel); }

.menu-item.active {
    background: var(--steel-bg);
    color: var(--ink);
    border-left-color: var(--steel);
    font-weight: 600;
}
.menu-item.active i { color: var(--steel); }

.menu-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 20px 24px 7px;
}

/* --------------------------------------------------------------------------
   5. PANELEK
   Minden panel felirattal indul — mint a műszerfalon a címkézett modulok.
   -------------------------------------------------------------------------- */

.custom-card,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 20px;
    margin-bottom: 18px;
    position: relative;
}

/* Panelfejléc: felirat balra, állapotjelző jobbra */
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.panel-head h5,
.panel-head .panel-title {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Acélkék jelzőcsík a panel bal felső sarkában — a designrendszer aláírása.
   Minden panelt ugyanaz a jel nyit, ettől lesz a felület egységes műszerfal. */
.panel::before,
.custom-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 42px;
    height: 2px;
    background: var(--steel);
    border-radius: var(--r-md) 0 0 0;
}
.panel.no-mark::before,
.custom-card.no-mark::before { display: none; }

/* --------------------------------------------------------------------------
   6. ÁLLAPOTJELZŐ LÁMPA
   A rendszer jelentést hordozó eleme: nem dísz, hanem állapot.
   -------------------------------------------------------------------------- */

.led {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--steel);
    flex-shrink: 0;
    vertical-align: middle;
}
.led-idle { background: var(--ink-faint); }

.led-run    { background: var(--run); }
.led-steel  { background: var(--steel); }
.led-fault  { background: var(--fault); }

/* Csak a "figyelmet igényel" állapot villog — ez a rendszer egyetlen mozgása */
.led-signal {
    background: var(--signal);
    animation: led-pulse 2.4s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .led-signal { animation: none; }
    * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   7. MŰSZER-KIJELZŐ (KPI)
   Nagy monospace szám, apró kondenzált felirat, alatta finom mérősáv.
   -------------------------------------------------------------------------- */

.metric {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 15px 17px 13px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.metric-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}

.metric-value {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
}

/* A vezető mutatószám acélkék — ez viszi a szemet */
.metric-lead .metric-value { color: var(--steel); }
.metric-lead { border-color: color-mix(in srgb, var(--steel) 34%, var(--line)); }

.metric-value .unit {
    font-size: 14px;
    color: var(--ink-faint);
    margin-left: 3px;
    letter-spacing: 0;
}

.metric-sub {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 5px;
}

/* Mérősáv a kijelző alján */
.metric-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--panel-sunken);
}
.metric-bar span {
    display: block;
    height: 100%;
    background: var(--steel);
}
.metric-signal .metric-value { color: var(--signal); }
.metric-signal .metric-bar span { background: var(--signal); }
.metric-run .metric-value { color: var(--run); }
.metric-run .metric-bar span { background: var(--run); }

/* --------------------------------------------------------------------------
   8. SZIGNATÚRA: FOLYAMAT-MÉRŐSÁV
   Az üzleti fázisok folyamatábraként, LED-szegmensekkel — mint egy
   üzemi mimikus diagram. Ez a rendszer emlékezetes eleme.
   -------------------------------------------------------------------------- */

.flowgauge {
    display: flex;
    gap: 3px;
    align-items: stretch;
}

.flowgauge-seg {
    flex: 1 1 0;
    min-width: 0;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 12px 12px;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .16s ease, background-color .16s ease;
}

.flowgauge-seg:hover {
    border-color: var(--line-strong);
    background: var(--panel);
    color: inherit;
}

/* A szegmens tetején futó állapotcsík adja a folyamat irányát */
.flowgauge-seg::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--line-strong);
}
.flowgauge-seg[data-state="new"]::before    { background: var(--ink-faint); }
.flowgauge-seg[data-state="active"]::before { background: var(--steel); }
.flowgauge-seg[data-state="active"] {
    border-color: color-mix(in srgb, var(--steel) 38%, var(--line));
    background: var(--steel-bg);
}
.flowgauge-seg[data-state="active"] .flowgauge-value { color: var(--steel); }
.flowgauge-seg[data-state="wait"]::before   { background: var(--signal); }
.flowgauge-seg[data-state="won"]::before    { background: var(--run); }
.flowgauge-seg[data-state="lost"]::before   { background: var(--fault); }

.flowgauge-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 7px;
}

.flowgauge-value {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.15;
}

.flowgauge-count {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 3px;
}

/* --------------------------------------------------------------------------
   9. TÁBLÁZATOK
   -------------------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--panel-raised);
    --bs-table-hover-color: var(--ink);
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: transparent;
    border-bottom: 1px solid var(--line-strong);
    padding: 9px 12px;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.table.table-light > thead > tr > th,
.table-light th {
    background: transparent !important;
    color: var(--ink-faint) !important;
    border-color: var(--line-strong) !important;
}

/* --------------------------------------------------------------------------
   10. GOMBOK
   -------------------------------------------------------------------------- */

.btn {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.005em;
    border-radius: var(--r-sm);
    padding: 7px 15px;
    border-width: 1px;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.btn-primary {
    background: var(--steel);
    border-color: var(--steel);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: color-mix(in srgb, var(--steel) 86%, #000);
    border-color: color-mix(in srgb, var(--steel) 86%, #000);
    color: #fff;
}

.btn-outline-primary {
    color: var(--steel);
    border-color: var(--line-strong);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--steel-bg);
    border-color: var(--steel);
    color: var(--steel);
}

.btn-outline-secondary {
    color: var(--ink-soft);
    border-color: var(--line-strong);
    background: transparent;
}
.btn-outline-secondary:hover {
    background: var(--panel-sunken);
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-warning {
    background: var(--signal);
    border-color: var(--signal);
    color: #1A1206;
}
.btn-warning:hover {
    background: color-mix(in srgb, var(--signal) 88%, #000);
    border-color: color-mix(in srgb, var(--signal) 88%, #000);
    color: #1A1206;
}

.btn-sm { padding: 4px 10px; font-size: 13px; }

/* --------------------------------------------------------------------------
   11. JELVÉNYEK — állapotcímkék, nem dekoráció
   -------------------------------------------------------------------------- */

.badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3.5px 9px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
}

.badge.bg-primary   { background: var(--steel-bg)  !important; color: var(--steel)  !important; border-color: color-mix(in srgb, var(--steel) 30%, transparent); }
.badge.bg-success   { background: var(--run-bg)    !important; color: var(--run)    !important; border-color: color-mix(in srgb, var(--run) 30%, transparent); }
.badge.bg-warning   { background: var(--signal-bg) !important; color: var(--signal) !important; border-color: color-mix(in srgb, var(--signal) 32%, transparent); }
.badge.bg-danger    { background: var(--fault-bg)  !important; color: var(--fault)  !important; border-color: color-mix(in srgb, var(--fault) 30%, transparent); }
.badge.bg-info      { background: var(--steel-bg)  !important; color: var(--steel)  !important; border-color: color-mix(in srgb, var(--steel) 30%, transparent); }
.badge.bg-secondary { background: var(--panel-sunken) !important; color: var(--ink-soft) !important; border-color: var(--line); }
.badge.bg-light     { background: var(--panel-sunken) !important; color: var(--ink-soft) !important; border-color: var(--line); }

/* --------------------------------------------------------------------------
   12. ŰRLAPOK
   -------------------------------------------------------------------------- */

.form-control, .form-select {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 14.5px;
    padding: 7px 11px;
}
.form-control:focus, .form-select:focus {
    background: var(--panel);
    border-color: var(--steel);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--steel) 16%, transparent);
    color: var(--ink);
}
.form-control::placeholder { color: var(--ink-faint); }

.form-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 5px;
}

/* Billentyűzetes fókusz mindig látszik */
a:focus-visible, button:focus-visible,
.menu-item:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   13. LAPOZÓ, RIASZTÁSOK, EGYÉB
   -------------------------------------------------------------------------- */

.pagination .page-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    background: var(--panel);
    border-color: var(--line);
    color: var(--steel);
    padding: 5px 11px;
}
.pagination .page-item.active .page-link {
    background: var(--steel);
    border-color: var(--steel);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    background: var(--panel-raised);
    border-color: var(--line);
    color: var(--ink-faint);
}

.alert {
    border-radius: var(--r-md);
    border-width: 1px;
    border-left-width: 3px;
    font-size: 14.5px;
    padding: 12px 16px;
}
.alert-success { background: var(--run-bg);    border-color: var(--run);    color: var(--run); }
.alert-danger  { background: var(--fault-bg);  border-color: var(--fault);  color: var(--fault); }
.alert-warning { background: var(--signal-bg); border-color: var(--signal); color: var(--signal); }
.alert-info    { background: var(--steel-bg);  border-color: var(--steel);  color: var(--steel); }

/* Üres állapot: felszólítás, nem bocsánatkérés */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-soft);
}
.empty-state i {
    font-size: 30px;
    color: var(--ink-faint);
    display: block;
    margin-bottom: 12px;
}
.empty-state .empty-title {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

/* Elválasztó vonalak a régi shadow-k helyett */
.shadow-sm, .shadow { box-shadow: none !important; }
.rounded-4, .rounded-3 { border-radius: var(--r-md) !important; }

/* --------------------------------------------------------------------------
   14. BETÖLTÉSI SORREND
   A panelek egymás után jelennek meg — a műszerfal "felfut".
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .main-content > *,
    .metric {
        animation: panel-in .32s cubic-bezier(.2, .7, .3, 1) backwards;
    }
    .main-content > *:nth-child(1) { animation-delay: .02s; }
    .main-content > *:nth-child(2) { animation-delay: .06s; }
    .main-content > *:nth-child(3) { animation-delay: .10s; }
    .main-content > *:nth-child(4) { animation-delay: .14s; }
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15. MOBIL
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .main-content { padding: 18px 15px; }
    .metric-value { font-size: 22px; }
    .flowgauge { flex-wrap: wrap; }
    .flowgauge-seg { flex: 1 1 calc(50% - 3px); }

    /* Táblázatok kártyás nézetben — széles táblát mobilon nem lehet olvasni */
    .table-cards thead { display: none; }
    .table-cards tbody tr {
        display: block;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        margin-bottom: 9px;
        padding: 11px 13px;
        background: var(--panel);
    }
    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        border: 0;
        padding: 3px 0;
    }
    .table-cards tbody td::before {
        content: attr(data-label);
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }
}

/* --------------------------------------------------------------------------
   16. SÜRGŐS SÁV
   Egy vékony csík a lejárt feladatokkal. Korábban egy nagy piros doboz
   volt, ami a darabszámot is kiírta — pedig azt a mutatószám-kártya és a
   felső sáv lámpája is mutatta. Itt csak az az információ van, ami máshol
   nincs meg: MELYEK azok a feladatok.
   -------------------------------------------------------------------------- */

.urgent-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fault-bg);
    border: 1px solid color-mix(in srgb, var(--fault) 28%, transparent);
    border-left: 3px solid var(--fault);
    border-radius: var(--r-md);
    padding: 9px 13px;
}

.urgent-strip > i {
    color: var(--fault);
    font-size: 15px;
}

.urgent-strip .plate {
    color: var(--fault);
}

.urgent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.urgent-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--fault) 30%, transparent);
    border-radius: var(--r-sm);
    padding: 3px 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .14s ease, background-color .14s ease;
    max-width: 100%;
}

.urgent-chip:hover {
    border-color: var(--fault);
    background: var(--fault-bg);
    color: var(--ink);
}

.urgent-chip .num {
    color: var(--fault);
    font-size: 12px;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .urgent-strip { flex-wrap: wrap; }
    .urgent-chip { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   17. TOAST ÜZENETEK
   Jobb felül, egymás alatt. 6 másodperc után maguktól eltűnnek, de a
   hibaüzenet marad, amíg be nem zárják — azt el kell olvasni.
   -------------------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    top: 64px;
    right: 18px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    border-radius: var(--r-md);
    padding: 11px 13px;
    box-shadow: 0 8px 26px rgba(8, 15, 22, .14);
    pointer-events: auto;
    animation: toast-in .26s cubic-bezier(.2, .8, .3, 1);
}

.toast-item.leaving {
    animation: toast-out .22s ease forwards;
}

.toast-item > i     { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.toast-success      { border-left-color: var(--run); }
.toast-success > i  { color: var(--run); }
.toast-error        { border-left-color: var(--fault); }
.toast-error > i    { color: var(--fault); }
.toast-warning      { border-left-color: var(--signal); }
.toast-warning > i  { color: var(--signal); }
.toast-info         { border-left-color: var(--steel); }
.toast-info > i     { color: var(--steel); }

.toast-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    flex: 1;
    min-width: 0;
}

.toast-close {
    background: none;
    border: 0;
    color: var(--ink-faint);
    padding: 0;
    line-height: 1;
    font-size: 16px;
    flex-shrink: 0;
    cursor: pointer;
}
.toast-close:hover { color: var(--ink); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(14px); height: 0; margin: 0; padding: 0; border-width: 0; }
}

@media (max-width: 575.98px) {
    .toast-stack {
        top: 60px;
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-item, .toast-item.leaving { animation: none; }
}

/* --------------------------------------------------------------------------
   18. NÉZETSÁV (mentett szűrők)
   Vízszintes csipsor a listák fölött. Mobilon oldalra csúsztatható.
   -------------------------------------------------------------------------- */

.viewbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.view-chip-wrap {
    display: inline-flex;
    align-items: stretch;
    position: relative;
}

.view-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 5px 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.view-chip i { font-size: 13px; }

.view-chip:hover {
    border-color: var(--line-strong);
    color: var(--ink);
    background: var(--panel-raised);
}

.view-chip.active {
    background: var(--steel-bg);
    border-color: color-mix(in srgb, var(--steel) 42%, transparent);
    color: var(--steel);
}

/* Törlés a saját nézeteknél */
.view-chip-del { display: inline-flex; }
.view-chip-del button {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink-faint);
    padding: 0 6px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
}
.view-chip-del button:hover { color: var(--fault); border-color: var(--fault); }
.view-chip-wrap .view-chip { border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* Mentés űrlap */
.view-save-form {
    display: inline-flex;
    align-items: stretch;
    margin-left: auto;
}
.view-save-form input[type="text"] {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-right: 0;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    padding: 4px 10px;
    font-size: 13px;
    color: var(--ink);
    width: 130px;
}
.view-save-form input[type="text"]:focus {
    outline: none;
    border-color: var(--steel);
}
.view-save-form button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 4px 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--steel);
    cursor: pointer;
    white-space: nowrap;
}
.view-save-form button:hover { background: var(--steel-bg); border-color: var(--steel); }

@media (max-width: 767.98px) {
    .viewbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 12px;
    }
    .viewbar::-webkit-scrollbar { display: none; }
    .view-save-form { margin-left: 0; }
    .view-save-form input[type="text"] { width: 110px; }
}

/* --------------------------------------------------------------------------
   19. TÖMEGES MŰVELETEK
   -------------------------------------------------------------------------- */

.bulkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--steel-bg);
    border: 1px solid color-mix(in srgb, var(--steel) 34%, transparent);
    border-radius: var(--r-md);
    padding: 9px 13px;
    margin-bottom: 14px;
    animation: panel-in .18s ease;
}

.bulkbar-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--steel);
    white-space: nowrap;
}
.bulkbar-count span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
}

.bulkbar .form-select-sm {
    width: auto;
    min-width: 128px;
    font-size: 13px;
    padding: 4px 26px 4px 9px;
}

/* Kijelölő oszlop */
.bulk-col { width: 34px; padding-right: 0 !important; }
.bulk-col .form-check-input { margin: 0; cursor: pointer; }

tr.row-selected > td { background: var(--steel-bg) !important; }

/* Billentyűk a súgóban */
kbd {
    background: var(--panel-sunken);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 1px 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--ink);
}

@media (max-width: 767.98px) {
    .bulkbar { position: sticky; bottom: 0; z-index: 20; }
    .bulkbar .form-select-sm { flex: 1 1 calc(50% - 8px); min-width: 0; }
    /* Kártyás nézetben a checkbox a kártya sarkába kerül */
    .table-cards tbody td.bulk-col {
        justify-content: flex-start;
        padding-bottom: 8px;
    }
    .table-cards tbody td.bulk-col::before { content: "Kijelölés"; }
}

/* --------------------------------------------------------------------------
   20. IDŐVONAL
   Függőleges vonal a jelölők mentén — látszik, hogy egy folyamat.
   -------------------------------------------------------------------------- */

.timeline {
    position: relative;
    max-height: 460px;
    overflow-y: auto;
    padding-left: 2px;
}

.timeline-item {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 16px;
}

/* Az összekötő vonal — az utolsó elemnél nincs */
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.timeline-marker {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 1;
}

.timeline-body { min-width: 0; flex: 1; }

.timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.timeline-action {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

.timeline-when {
    font-size: 11.5px;
    color: var(--ink-faint);
    white-space: nowrap;
    flex-shrink: 0;
}

.timeline-detail {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-top: 2px;
    word-break: break-word;
}

.timeline-who {
    font-size: 11.5px;
    color: var(--ink-faint);
    margin-top: 2px;
}