@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================================
   Inovixia — Admin Shell
   One coherent dark design system. Full-bleed content (no centered island),
   dark surfaces throughout, sidebar visually joined to the content.
   ============================================================================ */

:root[b-lpcgv8beh7] {
    --ix-bg: #0a0e1a;
    --ix-surface: #0f1420;
    --ix-surface-2: #141925;
    --ix-card: #1a1f2e;
    --ix-card-hover: #1f2537;
    --ix-border: #232a3a;
    --ix-border-light: #2d3748;
    --ix-text: #f3f4f6;
    --ix-text-dim: #9ca3af;
    --ix-text-muted: #6b7280;
    --ix-accent: #6366f1;
    --ix-accent-2: #8b5cf6;
    --ix-accent-glow: 0 0 24px rgba(99, 102, 241, 0.35);
    --ix-green: #10b981;
    --ix-orange: #f59e0b;
    --ix-red: #ef4444;
    --ix-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --ix-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Page shell ---------------------------------------------------------- */
.page[b-lpcgv8beh7] {
    display: flex;
    min-height: 100vh;
    background-color: var(--ix-bg);
    position: relative;
}

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar[b-lpcgv8beh7] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 248px;
    background: var(--ix-surface);
    color: var(--ix-text);
    border-right: 1px solid var(--ix-border);
    z-index: 1000;
    transition: var(--ix-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .sidebar.collapsed[b-lpcgv8beh7] {
        width: 68px;
    }

.sidebar-header[b-lpcgv8beh7] {
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--ix-border);
    flex-shrink: 0;
}

.sidebar-brand[b-lpcgv8beh7] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ix-text);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

    .sidebar-brand:hover[b-lpcgv8beh7] {
        color: var(--ix-text);
    }

.brand-icon[b-lpcgv8beh7] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ix-accent) 0%, var(--ix-accent-2) 100%);
    border-radius: 9px;
    color: #fff;
    font-size: 17px;
    box-shadow: var(--ix-accent-glow);
}

.sidebar.collapsed .brand-text[b-lpcgv8beh7] {
    display: none;
}

.nav-scrollable[b-lpcgv8beh7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0;
}

    .nav-scrollable[b-lpcgv8beh7]::-webkit-scrollbar {
        width: 6px;
    }

    .nav-scrollable[b-lpcgv8beh7]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-lpcgv8beh7]::-webkit-scrollbar-thumb {
        background: var(--ix-border-light);
        border-radius: 3px;
    }

.sidebar-footer[b-lpcgv8beh7] {
    padding: 12px 20px;
    border-top: 1px solid var(--ix-border);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.server-time[b-lpcgv8beh7] {
    color: var(--ix-text-muted);
    font-size: 12px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.sidebar.collapsed .server-time[b-lpcgv8beh7] {
    display: none;
}

/* ---- Main content -------------------------------------------------------- */
.main-content[b-lpcgv8beh7] {
    margin-left: 264px;
    width: calc(100% - 264px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ix-bg);
    transition: var(--ix-transition);
}

.modern-sidebar.collapsed ~ .main-content[b-lpcgv8beh7] {
    margin-left: 70px;
    width: calc(100% - 70px);
}

/* ---- Top bar ------------------------------------------------------------- */
.top-bar[b-lpcgv8beh7] {
    position: sticky;
    top: 0;
    height: 65px;
    background: var(--ix-surface);
    border-bottom: 1px solid var(--ix-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 900;
    flex-shrink: 0;
}

.top-bar-left[b-lpcgv8beh7] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sidebar-toggle[b-lpcgv8beh7] {
    background: none;
    border: none;
    color: var(--ix-text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: var(--ix-transition);
}

    .sidebar-toggle:hover[b-lpcgv8beh7] {
        color: var(--ix-text);
        background: var(--ix-card);
    }

.breadcrumb[b-lpcgv8beh7] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 4px;
    font-size: 14px;
}

.breadcrumb-item[b-lpcgv8beh7] {
    display: flex;
    align-items: center;
    color: var(--ix-text-dim);
}

    .breadcrumb-item + .breadcrumb-item[b-lpcgv8beh7]::before {
        content: "/";
        margin: 0 8px;
        color: var(--ix-text-muted);
    }

    .breadcrumb-item a[b-lpcgv8beh7] {
        color: var(--ix-text-dim);
        text-decoration: none;
        transition: var(--ix-transition);
    }

        .breadcrumb-item a:hover[b-lpcgv8beh7] {
            color: var(--ix-accent);
        }

    .breadcrumb-item.active[b-lpcgv8beh7] {
        color: var(--ix-text);
        font-weight: 500;
    }

.top-bar-right[b-lpcgv8beh7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Notification + user buttons */
.notification-dropdown[b-lpcgv8beh7], .user-dropdown[b-lpcgv8beh7] {
    position: relative;
}

.notification-btn[b-lpcgv8beh7], .user-menu-btn[b-lpcgv8beh7] {
    background: transparent;
    border: none;
    color: var(--ix-text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--ix-transition);
}

    .notification-btn:hover[b-lpcgv8beh7], .user-menu-btn:hover[b-lpcgv8beh7] {
        color: var(--ix-text);
        background: var(--ix-card);
    }

.notification-badge[b-lpcgv8beh7] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ix-red);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-menu[b-lpcgv8beh7], .user-menu[b-lpcgv8beh7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--ix-card);
    border: 1px solid var(--ix-border-light);
    border-radius: 12px;
    box-shadow: var(--ix-shadow);
    z-index: 1100;
    overflow: hidden;
}
.user-menu[b-lpcgv8beh7] { width: 300px; }

/* JS-toggled visibility: hidden until ixToggleDrop adds .open to the container. */
.notification-menu[b-lpcgv8beh7], .user-menu[b-lpcgv8beh7] { display: none; }
.notification-dropdown.open .notification-menu[b-lpcgv8beh7],
.user-dropdown.open .user-menu[b-lpcgv8beh7] { display: block; }

/* Dark-theme menu contents. enhanced-layout.css styles these with LIGHT-theme greys
   (gray-800 text on a gray-50 header) — invisible on our dark card. Scoped selectors here
   carry higher specificity, so they win without !important. */
.user-menu-header[b-lpcgv8beh7] {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--ix-card-hover); border-bottom: 1px solid var(--ix-border);
}
.user-menu-header .user-info h6[b-lpcgv8beh7] { margin: 0; color: var(--ix-text); font-size: 14px; font-weight: 600; }
.user-menu-header .user-info small[b-lpcgv8beh7] { color: var(--ix-text-dim); }
.user-menu .p-2[b-lpcgv8beh7] { padding: 6px; }
.user-menu-item[b-lpcgv8beh7] {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    color: var(--ix-text); text-decoration: none; background: none; border: none;
    width: 100%; text-align: left; cursor: pointer; font-size: 13px; border-radius: 8px;
}
.user-menu-item:hover[b-lpcgv8beh7] { background: var(--ix-card-hover); color: var(--ix-text); }
.user-menu-item.text-danger[b-lpcgv8beh7] { color: #ef4444; }
.user-menu-item i[b-lpcgv8beh7] { font-size: 15px; opacity: .8; }
.user-menu-divider[b-lpcgv8beh7] { height: 1px; background: var(--ix-border); margin: 4px 0; }

.notification-empty[b-lpcgv8beh7] { padding: 30px 16px; text-align: center; color: var(--ix-text-dim); }
.notification-empty i[b-lpcgv8beh7] { font-size: 26px; display: block; margin-bottom: 8px; color: var(--ix-text-dim); }
.notification-empty p[b-lpcgv8beh7] { margin: 0; }

.notification-header[b-lpcgv8beh7] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ix-border);
    color: var(--ix-text);
    font-weight: 600;
}

