@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===== App Layout ===== */
.app-layout[b-g4n6geo4q9] {
    min-height: 100vh;
    background: var(--bg-primary, #f0f2f5);
}

/* ===== Top Header ===== */
.app-header[b-g4n6geo4q9] {
    /* min-height (not a fixed height) so the menu bar may wrap onto a second row on narrower screens
       instead of overflowing off the right edge. The brand + header-right stay vertically centred. */
    min-height: 56px;
    /* Broadcast kékes-fekete — a korábbi lila (#2D1A30) végpont kivezetve; a brand a vékony
       magenta alsó élben él tovább, nem a háttérben. */
    background: linear-gradient(135deg, #0B0D12 0%, #141821 100%);
    border-bottom: 2px solid rgba(223, 54, 119, 0.55);
    display: flex;
    align-items: center;
    padding: 0.3rem 1.5rem;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.brand[b-g4n6geo4q9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.brand i[b-g4n6geo4q9] {
    font-size: 1.3rem;
    color: #DF3677;
}

/* Hamburger toggle — hidden on desktop, revealed when the menu bar collapses (<=900px). */
.nav-toggle[b-g4n6geo4q9] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.nav-toggle:hover[b-g4n6geo4q9] { background: rgba(255,255,255,0.16); }

/* ===== Windows-style Menu Bar ===== */
.menubar[b-g4n6geo4q9] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    row-gap: 0.3rem;
    flex: 1;
    /* min-width:0 lets the flex item shrink below its content width, and flex-wrap lets the items flow
       onto a second row instead of running off the right edge (which pushed the page wider than the
       viewport). No overflow is used here on purpose — that would clip the hover dropdowns. */
    min-width: 0;
    flex-wrap: wrap;
}

.menubar-item[b-g4n6geo4q9] {
    position: relative;
}

.menubar-link[b-g4n6geo4q9] {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
}

.menubar-link:hover[b-g4n6geo4q9],
.menubar-item.has-dropdown:hover > .menubar-link[b-g4n6geo4q9] {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

/* Aktív ("benne vagyok") állapot — a menü mutatja, HOL jár a user: magenta tint + izzó alsó sáv.
   Erősebb a hovernél, hogy a három állapot (normál / hover / aktív) ránézésre elváljon. */
.menubar-link.on[b-g4n6geo4q9],
.menubar-link.on:hover[b-g4n6geo4q9],
.menubar-item.has-dropdown:hover > .menubar-link.on[b-g4n6geo4q9] {
    position: relative;
    color: #fff;
    background: color-mix(in srgb, var(--accent, #DF3677) 30%, transparent);
}

.menubar-link.on[b-g4n6geo4q9]::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 1px;
    height: 2px;
    border-radius: 99px;
    background: var(--accent, #DF3677);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #DF3677) 80%, transparent);
}

/* Dropdown menu */
.menubar-dropdown[b-g4n6geo4q9] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    min-width: 200px;
    padding: 0.375rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menubar-dropdown.show[b-g4n6geo4q9] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menubar-dropdown-item[b-g4n6geo4q9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s;
    font-weight: 500;
    cursor: pointer;
}

.menubar-dropdown-item:hover[b-g4n6geo4q9] {
    background: rgba(223,54,119,0.12);
    color: var(--accent);
}

/* Aktív lenyíló-elem: az éppen nyitott oldal a listában is jelölve. */
.menubar-dropdown-item.on[b-g4n6geo4q9] {
    background: color-mix(in srgb, var(--accent, #DF3677) 16%, transparent);
    color: var(--accent);
    font-weight: 650;
}

.menubar-dropdown-item.on i[b-g4n6geo4q9] { opacity: 1; }

.menubar-dropdown-item i[b-g4n6geo4q9] {
    font-size: 0.9rem;
    width: 1.1rem;
    text-align: center;
    opacity: 0.7;
}

/* Grouped "Beállítások" dropdown: section headers, dividers, scroll, active language */
.menubar-dropdown.settings-dropdown[b-g4n6geo4q9] {
    min-width: 260px;
    max-height: 78vh;
    overflow-y: auto;
}

.menubar-dropdown-header[b-g4n6geo4q9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.875rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    opacity: 0.75;
}

.menubar-dropdown-header i[b-g4n6geo4q9] {
    font-size: 0.8rem;
}

.menubar-dropdown-divider[b-g4n6geo4q9] {
    height: 1px;
    background: var(--border);
    margin: 0.375rem 0.25rem;
}

.menubar-dropdown-item.active-lang[b-g4n6geo4q9] {
    color: var(--accent);
    font-weight: 600;
}

.menubar-dropdown-item.active-lang i[b-g4n6geo4q9] {
    opacity: 1;
}

.color-dot[b-g4n6geo4q9] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== Old header-nav (deprecated) ===== */

.header-nav[b-g4n6geo4q9] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-nav-link[b-g4n6geo4q9] {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.header-nav-link:hover[b-g4n6geo4q9] {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.header-right[b-g4n6geo4q9] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-user-name[b-g4n6geo4q9] {
    color: rgba(255,255,255,0.85);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.header-icon-btn[b-g4n6geo4q9] {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 1rem;
}

.header-icon-btn:hover[b-g4n6geo4q9] {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.notif-dot[b-g4n6geo4q9] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #141821;   /* a fejléc sötét végpontja — a lila kivezetve */
}

.header-avatar[b-g4n6geo4q9] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #DF3677, #F04E8C);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
}

/* ===== Content ===== */
.app-content[b-g4n6geo4q9] {
    /* Full-width: reach the right edge on every monitor (the old max-width:1680 + margin:auto left a
       dark empty band on wide screens and, combined with the header overflow, looked cut off even at
       1600px). The header is full-width too, so the content now lines up with it edge-to-edge. */
    width: 100%;
    padding: 1.5rem;
}

/* ===== Mobile / narrow (<=900px): collapse the hover menu bar into a tap-driven accordion panel =====
   On touch there is no hover, so the desktop hover dropdowns are unreachable. Here the whole menu bar
   drops to its own full-width row (revealed by the hamburger), and each parent expands inline on tap
   (the .show class is toggled by ToggleMenu in MainLayout.razor). Desktop hover behaviour is untouched. */
@media (max-width: 900px) {
    .app-header[b-g4n6geo4q9] {
        flex-wrap: wrap;
        gap: 0.6rem;
        padding: 0.4rem 1rem;
    }

    .nav-toggle[b-g4n6geo4q9] { display: inline-flex; }
    .header-right[b-g4n6geo4q9] { margin-left: auto; }

    .menubar[b-g4n6geo4q9] {
        display: none;
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        padding: 0.35rem 0;
        margin-top: 0.15rem;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .menubar.open[b-g4n6geo4q9] { display: flex; }

    .menubar-item[b-g4n6geo4q9] { width: 100%; position: static; }

    .menubar-link[b-g4n6geo4q9] {
        width: 100%;
        justify-content: space-between;
        padding: 0.7rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Dropdowns become inline accordions instead of floating cards; shown only when tapped (.show). */
    .menubar-dropdown[b-g4n6geo4q9] {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-width: 0;
        margin: 0 0 0.25rem;
        padding: 0.1rem 0 0.2rem 0.75rem;
        background: transparent;
    }

    .menubar-dropdown.show[b-g4n6geo4q9] { display: block; }
    .menubar-dropdown.settings-dropdown[b-g4n6geo4q9] { max-height: none; overflow: visible; }

    /* On the dark header panel the light dropdown chrome must become light-on-dark to stay readable. */
    .menubar-dropdown-item[b-g4n6geo4q9] { color: rgba(255,255,255,0.85); padding: 0.6rem 0.75rem; }
    .menubar-dropdown-item:hover[b-g4n6geo4q9] { background: rgba(255,255,255,0.12); color: #fff; }
    .menubar-dropdown-header[b-g4n6geo4q9] { color: rgba(255,255,255,0.55); }
    .menubar-dropdown-divider[b-g4n6geo4q9] { background: rgba(255,255,255,0.14); }
}

@media (max-width: 767.98px) {
    .app-header[b-g4n6geo4q9] {
        padding: 0.3rem 1rem;
        gap: 0.6rem;
    }
    .brand span[b-g4n6geo4q9] { display: none; }
    .app-content[b-g4n6geo4q9] { padding: 1rem; }
}

/* ===== In-page friendly error panel (ErrorBoundary) ===== */
.page-error[b-g4n6geo4q9] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 1.5rem;
}

.page-error-card[b-g4n6geo4q9] {
    max-width: 560px;
    width: 100%;
    text-align: center;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem 1.75rem;
}

.page-error-icon[b-g4n6geo4q9] {
    font-size: 2.5rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.page-error-card h2[b-g4n6geo4q9] {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.page-error-card p[b-g4n6geo4q9] {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.page-error-detail[b-g4n6geo4q9] {
    text-align: left;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.75rem;
    margin: 0 0 1.25rem;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.page-error-actions[b-g4n6geo4q9] {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.page-error-btn[b-g4n6geo4q9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.page-error-btn:hover[b-g4n6geo4q9] { background: var(--bg-primary); }

.page-error-btn.primary[b-g4n6geo4q9] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.page-error-btn.primary:hover[b-g4n6geo4q9] { opacity: 0.9; background: var(--accent); }

/* ===== Last-resort Blazor circuit error bar =====
   Blazor toggles this element with an inline `display: block`, so the layout
   must work in normal block flow (no flexbox). */
#blazor-error-ui[b-g4n6geo4q9] {
    background: var(--surface);
    color: var(--text-primary);
    border-top: 3px solid var(--accent);
    box-shadow: 0 -4px 14px rgba(0,0,0,0.35);
    display: none;
    bottom: 0;
    left: 0;
    padding: 0.85rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.95rem;
    line-height: 1.8;
}

#blazor-error-ui .reload[b-g4n6geo4q9] {
    color: #fff;
    background: var(--accent);
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.75rem;
}

#blazor-error-ui .dismiss[b-g4n6geo4q9] {
    cursor: pointer;
    float: right;
    font-size: 1.1rem;
    opacity: 0.7;
}

#blazor-error-ui .dismiss:hover[b-g4n6geo4q9] { opacity: 1; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* unused — menu is in Home.razor */
/* /Components/Pages/Blokkok/Beosztas.razor.rz.scp.css */
/* ============================================================
   Beosztas.razor.css — Spot-schedule matrix (LENS C "Tactile Spring")
   ------------------------------------------------------------
   Scoped CSS-isolation stylesheet for the Beosztás schedule grid.
   Rows = ad blocks (time slots), columns = days; cells drag-select
   to schedule a campaign into a block on a day.

   Identity: indigo/violet 2027 control-room system. Cells invite
   touch — hover lifts + tints, selection pops with a spring
   (cubic-bezier overshoot) and the check scales in, today's column
   glows, the MA badge softly pulses. All motion is reduced-motion safe.

   Defeats the global .data-grid !important rules (app.css) by
   re-declaring th/td background/padding/font-size/color/border with
   !important and switching to border-collapse:separate so sticky
   freeze cells render clean hairline borders. Works in light + dark
   purely through design tokens (no hardcoded theme colors — only
   subtle rgba overlays/glows on top of tokens).
   ============================================================ */

/* ---- Local spring + timing tokens (component-scoped) ---- */
.schedule-grid[b-q3zz08ueyv] {
    --sched-spring: cubic-bezier(.34, 1.56, .64, 1);   /* overshoot pop */
    --sched-snap: cubic-bezier(.2, .8, .25, 1);        /* quick settle  */
    --sched-hover-tint: rgba(223, 54, 119, .07);
    --sched-row-h: 2.55rem;
}

/* ============================================================
   1. SCROLL VIEWPORT  (.grid-scroll-wrapper)
   The card-body already sets p-0 + overflow-x:auto globally; we
   re-scope it into a true 2-axis sticky viewport with a sane height
   so vertical freeze is meaningful, plus refined thin scrollbars.
   ============================================================ */
.grid-scroll-wrapper[b-q3zz08ueyv] {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 280px);
    border-radius: 0 0 var(--radius) var(--radius);
    /* Firefox: vastag, jól látható, könnyen megfogható görgetősáv */
    scrollbar-width: auto;
    scrollbar-color: var(--text-muted) var(--bg-primary);
    /* a whisper of inner depth so the frozen edges read as layered */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent);
}

/* Keyboard a11y: the wrapper is tabindex=0 — give it a crisp focus ring. */
.grid-scroll-wrapper:focus-visible[b-q3zz08ueyv] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px var(--accent),
                0 0 0 4px rgba(223, 54, 119, .15);
}

/* Refined WebKit scrollbars (scoped) */
.grid-scroll-wrapper[b-q3zz08ueyv]::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}
.grid-scroll-wrapper[b-q3zz08ueyv]::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 8px;
}
.grid-scroll-wrapper[b-q3zz08ueyv]::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 9px;
    border: 2px solid var(--bg-primary);   /* a fogantyú jól elkülönül a csatornától, de vastag marad */
    background-clip: padding-box;
    min-height: 40px;                       /* kényelmes fogófelület függőlegesen */
    min-width: 40px;                        /* és vízszintesen */
}
.grid-scroll-wrapper[b-q3zz08ueyv]::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}
.grid-scroll-wrapper[b-q3zz08ueyv]::-webkit-scrollbar-thumb:active {
    background: var(--accent2);
    background-clip: padding-box;
}
.grid-scroll-wrapper[b-q3zz08ueyv]::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

/* ============================================================
   2. THE GRID TABLE  (.schedule-grid)
   border-collapse:separate is MANDATORY so sticky cells keep their
   own borders (collapsed borders bleed under sticky layers).
   ============================================================ */
.schedule-grid[b-q3zz08ueyv] {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;                 /* töltse ki a helyet — a nap-oszlopok osztoznak a maradékon, nincs holt tér */
    table-layout: fixed;
    background: var(--surface);
    /* selection should never paint the OS blue highlight on a drag-select */
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================================
   3. HEADER ROW  (sticky top)  — defeat .data-grid th !important
   ============================================================ */
.schedule-grid thead th[b-q3zz08ueyv] {
    position: sticky;
    top: 0;
    z-index: 3;                                  /* header row above body cells (z1) + first col (z2) */
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    padding: .45rem .5rem !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 1px 0 0 var(--border);         /* hairline that survives sticky overlap */
}

/* ---- Top-left frozen corner: HIGHEST layer (over header + first col) ---- */
.schedule-corner[b-q3zz08ueyv] {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 6 !important;
    background: var(--bg-primary) !important;
    color: var(--text-muted) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left !important;
    padding: .45rem .85rem !important;
    width: 11rem;                /* fix blokk-oszlop szélesség (fixed layout: a thead határozza meg) */
    /* double hairline (right + bottom) so the corner crisply frames both frozen edges */
    border-right: 1px solid var(--border) !important;
    box-shadow: 1px 0 0 0 var(--border), 0 1px 0 0 var(--border);
}

/* ---- Day column header (clickable) ---- */
.schedule-day-head[b-q3zz08ueyv] {
    cursor: pointer;
    min-width: 3.1rem;
    white-space: nowrap;
    transition: background-color .12s var(--sched-snap),
                color .12s var(--sched-snap),
                box-shadow .12s var(--sched-snap);
}

.schedule-day-head:hover[b-q3zz08ueyv] {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-primary)) !important;
    color: var(--text-primary) !important;
}
.schedule-day-head:active[b-q3zz08ueyv] {
    background: color-mix(in srgb, var(--accent) 20%, var(--bg-primary)) !important;
}

/* date + day-of-week stack inside the header */
.schedule-head-date[b-q3zz08ueyv] {
    display: block;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.schedule-head-dow[b-q3zz08ueyv] {
    display: block;
    margin-top: 1px;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ---- TODAY column header: accent highlight + soft glow ---- */
.schedule-head-today[b-q3zz08ueyv] {
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--accent) 22%, var(--bg-primary)),
                color-mix(in srgb, var(--accent) 12%, var(--bg-primary))) !important;
    border-bottom: 2px solid var(--accent) !important;
    box-shadow: 0 1px 0 0 var(--accent),
                inset 0 -8px 14px -10px var(--accent);
}
.schedule-head-today .schedule-head-date[b-q3zz08ueyv] { color: var(--accent); }
.schedule-head-today .schedule-head-dow[b-q3zz08ueyv] {
    color: color-mix(in srgb, var(--accent) 70%, var(--text-secondary));
}
.schedule-head-today:hover[b-q3zz08ueyv] {
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--accent) 30%, var(--bg-primary)),
                color-mix(in srgb, var(--accent) 18%, var(--bg-primary))) !important;
}

/* ---- WEEKEND column header: muted/neutral ---- */
.schedule-head-weekend[b-q3zz08ueyv] {
    background: color-mix(in srgb, var(--text-muted) 9%, var(--bg-primary)) !important;
}
.schedule-head-weekend .schedule-head-date[b-q3zz08ueyv] { color: var(--text-secondary); }

/* ---- 'MA' (today) pill badge: glowing + soft pulse ---- */
.schedule-head-today-badge[b-q3zz08ueyv] {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .56rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    box-shadow: 0 0 0 0 rgba(223, 54, 119, .55);
    animation: sched-ma-pulse-b-q3zz08ueyv 2.4s ease-in-out infinite;
}

@keyframes sched-ma-pulse-b-q3zz08ueyv {
    0%, 100% { box-shadow: 0 0 0 0 rgba(223, 54, 119, .45),
                            0 1px 4px rgba(223, 54, 119, .35); }
    50%      { box-shadow: 0 0 0 5px rgba(223, 54, 119, 0),
                            0 1px 7px rgba(240, 78, 140, .5); }
}

/* ============================================================
   4. FIRST COLUMN — block head (sticky left)  — defeat .data-grid td
   ============================================================ */
.schedule-block-head[b-q3zz08ueyv] {
    position: sticky;
    left: 0;
    z-index: 2;                                  /* above normal cells, below header row */
    background: var(--surface) !important;       /* OPAQUE so cells don't bleed through */
    color: var(--text-primary) !important;
    cursor: pointer;
    width: 11rem;
    padding: .35rem .85rem !important;
    font-size: .8125rem;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 1px 0 0 0 var(--border);         /* clean right freeze edge */
    transition: background-color .12s var(--sched-snap);
}

.schedule-block-head:hover[b-q3zz08ueyv] {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
}
.schedule-block-head:active[b-q3zz08ueyv] {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
}

/* time — Rubik, bold, tabular */
.schedule-block-time[b-q3zz08ueyv] {
    display: block;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* title — muted, single-line ellipsis */
.schedule-block-title[b-q3zz08ueyv] {
    display: block;
    margin-top: 1px;
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-muted);
}

/* múltbeli (elment) blokk — nem lehet bele új spotot tenni */
.schedule-past[b-q3zz08ueyv] {
    opacity: .45;
    cursor: not-allowed;
    background-image: repeating-linear-gradient(45deg,
        transparent, transparent 5px,
        color-mix(in srgb, var(--text-muted) 9%, transparent) 5px,
        color-mix(in srgb, var(--text-muted) 9%, transparent) 10px);
}

/* meglévő elhelyezés, aminek a kijelölését levetted => Mentéskor törlődik */
.schedule-remove[b-q3zz08ueyv] {
    box-shadow: inset 0 0 0 2px #ef4444;
}

/* block-type colour dot — matches the swatch used in the other dispo views */
.schedule-block-swatch[b-q3zz08ueyv] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ============================================================
   5. SCHEDULE CELLS  (.schedule-cell)  — defeat .data-grid td
   Default: faint, invites clicking; crisp row/column separation.
   ============================================================ */
.schedule-cell[b-q3zz08ueyv] {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 3.1rem;
    min-width: 3.1rem;
    height: var(--sched-row-h);
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
    border-bottom: 1px solid var(--border) !important;
    /* a faint dotted "drop target" affordance, centered, idle */
    background-image: radial-gradient(circle at center,
                      color-mix(in srgb, var(--text-muted) 28%, transparent) 1.1px,
                      transparent 1.4px);
    background-size: 100% 100%;
    background-position: center;
    transition: background-color .1s var(--sched-snap),
                box-shadow .1s var(--sched-snap),
                transform .12s var(--sched-snap);
    /* keep transform crisp & contained without per-cell will-change */
    transform: translateZ(0);
}

/* Hover: gentle lift + accent tint (compositor-friendly translate/scale). */
.schedule-cell:hover[b-q3zz08ueyv] {
    background-color: var(--sched-hover-tint) !important;
    background-image: radial-gradient(circle at center,
                      color-mix(in srgb, var(--accent) 55%, transparent) 2px,
                      transparent 2.4px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
                0 2px 8px -4px rgba(223, 54, 119, .45);
    transform: translateY(-1px) scale(1.015);
    z-index: 2;
}
.schedule-cell:active[b-q3zz08ueyv] {
    transform: translateY(0) scale(.97);
    transition-duration: .06s;
}

/* Neutralize the global .data-grid tr:hover row tint so per-CELL hover wins. */
.schedule-grid tbody tr:hover[b-q3zz08ueyv] {
    background: transparent !important;
}

/* ---- WEEKEND cell: subtle warm/neutral tint ---- */
.schedule-cell-weekend[b-q3zz08ueyv] {
    background-color: color-mix(in srgb, #f59e0b 5%, var(--surface)) !important;
}
.schedule-cell-weekend:hover[b-q3zz08ueyv] {
    background-color: color-mix(in srgb, var(--accent) 7%, color-mix(in srgb, #f59e0b 6%, var(--surface))) !important;
}

/* ============================================================
   6. EXISTING MARK  (.schedule-existing-mark)
   ALREADY persisted previously — calmer than 'selected': an accent
   ring + left rail + corner dot. Co-occurs with .schedule-selected.
   ============================================================ */
.schedule-existing-mark[b-q3zz08ueyv] {
    background-color: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
    box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--accent2) 80%, var(--accent)),
                inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
    background-image: none;
}
/* corner dot marking persisted state */
.schedule-existing-mark[b-q3zz08ueyv]::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 4px color-mix(in srgb, var(--accent2) 70%, transparent);
}
.schedule-existing-mark:hover[b-q3zz08ueyv] {
    background-color: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important;
}

/* ============================================================
   7. SELECTED NOW  (.schedule-selected) — strongest signal.
   Bold filled accent->accent2 gradient + spring pop + white check.
   ============================================================ */
.schedule-selected[b-q3zz08ueyv] {
    background-color: var(--accent) !important;
    background-image: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18),
                0 3px 10px -4px rgba(223, 54, 119, .65);
    animation: sched-pop-b-q3zz08ueyv .18s var(--sched-spring);
    z-index: 2;
}
.schedule-selected:hover[b-q3zz08ueyv] {
    background-image: linear-gradient(135deg,
                      color-mix(in srgb, var(--accent) 88%, #fff),
                      color-mix(in srgb, var(--accent2) 88%, #fff)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3),
                0 5px 14px -4px rgba(240, 78, 140, .75);
    transform: translateY(-1px) scale(1.03);
}

/* selected + existing together: keep the filled look, add an outer ring
   so its "persisted" lineage still reads. */
.schedule-selected.schedule-existing-mark[b-q3zz08ueyv] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22),
                0 0 0 2px color-mix(in srgb, var(--accent2) 55%, transparent),
                0 3px 10px -4px rgba(223, 54, 119, .65);
}
.schedule-selected.schedule-existing-mark[b-q3zz08ueyv]::after { display: none; }

@keyframes sched-pop-b-q3zz08ueyv {
    0%   { transform: scale(.8); }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---- The check icon: scales in with the spring ---- */
.schedule-check[b-q3zz08ueyv] {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
    transform-origin: center;
    animation: sched-check-in-b-q3zz08ueyv .22s var(--sched-spring);
}

@keyframes sched-check-in-b-q3zz08ueyv {
    0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
    55%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ============================================================
   8. USAGE CHIP  (.schedule-usage)
   Block-fullness % — bottom-right micro chip. Heatmap COLOR comes
   from inline C# style, so we NEVER touch color: only size/weight/
   placement + tabular digits. Sits beneath/with the check.
   ============================================================ */
.schedule-usage[b-q3zz08ueyv] {
    position: absolute;
    right: 3px;
    bottom: 2px;
    padding: 0 3px;
    border-radius: 5px;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

/* On a filled (selected) cell the surface-tinted chip would vanish —
   give it a translucent dark plate so the inline heatmap color stays legible. */
.schedule-selected .schedule-usage[b-q3zz08ueyv] {
    background: rgba(15, 23, 42, .32);
    color: #fff !important;          /* override inline heatmap ONLY here for contrast on the gradient */
}

/* ============================================================
   9. REDUCED MOTION — drop transforms/animation, keep state legible
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .schedule-cell[b-q3zz08ueyv],
    .schedule-day-head[b-q3zz08ueyv],
    .schedule-block-head[b-q3zz08ueyv] {
        transition: background-color .01ms linear, box-shadow .01ms linear;
    }
    .schedule-cell:hover[b-q3zz08ueyv],
    .schedule-selected:hover[b-q3zz08ueyv],
    .schedule-cell:active[b-q3zz08ueyv] {
        transform: none;
    }
    .schedule-selected[b-q3zz08ueyv],
    .schedule-check[b-q3zz08ueyv],
    .schedule-head-today-badge[b-q3zz08ueyv] {
        animation: none;
    }
    /* keep the MA badge readable without the pulse */
    .schedule-head-today-badge[b-q3zz08ueyv] {
        box-shadow: 0 1px 4px rgba(223, 54, 119, .35);
    }
}
/* /Components/Pages/Blokkok/GanttNezet.razor.rz.scp.css */
/* ============================================================
   GanttNezet.razor.css — több-rádiós, kezdési idő szerint
   szinkronizált napi diszpó-létra (scoped CSS-isolation).
   Oszlop = rádió (átrendezhető), sor = blokk-kezdési idő;
   azonos kezdési idő => azonos vízszintes vonal minden oszlopban.
   ============================================================ */

.gantt-wrapper[b-jqtb7vxbxd] {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 320px);
    scrollbar-width: auto;
    scrollbar-color: var(--text-muted) var(--bg-primary);
}

.gantt-grid[b-jqtb7vxbxd] {
    display: grid;
    width: max-content;
    min-width: 100%;
    background: var(--surface);
    isolation: isolate;
}

/* ---- fejléc ---- */
.gantt-corner[b-jqtb7vxbxd] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 0.5rem;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.gantt-radio-head[b-jqtb7vxbxd] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.5rem 0.65rem;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    user-select: none;
    box-shadow: inset 0 -1px 0 var(--border);
    transition: background-color 0.12s ease;
}

.gantt-radio-head:hover[b-jqtb7vxbxd] {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-primary));
}

.gantt-radio-head:active[b-jqtb7vxbxd] { cursor: grabbing; }
.gantt-dragging[b-jqtb7vxbxd] { opacity: 0.45; }

.gantt-grip[b-jqtb7vxbxd] { color: var(--text-muted); font-size: 0.7rem; margin-right: 0.15rem; }

.gantt-radio-name[b-jqtb7vxbxd] {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.gantt-radio-sub[b-jqtb7vxbxd] { font-size: 0.62rem; color: var(--text-muted); }

/* ---- idő-oszlop (bal, ragadós) ---- */
.gantt-time[b-jqtb7vxbxd] {
    position: sticky;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.35rem 0.45rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ---- cellák ---- */
.gantt-cell[b-jqtb7vxbxd] {
    display: flex;
    padding: 3px;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.gantt-block[b-jqtb7vxbxd] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    padding: 4px 7px 5px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    align-self: flex-start;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.gantt-block:hover[b-jqtb7vxbxd] {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.gantt-block-open[b-jqtb7vxbxd] { box-shadow: var(--shadow-md); }

.gantt-block-chev[b-jqtb7vxbxd] { color: var(--text-muted); font-size: 0.6rem; flex-shrink: 0; }

/* ---- nyitott nézet: blokk tartalma (tételek) ---- */
.gantt-items[b-jqtb7vxbxd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    cursor: default;
}

.gantt-item[b-jqtb7vxbxd] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.gantt-item-title[b-jqtb7vxbxd] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.gantt-item-len[b-jqtb7vxbxd] {
    flex-shrink: 0;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.gantt-item-empty[b-jqtb7vxbxd] { font-style: italic; color: var(--text-muted); justify-content: center; }

.gantt-block-head[b-jqtb7vxbxd] { display: flex; align-items: center; gap: 5px; min-width: 0; }

.gantt-block-title[b-jqtb7vxbxd] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gantt-block-count[b-jqtb7vxbxd] {
    flex-shrink: 0;
    min-width: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gantt-bar-track[b-jqtb7vxbxd] {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    overflow: hidden;
}

.gantt-bar-fill[b-jqtb7vxbxd] { height: 100%; border-radius: 999px; transition: width 0.25s ease; }

.gantt-block-foot[b-jqtb7vxbxd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.gantt-empty[b-jqtb7vxbxd] {
    flex: 1;
    border-radius: 7px;
    background: repeating-linear-gradient(45deg,
        transparent, transparent 6px,
        color-mix(in srgb, var(--text-muted) 6%, transparent) 6px,
        color-mix(in srgb, var(--text-muted) 6%, transparent) 12px);
    opacity: 0.5;
}

/* a kiválasztás-sorrend buborék a rádió-gombokon */
.gantt-order-pill[b-jqtb7vxbxd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .gantt-radio-head[b-jqtb7vxbxd], .gantt-bar-fill[b-jqtb7vxbxd] { transition: none !important; }
}
/* /Components/Pages/Blokkok/Network.razor.rz.scp.css */
/* ============================================================
   Network.razor.css — hálózati wallok napi idővonalon.
   Oszlop = adó (master kiemelve), sor = óra (0–23, csak ahol van wall).
   Minden wall egy buborék: cél-hossz, reklám-dobozok, szignál-sorok.
   A Gantt nézet vizuális nyelvét követi (scoped CSS-isolation).
   ============================================================ */

.net-wrap[b-5pe4mkfsh4] {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 300px);
    scrollbar-width: auto;
    scrollbar-color: var(--text-muted) var(--bg-primary);
}

/* A rács a kártya szélességét kapja (definit méret), SOHA nem content-alapút:
   width:max-content alatt a flex-wrap/ellipsis nem érvényesül (a max-content méretezés
   egysorosnak számolja a chipeket és a nowrap címeket), így egy kiegyenlítés-előnézet
   több ezer px-re robbantotta az oszlopokat és vele az egész oldalt. Definit szélességnél
   a minmax() oszlop-korlát kemény: a tartalom törik/ellipszálódik, sok adónál pedig a
   .net-wrap görget vízszintesen — az oldal (body) soha. */
.net-grid[b-5pe4mkfsh4] {
    display: grid;
    width: 100%;
    background: var(--surface);
    isolation: isolate;
}

/* ---- fejléc ---- */
.net-corner[b-5pe4mkfsh4] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.net-head[b-5pe4mkfsh4] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.7rem;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.net-head-name[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.net-head-sub[b-5pe4mkfsh4] { font-size: 0.64rem; color: var(--text-muted); }

/* ---- master/slave badge ---- */
.net-badge[b-5pe4mkfsh4] {
    display: inline-flex;
    align-items: center;
    padding: 0 0.4rem;
    height: 15px;
    border-radius: 999px;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: 0.25rem;
}

/* A badge tömör, sötét chip színes felirattal — az áttetsző (color-mix) háttér az AKTÍV
   accent-gombon magenta-alapon-magenta lett, olvashatatlanul. Így minden háttéren látszik. */
.net-badge-master[b-5pe4mkfsh4] {
    background: var(--bg-primary);
    border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
    color: var(--warning);
}

.net-badge-slave[b-5pe4mkfsh4] {
    background: var(--bg-primary);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

/* ---- óra-oszlop (bal, ragadós) ---- */
.net-hour[b-5pe4mkfsh4] {
    position: sticky;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.5rem 0.45rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ---- cellák ---- */
.net-cell[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.net-empty[b-5pe4mkfsh4] {
    flex: 1;
    min-height: 14px;
    border-radius: 7px;
    background: repeating-linear-gradient(45deg,
        transparent, transparent 6px,
        color-mix(in srgb, var(--text-muted) 6%, transparent) 6px,
        color-mix(in srgb, var(--text-muted) 6%, transparent) 12px);
    opacity: 0.4;
}

/* ---- wall buborék ---- */
.net-bubble[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 9px;
    background: var(--surface);
    padding: 7px 9px 8px;
    box-shadow: var(--shadow-sm);
}

.net-bubble-master[b-5pe4mkfsh4] { border-left-color:var(--warning); }

.net-bubble-head[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.net-wno[b-5pe4mkfsh4] {
    flex-shrink: 0;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
}

.net-time[b-5pe4mkfsh4] {
    flex: 1;
    min-width: 0;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.net-target[b-5pe4mkfsh4] {
    flex-shrink: 0;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.net-bar-track[b-5pe4mkfsh4] {
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    overflow: hidden;
}

.net-bar-fill[b-5pe4mkfsh4] {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.25s ease;
}

.net-bubble-foot[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.net-ok[b-5pe4mkfsh4] { color: #22c55e; font-weight: 700; }
.net-warn[b-5pe4mkfsh4] { color:var(--warning); font-weight: 700; }

/* ---- chevron + hosszú-műsorsáv jelölés ---- */
.net-chev[b-5pe4mkfsh4] { flex-shrink: 0; font-size: 0.6rem; color: var(--text-muted); }

.net-long-tag[b-5pe4mkfsh4] {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 20%, transparent);
    color:var(--warning);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.net-bubble-long[b-5pe4mkfsh4] { border-left-color:var(--warning); }

/* ---- a wall tartalma: EGYETLEN időrendi lista, fentről le ---- */
.net-content[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    max-height: 320px;
    overflow-y: auto;
    cursor: default;
}

.net-row[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 5px;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

/* CLX-blokk (hírek/időjárás/reklámblokk): összecsukott „doboz", a hossz a lényeg */
.net-row-clx[b-5pe4mkfsh4] {
    background: color-mix(in srgb, #f59e0b 11%, var(--surface));
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.net-row-clx .net-row-ico[b-5pe4mkfsh4] { color:var(--warning); }
.net-row-clx .net-row-title[b-5pe4mkfsh4] { font-weight: 700; }
.net-row-clx .net-row-len[b-5pe4mkfsh4] { color: var(--text-primary); font-weight: 700; }

.net-row-clx-tag[b-5pe4mkfsh4] {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color:var(--warning);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* reklám (önálló): kiemelt „dobozos" sor */
.net-row-ad[b-5pe4mkfsh4] {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.net-row-ad .net-row-ico[b-5pe4mkfsh4] { color: var(--accent); }
.net-row-ad .net-row-title[b-5pe4mkfsh4] { font-weight: 600; }

/* szignál: könnyű sor */
.net-row-sig .net-row-ico[b-5pe4mkfsh4] { color: var(--text-muted); }

/* zene: halvány */
.net-row-song[b-5pe4mkfsh4] { opacity: 0.65; }
.net-row-song .net-row-ico[b-5pe4mkfsh4] { color: var(--text-muted); }

/* info/óraforduló: leghalványabb */
.net-row-info[b-5pe4mkfsh4] { opacity: 0.55; font-style: italic; }
.net-row-info .net-row-ico[b-5pe4mkfsh4] { color: var(--text-muted); }

.net-row-time[b-5pe4mkfsh4] {
    flex-shrink: 0;
    width: 56px;
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.net-row-ico[b-5pe4mkfsh4] { flex-shrink: 0; font-size: 0.62rem; }

.net-row-title[b-5pe4mkfsh4] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.net-row-len[b-5pe4mkfsh4] {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* voice / wav loose items */
.net-row-voice .net-row-ico[b-5pe4mkfsh4] { color: #F04E8C; }
.net-row-wav .net-row-ico[b-5pe4mkfsh4] { color: #38bdf8; }

/* ---- wall nyitó/záró sor (AWS/AWE marker) ---- */
.net-row-wallstart[b-5pe4mkfsh4],
.net-row-wallend[b-5pe4mkfsh4] {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    font-weight: 700;
}

.net-row-wallstart .net-row-ico[b-5pe4mkfsh4],
.net-row-wallend .net-row-ico[b-5pe4mkfsh4] { color: var(--accent); }

.net-row-wallstart .net-row-title[b-5pe4mkfsh4],
.net-row-wallend .net-row-title[b-5pe4mkfsh4] {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.net-row-wallend .net-row-len[b-5pe4mkfsh4] { color: var(--text-primary); font-weight: 700; }

/* ---- óraforduló (CLOCK) elválasztó sor ---- */
.net-row-clock[b-5pe4mkfsh4] {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
    margin: 2px 0;
}

.net-row-clock .net-row-ico[b-5pe4mkfsh4] { color: var(--text-secondary); }

.net-row-clock .net-row-title[b-5pe4mkfsh4] {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.64rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* ---- RDS Traffic Announcement jelölés ---- */
.net-row-ta-tag[b-5pe4mkfsh4] {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, #ef4444 20%, transparent);
    color: #ef4444;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ---- Dal-placeholder (Flag='O') — a Player futáskor tölti be a tényleges zenét ---- */
.net-row-placeholder[b-5pe4mkfsh4] { opacity: 0.5; }
.net-row-placeholder .net-row-ico[b-5pe4mkfsh4] { color: var(--text-muted); }
.net-row-placeholder .net-row-title[b-5pe4mkfsh4] { font-style: italic; }

.net-row-ph-tag[b-5pe4mkfsh4] {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-secondary);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ---- Kitöltő (compact fill) jelölés: legacy GlobalUniqID=2 ill. saját CWFILL sor ---- */
.net-row-fill-tag[b-5pe4mkfsh4] {
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--warning);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.net-row-fill-own[b-5pe4mkfsh4] {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

/* ---- CLX-blokk altípusok: hír / reklám / normál ---- */
.net-clx-chev[b-5pe4mkfsh4] { flex-shrink: 0; font-size: 0.56rem; color: var(--text-muted); }

/* alapból (normal) a meglévő amber .net-row-clx; az altípusok felülírják a színt */
.net-clx-news[b-5pe4mkfsh4] {
    background: color-mix(in srgb, #38bdf8 12%, var(--surface));
    border-color: color-mix(in srgb, #38bdf8 32%, transparent);
}

.net-clx-news .net-row-ico[b-5pe4mkfsh4] { color: #38bdf8; }

.net-clx-commertials[b-5pe4mkfsh4] {
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.net-clx-commertials .net-row-ico[b-5pe4mkfsh4] { color: var(--accent); }

.net-clx-tag-news[b-5pe4mkfsh4] { background: color-mix(in srgb, #38bdf8 22%, transparent); color: #38bdf8; }
.net-clx-tag-commertials[b-5pe4mkfsh4] { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.net-clx-tag-normal[b-5pe4mkfsh4] { background: color-mix(in srgb, #f59e0b 22%, transparent); color:var(--warning); }

/* ---- CLX kibontott belső tételek ---- */
.net-clx-children[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 1px 0 3px 22px;
    padding-left: 8px;
    border-left: 2px solid color-mix(in srgb, var(--text-muted) 25%, transparent);
}

.net-clx-child[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px;
    font-size: 0.64rem;
    color: var(--text-secondary);
}

.net-clx-child-ico[b-5pe4mkfsh4] { flex-shrink: 0; font-size: 0.58rem; color: var(--text-muted); }

.net-clx-child-title[b-5pe4mkfsh4] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.net-clx-child-len[b-5pe4mkfsh4] {
    flex-shrink: 0;
    font-size: 0.56rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* a kezdő/záró szignál és aláfestés könnyű kiemelése */
.net-clx-child-start .net-clx-child-ico[b-5pe4mkfsh4],
.net-clx-child-end .net-clx-child-ico[b-5pe4mkfsh4] { color: var(--accent); }
.net-clx-child-bed .net-clx-child-ico[b-5pe4mkfsh4] { color: #F04E8C; }

/* ---- kiegyenlítés-előnézet (step 3, csak számol) ---- */
.net-fill[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    padding: 5px 7px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.net-fill-ok[b-5pe4mkfsh4] { border-color: color-mix(in srgb, #22c55e 40%, transparent); }
.net-fill-warn[b-5pe4mkfsh4] { border-color: color-mix(in srgb, #f59e0b 40%, transparent); }

.net-fill-head[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.net-fill-head .bi-magic[b-5pe4mkfsh4] { color: var(--accent); }
.net-fill-head b[b-5pe4mkfsh4] { color: var(--text-primary); }
.net-fill-sep[b-5pe4mkfsh4] { color: var(--text-muted); }

.net-fill-tries[b-5pe4mkfsh4] {
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-secondary);
    font-size: 0.58rem;
    font-weight: 600;
}

.net-fill-resid[b-5pe4mkfsh4] {
    margin-left: auto;
    font-weight: 700;
    color: var(--text-secondary);
}

.net-fill-ok .net-fill-resid[b-5pe4mkfsh4] { color: #22c55e; }
.net-fill-warn .net-fill-resid[b-5pe4mkfsh4] { color:var(--warning); }

/* A javasolt kitöltők playlist-hű, FÜGGŐLEGES listája (a korábbi vízszintes chip-felhő
   helyett): egy sor = egy szignál, időponttal, ahogy a Playlist/CLX Diszpó mutatná. */
.net-fill-list[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 240px;
    overflow-y: auto;
}

.net-fill-row[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 5px;
    font-size: 0.66rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-secondary);
}

.net-fill-row-ico[b-5pe4mkfsh4] { flex-shrink: 0; font-size: 0.62rem; color: var(--accent); }

.net-fill-row-title[b-5pe4mkfsh4] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

/* Distinct (nem ismétlődik aznap) sor-változat */
.net-fill-row-distinct[b-5pe4mkfsh4] { background: color-mix(in srgb, #F04E8C 13%, transparent); }
.net-fill-row-distinct .net-fill-row-ico[b-5pe4mkfsh4] { color: #F04E8C; }

.net-fill-items[b-5pe4mkfsh4] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.net-fill-chip[b-5pe4mkfsh4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--text-primary);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.net-fill-chip .bi[b-5pe4mkfsh4] { color: var(--accent); flex-shrink: 0; }

.net-fill-chip-slot[b-5pe4mkfsh4] {
    flex-shrink: 0;
    min-width: 12px;
    padding: 0 3px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text-primary);
    font-size: 0.54rem;
    font-weight: 700;
    text-align: center;
}

/* Distinct (nem ismétlődik aznap) — eltérő kiemelés a sima kitöltő-szignáltól */
.net-fill-chip-distinct[b-5pe4mkfsh4] {
    background: color-mix(in srgb, #F04E8C 16%, transparent);
}

.net-fill-chip-distinct .bi[b-5pe4mkfsh4] { color: #F04E8C; }
.net-fill-chip-distinct .net-fill-chip-slot[b-5pe4mkfsh4] { background: color-mix(in srgb, #F04E8C 32%, transparent); }

.net-fill-note[b-5pe4mkfsh4] {
    font-size: 0.62rem;
    font-style: italic;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* ── Writer actions (apply / undo) ── */
.net-write[b-5pe4mkfsh4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.net-write-btn[b-5pe4mkfsh4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid var(--border, #2a2f3a);
    background: var(--surface-2, #1a1d27);
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
}

.net-write-btn:hover:not(:disabled)[b-5pe4mkfsh4] { color: var(--text-primary); border-color: var(--accent); }
.net-write-btn:disabled[b-5pe4mkfsh4] { opacity: 0.5; cursor: default; }

.net-write-live-ghost[b-5pe4mkfsh4] { border-color: #ef4444; color: #ef4444; }
.net-write-live[b-5pe4mkfsh4] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}
.net-write-confirm[b-5pe4mkfsh4] { font-size: 0.62rem; font-weight: 700; color: #ef4444; }
.net-write-busy .bi[b-5pe4mkfsh4] { color: var(--accent); }

.net-write-out[b-5pe4mkfsh4] {
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-wrap: anywhere;
}

.net-write-out-ok[b-5pe4mkfsh4] { background: color-mix(in srgb, #22c55e 16%, transparent); color: var(--success); }
.net-write-out-dry[b-5pe4mkfsh4] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-secondary); }
.net-write-out-err[b-5pe4mkfsh4] { background: color-mix(in srgb, #ef4444 16%, transparent); color: #ef4444; }

/* ── Day-health KPI strip ── */
.net-kpi-card[b-5pe4mkfsh4] { margin-bottom: 1rem; padding: 0.6rem 1rem; }

.net-kpi-strip[b-5pe4mkfsh4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    align-items: stretch;
}

.net-kpi[b-5pe4mkfsh4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.2rem 0.9rem 0.2rem 0.6rem;
    border-left: 3px solid var(--accent);
    min-width: 120px;
}

.net-kpi-good[b-5pe4mkfsh4] { border-left-color: #22c55e; }
.net-kpi-warn[b-5pe4mkfsh4] { border-left-color:var(--warning); }
.net-kpi-bad[b-5pe4mkfsh4] { border-left-color: #ef4444; }

.net-kpi-val[b-5pe4mkfsh4] {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.net-kpi-good .net-kpi-val[b-5pe4mkfsh4] { color: #22c55e; }
.net-kpi-warn .net-kpi-val[b-5pe4mkfsh4] { color:var(--warning); }
.net-kpi-bad .net-kpi-val[b-5pe4mkfsh4] { color: #ef4444; }

.net-kpi-lbl[b-5pe4mkfsh4] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.net-kpi-lbl .bi[b-5pe4mkfsh4] { color: var(--text-muted); }
.net-kpi-sub[b-5pe4mkfsh4] { font-size: 0.6rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    .net-bar-fill[b-5pe4mkfsh4] { transition: none !important; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===== 2027 hero (zeroth) card ===== */
.hero-section[b-0qtevwqi4p] {
    margin-bottom: 1.25rem;
}

.hero-card[b-0qtevwqi4p] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.6rem;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(223, 54, 119, 0.16), rgba(240, 78, 140, 0.10)),
        var(--surface);
    border: 1px solid rgba(240, 78, 140, 0.25);
    box-shadow: 0 10px 40px -12px rgba(223, 54, 119, 0.45);
    overflow: hidden;
}

.hero-card[b-0qtevwqi4p]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 220px at 0% 0%, rgba(223, 54, 119, 0.18), transparent 60%);
    pointer-events: none;
}

.hero-brand[b-0qtevwqi4p] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: relative;
}

.hero-logo[b-0qtevwqi4p] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #DF3677, #F04E8C);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 8px 20px -6px rgba(223, 54, 119, 0.7);
}

.hero-title[b-0qtevwqi4p] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.1;
}

.hero-subtitle[b-0qtevwqi4p] {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-greeting[b-0qtevwqi4p] {
    flex: 1;
    min-width: 180px;
    position: relative;
}

.hero-hello[b-0qtevwqi4p] {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 500;
}

.hero-meta[b-0qtevwqi4p] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: relative;
}

.hero-chip[b-0qtevwqi4p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.08);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-primary);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.hero-chip i[b-0qtevwqi4p] {
    color: var(--accent);
}

.hero-wx-emoji[b-0qtevwqi4p] {
    font-size: 1rem;
    line-height: 1;
}

/* Motor City gag tile */
.detroit-chip[b-0qtevwqi4p] {
    gap: 0.55rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(59, 130, 246, 0.14));
    border-color: rgba(59, 130, 246, 0.3);
}

.detroit-chip .detroit-name[b-0qtevwqi4p] {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.detroit-chip .detroit-wx[b-0qtevwqi4p],
.detroit-chip .detroit-time[b-0qtevwqi4p] {
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
}

.detroit-chip .detroit-time[b-0qtevwqi4p] {
    padding-left: 0.55rem;
    border-left: 1px solid var(--border);
}

.live-clock[b-0qtevwqi4p] {
    display: inline-flex;
    gap: 0.55rem;
    align-items: baseline;
}

.live-clock .lc-time[b-0qtevwqi4p] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.live-clock .lc-date[b-0qtevwqi4p] {
    opacity: 0.85;
}

/* ===== 2027 account (last) card ===== */
.account-section[b-0qtevwqi4p] {
    margin-top: 1.5rem;
    max-width: 440px;
}

.account-card[b-0qtevwqi4p] {
    border-radius: 20px;
    padding: 1.3rem;
    background: linear-gradient(160deg, rgba(240, 78, 140, 0.10), transparent), var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.account-head[b-0qtevwqi4p] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.account-avatar[b-0qtevwqi4p] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #DF3677, #F04E8C);
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.account-name[b-0qtevwqi4p] {
    font-weight: 700;
    color: var(--text-primary);
}

.account-status[b-0qtevwqi4p] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dot-online[b-0qtevwqi4p] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.account-row[b-0qtevwqi4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border);
}

.account-row-label[b-0qtevwqi4p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.account-row-label i[b-0qtevwqi4p] {
    color: var(--accent);
}

.account-select[b-0qtevwqi4p] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 140px;
}

.account-toggle[b-0qtevwqi4p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.82rem;
    transition: all 0.2s;
}

.account-toggle-knob[b-0qtevwqi4p] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    transition: all 0.2s;
}

.account-toggle.on[b-0qtevwqi4p] {
    background: linear-gradient(135deg, rgba(223, 54, 119, 0.18), rgba(240, 78, 140, 0.18));
    border-color: rgba(240, 78, 140, 0.4);
}

.account-toggle.on .account-toggle-knob[b-0qtevwqi4p] {
    background: #F04E8C;
    transform: translateX(2px);
}

.account-links[b-0qtevwqi4p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
}

.account-links a[b-0qtevwqi4p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s;
}

.account-links a:hover[b-0qtevwqi4p] {
    background: rgba(223, 54, 119, 0.12);
    color: var(--accent);
}

.account-logout[b-0qtevwqi4p] {
    margin-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.account-logout:hover[b-0qtevwqi4p] {
    background: rgba(239, 68, 68, 0.16);
}
/* /Components/Pages/Karbantartas/EmailSettings.razor.rz.scp.css */
/* ===== E-mail beállítások — kézbesítési útvonal hero ===== */

.mail-hero[b-qan7r6xyx3] {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.5rem 1.1rem;
    margin-bottom: 1rem;
}

.mail-hero-glow[b-qan7r6xyx3] {
    position: absolute;
    inset: -40% -10% auto;
    height: 130%;
    background:
        radial-gradient(60% 80% at 15% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        radial-gradient(50% 70% at 85% 10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
    pointer-events: none;
}

.mail-path[b-qan7r6xyx3] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: .4rem;
    flex-wrap: wrap;
}

.mail-node[b-qan7r6xyx3] {
    flex: 1 1 150px;
    min-width: 150px;
    text-align: center;
    padding: .4rem .3rem;
}

.mail-node-icon[b-qan7r6xyx3] {
    width: 52px;
    height: 52px;
    margin: 0 auto .45rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    transition: transform .18s ease, box-shadow .18s ease;
}

.mail-node:hover .mail-node-icon[b-qan7r6xyx3] { transform: translateY(-2px); }

.mail-node-icon.ok[b-qan7r6xyx3] {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}

.mail-node-icon.warn[b-qan7r6xyx3] {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
}

.mail-node-label[b-qan7r6xyx3] { font-weight: 600; font-size: .85rem; color: var(--text-primary); overflow-wrap: anywhere; }
.mail-node-sub[b-qan7r6xyx3] { font-size: .74rem; color: var(--text-muted); margin-top: .1rem; overflow-wrap: anywhere; }

.mail-wire[b-qan7r6xyx3] {
    position: relative;
    flex: 0 1 70px;
    min-width: 34px;
    align-self: flex-start;
    margin-top: 25px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
}

.mail-dot[b-qan7r6xyx3] {
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
}

.mail-path.sent .mail-dot[b-qan7r6xyx3] { animation: mail-travel-b-qan7r6xyx3 1.1s ease-in-out infinite; }
.mail-path.sent .mail-dot.d2[b-qan7r6xyx3] { animation-delay: .18s; }
.mail-path.sent .mail-dot.d3[b-qan7r6xyx3] { animation-delay: .36s; }

@keyframes mail-travel-b-qan7r6xyx3 {
    0% { left: 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: calc(100% - 8px); opacity: 0; }
}

.mail-hero-meta[b-qan7r6xyx3] {
    position: relative;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
}

.mail-chip[b-qan7r6xyx3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.mail-chip.ok[b-qan7r6xyx3] {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}

.mail-chip.warn[b-qan7r6xyx3] {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.mail-chip.muted[b-qan7r6xyx3] { color: var(--text-muted); font-weight: 500; }

/* ===== Szolgáltató-sablon kártyák ===== */

.provider-row[b-qan7r6xyx3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.provider-card[b-qan7r6xyx3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.3rem 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.provider-card:hover[b-qan7r6xyx3] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.provider-card.selected[b-qan7r6xyx3] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.provider-check[b-qan7r6xyx3] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #fff;
    background: var(--accent);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .16s ease, transform .16s ease;
}

.provider-card.selected .provider-check[b-qan7r6xyx3] { opacity: 1; transform: scale(1); }

.provider-logo[b-qan7r6xyx3] {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .2rem;
}

.provider-logo svg[b-qan7r6xyx3] { height: 34px; width: auto; }
.provider-logo.custom[b-qan7r6xyx3] { font-size: 2rem; color: var(--accent); }

.provider-name[b-qan7r6xyx3] { font-weight: 700; font-size: .95rem; }
.provider-sub[b-qan7r6xyx3] { font-size: .74rem; color: var(--text-muted); }

/* ===== Űrlap ===== */

.mailcfg-grid[b-qan7r6xyx3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.mailcfg-form[b-qan7r6xyx3] { display: flex; flex-direction: column; }

.mailcfg-label[b-qan7r6xyx3] {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: .85rem 0 .3rem;
}

.mailcfg-form .mailcfg-label:first-child[b-qan7r6xyx3] { margin-top: 0; }

.mailcfg-pw[b-qan7r6xyx3] { display: flex; align-items: center; gap: .4rem; }
.mailcfg-pw .form-input[b-qan7r6xyx3] { flex: 1; }

.mailcfg-hint[b-qan7r6xyx3] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: .7rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-alt));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
}

.mailcfg-hint i[b-qan7r6xyx3] { color: var(--accent); margin-top: .1rem; }

.mailcfg-hint.warn[b-qan7r6xyx3] {
    background: color-mix(in srgb, var(--warning) 9%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.mailcfg-hint.warn i[b-qan7r6xyx3] { color: var(--warning); }

/* Szegmentált választó (portszám, titkosítás) */

.seg-row[b-qan7r6xyx3] { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.seg[b-qan7r6xyx3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-primary);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}

.seg small[b-qan7r6xyx3] { font-weight: 500; font-size: .68rem; color: var(--text-muted); }

.seg:hover[b-qan7r6xyx3] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.seg.on[b-qan7r6xyx3] {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-alt));
    border-color: var(--accent);
    color: var(--accent);
}

.seg.on small[b-qan7r6xyx3] { color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); }

.seg-input[b-qan7r6xyx3] { width: 96px; }

.mailcfg-testrow[b-qan7r6xyx3] { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
/* /Components/Pages/Workboard.razor.rz.scp.css */
/* Workboard — Kanban board. Uses the app design tokens (magenta accent, dark-native). */

.wb-toolbar[b-xbpa68iy0s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wb-modes[b-xbpa68iy0s] { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wb-mode[b-xbpa68iy0s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--surface);
    border: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
}
.wb-mode + .wb-mode[b-xbpa68iy0s] { border-left: 1px solid var(--border); }
.wb-mode.active[b-xbpa68iy0s] { background: var(--accent); color: #fff; font-weight: 600; }

.wb-groupby[b-xbpa68iy0s], .wb-mine[b-xbpa68iy0s], .wb-search[b-xbpa68iy0s] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); }
.wb-mine input[b-xbpa68iy0s] { accent-color: var(--accent); }
.wb-search[b-xbpa68iy0s] { position: relative; }
.wb-search i[b-xbpa68iy0s] { color: var(--text-muted); }

.wb-input[b-xbpa68iy0s] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
}
.wb-input:focus[b-xbpa68iy0s] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }

.wb-truncated[b-xbpa68iy0s] { font-size: 0.72rem; color: var(--text-muted); font-style: italic; }

/* Board */
.wb-board[b-xbpa68iy0s] {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
}

.wb-col[b-xbpa68iy0s] {
    flex: 0 0 288px;
    max-width: 288px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.wb-col-head[b-xbpa68iy0s] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid var(--c, var(--border));
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.wb-col-dot[b-xbpa68iy0s] { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.wb-col-title[b-xbpa68iy0s] { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-col-count[b-xbpa68iy0s] {
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--c, var(--accent)) 15%, transparent);
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
}

.wb-col-body[b-xbpa68iy0s] {
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    min-height: 60px;
}
.wb-col-empty[b-xbpa68iy0s] { color: var(--text-muted); font-size: 0.8rem; text-align: center; padding: 0.5rem; }

/* Card */
.wb-card[b-xbpa68iy0s] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.65rem;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.wb-card:hover[b-xbpa68iy0s] { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.wb-card:active[b-xbpa68iy0s] { cursor: grabbing; }
.wb-card.done[b-xbpa68iy0s] { opacity: 0.6; }
.wb-card.done .wb-card-title[b-xbpa68iy0s] { text-decoration: line-through; }

.wb-card-title[b-xbpa68iy0s] { font-size: 0.83rem; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.wb-card-sub[b-xbpa68iy0s] { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.2rem; display: flex; align-items: center; gap: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wb-dots[b-xbpa68iy0s] { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.wb-dot[b-xbpa68iy0s] { width: 10px; height: 10px; border-radius: 50%; }
.wb-taskbadge[b-xbpa68iy0s] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
}

.wb-card-foot[b-xbpa68iy0s] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; flex-wrap: wrap; }
.wb-kind[b-xbpa68iy0s] { font-size: 0.66rem; color: var(--text-secondary); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0.05rem 0.4rem; border-radius: 999px; }

.wb-avatar[b-xbpa68iy0s] {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2, #F04E8C));
    color: #fff; font-size: 0.62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.wb-value[b-xbpa68iy0s] { font-size: 0.72rem; color: var(--text-primary); font-weight: 600; font-family: 'Rubik', var(--font, inherit); }
.wb-dates[b-xbpa68iy0s] { font-size: 0.68rem; color: var(--text-muted); margin-left: auto; }
.wb-due[b-xbpa68iy0s] { font-size: 0.68rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.2rem; }
.wb-due.overdue[b-xbpa68iy0s] { color: var(--danger, #E74C3C); font-weight: 600; }
.wb-prio[b-xbpa68iy0s] { color: var(--p); font-size: 0.75rem; }
/* /Components/Shared/InvoiceInfoPopover.razor.rz.scp.css */
/* Hover-revealed invoice-info popover. The comment/campaign render instantly from the passed parameters
   (pure CSS :hover, no server round-trip); the line items fill in shortly after via a one-time lazy load. */

.inv-info[b-gkfhyvocmg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    cursor: help;
}

.inv-info-icon[b-gkfhyvocmg] {
    color: var(--accent, #DF3677);
    font-size: 0.85rem;
    opacity: 0.75;
    transition: opacity 0.12s ease;
}

.inv-info:hover .inv-info-icon[b-gkfhyvocmg] {
    opacity: 1;
}

.inv-info-pop[b-gkfhyvocmg] {
    position: absolute;
    top: 1.4rem;
    left: 0;
    z-index: 1200;
    width: 30rem;
    max-width: 70vw;
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.7rem 0.8rem;
    background: var(--surface-elevated, #222636);
    border: 1px solid var(--border, #2E3347);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: var(--text, #E6E8F0);
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    /* hidden until hover */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}

.inv-info:hover .inv-info-pop[b-gkfhyvocmg] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Flip to the right edge when the icon sits late in a wide row (avoids clipping off-screen left). */
.inv-info-pop[b-gkfhyvocmg] {
    right: auto;
}

.inv-info-head[b-gkfhyvocmg] {
    font-weight: 700;
    color: var(--accent, #DF3677);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.inv-info-campaign[b-gkfhyvocmg] {
    font-weight: 600;
    color: var(--text, #E6E8F0);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.inv-info-period[b-gkfhyvocmg] {
    color: var(--text-muted, #6E7490);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.inv-info-comment[b-gkfhyvocmg] {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text, #E6E8F0);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
    max-height: 9rem;
    overflow-y: auto;
}

.inv-info-muted[b-gkfhyvocmg] {
    color: var(--text-muted, #6E7490);
    font-size: 0.78rem;
}

.inv-info-err[b-gkfhyvocmg] {
    color: var(--danger, #ef4444);
    margin: 0.3rem 0;
}

.inv-info-table[b-gkfhyvocmg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
    margin-top: 0.2rem;
}

.inv-info-table th[b-gkfhyvocmg] {
    text-align: left;
    color: var(--text-muted, #6E7490);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.35rem;
    border-bottom: 1px solid var(--border, #2E3347);
}

.inv-info-table td[b-gkfhyvocmg] {
    padding: 0.2rem 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
    vertical-align: top;
}

.inv-info-table .num[b-gkfhyvocmg] {
    text-align: right;
    white-space: nowrap;
}

.inv-info-desc[b-gkfhyvocmg] {
    max-width: 16rem;
    word-break: break-word;
}

.inv-info-btn[b-gkfhyvocmg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.74rem;
    background: var(--accent, #DF3677);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.inv-info-btn:disabled[b-gkfhyvocmg] {
    opacity: 0.6;
    cursor: default;
}

.spin[b-gkfhyvocmg] {
    animation: inv-info-spin-b-gkfhyvocmg 0.8s linear infinite;
    display: inline-block;
}

@keyframes inv-info-spin-b-gkfhyvocmg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* NotificationBell — header bell + dropdown. Uses the app design tokens. */

.nb-root[b-hej2e7qpuu] { position: relative; display: inline-flex; }

.nb-bell[b-hej2e7qpuu] {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.nb-bell:hover[b-hej2e7qpuu] { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.nb-badge[b-hej2e7qpuu] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface, #fff);
}

.nb-backdrop[b-hej2e7qpuu] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
}

.nb-panel[b-hej2e7qpuu] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 460px;
    overflow-y: auto;
    background: var(--surface-elevated, var(--surface));
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    z-index: 1401;
    animation: nbIn-b-hej2e7qpuu 0.14s ease;
}

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

.nb-head[b-hej2e7qpuu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    background: var(--surface-elevated, var(--surface));
}
.nb-head i[b-hej2e7qpuu] { color: var(--accent); }

.nb-mark[b-hej2e7qpuu] {
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.nb-mark:hover[b-hej2e7qpuu] { text-decoration: underline; }

.nb-empty[b-hej2e7qpuu] { padding: 1.25rem 0.85rem; color: var(--text-muted); font-size: 0.82rem; text-align: center; }

.nb-list[b-hej2e7qpuu] { display: flex; flex-direction: column; }

.nb-item[b-hej2e7qpuu] {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s ease;
}
.nb-item:hover[b-hej2e7qpuu] { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.nb-item.unread[b-hej2e7qpuu] { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.nb-item.unread .nb-title[b-hej2e7qpuu] { font-weight: 700; }

.nb-icon[b-hej2e7qpuu] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.nb-body[b-hej2e7qpuu] { flex: 1 1 auto; min-width: 0; }
.nb-title[b-hej2e7qpuu] { font-size: 0.82rem; color: var(--text-primary); }
.nb-text[b-hej2e7qpuu] { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-meta[b-hej2e7qpuu] { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; display: flex; gap: 0.3rem; }
/* /Components/Shared/OrderCollaboration.razor.rz.scp.css */
/* OrderCollaboration — Monday-style order workspace. Uses the app design tokens (magenta accent, dark-native). */

.oc-root[b-ct554o4o8d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oc-empty[b-ct554o4o8d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.oc-empty-line[b-ct554o4o8d] {
    padding: 0.75rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.oc-card[b-ct554o4o8d] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem 1rem;
    box-shadow: var(--shadow-sm);
}

.oc-card-head[b-ct554o4o8d] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.oc-card-head .oc-count[b-ct554o4o8d],
.oc-card-head .oc-toggle[b-ct554o4o8d] {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Pipeline stepper ─────────────────────────────────────────────────────── */
.oc-pipe[b-ct554o4o8d] { margin-bottom: 0.9rem; }
.oc-pipe:last-child[b-ct554o4o8d] { margin-bottom: 0; }

.oc-pipe-title[b-ct554o4o8d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.45rem;
}

.oc-pipe-title i[b-ct554o4o8d] { color: var(--pipe); }

.oc-pipe-current[b-ct554o4o8d] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: var(--pipe);
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
}

.oc-stepper[b-ct554o4o8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.oc-step[b-ct554o4o8d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.74rem;
    cursor: pointer;
    transition: all 0.14s ease;
    white-space: nowrap;
}

.oc-step .oc-step-dot[b-ct554o4o8d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--step);
    opacity: 0.45;
    transition: opacity 0.14s ease, box-shadow 0.14s ease;
}

.oc-step.past[b-ct554o4o8d] { color: var(--text-primary); border-color: color-mix(in srgb, var(--step) 45%, var(--border)); }
.oc-step.past .oc-step-dot[b-ct554o4o8d] { opacity: 0.85; }

.oc-step.current[b-ct554o4o8d] {
    color: #fff;
    background: var(--step);
    border-color: var(--step);
    font-weight: 700;
    box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--step) 60%, transparent);
}
.oc-step.current .oc-step-dot[b-ct554o4o8d] { opacity: 1; background: #fff; }

.oc-step.future[b-ct554o4o8d] { opacity: 0.7; }

.oc-step:not(.disabled):hover[b-ct554o4o8d] {
    transform: translateY(-1px);
    border-color: var(--step);
}
.oc-step.current:not(.disabled):hover[b-ct554o4o8d] { transform: translateY(-1px); }

.oc-step.disabled[b-ct554o4o8d] { cursor: default; opacity: 0.55; }

/* ── Suggestions ("billentés") ────────────────────────────────────────────── */
.oc-suggest[b-ct554o4o8d] {
    margin-top: 0.85rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.7rem;
}

.oc-suggest-head[b-ct554o4o8d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.oc-suggest-row[b-ct554o4o8d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    margin-bottom: 0.4rem;
}

.oc-suggest-row.sensitive[b-ct554o4o8d] {
    border-left-color: var(--warning, #F0A030);
    background: color-mix(in srgb, var(--warning, #F0A030) 6%, var(--surface));
}

.oc-suggest-body[b-ct554o4o8d] { flex: 1 1 auto; min-width: 0; }
.oc-suggest-desc[b-ct554o4o8d] { font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.15rem; }
.oc-suggest-actions[b-ct554o4o8d] { display: flex; gap: 0.35rem; flex: 0 0 auto; }

/* ── Task quick-add + list ────────────────────────────────────────────────── */
.oc-quickadd[b-ct554o4o8d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.oc-input[b-ct554o4o8d] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
}
.oc-input:focus[b-ct554o4o8d] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }
.oc-grow[b-ct554o4o8d] { flex: 1 1 180px; min-width: 140px; }
.oc-assignee-pick[b-ct554o4o8d] { flex: 0 0 190px; min-width: 160px; }
.oc-mention[b-ct554o4o8d] { flex: 0 0 190px; min-width: 160px; }

.oc-tasklist[b-ct554o4o8d] { display: flex; flex-direction: column; gap: 0.3rem; }

.oc-task[b-ct554o4o8d] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    transition: background 0.12s ease;
}
.oc-task:hover[b-ct554o4o8d] { background: var(--surface-hover, color-mix(in srgb, var(--accent) 3%, var(--bg-primary))); }
.oc-task.done[b-ct554o4o8d] { opacity: 0.6; }
.oc-task.done .oc-task-title[b-ct554o4o8d] { text-decoration: line-through; }

.oc-check[b-ct554o4o8d] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.oc-task-icon[b-ct554o4o8d] { color: var(--text-muted); }
.oc-task-main[b-ct554o4o8d] { flex: 1 1 auto; min-width: 0; }
.oc-task-title[b-ct554o4o8d] { font-size: 0.83rem; color: var(--text-primary); font-weight: 500; }
.oc-task-meta[b-ct554o4o8d] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.15rem; }

.oc-kind[b-ct554o4o8d] {
    font-size: 0.68rem;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
}

.oc-assignee-name[b-ct554o4o8d] { font-size: 0.72rem; color: var(--text-secondary); }

.oc-due[b-ct554o4o8d] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.oc-due.overdue[b-ct554o4o8d] { color: var(--danger, #E74C3C); font-weight: 600; }

.oc-prio[b-ct554o4o8d] { color: var(--p); font-size: 0.85rem; flex: 0 0 auto; }

/* ── Avatars, badges ──────────────────────────────────────────────────────── */
.oc-avatar[b-ct554o4o8d] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2, #F04E8C));
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    letter-spacing: 0.02em;
}
.oc-avatar-me[b-ct554o4o8d] { background: linear-gradient(135deg, #5BB8FF, #3F51B5); }

.oc-badge[b-ct554o4o8d] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.66rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.02rem 0.4rem;
}
.oc-badge-warn[b-ct554o4o8d] { color: var(--warning, #F0A030); border-color: color-mix(in srgb, var(--warning, #F0A030) 40%, var(--border)); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.oc-btn[b-ct554o4o8d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.12s ease;
}
.oc-btn:hover:not(:disabled)[b-ct554o4o8d] { border-color: var(--accent); color: var(--text-primary); }
.oc-btn:disabled[b-ct554o4o8d] { opacity: 0.5; cursor: default; }

.oc-btn-accent[b-ct554o4o8d] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.oc-btn-accent:hover:not(:disabled)[b-ct554o4o8d] { background: var(--accent2, #F04E8C); border-color: var(--accent2, #F04E8C); color: #fff; }

.oc-icon-btn[b-ct554o4o8d] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    flex: 0 0 auto;
}
.oc-icon-btn:hover:not(:disabled)[b-ct554o4o8d] { color: var(--danger, #E74C3C); background: color-mix(in srgb, var(--danger, #E74C3C) 10%, transparent); }

/* ── Comments ─────────────────────────────────────────────────────────────── */
.oc-composer[b-ct554o4o8d] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    align-items: flex-start;
}
.oc-composer textarea[b-ct554o4o8d] { resize: vertical; }
.oc-composer-side[b-ct554o4o8d] { display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; }

.oc-thread[b-ct554o4o8d] { display: flex; flex-direction: column; gap: 0.7rem; }

.oc-comment[b-ct554o4o8d] { display: flex; gap: 0.6rem; }
.oc-comment-body[b-ct554o4o8d] { flex: 1 1 auto; min-width: 0; }
.oc-comment-head[b-ct554o4o8d] { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.15rem; }
.oc-comment-head strong[b-ct554o4o8d] { font-size: 0.8rem; color: var(--text-primary); }
.oc-time[b-ct554o4o8d] { font-size: 0.68rem; color: var(--text-muted); }
.oc-comment-text[b-ct554o4o8d] {
    font-size: 0.83rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
}
.oc-comment-del[b-ct554o4o8d] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.oc-comment-del:hover:not(:disabled)[b-ct554o4o8d] { color: var(--danger, #E74C3C); }

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.oc-timeline[b-ct554o4o8d] { display: flex; flex-direction: column; }

.oc-tl-item[b-ct554o4o8d] {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-left: 2px solid color-mix(in srgb, var(--tl) 45%, var(--border));
    padding-left: 0.75rem;
    margin-left: 0.5rem;
}

.oc-tl-icon[b-ct554o4o8d] {
    width: 22px;
    height: 22px;
    margin-left: -1.6rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--tl) 50%, var(--border));
    color: var(--tl);
    font-size: 0.66rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.oc-tl-body[b-ct554o4o8d] { flex: 1 1 auto; min-width: 0; }
.oc-tl-title[b-ct554o4o8d] { font-size: 0.8rem; color: var(--text-primary); display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.oc-tl-text[b-ct554o4o8d] { font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.1rem; word-break: break-word; }
.oc-tl-user[b-ct554o4o8d] { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.05rem; }

.oc-toggle input[b-ct554o4o8d] { accent-color: var(--accent); }