.notification-item[b-lpcgv8beh7] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ix-border);
    color: var(--ix-text-dim);
    cursor: pointer;
    transition: var(--ix-transition);
}

    .notification-item:hover[b-lpcgv8beh7] {
        background: var(--ix-card-hover);
        color: var(--ix-text);
    }

/* ---- Content area — FULL BLEED (this was the bug) ------------------------ */
.content[b-lpcgv8beh7] {
    flex: 1;
    padding: 24px;
    background: var(--ix-bg);
}

/* Was: max-width:1400px; margin:0 auto — that centered everything into a
   narrow column and left big dead gutters. Content now fills the width. */
.content-wrapper[b-lpcgv8beh7] {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* ---- Footer -------------------------------------------------------------- */
.main-footer[b-lpcgv8beh7] {
    background: var(--ix-surface);
    border-top: 1px solid var(--ix-border);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    color: var(--ix-text-muted);
    font-size: 13px;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .sidebar[b-lpcgv8beh7] {
        transform: translateX(-100%);
    }

        .sidebar.mobile-open[b-lpcgv8beh7] {
            transform: translateX(0);
        }

    .main-content[b-lpcgv8beh7] {
        margin-left: 0;
        width: 100%;
    }

    .sidebar.collapsed ~ .main-content[b-lpcgv8beh7] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu Specific Styles */
.navbar-toggler[b-nzx1a2tcrf] {
    display: none;
}

.navbar-brand[b-nzx1a2tcrf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    height: 3.5rem;
    text-decoration: none;
    transition: var(--transition);
}

    .navbar-brand:hover[b-nzx1a2tcrf] {
        color: white;
        opacity: 0.9;
    }

.logo-icon[b-nzx1a2tcrf] {
    margin-right: 0.75rem;
    font-size: 1.5rem;
    color: var(--secondary-color);
}

/* Navigation Sections */
.nav-section[b-nzx1a2tcrf] {
    padding: 0.5rem 0;
}

.nav-category[b-nzx1a2tcrf] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    padding: 1rem 1.5rem 0.5rem;
    letter-spacing: 0.05rem;
}

/* Navigation Items */
.nav-item[b-nzx1a2tcrf] {
    position: relative;
    font-size: 0.9rem;
    padding: 0.125rem 1rem;
}

.nav-link[b-nzx1a2tcrf] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .nav-link:hover[b-nzx1a2tcrf] {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        transform: translateX(2px);
    }

    .nav-link.active[b-nzx1a2tcrf] {
        background-color: rgba(255, 255, 255, 0.15);
        color: white;
        font-weight: 500;
    }

        .nav-link.active[b-nzx1a2tcrf]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 24px;
            background-color: var(--secondary-color);
            border-radius: 0 2px 2px 0;
        }

/* Navigation Icons */
.nav-icon[b-nzx1a2tcrf] {
    margin-right: 0.75rem;
    width: 1.25rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.125rem;
}

.nav-text[b-nzx1a2tcrf] {
    flex: 1;
}

/* Submenu Styles */
.nav-submenu[b-nzx1a2tcrf] {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 1rem;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-sublink[b-nzx1a2tcrf] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 0.125rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: var(--transition);
    text-decoration: none;
}

    .nav-sublink:hover[b-nzx1a2tcrf] {
        background-color: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
    }

    .nav-sublink.active[b-nzx1a2tcrf] {
        background-color: rgba(255, 255, 255, 0.12);
        color: white;
    }

    .nav-sublink .nav-icon[b-nzx1a2tcrf] {
        font-size: 0.875rem;
        margin-right: 0.625rem;
    }

/* Expandable Menu */
.nav-link-expandable[b-nzx1a2tcrf] {
    cursor: pointer;
}

.nav-expand-icon[b-nzx1a2tcrf] {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

/* Scrollable Container */
.nav-scrollable[b-nzx1a2tcrf] {
    display: block;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 2rem;
}

    /* Custom Scrollbar */
    .nav-scrollable[b-nzx1a2tcrf]::-webkit-scrollbar {
        width: 6px;
    }

    .nav-scrollable[b-nzx1a2tcrf]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }

    .nav-scrollable[b-nzx1a2tcrf]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

        .nav-scrollable[b-nzx1a2tcrf]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

/* Footer Section */
.nav-footer[b-nzx1a2tcrf] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Collapsed State Helpers */
.sidebar.collapsed .nav-text[b-nzx1a2tcrf],
.sidebar.collapsed .nav-expand-icon[b-nzx1a2tcrf],
.sidebar.collapsed .nav-category[b-nzx1a2tcrf],
.sidebar.collapsed .nav-submenu[b-nzx1a2tcrf] {
    display: none;
}

.sidebar.collapsed .nav-link[b-nzx1a2tcrf] {
    justify-content: center;
    padding: 0.75rem;
}

.sidebar.collapsed .nav-icon[b-nzx1a2tcrf] {
    margin-right: 0;
    font-size: 1.25rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .navbar-toggler[b-nzx1a2tcrf] {
        display: block;
        appearance: none;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        padding: 0.5rem;
        position: absolute;
        right: 1rem;
        top: 0.75rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s ease;
    }

        .navbar-toggler:hover[b-nzx1a2tcrf] {
            background-color: rgba(255, 255, 255, 0.1);
        }

    .navbar-toggler-icon[b-nzx1a2tcrf] {
        display: block;
        width: 1.5rem;
        height: 0.125rem;
        background-color: rgba(255, 255, 255, 0.8);
        position: relative;
        margin: 0.25rem auto;
        transition: transform 0.2s ease;
    }

    .nav-scrollable[b-nzx1a2tcrf] {
        display: none;
    }

    .navbar-toggler[aria-expanded="true"] ~ .nav-scrollable[b-nzx1a2tcrf] {
        display: block;
    }
}

/* Animations */
@keyframes slideIn-b-nzx1a2tcrf {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-item[b-nzx1a2tcrf] {
    animation: slideIn-b-nzx1a2tcrf 0.3s ease forwards;
    opacity: 0;
}

    .nav-item:nth-child(1)[b-nzx1a2tcrf] {
        animation-delay: 0.05s;
    }

    .nav-item:nth-child(2)[b-nzx1a2tcrf] {
        animation-delay: 0.1s;
    }

    .nav-item:nth-child(3)[b-nzx1a2tcrf] {
        animation-delay: 0.15s;
    }

    .nav-item:nth-child(4)[b-nzx1a2tcrf] {
        animation-delay: 0.2s;
    }

    .nav-item:nth-child(5)[b-nzx1a2tcrf] {
        animation-delay: 0.25s;
    }

    .nav-item:nth-child(6)[b-nzx1a2tcrf] {
        animation-delay: 0.3s;
    }

    .nav-item:nth-child(7)[b-nzx1a2tcrf] {
        animation-delay: 0.35s;
    }

    .nav-item:nth-child(8)[b-nzx1a2tcrf] {
        animation-delay: 0.4s;
    }

    .nav-item:nth-child(9)[b-nzx1a2tcrf] {
        animation-delay: 0.45s;
    }

    .nav-item:nth-child(10)[b-nzx1a2tcrf] {
        animation-delay: 0.5s;
    }
/* /Components/Pages/Admin/CustomFields/AgentFields.razor.rz.scp.css */
.af-grid[b-924t2seyen] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .af-grid[b-924t2seyen] {
        grid-template-columns: 1fr;
    }
}

.af-table[b-924t2seyen] {
    width: 100%;
}

.af-mono[b-924t2seyen] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-secondary);
}

/* Retired fields stay visible — the values behind them are still real history — but read as inactive. */
.af-retired[b-924t2seyen] {
    opacity: 0.5;
}

.af-actions[b-924t2seyen] {
    text-align: right;
    white-space: nowrap;
}

.af-empty[b-924t2seyen] {
    color: var(--text-secondary);
    margin: 8px 0 0;
}

.af-slug[b-924t2seyen] {
    margin: -6px 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.af-slug code[b-924t2seyen] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
}

.af-msg[b-924t2seyen] {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
}

.af-msg--ok[b-924t2seyen] {
    background: rgba(46, 204, 113, 0.12);
    color: var(--green, #2ecc71);
}

.af-msg--bad[b-924t2seyen] {
    background: rgba(231, 76, 60, 0.12);
    color: var(--red, #e74c3c);
}
/* /Components/Pages/Admin/Exports/CallExports.razor.rz.scp.css */
.ex-page section[b-jxxg9vs5ld] {
    margin-bottom: 18px;
}

.ex-hint[b-jxxg9vs5ld] {
    color: var(--text-secondary);
    font-size: 12px;
}

.ex-mono[b-jxxg9vs5ld], .ex-code[b-jxxg9vs5ld] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ex-code[b-jxxg9vs5ld] {
    font-size: 12px;
    white-space: pre;
}

.ex-right[b-jxxg9vs5ld] {
    text-align: right;
}

.ex-rowactions[b-jxxg9vs5ld] {
    white-space: nowrap;
}

.ex-editor[b-jxxg9vs5ld] {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}

.ex-editor summary[b-jxxg9vs5ld] {
    cursor: pointer;
    font-weight: 600;
}

.ex-form[b-jxxg9vs5ld] {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    max-width: 720px;
}

.ex-two[b-jxxg9vs5ld] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ex-check[b-jxxg9vs5ld] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ex-actions[b-jxxg9vs5ld] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ex-pill[b-jxxg9vs5ld] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.08);
}

.ex-pill--ok[b-jxxg9vs5ld] {
    background: rgba(46, 204, 113, 0.16);
    color: var(--green, #2ecc71);
}

.ex-pill--warn[b-jxxg9vs5ld] {
    background: rgba(241, 196, 15, 0.16);
    color: var(--orange, #f1c40f);
}

.ex-pill--bad[b-jxxg9vs5ld] {
    background: rgba(231, 76, 60, 0.16);
    color: var(--red, #e74c3c);
}

.ex-ok[b-jxxg9vs5ld] {
    color: var(--green, #2ecc71);
}

.ex-bad[b-jxxg9vs5ld] {
    color: var(--red, #e74c3c);
}

.ex-msg[b-jxxg9vs5ld] {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
}

.ex-msg--ok[b-jxxg9vs5ld] {
    background: rgba(46, 204, 113, 0.12);
    color: var(--green, #2ecc71);
}

.ex-msg--bad[b-jxxg9vs5ld] {
    background: rgba(231, 76, 60, 0.12);
    color: var(--red, #e74c3c);
}
/* /Components/Pages/Admin/LiveOps/LiveOps.razor.rz.scp.css */
/* ==========================================================================
   LIVE OPS
   Built entirely on Inovixia tokens — no hardcoded hex — so it reskins with
   [data-theme] like the rest of the app.

   The one idea worth keeping from VICIdial's realtime screen: colour encodes
   TIME IN STATE, not just state. .esc-0..3 is that ramp. A floor of thirty
   agents is unreadable if every "on call" tile looks identical; it's instantly
   readable when the one stuck for 20 minutes is the only hot tile on screen.
   ========================================================================== */

.lo[b-i93q9mfubh] {
    padding: var(--space-6);
    font-family: var(--font);
    color: var(--text);

    /* Fill the viewport and let the floor take the slack. A wallboard-style screen
       that collapses into the top third and leaves two-thirds black reads as broken
       rather than as "quiet shift". */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---- header ---- */
.lo-head[b-i93q9mfubh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.lo-title[b-i93q9mfubh] { display: flex; align-items: center; gap: var(--space-3); }
.lo-title h1[b-i93q9mfubh] { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.lo-title p[b-i93q9mfubh] { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }

/* Connection state as a pulse rather than a word — it's ambient info. */
.lo-pulse[b-i93q9mfubh] {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--green);
    animation: lo-ping-b-i93q9mfubh 2s var(--ease) infinite;
    flex: none;
}
.lo-pulse.off[b-i93q9mfubh] { background: var(--red); animation: none; }

@keyframes lo-ping-b-i93q9mfubh {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.lo-controls[b-i93q9mfubh] { display: flex; gap: var(--space-2); }

.lo-select[b-i93q9mfubh] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font);
    transition: border-color var(--dur-fast) var(--ease);
}
.lo-select:hover[b-i93q9mfubh] { border-color: var(--border-strong); }
.lo-select:focus[b-i93q9mfubh] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.lo-demo-btn[b-i93q9mfubh] {
    padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
    background: var(--surface); color: var(--text); border: 1px dashed var(--border-strong);
}
.lo-demo-btn:hover:not(:disabled)[b-i93q9mfubh] { border-color: var(--accent); color: var(--accent); }
.lo-demo-btn:disabled[b-i93q9mfubh] { opacity: 0.6; cursor: default; }
.lo-demo-btn--clear[b-i93q9mfubh] { border-style: solid; border-color: var(--red, #ef4444); color: var(--red, #ef4444); }

/* ---- stat strip ---- */
/* ONE horizontal strip across the full width — never a second row.
   Was a grid with auto-fill/minmax(108px), which wrapped the moment the tiles
   couldn't all fit; combined with the totals living in their own <section>, the
   header always cost two rows. Flex with `flex:1 1 0` lets every tile share the
   width evenly and stay on a single line. On a genuinely narrow screen the tiles
   hold a readable min-width and the strip scrolls sideways rather than wrapping. */
.lo-stats[b-i93q9mfubh] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: thin;
}
.lo-stats > .lo-stat[b-i93q9mfubh] { flex: 1 1 0; min-width: 88px; }

/* Hairline divider where the live counters end and today's cumulative totals begin,
   so merging the two strips doesn't lose the visual grouping. */
.lo-stat--sep[b-i93q9mfubh] { position: relative; margin-left: 6px; }
.lo-stat--sep[b-i93q9mfubh]::before {
    content: ""; position: absolute; left: -7px; top: 12%; bottom: 12%;
    width: 1px; background: var(--border-soft);
}

/* Compact on purpose: every pixel the header spends is a row the floor loses. Still
   the first thing scanned, so the numbers stay mono and large-ish — just tighter. */
.lo-stat[b-i93q9mfubh] {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 6px var(--space-3);
    display: flex; flex-direction: column; gap: 0;
}
.lo-stat-v[b-i93q9mfubh] { font-size: 19px; line-height: 1.15; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; }
.lo-stat-k[b-i93q9mfubh] { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

.lo-stat-v.accent[b-i93q9mfubh] { color: var(--green); }
.lo-stat-v.warn[b-i93q9mfubh]   { color: var(--orange); }
.lo-stat-v.bad[b-i93q9mfubh]    { color: var(--red); }
.lo-stat-v.good[b-i93q9mfubh]   { color: var(--green); }
.lo-stat-v.cyan[b-i93q9mfubh]   { color: var(--cyan); }

/* Floor time-clock strip */
.lo-timestrip[b-i93q9mfubh] {
    display: flex; align-items: center; gap: 16px;
    background: var(--card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 8px 14px; margin-top: var(--space-2);
}
.lo-timestrip-label[b-i93q9mfubh] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; }
.lo-timestrip-items[b-i93q9mfubh] { display: flex; gap: 22px; flex-wrap: wrap; }
.lo-ts[b-i93q9mfubh] { display: flex; align-items: center; gap: 7px; }
.lo-ts i[b-i93q9mfubh] { color: var(--text-muted); font-size: 15px; }
.lo-ts-v[b-i93q9mfubh] { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.lo-ts-k[b-i93q9mfubh] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }

/* Per-agent today time columns */
.c-t2[b-i93q9mfubh] { width: 58px; font-family: var(--mono); color: var(--text-dim); font-size: 12px; }
td.c-t2.mono[b-i93q9mfubh] { color: var(--text-dim); }

/* ---- dialer health ---- */
.lo-dialers[b-i93q9mfubh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-3);
}

.lo-dialer[b-i93q9mfubh] {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}
.lo-dialer.risk[b-i93q9mfubh] { border-left-color: var(--red); background: var(--red-soft); }

.lo-dialer-head[b-i93q9mfubh] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.lo-dialer-name[b-i93q9mfubh] { font-weight: 600; font-size: 14px; }

.lo-chip[b-i93q9mfubh] {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--accent-soft); color: var(--accent-hover);
    padding: 2px 8px; border-radius: var(--radius-pill);
}

.lo-dialer-grid[b-i93q9mfubh] { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.lo-dv[b-i93q9mfubh] { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; }
.lo-dk[b-i93q9mfubh] { display: block; font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.lo-dv.bad[b-i93q9mfubh] { color: var(--red); }
.lo-dv.warn[b-i93q9mfubh] { color: var(--orange); }
.lo-dv.good[b-i93q9mfubh] { color: var(--green); }
.lo-dialer-note[b-i93q9mfubh] { margin-top: var(--space-3); font-size: 11px; color: var(--orange); }

/* ---- layout ---- */
.lo-body[b-i93q9mfubh] {
    /* Vertical stack: Calls Waiting → Queues → the Agent Floor, which is the point of the
       screen and gets all the leftover height. Order is set per-panel below. */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
    min-height: 0;
}

/* Calls Waiting and Queues are compact strips above the dominant Agent Floor. */
/* Calls Waiting on top (what needs an agent NOW), then the Agent Floor as the primary/biggest
   display, then the per-queue SLA panel as secondary reference below it. */
.lo-calls[b-i93q9mfubh]  { order: 1; flex: none; }
.lo-floor[b-i93q9mfubh]  { order: 2; flex: 1; min-height: 0; }
.lo-queues[b-i93q9mfubh] { order: 3; flex: none; max-height: 300px; }

.lo-panel[b-i93q9mfubh] {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
}

/* The floor scrolls internally rather than pushing the page — a supervisor should
   never lose the stat strip to scroll past agents. */
.lo-floor[b-i93q9mfubh] { overflow: hidden; }
.lo-floor .lo-agents[b-i93q9mfubh] { overflow-y: auto; align-content: start; flex: 1; }
/* The agent table is the dominant panel — let it fill the floor and scroll internally. */
.lo-floor .lo-tablewrap[b-i93q9mfubh] { flex: 1; min-height: 0; overflow-y: auto; }
.lo-queues[b-i93q9mfubh] { overflow-y: auto; }
.lo-panel-head[b-i93q9mfubh] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.lo-panel-head h2[b-i93q9mfubh] { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.lo-hint[b-i93q9mfubh] { font-size: 11px; color: var(--text-dim); }

/* ---- agent floor: dense ops table ----
   Sized so 40+ agents fit on one screen without scrolling. Cards looked nicer and
   fit about a dozen; a supervisor needs the whole floor at once, so density wins.
   Rows are ~26px: 12px text, tight padding, tabular numerals so the clocks don't
   jitter as digits change. */

.lo-tablewrap[b-i93q9mfubh] { flex: 1; overflow-y: auto; min-height: 0; }

.lo-table[b-i93q9mfubh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.lo-table thead th[b-i93q9mfubh] {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface);
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.lo-row[b-i93q9mfubh] {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--dur-fast) var(--ease);
}
.lo-row:hover[b-i93q9mfubh] { background: var(--card-hover); }
.lo-row.sel[b-i93q9mfubh] { background: var(--accent-soft); }

/* Row height is a budget, not a taste call. 4+4 padding + 14.4 line + 1 border ≈ 23px,
   so a ~900px panel on a 1080p screen holds ~38 rows plus the sticky header — which is
   the "whole floor at once" target. line-height is pinned rather than inherited so the
   number is predictable instead of drifting with the theme's font. */
.lo-row td[b-i93q9mfubh] {
    padding: 4px 8px;
    line-height: 1.2;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-st[b-i93q9mfubh]    { width: 18px; }
.c-agent[b-i93q9mfubh] { max-width: 180px; font-weight: 600; }
.c-status[b-i93q9mfubh]{ width: 90px;  color: var(--text-dim); }
.c-time[b-i93q9mfubh]  { width: 68px; }
.c-cust[b-i93q9mfubh]  { width: 130px; }
.c-route[b-i93q9mfubh] { max-width: 170px; }
.c-list[b-i93q9mfubh]  { max-width: 150px; }
.c-calls[b-i93q9mfubh] { width: 48px; text-align: right; font-family: var(--mono); color: var(--text-dim); }
.c-mon[b-i93q9mfubh]   { width: 108px; }

.lo-dot[b-i93q9mfubh] { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.lo-timer[b-i93q9mfubh] { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.lo-phone[b-i93q9mfubh] { font-family: var(--mono); }
.lo-none[b-i93q9mfubh]  { color: var(--text-muted); }

.lo-tag[b-i93q9mfubh] {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
}
/* Inbound vs outbound get different colours: which queue is eating the floor is
   the first thing a supervisor asks. */
.lo-tag.in[b-i93q9mfubh]  { background: var(--cyan-soft);   color: var(--cyan);   border-color: transparent; }
.lo-tag.out[b-i93q9mfubh] { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }
/* Lead list the dialed lead came from — neutral chip, secondary to campaign/ingroup. */
.lo-tag.list[b-i93q9mfubh] { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }

/* Calls Waiting rows — left border in the ingroup's colour. */
.lo-callrow[b-i93q9mfubh] { border-left: 3px solid var(--ingc, transparent); }
.lo-calltable .c-dir[b-i93q9mfubh] { width: 30px; text-align: center; font-size: 15px; }
.lo-calltable .bi-telephone-inbound[b-i93q9mfubh] { color: var(--green); }
.lo-calltable .bi-telephone-outbound[b-i93q9mfubh] { color: var(--accent-hover); }

/* Route action + modal for a waiting call. */
.lo-routebtn[b-i93q9mfubh] {
    background: var(--accent-soft); color: var(--accent-hover);
    border: 1px solid transparent; border-radius: 8px;
    padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.lo-routebtn:hover[b-i93q9mfubh] { background: var(--accent); color: #fff; }

.lo-routemodal[b-i93q9mfubh] {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(440px, 92vw); z-index: 1200;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
}
.lo-routemodal .lo-drawer-head[b-i93q9mfubh] { padding: 16px; }
.lo-routetabs[b-i93q9mfubh] { display: flex; gap: 6px; padding: 0 16px; }
.lo-routetabs button[b-i93q9mfubh] {
    flex: 1; padding: 8px; background: transparent; color: var(--text-dim);
    border: 1px solid var(--border-soft); border-radius: 8px;
    cursor: pointer; font-size: 13px; font-weight: 600;
}
.lo-routetabs button.on[b-i93q9mfubh] { background: var(--accent); color: #fff; border-color: var(--accent); }
.lo-routebody[b-i93q9mfubh] { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.lo-routebody label[b-i93q9mfubh] { font-size: 12px; color: var(--text-dim); }
.lo-routefoot[b-i93q9mfubh] { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
.lo-btn[b-i93q9mfubh] { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--border-soft); }
.lo-btn.ghost[b-i93q9mfubh] { background: transparent; color: var(--text-dim); }
.lo-btn.go[b-i93q9mfubh] { background: var(--accent); color: #fff; border-color: var(--accent); }
.lo-btn:disabled[b-i93q9mfubh] { opacity: .6; cursor: default; }

/* base state dot colours — one hue per state (see heat map below) */
.lo-row.oncall .lo-dot[b-i93q9mfubh] { background: var(--green); }
.lo-row.avail  .lo-dot[b-i93q9mfubh] { background: var(--blue, #3b82f6); }
.lo-row.paused .lo-dot[b-i93q9mfubh] { background: var(--yellow, #eab308); }
.lo-row.idle   .lo-dot[b-i93q9mfubh] { background: var(--purple, #a855f7); }
.lo-row.disconnected .lo-dot[b-i93q9mfubh] { background: var(--text-muted); }

/* -------- heat map --------
   Each STATE owns ONE hue; the shade simply DEEPENS the longer the agent sits in it. Colour never
   changes meaning with time — a long call is a GOOD thing, so on-call stays green and just gets
   richer, never red. RED is reserved for states that are BAD when they run long: paused too long,
   stuck in wrap/dispo, dead calls. That's the ViciDial reading — hue = what, depth = how long.

   ON CALL — green, deepening (all good, longer = more engaged). */
.lo-row.oncall[b-i93q9mfubh]       { background: color-mix(in srgb, var(--green) 12%, transparent); border-left-color: var(--green); }
.lo-row.oncall.esc-1[b-i93q9mfubh] { background: color-mix(in srgb, var(--green) 22%, transparent); }
.lo-row.oncall.esc-2[b-i93q9mfubh] { background: color-mix(in srgb, var(--green) 32%, transparent); }
.lo-row.oncall.esc-3[b-i93q9mfubh] { background: color-mix(in srgb, var(--green) 44%, transparent); }

/* WAITING / available — blue, deepening (longer wait = brighter "free agent, use me"). */
.lo-row.avail[b-i93q9mfubh]        { background: color-mix(in srgb, var(--blue, #3b82f6) 10%, transparent); border-left-color: var(--blue, #3b82f6); }
.lo-row.avail.esc-1[b-i93q9mfubh]  { background: color-mix(in srgb, var(--blue, #3b82f6) 18%, transparent); }
.lo-row.avail.esc-2[b-i93q9mfubh]  { background: color-mix(in srgb, var(--blue, #3b82f6) 27%, transparent); }
.lo-row.avail.esc-3[b-i93q9mfubh]  { background: color-mix(in srgb, var(--blue, #3b82f6) 37%, transparent); }

/* PAUSED — yellow, deepening to orange then RED (paused too long is a problem). */
.lo-row.paused[b-i93q9mfubh]       { background: color-mix(in srgb, var(--yellow, #eab308) 12%, transparent); border-left-color: var(--yellow, #eab308); }
.lo-row.paused.esc-1[b-i93q9mfubh] { background: color-mix(in srgb, var(--yellow, #eab308) 22%, transparent); }
.lo-row.paused.esc-2[b-i93q9mfubh] { background: color-mix(in srgb, var(--orange) 30%, transparent); border-left-color: var(--orange); }
.lo-row.paused.esc-3[b-i93q9mfubh] { background: color-mix(in srgb, var(--red) 34%, transparent); border-left-color: var(--red); }

/* WRAP / DISPO — violet, deepening to RED when stuck too long. */
.lo-row.idle[b-i93q9mfubh]         { background: color-mix(in srgb, var(--purple, #a855f7) 10%, transparent); border-left-color: var(--purple, #a855f7); }
.lo-row.idle.esc-1[b-i93q9mfubh]   { background: color-mix(in srgb, var(--purple, #a855f7) 18%, transparent); }
.lo-row.idle.esc-2[b-i93q9mfubh]   { background: color-mix(in srgb, var(--purple, #a855f7) 27%, transparent); }
.lo-row.idle.esc-3[b-i93q9mfubh]   { background: color-mix(in srgb, var(--red) 32%, transparent); border-left-color: var(--red); }

/* DISCONNECTED — on shift but no live circuit (past the presence grace). Muted and greyed so it
   reads as "still here, just not reachable", not as an alarm. Not routed to until they reconnect. */
.lo-row.disconnected[b-i93q9mfubh] { background: color-mix(in srgb, var(--text-muted) 10%, transparent); border-left-color: var(--text-muted); opacity: .72; }

/* Only the BAD-too-long tiers pulse their timer red — never a long (good) call or a long wait. */
.lo-row.paused.esc-3 .lo-timer[b-i93q9mfubh],
.lo-row.idle.esc-3 .lo-timer[b-i93q9mfubh] { color: var(--red); animation: lo-attn-b-i93q9mfubh 1.6s var(--ease) infinite; }

@keyframes lo-attn-b-i93q9mfubh {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ---- inline monitor buttons ---- */
.lo-mon[b-i93q9mfubh] { display: inline-flex; gap: 3px; }

.lo-mon .m[b-i93q9mfubh] {
    width: 22px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lo-mon .m:hover:not(:disabled)[b-i93q9mfubh] { color: var(--text); border-color: var(--border-strong); }
.lo-mon .m:disabled[b-i93q9mfubh] { opacity: 0.4; cursor: not-allowed; }

/* Each mode owns a colour — these are escalating levels of intrusion, not
   interchangeable buttons. */
.lo-mon .m.l.on[b-i93q9mfubh] { background: var(--cyan);   border-color: var(--cyan);   color: #04222b; }
.lo-mon .m.w.on[b-i93q9mfubh] { background: var(--orange); border-color: var(--orange); color: #2b1a02; }
.lo-mon .m.b.on[b-i93q9mfubh] { background: var(--red);    border-color: var(--red);    color: #fff; }
.lo-mon .m.x[b-i93q9mfubh]    { color: var(--red); border-color: var(--red); }
.lo-mon .m.x:hover:not(:disabled)[b-i93q9mfubh] { background: var(--red); color: #fff; }

/* ---- queues: per-ingroup staffing / health board ---- */
.lo-queue[b-i93q9mfubh] { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.lo-queue:last-child[b-i93q9mfubh] { border-bottom: 0; }
.lo-queue-top[b-i93q9mfubh] { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.lo-queue-name[b-i93q9mfubh] { font-size: 13px; font-weight: 600; }

.lo-queue-flags[b-i93q9mfubh] { display: flex; gap: 4px; }
.lo-qflag[b-i93q9mfubh] { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-pill); white-space: nowrap; }
.lo-qflag.bad[b-i93q9mfubh]  { background: var(--red);    color: #fff; }
.lo-qflag.warn[b-i93q9mfubh] { background: var(--orange); color: #2b1a02; }

/* Six compact stat cells: Waiting / Available / On call / Longest / Handled / Abandon% */
.lo-qmetrics[b-i93q9mfubh] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; }
.lo-qm[b-i93q9mfubh] { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: var(--surface-2); border-radius: var(--radius-sm); }
.lo-qm-v[b-i93q9mfubh] { font-family: var(--mono); font-size: 14px; font-weight: 700; line-height: 1.1; }
.lo-qm-l[b-i93q9mfubh] { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; }
.lo-qm.good .lo-qm-v[b-i93q9mfubh] { color: var(--green); }
.lo-qm.warn .lo-qm-v[b-i93q9mfubh] { color: var(--orange); }
.lo-qm.bad  .lo-qm-v[b-i93q9mfubh] { color: var(--red); }
.lo-qm.hot  .lo-qm-v[b-i93q9mfubh] { color: var(--orange); }

/* Understaffed (callers waiting, nobody available) is the row a supervisor must see first —
   flag it with a red rail + wash. SLA breach without understaffing gets the amber rail. */
.lo-queue.understaffed[b-i93q9mfubh] { border-left: 3px solid var(--red); background: var(--red-soft); padding-left: var(--space-3); border-radius: var(--radius-sm); }
.lo-queue.breach:not(.understaffed)[b-i93q9mfubh] { border-left: 3px solid var(--orange); padding-left: var(--space-3); border-radius: var(--radius-sm); }

.lo-empty[b-i93q9mfubh] { text-align: center; padding: var(--space-7) var(--space-4); }
.lo-empty p[b-i93q9mfubh] { margin: 0; font-size: 14px; color: var(--text-dim); }
.lo-empty span[b-i93q9mfubh] { font-size: 12px; color: var(--text-muted); }

/* ---- drawer ---- */
.lo-scrim[b-i93q9mfubh] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 40;
    animation: lo-fade-b-i93q9mfubh var(--dur-base) var(--ease);
}

@keyframes lo-fade-b-i93q9mfubh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lo-drawer[b-i93q9mfubh] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 92vw);
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 41;
    padding: var(--space-6);
    overflow-y: auto;
    animation: lo-slide-b-i93q9mfubh var(--dur-slow) var(--ease);
}

@keyframes lo-slide-b-i93q9mfubh {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.lo-drawer-head[b-i93q9mfubh] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); }
.lo-drawer-head h3[b-i93q9mfubh] { margin: 0; font-size: 18px; font-weight: 700; }
.lo-drawer-sub[b-i93q9mfubh] { font-size: 12px; color: var(--text-dim); }

.lo-x[b-i93q9mfubh] {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); border-radius: var(--radius-sm);
    width: 30px; height: 30px; cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lo-x:hover[b-i93q9mfubh] { color: var(--text); border-color: var(--border-strong); }

.lo-callcard[b-i93q9mfubh] {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.lo-callcard-row[b-i93q9mfubh] { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.lo-callcard-row span[b-i93q9mfubh] { color: var(--text-dim); }

.lo-modes[b-i93q9mfubh] { display: flex; flex-direction: column; gap: var(--space-2); }

.lo-mode[b-i93q9mfubh] {
    display: flex; flex-direction: column; gap: 2px;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    color: var(--text);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lo-mode:hover:not(:disabled)[b-i93q9mfubh] { border-color: var(--border-strong); background: var(--card-hover); }
.lo-mode:disabled[b-i93q9mfubh] { opacity: 0.5; cursor: not-allowed; }
.lo-mode-t[b-i93q9mfubh] { font-weight: 600; font-size: 13px; }
.lo-mode-d[b-i93q9mfubh] { font-size: 11px; color: var(--text-dim); }

/* Each mode owns a colour so the active one reads at a glance — these are
   escalating levels of intrusion, not interchangeable buttons. */
.lo-mode.listen.on[b-i93q9mfubh]  { border-color: var(--cyan);   background: var(--cyan-soft); }
.lo-mode.whisper.on[b-i93q9mfubh] { border-color: var(--orange); background: var(--orange-soft); }
.lo-mode.barge.on[b-i93q9mfubh]   { border-color: var(--red);    background: var(--red-soft); box-shadow: var(--glow-red); }

.lo-stop[b-i93q9mfubh] {
    width: 100%; margin-top: var(--space-4);
    background: transparent; border: 1px solid var(--red); color: var(--red);
    border-radius: var(--radius-sm); padding: 10px;
    font-family: var(--font); font-weight: 600; font-size: 13px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lo-stop:hover:not(:disabled)[b-i93q9mfubh] { background: var(--red); color: #fff; }

.lo-note[b-i93q9mfubh] { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5; }
.lo-note.warn[b-i93q9mfubh] { background: var(--orange-soft); color: var(--orange); }
.lo-note.bad[b-i93q9mfubh]  { background: var(--red-soft);    color: var(--red); }
.lo-note.good[b-i93q9mfubh] { background: var(--cyan-soft);   color: var(--cyan); }
.lo-note strong[b-i93q9mfubh] { display: block; font-weight: 600; }

/* Idle state — still show the modes, just make it clear no live call is attached yet. */
.lo-callcard.idle[b-i93q9mfubh] {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: 13px; color: var(--text-dim);
}
.lo-idle-dot[b-i93q9mfubh] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted); flex: 0 0 auto;
}

.lo-drawer-empty[b-i93q9mfubh] { text-align: center; padding: var(--space-7) 0; }
.lo-drawer-empty p[b-i93q9mfubh] { margin: 0 0 4px; font-size: 14px; color: var(--text-dim); }
.lo-drawer-empty span[b-i93q9mfubh] { font-size: 12px; color: var(--text-muted); }

/* In-group membership button on the agent row (view / add queues on the fly) */
.lo-qbtn[b-i93q9mfubh] {
    background: none; border: none; cursor: pointer; padding: 0 0 0 6px;
    color: var(--text-dim); font-size: .9em; vertical-align: middle;
}
.lo-qbtn:hover[b-i93q9mfubh] { color: var(--text); }
/* Same control rendered as a link (agent's calls) — kill the anchor underline. */
a.lo-qbtn[b-i93q9mfubh] { text-decoration: none; }
/* /Components/Pages/Campaigns/CampaignDetails.razor.rz.scp.css */
/* ==========================================================================
   CAMPAIGN DETAIL
   Inovixia tokens throughout. The page this replaces used raw Bootstrap
   (`card shadow-sm bg-light`) — bg-light forces a WHITE card, so on the dark
   theme it read as a different application bolted on.

   Structure follows the question, not the schema: verdict first, then the
   numbers behind it, then the lists that cause it.
   ========================================================================== */

.cd[b-r6g18brjjl] {
    padding: var(--space-6);
    max-width: 1500px;
    margin: 0 auto;
    font-family: var(--font);
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cd-load[b-r6g18brjjl] { padding: var(--space-7); text-align: center; color: var(--text-dim); font-family: var(--font); }

/* ---- header ---- */
.cd-head[b-r6g18brjjl] { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.cd-head h1[b-r6g18brjjl] { margin: 6px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cd-id[b-r6g18brjjl] { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); font-family: var(--mono); }

.cd-back[b-r6g18brjjl] {
    background: none; border: 0; padding: 0;
    color: var(--text-dim); font-size: 12px; font-family: var(--font);
    cursor: pointer;
}
.cd-back:hover[b-r6g18brjjl] { color: var(--text); }

.cd-chip[b-r6g18brjjl] {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 3px 9px; border-radius: var(--radius-pill);
}
.cd-chip.on[b-r6g18brjjl]   { background: var(--green-soft);  color: var(--green); }
.cd-chip.off[b-r6g18brjjl]  { background: var(--orange-soft); color: var(--orange); }
.cd-chip.mode[b-r6g18brjjl] { background: var(--accent-soft); color: var(--accent-hover); }

.cd-actions[b-r6g18brjjl] { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.cd-btn[b-r6g18brjjl] {
    display: inline-flex; align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 12px; font-weight: 600; font-family: var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cd-btn:hover[b-r6g18brjjl] { border-color: var(--border-strong); background: var(--card-hover); color: var(--text); }

/* ---- verdict ----
   Deliberately loud. It's the answer; everything below is evidence. */
.cd-verdict[b-r6g18brjjl] {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--text-muted);
    background: var(--card);
}
.cd-verdict strong[b-r6g18brjjl] { display: block; font-size: 14px; margin-bottom: 1px; }
.cd-verdict span[b-r6g18brjjl] { font-size: 12px; color: var(--text-dim); }

.cd-verdict-dot[b-r6g18brjjl] { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: none; }

.cd-verdict.good[b-r6g18brjjl] { border-left-color: var(--green); }
.cd-verdict.good .cd-verdict-dot[b-r6g18brjjl] { background: var(--green); }
.cd-verdict.warn[b-r6g18brjjl] { border-left-color: var(--orange); background: var(--orange-soft); }
.cd-verdict.warn .cd-verdict-dot[b-r6g18brjjl] { background: var(--orange); }
.cd-verdict.bad[b-r6g18brjjl]  { border-left-color: var(--red); background: var(--red-soft); }
.cd-verdict.bad .cd-verdict-dot[b-r6g18brjjl] { background: var(--red); }
.cd-verdict.idle[b-r6g18brjjl] { border-left-color: var(--text-muted); }

/* ---- stats ---- */
.cd-stats[b-r6g18brjjl] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }

.cd-stat[b-r6g18brjjl] {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column;
}
.cd-v[b-r6g18brjjl] { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.cd-v.bad[b-r6g18brjjl]  { color: var(--red); }
.cd-v.warn[b-r6g18brjjl] { color: var(--orange); }
.cd-k[b-r6g18brjjl] { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.cd-sub[b-r6g18brjjl] { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* ---- layout ---- */
.cd-body[b-r6g18brjjl] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }

@media (max-width: 1000px) {
    .cd-body[b-r6g18brjjl] { grid-template-columns: 1fr; }
}

.cd-panel[b-r6g18brjjl] {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.cd-panel-head[b-r6g18brjjl] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); }
.cd-panel-head h2[b-r6g18brjjl] { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.cd-hint[b-r6g18brjjl] { font-size: 11px; color: var(--text-dim); }

/* ---- volume chart ----
   Bars, not a table of counts: a day with no calls should be a visible gap in a
   silhouette, which is instantly readable, rather than a zero you have to notice. */
.cd-chart[b-r6g18brjjl] { display: flex; align-items: flex-end; gap: var(--space-2); height: 150px; }

.cd-day[b-r6g18brjjl] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.cd-col[b-r6g18brjjl] { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }

.cd-col-total[b-r6g18brjjl] {
    width: 100%;
    max-width: 34px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 4px 4px 0 0;
    display: flex; align-items: flex-end;
    min-height: 0;
    transition: height var(--dur-slow) var(--ease);
}
/* Connected nests inside placed — the fill IS the connect rate, no second chart. */
.cd-col-con[b-r6g18brjjl] { width: 100%; background: var(--accent); border-radius: 0 0 3px 3px; transition: height var(--dur-slow) var(--ease); }

.cd-day-n[b-r6g18brjjl] { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.cd-day-d[b-r6g18brjjl] { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }

.cd-legend[b-r6g18brjjl] { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-size: 10px; color: var(--text-dim); }
.cd-legend .sw[b-r6g18brjjl] { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.cd-legend .sw.total[b-r6g18brjjl] { background: var(--accent-soft); border: 1px solid var(--accent); }
.cd-legend .sw.con[b-r6g18brjjl] { background: var(--accent); }

.cd-meta[b-r6g18brjjl] { display: flex; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.cd-meta div[b-r6g18brjjl] { display: flex; flex-direction: column; gap: 1px; }
.cd-meta span[b-r6g18brjjl] { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cd-meta strong[b-r6g18brjjl] { font-size: 12px; font-weight: 600; }

/* ---- lists ---- */
.cd-table[b-r6g18brjjl] { width: 100%; border-collapse: collapse; font-size: 12px; }
.cd-table th[b-r6g18brjjl] {
    text-align: left; padding: 0 8px 8px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.cd-table th.n[b-r6g18brjjl], .cd-table td.n[b-r6g18brjjl] { text-align: right; font-family: var(--mono); }
.cd-table td[b-r6g18brjjl] { padding: 8px; border-bottom: 1px solid var(--border-soft); }
.cd-table tr.off[b-r6g18brjjl] { opacity: 0.45; }
.cd-table tr.spent[b-r6g18brjjl] { background: var(--orange-soft); }
.cd-table td.dim[b-r6g18brjjl] { color: var(--text-dim); }
.cd-table td.bad[b-r6g18brjjl] { color: var(--red); font-weight: 600; }

.cd-list-name[b-r6g18brjjl] { font-weight: 600; }

.cd-tag[b-r6g18brjjl] {
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 6px;
}
.cd-tag.spent[b-r6g18brjjl] { background: var(--orange); color: #2b1a02; }
.cd-tag.off[b-r6g18brjjl]   { background: var(--surface-2); color: var(--text-dim); }

.cd-link[b-r6g18brjjl] { color: var(--accent-hover); text-decoration: none; font-size: 11px; }
.cd-link:hover[b-r6g18brjjl] { text-decoration: underline; }

/* switch */
.cd-sw[b-r6g18brjjl] { position: relative; display: inline-block; width: 30px; height: 17px; cursor: pointer; }
.cd-sw input[b-r6g18brjjl] { opacity: 0; width: 0; height: 0; }
.cd-sw span[b-r6g18brjjl] {
    position: absolute; inset: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease);
}
.cd-sw span[b-r6g18brjjl]::before {
    content: ""; position: absolute;
    height: 11px; width: 11px; left: 2px; top: 2px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cd-sw input:checked + span[b-r6g18brjjl] { background: var(--accent); border-color: var(--accent); }
.cd-sw input:checked + span[b-r6g18brjjl]::before { transform: translateX(13px); background: #fff; }

.cd-empty[b-r6g18brjjl] { text-align: center; padding: var(--space-6) var(--space-4); }
.cd-empty p[b-r6g18brjjl] { margin: 0 0 2px; font-size: 13px; color: var(--text-dim); }
.cd-empty span[b-r6g18brjjl] { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-4); }
/* /Components/Shared/IxHelp.razor.rz.scp.css */
.ixhelp[b-zg4qdy89ts] {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
}

.ixhelp__btn[b-zg4qdy89ts] {
    width: 14px;
    height: 14px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font);
    line-height: 1;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Quiet until wanted. A help affordance that competes with the label it explains is
   just noise on a page with forty of them. */
.ixhelp__btn:hover[b-zg4qdy89ts],
.ixhelp__btn:focus-visible[b-zg4qdy89ts] {
    color: var(--accent-hover);
    border-color: var(--accent);
    outline: none;
}

.ixhelp__pop[b-zg4qdy89ts] {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;

    width: max-content;
    max-width: 260px;
    padding: var(--space-3);

    background: var(--elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);

    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: left;
    text-transform: none;      /* labels are often uppercase; the help must not inherit that */
    letter-spacing: normal;
    white-space: normal;

    animation: ixhelp-in-b-zg4qdy89ts var(--dur-fast) var(--ease);
}

.ixhelp__pop.wide[b-zg4qdy89ts] { max-width: 380px; }

.ixhelp__pop strong[b-zg4qdy89ts] {
    display: block;
    color: var(--text);
    font-size: 11px;
    margin-bottom: 3px;
}

.ixhelp__extra[b-zg4qdy89ts] { display: block; margin-top: var(--space-2); }

/* little arrow */
.ixhelp__pop[b-zg4qdy89ts]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border-strong);
}

@keyframes ixhelp-in-b-zg4qdy89ts {
    from { opacity: 0; transform: translateX(-50%) translateY(3px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* /Components/Shared/IxLoading.razor.rz.scp.css */
/* Skeleton/shimmer placeholder. Theme variables only, so every theme (incl. arctic/light) is
   right: bars are the border colour with a surface-2 sweep — visible on dark and light cards. */
.ixload[b-ikjwtyv2bx] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin: 4px 0 16px;
}

.ixload--compact[b-ikjwtyv2bx] {
    background: transparent;
    border: 0;
    padding: 6px 0;
    margin: 0;
}

.ixload__label[b-ikjwtyv2bx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 14px;
}

.ixload__pulse[b-ikjwtyv2bx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: ixload-pulse-b-ikjwtyv2bx 1.1s ease-in-out infinite;
}

.ixload__cards[b-ikjwtyv2bx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ixload__card[b-ikjwtyv2bx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.ixload__rows[b-ikjwtyv2bx] {
    display: flex;
    flex-direction: column;
}

.ixload__row[b-ikjwtyv2bx] {
    padding: 11px 0;
    border-top: 1px solid var(--border);
}

    .ixload__row:first-child[b-ikjwtyv2bx] {
        border-top: 0;
    }

.ixload__bar[b-ikjwtyv2bx] {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--border) 0%, var(--border) 35%, var(--surface-2) 50%, var(--border) 65%, var(--border) 100%);
    background-size: 300% 100%;
    animation: ixload-shimmer-b-ikjwtyv2bx 1.4s linear infinite;
}

.ixload__bar--lg[b-ikjwtyv2bx] {
    height: 18px;
}

@keyframes ixload-shimmer-b-ikjwtyv2bx {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@keyframes ixload-pulse-b-ikjwtyv2bx {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ixload__bar[b-ikjwtyv2bx], .ixload__pulse[b-ikjwtyv2bx] { animation: none; }
}
/* /Components/Shared/IxModal.razor.rz.scp.css */
.ixmodal__scrim[b-drspev1n2v] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 80;
    animation: ixm-fade-b-drspev1n2v var(--dur-base) var(--ease);
}

.ixmodal[b-drspev1n2v] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 81;

    width: min(560px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;

    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
    color: var(--text);

    animation: ixm-in-b-drspev1n2v var(--dur-base) var(--ease);
}

.ixmodal.wide[b-drspev1n2v] { width: min(880px, 96vw); }

@keyframes ixm-fade-b-drspev1n2v {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scales up a hair rather than sliding: it reads as "this opened on top of what you were
   doing", which is exactly what the old below-the-table form failed to communicate. */
@keyframes ixm-in-b-drspev1n2v {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ixmodal__head[b-drspev1n2v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}

.ixmodal__head h2[b-drspev1n2v] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.ixmodal__head p[b-drspev1n2v] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

.ixmodal__x[b-drspev1n2v] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    flex: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ixmodal__x:hover[b-drspev1n2v] { color: var(--text); border-color: var(--border-strong); }

.ixmodal__body[b-drspev1n2v] {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ixmodal__foot[b-drspev1n2v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
    border-radius: 0 0 var(--radius) var(--radius);
}

.ixmodal__err[b-drspev1n2v] {
    margin-right: auto;
    font-size: 11px;
    color: var(--red);
}

.ixmodal__btn[b-drspev1n2v] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ixmodal__btn:hover:not(:disabled)[b-drspev1n2v] { border-color: var(--border-strong); background: var(--card-hover); }
.ixmodal__btn:disabled[b-drspev1n2v] { opacity: 0.5; cursor: not-allowed; }

.ixmodal__btn.primary[b-drspev1n2v] {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
}
.ixmodal__btn.primary:hover:not(:disabled)[b-drspev1n2v] { box-shadow: var(--glow); }
/* /Components/Shared/IxPage.razor.rz.scp.css */
.ixpage[b-208c7am6ob] {
    padding: var(--space-5) var(--space-6);
    max-width: 1800px;
    margin: 0 auto;
    font-family: var(--font);
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 100vh;
}

/* One row: identity, state, actions. The whole header costs ~56px instead of the ~260px
   the hero blocks were taking before anything useful appeared. */
.ixpage__head[b-208c7am6ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}

.ixpage__id h1[b-208c7am6ob] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.ixpage__id p[b-208c7am6ob] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

/* Stats live in the header, not in a band of giant cards below it. They're orientation,
   not the content — sizing them like the content is what made these pages read as
   dashboards when they're actually work screens. */
.ixpage__stats[b-208c7am6ob] {
    display: flex;
    gap: var(--space-5);
    margin-left: auto;
    flex-wrap: wrap;
}

.ixpage__actions[b-208c7am6ob] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ixpage__body[b-208c7am6ob] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .ixpage[b-208c7am6ob] { padding: var(--space-4); }
    .ixpage__stats[b-208c7am6ob] { margin-left: 0; }
}
/* /Components/Shared/IxWizard.razor.rz.scp.css */
.ixwiz[b-21ilyd2ffd] {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-5);
    align-items: start;
    font-family: var(--font);
    color: var(--text);
}

@media (max-width: 900px) {
    .ixwiz[b-21ilyd2ffd] { grid-template-columns: 1fr; }
    .ixwiz__rail[b-21ilyd2ffd] { flex-direction: row; overflow-x: auto; }
    .ixwiz__label[b-21ilyd2ffd] { display: none; }   /* on narrow screens the numbers carry it */
}

/* Vertical rail, not a tab strip. A tab strip implies "four independent places"; a rail
   implies "a sequence with an end", which is the honest shape of creating something. */
.ixwiz__rail[b-21ilyd2ffd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ixwiz__step button[b-21ilyd2ffd] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    color: var(--text-dim);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ixwiz__step button:disabled[b-21ilyd2ffd] { cursor: default; opacity: 0.55; }
.ixwiz__step button:not(:disabled):hover[b-21ilyd2ffd] { background: var(--card); }

.ixwiz__num[b-21ilyd2ffd] {
    width: 22px;
    height: 22px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ixwiz__label[b-21ilyd2ffd] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ixwiz__label strong[b-21ilyd2ffd] { font-size: 12px; font-weight: 600; }
.ixwiz__label span[b-21ilyd2ffd] { font-size: 10px; color: var(--text-muted); }

/* Three states, visibly different: done / here / not yet. */
.ixwiz__step.done .ixwiz__num[b-21ilyd2ffd] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.ixwiz__step.done strong[b-21ilyd2ffd] { color: var(--text-dim); }

.ixwiz__step.now button[b-21ilyd2ffd] { background: var(--accent-soft); border-color: var(--accent); }
.ixwiz__step.now .ixwiz__num[b-21ilyd2ffd] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ixwiz__step.now strong[b-21ilyd2ffd] { color: var(--text); }

.ixwiz__panel[b-21ilyd2ffd] {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.ixwiz__content[b-21ilyd2ffd] { padding: var(--space-5); flex: 1; }

.ixwiz__foot[b-21ilyd2ffd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-soft);
}

.ixwiz__err[b-21ilyd2ffd]  { margin-right: auto; font-size: 11px; color: var(--red); }
.ixwiz__hint[b-21ilyd2ffd] { margin-right: auto; font-size: 11px; color: var(--text-dim); }

.ixwiz__btn[b-21ilyd2ffd] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ixwiz__btn:hover:not(:disabled)[b-21ilyd2ffd] { border-color: var(--border-strong); background: var(--card-hover); }
.ixwiz__btn:disabled[b-21ilyd2ffd] { opacity: 0.45; cursor: not-allowed; }

.ixwiz__btn.primary[b-21ilyd2ffd] { background: var(--grad); border-color: transparent; color: #fff; }
.ixwiz__btn.primary:hover:not(:disabled)[b-21ilyd2ffd] { box-shadow: var(--glow); }