/* /Components/Layout/MainLayout.razor.rz.scp.css */
.skip-nav[b-wxqdhhz3w2] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-color);
    color: white;
    padding: var(--space-sm) var(--space-md);
    z-index: 10000;
    transition: top var(--transition-fast);
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-nav:focus[b-wxqdhhz3w2] {
    top: 0;
}

.page[b-wxqdhhz3w2] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-wxqdhhz3w2] {
    flex: 1;
}

.sidebar[b-wxqdhhz3w2] {
    background-image: var(--bg-drawer);
}

.top-row[b-wxqdhhz3w2] {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-wxqdhhz3w2]  a, .top-row[b-wxqdhhz3w2]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-wxqdhhz3w2]  a:hover, .top-row[b-wxqdhhz3w2]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-wxqdhhz3w2]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-wxqdhhz3w2] {
        justify-content: space-between;
    }

    .top-row[b-wxqdhhz3w2]  a, .top-row[b-wxqdhhz3w2]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-wxqdhhz3w2] {
        flex-direction: row;
    }

    .sidebar[b-wxqdhhz3w2] {
        width: 15.625rem;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-wxqdhhz3w2] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-wxqdhhz3w2]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-wxqdhhz3w2], article[b-wxqdhhz3w2] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-wxqdhhz3w2] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    #blazor-error-ui .dismiss[b-wxqdhhz3w2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        z-index: 1;
    }
/* /Features/Admin/Components/AdminAppBar.razor.rz.scp.css */
/*
 * AdminAppBar.razor.css - Enhanced Glassmorphism Header with Animated Effects
 * Uses Ayva Design System variables exclusively - no hardcoded values.
 */

/* ==========================================================================
   APPBAR BASE - Glassmorphism with animated gradient border
   ========================================================================== */

[b-8crcyezzfh] .mud-appbar {
    background: var(--glass-appbar) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: none !important;
    z-index: var(--z-modal) !important;
    box-shadow:
        0 4px 16px var(--black-overlay-30),
        inset 0 -1px 0 var(--white-overlay-05) !important;
    position: relative !important;
}

/* Animated gradient border-bottom via pseudo-element */
[b-8crcyezzfh] .mud-appbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-color),
        var(--secondary-accent),
        var(--accent-color),
        transparent
    );
    background-size: 200% 100%;
    animation: appbarGradientShift-b-8crcyezzfh 4s ease-in-out infinite;
}

@keyframes appbarGradientShift-b-8crcyezzfh {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ==========================================================================
   TITLE & TEXT
   ========================================================================== */

[b-8crcyezzfh] .mud-appbar .mud-typography {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* ==========================================================================
   MENU ITEMS
   ========================================================================== */

[b-8crcyezzfh] .mud-menu .mud-button-root {
    color: var(--text-primary);
    transition: all var(--transition-normal);
}

[b-8crcyezzfh] .mud-menu .mud-button-root:hover {
    background: var(--bg-hover);
}

/* ==========================================================================
   DIVIDER
   ========================================================================== */

[b-8crcyezzfh] .mud-appbar .mud-divider {
    background-color: var(--border-color-strong);
}

/* ==========================================================================
   REAL-TIME CLOCK DISPLAY
   ========================================================================== */

.appbar-clock[b-8crcyezzfh] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    margin-right: var(--space-sm);
    user-select: none;
    min-width: 4.5rem;
    text-align: center;
}

/* ==========================================================================
   COMMAND PALETTE BUTTON
   ========================================================================== */

[b-8crcyezzfh] .command-palette-btn {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-xs) var(--space-sm) !important;
    margin-right: var(--space-sm) !important;
    text-transform: none !important;
    color: var(--text-secondary) !important;
    transition: all var(--transition-normal) !important;
    gap: var(--space-sm) !important;
    min-width: auto !important;
    height: 1.75rem !important;
}

[b-8crcyezzfh] .command-palette-btn:hover {
    background: var(--bg-active) !important;
    border-color: var(--border-accent) !important;
    color: var(--text-primary) !important;
}

[b-8crcyezzfh] .command-palette-btn .mud-icon-root {
    font-size: var(--text-sm) !important;
}

.command-palette-label[b-8crcyezzfh] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-right: var(--space-xs);
}

.command-palette-shortcut kbd[b-8crcyezzfh] {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0.0625rem var(--space-xs);
    line-height: 1.2;
}

/* ==========================================================================
   NOTIFICATION BELL
   ========================================================================== */

[b-8crcyezzfh] .notification-bell .mud-badge-content {
    font-size: 0.6rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    padding: 0 var(--space-xs) !important;
    font-weight: var(--font-bold) !important;
}

[b-8crcyezzfh] .notification-bell .mud-icon-button {
    transition: all var(--transition-normal);
}

[b-8crcyezzfh] .notification-bell .mud-icon-button:hover {
    background: var(--bg-hover);
    color: var(--accent-light);
}

/* ==========================================================================
   ENVIRONMENT INDICATOR - Pulsing Glow Effects
   ========================================================================== */

[b-8crcyezzfh] .env-indicator {
    font-weight: var(--font-bold) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: none !important;
}

/* PROD - Green pulsing glow */
[b-8crcyezzfh] .env-prod {
    --pulse-online: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 8px var(--pulse-online);
}

/* DEV - Amber pulsing glow */
[b-8crcyezzfh] .env-dev {
    --pulse-online: var(--pulse-warning);
    box-shadow: 0 0 8px var(--pulse-warning);
}

/* ==========================================================================
   ICON BUTTONS
   ========================================================================== */

[b-8crcyezzfh] .mud-icon-button {
    transition: all var(--transition-normal);
}

[b-8crcyezzfh] .mud-icon-button:hover {
    background: var(--bg-hover);
}

/* ==========================================================================
   CHIP BASE
   ========================================================================== */

[b-8crcyezzfh] .mud-chip {
    font-weight: var(--font-semibold);
}

/* ==========================================================================
   RESPONSIVE - Hide non-essential elements on smaller screens
   ========================================================================== */

@media (max-width: 768px) {
    .command-palette-label[b-8crcyezzfh] {
        display: none;
    }

    .command-palette-shortcut[b-8crcyezzfh] {
        display: none;
    }
}
/* /Features/Admin/Components/AdminFooter.razor.rz.scp.css */
/*
 * AdminFooter.razor.css - Scoped styles using Ayva Design System
 * Responsive status bar with progressive compaction across breakpoints.
 *
 * Breakpoint strategy (calculated from element widths):
 *   >=1600px  Single row, all items visible
 *   <1600px   Two rows, full labels, standard gaps
 *   <1400px   Two rows, compact gaps, smaller text
 *   <1200px   Two rows, labels hidden, hide-narrow items hidden
 *   <768px    Two rows, ultra-compact, dividers hidden
 *   <480px    Two rows, hide-mobile items hidden
 */

/* ==========================================================================
   BASE LAYOUT
   ========================================================================== */

/* Footer is an in-flow flex item within admin-layout-wrapper.
   flex-shrink: 0 prevents it from being crushed.
   height: auto lets it size naturally to content (single or two-line). */
.admin-footer[b-1dt8c6wdov] {
    flex-shrink: 0;
    z-index: var(--z-fixed);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--glass-appbar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-subtle);
    padding: 0.375rem var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    box-shadow:
        0 -4px 16px var(--black-overlay-30),
        inset 0 1px 0 var(--white-overlay-05);
}

.footer-row[b-1dt8c6wdov] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    max-width: 100%;
    height: 100%;
}

.footer-group[b-1dt8c6wdov] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    flex-shrink: 1;
}

.footer-item[b-1dt8c6wdov] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

.footer-label[b-1dt8c6wdov] {
    color: var(--text-muted);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-value[b-1dt8c6wdov] {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.footer-divider[b-1dt8c6wdov] {
    width: 1px;
    height: 1rem;
    background: var(--border-subtle);
    flex-shrink: 0;
}

/* ==========================================================================
   STATUS COLORS
   ========================================================================== */

.status-ok[b-1dt8c6wdov] { color: var(--success-color); }
.status-warn[b-1dt8c6wdov] { color: var(--warning-color); }
.status-error[b-1dt8c6wdov] { color: var(--error-color); }
.status-info[b-1dt8c6wdov] { color: var(--info-color); }

/* ==========================================================================
   METRIC BARS (CPU, RAM)
   ========================================================================== */

.metric-bar[b-1dt8c6wdov] {
    width: 3.75rem;
    height: 0.375rem;
    background: var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}

.metric-bar-fill[b-1dt8c6wdov] {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width var(--transition-smooth), background-color var(--transition-smooth);
    animation: barFill 0.8s var(--panel-enter-easing) both;
}

/* ==========================================================================
   ENVIRONMENT CHIP
   ========================================================================== */

.env-chip[b-1dt8c6wdov] {
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-xs);
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.env-prod[b-1dt8c6wdov] {
    background: var(--success-color-20);
    color: var(--success-text);
}

.env-dev[b-1dt8c6wdov] {
    background: var(--warning-color-20);
    color: var(--warning-text);
}

.env-glow[b-1dt8c6wdov] {
    animation: breathe 3s ease-in-out infinite;
}

.env-glow.env-prod[b-1dt8c6wdov] {
    box-shadow: 0 0 8px var(--success-color-30);
}

.env-glow.env-dev[b-1dt8c6wdov] {
    box-shadow: 0 0 8px var(--warning-color-30);
}

/* ==========================================================================
   STATUS INDICATORS (service dots)
   ========================================================================== */

.status-indicator[b-1dt8c6wdov] {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
}

.status-dot[b-1dt8c6wdov] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.connected[b-1dt8c6wdov] {
    background-color: var(--success-color);
    box-shadow: 0 0 0.375rem var(--success-color-40);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.disconnected[b-1dt8c6wdov] {
    background-color: var(--text-muted);
}

/* ==========================================================================
   MISC ELEMENTS
   ========================================================================== */

.footer-timestamp[b-1dt8c6wdov] {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.icon-info[b-1dt8c6wdov] { color: var(--info-color); }
.icon-accent[b-1dt8c6wdov] { color: var(--secondary-accent); }
.icon-success[b-1dt8c6wdov] { color: var(--success-color); }
.icon-muted[b-1dt8c6wdov] { color: var(--text-secondary); }
.icon-warning[b-1dt8c6wdov] { color: var(--warning-color); }
.icon-small[b-1dt8c6wdov] { width: 14px; height: 14px; }

[b-1dt8c6wdov] .insights-toggle-btn {
    color: var(--text-muted) !important;
    transition: color var(--transition-fast), text-shadow var(--transition-fast) !important;
}

[b-1dt8c6wdov] .insights-toggle-btn:hover {
    color: var(--accent-color) !important;
    text-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.4);
}

/* ==========================================================================
   RESPONSIVE: <1600px — Two-line layout
   Left group (metrics) on row 1, right group (status) on row 2.
   ========================================================================== */

@media (max-width: 1600px) {
    .admin-footer[b-1dt8c6wdov] {
        padding: 0.1875rem var(--space-lg);
    }

    .footer-row[b-1dt8c6wdov] {
        flex-wrap: wrap;
        gap: 0;
    }

    .footer-group[b-1dt8c6wdov] {
        flex: 1 1 100%;
        padding: 0.125rem 0;
    }

    /* Subtle gradient separator between rows */
    .footer-group + .footer-group[b-1dt8c6wdov] {
        border-top: 1px solid var(--white-overlay-05);
    }
}

/* ==========================================================================
   RESPONSIVE: <1400px — Compact gaps and smaller text
   ========================================================================== */

@media (max-width: 1400px) {
    .admin-footer[b-1dt8c6wdov] {
        padding: 0.1875rem var(--space-md);
    }

    .footer-group[b-1dt8c6wdov] {
        gap: var(--space-sm);
    }

    .footer-label[b-1dt8c6wdov] {
        font-size: 0.5625rem;
    }

    .footer-value[b-1dt8c6wdov] {
        font-size: 0.625rem;
    }

    .metric-bar[b-1dt8c6wdov] {
        width: 2.5rem;
    }
}

/* ==========================================================================
   RESPONSIVE: <1200px — Hide labels and secondary items
   ========================================================================== */

@media (max-width: 1200px) {
    .hide-narrow[b-1dt8c6wdov] {
        display: none !important;
    }

    .admin-footer[b-1dt8c6wdov] {
        padding: 0.125rem var(--space-sm);
    }

    .footer-group[b-1dt8c6wdov] {
        gap: var(--space-xs);
    }

    .footer-item[b-1dt8c6wdov] {
        gap: 2px;
    }

    .footer-label[b-1dt8c6wdov] {
        display: none;
    }

    .footer-value[b-1dt8c6wdov] {
        font-size: 0.5625rem;
    }

    .footer-divider[b-1dt8c6wdov] {
        height: 0.625rem;
    }

    .metric-bar[b-1dt8c6wdov] {
        width: 1.75rem;
        height: 0.25rem;
    }

    .env-chip[b-1dt8c6wdov] {
        font-size: 0.5rem;
        padding: 0.0625rem var(--space-xs);
    }

    .status-dot[b-1dt8c6wdov] {
        width: 0.3rem;
        height: 0.3rem;
    }

    [b-1dt8c6wdov] .mud-icon-root.icon-small {
        width: 11px !important;
        height: 11px !important;
    }
}

/* ==========================================================================
   RESPONSIVE: <768px — Tablet, ultra-compact
   ========================================================================== */

@media (max-width: 768px) {
    .footer-value[b-1dt8c6wdov] {
        font-size: 0.5rem;
    }

    .metric-bar[b-1dt8c6wdov] {
        width: 1.25rem;
        height: 0.1875rem;
    }

    .env-chip[b-1dt8c6wdov] {
        font-size: 0.4375rem;
        padding: 0 var(--space-xs);
    }

    .status-dot[b-1dt8c6wdov] {
        width: 0.25rem;
        height: 0.25rem;
    }

    [b-1dt8c6wdov] .mud-icon-root.icon-small {
        width: 10px !important;
        height: 10px !important;
    }

    .footer-divider[b-1dt8c6wdov] {
        display: none;
    }
}

/* ==========================================================================
   RESPONSIVE: <480px — Mobile, hide non-essential items
   ========================================================================== */

@media (max-width: 480px) {
    .hide-mobile[b-1dt8c6wdov] {
        display: none !important;
    }
}
/* /Features/Admin/Components/AdminPanel.razor.rz.scp.css */
/*
 * AdminPanel.razor.css - CSS Grid Admin Layout
 * Replaces MudDrawerContainer/MudDrawer with a CSS Grid shell.
 * MudBlazor components are still used for UI (nav links, breadcrumbs, etc.)
 * but not for structural positioning.
 */

/* ==========================================================================
   ADMIN PANEL ACCENT COLOR OVERRIDE - Orange (#fd7e14)
   Scoped to admin layout so customer-facing pages stay default purple.
   ========================================================================== */
.admin-layout-wrapper[b-54ldm6960x] {
    --accent-color: #fd7e14;
    --accent-hover: #fdab6c;
    --accent-light: #fec89a;
    --accent-dark: #e8590c;
    --accent-gradient: linear-gradient(135deg, #fd7e14, #f76707);
    --accent-gradient-hover: linear-gradient(135deg, #fdab6c, #fd9644);
    --secondary-accent: #f76707;
    --secondary-hover: #fd9644;
    --accent-secondary: var(--secondary-accent);
    --accent-bg: rgba(253, 126, 20, 0.3);
    --primary-color: var(--accent-color);
    --primary-color-rgb: 253, 126, 20;
    --bg-active: rgba(253, 126, 20, 0.15);
    --border-focus: rgba(253, 126, 20, 0.5);
    --border-accent: rgba(253, 126, 20, 0.3);
    --accent-color-5: rgba(253, 126, 20, 0.05);
    --accent-color-10: rgba(253, 126, 20, 0.1);
    --accent-color-15: rgba(253, 126, 20, 0.15);
    --accent-color-20: rgba(253, 126, 20, 0.2);
    --accent-color-30: rgba(253, 126, 20, 0.3);
    --accent-color-40: rgba(253, 126, 20, 0.4);
    --accent-color-50: rgba(253, 126, 20, 0.5);
    --accent-color-light: #fec89a;
    --shadow-glow: 0 0 30px rgba(253, 126, 20, 0.2);
    --shadow-glow-strong: 0 0 40px rgba(253, 126, 20, 0.3);
    --shadow-accent: 0 8px 25px rgba(253, 126, 20, 0.3);
    --shadow-focus: 0 0 0 0.125rem rgba(253, 126, 20, 0.1);
    --glow-accent: 0 0 20px rgba(253, 126, 20, 0.3);
    --glow-accent-strong: 0 0 30px rgba(253, 126, 20, 0.5);
}

/* ==========================================================================
   CSS GRID LAYOUT
   ========================================================================== */

.admin-layout-wrapper[b-54ldm6960x] {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    overflow: hidden;
    background-color: var(--bg-base);
}

/* Background pattern */
.admin-layout-wrapper[b-54ldm6960x]::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: var(--bg-base);
    background-image:
        radial-gradient(circle, rgba(var(--primary-color-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(to right, rgba(var(--primary-color-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--primary-color-rgb), 0.03) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
    pointer-events: none;
    z-index: -1;
}

/* ==========================================================================
   GRID AREAS
   ========================================================================== */

.grid-header[b-54ldm6960x] {
    grid-area: header;
}

.grid-sidebar[b-54ldm6960x] {
    grid-area: sidebar;
    width: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--glass-sidebar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border-accent);
    box-shadow: 4px 0 20px var(--black-overlay-30);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-drawer);
}

.grid-content[b-54ldm6960x] {
    grid-area: content;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
}

.grid-footer[b-54ldm6960x] {
    grid-area: footer;
}

/* ==========================================================================
   SIDEBAR STATES
   ========================================================================== */

.grid-sidebar.sidebar-mini[b-54ldm6960x] {
    width: 64px;
}

.grid-sidebar.sidebar-closed[b-54ldm6960x] {
    width: 0;
    border-right: none;
}

/* ==========================================================================
   CONTENT GRADIENT OVERLAY
   ========================================================================== */

.grid-content[b-54ldm6960x]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.02) 0%, transparent 50%, var(--secondary-accent-02, rgba(247, 103, 7, 0.02)) 100%),
        radial-gradient(circle at 20% 30%, rgba(var(--primary-color-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--secondary-accent-03, rgba(247, 103, 7, 0.03)) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content is above background */
.grid-content > *[b-54ldm6960x] {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   SIDEBAR HEADER
   ========================================================================== */

.sidebar-header[b-54ldm6960x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-drawer-header);
    flex-shrink: 0;
    min-height: 3rem;
}

.sidebar-search[b-54ldm6960x] {
    flex: 1;
}

.sidebar-search-input[b-54ldm6960x] {
    width: 100%;
}

[b-54ldm6960x] .sidebar-search-input .mud-input-slot {
    background: var(--glass-panel);
    border-radius: var(--radius-md);
}

[b-54ldm6960x] .sidebar-search-input .mud-input-outlined-border {
    border-color: var(--border-color);
}

[b-54ldm6960x] .sidebar-search-input .mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px var(--accent-color-10), 0 0 8px var(--accent-color-15) !important;
}

.sidebar-collapse-btn[b-54ldm6960x] {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.sidebar-collapse-btn:hover[b-54ldm6960x] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* ==========================================================================
   FAVORITES SECTION
   ========================================================================== */

.favorites-section[b-54ldm6960x] {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.nav-section-header[b-54ldm6960x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-section-header .mud-icon-root[b-54ldm6960x] {
    color: var(--warning-color);
    font-size: 1rem;
}

/* Favorites section gold glow on hover */
.favorites-section[b-54ldm6960x]  .mud-nav-link:hover .mud-icon-root {
    color: var(--warning-color) !important;
    filter: drop-shadow(0 0 4px var(--warning-color-50));
}

/* ==========================================================================
   NAVIGATION SECTIONS CONTAINER (scrollable)
   ========================================================================== */

.nav-sections-container[b-54ldm6960x] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-xs) 0;
}

.nav-sections-container[b-54ldm6960x]::-webkit-scrollbar {
    width: 3px;
}

.nav-sections-container[b-54ldm6960x]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-sections-container[b-54ldm6960x]::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color-rgb), 0.3);
    border-radius: 2px;
}

.nav-sections-container[b-54ldm6960x]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-color-rgb), 0.5);
}

/* ==========================================================================
   NAVIGATION GROUPS (visual ::deep - styling MudNavGroup internals)
   ========================================================================== */

[b-54ldm6960x] .nav-group {
    margin: var(--space-xs) var(--space-sm);
}

[b-54ldm6960x] .nav-group .mud-nav-group-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

[b-54ldm6960x] .nav-group .mud-nav-group-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-md);
    right: var(--space-md);
    height: 1px;
    background: linear-gradient(90deg, var(--accent-color-20), transparent);
}

[b-54ldm6960x] .nav-group + .nav-group::before {
    content: '';
    display: block;
    height: 1px;
    margin: var(--space-xs) var(--space-lg);
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

[b-54ldm6960x] .nav-group .mud-nav-group-title:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

[b-54ldm6960x] .nav-group .mud-nav-group-title .mud-icon-root {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

[b-54ldm6960x] .nav-group.mini .mud-nav-group-title {
    justify-content: center;
    padding: var(--space-sm);
}

/* ==========================================================================
   NAV LINKS (visual ::deep - styling MudNavLink internals)
   ========================================================================== */

[b-54ldm6960x] .grid-sidebar .mud-nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-xs);
    margin: 1px var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    min-height: 2rem;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
}

[b-54ldm6960x] .grid-sidebar .mud-nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    padding-left: calc(var(--space-md) + 4px) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-54ldm6960x] .grid-sidebar .mud-nav-link .mud-icon-root {
    font-size: 1.125rem;
    margin-right: var(--space-sm);
}

/* Nav item content */
.nav-item-content[b-54ldm6960x] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.nav-item-label[b-54ldm6960x] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-badge[b-54ldm6960x] {
    margin-left: var(--space-xs);
}

.favorite-btn[b-54ldm6960x] {
    opacity: 0;
    margin-left: var(--space-xs);
    transition: opacity var(--transition-fast);
}

[b-54ldm6960x] .mud-nav-link:hover .favorite-btn {
    opacity: 1;
}

.favorite-btn.mud-icon-button[b-54ldm6960x] {
    padding: 0.125rem;
}

.favorite-btn .mud-icon-root[b-54ldm6960x] {
    font-size: 0.875rem !important;
}

/* Active navigation item highlight */
[b-54ldm6960x] .active-nav,
[b-54ldm6960x] .mud-nav-link.active-nav {
    background: linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.5) 0%, rgba(var(--primary-color-rgb), 0.15) 100%) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid var(--accent-light) !important;
    font-weight: var(--font-semibold) !important;
    box-shadow: inset 0 0 15px rgba(var(--primary-color-rgb), 0.2) !important;
}

[b-54ldm6960x] .active-nav .mud-nav-link-text,
[b-54ldm6960x] .mud-nav-link.active-nav .mud-nav-link-text {
    color: var(--text-primary) !important;
}

/* ==========================================================================
   BREADCRUMB BAR
   ========================================================================== */

.breadcrumb-bar[b-54ldm6960x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    min-height: 2.5rem;
    background: var(--glass-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--black-overlay-20);
}

[b-54ldm6960x] .azure-breadcrumbs {
    padding: 0;
}

[b-54ldm6960x] .azure-breadcrumbs .mud-breadcrumbs {
    padding: 0;
}

[b-54ldm6960x] .azure-breadcrumbs .mud-breadcrumb-item {
    font-size: var(--text-sm);
}

[b-54ldm6960x] .azure-breadcrumbs .mud-breadcrumb-separator {
    color: var(--text-muted);
}

.breadcrumb-link[b-54ldm6960x] {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover[b-54ldm6960x] {
    color: var(--accent-color);
}

.breadcrumb-actions[b-54ldm6960x] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumb-actions .mud-icon-button[b-54ldm6960x] {
    color: var(--text-secondary);
}

.breadcrumb-actions .mud-icon-button:hover[b-54ldm6960x] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* ==========================================================================
   PANEL VIEWPORT
   ========================================================================== */

.panel-viewport[b-54ldm6960x] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md);
    position: relative;
    min-height: 0;
    height: 0;
    scroll-behavior: smooth;
}

.panel-viewport[b-54ldm6960x]::-webkit-scrollbar {
    width: 0.5rem;
}

.panel-viewport[b-54ldm6960x]::-webkit-scrollbar-track {
    background: var(--black-overlay-20);
}

.panel-viewport[b-54ldm6960x]::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color-rgb), 0.4);
    border-radius: var(--radius-xs);
}

.panel-viewport[b-54ldm6960x]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-color-rgb), 0.6);
}

/* ==========================================================================
   DASHBOARD STAT CARDS (visual ::deep)
   ========================================================================== */

[b-54ldm6960x] .stat-card {
    transition: all var(--transition-fast);
    min-height: 5rem;
    cursor: default;
    position: relative;
    overflow: hidden;
}

[b-54ldm6960x] .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

[b-54ldm6960x] .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

[b-54ldm6960x] .stat-card:hover::before {
    opacity: 1;
}

[b-54ldm6960x] .stat-card.clickable {
    cursor: pointer;
}

[b-54ldm6960x] .stat-card.clickable:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

[b-54ldm6960x] .stat-card .mud-icon-root {
    margin-bottom: var(--space-xs);
}

[b-54ldm6960x] .stat-card .mud-typography-caption {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

[b-54ldm6960x] .stat-card .mud-typography-h5,
[b-54ldm6960x] .stat-card .mud-typography-h6 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

[b-54ldm6960x] .stat-card .stat-value {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-54ldm6960x] .stat-card .stat-value-small {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-54ldm6960x] .stat-card .metric-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

[b-54ldm6960x] .stat-card .metric-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   LIDAR FULLSCREEN
   ========================================================================== */

.lidar-fullscreen-container[b-54ldm6960x] {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--bg-base);
    overflow: hidden;
}

/* ==========================================================================
   NEURAL COMMAND CENTER - Full Height Layout
   ========================================================================== */

.panel-viewport.neural-fullscreen[b-54ldm6960x] {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   COMPACT TABLE STYLES (visual ::deep)
   ========================================================================== */

[b-54ldm6960x] .compact-table .mud-table-cell {
    padding: var(--space-xs) var(--space-sm) !important;
    font-size: var(--text-sm);
}

[b-54ldm6960x] .compact-table .mud-table-head-cell {
    padding: var(--space-xs) var(--space-sm) !important;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: var(--font-semibold);
}

/* ==========================================================================
   ENHANCED SCROLL CONTAINERS FOR NESTED CONTENT (visual ::deep)
   ========================================================================== */

.panel-viewport[b-54ldm6960x]  .mud-paper {
    max-height: none;
}

.panel-viewport[b-54ldm6960x]  .mud-grid {
    margin: 0 !important;
}

.panel-viewport[b-54ldm6960x]  .pa-4 {
    padding: var(--space-md) !important;
}

.panel-viewport[b-54ldm6960x]  .pa-3 {
    padding: var(--space-sm) !important;
}

/* ==========================================================================
   NAV GROUP ANIMATIONS (visual ::deep)
   ========================================================================== */

[b-54ldm6960x] .mud-nav-group-items {
    transition: max-height var(--transition-smooth), opacity var(--transition-fast);
}

[b-54ldm6960x] .mud-nav-group.mud-nav-group--expanded .mud-nav-group-items {
    opacity: 1;
}

[b-54ldm6960x] .mud-nav-group:not(.mud-nav-group--expanded) .mud-nav-group-items {
    opacity: 0;
}

/* ==========================================================================
   PANEL SECTION HEADERS
   ========================================================================== */

.panel-section-header[b-54ldm6960x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.panel-section-title[b-54ldm6960x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.panel-section-title h3[b-54ldm6960x] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.panel-section-title .mud-icon-root[b-54ldm6960x] {
    color: var(--accent-color);
}

.panel-section-actions[b-54ldm6960x] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ==========================================================================
   QUICK ACTIONS BAR
   ========================================================================== */

.quick-actions-bar[b-54ldm6960x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.quick-actions-bar .mud-button[b-54ldm6960x] {
    text-transform: none;
    font-size: var(--text-xs);
}

/* ==========================================================================
   KEYBOARD SHORTCUT HINTS
   ========================================================================== */

.kbd[b-54ldm6960x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 var(--space-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* ==========================================================================
   PANEL TRANSITIONS
   ========================================================================== */

.panel-viewport.panel-exit[b-54ldm6960x] {
    animation: panelExit-b-54ldm6960x 0.15s ease-out both;
}

.panel-viewport.panel-enter[b-54ldm6960x] {
    animation: panelEnter-b-54ldm6960x var(--panel-enter-duration, 0.35s) var(--panel-enter-easing, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes panelExit-b-54ldm6960x {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}

@keyframes panelEnter-b-54ldm6960x {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   MOBILE SIDEBAR BACKDROP
   ========================================================================== */

.sidebar-backdrop[b-54ldm6960x] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-drawer) - 1);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 960px) {
    /* On mobile, sidebar is a fixed overlay, not in grid flow */
    .grid-sidebar[b-54ldm6960x] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        z-index: var(--z-modal);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .grid-sidebar.sidebar-open[b-54ldm6960x] {
        transform: translateX(0);
    }

    .grid-sidebar.sidebar-closed[b-54ldm6960x] {
        transform: translateX(-100%);
        width: 280px;
        border-right: 1px solid var(--border-accent);
    }

    /* Show backdrop when sidebar is open on mobile */
    .grid-sidebar.sidebar-open ~ .sidebar-backdrop[b-54ldm6960x] {
        display: block;
    }

    /* Grid collapses to single column on mobile */
    .admin-layout-wrapper[b-54ldm6960x] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "footer";
    }

    .breadcrumb-bar[b-54ldm6960x] {
        padding: 0 var(--space-sm);
    }

    .panel-viewport[b-54ldm6960x] {
        padding: var(--space-sm);
    }
}

@media (max-width: 600px) {
    .sidebar-header[b-54ldm6960x] {
        padding: var(--space-xs) var(--space-sm);
    }

    .breadcrumb-bar[b-54ldm6960x] {
        flex-wrap: wrap;
        padding: var(--space-xs) var(--space-sm);
        gap: var(--space-xs);
    }

    [b-54ldm6960x] .azure-breadcrumbs .mud-breadcrumb-item {
        font-size: var(--text-xs);
    }

    .panel-viewport[b-54ldm6960x] {
        padding: var(--space-xs);
    }

    [b-54ldm6960x] .stat-card {
        min-height: 4rem;
    }

    [b-54ldm6960x] .stat-card .mud-typography-h5 {
        font-size: 1rem !important;
    }
}
/* /Features/Admin/Components/AIEngineering/AIAccessControlPanel.razor.rz.scp.css */
/* AIAccessControlPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

.access-control-panel[b-t8g2i6xske] {
    min-height: 400px;
}

.rate-limit-card[b-t8g2i6xske],
.filter-card[b-t8g2i6xske] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.text-muted[b-t8g2i6xske] {
    color: var(--text-muted);
}
/* /Features/Admin/Components/AIEngineering/AIChatMessage.razor.rz.scp.css */
/* Chat Message Styles */

.chat-message[b-la6ecw0s4w] {
    margin-bottom: 0.5rem;
}

.chat-message.user[b-la6ecw0s4w] {
    display: flex;
    justify-content: flex-end;
}

.message-container[b-la6ecw0s4w] {
    max-width: 80%;
    display: flex;
    flex-direction: column;
}

.message-container.user[b-la6ecw0s4w] {
    align-items: flex-end;
}

.message-container.assistant[b-la6ecw0s4w] {
    align-items: flex-start;
}

.message-avatar[b-la6ecw0s4w] {
    flex-shrink: 0;
}

.tool-calls-container[b-la6ecw0s4w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.tool-chip[b-la6ecw0s4w] {
    font-size: var(--text-xs);
}

.message-bubble[b-la6ecw0s4w] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    word-wrap: break-word;
}

.message-bubble.user[b-la6ecw0s4w] {
    background: var(--accent-gradient);
    color: var(--text-primary);
    border-bottom-right-radius: 4px;
}

.message-bubble.assistant[b-la6ecw0s4w] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

/* Markdown content styling */
[b-la6ecw0s4w] .message-bubble .mud-markdown-body {
    font-size: var(--text-sm);
    line-height: 1.5;
}

[b-la6ecw0s4w] .message-bubble .mud-markdown-body p {
    margin-bottom: 0.5rem;
}

[b-la6ecw0s4w] .message-bubble .mud-markdown-body p:last-child {
    margin-bottom: 0;
}

[b-la6ecw0s4w] .message-bubble .mud-markdown-body code {
    background: var(--bg-overlay);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

[b-la6ecw0s4w] .message-bubble .mud-markdown-body pre {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 0.5rem 0;
}

[b-la6ecw0s4w] .message-bubble .mud-markdown-body pre code {
    background: transparent;
    padding: 0;
}

.message-timestamp[b-la6ecw0s4w] {
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-size: var(--text-xs);
}

.message-bubble.user + .message-timestamp[b-la6ecw0s4w] {
    color: var(--text-tertiary);
}
/* /Features/Admin/Components/AIEngineering/AIConversationList.razor.rz.scp.css */
/* Conversation List Styles */

.conversation-list[b-bxtxow5aaw] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.list-header[b-bxtxow5aaw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.loading-state[b-bxtxow5aaw],
.empty-state[b-bxtxow5aaw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.5rem;
    flex: 1;
}

.conversation-items[b-bxtxow5aaw] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.conversation-item[b-bxtxow5aaw] {
    border-radius: var(--radius-sm);
    margin-bottom: 0.25rem;
    transition: var(--transition-fast);
}

.conversation-item:hover[b-bxtxow5aaw] {
    background: var(--bg-hover);
}

.conversation-item.selected[b-bxtxow5aaw] {
    background: var(--accent-gradient);
    background: linear-gradient(135deg, var(--accent-color-20), var(--secondary-accent-20));
    border-left: 3px solid var(--accent-color);
}

[b-bxtxow5aaw] .conversation-item .mud-list-item-text {
    width: 100%;
}

.conversation-content[b-bxtxow5aaw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.conversation-info[b-bxtxow5aaw] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.conversation-title[b-bxtxow5aaw] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--font-medium);
}

.conversation-meta[b-bxtxow5aaw] {
    color: var(--text-muted);
}

.conversation-menu[b-bxtxow5aaw] {
    opacity: 0;
    transition: var(--transition-fast);
}

.conversation-item:hover .conversation-menu[b-bxtxow5aaw] {
    opacity: 1;
}
/* /Features/Admin/Components/AIEngineering/AIEngineeringPanel.razor.rz.scp.css */
/* AI Engineering Panel - CSS Isolation */

/* Uses 100% of panel-content-wrapper, never viewport-relative heights */
.ai-engineering-panel[b-cwi25dg5sa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Panel Cards */
.panel-card[b-cwi25dg5sa] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    height: 100%;
    overflow: hidden;
}

/* Sidebar */
.sidebar-panel[b-cwi25dg5sa] {
    display: flex;
    flex-direction: column;
}

.sidebar-tabs[b-cwi25dg5sa] {
    height: 100%;
}

[b-cwi25dg5sa] .sidebar-tabs .mud-tabs-panels {
    height: calc(100% - 48px);
    overflow-y: auto;
}

.settings-btn[b-cwi25dg5sa] {
    justify-content: flex-start;
    text-transform: none;
    font-weight: var(--font-normal);
}

.settings-btn:hover[b-cwi25dg5sa] {
    background: var(--bg-hover);
}

/* Chat Panel - fills available space via flex */
.chat-panel[b-cwi25dg5sa] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-header[b-cwi25dg5sa] {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ai-avatar[b-cwi25dg5sa] {
    background: var(--accent-gradient);
}

.text-muted[b-cwi25dg5sa] {
    color: var(--text-muted);
}

/* Messages Area */
.chat-messages[b-cwi25dg5sa] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.empty-chat[b-cwi25dg5sa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: var(--space-xl);
}

.loading-messages[b-cwi25dg5sa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Message Bubbles */
.message-bubble[b-cwi25dg5sa] {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    max-width: 85%;
}

.message-bubble.user[b-cwi25dg5sa] {
    background: var(--accent-gradient);
    color: var(--text-primary);
    margin-left: auto;
}

.message-bubble.assistant[b-cwi25dg5sa] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.streaming-message[b-cwi25dg5sa] {
    opacity: 0.9;
}

/* Input Area */
.chat-input-area[b-cwi25dg5sa] {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.chat-input[b-cwi25dg5sa] {
    flex: 1;
}

/* Text Input Padding & Margins Fix */
[b-cwi25dg5sa] .chat-input .mud-input-slot {
    padding: var(--space-sm) var(--space-md);
}

[b-cwi25dg5sa] .chat-input .mud-input {
    padding: var(--space-xs) 0;
}

[b-cwi25dg5sa] .chat-input textarea {
    padding: var(--space-sm) var(--space-md);
    line-height: 1.5;
}

[b-cwi25dg5sa] .chat-input .mud-input-outlined-border {
    border-color: var(--border-color);
}

[b-cwi25dg5sa] .chat-input:hover .mud-input-outlined-border {
    border-color: var(--accent-color);
}

[b-cwi25dg5sa] .chat-input .mud-input-label {
    padding-left: var(--space-xs);
}

[b-cwi25dg5sa] .chat-input .mud-input-label-outlined {
    transform: translate(14px, 16px) scale(1);
}

[b-cwi25dg5sa] .chat-input .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, -9px) scale(0.75);
}

.send-btn[b-cwi25dg5sa] {
    height: 56px;
    min-width: 100px;
}

.tool-execution-indicator[b-cwi25dg5sa] {
    padding: var(--space-xs);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* Scrollbar Styling */
.chat-messages[b-cwi25dg5sa]::-webkit-scrollbar,
.sidebar-panel[b-cwi25dg5sa]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-cwi25dg5sa]::-webkit-scrollbar-track,
.sidebar-panel[b-cwi25dg5sa]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-cwi25dg5sa]::-webkit-scrollbar-thumb,
.sidebar-panel[b-cwi25dg5sa]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chat-messages[b-cwi25dg5sa]::-webkit-scrollbar-thumb:hover,
.sidebar-panel[b-cwi25dg5sa]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive */
@media (max-width: 960px) {
    .panel-card[b-cwi25dg5sa] {
        margin-bottom: var(--space-md);
    }
}
/* /Features/Admin/Components/AIEngineering/AILogsViewer.razor.rz.scp.css */
/* AI Logs Viewer Styles */

.logs-panel[b-3gjtsyp5bk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.logs-header[b-3gjtsyp5bk] {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.logs-filters[b-3gjtsyp5bk] {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.filter-select[b-3gjtsyp5bk] {
    max-width: 120px;
}

.logs-content[b-3gjtsyp5bk] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.empty-logs[b-3gjtsyp5bk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.log-entry[b-3gjtsyp5bk] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.log-entry:hover[b-3gjtsyp5bk] {
    background: var(--bg-hover);
}

.log-entry.error[b-3gjtsyp5bk] {
    background: var(--error-bg);
}

.log-entry.warning[b-3gjtsyp5bk] {
    background: var(--warning-bg);
}

.log-entry.tool[b-3gjtsyp5bk] {
    background: var(--accent-color-10);
}

.log-timestamp[b-3gjtsyp5bk] {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 80px;
}

.log-level[b-3gjtsyp5bk] {
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.log-message[b-3gjtsyp5bk] {
    flex: 1;
    word-break: break-word;
}

.log-duration[b-3gjtsyp5bk] {
    color: var(--text-muted);
    font-size: 0.75em;
    margin-left: 0.5rem;
}

.logs-footer[b-3gjtsyp5bk] {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.text-muted[b-3gjtsyp5bk] {
    color: var(--text-muted);
}

/* Scrollbar */
.logs-content[b-3gjtsyp5bk]::-webkit-scrollbar {
    width: 6px;
}

.logs-content[b-3gjtsyp5bk]::-webkit-scrollbar-track {
    background: transparent;
}

.logs-content[b-3gjtsyp5bk]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
/* /Features/Admin/Components/AIEngineering/AIModelConfigPanel.razor.rz.scp.css */
/* AI Model Config Panel Styles */

.model-config-panel[b-ofeoirx16q] {
    padding: 1rem;
}

.loading-state[b-ofeoirx16q] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.model-card[b-ofeoirx16q] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.model-card:hover[b-ofeoirx16q] {
    border-color: var(--accent-color);
}

.model-card.default[b-ofeoirx16q] {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color-20);
}

.model-card.disabled[b-ofeoirx16q] {
    opacity: 0.6;
}

.model-stat[b-ofeoirx16q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.text-muted[b-ofeoirx16q] {
    color: var(--text-muted);
}

/* Text Input Padding & Margins Fix */
[b-ofeoirx16q] .mud-input-outlined .mud-input-slot {
    padding: 0.75rem 1rem;
}

[b-ofeoirx16q] .mud-input-outlined .mud-input {
    padding: 0.25rem 0;
}

[b-ofeoirx16q] .mud-input-outlined-border {
    border-color: var(--border-color);
}

[b-ofeoirx16q] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color);
}
/* /Features/Admin/Components/AIEngineering/ModelSelector.razor.rz.scp.css */
/* Model Selector Styles */

.model-menu[b-4b45dvfqur] {
    min-width: 280px;
}

.text-muted[b-4b45dvfqur] {
    color: var(--text-muted);
}

.selected-model[b-4b45dvfqur] {
    background: var(--accent-color-10);
    border-left: 3px solid var(--accent-color);
}

[b-4b45dvfqur] .mud-menu-item {
    padding: 0.75rem 1rem;
}
/* /Features/Admin/Components/AIEngineering/SystemPromptEditor.razor.rz.scp.css */
/* System Prompt Editor Styles */

.prompt-editor[b-bgi9l8e0ob] {
    min-height: 500px;
}

.prompt-list-panel[b-bgi9l8e0ob],
.prompt-edit-panel[b-bgi9l8e0ob] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 100%;
}

.panel-header[b-bgi9l8e0ob] {
    padding: 0.75rem 1rem;
}

.loading-state[b-bgi9l8e0ob] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.prompt-items[b-bgi9l8e0ob] {
    max-height: 400px;
    overflow-y: auto;
}

.prompt-item[b-bgi9l8e0ob] {
    border-radius: var(--radius-sm);
    margin: 0.25rem 0.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.prompt-item:hover[b-bgi9l8e0ob] {
    background: var(--bg-hover);
}

.prompt-item.selected[b-bgi9l8e0ob] {
    background: var(--accent-color-15);
    border-left: 3px solid var(--accent-color);
}

.prompt-item-content[b-bgi9l8e0ob] {
    width: 100%;
}

.prompt-info[b-bgi9l8e0ob] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.empty-editor[b-bgi9l8e0ob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    gap: 1rem;
}

.editor-header[b-bgi9l8e0ob] {
    padding: 1rem;
}

[b-bgi9l8e0ob] .prompt-edit-panel .mud-form {
    padding: 0 1rem 1rem;
}

/* Text Input Padding & Margins Fix */
[b-bgi9l8e0ob] .mud-input-outlined .mud-input-slot {
    padding: 0.75rem 1rem;
}

[b-bgi9l8e0ob] .mud-input-outlined .mud-input {
    padding: 0.25rem 0;
}

[b-bgi9l8e0ob] .mud-input-outlined textarea {
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

[b-bgi9l8e0ob] .mud-input-outlined-border {
    border-color: var(--border-color);
}

[b-bgi9l8e0ob] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color);
}
/* /Features/Admin/Components/AIEngineering/ToolConfigurationPanel.razor.rz.scp.css */
/* Tool Configuration Panel Styles */

.tool-config-panel[b-d51q29fivx] {
    padding: 1rem;
}

.loading-state[b-d51q29fivx] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.tool-table[b-d51q29fivx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

[b-d51q29fivx] .tool-table .mud-table-container {
    border-radius: var(--radius-md);
}

[b-d51q29fivx] .tool-table th {
    background: var(--bg-secondary);
    font-weight: var(--font-semibold);
}

.text-muted[b-d51q29fivx] {
    color: var(--text-muted);
}

/* Text Input Padding & Margins Fix */
[b-d51q29fivx] .mud-input-outlined .mud-input-slot {
    padding: 0.75rem 1rem;
}

[b-d51q29fivx] .mud-input-outlined .mud-input {
    padding: 0.25rem 0;
}

[b-d51q29fivx] .mud-input-outlined textarea {
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

[b-d51q29fivx] .mud-input-outlined-border {
    border-color: var(--border-color);
}

[b-d51q29fivx] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color);
}

/* Security Context Builder */
.security-context-builder[b-d51q29fivx] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.security-context-header[b-d51q29fivx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.security-context-options[b-d51q29fivx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.security-context-option[b-d51q29fivx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.security-context-preview[b-d51q29fivx] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 150px;
    overflow-y: auto;
}

.security-help-icon[b-d51q29fivx] {
    cursor: help;
}

/* JSON validation states */
.json-valid[b-d51q29fivx] {
    border-color: var(--success-color) !important;
}

.json-invalid[b-d51q29fivx] {
    border-color: var(--error-color) !important;
}

.validation-message[b-d51q29fivx] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.validation-message.valid[b-d51q29fivx] {
    color: var(--success-color);
}

.validation-message.invalid[b-d51q29fivx] {
    color: var(--error-color);
}
/* /Features/Admin/Components/AIEngineering/TTSConfigurationPanel.razor.rz.scp.css */
.tts-config-panel[b-mz91nl1k57] {
    padding: 1rem;
}

.provider-section[b-mz91nl1k57] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.provider-radio-group[b-mz91nl1k57] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.provider-card[b-mz91nl1k57] {
    background: var(--mud-palette-background);
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.provider-card:hover[b-mz91nl1k57] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-background-hover);
}

.provider-card.active[b-mz91nl1k57] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.provider-card.disabled[b-mz91nl1k57] {
    opacity: 0.6;
    cursor: not-allowed;
}

.provider-card.disabled:hover[b-mz91nl1k57] {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

.config-panels[b-mz91nl1k57] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.config-panels[b-mz91nl1k57]  .mud-expand-panel {
    background: var(--mud-palette-surface);
}

.config-panels[b-mz91nl1k57]  .mud-expand-panel-header {
    padding: 1rem;
}

.status-section[b-mz91nl1k57] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.status-table[b-mz91nl1k57] {
    background: transparent;
}

.status-table th[b-mz91nl1k57] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.status-table td[b-mz91nl1k57] {
    vertical-align: middle;
}

.text-muted[b-mz91nl1k57] {
    color: var(--mud-palette-text-secondary);
}
/* /Features/Admin/Components/Bdc/BdcCompliancePanel.razor.rz.scp.css */
.bdc-compliance-panel[b-gkaj58uea3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.panel-header[b-gkaj58uea3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.panel-title-group[b-gkaj58uea3] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.panel-title-group > :first-child[b-gkaj58uea3] {
    color: var(--accent-color);
}

.panel-body[b-gkaj58uea3] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

[b-gkaj58uea3] .bdc-tabs {
    height: 100%;
}

[b-gkaj58uea3] .bdc-tabs .mud-tabs-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

[b-gkaj58uea3] .bdc-tabs .mud-tab {
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

[b-gkaj58uea3] .bdc-tabs .mud-tab.mud-tab-active {
    color: var(--accent-color);
}

[b-gkaj58uea3] .bdc-tabs .mud-tabs-panels {
    padding: var(--space-lg);
    overflow-y: auto;
}

@media (max-width: 768px) {
    [b-gkaj58uea3] .bdc-tabs .mud-tab {
        font-size: var(--text-xs);
        padding: var(--space-sm);
    }

    [b-gkaj58uea3] .bdc-tabs .mud-tabs-panels {
        padding: var(--space-md);
    }
}
/* /Features/Admin/Components/Bdc/BdcConfigurationTab.razor.rz.scp.css */
.bdc-config-tab[b-ovjzn12qjl] {
    animation: fadeIn-b-ovjzn12qjl 0.3s ease;
}

.loading-container[b-ovjzn12qjl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    color: var(--text-secondary);
}

.config-section[b-ovjzn12qjl] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.config-section:hover[b-ovjzn12qjl] {
    border-color: var(--accent-color);
}

.section-header[b-ovjzn12qjl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-header > :first-child[b-ovjzn12qjl] {
    color: var(--accent-color);
}

.switch-row[b-ovjzn12qjl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.save-actions[b-ovjzn12qjl] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

[b-ovjzn12qjl] .save-btn {
    border-radius: var(--radius-md) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: none !important;
    padding: var(--space-sm) var(--space-lg) !important;
}

.save-alert[b-ovjzn12qjl] {
    flex: 0 0 auto;
}

@keyframes fadeIn-b-ovjzn12qjl {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .save-actions[b-ovjzn12qjl] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Features/Admin/Components/Bdc/BdcDeltaViewer.razor.rz.scp.css */
.bdc-delta-viewer[b-5m2pb2fj99] {
    animation: fadeIn-b-5m2pb2fj99 0.3s ease;
}

.loading-container[b-5m2pb2fj99] {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    color: var(--text-secondary);
}

.delta-summary[b-5m2pb2fj99] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
}

.delta-card[b-5m2pb2fj99] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.delta-card:hover[b-5m2pb2fj99] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.delta-card.added[b-5m2pb2fj99] {
    background: var(--success-bg);
    border-color: var(--success-color);
    color: var(--success-color);
}

.delta-card.removed[b-5m2pb2fj99] {
    background: var(--error-bg);
    border-color: var(--error-color);
    color: var(--error-color);
}

.delta-card.changed[b-5m2pb2fj99] {
    background: var(--warning-bg);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.delta-card.unchanged[b-5m2pb2fj99] {
    background: var(--bg-card);
    color: var(--text-secondary);
}

.delta-info[b-5m2pb2fj99] {
    display: flex;
    flex-direction: column;
}

.delta-count[b-5m2pb2fj99] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.delta-label[b-5m2pb2fj99] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-5m2pb2fj99] .delta-table {
    background: transparent !important;
}

[b-5m2pb2fj99] .delta-table .mud-table-head .mud-table-cell {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card) !important;
}

[b-5m2pb2fj99] .delta-table .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-5m2pb2fj99] .delta-table .mud-table-cell {
    border-bottom: 1px solid var(--border-color);
}

@keyframes fadeIn-b-5m2pb2fj99 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 640px) {
    .delta-summary[b-5m2pb2fj99] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Features/Admin/Components/Bdc/BdcFabricTab.razor.rz.scp.css */
.bdc-fabric-tab[b-z74n0odqnf] {
    animation: fadeIn-b-z74n0odqnf 0.3s ease;
}

.fabric-section[b-z74n0odqnf] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.section-header[b-z74n0odqnf] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-header > :first-child[b-z74n0odqnf] {
    color: var(--accent-color);
}

.upload-area[b-z74n0odqnf] {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.upload-area:hover[b-z74n0odqnf],
.upload-area.drag-over[b-z74n0odqnf] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.upload-content[b-z74n0odqnf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.upload-icon[b-z74n0odqnf] {
    color: var(--accent-color);
    opacity: 0.7;
}

[b-z74n0odqnf] .version-table {
    background: transparent !important;
}

[b-z74n0odqnf] .version-table .mud-table-head .mud-table-cell {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
}

[b-z74n0odqnf] .version-table .mud-table-body .mud-table-row {
    transition: background var(--transition-fast);
    cursor: pointer;
}

[b-z74n0odqnf] .version-table .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-z74n0odqnf] .version-table .mud-table-cell {
    border-bottom: 1px solid var(--border-color);
}

.no-versions[b-z74n0odqnf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

@keyframes fadeIn-b-z74n0odqnf {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Features/Admin/Components/Bdc/BdcFilingsTab.razor.rz.scp.css */
.bdc-filings-tab[b-mmwjm8zsfq] {
    animation: fadeIn-b-mmwjm8zsfq 0.3s ease;
}

.filings-section[b-mmwjm8zsfq] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.section-header[b-mmwjm8zsfq] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-header > :first-child[b-mmwjm8zsfq] {
    color: var(--accent-color);
}

.loading-container[b-mmwjm8zsfq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
}

[b-mmwjm8zsfq] .filings-table {
    background: transparent !important;
}

[b-mmwjm8zsfq] .filings-table .mud-table-head .mud-table-cell {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
}

[b-mmwjm8zsfq] .filings-table .mud-table-body .mud-table-row {
    transition: background var(--transition-fast);
}

[b-mmwjm8zsfq] .filings-table .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-mmwjm8zsfq] .filings-table .mud-table-cell {
    border-bottom: 1px solid var(--border-color);
}

.no-filings[b-mmwjm8zsfq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

.diff-summary[b-mmwjm8zsfq] {
    animation: fadeIn-b-mmwjm8zsfq 0.3s ease;
}

.diff-cards[b-mmwjm8zsfq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
}

.diff-card[b-mmwjm8zsfq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.diff-card:hover[b-mmwjm8zsfq] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.diff-value[b-mmwjm8zsfq] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.diff-label[b-mmwjm8zsfq] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

@keyframes fadeIn-b-mmwjm8zsfq {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .diff-cards[b-mmwjm8zsfq] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Features/Admin/Components/Bdc/BdcGenerateTab.razor.rz.scp.css */
.bdc-generate-tab[b-g1rq0jncwq] {
    animation: fadeIn-b-g1rq0jncwq 0.3s ease;
}

.generate-section[b-g1rq0jncwq] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.section-header[b-g1rq0jncwq] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-header > :first-child[b-g1rq0jncwq] {
    color: var(--accent-color);
}

.stats-overlay[b-g1rq0jncwq] {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.stats-overlay-grid[b-g1rq0jncwq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.overlay-stat[b-g1rq0jncwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.overlay-stat.covered[b-g1rq0jncwq] {
    color: var(--success-color);
}

.overlay-stat.uncovered[b-g1rq0jncwq] {
    color: var(--error-color);
}

.overlay-stat.percentage[b-g1rq0jncwq] {
    color: var(--info-color);
}

.overlay-value[b-g1rq0jncwq] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.overlay-label[b-g1rq0jncwq] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.generate-action[b-g1rq0jncwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-g1rq0jncwq] .generate-btn {
    border-radius: var(--radius-md) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: none !important;
    padding: var(--space-md) var(--space-2xl) !important;
    font-size: var(--text-lg) !important;
    box-shadow: var(--shadow-glow) !important;
    transition: all var(--transition-fast) !important;
}

[b-g1rq0jncwq] .generate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

@keyframes fadeIn-b-g1rq0jncwq {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .stats-overlay-grid[b-g1rq0jncwq] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/Bdc/BdcLinkBudgetTab.razor.rz.scp.css */
.bdc-link-budget-tab[b-u56puywfai] {
    animation: fadeIn-b-u56puywfai 0.3s ease;
}

.loading-container[b-u56puywfai] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    color: var(--text-secondary);
}

.lb-section[b-u56puywfai] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.lb-section:hover[b-u56puywfai] {
    border-color: var(--accent-color);
}

.section-header[b-u56puywfai] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-header > :first-child[b-u56puywfai] {
    color: var(--accent-color);
}

.column-label[b-u56puywfai] {
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-xs);
}

.derived-grid[b-u56puywfai] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.derived-item[b-u56puywfai] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.derived-label[b-u56puywfai] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.derived-value[b-u56puywfai] {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--accent-color);
}

[b-u56puywfai] .zone-table {
    margin-top: var(--space-sm);
}

.action-bar[b-u56puywfai] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

[b-u56puywfai] .action-btn {
    border-radius: var(--radius-md) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: none !important;
    padding: var(--space-sm) var(--space-lg) !important;
}

@keyframes fadeIn-b-u56puywfai {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .derived-grid[b-u56puywfai] {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-bar[b-u56puywfai] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Features/Admin/Components/Bdc/BdcMapComponent.razor.rz.scp.css */
/* BdcMapComponent.razor.css - Leaflet map container styling */

.bdc-map-container[b-3cubqbjvrg] {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

/* Leaflet popup styling to match dark theme */
[b-3cubqbjvrg] .bdc-popup .leaflet-popup-content-wrapper {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

[b-3cubqbjvrg] .bdc-popup .leaflet-popup-tip {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

[b-3cubqbjvrg] .bdc-popup .leaflet-popup-close-button {
    color: var(--text-secondary);
}

[b-3cubqbjvrg] .bdc-popup .leaflet-popup-close-button:hover {
    color: var(--text-primary);
}

/* Tower icon styling */
[b-3cubqbjvrg] .bdc-tower-icon {
    background: transparent;
    border: none;
}

/* Cluster icon styling */
[b-3cubqbjvrg] .bdc-cluster-icon {
    background: transparent;
    border: none;
}

[b-3cubqbjvrg] .bdc-cluster-small,
[b-3cubqbjvrg] .bdc-cluster-medium,
[b-3cubqbjvrg] .bdc-cluster-large {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-3cubqbjvrg] .bdc-cluster-small {
    width: 30px;
    height: 30px;
    background: rgba(96, 165, 250, 0.6);
    border: 2px solid rgba(96, 165, 250, 0.9);
    font-size: var(--text-xs);
}

[b-3cubqbjvrg] .bdc-cluster-medium {
    width: 40px;
    height: 40px;
    background: rgba(99, 102, 241, 0.6);
    border: 2px solid rgba(99, 102, 241, 0.9);
    font-size: var(--text-sm);
}

[b-3cubqbjvrg] .bdc-cluster-large {
    width: 50px;
    height: 50px;
    background: rgba(139, 92, 246, 0.6);
    border: 2px solid rgba(139, 92, 246, 0.9);
    font-size: var(--text-base);
}

/* Filing preview cluster */
[b-3cubqbjvrg] .bdc-cluster-filing {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    background: rgba(74, 222, 128, 0.5);
    border: 2px solid rgba(74, 222, 128, 0.8);
    width: 100%;
    height: 100%;
    font-size: var(--text-xs);
}

/* Leaflet controls dark theme override */
[b-3cubqbjvrg] .leaflet-control-zoom a {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[b-3cubqbjvrg] .leaflet-control-zoom a:hover {
    background: var(--bg-hover) !important;
}

[b-3cubqbjvrg] .leaflet-control-attribution {
    background: rgba(15, 23, 42, 0.8) !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
}

[b-3cubqbjvrg] .leaflet-control-attribution a {
    color: var(--text-secondary) !important;
}
/* /Features/Admin/Components/Bdc/BdcSiteOverrideDialog.razor.rz.scp.css */
.loading-container[b-0pkr44kjce] {
    display: flex;
    justify-content: center;
    padding: var(--space-xl);
}

.override-form[b-0pkr44kjce] {
    max-height: 60vh;
    overflow-y: auto;
}

.override-field[b-0pkr44kjce] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.field-header[b-0pkr44kjce] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.speed-tier-override-section[b-0pkr44kjce] {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

[b-0pkr44kjce] .mini-tier-table {
    background: transparent !important;
}

[b-0pkr44kjce] .mini-tier-table .mud-table-head .mud-table-cell {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
    padding: var(--space-xs) var(--space-sm);
}

[b-0pkr44kjce] .mini-tier-table .mud-table-cell {
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-xs) var(--space-sm);
}
/* /Features/Admin/Components/Bdc/BdcSitesTab.razor.rz.scp.css */
.bdc-sites-tab[b-ws07dzvkhx] {
    animation: fadeIn-b-ws07dzvkhx 0.3s ease;
    height: calc(100vh - 280px);
    min-height: 500px;
}

.sites-layout[b-ws07dzvkhx] {
    display: flex;
    gap: var(--space-md);
    height: 100%;
}

.sites-table-panel[b-ws07dzvkhx] {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sites-map-panel[b-ws07dzvkhx] {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 400px;
}

.panel-toolbar[b-ws07dzvkhx] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

[b-ws07dzvkhx] .search-field {
    flex: 1;
}

.loading-container[b-ws07dzvkhx] {
    display: flex;
    justify-content: center;
    padding: var(--space-xl);
}

[b-ws07dzvkhx] .sites-table {
    background: transparent !important;
    flex: 1;
}

[b-ws07dzvkhx] .sites-table .mud-table-head .mud-table-cell {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card) !important;
}

[b-ws07dzvkhx] .sites-table .mud-table-body .mud-table-row {
    transition: background var(--transition-fast);
    cursor: pointer;
}

[b-ws07dzvkhx] .sites-table .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-ws07dzvkhx] .sites-table .mud-table-body .mud-table-row.excluded-row {
    opacity: 0.5;
}

[b-ws07dzvkhx] .sites-table .mud-table-cell {
    border-bottom: 1px solid var(--border-color);
}

.sites-summary[b-ws07dzvkhx] {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-color);
}

.no-sites[b-ws07dzvkhx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

@keyframes fadeIn-b-ws07dzvkhx {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .sites-layout[b-ws07dzvkhx] {
        flex-direction: column;
    }

    .sites-table-panel[b-ws07dzvkhx] {
        flex: none;
        max-height: 50%;
    }

    .sites-map-panel[b-ws07dzvkhx] {
        flex: 1;
        min-height: 300px;
    }
}
/* /Features/Admin/Components/Bdc/BdcSpeedTierEditor.razor.rz.scp.css */
.speed-tier-editor[b-iryuv7h9v2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

[b-iryuv7h9v2] .tier-table {
    background: transparent !important;
}

[b-iryuv7h9v2] .tier-table .mud-table-head .mud-table-cell {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
}

[b-iryuv7h9v2] .tier-table .mud-table-body .mud-table-row {
    transition: background var(--transition-fast);
}

[b-iryuv7h9v2] .tier-table .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-iryuv7h9v2] .tier-table .mud-table-cell {
    border-bottom: 1px solid var(--border-color);
}

.no-tiers[b-iryuv7h9v2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

.add-tier-form[b-iryuv7h9v2] {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    animation: fadeIn-b-iryuv7h9v2 0.2s ease;
}

.add-tier-action[b-iryuv7h9v2] {
    display: flex;
    padding-top: var(--space-sm);
}

@keyframes fadeIn-b-iryuv7h9v2 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Features/Admin/Components/Bdc/BdcStatsCards.razor.rz.scp.css */
.bdc-stats-cards[b-s83l27qrzh] {
    animation: fadeIn-b-s83l27qrzh 0.3s ease;
}

.stats-grid[b-s83l27qrzh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.stat-card[b-s83l27qrzh] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.stat-card:hover[b-s83l27qrzh] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.stat-card.wide[b-s83l27qrzh] {
    grid-column: span 2;
}

.stat-icon[b-s83l27qrzh] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.total[b-s83l27qrzh] {
    background: var(--info-bg);
    color: var(--info-color);
}

.stat-icon.locations[b-s83l27qrzh] {
    background: var(--success-bg);
    color: var(--success-color);
}

.stat-icon.residential[b-s83l27qrzh] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.stat-icon.business[b-s83l27qrzh] {
    background: var(--bg-hover);
    color: var(--accent-color);
}

.stat-icon.cities[b-s83l27qrzh] {
    background: var(--success-bg);
    color: var(--success-color);
}

.stat-icon.bounds[b-s83l27qrzh] {
    background: var(--info-bg);
    color: var(--info-color);
}

.stat-content[b-s83l27qrzh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.stat-label[b-s83l27qrzh] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-value[b-s83l27qrzh] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.city-list[b-s83l27qrzh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.bounds-info[b-s83l27qrzh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

@media (max-width: 640px) {
    .stat-card.wide[b-s83l27qrzh] {
        grid-column: span 1;
    }

    .stats-grid[b-s83l27qrzh] {
        grid-template-columns: 1fr;
    }
}

@keyframes fadeIn-b-s83l27qrzh {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Features/Admin/Components/Bdc/BdcValidationResultsPanel.razor.rz.scp.css */
.bdc-validation-results[b-j6vrkpm90x] {
    animation: fadeIn-b-j6vrkpm90x 0.3s ease;
}

.validation-section[b-j6vrkpm90x] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.section-header[b-j6vrkpm90x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.section-header > :first-child[b-j6vrkpm90x] {
    color: var(--accent-color);
}

.validation-summary-chips[b-j6vrkpm90x] {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.no-results[b-j6vrkpm90x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}

.validation-group[b-j6vrkpm90x] {
    margin-bottom: var(--space-md);
}

.group-header[b-j6vrkpm90x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.group-header.error[b-j6vrkpm90x] {
    background: var(--error-bg);
    color: var(--error-color);
}

.group-header.warning[b-j6vrkpm90x] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.group-header.info[b-j6vrkpm90x] {
    background: var(--info-bg);
    color: var(--info-color);
}

[b-j6vrkpm90x] .validation-item {
    margin-bottom: var(--space-xs);
}

[b-j6vrkpm90x] .validation-expansion {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
}

[b-j6vrkpm90x] .validation-expansion .mud-expand-panel-header {
    padding: var(--space-sm) var(--space-md) !important;
}

.validation-item-header[b-j6vrkpm90x] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.validation-detail[b-j6vrkpm90x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    color: var(--text-secondary);
}

@keyframes fadeIn-b-j6vrkpm90x {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Features/Admin/Components/CallbacksPanel.razor.rz.scp.css */
/* CallbacksPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Icon button scale on hover */
[b-3ls82mez5b] .mud-icon-button:hover {
    transform: scale(1.1);
}

/* Custom shimmer animation for skeleton (if needed beyond global) */
@keyframes shimmer-b-3ls82mez5b {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Features/Admin/Components/CircuitControlPanel.razor.rz.scp.css */
/*
 * CircuitControlPanel.razor.css - Circuit Control Panel Styles
 * Uses centralized CSS variables from /assets/css/ayva-theme.css
 * MudBlazor overrides are handled globally in ayva-theme.css
 */

/* ===== CONTAINER ===== */
.circuit-control-container[b-d6tchebhln] {
    padding: var(--space-md);
}

/* ===== HEADER SECTION ===== */
.panel-header[b-d6tchebhln] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
}

.header-content[b-d6tchebhln] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.header-icon[b-d6tchebhln] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    flex-shrink: 0;
}

.header-text h1[b-d6tchebhln] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.header-text p[b-d6tchebhln] {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.header-stats[b-d6tchebhln] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.stat-chip[b-d6tchebhln] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-normal);
}

.stat-chip.selected[b-d6tchebhln] {
    background: var(--bg-active);
    border-color: var(--accent-color);
    color: var(--accent-light);
}

/* ===== SECTION CARDS ===== */
.section-card[b-d6tchebhln] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.section-card:hover[b-d6tchebhln] {
    border-color: var(--border-accent);
}

.section-card.full-width[b-d6tchebhln] {
    background: transparent;
    border: none;
}

.section-header[b-d6tchebhln] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.section-title-group h3[b-d6tchebhln] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.section-subtitle[b-d6tchebhln] {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.section-content[b-d6tchebhln] {
    padding: var(--space-lg);
}

/* ===== BROADCAST TABS ===== */
[b-d6tchebhln] .broadcast-tabs {
    margin: 0;
}

[b-d6tchebhln] .broadcast-tab-panel {
    padding: var(--space-lg) !important;
}

.form-section[b-d6tchebhln] {
    min-height: 200px;
}

/* ===== FORM ELEMENTS ===== */
.checkbox-field[b-d6tchebhln] {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 2.5rem;
}

.action-button[b-d6tchebhln] {
    height: 2.5rem;
}

.code-input[b-d6tchebhln]  .mud-input-slot {
    font-family: var(--font-mono) !important;
    font-size: var(--text-sm) !important;
}

.severity-option[b-d6tchebhln] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ===== CIRCUIT INFO CARD ===== */
.circuit-info-card[b-d6tchebhln] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.circuit-info-card .section-content[b-d6tchebhln] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.circuit-details-scroll[b-d6tchebhln] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    padding-right: var(--space-sm);
}

/* Scrollbar for circuit details */
.circuit-details-scroll[b-d6tchebhln]::-webkit-scrollbar {
    width: 0.375rem;
}

.circuit-details-scroll[b-d6tchebhln]::-webkit-scrollbar-track {
    background: var(--black-overlay-20);
    border-radius: var(--radius-xs);
}

.circuit-details-scroll[b-d6tchebhln]::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: var(--radius-xs);
}

.circuit-details-scroll[b-d6tchebhln]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
}

/* Info Groups */
.info-group[b-d6tchebhln] {
    margin-bottom: var(--space-lg);
}

.info-group:last-child[b-d6tchebhln] {
    margin-bottom: 0;
}

.info-group-header[b-d6tchebhln] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-row[b-d6tchebhln] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-xs) 0;
    gap: var(--space-md);
}

.info-label[b-d6tchebhln] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.info-value[b-d6tchebhln] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-align: right;
    word-break: break-word;
}

.info-value.mono[b-d6tchebhln] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Privacy Flags */
.privacy-flags[b-d6tchebhln] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* User Agent Text */
.user-agent-text[b-d6tchebhln] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    word-break: break-all;
    line-height: 1.5;
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

/* Empty State */
.empty-state[b-d6tchebhln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--text-muted);
    text-align: center;
}

.empty-state span[b-d6tchebhln] {
    font-size: var(--text-sm);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1280px) {
    .panel-header[b-d6tchebhln] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-stats[b-d6tchebhln] {
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    .circuit-control-container[b-d6tchebhln] {
        padding: var(--space-sm);
    }

    .panel-header[b-d6tchebhln] {
        padding: var(--space-md);
    }

    .header-icon[b-d6tchebhln] {
        width: 3rem;
        height: 3rem;
    }

    .header-text h1[b-d6tchebhln] {
        font-size: var(--text-xl);
    }

    .section-header[b-d6tchebhln],
    .section-content[b-d6tchebhln],
    [b-d6tchebhln] .broadcast-tab-panel {
        padding: var(--space-md) !important;
    }

    .circuit-details-scroll[b-d6tchebhln] {
        max-height: 400px;
    }
}

@media (max-width: 600px) {
    .header-content[b-d6tchebhln] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-d6tchebhln] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .stat-chip[b-d6tchebhln] {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--text-xs);
    }

    .info-row[b-d6tchebhln] {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .info-value[b-d6tchebhln] {
        text-align: left;
    }

    .privacy-flags[b-d6tchebhln] {
        flex-direction: column;
    }
}
/* /Features/Admin/Components/Coms.razor.rz.scp.css */
/*
 * Coms.razor.css - Circuit Control Panel Styles
 * Uses centralized CSS variables from /assets/css/ayva-theme.css
 * MudBlazor overrides are handled globally in ayva-theme.css
 */

/* ===== CONTAINER ===== */
.circuit-control-container[b-ucg7qumzbg] {
    padding: var(--space-md);
    min-height: 100%;
}

/* ===== HEADER SECTION ===== */
.panel-header[b-ucg7qumzbg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
}

.header-content[b-ucg7qumzbg] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.header-icon[b-ucg7qumzbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    flex-shrink: 0;
}

.header-text h1[b-ucg7qumzbg] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.header-text p[b-ucg7qumzbg] {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.header-stats[b-ucg7qumzbg] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.stat-chip[b-ucg7qumzbg] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-normal);
}

.stat-chip.selected[b-ucg7qumzbg] {
    background: var(--bg-active);
    border-color: var(--accent-color);
    color: var(--accent-light);
}

/* ===== SECTION CARDS ===== */
.section-card[b-ucg7qumzbg] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.section-card:hover[b-ucg7qumzbg] {
    border-color: var(--border-accent);
}

.section-card.full-width[b-ucg7qumzbg] {
    background: transparent;
    border: none;
}

.section-header[b-ucg7qumzbg] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.section-title-group h3[b-ucg7qumzbg] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.section-subtitle[b-ucg7qumzbg] {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.section-content[b-ucg7qumzbg] {
    padding: var(--space-lg);
}

/* ===== BROADCAST TABS ===== */
[b-ucg7qumzbg] .broadcast-tabs {
    margin: 0;
}

[b-ucg7qumzbg] .broadcast-tab-panel {
    padding: var(--space-lg) !important;
}

.form-section[b-ucg7qumzbg] {
    min-height: 200px;
}

/* ===== FORM ELEMENTS ===== */
.checkbox-field[b-ucg7qumzbg] {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 2.5rem;
}

.action-button[b-ucg7qumzbg] {
    height: 2.5rem;
}

.code-input[b-ucg7qumzbg]  .mud-input-slot {
    font-family: var(--font-mono) !important;
    font-size: var(--text-sm) !important;
}

.severity-option[b-ucg7qumzbg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ===== CIRCUIT INFO CARD ===== */
.circuit-info-card[b-ucg7qumzbg] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.circuit-info-card .section-content[b-ucg7qumzbg] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.circuit-details-scroll[b-ucg7qumzbg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    padding-right: var(--space-sm);
}

/* Scrollbar for circuit details */
.circuit-details-scroll[b-ucg7qumzbg]::-webkit-scrollbar {
    width: 0.375rem;
}

.circuit-details-scroll[b-ucg7qumzbg]::-webkit-scrollbar-track {
    background: var(--black-overlay-20);
    border-radius: var(--radius-xs);
}

.circuit-details-scroll[b-ucg7qumzbg]::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: var(--radius-xs);
}

.circuit-details-scroll[b-ucg7qumzbg]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-light);
}

/* Info Groups */
.info-group[b-ucg7qumzbg] {
    margin-bottom: var(--space-lg);
}

.info-group:last-child[b-ucg7qumzbg] {
    margin-bottom: 0;
}

.info-group-header[b-ucg7qumzbg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-row[b-ucg7qumzbg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-xs) 0;
    gap: var(--space-md);
}

.info-label[b-ucg7qumzbg] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.info-value[b-ucg7qumzbg] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-align: right;
    word-break: break-word;
}

.info-value.mono[b-ucg7qumzbg] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Privacy Flags */
.privacy-flags[b-ucg7qumzbg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* User Agent Text */
.user-agent-text[b-ucg7qumzbg] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    word-break: break-all;
    line-height: 1.5;
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

/* Empty State */
.empty-state[b-ucg7qumzbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--text-muted);
    text-align: center;
}

.empty-state span[b-ucg7qumzbg] {
    font-size: var(--text-sm);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1280px) {
    .panel-header[b-ucg7qumzbg] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-stats[b-ucg7qumzbg] {
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    .circuit-control-container[b-ucg7qumzbg] {
        padding: var(--space-sm);
    }

    .panel-header[b-ucg7qumzbg] {
        padding: var(--space-md);
    }

    .header-icon[b-ucg7qumzbg] {
        width: 3rem;
        height: 3rem;
    }

    .header-text h1[b-ucg7qumzbg] {
        font-size: var(--text-xl);
    }

    .section-header[b-ucg7qumzbg],
    .section-content[b-ucg7qumzbg],
    [b-ucg7qumzbg] .broadcast-tab-panel {
        padding: var(--space-md) !important;
    }

    .circuit-details-scroll[b-ucg7qumzbg] {
        max-height: 400px;
    }
}

@media (max-width: 600px) {
    .header-content[b-ucg7qumzbg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-ucg7qumzbg] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .stat-chip[b-ucg7qumzbg] {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--text-xs);
    }

    .info-row[b-ucg7qumzbg] {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .info-value[b-ucg7qumzbg] {
        text-align: left;
    }

    .privacy-flags[b-ucg7qumzbg] {
        flex-direction: column;
    }
}
/* /Features/Admin/Components/ConfigurationPanel.razor.rz.scp.css */
/* ConfigurationPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Hover highlight for inline editing */
.hover-highlight:hover[b-w00as1si6m] {
    background-color: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.hover-highlight .edit-icon[b-w00as1si6m] {
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.hover-highlight:hover .edit-icon[b-w00as1si6m] {
    opacity: 1;
}

/* Brand icon colors using CSS variables */
[b-w00as1si6m] .brand-icon-discord {
    color: var(--discord-color);
}

[b-w00as1si6m] .brand-icon-twilio {
    color: var(--twilio-color);
}

[b-w00as1si6m] .brand-icon-slack {
    color: var(--slack-color);
}

[b-w00as1si6m] .brand-icon-uisp {
    color: var(--uisp-color);
}

/* Fixed notification positioning */
.fixed-notification[b-w00as1si6m] {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 9999;
}
/* /Features/Admin/Components/CoverageManagementPanel.razor.rz.scp.css */
/* CoverageManagementPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Sidebar panel - ensure minimum usable height */
[b-p42bzz52ht] .mud-grid-item:first-child .mud-paper {
    min-height: var(--min-panel-height, 24rem);
}

/* Map list sidebar - selected state with accent border */
[b-p42bzz52ht] .mud-list-item.mud-selected {
    border: 1px solid var(--accent-color);
}

/* Stats cards - icon scale on hover */
[b-p42bzz52ht] .mud-paper:hover .mud-icon-root {
    transform: scale(1.1);
    transition: transform var(--transition-fast);
}

/* Ensure grid items fill available height */
[b-p42bzz52ht] .mud-grid {
    align-items: stretch;
}

/* Tabs content - prevent overflow */
[b-p42bzz52ht] .mud-tabs-panels {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-p42bzz52ht] .mud-grid-item:first-child .mud-paper {
        min-height: auto;
    }

    [b-p42bzz52ht] .mud-grid-item {
        padding: var(--spacing-xs) !important;
    }
}

@media (max-width: 640px) {
    /* Stack sidebar and content vertically on small screens */
    [b-p42bzz52ht] .mud-grid {
        gap: var(--spacing-sm);
    }
}
/* /Features/Admin/Components/Dashboard/AdminDashboard.razor.rz.scp.css */
/* ==========================================================================
   ADMIN DASHBOARD ORCHESTRATOR
   Uses CSS variables from ayva-theme.css - never hardcode values
   ========================================================================== */

.admin-dashboard[b-loti5qu2x4] {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dashboard-top-row[b-loti5qu2x4] {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.dashboard-health-ring[b-loti5qu2x4] {
    flex-shrink: 0;
}

.dashboard-stats-grid[b-loti5qu2x4] {
    flex: 1;
    min-width: 0;
}

.dashboard-network-row[b-loti5qu2x4] {
    /* Full width network stats */
}

.dashboard-bottom-row[b-loti5qu2x4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.dashboard-activity[b-loti5qu2x4] {
    min-width: 0;
}

.dashboard-services[b-loti5qu2x4] {
    min-width: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .dashboard-top-row[b-loti5qu2x4] {
        flex-direction: column;
    }

    .dashboard-health-ring[b-loti5qu2x4] {
        align-self: center;
    }

    .dashboard-bottom-row[b-loti5qu2x4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-dashboard[b-loti5qu2x4] {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }
}
/* /Features/Admin/Components/Dashboard/QuickActionsBar.razor.rz.scp.css */
/* QuickActionsBar - Isolated styles */

.quick-actions-wrapper[b-4htgo9nw9r] {
    margin-bottom: var(--space-md);
}

.quick-actions-card[b-4htgo9nw9r] {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--glass-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.quick-actions-title[b-4htgo9nw9r] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    display: block;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
}

.quick-actions-grid[b-4htgo9nw9r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.quick-action-btn[b-4htgo9nw9r] {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.quick-action-btn:hover[b-4htgo9nw9r] {
    border-color: var(--accent-color);
    color: var(--text-primary);
    background: rgba(var(--primary-color-rgb), 0.1);
    box-shadow: var(--glow-accent);
}

.quick-action-btn:active[b-4htgo9nw9r] {
    transform: scale(var(--click-scale));
}

.action-icon-wrap[b-4htgo9nw9r] {
    display: flex;
    align-items: center;
}

.action-label[b-4htgo9nw9r] {
    white-space: nowrap;
}

/* Responsive: icons only on small screens */
@media (max-width: 640px) {
    .quick-actions-grid[b-4htgo9nw9r] {
        gap: var(--space-xs);
    }

    .quick-action-btn[b-4htgo9nw9r] {
        padding: var(--space-xs) var(--space-sm);
    }

    .action-label[b-4htgo9nw9r] {
        display: none;
    }
}
/* /Features/Admin/Components/Dashboard/RecentActivityFeed.razor.rz.scp.css */
/* RecentActivityFeed - Isolated styles */

.activity-feed-card[b-0emgwy9fbw] {
    background: var(--glass-card-elevated);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    min-height: 200px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.activity-header[b-0emgwy9fbw] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.activity-header-icon[b-0emgwy9fbw] {
    color: var(--text-muted);
}

.activity-title[b-0emgwy9fbw] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
}

.activity-list[b-0emgwy9fbw] {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.activity-item[b-0emgwy9fbw] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    animation: slideInFromLeft 0.3s var(--panel-enter-easing) both;
}

.activity-dot[b-0emgwy9fbw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.activity-dot.info[b-0emgwy9fbw] {
    background: var(--info-color);
}

.activity-dot.success[b-0emgwy9fbw] {
    background: var(--success-color);
}

.activity-dot.warning[b-0emgwy9fbw] {
    background: var(--warning-color);
}

.activity-dot.error[b-0emgwy9fbw] {
    background: var(--error-color);
}

.activity-content[b-0emgwy9fbw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.activity-message[b-0emgwy9fbw] {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
    font-family: var(--font-primary);
}

.activity-time[b-0emgwy9fbw] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.activity-empty[b-0emgwy9fbw] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: var(--space-md);
    justify-content: center;
    font-family: var(--font-primary);
}

/* Thin scrollbar */
.activity-list[b-0emgwy9fbw]::-webkit-scrollbar {
    width: 3px;
}

.activity-list[b-0emgwy9fbw]::-webkit-scrollbar-track {
    background: transparent;
}

.activity-list[b-0emgwy9fbw]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
/* /Features/Admin/Components/Dashboard/ServiceStatusGrid.razor.rz.scp.css */
/* ServiceStatusGrid - Isolated styles */

.service-grid-card[b-kcil5i5avy] {
    background: var(--glass-card-elevated);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
}

.service-header[b-kcil5i5avy] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.service-header-icon[b-kcil5i5avy] {
    color: var(--text-muted);
}

.service-title[b-kcil5i5avy] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
}

.service-grid[b-kcil5i5avy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.service-item[b-kcil5i5avy] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.service-item:hover[b-kcil5i5avy] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-color: var(--border-color);
}

.service-item.connected[b-kcil5i5avy]  .service-icon {
    color: var(--text-primary);
}

.service-item.disconnected[b-kcil5i5avy]  .service-icon {
    color: var(--text-muted);
    opacity: 0.5;
}

.service-dot[b-kcil5i5avy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.service-item.connected .service-dot[b-kcil5i5avy] {
    background: var(--success-color);
}

.service-item.disconnected .service-dot[b-kcil5i5avy] {
    background: var(--text-muted);
    opacity: 0.4;
}

.service-name[b-kcil5i5avy] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-primary);
}

.service-item.connected .service-name[b-kcil5i5avy] {
    color: var(--text-primary);
}

/* Responsive: single column on small screens */
@media (max-width: 640px) {
    .service-grid[b-kcil5i5avy] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/Dashboard/StatCard.razor.rz.scp.css */
/* ==========================================================================
   StatCard - Glassmorphism stat card with staggered reveal animation
   Uses CSS variables from ayva-theme.css exclusively.
   ========================================================================== */

.stat-card-wrapper[b-y5fikpj0fe] {
    padding: var(--space-xs);
}

.stat-card-inner[b-y5fikpj0fe] {
    background: var(--glass-card-elevated);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.stat-card-inner:hover[b-y5fikpj0fe] {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--glow-accent);
    border-color: var(--accent-color);
}

/* Top accent bar */
.stat-card-accent[b-y5fikpj0fe] {
    height: 3px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--accent-color);
    opacity: 0.6;
}

/* Content layout */
.stat-card-content[b-y5fikpj0fe] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Icon container */
.stat-icon-wrapper[b-y5fikpj0fe] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--primary-color-rgb), 0.1);
    flex-shrink: 0;
}

/* Info section */
.stat-info[b-y5fikpj0fe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.stat-label[b-y5fikpj0fe] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    line-height: 1.2;
}

.stat-value-row[b-y5fikpj0fe] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.stat-value[b-y5fikpj0fe] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-primary);
    line-height: 1.2;
}

/* Trend indicators */
.stat-trend[b-y5fikpj0fe] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
    white-space: nowrap;
}

.stat-trend.trend-up[b-y5fikpj0fe] {
    color: var(--success-color);
}

.stat-trend.trend-down[b-y5fikpj0fe] {
    color: var(--error-color);
}

/* Clickable state */
.clickable[b-y5fikpj0fe] {
    cursor: pointer;
}

.clickable:active .stat-card-inner[b-y5fikpj0fe] {
    transform: scale(var(--click-scale));
}

/* ==========================================================================
   Responsive - Compact layout for smaller screens
   ========================================================================== */

@media (max-width: 640px) {
    .stat-icon-wrapper[b-y5fikpj0fe] {
        width: 36px;
        height: 36px;
    }

    .stat-value[b-y5fikpj0fe] {
        font-size: var(--text-lg);
    }

    .stat-card-content[b-y5fikpj0fe] {
        gap: var(--space-sm);
    }

    .stat-card-inner[b-y5fikpj0fe] {
        padding: var(--space-sm);
    }
}
/* /Features/Admin/Components/Dashboard/SystemHealthRing.razor.rz.scp.css */
/* ==========================================================================
   SystemHealthRing - SVG circular progress ring for system health display
   Uses CSS variables from ayva-theme.css exclusively.
   ========================================================================== */

.health-ring-wrapper[b-4tutolxgvv] {
    display: flex;
    justify-content: center;
}

.health-ring-card[b-4tutolxgvv] {
    background: var(--glass-card-elevated);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 160px;
    transition: all var(--transition-fast);
}

.health-ring-card:hover[b-4tutolxgvv] {
    border-color: var(--accent-color);
    box-shadow: var(--glow-accent);
}

.health-ring-svg[b-4tutolxgvv] {
    width: 140px;
    height: 140px;
}

/* Progress ring stroke animation */
.health-ring-progress[b-4tutolxgvv] {
    transition: stroke-dashoffset 1s var(--panel-enter-easing), stroke 0.5s ease;
    animation: ringFill 1.5s var(--panel-enter-easing) both;
}

/* Center percentage text */
.health-ring-value[b-4tutolxgvv] {
    fill: var(--text-primary);
    font-size: 1.5rem;
    font-weight: bold;
    font-family: var(--font-primary);
}

/* Label below percentage */
.health-ring-label[b-4tutolxgvv] {
    fill: var(--text-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-primary);
}

/* ==========================================================================
   Responsive - Slightly smaller on narrow screens
   ========================================================================== */

@media (max-width: 640px) {
    .health-ring-card[b-4tutolxgvv] {
        min-width: 140px;
        min-height: 140px;
        padding: var(--space-sm);
    }

    .health-ring-svg[b-4tutolxgvv] {
        width: 120px;
        height: 120px;
    }

    .health-ring-value[b-4tutolxgvv] {
        font-size: 1.25rem;
    }
}
/* /Features/Admin/Components/Dialogs/AuthBypassWarningDialog.razor.rz.scp.css */
/* AuthBypassWarningDialog.razor.css - CSS isolation for AuthBypassWarningDialog component */

/* Dialog container styling via MudBlazor deep selectors */
[b-7qcdqvwzm8] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--error-border);
    border-top: 3px solid var(--error-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg), 0 0 50px var(--error-color-20);
    min-width: 32.5rem;
}

/* Title content area */
[b-7qcdqvwzm8] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--error-border);
    background: var(--error-bg);
}

[b-7qcdqvwzm8] .mud-dialog-title .mud-typography-h6 {
    color: var(--error-text);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

[b-7qcdqvwzm8] .mud-dialog-title .mud-icon-root {
    color: var(--error-color);
    font-size: 1.5rem;
}

/* Dialog content area */
[b-7qcdqvwzm8] .mud-dialog-content {
    padding: var(--space-xl);
}

/* Alert styling - filled error */
[b-7qcdqvwzm8] .mud-alert-filled-error {
    background: var(--error-color);
    border-radius: var(--radius-lg);
}

[b-7qcdqvwzm8] .mud-alert-filled-error .mud-typography {
    color: white;
}

/* Alert styling - outlined warning */
[b-7qcdqvwzm8] .mud-alert-outlined-warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    border-radius: var(--radius-lg);
}

[b-7qcdqvwzm8] .mud-alert-outlined-warning .mud-typography {
    color: var(--warning-text);
}

/* List styling */
[b-7qcdqvwzm8] .mud-list {
    padding: 0;
    background: transparent;
}

[b-7qcdqvwzm8] .mud-list-item {
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
    min-height: auto;
}

[b-7qcdqvwzm8] .mud-list-item .mud-list-item-icon {
    min-width: 2.25rem;
}

[b-7qcdqvwzm8] .mud-list-item .mud-icon-root {
    color: var(--error-color);
    font-size: 1.25rem;
}

[b-7qcdqvwzm8] .mud-list-item .mud-typography {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Critical security crisis styling */
[b-7qcdqvwzm8] .mud-error-text {
    color: var(--error-text) !important;
}

[b-7qcdqvwzm8] .mud-list-item strong.mud-error-text {
    text-shadow: 0 0 10px var(--error-color-50);
}

/* Text field for confirmation */
[b-7qcdqvwzm8] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--error-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-7qcdqvwzm8] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--error-color);
}

[b-7qcdqvwzm8] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--error-color);
    box-shadow: 0 0 0 0.1875rem var(--error-color-15);
}

[b-7qcdqvwzm8] .mud-input-outlined .mud-input {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

[b-7qcdqvwzm8] .mud-input-outlined .mud-input-label {
    color: var(--error-text);
    font-size: var(--text-sm);
}

[b-7qcdqvwzm8] .mud-input-outlined.mud-input-focused .mud-input-label {
    color: var(--error-color);
}

/* Dialog actions area */
[b-7qcdqvwzm8] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel button */
[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Enable Auth Bypass button (danger) */
[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-filled.mud-button-error {
    background: var(--error-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    font-weight: var(--font-semibold);
}

[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-filled.mud-button-error:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--error-color-40);
}

[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-filled.mud-button-error:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Disable Auth Bypass button (success) */
[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-filled.mud-button-success {
    background: var(--success-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    font-weight: var(--font-semibold);
}

[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-filled.mud-button-success:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--success-color-40);
}

/* Button icons */
[b-7qcdqvwzm8] .mud-dialog-actions .mud-button-filled .mud-icon-root {
    font-size: 1.25rem;
}

/* Form field focus enhancement */
[b-7qcdqvwzm8] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-7qcdqvwzm8] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-7qcdqvwzm8] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    [b-7qcdqvwzm8] .mud-dialog {
        min-width: auto;
        width: 95vw;
        margin: var(--space-md);
    }
}
/* /Features/Admin/Components/Dialogs/BroadcastDialog.razor.rz.scp.css */
/* BroadcastDialog.razor.css - CSS isolation for BroadcastDialog component */

/* Dialog container styling via MudBlazor deep selectors */
[b-aeprt6suy0] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    min-width: 30rem;
}

/* Title content area */
[b-aeprt6suy0] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

[b-aeprt6suy0] .mud-dialog-title .mud-typography-h6 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

[b-aeprt6suy0] .mud-dialog-title .mud-icon-root {
    color: var(--accent-color);
    font-size: 1.5rem;
}

/* Dialog content area */
[b-aeprt6suy0] .mud-dialog-content {
    padding: var(--space-xl);
}

/* Text fields styling */
[b-aeprt6suy0] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-aeprt6suy0] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--border-color-medium);
}

[b-aeprt6suy0] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

[b-aeprt6suy0] .mud-input-outlined .mud-input {
    color: var(--text-primary);
}

[b-aeprt6suy0] .mud-input-outlined .mud-input-label {
    color: var(--text-secondary);
}

[b-aeprt6suy0] .mud-input-outlined.mud-input-focused .mud-input-label {
    color: var(--accent-color);
}

/* Select dropdown styling */
[b-aeprt6suy0] .mud-select .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
}

[b-aeprt6suy0] .mud-select:hover .mud-input-outlined-border {
    border-color: var(--border-color-medium);
}

/* Numeric field */
[b-aeprt6suy0] .mud-numeric-field .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
}

/* Checkbox styling */
[b-aeprt6suy0] .mud-checkbox .mud-primary-text {
    color: var(--accent-color);
}

[b-aeprt6suy0] .mud-checkbox .mud-typography {
    color: var(--text-secondary);
}

/* Preview section */
[b-aeprt6suy0] .mud-paper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

[b-aeprt6suy0] .mud-paper .mud-typography-caption {
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

/* Alert in preview */
[b-aeprt6suy0] .mud-alert {
    border-radius: var(--radius-md);
}

/* Dialog actions area */
[b-aeprt6suy0] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel button */
[b-aeprt6suy0] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-aeprt6suy0] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Broadcast button (Primary filled) */
[b-aeprt6suy0] .mud-dialog-actions .mud-button-filled.mud-button-primary {
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-aeprt6suy0] .mud-dialog-actions .mud-button-filled.mud-button-primary:hover:not(:disabled) {
    background: var(--accent-gradient-hover);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-accent);
}

[b-aeprt6suy0] .mud-dialog-actions .mud-button-filled.mud-button-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon in broadcast button */
[b-aeprt6suy0] .mud-dialog-actions .mud-button-filled .mud-icon-root {
    font-size: 1.25rem;
}

/* Form field focus enhancement */
[b-aeprt6suy0] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-aeprt6suy0] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-aeprt6suy0] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    [b-aeprt6suy0] .mud-dialog {
        min-width: auto;
        width: 95vw;
        margin: var(--space-md);
    }
}
/* /Features/Admin/Components/Dialogs/ConfirmDialog.razor.rz.scp.css */
/* ConfirmDialog.razor.css - CSS isolation for ConfirmDialog component */

/* Dialog container styling via MudBlazor deep selectors */
[b-bwsny53oex] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

/* Title content area */
[b-bwsny53oex] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

[b-bwsny53oex] .mud-dialog-title .mud-typography-h6 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

[b-bwsny53oex] .mud-dialog-title .mud-icon-root {
    font-size: 1.5rem;
}

/* Dialog content area */
[b-bwsny53oex] .mud-dialog-content {
    padding: var(--space-xl);
    color: var(--text-secondary);
}

[b-bwsny53oex] .mud-dialog-content .mud-typography {
    line-height: 1.6;
}

/* Dialog actions area */
[b-bwsny53oex] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel button */
[b-bwsny53oex] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-bwsny53oex] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Primary/Confirm button */
[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-primary {
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-primary:hover {
    background: var(--accent-gradient-hover);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-accent);
}

/* Error/Danger confirm button variant */
[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-error-text,
[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-error {
    background: var(--error-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-error-text:hover,
[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-error:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--error-color-30);
}

/* Warning confirm button variant */
[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-warning {
    background: var(--warning-color);
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-warning:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--warning-color-30);
}

/* Success confirm button variant */
[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-success {
    background: var(--success-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-bwsny53oex] .mud-dialog-actions .mud-button-filled.mud-button-success:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--success-color-30);
}

/* Form field focus enhancement */
[b-bwsny53oex] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-bwsny53oex] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-bwsny53oex] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}
/* /Features/Admin/Components/Dialogs/EmergencyShutdownDialog.razor.rz.scp.css */
/* EmergencyShutdownDialog.razor.css - CSS isolation for EmergencyShutdownDialog component */

/* Dialog container styling via MudBlazor deep selectors */
[b-sb6288ywm8] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--error-border);
    border-top: 3px solid var(--error-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg), 0 0 40px var(--error-color-15);
    min-width: 31.25rem;
}

/* Title content area */
[b-sb6288ywm8] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--error-border);
    background: var(--error-bg);
}

[b-sb6288ywm8] .mud-dialog-title .mud-typography-h6 {
    color: var(--error-text);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

[b-sb6288ywm8] .mud-dialog-title .mud-icon-root {
    color: var(--error-color);
    font-size: 1.5rem;
}

/* Dialog content area */
[b-sb6288ywm8] .mud-dialog-content {
    padding: var(--space-xl);
}

/* Alert styling */
[b-sb6288ywm8] .mud-alert {
    border-radius: var(--radius-lg);
}

[b-sb6288ywm8] .mud-alert-filled-error {
    background: var(--error-color);
}

[b-sb6288ywm8] .mud-alert-outlined-warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

[b-sb6288ywm8] .mud-alert-outlined-info {
    border-color: var(--info-border);
    background: var(--info-bg);
}

/* List items */
[b-sb6288ywm8] .mud-list {
    padding: 0;
}

[b-sb6288ywm8] .mud-list-item {
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
}

[b-sb6288ywm8] .mud-list-item .mud-icon-root {
    color: var(--warning-color);
    margin-right: var(--space-md);
}

[b-sb6288ywm8] .mud-list-item .mud-typography {
    color: var(--text-secondary);
}

/* Countdown state - centered content */
[b-sb6288ywm8] .mud-dialog-content .mud-stack {
    text-align: center;
}

/* Large warning icon in countdown */
[b-sb6288ywm8] .mud-icon-root[style*="font-size: 4rem"] {
    color: var(--error-color);
    animation: pulse-b-sb6288ywm8 1.5s ease-in-out infinite;
}

/* Countdown number */
[b-sb6288ywm8] .mud-typography-h1 {
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}

/* Progress bar */
[b-sb6288ywm8] .mud-progress-linear {
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    height: 0.5rem;
}

[b-sb6288ywm8] .mud-progress-linear .mud-progress-linear-bar {
    border-radius: var(--radius-sm);
    background: var(--error-color);
    transition: width 1s linear;
}

/* Caption text */
[b-sb6288ywm8] .mud-typography-caption {
    color: var(--text-muted);
}

/* Completed state icon */
[b-sb6288ywm8] .mud-icon-root.mud-warning-text[style*="font-size: 4rem"] {
    color: var(--warning-color);
}

/* Aborted state icon */
[b-sb6288ywm8] .mud-icon-root.mud-success-text[style*="font-size: 4rem"] {
    color: var(--success-color);
}

/* Dialog actions area */
[b-sb6288ywm8] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel button */
[b-sb6288ywm8] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-sb6288ywm8] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Initiate Emergency Shutdown button (danger) */
[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled.mud-button-error {
    background: var(--error-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    font-weight: var(--font-semibold);
}

[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled.mud-button-error:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--error-color-40);
}

/* Abort Shutdown button (success) */
[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled.mud-button-success {
    background: var(--success-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    font-weight: var(--font-semibold);
}

[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled.mud-button-success:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--success-color-40);
}

/* Close button (primary) */
[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled.mud-button-primary {
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled.mud-button-primary:hover {
    background: var(--accent-gradient-hover);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-accent);
}

/* Button icons */
[b-sb6288ywm8] .mud-dialog-actions .mud-button-filled .mud-icon-root {
    font-size: 1.25rem;
}

/* Pulse animation for countdown */
@keyframes pulse-b-sb6288ywm8 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Button feedback */
[b-sb6288ywm8] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-sb6288ywm8] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    [b-sb6288ywm8] .mud-dialog {
        min-width: auto;
        width: 95vw;
        margin: var(--space-md);
    }
}
/* /Features/Admin/Components/Dialogs/JsExecutionConfirmDialog.razor.rz.scp.css */
/* JsExecutionConfirmDialog - Dialog Polish */

/* Warning accent border */
[b-kjkarho5il] .mud-dialog {
    border-top: 3px solid var(--warning-color);
}

/* Dialog content area */
[b-kjkarho5il] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Security warning alert */
[b-kjkarho5il] .mud-alert-filled-warning {
    border-radius: var(--radius-lg);
}

/* Target info paper */
[b-kjkarho5il] .mud-paper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* Code preview styling */
[b-kjkarho5il] .mud-paper[style*="background: #1e1e1e"] {
    background: var(--bg-code, var(--glass-bg)) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) !important;
}

[b-kjkarho5il] .mud-paper[style*="background: #1e1e1e"] pre {
    font-family: var(--font-mono) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-primary) !important;
}

/* Checkbox styling */
[b-kjkarho5il] .mud-checkbox .mud-warning-text {
    color: var(--warning-color);
}

[b-kjkarho5il] .mud-checkbox .mud-typography {
    color: var(--text-secondary);
}

/* Dialog actions area */
[b-kjkarho5il] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel button */
[b-kjkarho5il] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-kjkarho5il] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Execute button (warning) */
[b-kjkarho5il] .mud-dialog-actions .mud-button-filled.mud-button-warning {
    background: var(--warning-color);
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    font-weight: var(--font-semibold);
}

[b-kjkarho5il] .mud-dialog-actions .mud-button-filled.mud-button-warning:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--warning-color-30);
}

[b-kjkarho5il] .mud-dialog-actions .mud-button-filled.mud-button-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button icons */
[b-kjkarho5il] .mud-dialog-actions .mud-button-filled .mud-icon-root {
    font-size: 1.25rem;
}

/* Form field focus enhancement */
[b-kjkarho5il] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-kjkarho5il] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-kjkarho5il] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    [b-kjkarho5il] .mud-dialog {
        min-width: auto;
        width: 95vw;
        margin: var(--space-md);
    }
}
/* /Features/Admin/Components/Dialogs/LiveCallMonitorDialog.razor.rz.scp.css */
/* LiveCallMonitorDialog - Dialog Polish */

/* Dialog container */
[b-yqusmam2xe] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

/* Title area */
[b-yqusmam2xe] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

/* Dialog content area */
[b-yqusmam2xe] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Dialog actions area */
[b-yqusmam2xe] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel/Minimize button */
[b-yqusmam2xe] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-yqusmam2xe] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* End Call button (danger) */
[b-yqusmam2xe] .mud-dialog-actions .mud-button-filled.mud-button-error {
    background: var(--error-color);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-yqusmam2xe] .mud-dialog-actions .mud-button-filled.mud-button-error:hover {
    filter: brightness(1.1);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 25px var(--error-color-30);
}

.dialog-header[b-yqusmam2xe] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.call-monitor-content[b-yqusmam2xe] {
    min-width: 600px;
    min-height: 500px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.connecting-state[b-yqusmam2xe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    text-align: center;
    flex: 1;
}

/* Make the AdminCallTranscript fill the dialog */
[b-yqusmam2xe] .admin-transcript {
    flex: 1;
    height: 100%;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}

[b-yqusmam2xe] .call-transcript-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-yqusmam2xe] .transcript-body {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
}

/* Button feedback */
[b-yqusmam2xe] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-yqusmam2xe] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .call-monitor-content[b-yqusmam2xe] {
        min-width: unset;
        width: 100%;
    }

    [b-yqusmam2xe] .transcript-body {
        max-height: 300px;
    }
}
/* /Features/Admin/Components/Dialogs/SystemInfoDialog.razor.rz.scp.css */
/* SystemInfoDialog.razor.css - CSS isolation for SystemInfoDialog component */

/* Dialog container styling via MudBlazor deep selectors */
[b-tb1wodcqoq] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    min-width: 31.25rem;
    max-width: 37.5rem;
}

/* Title content area */
[b-tb1wodcqoq] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

[b-tb1wodcqoq] .mud-dialog-title .mud-typography-h6 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

[b-tb1wodcqoq] .mud-dialog-title .mud-icon-root {
    color: var(--info-color);
    font-size: 1.5rem;
}

/* Dialog content area */
[b-tb1wodcqoq] .mud-dialog-content {
    padding: var(--space-xl);
    max-height: 70vh;
    overflow-y: auto;
}

/* Section headers */
[b-tb1wodcqoq] .mud-typography-subtitle2 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Simple table styling */
[b-tb1wodcqoq] .mud-simple-table {
    background: transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[b-tb1wodcqoq] .mud-simple-table table {
    border-collapse: separate;
    border-spacing: 0;
}

[b-tb1wodcqoq] .mud-simple-table tbody tr {
    transition: background var(--transition-fast);
}

[b-tb1wodcqoq] .mud-simple-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Striped rows */
[b-tb1wodcqoq] .mud-table-striped tbody tr:nth-of-type(odd) {
    background: var(--bg-card);
}

[b-tb1wodcqoq] .mud-table-striped tbody tr:nth-of-type(odd):hover {
    background: var(--bg-hover);
}

[b-tb1wodcqoq] .mud-simple-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

[b-tb1wodcqoq] .mud-simple-table td strong {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

[b-tb1wodcqoq] .mud-simple-table tbody tr:last-child td {
    border-bottom: none;
}

/* Chips styling */
[b-tb1wodcqoq] .mud-chip {
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
    font-size: var(--text-xs);
}

[b-tb1wodcqoq] .mud-chip.mud-chip-color-success {
    background: var(--success-bg);
    color: var(--success-text);
}

[b-tb1wodcqoq] .mud-chip.mud-chip-color-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

[b-tb1wodcqoq] .mud-chip.mud-chip-color-error {
    background: var(--error-bg);
    color: var(--error-text);
}

[b-tb1wodcqoq] .mud-chip.mud-chip-color-default {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* Progress linear */
[b-tb1wodcqoq] .mud-progress-linear {
    border-radius: var(--radius-xs);
    background: var(--bg-hover);
}

[b-tb1wodcqoq] .mud-progress-linear .mud-progress-linear-bar {
    border-radius: var(--radius-xs);
}

/* Status icons */
[b-tb1wodcqoq] .mud-icon-root.mud-success-text {
    color: var(--success-color);
}

[b-tb1wodcqoq] .mud-icon-root.mud-error-text {
    color: var(--error-color);
}

[b-tb1wodcqoq] .mud-icon-root.mud-default-text {
    color: var(--text-muted);
}

/* Dialog actions area */
[b-tb1wodcqoq] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    border-top: 1px solid var(--border-color);
}

/* Close button */
[b-tb1wodcqoq] .mud-dialog-actions .mud-button-filled.mud-button-primary {
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-tb1wodcqoq] .mud-dialog-actions .mud-button-filled.mud-button-primary:hover {
    background: var(--accent-gradient-hover);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-accent);
}

/* Scrollbar styling for content area */
[b-tb1wodcqoq] .mud-dialog-content::-webkit-scrollbar {
    width: 0.375rem;
}

[b-tb1wodcqoq] .mud-dialog-content::-webkit-scrollbar-track {
    background: transparent;
}

[b-tb1wodcqoq] .mud-dialog-content::-webkit-scrollbar-thumb {
    background: var(--accent-color-30);
    border-radius: 0.1875rem;
}

[b-tb1wodcqoq] .mud-dialog-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-50);
}

/* Button feedback */
[b-tb1wodcqoq] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-tb1wodcqoq] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    [b-tb1wodcqoq] .mud-dialog {
        min-width: auto;
        max-width: none;
        width: 95vw;
        margin: var(--space-md);
    }

    [b-tb1wodcqoq] .mud-dialog-content {
        max-height: 60vh;
    }
}
/* /Features/Admin/Components/Dialogs/TextInputDialog.razor.rz.scp.css */
/* TextInputDialog.razor.css - CSS isolation for TextInputDialog component */

/* Dialog container styling via MudBlazor deep selectors */
[b-iv5b92j012] .mud-dialog {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    min-width: 25rem;
}

/* Title content area */
[b-iv5b92j012] .mud-dialog-title {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

[b-iv5b92j012] .mud-dialog-title .mud-typography-h6 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

/* Dialog content area */
[b-iv5b92j012] .mud-dialog-content {
    padding: var(--space-xl);
}

/* Text field styling */
[b-iv5b92j012] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-iv5b92j012] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--border-color-medium);
}

[b-iv5b92j012] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

[b-iv5b92j012] .mud-input-outlined .mud-input {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

[b-iv5b92j012] .mud-input-outlined .mud-input-label {
    color: var(--text-secondary);
}

[b-iv5b92j012] .mud-input-outlined.mud-input-focused .mud-input-label {
    color: var(--accent-color);
}

[b-iv5b92j012] .mud-input-outlined .mud-input::placeholder {
    color: var(--text-muted);
}

/* Multiline textarea */
[b-iv5b92j012] .mud-input-outlined textarea {
    color: var(--text-primary);
    line-height: 1.5;
    resize: vertical;
}

/* Dialog actions area */
[b-iv5b92j012] .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    gap: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Cancel button */
[b-iv5b92j012] .mud-dialog-actions .mud-button-text {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

[b-iv5b92j012] .mud-dialog-actions .mud-button-text:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Submit button */
[b-iv5b92j012] .mud-dialog-actions .mud-button-filled.mud-button-primary {
    background: var(--accent-gradient);
    color: white;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-iv5b92j012] .mud-dialog-actions .mud-button-filled.mud-button-primary:hover:not(:disabled) {
    background: var(--accent-gradient-hover);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-accent);
}

[b-iv5b92j012] .mud-dialog-actions .mud-button-filled.mud-button-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form field focus enhancement */
[b-iv5b92j012] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-iv5b92j012] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-iv5b92j012] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    [b-iv5b92j012] .mud-dialog {
        min-width: auto;
        width: 95vw;
        margin: var(--space-md);
    }
}
/* /Features/Admin/Components/EngineeringInsights/CircuitInspector.razor.rz.scp.css */
.circuit-inspector[b-00yq368xgj] {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.circuit-summary[b-00yq368xgj] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--glass-card-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.circuit-count[b-00yq368xgj] {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--accent-color);
}

.circuit-label[b-00yq368xgj] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.circuit-list[b-00yq368xgj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.circuit-item[b-00yq368xgj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.circuit-item:hover[b-00yq368xgj] {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.circuit-item.master[b-00yq368xgj] {
    border-left: 2px solid var(--accent-color);
}

.circuit-dot[b-00yq368xgj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
    animation: statusPulse-b-00yq368xgj 2s ease-in-out infinite;
}

@keyframes statusPulse-b-00yq368xgj {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.circuit-info[b-00yq368xgj] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.circuit-id[b-00yq368xgj] {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.circuit-details[b-00yq368xgj] {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.circuit-time[b-00yq368xgj] {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.circuit-empty[b-00yq368xgj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
/* /Features/Admin/Components/EngineeringInsights/InsightsDrawer.razor.rz.scp.css */
.insights-drawer-wrapper[b-xhmcjfft6p] {
    position: fixed;
    top: var(--header-height, 48px);
    right: 0;
    bottom: var(--footer-height, 34px);
    z-index: 1100;
    pointer-events: none;
}

.insights-drawer-wrapper.open[b-xhmcjfft6p] {
    pointer-events: auto;
}

.insights-drawer[b-xhmcjfft6p] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s var(--panel-enter-easing, cubic-bezier(0.16, 1, 0.3, 1));
    border-left: 1px solid var(--border-accent);
    background: var(--glass-sidebar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.insights-drawer-wrapper.open .insights-drawer[b-xhmcjfft6p] {
    transform: translateX(0);
}

.insights-header[b-xhmcjfft6p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.insights-title-row[b-xhmcjfft6p] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.insights-title[b-xhmcjfft6p] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-xhmcjfft6p] .insights-close-btn {
    color: var(--text-muted) !important;
}

[b-xhmcjfft6p] .insights-close-btn:hover {
    color: var(--text-primary) !important;
}

.insights-tabs[b-xhmcjfft6p] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.insights-tab[b-xhmcjfft6p] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.insights-tab:hover[b-xhmcjfft6p] {
    color: var(--text-secondary);
    background: rgba(var(--primary-color-rgb), 0.05);
}

.insights-tab.active[b-xhmcjfft6p] {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.insights-content[b-xhmcjfft6p] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Thin scrollbar */
.insights-content[b-xhmcjfft6p]::-webkit-scrollbar {
    width: 4px;
}

.insights-content[b-xhmcjfft6p]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

@media (max-width: 640px) {
    .insights-drawer[b-xhmcjfft6p] {
        width: 100vw;
        max-width: 100vw;
    }
}
/* /Features/Admin/Components/EngineeringInsights/LogStreamPanel.razor.rz.scp.css */
.log-stream-panel[b-906nn0mheg] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.log-stream-controls[b-906nn0mheg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.log-level-filters[b-906nn0mheg] {
    display: flex;
    gap: 2px;
}

.level-chip[b-906nn0mheg] {
    padding: 2px 6px;
    font-size: 10px;
    font-family: var(--font-mono);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 3px;
}

.level-chip:hover[b-906nn0mheg] {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.level-chip.active[b-906nn0mheg] {
    border-color: currentColor;
}

.level-chip.verbose.active[b-906nn0mheg],
.level-chip.debug.active[b-906nn0mheg] {
    color: var(--text-secondary);
}

.level-chip.information.active[b-906nn0mheg] {
    color: var(--info-color);
}

.level-chip.warning.active[b-906nn0mheg] {
    color: var(--warning-color);
}

.level-chip.error.active[b-906nn0mheg],
.level-chip.fatal.active[b-906nn0mheg] {
    color: var(--error-color);
}

.level-count[b-906nn0mheg] {
    font-size: 9px;
    opacity: 0.7;
}

.log-stream-actions[b-906nn0mheg] {
    display: flex;
    gap: 2px;
}

.log-search[b-906nn0mheg] {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.log-search-input[b-906nn0mheg] {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(var(--primary-color-rgb), 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.log-search-input:focus[b-906nn0mheg] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.15);
}

.log-search-input[b-906nn0mheg]::placeholder {
    color: var(--text-muted);
}

.log-entries[b-906nn0mheg] {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
}

.log-entries[b-906nn0mheg]::-webkit-scrollbar {
    width: 3px;
}

.log-entries[b-906nn0mheg]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.log-entry-compact[b-906nn0mheg] {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: 1px var(--space-sm);
    border-left: 2px solid transparent;
    transition: background var(--transition-fast);
}

.log-entry-compact:hover[b-906nn0mheg] {
    background: rgba(var(--primary-color-rgb), 0.04);
}

.log-entry-compact.level-warning[b-906nn0mheg] {
    border-left-color: var(--warning-color);
}

.log-entry-compact.level-error[b-906nn0mheg],
.log-entry-compact.level-fatal[b-906nn0mheg] {
    border-left-color: var(--error-color);
    background: var(--error-color-5);
}

.log-entry-compact.level-information[b-906nn0mheg] {
    border-left-color: var(--info-color);
}

.log-time[b-906nn0mheg] {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 10px;
}

.log-level-badge[b-906nn0mheg] {
    padding: 0 4px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: var(--font-bold);
    flex-shrink: 0;
    text-transform: uppercase;
}

.log-level-badge.verbose[b-906nn0mheg],
.log-level-badge.debug[b-906nn0mheg] {
    color: var(--text-muted);
}

.log-level-badge.information[b-906nn0mheg] {
    color: var(--info-color);
}

.log-level-badge.warning[b-906nn0mheg] {
    color: var(--warning-color);
    background: var(--warning-color-10);
}

.log-level-badge.error[b-906nn0mheg],
.log-level-badge.fatal[b-906nn0mheg] {
    color: var(--error-color);
    background: var(--error-color-10);
}

.log-msg[b-906nn0mheg] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.log-empty[b-906nn0mheg] {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}
/* /Features/Admin/Components/EngineeringInsights/MetricsPanel.razor.rz.scp.css */
.metrics-panel[b-bzou3tp3fp] {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.metric-card[b-bzou3tp3fp] {
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-card-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.metric-header[b-bzou3tp3fp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.metric-name[b-bzou3tp3fp] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value[b-bzou3tp3fp] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.metric-value.status-ok[b-bzou3tp3fp] {
    color: var(--success-color);
}

.metric-value.status-warn[b-bzou3tp3fp] {
    color: var(--warning-color);
}

.metric-value.status-error[b-bzou3tp3fp] {
    color: var(--error-color);
}

.metric-value.mono[b-bzou3tp3fp] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.metric-bar-bg[b-bzou3tp3fp] {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.metric-bar-fill[b-bzou3tp3fp] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease-out, background 0.5s ease;
}

.metric-detail[b-bzou3tp3fp] {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.env-badge[b-bzou3tp3fp] {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.env-badge.prod[b-bzou3tp3fp] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.env-badge.dev[b-bzou3tp3fp] {
    background: var(--warning-color-15);
    color: var(--warning-color);
}
/* /Features/Admin/Components/FeedbackPanel.razor.rz.scp.css */
/* FeedbackPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Stat cards - large icon size */
[b-vjf50x09ql] .mud-icon-root.mud-icon-size-large {
    font-size: 2.5rem;
}

/* Skeleton loading styles */
[b-vjf50x09ql] .mud-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-hover) 50%,
        var(--bg-card) 75%
    ) !important;
    background-size: 200% 100%;
    animation: shimmer-b-vjf50x09ql 1.5s infinite;
}

@keyframes shimmer-b-vjf50x09ql {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Feedback preview in dialog */
.feedback-preview[b-vjf50x09ql] {
    color: var(--text-primary);
    line-height: 1.6;
    word-wrap: break-word;
}
/* /Features/Admin/Components/HangfireJobsPanel.razor.rz.scp.css */
/* HangfireJobsPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Code styling */
code[b-jqcpp648wf] {
    font-family: var(--font-mono);
    color: var(--accent-light);
    background: var(--bg-card);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* Animation for loading state */
@keyframes fadeInUp-b-jqcpp648wf {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-jqcpp648wf] .mud-table-body tr {
    animation: fadeInUp-b-jqcpp648wf 0.3s ease-out;
}

/* Dialog size classes */
.dialog-medium[b-jqcpp648wf] {
    max-width: 600px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog-small[b-jqcpp648wf] {
    max-width: 400px;
    width: 90vw;
}

/* Method code styling */
.method-code[b-jqcpp648wf] {
    font-size: 0.85rem;
    font-family: var(--font-mono);
    color: var(--accent-light);
    background: var(--bg-card);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-jqcpp648wf] .mud-table-container {
        overflow-x: auto;
    }

    code[b-jqcpp648wf] {
        font-size: 0.75rem;
    }
}
/* /Features/Admin/Components/InstanceDataPanel.razor.rz.scp.css */
/* InstanceDataPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Stats cards - icon scale on hover */
[b-a48d997dof] .mud-paper:hover .mud-icon-root {
    transform: scale(1.1);
}

/* Caption size classes */
.caption-xs[b-a48d997dof] {
    font-size: 0.65rem !important;
}

.caption-sm[b-a48d997dof] {
    font-size: 0.75rem !important;
}

/* Code/monospace text */
.code-text[b-a48d997dof] {
    font-family: var(--font-mono);
}

/* Monospace text for IDs and versions */
[b-a48d997dof] .mud-typography[style*="monospace"] {
    font-family: var(--font-mono);
    color: var(--accent-light);
}

/* Animation for instance rows */
@keyframes fadeInUp-b-a48d997dof {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-a48d997dof] .mud-table-body tr {
    animation: fadeInUp-b-a48d997dof 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-a48d997dof] .mud-simple-table {
        font-size: var(--text-sm);
    }

    [b-a48d997dof] .mud-simple-table td:first-child {
        width: 35%;
    }
}
/* /Features/Admin/Components/LidarViewer/Charts/LinkBudgetChart.razor.rz.scp.css */
.link-budget-chart[b-n74irnkkxm] {
    width: 100%;
    height: 100%;
}

.link-budget-chart[b-n74irnkkxm]  .apexcharts-canvas {
    background: transparent !important;
}

.link-budget-chart[b-n74irnkkxm]  .apexcharts-tooltip {
    background: rgba(10, 15, 30, 0.92) !important;
    border: 1px solid rgba(139, 146, 176, 0.2) !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.link-budget-chart[b-n74irnkkxm]  .apexcharts-tooltip-title {
    background: rgba(139, 146, 176, 0.1) !important;
    border-bottom: 1px solid rgba(139, 146, 176, 0.15) !important;
}

.link-budget-chart[b-n74irnkkxm]  .apexcharts-gridline {
    stroke: rgba(139, 146, 176, 0.08);
}

.link-budget-chart[b-n74irnkkxm]  .apexcharts-xaxis-annotation-label {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
/* /Features/Admin/Components/LidarViewer/Charts/RainFadeChart.razor.rz.scp.css */
.rain-fade-chart[b-y304o8clrl] {
    width: 100%;
    height: 100%;
}

.rain-fade-chart[b-y304o8clrl]  .apexcharts-canvas {
    background: transparent !important;
}

.rain-fade-chart[b-y304o8clrl]  .apexcharts-tooltip {
    background: rgba(10, 15, 30, 0.92) !important;
    border: 1px solid rgba(139, 146, 176, 0.2) !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.rain-fade-chart[b-y304o8clrl]  .apexcharts-tooltip-title {
    background: rgba(139, 146, 176, 0.1) !important;
    border-bottom: 1px solid rgba(139, 146, 176, 0.15) !important;
}

.rain-fade-chart[b-y304o8clrl]  .apexcharts-gridline {
    stroke: rgba(139, 146, 176, 0.08);
}

.rain-fade-chart[b-y304o8clrl]  .apexcharts-marker {
    transition: r 0.15s ease;
}

.rain-fade-chart[b-y304o8clrl]  .apexcharts-xaxis-annotation-label,
.rain-fade-chart[b-y304o8clrl]  .apexcharts-yaxis-annotation-label {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
/* /Features/Admin/Components/LidarViewer/Charts/TerrainProfileChart.razor.rz.scp.css */
.terrain-profile-chart[b-v4riqdhfhi] {
    width: 100%;
    height: 100%;
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-canvas {
    background: transparent !important;
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-tooltip {
    background: rgba(10, 15, 30, 0.92) !important;
    border: 1px solid rgba(139, 146, 176, 0.2) !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-tooltip-title {
    background: rgba(139, 146, 176, 0.1) !important;
    border-bottom: 1px solid rgba(139, 146, 176, 0.15) !important;
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-gridline {
    stroke: rgba(139, 146, 176, 0.08);
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-legend-text {
    color: #8b92b0 !important;
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-xaxis-annotation-label {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.terrain-profile-chart[b-v4riqdhfhi]  .apexcharts-area-series .apexcharts-series path {
    filter: none;
}
/* /Features/Admin/Components/LidarViewer/ControlCenter.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Control Center — Bottom HUD panel
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-control-center[b-l3u7mttqib] {
    position: relative;
    background: var(--hud-glass-medium);
    border-top: 1px solid var(--hud-chrome-15);
    backdrop-filter: blur(20px);
    flex-shrink: 0;
    z-index: 200;
}

.rf-control-center.collapsed[b-l3u7mttqib] {
    /* Only show header */
}

/* ── Header ────────────────────────────────────────────────────────────── */

.rf-cc-header[b-l3u7mttqib] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 var(--space-md);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--hud-chrome-08);
}

.rf-cc-header:hover[b-l3u7mttqib] {
    background: var(--hud-chrome-04);
}

.rf-cc-mode-context[b-l3u7mttqib] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rf-cc-mode-dot[b-l3u7mttqib] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: cc-dot-pulse-b-l3u7mttqib 2s ease-in-out infinite;
}

.rf-cc-mode-label[b-l3u7mttqib] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: 0.1em;
}

.rf-cc-mode-hint[b-l3u7mttqib] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Corner bracket decorations */
.rf-cc-bracket-tl[b-l3u7mttqib],
.rf-cc-bracket-tr[b-l3u7mttqib] {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--hud-chrome-25);
    border-style: solid;
}

.rf-cc-bracket-tl[b-l3u7mttqib] {
    top: 4px;
    left: 4px;
    border-width: 1px 0 0 1px;
}

.rf-cc-bracket-tr[b-l3u7mttqib] {
    top: 4px;
    right: 4px;
    border-width: 1px 1px 0 0;
}

.rf-cc-collapse-btn[b-l3u7mttqib] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-cc-collapse-btn:hover[b-l3u7mttqib] {
    color: var(--hud-chrome);
    border-color: var(--hud-chrome-35);
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.rf-cc-body[b-l3u7mttqib] {
    height: 280px;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--hud-chrome-30) transparent;
}

.rf-cc-body[b-l3u7mttqib]::-webkit-scrollbar {
    width: 6px;
}

.rf-cc-body[b-l3u7mttqib]::-webkit-scrollbar-track {
    background: transparent;
}

.rf-cc-body[b-l3u7mttqib]::-webkit-scrollbar-thumb {
    background: var(--hud-chrome-25);
    border-radius: 3px;
}

.rf-cc-body[b-l3u7mttqib]::-webkit-scrollbar-thumb:hover {
    background: var(--hud-chrome-40);
}

/* ── Compact collapsed state ──────────────────────────────────────────── */

.rf-cc-compact[b-l3u7mttqib] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 6px var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--hud-text-value, 11px);
}

.rf-cc-compact-verdict[b-l3u7mttqib] {
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: var(--font-bold);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.rf-cc-compact-verdict.viable[b-l3u7mttqib] {
    background: rgba(74, 222, 128, 0.15);
    color: var(--hud-success);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.rf-cc-compact-verdict.not-viable[b-l3u7mttqib] {
    background: rgba(248, 113, 113, 0.15);
    color: var(--hud-error);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.rf-cc-compact-margin[b-l3u7mttqib] {
    color: var(--text-secondary);
}

.rf-cc-compact-dist[b-l3u7mttqib] {
    color: var(--text-muted);
}

/* ── Navigate mode hint ────────────────────────────────────────────────── */

.rf-cc-nav-hint[b-l3u7mttqib] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px var(--space-md);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.rf-cc-nav-keys[b-l3u7mttqib] {
    padding: 2px 6px;
    background: var(--hud-chrome-08);
    border: 1px solid var(--hud-chrome-15);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 10px;
}

.rf-cc-nav-sep[b-l3u7mttqib] {
    color: var(--hud-chrome-25);
}

/* ── Animations ────────────────────────────────────────────────────────── */

@keyframes cc-dot-pulse-b-l3u7mttqib {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; }
    50% { opacity: 0.7; box-shadow: 0 0 8px currentColor; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .rf-cc-body[b-l3u7mttqib] {
        height: 160px;
    }

    .rf-cc-mode-hint[b-l3u7mttqib] {
        display: none;
    }
}

@media (max-width: 640px) {
    .rf-cc-body[b-l3u7mttqib] {
        height: 140px;
    }
}
/* /Features/Admin/Components/LidarViewer/CoordinateBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CoordinateBar — Bottom viewport telemetry strip
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-coordbar[b-xm220m42ng] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-md);
    background: var(--hud-glass-heavy);
    border-top: 1px solid var(--hud-chrome-10);
    backdrop-filter: blur(12px);
    z-index: 200;
    pointer-events: none;
}

.rf-coordbar-field[b-xm220m42ng] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rf-coordbar-label[b-xm220m42ng] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.rf-coordbar-value[b-xm220m42ng] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.rf-coordbar-sep[b-xm220m42ng] {
    width: 1px;
    height: 14px;
    background: var(--hud-chrome-15);
    margin: 0 var(--space-sm);
}

.rf-coordbar-spacer[b-xm220m42ng] {
    flex: 1;
}

.rf-coordbar-mode[b-xm220m42ng] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.12em;
    opacity: 0.5;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .desktop-only[b-xm220m42ng] {
        display: none;
    }
}

@media (max-width: 640px) {
    .rf-coordbar[b-xm220m42ng] {
        padding: 0 var(--space-sm);
        height: 24px;
    }

    .rf-coordbar-value[b-xm220m42ng] {
        font-size: 10px;
    }
}
/* /Features/Admin/Components/LidarViewer/EndpointSearch.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   EndpointSearch — Side-panel content (parent provides chrome)
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-ep-content[b-ege99z7j95] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Tab Strip ─────────────────────────────────────────────────────────── */

.rf-ep-tabs[b-ege99z7j95] {
    display: flex;
    border-bottom: 1px solid var(--hud-chrome-10, rgba(45, 212, 191, 0.1));
}

.rf-ep-tab[b-ege99z7j95] {
    flex: 1;
    padding: 8px 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.rf-ep-tab:hover[b-ege99z7j95] {
    color: var(--text-secondary);
}

.rf-ep-tab.active[b-ege99z7j95] {
    color: var(--hud-chrome);
    border-bottom-color: var(--hud-chrome);
}

.rf-ep-tab-count[b-ege99z7j95] {
    font-size: 10px;
    background: var(--hud-chrome-15, rgba(45, 212, 191, 0.15));
    color: var(--hud-chrome);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
}

/* ── Search ────────────────────────────────────────────────────────────── */

.rf-ep-search[b-ege99z7j95] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    border-bottom: 1px solid var(--hud-chrome-08, rgba(45, 212, 191, 0.08));
}

.rf-ep-search-icon[b-ege99z7j95] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.rf-ep-search-input[b-ege99z7j95] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    outline: none;
    min-width: 0;
}

.rf-ep-search-input[b-ege99z7j95]::placeholder {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.rf-ep-search-clear[b-ege99z7j95] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.rf-ep-search-clear:hover[b-ege99z7j95] {
    color: var(--text-primary);
}

/* ── Endpoint Badges ───────────────────────────────────────────────────── */

.rf-ep-badges[b-ege99z7j95] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
}

.rf-ep-badge[b-ege99z7j95] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    transition: all var(--transition-fast);
}

.rf-ep-badge.source[b-ege99z7j95] {
    background: rgba(45, 212, 191, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.2);
}

.rf-ep-badge.dest[b-ege99z7j95] {
    background: rgba(244, 114, 182, 0.08);
    border: 1px solid rgba(244, 114, 182, 0.2);
}

/* Pulsing glow when this slot is "next" target */
.rf-ep-badge.next-target[b-ege99z7j95] {
    animation: ep-badge-pulse-b-ege99z7j95 2s ease-in-out infinite;
}

.rf-ep-badge.source.next-target[b-ege99z7j95] {
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.15);
}

.rf-ep-badge.dest.next-target[b-ege99z7j95] {
    border-color: rgba(244, 114, 182, 0.5);
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.15);
}

.rf-ep-badge-label[b-ege99z7j95] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: var(--font-bold);
}

.rf-ep-badge.source .rf-ep-badge-label[b-ege99z7j95] {
    background: rgba(45, 212, 191, 0.2);
    color: var(--hud-source);
}

.rf-ep-badge.dest .rf-ep-badge-label[b-ege99z7j95] {
    background: rgba(244, 114, 182, 0.2);
    color: var(--hud-dest);
}

.rf-ep-badge-name[b-ege99z7j95] {
    flex: 1;
    color: var(--text-secondary);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-ep-badge-hint[b-ege99z7j95] {
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.rf-ep-badge.source .rf-ep-badge-hint[b-ege99z7j95] {
    color: var(--hud-source);
}

.rf-ep-badge.dest .rf-ep-badge-hint[b-ege99z7j95] {
    color: var(--hud-dest);
}

.rf-ep-badge-clear[b-ege99z7j95] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-ep-badge-clear:hover[b-ege99z7j95] {
    color: var(--hud-error);
    border-color: rgba(248, 113, 113, 0.3);
}

/* ── Results ───────────────────────────────────────────────────────────── */

.rf-ep-results[b-ege99z7j95] {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--hud-chrome-20, rgba(45, 212, 191, 0.2)) transparent;
}

.rf-ep-result-group[b-ege99z7j95] {
    padding: 4px 12px;
}

.rf-ep-group-label[b-ege99z7j95] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.1em;
    opacity: 0.6;
    display: block;
    padding-bottom: 2px;
}

/* Result row with A/B buttons */
.rf-ep-result-row[b-ege99z7j95] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    transition: background var(--transition-fast);
}

.rf-ep-result-row:hover[b-ege99z7j95] {
    background: var(--hud-chrome-06, rgba(45, 212, 191, 0.06));
}

.rf-ep-result-info[b-ege99z7j95] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rf-ep-result-info > svg[b-ege99z7j95] {
    color: var(--hud-chrome);
    flex-shrink: 0;
}

/* A/B buttons container */
.rf-ep-ab-buttons[b-ege99z7j95] {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.rf-ep-set-btn[b-ege99z7j95] {
    width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid;
    letter-spacing: 0.02em;
}

.rf-ep-set-btn.set-a[b-ege99z7j95] {
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.25);
    color: var(--hud-source);
}

.rf-ep-set-btn.set-a:hover[b-ege99z7j95] {
    background: rgba(45, 212, 191, 0.25);
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 0 6px rgba(45, 212, 191, 0.2);
}

.rf-ep-set-btn.set-b[b-ege99z7j95] {
    background: rgba(244, 114, 182, 0.1);
    border-color: rgba(244, 114, 182, 0.25);
    color: var(--hud-dest);
}

.rf-ep-set-btn.set-b:hover[b-ege99z7j95] {
    background: rgba(244, 114, 182, 0.25);
    border-color: rgba(244, 114, 182, 0.5);
    box-shadow: 0 0 6px rgba(244, 114, 182, 0.2);
}

/* Legacy single-click result item (kept for reference but no longer used) */
.rf-ep-result-item[b-ege99z7j95] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.rf-ep-result-item:hover[b-ege99z7j95] {
    background: var(--hud-chrome-08, rgba(45, 212, 191, 0.08));
    color: var(--text-primary);
}

.rf-ep-result-item svg[b-ege99z7j95] {
    color: var(--hud-chrome);
    flex-shrink: 0;
}

.rf-ep-result-text[b-ege99z7j95] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.rf-ep-result-text > span:first-child[b-ege99z7j95] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.rf-ep-result-meta[b-ege99z7j95] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.rf-ep-no-results[b-ege99z7j95] {
    padding: 12px;
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Loading / Error / Load More ───────────────────────────────────────── */

.rf-ep-loading[b-ege99z7j95] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

.rf-ep-spinner[b-ege99z7j95] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--hud-chrome-15, rgba(45, 212, 191, 0.15));
    border-top-color: var(--hud-chrome);
    border-radius: 50%;
    animation: ep-spin-b-ege99z7j95 0.6s linear infinite;
    flex-shrink: 0;
}

.rf-ep-error[b-ege99z7j95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--hud-error);
    text-align: center;
}

.rf-ep-retry-btn[b-ege99z7j95] {
    padding: 4px 12px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 4px;
    color: var(--hud-error);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-ep-retry-btn:hover[b-ege99z7j95] {
    background: rgba(248, 113, 113, 0.2);
}

.rf-ep-load-more[b-ege99z7j95] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--hud-chrome-08, rgba(45, 212, 191, 0.08));
    color: var(--hud-chrome);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.rf-ep-load-more:hover[b-ege99z7j95] {
    background: var(--hud-chrome-06, rgba(45, 212, 191, 0.06));
    color: var(--accent-color);
}

/* ── Coords Form ───────────────────────────────────────────────────────── */

.rf-ep-coords-form[b-ege99z7j95] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rf-ep-coord-grid[b-ege99z7j95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rf-ep-coord-field[b-ege99z7j95] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-ep-coord-field label[b-ege99z7j95] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.rf-ep-coord-field input[b-ege99z7j95] {
    width: 100%;
    box-sizing: border-box;
    background: var(--hud-chrome-06, rgba(45, 212, 191, 0.06));
    border: 1px solid var(--hud-chrome-15, rgba(45, 212, 191, 0.15));
    border-radius: 4px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    outline: none;
    transition: border-color var(--transition-fast);
}

.rf-ep-coord-field input[b-ege99z7j95]::placeholder {
    color: var(--text-muted);
    font-size: 10px;
    opacity: 0.5;
}

.rf-ep-coord-field input:focus[b-ege99z7j95] {
    border-color: var(--hud-chrome);
}

/* Remove number input spinners for cleaner look */
.rf-ep-coord-field input[type="number"][b-ege99z7j95]::-webkit-outer-spin-button,
.rf-ep-coord-field input[type="number"][b-ege99z7j95]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rf-ep-coord-field input[type="number"][b-ege99z7j95] {
    -moz-appearance: textfield;
}

.rf-ep-coord-elev-row[b-ege99z7j95] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.rf-ep-coord-elev-field[b-ege99z7j95] {
    flex: 1;
}

.rf-ep-coord-lookup[b-ege99z7j95] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: var(--hud-chrome-10, rgba(45, 212, 191, 0.1));
    border: 1px solid var(--hud-chrome-20, rgba(45, 212, 191, 0.2));
    border-radius: 4px;
    color: var(--hud-chrome);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    height: 34px;
    box-sizing: border-box;
}

.rf-ep-coord-lookup:hover:not(:disabled)[b-ege99z7j95] {
    background: var(--hud-chrome-20, rgba(45, 212, 191, 0.2));
}

.rf-ep-coord-lookup:disabled[b-ege99z7j95] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rf-ep-coord-lookup .rf-ep-spinner[b-ege99z7j95] {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
}

.rf-ep-coord-error[b-ege99z7j95] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-error);
    padding: 2px 0;
}

.rf-ep-coord-actions[b-ege99z7j95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.rf-ep-coord-set[b-ege99z7j95] {
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.rf-ep-coord-set:hover:not(:disabled)[b-ege99z7j95] {
    transform: translateY(-1px);
}

.rf-ep-coord-set:disabled[b-ege99z7j95] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rf-ep-coord-set.source[b-ege99z7j95] {
    background: rgba(45, 212, 191, 0.12);
    border: 1px solid rgba(45, 212, 191, 0.3);
    color: var(--hud-source);
}

.rf-ep-coord-set.source:hover:not(:disabled)[b-ege99z7j95] {
    background: rgba(45, 212, 191, 0.22);
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.2);
}

.rf-ep-coord-set.dest[b-ege99z7j95] {
    background: rgba(244, 114, 182, 0.12);
    border: 1px solid rgba(244, 114, 182, 0.3);
    color: var(--hud-dest);
}

.rf-ep-coord-set.dest:hover:not(:disabled)[b-ege99z7j95] {
    background: rgba(244, 114, 182, 0.22);
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.2);
}

/* ── Animations ────────────────────────────────────────────────────────── */

@keyframes ep-spin-b-ege99z7j95 {
    to { transform: rotate(360deg); }
}

@keyframes ep-badge-pulse-b-ege99z7j95 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rf-ep-coord-grid[b-ege99z7j95] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/LidarViewer/LidarViewerPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   RF TOOLS HUD — Main Shell + Tactical Glass Palette
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tactical Glass Color Palette ──────────────────────────────────────── */
/* Defined on .rf-shell so all child components inherit via CSS cascade */

.rf-shell[b-pi5wo6auwn] {
    /* Chrome — structural, non-semantic (desaturated blue-gray) */
    --hud-chrome: #8b92b0;
    --hud-chrome-05: rgba(139, 146, 176, 0.05);
    --hud-chrome-08: rgba(139, 146, 176, 0.08);
    --hud-chrome-10: rgba(139, 146, 176, 0.1);
    --hud-chrome-15: rgba(139, 146, 176, 0.15);
    --hud-chrome-20: rgba(139, 146, 176, 0.2);
    --hud-chrome-25: rgba(139, 146, 176, 0.25);
    --hud-chrome-30: rgba(139, 146, 176, 0.3);
    --hud-chrome-35: rgba(139, 146, 176, 0.35);
    --hud-chrome-40: rgba(139, 146, 176, 0.4);
    --hud-chrome-50: rgba(139, 146, 176, 0.5);

    /* Mode Identity — one color per mode, used ONLY for mode indicators */
    --hud-mode-nav: #a5b4fc;
    --hud-mode-path: #38bdf8;
    --hud-mode-view: #4ade80;
    --hud-mode-meas: #fbbf24;

    /* Data Semantics — endpoints, toggles, results */
    --hud-source: #2dd4bf;
    --hud-dest: #f472b6;
    --hud-toggle-on: #e2e8f0;
    --hud-success: #4ade80;
    --hud-warning: #fbbf24;
    --hud-error: #f87171;

    /* Glass Tiers */
    --hud-glass-light: rgba(10, 15, 30, 0.78);
    --hud-glass-medium: rgba(10, 15, 30, 0.85);
    --hud-glass-heavy: rgba(10, 15, 30, 0.92);

    /* Typography */
    --hud-font-data: var(--font-mono);
    --hud-font-ui: var(--font-primary);
    --hud-text-label: 10px;
    --hud-text-value: 11px;
    --hud-text-section: 11px;
}

/* ── Launch Screen ─────────────────────────────────────────────────────── */

.rf-launch-screen[b-pi5wo6auwn] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
}

.rf-launch-card[b-pi5wo6auwn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xl);
    background: var(--hud-glass-light, rgba(10, 15, 30, 0.78));
    border: 1px solid var(--hud-chrome-20, rgba(139, 146, 176, 0.2));
    border-radius: var(--radius-xl);
    backdrop-filter: blur(16px);
    max-width: 480px;
    width: 90%;
    animation: fadeIn-b-pi5wo6auwn 0.6s ease;
}

.rf-launch-logo[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--hud-chrome);
    letter-spacing: 0.15em;
}

.rf-logo-triangle[b-pi5wo6auwn] {
    font-size: var(--text-2xl);
}

.rf-logo-text[b-pi5wo6auwn] {
    text-shadow: 0 0 12px rgba(139, 146, 176, 0.3);
}

.rf-launch-subtitle[b-pi5wo6auwn] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

.rf-launch-sources[b-pi5wo6auwn],
.rf-launch-coords[b-pi5wo6auwn] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rf-section-label[b-pi5wo6auwn] {
    font-family: var(--font-mono);
    font-size: var(--hud-text-section, 11px);
    font-weight: var(--font-semibold);
    color: var(--hud-chrome);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
}

.rf-source-toggle[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.rf-source-toggle input[type="checkbox"][b-pi5wo6auwn] {
    accent-color: var(--hud-chrome);
}

.rf-coords-row[b-pi5wo6auwn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.rf-coord-field[b-pi5wo6auwn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rf-coord-field label[b-pi5wo6auwn] {
    font-family: var(--font-mono);
    font-size: var(--hud-text-label, 10px);
    color: var(--hud-chrome);
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.rf-coord-field input[b-pi5wo6auwn] {
    background: var(--hud-chrome-08);
    border: 1px solid var(--hud-chrome-20);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}

.rf-coord-field input:focus[b-pi5wo6auwn] {
    border-color: var(--hud-chrome);
}

.rf-launch-btn[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-launch-btn:hover[b-pi5wo6auwn] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.rf-launch-note[b-pi5wo6auwn] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

/* ── Shell Layout ──────────────────────────────────────────────────────── */

.rf-shell[b-pi5wo6auwn] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    overflow: hidden;
    outline: none;
}

/* ── Workspace (horizontal: sidepanel + center + settings) ─────────── */

.rf-workspace[b-pi5wo6auwn] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── Left Side Panel (docked, not floating) ────────────────────────── */

.rf-sidepanel[b-pi5wo6auwn] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--hud-glass-medium);
    border-right: 1px solid var(--hud-chrome-15);
    overflow: hidden;
    animation: sidepanel-slide-in-b-pi5wo6auwn 0.2s ease;
}

.rf-sidepanel-header[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--space-md);
    border-bottom: 1px solid var(--hud-chrome-10);
    flex-shrink: 0;
}

.rf-sidepanel-title[b-pi5wo6auwn] {
    font-family: var(--font-mono);
    font-size: var(--hud-text-section, 11px);
    font-weight: var(--font-semibold);
    color: var(--hud-chrome);
    letter-spacing: 0.12em;
}

.rf-sidepanel-close[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-sidepanel-close:hover[b-pi5wo6auwn] {
    color: var(--hud-error);
    border-color: rgba(248, 113, 113, 0.3);
}

.rf-sidepanel-body[b-pi5wo6auwn] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--hud-chrome-25) transparent;
}

.rf-sidepanel-body[b-pi5wo6auwn]::-webkit-scrollbar { width: 5px; }
.rf-sidepanel-body[b-pi5wo6auwn]::-webkit-scrollbar-track { background: transparent; }
.rf-sidepanel-body[b-pi5wo6auwn]::-webkit-scrollbar-thumb { background: var(--hud-chrome-20); border-radius: 3px; }

/* ── Right-click Context Menu ──────────────────────────────────────── */

.rf-context-menu[b-pi5wo6auwn] {
    position: absolute;
    z-index: 300;
    background: var(--hud-glass-heavy);
    border: 1px solid var(--hud-chrome-20);
    border-radius: 8px;
    padding: 4px;
    min-width: 200px;
    backdrop-filter: blur(16px);
    animation: ctx-appear-b-pi5wo6auwn 0.12s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.rf-ctx-item[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}

.rf-ctx-item:hover[b-pi5wo6auwn] {
    background: var(--hud-chrome-10);
}

.rf-ctx-badge[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.rf-ctx-badge.source[b-pi5wo6auwn] {
    background: rgba(45, 212, 191, 0.2);
    color: var(--hud-source);
}

.rf-ctx-badge.dest[b-pi5wo6auwn] {
    background: rgba(244, 114, 182, 0.2);
    color: var(--hud-dest);
}

.rf-ctx-icon[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--hud-mode-view);
}

.rf-ctx-divider[b-pi5wo6auwn] {
    height: 1px;
    background: var(--hud-chrome-10);
    margin: 4px 8px;
}

.rf-ctx-coords[b-pi5wo6auwn] {
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

@keyframes ctx-appear-b-pi5wo6auwn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Quick Config (inline in side panel below endpoint search) ─────── */

.rf-quickconfig[b-pi5wo6auwn] {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-qc-divider[b-pi5wo6auwn] {
    height: 1px;
    background: var(--hud-chrome-10);
    margin: 4px 0 8px;
}

.rf-qc-label[b-pi5wo6auwn] {
    font-family: var(--font-mono);
    font-size: var(--hud-text-section, 11px);
    font-weight: var(--font-semibold);
    color: var(--hud-mode-path);
    letter-spacing: 0.1em;
}

.rf-qc-grid[b-pi5wo6auwn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rf-qc-field[b-pi5wo6auwn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rf-qc-field label[b-pi5wo6auwn] {
    font-family: var(--font-mono);
    font-size: var(--hud-text-label, 10px);
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rf-qc-field input[b-pi5wo6auwn],
.rf-qc-field select[b-pi5wo6auwn] {
    width: 100%;
    box-sizing: border-box;
    background: var(--hud-chrome-08);
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--hud-text-value, 11px);
    outline: none;
    transition: border-color var(--transition-fast);
}

.rf-qc-field input:focus[b-pi5wo6auwn],
.rf-qc-field select:focus[b-pi5wo6auwn] {
    border-color: var(--hud-mode-path);
}

.rf-qc-field select option[b-pi5wo6auwn] {
    background: rgba(10, 15, 30, 0.98);
    color: var(--text-primary);
}

/* Remove number spinners */
.rf-qc-field input[type="number"][b-pi5wo6auwn]::-webkit-outer-spin-button,
.rf-qc-field input[type="number"][b-pi5wo6auwn]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.rf-qc-field input[type="number"][b-pi5wo6auwn] { -moz-appearance: textfield; }

.rf-analyze-btn[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #38bdf8, #2dd4bf);
    border: none;
    border-radius: 6px;
    color: #0f172a;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 4px;
}

.rf-analyze-btn:hover:not(:disabled)[b-pi5wo6auwn] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
}

.rf-analyze-btn:disabled[b-pi5wo6auwn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rf-btn-spinner[b-pi5wo6auwn] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(15, 23, 42, 0.3);
    border-top-color: #0f172a;
    border-radius: 50%;
    animation: spin-b-pi5wo6auwn 0.6s linear infinite;
}

.rf-clear-btn[b-pi5wo6auwn] {
    width: 100%;
    padding: 7px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--hud-text-label, 10px);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-clear-btn:hover[b-pi5wo6auwn] {
    border-color: var(--hud-error);
    color: var(--hud-error);
}

.rf-qc-hint[b-pi5wo6auwn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--hud-chrome-08);
}

.rf-qc-hint svg[b-pi5wo6auwn] {
    flex-shrink: 0;
    color: var(--hud-mode-path);
    opacity: 0.6;
}

/* ── Center Column (viewport + control center) ─────────────────────── */

.rf-center[b-pi5wo6auwn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ── Viewport ──────────────────────────────────────────────────────── */

.rf-viewport[b-pi5wo6auwn] {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.rf-canvas[b-pi5wo6auwn] {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
}

/* ── Right: Settings Panel (docked, non-modal) ─────────────────────── */

.rf-settings-panel[b-pi5wo6auwn] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--hud-glass-heavy);
    border-left: 1px solid var(--hud-chrome-15);
    overflow: hidden;
    animation: settings-slide-in-b-pi5wo6auwn 0.2s ease;
}

/* ── Loading Overlay ───────────────────────────────────────────────── */

.rf-loading-overlay[b-pi5wo6auwn] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: rgba(10, 15, 30, 0.95);
    z-index: 100;
}

.rf-loading-spinner[b-pi5wo6auwn] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--hud-chrome-15);
    border-top-color: var(--hud-chrome);
    border-radius: 50%;
    animation: spin-b-pi5wo6auwn 0.8s linear infinite;
}

.rf-loading-text[b-pi5wo6auwn] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--hud-chrome);
    letter-spacing: 0.12em;
    animation: hud-pulse-b-pi5wo6auwn 2s ease-in-out infinite;
}

.rf-loading-sub[b-pi5wo6auwn] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Crosshair ─────────────────────────────────────────────────────── */

.rf-crosshair[b-pi5wo6auwn] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 50;
}

.rf-crosshair-h[b-pi5wo6auwn],
.rf-crosshair-v[b-pi5wo6auwn] {
    position: absolute;
    background: var(--hud-chrome-40);
}

.rf-crosshair-h[b-pi5wo6auwn] {
    width: 24px;
    height: 1px;
    top: 0;
    left: -12px;
}

.rf-crosshair-v[b-pi5wo6auwn] {
    width: 1px;
    height: 24px;
    top: -12px;
    left: 0;
}

/* ── Animations ────────────────────────────────────────────────────── */

@keyframes fadeIn-b-pi5wo6auwn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin-b-pi5wo6auwn {
    to { transform: rotate(360deg); }
}

@keyframes hud-pulse-b-pi5wo6auwn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes sidepanel-slide-in-b-pi5wo6auwn {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes settings-slide-in-b-pi5wo6auwn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .rf-sidepanel[b-pi5wo6auwn] {
        width: 280px;
    }

    .rf-settings-panel[b-pi5wo6auwn] {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .rf-sidepanel[b-pi5wo6auwn] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        z-index: 150;
        border-right: 1px solid var(--hud-chrome-20);
    }

    .rf-settings-panel[b-pi5wo6auwn] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        z-index: 150;
        border-left: 1px solid var(--hud-chrome-20);
    }

    .rf-launch-card[b-pi5wo6auwn] {
        padding: var(--space-lg);
    }

    .rf-coords-row[b-pi5wo6auwn] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .rf-sidepanel[b-pi5wo6auwn],
    .rf-settings-panel[b-pi5wo6auwn] {
        width: 100%;
    }

    .rf-launch-card[b-pi5wo6auwn] {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .rf-launch-logo[b-pi5wo6auwn] {
        font-size: var(--text-lg);
    }
}
/* /Features/Admin/Components/LidarViewer/MenuBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   MenuBar — Top toolbar HUD glass styling
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-menubar[b-v2b91lco66] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 var(--space-md);
    background: var(--hud-glass-medium);
    border-bottom: 1px solid var(--hud-chrome-15);
    backdrop-filter: blur(20px);
    z-index: 200;
    flex-shrink: 0;
}

/* ── Left Section ──────────────────────────────────────────────────────── */

.rf-menubar-left[b-v2b91lco66] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.rf-menubar-logo[b-v2b91lco66] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--hud-chrome);
    letter-spacing: 0.15em;
    user-select: none;
    text-shadow: 0 0 8px rgba(139, 146, 176, 0.2);
}

.rf-logo-tri[b-v2b91lco66] {
    font-size: var(--text-base);
}

.rf-menubar-divider[b-v2b91lco66] {
    width: 1px;
    height: 20px;
    background: var(--hud-chrome-20);
}

/* ── Mode Buttons ──────────────────────────────────────────────────────── */

.rf-mode-group[b-v2b91lco66] {
    display: flex;
    gap: 2px;
}

.rf-mode-btn[b-v2b91lco66] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-medium);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.rf-mode-btn:hover[b-v2b91lco66] {
    color: var(--text-primary);
    background: var(--hud-chrome-08);
    border-color: var(--hud-chrome-15);
}

.rf-mode-btn.active[b-v2b91lco66] {
    color: var(--hud-chrome);
    background: var(--hud-chrome-15);
    border-color: var(--hud-chrome-35);
    box-shadow: 0 0 8px var(--hud-chrome-15);
}

.rf-mode-icon[b-v2b91lco66] {
    flex-shrink: 0;
}

/* ── Search Toggle ────────────────────────────────────────────────────── */

.rf-search-toggle[b-v2b91lco66] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-search-toggle:hover[b-v2b91lco66] {
    color: var(--text-primary);
    border-color: var(--hud-chrome-30);
    background: var(--hud-chrome-08);
}

.rf-search-toggle.active[b-v2b91lco66] {
    color: var(--hud-mode-path);
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.08);
}

/* ── Right Section ─────────────────────────────────────────────────────── */

.rf-menubar-right[b-v2b91lco66] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rf-toggle-btn[b-v2b91lco66] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-toggle-dot[b-v2b91lco66] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: all var(--transition-fast);
}

.rf-toggle-btn.on .rf-toggle-dot[b-v2b91lco66] {
    background: var(--hud-toggle-on);
    box-shadow: 0 0 6px rgba(226, 232, 240, 0.4);
}

.rf-toggle-btn:hover[b-v2b91lco66] {
    border-color: var(--hud-chrome-30);
    color: var(--text-secondary);
}

.rf-toggle-btn.on[b-v2b91lco66] {
    border-color: var(--hud-chrome-30);
    color: var(--text-primary);
}

.rf-kbd-hint[b-v2b91lco66] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 8px;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    opacity: 0.6;
}

.rf-settings-btn[b-v2b91lco66] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-settings-btn:hover[b-v2b91lco66] {
    color: var(--hud-chrome);
    border-color: var(--hud-chrome-35);
    background: var(--hud-chrome-08);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .rf-mode-label[b-v2b91lco66] {
        display: none;
    }

    .rf-menubar-logo .rf-logo-label[b-v2b91lco66] {
        display: none;
    }

    .rf-toggle-label[b-v2b91lco66] {
        display: none;
    }

    .rf-kbd-hint[b-v2b91lco66] {
        display: none;
    }
}

@media (max-width: 640px) {
    .rf-menubar[b-v2b91lco66] {
        padding: 0 var(--space-sm);
        height: 40px;
    }

    .rf-mode-btn[b-v2b91lco66] {
        padding: 6px 8px;
    }

    .desktop-only[b-v2b91lco66] {
        display: none;
    }
}
/* /Features/Admin/Components/LidarViewer/Modes/MeasureMode.razor.rz.scp.css */
/* =============================================================================
   MeasureMode — Tactical Glass palette with amber accent (--hud-mode-meas)
   ============================================================================= */

.rf-measure[b-rdbp1cyq83] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---------- Toolbar ---------- */

.rf-measure-toolbar[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--space-md);
    border-bottom: 1px solid var(--hud-chrome-08);
    gap: 8px;
}

.rf-measure-tools[b-rdbp1cyq83] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.rf-measure-tool-btn[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--hud-chrome-10);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.rf-measure-tool-btn:hover:not(.disabled)[b-rdbp1cyq83] {
    background: var(--hud-chrome-05);
    border-color: var(--hud-chrome-20);
    color: var(--text-secondary);
}

.rf-measure-tool-btn.active[b-rdbp1cyq83] {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--hud-mode-meas);
}

.rf-measure-tool-btn.disabled[b-rdbp1cyq83] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Clear all button */
.rf-measure-clear-all[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-sm);
    color: rgba(239, 68, 68, 0.7);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--font-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.rf-measure-clear-all:hover[b-rdbp1cyq83] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(239, 68, 68, 0.9);
}

/* ---------- Pending point indicator ---------- */

.rf-measure-pending[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--space-md);
    background: rgba(251, 191, 36, 0.04);
    border-bottom: 1px solid rgba(251, 191, 36, 0.12);
    position: relative;
}

.rf-measure-pending-dot[b-rdbp1cyq83] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hud-mode-meas);
    flex-shrink: 0;
    animation: rf-meas-pulse-b-rdbp1cyq83 1.5s ease-in-out infinite;
}

@keyframes rf-meas-pulse-b-rdbp1cyq83 {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

.rf-measure-pending-info[b-rdbp1cyq83] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rf-measure-pending-label[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hud-mode-meas);
}

.rf-measure-pending-coords[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.rf-measure-pending-elev[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

.rf-measure-pending-hint[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-mode-meas);
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.rf-measure-pending-cancel[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.rf-measure-pending-cancel:hover[b-rdbp1cyq83] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.8);
}

/* ---------- Content area ---------- */

.rf-measure-content[b-rdbp1cyq83] {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hud-chrome-25) transparent;
}

.rf-measure-content[b-rdbp1cyq83]::-webkit-scrollbar { width: 4px; }
.rf-measure-content[b-rdbp1cyq83]::-webkit-scrollbar-track { background: transparent; }
.rf-measure-content[b-rdbp1cyq83]::-webkit-scrollbar-thumb { background: var(--hud-chrome-20); border-radius: 2px; }

/* ---------- Empty state ---------- */

.rf-measure-empty[b-rdbp1cyq83] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
}

.rf-measure-empty-title[b-rdbp1cyq83] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.rf-measure-empty-sub[b-rdbp1cyq83] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-muted);
    opacity: 0.6;
}

/* ---------- Measurement list ---------- */

.rf-measure-list[b-rdbp1cyq83] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-measure-item[b-rdbp1cyq83] {
    padding: 7px 10px;
    background: var(--hud-chrome-05);
    border: 1px solid var(--hud-chrome-10);
    border-radius: 4px;
    transition: border-color var(--transition-fast);
}

.rf-measure-item:hover[b-rdbp1cyq83] {
    border-color: var(--hud-chrome-20);
}

.rf-measure-item-row[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.rf-measure-item-index[b-rdbp1cyq83] {
    font-size: 13px;
    color: var(--hud-mode-meas);
    flex-shrink: 0;
    line-height: 1;
}

.rf-measure-item-distance[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
}

.rf-measure-item-sep[b-rdbp1cyq83] {
    color: var(--hud-chrome-20);
    font-size: 11px;
    flex-shrink: 0;
}

.rf-measure-item-azimuth[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.rf-measure-item-vert[b-rdbp1cyq83] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.rf-measure-item-remove[b-rdbp1cyq83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    opacity: 0;
}

.rf-measure-item:hover .rf-measure-item-remove[b-rdbp1cyq83] {
    opacity: 1;
}

.rf-measure-item-remove:hover[b-rdbp1cyq83] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.8);
}

.rf-measure-item-detail[b-rdbp1cyq83] {
    display: flex;
    gap: 12px;
    margin-top: 3px;
    padding-left: 19px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .rf-measure-toolbar[b-rdbp1cyq83] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .rf-measure-tool-btn[b-rdbp1cyq83] {
        padding: 5px 8px;
        font-size: 9px;
    }

    .rf-measure-pending[b-rdbp1cyq83] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .rf-measure-pending-hint[b-rdbp1cyq83] {
        width: 100%;
        padding-left: 16px;
    }

    .rf-measure-item-row[b-rdbp1cyq83] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .rf-measure-item-remove[b-rdbp1cyq83] {
        opacity: 1;
    }
}
/* /Features/Admin/Components/LidarViewer/Modes/NavigateMode.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   NavigateMode — Movement, Camera, Shortcuts
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-nav[b-3rf5n74240] {
    padding: 0;
}

.rf-nav-subtabs[b-3rf5n74240] {
    display: flex;
    gap: 2px;
    padding: 8px var(--space-md) 0;
    border-bottom: 1px solid var(--hud-chrome-08);
}

.rf-nav-subtab[b-3rf5n74240] {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-nav-subtab:hover[b-3rf5n74240] { color: var(--text-secondary); }
.rf-nav-subtab.active[b-3rf5n74240] { color: var(--hud-chrome); border-bottom-color: var(--hud-chrome); }

.rf-nav-content[b-3rf5n74240] {
    padding: var(--space-md);
}

/* ── Slider sections ───────────────────────────────────────────────────── */

.rf-nav-section[b-3rf5n74240] {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.rf-nav-label[b-3rf5n74240] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.rf-nav-slider-row[b-3rf5n74240] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 280px;
}

.rf-nav-slider[b-3rf5n74240] {
    flex: 1;
    accent-color: var(--hud-chrome);
    height: 4px;
    max-width: 200px;
}

.rf-nav-value[b-3rf5n74240] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    min-width: 60px;
    text-align: right;
}

/* ── Camera modes ──────────────────────────────────────────────────────── */

.rf-nav-camera-modes[b-3rf5n74240] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-nav-camera-btn[b-3rf5n74240] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--hud-chrome-10);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.rf-nav-camera-btn:hover[b-3rf5n74240] {
    background: var(--hud-chrome-05);
    border-color: var(--hud-chrome-20);
}

.rf-nav-camera-btn.active[b-3rf5n74240] {
    background: var(--hud-chrome-10);
    border-color: var(--hud-chrome-35);
    color: var(--hud-chrome);
}

.rf-nav-camera-info[b-3rf5n74240] {
    display: flex;
    flex-direction: column;
}

.rf-nav-camera-name[b-3rf5n74240] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-medium);
}

.rf-nav-camera-desc[b-3rf5n74240] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Shortcuts ─────────────────────────────────────────────────────────── */

.rf-nav-shortcuts[b-3rf5n74240] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rf-nav-shortcut-group[b-3rf5n74240] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-nav-shortcut-group-label[b-3rf5n74240] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.1em;
    opacity: 0.6;
    text-transform: uppercase;
}

.rf-nav-shortcut-row[b-3rf5n74240] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 3px;
}

.rf-nav-shortcut-row:hover[b-3rf5n74240] {
    background: var(--hud-chrome-05);
}

.rf-nav-shortcut-keys[b-3rf5n74240] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    padding: 2px 6px;
    background: var(--hud-chrome-08);
    border: 1px solid var(--hud-chrome-15);
    border-radius: 3px;
}

.rf-nav-shortcut-desc[b-3rf5n74240] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rf-nav-subtab[b-3rf5n74240] {
        padding: 6px 10px;
        font-size: 10px;
    }
}
/* /Features/Admin/Components/LidarViewer/Modes/PathAnalysisMode.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   PathAnalysisMode — Verdict strip + chart tabs (Tactical Glass)
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-pa[b-kssdy8un1t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Verdict + Metrics Strip (always visible, never scrolls) ───────── */

.rf-pa-verdict-strip[b-kssdy8un1t] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 8px var(--space-md);
    border-bottom: 1px solid var(--hud-chrome-08);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.rf-pa-verdict[b-kssdy8un1t] {
    padding: 4px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

.rf-pa-verdict.verdict-excellent[b-kssdy8un1t] {
    background: rgba(74, 222, 128, 0.15);
    color: var(--hud-success);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.rf-pa-verdict.verdict-good[b-kssdy8un1t] {
    background: rgba(74, 222, 128, 0.12);
    color: var(--hud-success);
    border: 1px solid rgba(74, 222, 128, 0.25);
}

.rf-pa-verdict.verdict-marginal[b-kssdy8un1t] {
    background: rgba(251, 191, 36, 0.12);
    color: var(--hud-warning);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.rf-pa-verdict.verdict-noviable[b-kssdy8un1t] {
    background: rgba(248, 113, 113, 0.12);
    color: var(--hud-error);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

/* ── Metrics Row ───────────────────────────────────────────────────── */

.rf-pa-metrics-row[b-kssdy8un1t] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    flex-wrap: wrap;
}

.rf-pa-metric[b-kssdy8un1t] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rf-pa-metric-label[b-kssdy8un1t] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.rf-pa-metric-value[b-kssdy8un1t] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
}

.rf-pa-metric-value.margin-good[b-kssdy8un1t] { color: var(--hud-success); }
.rf-pa-metric-value.margin-warn[b-kssdy8un1t] { color: var(--hud-warning); }
.rf-pa-metric-value.margin-bad[b-kssdy8un1t] { color: var(--hud-error); }

.rf-pa-actions-inline[b-kssdy8un1t] {
    flex-shrink: 0;
}

/* ── Chart Tabs ────────────────────────────────────────────────────── */

.rf-pa-chart-tabs[b-kssdy8un1t] {
    display: flex;
    gap: 2px;
    padding: 0 var(--space-md);
    border-bottom: 1px solid var(--hud-chrome-08);
    flex-shrink: 0;
}

.rf-pa-chart-tab[b-kssdy8un1t] {
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-pa-chart-tab:hover[b-kssdy8un1t] { color: var(--text-secondary); }

.rf-pa-chart-tab.active[b-kssdy8un1t] {
    color: var(--hud-mode-path);
    border-bottom-color: var(--hud-mode-path);
}

/* ── Chart Body (fills remaining space) ────────────────────────────── */

.rf-pa-chart-body[b-kssdy8un1t] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: var(--space-sm);
}

/* ── Loading State ─────────────────────────────────────────────────── */

.rf-pa-loading[b-kssdy8un1t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.rf-pa-spinner[b-kssdy8un1t] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--hud-chrome-15);
    border-top-color: var(--hud-mode-path);
    border-radius: 50%;
    animation: rf-pa-spin-b-kssdy8un1t 0.6s linear infinite;
}

@keyframes rf-pa-spin-b-kssdy8un1t {
    to { transform: rotate(360deg); }
}

/* ── Empty State ───────────────────────────────────────────────────── */

.rf-pa-empty[b-kssdy8un1t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    text-align: center;
}

.rf-pa-empty strong[b-kssdy8un1t] {
    color: var(--hud-mode-path);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .rf-pa-verdict-strip[b-kssdy8un1t] {
        padding: 6px var(--space-sm);
        gap: var(--space-sm);
    }

    .rf-pa-metrics-row[b-kssdy8un1t] {
        gap: var(--space-sm);
    }
}
/* /Features/Admin/Components/LidarViewer/Modes/ViewshedMode.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ViewshedMode — Compact layout, generate button always visible
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-viewshed[b-mo7fu2oqwq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: var(--space-sm) var(--space-md);
}

/* ── Config View ───────────────────────────────────────────────────── */

.rf-viewshed-config[b-mo7fu2oqwq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

/* Origin row */
.rf-viewshed-row[b-mo7fu2oqwq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rf-viewshed-label[b-mo7fu2oqwq] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.08em;
    opacity: 0.7;
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: 55px;
}

.rf-viewshed-origin-coords[b-mo7fu2oqwq] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
}

.rf-viewshed-elev[b-mo7fu2oqwq] {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 4px;
}

.rf-viewshed-hint[b-mo7fu2oqwq] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.rf-viewshed-tiny-btn[b-mo7fu2oqwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.rf-viewshed-tiny-btn:hover[b-mo7fu2oqwq] { color: var(--hud-error); border-color: rgba(248,113,113,0.3); }

/* Manual entry row */
.rf-viewshed-manual-row[b-mo7fu2oqwq] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rf-viewshed-input[b-mo7fu2oqwq] {
    flex: 1;
    min-width: 0;
    background: var(--hud-chrome-08);
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    padding: 5px 8px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    outline: none;
}
.rf-viewshed-input:focus[b-mo7fu2oqwq] { border-color: var(--hud-mode-view); }
.rf-viewshed-input[b-mo7fu2oqwq]::placeholder { color: var(--text-muted); font-size: 10px; }
.rf-viewshed-input[type="number"][b-mo7fu2oqwq]::-webkit-outer-spin-button,
.rf-viewshed-input[type="number"][b-mo7fu2oqwq]::-webkit-inner-spin-button { -webkit-appearance: none; }
.rf-viewshed-input[type="number"][b-mo7fu2oqwq] { -moz-appearance: textfield; }

.rf-viewshed-set-btn[b-mo7fu2oqwq] {
    padding: 5px 10px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 4px;
    color: var(--hud-mode-view);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-bold);
    cursor: pointer;
    flex-shrink: 0;
}
.rf-viewshed-set-btn:disabled[b-mo7fu2oqwq] { opacity: 0.4; cursor: not-allowed; }

/* Params grid — 2 columns, compact */
.rf-viewshed-params-grid[b-mo7fu2oqwq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    flex: 1;
    min-height: 0;
}

.rf-viewshed-param[b-mo7fu2oqwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rf-viewshed-type-toggle[b-mo7fu2oqwq] {
    display: flex;
    gap: 2px;
}

.rf-viewshed-type-opt[b-mo7fu2oqwq] {
    flex: 1;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--hud-chrome-10);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.rf-viewshed-type-opt:hover[b-mo7fu2oqwq] { background: var(--hud-chrome-05); color: var(--text-secondary); }
.rf-viewshed-type-opt.active[b-mo7fu2oqwq] {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--hud-mode-view);
}

.rf-viewshed-slider-row[b-mo7fu2oqwq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rf-viewshed-slider[b-mo7fu2oqwq] {
    flex: 1;
    accent-color: var(--hud-mode-view);
    height: 3px;
    min-width: 0;
}

.rf-viewshed-val[b-mo7fu2oqwq] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
    white-space: nowrap;
}

/* Generate button — always at bottom */
.rf-viewshed-generate-btn[b-mo7fu2oqwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    color: var(--hud-mode-view);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-top: auto;
}
.rf-viewshed-generate-btn:hover:not(:disabled)[b-mo7fu2oqwq] { background: rgba(74, 222, 128, 0.2); }
.rf-viewshed-generate-btn:disabled[b-mo7fu2oqwq] { opacity: 0.4; cursor: not-allowed; }

.rf-viewshed-btn-spinner[b-mo7fu2oqwq] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(74, 222, 128, 0.2);
    border-top-color: var(--hud-mode-view);
    border-radius: 50%;
    animation: vs-spin-b-mo7fu2oqwq 0.6s linear infinite;
}

.rf-viewshed-error[b-mo7fu2oqwq] {
    padding: 6px 10px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 4px;
    color: var(--hud-error);
    font-family: var(--font-mono);
    font-size: 10px;
    flex-shrink: 0;
}

/* ── Results View ──────────────────────────────────────────────────── */

.rf-viewshed-results[b-mo7fu2oqwq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 100%;
}

.rf-viewshed-stat-grid[b-mo7fu2oqwq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.rf-viewshed-stat[b-mo7fu2oqwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--hud-chrome-05);
    border: 1px solid var(--hud-chrome-08);
    border-radius: 6px;
    text-align: center;
}

.rf-viewshed-stat-value[b-mo7fu2oqwq] {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.rf-viewshed-stat-value.rf-viewshed-stat-green[b-mo7fu2oqwq] { color: var(--hud-mode-view); }

.rf-viewshed-stat-label[b-mo7fu2oqwq] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.rf-viewshed-result-meta[b-mo7fu2oqwq] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 0;
}

.rf-viewshed-result-actions[b-mo7fu2oqwq] {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.rf-viewshed-rerun-btn[b-mo7fu2oqwq] {
    flex: 1;
    padding: 8px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    color: var(--hud-mode-view);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    cursor: pointer;
}

.rf-viewshed-clear-btn[b-mo7fu2oqwq] {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
}
.rf-viewshed-clear-btn:hover[b-mo7fu2oqwq] { border-color: var(--hud-error); color: var(--hud-error); }

@keyframes vs-spin-b-mo7fu2oqwq { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .rf-viewshed-stat-grid[b-mo7fu2oqwq] { grid-template-columns: 1fr 1fr; }
    .rf-viewshed-params-grid[b-mo7fu2oqwq] { grid-template-columns: 1fr; }
}
/* /Features/Admin/Components/LidarViewer/Shared/GlobalSettings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   GlobalSettings — Docked panel content (parent provides container)
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-gs-content[b-w5v7242nna] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.rf-gs-header[b-w5v7242nna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--hud-chrome-10);
}

.rf-gs-title[b-w5v7242nna] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--hud-chrome);
    letter-spacing: 0.12em;
}

.rf-gs-close[b-w5v7242nna] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-gs-close:hover[b-w5v7242nna] {
    color: var(--hud-error);
    border-color: rgba(248, 113, 113, 0.3);
}

.rf-gs-body[b-w5v7242nna] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    scrollbar-width: thin;
    scrollbar-color: var(--hud-chrome-20) transparent;
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.rf-gs-section[b-w5v7242nna] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--hud-chrome-05);
}

.rf-gs-section:last-child[b-w5v7242nna] {
    border-bottom: none;
    margin-bottom: 0;
}

.rf-gs-section-label[b-w5v7242nna] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--hud-chrome);
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.rf-gs-section-header-row[b-w5v7242nna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Fields ────────────────────────────────────────────────────────────── */

.rf-gs-field[b-w5v7242nna] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-gs-field-label[b-w5v7242nna] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* Two-column grid for compact layout */
.rf-gs-grid-2col[b-w5v7242nna] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-md);
}

.rf-gs-slider-row[b-w5v7242nna] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.rf-gs-slider[b-w5v7242nna] {
    flex: 1;
    accent-color: var(--hud-chrome);
    height: 4px;
    min-width: 0;
}

.rf-gs-value[b-w5v7242nna] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-primary);
    min-width: 32px;
    text-align: right;
    white-space: nowrap;
}

/* Select buttons row */
.rf-gs-select-row[b-w5v7242nna] {
    display: flex;
    gap: 2px;
}

.rf-gs-select-btn[b-w5v7242nna] {
    flex: 1;
    padding: 5px 4px;
    background: transparent;
    border: 1px solid var(--hud-chrome-10);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    white-space: nowrap;
}

.rf-gs-select-btn:hover[b-w5v7242nna] {
    background: var(--hud-chrome-05);
    border-color: var(--hud-chrome-20);
    color: var(--text-secondary);
}

.rf-gs-select-btn.active[b-w5v7242nna] {
    background: var(--hud-chrome-15);
    border-color: var(--hud-chrome-35);
    color: var(--hud-chrome);
}

/* Dropdown select */
.rf-gs-dropdown[b-w5v7242nna] {
    width: 100%;
    padding: 5px 8px;
    background: var(--hud-chrome-05);
    border: 1px solid var(--hud-chrome-15);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: auto;
}

.rf-gs-dropdown:hover[b-w5v7242nna],
.rf-gs-dropdown:focus[b-w5v7242nna] {
    border-color: var(--hud-chrome-35);
    outline: none;
}

.rf-gs-dropdown option[b-w5v7242nna] {
    background: var(--hud-glass-heavy);
    color: var(--text-primary);
}

/* Toggles */
.rf-gs-toggle[b-w5v7242nna] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: 4px 0;
}

.rf-gs-toggle input[type="checkbox"][b-w5v7242nna] {
    accent-color: var(--hud-chrome);
}

.rf-gs-toggle-label[b-w5v7242nna] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Reset button ─────────────────────────────────────────────────────── */

.rf-gs-reset-btn[b-w5v7242nna] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--hud-chrome-10);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rf-gs-reset-btn:hover[b-w5v7242nna] {
    border-color: var(--hud-chrome-30);
    color: var(--hud-chrome);
    background: var(--hud-chrome-05);
}

/* ── Classification color grid ────────────────────────────────────────── */

.rf-gs-class-grid[b-w5v7242nna] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.rf-gs-class-item[b-w5v7242nna] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 3px;
    transition: background var(--transition-fast);
}

.rf-gs-class-item:hover[b-w5v7242nna] {
    background: var(--hud-chrome-05);
}

.rf-gs-color-swatch[b-w5v7242nna] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border: 1px solid var(--hud-chrome-20);
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
}

.rf-gs-color-swatch[b-w5v7242nna]::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.rf-gs-color-swatch[b-w5v7242nna]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.rf-gs-color-swatch[b-w5v7242nna]::-moz-color-swatch {
    border: none;
    border-radius: 2px;
}

.rf-gs-class-label[b-w5v7242nna] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder */
.rf-gs-placeholder[b-w5v7242nna] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-sm);
    background: var(--hud-chrome-05);
    border-radius: 4px;
    text-align: center;
}

/* ── Responsive (container-width aware) ───────────────────────────────── */

@media (max-width: 640px) {
    .rf-gs-content[b-w5v7242nna] {
        width: 100%;
    }

    .rf-gs-grid-2col[b-w5v7242nna] {
        grid-template-columns: 1fr;
    }

    .rf-gs-class-grid[b-w5v7242nna] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/LidarViewer/Shared/ShareExportMenu.razor.rz.scp.css */
/* ShareExportMenu — Dropdown with share & export options */

.se-container[b-klhq9eqg4t] {
    position: relative;
    display: inline-block;
}

.se-trigger[b-klhq9eqg4t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--hud-chrome-10);
    border: 1px solid var(--hud-chrome-30);
    color: var(--hud-chrome);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: var(--transition-fast, all 0.15s ease);
    white-space: nowrap;
}

.se-trigger:hover:not(:disabled)[b-klhq9eqg4t] {
    background: var(--hud-chrome-20);
    border-color: var(--hud-chrome);
    color: var(--text-primary, #f8fafc);
}

.se-trigger.active[b-klhq9eqg4t] {
    background: var(--hud-chrome-20);
    border-color: var(--hud-chrome);
}

.se-trigger:disabled[b-klhq9eqg4t] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Backdrop */
.se-backdrop[b-klhq9eqg4t] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Dropdown */
.se-dropdown[b-klhq9eqg4t] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--hud-glass-heavy);
    border: 1px solid var(--hud-chrome-20);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    overflow: hidden;
    backdrop-filter: blur(12px);
}

/* Sections */
.se-section[b-klhq9eqg4t] {
    padding: 8px 0;
}

.se-section + .se-section[b-klhq9eqg4t] {
    border-top: 1px solid var(--hud-chrome-10);
}

.se-section-label[b-klhq9eqg4t] {
    display: block;
    padding: 4px 14px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #64748b);
    font-weight: 600;
}

/* Items */
.se-item[b-klhq9eqg4t] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    color: var(--text-secondary, #cbd5e1);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-primary, -apple-system, sans-serif);
    text-align: left;
    transition: var(--transition-fast, all 0.15s ease);
}

.se-item:hover:not(:disabled)[b-klhq9eqg4t] {
    background: var(--hud-chrome-10);
    color: var(--text-primary, #f8fafc);
}

.se-item:disabled[b-klhq9eqg4t] {
    opacity: 0.4;
    cursor: not-allowed;
}

.se-item svg[b-klhq9eqg4t] {
    flex-shrink: 0;
    opacity: 0.7;
}

.se-badge[b-klhq9eqg4t] {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.se-badge.success[b-klhq9eqg4t] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--hud-success);
}

/* Input row */
.se-input-row[b-klhq9eqg4t] {
    display: flex;
    gap: 6px;
    padding: 4px 14px 6px;
}

.se-input[b-klhq9eqg4t] {
    flex: 1;
    padding: 5px 8px;
    background: var(--hud-glass-heavy);
    border: 1px solid var(--hud-chrome-20);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #f8fafc);
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    outline: none;
}

.se-input:focus[b-klhq9eqg4t] {
    border-color: var(--hud-chrome);
}

.se-input[b-klhq9eqg4t]::placeholder {
    color: var(--text-muted, #64748b);
}

.se-send-btn[b-klhq9eqg4t] {
    padding: 5px 10px;
    background: var(--hud-chrome);
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast, all 0.15s ease);
}

.se-send-btn:hover:not(:disabled)[b-klhq9eqg4t] {
    filter: brightness(1.2);
}

.se-send-btn:disabled[b-klhq9eqg4t] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Status */
.se-status[b-klhq9eqg4t] {
    padding: 6px 14px;
    font-size: 11px;
    border-top: 1px solid var(--hud-chrome-10);
}

.se-status.success[b-klhq9eqg4t] {
    color: var(--hud-success);
}

.se-status.error[b-klhq9eqg4t] {
    color: var(--hud-error);
}

/* Busy */
.se-busy[b-klhq9eqg4t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid var(--hud-chrome-10);
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
}

.se-busy-spinner[b-klhq9eqg4t] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--hud-chrome-15);
    border-top-color: var(--hud-chrome);
    border-radius: 50%;
    animation: se-spin-b-klhq9eqg4t 0.7s linear infinite;
}

@keyframes se-spin-b-klhq9eqg4t {
    to { transform: rotate(360deg); }
}
/* /Features/Admin/Components/LinkRedirectsPanel.razor.rz.scp.css */
/* LinkRedirectsPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Stats cards - icon scale on hover */
[b-6664q67zyt] .mud-grid-item:nth-child(n+2):nth-child(-n+5) .mud-paper:hover .mud-icon-root {
    transform: scale(1.1);
}

/* Ellipsis fade for long text */
[b-6664q67zyt] td[style*="overflow: hidden"]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1.875rem;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
}

/* Animation for table rows */
@keyframes fadeInUp-b-6664q67zyt {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-6664q67zyt] .mud-table-body tr {
    animation: fadeInUp-b-6664q67zyt 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-6664q67zyt] .mud-grid-item:first-child {
        order: -1;
    }
}
/* /Features/Admin/Components/LiveCallsPanel.razor.rz.scp.css */
.live-calls-panel[b-04p0kzhv5s] {
    padding: var(--space-lg);
}

.panel-header[b-04p0kzhv5s] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.header-content[b-04p0kzhv5s] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.loading-container[b-04p0kzhv5s] {
    display: flex;
    justify-content: center;
    padding: var(--space-xl);
}

.empty-state[b-04p0kzhv5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    gap: var(--space-md);
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.calls-list[b-04p0kzhv5s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-md);
}

.call-card[b-04p0kzhv5s] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: pointer;
    transition: var(--transition-normal);
}

.call-card:hover[b-04p0kzhv5s] {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-lg);
}

.call-card.ai-handled[b-04p0kzhv5s] {
    border-left: 3px solid var(--accent-color);
}

.call-card.human-handled[b-04p0kzhv5s] {
    border-left: 3px solid var(--warning-color);
}

.call-header[b-04p0kzhv5s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.caller-info[b-04p0kzhv5s] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.caller-name[b-04p0kzhv5s] {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.call-meta[b-04p0kzhv5s] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.duration[b-04p0kzhv5s] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.call-topics[b-04p0kzhv5s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.call-detail-view[b-04p0kzhv5s] {
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.detail-header[b-04p0kzhv5s] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.recent-calls-section[b-04p0kzhv5s] {
    margin-top: var(--space-lg);
}

.recent-calls-table[b-04p0kzhv5s] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .calls-list[b-04p0kzhv5s] {
        grid-template-columns: 1fr;
    }

    .call-detail-view[b-04p0kzhv5s] {
        min-height: 400px;
    }
}
/* /Features/Admin/Components/LogsPanel.razor.rz.scp.css */
/* LogsPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Main container - full-height logs panel.
   Uses 100% of panel-content-wrapper, never viewport-relative heights. */
.logs-container[b-n5ydr7xvfh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-base);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Toolbar area with filters and controls */
.logs-toolbar[b-n5ydr7xvfh] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-drawer);
    border-bottom: 1px solid var(--border-accent);
    flex-wrap: wrap;
}

.logs-toolbar .level-chips[b-n5ydr7xvfh] {
    display: flex;
    gap: var(--space-xs);
}

.logs-toolbar .search-box[b-n5ydr7xvfh] {
    flex: 1;
    min-width: 12.5rem;
    max-width: 25rem;
}

/* Log content area with monospace font */
.logs-content[b-n5ydr7xvfh] {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    padding: var(--space-sm);
    background: var(--bg-base);
}

/* Individual log entry styling */
.log-entry[b-n5ydr7xvfh] {
    display: flex;
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-xs);
    white-space: pre-wrap;
    word-break: break-word;
    transition: background var(--transition-fast);
}

.log-entry:hover[b-n5ydr7xvfh] {
    background: var(--bg-hover);
}

/* Log level colors */
.log-entry.level-verbose[b-n5ydr7xvfh],
.log-entry.level-debug[b-n5ydr7xvfh] {
    color: var(--text-muted);
}

.log-entry.level-information[b-n5ydr7xvfh] {
    color: var(--text-primary);
}

.log-entry.level-warning[b-n5ydr7xvfh] {
    color: var(--warning-text);
}

.log-entry.level-error[b-n5ydr7xvfh],
.log-entry.level-fatal[b-n5ydr7xvfh] {
    color: var(--error-text);
}

/* Timestamp styling */
.log-timestamp[b-n5ydr7xvfh] {
    color: var(--accent-color);
    margin-right: var(--space-sm);
    white-space: nowrap;
}

/* Level indicator */
.log-level[b-n5ydr7xvfh] {
    font-weight: var(--font-semibold);
    margin-right: var(--space-sm);
    min-width: 2rem;
}

/* Log message content */
.log-message[b-n5ydr7xvfh] {
    flex: 1;
    color: inherit;
}

/* Exception display */
.log-exception[b-n5ydr7xvfh] {
    margin-top: var(--space-xs);
    padding-left: var(--space-lg);
    color: var(--error-text);
    font-size: var(--text-xs);
}

/* Status indicator for live/paused state - contained within panel */
.status-indicator[b-n5ydr7xvfh] {
    position: sticky;
    bottom: var(--space-md);
    align-self: flex-end;
    z-index: 10;
}

.status-live[b-n5ydr7xvfh] {
    animation: pulse-b-n5ydr7xvfh 2s ease-in-out infinite;
}

/* Level chip active state */
.level-chip-active[b-n5ydr7xvfh] {
    background: var(--bg-active) !important;
    border-color: var(--accent-color) !important;
}

/* Chip hover effect */
[b-n5ydr7xvfh] .mud-chip:hover {
    transform: translateY(-0.0625rem);
}

/* Animations */
@keyframes pulse-b-n5ydr7xvfh {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logs-toolbar[b-n5ydr7xvfh] {
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .logs-toolbar .search-box[b-n5ydr7xvfh] {
        min-width: 9.375rem;
    }
}
/* /Features/Admin/Components/NetworkMonitoring/NocDashboard.razor.rz.scp.css */
/* NOC Dashboard - Blazor CSS Isolation */

/* ===== Entry Animation ===== */
[b-zxnzsknjfx] .animate-panel-enter {
    animation: fadeInUp-b-zxnzsknjfx 0.4s ease-out;
}

@keyframes fadeInUp-b-zxnzsknjfx {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animations for cards */
[b-zxnzsknjfx] .stagger-1 { animation-delay: 0.05s; }
[b-zxnzsknjfx] .stagger-2 { animation-delay: 0.1s; }
[b-zxnzsknjfx] .stagger-3 { animation-delay: 0.15s; }
[b-zxnzsknjfx] .stagger-4 { animation-delay: 0.2s; }
[b-zxnzsknjfx] .stagger-5 { animation-delay: 0.25s; }
[b-zxnzsknjfx] .stagger-6 { animation-delay: 0.3s; }
[b-zxnzsknjfx] .stagger-7 { animation-delay: 0.35s; }
[b-zxnzsknjfx] .stagger-8 { animation-delay: 0.4s; }
[b-zxnzsknjfx] .stagger-9 { animation-delay: 0.45s; }
[b-zxnzsknjfx] .stagger-10 { animation-delay: 0.5s; }
[b-zxnzsknjfx] .stagger-11 { animation-delay: 0.55s; }
[b-zxnzsknjfx] .stagger-12 { animation-delay: 0.6s; }
[b-zxnzsknjfx] .stagger-13 { animation-delay: 0.65s; }
[b-zxnzsknjfx] .stagger-14 { animation-delay: 0.7s; }
[b-zxnzsknjfx] .stagger-15 { animation-delay: 0.75s; }
[b-zxnzsknjfx] .stagger-16 { animation-delay: 0.8s; }
[b-zxnzsknjfx] .stagger-17 { animation-delay: 0.85s; }
[b-zxnzsknjfx] .stagger-18 { animation-delay: 0.9s; }
[b-zxnzsknjfx] .stagger-19 { animation-delay: 0.95s; }
[b-zxnzsknjfx] .stagger-20 { animation-delay: 1.0s; }

/* ===== Dashboard Container ===== */
[b-zxnzsknjfx] .noc-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    height: 100%;
    overflow-y: auto;
}

/* ===== TOP STATUS BAR ===== */
[b-zxnzsknjfx] .noc-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

[b-zxnzsknjfx] .status-metrics {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

[b-zxnzsknjfx] .status-metric {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-zxnzsknjfx] .metric-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-zxnzsknjfx] .metric-icon-primary {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

[b-zxnzsknjfx] .metric-icon-success {
    background: var(--success-bg);
    color: var(--success-color);
}

[b-zxnzsknjfx] .metric-icon-error {
    background: var(--error-bg);
    color: var(--error-color);
}

[b-zxnzsknjfx] .metric-icon-warning {
    background: var(--warning-bg);
    color: var(--warning-color);
}

[b-zxnzsknjfx] .metric-icon-info {
    background: var(--info-bg);
    color: var(--info-color);
}

[b-zxnzsknjfx] .metric-info {
    display: flex;
    flex-direction: column;
}

[b-zxnzsknjfx] .metric-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-zxnzsknjfx] .metric-value {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

[b-zxnzsknjfx] .metric-value-success { color: var(--success-color); }
[b-zxnzsknjfx] .metric-value-error { color: var(--error-color); }
[b-zxnzsknjfx] .metric-value-warning { color: var(--warning-color); }

[b-zxnzsknjfx] .status-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* ===== Loading State ===== */
[b-zxnzsknjfx] .noc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* ===== Main Content ===== */
[b-zxnzsknjfx] .noc-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
    min-height: 0;
}

/* ===== Section Shared ===== */
[b-zxnzsknjfx] .noc-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    animation: fadeInUp-b-zxnzsknjfx 0.4s ease-out both;
}

[b-zxnzsknjfx] .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

[b-zxnzsknjfx] .section-head-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-zxnzsknjfx] .section-head-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

[b-zxnzsknjfx] .section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-zxnzsknjfx] .noc-filter-select {
    max-width: 140px;
    min-width: 100px;
}

/* ===== DEVICE HEATMAP GRID ===== */
[b-zxnzsknjfx] .heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
    max-height: 480px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

[b-zxnzsknjfx] .heatmap-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: fadeInUp-b-zxnzsknjfx 0.3s ease-out both;
}

[b-zxnzsknjfx] .heatmap-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
}

[b-zxnzsknjfx] .heatmap-card.health-good {
    border-left: 3px solid var(--success-color);
}

[b-zxnzsknjfx] .heatmap-card.health-warning {
    border-left: 3px solid var(--warning-color);
}

[b-zxnzsknjfx] .heatmap-card.health-critical {
    border-left: 3px solid var(--error-color);
}

[b-zxnzsknjfx] .heatmap-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

[b-zxnzsknjfx] .device-name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-zxnzsknjfx] .device-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

[b-zxnzsknjfx] .device-status-dot.large {
    width: 12px;
    height: 12px;
}

[b-zxnzsknjfx] .dot-online {
    background: var(--success-color);
    box-shadow: 0 0 6px var(--success-color-40);
}

[b-zxnzsknjfx] .dot-degraded {
    background: var(--warning-color);
    animation: pulse-dot-b-zxnzsknjfx 1.5s ease-in-out infinite;
}

[b-zxnzsknjfx] .dot-offline {
    background: var(--error-color);
    box-shadow: 0 0 6px var(--error-color-40);
}

[b-zxnzsknjfx] .dot-unknown {
    background: var(--text-muted);
}

@keyframes pulse-dot-b-zxnzsknjfx {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

[b-zxnzsknjfx] .heatmap-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

[b-zxnzsknjfx] .heatmap-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

[b-zxnzsknjfx] .heatmap-metric-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

[b-zxnzsknjfx] .heatmap-metric-value {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
}

[b-zxnzsknjfx] .latency-good { color: var(--success-color); }
[b-zxnzsknjfx] .latency-warning { color: var(--warning-color); }
[b-zxnzsknjfx] .latency-critical { color: var(--error-color); }
[b-zxnzsknjfx] .latency-unknown { color: var(--text-muted); }

/* Heatmap Bars */
[b-zxnzsknjfx] .heatmap-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-zxnzsknjfx] .heatmap-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

[b-zxnzsknjfx] .bar-label {
    font-size: 0.625rem;
    color: var(--text-muted);
    width: 28px;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

[b-zxnzsknjfx] .bar-track {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[b-zxnzsknjfx] .bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

[b-zxnzsknjfx] .bar-good { background: var(--success-color); }
[b-zxnzsknjfx] .bar-warning { background: var(--warning-color); }
[b-zxnzsknjfx] .bar-critical { background: var(--error-color); }
[b-zxnzsknjfx] .bar-unknown { background: var(--text-muted); }

[b-zxnzsknjfx] .bar-value {
    font-size: 0.625rem;
    color: var(--text-secondary);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

/* ===== BOTTOM ROW ===== */
[b-zxnzsknjfx] .noc-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    min-height: 0;
}

/* ===== BANDWIDTH SECTION ===== */
[b-zxnzsknjfx] .bandwidth-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

[b-zxnzsknjfx] .bandwidth-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-subtle);
}

[b-zxnzsknjfx] .bandwidth-item:last-child {
    border-bottom: none;
}

[b-zxnzsknjfx] .bandwidth-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-zxnzsknjfx] .bandwidth-name {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-zxnzsknjfx] .bandwidth-rates {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}

[b-zxnzsknjfx] .rate-tx { color: var(--info-color); }
[b-zxnzsknjfx] .rate-rx { color: var(--success-color); }

[b-zxnzsknjfx] .bandwidth-bar-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-zxnzsknjfx] .bandwidth-bar {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[b-zxnzsknjfx] .bandwidth-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

[b-zxnzsknjfx] .bandwidth-bar-fill.util-good { background: var(--success-color); }
[b-zxnzsknjfx] .bandwidth-bar-fill.util-warning { background: var(--warning-color); }
[b-zxnzsknjfx] .bandwidth-bar-fill.util-critical { background: var(--error-color); }

[b-zxnzsknjfx] .bandwidth-percent {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    min-width: 32px;
    text-align: right;
}

[b-zxnzsknjfx] .util-good { color: var(--success-color); }
[b-zxnzsknjfx] .util-warning { color: var(--warning-color); }
[b-zxnzsknjfx] .util-critical { color: var(--error-color); }

/* ===== ALERT FEED ===== */
[b-zxnzsknjfx] .alert-feed {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-zxnzsknjfx] .alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

[b-zxnzsknjfx] .alert-item:hover {
    background: var(--bg-hover);
}

[b-zxnzsknjfx] .alert-icon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-zxnzsknjfx] .alert-icon-wrapper.severity-error {
    background: var(--error-bg);
    color: var(--error-color);
}

[b-zxnzsknjfx] .alert-icon-wrapper.severity-warning {
    background: var(--warning-bg);
    color: var(--warning-color);
}

[b-zxnzsknjfx] .alert-icon-wrapper.severity-success {
    background: var(--success-bg);
    color: var(--success-color);
}

[b-zxnzsknjfx] .alert-icon-wrapper.severity-info {
    background: var(--info-bg);
    color: var(--info-color);
}

[b-zxnzsknjfx] .alert-content {
    flex: 1;
    min-width: 0;
}

[b-zxnzsknjfx] .alert-description {
    font-size: var(--text-xs);
    color: var(--text-primary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-zxnzsknjfx] .alert-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: 2px;
    flex-wrap: wrap;
}

[b-zxnzsknjfx] .alert-device {
    font-size: var(--text-xs);
    color: var(--accent-color);
    font-weight: var(--font-medium);
}

[b-zxnzsknjfx] .alert-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

[b-zxnzsknjfx] .alert-active-chip {
    margin: 0;
}

/* ===== Empty States ===== */
[b-zxnzsknjfx] .noc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    grid-column: 1 / -1;
}

[b-zxnzsknjfx] .noc-empty-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md);
}

/* ===== DEVICE DETAIL DRAWER ===== */
[b-zxnzsknjfx] .noc-detail-drawer {
    background: var(--bg-primary) !important;
}

[b-zxnzsknjfx] .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

[b-zxnzsknjfx] .drawer-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-zxnzsknjfx] .drawer-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    overflow-y: auto;
}

[b-zxnzsknjfx] .drawer-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

[b-zxnzsknjfx] .drawer-section-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-zxnzsknjfx] .drawer-info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

[b-zxnzsknjfx] .drawer-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-subtle);
}

[b-zxnzsknjfx] .drawer-info-row:last-child {
    border-bottom: none;
}

[b-zxnzsknjfx] .info-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

[b-zxnzsknjfx] .info-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

[b-zxnzsknjfx] .info-value.mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Drawer Events */
[b-zxnzsknjfx] .drawer-event {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-subtle);
}

[b-zxnzsknjfx] .drawer-event:last-child {
    border-bottom: none;
}

[b-zxnzsknjfx] .drawer-event.severity-error { color: var(--error-color); }
[b-zxnzsknjfx] .drawer-event.severity-warning { color: var(--warning-color); }
[b-zxnzsknjfx] .drawer-event.severity-success { color: var(--success-color); }
[b-zxnzsknjfx] .drawer-event.severity-info { color: var(--info-color); }

[b-zxnzsknjfx] .drawer-event-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--text-primary);
}

[b-zxnzsknjfx] .drawer-event-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    [b-zxnzsknjfx] .noc-status-bar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-zxnzsknjfx] .status-metrics {
        gap: var(--space-sm);
        justify-content: space-between;
    }

    [b-zxnzsknjfx] .status-controls {
        justify-content: flex-end;
    }

    [b-zxnzsknjfx] .noc-bottom-row {
        grid-template-columns: 1fr;
    }

    [b-zxnzsknjfx] .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-zxnzsknjfx] .section-head-right {
        width: 100%;
    }

    [b-zxnzsknjfx] .noc-filter-select {
        flex: 1;
        min-width: 0;
    }

    [b-zxnzsknjfx] .heatmap-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 640px) {
    [b-zxnzsknjfx] .noc-dashboard {
        padding: var(--space-sm);
    }

    [b-zxnzsknjfx] .status-metric {
        flex: 1;
        min-width: 80px;
    }

    [b-zxnzsknjfx] .heatmap-grid {
        grid-template-columns: 1fr 1fr;
        max-height: 360px;
    }

    [b-zxnzsknjfx] .metric-value {
        font-size: var(--text-base);
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    [b-zxnzsknjfx] .heatmap-card,
    [b-zxnzsknjfx] .noc-section,
    [b-zxnzsknjfx] .animate-panel-enter {
        animation: none !important;
    }
}
/* /Features/Admin/Components/NetworkMonitoring/SlaDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SLA Dashboard - Glassmorphism Dark Theme
   Uses CSS variables from ayva-theme.css exclusively
   ═══════════════════════════════════════════════════════════════ */

.sla-dashboard[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    animation: fadeInUp-b-aczzmsto7b 0.4s ease-out;
}

/* Header */
.sla-header[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.sla-title-row[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

[b-aczzmsto7b] .sla-title-icon {
    font-size: var(--text-3xl) !important;
    color: var(--accent-color);
}

.sla-title[b-aczzmsto7b] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.sla-subtitle[b-aczzmsto7b] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

[b-aczzmsto7b] .sla-period-toggle .mud-toggle-group {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Loading */
.sla-loading[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
}

.sla-loading-text[b-aczzmsto7b] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Stats Row */
.sla-stats-row[b-aczzmsto7b] {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    gap: var(--space-md);
    animation: fadeInUp-b-aczzmsto7b 0.4s ease-out;
}

.sla-stat-card[b-aczzmsto7b] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: all var(--transition-fast);
}

.sla-stat-card:hover[b-aczzmsto7b] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.sla-stat-hero[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.stat-alert[b-aczzmsto7b] {
    border-color: var(--error-color);
    background: var(--error-bg);
}

/* Gauge Ring */
.sla-gauge-ring[b-aczzmsto7b] {
    position: relative;
    width: 120px;
    height: 120px;
}

.gauge-svg[b-aczzmsto7b] {
    width: 100%;
    height: 100%;
}

.gauge-track[b-aczzmsto7b] {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}

.gauge-fill[b-aczzmsto7b] {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray var(--transition-normal);
}

.gauge-fill.sla-good[b-aczzmsto7b] {
    stroke: var(--success-color);
}

.gauge-fill.sla-warn[b-aczzmsto7b] {
    stroke: var(--warning-color);
}

.gauge-fill.sla-bad[b-aczzmsto7b] {
    stroke: var(--error-color);
}

.gauge-value[b-aczzmsto7b] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gauge-number[b-aczzmsto7b] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.gauge-number.sla-good[b-aczzmsto7b] {
    color: var(--success-color);
}

.gauge-number.sla-warn[b-aczzmsto7b] {
    color: var(--warning-color);
}

.gauge-number.sla-bad[b-aczzmsto7b] {
    color: var(--error-color);
}

.gauge-label[b-aczzmsto7b] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Stat Icons */
.stat-icon[b-aczzmsto7b] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-success[b-aczzmsto7b] {
    background: var(--success-bg);
    color: var(--success-color);
}

.stat-icon-error[b-aczzmsto7b] {
    background: var(--error-bg);
    color: var(--error-color);
}

.stat-icon-info[b-aczzmsto7b] {
    background: var(--info-bg);
    color: var(--info-color);
}

.stat-content[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-aczzmsto7b] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
}

.stat-value-success[b-aczzmsto7b] {
    color: var(--success-color);
}

.stat-value-error[b-aczzmsto7b] {
    color: var(--error-color);
}

.stat-value-info[b-aczzmsto7b] {
    color: var(--info-color);
}

.stat-label[b-aczzmsto7b] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.stat-detail[b-aczzmsto7b] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Sections */
.sla-section[b-aczzmsto7b] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    animation: fadeInUp-b-aczzmsto7b 0.4s ease-out both;
}

.section-header[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

[b-aczzmsto7b] .section-icon {
    color: var(--accent-color);
}

[b-aczzmsto7b] .section-icon-error {
    color: var(--error-color) !important;
}

.section-header h3[b-aczzmsto7b] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.filter-row[b-aczzmsto7b] {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}

[b-aczzmsto7b] .sla-search {
    min-width: 200px;
}

[b-aczzmsto7b] .sla-filter {
    min-width: 140px;
}

/* Data Grid */
[b-aczzmsto7b] .sla-grid .mud-table {
    background: transparent !important;
}

[b-aczzmsto7b] .sla-grid .mud-table-head .mud-table-cell {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color) !important;
}

[b-aczzmsto7b] .sla-grid .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-sm) !important;
}

[b-aczzmsto7b] .sla-row-breach {
    background: var(--error-bg) !important;
}

[b-aczzmsto7b] .sla-row-ok:hover {
    background: var(--bg-hover) !important;
}

.uptime-cell[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-aczzmsto7b] .uptime-bar {
    min-width: 60px;
    max-width: 80px;
}

.sla-good[b-aczzmsto7b] {
    color: var(--success-color);
}

.sla-warn[b-aczzmsto7b] {
    color: var(--warning-color);
}

.sla-bad[b-aczzmsto7b] {
    color: var(--error-color);
}

/* Status Badges */
.status-badge[b-aczzmsto7b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.status-meeting[b-aczzmsto7b] {
    background: var(--success-bg);
    color: var(--success-color);
}

.status-breach[b-aczzmsto7b] {
    background: var(--error-bg);
    color: var(--error-color);
}

.status-dot-ok[b-aczzmsto7b] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--success-color);
}

.status-dot-pulse[b-aczzmsto7b] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--error-color);
    animation: pulse-b-aczzmsto7b 1.5s ease-in-out infinite;
}

.status-text-error[b-aczzmsto7b] {
    color: var(--error-color);
    font-weight: var(--font-semibold);
}

/* Breach Section */
.sla-breach-section[b-aczzmsto7b] {
    border-color: var(--error-color);
}

.breach-list[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.breach-card[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--error-bg);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.breach-card:hover[b-aczzmsto7b] {
    transform: translateX(4px);
}

.breach-info[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.breach-device[b-aczzmsto7b] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.breach-site[b-aczzmsto7b] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.breach-metrics[b-aczzmsto7b] {
    display: flex;
    gap: var(--space-lg);
    flex: 1;
    flex-wrap: wrap;
}

.breach-metric[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
}

.breach-metric-label[b-aczzmsto7b] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.breach-metric-value[b-aczzmsto7b] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.breach-date[b-aczzmsto7b] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Config Section */
.config-list[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.config-empty[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

[b-aczzmsto7b] .config-empty-icon {
    color: var(--info-color);
}

.config-card[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.config-card:hover[b-aczzmsto7b] {
    border-color: var(--accent-color);
}

.config-scope[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 160px;
}

.config-target-name[b-aczzmsto7b] {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.config-targets[b-aczzmsto7b] {
    display: flex;
    gap: var(--space-lg);
    flex: 1;
    flex-wrap: wrap;
}

.config-target[b-aczzmsto7b] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.config-target strong[b-aczzmsto7b] {
    color: var(--text-primary);
}

.config-actions[b-aczzmsto7b] {
    display: flex;
    gap: var(--space-xs);
}

/* Config Form */
.config-form[b-aczzmsto7b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

/* Dialog */
.dialog-title[b-aczzmsto7b] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
}

/* Animations */
@keyframes fadeInUp-b-aczzmsto7b {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-aczzmsto7b {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Responsive */
@media (max-width: 768px) {
    .sla-stats-row[b-aczzmsto7b] {
        grid-template-columns: 1fr 1fr;
    }

    .sla-header[b-aczzmsto7b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .breach-card[b-aczzmsto7b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .breach-info[b-aczzmsto7b] {
        min-width: auto;
    }

    .filter-row[b-aczzmsto7b] {
        width: 100%;
    }

    [b-aczzmsto7b] .sla-search,
    [b-aczzmsto7b] .sla-filter {
        min-width: auto;
        flex: 1;
    }

    .sla-section[b-aczzmsto7b] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    .sla-dashboard[b-aczzmsto7b] {
        padding: var(--space-md);
    }

    .sla-stats-row[b-aczzmsto7b] {
        grid-template-columns: 1fr;
    }

    .sla-stat-hero[b-aczzmsto7b] {
        justify-content: center;
    }

    .config-card[b-aczzmsto7b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .config-scope[b-aczzmsto7b] {
        min-width: auto;
    }

    .breach-metrics[b-aczzmsto7b] {
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sla-dashboard[b-aczzmsto7b],
    .sla-section[b-aczzmsto7b],
    .sla-stat-card[b-aczzmsto7b],
    .sla-stats-row[b-aczzmsto7b],
    .breach-card[b-aczzmsto7b],
    .config-card[b-aczzmsto7b],
    .gauge-fill[b-aczzmsto7b],
    .status-dot-pulse[b-aczzmsto7b] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Features/Admin/Components/NeuralInterface/NeuralCommandCenter.razor.rz.scp.css */
/* ==========================================================================
   NEURAL COMMAND CENTER - Main Layout
   ========================================================================== */

.neural-command-center[b-wfdrtsvvzc] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-base);
    position: relative;
    outline: none;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.neural-sidebar[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    background: var(--neural-panel-bg);
    border-right: 1px solid var(--neural-panel-border);
    position: relative;
    transition: width var(--transition-smooth);
    min-width: 0;
    overflow: hidden;
}

.neural-sidebar.collapsed[b-wfdrtsvvzc] {
    width: var(--neural-sidebar-width-collapsed) !important;
}

.sidebar-content[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: var(--space-md);
    gap: var(--space-md);
}

/* Sidebar Search */
.sidebar-search[b-wfdrtsvvzc] {
    flex-shrink: 0;
}

.sidebar-search[b-wfdrtsvvzc]  .mud-input-outlined {
    background: var(--bg-secondary) !important;
}

.sidebar-search[b-wfdrtsvvzc]  .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

.search-input[b-wfdrtsvvzc]  input {
    font-size: var(--text-sm) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

/* New Chat Button */
.new-chat-btn[b-wfdrtsvvzc] {
    flex-shrink: 0;
    justify-content: flex-start !important;
    text-transform: none !important;
    font-weight: var(--font-medium) !important;
    position: relative;
}

.new-chat-btn .shortcut-hint[b-wfdrtsvvzc] {
    position: absolute;
    right: var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0.7;
}

/* Conversation Explorer */
.conversation-explorer[b-wfdrtsvvzc] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Explorer Sections */
.explorer-section[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
}

.section-header[b-wfdrtsvvzc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    user-select: none;
}

.section-header:hover[b-wfdrtsvvzc] {
    background: var(--bg-hover);
}

.section-header .expand-icon[b-wfdrtsvvzc] {
    margin-left: auto;
    opacity: 0.5;
}

.section-items[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--space-xs);
}

/* Sidebar Toggle */
.sidebar-toggle[b-wfdrtsvvzc] {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}

.sidebar-toggle:hover[b-wfdrtsvvzc] {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

/* ==========================================================================
   MAIN WORKSPACE
   ========================================================================== */

.neural-workspace[b-wfdrtsvvzc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.workspace-tabs[b-wfdrtsvvzc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.workspace-tabs[b-wfdrtsvvzc]  .mud-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.workspace-tabs[b-wfdrtsvvzc]  .mud-tabs-header {
    background: var(--neural-panel-bg);
    border-bottom: 1px solid var(--neural-panel-border);
    flex-shrink: 0;
}

.workspace-tabs[b-wfdrtsvvzc]  .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.workspace-tabs[b-wfdrtsvvzc]  .mud-tab-panel {
    height: 100%;
    overflow: hidden;
}

.workspace-tab-panel[b-wfdrtsvvzc] {
    height: 100%;
    padding: 0;
    overflow: hidden;
}

/* ==========================================================================
   INSPECTOR PANEL
   ========================================================================== */

.neural-inspector[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    background: var(--neural-panel-bg);
    border-left: 1px solid var(--neural-panel-border);
    position: relative;
    transition: width var(--transition-smooth);
    min-width: 0;
    overflow: hidden;
}

.neural-inspector.collapsed[b-wfdrtsvvzc] {
    width: var(--neural-inspector-width-collapsed) !important;
}

.inspector-content[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md);
    gap: var(--space-md);
}

/* Inspector Sections */
.inspector-section[b-wfdrtsvvzc] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.inspector-section-header[b-wfdrtsvvzc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inspector-section-content[b-wfdrtsvvzc] {
    padding: var(--space-md);
}

/* Context Items */
.context-item[b-wfdrtsvvzc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
}

.context-label[b-wfdrtsvvzc] {
    color: var(--text-secondary);
}

.context-value[b-wfdrtsvvzc] {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.no-context[b-wfdrtsvvzc] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-md);
}

/* Model Info */
.model-info[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.model-name[b-wfdrtsvvzc] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.model-provider[b-wfdrtsvvzc] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
}

/* Metric Grid */
.metric-grid[b-wfdrtsvvzc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.metric-item[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.metric-value[b-wfdrtsvvzc] {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--accent-color);
}

.metric-label[b-wfdrtsvvzc] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Budget Progress */
.budget-progress[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.budget-labels[b-wfdrtsvvzc] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* Inspector Toggle */
.inspector-toggle[b-wfdrtsvvzc] {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}

.inspector-toggle:hover[b-wfdrtsvvzc] {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

/* ==========================================================================
   PANEL RESIZERS
   ========================================================================== */

.panel-resizer[b-wfdrtsvvzc] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--neural-resizer-width);
    cursor: col-resize;
    background: transparent;
    z-index: 5;
    transition: background var(--transition-fast);
}

.panel-resizer:hover[b-wfdrtsvvzc],
.panel-resizer:active[b-wfdrtsvvzc] {
    background: var(--accent-color);
}

.sidebar-resizer[b-wfdrtsvvzc] {
    right: 0;
}

.inspector-resizer[b-wfdrtsvvzc] {
    left: 0;
}

/* ==========================================================================
   STATUS BAR
   ========================================================================== */

/* Neural statusbar - primary styles live in mudblazor-overrides.css (global)
   because this element is a second root node and Blazor CSS isolation
   may not apply the scope attribute reliably. Only non-critical
   overrides and latency-dot colors remain here as scoped fallbacks. */

.status-item.processing[b-wfdrtsvvzc] {
    color: var(--info-color);
}

.conversation-title[b-wfdrtsvvzc] {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    overflow: hidden;
    text-overflow: ellipsis;
}

.latency-dot[b-wfdrtsvvzc] {
    border-radius: 50%;
    background: var(--success-color);
}

.latency-dot.connected[b-wfdrtsvvzc] {
    background: var(--success-color);
}

.latency-dot.slow[b-wfdrtsvvzc] {
    background: var(--warning-color);
}

.latency-dot.disconnected[b-wfdrtsvvzc] {
    background: var(--error-color);
}

/* ==========================================================================
   KEYBOARD SHORTCUTS DIALOG
   ========================================================================== */

.shortcuts-grid[b-wfdrtsvvzc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.shortcut-row[b-wfdrtsvvzc] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.shortcut-row:last-child[b-wfdrtsvvzc] {
    border-bottom: none;
}

.shortcut-row kbd[b-wfdrtsvvzc] {
    min-width: 100px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-color);
    text-align: center;
}

.shortcut-row span[b-wfdrtsvvzc] {
    color: var(--text-secondary);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .neural-sidebar:not(.collapsed)[b-wfdrtsvvzc] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        box-shadow: var(--shadow-lg);
    }

    .neural-inspector:not(.collapsed)[b-wfdrtsvvzc] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        box-shadow: var(--shadow-lg);
    }
}

/* Mobile responsive handled entirely in mudblazor-overrides.css (global) */
/* /Features/Admin/Components/NeuralInterface/Sidebar/ConversationItem.razor.rz.scp.css */
.conversation-item[b-j1rrg3thbc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.conversation-item:hover[b-j1rrg3thbc] {
    background: var(--bg-hover);
}

.conversation-item.active[b-j1rrg3thbc] {
    background: var(--bg-active);
    border-left-color: var(--accent-color);
}

.conversation-content[b-j1rrg3thbc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-title[b-j1rrg3thbc] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.status-icon[b-j1rrg3thbc] {
    flex-shrink: 0;
}

.title-text[b-j1rrg3thbc] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-meta[b-j1rrg3thbc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.timestamp[b-j1rrg3thbc] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tags[b-j1rrg3thbc] {
    display: flex;
    gap: 4px;
}

.tag[b-j1rrg3thbc] {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    color: white;
    opacity: 0.8;
}

.tag-more[b-j1rrg3thbc] {
    font-size: 10px;
    color: var(--text-muted);
}

.conversation-actions[b-j1rrg3thbc] {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.conversation-item:hover .conversation-actions[b-j1rrg3thbc] {
    opacity: 1;
}

.conversation-actions[b-j1rrg3thbc]  .mud-menu {
    min-width: auto;
}

.conversation-actions[b-j1rrg3thbc]  .mud-icon-button {
    padding: 4px;
}

.delete-action[b-j1rrg3thbc] {
    color: var(--error-color) !important;
}
/* /Features/Admin/Components/NeuralInterface/Sidebar/FolderTreeItem.razor.rz.scp.css */
.folder-tree-item[b-use73lrigx] {
    display: flex;
    flex-direction: column;
}

.folder-header[b-use73lrigx] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
}

.folder-header:hover[b-use73lrigx] {
    background: var(--bg-hover);
}

.folder-header.expanded[b-use73lrigx] {
    background: var(--bg-active);
}

.folder-name[b-use73lrigx] {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-count[b-use73lrigx] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 1px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

.expand-icon[b-use73lrigx] {
    color: var(--text-muted);
    opacity: 0.5;
}

.folder-children[b-use73lrigx] {
    margin-left: var(--space-sm);
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--space-xs);
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Analytics/AnalyticsWorkspace.razor.rz.scp.css */
.analytics-workspace[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.analytics-header[b-btw4j59lom] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.header-title h2[b-btw4j59lom] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.header-description[b-btw4j59lom] {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.header-controls[b-btw4j59lom] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.period-select[b-btw4j59lom] {
    width: 150px;
}

.loading-container[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-md);
    color: var(--text-secondary);
}

.analytics-content[b-btw4j59lom] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Summary Cards */
.summary-cards[b-btw4j59lom] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.summary-card[b-btw4j59lom] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.summary-card[b-btw4j59lom]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.summary-card.total-cost[b-btw4j59lom]::before {
    background: var(--warning-color);
}

.summary-card.total-tokens[b-btw4j59lom]::before {
    background: var(--accent-color);
}

.summary-card.total-requests[b-btw4j59lom]::before {
    background: var(--info-color);
}

.summary-card.avg-cost[b-btw4j59lom]::before {
    background: var(--secondary-accent);
}

.card-icon[b-btw4j59lom] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.card-content[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-value[b-btw4j59lom] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.card-label[b-btw4j59lom] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.card-change[b-btw4j59lom] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.card-change.increase[b-btw4j59lom] {
    background: rgba(var(--error-color-rgb), 0.2);
    color: var(--error-color);
}

.card-change.decrease[b-btw4j59lom] {
    background: rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

/* Budget Section */
.budget-section[b-btw4j59lom] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.section-header[b-btw4j59lom] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.budget-content[b-btw4j59lom] {
    padding: var(--space-lg);
}

.budget-progress[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.budget-labels[b-btw4j59lom] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.budget-thresholds[b-btw4j59lom] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.threshold[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.threshold.reached[b-btw4j59lom] {
    border-color: var(--warning-color);
    background: rgba(var(--warning-color-rgb), 0.1);
}

.threshold-label[b-btw4j59lom] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

.threshold-value[b-btw4j59lom] {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* Analytics Grid */
.analytics-grid[b-btw4j59lom] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.analytics-panel[b-btw4j59lom] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.panel-header[b-btw4j59lom] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.panel-content[b-btw4j59lom] {
    padding: var(--space-md);
}

.no-data[b-btw4j59lom] {
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-lg);
    font-size: var(--text-sm);
}

/* Cost Breakdown */
.cost-breakdown[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.breakdown-item[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.item-header[b-btw4j59lom] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-name[b-btw4j59lom] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.item-value[b-btw4j59lom] {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--warning-color);
}

/* Token Stats */
.token-stats[b-btw4j59lom] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.token-stat[b-btw4j59lom] {
    text-align: center;
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.stat-value[b-btw4j59lom] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
    color: var(--accent-color);
}

.stat-label[b-btw4j59lom] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.stat-cost[b-btw4j59lom] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: var(--space-xs);
}

.token-ratio[b-btw4j59lom] {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.ratio-label[b-btw4j59lom] {
    color: var(--text-secondary);
}

.ratio-value[b-btw4j59lom] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
}

/* Tool List */
.tool-list[b-btw4j59lom] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tool-item[b-btw4j59lom] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.tool-name[b-btw4j59lom] {
    flex: 1;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.tool-cost[b-btw4j59lom] {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--warning-color);
}

/* Recent Section */
.recent-section[b-btw4j59lom] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.recent-table[b-btw4j59lom]  .mud-table {
    background: transparent !important;
}

.recent-table[b-btw4j59lom]  .mud-table-head .mud-table-cell {
    background: var(--white-overlay-02);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recent-table[b-btw4j59lom]  .mud-table-body .mud-table-cell {
    font-size: var(--text-sm);
}

/* Responsive */
@media (max-width: 1200px) {
    .summary-cards[b-btw4j59lom] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .analytics-header[b-btw4j59lom] {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }

    .summary-cards[b-btw4j59lom] {
        grid-template-columns: 1fr;
    }

    .analytics-grid[b-btw4j59lom] {
        grid-template-columns: 1fr;
    }

    .token-stats[b-btw4j59lom] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Chat/ChatWorkspace.razor.rz.scp.css */
.chat-workspace[b-7yapcu7vsc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Messages Area */
.messages-area[b-7yapcu7vsc] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}

/* Empty State */
.empty-state[b-7yapcu7vsc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    gap: var(--space-md);
}

.empty-state h3[b-7yapcu7vsc] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.empty-state p[b-7yapcu7vsc] {
    margin: 0;
    max-width: 400px;
}

.quick-actions[b-7yapcu7vsc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
}

.quick-actions[b-7yapcu7vsc]  .mud-chip {
    cursor: pointer;
}

/* Messages List */
.messages-list[b-7yapcu7vsc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Message Bubble Base */
.message-bubble[b-7yapcu7vsc] {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: fadeInUp-b-7yapcu7vsc 0.3s ease-out;
}

.message-bubble.assistant[b-7yapcu7vsc] {
    align-self: flex-start;
}

.message-bubble.streaming .message-content[b-7yapcu7vsc] {
    border: 1px solid var(--accent-color);
}

/* Thinking Indicator */
.message-bubble.thinking[b-7yapcu7vsc] {
    max-width: auto;
}

.thinking-indicator[b-7yapcu7vsc] {
    display: flex;
    gap: 4px;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.thinking-indicator .dot[b-7yapcu7vsc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: dotPulse-b-7yapcu7vsc 1.4s ease-in-out infinite;
}

.thinking-indicator .dot:nth-child(2)[b-7yapcu7vsc] {
    animation-delay: 0.2s;
}

.thinking-indicator .dot:nth-child(3)[b-7yapcu7vsc] {
    animation-delay: 0.4s;
}

@keyframes dotPulse-b-7yapcu7vsc {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Cursor Blink */
.cursor-blink[b-7yapcu7vsc] {
    animation: blink-b-7yapcu7vsc 1s step-end infinite;
    color: var(--accent-color);
}

@keyframes blink-b-7yapcu7vsc {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Composer Area */
.composer-area[b-7yapcu7vsc] {
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--neural-panel-bg);
    border-top: 1px solid var(--neural-panel-border);
}

@keyframes fadeInUp-b-7yapcu7vsc {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Chat/MessageBubble.razor.rz.scp.css */
.message-bubble[b-4o7oyhne87] {
    position: relative;
    max-width: 85%;
    animation: fadeInUp-b-4o7oyhne87 0.3s ease-out;
}

.message-bubble.user[b-4o7oyhne87] {
    align-self: flex-end;
}

.message-bubble.assistant[b-4o7oyhne87],
.message-bubble.system[b-4o7oyhne87] {
    align-self: flex-start;
}

.message-bubble.streaming .content-text[b-4o7oyhne87] {
    position: relative;
}

/* Cursor Blink Animation */
.cursor-blink[b-4o7oyhne87] {
    animation: blink-b-4o7oyhne87 1s infinite;
    color: var(--accent-color);
    font-weight: bold;
}

@keyframes blink-b-4o7oyhne87 {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes fadeInUp-b-4o7oyhne87 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Message Header */
.message-header[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.avatar[b-4o7oyhne87] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.avatar.user[b-4o7oyhne87] {
    background: var(--accent-color);
    color: white;
}

.avatar.assistant[b-4o7oyhne87] {
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-accent));
    color: white;
}

.avatar.system[b-4o7oyhne87] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.role-label[b-4o7oyhne87] {
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.model-badge[b-4o7oyhne87] {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-muted);
}

.timestamp[b-4o7oyhne87] {
    margin-left: auto;
}

/* Message Content */
.message-content[b-4o7oyhne87] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
}

.message-bubble.user .message-content[b-4o7oyhne87] {
    background: var(--message-user-bg);
    border-color: transparent;
    color: white;
}

.message-bubble.assistant .message-content[b-4o7oyhne87] {
    background: var(--message-assistant-bg);
}

.message-bubble.system .message-content[b-4o7oyhne87] {
    background: var(--message-system-bg);
    border-color: var(--secondary-accent);
}

.message-bubble.error .message-content[b-4o7oyhne87] {
    border-color: var(--error-color);
}

/* Error Banner */
.error-banner[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--error-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    color: var(--error-text);
    font-size: var(--text-sm);
}

/* Content Text - Markdown Rendering */
.content-text[b-4o7oyhne87] {
    font-size: var(--text-sm);
    line-height: 1.7;
    word-wrap: break-word;
}

.content-text[b-4o7oyhne87]  p {
    margin: 0 0 var(--space-sm) 0;
}

.content-text[b-4o7oyhne87]  p:last-child {
    margin-bottom: 0;
}

.content-text[b-4o7oyhne87]  h1,
.content-text[b-4o7oyhne87]  h2,
.content-text[b-4o7oyhne87]  h3,
.content-text[b-4o7oyhne87]  h4,
.content-text[b-4o7oyhne87]  h5,
.content-text[b-4o7oyhne87]  h6 {
    margin: var(--space-md) 0 var(--space-sm) 0;
    font-weight: var(--font-semibold);
    line-height: 1.4;
}

.content-text[b-4o7oyhne87]  h1 { font-size: 1.5em; }
.content-text[b-4o7oyhne87]  h2 { font-size: 1.3em; }
.content-text[b-4o7oyhne87]  h3 { font-size: 1.15em; }
.content-text[b-4o7oyhne87]  h4 { font-size: 1.05em; }

.content-text[b-4o7oyhne87]  ul,
.content-text[b-4o7oyhne87]  ol {
    margin: var(--space-sm) 0;
    padding-left: var(--space-lg);
}

.content-text[b-4o7oyhne87]  li {
    margin: var(--space-xs) 0;
}

.content-text[b-4o7oyhne87]  .inline-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--black-overlay-20);
    border-radius: var(--radius-sm);
}

.message-bubble.user .content-text[b-4o7oyhne87]  .inline-code {
    background: var(--white-overlay-20);
}

.content-text[b-4o7oyhne87]  pre,
.content-text[b-4o7oyhne87]  .code-block {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: pre;
    line-height: 1.5;
}

.content-text[b-4o7oyhne87]  pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.content-text[b-4o7oyhne87]  .md-blockquote {
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--text-secondary);
    font-style: italic;
}

.content-text[b-4o7oyhne87]  .md-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
}

.content-text[b-4o7oyhne87]  .md-table th,
.content-text[b-4o7oyhne87]  .md-table td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    text-align: left;
}

.content-text[b-4o7oyhne87]  .md-table th {
    background: var(--bg-secondary);
    font-weight: var(--font-semibold);
}

.content-text[b-4o7oyhne87]  a {
    color: var(--accent-color);
    text-decoration: none;
}

.content-text[b-4o7oyhne87]  a:hover {
    text-decoration: underline;
}

/* Task Lists */
.content-text[b-4o7oyhne87]  .task-checkbox {
    margin-right: var(--space-xs);
    vertical-align: middle;
}

/* Tool Executions Container */
.tool-executions[b-4o7oyhne87] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Tool Execution */
.tool-execution[b-4o7oyhne87] {
    background: var(--message-tool-bg);
    border: 1px solid var(--message-tool-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tool-execution.pending[b-4o7oyhne87] {
    border-color: var(--warning-color);
    border-style: dashed;
}

.tool-execution.running[b-4o7oyhne87] {
    border-color: var(--info-color);
    animation: pulseGlow-b-4o7oyhne87 2s infinite;
}

@keyframes pulseGlow-b-4o7oyhne87 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--info-color-rgb), 0.4); }
    50% { box-shadow: 0 0 8px 2px rgba(var(--info-color-rgb), 0.4); }
}

.tool-execution.completed[b-4o7oyhne87] {
    border-color: var(--success-color);
}

.tool-execution.failed[b-4o7oyhne87] {
    border-color: var(--error-color);
}

.tool-header[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.tool-header:hover[b-4o7oyhne87] {
    background: var(--white-overlay-05);
}

.tool-info[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tool-spinner[b-4o7oyhne87] {
    width: 16px !important;
    height: 16px !important;
}

.tool-name[b-4o7oyhne87] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.tool-status[b-4o7oyhne87] {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}

.tool-execution.completed .tool-status[b-4o7oyhne87] {
    background: rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

.tool-execution.failed .tool-status[b-4o7oyhne87] {
    background: rgba(var(--error-color-rgb), 0.2);
    color: var(--error-color);
}

.tool-meta[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.tool-meta .duration[b-4o7oyhne87],
.tool-meta .cost[b-4o7oyhne87] {
    font-family: var(--font-mono);
}

.tool-meta .cost[b-4o7oyhne87] {
    color: var(--warning-color);
}

.expand-icon[b-4o7oyhne87] {
    transition: transform var(--transition-fast);
}

.tool-details[b-4o7oyhne87] {
    padding: var(--space-md);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--black-overlay-20);
}

.tool-section .section-header[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.tool-section .section-label[b-4o7oyhne87] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tool-section .code-block[b-4o7oyhne87] {
    margin: 0;
    padding: var(--space-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
}

.tool-section .code-block.json[b-4o7oyhne87] {
    color: var(--info-color);
}

.tool-section.error .code-block[b-4o7oyhne87] {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

/* Message Footer */
.message-footer[b-4o7oyhne87] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
}

.message-footer .stat[b-4o7oyhne87] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.message-footer .stat.cost[b-4o7oyhne87] {
    color: var(--warning-color);
}

/* Message Actions */
.message-actions[b-4o7oyhne87] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2px;
    box-shadow: var(--shadow-md);
}

.message-bubble:hover .message-actions[b-4o7oyhne87] {
    opacity: 1;
}

.message-actions[b-4o7oyhne87]  .mud-icon-button {
    padding: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .message-bubble[b-4o7oyhne87] {
        max-width: 95%;
    }

    .message-actions[b-4o7oyhne87] {
        position: static;
        opacity: 1;
        margin-top: var(--space-sm);
        justify-content: flex-end;
        background: transparent;
        border: none;
        box-shadow: none;
    }
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Chat/SmartComposer.razor.rz.scp.css */
.smart-composer[b-vsqd2io7fj] {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-fast);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.smart-composer:focus-within[b-vsqd2io7fj] {
    border-color: var(--accent-color);
}

.smart-composer.processing[b-vsqd2io7fj] {
    opacity: 0.8;
}

/* Attachments Row */
.attachments-row[b-vsqd2io7fj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.attachment-chip[b-vsqd2io7fj] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
}

.attachment-name[b-vsqd2io7fj] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Input Area */
.composer-input-area[b-vsqd2io7fj] {
    position: relative;
}

.input-wrapper[b-vsqd2io7fj] {
    position: relative;
}

.composer-textarea[b-vsqd2io7fj] {
    width: 100%;
    min-height: var(--neural-composer-min-height);
    max-height: var(--neural-composer-max-height);
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
}

.composer-textarea[b-vsqd2io7fj]::placeholder {
    color: var(--text-muted);
}

.composer-textarea:disabled[b-vsqd2io7fj] {
    cursor: not-allowed;
}

/* Preview Overlay */
.preview-overlay[b-vsqd2io7fj] {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

.preview-header[b-vsqd2io7fj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
}

.preview-content[b-vsqd2io7fj] {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    overflow-y: auto;
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Toolbar */
.composer-toolbar[b-vsqd2io7fj] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.toolbar-left[b-vsqd2io7fj],
.toolbar-right[b-vsqd2io7fj] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.toolbar-center[b-vsqd2io7fj] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mention-chips[b-vsqd2io7fj] {
    display: flex;
    gap: var(--space-xs);
}

.char-count[b-vsqd2io7fj] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.shortcut-hint[b-vsqd2io7fj] {
    font-size: 10px;
    color: var(--white-overlay-50);
    margin-left: var(--space-sm);
}

/* Mentions Dropdown */
.mentions-dropdown[b-vsqd2io7fj] {
    position: absolute;
    bottom: 100%;
    left: var(--space-md);
    right: var(--space-md);
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.mention-option[b-vsqd2io7fj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mention-option:hover[b-vsqd2io7fj] {
    background: var(--bg-hover);
}

.mention-name[b-vsqd2io7fj] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent-color);
}

/* Send button styling */
.toolbar-right[b-vsqd2io7fj]  .mud-button-filled-primary {
    padding: var(--space-sm) var(--space-lg);
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Operations/OperationsWorkspace.razor.rz.scp.css */
.operations-workspace[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */
.operations-header[b-8mqm9ljvn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: var(--space-md);
}

.header-title h2[b-8mqm9ljvn1] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.header-title .header-description[b-8mqm9ljvn1] {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.header-controls[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.search-field[b-8mqm9ljvn1] {
    width: 200px;
}

/* Content */
.operations-content[b-8mqm9ljvn1] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.loading-container[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-md);
    color: var(--text-secondary);
}

/* Logs View */
.logs-view[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Live Banner */
.live-banner[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.live-banner.connected[b-8mqm9ljvn1] {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.1), rgba(var(--success-color-rgb), 0.05));
}

.live-banner.disconnected[b-8mqm9ljvn1] {
    background: linear-gradient(135deg, rgba(var(--error-color-rgb), 0.1), rgba(var(--error-color-rgb), 0.05));
}

.live-indicator[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.pulse-dot[b-8mqm9ljvn1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    animation: pulse-b-8mqm9ljvn1 1.5s infinite;
}

.disconnected .pulse-dot[b-8mqm9ljvn1] {
    background: var(--error-color);
    animation: none;
}

@keyframes pulse-b-8mqm9ljvn1 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.live-stats[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex: 1;
}

.live-stats .stat[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.live-stats .stat.success[b-8mqm9ljvn1] {
    color: var(--success-color);
}

.live-controls[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Log Filters */
.log-filters[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.tool-filter[b-8mqm9ljvn1] {
    width: 180px;
}

/* Log Stream */
.log-stream[b-8mqm9ljvn1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.log-entry[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.log-entry:hover[b-8mqm9ljvn1] {
    background: var(--white-overlay-05);
}

.log-entry.selected[b-8mqm9ljvn1] {
    background: rgba(var(--accent-color-rgb), 0.1);
    border-left-color: var(--accent-color);
}

.log-entry.completed[b-8mqm9ljvn1] {
    border-left-color: var(--success-color);
}

.log-entry.failed[b-8mqm9ljvn1] {
    border-left-color: var(--error-color);
}

.log-entry.blocked[b-8mqm9ljvn1] {
    border-left-color: var(--warning-color);
}

.log-entry.timeout[b-8mqm9ljvn1] {
    border-left-color: var(--secondary-accent);
}

.log-entry.running[b-8mqm9ljvn1] {
    border-left-color: var(--accent-color);
    animation: runningPulse-b-8mqm9ljvn1 2s infinite;
}

@keyframes runningPulse-b-8mqm9ljvn1 {
    0%, 100% { background: var(--bg-card); }
    50% { background: rgba(var(--accent-color-rgb), 0.05); }
}

.log-timestamp[b-8mqm9ljvn1] {
    width: 100px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.log-status[b-8mqm9ljvn1] {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-tool[b-8mqm9ljvn1] {
    flex: 1;
    min-width: 0;
}

.log-tool code[b-8mqm9ljvn1] {
    color: var(--accent-color);
}

.log-duration[b-8mqm9ljvn1] {
    width: 80px;
    text-align: right;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.log-channel[b-8mqm9ljvn1] {
    width: 80px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.log-identity[b-8mqm9ljvn1] {
    width: 150px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.log-error[b-8mqm9ljvn1] {
    flex: 1;
    color: var(--error-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-logs[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    gap: var(--space-md);
}

/* Log Detail Panel */
.log-detail-panel[b-8mqm9ljvn1] {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    box-shadow: -4px 0 16px var(--black-overlay-30);
}

.log-detail-panel .panel-header[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.log-detail-panel .panel-header .close-btn[b-8mqm9ljvn1] {
    margin-left: auto;
}

.log-detail-panel .panel-content[b-8mqm9ljvn1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.detail-grid[b-8mqm9ljvn1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.detail-grid.compact[b-8mqm9ljvn1] {
    gap: var(--space-xs);
}

.detail-item[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.detail-item.full-width[b-8mqm9ljvn1] {
    grid-column: 1 / -1;
}

.detail-item .label[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-item code[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--accent-color);
}

.detail-expansion[b-8mqm9ljvn1] {
    margin-top: var(--space-md);
}

.detail-expansion[b-8mqm9ljvn1]  .mud-expand-panel {
    background: transparent !important;
    box-shadow: none !important;
}

.detail-code[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: var(--bg-primary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
}

.detail-code.stack-trace[b-8mqm9ljvn1] {
    max-height: 300px;
    color: var(--error-color);
}

.error-details[b-8mqm9ljvn1] {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(var(--error-color-rgb), 0.1);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--error-color);
}

.error-details .label[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--error-color);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.error-message[b-8mqm9ljvn1] {
    font-size: var(--text-sm);
    color: var(--error-color);
    margin-bottom: var(--space-sm);
}

.block-details[b-8mqm9ljvn1] {
    margin-top: var(--space-md);
}

/* Health View */
.health-view[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    overflow-y: auto;
}

.health-cards[b-8mqm9ljvn1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.health-card[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.health-card[b-8mqm9ljvn1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.health-card.healthy[b-8mqm9ljvn1]::before {
    background: var(--success-color);
}

.health-card.degraded[b-8mqm9ljvn1]::before {
    background: var(--warning-color);
}

.health-card.unhealthy[b-8mqm9ljvn1]::before {
    background: var(--error-color);
}

.health-card .card-header[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.health-card .card-value[b-8mqm9ljvn1] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.health-card.healthy .card-value[b-8mqm9ljvn1] {
    color: var(--success-color);
}

.health-card.degraded .card-value[b-8mqm9ljvn1] {
    color: var(--warning-color);
}

.health-card.unhealthy .card-value[b-8mqm9ljvn1] {
    color: var(--error-color);
}

.health-card .card-details[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Metrics Section */
.metrics-section[b-8mqm9ljvn1],
.breakdown-section[b-8mqm9ljvn1] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.section-header[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.metrics-grid[b-8mqm9ljvn1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding: var(--space-md);
}

.metric-card[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.metric-label[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.metric-value[b-8mqm9ljvn1] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.metric-value.error[b-8mqm9ljvn1] {
    color: var(--error-color);
}

.metric-value.warning[b-8mqm9ljvn1] {
    color: var(--warning-color);
}

/* Breakdown Section */
.breakdown-list[b-8mqm9ljvn1] {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.breakdown-item[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.breakdown-name[b-8mqm9ljvn1] {
    width: 200px;
    flex-shrink: 0;
}

.breakdown-name code[b-8mqm9ljvn1] {
    font-size: var(--text-sm);
    color: var(--accent-color);
}

.breakdown-bar[b-8mqm9ljvn1] {
    flex: 1;
    height: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-fill[b-8mqm9ljvn1] {
    height: 100%;
    background: var(--accent-color);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.breakdown-count[b-8mqm9ljvn1] {
    width: 60px;
    text-align: right;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.breakdown-section.errors .breakdown-name code[b-8mqm9ljvn1] {
    color: var(--error-color);
}

.no-data[b-8mqm9ljvn1] {
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Alerts View */
.alerts-view[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.alerts-header[b-8mqm9ljvn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.alert-summary[b-8mqm9ljvn1] {
    display: flex;
    gap: var(--space-lg);
}

.summary-item[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.summary-item .count[b-8mqm9ljvn1] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
}

.summary-item .label[b-8mqm9ljvn1] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.summary-item.critical .count[b-8mqm9ljvn1] {
    color: var(--error-color);
}

.summary-item.warning .count[b-8mqm9ljvn1] {
    color: var(--warning-color);
}

.summary-item.info .count[b-8mqm9ljvn1] {
    color: var(--info-color);
}

.alerts-list[b-8mqm9ljvn1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.alert-item[b-8mqm9ljvn1] {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--border-color);
}

.alert-item.critical[b-8mqm9ljvn1] {
    border-left-color: var(--error-color);
    background: rgba(var(--error-color-rgb), 0.05);
}

.alert-item.warning[b-8mqm9ljvn1] {
    border-left-color: var(--warning-color);
    background: rgba(var(--warning-color-rgb), 0.05);
}

.alert-item.info[b-8mqm9ljvn1] {
    border-left-color: var(--info-color);
    background: rgba(var(--info-color-rgb), 0.05);
}

.alert-icon[b-8mqm9ljvn1] {
    flex-shrink: 0;
}

.alert-content[b-8mqm9ljvn1] {
    flex: 1;
    min-width: 0;
}

.alert-title[b-8mqm9ljvn1] {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.alert-message[b-8mqm9ljvn1] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.alert-meta[b-8mqm9ljvn1] {
    display: flex;
    gap: var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.alert-actions[b-8mqm9ljvn1] {
    flex-shrink: 0;
}

.no-alerts[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
    gap: var(--space-sm);
}

.no-alerts .subtext[b-8mqm9ljvn1] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Audit View */
.audit-view[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.audit-filters[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.date-picker[b-8mqm9ljvn1] {
    width: 280px;
}

.channel-filter[b-8mqm9ljvn1] {
    width: 150px;
}

.audit-table[b-8mqm9ljvn1] {
    flex: 1;
    overflow: hidden;
}

.audit-table[b-8mqm9ljvn1]  .mud-table {
    background: transparent !important;
}

.audit-table[b-8mqm9ljvn1]  .mud-table-head .mud-table-cell {
    background: var(--white-overlay-02);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.audit-table[b-8mqm9ljvn1]  .mud-table-body .mud-table-cell {
    font-size: var(--text-sm);
}

.audit-table .timestamp[b-8mqm9ljvn1] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.audit-table .identity[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Dialog */
.dialog-title[b-8mqm9ljvn1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.audit-detail-content[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.code-section[b-8mqm9ljvn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.code-section .label[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

.user-agent[b-8mqm9ljvn1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    word-break: break-all;
}

/* Responsive */
@media (max-width: 1400px) {
    .health-cards[b-8mqm9ljvn1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .metrics-grid[b-8mqm9ljvn1] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .log-detail-panel[b-8mqm9ljvn1] {
        width: 350px;
    }

    .log-identity[b-8mqm9ljvn1] {
        display: none;
    }
}

@media (max-width: 768px) {
    .operations-header[b-8mqm9ljvn1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-controls[b-8mqm9ljvn1] {
        width: 100%;
        flex-wrap: wrap;
    }

    .search-field[b-8mqm9ljvn1] {
        width: 100%;
    }

    .live-banner[b-8mqm9ljvn1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-stats[b-8mqm9ljvn1] {
        flex-wrap: wrap;
    }

    .health-cards[b-8mqm9ljvn1] {
        grid-template-columns: 1fr;
    }

    .metrics-grid[b-8mqm9ljvn1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .log-stream[b-8mqm9ljvn1] {
        font-size: var(--text-xs);
    }

    .log-channel[b-8mqm9ljvn1],
    .log-duration[b-8mqm9ljvn1] {
        display: none;
    }

    .log-detail-panel[b-8mqm9ljvn1] {
        width: 100%;
        height: 50%;
        top: auto;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .audit-filters[b-8mqm9ljvn1] {
        flex-wrap: wrap;
    }

    .date-picker[b-8mqm9ljvn1] {
        width: 100%;
    }

    .breakdown-name[b-8mqm9ljvn1] {
        width: 120px;
    }
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Prompts/PromptWorkspace.razor.rz.scp.css */
.prompt-workspace[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */
.prompt-header[b-5cqtzy27th] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.header-title h2[b-5cqtzy27th] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.header-title .header-description[b-5cqtzy27th] {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Content */
.prompt-content[b-5cqtzy27th] {
    flex: 1;
    overflow: hidden;
}

.loading-container[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-md);
    color: var(--text-secondary);
}

/* Layout */
.prompt-layout[b-5cqtzy27th] {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Prompt List Panel */
.prompt-list-panel[b-5cqtzy27th] {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.panel-header[b-5cqtzy27th] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}

.count-badge[b-5cqtzy27th] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.panel-content[b-5cqtzy27th] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.search-field[b-5cqtzy27th] {
    margin-bottom: var(--space-md);
}

.prompt-items[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.prompt-item[b-5cqtzy27th] {
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.prompt-item:hover[b-5cqtzy27th] {
    border-color: var(--accent-color);
}

.prompt-item.selected[b-5cqtzy27th] {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
}

.prompt-item-header[b-5cqtzy27th] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.prompt-name[b-5cqtzy27th] {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-item-meta[b-5cqtzy27th] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.separator[b-5cqtzy27th] {
    color: var(--text-muted);
}

.prompt-item-version[b-5cqtzy27th] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.no-prompts[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    gap: var(--space-md);
}

/* Editor Panel */
.prompt-editor-panel[b-5cqtzy27th] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.no-selection[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: var(--space-md);
}

.no-selection h3[b-5cqtzy27th] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.no-selection p[b-5cqtzy27th] {
    margin: 0;
    font-size: var(--text-sm);
}

/* Prompt Metadata */
.prompt-metadata[b-5cqtzy27th] {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.metadata-row[b-5cqtzy27th] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.name-field[b-5cqtzy27th] {
    flex: 2;
}

.context-select[b-5cqtzy27th],
.audience-select[b-5cqtzy27th],
.channel-select[b-5cqtzy27th] {
    flex: 1;
    min-width: 120px;
}

.priority-field[b-5cqtzy27th] {
    width: 100px;
}

.active-switch[b-5cqtzy27th] {
    margin-left: auto;
}

/* Editor Container */
.editor-container[b-5cqtzy27th] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-toolbar[b-5cqtzy27th] {
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
}

.variable-hint[b-5cqtzy27th] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.char-count[b-5cqtzy27th] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.monaco-editor-full[b-5cqtzy27th] {
    flex: 1;
    min-height: 300px;
}

.monaco-loading[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-md);
    color: var(--text-secondary);
}

/* History Panel */
.prompt-history-panel[b-5cqtzy27th] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.history-tabs[b-5cqtzy27th]  .mud-tabs-toolbar {
    background: transparent !important;
}

.version-list[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.version-item[b-5cqtzy27th] {
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.version-item:hover[b-5cqtzy27th] {
    border-color: var(--accent-color);
}

.version-item.selected[b-5cqtzy27th] {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
}

.version-header[b-5cqtzy27th] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.version-number[b-5cqtzy27th] {
    font-weight: var(--font-semibold);
    color: var(--accent-color);
    font-family: var(--font-mono);
}

.version-date[b-5cqtzy27th] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.version-notes[b-5cqtzy27th] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: var(--space-xs) 0;
    line-height: 1.4;
}

.version-metrics[b-5cqtzy27th] {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-sm) 0;
}

.version-metrics .metric[b-5cqtzy27th] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.version-actions[b-5cqtzy27th] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
}

.no-versions[b-5cqtzy27th] {
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* A/B Tests */
.ab-tests[b-5cqtzy27th] {
    padding: var(--space-sm);
}

.ab-test-item[b-5cqtzy27th] {
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.test-header[b-5cqtzy27th] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.test-name[b-5cqtzy27th] {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.test-meta[b-5cqtzy27th] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.no-tests[b-5cqtzy27th] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    gap: var(--space-md);
}

/* Responsive */
@media (max-width: 1200px) {
    .prompt-history-panel[b-5cqtzy27th] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        box-shadow: -4px 0 16px var(--black-overlay-30);
    }
}

@media (max-width: 768px) {
    .prompt-layout[b-5cqtzy27th] {
        flex-direction: column;
    }

    .prompt-list-panel[b-5cqtzy27th] {
        width: 100%;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .prompt-history-panel[b-5cqtzy27th] {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .metadata-row[b-5cqtzy27th] {
        flex-wrap: wrap;
    }

    .name-field[b-5cqtzy27th] {
        width: 100%;
        flex: auto;
    }

    .context-select[b-5cqtzy27th],
    .audience-select[b-5cqtzy27th],
    .channel-select[b-5cqtzy27th] {
        flex: 1;
        min-width: 100px;
    }
}
/* /Features/Admin/Components/NeuralInterface/Workspace/Tools/ToolWorkspace.razor.rz.scp.css */
.tool-workspace[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */
.tool-header[b-nwgi0pcw45] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: var(--space-md);
}

.header-title h2[b-nwgi0pcw45] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.header-title .header-description[b-nwgi0pcw45] {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.header-controls[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.search-field[b-nwgi0pcw45] {
    width: 200px;
}

/* Main Content */
.tool-content[b-nwgi0pcw45] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.loading-container[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-md);
    color: var(--text-secondary);
}

/* Timeline View */
.timeline-view[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Live Execution Panel */
.live-execution-panel[b-nwgi0pcw45] {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: borderPulse-b-nwgi0pcw45 2s infinite;
}

@keyframes borderPulse-b-nwgi0pcw45 {
    0%, 100% { border-color: var(--accent-color); }
    50% { border-color: rgba(var(--accent-color-rgb), 0.4); }
}

.live-execution-panel .panel-header.live[b-nwgi0pcw45] {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.1));
    color: var(--accent-color);
}

.pulse-indicator[b-nwgi0pcw45] {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: pulse-b-nwgi0pcw45 1.5s infinite;
    margin-left: auto;
}

@keyframes pulse-b-nwgi0pcw45 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Stats Summary */
.stats-summary[b-nwgi0pcw45] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.stat-card[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.stat-icon[b-nwgi0pcw45] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--accent-color);
}

.stat-icon.success[b-nwgi0pcw45] { color: var(--success-color); }
.stat-icon.warning[b-nwgi0pcw45] { color: var(--warning-color); }
.stat-icon.info[b-nwgi0pcw45] { color: var(--info-color); }

.stat-content[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-nwgi0pcw45] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.stat-label[b-nwgi0pcw45] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Panels */
.executions-panel[b-nwgi0pcw45],
.sandbox-panel[b-nwgi0pcw45],
.live-execution-panel[b-nwgi0pcw45] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.panel-header[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--white-overlay-02);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.panel-content[b-nwgi0pcw45] {
    padding: var(--space-md);
}

.count-badge[b-nwgi0pcw45] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Execution Timeline */
.execution-timeline[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 500px;
    overflow-y: auto;
}

.execution-card[b-nwgi0pcw45] {
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-color);
    transition: all var(--transition-fast);
}

.execution-card:hover[b-nwgi0pcw45] {
    border-color: var(--accent-color);
}

.execution-card.success[b-nwgi0pcw45] { border-left-color: var(--success-color); }
.execution-card.error[b-nwgi0pcw45] { border-left-color: var(--error-color); }
.execution-card.blocked[b-nwgi0pcw45] { border-left-color: var(--warning-color); }
.execution-card.active[b-nwgi0pcw45] {
    border-left-color: var(--accent-color);
    animation: pulseGlow-b-nwgi0pcw45 2s infinite;
}

@keyframes pulseGlow-b-nwgi0pcw45 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.2); }
    50% { box-shadow: 0 0 12px 4px rgba(var(--accent-color-rgb), 0.3); }
}

.execution-header[b-nwgi0pcw45] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.tool-badge[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.execution-meta[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.duration[b-nwgi0pcw45] {
    font-family: var(--font-mono);
}

.execution-status[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.status-text[b-nwgi0pcw45] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.status-text.success[b-nwgi0pcw45] { color: var(--success-color); }
.status-text.error[b-nwgi0pcw45] { color: var(--error-color); }
.status-text.blocked[b-nwgi0pcw45] { color: var(--warning-color); }

.execution-input[b-nwgi0pcw45] {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.execution-input .label[b-nwgi0pcw45] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--space-xs);
}

.execution-input code[b-nwgi0pcw45] {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    word-break: break-all;
}

.execution-progress[b-nwgi0pcw45] {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.elapsed-time[b-nwgi0pcw45] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-align: right;
}

.execution-details[b-nwgi0pcw45] {
    margin-top: var(--space-sm);
}

.execution-details[b-nwgi0pcw45]  .mud-expand-panel {
    background: transparent !important;
    box-shadow: none !important;
}

.detail-section[b-nwgi0pcw45] {
    margin-bottom: var(--space-md);
}

.detail-label[b-nwgi0pcw45] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    display: block;
}

.detail-code[b-nwgi0pcw45] {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: var(--bg-primary);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: var(--text-secondary);
}

/* Tools View */
.tools-view[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.category-filter[b-nwgi0pcw45] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.tools-grid[b-nwgi0pcw45] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-md);
}

.tool-card[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.tool-card:hover[b-nwgi0pcw45] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.tool-card.disabled[b-nwgi0pcw45] {
    opacity: 0.6;
}

.tool-card.orphaned[b-nwgi0pcw45] {
    border-color: var(--warning-color);
    background: rgba(var(--warning-color-rgb), 0.05);
}

.tool-card-header[b-nwgi0pcw45] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.tool-icon[b-nwgi0pcw45] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--accent-color);
    flex-shrink: 0;
}

.tool-info[b-nwgi0pcw45] {
    flex: 1;
    min-width: 0;
}

.tool-info h4[b-nwgi0pcw45] {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-status[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tool-description[b-nwgi0pcw45] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-stats[b-nwgi0pcw45] {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.tool-stats .stat[b-nwgi0pcw45] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tool-actions[b-nwgi0pcw45] {
    display: flex;
    gap: var(--space-sm);
    margin-top: auto;
}

/* Sandbox View */
.sandbox-view[b-nwgi0pcw45] {
    height: 100%;
}

.sandbox-grid[b-nwgi0pcw45] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto 1fr;
    gap: var(--space-md);
    height: 100%;
    min-height: 600px;
}

.sandbox-panel.tool-select[b-nwgi0pcw45] {
    grid-column: 1;
    grid-row: 1;
}

.sandbox-panel.input-editor[b-nwgi0pcw45] {
    grid-column: 1;
    grid-row: 2;
}

.sandbox-controls[b-nwgi0pcw45] {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md);
}

.sandbox-panel.output-display[b-nwgi0pcw45] {
    grid-column: 2;
    grid-row: 1 / 3;
}

.sandbox-panel[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
}

.sandbox-panel .panel-content[b-nwgi0pcw45] {
    flex: 1;
    overflow: auto;
}

.tool-details[b-nwgi0pcw45] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.tool-details .description[b-nwgi0pcw45] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm);
}

.tool-meta[b-nwgi0pcw45] {
    display: flex;
    gap: var(--space-sm);
}

.code-input[b-nwgi0pcw45]  textarea {
    font-family: var(--font-mono) !important;
    font-size: var(--text-sm) !important;
}

.no-output[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-muted);
    gap: var(--space-md);
}

.output-code[b-nwgi0pcw45] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    height: 100%;
    overflow: auto;
}

/* No Data */
.no-data[b-nwgi0pcw45] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    gap: var(--space-md);
}

/* Responsive */
@media (max-width: 1200px) {
    .stats-summary[b-nwgi0pcw45] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sandbox-grid[b-nwgi0pcw45] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
    }

    .sandbox-panel.output-display[b-nwgi0pcw45] {
        grid-column: 1;
        grid-row: 5;
    }

    .sandbox-controls[b-nwgi0pcw45] {
        grid-row: 4;
    }
}

@media (max-width: 768px) {
    .tool-header[b-nwgi0pcw45] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-controls[b-nwgi0pcw45] {
        width: 100%;
        flex-wrap: wrap;
    }

    .search-field[b-nwgi0pcw45] {
        width: 100%;
    }

    .stats-summary[b-nwgi0pcw45] {
        grid-template-columns: 1fr;
    }

    .tools-grid[b-nwgi0pcw45] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/NotificationsPanel.razor.rz.scp.css */
/* NotificationsPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-s6vsfptsyj] .mud-grid-item {
        padding: var(--space-sm);
    }

    [b-s6vsfptsyj] .mud-paper {
        padding: var(--space-md) !important;
    }
}
/* /Features/Admin/Components/Onboarding/OnboardingPipelinePanel.razor.rz.scp.css */
/* Admin Onboarding Pipeline Panel - Scoped Styles */

.onboarding-admin[b-wz7z7a3uep] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-md);
}

/* Stats Grid */
.stats-grid[b-wz7z7a3uep] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.stat-card[b-wz7z7a3uep] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

.stat-card:hover[b-wz7z7a3uep] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.stat-icon[b-wz7z7a3uep] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.active-icon[b-wz7z7a3uep] {
    background: var(--bg-active);
    color: var(--accent-color);
}

.stat-icon.completed-icon[b-wz7z7a3uep] {
    background: var(--success-bg);
    color: var(--success-color);
}

.stat-icon.blocked-icon[b-wz7z7a3uep] {
    background: var(--error-bg);
    color: var(--error-color);
}

.stat-icon.avg-icon[b-wz7z7a3uep] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.stat-info[b-wz7z7a3uep] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-wz7z7a3uep] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label[b-wz7z7a3uep] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Pipeline Funnel */
.funnel-section[b-wz7z7a3uep] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.section-header[b-wz7z7a3uep] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.funnel-bars[b-wz7z7a3uep] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.funnel-row[b-wz7z7a3uep] {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: var(--space-md);
}

.funnel-label[b-wz7z7a3uep] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: right;
}

.funnel-bar-track[b-wz7z7a3uep] {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    height: 24px;
    overflow: hidden;
}

.funnel-bar[b-wz7z7a3uep] {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    min-width: 2px;
    transition: width var(--transition-normal);
}

.funnel-count[b-wz7z7a3uep] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-align: center;
}

/* Toolbar */
.toolbar[b-wz7z7a3uep] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.toolbar-filters[b-wz7z7a3uep] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

[b-wz7z7a3uep] .filter-select {
    min-width: 140px;
}

[b-wz7z7a3uep] .search-input {
    min-width: 200px;
}

/* Grid Section */
.grid-section[b-wz7z7a3uep] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.loading-container[b-wz7z7a3uep] {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl);
}

[b-wz7z7a3uep] .onboarding-grid {
    background: transparent !important;
}

[b-wz7z7a3uep] .onboarding-grid .mud-table-head .mud-table-cell {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-wz7z7a3uep] .onboarding-grid .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

.action-buttons[b-wz7z7a3uep] {
    display: flex;
    gap: var(--space-xs);
}

.actions-cell[b-wz7z7a3uep] {
    white-space: nowrap;
}

/* Animations */
.animate-fade-in-up[b-wz7z7a3uep] {
    animation: fadeInUp-b-wz7z7a3uep 0.5s ease-out both;
}

.animate-stagger-1[b-wz7z7a3uep] { animation-delay: 0.1s; }
.animate-stagger-2[b-wz7z7a3uep] { animation-delay: 0.2s; }
.animate-stagger-3[b-wz7z7a3uep] { animation-delay: 0.3s; }

@keyframes fadeInUp-b-wz7z7a3uep {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid[b-wz7z7a3uep] {
        grid-template-columns: repeat(2, 1fr);
    }

    .funnel-row[b-wz7z7a3uep] {
        grid-template-columns: 100px 1fr 30px;
    }

    .toolbar[b-wz7z7a3uep] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-filters[b-wz7z7a3uep] {
        flex-direction: column;
    }

    [b-wz7z7a3uep] .filter-select,
    [b-wz7z7a3uep] .search-input {
        min-width: unset;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .stats-grid[b-wz7z7a3uep] {
        grid-template-columns: 1fr;
    }

    .onboarding-admin[b-wz7z7a3uep] {
        padding: var(--space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-wz7z7a3uep], *[b-wz7z7a3uep]::before, *[b-wz7z7a3uep]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Features/Admin/Components/RBAC/EntraMappingPanel.razor.rz.scp.css */
/*
 * EntraMappingPanel.razor.css - Scoped styles using Ayva Design System
 */

.entra-mapping-panel[b-ermatpy22l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Panel Header */
.panel-header[b-ermatpy22l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.panel-header .section-icon[b-ermatpy22l] {
    margin-right: var(--space-sm);
    vertical-align: middle;
    color: var(--accent-color);
}

/* Mappings Container */
.mappings-container[b-ermatpy22l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Mappings List */
.mappings-list[b-ermatpy22l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Mapping Card */
.mapping-card[b-ermatpy22l] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.mapping-card:hover[b-ermatpy22l] {
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.mapping-card.disabled[b-ermatpy22l] {
    opacity: 0.6;
}

.mapping-card.disabled:hover[b-ermatpy22l] {
    transform: none;
}

/* Mapping Source (Entra Group) */
.mapping-source[b-ermatpy22l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.source-info[b-ermatpy22l] {
    min-width: 0;
}

.group-id[b-ermatpy22l] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mapping Arrow */
.mapping-arrow[b-ermatpy22l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    color: var(--text-secondary);
}

/* Mapping Target (Role) */
.mapping-target[b-ermatpy22l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.role-badge[b-ermatpy22l] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.target-info[b-ermatpy22l] {
    min-width: 0;
}

/* Mapping Status */
.mapping-status[b-ermatpy22l] {
    flex-shrink: 0;
}

/* Mapping Actions */
.mapping-actions[b-ermatpy22l] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* Empty State */
.empty-state[b-ermatpy22l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

/* Panel Footer */
.panel-footer[b-ermatpy22l] {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

/* Dialog Styling */
[b-ermatpy22l] .mud-dialog {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

[b-ermatpy22l] .mud-dialog-title {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

[b-ermatpy22l] .mud-dialog-content {
    color: var(--text-primary);
}

/* Form Inputs */
[b-ermatpy22l] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

[b-ermatpy22l] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
}

[b-ermatpy22l] .mud-input {
    color: var(--text-primary) !important;
}

[b-ermatpy22l] .mud-input-label {
    color: var(--text-secondary) !important;
}

[b-ermatpy22l] .mud-input-helper-text {
    color: var(--text-muted) !important;
}

[b-ermatpy22l] .mud-select {
    background: var(--bg-card);
}

[b-ermatpy22l] .mud-popover {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

[b-ermatpy22l] .mud-list-item {
    color: var(--text-primary);
}

[b-ermatpy22l] .mud-list-item:hover {
    background: var(--bg-hover) !important;
}

/* Switch */
[b-ermatpy22l] .mud-switch {
    color: var(--text-primary);
}

[b-ermatpy22l] .mud-switch-track {
    background: var(--bg-card) !important;
}

[b-ermatpy22l] .mud-switch-checked .mud-switch-track {
    background: var(--accent-color) !important;
}

/* Buttons */
[b-ermatpy22l] .mud-button-filled.mud-button-filled-primary {
    background: var(--accent-gradient) !important;
    transition: all var(--transition-normal);
}

[b-ermatpy22l] .mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

/* Chips */
[b-ermatpy22l] .mud-chip {
    font-weight: var(--font-medium);
}

/* Alert */
[b-ermatpy22l] .mud-alert {
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .panel-header[b-ermatpy22l] {
        flex-direction: column;
        align-items: stretch;
    }

    .mapping-card[b-ermatpy22l] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .mapping-source[b-ermatpy22l],
    .mapping-target[b-ermatpy22l] {
        width: 100%;
    }

    .mapping-arrow[b-ermatpy22l] {
        display: none;
    }

    .mapping-status[b-ermatpy22l] {
        width: 100%;
    }

    .mapping-actions[b-ermatpy22l] {
        width: 100%;
        justify-content: flex-end;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--border-color);
    }

    .group-id[b-ermatpy22l] {
        max-width: 100%;
    }

    .empty-state[b-ermatpy22l] {
        padding: var(--space-xl);
    }
}
/* /Features/Admin/Components/RBAC/PermissionBrowser.razor.rz.scp.css */
/*
 * PermissionBrowser.razor.css - Scoped styles using Ayva Design System
 */

.permission-browser[b-5efkrbbbr6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Browser Header */
.browser-header[b-5efkrbbbr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.browser-header .section-icon[b-5efkrbbbr6] {
    margin-right: var(--space-sm);
    vertical-align: middle;
    color: var(--accent-color);
}

/* Filter Controls */
.filter-controls[b-5efkrbbbr6] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Permissions Container */
.permissions-container[b-5efkrbbbr6] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Table Styling */
[b-5efkrbbbr6] .permissions-table {
    background: transparent !important;
}

[b-5efkrbbbr6] .permissions-table .mud-table-container {
    background: transparent !important;
}

[b-5efkrbbbr6] .permissions-table .mud-table-head {
    background: var(--bg-card) !important;
}

[b-5efkrbbbr6] .permissions-table .mud-table-head th {
    color: var(--text-secondary) !important;
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color) !important;
}

[b-5efkrbbbr6] .permissions-table .mud-table-body tr {
    background: transparent !important;
    transition: background var(--transition-fast);
}

[b-5efkrbbbr6] .permissions-table .mud-table-body tr:hover {
    background: var(--bg-hover) !important;
}

[b-5efkrbbbr6] .permissions-table .mud-table-body td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--space-sm) var(--space-md);
}

/* Permission Code */
.permission-code[b-5efkrbbbr6] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--bg-card);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--accent-color);
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Browser Footer */
.browser-footer[b-5efkrbbbr6] {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-sm);
}

/* Roles Dialog */
.roles-list[b-5efkrbbbr6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 400px;
    overflow-y: auto;
}

.role-item[b-5efkrbbbr6] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.role-item:hover[b-5efkrbbbr6] {
    border-color: var(--accent-color);
}

.role-color[b-5efkrbbbr6] {
    width: 8px;
    height: 40px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.role-info[b-5efkrbbbr6] {
    flex: 1;
    min-width: 0;
}

/* Dialog Styling */
[b-5efkrbbbr6] .mud-dialog {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

[b-5efkrbbbr6] .mud-dialog-title {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

[b-5efkrbbbr6] .mud-dialog-content {
    color: var(--text-primary);
}

/* Input Styling */
[b-5efkrbbbr6] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

[b-5efkrbbbr6] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
}

[b-5efkrbbbr6] .mud-input {
    color: var(--text-primary) !important;
}

[b-5efkrbbbr6] .mud-input-label {
    color: var(--text-secondary) !important;
}

[b-5efkrbbbr6] .mud-select {
    background: var(--bg-card);
}

[b-5efkrbbbr6] .mud-popover {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

[b-5efkrbbbr6] .mud-list-item {
    color: var(--text-primary);
}

[b-5efkrbbbr6] .mud-list-item:hover {
    background: var(--bg-hover) !important;
}

/* Chips */
[b-5efkrbbbr6] .mud-chip {
    font-weight: var(--font-medium);
}

/* Alert */
[b-5efkrbbbr6] .mud-alert {
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .browser-header[b-5efkrbbbr6] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls[b-5efkrbbbr6] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls > *[b-5efkrbbbr6] {
        width: 100% !important;
    }

    .permission-code[b-5efkrbbbr6] {
        max-width: 120px;
    }
}
/* /Features/Admin/Components/RBAC/RbacManagementPanel.razor.rz.scp.css */
/* RbacManagementPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

.rbac-panel[b-1pi4wxm1zx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: var(--space-lg);
}

/* Header */
.rbac-header[b-1pi4wxm1zx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.header-content[b-1pi4wxm1zx] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-icon[b-1pi4wxm1zx] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-text h1[b-1pi4wxm1zx] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.header-text p[b-1pi4wxm1zx] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.header-actions[b-1pi4wxm1zx] {
    display: flex;
    gap: var(--space-sm);
}

/* Tabs */
.rbac-tabs[b-1pi4wxm1zx] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

[b-1pi4wxm1zx] .rbac-tabs .mud-tabs-toolbar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-sm);
}

[b-1pi4wxm1zx] .rbac-tabs .mud-tab {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
    border-radius: var(--radius-md);
}

[b-1pi4wxm1zx] .rbac-tabs .mud-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[b-1pi4wxm1zx] .rbac-tabs .mud-tab.mud-tab-active {
    color: var(--accent-color);
    background: var(--accent-color-10);
}

.tab-panel[b-1pi4wxm1zx] {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-md);
    flex: 1;
    overflow-y: auto;
}

.tab-content[b-1pi4wxm1zx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Section Header */
.section-header[b-1pi4wxm1zx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.section-header .section-icon[b-1pi4wxm1zx] {
    margin-right: var(--space-sm);
    vertical-align: middle;
    color: var(--accent-color);
}

/* Roles Grid */
.roles-grid[b-1pi4wxm1zx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.role-card[b-1pi4wxm1zx] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
}

.role-card:hover[b-1pi4wxm1zx] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.role-card.selected[b-1pi4wxm1zx] {
    border-color: var(--accent-color);
    background: var(--accent-color-5);
    box-shadow: 0 0 0 2px var(--accent-color-20);
}

.role-header[b-1pi4wxm1zx] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.role-icon[b-1pi4wxm1zx] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.role-info[b-1pi4wxm1zx] {
    flex: 1;
    min-width: 0;
}

.role-name[b-1pi4wxm1zx] {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-code[b-1pi4wxm1zx] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.role-description[b-1pi4wxm1zx] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5rem;
}

.role-footer[b-1pi4wxm1zx] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.role-footer span[b-1pi4wxm1zx] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.role-actions[b-1pi4wxm1zx] {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    gap: var(--space-xs);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.role-card:hover .role-actions[b-1pi4wxm1zx] {
    opacity: 1;
}

/* Role Permissions Section */
.role-permissions-section[b-1pi4wxm1zx] {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

/* Audit Table */
.audit-table[b-1pi4wxm1zx] {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg);
}

[b-1pi4wxm1zx] .audit-table .mud-table-container {
    border-radius: var(--radius-lg);
}

[b-1pi4wxm1zx] .audit-table .mud-table-row {
    background: transparent !important;
}

[b-1pi4wxm1zx] .audit-table .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-1pi4wxm1zx] .audit-table .mud-table-head {
    background: var(--bg-secondary) !important;
}

[b-1pi4wxm1zx] .audit-table .mud-table-cell,
[b-1pi4wxm1zx] .audit-table .mud-table-head-cell {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* JSON Preview */
.json-preview[b-1pi4wxm1zx] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .rbac-header[b-1pi4wxm1zx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .header-actions[b-1pi4wxm1zx] {
        width: 100%;
        justify-content: flex-end;
    }

    .roles-grid[b-1pi4wxm1zx] {
        grid-template-columns: 1fr;
    }

    .section-header[b-1pi4wxm1zx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
}
/* /Features/Admin/Components/RBAC/RolePermissionEditor.razor.rz.scp.css */
/*
 * RolePermissionEditor.razor.css - Scoped styles using Ayva Design System
 */

.permission-editor[b-5b9kt64f8h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Editor Header */
.editor-header[b-5b9kt64f8h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.editor-title[b-5b9kt64f8h] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.role-badge[b-5b9kt64f8h] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.editor-actions[b-5b9kt64f8h] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Permission Categories */
.permission-categories[b-5b9kt64f8h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.category-section[b-5b9kt64f8h] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.category-header[b-5b9kt64f8h] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
}

.category-header:hover[b-5b9kt64f8h] {
    background: var(--bg-hover);
}

.category-name[b-5b9kt64f8h] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent-color);
    flex: 1;
    letter-spacing: 0.05em;
}

.category-count[b-5b9kt64f8h] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.category-checkbox[b-5b9kt64f8h] {
    margin-left: auto;
}

/* Permission Items */
.category-permissions[b-5b9kt64f8h] {
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.permission-item[b-5b9kt64f8h] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.permission-item:hover[b-5b9kt64f8h] {
    background: var(--bg-hover);
}

.permission-item.assigned[b-5b9kt64f8h] {
    background: var(--accent-color-5);
    border-left: 3px solid var(--accent-color);
}

.permission-info[b-5b9kt64f8h] {
    flex: 1;
    min-width: 0;
}

.permission-name[b-5b9kt64f8h] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.system-icon[b-5b9kt64f8h] {
    font-size: 0.875rem !important;
}

.permission-code[b-5b9kt64f8h] {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.permission-description[b-5b9kt64f8h] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Save Bar */
.save-bar[b-5b9kt64f8h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

.save-bar .mud-text-body2[b-5b9kt64f8h] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--warning-color);
}

/* Checkbox Styling */
[b-5b9kt64f8h] .mud-checkbox .mud-checkbox-icons {
    color: var(--accent-color);
}

/* Input Styling */
[b-5b9kt64f8h] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

[b-5b9kt64f8h] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
}

[b-5b9kt64f8h] .mud-input {
    color: var(--text-primary) !important;
}

/* Button Styling */
[b-5b9kt64f8h] .mud-button-filled.mud-button-filled-primary {
    background: var(--accent-gradient) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .editor-header[b-5b9kt64f8h] {
        flex-direction: column;
        align-items: stretch;
    }

    .editor-actions[b-5b9kt64f8h] {
        justify-content: flex-end;
    }

    .save-bar[b-5b9kt64f8h] {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}
/* /Features/Admin/Components/RBAC/UserRoleManager.razor.rz.scp.css */
/*
 * UserRoleManager.razor.css - Scoped styles using Ayva Design System
 */

.user-role-manager[b-7m3vus1ofm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Section Header */
.section-header[b-7m3vus1ofm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.section-header .section-icon[b-7m3vus1ofm] {
    margin-right: var(--space-sm);
    vertical-align: middle;
    color: var(--accent-color);
}

/* Users List */
.users-list[b-7m3vus1ofm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.user-card[b-7m3vus1ofm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.user-card:hover[b-7m3vus1ofm] {
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.user-card.selected[b-7m3vus1ofm] {
    border-color: var(--accent-color);
    background: var(--accent-color-5);
    box-shadow: 0 0 0 2px var(--accent-color-20);
}

.user-avatar[b-7m3vus1ofm] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar.large[b-7m3vus1ofm] {
    width: 56px;
    height: 56px;
}

.user-info[b-7m3vus1ofm] {
    flex: 1;
    min-width: 0;
}

.user-name[b-7m3vus1ofm] {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-7m3vus1ofm] {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-roles[b-7m3vus1ofm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

/* User Details Section */
.user-details-section[b-7m3vus1ofm] {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.details-header[b-7m3vus1ofm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.details-header .user-info[b-7m3vus1ofm] {
    flex: 1;
}

/* Assignments List */
.assignments-list[b-7m3vus1ofm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.assignment-item[b-7m3vus1ofm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.assignment-item:hover[b-7m3vus1ofm] {
    border-color: var(--accent-color);
}

.assignment-item.inactive[b-7m3vus1ofm] {
    opacity: 0.6;
}

.assignment-item.expired[b-7m3vus1ofm] {
    border-color: var(--error-color);
    background: var(--error-bg);
}

.assignment-role[b-7m3vus1ofm] {
    flex: 1;
    min-width: 0;
    padding-left: var(--space-md);
    border-left: 3px solid var(--accent-color);
}

.assignment-role .role-name[b-7m3vus1ofm] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.assignment-meta[b-7m3vus1ofm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.assignment-details[b-7m3vus1ofm] {
    flex-shrink: 0;
    text-align: right;
    min-width: 200px;
}

.assignment-actions[b-7m3vus1ofm] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Effective Permissions Section */
.effective-permissions-section[b-7m3vus1ofm] {
    margin-top: var(--space-md);
}

[b-7m3vus1ofm] .effective-permissions-section .mud-expand-panel {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

[b-7m3vus1ofm] .effective-permissions-section .mud-expand-panel-header {
    color: var(--text-primary);
}

.permissions-grid[b-7m3vus1ofm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.permission-category[b-7m3vus1ofm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.category-label[b-7m3vus1ofm] {
    width: 100%;
    font-weight: var(--font-semibold);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

/* Dialog Styling */
[b-7m3vus1ofm] .mud-dialog {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

[b-7m3vus1ofm] .mud-dialog-title {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

[b-7m3vus1ofm] .mud-dialog-content {
    color: var(--text-primary);
}

/* Form Inputs */
[b-7m3vus1ofm] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

[b-7m3vus1ofm] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
}

[b-7m3vus1ofm] .mud-input {
    color: var(--text-primary) !important;
}

[b-7m3vus1ofm] .mud-input-label {
    color: var(--text-secondary) !important;
}

[b-7m3vus1ofm] .mud-select {
    background: var(--bg-card);
}

[b-7m3vus1ofm] .mud-popover {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

[b-7m3vus1ofm] .mud-list-item {
    color: var(--text-primary);
}

[b-7m3vus1ofm] .mud-list-item:hover {
    background: var(--bg-hover) !important;
}

/* Buttons */
[b-7m3vus1ofm] .mud-button-filled.mud-button-filled-primary {
    background: var(--accent-gradient) !important;
    transition: all var(--transition-normal);
}

[b-7m3vus1ofm] .mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

/* Chips */
[b-7m3vus1ofm] .mud-chip {
    font-weight: var(--font-medium);
}

/* Alert */
[b-7m3vus1ofm] .mud-alert {
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .section-header[b-7m3vus1ofm] {
        flex-direction: column;
        align-items: stretch;
    }

    .user-card[b-7m3vus1ofm] {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-roles[b-7m3vus1ofm] {
        justify-content: flex-start;
        width: 100%;
    }

    .details-header[b-7m3vus1ofm] {
        flex-direction: column;
        text-align: center;
    }

    .assignment-item[b-7m3vus1ofm] {
        flex-direction: column;
    }

    .assignment-details[b-7m3vus1ofm] {
        text-align: left;
        width: 100%;
        min-width: 0;
    }
}
/* /Features/Admin/Components/ServicePlansPanel.razor.rz.scp.css */
/* ServicePlansPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Stats cards - icon scale on hover */
[b-gck9x737ob] .mud-paper:hover .mud-icon-root {
    transform: scale(1.1);
}

/* Search field max width */
[b-gck9x737ob] .search-field {
    max-width: 300px;
}

/* Plans table fixed height */
[b-gck9x737ob] .plans-table {
    height: 500px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-gck9x737ob] .search-field {
        max-width: 100%;
    }

    [b-gck9x737ob] .plans-table {
        height: auto;
        max-height: 400px;
    }
}
/* /Features/Admin/Components/SignupsPanel.razor.rz.scp.css */
/* SignupsPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Address cell truncation */
.address-cell[b-6unefces1w] {
    max-width: 12.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-cell span[b-6unefces1w] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tower name cell truncation */
.tower-name-cell[b-6unefces1w] {
    max-width: 6.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Icon button scale on hover */
[b-6unefces1w] .mud-icon-button:hover {
    transform: scale(1.1);
}
/* /Features/Admin/Components/SiteNoticesPanel.razor.rz.scp.css */
/*
 * SiteNoticesPanel.razor.css
 * Ayva Design System - Admin Panel Styling
 */

/* Panel container styling */
[b-bsvn3v2qu5] .mud-paper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    transition: all var(--transition-normal);
}

[b-bsvn3v2qu5] .mud-paper:hover {
    border-color: var(--border-color-medium) !important;
}

/* Section headers */
[b-bsvn3v2qu5] .mud-typography-h6 {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold);
}

/* Form labels and inputs */
[b-bsvn3v2qu5] .mud-input-label {
    color: var(--text-secondary) !important;
}

[b-bsvn3v2qu5] .mud-input {
    color: var(--text-primary) !important;
}

[b-bsvn3v2qu5] .mud-input-control .mud-input-slot {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[b-bsvn3v2qu5] .mud-input-control:hover .mud-input-slot {
    border-color: var(--border-color-medium) !important;
}

[b-bsvn3v2qu5] .mud-input-control-input-container {
    background: transparent !important;
}

/* Select dropdowns */
[b-bsvn3v2qu5] .mud-select .mud-input-slot {
    background: var(--bg-card) !important;
}

/* Text fields */
[b-bsvn3v2qu5] .mud-input-outlined .mud-input-slot {
    border-radius: var(--radius-md) !important;
}

/* Checkboxes */
[b-bsvn3v2qu5] .mud-checkbox {
    color: var(--text-secondary) !important;
}

[b-bsvn3v2qu5] .mud-checkbox .mud-primary-text {
    color: var(--text-primary) !important;
}

[b-bsvn3v2qu5] .mud-checkbox-icons .mud-icon-root {
    color: var(--accent-color) !important;
}

/* Date and Time pickers */
[b-bsvn3v2qu5] .mud-picker .mud-input-slot {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Caption text */
[b-bsvn3v2qu5] .mud-typography-caption {
    color: var(--text-muted) !important;
}

/* Buttons */
[b-bsvn3v2qu5] .mud-button-filled.mud-button-primary {
    background: var(--accent-gradient) !important;
    color: white !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-normal);
}

[b-bsvn3v2qu5] .mud-button-filled.mud-button-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: var(--shadow-accent);
}

[b-bsvn3v2qu5] .mud-button-outlined {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-normal);
}

[b-bsvn3v2qu5] .mud-button-outlined:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-color) !important;
}

/* Table styling */
[b-bsvn3v2qu5] .mud-table {
    background: transparent !important;
}

[b-bsvn3v2qu5] .mud-table-container {
    background: transparent !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

[b-bsvn3v2qu5] .mud-table-head .mud-table-row {
    background: var(--bg-card-solid) !important;
}

[b-bsvn3v2qu5] .mud-table-head .mud-table-cell {
    color: var(--text-secondary) !important;
    font-weight: var(--font-semibold);
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--space-md) var(--space-lg) !important;
}

[b-bsvn3v2qu5] .mud-table-body .mud-table-row {
    background: transparent !important;
    transition: all var(--transition-fast);
}

[b-bsvn3v2qu5] .mud-table-body .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

[b-bsvn3v2qu5] .mud-table-body .mud-table-row.mud-table-row-striped {
    background: var(--white-overlay-02) !important;
}

[b-bsvn3v2qu5] .mud-table-body .mud-table-row.mud-table-row-striped:hover {
    background: var(--bg-hover) !important;
}

[b-bsvn3v2qu5] .mud-table-body .mud-table-cell {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--space-sm) var(--space-lg) !important;
}

/* Chips for severity colors */
[b-bsvn3v2qu5] .mud-chip {
    font-size: var(--text-xs) !important;
    font-weight: var(--font-medium);
    border-radius: var(--radius-full) !important;
}

[b-bsvn3v2qu5] .mud-chip.mud-chip-color-info {
    background: var(--info-bg) !important;
    color: var(--info-text) !important;
}

[b-bsvn3v2qu5] .mud-chip.mud-chip-color-success {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
}

[b-bsvn3v2qu5] .mud-chip.mud-chip-color-warning {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}

[b-bsvn3v2qu5] .mud-chip.mud-chip-color-error {
    background: var(--error-bg) !important;
    color: var(--error-text) !important;
}

[b-bsvn3v2qu5] .mud-chip.mud-chip-color-default {
    background: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
}

/* Icon buttons */
[b-bsvn3v2qu5] .mud-icon-button {
    transition: all var(--transition-fast);
    border-radius: var(--radius-md) !important;
}

[b-bsvn3v2qu5] .mud-icon-button:hover {
    background: var(--bg-hover) !important;
    transform: scale(1.1);
}

[b-bsvn3v2qu5] .mud-icon-button.mud-icon-button-color-error:hover {
    background: var(--error-bg) !important;
}

/* Status icons */
[b-bsvn3v2qu5] .mud-icon-root.mud-icon-color-success {
    color: var(--success-color) !important;
}

[b-bsvn3v2qu5] .mud-icon-root.mud-icon-color-default {
    color: var(--text-muted) !important;
}

/* Secondary text */
[b-bsvn3v2qu5] .mud-typography-color-secondary {
    color: var(--text-secondary) !important;
}

/* Empty state styling */
.empty-state[b-bsvn3v2qu5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    gap: var(--space-sm);
}

.empty-state-icon[b-bsvn3v2qu5] {
    color: var(--text-muted) !important;
    opacity: 0.6;
    margin-bottom: var(--space-sm);
}

[b-bsvn3v2qu5] .empty-state .mud-typography-h6 {
    color: var(--text-secondary) !important;
    font-weight: var(--font-medium);
}

[b-bsvn3v2qu5] .empty-state .mud-typography-body2 {
    color: var(--text-muted) !important;
    max-width: 20rem;
}
/* /Features/Admin/Components/ThemeEditor/ThemeEditorControl.razor.rz.scp.css */
.theme-editor-control[b-o8bcsb0aqj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.theme-editor-control:hover[b-o8bcsb0aqj] {
    border-color: var(--border-color-medium);
}

.control-header[b-o8bcsb0aqj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.control-info[b-o8bcsb0aqj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    flex: 1;
}

.control-info > *[b-o8bcsb0aqj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-body[b-o8bcsb0aqj] {
    width: 100%;
}

/* Color control */
.color-control[b-o8bcsb0aqj] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.color-swatch[b-o8bcsb0aqj] {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    box-shadow: inset 0 0 0 1px var(--white-overlay-10), var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    /* Checkerboard pattern for transparent colors */
    background-image:
        linear-gradient(45deg, var(--gray-neutral) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-neutral) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-neutral) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-neutral) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    position: relative;
}

.color-swatch[b-o8bcsb0aqj]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: inherit;
}

.color-swatch:hover[b-o8bcsb0aqj] {
    transform: scale(1.05);
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--white-overlay-20), var(--shadow-md);
}

/* Slider control */
.slider-control[b-o8bcsb0aqj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.slider-value[b-o8bcsb0aqj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Modified indicator */
.control-modified[b-o8bcsb0aqj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border-color);
}

/* Type-specific styling */
.control-gradient .control-body[b-o8bcsb0aqj],
.control-shadow .control-body[b-o8bcsb0aqj] {
    margin-top: var(--space-sm);
}
/* /Features/Admin/Components/ThemeEditor/ThemeEditorModal.razor.rz.scp.css */
.theme-editor-modal[b-43505v8ttj] {
    --modal-bg: var(--bg-card);
}

.theme-editor-title[b-43505v8ttj] {
    display: flex;
    align-items: center;
}

.theme-editor-content[b-43505v8ttj] {
    max-height: 60vh;
    overflow-y: auto;
}

.theme-editor-tabs[b-43505v8ttj] {
    background: transparent;
}

[b-43505v8ttj] .theme-editor-tabs .mud-tabs-panels {
    padding: var(--space-md) 0;
}

.variables-grid[b-43505v8ttj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.all-variables-panel[b-43505v8ttj] {
    display: flex;
    flex-direction: column;
}

.theme-editor-actions[b-43505v8ttj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: var(--space-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .variables-grid[b-43505v8ttj] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/ThemeEditor/ThemeEditorPanel.razor.rz.scp.css */
/* Theme Editor Panel - Floating overlay styles */

/* Toggle Button */
.theme-editor-toggle[b-ftunrqnrzm] {
    position: fixed;
    right: 16px;
    bottom: 60px; /* Above footer */
    width: 44px;
    height: 44px;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    backdrop-filter: blur(12px);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-lg);
}

.theme-editor-toggle:hover[b-ftunrqnrzm] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.theme-editor-toggle.active[b-ftunrqnrzm] {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.theme-editor-toggle[b-ftunrqnrzm]  .mud-icon-root {
    color: var(--text-primary);
}

/* Main Panel */
.theme-editor-panel[b-ftunrqnrzm] {
    position: fixed;
    right: 16px;
    top: 80px;
    width: 380px;
    max-height: calc(100vh - 100px);
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 99999;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    font-family: var(--font-primary);
}

.theme-editor-panel.minimized[b-ftunrqnrzm] {
    max-height: auto;
}

/* Header */
.panel-header[b-ftunrqnrzm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--black-overlay-20);
    border-bottom: 1px solid var(--border-subtle);
    cursor: move;
}

.header-title[b-ftunrqnrzm] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-title[b-ftunrqnrzm]  .mud-icon-root {
    color: var(--accent-color);
}

.header-actions[b-ftunrqnrzm] {
    display: flex;
    gap: 4px;
}

.header-actions[b-ftunrqnrzm]  .mud-icon-button {
    color: var(--text-secondary);
}

.header-actions[b-ftunrqnrzm]  .mud-icon-button:hover {
    color: var(--text-primary);
    background: var(--white-overlay-10);
}

/* Tabs */
.panel-tabs[b-ftunrqnrzm] {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--black-overlay-10);
}

.panel-tabs .tab[b-ftunrqnrzm] {
    flex: 1;
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.panel-tabs .tab:hover[b-ftunrqnrzm] {
    color: var(--text-primary);
    background: var(--white-overlay-05);
}

.panel-tabs .tab.active[b-ftunrqnrzm] {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.panel-tabs .tab .badge[b-ftunrqnrzm] {
    background: var(--accent-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-lg);
    font-weight: 600;
}

/* Search */
.panel-search[b-ftunrqnrzm] {
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.panel-search[b-ftunrqnrzm]  .mud-input-root {
    background: var(--black-overlay-20);
}

.panel-search[b-ftunrqnrzm]  .mud-input {
    color: var(--text-primary);
    font-size: 13px;
}

.panel-search[b-ftunrqnrzm]  .mud-input-adornment {
    color: var(--text-secondary);
}

/* Content */
.panel-content[b-ftunrqnrzm] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-content[b-ftunrqnrzm]::-webkit-scrollbar {
    width: 6px;
}

.panel-content[b-ftunrqnrzm]::-webkit-scrollbar-track {
    background: transparent;
}

.panel-content[b-ftunrqnrzm]::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

.panel-content[b-ftunrqnrzm]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Category Filter */
.category-filter[b-ftunrqnrzm] {
    margin-bottom: 8px;
}

.category-filter[b-ftunrqnrzm]  .mud-select {
    font-size: 13px;
}

/* Element Info */
.element-info[b-ftunrqnrzm] {
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 8px;
}

.element-info code[b-ftunrqnrzm] {
    color: var(--accent-color);
    font-family: var(--font-mono);
}

.element-info .classes[b-ftunrqnrzm] {
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Empty State */
.empty-state[b-ftunrqnrzm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.empty-state[b-ftunrqnrzm]  .mud-icon-root {
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p[b-ftunrqnrzm] {
    margin: 0;
    font-size: 13px;
}

/* Presets Grid */
.presets-grid[b-ftunrqnrzm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.preset-card[b-ftunrqnrzm] {
    background: var(--black-overlay-20);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}

.preset-card:hover[b-ftunrqnrzm] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.preset-preview[b-ftunrqnrzm] {
    height: 60px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

/* Theme preview gradients - intentional hardcoded data representations */
.preset-preview.dark[b-ftunrqnrzm] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #fd7e14 100%);
}

.preset-preview.midnight[b-ftunrqnrzm] {
    background: linear-gradient(135deg, #0a0f1e 0%, #1e3a5f 50%, #3b82f6 100%);
}

.preset-preview.forest[b-ftunrqnrzm] {
    background: linear-gradient(135deg, #0a1914 0%, #134e3a 50%, #22c55e 100%);
}

.preset-preview.sunset[b-ftunrqnrzm] {
    background: linear-gradient(135deg, #1e0f0a 0%, #7c2d12 50%, #f97316 100%);
}

.preset-card span[b-ftunrqnrzm] {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Footer */
.panel-footer[b-ftunrqnrzm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    background: var(--black-overlay-20);
    border-top: 1px solid var(--border-subtle);
}

/* Responsive */
@media (max-width: 768px) {
    .theme-editor-panel[b-ftunrqnrzm] {
        right: 8px;
        left: 8px;
        width: auto;
        top: 60px;
        max-height: calc(100vh - 80px);
    }

    .theme-editor-toggle[b-ftunrqnrzm] {
        right: 8px;
        bottom: 50px;
        width: 40px;
        height: 40px;
    }
}
/* /Features/Admin/Components/ThemeEditor/ThemeEditorVariableControl.razor.rz.scp.css */
/* Theme Editor Variable Control Styles */

.variable-control[b-rkx106u0q5] {
    background: var(--black-overlay-20);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.variable-control:hover[b-rkx106u0q5] {
    border-color: var(--accent-color);
    background: var(--black-overlay-30);
}

.variable-header[b-rkx106u0q5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.variable-name[b-rkx106u0q5] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.reset-btn[b-rkx106u0q5] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.variable-control:hover .reset-btn[b-rkx106u0q5] {
    opacity: 1;
}

[b-rkx106u0q5] .reset-btn .mud-icon-root {
    font-size: 16px;
    color: var(--text-secondary);
}

[b-rkx106u0q5] .reset-btn:hover .mud-icon-root {
    color: var(--accent-color);
}

.variable-input[b-rkx106u0q5] {
    display: flex;
    align-items: center;
}

/* Color Control */
.color-control[b-rkx106u0q5] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.color-picker[b-rkx106u0q5] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
}

.color-picker[b-rkx106u0q5]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-picker[b-rkx106u0q5]::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

.color-text[b-rkx106u0q5] {
    flex: 1;
    padding: 8px 12px;
    background: var(--black-overlay-30);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
}

.color-text:focus[b-rkx106u0q5] {
    outline: none;
    border-color: var(--accent-color);
}

/* Font Select */
.font-select[b-rkx106u0q5] {
    width: 100%;
    padding: 8px 12px;
    background: var(--black-overlay-30);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}

.font-select:focus[b-rkx106u0q5] {
    outline: none;
    border-color: var(--accent-color);
}

.font-select option[b-rkx106u0q5] {
    background: var(--dialog-bg-solid);
    color: var(--text-primary);
}

/* Slider Control */
.slider-control[b-rkx106u0q5] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.slider[b-rkx106u0q5] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--black-overlay-30);
    border-radius: 3px;
    outline: none;
}

.slider[b-rkx106u0q5]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.slider[b-rkx106u0q5]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider[b-rkx106u0q5]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-value[b-rkx106u0q5] {
    width: 70px;
    padding: 6px 10px;
    background: var(--black-overlay-30);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 11px;
    font-family: var(--font-mono);
    text-align: center;
}

.slider-value:focus[b-rkx106u0q5] {
    outline: none;
    border-color: var(--accent-color);
}

/* Text Input */
.text-input[b-rkx106u0q5] {
    width: 100%;
    padding: 8px 12px;
    background: var(--black-overlay-30);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
}

.text-input:focus[b-rkx106u0q5] {
    outline: none;
    border-color: var(--accent-color);
}
/* /Features/Admin/Components/ThemeEditor/ThemeFontPicker.razor.rz.scp.css */
.font-picker[b-vuqgm9kmpf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.font-preview[b-vuqgm9kmpf] {
    padding: var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.font-preview > *[b-vuqgm9kmpf] {
    margin-bottom: var(--space-xs);
}

.font-preview > *:last-child[b-vuqgm9kmpf] {
    margin-bottom: 0;
}

.font-grid[b-vuqgm9kmpf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
    padding: var(--space-sm);
}
/* /Features/Admin/Components/ThemeEditor/ThemeGradientPicker.razor.rz.scp.css */
.gradient-picker[b-abcjx7f0dj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.gradient-preview[b-abcjx7f0dj] {
    width: 100%;
    height: 60px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.gradient-overlay[b-abcjx7f0dj] {
    position: absolute;
    inset: 0;
    /* Checkerboard for transparency */
    background-image:
        linear-gradient(45deg, var(--gray-neutral) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-neutral) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-neutral) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-neutral) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    z-index: -1;
}

.gradient-controls[b-abcjx7f0dj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.color-stop[b-abcjx7f0dj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.color-stop-swatch[b-abcjx7f0dj] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.color-stop-swatch:hover[b-abcjx7f0dj] {
    transform: scale(1.1);
    border-color: var(--accent-color);
}
/* /Features/Admin/Components/ThemeEditor/ThemeShadowEditor.razor.rz.scp.css */
.shadow-editor[b-3if2ocps0n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.shadow-preview[b-3if2ocps0n] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.shadow-preview-box[b-3if2ocps0n] {
    width: 100px;
    height: 60px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-normal);
}

.shadow-layers[b-3if2ocps0n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.shadow-layer-controls[b-3if2ocps0n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.shadow-row[b-3if2ocps0n] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.shadow-row > :first-child[b-3if2ocps0n] {
    min-width: 70px;
}

.shadow-row > .mud-slider[b-3if2ocps0n] {
    flex: 1;
}

.value-label[b-3if2ocps0n] {
    min-width: 50px;
    text-align: right;
}

.color-row .color-swatch[b-3if2ocps0n] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.color-row .color-swatch:hover[b-3if2ocps0n] {
    transform: scale(1.1);
    border-color: var(--accent-color);
}
/* /Features/Admin/Components/ThemeManager/ThemeAIGeneratorModal.razor.rz.scp.css */
.ai-generator-container[b-tdb5hbq8bd] {
    min-width: 600px;
    min-height: 400px;
}

.prompt-section[b-tdb5hbq8bd] {
    padding: var(--space-lg);
}

.generating-section[b-tdb5hbq8bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
}

.themes-section[b-tdb5hbq8bd] {
    padding: var(--space-lg);
}

.themes-header[b-tdb5hbq8bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.themes-grid[b-tdb5hbq8bd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.theme-card[b-tdb5hbq8bd] {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.theme-card:hover[b-tdb5hbq8bd] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.theme-card.selected[b-tdb5hbq8bd] {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px var(--success-color-20);
}

.theme-card-header[b-tdb5hbq8bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.theme-name[b-tdb5hbq8bd] {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.theme-card-preview[b-tdb5hbq8bd] {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.preview-color-swatch[b-tdb5hbq8bd] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--white-overlay-20);
}

.theme-card-description[b-tdb5hbq8bd] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .ai-generator-container[b-tdb5hbq8bd] {
        min-width: auto;
    }

    .themes-grid[b-tdb5hbq8bd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .themes-grid[b-tdb5hbq8bd] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/ThemeManager/ThemeManagerPanel.razor.rz.scp.css */
.theme-manager-container[b-gjx8nm8u9b] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: var(--space-lg);
}

.theme-manager-header[b-gjx8nm8u9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.header-left[b-gjx8nm8u9b] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.header-actions[b-gjx8nm8u9b] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.theme-manager-content[b-gjx8nm8u9b] {
    flex: 1;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.theme-manager-content[b-gjx8nm8u9b]  .mud-tabs-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.theme-manager-content[b-gjx8nm8u9b]  .mud-tabs-panels {
    flex: 1;
    overflow-y: auto;
}

.theme-category-tabs[b-gjx8nm8u9b] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.category-controls[b-gjx8nm8u9b] {
    padding: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-manager-header[b-gjx8nm8u9b] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .header-left[b-gjx8nm8u9b] {
        flex-direction: column;
        text-align: center;
    }

    .header-actions[b-gjx8nm8u9b] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .category-controls[b-gjx8nm8u9b] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Admin/Components/ThemeManager/ThemePreviewPanel.razor.rz.scp.css */
.preview-container[b-9vt94zem2b] {
    padding: var(--space-lg);
    background: var(--bg-base);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.preview-section[b-9vt94zem2b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.preview-label[b-9vt94zem2b] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-semibold);
}

.preview-row[b-9vt94zem2b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Buttons */
.preview-btn[b-9vt94zem2b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    font-family: var(--font-family);
}

.preview-btn-sm[b-9vt94zem2b] {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
}

.preview-btn-primary[b-9vt94zem2b] {
    background: var(--accent-gradient);
    color: white;
}

.preview-btn-primary:hover[b-9vt94zem2b] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.preview-btn-secondary[b-9vt94zem2b] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.preview-btn-secondary:hover[b-9vt94zem2b] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

.preview-btn-ghost[b-9vt94zem2b] {
    background: transparent;
    color: var(--text-secondary);
}

.preview-btn-ghost:hover[b-9vt94zem2b] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Badges */
.preview-badge[b-9vt94zem2b] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.preview-badge-success[b-9vt94zem2b] {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.preview-badge-warning[b-9vt94zem2b] {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.preview-badge-error[b-9vt94zem2b] {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.preview-badge-info[b-9vt94zem2b] {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* Card */
.preview-card[b-9vt94zem2b] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.preview-card-header[b-9vt94zem2b] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.preview-status-dot[b-9vt94zem2b] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 0.5rem var(--success-color-50);
}

.preview-card-body[b-9vt94zem2b] {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.preview-card-footer[b-9vt94zem2b] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--border-color);
}

/* Text */
.preview-text-primary[b-9vt94zem2b] {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.preview-text-secondary[b-9vt94zem2b] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.preview-text-muted[b-9vt94zem2b] {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* Input */
.preview-input-group[b-9vt94zem2b] {
    max-width: 250px;
}

.preview-input[b-9vt94zem2b] {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    transition: all var(--transition-normal);
}

.preview-input:focus[b-9vt94zem2b] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

.preview-input[b-9vt94zem2b]::placeholder {
    color: var(--text-muted);
}

/* Typography */
.preview-typography[b-9vt94zem2b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--text-primary);
}

.preview-text-xl[b-9vt94zem2b] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.preview-text-lg[b-9vt94zem2b] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.preview-text-base[b-9vt94zem2b] {
    font-size: var(--text-base);
}

.preview-text-sm[b-9vt94zem2b] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.preview-text-xs[b-9vt94zem2b] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Shadows */
.preview-shadow-box[b-9vt94zem2b] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.preview-shadow-sm[b-9vt94zem2b] {
    box-shadow: var(--shadow-sm);
}

.preview-shadow-md[b-9vt94zem2b] {
    box-shadow: var(--shadow-md);
}

.preview-shadow-lg[b-9vt94zem2b] {
    box-shadow: var(--shadow-lg);
}

.preview-shadow-glow[b-9vt94zem2b] {
    box-shadow: var(--shadow-glow);
}
/* /Features/Admin/Components/ThemeManager/ThemeVariableControl.razor.rz.scp.css */
.theme-variable-control[b-qlzja3kga8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.theme-variable-control:hover[b-qlzja3kga8] {
    border-color: var(--border-color-medium);
}

.control-header[b-qlzja3kga8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* Color row layout - swatch on left, details on right */
.color-row[b-qlzja3kga8] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
}

.color-swatch-button[b-qlzja3kga8] {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    box-shadow: inset 0 0 0 1px var(--white-overlay-10), var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    /* Checkerboard pattern for transparent colors */
    background-image:
        linear-gradient(45deg, var(--gray-neutral) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-neutral) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-neutral) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-neutral) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    position: relative;
}

.color-swatch-button[b-qlzja3kga8]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: inherit;
}

.color-swatch-button:hover[b-qlzja3kga8] {
    transform: scale(1.05);
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--white-overlay-20), var(--shadow-md);
}

.color-details[b-qlzja3kga8] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.color-details .control-info[b-qlzja3kga8] {
    flex: 1;
    min-width: 0;
}

.color-details .control-info > *[b-qlzja3kga8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-qlzja3kga8] .color-picker-popover {
    z-index: var(--z-popover);
}

.control-info[b-qlzja3kga8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.control-input[b-qlzja3kga8] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.color-control[b-qlzja3kga8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.color-control[b-qlzja3kga8]  .mud-picker-inline-paper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.color-text-input[b-qlzja3kga8] {
    max-width: 150px;
}

.slider-control[b-qlzja3kga8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.slider-value[b-qlzja3kga8] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.slider-value[b-qlzja3kga8]  .mud-input-root {
    max-width: 100px;
}

.control-modified[b-qlzja3kga8] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border-color);
}
/* /Features/Admin/Pages/ComsAdmin.razor.rz.scp.css */
/*
 * ComsAdmin.razor.css - Login and Admin Panel Container Styles
 * Uses centralized CSS variables from /assets/css/ayva-theme.css
 * MudBlazor overrides are handled globally in ayva-theme.css
 */

/* ===== LOGIN PAGE CONTAINER ===== */
.coms-login-container[b-cgiypozf0r] {
    min-height: 100vh;
    background: var(--bg-base);
    position: relative;
    overflow: hidden;
}

.coms-login-container[b-cgiypozf0r]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 1px, transparent 1px),
        linear-gradient(to right, rgba(var(--primary-color-rgb), 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--primary-color-rgb), 0.1) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
    pointer-events: none;
}

/* ===== LOGIN CARD ===== */
.login-card[b-cgiypozf0r] {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
    animation: slideUp-b-cgiypozf0r 0.6s ease-out;
}

@keyframes slideUp-b-cgiypozf0r {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header[b-cgiypozf0r] {
    background: var(--accent-gradient);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    text-align: center;
}

.login-header h1[b-cgiypozf0r] {
    color: var(--text-primary);
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
}

.login-header p[b-cgiypozf0r] {
    color: var(--text-secondary);
    margin: var(--space-sm) 0 0 0;
    font-size: var(--text-base);
}

.login-body[b-cgiypozf0r] {
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* ===== FLOATING PARTICLES ANIMATION ===== */
.floating-particles[b-cgiypozf0r] {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle[b-cgiypozf0r] {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    opacity: 0.2;
    border-radius: 50%;
    animation: float-b-cgiypozf0r 15s infinite;
}

@keyframes float-b-cgiypozf0r {
    0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.3; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* ===== ADMIN PANEL CONTAINER ===== */
.coms-page-container[b-cgiypozf0r] {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    min-height: 100vh;
    background: var(--bg-base);
}

[b-cgiypozf0r] .coms-page-container .mud-container {
    width: auto !important;
    max-width: 100%;
}
/* /Features/Admin/Pages/SharedAnalysis.razor.rz.scp.css */
/* SharedAnalysis — Public shared analysis page matching HUD aesthetic */

.shared-root[b-fsf2foku4t] {
    min-height: 100vh;
    background: var(--bg-primary, rgba(15, 23, 42, 0.95));
    color: var(--text-primary, #f8fafc);
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Loading */
.shared-loading[b-fsf2foku4t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: var(--text-muted, #94a3b8);
}

.shared-spinner[b-fsf2foku4t] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
    border-top-color: var(--accent-color, #6366f1);
    border-radius: 50%;
    animation: spin-b-fsf2foku4t 0.8s linear infinite;
}

@keyframes spin-b-fsf2foku4t {
    to { transform: rotate(360deg); }
}

/* Error */
.shared-error[b-fsf2foku4t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
}

.shared-error h2[b-fsf2foku4t] {
    color: var(--text-primary, #f8fafc);
    font-size: 24px;
    margin: 0;
}

.shared-error p[b-fsf2foku4t] {
    margin: 0;
    max-width: 400px;
}

/* Header */
.shared-header[b-fsf2foku4t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
}

.shared-brand[b-fsf2foku4t] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color, #6366f1);
    font-family: var(--font-display, 'Comfortaa', sans-serif);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.shared-title[b-fsf2foku4t] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #f8fafc);
}

.shared-header-right[b-fsf2foku4t] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.shared-date[b-fsf2foku4t],
.shared-expires[b-fsf2foku4t] {
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted, #94a3b8);
}

/* Viability Banner */
.shared-viability[b-fsf2foku4t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 20px;
    font-family: var(--font-mono, monospace);
}

.shared-viability.viability-excellent[b-fsf2foku4t] { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); }
.shared-viability.viability-good[b-fsf2foku4t] { background: rgba(74, 222, 128, 0.15); border: 1px solid rgba(74, 222, 128, 0.3); }
.shared-viability.viability-marginal[b-fsf2foku4t] { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); }
.shared-viability.viability-notviable[b-fsf2foku4t] { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); }

.viability-label[b-fsf2foku4t] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
}

.viability-value[b-fsf2foku4t] {
    font-size: 18px;
    font-weight: 700;
}

.viability-excellent .viability-value[b-fsf2foku4t] { color: #22c55e; }
.viability-good .viability-value[b-fsf2foku4t] { color: #4ade80; }
.viability-marginal .viability-value[b-fsf2foku4t] { color: #f59e0b; }
.viability-notviable .viability-value[b-fsf2foku4t] { color: #ef4444; }

.viability-margin[b-fsf2foku4t] {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-secondary, #cbd5e1);
}

/* Screenshot */
.shared-screenshot[b-fsf2foku4t] {
    margin-bottom: 20px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
}

.shared-screenshot img[b-fsf2foku4t] {
    width: 100%;
    display: block;
}

/* Grid */
.shared-grid[b-fsf2foku4t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Cards */
.shared-card[b-fsf2foku4t] {
    background: var(--bg-secondary, rgba(30, 41, 59, 0.8));
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
    border-radius: var(--radius-md, 8px);
    padding: 16px;
}

.shared-card.full-width[b-fsf2foku4t] {
    margin-bottom: 16px;
}

.shared-card-title[b-fsf2foku4t] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color-light, #a5b4fc);
    margin: 0 0 12px;
    font-weight: 600;
}

/* Endpoints */
.shared-endpoints[b-fsf2foku4t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shared-endpoint[b-fsf2foku4t] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}

.endpoint-role[b-fsf2foku4t] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.endpoint-role.source[b-fsf2foku4t] { background: var(--accent-color-20, rgba(99, 102, 241, 0.2)); color: var(--accent-color, #6366f1); }
.endpoint-role.target[b-fsf2foku4t] { background: rgba(34, 197, 94, 0.2); color: #22c55e; }

.endpoint-info[b-fsf2foku4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.endpoint-name[b-fsf2foku4t] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
}

.endpoint-coords[b-fsf2foku4t] {
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted, #94a3b8);
}

.endpoint-height[b-fsf2foku4t] {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
}

.shared-endpoint-arrow[b-fsf2foku4t] {
    flex-shrink: 0;
}

.shared-equipment[b-fsf2foku4t] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.1));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.equip-item[b-fsf2foku4t] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.equip-label[b-fsf2foku4t] { color: var(--text-muted, #94a3b8); }
.equip-value[b-fsf2foku4t] { color: var(--text-secondary, #cbd5e1); font-family: var(--font-mono, monospace); }

/* Metrics */
.shared-metrics[b-fsf2foku4t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.metric-item[b-fsf2foku4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-label[b-fsf2foku4t] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
}

.metric-value[b-fsf2foku4t] {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    color: var(--text-primary, #f8fafc);
}

.metric-value.highlight[b-fsf2foku4t] {
    color: var(--accent-color, #6366f1);
}

.metric-unit[b-fsf2foku4t] {
    font-size: 10px;
    color: var(--text-muted, #94a3b8);
}

/* Link Budget Table */
.shared-budget-table[b-fsf2foku4t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shared-budget-table th[b-fsf2foku4t] {
    text-align: left;
    padding: 8px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15));
    font-weight: 600;
}

.shared-budget-table td[b-fsf2foku4t] {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.08));
    color: var(--text-secondary, #cbd5e1);
}

.shared-budget-table .value-col[b-fsf2foku4t] {
    text-align: right;
    font-family: var(--font-mono, monospace);
}

.shared-budget-table .gain-row .value-col[b-fsf2foku4t] { color: #4ade80; }
.shared-budget-table .loss-row .value-col[b-fsf2foku4t] { color: #f87171; }

.shared-budget-table .total-row td[b-fsf2foku4t] {
    border-top: 2px solid var(--accent-color-30, rgba(99, 102, 241, 0.3));
    border-bottom: none;
    padding-top: 10px;
    color: var(--accent-color, #6366f1);
}

/* Path Stats */
.shared-path-stats[b-fsf2foku4t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-item[b-fsf2foku4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-fsf2foku4t] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
}

.stat-value[b-fsf2foku4t] {
    font-size: 14px;
    font-family: var(--font-mono, monospace);
    color: var(--text-primary, #f8fafc);
}

/* Rain Note */
.rain-note p[b-fsf2foku4t] {
    margin: 0;
    font-size: 13px;
}

.rain-warning[b-fsf2foku4t] {
    color: #f59e0b;
}

.rain-ok[b-fsf2foku4t] {
    color: #4ade80;
}

/* Footer */
.shared-footer[b-fsf2foku4t] {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.1));
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-family: var(--font-mono, monospace);
}

/* Responsive */
@media (max-width: 640px) {
    .shared-root[b-fsf2foku4t] { padding: 16px; }
    .shared-grid[b-fsf2foku4t] { grid-template-columns: 1fr; }
    .shared-endpoints[b-fsf2foku4t] { flex-direction: column; }
    .shared-endpoint-arrow[b-fsf2foku4t] { transform: rotate(90deg); }
    .shared-path-stats[b-fsf2foku4t] { grid-template-columns: repeat(2, 1fr); }
    .shared-header[b-fsf2foku4t] { flex-direction: column; gap: 8px; }
    .shared-header-right[b-fsf2foku4t] { align-items: flex-start; }
    .shared-viability[b-fsf2foku4t] { flex-wrap: wrap; }
}
/* /Features/Calls/Components/Admin/AdminCallTranscript.razor.rz.scp.css */
/*
 * AdminCallTranscript Component Styles
 * Admin-specific styling extending the base transcript component.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   ADMIN TRANSCRIPT CONTAINER OVERRIDE
   ========================================================================== */

[b-dn7z0jicyg] .admin-transcript {
    border-color: var(--accent-color);
    border-width: 1px;
}

/* ==========================================================================
   ADMIN HEADER
   ========================================================================== */

.admin-header[b-dn7z0jicyg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--accent-color-5);
    flex-wrap: wrap;
}

.header-left[b-dn7z0jicyg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 200px;
}

.header-right[b-dn7z0jicyg] {
    flex-shrink: 0;
}

/* Caller Info Section */
.caller-info[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.direction-icon[b-dn7z0jicyg] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.caller-details[b-dn7z0jicyg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.caller-name[b-dn7z0jicyg] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.caller-phone[b-dn7z0jicyg] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* Call Info Section */
.call-info[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.direction-badge[b-dn7z0jicyg] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: capitalize;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.direction-badge.inbound[b-dn7z0jicyg] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.direction-badge.outbound[b-dn7z0jicyg] {
    background: var(--info-color-15);
    color: var(--info-color);
}

.separator[b-dn7z0jicyg] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.duration[b-dn7z0jicyg] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.recording-badge[b-dn7z0jicyg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--error-color-15);
    color: var(--error-color);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.recording-dot[b-dn7z0jicyg] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--error-color);
    animation: recordingPulse-b-dn7z0jicyg 1.5s ease-in-out infinite;
}

@keyframes recordingPulse-b-dn7z0jicyg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==========================================================================
   ADMIN INPUT AREA
   ========================================================================== */

.admin-input[b-dn7z0jicyg] {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--white-overlay-02);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Input Controls Row */
.input-controls[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

/* Speaker Toggle Buttons */
.speaker-toggle[b-dn7z0jicyg] {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.toggle-btn[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-btn svg[b-dn7z0jicyg] {
    flex-shrink: 0;
}

.toggle-btn:not(:last-child)[b-dn7z0jicyg] {
    border-right: 1px solid var(--border-color);
}

.toggle-btn:hover:not(.active)[b-dn7z0jicyg] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.toggle-btn.active[b-dn7z0jicyg] {
    background: var(--accent-color);
    color: white;
}

/* Silent Mode Toggle */
.silent-toggle[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.silent-toggle:hover[b-dn7z0jicyg] {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.silent-toggle:has(input:checked)[b-dn7z0jicyg] {
    background: var(--warning-color-15);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.silent-toggle input[b-dn7z0jicyg] {
    display: none;
}

.silent-toggle svg[b-dn7z0jicyg] {
    flex-shrink: 0;
}

/* Shortcut Hint */
.shortcut-hint[b-dn7z0jicyg] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: auto;
}

/* Input Wrapper */
.input-wrapper[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    transition: all var(--transition-fast);
}

.input-wrapper:focus-within[b-dn7z0jicyg] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

.input-wrapper input[b-dn7z0jicyg] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);
    outline: none;
}

.input-wrapper input[b-dn7z0jicyg]::placeholder {
    color: var(--text-secondary);
}

/* Send Button */
.btn-send[b-dn7z0jicyg] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-send svg[b-dn7z0jicyg] {
    flex-shrink: 0;
}

.btn-send:disabled[b-dn7z0jicyg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-send.active[b-dn7z0jicyg] {
    background: var(--accent-gradient);
    color: white;
}

.btn-send.active:hover:not(:disabled)[b-dn7z0jicyg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-color-30);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .admin-header[b-dn7z0jicyg] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right[b-dn7z0jicyg] {
        margin-top: var(--space-md);
    }

    .input-controls[b-dn7z0jicyg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .shortcut-hint[b-dn7z0jicyg] {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .admin-header[b-dn7z0jicyg] {
        padding: var(--space-md);
    }

    .admin-input[b-dn7z0jicyg] {
        padding: var(--space-md);
    }

    .caller-name[b-dn7z0jicyg] {
        font-size: var(--text-base);
    }

    .speaker-toggle[b-dn7z0jicyg] {
        width: 100%;
    }

    .toggle-btn[b-dn7z0jicyg] {
        flex: 1;
        justify-content: center;
    }
}
/* /Features/Calls/Components/Admin/AdminPresenceIndicator.razor.rz.scp.css */
/*
 * AdminPresenceIndicator Component Styles
 * Small badge showing admin viewers currently watching the call.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.admin-presence-indicator[b-635bs28422] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 8px;
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.admin-presence-indicator:hover[b-635bs28422] {
    background: var(--accent-color-15);
    border-color: var(--accent-color);
}

/* ==========================================================================
   ICON & COUNT
   ========================================================================== */

.presence-icon[b-635bs28422] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.presence-icon svg[b-635bs28422] {
    flex-shrink: 0;
}

.presence-count[b-635bs28422] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-color);
}

/* ==========================================================================
   POPOVER
   ========================================================================== */

.presence-popover[b-635bs28422] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    padding: var(--space-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 100;
    animation: popoverIn-b-635bs28422 0.2s ease-out;
}

.presence-popover[b-635bs28422]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

@keyframes popoverIn-b-635bs28422 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==========================================================================
   POPOVER CONTENT
   ========================================================================== */

.popover-header[b-635bs28422] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.viewer-list[b-635bs28422] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.viewer-item[b-635bs28422] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.viewer-dot[b-635bs28422] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
    animation: dotPulse-b-635bs28422 2s ease-in-out infinite;
}

@keyframes dotPulse-b-635bs28422 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 var(--success-color-40);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px transparent;
    }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 480px) {
    .presence-popover[b-635bs28422] {
        left: auto;
        right: 0;
        transform: none;
    }

    .presence-popover[b-635bs28422]::before {
        left: auto;
        right: 16px;
        transform: rotate(45deg);
    }
}
/* /Features/Calls/Components/Admin/CallControlPanel.razor.rz.scp.css */
/*
 * CallControlPanel Component Styles
 * Control buttons and mode switcher for admin call management.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.call-control-panel[b-co3rykcytp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* ==========================================================================
   CONTROL BUTTONS ROW
   ========================================================================== */

.control-buttons[b-co3rykcytp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.control-btn[b-co3rykcytp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    min-width: 64px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.control-btn svg[b-co3rykcytp] {
    flex-shrink: 0;
}

.btn-label[b-co3rykcytp] {
    font-weight: var(--font-medium);
}

/* Control Button Hover States */
.control-btn:hover:not(.danger)[b-co3rykcytp] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.control-btn:active:not(.danger)[b-co3rykcytp] {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

.control-btn:focus-visible[b-co3rykcytp] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Active State */
.control-btn.active[b-co3rykcytp] {
    background: var(--accent-color-15);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.control-btn.active svg[b-co3rykcytp] {
    color: var(--accent-color);
}

/* Listen Button Specific */
.control-btn.listen.active[b-co3rykcytp] {
    background: var(--success-color-15);
    border-color: var(--success-color);
    color: var(--success-color);
}

.control-btn.listen.active svg[b-co3rykcytp] {
    color: var(--success-color);
    animation: pulse-b-co3rykcytp 1.5s ease-in-out infinite;
}

/* Mic Button Specific */
.control-btn.mic.active[b-co3rykcytp] {
    background: var(--error-color-15);
    border-color: var(--error-color);
    color: var(--error-color);
}

.control-btn.mic.active svg[b-co3rykcytp] {
    color: var(--error-color);
}

/* Hangup Button - Danger Style */
.control-btn.danger[b-co3rykcytp] {
    background: var(--error-color-10);
    border-color: var(--error-color);
    color: var(--error-color);
}

.control-btn.danger:hover[b-co3rykcytp] {
    background: var(--error-color);
    color: white;
}

.control-btn.danger:active[b-co3rykcytp] {
    transform: scale(0.95);
}

/* ==========================================================================
   MODE SWITCHER
   ========================================================================== */

.mode-switcher[b-co3rykcytp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.mode-label[b-co3rykcytp] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.mode-options[b-co3rykcytp] {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mode-option[b-co3rykcytp] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mode-option svg[b-co3rykcytp] {
    flex-shrink: 0;
}

.mode-option input[b-co3rykcytp] {
    display: none;
}

.mode-option:not(:last-child)[b-co3rykcytp] {
    border-right: 1px solid var(--border-color);
}

.mode-option:hover:not(.active)[b-co3rykcytp] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.mode-option:focus-visible[b-co3rykcytp] {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    z-index: 1;
}

.mode-option:active:not(.active)[b-co3rykcytp] {
    background: var(--bg-active);
}

.mode-option.active[b-co3rykcytp] {
    background: var(--accent-color);
    color: white;
    box-shadow: inset 0 2px 4px var(--black-overlay-20);
}

/* Mode Option Icons in Active State */
.mode-option.active svg[b-co3rykcytp] {
    color: white;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes pulse-b-co3rykcytp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 640px) {
    .call-control-panel[b-co3rykcytp] {
        padding: var(--space-md);
    }

    .control-buttons[b-co3rykcytp] {
        gap: var(--space-sm);
    }

    .control-btn[b-co3rykcytp] {
        padding: var(--space-sm);
        min-width: 52px;
    }

    .control-btn svg[b-co3rykcytp] {
        width: 18px;
        height: 18px;
    }

    .mode-options[b-co3rykcytp] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mode-option[b-co3rykcytp] {
        flex: 1;
        min-width: 90px;
        justify-content: center;
    }

    .mode-option:not(:last-child)[b-co3rykcytp] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

@media (max-width: 380px) {
    .control-buttons[b-co3rykcytp] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }

    .control-btn[b-co3rykcytp] {
        min-width: unset;
    }

    .control-btn.hangup[b-co3rykcytp] {
        grid-column: span 3;
    }
}
/* /Features/Calls/Components/Admin/CallMetadataPanel.razor.rz.scp.css */
/*
 * CallMetadataPanel Component Styles
 * Right-side stats panel showing call metadata and real-time analytics.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.call-metadata-panel[b-ljm0mgfy9h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    min-width: 180px;
}

/* ==========================================================================
   METADATA ITEMS
   ========================================================================== */

.metadata-item[b-ljm0mgfy9h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 70px;
}

.metadata-label[b-ljm0mgfy9h] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metadata-value[b-ljm0mgfy9h] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* ==========================================================================
   DURATION
   ========================================================================== */

.metadata-item.duration .metadata-value[b-ljm0mgfy9h] {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--accent-color);
}

/* ==========================================================================
   WORD COUNTS
   ========================================================================== */

.word-count-row[b-ljm0mgfy9h] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.count[b-ljm0mgfy9h] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.count svg[b-ljm0mgfy9h] {
    flex-shrink: 0;
    opacity: 0.7;
}

.count.caller[b-ljm0mgfy9h] {
    color: var(--text-secondary);
}

.count.agent[b-ljm0mgfy9h] {
    color: var(--accent-color);
}

.word-count-row .separator[b-ljm0mgfy9h] {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* ==========================================================================
   SENTIMENT INDICATOR
   ========================================================================== */

.sentiment-indicator[b-ljm0mgfy9h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: capitalize;
}

.sentiment-indicator.positive[b-ljm0mgfy9h] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.sentiment-indicator.negative[b-ljm0mgfy9h] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.sentiment-indicator.neutral[b-ljm0mgfy9h] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ==========================================================================
   TOPICS LIST
   ========================================================================== */

.topics-list[b-ljm0mgfy9h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.topic-tag[b-ljm0mgfy9h] {
    display: inline-block;
    padding: 2px 6px;
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    color: var(--accent-color);
    white-space: nowrap;
}

.topic-more[b-ljm0mgfy9h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    color: var(--text-muted);
}

/* ==========================================================================
   TRANSFERS
   ========================================================================== */

.transfer-count[b-ljm0mgfy9h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--warning-color-15);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--warning-color);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .call-metadata-panel[b-ljm0mgfy9h] {
        justify-content: space-between;
    }

    .metadata-item[b-ljm0mgfy9h] {
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .call-metadata-panel[b-ljm0mgfy9h] {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .metadata-item.topics[b-ljm0mgfy9h] {
        width: 100%;
    }
}
/* /Features/Calls/Components/Admin/CompletedCallDetailPanel.razor.rz.scp.css */
.completed-call-panel[b-y0khycaaxf] {
    padding: var(--space-md);
}

.loading-container[b-y0khycaaxf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.call-header-section[b-y0khycaaxf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.caller-info[b-y0khycaaxf] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.caller-details[b-y0khycaaxf] {
    display: flex;
    flex-direction: column;
}

.call-meta-info[b-y0khycaaxf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.recording-section[b-y0khycaaxf],
.transcript-section[b-y0khycaaxf],
.stats-section[b-y0khycaaxf] {
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.transcript-body[b-y0khycaaxf] {
    max-height: 500px;
    overflow-y: auto;
    padding: var(--space-sm);
}

.transcript-entry[b-y0khycaaxf] {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
}

.transcript-entry.speaker-caller[b-y0khycaaxf] {
    background: var(--accent-color-10);
    border-left-color: var(--accent-color);
}

.transcript-entry.speaker-agent[b-y0khycaaxf] {
    background: var(--success-color-10);
    border-left-color: var(--success-color);
}

.transcript-entry.speaker-system[b-y0khycaaxf] {
    background: var(--white-overlay-05);
    border-left-color: var(--text-muted);
}

.transcript-entry.injected[b-y0khycaaxf] {
    border-left-color: var(--warning-color);
}

.transcript-entry.entry-type-tool-call[b-y0khycaaxf],
.transcript-entry.entry-type-tool-result[b-y0khycaaxf] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.entry-header[b-y0khycaaxf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.speaker-name[b-y0khycaaxf] {
    font-weight: 600;
    font-size: 0.875rem;
}

.timestamp[b-y0khycaaxf] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.entry-content[b-y0khycaaxf] {
    line-height: 1.5;
}

.stat-item[b-y0khycaaxf] {
    text-align: center;
    padding: var(--space-sm);
}

@media (max-width: 768px) {
    .call-header-section[b-y0khycaaxf] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .call-meta-info[b-y0khycaaxf] {
        align-items: flex-start;
    }
}
/* /Features/Calls/Components/Base/CallTranscriptBase.razor.rz.scp.css */
/*
 * CallTranscriptBase Component Styles
 * Base styling for call transcript visualization with glassmorphism design.
 * Uses CSS variables from ayva-theme.css for consistency.
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.call-transcript-container[b-3b2zcj8v9a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    position: relative;
}

/* ==========================================================================
   LOADING OVERLAY
   ========================================================================== */

.loading-overlay[b-3b2zcj8v9a] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    background: var(--bg-card);
    z-index: 10;
}

.loading-overlay .spinner[b-3b2zcj8v9a] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-3b2zcj8v9a 0.8s linear infinite;
}

.loading-overlay span[b-3b2zcj8v9a] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ==========================================================================
   CALL ENDED OVERLAY
   ========================================================================== */

.call-ended-overlay[b-3b2zcj8v9a] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: var(--black-overlay-90);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.call-ended-icon[b-3b2zcj8v9a] {
    color: var(--error-color);
    opacity: 0.8;
}

.call-ended-text[b-3b2zcj8v9a] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.end-reason[b-3b2zcj8v9a] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ==========================================================================
   TRANSCRIPT BODY
   ========================================================================== */

.transcript-body[b-3b2zcj8v9a] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    scroll-behavior: smooth;
}

/* Custom scrollbar for transcript */
.transcript-body[b-3b2zcj8v9a]::-webkit-scrollbar {
    width: 6px;
}

.transcript-body[b-3b2zcj8v9a]::-webkit-scrollbar-track {
    background: transparent;
}

.transcript-body[b-3b2zcj8v9a]::-webkit-scrollbar-thumb {
    background: var(--accent-color-30);
    border-radius: 3px;
}

.transcript-body[b-3b2zcj8v9a]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-50);
}

/* ==========================================================================
   TRANSCRIPT ENTRY
   ========================================================================== */

.transcript-entry[b-3b2zcj8v9a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 3px solid transparent;
    animation: fadeInUp-b-3b2zcj8v9a 0.2s ease-out;
    max-width: 85%;
}

/* Speaker-specific styling */
.transcript-entry.speaker-caller[b-3b2zcj8v9a] {
    align-self: flex-start;
    border-left-color: var(--text-primary);
    background: var(--white-overlay-05);
}

.transcript-entry.speaker-agent[b-3b2zcj8v9a] {
    align-self: flex-end;
    border-left-color: var(--accent-color);
    border-left: none;
    border-right: 3px solid var(--accent-color);
    background: var(--accent-color-10);
}

.transcript-entry.speaker-system[b-3b2zcj8v9a] {
    align-self: center;
    border-left-color: var(--text-muted);
    background: var(--white-overlay-05);
    max-width: 70%;
    text-align: center;
}

/* Injected message styling */
.transcript-entry.injected[b-3b2zcj8v9a] {
    position: relative;
}

.transcript-entry.injected[b-3b2zcj8v9a]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 3px;
    height: 100%;
    background: var(--warning-color);
    border-radius: 2px 0 0 2px;
}

.transcript-entry.injected.speaker-agent[b-3b2zcj8v9a]::before {
    left: auto;
    right: -3px;
    border-radius: 0 2px 2px 0;
}

.transcript-entry.silent-injection[b-3b2zcj8v9a] {
    opacity: 0.7;
    border-style: dashed;
}

/* Entry type styling */
.transcript-entry.entry-type-tool-call[b-3b2zcj8v9a],
.transcript-entry.entry-type-tool-result[b-3b2zcj8v9a] {
    background: var(--info-color-10);
    border-left-color: var(--info-color);
    max-width: 70%;
}

.transcript-entry.entry-type-system-note[b-3b2zcj8v9a] {
    background: var(--white-overlay-05);
    border-left-color: var(--text-muted);
    font-style: italic;
}

/* Entry header */
.entry-header[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
}

.speaker-label[b-3b2zcj8v9a] {
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.speaker-agent .speaker-label[b-3b2zcj8v9a] {
    color: var(--accent-light);
}

.timestamp[b-3b2zcj8v9a] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* Injection badge */
.injection-badge[b-3b2zcj8v9a] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 6px;
    background: var(--warning-color-20);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    font-size: 0.65rem;
}

.injection-badge svg[b-3b2zcj8v9a] {
    flex-shrink: 0;
}

.injector-name[b-3b2zcj8v9a] {
    opacity: 0.8;
}

/* Entry content */
.entry-content[b-3b2zcj8v9a] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.5;
    word-wrap: break-word;
}

/* Tool call content */
.tool-call-content[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.tool-icon[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    color: var(--info-color);
}

.tool-name[b-3b2zcj8v9a] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--info-text);
    background: var(--info-color-15);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.tool-status[b-3b2zcj8v9a] {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.tool-status.success[b-3b2zcj8v9a] {
    background: var(--success-bg);
    color: var(--success-text);
}

.tool-status.failed[b-3b2zcj8v9a] {
    background: var(--error-bg);
    color: var(--error-text);
}

/* Confidence indicator */
.confidence-indicator[b-3b2zcj8v9a] {
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
    margin-top: var(--space-xs);
    overflow: hidden;
}

.confidence-bar[b-3b2zcj8v9a] {
    display: block;
    height: 100%;
    width: var(--confidence, 0%);
    background: var(--success-color);
    transition: width var(--transition-smooth);
}

/* ==========================================================================
   SPEAKING INDICATOR
   ========================================================================== */

.speaking-indicator[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--white-overlay-03);
    border-radius: var(--radius-lg);
    animation: fadeIn-b-3b2zcj8v9a 0.3s ease-out;
}

.speaking-indicator.caller-speaking[b-3b2zcj8v9a] {
    align-self: flex-start;
}

.speaking-indicator.agent-speaking[b-3b2zcj8v9a] {
    align-self: flex-end;
}

.speaking-avatar[b-3b2zcj8v9a] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border-radius: 50%;
    color: var(--text-secondary);
    animation: pulse-b-3b2zcj8v9a 1.5s ease-in-out infinite;
}

.speaking-avatar.agent[b-3b2zcj8v9a] {
    background: var(--accent-color-20);
    color: var(--accent-light);
}

.speaking-label[b-3b2zcj8v9a] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Waveform animation */
.waveform[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding-left: var(--space-sm);
}

.wave-bar[b-3b2zcj8v9a] {
    width: 3px;
    height: 8px;
    background: var(--success-color);
    border-radius: 2px;
    animation: waveform-b-3b2zcj8v9a 0.5s ease-in-out infinite;
    transform-origin: bottom;
}

.wave-bar:nth-child(1)[b-3b2zcj8v9a] { animation-delay: 0s; }
.wave-bar:nth-child(2)[b-3b2zcj8v9a] { animation-delay: 0.1s; }
.wave-bar:nth-child(3)[b-3b2zcj8v9a] { animation-delay: 0.2s; }
.wave-bar:nth-child(4)[b-3b2zcj8v9a] { animation-delay: 0.3s; }
.wave-bar:nth-child(5)[b-3b2zcj8v9a] { animation-delay: 0.4s; }

@keyframes waveform-b-3b2zcj8v9a {
    0%, 100% {
        height: 8px;
    }
    50% {
        height: calc(8px + var(--audio-level, 50%) * 0.12);
    }
}

/* ==========================================================================
   AI STATUS INDICATOR
   ========================================================================== */

.ai-status-indicator[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-color-10);
    border-top: 1px solid var(--border-color);
    animation: fadeIn-b-3b2zcj8v9a 0.2s ease-out;
}

.ai-status-icon[b-3b2zcj8v9a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Thinking dots */
.thinking-dots[b-3b2zcj8v9a] {
    display: flex;
    gap: 4px;
}

.thinking-dots span[b-3b2zcj8v9a] {
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: thinkingDot-b-3b2zcj8v9a 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(1)[b-3b2zcj8v9a] { animation-delay: 0s; }
.thinking-dots span:nth-child(2)[b-3b2zcj8v9a] { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3)[b-3b2zcj8v9a] { animation-delay: 0.4s; }

@keyframes thinkingDot-b-3b2zcj8v9a {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tool call icon */
.ai-status-indicator.tool_call .ai-status-icon svg[b-3b2zcj8v9a] {
    color: var(--info-color);
    animation: toolPulse-b-3b2zcj8v9a 1s ease-in-out infinite;
}

@keyframes toolPulse-b-3b2zcj8v9a {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responding pulse ring */
.pulse-ring[b-3b2zcj8v9a] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: pulseRing-b-3b2zcj8v9a 1.2s ease-out infinite;
}

@keyframes pulseRing-b-3b2zcj8v9a {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.ai-status-text[b-3b2zcj8v9a] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ai-status-elapsed[b-3b2zcj8v9a] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fadeIn-b-3b2zcj8v9a {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-3b2zcj8v9a {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-3b2zcj8v9a {
    to { transform: rotate(360deg); }
}

@keyframes pulse-b-3b2zcj8v9a {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .transcript-entry[b-3b2zcj8v9a] {
        max-width: 95%;
        padding: var(--space-sm) var(--space-md);
    }

    .transcript-body[b-3b2zcj8v9a] {
        padding: var(--space-md);
    }

    .speaking-indicator[b-3b2zcj8v9a] {
        padding: var(--space-sm) var(--space-md);
    }
}

@media (max-width: 480px) {
    .entry-header[b-3b2zcj8v9a] {
        flex-wrap: wrap;
    }

    .injection-badge[b-3b2zcj8v9a] {
        margin-top: var(--space-xs);
    }

    .tool-call-content[b-3b2zcj8v9a] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Features/Calls/Components/Customer/CustomerCallTranscript.razor.rz.scp.css */
/*
 * CustomerCallTranscript Component Styles
 * Customer-facing call transcript styling with glassmorphism design.
 * Uses CSS variables from ayva-theme.css - NO hardcoded values.
 */

/* ==========================================================================
   CONTAINER CUSTOMIZATION
   ========================================================================== */

[b-5wexvwmg51] .call-transcript-container.customer-transcript {
    background: linear-gradient(
        135deg,
        var(--bg-primary) 0%,
        var(--bg-secondary) 100%
    );
    border-color: var(--white-overlay-08);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   CUSTOMER HEADER
   ========================================================================== */

.customer-header[b-5wexvwmg51] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-color);
    background: var(--white-overlay-02);
}

.header-icon[b-5wexvwmg51] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px var(--accent-color-30);
}

.header-text[b-5wexvwmg51] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.header-text h2[b-5wexvwmg51] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.duration[b-5wexvwmg51] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.call-status-badge[b-5wexvwmg51] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--success-bg);
    border-radius: var(--radius-full);
    color: var(--success-color);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}

.call-status-badge .status-dot[b-5wexvwmg51] {
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    animation: statusPulse-b-5wexvwmg51 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px var(--success-color-50);
}

@keyframes statusPulse-b-5wexvwmg51 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* ==========================================================================
   CUSTOMER INPUT
   ========================================================================== */

.customer-input[b-5wexvwmg51] {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--white-overlay-02);
}

.input-wrapper[b-5wexvwmg51] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    transition: all var(--transition-fast);
}

.input-wrapper:focus-within[b-5wexvwmg51] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

.input-wrapper input[b-5wexvwmg51] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    padding: var(--space-sm) var(--space-md);
    outline: none;
}

.input-wrapper input[b-5wexvwmg51]::placeholder {
    color: var(--text-muted);
}

.input-wrapper input:disabled[b-5wexvwmg51] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-send[b-5wexvwmg51] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-send:hover:not(:disabled)[b-5wexvwmg51] {
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--accent-color-30);
}

.btn-send:active:not(:disabled)[b-5wexvwmg51] {
    transform: scale(0.98);
}

.btn-send:disabled[b-5wexvwmg51] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   CUSTOMER FOOTER
   ========================================================================== */

.customer-footer[b-5wexvwmg51] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border-color);
    background: var(--white-overlay-02);
}

.btn-control[b-5wexvwmg51] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 120px;
}

.btn-control:hover:not(:disabled)[b-5wexvwmg51] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.btn-control:active:not(:disabled)[b-5wexvwmg51] {
    transform: translateY(0);
}

.btn-control:disabled[b-5wexvwmg51] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-control.muted[b-5wexvwmg51] {
    background: var(--warning-color-10);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.btn-control.muted:hover:not(:disabled)[b-5wexvwmg51] {
    background: var(--warning-color-15);
}

.btn-end-call[b-5wexvwmg51] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--error-bg);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-lg);
    color: var(--error-color);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 140px;
}

.btn-end-call:hover:not(:disabled)[b-5wexvwmg51] {
    background: var(--error-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--error-color-30);
}

.btn-end-call:active:not(:disabled)[b-5wexvwmg51] {
    transform: translateY(0);
}

.btn-end-call:disabled[b-5wexvwmg51] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .customer-header[b-5wexvwmg51] {
        padding: var(--space-md) var(--space-lg);
        gap: var(--space-md);
    }

    .header-icon[b-5wexvwmg51] {
        width: 48px;
        height: 48px;
    }

    .header-icon svg[b-5wexvwmg51] {
        width: 24px;
        height: 24px;
    }

    .header-text h2[b-5wexvwmg51] {
        font-size: var(--text-lg);
    }

    .customer-input[b-5wexvwmg51] {
        padding: var(--space-sm) var(--space-md);
    }

    .customer-footer[b-5wexvwmg51] {
        padding: var(--space-md) var(--space-lg);
        gap: var(--space-md);
    }

    .btn-control[b-5wexvwmg51],
    .btn-end-call[b-5wexvwmg51] {
        padding: var(--space-sm) var(--space-lg);
        min-width: 100px;
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .customer-header[b-5wexvwmg51] {
        flex-wrap: wrap;
    }

    .call-status-badge[b-5wexvwmg51] {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
    }

    .customer-footer[b-5wexvwmg51] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn-control[b-5wexvwmg51],
    .btn-end-call[b-5wexvwmg51] {
        width: 100%;
        justify-content: center;
    }

    /* Hide text labels on very small screens */
    .btn-control span[b-5wexvwmg51],
    .btn-end-call span[b-5wexvwmg51] {
        display: none;
    }

    .btn-control[b-5wexvwmg51],
    .btn-end-call[b-5wexvwmg51] {
        min-width: auto;
        padding: var(--space-md);
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.btn-send:focus-visible[b-5wexvwmg51],
.btn-control:focus-visible[b-5wexvwmg51],
.btn-end-call:focus-visible[b-5wexvwmg51],
.input-wrapper input:focus-visible[b-5wexvwmg51] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .call-status-badge .status-dot[b-5wexvwmg51] {
        animation: none;
    }

    .btn-send[b-5wexvwmg51],
    .btn-control[b-5wexvwmg51],
    .btn-end-call[b-5wexvwmg51] {
        transition: none;
    }
}
/* /Features/Calls/Components/Dialogs/CallForwardingModal.razor.rz.scp.css */
.dialog-header[b-wtr2s9kip8] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.transfer-dialog-content[b-wtr2s9kip8] {
    min-width: 400px;
    max-width: 500px;
    min-height: 300px;
}

.loading-state[b-wtr2s9kip8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: var(--space-md);
}

.transfer-tabs[b-wtr2s9kip8] {
    background: transparent;
}

.tab-content[b-wtr2s9kip8] {
    padding: var(--space-md) 0;
    max-height: 300px;
    overflow-y: auto;
}

.employee-list[b-wtr2s9kip8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.employee-item[b-wtr2s9kip8] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid transparent;
    background: var(--white-overlay-03);
}

.employee-item:hover[b-wtr2s9kip8] {
    background: var(--white-overlay-06);
}

.employee-item.selected[b-wtr2s9kip8] {
    border-color: var(--accent-color);
    background: var(--accent-color-10);
}

.employee-details[b-wtr2s9kip8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.employee-details .mud-typography[b-wtr2s9kip8] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.transfer-summary[b-wtr2s9kip8] {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--white-overlay-03);
    border: 1px solid var(--border-color);
}

/* Scrollbar styling */
.tab-content[b-wtr2s9kip8]::-webkit-scrollbar {
    width: 6px;
}

.tab-content[b-wtr2s9kip8]::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content[b-wtr2s9kip8]::-webkit-scrollbar-thumb {
    background: var(--white-overlay-20);
    border-radius: 3px;
}

.tab-content[b-wtr2s9kip8]::-webkit-scrollbar-thumb:hover {
    background: var(--white-overlay-30);
}

/* Responsive */
@media (max-width: 480px) {
    .transfer-dialog-content[b-wtr2s9kip8] {
        min-width: unset;
        width: 100%;
    }
}
/* /Features/Calls/Components/Shared/AIStatusIndicator.razor.rz.scp.css */
/* ============================================
   AI STATUS INDICATOR STYLES
   ============================================ */

.ai-status-indicator[b-najdlp7puj] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    animation: statusAppear-b-najdlp7puj 0.3s ease-out;
    transition: all var(--transition-normal);
}

.ai-status-indicator:hover[b-najdlp7puj] {
    border-color: var(--border-color-medium);
    box-shadow: var(--shadow-sm);
}

@keyframes statusAppear-b-najdlp7puj {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status-specific styling */
.ai-status-indicator.status-idle[b-najdlp7puj] {
    border-color: var(--border-color);
}

.ai-status-indicator.status-thinking[b-najdlp7puj] {
    border-color: var(--accent-color-40);
    background: linear-gradient(135deg, var(--accent-color-10), var(--accent-color-5));
}

.ai-status-indicator.status-responding[b-najdlp7puj] {
    border-color: var(--success-color-40);
    background: linear-gradient(135deg, var(--success-color-10), var(--success-color-5));
}

.ai-status-indicator.status-tool-call[b-najdlp7puj] {
    border-color: var(--warning-color-40);
    background: linear-gradient(135deg, var(--warning-color-10), var(--warning-color-5));
}

/* ============================================
   STATUS ICON CONTAINER
   ============================================ */

.status-icon-container[b-najdlp7puj] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-icon-container .mud-icon-root[b-najdlp7puj] {
    position: relative;
    z-index: 1;
}

/* ============================================
   THINKING SPINNER
   ============================================ */

.thinking-spinner[b-najdlp7puj] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thinking-spinner .mud-icon-root[b-najdlp7puj] {
    color: var(--accent-color);
}

.spinner-ring[b-najdlp7puj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spinRing-b-najdlp7puj 1s linear infinite;
}

@keyframes spinRing-b-najdlp7puj {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   RESPONDING INDICATOR
   ============================================ */

.responding-indicator[b-najdlp7puj] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.responding-indicator .mud-icon-root[b-najdlp7puj] {
    color: var(--success-color);
}

.pulse-dot[b-najdlp7puj] {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--success-color);
    border-radius: 50%;
    animation: pulseDot-b-najdlp7puj 1.2s ease-in-out infinite;
}

@keyframes pulseDot-b-najdlp7puj {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* ============================================
   TOOL INDICATOR
   ============================================ */

.tool-indicator[b-najdlp7puj] {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-indicator .mud-icon-root[b-najdlp7puj] {
    color: var(--warning-color);
}

.tool-spinner[b-najdlp7puj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--warning-color);
    border-radius: 50%;
    animation: toolSpin-b-najdlp7puj 2s linear infinite;
    opacity: 0.6;
}

@keyframes toolSpin-b-najdlp7puj {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   STATUS CONTENT
   ============================================ */

.status-content[b-najdlp7puj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.status-label[b-najdlp7puj] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.status-thinking .status-label[b-najdlp7puj] {
    color: var(--accent-color);
}

.status-responding .status-label[b-najdlp7puj] {
    color: var(--success-color);
}

.status-tool-call .status-label[b-najdlp7puj] {
    color: var(--warning-color);
}

.tool-name[b-najdlp7puj] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.tool-description[b-najdlp7puj] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   ELAPSED TIMER
   ============================================ */

.elapsed-timer[b-najdlp7puj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.elapsed-time[b-najdlp7puj] {
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

/* ============================================
   CONFIDENCE BADGE
   ============================================ */

.confidence-badge[b-najdlp7puj] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.confidence-badge:hover[b-najdlp7puj] {
    transform: scale(1.05);
}

.confidence-badge .mud-icon-root[b-najdlp7puj] {
    font-size: 0.875rem;
}

.confidence-badge.high[b-najdlp7puj] {
    background: var(--success-bg);
    color: var(--success-color);
}

.confidence-badge.medium[b-najdlp7puj] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.confidence-badge.low[b-najdlp7puj] {
    background: var(--error-bg);
    color: var(--error-color);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .ai-status-indicator[b-najdlp7puj] {
        padding: 0.5rem 0.75rem;
    }

    .tool-description[b-najdlp7puj] {
        display: none;
    }

    .confidence-badge span[b-najdlp7puj] {
        display: none;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .spinner-ring[b-najdlp7puj],
    .pulse-dot[b-najdlp7puj],
    .tool-spinner[b-najdlp7puj] {
        animation: none;
    }

    .spinner-ring[b-najdlp7puj] {
        border-color: var(--accent-color);
        opacity: 0.6;
    }

    .tool-spinner[b-najdlp7puj] {
        opacity: 0.4;
    }
}
/* /Features/Calls/Components/Shared/SpeakingIndicator.razor.rz.scp.css */
/* ============================================
   SPEAKING INDICATOR STYLES
   ============================================ */

.speaking-indicator[b-66k9vsbbzn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    animation: indicatorAppear-b-66k9vsbbzn 0.3s ease-out;
}

@keyframes indicatorAppear-b-66k9vsbbzn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Caller indicator - left aligned */
.speaking-indicator.speaker-caller[b-66k9vsbbzn] {
    margin-right: auto;
}

/* Agent indicator - right aligned with accent */
.speaking-indicator.speaker-agent[b-66k9vsbbzn] {
    margin-left: auto;
    flex-direction: row-reverse;
    border-color: var(--accent-color-30);
    background: linear-gradient(135deg, var(--accent-color-10), var(--accent-color-5));
}

.speaking-indicator.speaker-agent .speaker-info[b-66k9vsbbzn] {
    text-align: right;
}

/* ============================================
   SPEAKER AVATAR WITH PULSE
   ============================================ */

.speaker-avatar[b-66k9vsbbzn] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.speaking-indicator.speaker-caller .speaker-avatar[b-66k9vsbbzn] {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.speaking-indicator.speaker-agent .speaker-avatar[b-66k9vsbbzn] {
    background: var(--accent-gradient);
    color: white;
}

/* Pulse ring animation */
.pulse-ring[b-66k9vsbbzn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
}

.speaker-avatar.active .pulse-ring[b-66k9vsbbzn] {
    animation: pulseRing-b-66k9vsbbzn 1.5s ease-out infinite;
}

.speaking-indicator.speaker-caller .pulse-ring[b-66k9vsbbzn] {
    border: 2px solid var(--text-secondary);
}

.speaking-indicator.speaker-agent .pulse-ring[b-66k9vsbbzn] {
    border: 2px solid var(--accent-color);
}

@keyframes pulseRing-b-66k9vsbbzn {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ============================================
   SPEAKER INFO
   ============================================ */

.speaker-info[b-66k9vsbbzn] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.speaker-label[b-66k9vsbbzn] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speaking-indicator.speaker-agent .speaker-label[b-66k9vsbbzn] {
    color: var(--accent-color);
}

.speaking-text[b-66k9vsbbzn] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   WAVEFORM VISUALIZATION
   ============================================ */

.waveform-container[b-66k9vsbbzn] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.waveform-bars[b-66k9vsbbzn] {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    height: 1.5rem;
}

.waveform-bar[b-66k9vsbbzn] {
    width: 0.25rem;
    min-height: 0.25rem;
    border-radius: var(--radius-full);
    animation: waveformBounce-b-66k9vsbbzn 0.6s ease-in-out infinite alternate;
}

.speaking-indicator.speaker-caller .waveform-bar[b-66k9vsbbzn] {
    background: var(--success-color);
}

.speaking-indicator.speaker-agent .waveform-bar[b-66k9vsbbzn] {
    background: var(--accent-color);
}

@keyframes waveformBounce-b-66k9vsbbzn {
    0% {
        transform: scaleY(0.4);
    }
    100% {
        transform: scaleY(1);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .speaking-indicator[b-66k9vsbbzn] {
        padding: 0.625rem 0.875rem;
    }

    .speaker-avatar[b-66k9vsbbzn] {
        width: 2rem;
        height: 2rem;
    }

    .waveform-bars[b-66k9vsbbzn] {
        height: 1.25rem;
    }

    .waveform-bar[b-66k9vsbbzn] {
        width: 0.1875rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .speaking-indicator[b-66k9vsbbzn],
    .pulse-ring[b-66k9vsbbzn],
    .waveform-bar[b-66k9vsbbzn] {
        animation: none;
    }

    .speaker-avatar.active .pulse-ring[b-66k9vsbbzn] {
        opacity: 0.5;
    }
}
/* /Features/Calls/Components/Shared/TranscriptMessage.razor.rz.scp.css */
/* ============================================
   TRANSCRIPT MESSAGE STYLES
   ============================================ */

.transcript-message[b-f779ozhadn] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    animation: messageAppear-b-f779ozhadn 0.3s ease-out;
}

@keyframes messageAppear-b-f779ozhadn {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   SPEAKER POSITIONING
   ============================================ */

/* Caller messages - left aligned */
.transcript-message.speaker-caller[b-f779ozhadn] {
    flex-direction: row;
}

/* Agent messages - right aligned with accent */
.transcript-message.speaker-agent[b-f779ozhadn] {
    flex-direction: row-reverse;
}

.transcript-message.speaker-agent .message-content[b-f779ozhadn] {
    align-items: flex-end;
}

.transcript-message.speaker-agent .message-header[b-f779ozhadn] {
    justify-content: flex-end;
}

/* System messages - centered */
.transcript-message.speaker-system[b-f779ozhadn] {
    justify-content: center;
}

.transcript-message.speaker-system .message-content[b-f779ozhadn] {
    align-items: center;
    max-width: 100%;
}

/* ============================================
   MESSAGE AVATAR
   ============================================ */

.message-avatar[b-f779ozhadn] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.message-avatar.caller[b-f779ozhadn] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.message-avatar.agent[b-f779ozhadn] {
    background: var(--accent-gradient);
    color: white;
}

/* ============================================
   MESSAGE CONTENT
   ============================================ */

.message-content[b-f779ozhadn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 80%;
    min-width: 0;
}

.message-header[b-f779ozhadn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.speaker-name[b-f779ozhadn] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.transcript-message.speaker-agent .speaker-name[b-f779ozhadn] {
    color: var(--accent-color);
}

.message-time[b-f779ozhadn] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============================================
   MESSAGE BUBBLE
   ============================================ */

.message-body[b-f779ozhadn] {
    display: flex;
    flex-direction: column;
}

.message-bubble[b-f779ozhadn] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
    word-wrap: break-word;
}

.transcript-message.speaker-caller .message-bubble[b-f779ozhadn] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: var(--radius-sm);
    color: var(--text-primary);
}

.transcript-message.speaker-agent .message-bubble[b-f779ozhadn] {
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

/* Injected message styling */
.transcript-message.injected .message-bubble[b-f779ozhadn] {
    border-style: dashed;
}

.transcript-message.silent-injection .message-bubble[b-f779ozhadn] {
    opacity: 0.7;
    font-style: italic;
}

/* ============================================
   INJECTION BADGE
   ============================================ */

.injection-badge[b-f779ozhadn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--warning-bg);
    color: var(--warning-color);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1px solid var(--warning-color-30);
}

.injection-badge.silent[b-f779ozhadn] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.injection-badge .mud-icon-root[b-f779ozhadn] {
    font-size: 0.75rem;
}

.injector-name[b-f779ozhadn] {
    color: var(--text-muted);
    font-weight: 400;
}

/* ============================================
   CONFIDENCE INDICATOR
   ============================================ */

.confidence-indicator[b-f779ozhadn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.confidence-indicator.high[b-f779ozhadn] {
    background: var(--success-bg);
    color: var(--success-color);
}

.confidence-indicator.medium[b-f779ozhadn] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.confidence-indicator.low[b-f779ozhadn] {
    background: var(--error-bg);
    color: var(--error-color);
}

/* ============================================
   TOOL CALL / RESULT CONTENT
   ============================================ */

.tool-call-content[b-f779ozhadn],
.tool-result-content[b-f779ozhadn] {
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.tool-header[b-f779ozhadn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tool-header .mud-icon-root[b-f779ozhadn] {
    color: var(--accent-color);
}

.tool-name[b-f779ozhadn] {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.tool-status[b-f779ozhadn] {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.tool-status.executing[b-f779ozhadn] {
    background: var(--info-bg);
    color: var(--info-color);
}

.tool-status.success[b-f779ozhadn] {
    background: var(--success-bg);
    color: var(--success-color);
}

.tool-status.failed[b-f779ozhadn] {
    background: var(--error-bg);
    color: var(--error-color);
}

.tool-result-content.success[b-f779ozhadn] {
    border-color: var(--success-color-30);
}

.tool-result-content.success .mud-icon-root[b-f779ozhadn] {
    color: var(--success-color);
}

.tool-result-content.error[b-f779ozhadn] {
    border-color: var(--error-color-30);
}

.tool-result-content.error .mud-icon-root[b-f779ozhadn] {
    color: var(--error-color);
}

/* ============================================
   SYSTEM NOTE CONTENT
   ============================================ */

.system-note-content[b-f779ozhadn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
}

.system-note-content .mud-icon-root[b-f779ozhadn] {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .message-content[b-f779ozhadn] {
        max-width: 90%;
    }

    .message-bubble[b-f779ozhadn] {
        padding: 0.625rem 0.875rem;
    }

    .injection-badge .injector-name[b-f779ozhadn] {
        display: none;
    }
}
/* /Features/ContentManager/Components/ContentEditorModal.razor.rz.scp.css */
/* ============================================
   CONTENT EDITOR MODAL
   Full-screen editor with side-by-side layout
   ============================================ */

/* ============================================
   MODAL OVERLAY & CONTAINER
   ============================================ */

.editor-modal-overlay[b-pmfmi23tc3] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--black-overlay-90);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    outline: none;
}

.editor-modal-container[b-pmfmi23tc3] {
    width: 95vw;
    height: 90vh;
    max-width: 1800px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* ============================================
   HEADER
   ============================================ */

.editor-header[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.editor-header-left[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.editor-title[b-pmfmi23tc3] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-header-actions[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ============================================
   BODY - SPLIT EDITOR LAYOUT
   ============================================ */

.editor-body[b-pmfmi23tc3] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.editor-split-container[b-pmfmi23tc3] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
    height: 100%;
}

/* Editor Pane */
.editor-pane[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    height: 100%;
}

.editor-pane-header[b-pmfmi23tc3],
.preview-pane-header[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.editor-pane-version[b-pmfmi23tc3] {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.monaco-container[b-pmfmi23tc3] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.monaco-container[b-pmfmi23tc3]  .monaco-editor,
.monaco-container[b-pmfmi23tc3]  .monaco-editor .overflow-guard {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.monaco-loading[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

/* Resizable Divider */
.editor-divider[b-pmfmi23tc3] {
    width: 8px;
    background: var(--border-color);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.editor-divider:hover[b-pmfmi23tc3],
.editor-divider.dragging[b-pmfmi23tc3] {
    background: var(--accent-color);
}

.divider-handle[b-pmfmi23tc3] {
    width: 4px;
    height: 40px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.editor-divider:hover .divider-handle[b-pmfmi23tc3],
.editor-divider.dragging .divider-handle[b-pmfmi23tc3] {
    opacity: 1;
    background: white;
}

/* Preview Pane */
.preview-pane[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    background: var(--bg-base);
    height: 100%;
}

.preview-iframe[b-pmfmi23tc3] {
    flex: 1;
    width: 100%;
    border: none;
    background: white;
}

/* Content Preview Area (non-Razor) */
.content-preview-area[b-pmfmi23tc3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: var(--space-lg);
}

/* ============================================
   SIDEBARS
   ============================================ */

.properties-sidebar[b-pmfmi23tc3],
.version-history-sidebar[b-pmfmi23tc3] {
    width: 320px;
    min-width: 320px;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    animation: slideInRight-b-pmfmi23tc3 0.2s ease-out;
}

@keyframes slideInRight-b-pmfmi23tc3 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Properties Panel */
.properties-panel[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.properties-header[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.properties-content[b-pmfmi23tc3] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.property-section[b-pmfmi23tc3] {
    margin-bottom: var(--space-lg);
}

.property-section .section-title[b-pmfmi23tc3] {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.property-section[b-pmfmi23tc3]  .mud-input-control {
    margin-bottom: var(--space-sm);
}

.detail-row[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-sm);
}

/* ============================================
   FOOTER
   ============================================ */

.editor-footer[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.editor-footer-left[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.editor-status[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.status-unsaved[b-pmfmi23tc3] {
    color: var(--warning-color);
}

.status-saved[b-pmfmi23tc3] {
    color: var(--success-color);
}

.version-indicator[b-pmfmi23tc3] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.editor-footer-actions[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ============================================
   PREVIEW TYPES
   ============================================ */

.preview-image-container[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.preview-image[b-pmfmi23tc3] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.preview-video[b-pmfmi23tc3] {
    max-width: 100%;
    max-height: 100%;
}

.preview-audio-container[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.preview-audio[b-pmfmi23tc3] {
    width: 100%;
    max-width: 400px;
}

.preview-pdf[b-pmfmi23tc3] {
    width: 100%;
    height: 100%;
    border: none;
}

.preview-fallback[b-pmfmi23tc3],
.preview-directory[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
}

.preview-redirect[b-pmfmi23tc3] {
    width: 100%;
    max-width: 800px;
}

.redirect-url[b-pmfmi23tc3] {
    font-family: var(--font-mono);
    word-break: break-all;
}

.redirect-preview-frame[b-pmfmi23tc3] {
    width: 100%;
    height: 400px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.redirect-preview-frame iframe[b-pmfmi23tc3] {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================
   LIVE PREVIEW
   ============================================ */

.preview-mode-toggle[b-pmfmi23tc3] {
    margin-left: auto;
    margin-right: var(--space-sm);
}

.preview-mode-toggle[b-pmfmi23tc3]  .mud-toggle-item {
    padding: 4px 8px;
    min-width: auto;
}

.live-preview-container[b-pmfmi23tc3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: var(--bg-primary);
}

.live-preview-loading[b-pmfmi23tc3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.live-preview-empty[b-pmfmi23tc3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-lg);
}

.live-preview-empty kbd[b-pmfmi23tc3] {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
    border: 1px solid var(--border-color);
}

.live-preview-content[b-pmfmi23tc3] {
    flex: 1;
    padding: var(--space-md);
    overflow: auto;
}

.live-preview-errors[b-pmfmi23tc3] {
    flex: 1;
    padding: var(--space-md);
    overflow: auto;
}

.error-list[b-pmfmi23tc3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.error-item[b-pmfmi23tc3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-20);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.875rem;
}

.error-item:hover[b-pmfmi23tc3] {
    background: var(--error-color-15);
}

.error-location[b-pmfmi23tc3] {
    color: var(--accent-color);
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
}

.error-code[b-pmfmi23tc3] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8em;
    white-space: nowrap;
}

.error-message[b-pmfmi23tc3] {
    color: var(--text-primary);
    flex: 1;
    word-break: break-word;
}

.error-header[b-pmfmi23tc3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.generated-code-panel[b-pmfmi23tc3] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: auto;
    max-height: calc(100% - 60px);
}

.generated-code[b-pmfmi23tc3] {
    margin: 0;
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: pre;
    color: var(--text-primary);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .editor-modal-container[b-pmfmi23tc3] {
        width: 98vw;
        height: 95vh;
    }

    .properties-sidebar[b-pmfmi23tc3],
    .version-history-sidebar[b-pmfmi23tc3] {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .editor-modal-overlay[b-pmfmi23tc3] {
        padding: 0;
    }

    .editor-modal-container[b-pmfmi23tc3] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .editor-split-container[b-pmfmi23tc3] {
        flex-direction: column;
    }

    .editor-pane[b-pmfmi23tc3],
    .preview-pane[b-pmfmi23tc3] {
        width: 100% !important;
        min-width: 0;
        min-height: 200px;
    }

    .editor-divider[b-pmfmi23tc3] {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }

    .divider-handle[b-pmfmi23tc3] {
        width: 40px;
        height: 4px;
    }

    .properties-sidebar[b-pmfmi23tc3],
    .version-history-sidebar[b-pmfmi23tc3] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        box-shadow: var(--shadow-lg);
    }

    .editor-header-left[b-pmfmi23tc3] {
        flex: 1;
        min-width: 0;
    }

    .editor-title[b-pmfmi23tc3] {
        max-width: 200px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .properties-sidebar[b-pmfmi23tc3],
    .version-history-sidebar[b-pmfmi23tc3] {
        animation: none;
    }

    .editor-divider[b-pmfmi23tc3],
    .divider-handle[b-pmfmi23tc3] {
        transition: none;
    }
}
/* /Features/ContentManager/Components/ContentGrid.razor.rz.scp.css */
/* ============================================
   CONTENT GRID STYLES
   Ayva Design System - File grid explorer component
   ============================================ */

.content-grid-container[b-gkm08bybeo] {
    position: relative;
    min-height: 18.75rem;  /* 300px */
    transition: background var(--transition-fast);
}

.content-grid-container.drag-over[b-gkm08bybeo] {
    background-color: var(--accent-color-10);
}

.content-grid[b-gkm08bybeo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));  /* 120px */
    gap: var(--space-lg);
    padding: var(--space-sm);
    position: relative;
    z-index: 1;
}

/* ============================================
   GRID ITEM - Interactive File/Folder Cards
   ============================================ */

.content-grid-item[b-gkm08bybeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    user-select: none;
}

/* Hover state with border glow */
.content-grid-item:hover[b-gkm08bybeo] {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateY(-2px);
}

/* Active/pressed state */
.content-grid-item:active[b-gkm08bybeo] {
    transform: translateY(0);
    background-color: var(--bg-active);
}

/* Selected state */
.content-grid-item.selected[b-gkm08bybeo] {
    background-color: var(--accent-color-10);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.content-grid-item.selected:hover[b-gkm08bybeo] {
    background-color: var(--accent-color-20);
}

/* Focus visible for keyboard navigation */
.content-grid-item:focus-visible[b-gkm08bybeo] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   ITEM CONTENT
   ============================================ */

.item-icon[b-gkm08bybeo] {
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-fast);
}

.content-grid-item:hover .item-icon[b-gkm08bybeo] {
    transform: scale(1.05);
}

.item-name[b-gkm08bybeo] {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    transition: color var(--transition-fast);
}

.content-grid-item:hover .item-name[b-gkm08bybeo] {
    color: var(--accent-color);
}

.disabled-badge[b-gkm08bybeo] {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    opacity: 0.6;
}

/* ============================================
   DROP ZONE OVERLAY
   ============================================ */

/* Label wrapper for the drop zone - only interactive when dragging */
.drop-zone-label[b-gkm08bybeo] {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    pointer-events: none;
}

/* When dragging, raise the drop zone above all content and enable interaction */
.drop-zone-label.drag-over[b-gkm08bybeo] {
    z-index: 20;
    pointer-events: auto;
}

/* Drop zone input - covers entire area, invisible */
[b-gkm08bybeo] .drop-zone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

.drop-zone-label.drag-over[b-gkm08bybeo]  .drop-zone-input {
    pointer-events: auto;
}

.drop-overlay[b-gkm08bybeo] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color-10);
    border: 3px dashed var(--accent-color);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 10;
    animation: fadeInUp 0.2s ease-out;
}

.drop-overlay .mud-icon-root[b-gkm08bybeo] {
    color: var(--accent-color);
    animation: bounce-b-gkm08bybeo 1s ease-in-out infinite;
}

@keyframes bounce-b-gkm08bybeo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================
   SELECTED TREE ITEM (for sidebar)
   ============================================ */

[b-gkm08bybeo] .selected-tree-item {
    background-color: var(--accent-color-10);
    border-left: 3px solid var(--accent-color);
}

/* ============================================
   CONTEXT MENU
   ============================================ */

.context-menu-backdrop[b-gkm08bybeo] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.context-menu-container[b-gkm08bybeo] {
    position: fixed;
    z-index: 9999;
    animation: contextMenuAppear-b-gkm08bybeo 0.15s ease-out;
}

@keyframes contextMenuAppear-b-gkm08bybeo {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

[b-gkm08bybeo] .context-menu-paper {
    min-width: 11.25rem;  /* 180px */
    max-width: 13.75rem;  /* 220px */
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[b-gkm08bybeo] .context-menu-list {
    padding: var(--space-xs) 0;
}

[b-gkm08bybeo] .context-menu-list .mud-list-item {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    min-height: 2rem;
    color: var(--text-primary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

[b-gkm08bybeo] .context-menu-list .mud-list-item:hover {
    background-color: var(--bg-hover);
}

[b-gkm08bybeo] .context-menu-list .mud-list-item .mud-icon-root {
    margin-right: var(--space-sm);
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

[b-gkm08bybeo] .context-menu-list .mud-list-item:hover .mud-icon-root {
    color: var(--accent-color);
}

/* Delete action - danger state */
[b-gkm08bybeo] .context-menu-delete:hover {
    background-color: var(--error-bg) !important;
    color: var(--error-color);
}

[b-gkm08bybeo] .context-menu-delete:hover .mud-icon-root {
    color: var(--error-color);
}

/* ============================================
   NAME CELL
   ============================================ */

.name-cell[b-gkm08bybeo] {
    display: block;
    width: 100%;
    padding: var(--space-xs) 0;
}

/* ============================================
   LOADING STATE
   ============================================ */

.content-grid-loading[b-gkm08bybeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12.5rem;  /* 200px */
    gap: var(--space-md);
    color: var(--text-secondary);
}

/* Skeleton grid items for loading */
.content-grid-skeleton[b-gkm08bybeo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-lg);
    padding: var(--space-sm);
}

.skeleton-grid-item[b-gkm08bybeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    gap: var(--space-sm);
}

.skeleton-icon[b-gkm08bybeo] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-gkm08bybeo 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-name[b-gkm08bybeo] {
    width: 80%;
    height: 0.875rem;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-gkm08bybeo 1.5s infinite;
    border-radius: var(--radius-xs);
}

@keyframes shimmer-b-gkm08bybeo {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.content-grid-empty[b-gkm08bybeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12.5rem;
    gap: var(--space-md);
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
}

.content-grid-empty .empty-icon[b-gkm08bybeo] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.content-grid-empty h4[b-gkm08bybeo] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.content-grid-empty p[b-gkm08bybeo] {
    margin: 0;
    font-size: var(--text-sm);
    max-width: 18.75rem;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .content-grid[b-gkm08bybeo] {
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
        gap: var(--space-md);
    }

    .content-grid-item[b-gkm08bybeo] {
        padding: var(--space-sm);
    }

    .item-name[b-gkm08bybeo] {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .content-grid[b-gkm08bybeo] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }
}
/* /Features/ContentManager/Components/ContentManagerPanel.razor.rz.scp.css */
/* ============================================
   CONTENT MANAGER PANEL STYLES
   Ayva Design System - File explorer layout
   ============================================ */

.content-manager-explorer[b-xkdp7lqnrj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
    background: var(--bg-base);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* ============================================
   TOOLBAR
   ============================================ */

.explorer-toolbar[b-xkdp7lqnrj] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-sm);
    flex-shrink: 0;
}

.toolbar-actions[b-xkdp7lqnrj] {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-xs);
}

/* Toolbar button enhancements */
.toolbar-actions[b-xkdp7lqnrj]  .mud-icon-button {
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.toolbar-actions[b-xkdp7lqnrj]  .mud-icon-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.toolbar-actions[b-xkdp7lqnrj]  .mud-icon-button:active {
    transform: translateY(0);
}

.toolbar-actions[b-xkdp7lqnrj]  .mud-icon-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   ADDRESS BAR
   ============================================ */

.explorer-address-bar[b-xkdp7lqnrj] {
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-xs);
    flex-shrink: 0;
    min-height: 2.5rem;
}

.breadcrumb-container[b-xkdp7lqnrj] {
    flex: 1;
    overflow: hidden;
}

.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumbs {
    padding: 0;
}

.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumbs li {
    font-size: var(--text-sm);
}

/* Breadcrumb link interactions */
.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumb-item a,
.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumb-item button {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumb-item a:hover,
.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumb-item button:hover {
    color: var(--accent-color);
}

.breadcrumb-container[b-xkdp7lqnrj]  .mud-breadcrumb-item:last-child {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.explorer-main[b-xkdp7lqnrj] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ============================================
   DIRECTORY TREE (Sidebar)
   ============================================ */

.explorer-tree[b-xkdp7lqnrj] {
    width: 15rem;  /* 240px */
    min-width: 15rem;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-normal), min-width var(--transition-normal);
    overflow: hidden;
}

.explorer-tree.collapsed[b-xkdp7lqnrj] {
    width: 3rem;
    min-width: 3rem;
}

.tree-header[b-xkdp7lqnrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.tree-header[b-xkdp7lqnrj]  .mud-typography {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.explorer-tree.collapsed .tree-header[b-xkdp7lqnrj] {
    justify-content: center;
    padding: var(--space-sm) var(--space-xs);
}

.explorer-tree.collapsed .tree-header[b-xkdp7lqnrj]  .mud-typography {
    display: none;
}

/* Tree collapse button */
.tree-header[b-xkdp7lqnrj]  .mud-icon-button {
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.tree-header[b-xkdp7lqnrj]  .mud-icon-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tree-content[b-xkdp7lqnrj] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs);
    min-height: 0;
}

/* Tree item interactions */
.tree-content[b-xkdp7lqnrj]  .mud-treeview-item-content {
    transition: background var(--transition-fast);
    border-radius: var(--radius-sm);
}

.tree-content[b-xkdp7lqnrj]  .mud-treeview-item-content:hover {
    background: var(--bg-hover);
}

.tree-content[b-xkdp7lqnrj]  .mud-treeview-item.selected .mud-treeview-item-content {
    background: var(--accent-color-10);
    border-left: 3px solid var(--accent-color);
}

/* ============================================
   FILE LIST CONTENT
   ============================================ */

.explorer-content[b-xkdp7lqnrj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--bg-base);
    min-width: 0;
}

.explorer-loading[b-xkdp7lqnrj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.explorer-empty[b-xkdp7lqnrj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    text-align: center;
}

.explorer-empty[b-xkdp7lqnrj]  .mud-icon-root {
    color: var(--text-muted);
}

.explorer-empty[b-xkdp7lqnrj]  .mud-typography {
    color: var(--text-secondary);
}

/* ============================================
   SELECTION BAR
   ============================================ */

.explorer-selection-bar[b-xkdp7lqnrj] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-gradient);
    color: white;
    gap: var(--space-sm);
    flex-shrink: 0;
    animation: slideInDown-b-xkdp7lqnrj 0.2s ease-out;
}

@keyframes slideInDown-b-xkdp7lqnrj {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.explorer-selection-bar[b-xkdp7lqnrj]  .mud-button {
    color: inherit;
    transition: all var(--transition-fast);
}

.explorer-selection-bar[b-xkdp7lqnrj]  .mud-button:hover {
    background: var(--white-overlay-20);
}

.explorer-selection-bar[b-xkdp7lqnrj]  .mud-typography {
    font-weight: var(--font-medium);
}

/* ============================================
   VIEW TOGGLE
   ============================================ */

.view-toggle[b-xkdp7lqnrj] {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.view-toggle[b-xkdp7lqnrj]  .mud-icon-button {
    transition: all var(--transition-fast);
}

.view-toggle[b-xkdp7lqnrj]  .mud-icon-button.active {
    background: var(--accent-color);
    color: white;
}

/* ============================================
   SEARCH INPUT
   ============================================ */

.explorer-search[b-xkdp7lqnrj] {
    flex: 1;
    max-width: 18.75rem;  /* 300px */
}

.explorer-search[b-xkdp7lqnrj]  .mud-input-outlined .mud-input-slot {
    background: var(--bg-card);
}

.explorer-search[b-xkdp7lqnrj]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    transition: border-color var(--transition-fast);
}

.explorer-search[b-xkdp7lqnrj]  .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color);
}

.explorer-search[b-xkdp7lqnrj]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.tree-content[b-xkdp7lqnrj]::-webkit-scrollbar,
.explorer-content[b-xkdp7lqnrj]::-webkit-scrollbar {
    width: 0.5rem;
}

.tree-content[b-xkdp7lqnrj]::-webkit-scrollbar-track,
.explorer-content[b-xkdp7lqnrj]::-webkit-scrollbar-track {
    background: var(--black-overlay-20);
}

.tree-content[b-xkdp7lqnrj]::-webkit-scrollbar-thumb,
.explorer-content[b-xkdp7lqnrj]::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color-rgb), 0.4);
    border-radius: var(--radius-xs);
}

.tree-content[b-xkdp7lqnrj]::-webkit-scrollbar-thumb:hover,
.explorer-content[b-xkdp7lqnrj]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-color-rgb), 0.6);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .content-manager-explorer[b-xkdp7lqnrj] {
        height: 100%;
        min-height: 0;
    }

    .explorer-tree[b-xkdp7lqnrj] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        box-shadow: var(--shadow-lg);
    }

    .explorer-tree:not(.collapsed)[b-xkdp7lqnrj] {
        width: 17.5rem;  /* 280px */
    }

    .explorer-tree.collapsed[b-xkdp7lqnrj] {
        width: 0;
        min-width: 0;
        border: none;
    }

    .explorer-toolbar[b-xkdp7lqnrj] {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .explorer-search[b-xkdp7lqnrj] {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .explorer-toolbar[b-xkdp7lqnrj] {
        padding: var(--space-xs);
    }

    .explorer-address-bar[b-xkdp7lqnrj] {
        padding: var(--space-xs);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .explorer-tree[b-xkdp7lqnrj],
    .explorer-selection-bar[b-xkdp7lqnrj],
    .toolbar-actions[b-xkdp7lqnrj]  .mud-icon-button,
    .tree-content[b-xkdp7lqnrj]  .mud-treeview-item-content {
        transition: none;
    }

    .explorer-selection-bar[b-xkdp7lqnrj] {
        animation: none;
    }
}
/* /Features/ContentManager/Components/ContentPreviewPanel.razor.rz.scp.css */
.preview-overlay[b-yjmn71uknw] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--black-overlay-85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    outline: none;
}

.preview-container[b-yjmn71uknw] {
    width: 100%;
    max-width: 1400px;
    max-height: calc(100vh - 48px);
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--mud-elevation-16);
}

/* Header */
.preview-header[b-yjmn71uknw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    flex-shrink: 0;
}

.preview-header-left[b-yjmn71uknw] {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.preview-title[b-yjmn71uknw] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

/* Body */
.preview-body[b-yjmn71uknw] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Content Area */
.preview-content[b-yjmn71uknw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: auto;
    background: var(--mud-palette-background);
}

.preview-loading[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Image Preview */
.preview-image-container[b-yjmn71uknw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.preview-image[b-yjmn71uknw] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--mud-default-borderradius);
}

/* Video Preview */
.preview-video[b-yjmn71uknw] {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--mud-default-borderradius);
}

/* Audio Preview */
.preview-audio-container[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
}

.preview-audio[b-yjmn71uknw] {
    width: 100%;
    max-width: 500px;
    margin-top: 16px;
}

/* PDF Preview */
.preview-pdf[b-yjmn71uknw] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: var(--mud-default-borderradius);
}

/* Fallback */
.preview-fallback[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
}

/* Redirect Preview */
.preview-redirect[b-yjmn71uknw] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.redirect-url[b-yjmn71uknw] {
    font-family: monospace;
    word-break: break-all;
    font-size: 0.875rem;
}

.redirect-preview-frame[b-yjmn71uknw] {
    flex: 1;
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: white;
}

/* Razor Page Preview */
.preview-razor[b-yjmn71uknw] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.razor-preview-frame[b-yjmn71uknw] {
    flex: 1;
    width: 100%;
    min-height: 500px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: white;
}

/* Razor Editor Container - Full Height */
.razor-editor-container[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.razor-editor-container[b-yjmn71uknw]  .mud-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.razor-editor-container[b-yjmn71uknw]  .mud-tabs-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.razor-editor-container[b-yjmn71uknw]  .mud-tab-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
}

.razor-editor-wrapper[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px;
    gap: 8px;
}

.monaco-editor-wrapper[b-yjmn71uknw] {
    flex: 1;
    min-height: 400px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.monaco-editor-wrapper[b-yjmn71uknw]  .monaco-editor-container {
    height: 100%;
}

.editor-loading[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}

.editor-toolbar[b-yjmn71uknw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 8px;
}

.editor-help[b-yjmn71uknw] {
    padding: 4px 8px;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Sidebar */
.preview-sidebar[b-yjmn71uknw] {
    width: 320px;
    min-width: 320px;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
    gap: 16px;
}

.sidebar-section[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-section-title[b-yjmn71uknw] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.detail-row[b-yjmn71uknw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-actions[b-yjmn71uknw] {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Responsive */
@media (max-width: 900px) {
    .preview-overlay[b-yjmn71uknw] {
        padding: 8px;
    }

    .preview-body[b-yjmn71uknw] {
        flex-direction: column;
    }

    .preview-sidebar[b-yjmn71uknw] {
        width: 100%;
        min-width: 100%;
        max-height: 50vh;
        border-left: none;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .preview-content[b-yjmn71uknw] {
        min-height: 300px;
    }
}

@media (max-width: 600px) {
    .preview-header-left[b-yjmn71uknw] {
        flex: 1;
    }

    .preview-title[b-yjmn71uknw] {
        max-width: 200px;
    }
}
/* /Features/ContentManager/Components/DirectoryTree.razor.rz.scp.css */
/* DirectoryTree.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

.directory-tree[b-curnbtrgd0] {
    padding: var(--space-xs);
}

.directory-tree[b-curnbtrgd0]  .mud-treeview-item {
    border-radius: var(--radius-sm);
}

.directory-tree[b-curnbtrgd0]  .mud-treeview-item-content {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.directory-tree[b-curnbtrgd0]  .mud-treeview-item-content:hover {
    background-color: var(--bg-hover);
}

[b-curnbtrgd0] .selected-tree-item {
    background-color: var(--accent-color-10) !important;
}

[b-curnbtrgd0] .selected-tree-item .mud-icon-root {
    color: var(--accent-color) !important;
}
/* /Features/ContentManager/Components/DynamicBlazorHost.razor.rz.scp.css */
.dynamic-component-error[b-xzji6qlemv] {
    background: var(--error-color-10);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0.5rem 0;
}

.error-header[b-xzji6qlemv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--error-text);
    margin-bottom: 0.5rem;
}

.error-icon[b-xzji6qlemv] {
    font-size: 1.2em;
}

.error-message[b-xzji6qlemv] {
    margin: 0;
    padding: 0.75rem;
    background: var(--black-overlay-20);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--white-overlay-90);
}

.dynamic-component-loading[b-xzji6qlemv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
}
/* /Features/ContentManager/Components/EditorAIAssistant.razor.rz.scp.css */
/* ============================================
   EDITOR AI ASSISTANT
   Floating AI input bar at bottom of editor
   ============================================ */

.ai-assistant-bar[b-blsiiwqehc] {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.ai-input-row[b-blsiiwqehc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ai-input-wrapper[b-blsiiwqehc] {
    flex: 1;
}

.ai-input-wrapper[b-blsiiwqehc]  .mud-input-outlined .mud-input-slot {
    background: var(--bg-card);
}

/* Response Area */
.ai-response-area[b-blsiiwqehc] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-blsiiwqehc 0.2s ease-out;
}

@keyframes slideUp-b-blsiiwqehc {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-response-header[b-blsiiwqehc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.ai-response-header > span[b-blsiiwqehc] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.ai-response-actions[b-blsiiwqehc] {
    display: flex;
    gap: var(--space-xs);
}

.ai-response-content[b-blsiiwqehc] {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.streaming-indicator[b-blsiiwqehc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.response-text[b-blsiiwqehc] {
    margin: 0;
    padding: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    color: var(--text-primary);
}

.response-text.markdown[b-blsiiwqehc] {
    font-family: var(--font-primary);
}

.response-text.code[b-blsiiwqehc] {
    background: var(--bg-base);
}

/* Scrollbar */
.ai-response-content[b-blsiiwqehc]::-webkit-scrollbar {
    width: 6px;
}

.ai-response-content[b-blsiiwqehc]::-webkit-scrollbar-track {
    background: var(--black-overlay-10);
}

.ai-response-content[b-blsiiwqehc]::-webkit-scrollbar-thumb {
    background: var(--accent-color-40);
    border-radius: var(--radius-full);
}

.ai-response-content[b-blsiiwqehc]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .ai-response-area[b-blsiiwqehc] {
        max-height: 200px;
    }
}

/* Tool Activity Chips */
.tool-activity[b-blsiiwqehc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
}

.tool-chip[b-blsiiwqehc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.tool-chip.running[b-blsiiwqehc] {
    background: var(--accent-color-15);
    border-color: var(--accent-color-40);
    color: var(--accent-color);
}

.tool-chip.complete[b-blsiiwqehc] {
    background: var(--success-color-15);
    border-color: var(--success-color-40);
    color: var(--success-text);
}

.tool-chip.error[b-blsiiwqehc] {
    background: var(--error-color-15);
    border-color: var(--error-color-40);
    color: var(--error-text);
}

.tool-spinner[b-blsiiwqehc] {
    width: 14px !important;
    height: 14px !important;
}

/* Mode Toggle Buttons */
.mode-toggles[b-blsiiwqehc] {
    flex-shrink: 0;
}

.mode-toggles[b-blsiiwqehc]  .mud-button-group-outlined {
    border-color: var(--border-color);
}

/* Validation Chip */
.validation-chip[b-blsiiwqehc] {
    margin-right: var(--space-xs);
}

/* Operation Info */
.operation-info[b-blsiiwqehc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.operation-description[b-blsiiwqehc] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Compilation Errors */
.compilation-errors[b-blsiiwqehc] {
    background: var(--error-color-10);
    border-bottom: 1px solid var(--error-border);
    padding: var(--space-xs) var(--space-sm);
    max-height: 120px;
    overflow-y: auto;
}

.error-line[b-blsiiwqehc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: 2px 0;
    font-size: var(--text-xs);
    color: var(--error-text);
}

.error-line span[b-blsiiwqehc] {
    flex: 1;
    word-break: break-word;
}

.error-line.more[b-blsiiwqehc] {
    color: var(--text-secondary);
    font-style: italic;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .ai-response-area[b-blsiiwqehc] {
        animation: none;
    }

    .tool-chip[b-blsiiwqehc] {
        transition: none;
    }
}
/* /Features/ContentManager/Components/VersionHistoryPanel.razor.rz.scp.css */
/* ============================================
   VERSION HISTORY PANEL
   ============================================ */

.version-history-panel[b-8jde557o8v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-md);
}

.version-header[b-8jde557o8v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.version-current[b-8jde557o8v] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid var(--accent-color-20);
}

.version-loading[b-8jde557o8v],
.version-empty[b-8jde557o8v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    gap: var(--space-sm);
    text-align: center;
}

.version-list[b-8jde557o8v] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.version-entry[b-8jde557o8v] {
    padding: var(--space-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: border-color var(--transition-fast);
}

.version-entry:hover[b-8jde557o8v] {
    border-color: var(--accent-color);
}

.version-info[b-8jde557o8v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.version-number[b-8jde557o8v] {
    font-weight: var(--font-semibold);
    color: var(--accent-color);
}

.version-date[b-8jde557o8v] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.version-actions[b-8jde557o8v] {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/* View Dialog */
.version-view-content[b-8jde557o8v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.version-view-header[b-8jde557o8v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.version-content-code[b-8jde557o8v] {
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow: auto;
    max-height: 400px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Scrollbar */
.version-list[b-8jde557o8v]::-webkit-scrollbar {
    width: 6px;
}

.version-list[b-8jde557o8v]::-webkit-scrollbar-track {
    background: var(--black-overlay-10);
}

.version-list[b-8jde557o8v]::-webkit-scrollbar-thumb {
    background: var(--accent-color-40);
    border-radius: var(--radius-full);
}

.version-list[b-8jde557o8v]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}
/* /Features/Core/Components/BaseCard.razor.rz.scp.css */
/* BaseCard - Ayva Design System Card Component
 * Glassmorphism-enhanced card with multiple variants
 * Uses CSS variables from ayva-theme.css
 */

.ayva-card[b-qwrihrqmtt] {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card Variants */
.ayva-card-default[b-qwrihrqmtt] {
    border: 1px solid var(--border-subtle);
    box-shadow: var(--glass-paper-shadow);
}

.ayva-card-default:hover[b-qwrihrqmtt] {
    border-color: var(--accent-color-30);
    box-shadow: var(--glass-paper-shadow-hover);
}

.ayva-card-elevated[b-qwrihrqmtt] {
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
}

.ayva-card-elevated:hover[b-qwrihrqmtt] {
    box-shadow:
        var(--shadow-xl),
        var(--shadow-glow);
}

.ayva-card-outlined[b-qwrihrqmtt] {
    background: var(--black-overlay-20);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ayva-card-outlined:hover[b-qwrihrqmtt] {
    border-color: var(--accent-color-40);
    background: var(--black-overlay-30);
}

.ayva-card-glass[b-qwrihrqmtt] {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--glass-elevated-shadow);
}

.ayva-card-glass:hover[b-qwrihrqmtt] {
    border-color: var(--accent-color-40);
    box-shadow: var(--glass-elevated-shadow-hover);
}

.ayva-card-flat[b-qwrihrqmtt] {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Clickable Card */
.ayva-card-clickable[b-qwrihrqmtt] {
    cursor: pointer;
}

.ayva-card-clickable:hover[b-qwrihrqmtt] {
    background: var(--bg-hover);
    border-color: var(--accent-color-30);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ayva-card-clickable:active[b-qwrihrqmtt] {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.ayva-card-clickable:focus-visible[b-qwrihrqmtt] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Disabled State */
.ayva-card-disabled[b-qwrihrqmtt] {
    opacity: 0.5;
    pointer-events: none;
}

/* Card Header */
.card-header[b-qwrihrqmtt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-subtle);
}

.card-header-content[b-qwrihrqmtt] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.card-icon[b-qwrihrqmtt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

/* Icon Colors */
.card-icon.icon-primary[b-qwrihrqmtt] {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

.card-icon.icon-secondary[b-qwrihrqmtt] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.card-icon.icon-success[b-qwrihrqmtt] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.card-icon.icon-warning[b-qwrihrqmtt] {
    background: var(--warning-color-15);
    color: var(--warning-color);
}

.card-icon.icon-error[b-qwrihrqmtt] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.card-icon.icon-info[b-qwrihrqmtt] {
    background: var(--info-color-15);
    color: var(--info-color);
}

.card-titles[b-qwrihrqmtt] {
    flex: 1;
    min-width: 0;
}

.card-title[b-qwrihrqmtt] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    margin: 0;
}

.card-subtitle[b-qwrihrqmtt] {
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.card-header-actions[b-qwrihrqmtt] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Card Content */
.card-content[b-qwrihrqmtt] {
    padding: var(--space-xl);
}

.card-content.no-padding[b-qwrihrqmtt] {
    padding: 0;
}

/* Card Footer */
.card-footer[b-qwrihrqmtt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    border-top: 1px solid var(--border-subtle);
    background: var(--black-overlay-20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Loading Skeleton */
.card-skeleton[b-qwrihrqmtt] {
    padding: var(--space-xl);
}

/* Responsive */
@media (max-width: 640px) {
    .card-header[b-qwrihrqmtt] {
        padding: var(--space-md) var(--space-lg);
    }

    .card-content[b-qwrihrqmtt] {
        padding: var(--space-lg);
    }

    .card-footer[b-qwrihrqmtt] {
        padding: var(--space-md) var(--space-lg);
        flex-wrap: wrap;
    }

    .card-icon[b-qwrihrqmtt] {
        width: 2.25rem;
        height: 2.25rem;
    }
}
/* /Features/Core/Components/BaseDialog.razor.rz.scp.css */
/*
 * BaseDialog Component Styles
 * Glassmorphism-enhanced dialog styling
 * Uses CSS variables from ayva-theme.css - NO hardcoded values
 * MudBlazor base styling is in mudblazor-overrides.css
 */

/* ==========================================================================
   DIALOG BASE GLASSMORPHISM
   Applied to all .ayva-dialog elements
   ========================================================================== */

[b-4gow7s9tfq] .ayva-dialog {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-dialog-shadow-inset) !important;
    overflow: hidden;
}

/* ==========================================================================
   DIALOG SIZE PRESETS
   Applied via .ayva-dialog-{size} class
   ========================================================================== */

[b-4gow7s9tfq] .ayva-dialog.ayva-dialog-small {
    max-width: 400px !important;
    width: 95vw !important;
}

[b-4gow7s9tfq] .ayva-dialog.ayva-dialog-medium {
    max-width: 560px !important;
    width: 95vw !important;
}

[b-4gow7s9tfq] .ayva-dialog.ayva-dialog-large {
    max-width: 800px !important;
    width: 95vw !important;
}

[b-4gow7s9tfq] .ayva-dialog.ayva-dialog-extralarge {
    max-width: 1140px !important;
    width: 95vw !important;
}

[b-4gow7s9tfq] .ayva-dialog.ayva-dialog-fullwidth {
    max-width: 95vw !important;
    width: 95vw !important;
}

/* ==========================================================================
   TITLE SECTION
   ========================================================================== */

.dialog-title-wrapper[b-4gow7s9tfq] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100%;
}

.dialog-title-icon[b-4gow7s9tfq] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-title-icon.icon-primary[b-4gow7s9tfq] {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

.dialog-title-icon.icon-secondary[b-4gow7s9tfq] {
    background: var(--secondary-accent-10);
    color: var(--secondary-accent);
}

.dialog-title-icon.icon-success[b-4gow7s9tfq] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.dialog-title-icon.icon-warning[b-4gow7s9tfq] {
    background: var(--warning-color-15);
    color: var(--warning-color);
}

.dialog-title-icon.icon-error[b-4gow7s9tfq] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.dialog-title-icon.icon-info[b-4gow7s9tfq] {
    background: var(--info-color-15);
    color: var(--info-color);
}

.dialog-title-text[b-4gow7s9tfq] {
    flex: 1;
    min-width: 0;
}

[b-4gow7s9tfq] .dialog-title {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

[b-4gow7s9tfq] .dialog-subtitle {
    color: var(--text-secondary) !important;
    margin-top: var(--space-xs) !important;
    line-height: 1.4 !important;
}

.dialog-close-btn[b-4gow7s9tfq] {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-secondary) !important;
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.dialog-close-btn:hover[b-4gow7s9tfq] {
    opacity: 1;
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* ==========================================================================
   CONTENT SECTION
   ========================================================================== */

[b-4gow7s9tfq] .dialog-message {
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    white-space: pre-line;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.dialog-loading[b-4gow7s9tfq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-xl);
    min-height: 150px;
}

.dialog-loading .mud-progress-circular[b-4gow7s9tfq] {
    color: var(--accent-color) !important;
}

[b-4gow7s9tfq] .dialog-loading .mud-typography {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   ACTIONS SECTION
   ========================================================================== */

[b-4gow7s9tfq] .ayva-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl) !important;
    background: var(--black-overlay-20) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-radius: 0 0 var(--dialog-radius) var(--dialog-radius) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 640px) {
    .dialog-title-wrapper[b-4gow7s9tfq] {
        gap: var(--space-sm);
    }

    .dialog-title-icon[b-4gow7s9tfq] {
        width: 2.25rem;
        height: 2.25rem;
    }

    [b-4gow7s9tfq] .ayva-dialog-actions {
        flex-direction: column-reverse;
        gap: var(--space-xs);
    }

    [b-4gow7s9tfq] .ayva-dialog-actions .mud-button-root {
        width: 100%;
    }
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

[b-4gow7s9tfq] .ayva-dialog {
    animation: dialogEnter-b-4gow7s9tfq 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dialogEnter-b-4gow7s9tfq {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* /Features/Core/Components/BaseFormSection.razor.rz.scp.css */
/* BaseFormSection - Ayva Design System Form Group Component */

.ayva-form-section[b-e3qxbu409q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

/* Horizontal Layout */
.ayva-form-section.horizontal[b-e3qxbu409q] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
}

/* Label Container */
.form-label-container[b-e3qxbu409q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ayva-form-section.horizontal .form-label-container[b-e3qxbu409q] {
    padding-top: var(--space-sm); /* Align with input */
}

/* Label */
.form-label[b-e3qxbu409q] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.form-label.required[b-e3qxbu409q] {
    /* Styling handled by required-indicator */
}

.required-indicator[b-e3qxbu409q] {
    color: var(--error-color);
    margin-left: var(--space-xs);
    font-weight: var(--font-semibold);
}

/* Description */
.form-description[b-e3qxbu409q] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Input Container */
.form-input-container[b-e3qxbu409q] {
    flex: 1;
    min-width: 0;
}

.form-input[b-e3qxbu409q] {
    /* Container for the input element */
}

/* Helper Text */
.form-helper-text[b-e3qxbu409q] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: var(--space-xs) 0 0 0;
    line-height: 1.4;
}

/* Error State */
.form-error-text[b-e3qxbu409q] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--error-color);
    margin: var(--space-xs) 0 0 0;
    line-height: 1.4;
}

.form-error-text[b-e3qxbu409q]  .mud-icon-root {
    font-size: var(--text-md);
}

/* Success State */
.form-success-text[b-e3qxbu409q] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--success-color);
    margin: var(--space-xs) 0 0 0;
    line-height: 1.4;
}

.form-success-text[b-e3qxbu409q]  .mud-icon-root {
    font-size: var(--text-md);
}

/* Error/Success input styling */
.ayva-form-section.has-error .form-input[b-e3qxbu409q]  .mud-input-outlined-border {
    border-color: var(--error-color) !important;
}

.ayva-form-section.has-success .form-input[b-e3qxbu409q]  .mud-input-outlined-border {
    border-color: var(--success-color) !important;
}

/* Focus state within form section */
.form-input[b-e3qxbu409q]  .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
    border-width: 2px;
}

/* Responsive - switch to vertical on mobile */
@media (max-width: 640px) {
    .ayva-form-section.horizontal[b-e3qxbu409q] {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .ayva-form-section.horizontal .form-label-container[b-e3qxbu409q] {
        width: auto !important;
        padding-top: 0;
    }
}
/* /Features/Core/Components/BaseSection.razor.rz.scp.css */
/* BaseSection - Ayva Design System Section Component
 * Glassmorphism-enhanced section with multiple variants
 * Uses CSS variables from ayva-theme.css
 */

.ayva-section[b-qd4mb33t4i] {
    margin-bottom: var(--space-3xl);
}

/* Section Variants */
.ayva-section-default[b-qd4mb33t4i] {
    /* Minimal styling - inherits from parent */
}

.ayva-section-card[b-qd4mb33t4i] {
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-paper-shadow);
    transition: all var(--transition-normal);
}

.ayva-section-card:hover[b-qd4mb33t4i] {
    border-color: var(--accent-color-20);
    box-shadow: var(--glass-paper-shadow-hover);
}

.ayva-section-outlined[b-qd4mb33t4i] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--black-overlay-15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--transition-fast);
}

.ayva-section-outlined:hover[b-qd4mb33t4i] {
    border-color: var(--accent-color-30);
}

.ayva-section-flat[b-qd4mb33t4i] {
    /* No background or border */
}

/* Section Header */
.section-header[b-qd4mb33t4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.ayva-section-card .section-header[b-qd4mb33t4i],
.ayva-section-outlined .section-header[b-qd4mb33t4i] {
    padding: var(--space-lg) var(--space-xl);
    background: var(--black-overlay-20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.section-header.collapsible[b-qd4mb33t4i] {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
}

.section-header.collapsible:hover[b-qd4mb33t4i] {
    background: var(--bg-hover);
}

.section-header-content[b-qd4mb33t4i] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.section-icon[b-qd4mb33t4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Icon Colors */
.section-icon.icon-primary[b-qd4mb33t4i] {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

.section-icon.icon-secondary[b-qd4mb33t4i] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.section-icon.icon-success[b-qd4mb33t4i] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.section-icon.icon-warning[b-qd4mb33t4i] {
    background: var(--warning-color-15);
    color: var(--warning-color);
}

.section-icon.icon-error[b-qd4mb33t4i] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.section-icon.icon-info[b-qd4mb33t4i] {
    background: var(--info-color-15);
    color: var(--info-color);
}

.section-titles[b-qd4mb33t4i] {
    flex: 1;
    min-width: 0;
}

.section-title[b-qd4mb33t4i] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    margin: 0;
}

.section-subtitle[b-qd4mb33t4i] {
    color: var(--text-secondary);
    margin-top: 2px;
}

.section-header-actions[b-qd4mb33t4i] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.expand-icon[b-qd4mb33t4i] {
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.section-header.collapsible:hover .expand-icon[b-qd4mb33t4i] {
    color: var(--text-primary);
}

/* Section Content */
.section-content[b-qd4mb33t4i] {
    padding: var(--space-xl) 0;
    animation: slideDown-b-qd4mb33t4i 0.2s ease-out;
}

.ayva-section-card .section-content[b-qd4mb33t4i],
.ayva-section-outlined .section-content[b-qd4mb33t4i] {
    padding: var(--space-xl);
}

.ayva-section.no-padding .section-content[b-qd4mb33t4i] {
    padding: 0;
}

.section-content.collapsed[b-qd4mb33t4i] {
    display: none;
}

@keyframes slideDown-b-qd4mb33t4i {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Footer */
.section-footer[b-qd4mb33t4i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-subtle);
}

.ayva-section-card .section-footer[b-qd4mb33t4i],
.ayva-section-outlined .section-footer[b-qd4mb33t4i] {
    padding: var(--space-md) var(--space-xl);
    background: var(--black-overlay-20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Loading State */
.section-loading[b-qd4mb33t4i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Responsive */
@media (max-width: 640px) {
    .section-header[b-qd4mb33t4i] {
        padding: var(--space-md) 0;
    }

    .ayva-section-card .section-header[b-qd4mb33t4i],
    .ayva-section-outlined .section-header[b-qd4mb33t4i] {
        padding: var(--space-md) var(--space-lg);
    }

    .section-content[b-qd4mb33t4i] {
        padding: var(--space-lg) 0;
    }

    .ayva-section-card .section-content[b-qd4mb33t4i],
    .ayva-section-outlined .section-content[b-qd4mb33t4i] {
        padding: var(--space-lg);
    }

    .section-icon[b-qd4mb33t4i] {
        width: 1.75rem;
        height: 1.75rem;
    }
}
/* /Features/Core/Components/Dialogs/AyvaConfirmDialog.razor.rz.scp.css */
/* AyvaConfirmDialog - Dialog Polish */

/* Dialog content area */
[b-upf0w1r1ic] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Message text styling */
[b-upf0w1r1ic] .dialog-message {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Form field focus enhancement */
[b-upf0w1r1ic] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-upf0w1r1ic] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-upf0w1r1ic] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}
/* /Features/Core/Components/Dialogs/AyvaFormDialog.razor.rz.scp.css */
/*
 * AyvaFormDialog Component Styles
 * Uses CSS variables from ayva-theme.css
 */

.form-content[b-pdqpcamqrc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Ensure form inputs have proper spacing */
.form-content[b-pdqpcamqrc]  .mud-input-control {
    margin-bottom: 0 !important;
}

/* Validation summary styling */
[b-pdqpcamqrc] .validation-summary-errors {
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-pdqpcamqrc] .validation-summary-errors li {
    font-size: var(--text-sm);
    line-height: 1.4;
}

[b-pdqpcamqrc] .validation-summary-errors li + li {
    margin-top: var(--space-xs);
}

/* Field validation message */
[b-pdqpcamqrc] .validation-message {
    color: var(--error-color);
    font-size: var(--text-xs);
    margin-top: var(--space-xs);
}

/* Form field focus enhancement */
[b-pdqpcamqrc] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Button feedback */
[b-pdqpcamqrc] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-pdqpcamqrc] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}
/* /Features/Core/Components/Dialogs/AyvaInfoDialog.razor.rz.scp.css */
/* AyvaInfoDialog - Dialog Polish */

/* Dialog content area */
[b-ku8flaeuqz] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Message text styling */
[b-ku8flaeuqz] .dialog-message {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Button feedback */
[b-ku8flaeuqz] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-ku8flaeuqz] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}
/* /Features/Core/Components/Dialogs/AyvaInputDialog.razor.rz.scp.css */
/* AyvaInputDialog - Dialog Polish */

/* Dialog content area */
[b-f2xlghvegd] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Form field focus enhancement */
[b-f2xlghvegd] .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--transition-fast);
}

/* Text field styling */
[b-f2xlghvegd] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-f2xlghvegd] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--border-color-medium);
}

[b-f2xlghvegd] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

[b-f2xlghvegd] .mud-input-outlined .mud-input {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

[b-f2xlghvegd] .mud-input-outlined .mud-input-label {
    color: var(--text-secondary);
}

[b-f2xlghvegd] .mud-input-outlined.mud-input-focused .mud-input-label {
    color: var(--accent-color);
}

[b-f2xlghvegd] .mud-input-outlined .mud-input::placeholder {
    color: var(--text-muted);
}

/* Multiline textarea */
[b-f2xlghvegd] .mud-input-outlined textarea {
    color: var(--text-primary);
    line-height: 1.5;
    resize: vertical;
}

/* Button feedback */
[b-f2xlghvegd] .mud-button-root {
    transition: all var(--transition-fast);
}

[b-f2xlghvegd] .mud-button-root:active {
    transform: scale(var(--click-scale, 0.97));
}
/* /Features/Core/Components/Footer.razor.rz.scp.css */
/* ==========================================================================
   Footer.razor - Glassmorphism Footer Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

[b-55alx56nie] footer {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
}

[b-55alx56nie] .footer-glass {
    background: var(--glass-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--glass-appbar-shadow);
}

/* Footer links */
[b-55alx56nie] .footer-link {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

[b-55alx56nie] .footer-link:hover {
    color: var(--accent-hover);
}

/* Footer meta text */
[b-55alx56nie] .footer-meta {
    color: var(--text-muted);
}

/* Status indicator */
[b-55alx56nie] .footer-status {
    color: var(--success-color);
}

[b-55alx56nie] .footer-status-warning {
    color: var(--warning-color);
}

/* Update warning */
[b-55alx56nie] .footer-update-warning {
    color: var(--warning-color);
}

/* Icon spacing */
[b-55alx56nie] .footer-icon {
    margin-right: var(--space-xs);
    width: 1em;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-55alx56nie] .footer-glass {
        padding: var(--space-xs) var(--space-sm);
    }
}

@media (max-width: 640px) {
    [b-55alx56nie] .footer-glass {
        font-size: var(--text-xs);
    }
}
/* /Features/Core/Components/SiteContextToggle.razor.rz.scp.css */
/* SiteContextToggle.razor.css - Scoped styles for site context switcher */
/* CRITICAL: All styling uses CSS variables from ayva-theme.css */

/* Backdrop for click-away */
.toggle-backdrop[b-frxjiu17mj] {
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: transparent;
}

/* Main toggle container - positioned bottom-left */
.site-context-toggle[b-frxjiu17mj] {
    position: fixed;
    bottom: var(--space-lg);
    left: var(--space-lg);
    z-index: 9997;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

/* Collapsed toggle button */
.toggle-icon[b-frxjiu17mj] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.toggle-icon:hover[b-frxjiu17mj] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    color: var(--text-primary);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.toggle-icon:active[b-frxjiu17mj] {
    transform: scale(0.98);
}

/* Context-specific icon colors */
.toggle-icon.network[b-frxjiu17mj] {
    border-color: var(--success-color-30);
}

.toggle-icon.network:hover[b-frxjiu17mj] {
    border-color: var(--success-color);
}

.toggle-icon.ai[b-frxjiu17mj] {
    border-color: var(--accent-color-30);
}

.toggle-icon.ai:hover[b-frxjiu17mj] {
    border-color: var(--accent-color);
}

/* Override indicator dot */
.override-indicator[b-frxjiu17mj] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--warning-color);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 6px var(--warning-color);
    animation: pulse-subtle-b-frxjiu17mj 2s ease-in-out infinite;
}

@keyframes pulse-subtle-b-frxjiu17mj {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Expanded panel */
.toggle-panel[b-frxjiu17mj] {
    position: absolute;
    bottom: 52px;
    left: 0;
    width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: slideUp-b-frxjiu17mj 0.2s ease-out;
}

@keyframes slideUp-b-frxjiu17mj {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel header */
.toggle-header[b-frxjiu17mj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.toggle-label[b-frxjiu17mj] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Reset button */
.reset-btn[b-frxjiu17mj] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
}

.reset-btn:hover[b-frxjiu17mj] {
    background: var(--bg-hover);
    color: var(--warning-color);
}

/* Toggle options container */
.toggle-options[b-frxjiu17mj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Individual toggle option buttons */
.toggle-option[b-frxjiu17mj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
    font-family: var(--font-primary);
}

.toggle-option:hover[b-frxjiu17mj] {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.toggle-option.active[b-frxjiu17mj] {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.toggle-option.active:hover[b-frxjiu17mj] {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Option icon containers */
.option-icon[b-frxjiu17mj] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.option-icon.network[b-frxjiu17mj] {
    background: var(--success-bg);
    color: var(--success-color);
}

.option-icon.ai[b-frxjiu17mj] {
    background: var(--info-bg);
    color: var(--info-color);
}

.toggle-option.active .option-icon[b-frxjiu17mj] {
    background: var(--white-overlay-20);
    color: white;
}

/* Option label */
.option-label[b-frxjiu17mj] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    flex: 1;
}

/* Default badge */
.default-badge[b-frxjiu17mj] {
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.toggle-option.active .default-badge[b-frxjiu17mj] {
    background: var(--white-overlay-20);
    color: var(--white-overlay-90);
}

/* Panel footer */
.toggle-footer[b-frxjiu17mj] {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.domain-hint[b-frxjiu17mj] {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
    text-align: center;
}

/* Focus states for accessibility */
.site-context-toggle:focus-visible[b-frxjiu17mj] {
    outline: none;
}

.site-context-toggle:focus-visible .toggle-icon[b-frxjiu17mj] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.toggle-option:focus-visible[b-frxjiu17mj],
.reset-btn:focus-visible[b-frxjiu17mj] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .site-context-toggle[b-frxjiu17mj] {
        bottom: var(--space-md);
        left: var(--space-md);
    }

    .toggle-icon[b-frxjiu17mj] {
        width: 36px;
        height: 36px;
    }

    .toggle-icon svg[b-frxjiu17mj] {
        width: 16px;
        height: 16px;
    }

    .toggle-panel[b-frxjiu17mj] {
        width: 180px;
        bottom: 48px;
    }
}

/* Very small screens - minimal footprint */
@media (max-width: 480px) {
    .site-context-toggle[b-frxjiu17mj] {
        bottom: var(--space-sm);
        left: var(--space-sm);
    }

    .toggle-icon[b-frxjiu17mj] {
        width: 32px;
        height: 32px;
    }

    .toggle-icon svg[b-frxjiu17mj] {
        width: 14px;
        height: 14px;
    }

    .toggle-panel[b-frxjiu17mj] {
        width: 160px;
        padding: var(--space-sm);
    }

    .toggle-option[b-frxjiu17mj] {
        padding: var(--space-xs) var(--space-sm);
    }

    .option-icon[b-frxjiu17mj] {
        width: 24px;
        height: 24px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .toggle-icon[b-frxjiu17mj],
    .toggle-panel[b-frxjiu17mj],
    .toggle-option[b-frxjiu17mj],
    .reset-btn[b-frxjiu17mj] {
        animation: none;
        transition-duration: 0.01ms;
    }

    .override-indicator[b-frxjiu17mj] {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .toggle-icon[b-frxjiu17mj] {
        border-width: 2px;
    }

    .toggle-option.active[b-frxjiu17mj] {
        border-width: 2px;
    }
}
/* /Features/Customer/Components/AboutUsSection.razor.rz.scp.css */
/* ==========================================================================
   AboutUsSection.razor.css - About / Our Network Section Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Container - Entrance animation
   -------------------------------------------------------------------------- */

[b-7byq9vhf24] .about-section {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
    animation-delay: 0.2s;
}

/* --------------------------------------------------------------------------
   Glass Content Panel - Desktop
   -------------------------------------------------------------------------- */

[b-7byq9vhf24] .about-content-desktop {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl) var(--space-3xl);
    box-shadow: var(--glass-card-shadow);
}

/* --------------------------------------------------------------------------
   Glass Content Panel - Mobile
   -------------------------------------------------------------------------- */

[b-7byq9vhf24] .about-content-mobile {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--glass-card-shadow);
}

/* --------------------------------------------------------------------------
   Section Title - Accent gradient text
   -------------------------------------------------------------------------- */

[b-7byq9vhf24] .about-title {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-lg) !important;
}

/* --------------------------------------------------------------------------
   Text Readability
   -------------------------------------------------------------------------- */

[b-7byq9vhf24] .about-text {
    color: var(--text-secondary) !important;
    line-height: 1.7;
}

[b-7byq9vhf24] .about-text-highlight {
    color: var(--warning-text) !important;
    line-height: 1.7;
}

[b-7byq9vhf24] .about-text-accent {
    color: var(--success-text) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-7byq9vhf24] .about-content-desktop {
        padding: var(--space-2xl) var(--space-xl);
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-7byq9vhf24] .about-section {
        opacity: 1;
        animation: none;
    }
}
/* /Features/Customer/Components/Account/SettingsTab.razor.rz.scp.css */
.settings-container[b-lnesmkh9yu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    max-width: 800px;
}

.settings-loading[b-lnesmkh9yu] {
    display: flex;
    justify-content: center;
    padding: 80px var(--space-2xl);
}

.glass-card[b-lnesmkh9yu] {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
}

.settings-section[b-lnesmkh9yu] {
    transition: transform var(--transition-fast);
}

.employee-section[b-lnesmkh9yu] {
    border-left: 4px solid var(--warning-color);
}

.section-header[b-lnesmkh9yu] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.setting-group[b-lnesmkh9yu] {
    padding: var(--space-lg);
    background: var(--bg-overlay);
    border-radius: var(--radius-lg);
}

.discord-linked[b-lnesmkh9yu] {
    padding: var(--space-md);
    background: var(--discord-color-10);
    border-radius: var(--radius-md);
}

.ring-group-list[b-lnesmkh9yu] {
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
}

.ring-member[b-lnesmkh9yu] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    color: var(--text-secondary);
}
/* /Features/Customer/Components/ComparisonDialog.razor.rz.scp.css */
/* ComparisonDialog.razor.css - Component-specific styles only */
/* Base styling is handled by ayva-theme.css and mudblazor-overrides.css */

/* Dialog container styles are in ayva-theme.css (global) because
   MudDialog renders outside the component tree and CSS isolation
   can't reach it. See .mud-dialog.comparison-dialog rules. */

/* ========================================
   Dialog Header
   ======================================== */
.dialog-header[b-mq7ft05819] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xl) var(--space-3xl);
    background: linear-gradient(180deg, var(--accent-color-15), var(--accent-color-5), transparent);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

/* Subtle animated gradient shimmer in header */
.dialog-header[b-mq7ft05819]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-color-5) 25%,
        var(--accent-color-10) 50%,
        var(--accent-color-5) 75%,
        transparent 100%
    );
    animation: shimmerSweep 8s ease-in-out infinite;
    pointer-events: none;
}

.header-content[b-mq7ft05819] {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    position: relative;
    z-index: var(--z-base);
}

.header-icon-wrapper[b-mq7ft05819] {
    position: relative;
}

/* Glow ring behind icon */
.header-icon-wrapper[b-mq7ft05819]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    opacity: 0.3;
    filter: blur(8px);
    animation: breathe 3s ease-in-out infinite;
}

[b-mq7ft05819] .header-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    color: var(--text-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-base);
    box-shadow: var(--glow-accent);
}

.header-title[b-mq7ft05819] {
    color: var(--text-primary) !important;
    font-weight: var(--font-bold) !important;
    margin: 0;
}

.header-subtitle[b-mq7ft05819] {
    color: var(--text-secondary) !important;
    margin-top: 0.125rem;
}

[b-mq7ft05819] .zip-badge {
    background: var(--accent-gradient) !important;
    color: var(--text-white) !important;
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    position: relative;
    z-index: var(--z-base);
    box-shadow: var(--glow-accent);
}

/* ========================================
   Content & Tabs
   ======================================== */
.comparison-content[b-mq7ft05819] {
    padding: 0;
    min-height: 25rem;
    overflow: auto;
}

[b-mq7ft05819] .comparison-tabs {
    background: transparent !important;
}

[b-mq7ft05819] .comparison-tabs .mud-tabs-toolbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--space-xl);
}

[b-mq7ft05819] .comparison-tabs .mud-tab {
    color: var(--text-secondary) !important;
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-transform: none;
    min-width: 6.25rem;
    transition: all var(--transition-smooth);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-md) var(--space-xl);
}

[b-mq7ft05819] .comparison-tabs .mud-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover);
}

[b-mq7ft05819] .comparison-tabs .mud-tab.mud-tab-active {
    color: var(--accent-color) !important;
    background: var(--accent-color-5);
}

/* Active tab icon glow */
[b-mq7ft05819] .comparison-tabs .mud-tab.mud-tab-active .mud-icon-root {
    filter: drop-shadow(0 0 6px var(--accent-color));
}

[b-mq7ft05819] .comparison-tabs .mud-tabs-slider {
    background: var(--accent-gradient) !important;
    height: 0.1875rem;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    box-shadow: var(--glow-accent);
}

[b-mq7ft05819] .tab-panel {
    padding: var(--space-3xl);
    min-height: 20rem;
    animation: tabFadeIn-b-mq7ft05819 var(--transition-smooth);
}

@keyframes tabFadeIn-b-mq7ft05819 {
    from {
        opacity: 0;
        transform: translateY(var(--space-sm));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Chart Sections (Speed & Latency)
   ======================================== */
.chart-section[b-mq7ft05819] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    min-height: 20rem;
}

.chart-container[b-mq7ft05819] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    min-height: 17.5rem;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.chart-container:hover[b-mq7ft05819] {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md), var(--glow-accent);
    transform: translateY(var(--hover-lift));
}

.chart-label[b-mq7ft05819] {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
    margin-bottom: var(--space-xs);
}

.chart-sublabel[b-mq7ft05819] {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
    display: block;
}

.latency-chart[b-mq7ft05819] {
    /* Latency chart uses Height="280" so needs more room than the speed charts */
    min-height: 21.5rem;
}

/* ========================================
   Latency Legend
   ======================================== */
.latency-legend[b-mq7ft05819] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-color);
}

.legend-item[b-mq7ft05819] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.legend-item:hover[b-mq7ft05819] {
    color: var(--text-primary);
}

.legend-dot[b-mq7ft05819] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

.legend-item:hover .legend-dot[b-mq7ft05819] {
    transform: scale(1.3);
}

.legend-dot.excellent[b-mq7ft05819] {
    background: var(--success-color);
    box-shadow: var(--glow-success);
}

.legend-dot.good[b-mq7ft05819] {
    background: var(--success-color);
    box-shadow: var(--glow-success);
}

.legend-dot.fair[b-mq7ft05819] {
    background: var(--warning-color);
    box-shadow: var(--glow-warning);
}

.legend-dot.poor[b-mq7ft05819] {
    background: var(--error-color);
    box-shadow: var(--glow-error);
}

/* ========================================
   Features Grid
   ======================================== */
.features-section[b-mq7ft05819] {
    padding: var(--space-sm) 0;
}

.features-grid[b-mq7ft05819] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-sm);
}

.features-header[b-mq7ft05819] {
    display: grid;
    grid-template-columns: 2fr repeat(6, 1fr);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.feature-name-header[b-mq7ft05819] {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.provider-header[b-mq7ft05819] {
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-left: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.provider-header.ayva[b-mq7ft05819] {
    color: var(--accent-color);
    background: var(--accent-color-10);
    font-weight: var(--font-bold);
}

.feature-row[b-mq7ft05819] {
    display: grid;
    grid-template-columns: 2fr repeat(6, 1fr);
    border-bottom: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.feature-row:last-child[b-mq7ft05819] {
    border-bottom: none;
}

.feature-row:hover[b-mq7ft05819] {
    background: var(--bg-hover);
}

.feature-row:hover .feature-cell.ayva[b-mq7ft05819] {
    background: var(--accent-color-10);
}

.feature-name[b-mq7ft05819] {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.feature-name span[b-mq7ft05819] {
    cursor: help;
    border-bottom: 1px dotted var(--text-muted);
    transition: border-color var(--transition-fast);
}

.feature-name span:hover[b-mq7ft05819] {
    border-color: var(--accent-color);
    color: var(--accent-light);
}

.feature-cell[b-mq7ft05819] {
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-subtle);
    position: relative;
    transition: background var(--transition-fast);
}

.feature-cell.ayva[b-mq7ft05819] {
    background: var(--accent-color-5);
}

.feature-cell.supported[b-mq7ft05819] {
    color: var(--success-color);
}

.feature-cell.not-supported[b-mq7ft05819] {
    color: var(--text-muted);
}

.feature-cell.ayva.supported[b-mq7ft05819] {
    color: var(--accent-color);
}

/* Checkmark glow for Ayva supported features */
.feature-cell.ayva.supported[b-mq7ft05819]  .mud-icon-root {
    filter: drop-shadow(0 0 4px var(--accent-color));
}

/* Success glow for other provider supported features */
.feature-cell.supported:not(.ayva)[b-mq7ft05819]  .mud-icon-root {
    filter: drop-shadow(0 0 3px var(--success-color-50));
}

[b-mq7ft05819] .check-icon {
    color: inherit !important;
    transition: transform var(--transition-fast);
}

.feature-row:hover[b-mq7ft05819]  .check-icon {
    transform: scale(1.15);
}

[b-mq7ft05819] .x-icon {
    color: inherit !important;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.feature-row:hover[b-mq7ft05819]  .x-icon {
    opacity: 0.6;
}

.asterisk[b-mq7ft05819] {
    font-size: 0.6rem;
    color: var(--warning-color);
    position: absolute;
    top: var(--space-sm);
    right: var(--space-xs);
}

.features-footnote[b-mq7ft05819] {
    color: var(--text-muted) !important;
    font-size: var(--text-xs);
    padding: var(--space-xl);
    text-align: center;
    font-style: italic;
}

/* ========================================
   Sticky Footer CTA
   ======================================== */
.sticky-footer[b-mq7ft05819] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border-color);
    padding: var(--space-2xl) var(--space-3xl);
}

.cta-content[b-mq7ft05819] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Key differentiators highlight chips */
.cta-highlights[b-mq7ft05819] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border-subtle);
}

.cta-highlight-chip[b-mq7ft05819] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-full);
    color: var(--accent-light);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.cta-highlight-chip:hover[b-mq7ft05819] {
    background: var(--accent-color-20);
    border-color: var(--accent-color-30);
    box-shadow: var(--glow-accent);
}

[b-mq7ft05819] .cta-highlight-chip .mud-icon-root {
    font-size: 0.875rem !important;
    color: var(--accent-color) !important;
}

.cta-action[b-mq7ft05819] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.cta-text[b-mq7ft05819] {
    flex: 1;
}

.cta-title[b-mq7ft05819] {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold);
    margin: 0;
}

.cta-plan[b-mq7ft05819] {
    color: var(--text-secondary) !important;
    margin-top: var(--space-xs);
}

.cta-plan strong[b-mq7ft05819] {
    color: var(--accent-color);
}

.cta-price[b-mq7ft05819] {
    color: var(--success-color);
    font-weight: var(--font-semibold);
}

.cta-buttons[b-mq7ft05819] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

[b-mq7ft05819] .close-btn {
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast);
    border-radius: var(--radius-lg) !important;
}

[b-mq7ft05819] .close-btn:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

[b-mq7ft05819] .signup-btn {
    background: var(--accent-gradient) !important;
    color: var(--text-white) !important;
    font-weight: var(--font-semibold);
    padding: var(--space-md) var(--space-3xl);
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-accent);
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on signup button */
[b-mq7ft05819] .signup-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--white-overlay-15),
        transparent
    );
    transition: left 0.6s ease;
}

[b-mq7ft05819] .signup-btn:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-md), var(--glow-accent-strong);
}

[b-mq7ft05819] .signup-btn:hover::after {
    left: 100%;
}

[b-mq7ft05819] .signup-btn:active {
    transform: translateY(var(--active-press));
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
    /* Dialog container responsive rules are in ayva-theme.css */

    .dialog-header[b-mq7ft05819] {
        padding: var(--space-xl);
    }

    .dialog-header[b-mq7ft05819]::before {
        display: none;
    }

    [b-mq7ft05819] .header-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .header-icon-wrapper[b-mq7ft05819]::before {
        display: none;
    }

    [b-mq7ft05819] .tab-panel {
        padding: var(--space-xl);
    }

    .chart-container:hover[b-mq7ft05819] {
        transform: none;
    }

    .features-header[b-mq7ft05819],
    .feature-row[b-mq7ft05819] {
        grid-template-columns: 1.5fr repeat(6, 1fr);
    }

    .provider-header[b-mq7ft05819],
    .feature-cell[b-mq7ft05819] {
        font-size: 0.6rem;
        padding: var(--space-sm) var(--space-xs);
    }

    .feature-name[b-mq7ft05819] {
        font-size: var(--text-xs);
        padding: var(--space-sm) var(--space-md);
    }

    .cta-highlights[b-mq7ft05819] {
        gap: var(--space-xs);
    }

    .cta-highlight-chip[b-mq7ft05819] {
        font-size: 0.65rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .cta-action[b-mq7ft05819] {
        flex-direction: column;
        text-align: center;
    }

    .cta-buttons[b-mq7ft05819] {
        width: 100%;
        justify-content: center;
    }

    [b-mq7ft05819] .signup-btn {
        flex: 1;
        max-width: 12.5rem;
    }

    .sticky-footer[b-mq7ft05819] {
        padding: var(--space-xl);
    }
}

@media (max-width: 480px) {
    .features-header[b-mq7ft05819],
    .feature-row[b-mq7ft05819] {
        grid-template-columns: 1.2fr repeat(6, 1fr);
    }

    .provider-header[b-mq7ft05819],
    .feature-cell[b-mq7ft05819] {
        font-size: 0.55rem;
        padding: var(--space-sm) 0.125rem;
    }

    .feature-name[b-mq7ft05819] {
        font-size: 0.7rem;
        padding: var(--space-sm);
    }

    .latency-legend[b-mq7ft05819] {
        gap: var(--space-sm);
    }

    .legend-item[b-mq7ft05819] {
        font-size: 0.65rem;
    }

    .cta-highlights[b-mq7ft05819] {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *[b-mq7ft05819],
    *[b-mq7ft05819]::before,
    *[b-mq7ft05819]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for keyboard navigation */
[b-mq7ft05819] .mud-tab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

[b-mq7ft05819] .signup-btn:focus-visible,
[b-mq7ft05819] .close-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
/* /Features/Customer/Components/ContactSection.razor.rz.scp.css */
/* ==========================================================================
   ContactSection.razor.css - Contact / Policies Section Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Header - Glass panel with accent
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-header-card {
    background: var(--glass-panel) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-card-shadow);
}

[b-tn743sdi12] .contact-header-title {
    color: var(--accent-color) !important;
    font-weight: var(--font-bold) !important;
}

[b-tn743sdi12] .contact-header-subtitle {
    color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Content Panels - Glass cards with stagger animation
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-panel {
    background: var(--glass-elevated) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-card-shadow);
    transition: all var(--transition-normal);
}

[b-tn743sdi12] .contact-panel:hover {
    box-shadow: var(--glass-card-shadow-hover);
    border-color: var(--border-color-medium) !important;
}

/* Staggered entrance */
[b-tn743sdi12] .contact-panel-left {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
    animation-delay: 0.1s;
}

[b-tn743sdi12] .contact-panel-right {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
    animation-delay: 0.25s;
}

/* --------------------------------------------------------------------------
   Panel Titles
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-panel-title {
    color: var(--success-text) !important;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-md) !important;
}

[b-tn743sdi12] .contact-panel-text {
    color: var(--text-secondary) !important;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Policy Buttons - Glass outlined style
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .policy-btn {
    border-color: var(--border-color-medium) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-lg) !important;
}

[b-tn743sdi12] .policy-btn:hover {
    border-color: var(--accent-color-30) !important;
    box-shadow: var(--glow-accent);
    background: var(--accent-color-5) !important;
    color: var(--accent-light) !important;
}

/* --------------------------------------------------------------------------
   Contact Action Buttons - Primary CTA style
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-action-btn {
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-lg) !important;
}

[b-tn743sdi12] .contact-action-btn:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-accent);
}

/* --------------------------------------------------------------------------
   Social / Messaging Buttons - Glass outlined
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .social-btn {
    border-color: var(--border-color-medium) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-lg) !important;
}

[b-tn743sdi12] .social-btn:hover {
    border-color: var(--accent-color-30) !important;
    background: var(--accent-color-5) !important;
    box-shadow: var(--glow-accent);
    color: var(--accent-light) !important;
}

/* --------------------------------------------------------------------------
   Divider Styling
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-divider {
    border-color: var(--border-color) !important;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Section Labels / Sub-headings
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-subheading {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
}

[b-tn743sdi12] .contact-body-text {
    color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Address Block
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .address-text {
    color: var(--text-primary) !important;
    font-weight: var(--font-medium) !important;
}

/* --------------------------------------------------------------------------
   Arrow icon
   -------------------------------------------------------------------------- */

[b-tn743sdi12] .contact-arrow-icon {
    color: var(--accent-color) !important;
    opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-tn743sdi12] .contact-panel {
        border-radius: var(--radius-xl) !important;
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-tn743sdi12] .contact-panel-left,
    [b-tn743sdi12] .contact-panel-right {
        opacity: 1;
        animation: none;
    }

    [b-tn743sdi12] .contact-action-btn:hover,
    [b-tn743sdi12] .policy-btn:hover,
    [b-tn743sdi12] .social-btn:hover {
        transform: none;
    }
}
/* /Features/Customer/Components/CoverageMapDialog.razor.rz.scp.css */
/* CoverageMapDialog.razor.css - Immersive coverage map viewer */

/* ========================================
   Dialog Container - Near fullscreen
   ======================================== */
[b-wzyqtgpi8x] .mud-dialog.coverage-map-dialog {
    width: 96vw;
    height: 90vh;
    max-width: 96vw;
    max-height: 90vh;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--dialog-shadow) !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hide MudDialog's built-in close button */
[b-wzyqtgpi8x] .mud-dialog.coverage-map-dialog .mud-dialog-title .mud-icon-button[aria-label="Close dialog"] {
    display: none !important;
}

[b-wzyqtgpi8x] .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-wzyqtgpi8x] .mud-dialog-title {
    padding: 0 !important;
    background: transparent;
    flex-shrink: 0;
}

[b-wzyqtgpi8x] .mud-dialog-actions {
    display: none !important;
}

/* ========================================
   Dialog Header
   ======================================== */
.dialog-header[b-wzyqtgpi8x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    background: var(--glass-dark);
    border-bottom: 1px solid var(--border-color);
}

.header-left[b-wzyqtgpi8x] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-icon[b-wzyqtgpi8x] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-accent);
}

.header-title[b-wzyqtgpi8x] {
    color: var(--text-primary) !important;
    font-weight: var(--font-bold) !important;
    font-size: var(--text-lg) !important;
    margin: 0;
    white-space: nowrap;
}

[b-wzyqtgpi8x] .close-btn {
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

[b-wzyqtgpi8x] .close-btn:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* ========================================
   Map Selector Chips
   ======================================== */
.map-selector[b-wzyqtgpi8x] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-xl);
    background: var(--glass-dark);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.map-chip[b-wzyqtgpi8x] {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.map-chip:hover[b-wzyqtgpi8x] {
    color: var(--text-primary);
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.map-chip.active[b-wzyqtgpi8x] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-white);
    box-shadow: 0 0 12px var(--accent-color-30);
}

/* ========================================
   Map Content - Full bleed
   ======================================== */
.map-content[b-wzyqtgpi8x] {
    width: 100%;
    flex: 1;
    min-height: 0;
}


/* ========================================
   Loading State
   ======================================== */
.loading-container[b-wzyqtgpi8x] {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton-map[b-wzyqtgpi8x] {
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shimmer-overlay[b-wzyqtgpi8x] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--white-overlay-05) 50%,
        transparent 100%
    );
    animation: shimmerSweep 1.5s infinite;
}

.skeleton-content[b-wzyqtgpi8x] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.skeleton-icon[b-wzyqtgpi8x] {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    background: var(--accent-color-10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.skeleton-text[b-wzyqtgpi8x] {
    color: var(--text-muted) !important;
}

/* ========================================
   Empty State
   ======================================== */
.empty-state[b-wzyqtgpi8x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}

.empty-state-card[b-wzyqtgpi8x] {
    text-align: center;
    padding: var(--space-4xl) var(--space-3xl);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    max-width: 25rem;
}

.empty-icon[b-wzyqtgpi8x] {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-2xl);
    color: var(--info-color);
}

.empty-title[b-wzyqtgpi8x] {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
    margin-bottom: var(--space-sm) !important;
}

.empty-description[b-wzyqtgpi8x] {
    color: var(--text-secondary) !important;
    line-height: 1.5;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
    [b-wzyqtgpi8x] .mud-dialog.coverage-map-dialog {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0 !important;
        border: none !important;
    }

    .dialog-header[b-wzyqtgpi8x] {
        padding: var(--space-sm) var(--space-md);
    }

    .header-icon[b-wzyqtgpi8x] {
        width: 2rem;
        height: 2rem;
    }

    .header-title[b-wzyqtgpi8x] {
        font-size: var(--text-base) !important;
    }

    .map-chip[b-wzyqtgpi8x] {
        padding: 0.125rem var(--space-sm);
        font-size: 0.65rem;
    }
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .shimmer-overlay[b-wzyqtgpi8x] {
        animation: none;
    }
}

[b-wzyqtgpi8x] .close-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.map-chip:focus-visible[b-wzyqtgpi8x] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
/* /Features/Customer/Components/Dashboard/ActivityFeed.razor.rz.scp.css */
/* ActivityFeed - Glassmorphism Activity List
 * Uses CSS variables from ayva-theme.css
 */

.activity-feed[b-9arvjri41e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item[b-9arvjri41e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.activity-item:hover[b-9arvjri41e] {
    background: var(--bg-hover);
    border-color: var(--accent-color-20);
    transform: translateX(4px);
}

.activity-icon[b-9arvjri41e] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.paid[b-9arvjri41e] {
    background: var(--success-color-20);
    color: var(--success-text);
}

.activity-icon.unpaid[b-9arvjri41e] {
    background: var(--warning-color-20);
    color: var(--warning-text);
}

.activity-icon.overdue[b-9arvjri41e] {
    background: var(--error-color-20);
    color: var(--error-text);
}

.activity-content[b-9arvjri41e] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-9arvjri41e] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.activity-meta[b-9arvjri41e] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.activity-amount[b-9arvjri41e] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.activity-amount.paid[b-9arvjri41e] {
    color: var(--success-text);
}

.activity-amount.unpaid[b-9arvjri41e] {
    color: var(--warning-text);
}

.activity-amount.overdue[b-9arvjri41e] {
    color: var(--error-text);
}

.activity-status[b-9arvjri41e] {
    flex-shrink: 0;
}

.empty-activity[b-9arvjri41e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 8px;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-subtle);
}
/* /Features/Customer/Components/Dashboard/DeviceStatusCard.razor.rz.scp.css */
/* DeviceStatusCard - Glassmorphism Device Card
 * Uses CSS variables from ayva-theme.css
 */

.device-card[b-vsaj2896pf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    transition: all var(--transition-normal);
    box-shadow:
        0 4px 6px -1px var(--black-overlay-20),
        var(--shadow-inset-light);
}

.device-card:hover[b-vsaj2896pf] {
    background: var(--bg-hover);
    border-color: var(--accent-color-30);
    transform: translateY(-2px);
    box-shadow:
        0 8px 16px -2px var(--black-overlay-30),
        var(--shadow-inset-highlight),
        0 0 15px var(--accent-color-10);
}

.device-card.online[b-vsaj2896pf] {
    border-left-color: var(--success-color);
}

.device-card.offline[b-vsaj2896pf] {
    border-left-color: var(--error-color);
}

.device-card.degraded[b-vsaj2896pf] {
    border-left-color: var(--warning-color);
}

.device-status-indicator[b-vsaj2896pf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.device-status-indicator.online[b-vsaj2896pf] {
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color-50);
}

.device-status-indicator.offline[b-vsaj2896pf] {
    background: var(--error-color);
    box-shadow: 0 0 8px var(--error-color-50);
}

.device-status-indicator.degraded[b-vsaj2896pf] {
    background: var(--warning-color);
    box-shadow: 0 0 8px var(--warning-color-50);
}

.device-icon[b-vsaj2896pf] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-color-15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-hover);
    flex-shrink: 0;
}

.device-info[b-vsaj2896pf] {
    flex: 1;
    min-width: 0;
}

.device-name[b-vsaj2896pf] {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-model[b-vsaj2896pf] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.device-metrics[b-vsaj2896pf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.metric[b-vsaj2896pf] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.metric-value[b-vsaj2896pf] {
    font-family: var(--font-mono);
}

.status-online[b-vsaj2896pf] {
    color: var(--success-text);
}

.status-offline[b-vsaj2896pf] {
    color: var(--error-text);
}
/* /Features/Customer/Components/Dashboard/PortalSkeleton.razor.rz.scp.css */
/* PortalSkeleton - Loading Skeleton for Portal Dashboard
 * Uses CSS variables from ayva-theme.css
 * All styling via centralized design tokens - NO hardcoded values
 */

.portal-skeleton[b-1budahjl2j] {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.skeleton-welcome[b-1budahjl2j] {
    width: 100%;
}

.skeleton-stats[b-1budahjl2j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.skeleton-grid[b-1budahjl2j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 900px) {
    .skeleton-stats[b-1budahjl2j] {
        grid-template-columns: repeat(2, 1fr);
    }
    .skeleton-grid[b-1budahjl2j] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Customer/Components/Dashboard/QuickStatsBar.razor.rz.scp.css */
/* QuickStatsBar - Glassmorphism Stats Grid
 * Uses CSS variables from ayva-theme.css
 */

.quick-stats-bar[b-sh8jnmzpwf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

@media (max-width: 1100px) {
    .quick-stats-bar[b-sh8jnmzpwf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .quick-stats-bar[b-sh8jnmzpwf] {
        grid-template-columns: 1fr;
    }
}

.stat-item[b-sh8jnmzpwf] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: all var(--transition-normal);
    box-shadow: var(--glass-card-shadow);
}

.stat-item:hover[b-sh8jnmzpwf] {
    transform: translateY(var(--hover-lift));
    border-color: var(--accent-color-30);
    box-shadow: var(--glass-card-shadow-hover);
}

.stat-item.good[b-sh8jnmzpwf] {
    border-left: 3px solid var(--success-color);
}

.stat-item.due[b-sh8jnmzpwf] {
    border-left: 3px solid var(--warning-color);
}

.stat-item.overdue[b-sh8jnmzpwf] {
    border-left: 3px solid var(--error-color);
}

.stat-icon[b-sh8jnmzpwf] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color-20);
    color: var(--accent-hover);
    flex-shrink: 0;
}

.stat-icon.speed[b-sh8jnmzpwf] {
    background: var(--success-color-20);
    color: var(--success-text);
}

.stat-icon.devices[b-sh8jnmzpwf] {
    background: var(--info-color-20);
    color: var(--info-text);
}

.stat-icon.uptime[b-sh8jnmzpwf] {
    background: var(--secondary-accent-20);
    color: var(--secondary-accent);
}

.stat-content[b-sh8jnmzpwf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-sh8jnmzpwf] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-sh8jnmzpwf] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.stat-meta[b-sh8jnmzpwf] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
/* /Features/Customer/Components/Dashboard/UsageMeter.razor.rz.scp.css */
/* UsageMeter - Data Usage Ring Visualization
 * Uses CSS variables from ayva-theme.css
 * All styling via centralized design tokens - NO hardcoded values
 */

.usage-meter[b-iincex78dt] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

@media (max-width: 600px) {
    .usage-meter[b-iincex78dt] {
        flex-direction: column;
    }
}

.usage-ring-container[b-iincex78dt] {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.usage-ring[b-iincex78dt] {
    width: 100%;
    height: 100%;
}

.ring-bg[b-iincex78dt] {
    stroke: var(--border-color);
}

.ring-progress[b-iincex78dt] {
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
    --ring-circumference: 264;
    animation: ringFill 1s var(--panel-enter-easing) both;
}

.ring-progress.normal[b-iincex78dt] { stroke: var(--success-color); }
.ring-progress.warning[b-iincex78dt] { stroke: var(--warning-color); }
.ring-progress.critical[b-iincex78dt] { stroke: var(--error-color); }

.usage-center[b-iincex78dt] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.usage-percent[b-iincex78dt] {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.usage-label[b-iincex78dt] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.usage-details[b-iincex78dt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    flex: 1;
}

.usage-stat[b-iincex78dt] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stat-info[b-iincex78dt] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-iincex78dt] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.stat-label[b-iincex78dt] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
/* /Features/Customer/Components/Dashboard/WelcomeCard.razor.rz.scp.css */
/* WelcomeCard - Glassmorphism Welcome Hero Card
 * Uses CSS variables from ayva-theme.css
 */

.welcome-card[b-usi75if9ti] {
    position: relative;
    background: linear-gradient(135deg, var(--accent-color-30), var(--secondary-accent-20));
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-3xl);
    padding: var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    overflow: hidden;
    box-shadow: var(--glass-card-shadow);
}

.welcome-card.overdue[b-usi75if9ti] {
    background: linear-gradient(135deg, var(--error-color-30), var(--error-color-10));
}

.welcome-card.suspended[b-usi75if9ti] {
    background: linear-gradient(135deg, var(--warning-color-30), var(--warning-color-10));
}

.welcome-content[b-usi75if9ti] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    z-index: 1;
}

.greeting[b-usi75if9ti] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.greeting-text[b-usi75if9ti] {
    font-weight: var(--font-semibold);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.account-badges[b-usi75if9ti] {
    display: flex;
    gap: var(--space-sm);
}

.welcome-actions[b-usi75if9ti] {
    display: flex;
    gap: var(--space-md);
    z-index: 1;
}

.welcome-decoration[b-usi75if9ti] {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bg-hover) 0%, transparent 70%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .welcome-card[b-usi75if9ti] {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
    }

    .welcome-content[b-usi75if9ti] {
        align-items: center;
    }

    .account-badges[b-usi75if9ti] {
        justify-content: center;
    }

    .welcome-actions[b-usi75if9ti] {
        flex-direction: column;
        width: 100%;
    }
}
/* /Features/Customer/Components/DynamicCoverageMap.razor.rz.scp.css */
/* DynamicCoverageMap.razor.css - Map container styling */

/* ========================================
   Map Wrapper
   ======================================== */
.map-wrapper[b-tmy1q4osau] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ========================================
   Map Container
   ======================================== */
.map-container[b-tmy1q4osau] {
    overflow: hidden;
}

/* ========================================
   Loading Overlay
   ======================================== */
.loading-overlay[b-tmy1q4osau] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--glass-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

[b-tmy1q4osau] .loading-spinner {
    color: var(--accent-color) !important;
}

.loading-text[b-tmy1q4osau] {
    color: var(--text-secondary) !important;
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    [b-tmy1q4osau] .loading-spinner {
        animation-duration: 0.01ms !important;
    }
}
/* /Features/Customer/Components/Employee/EmployeePanel.razor.rz.scp.css */
.employee-panel[b-0ixk54uygw] {
    width: 100%;
}

[b-0ixk54uygw] .employee-tabs {
    background: transparent;
}

[b-0ixk54uygw] .employee-tabs .mud-tabs-toolbar {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2xl);
}

[b-0ixk54uygw] .employee-tabs .mud-tab {
    color: var(--text-secondary);
}

[b-0ixk54uygw] .employee-tabs .mud-tab.mud-tab-active {
    color: var(--text-primary);
}

[b-0ixk54uygw] .employee-tab-panel {
    padding: 0;
}

.dashboard-loading[b-0ixk54uygw] {
    display: flex;
    justify-content: center;
    padding: 60px;
}

.dashboard-grid[b-0ixk54uygw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 1200px) {
    .dashboard-grid[b-0ixk54uygw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-grid[b-0ixk54uygw] {
        grid-template-columns: 1fr;
    }
}

.glass-card[b-0ixk54uygw] {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.glass-card:hover[b-0ixk54uygw] {
    transform: translateY(var(--hover-lift));
    box-shadow: 0 8px 32px var(--black-overlay-30);
}

.card-icon[b-0ixk54uygw] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.card-icon.time[b-0ixk54uygw] {
    background: var(--info-color-20);
    color: var(--info-color);
}

.card-icon.mileage[b-0ixk54uygw] {
    background: var(--success-color-20);
    color: var(--success-text);
}

.card-icon.expense[b-0ixk54uygw] {
    background: var(--warning-color-20);
    color: var(--warning-color);
}

.card-icon.balance[b-0ixk54uygw] {
    background: var(--secondary-accent-20);
    color: var(--secondary-accent);
}

.time-status[b-0ixk54uygw] {
    margin: var(--space-md) 0;
}

.time-status.active[b-0ixk54uygw] {
    padding: var(--space-md);
    background: var(--success-color-10);
    border-radius: var(--radius-md);
}

.stat-row[b-0ixk54uygw] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.stat-large[b-0ixk54uygw] {
    margin: var(--space-lg) 0;
}

.stat-large .value[b-0ixk54uygw] {
    font-size: 2rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.stat-large .unit[b-0ixk54uygw] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: var(--space-xs);
}

.stat-large.balance .value[b-0ixk54uygw] {
    color: var(--success-text);
}

.balance-breakdown[b-0ixk54uygw] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.breakdown-item[b-0ixk54uygw] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.card-header[b-0ixk54uygw] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.activity-list[b-0ixk54uygw],
.payout-list[b-0ixk54uygw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.activity-item[b-0ixk54uygw] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
}

.activity-icon[b-0ixk54uygw] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon.time[b-0ixk54uygw] {
    background: var(--info-color-20);
    color: var(--info-color);
}

.activity-icon.mileage[b-0ixk54uygw] {
    background: var(--success-color-20);
    color: var(--success-text);
}

.activity-icon.expense[b-0ixk54uygw] {
    background: var(--warning-color-20);
    color: var(--warning-color);
}

.activity-content[b-0ixk54uygw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-title[b-0ixk54uygw] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.activity-meta[b-0ixk54uygw] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.activity-amount[b-0ixk54uygw] {
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.payout-item[b-0ixk54uygw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
}

.payout-info[b-0ixk54uygw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payout-period[b-0ixk54uygw] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.payout-date[b-0ixk54uygw] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.payout-amount[b-0ixk54uygw] {
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.payout-amount.paid[b-0ixk54uygw] {
    color: var(--success-text);
}

.empty-activity[b-0ixk54uygw],
.empty-payout[b-0ixk54uygw] {
    padding: var(--space-2xl);
    text-align: center;
}

.tab-content[b-0ixk54uygw] {
    padding: 0;
}

.tab-header[b-0ixk54uygw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

[b-0ixk54uygw] .glass-table {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.payroll-grid[b-0ixk54uygw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 768px) {
    .payroll-grid[b-0ixk54uygw] {
        grid-template-columns: 1fr;
    }
}

[b-0ixk54uygw] .payroll-table {
    background: transparent;
}

[b-0ixk54uygw] .payroll-table td {
    color: var(--text-secondary);
}

[b-0ixk54uygw] .total-row {
    background: var(--bg-overlay);
}

[b-0ixk54uygw] .total-row td {
    color: var(--success-text) !important;
}
/* /Features/Customer/Components/GoogleReviews.razor.rz.scp.css */
/* ==========================================================================
   GoogleReviews.razor.css - Reviews Grid Layout
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

.reviews-container[b-zlq6iqlude] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* --------------------------------------------------------------------------
   Transparency Banner
   -------------------------------------------------------------------------- */

.reviews-transparency[b-zlq6iqlude] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

[b-zlq6iqlude] .reviews-transparency-icon {
    color: var(--info-color) !important;
    font-size: var(--text-lg) !important;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Reviews Grid
   -------------------------------------------------------------------------- */

.reviews-grid[b-zlq6iqlude] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Review Card - High contrast on dark section
   -------------------------------------------------------------------------- */

.review-card-v2[b-zlq6iqlude] {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    box-shadow: var(--glass-card-shadow);
    transition: border-color var(--transition-normal),
                box-shadow var(--transition-normal),
                transform var(--transition-normal);
}

.review-card-v2:hover[b-zlq6iqlude] {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--glass-card-shadow-hover);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Review Header (avatar + name + rating + date)
   -------------------------------------------------------------------------- */

.review-header[b-zlq6iqlude] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.review-author[b-zlq6iqlude] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.review-author-name[b-zlq6iqlude] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-date[b-zlq6iqlude] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Review Body Text - MAXIMUM CONTRAST
   -------------------------------------------------------------------------- */

.review-body[b-zlq6iqlude] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.7;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
   Google Attribution
   -------------------------------------------------------------------------- */

.review-attribution[b-zlq6iqlude] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[b-zlq6iqlude] .review-google-icon {
    color: var(--text-muted) !important;
    font-size: var(--text-sm) !important;
}

/* --------------------------------------------------------------------------
   Star Rating
   -------------------------------------------------------------------------- */

[b-zlq6iqlude] .review-card-v2 .mud-rating .mud-rating-item .mud-svg-icon {
    color: var(--warning-color) !important;
}

/* --------------------------------------------------------------------------
   CTA Link to Google - Prominent
   -------------------------------------------------------------------------- */

.reviews-google-link[b-zlq6iqlude] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-lg);
}

.reviews-google-btn[b-zlq6iqlude] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-3xl);
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm), var(--glow-accent);
}

.reviews-google-btn:hover[b-zlq6iqlude] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--glow-accent);
    color: var(--text-primary);
}

[b-zlq6iqlude] .reviews-external-icon {
    font-size: var(--text-sm) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .reviews-grid[b-zlq6iqlude] {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--space-lg);
    }
}

@media (max-width: 640px) {
    .reviews-grid[b-zlq6iqlude] {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .review-card-v2[b-zlq6iqlude] {
        padding: var(--space-lg);
    }

    .reviews-transparency[b-zlq6iqlude] {
        font-size: var(--text-xs);
        padding: var(--space-sm) var(--space-md);
    }

    .reviews-google-btn[b-zlq6iqlude] {
        padding: var(--space-md) var(--space-2xl);
        font-size: var(--text-sm);
    }
}
/* /Features/Customer/Components/LandingSection.razor.rz.scp.css */
/* ==========================================================================
   LandingSection.razor.css - Hero Section Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Background Video - Force full viewport coverage
   video.js adds vjs-fluid class that sets width:100% from parent,
   overriding the inline 100vw. We force viewport coverage here.
   -------------------------------------------------------------------------- */

[b-ya6h5tnbvd] #backgroundvideo1,
[b-ya6h5tnbvd] #backgroundvideo2 {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    max-width: none !important;
    object-fit: cover;
    left: 0 !important;
    top: 0 !important;
}

/* --------------------------------------------------------------------------
   Feature Cards - Glassmorphism treatment
   -------------------------------------------------------------------------- */

[b-ya6h5tnbvd] .feature-card {
    background: var(--glass-panel) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-card-shadow);
    transition: all var(--transition-normal);
}

[b-ya6h5tnbvd] .feature-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--glass-card-shadow-hover);
    border-color: var(--border-color-medium);
    background: var(--glass-panel-hover) !important;
}

[b-ya6h5tnbvd] .feature-card .mud-typography-h5 {
    color: var(--text-primary) !important;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-xs);
}

[b-ya6h5tnbvd] .feature-card .mud-typography-body1 {
    color: var(--text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Feature Card Stagger Entrance Animation
   -------------------------------------------------------------------------- */

[b-ya6h5tnbvd] .feature-card-0 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.6s;
}

[b-ya6h5tnbvd] .feature-card-1 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.72s;
}

[b-ya6h5tnbvd] .feature-card-2 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.84s;
}

[b-ya6h5tnbvd] .feature-card-3 {
    opacity: 0;
    animation: cardReveal var(--transition-smooth) ease-out forwards;
    animation-delay: 0.96s;
}

/* --------------------------------------------------------------------------
   CTA Button Group - Glass backdrop
   -------------------------------------------------------------------------- */

[b-ya6h5tnbvd] .cta-button-group {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg) var(--space-xl);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Scroll Indicator
   -------------------------------------------------------------------------- */

.scroll-indicator[b-ya6h5tnbvd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 100%;
    gap: var(--space-xs);
    padding-bottom: var(--space-md);
    animation: scrollBounce-b-ya6h5tnbvd 2s ease-in-out infinite;
}

[b-ya6h5tnbvd] .scroll-indicator-text {
    color: var(--text-primary) !important;
    font-size: var(--text-xs) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.05em;
}

[b-ya6h5tnbvd] .scroll-indicator-icon {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

@keyframes scrollBounce-b-ya6h5tnbvd {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* --------------------------------------------------------------------------
   Responsive - Cards stack on smaller screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    [b-ya6h5tnbvd] .feature-card {
        margin-bottom: var(--space-sm);
    }
}

@media (max-width: 640px) {
    [b-ya6h5tnbvd] .cta-button-group {
        padding: var(--space-md);
        border-radius: var(--radius-xl);
    }

    .scroll-indicator[b-ya6h5tnbvd] {
        padding-bottom: var(--space-sm);
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-ya6h5tnbvd] .feature-card-0,
    [b-ya6h5tnbvd] .feature-card-1,
    [b-ya6h5tnbvd] .feature-card-2,
    [b-ya6h5tnbvd] .feature-card-3 {
        opacity: 1;
        animation: none;
    }

    [b-ya6h5tnbvd] .feature-card:hover {
        transform: none;
    }

    .scroll-indicator[b-ya6h5tnbvd] {
        animation: none;
    }
}
/* /Features/Customer/Components/NetHeader.razor.rz.scp.css */
.mud-markdown-body p[b-vyy8o7qrsu] {
    margin-bottom: unset !important;
}

[b-vyy8o7qrsu] .site-notice {
    padding: 0.5rem 1rem !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    border-left-width: 4px !important;
}

[b-vyy8o7qrsu] .site-notice + .site-notice {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Ensure close/action icons have good contrast on colored backgrounds */
[b-vyy8o7qrsu] .site-notice .mud-alert-close-button,
[b-vyy8o7qrsu] .site-notice .notice-action-btn {
    color: rgba(255, 255, 255, 0.85) !important;
}

[b-vyy8o7qrsu] .site-notice .mud-alert-close-button:hover,
[b-vyy8o7qrsu] .site-notice .notice-action-btn:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
/* /Features/Customer/Components/PlanCard.razor.rz.scp.css */
/* PlanCard - Dark Glassmorphism Card Styling */

/* ============================================================
   BASE CARD
   ============================================================ */

.plan-card[b-jo6a9rwtz0] {
    position: relative;
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                border-color var(--transition-smooth);
    overflow: hidden;
}

.plan-card:hover[b-jo6a9rwtz0] {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--glass-card-shadow-hover);
    border-color: var(--border-accent);
}

/* ============================================================
   RECOMMENDED CARD VARIANT
   ============================================================ */

.plan-card--recommended[b-jo6a9rwtz0] {
    border-color: var(--highlight-orange);
    box-shadow: var(--glass-card-shadow), 0 0 16px rgba(255, 152, 0, 0.15);
}

.plan-card--recommended:hover[b-jo6a9rwtz0] {
    box-shadow: var(--glass-card-shadow-hover), var(--highlight-orange-shadow);
}

/* ============================================================
   MOST POPULAR BADGE
   ============================================================ */

.plan-badge[b-jo6a9rwtz0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: var(--highlight-orange-gradient);
    padding: var(--space-sm) var(--space-lg);
    animation: glowPulse 3s ease-in-out infinite;
}

[b-jo6a9rwtz0] .plan-badge-icon {
    color: var(--text-white) !important;
    font-size: var(--text-sm) !important;
}

.plan-badge-text[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-white);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============================================================
   CARD HEADER
   ============================================================ */

.plan-card-header[b-jo6a9rwtz0] {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding-top: var(--space-sm);
}

.plan-card--recommended .plan-card-header[b-jo6a9rwtz0] {
    padding-top: var(--space-3xl);
}

.plan-name[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.plan-price[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-xs);
    line-height: 1.2;
}

.plan-card--recommended .plan-price[b-jo6a9rwtz0] {
    background: var(--highlight-orange-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-note[b-jo6a9rwtz0] {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    margin-top: var(--space-xs);
}

/* ============================================================
   CARD BODY
   ============================================================ */

.plan-card-body[b-jo6a9rwtz0] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   SPEED BLOCK
   ============================================================ */

.plan-speed-block[b-jo6a9rwtz0] {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.plan-speed-display[b-jo6a9rwtz0] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-xs);
    cursor: help;
}

.plan-speed-value[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.plan-card--recommended .plan-speed-value[b-jo6a9rwtz0] {
    background: var(--highlight-orange-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.plan-speed-prefix[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.plan-speed-meta[b-jo6a9rwtz0] {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.plan-speed-detail[b-jo6a9rwtz0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

[b-jo6a9rwtz0] .plan-speed-arrow {
    font-size: var(--text-sm) !important;
}

[b-jo6a9rwtz0] .plan-speed-arrow--down {
    color: var(--accent-color) !important;
}

[b-jo6a9rwtz0] .plan-speed-arrow--up {
    color: var(--success-color) !important;
}

/* ============================================================
   KEY DIFFERENTIATORS (HIGHLIGHTS)
   ============================================================ */

.plan-highlights[b-jo6a9rwtz0] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.plan-highlight-item[b-jo6a9rwtz0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

[b-jo6a9rwtz0] .plan-highlight-icon {
    color: var(--success-color) !important;
    font-size: var(--text-base) !important;
    flex-shrink: 0;
}

/* ============================================================
   FULL DETAILS TOGGLE
   ============================================================ */

.plan-details-toggle[b-jo6a9rwtz0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-md);
}

.plan-details-toggle:hover[b-jo6a9rwtz0] {
    border-color: var(--accent-color-30, rgba(99, 102, 241, 0.3));
    color: var(--text-primary);
    background: var(--bg-hover);
}

[b-jo6a9rwtz0] .plan-details-chevron {
    color: var(--text-muted) !important;
    font-size: var(--text-sm) !important;
}

/* ============================================================
   DETAILS GRID
   ============================================================ */

.plan-details-grid[b-jo6a9rwtz0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    animation: fadeInUp 0.2s ease-out both;
}

.plan-detail-row[b-jo6a9rwtz0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.plan-detail-row:not(:last-child)[b-jo6a9rwtz0] {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-sm);
}

.plan-detail-row--full[b-jo6a9rwtz0] {
    flex-direction: column;
}

.plan-detail-label[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.plan-detail-value[b-jo6a9rwtz0] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: right;
}

.plan-detail-row--full .plan-detail-value[b-jo6a9rwtz0] {
    text-align: left;
    line-height: 1.5;
}

/* ============================================================
   CTA BUTTON
   ============================================================ */

.plan-card-footer[b-jo6a9rwtz0] {
    padding-top: var(--space-lg);
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.plan-cta-btn[b-jo6a9rwtz0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-4xl);
    background: var(--accent-gradient);
    color: var(--text-white);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                opacity var(--transition-fast);
    box-shadow: var(--shadow-sm);
    width: 100%;
    max-width: 240px;
    letter-spacing: 0.02em;
}

.plan-cta-btn:hover:not(:disabled)[b-jo6a9rwtz0] {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--shadow-md), var(--glow-accent);
}

.plan-cta-btn:active:not(:disabled)[b-jo6a9rwtz0] {
    transform: translateY(0) scale(var(--click-scale));
}

.plan-cta-btn:disabled[b-jo6a9rwtz0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.plan-card--recommended .plan-cta-btn[b-jo6a9rwtz0] {
    background: var(--highlight-orange-gradient);
    box-shadow: var(--shadow-sm), 0 0 12px var(--highlight-orange);
}

.plan-card--recommended .plan-cta-btn:hover:not(:disabled)[b-jo6a9rwtz0] {
    box-shadow: var(--shadow-md), var(--highlight-orange-shadow);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .plan-card[b-jo6a9rwtz0] {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }

    .plan-price[b-jo6a9rwtz0] {
        font-size: var(--text-2xl);
    }

    .plan-speed-value[b-jo6a9rwtz0] {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 640px) {
    .plan-card[b-jo6a9rwtz0] {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }

    .plan-name[b-jo6a9rwtz0] {
        font-size: var(--text-lg);
    }

    .plan-price[b-jo6a9rwtz0] {
        font-size: var(--text-2xl);
    }

    .plan-speed-value[b-jo6a9rwtz0] {
        font-size: var(--text-2xl);
    }
}
/* /Features/Customer/Components/PlansDialog.razor.rz.scp.css */
/* PlansDialog - Component-scoped styles for dialog inner content.
   Dialog container styles (width, bg, border) are in ayva-theme.css
   because MudDialog renders outside the component tree. */

/* Dialog Header */
.dialog-header[b-cz8g929f0h] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
}

.dialog-header-icon[b-cz8g929f0h] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dialog-header-text h2[b-cz8g929f0h] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.dialog-header-text p[b-cz8g929f0h] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    margin: 0;
}

/* Plans Grid - auto-fit columns matching PlansSection */
.plans-dialog-grid[b-cz8g929f0h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    align-items: start;
}

/* Grid Item */
.plan-dialog-item[b-cz8g929f0h] {
    display: flex;
    justify-content: center;
}

/* Close Button */
.dialog-close-btn[b-cz8g929f0h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dialog-close-btn:hover[b-cz8g929f0h] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.dialog-close-btn:active[b-cz8g929f0h] {
    transform: translateY(0);
}

/* Responsive: tablet */
@media (max-width: 768px) {
    .plans-dialog-grid[b-cz8g929f0h] {
        gap: var(--space-xl);
    }

    .dialog-header[b-cz8g929f0h] {
        padding: var(--space-md) var(--space-lg);
    }

    .dialog-header-text h2[b-cz8g929f0h] {
        font-size: var(--text-lg);
    }
}

/* Responsive: mobile */
@media (max-width: 640px) {
    .plans-dialog-grid[b-cz8g929f0h] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        max-width: 400px;
        margin: 0 auto;
    }

    .dialog-header[b-cz8g929f0h] {
        padding: var(--space-md);
    }

    .dialog-header-icon[b-cz8g929f0h] {
        width: 40px;
        height: 40px;
    }

    .dialog-header-text h2[b-cz8g929f0h] {
        font-size: var(--text-base);
    }
}
/* /Features/Customer/Components/PlansSection.razor.rz.scp.css */
/* PlansSection - Glassmorphism Plans Grid Layout */

.plans-section[b-qv2qpakhyq] {
    position: relative;
    padding: var(--space-4xl) var(--space-xl);
    max-width: 1440px;
    margin: 0 auto;
}

/* Section Header */
.plans-header[b-qv2qpakhyq] {
    text-align: center;
    margin-bottom: var(--space-4xl);
    animation: fadeInUp 0.5s ease-out both;
}

.plans-title[b-qv2qpakhyq] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.plans-subtitle[b-qv2qpakhyq] {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    color: var(--text-primary);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Plans Grid - responsive auto-fit layout */
.plans-grid[b-qv2qpakhyq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    align-items: stretch;
}

/* Grid Item - stretch to fill cell */
.plan-grid-item[b-qv2qpakhyq] {
    display: flex;
    min-width: 0;
}

/* ============================================================
   SHARED NETWORK SPECIFICATIONS
   ============================================================ */

.plans-specs[b-qv2qpakhyq] {
    margin-top: var(--space-3xl);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.plans-specs-toggle[b-qv2qpakhyq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-normal);
    width: 100%;
    justify-content: center;
}

.plans-specs-toggle:hover[b-qv2qpakhyq] {
    background: var(--bg-hover);
    border-color: var(--accent-color-30, rgba(99, 102, 241, 0.3));
    color: var(--text-primary);
}

[b-qv2qpakhyq] .plans-specs-icon {
    color: var(--accent-color) !important;
    font-size: var(--text-base) !important;
}

[b-qv2qpakhyq] .plans-specs-chevron {
    color: var(--text-muted) !important;
    font-size: var(--text-base) !important;
    margin-left: auto;
}

.plans-specs-content[b-qv2qpakhyq] {
    margin-top: var(--space-md);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    animation: fadeInUp 0.3s ease-out both;
}

.plans-specs-grid[b-qv2qpakhyq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.spec-item[b-qv2qpakhyq] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

[b-qv2qpakhyq] .spec-icon {
    color: var(--accent-color) !important;
    font-size: var(--text-lg) !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.spec-text[b-qv2qpakhyq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spec-label[b-qv2qpakhyq] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spec-value[b-qv2qpakhyq] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Large tablets / small desktops: 2 columns */
@media (max-width: 1100px) {
    .plans-grid[b-qv2qpakhyq] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .plans-section[b-qv2qpakhyq] {
        padding: var(--space-3xl) var(--space-lg);
    }

    .plans-title[b-qv2qpakhyq] {
        font-size: var(--text-2xl);
    }

    .plans-subtitle[b-qv2qpakhyq] {
        font-size: var(--text-base);
    }

    .plans-grid[b-qv2qpakhyq] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .plans-specs-grid[b-qv2qpakhyq] {
        grid-template-columns: 1fr;
    }
}

/* Mobile: single column stack */
@media (max-width: 640px) {
    .plans-section[b-qv2qpakhyq] {
        padding: var(--space-2xl) var(--space-md);
    }

    .plans-header[b-qv2qpakhyq] {
        margin-bottom: var(--space-3xl);
    }

    .plans-grid[b-qv2qpakhyq] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        max-width: 400px;
        margin: 0 auto;
    }

    .plans-specs[b-qv2qpakhyq] {
        margin-top: var(--space-2xl);
    }

    .plans-specs-content[b-qv2qpakhyq] {
        padding: var(--space-lg);
    }
}
/* /Features/Customer/Components/SignupDialog.razor.rz.scp.css */
/*
 * SignupDialog Component Styles
 * Glassmorphism-enhanced multi-step signup wizard
 * Uses CSS variables from ayva-theme.css - NO hardcoded values
 */

/* ==========================================================================
   GOOGLE PLACES AUTOCOMPLETE (PlaceAutocompleteElement)
   Styled to match glassmorphism theme
   ========================================================================== */

.signup-address-field[b-tnwo2e9cb5] {
    position: relative;
}

.signup-address-label[b-tnwo2e9cb5] {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    margin-left: var(--space-xs);
    font-weight: var(--font-medium);
}

.signup-address-icon[b-tnwo2e9cb5] {
    position: absolute;
    top: 2.25rem;
    left: var(--space-sm);
    color: var(--accent-color) !important;
    z-index: 1;
    pointer-events: none;
}

.signup-address-input[b-tnwo2e9cb5] {
    width: 100%;
}

/* Style the PlaceAutocompleteElement web component */
[b-tnwo2e9cb5] .signup-address-input gmp-place-autocomplete {
    width: 100%;
    display: block;
    --gmp-mat-color-surface: var(--bg-secondary);
    --gmp-mat-color-on-surface: var(--text-primary);
    --gmp-mat-color-primary: var(--accent-color);
}

/* ==========================================================================
   STEPPER STYLING
   Modern connected-dot stepper with gradient line
   ========================================================================== */

[b-tnwo2e9cb5] .signup-stepper {
    padding: var(--space-lg) 0;
}

/* Stepper header / navigation area */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-header {
    padding: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* Individual step labels */
[b-tnwo2e9cb5] .signup-stepper .mud-step-label-content {
    color: var(--text-secondary) !important;
    transition: color var(--transition-fast);
}

/* Active step label */
[b-tnwo2e9cb5] .signup-stepper .mud-step-label-content.mud-step-label-content-active {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
}

/* Step icon circles */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-nav-step .mud-avatar {
    transition: all var(--transition-smooth);
    box-shadow: none;
}

/* Active step icon glow */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-nav-step-active .mud-avatar {
    box-shadow: var(--glow-accent);
}

/* Completed step icon */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-nav-step-completed .mud-avatar {
    box-shadow: var(--glow-success);
}

/* Connector line between steps */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-nav-connector {
    background: var(--border-color) !important;
    transition: background var(--transition-smooth);
}

/* Completed connector line */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-nav-connector-completed {
    background: var(--success-color) !important;
}

/* Step content area */
[b-tnwo2e9cb5] .signup-stepper .mud-stepper-content {
    padding: var(--space-md) var(--space-lg);
}

/* ==========================================================================
   STEP CONTENT AREAS
   Fade-in animation for each step's content
   ========================================================================== */

[b-tnwo2e9cb5] .signup-step-content {
    animation: signupStepFadeIn-b-tnwo2e9cb5 0.35s var(--panel-enter-easing) both;
}

@keyframes signupStepFadeIn-b-tnwo2e9cb5 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   TEXT CONTRAST CLASSES
   Ensure text is readable against glassmorphism backgrounds
   ========================================================================== */

[b-tnwo2e9cb5] .signup-section-title {
    color: var(--text-primary) !important;
}

[b-tnwo2e9cb5] .signup-section-subtitle {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   ALERT STYLING
   Info/success alerts within steps
   ========================================================================== */

[b-tnwo2e9cb5] .signup-alert {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
}

[b-tnwo2e9cb5] .signup-alert.mud-alert-filled-info {
    background: var(--info-bg) !important;
    border-color: var(--info-border) !important;
}

[b-tnwo2e9cb5] .signup-alert.mud-alert-filled-success {
    background: var(--success-bg) !important;
    border-color: var(--success-border) !important;
}

/* ==========================================================================
   FORM INPUT STYLING
   Glass-style borders, focus glow, floating labels
   ========================================================================== */

/* Outlined input containers */
[b-tnwo2e9cb5] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-fast) !important;
}

/* Focus state */
[b-tnwo2e9cb5] .mud-input-outlined:focus-within .mud-input-outlined-border,
[b-tnwo2e9cb5] .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--border-focus) !important;
    box-shadow: var(--shadow-focus), var(--glow-accent) !important;
}

/* Input text color */
[b-tnwo2e9cb5] .mud-input > input,
[b-tnwo2e9cb5] .mud-input > textarea {
    color: var(--text-primary) !important;
}

/* Placeholder text */
[b-tnwo2e9cb5] .mud-input > input::placeholder,
[b-tnwo2e9cb5] .mud-input > textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Floating label */
[b-tnwo2e9cb5] .mud-input-label {
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast) !important;
}

/* Focused label */
[b-tnwo2e9cb5] .mud-input-label-inputcontrol.mud-input-label-animated {
    color: var(--accent-color) !important;
}

/* Adornment icons */
[b-tnwo2e9cb5] .mud-input-adornment .mud-icon-root {
    color: var(--text-muted) !important;
    transition: color var(--transition-fast) !important;
}

[b-tnwo2e9cb5] .mud-input-focused .mud-input-adornment .mud-icon-root {
    color: var(--accent-color) !important;
}

/* Helper text */
[b-tnwo2e9cb5] .mud-input-helper-text {
    color: var(--text-muted) !important;
}

/* ==========================================================================
   MAP CONTAINER
   Glass border and rounded corners for map area
   ========================================================================== */

[b-tnwo2e9cb5] .signup-map-container {
    background: var(--glass-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}

.signup-map[b-tnwo2e9cb5] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
}

/* Map loading overlay */
[b-tnwo2e9cb5] .signup-map-container .mud-overlay {
    border-radius: var(--radius-xl) !important;
}

/* ==========================================================================
   SERVICEABILITY INDICATORS
   Chips with subtle glow for coverage status
   ========================================================================== */

[b-tnwo2e9cb5] .signup-serviceability .mud-chip {
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-fast) !important;
    animation: signupStepFadeIn-b-tnwo2e9cb5 0.3s var(--panel-enter-easing) both;
}

/* Success chip - available */
[b-tnwo2e9cb5] .signup-serviceability .mud-chip.mud-chip-color-success {
    box-shadow: var(--glow-success) !important;
}

/* Warning chip - may be available */
[b-tnwo2e9cb5] .signup-serviceability .mud-chip.mud-chip-color-warning {
    box-shadow: var(--glow-warning) !important;
}

/* Info chip - challenging / search */
[b-tnwo2e9cb5] .signup-serviceability .mud-chip.mud-chip-color-info {
    box-shadow: var(--glow-info) !important;
}

/* ==========================================================================
   PLAN COMPARISON TABLE
   Glass-styled plan selection table
   ========================================================================== */

[b-tnwo2e9cb5] .signup-plan-table {
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

[b-tnwo2e9cb5] .signup-plan-table thead tr {
    background: var(--accent-gradient) !important;
}

[b-tnwo2e9cb5] .signup-plan-table thead th {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
    border-color: var(--border-color) !important;
    transition: all var(--transition-fast) !important;
}

[b-tnwo2e9cb5] .signup-plan-table thead th:hover {
    background: var(--bg-hover) !important;
}

[b-tnwo2e9cb5] .signup-plan-table tbody tr {
    transition: background var(--transition-fast) !important;
}

[b-tnwo2e9cb5] .signup-plan-table tbody tr:hover {
    background: var(--bg-hover) !important;
}

[b-tnwo2e9cb5] .signup-plan-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Selected plan column highlight */
[b-tnwo2e9cb5] .signup-plan-table .mud-button-root {
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-smooth) !important;
}

[b-tnwo2e9cb5] .signup-plan-table .mud-button-root:hover {
    transform: translateY(var(--hover-lift));
}

/* ==========================================================================
   TECHNICAL DETAILS EXPANSION PANEL
   Glass-styled expandable section
   ========================================================================== */

[b-tnwo2e9cb5] .signup-tech-details .mud-expand-panel {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden;
}

[b-tnwo2e9cb5] .signup-tech-details .mud-expand-panel-header {
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast) !important;
}

[b-tnwo2e9cb5] .signup-tech-details .mud-expand-panel-header:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

[b-tnwo2e9cb5] .signup-tech-details .mud-expand-panel-content {
    border-top: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   OPTION CARDS (Host Election, Financial Assistance)
   Glass panel styling for checkbox option cards
   ========================================================================== */

[b-tnwo2e9cb5] .signup-option-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    height: 100%;
    transition: all var(--transition-smooth) !important;
}

[b-tnwo2e9cb5] .signup-option-card:hover {
    border-color: var(--border-color-medium) !important;
    background: var(--glass-panel-hover) !important;
    box-shadow: var(--shadow-sm) !important;
}

[b-tnwo2e9cb5] .signup-option-card--info {
    background: var(--info-bg) !important;
    border-color: var(--info-border) !important;
}

[b-tnwo2e9cb5] .signup-option-card--info:hover {
    background: var(--card-state-info-bg) !important;
    box-shadow: var(--glow-info) !important;
}

/* ==========================================================================
   CONFIRMATION SUMMARY CARDS
   Glass panels for the review/confirm step
   ========================================================================== */

[b-tnwo2e9cb5] .signup-summary-card {
    background: var(--glass-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-smooth) !important;
    animation: signupStepFadeIn-b-tnwo2e9cb5 0.4s var(--panel-enter-easing) both;
}

[b-tnwo2e9cb5] .signup-summary-card:nth-child(1) { animation-delay: 0ms; }
[b-tnwo2e9cb5] .signup-summary-card:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 1); }
[b-tnwo2e9cb5] .signup-summary-card:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 2); }
[b-tnwo2e9cb5] .signup-summary-card:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 3); }

[b-tnwo2e9cb5] .signup-summary-card:hover {
    border-color: var(--border-accent) !important;
    box-shadow: var(--glass-card-shadow-hover) !important;
}

/* Summary card section titles */
[b-tnwo2e9cb5] .signup-summary-card .mud-typography-subtitle1 {
    color: var(--accent-color) !important;
    font-weight: var(--font-semibold) !important;
}

/* Summary card dividers */
[b-tnwo2e9cb5] .signup-summary-card .mud-divider {
    border-color: var(--border-color) !important;
}

/* Summary card text */
[b-tnwo2e9cb5] .signup-summary-card .mud-typography-body1 {
    color: var(--text-primary) !important;
}

[b-tnwo2e9cb5] .signup-summary-card .mud-typography-caption {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   ACTION BUTTONS
   Styled next/back/submit buttons
   ========================================================================== */

.signup-actions[b-tnwo2e9cb5] {
    width: 100%;
}

/* Back button - ghost/outline style */
[b-tnwo2e9cb5] .signup-btn-back {
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-fast) !important;
    color: var(--text-secondary) !important;
}

[b-tnwo2e9cb5] .signup-btn-back:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* Cancel button - subtle style */
[b-tnwo2e9cb5] .signup-btn-cancel {
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-fast) !important;
    color: var(--text-muted) !important;
}

[b-tnwo2e9cb5] .signup-btn-cancel:hover {
    color: var(--text-secondary) !important;
    background: var(--bg-hover) !important;
}

/* Next button - accent gradient with hover lift */
[b-tnwo2e9cb5] .signup-btn-next {
    border-radius: var(--radius-lg) !important;
    background: var(--accent-gradient) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-smooth) !important;
    min-width: 120px;
}

[b-tnwo2e9cb5] .signup-btn-next:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-accent) !important;
    background: var(--accent-gradient-hover) !important;
}

[b-tnwo2e9cb5] .signup-btn-next:active {
    transform: translateY(0) scale(var(--click-scale));
}

/* Submit button - larger, more prominent with glow */
[b-tnwo2e9cb5] .signup-btn-submit {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glow-success) !important;
    transition: all var(--transition-smooth) !important;
    min-width: 180px;
    font-weight: var(--font-semibold) !important;
    padding: var(--space-sm) var(--space-2xl) !important;
}

[b-tnwo2e9cb5] .signup-btn-submit:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-md), var(--glow-success) !important;
}

[b-tnwo2e9cb5] .signup-btn-submit:active {
    transform: translateY(0) scale(var(--click-scale));
}

/* Disabled submit button */
[b-tnwo2e9cb5] .signup-btn-submit.mud-button-disabled {
    box-shadow: none !important;
    opacity: 0.6;
}

/* ==========================================================================
   DIALOG-LEVEL ENHANCEMENTS
   Enhanced backdrop and glow for the dialog itself
   ========================================================================== */

[b-tnwo2e9cb5] .mud-dialog-title {
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--space-lg) var(--space-2xl) !important;
}

[b-tnwo2e9cb5] .mud-dialog-actions {
    border-top: 1px solid var(--border-color) !important;
    padding: var(--space-md) var(--space-2xl) !important;
    background: var(--black-overlay-20) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   Full-screen on mobile, centered dialog on desktop
   ========================================================================== */

@media (max-width: 640px) {
    /* Full-screen dialog on mobile */
    [b-tnwo2e9cb5] .ayva-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Reduce padding on mobile */
    [b-tnwo2e9cb5] .signup-stepper .mud-stepper-content {
        padding: var(--space-sm) var(--space-md);
    }

    [b-tnwo2e9cb5] .signup-stepper .mud-stepper-header {
        padding: var(--space-xs) var(--space-sm);
    }

    /* Stack step labels vertically on mobile */
    [b-tnwo2e9cb5] .signup-stepper .mud-step-label-content .mud-typography {
        font-size: var(--text-xs) !important;
    }

    /* Summary cards stack */
    [b-tnwo2e9cb5] .signup-summary-card {
        margin-bottom: var(--space-sm);
    }

    /* Buttons go full-width on mobile */
    .signup-actions[b-tnwo2e9cb5] {
        flex-direction: column-reverse !important;
        gap: var(--space-sm) !important;
    }

    .signup-actions > div[b-tnwo2e9cb5] {
        width: 100%;
    }

    [b-tnwo2e9cb5] .signup-btn-next,
    [b-tnwo2e9cb5] .signup-btn-submit,
    [b-tnwo2e9cb5] .signup-btn-back,
    [b-tnwo2e9cb5] .signup-btn-cancel {
        width: 100% !important;
    }

    /* Plan table horizontal scroll */
    [b-tnwo2e9cb5] .signup-plan-table {
        overflow-x: auto !important;
    }
}

@media (max-width: 768px) {
    /* Reduce dialog max-width on tablets */
    [b-tnwo2e9cb5] .ayva-dialog {
        max-width: 95vw !important;
    }
}
/* /Features/Customer/Components/SocialProofBar.razor.rz.scp.css */
/* ==========================================================================
   SocialProofBar.razor.css - Trust Strip Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

.social-proof-bar[b-ee26b0ypzj] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg) var(--space-xl);
    max-width: 700px;
    margin: 0 auto;
    align-self: center;
}

.social-proof-inner[b-ee26b0ypzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.social-proof-score[b-ee26b0ypzj] {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--warning-color);
}

.social-proof-text[b-ee26b0ypzj] {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.social-proof-text strong[b-ee26b0ypzj] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.social-proof-link[b-ee26b0ypzj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.social-proof-link:hover[b-ee26b0ypzj] {
    color: var(--accent-hover);
}

[b-ee26b0ypzj] .social-proof-link-icon {
    font-size: var(--text-sm) !important;
    color: inherit !important;
}

/* Star Rating */
[b-ee26b0ypzj] .social-proof-bar .mud-rating .mud-rating-item .mud-svg-icon {
    color: var(--warning-color) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .social-proof-bar[b-ee26b0ypzj] {
        padding: var(--space-md);
        max-width: 100%;
        border-radius: var(--radius-xl);
    }

    .social-proof-inner[b-ee26b0ypzj] {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .social-proof-score[b-ee26b0ypzj] {
        font-size: var(--text-xl);
    }

    .social-proof-text[b-ee26b0ypzj] {
        font-size: var(--text-sm);
        text-align: center;
    }
}
/* /Features/Customer/Pages/Billing.razor.rz.scp.css */
/* Billing Page - Scoped Styles */

.billing-page[b-rsayfoy98f] {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: var(--space-2xl);
}

.page-header[b-rsayfoy98f] {
    margin-bottom: var(--space-2xl);
}

.loading-container[b-rsayfoy98f] {
    display: flex;
    justify-content: center;
    padding: var(--space-4xl);
}

.error-container[b-rsayfoy98f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--space-lg);
    padding: var(--space-3xl);
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-2xl);
}

/* Balance Section */
.balance-section[b-rsayfoy98f] {
    margin-bottom: var(--space-2xl);
}

.balance-card[b-rsayfoy98f] {
    background: linear-gradient(135deg, var(--success-color-20), var(--success-color-10));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--success-color-30);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.balance-card:hover[b-rsayfoy98f] {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-lg);
}

.balance-card.has-balance[b-rsayfoy98f] {
    background: linear-gradient(135deg, var(--warning-color-20), var(--warning-color-10));
    border-color: var(--warning-color-30);
}

.balance-info[b-rsayfoy98f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.balance-label[b-rsayfoy98f] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.balance-amount[b-rsayfoy98f] {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
}

.balance-amount.paid[b-rsayfoy98f] {
    color: var(--success-color);
}

.balance-amount.due[b-rsayfoy98f] {
    color: var(--warning-color);
}

.due-date[b-rsayfoy98f] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.balance-actions[b-rsayfoy98f] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Billing Stats */
.billing-stats[b-rsayfoy98f] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.stat-item[b-rsayfoy98f] {
    background: var(--bg-secondary);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.stat-item:hover[b-rsayfoy98f] {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-lg);
}

.stat-content[b-rsayfoy98f] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-rsayfoy98f] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.stat-label[b-rsayfoy98f] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Tabs */
[b-rsayfoy98f] .billing-tabs {
    background: var(--bg-secondary);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.tab-content[b-rsayfoy98f] {
    padding: var(--space-xl);
}

[b-rsayfoy98f] .billing-table {
    background: transparent !important;
}

.invoice-number[b-rsayfoy98f] {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
}

.invoice-amount[b-rsayfoy98f],
.payment-amount[b-rsayfoy98f] {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
}

.payment-method[b-rsayfoy98f] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Payment Methods */
.payment-methods-grid[b-rsayfoy98f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.payment-method-card[b-rsayfoy98f] {
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.payment-method-card:hover[b-rsayfoy98f] {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color-medium);
}

.payment-method-card.default[b-rsayfoy98f] {
    border-color: var(--accent-color-50);
    background: var(--accent-color-10);
}

.method-icon[b-rsayfoy98f] {
    width: 48px;
    height: 48px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-info[b-rsayfoy98f] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.method-name[b-rsayfoy98f] {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.method-expiry[b-rsayfoy98f] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.add-payment-method[b-rsayfoy98f] {
    background: var(--bg-overlay);
    border: 2px dashed var(--border-color-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.add-payment-method:hover[b-rsayfoy98f] {
    border-color: var(--accent-color-50);
    background: var(--accent-color-10);
    transform: translateY(var(--hover-lift));
}

.empty-state[b-rsayfoy98f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl);
    gap: var(--space-lg);
}

.payment-dialog-content[b-rsayfoy98f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
}

/* Overdue badge pulse */
.overdue-badge[b-rsayfoy98f] {
    animation: statusPulse 2s ease-in-out infinite;
}

/* Responsive Design */
@@media (max-width: 900px) {
    .billing-stats[b-rsayfoy98f] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 640px) {
    .billing-page[b-rsayfoy98f] {
        padding: var(--space-lg);
    }

    .billing-stats[b-rsayfoy98f] {
        grid-template-columns: 1fr;
    }

    .balance-card[b-rsayfoy98f] {
        padding: var(--space-xl);
        flex-direction: column;
        align-items: flex-start;
    }

    .balance-amount[b-rsayfoy98f] {
        font-size: var(--text-2xl);
    }

    .balance-actions[b-rsayfoy98f] {
        width: 100%;
    }

    .tab-content[b-rsayfoy98f] {
        padding: var(--space-md);
    }

    .payment-methods-grid[b-rsayfoy98f] {
        grid-template-columns: 1fr;
    }

    .empty-state[b-rsayfoy98f] {
        padding: var(--space-3xl);
    }
}
/* /Features/Customer/Pages/Employee.razor.rz.scp.css */
.employee-page-container[b-bk7skb51aj] {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: var(--space-lg);
}

.page-header[b-bk7skb51aj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.breadcrumb-link[b-bk7skb51aj] {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover[b-bk7skb51aj] {
    color: var(--text-primary);
}

.page-title[b-bk7skb51aj] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.loading-container[b-bk7skb51aj] {
    display: flex;
    justify-content: center;
    padding: var(--space-4xl);
}
/* /Features/Customer/Pages/Index.razor.rz.scp.css */
/* ==========================================================================
   Index.razor - Network Landing Page Styles
   All values use CSS variables from ayva-theme.css
   ========================================================================== */

.ayva-networks-logo[b-4mtptuw0z7] {
    background-image: url(/assets/images/Ayva-Logo-Networks.svg);
    height: 100%;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    z-index: 5000;
    position: fixed;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Reviews Section - Dark glassmorphism card area
   -------------------------------------------------------------------------- */

[b-4mtptuw0z7] .reviews-section {
    background: rgba(10, 15, 30, 0.95);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-4xl) var(--space-xl);
}

[b-4mtptuw0z7] .section-header-glass {
    margin-bottom: var(--space-3xl);
}

[b-4mtptuw0z7] .reviews-title {
    font-weight: var(--font-bold);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 var(--space-sm) 0;
}

[b-4mtptuw0z7] .reviews-subtitle {
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   Section Reveal Animations - staggered fade-in-up on page load (8 sections)
   -------------------------------------------------------------------------- */

[b-4mtptuw0z7] .mud-main-content > * {
    opacity: 0;
    animation: fadeInUp var(--transition-smooth) ease-out forwards;
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(1) {
    animation-delay: calc(var(--stagger-delay) * 1);
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(2) {
    animation-delay: calc(var(--stagger-delay) * 2);
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(3) {
    animation-delay: calc(var(--stagger-delay) * 3);
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(4) {
    animation-delay: calc(var(--stagger-delay) * 4);
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(5) {
    animation-delay: calc(var(--stagger-delay) * 5);
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(6) {
    animation-delay: calc(var(--stagger-delay) * 6);
}

[b-4mtptuw0z7] .mud-main-content > *:nth-child(7) {
    animation-delay: calc(var(--stagger-delay) * 7);
}

/* --------------------------------------------------------------------------
   CTA Button Glow Effect
   -------------------------------------------------------------------------- */

[b-4mtptuw0z7] .mud-button-root.mud-button-filled {
    transition: all var(--transition-normal);
}

[b-4mtptuw0z7] .mud-button-root.mud-button-filled:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-accent);
}

[b-4mtptuw0z7] .mud-button-root.mud-button-filled:active {
    transform: translateY(var(--active-press));
}

/* --------------------------------------------------------------------------
   Interactive Section Hover Effects
   -------------------------------------------------------------------------- */

[b-4mtptuw0z7] .mud-paper {
    transition: all var(--transition-normal);
}

/* --------------------------------------------------------------------------
   Responsive - Mobile Video Backgrounds
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    [b-4mtptuw0z7] .reviews-section {
        padding: var(--space-2xl) var(--space-md);
    }

    [b-4mtptuw0z7] .reviews-title {
        font-size: var(--text-xl) !important;
    }
}

@media (max-width: 480px) {
    [b-4mtptuw0z7] .reviews-section {
        padding: var(--space-xl) var(--space-sm);
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [b-4mtptuw0z7] .mud-main-content > * {
        opacity: 1;
        animation: none;
    }
}
/* /Features/Customer/Pages/Onboarding.razor.rz.scp.css */
/* Customer Onboarding Page - Scoped Styles */

.onboarding-page[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

/* Header */
.page-header[b-xqhcjr3jpo] {
    text-align: center;
    padding: var(--space-xl) 0 var(--space-md) 0;
}

.header-content[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Loading & Empty */
.loading-container[b-xqhcjr3jpo] {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl);
}

.empty-state[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    text-align: center;
}

/* Pipeline Stepper */
.pipeline-container[b-xqhcjr3jpo] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-md);
    overflow-x: auto;
}

.pipeline-track[b-xqhcjr3jpo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 600px;
    position: relative;
}

.pipeline-step[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    position: relative;
    flex: 1;
    transition: var(--transition-fast);
}

.pipeline-step:hover .step-circle[b-xqhcjr3jpo] {
    transform: scale(1.1);
}

/* Connector Lines */
.connector-line[b-xqhcjr3jpo] {
    position: absolute;
    top: 20px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.connector-line.filled[b-xqhcjr3jpo] {
    background: var(--accent-color);
}

/* Step Circle */
.step-circle[b-xqhcjr3jpo] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    z-index: 1;
    transition: var(--transition-fast);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.pipeline-step.completed .step-circle[b-xqhcjr3jpo] {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.pipeline-step.active .step-circle[b-xqhcjr3jpo] {
    border-color: var(--accent-color);
    background: var(--bg-primary);
    color: var(--accent-color);
    box-shadow: var(--shadow-glow);
}

.pipeline-step.blocked .step-circle[b-xqhcjr3jpo] {
    border-color: var(--error-color);
    background: var(--error-bg);
    color: var(--error-color);
}

.step-number[b-xqhcjr3jpo] {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}

/* Pulse animation for active step */
.pulse-dot[b-xqhcjr3jpo] {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--accent-color);
    position: relative;
}

.pulse-dot[b-xqhcjr3jpo]::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-full);
    border: 2px solid var(--accent-color);
    animation: onboarding-pulse-b-xqhcjr3jpo 1.5s ease-in-out infinite;
}

@keyframes onboarding-pulse-b-xqhcjr3jpo {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.4); opacity: 0; }
}

/* Step Label */
.step-label[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.step-name[b-xqhcjr3jpo] {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    line-height: 1.3;
}

.pipeline-step.completed .step-name[b-xqhcjr3jpo] {
    color: var(--success-color);
}

.pipeline-step.active .step-name[b-xqhcjr3jpo] {
    color: var(--accent-color);
    font-weight: var(--font-semibold);
}

.step-time[b-xqhcjr3jpo] {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Stage Detail Card */
.stage-detail[b-xqhcjr3jpo] {
    width: 100%;
}

.detail-card[b-xqhcjr3jpo] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: var(--transition-fast);
}

.detail-card.status-completed[b-xqhcjr3jpo] {
    border-color: var(--success-color);
}

.detail-card.status-active[b-xqhcjr3jpo] {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow);
}

.detail-card.status-blocked[b-xqhcjr3jpo] {
    border-color: var(--error-color);
}

.detail-header[b-xqhcjr3jpo] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.detail-icon[b-xqhcjr3jpo] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-completed .detail-icon[b-xqhcjr3jpo] {
    background: var(--success-bg);
    color: var(--success-color);
}

.status-active .detail-icon[b-xqhcjr3jpo] {
    background: var(--bg-active);
    color: var(--accent-color);
}

.status-blocked .detail-icon[b-xqhcjr3jpo] {
    background: var(--error-bg);
    color: var(--error-color);
}

.status-pending .detail-icon[b-xqhcjr3jpo] {
    background: var(--bg-hover);
    color: var(--text-muted);
}

.detail-title[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

[b-xqhcjr3jpo] .status-chip {
    width: fit-content;
}

.detail-body[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.detail-description[b-xqhcjr3jpo] {
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-notes[b-xqhcjr3jpo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.detail-footer[b-xqhcjr3jpo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

/* Progress Section */
.progress-card[b-xqhcjr3jpo] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.progress-header[b-xqhcjr3jpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

[b-xqhcjr3jpo] .progress-bar {
    margin-bottom: var(--space-md);
}

.progress-stats[b-xqhcjr3jpo] {
    display: flex;
    justify-content: space-around;
}

.stat-item[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.stat-value[b-xqhcjr3jpo] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.stat-label[b-xqhcjr3jpo] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Help Section */
.help-card[b-xqhcjr3jpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    gap: var(--space-md);
}

.help-content[b-xqhcjr3jpo] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.help-text[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* History Timeline */
.section-title[b-xqhcjr3jpo] {
    margin-bottom: var(--space-md);
}

.history-section[b-xqhcjr3jpo] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.history-timeline[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-left: var(--space-md);
}

.timeline-item[b-xqhcjr3jpo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    position: relative;
    padding-left: var(--space-sm);
}

.timeline-item[b-xqhcjr3jpo]::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 16px;
    bottom: -12px;
    width: 1px;
    background: var(--border-color);
}

.timeline-item:last-child[b-xqhcjr3jpo]::before {
    display: none;
}

.timeline-dot[b-xqhcjr3jpo] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    margin-top: 6px;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-dot.completed[b-xqhcjr3jpo] {
    background: var(--success-color);
}

.timeline-dot.active[b-xqhcjr3jpo] {
    background: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-color);
}

.timeline-dot.blocked[b-xqhcjr3jpo] {
    background: var(--error-color);
}

.timeline-content[b-xqhcjr3jpo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.timeline-header-row[b-xqhcjr3jpo] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Animations */
.animate-fade-in-up[b-xqhcjr3jpo] {
    animation: fadeInUp-b-xqhcjr3jpo 0.5s ease-out both;
}

.animate-stagger-1[b-xqhcjr3jpo] { animation-delay: 0.1s; }
.animate-stagger-2[b-xqhcjr3jpo] { animation-delay: 0.2s; }
.animate-stagger-3[b-xqhcjr3jpo] { animation-delay: 0.3s; }
.animate-stagger-4[b-xqhcjr3jpo] { animation-delay: 0.4s; }
.animate-stagger-5[b-xqhcjr3jpo] { animation-delay: 0.5s; }

@keyframes fadeInUp-b-xqhcjr3jpo {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .onboarding-page[b-xqhcjr3jpo] {
        padding: var(--space-md);
    }

    .pipeline-container[b-xqhcjr3jpo] {
        padding: var(--space-md) var(--space-sm);
    }

    .pipeline-track[b-xqhcjr3jpo] {
        flex-direction: column;
        min-width: unset;
        gap: var(--space-xs);
    }

    .pipeline-step[b-xqhcjr3jpo] {
        flex-direction: row;
        gap: var(--space-md);
    }

    .connector-line[b-xqhcjr3jpo] {
        position: absolute;
        top: unset;
        right: unset;
        left: 19px;
        bottom: 100%;
        width: 2px;
        height: 100%;
    }

    .step-label[b-xqhcjr3jpo] {
        align-items: flex-start;
        text-align: left;
    }

    .step-circle[b-xqhcjr3jpo] {
        width: 36px;
        height: 36px;
    }

    .help-card[b-xqhcjr3jpo] {
        flex-direction: column;
        text-align: center;
    }

    .help-content[b-xqhcjr3jpo] {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .progress-stats[b-xqhcjr3jpo] {
        flex-direction: column;
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-xqhcjr3jpo], *[b-xqhcjr3jpo]::before, *[b-xqhcjr3jpo]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Features/Customer/Pages/Portal.razor.rz.scp.css */
/* Portal Dashboard - Customer Portal Main Layout
 * Uses CSS variables from ayva-theme.css
 * All styling via centralized design tokens - NO hardcoded values
 */

.portal-container[b-1stjj6xua1] {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.portal-grid[b-1stjj6xua1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

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

/* Portal card - glassmorphism card style */
.portal-card[b-1stjj6xua1] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.portal-card:hover[b-1stjj6xua1] {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--glass-card-shadow-hover);
    border-color: var(--accent-color-30);
}

.portal-card:active[b-1stjj6xua1] {
    transform: translateY(var(--active-press));
}

/* Card header styling */
.card-header[b-1stjj6xua1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--text-primary);
}

.card-content[b-1stjj6xua1] {
    min-height: 120px;
}

/* Empty state layout */
.empty-state[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    gap: var(--space-sm);
}

/* Ticket list within support card */
.ticket-list[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ticket-item[b-1stjj6xua1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.ticket-item:hover[b-1stjj6xua1] {
    background: var(--bg-hover);
}

.ticket-status[b-1stjj6xua1] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.ticket-status.new[b-1stjj6xua1] { background: var(--info-color); }
.ticket-status.open[b-1stjj6xua1] { background: var(--warning-color); }
.ticket-status.pending[b-1stjj6xua1] { background: var(--secondary-accent); }
.ticket-status.closed[b-1stjj6xua1] { background: var(--success-color); }

.ticket-info[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-subject[b-1stjj6xua1] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.ticket-meta[b-1stjj6xua1] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Support quick actions */
.support-quick-actions[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
}

/* Troubleshoot promo card */
.troubleshoot-promo[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
    gap: var(--space-xs);
}

/* Employee summary card */
.employee-summary-card[b-1stjj6xua1] {
    border-left: 3px solid var(--warning-color);
}

.employee-quick-stats[b-1stjj6xua1] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}

.employee-clock-status[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.employee-stats-grid[b-1stjj6xua1] {
    display: flex;
    gap: var(--space-xl);
    margin-left: auto;
}

.employee-stat[b-1stjj6xua1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.employee-stat-label[b-1stjj6xua1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.employee-stat-value[b-1stjj6xua1] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.employee-stat-value.balance[b-1stjj6xua1] {
    color: var(--success-text);
}

@@media (max-width: 640px) {
    .employee-quick-stats[b-1stjj6xua1] {
        flex-direction: column;
    }

    .employee-stats-grid[b-1stjj6xua1] {
        margin-left: 0;
    }
}

/* Quick actions bar at bottom */
.quick-actions[b-1stjj6xua1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    padding: var(--space-md);
    background: var(--glass-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
/* /Features/Customer/Pages/Settings.razor.rz.scp.css */
.settings-page-container[b-8wbm55lx5q] {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: var(--space-lg);
}

.page-header[b-8wbm55lx5q] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.breadcrumb-link[b-8wbm55lx5q] {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover[b-8wbm55lx5q] {
    color: var(--text-primary);
}

.breadcrumb-separator[b-8wbm55lx5q] {
    color: var(--text-muted);
}

.page-title[b-8wbm55lx5q] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    margin: 0;
}

.loading-container[b-8wbm55lx5q] {
    display: flex;
    justify-content: center;
    padding: var(--space-4xl);
}
/* /Features/Customer/Pages/Support.razor.rz.scp.css */
/* Support Hub Page - Scoped Styles */

.support-page[b-ak8gz80q4s] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
}

.loading-container[b-ak8gz80q4s] {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl);
}

/* List View */
.list-header[b-ak8gz80q4s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.ticket-stats[b-ak8gz80q4s] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.stat-item[b-ak8gz80q4s] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    text-align: center;
    transition: transform var(--transition-fast);
}

.stat-item:hover[b-ak8gz80q4s] {
    transform: translateY(-2px);
}

.stat-item .stat-value[b-ak8gz80q4s] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    display: block;
}

.stat-item .stat-label[b-ak8gz80q4s] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.stat-item.open .stat-value[b-ak8gz80q4s] { color: var(--warning-color); }
.stat-item.pending .stat-value[b-ak8gz80q4s] { color: var(--info-color); }
.stat-item.closed .stat-value[b-ak8gz80q4s] { color: var(--success-color); }

.filter-bar[b-ak8gz80q4s] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

[b-ak8gz80q4s] .filter-bar .mud-input {
    flex: 1;
}

.tickets-grid[b-ak8gz80q4s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-md);
}

/* Ticket Card with priority-colored left border */
.ticket-card[b-ak8gz80q4s] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    border-left: 4px solid var(--border-color);
}

.ticket-card.priority-urgent[b-ak8gz80q4s] {
    border-left-color: var(--error-color);
}

.ticket-card.priority-high[b-ak8gz80q4s] {
    border-left-color: var(--warning-color);
}

.ticket-card.priority-normal[b-ak8gz80q4s] {
    border-left-color: var(--accent-color);
}

.ticket-card.priority-low[b-ak8gz80q4s] {
    border-left-color: var(--text-muted);
}

.ticket-card:hover[b-ak8gz80q4s] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.ticket-card:hover.priority-urgent[b-ak8gz80q4s] {
    border-left-color: var(--error-color);
}

.ticket-card:hover.priority-high[b-ak8gz80q4s] {
    border-left-color: var(--warning-color);
}

.ticket-card:hover.priority-normal[b-ak8gz80q4s] {
    border-left-color: var(--accent-color);
}

.ticket-card-header[b-ak8gz80q4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.ticket-number[b-ak8gz80q4s] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ticket-subject[b-ak8gz80q4s] {
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.ticket-preview[b-ak8gz80q4s] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

.ticket-footer[b-ak8gz80q4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.ticket-meta[b-ak8gz80q4s] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ticket-date[b-ak8gz80q4s] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* New Ticket Form */
.form-header[b-ak8gz80q4s] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.portal-card[b-ak8gz80q4s] {
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.portal-card:hover[b-ak8gz80q4s] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.form-grid[b-ak8gz80q4s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.span-2[b-ak8gz80q4s] {
    grid-column: span 2;
}

.attachment-section[b-ak8gz80q4s] {
    padding-top: var(--space-sm);
}

.attachments-list[b-ak8gz80q4s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.form-actions[b-ak8gz80q4s] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.quick-help[b-ak8gz80q4s] {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.help-options[b-ak8gz80q4s] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Ticket Detail */
.detail-header[b-ak8gz80q4s] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.header-info[b-ak8gz80q4s] {
    flex: 1;
}

.header-meta[b-ak8gz80q4s] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.ticket-info-bar[b-ak8gz80q4s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.info-item[b-ak8gz80q4s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.info-label[b-ak8gz80q4s] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.info-value[b-ak8gz80q4s] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Conversation */
.conversation-card[b-ak8gz80q4s] {
    margin-bottom: var(--space-lg);
}

.card-header[b-ak8gz80q4s] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.conversation-thread[b-ak8gz80q4s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 500px;
    overflow-y: auto;
}

.message[b-ak8gz80q4s] {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    max-width: 80%;
}

.message.customer[b-ak8gz80q4s] {
    background: var(--accent-color-10);
    margin-left: auto;
}

.message.staff[b-ak8gz80q4s] {
    background: var(--bg-card);
}

/* Message appearance animation */
.message-animated[b-ak8gz80q4s] {
    animation: messageAppear-b-ak8gz80q4s 0.35s ease-out both;
}

.message-header[b-ak8gz80q4s] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.message-author[b-ak8gz80q4s] {
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
}

.message-time[b-ak8gz80q4s] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: auto;
}

.message-body[b-ak8gz80q4s] {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.message-attachments[b-ak8gz80q4s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.reply-form[b-ak8gz80q4s] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.reply-actions[b-ak8gz80q4s] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.ticket-actions[b-ak8gz80q4s] {
    display: flex;
    gap: var(--space-md);
}

.empty-state[b-ak8gz80q4s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    gap: var(--space-md);
    text-align: center;
}

/* Animations */
@keyframes fadeInUp-b-ak8gz80q4s {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageAppear-b-ak8gz80q4s {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardReveal-b-ak8gz80q4s {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-card-reveal[b-ak8gz80q4s] {
    animation: cardReveal-b-ak8gz80q4s 0.4s ease-out both;
}

.animate-fade-in-up[b-ak8gz80q4s] {
    animation: fadeInUp-b-ak8gz80q4s 0.5s ease-out both;
}

.animate-stagger-1[b-ak8gz80q4s] { animation-delay: 0.05s; }
.animate-stagger-2[b-ak8gz80q4s] { animation-delay: 0.1s; }
.animate-stagger-3[b-ak8gz80q4s] { animation-delay: 0.15s; }
.animate-stagger-4[b-ak8gz80q4s] { animation-delay: 0.2s; }
.animate-stagger-5[b-ak8gz80q4s] { animation-delay: 0.25s; }
.animate-stagger-6[b-ak8gz80q4s] { animation-delay: 0.3s; }

/* Responsive */
@media (max-width: 700px) {
    .ticket-stats[b-ak8gz80q4s] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .support-page[b-ak8gz80q4s] {
        padding: var(--space-md);
    }

    .form-grid[b-ak8gz80q4s] {
        grid-template-columns: 1fr;
    }

    .span-2[b-ak8gz80q4s] {
        grid-column: span 1;
    }

    .tickets-grid[b-ak8gz80q4s] {
        grid-template-columns: 1fr;
    }

    .ticket-stats[b-ak8gz80q4s] {
        gap: var(--space-sm);
    }

    .stat-item[b-ak8gz80q4s] {
        padding: var(--space-sm);
    }

    .portal-card[b-ak8gz80q4s] {
        padding: var(--space-md);
    }

    .message[b-ak8gz80q4s] {
        max-width: 95%;
    }

    .filter-bar[b-ak8gz80q4s] {
        flex-direction: column;
    }

    .help-options[b-ak8gz80q4s] {
        flex-direction: column;
    }

    .ticket-info-bar[b-ak8gz80q4s] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-card-reveal[b-ak8gz80q4s],
    .animate-fade-in-up[b-ak8gz80q4s],
    .message-animated[b-ak8gz80q4s] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Features/Customer/Pages/Troubleshoot.razor.rz.scp.css */
/* Troubleshoot Wizard - Self-Service Diagnostics
 * Uses CSS variables from ayva-theme.css
 * All styling via centralized design tokens - NO hardcoded values
 */

.troubleshoot-container[b-vo6ufc707r] {
    max-width: var(--portal-max-width);
    margin: 0 auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ─── Header ─── */
.troubleshoot-header[b-vo6ufc707r] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-card-shadow);
}

.header-icon-wrap[b-vo6ufc707r] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-2xl);
    background: var(--accent-gradient);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-text h1[b-vo6ufc707r] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.header-text p[b-vo6ufc707r] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ─── Step Indicator ─── */
.step-indicator[b-vo6ufc707r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--space-lg) var(--space-xl);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.step[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
    z-index: var(--z-base);
}

.step-circle[b-vo6ufc707r] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--bg-overlay);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    transition: all var(--transition-smooth);
}

.step.active .step-circle[b-vo6ufc707r] {
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: var(--text-white);
    box-shadow: var(--glow-accent);
}

.step.completed .step-circle[b-vo6ufc707r] {
    background: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-white);
}

.step-label[b-vo6ufc707r] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.step.active .step-label[b-vo6ufc707r] {
    color: var(--accent-color);
    font-weight: var(--font-semibold);
}

.step.completed .step-label[b-vo6ufc707r] {
    color: var(--success-color);
}

.step-connector[b-vo6ufc707r] {
    width: 60px;
    height: 2px;
    background: var(--border-color);
    margin: 0 var(--space-sm);
    margin-bottom: var(--space-xl);
    transition: background var(--transition-smooth);
}

.step-connector.completed[b-vo6ufc707r] {
    background: var(--success-color);
}

/* ─── Issue Selection Grid ─── */
.issue-grid[b-vo6ufc707r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.issue-card[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: var(--glass-card-shadow);
    text-align: center;
}

.issue-card:hover[b-vo6ufc707r] {
    transform: translateY(var(--hover-lift));
    border-color: var(--accent-color-30);
    box-shadow: var(--glass-card-shadow-hover);
}

.issue-card.selected[b-vo6ufc707r] {
    border-color: var(--accent-color);
    background: var(--accent-color-10);
    box-shadow: var(--glow-accent);
}

.issue-icon[b-vo6ufc707r] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-bounce);
}

.issue-card:hover .issue-icon[b-vo6ufc707r] {
    transform: scale(1.1);
}

.issue-icon.no-internet[b-vo6ufc707r] {
    background: var(--error-bg);
    color: var(--error-color);
}

.issue-icon.slow-speeds[b-vo6ufc707r] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.issue-icon.intermittent[b-vo6ufc707r] {
    background: var(--info-bg);
    color: var(--info-color);
}

.issue-icon.equipment[b-vo6ufc707r] {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

.issue-label[b-vo6ufc707r] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.issue-desc[b-vo6ufc707r] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ─── Action Bar ─── */
.action-bar[b-vo6ufc707r] {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
}

/* ─── Scanning Animation ─── */
.scanning-container[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-4xl) var(--space-xl);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.scan-animation[b-vo6ufc707r] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-ring[b-vo6ufc707r] {
    position: absolute;
    border-radius: var(--radius-full);
    border: 2px solid var(--accent-color-30);
    animation: scanPulse-b-vo6ufc707r 2s ease-in-out infinite;
}

.ring-1[b-vo6ufc707r] {
    width: 100%;
    height: 100%;
    animation-delay: 0s;
}

.ring-2[b-vo6ufc707r] {
    width: 75%;
    height: 75%;
    animation-delay: 0.3s;
}

.ring-3[b-vo6ufc707r] {
    width: 50%;
    height: 50%;
    animation-delay: 0.6s;
}

@keyframes scanPulse-b-vo6ufc707r {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.scan-icon[b-vo6ufc707r] {
    position: relative;
    z-index: var(--z-base);
    color: var(--accent-color);
    animation: spin-b-vo6ufc707r 3s linear infinite;
}

@keyframes spin-b-vo6ufc707r {
    to { transform: rotate(360deg); }
}

.scan-title[b-vo6ufc707r] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.scan-subtitle[b-vo6ufc707r] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Device scan list during scanning */
.device-scan-list[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    max-width: 400px;
}

.device-scan-item[b-vo6ufc707r] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-overlay);
    border-radius: var(--radius-md);
    animation: fadeInUp 0.3s ease-out both;
}

.device-status-dot[b-vo6ufc707r] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.device-status-dot.online[b-vo6ufc707r] {
    background: var(--success-color);
    box-shadow: var(--glow-success);
}

.device-status-dot.offline[b-vo6ufc707r] {
    background: var(--error-color);
    box-shadow: var(--glow-error);
}

.device-scan-name[b-vo6ufc707r] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.device-scan-status[b-vo6ufc707r] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* ─── Results ─── */
.results-container[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Overall status banner */
.overall-banner[b-vo6ufc707r] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    border: 1px solid;
}

.overall-banner.severity-good[b-vo6ufc707r] {
    background: var(--success-bg);
    border-color: var(--success-border);
}

.overall-banner.severity-warning[b-vo6ufc707r] {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.overall-banner.severity-critical[b-vo6ufc707r] {
    background: var(--error-bg);
    border-color: var(--error-border);
}

.banner-icon[b-vo6ufc707r] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.severity-good .banner-icon[b-vo6ufc707r] {
    background: var(--success-color-20);
    color: var(--success-color);
}

.severity-warning .banner-icon[b-vo6ufc707r] {
    background: var(--warning-color-20);
    color: var(--warning-color);
}

.severity-critical .banner-icon[b-vo6ufc707r] {
    background: var(--error-color-20);
    color: var(--error-color);
}

.banner-text h2[b-vo6ufc707r] {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.banner-text p[b-vo6ufc707r] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Diagnostic check items */
.checks-list[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.check-item[b-vo6ufc707r] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.check-item:hover[b-vo6ufc707r] {
    border-color: var(--border-color-medium);
}

.check-indicator[b-vo6ufc707r] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-indicator.severity-good[b-vo6ufc707r] {
    background: var(--success-bg);
    color: var(--success-color);
}

.check-indicator.severity-warning[b-vo6ufc707r] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.check-indicator.severity-critical[b-vo6ufc707r] {
    background: var(--error-bg);
    color: var(--error-color);
}

.check-details[b-vo6ufc707r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.check-name[b-vo6ufc707r] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.check-desc[b-vo6ufc707r] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.check-value[b-vo6ufc707r] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.check-value.severity-good[b-vo6ufc707r] {
    color: var(--success-color);
    background: var(--success-bg);
}

.check-value.severity-warning[b-vo6ufc707r] {
    color: var(--warning-color);
    background: var(--warning-bg);
}

.check-value.severity-critical[b-vo6ufc707r] {
    color: var(--error-color);
    background: var(--error-bg);
}

/* ─── Recommendations ─── */
.recommendations-section[b-vo6ufc707r] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
}

.recommendations-section h3[b-vo6ufc707r] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--warning-color);
    margin: 0 0 var(--space-md) 0;
}

.rec-list[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rec-item[b-vo6ufc707r] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

.rec-item[b-vo6ufc707r]  .mud-icon-root {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ─── Resolution Step ─── */
.resolution-container[b-vo6ufc707r] {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-4xl);
}

.resolution-question[b-vo6ufc707r],
.success-state[b-vo6ufc707r],
.ticket-created-state[b-vo6ufc707r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
}

.question-icon[b-vo6ufc707r] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: var(--accent-color-15);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resolution-question h2[b-vo6ufc707r],
.success-state h2[b-vo6ufc707r],
.ticket-created-state h2[b-vo6ufc707r] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.resolution-question p[b-vo6ufc707r],
.success-state p[b-vo6ufc707r],
.ticket-created-state p[b-vo6ufc707r] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    max-width: 500px;
}

.resolution-buttons[b-vo6ufc707r] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

/* Success animation */
.success-checkmark[b-vo6ufc707r] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPop-b-vo6ufc707r 0.5s var(--transition-bounce) both;
}

@keyframes successPop-b-vo6ufc707r {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Ticket created state */
.ticket-icon[b-vo6ufc707r] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--accent-color-15);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPop-b-vo6ufc707r 0.5s var(--transition-bounce) both;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .troubleshoot-container[b-vo6ufc707r] {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .issue-grid[b-vo6ufc707r] {
        grid-template-columns: 1fr;
    }

    .step-connector[b-vo6ufc707r] {
        width: 30px;
    }

    .step-label[b-vo6ufc707r] {
        display: none;
    }

    .resolution-buttons[b-vo6ufc707r] {
        flex-direction: column;
        width: 100%;
    }

    .resolution-buttons[b-vo6ufc707r]  .mud-button-root {
        width: 100%;
    }

    .overall-banner[b-vo6ufc707r] {
        flex-direction: column;
        text-align: center;
    }

    .check-item[b-vo6ufc707r] {
        flex-wrap: wrap;
    }

    .check-value[b-vo6ufc707r] {
        margin-left: calc(32px + var(--space-md));
    }
}

@media (max-width: 480px) {
    .step-indicator[b-vo6ufc707r] {
        padding: var(--space-md);
    }

    .step-circle[b-vo6ufc707r] {
        width: 28px;
        height: 28px;
        font-size: var(--text-xs);
    }

    .issue-card[b-vo6ufc707r] {
        padding: var(--space-lg) var(--space-md);
    }

    .issue-icon[b-vo6ufc707r] {
        width: 48px;
        height: 48px;
    }

    .resolution-container[b-vo6ufc707r] {
        padding: var(--space-xl);
    }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .scan-ring[b-vo6ufc707r],
    .scan-icon[b-vo6ufc707r],
    .success-checkmark[b-vo6ufc707r],
    .ticket-icon[b-vo6ufc707r] {
        animation: none;
    }

    .issue-card:hover .issue-icon[b-vo6ufc707r] {
        transform: none;
    }
}
/* /Features/Customer/Pages/Usage.razor.rz.scp.css */
/* Usage Analytics Page - Scoped Styles */

.usage-page[b-eu119h54ko] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-lg);
}

.page-header[b-eu119h54ko] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.loading-container[b-eu119h54ko] {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl);
}

.error-container[b-eu119h54ko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--warning-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

/* Data unavailable empty state */
.data-unavailable[b-eu119h54ko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    gap: var(--space-md);
    padding: var(--space-2xl);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    animation: fadeInUp-b-eu119h54ko 0.5s ease-out both;
}

.data-unavailable .unavailable-icon[b-eu119h54ko] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.data-unavailable .unavailable-title[b-eu119h54ko] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.data-unavailable .unavailable-text[b-eu119h54ko] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    max-width: 400px;
}

/* Summary Cards */
.summary-cards[b-eu119h54ko] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.summary-card[b-eu119h54ko] {
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.summary-card:hover[b-eu119h54ko] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.summary-card .card-icon[b-eu119h54ko] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-card.download .card-icon[b-eu119h54ko] {
    background: var(--success-bg);
    color: var(--success-color);
}

.summary-card.upload .card-icon[b-eu119h54ko] {
    background: var(--info-bg);
    color: var(--info-color);
}

.summary-card.total .card-icon[b-eu119h54ko] {
    background: var(--secondary-accent-10);
    color: var(--accent-hover);
}

.summary-card.remaining .card-icon[b-eu119h54ko] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.summary-card .card-content[b-eu119h54ko] {
    display: flex;
    flex-direction: column;
}

.summary-card .card-value[b-eu119h54ko] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.summary-card .card-label[b-eu119h54ko] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.card-trend[b-eu119h54ko] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.card-trend.up[b-eu119h54ko] {
    color: var(--success-color);
}

.card-trend.down[b-eu119h54ko] {
    color: var(--error-color);
}

.card-progress[b-eu119h54ko] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.progress-label[b-eu119h54ko] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.card-sublabel[b-eu119h54ko] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Charts Grid */
.charts-grid[b-eu119h54ko] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.span-2[b-eu119h54ko] {
    grid-column: span 2;
}

.portal-card[b-eu119h54ko] {
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.portal-card:hover[b-eu119h54ko] {
    box-shadow: var(--shadow-sm);
}

.card-header[b-eu119h54ko] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-eu119h54ko] .usage-table {
    background: transparent !important;
}

/* Multi-Address Tabs */
.address-tabs[b-eu119h54ko] {
    margin-bottom: var(--space-lg);
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-md);
}

[b-eu119h54ko] .glass-tabs {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xs);
}

[b-eu119h54ko] .glass-tabs .mud-tabs-toolbar {
    background: transparent !important;
}

[b-eu119h54ko] .glass-tabs .mud-tab {
    background: transparent !important;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

[b-eu119h54ko] .glass-tabs .mud-tab:hover {
    background: var(--bg-hover) !important;
}

[b-eu119h54ko] .glass-tabs .mud-tab.mud-tab-active {
    background: var(--info-bg) !important;
    color: var(--info-color) !important;
}

.address-info[b-eu119h54ko] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.address-info[b-eu119h54ko]  .mud-icon-root {
    color: var(--text-muted);
}

/* Animations */
@keyframes fadeInUp-b-eu119h54ko {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardReveal-b-eu119h54ko {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-card-reveal[b-eu119h54ko] {
    animation: cardReveal-b-eu119h54ko 0.4s ease-out both;
}

.animate-fade-in-up[b-eu119h54ko] {
    animation: fadeInUp-b-eu119h54ko 0.5s ease-out both;
}

.animate-stagger-1[b-eu119h54ko] { animation-delay: 0.05s; }
.animate-stagger-2[b-eu119h54ko] { animation-delay: 0.1s; }
.animate-stagger-3[b-eu119h54ko] { animation-delay: 0.15s; }
.animate-stagger-4[b-eu119h54ko] { animation-delay: 0.2s; }
.animate-stagger-5[b-eu119h54ko] { animation-delay: 0.25s; }
.animate-stagger-6[b-eu119h54ko] { animation-delay: 0.3s; }

/* Responsive */
@media (max-width: 1100px) {
    .summary-cards[b-eu119h54ko] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .span-2[b-eu119h54ko] {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .usage-page[b-eu119h54ko] {
        padding: var(--space-md);
    }

    .summary-cards[b-eu119h54ko] {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .page-header[b-eu119h54ko] {
        flex-direction: column;
    }

    .portal-card[b-eu119h54ko] {
        padding: var(--space-md);
    }

    .summary-card[b-eu119h54ko] {
        padding: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-card-reveal[b-eu119h54ko],
    .animate-fade-in-up[b-eu119h54ko] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* /Features/Customer/Pages/Welcome.razor.rz.scp.css */
/* ==========================================================================
   Welcome/Onboarding Page - Glassmorphism Design
   Uses centralized CSS variables from ayva-theme.css
   ========================================================================== */

/* Full-page wrapper */
.welcome-page[b-kgnvf2xqf3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
}

/* Animated gradient background */
.welcome-bg-gradient[b-kgnvf2xqf3] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, var(--accent-color-15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--secondary-accent-10) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, var(--accent-color-10) 0%, transparent 50%),
        var(--bg-base);
    background-size: 200% 200%;
    animation: gradientShift-b-kgnvf2xqf3 12s ease-in-out infinite;
    z-index: 0;
}

@keyframes gradientShift-b-kgnvf2xqf3 {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Centered container */
.welcome-container[b-kgnvf2xqf3] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    padding: var(--space-xl);
}

/* Glassmorphism card */
.welcome-card[b-kgnvf2xqf3] {
    position: relative;
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-card-shadow);
    padding: var(--space-3xl);
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.welcome-card:hover[b-kgnvf2xqf3] {
    box-shadow: var(--glass-card-shadow-hover);
}

/* Accent gradient border at top of card */
.card-accent-border[b-kgnvf2xqf3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* Content stack */
.welcome-content[b-kgnvf2xqf3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    text-align: center;
}

/* Icon containers */
.icon-container[b-kgnvf2xqf3] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-icon[b-kgnvf2xqf3] {
    background: var(--accent-color-10);
}

.error-icon[b-kgnvf2xqf3] {
    background: var(--error-bg);
    color: var(--error-color);
}

.success-icon[b-kgnvf2xqf3] {
    background: var(--success-bg);
}

/* Typography */
.welcome-title[b-kgnvf2xqf3] {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.welcome-title.error-text[b-kgnvf2xqf3] {
    color: var(--error-text);
}

.welcome-title.success-text[b-kgnvf2xqf3] {
    color: var(--success-text);
}

.welcome-subtitle[b-kgnvf2xqf3] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 360px;
}

/* Button group */
.button-group[b-kgnvf2xqf3] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

[b-kgnvf2xqf3] .welcome-btn {
    border-radius: var(--radius-lg) !important;
    font-weight: var(--font-semibold) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

[b-kgnvf2xqf3] .welcome-btn:hover {
    transform: translateY(-1px);
}

[b-kgnvf2xqf3] .welcome-btn-primary {
    box-shadow: var(--shadow-glow) !important;
}

/* Redirect progress bar */
.redirect-bar[b-kgnvf2xqf3] {
    width: 100%;
    max-width: 280px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* ============================================================
   SVG Checkmark animation
   ============================================================ */
.checkmark-svg[b-kgnvf2xqf3] {
    width: 52px;
    height: 52px;
}

.checkmark-circle[b-kgnvf2xqf3] {
    stroke: var(--success-color);
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: checkCircleDraw-b-kgnvf2xqf3 0.6s ease-out 0.2s forwards;
}

.checkmark-check[b-kgnvf2xqf3] {
    stroke: var(--success-color);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkmark-b-kgnvf2xqf3 0.4s ease-out 0.6s forwards;
}

@keyframes checkCircleDraw-b-kgnvf2xqf3 {
    to {
        stroke-dashoffset: 0;
    }
}

/* Reuse the global checkmark keyframe name for the check path */
@keyframes checkmark-b-kgnvf2xqf3 {
    to {
        stroke-dashoffset: 0;
    }
}

/* ============================================================
   Responsive design
   ============================================================ */
@media (max-width: 640px) {
    .welcome-container[b-kgnvf2xqf3] {
        padding: var(--space-md);
    }

    .welcome-card[b-kgnvf2xqf3] {
        padding: var(--space-2xl) var(--space-xl);
        border-radius: var(--radius-xl);
    }

    .icon-container[b-kgnvf2xqf3] {
        width: 64px;
        height: 64px;
    }

    .checkmark-svg[b-kgnvf2xqf3] {
        width: 40px;
        height: 40px;
    }

    .welcome-title[b-kgnvf2xqf3] {
        font-size: var(--text-xl);
    }

    .welcome-subtitle[b-kgnvf2xqf3] {
        font-size: var(--text-xs);
    }

    .button-group[b-kgnvf2xqf3] {
        flex-direction: column;
        width: 100%;
    }

    [b-kgnvf2xqf3] .welcome-btn {
        width: 100%;
    }
}

/* ============================================================
   Reduced motion support
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .welcome-bg-gradient[b-kgnvf2xqf3] {
        animation: none;
    }

    .checkmark-circle[b-kgnvf2xqf3],
    .checkmark-check[b-kgnvf2xqf3] {
        animation: none;
        stroke-dashoffset: 0;
    }
}
/* /Features/Integrations/Discord/DiscordPanel.razor.rz.scp.css */
/* DiscordPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Discord-specific button styling */
[b-kuf9nuuec8] .mud-button-outlined.mud-button-info {
    border-color: var(--info-color);
    color: var(--info-color);
}

[b-kuf9nuuec8] .mud-button-outlined.mud-button-info:hover {
    background: var(--info-bg);
}

[b-kuf9nuuec8] .mud-button-outlined.mud-button-warning {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

[b-kuf9nuuec8] .mud-button-outlined.mud-button-warning:hover {
    background: var(--warning-bg);
}

/* Bot Status Card styling with Discord branding */
[b-kuf9nuuec8] .mud-item:nth-child(2) .mud-paper {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--discord-color-5) 100%);
    border-color: var(--discord-color-20);
}

[b-kuf9nuuec8] .mud-item:nth-child(2) .mud-paper:hover {
    border-color: var(--discord-color);
}
/* /Features/Integrations/Twilio/TwilioPanel.razor.rz.scp.css */
/* TwilioPanel.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

/* Status text - replaces hardcoded color */
.status-connected[b-zqc887mfe8] {
    color: var(--success-color) !important;
}

/* Overview stat cards hover animation */
[b-zqc887mfe8] .mud-grid.mb-4 .mud-paper:hover {
    transform: translateY(-0.125rem);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow);
}

/* Caption text in SID column - monospace */
[b-zqc887mfe8] .mud-typography-caption {
    font-family: var(--font-mono);
}

/* SMS Section styling */
[b-zqc887mfe8] .mud-item:has(.mud-icon-sms) .mud-paper,
[b-zqc887mfe8] .mud-item.mb-4:nth-child(3) .mud-paper {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-color-5) 100%);
}

/* Voice Call Section styling */
[b-zqc887mfe8] .mud-item:has(.mud-icon-call) .mud-paper,
[b-zqc887mfe8] .mud-item.mb-4:nth-child(4) .mud-paper {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--secondary-accent-5) 100%);
}

/* Configuration section */
[b-zqc887mfe8] .mud-item.mb-4:first-child .mud-paper {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--info-color-5) 100%);
    border-color: var(--info-color-20);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-zqc887mfe8] .mud-table-container {
        overflow-x: auto;
    }
}
/* /Features/Marketing/Components/Landing/LandingPage.razor.rz.scp.css */
/* ============================================================================
   AYVA LANDING PAGE - Ultra-Futuristic Glassmorphism Design
   Uses centralized CSS variables from ayva-theme.css
   ============================================================================ */

/* === GLOBAL LANDING PAGE STYLES === */
[b-rvxnwdl2d1] .landing-page {
    width: 100%;
    overflow-x: hidden;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

[b-rvxnwdl2d1] .landing-section {
    position: relative;
    padding: 6rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

[b-rvxnwdl2d1] .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
}

[b-rvxnwdl2d1] .section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 1rem;
}

[b-rvxnwdl2d1] .section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.6;
}

[b-rvxnwdl2d1] .gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === HERO SECTION === */
[b-rvxnwdl2d1] .hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2rem 1.5rem;
}

[b-rvxnwdl2d1] .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

[b-rvxnwdl2d1] .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--white-overlay-03) 1px, transparent 1px),
        linear-gradient(90deg, var(--white-overlay-03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

[b-rvxnwdl2d1] .hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat-b-rvxnwdl2d1 20s ease-in-out infinite;
}

[b-rvxnwdl2d1] .hero-orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--accent-color-20) 0%, var(--accent-color-5) 70%);
    top: -250px;
    right: -150px;
    animation-delay: 0s;
}

[b-rvxnwdl2d1] .hero-orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--secondary-accent-20) 0%, var(--secondary-accent-5) 70%);
    bottom: -200px;
    left: -150px;
    animation-delay: -7s;
}

[b-rvxnwdl2d1] .hero-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--info-color-15) 0%, var(--info-color-5) 70%);
    top: 40%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes orbFloat-b-rvxnwdl2d1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(15px, 30px) scale(1.02); }
}

[b-rvxnwdl2d1] .hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

[b-rvxnwdl2d1] .hero-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

[b-rvxnwdl2d1] .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-30);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--accent-light);
    width: fit-content;
    backdrop-filter: var(--glass-blur);
}

[b-rvxnwdl2d1] .hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
    animation: pulse-b-rvxnwdl2d1 2s ease-in-out infinite;
}

@keyframes pulse-b-rvxnwdl2d1 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

[b-rvxnwdl2d1] .hero-headline {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: var(--font-bold);
    line-height: 1.1;
    color: var(--text-primary);
}

[b-rvxnwdl2d1] .hero-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 560px;
}

[b-rvxnwdl2d1] .hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

[b-rvxnwdl2d1] .hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    box-shadow: var(--shadow-accent);
}

[b-rvxnwdl2d1] .hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px var(--accent-color-40);
}

[b-rvxnwdl2d1] .hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    backdrop-filter: var(--glass-blur);
}

[b-rvxnwdl2d1] .hero-btn-secondary:hover {
    border-color: var(--accent-color);
    background: var(--accent-color-10);
    transform: translateY(-2px);
}

[b-rvxnwdl2d1] .hero-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .hero-stat {
    display: flex;
    flex-direction: column;
}

[b-rvxnwdl2d1] .hero-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

[b-rvxnwdl2d1] .hero-stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hero visual side */
[b-rvxnwdl2d1] .hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rvxnwdl2d1] .hero-glass-card {
    background: var(--glass-elevated);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-card-shadow);
    width: 100%;
    max-width: 500px;
}

[b-rvxnwdl2d1] .hero-terminal {
    background: var(--bg-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .hero-terminal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--white-overlay-05);
    border-bottom: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .hero-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

[b-rvxnwdl2d1] .hero-terminal-dot.red { background: var(--error-color); }
[b-rvxnwdl2d1] .hero-terminal-dot.yellow { background: var(--warning-color); }
[b-rvxnwdl2d1] .hero-terminal-dot.green { background: var(--success-color); }

[b-rvxnwdl2d1] .hero-terminal-title {
    margin-left: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

[b-rvxnwdl2d1] .hero-terminal-body {
    padding: 1.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--text-secondary);
    min-height: 200px;
}

[b-rvxnwdl2d1] .hero-terminal-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

[b-rvxnwdl2d1] .hero-terminal-prompt {
    color: var(--accent-color);
    user-select: none;
}

[b-rvxnwdl2d1] .hero-terminal-cmd {
    color: var(--success-color);
}

[b-rvxnwdl2d1] .hero-terminal-output {
    color: var(--text-secondary);
    padding-left: 1.25rem;
}

[b-rvxnwdl2d1] .hero-terminal-output.terminal-typed {
    animation: terminalFadeIn-b-rvxnwdl2d1 0.15s ease-out;
}

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

[b-rvxnwdl2d1] .hero-terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--accent-color);
    animation: blink-b-rvxnwdl2d1 1s step-end infinite;
    vertical-align: middle;
}

@keyframes blink-b-rvxnwdl2d1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Floating cards around the hero terminal */
[b-rvxnwdl2d1] .hero-floating-cards {
    position: absolute;
    inset: -2rem;
    pointer-events: none;
}

[b-rvxnwdl2d1] .hero-float-card {
    position: absolute;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    backdrop-filter: var(--glass-blur);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    animation: float-b-rvxnwdl2d1 6s ease-in-out infinite;
    box-shadow: var(--glass-card-shadow);
}

[b-rvxnwdl2d1] .hero-float-card:nth-child(1) {
    top: 10%;
    right: -3rem;
    animation-delay: 0s;
}

[b-rvxnwdl2d1] .hero-float-card:nth-child(2) {
    bottom: 20%;
    left: -4rem;
    animation-delay: -2s;
}

[b-rvxnwdl2d1] .hero-float-card:nth-child(3) {
    top: 60%;
    right: -2rem;
    animation-delay: -4s;
}

@keyframes float-b-rvxnwdl2d1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

[b-rvxnwdl2d1] .float-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
}

[b-rvxnwdl2d1] .float-icon.accent { background: var(--accent-color-15); color: var(--accent-color); }
[b-rvxnwdl2d1] .float-icon.success { background: var(--success-color-15); color: var(--success-color); }
[b-rvxnwdl2d1] .float-icon.info { background: var(--info-color-15); color: var(--info-color); }

/* === SCROLL INDICATOR === */
[b-rvxnwdl2d1] .scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    animation: scrollBounce-b-rvxnwdl2d1 2s ease-in-out infinite;
}

[b-rvxnwdl2d1] .scroll-indicator-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
}

@keyframes scrollBounce-b-rvxnwdl2d1 {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* === SERVICE CARDS === */
[b-rvxnwdl2d1] .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

[b-rvxnwdl2d1] .service-card {
    position: relative;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    backdrop-filter: var(--glass-blur);
    transition: all var(--transition-normal);
    overflow: hidden;
    cursor: pointer;
}

[b-rvxnwdl2d1] .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

[b-rvxnwdl2d1] .service-card:hover {
    border-color: var(--accent-color-30);
    transform: translateY(-6px);
    box-shadow: var(--glass-card-shadow-hover), 0 0 30px var(--accent-color-10);
}

[b-rvxnwdl2d1] .service-card:hover::before {
    opacity: 1;
}

[b-rvxnwdl2d1] .service-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-2xl);
    padding: 1px;
    background: linear-gradient(135deg, transparent 30%, var(--accent-color-30) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    background-size: 300% 300%;
    animation: gradientShimmer-b-rvxnwdl2d1 4s ease infinite;
}

[b-rvxnwdl2d1] .service-card:hover::after {
    opacity: 1;
}

[b-rvxnwdl2d1] .service-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .service-card:hover .service-card-icon {
    transform: scale(1.1);
}

[b-rvxnwdl2d1] .service-card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

[b-rvxnwdl2d1] .service-card-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

[b-rvxnwdl2d1] .service-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-rvxnwdl2d1] .service-tag {
    padding: 0.25rem 0.75rem;
    background: var(--white-overlay-05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* === SECTION DIVIDERS === */
[b-rvxnwdl2d1] .section-divider {
    position: relative;
    height: 1px;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--border-color-medium), transparent);
    overflow: visible;
}

[b-rvxnwdl2d1] .divider-glow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 40px;
    background: radial-gradient(ellipse at center, var(--accent-color-10) 0%, transparent 70%);
    pointer-events: none;
}

/* === AI PIPELINE === */
[b-rvxnwdl2d1] .ai-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding: 2rem 1.5rem;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    backdrop-filter: var(--glass-blur);
    overflow-x: auto;
}

[b-rvxnwdl2d1] .pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 140px;
    flex: 1;
}

[b-rvxnwdl2d1] .pipeline-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .pipeline-step:hover .pipeline-icon {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

[b-rvxnwdl2d1] .pipeline-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

[b-rvxnwdl2d1] .pipeline-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    max-width: 150px;
}

[b-rvxnwdl2d1] .pipeline-connector {
    display: flex;
    align-items: center;
    height: 56px;
    min-width: 60px;
    position: relative;
}

[b-rvxnwdl2d1] .pipeline-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color-20), var(--accent-color-40), var(--accent-color-20));
}

[b-rvxnwdl2d1] .pipeline-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--accent-color-40);
}

[b-rvxnwdl2d1] .pipeline-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translateY(-50%);
    animation: pipelineFlow-b-rvxnwdl2d1 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--accent-color);
}

@keyframes pipelineFlow-b-rvxnwdl2d1 {
    0% { left: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - 8px); opacity: 0; }
}

/* === AI SHOWCASE === */
[b-rvxnwdl2d1] .ai-showcase {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 50%, var(--accent-color-5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, var(--secondary-accent-5) 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, var(--accent-color-5) 50%, transparent 100%);
}

[b-rvxnwdl2d1] .ai-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

[b-rvxnwdl2d1] .ai-capability-card {
    position: relative;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    backdrop-filter: var(--glass-blur);
    transition: all var(--transition-normal);
    overflow: hidden;
}

[b-rvxnwdl2d1] .ai-capability-card:hover {
    border-color: var(--accent-color-30);
    transform: translateY(-6px);
    box-shadow: var(--glass-elevated-shadow-hover), 0 0 40px var(--accent-color-10);
}

[b-rvxnwdl2d1] .ai-capability-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-2xl);
    padding: 1px;
    background: linear-gradient(135deg, transparent 30%, var(--accent-color-30) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    background-size: 300% 300%;
    animation: gradientShimmer-b-rvxnwdl2d1 4s ease infinite;
}

[b-rvxnwdl2d1] .ai-capability-card:hover::after {
    opacity: 1;
}

@keyframes gradientShimmer-b-rvxnwdl2d1 {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

[b-rvxnwdl2d1] .ai-capability-card .glow-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

[b-rvxnwdl2d1] .ai-capability-card:hover .glow-line {
    opacity: 1;
}

[b-rvxnwdl2d1] .ai-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--accent-color-10);
    border: 1px solid var(--accent-color-20);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .ai-capability-card:hover .ai-icon-wrapper {
    background: var(--accent-color-20);
    box-shadow: var(--shadow-glow);
    transform: scale(1.05);
}

[b-rvxnwdl2d1] .ai-cap-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

[b-rvxnwdl2d1] .ai-cap-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* === NETWORK SECTION === */
[b-rvxnwdl2d1] .network-section {
    position: relative;
    background:
        radial-gradient(ellipse at 30% 20%, var(--info-color-5) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, var(--accent-color-5) 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, var(--info-color-5) 30%, var(--accent-color-5) 70%, transparent 100%);
    overflow: hidden;
}

/* Network Metrics Bar */
[b-rvxnwdl2d1] .network-metrics {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
    margin-top: 3rem;
    padding: 2rem 2.5rem;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-2xl);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-card-shadow);
}

[b-rvxnwdl2d1] .net-metric {
    text-align: center;
    padding: 0.5rem 1rem;
}

[b-rvxnwdl2d1] .net-metric-value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--font-bold);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

[b-rvxnwdl2d1] .net-metric-unit {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent-light);
    margin-left: 0.25rem;
    display: inline;
}

[b-rvxnwdl2d1] .net-metric-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

[b-rvxnwdl2d1] .net-metric-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--border-color-medium), transparent);
}

/* Network Content Grid */
[b-rvxnwdl2d1] .network-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 2.5rem;
}

/* Network Capability Cards */
[b-rvxnwdl2d1] .network-capabilities {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-rvxnwdl2d1] .net-cap-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    backdrop-filter: var(--glass-blur);
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .net-cap-card:hover {
    border-color: var(--info-color-30);
    transform: translateX(4px);
    box-shadow: var(--glass-card-shadow-hover);
}

[b-rvxnwdl2d1] .net-cap-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .net-cap-card:hover .net-cap-icon {
    transform: scale(1.1);
}

[b-rvxnwdl2d1] .net-cap-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

[b-rvxnwdl2d1] .net-cap-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Network Topology Card */
[b-rvxnwdl2d1] .network-visual {
    position: relative;
}

[b-rvxnwdl2d1] .network-topo-card {
    background: var(--glass-elevated);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-card-shadow);
}

[b-rvxnwdl2d1] .network-topo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--white-overlay-05);
    border-bottom: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .network-topo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--success-color);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

[b-rvxnwdl2d1] .network-topo-as {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

[b-rvxnwdl2d1] .network-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: linear-gradient(135deg, var(--info-color), var(--accent-color));
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    box-shadow: 0 8px 25px var(--info-color-30);
}

[b-rvxnwdl2d1] .network-link-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px var(--info-color-40);
}

/* === WHY AYVA / DIFFERENTIATORS === */
[b-rvxnwdl2d1] .differentiators-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

[b-rvxnwdl2d1] .diff-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    backdrop-filter: var(--glass-blur);
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .diff-card:hover {
    border-color: var(--accent-color-30);
    transform: translateY(-4px);
    box-shadow: var(--glass-card-shadow-hover);
}

[b-rvxnwdl2d1] .diff-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-bold);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

[b-rvxnwdl2d1] .diff-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* === PROCESS / HOW WE WORK === */
[b-rvxnwdl2d1] .process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
}

[b-rvxnwdl2d1] .process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color-30), var(--accent-color-30), transparent);
}

[b-rvxnwdl2d1] .process-step {
    position: relative;
    text-align: center;
    z-index: 1;
}

[b-rvxnwdl2d1] .process-step-number {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--glass-elevated);
    border: 2px solid var(--accent-color-30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--accent-color);
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .process-step:hover .process-step-number {
    background: var(--accent-color-15);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow);
    transform: scale(1.1);
}

[b-rvxnwdl2d1] .process-step-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

[b-rvxnwdl2d1] .process-step-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* === TECH STACK === */
[b-rvxnwdl2d1] .tech-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

[b-rvxnwdl2d1] .tech-category {
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    backdrop-filter: var(--glass-blur);
    transition: all var(--transition-normal);
}

[b-rvxnwdl2d1] .tech-category:hover {
    border-color: var(--accent-color-30);
    box-shadow: var(--glass-card-shadow-hover);
}

[b-rvxnwdl2d1] .tech-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .tech-category-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rvxnwdl2d1] .tech-category-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-rvxnwdl2d1] .tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-rvxnwdl2d1] .tech-item {
    padding: 0.3rem 0.75rem;
    background: var(--white-overlay-05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

[b-rvxnwdl2d1] .tech-item:hover {
    border-color: var(--accent-color-30);
    color: var(--text-primary);
    background: var(--accent-color-10);
}

/* === CTA SECTION === */
[b-rvxnwdl2d1] .cta-section {
    position: relative;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 50%, var(--accent-color-10) 0%, transparent 60%),
        linear-gradient(180deg, transparent 0%, var(--accent-color-5) 30%, var(--accent-color-10) 50%, var(--accent-color-5) 70%, transparent 100%);
}

[b-rvxnwdl2d1] .cta-glass-card {
    max-width: 800px;
    margin: 3rem auto 0;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-3xl);
    padding: 3rem;
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--glass-elevated-shadow);
}

[b-rvxnwdl2d1] .cta-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

[b-rvxnwdl2d1] .cta-option {
    padding: 2rem;
    background: var(--white-overlay-05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

[b-rvxnwdl2d1] .cta-option:hover {
    border-color: var(--accent-color-30);
    background: var(--accent-color-10);
    transform: translateY(-2px);
}

[b-rvxnwdl2d1] .cta-option-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

[b-rvxnwdl2d1] .cta-option-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

[b-rvxnwdl2d1] .cta-option-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

[b-rvxnwdl2d1] .cta-contact-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .cta-contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

[b-rvxnwdl2d1] .cta-contact-link:hover {
    color: var(--accent-color);
}

/* === MODERN FOOTER === */
[b-rvxnwdl2d1] .landing-footer {
    padding: 4rem 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid var(--border-color);
}

[b-rvxnwdl2d1] .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

[b-rvxnwdl2d1] .footer-brand-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 320px;
}

[b-rvxnwdl2d1] .footer-heading {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

[b-rvxnwdl2d1] .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-rvxnwdl2d1] .footer-link {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

[b-rvxnwdl2d1] .footer-link:hover {
    color: var(--accent-color);
}

[b-rvxnwdl2d1] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* === SCROLL ANIMATIONS === */
[b-rvxnwdl2d1] .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[b-rvxnwdl2d1] .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

[b-rvxnwdl2d1] .reveal-delay-1 { transition-delay: 0.1s; }
[b-rvxnwdl2d1] .reveal-delay-2 { transition-delay: 0.2s; }
[b-rvxnwdl2d1] .reveal-delay-3 { transition-delay: 0.3s; }
[b-rvxnwdl2d1] .reveal-delay-4 { transition-delay: 0.4s; }
[b-rvxnwdl2d1] .reveal-delay-5 { transition-delay: 0.5s; }
[b-rvxnwdl2d1] .reveal-delay-6 { transition-delay: 0.6s; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    [b-rvxnwdl2d1] .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    [b-rvxnwdl2d1] .hero-visual {
        order: 1;
    }

    [b-rvxnwdl2d1] .ai-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-rvxnwdl2d1] .ai-pipeline {
        flex-wrap: wrap;
        gap: 1rem;
    }

    [b-rvxnwdl2d1] .pipeline-connector {
        display: none;
    }

    [b-rvxnwdl2d1] .pipeline-step {
        min-width: calc(50% - 1rem);
    }

    [b-rvxnwdl2d1] .differentiators-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-rvxnwdl2d1] .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-rvxnwdl2d1] .process-steps::before {
        display: none;
    }

    [b-rvxnwdl2d1] .network-content {
        grid-template-columns: 1fr;
    }

    [b-rvxnwdl2d1] .network-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    [b-rvxnwdl2d1] .net-metric-divider {
        display: none;
    }

    [b-rvxnwdl2d1] .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    [b-rvxnwdl2d1] .landing-section {
        padding: 4rem 1rem;
    }

    [b-rvxnwdl2d1] .services-grid {
        grid-template-columns: 1fr;
    }

    [b-rvxnwdl2d1] .ai-capabilities-grid {
        grid-template-columns: 1fr;
    }

    [b-rvxnwdl2d1] .ai-pipeline {
        padding: 1.5rem 1rem;
    }

    [b-rvxnwdl2d1] .pipeline-step {
        min-width: 100%;
    }

    [b-rvxnwdl2d1] .differentiators-grid {
        grid-template-columns: 1fr 1fr;
    }

    [b-rvxnwdl2d1] .network-metrics {
        grid-template-columns: 1fr 1fr;
        padding: 1.5rem;
    }

    [b-rvxnwdl2d1] .cta-options {
        grid-template-columns: 1fr;
    }

    [b-rvxnwdl2d1] .cta-contact-row {
        flex-direction: column;
        align-items: center;
    }

    [b-rvxnwdl2d1] .hero-stats {
        flex-wrap: wrap;
    }

    [b-rvxnwdl2d1] .hero-floating-cards {
        display: none;
    }

    [b-rvxnwdl2d1] .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    [b-rvxnwdl2d1] .hero-headline {
        font-size: 2rem;
    }

    [b-rvxnwdl2d1] .hero-actions {
        flex-direction: column;
    }

    [b-rvxnwdl2d1] .hero-btn-primary,
    [b-rvxnwdl2d1] .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    [b-rvxnwdl2d1] .process-steps {
        grid-template-columns: 1fr;
    }

    [b-rvxnwdl2d1] .differentiators-grid {
        grid-template-columns: 1fr;
    }

    [b-rvxnwdl2d1] .network-metrics {
        grid-template-columns: 1fr;
    }
}
/* /Features/Network/Components/NetworkAlertingPanel.razor.rz.scp.css */
/* NetworkAlertingPanel.razor.css
 * Component-specific styles for Network Alerting Configuration
 * See docs/UI_DESIGN.md for guidelines
 */

/* Section cards */
[b-xell8thrb4] .alert-config-card {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition-normal);
}

[b-xell8thrb4] .alert-config-card:hover {
    border-color: var(--accent-color);
}

/* Section headers */
[b-xell8thrb4] .section-header {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

/* Form controls spacing */
[b-xell8thrb4] .form-control {
    margin-bottom: var(--space-md);
}

/* Route list styling */
[b-xell8thrb4] .route-list {
    max-height: 12rem;
    overflow-y: auto;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

[b-xell8thrb4] .route-list-item {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

[b-xell8thrb4] .route-list-item:hover {
    background: var(--bg-hover);
}

/* Edge status cards */
[b-xell8thrb4] .edge-status-card {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

[b-xell8thrb4] .edge-status-card.online {
    border-color: var(--success-border);
}

[b-xell8thrb4] .edge-status-card.offline {
    border-color: var(--error-border);
}

[b-xell8thrb4] .edge-status-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Status icon positioning */
[b-xell8thrb4] .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Missing routes alert */
[b-xell8thrb4] .missing-routes-alert {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin-top: var(--space-sm);
}

[b-xell8thrb4] .missing-routes-list {
    margin: 0;
    padding-left: var(--space-xl);
    color: var(--warning-text);
}

/* Alert history table - MudBlazor table styling handled by mudblazor-overrides.css */
[b-xell8thrb4] .alert-history-table {
    background: var(--bg-card-solid);
    border-radius: var(--radius-lg);
}

/* Severity badges */
[b-xell8thrb4] .severity-chip.critical {
    background: var(--error-color) !important;
    color: white !important;
}

[b-xell8thrb4] .severity-chip.warning {
    background: var(--warning-color) !important;
    color: var(--text-inverse) !important;
}

[b-xell8thrb4] .severity-chip.info {
    background: var(--info-color) !important;
    color: white !important;
}

/* Status badges */
[b-xell8thrb4] .status-chip.active {
    background: var(--warning-color) !important;
    color: var(--text-inverse) !important;
}

[b-xell8thrb4] .status-chip.resolved {
    background: var(--success-color) !important;
    color: white !important;
}

/* Action buttons */
[b-xell8thrb4] .action-button {
    transition: all var(--transition-fast);
}

[b-xell8thrb4] .action-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Service unavailable alert */
[b-xell8thrb4] .service-unavailable {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    [b-xell8thrb4] .alert-config-card {
        padding: var(--space-lg);
    }
}

@media (max-width: 768px) {
    [b-xell8thrb4] .edge-status-card {
        margin-bottom: var(--space-md);
    }
}
/* /Features/Network/Components/NetworkMonitoringPanel.razor.rz.scp.css */
/* NetworkMonitoringPanel.razor.css
 * Comprehensive network dashboard styles following Ayva Design System
 * See docs/UI_DESIGN.md for guidelines
 */

/* ===== Tab Styling ===== */
[b-xo3ekalkw0] .network-tabs .mud-tabs-toolbar {
    background: var(--bg-card);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid var(--border-color);
}

[b-xo3ekalkw0] .network-tab-panel {
    padding: var(--space-lg) 0;
}

/* ===== Stats Row ===== */
[b-xo3ekalkw0] .stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

[b-xo3ekalkw0] .stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    animation: fadeInUp-b-xo3ekalkw0 0.4s ease-out both;
}

[b-xo3ekalkw0] .stat-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

[b-xo3ekalkw0] .stagger-1 { animation-delay: 0.05s; }
[b-xo3ekalkw0] .stagger-2 { animation-delay: 0.1s; }
[b-xo3ekalkw0] .stagger-3 { animation-delay: 0.15s; }
[b-xo3ekalkw0] .stagger-4 { animation-delay: 0.2s; }
[b-xo3ekalkw0] .stagger-5 { animation-delay: 0.25s; }

[b-xo3ekalkw0] .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-xo3ekalkw0] .stat-icon-primary {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

[b-xo3ekalkw0] .stat-icon-success {
    background: var(--success-bg);
    color: var(--success-color);
}

[b-xo3ekalkw0] .stat-icon-error {
    background: var(--error-bg);
    color: var(--error-color);
}

[b-xo3ekalkw0] .stat-icon-warning {
    background: var(--warning-bg);
    color: var(--warning-color);
}

[b-xo3ekalkw0] .stat-icon-info {
    background: var(--info-bg);
    color: var(--info-color);
}

[b-xo3ekalkw0] .stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-xo3ekalkw0] .stat-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-xo3ekalkw0] .stat-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

[b-xo3ekalkw0] .stat-value-success { color: var(--success-color); }
[b-xo3ekalkw0] .stat-value-error { color: var(--error-color); }
[b-xo3ekalkw0] .stat-value-warning { color: var(--warning-color); }

/* ===== Outages Section ===== */
[b-xo3ekalkw0] .outages-section {
    margin-bottom: var(--space-lg);
}

[b-xo3ekalkw0] .outage-alert {
    animation: fadeInUp-b-xo3ekalkw0 0.3s ease-out;
}

[b-xo3ekalkw0] .outage-header {
    margin-bottom: var(--space-sm);
}

[b-xo3ekalkw0] .outage-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

[b-xo3ekalkw0] .outage-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
}

/* ===== Section Container ===== */
[b-xo3ekalkw0] .section-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    animation: fadeInUp-b-xo3ekalkw0 0.4s ease-out both;
}

[b-xo3ekalkw0] .section-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

[b-xo3ekalkw0] .section-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* ===== Edge Server Grid ===== */
[b-xo3ekalkw0] .edge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

[b-xo3ekalkw0] .edge-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

[b-xo3ekalkw0] .edge-card:hover {
    border-color: var(--accent-color);
    transform: translateX(4px);
}

[b-xo3ekalkw0] .edge-status-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

[b-xo3ekalkw0] .edge-status-dot.status-online {
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color-50);
}

[b-xo3ekalkw0] .edge-status-dot.status-degraded {
    background: var(--warning-color);
    animation: pulse-b-xo3ekalkw0 1.5s ease-in-out infinite;
}

[b-xo3ekalkw0] .edge-status-dot.status-down {
    background: var(--error-color);
    box-shadow: 0 0 8px var(--error-color-40);
}

[b-xo3ekalkw0] .edge-status-dot.status-unknown {
    background: var(--text-muted);
}

[b-xo3ekalkw0] .edge-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

[b-xo3ekalkw0] .edge-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

[b-xo3ekalkw0] .edge-host {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-xo3ekalkw0] .edge-metrics {
    text-align: right;
    flex-shrink: 0;
}

[b-xo3ekalkw0] .edge-latency {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--success-color);
    font-family: var(--font-mono);
}

[b-xo3ekalkw0] .edge-latency.edge-offline {
    color: var(--error-color);
}

/* ===== Events Feed ===== */
[b-xo3ekalkw0] .events-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 400px;
    overflow-y: auto;
}

[b-xo3ekalkw0] .event-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

[b-xo3ekalkw0] .event-item:hover {
    background: var(--bg-hover);
}

[b-xo3ekalkw0] .event-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-xo3ekalkw0] .event-icon-wrap.event-error {
    background: var(--error-bg);
    color: var(--error-color);
}

[b-xo3ekalkw0] .event-icon-wrap.event-warning {
    background: var(--warning-bg);
    color: var(--warning-color);
}

[b-xo3ekalkw0] .event-icon-wrap.event-success {
    background: var(--success-bg);
    color: var(--success-color);
}

[b-xo3ekalkw0] .event-icon-wrap.event-info {
    background: var(--info-bg);
    color: var(--info-color);
}

[b-xo3ekalkw0] .event-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-xo3ekalkw0] .event-desc {
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-xo3ekalkw0] .event-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== Device Controls ===== */
[b-xo3ekalkw0] .device-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

[b-xo3ekalkw0] .device-search {
    flex: 1;
    min-width: 200px;
}

[b-xo3ekalkw0] .device-filter {
    min-width: 150px;
}

[b-xo3ekalkw0] .device-row-clickable {
    cursor: pointer;
}

[b-xo3ekalkw0] .device-name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-xo3ekalkw0] .ip-code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-color);
    background: var(--accent-color-10);
    padding: 2px var(--space-xs);
    border-radius: var(--radius-xs);
}

/* ===== Device Detail Dialog ===== */
[b-xo3ekalkw0] .dialog-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-semibold);
}

[b-xo3ekalkw0] .device-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

[b-xo3ekalkw0] .detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-xo3ekalkw0] .detail-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-xo3ekalkw0] .detail-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

[b-xo3ekalkw0] .metrics-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
}

[b-xo3ekalkw0] .metric-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}

[b-xo3ekalkw0] .metric-mini-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-xo3ekalkw0] .metric-mini-value {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--accent-color);
    font-family: var(--font-mono);
}

/* ===== Route Table ===== */
[b-xo3ekalkw0] .route-table {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
}

[b-xo3ekalkw0] .destination-chip {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* ===== Asymmetric Path Items ===== */
[b-xo3ekalkw0] .asymmetric-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
}

[b-xo3ekalkw0] .asymmetric-item code {
    font-family: var(--font-mono);
    color: var(--accent-color);
}

/* ===== Threshold Table ===== */
[b-xo3ekalkw0] .threshold-table {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
}

[b-xo3ekalkw0] .threshold-warning {
    color: var(--warning-color);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
}

[b-xo3ekalkw0] .threshold-critical {
    color: var(--error-color);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
}

/* ===== Animations ===== */
@keyframes fadeInUp-b-xo3ekalkw0 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-xo3ekalkw0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    [b-xo3ekalkw0] .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-xo3ekalkw0] .device-controls {
        flex-direction: column;
        align-items: stretch;
    }

    [b-xo3ekalkw0] .device-search {
        min-width: 100%;
    }

    [b-xo3ekalkw0] .device-filter {
        min-width: 100%;
    }

    [b-xo3ekalkw0] .device-detail-grid {
        grid-template-columns: 1fr;
    }

    [b-xo3ekalkw0] .edge-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    [b-xo3ekalkw0] .stats-row {
        grid-template-columns: 1fr;
    }

    [b-xo3ekalkw0] .stat-card {
        padding: var(--space-sm) var(--space-md);
    }

    [b-xo3ekalkw0] .stat-value {
        font-size: var(--text-lg);
    }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    [b-xo3ekalkw0] .stat-card,
    [b-xo3ekalkw0] .section-container,
    [b-xo3ekalkw0] .outage-alert {
        animation: none;
    }

    [b-xo3ekalkw0] .edge-status-dot.status-degraded {
        animation: none;
    }
}
/* /Features/Network/Components/TopologyPanel.razor.rz.scp.css */
/* TopologyPanel.razor.css
 * Component-specific styles for Network Topology Map
 * See docs/UI_DESIGN.md for guidelines
 */

/* Main container layout */
[b-vkiu58c4z0] .topology-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--space-sm);
    width: 100%;
}

/* Map container styling */
[b-vkiu58c4z0] .map-container {
    flex: 1;
    position: relative;
    min-width: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Map controls overlay */
[b-vkiu58c4z0] .map-controls {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Side panel styling */
[b-vkiu58c4z0] .side-panel {
    width: 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow-y: auto;
}

/* Statistics card */
[b-vkiu58c4z0] .stats-card {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

[b-vkiu58c4z0] .stats-card:hover {
    border-color: var(--accent-color);
}

/* Display options panel */
[b-vkiu58c4z0] .display-options {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

/* OSPF metric legend */
[b-vkiu58c4z0] .ospf-legend {
    margin: var(--space-sm) 0;
    padding: var(--space-sm);
    background: var(--bg-card-solid);
    border-radius: var(--radius-sm);
}

[b-vkiu58c4z0] .ospf-legend-chips {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    flex-wrap: wrap;
}

/* Problem indicators */
[b-vkiu58c4z0] .asymmetric-links-card {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

[b-vkiu58c4z0] .disconnected-sites-card {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

/* Selected site/link details */
[b-vkiu58c4z0] .selected-site-card {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

[b-vkiu58c4z0] .selected-link-card {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

/* Clickable chips */
[b-vkiu58c4z0] .clickable-chip {
    cursor: pointer;
    transition: all var(--transition-fast);
}

[b-vkiu58c4z0] .clickable-chip:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

/* Path display */
[b-vkiu58c4z0] .path-display {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

[b-vkiu58c4z0] .path-direction-ingress {
    color: var(--info-color);
}

[b-vkiu58c4z0] .path-direction-egress {
    color: var(--secondary-accent);
}

[b-vkiu58c4z0] .path-metric {
    color: var(--text-muted);
}

/* Loading indicator */
[b-vkiu58c4z0] .map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* Device chips in site details */
[b-vkiu58c4z0] .device-chip {
    margin: 2px;
}

/* Timestamp display */
[b-vkiu58c4z0] .timestamp-display {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    [b-vkiu58c4z0] .side-panel {
        width: 16rem;
    }
}

@media (max-width: 768px) {
    [b-vkiu58c4z0] .topology-container {
        flex-direction: column;
    }

    [b-vkiu58c4z0] .side-panel {
        width: 100%;
        max-height: 200px;
    }
}
/* /Features/Support/Components/Dialogs/CustomerCallDialog.razor.rz.scp.css */
.call-dialog-header[b-5yo83459dq] {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
}

.call-dialog-content[b-5yo83459dq] {
    min-height: 400px;
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.connecting-state[b-5yo83459dq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
}

[b-5yo83459dq] .customer-call-transcript {
    flex: 1;
    height: 100%;
}
/* /Features/Support/Components/FloatingSupportButton.razor.rz.scp.css */
/* FloatingSupportButton.razor.css */

.floating-support-container[b-vg3kzg6xmu] {
    position: fixed;
    bottom: var(--space-2xl);
    right: var(--space-2xl);
    z-index: 999;
}

/* Theme Variables - inherit from root, no hardcoding */
.floating-support-container.theme-glass[b-vg3kzg6xmu] {
    --shadow-color: var(--accent-color-40);
}

.floating-support-container.theme-dark[b-vg3kzg6xmu] {
    --shadow-color: var(--accent-color-30);
}

.floating-support-container.theme-neu[b-vg3kzg6xmu] {
    --shadow-color: rgba(var(--primary-color-rgb), 0.35);
}

/* Floating Button */
[b-vg3kzg6xmu] .floating-support-btn {
    background: var(--accent-gradient) !important;
    box-shadow: 0 var(--space-xs) 1.25rem var(--shadow-color);
    transition: all var(--transition-smooth);
    animation: floatPulse-b-vg3kzg6xmu 3s ease-in-out infinite;
}

@keyframes floatPulse-b-vg3kzg6xmu {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.25rem);
    }
}

[b-vg3kzg6xmu] .floating-support-btn:hover {
    transform: translateY(-0.125rem) scale(1.05);
    box-shadow: 0 var(--space-sm) 1.875rem var(--shadow-color);
    animation: none;
}

[b-vg3kzg6xmu] .floating-support-btn:active {
    transform: scale(0.95);
}

/* Hovered state enhancement */
.floating-support-container.hovered[b-vg3kzg6xmu]  .floating-support-btn {
    animation: none;
}

/* Responsive - Slightly smaller on mobile */
@media (max-width: 768px) {
    .floating-support-container[b-vg3kzg6xmu] {
        bottom: var(--space-xl);
        right: var(--space-xl);
    }

    [b-vg3kzg6xmu] .floating-support-btn {
        width: 3.25rem !important;
        height: 3.25rem !important;
    }
}

/* Accessibility - Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    [b-vg3kzg6xmu] .floating-support-btn {
        animation: none;
    }

    [b-vg3kzg6xmu] .floating-support-btn:hover {
        transform: scale(1.05);
    }
}
/* /Features/Support/Components/Panels/AiAgentPanel.razor.rz.scp.css */
/* ============================================
   AI AGENT PANEL STYLES
   ============================================ */

.ai-agent-panel[b-lqtasgeaac] {
    display: flex;
    flex-direction: column;
    /* CRITICAL: Fixed dimensions from parent container */
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* ============================================
   MESSAGES CONTAINER
   ============================================ */

.messages-container[b-lqtasgeaac] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    max-height: 100%;
}

/* ============================================
   WELCOME SECTION
   ============================================ */

.welcome-section[b-lqtasgeaac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    animation: fadeInUp-b-lqtasgeaac 0.5s ease-out;
}

@keyframes fadeInUp-b-lqtasgeaac {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-avatar[b-lqtasgeaac] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    background: var(--accent-gradient);
    color: white;
    margin-bottom: 1.5rem;
    animation: pulse-b-lqtasgeaac 2s ease-in-out infinite;
}

.ai-avatar.large[b-lqtasgeaac] {
    width: 5rem;
    height: 5rem;
}

@keyframes pulse-b-lqtasgeaac {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-color-40);
    }
    50% {
        box-shadow: 0 0 0 0.9375rem rgba(99, 102, 241, 0);
    }
}

.welcome-title[b-lqtasgeaac] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.welcome-subtitle[b-lqtasgeaac] {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 25rem;
    line-height: 1.5;
    margin: 0 0 2rem 0;
}

/* ============================================
   CAPABILITIES GRID
   ============================================ */

.capabilities-grid[b-lqtasgeaac] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: 31.25rem;
    margin-bottom: 2rem;
}

.capability-card[b-lqtasgeaac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    transition: all var(--transition-normal);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.capability-card.clickable[b-lqtasgeaac] {
    cursor: pointer;
}

.capability-card.clickable:hover[b-lqtasgeaac] {
    transform: translateY(-0.125rem);
    border-color: var(--accent-color);
    box-shadow: 0 0.25rem 0.75rem var(--accent-color-15);
    background: var(--hover-bg);
}

.capability-card.clickable:active[b-lqtasgeaac] {
    transform: translateY(0);
}

.capability-icon[b-lqtasgeaac] {
    font-size: 1.5rem;
}

.capability-text[b-lqtasgeaac] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */

.quick-actions[b-lqtasgeaac] {
    width: 100%;
    max-width: 31.25rem;
}

.quick-actions-label[b-lqtasgeaac] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.quick-action-buttons[b-lqtasgeaac] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.quick-action-btn[b-lqtasgeaac] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.quick-action-btn:hover[b-lqtasgeaac] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-0.0625rem);
}

.qa-icon[b-lqtasgeaac] {
    font-size: 1rem;
}

.qa-label[b-lqtasgeaac] {
    font-weight: 500;
}

/* ============================================
   MESSAGES
   ============================================ */

.message[b-lqtasgeaac] {
    display: flex;
    gap: 0.75rem;
    animation: messageAppear-b-lqtasgeaac 0.3s ease-out;
}

@keyframes messageAppear-b-lqtasgeaac {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user[b-lqtasgeaac] {
    flex-direction: row-reverse;
}

.message-avatar[b-lqtasgeaac] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-content[b-lqtasgeaac] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 80%;
}

.message.user .message-content[b-lqtasgeaac] {
    align-items: flex-end;
}

.message-bubble[b-lqtasgeaac] {
    padding: 0.875rem 1.125rem;
    border-radius: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.message.ai .message-bubble[b-lqtasgeaac] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 0.25rem;
    color: var(--text-primary);
}

.message.user .message-bubble[b-lqtasgeaac] {
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message.system .message-bubble[b-lqtasgeaac] {
    background: var(--error-color-10);
    border-color: var(--error-color-20);
    color: var(--error-color);
}

.message-time[b-lqtasgeaac] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 0 0.5rem;
}

/* ============================================
   TYPING INDICATOR
   ============================================ */

.typing-indicator[b-lqtasgeaac] {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.typing-dot[b-lqtasgeaac] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typingBounce-b-lqtasgeaac 1.4s infinite;
}

.typing-dot:nth-child(2)[b-lqtasgeaac] {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3)[b-lqtasgeaac] {
    animation-delay: 0.4s;
}

@keyframes typingBounce-b-lqtasgeaac {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-0.375rem);
    }
}

/* ============================================
   TOOL EXECUTION
   ============================================ */

.tool-execution[b-lqtasgeaac] {
    padding: 0 0.75rem;
}

.tool-execution-card[b-lqtasgeaac] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    animation: messageAppear-b-lqtasgeaac 0.3s ease-out;
}

.tool-header[b-lqtasgeaac] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tool-icon[b-lqtasgeaac] {
    font-size: 1rem;
}

.tool-name[b-lqtasgeaac] {
    font-size: 0.875rem;
}

.tool-steps[b-lqtasgeaac] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tool-step[b-lqtasgeaac] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.tool-step.completed[b-lqtasgeaac] {
    color: var(--success-color);
}

.tool-step.running[b-lqtasgeaac] {
    color: var(--accent-color);
}

.step-indicator[b-lqtasgeaac] {
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-dot[b-lqtasgeaac] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--border-color);
}

.spinner[b-lqtasgeaac] {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-lqtasgeaac 0.8s linear infinite;
}

@keyframes spin-b-lqtasgeaac {
    to {
        transform: rotate(360deg);
    }
}

.tool-progress[b-lqtasgeaac] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.progress-bar[b-lqtasgeaac] {
    flex: 1;
    height: 0.375rem;
    background: var(--border-color);
    border-radius: 0.1875rem;
    overflow: hidden;
}

.progress-fill[b-lqtasgeaac] {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 0.1875rem;
    transition: width 0.3s ease;
}

.progress-text[b-lqtasgeaac] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    min-width: 2.1875rem;
}

/* ============================================
   INPUT AREA
   ============================================ */

.input-area[b-lqtasgeaac] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.input-wrapper[b-lqtasgeaac] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 0.5rem;
    transition: all var(--transition-normal);
}

.input-wrapper:focus-within[b-lqtasgeaac] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

.input-wrapper textarea[b-lqtasgeaac] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.5rem;
    resize: none;
    min-height: 1.5rem;
    max-height: 7.5rem;
    outline: none;
}

.input-wrapper textarea[b-lqtasgeaac]::placeholder {
    color: var(--text-secondary);
}

.input-actions[b-lqtasgeaac] {
    display: flex;
    gap: 0.25rem;
}

.attach-btn[b-lqtasgeaac],
.send-btn[b-lqtasgeaac] {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.attach-btn:hover:not(:disabled)[b-lqtasgeaac] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.send-btn[b-lqtasgeaac] {
    background: var(--bg-card);
}

.send-btn.active[b-lqtasgeaac] {
    background: var(--accent-gradient);
    color: white;
}

.send-btn:hover:not(:disabled).active[b-lqtasgeaac] {
    transform: scale(1.05);
}

.send-btn:disabled[b-lqtasgeaac],
.attach-btn:disabled[b-lqtasgeaac] {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-hint[b-lqtasgeaac] {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .capabilities-grid[b-lqtasgeaac] {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-title[b-lqtasgeaac] {
        font-size: 1.5rem;
    }

    .quick-action-buttons[b-lqtasgeaac] {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-action-btn[b-lqtasgeaac] {
        justify-content: center;
    }

    .message-content[b-lqtasgeaac] {
        max-width: 90%;
    }
}
/* /Features/Support/Components/Panels/ContactPanel.razor.rz.scp.css */
/* ============================================
   CONTACT PANEL STYLES
   ============================================ */

.contact-panel[b-g1vho681zr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ============================================
   HEADER
   ============================================ */

.contact-header[b-g1vho681zr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.header-icon[b-g1vho681zr] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-text h2[b-g1vho681zr] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.header-text p[b-g1vho681zr] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   CONTACT CONTENT
   ============================================ */

.contact-content[b-g1vho681zr] {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
    min-height: 0;
}

/* ============================================
   CONTACT GRID
   ============================================ */

.contact-grid[b-g1vho681zr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-card[b-g1vho681zr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.contact-card:hover[b-g1vho681zr] {
    transform: translateX(0.25rem);
    border-color: var(--accent-color);
}

.contact-card.phone:hover[b-g1vho681zr] {
    background: var(--success-color-5);
    border-color: var(--success-color);
}

.contact-card.email:hover[b-g1vho681zr] {
    background: var(--info-color-5);
    border-color: var(--info-color);
}

.contact-card.discord:hover[b-g1vho681zr] {
    background: var(--discord-color-5);
    border-color: var(--discord-color);
}

.card-icon[b-g1vho681zr] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-card.phone .card-icon[b-g1vho681zr] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.contact-card.email .card-icon[b-g1vho681zr] {
    background: var(--info-color-15);
    color: var(--info-color);
}

.contact-card.discord .card-icon[b-g1vho681zr] {
    background: var(--discord-bg);
    color: var(--discord-color);
}

.card-content[b-g1vho681zr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.card-label[b-g1vho681zr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card-value[b-g1vho681zr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-action[b-g1vho681zr] {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.contact-card:hover .card-action[b-g1vho681zr] {
    color: var(--accent-color);
    transform: translateX(0.125rem);
}

/* ============================================
   INFO SECTIONS
   ============================================ */

.info-section[b-g1vho681zr] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.25rem;
}

.info-section h3[b-g1vho681zr] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.info-section h3 svg[b-g1vho681zr] {
    color: var(--accent-color);
}

/* Hours Grid */
.hours-grid[b-g1vho681zr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hours-row[b-g1vho681zr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary);
    border-radius: 0.5rem;
}

.hours-row.closed[b-g1vho681zr] {
    opacity: 0.6;
}

.hours-row .day[b-g1vho681zr] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.hours-row .time[b-g1vho681zr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-color);
}

.hours-row.closed .time[b-g1vho681zr] {
    color: var(--text-secondary);
}

.hours-note[b-g1vho681zr] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.hours-note svg[b-g1vho681zr] {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--accent-color);
}

.hours-note strong[b-g1vho681zr] {
    color: var(--accent-color);
}

/* Address Card */
.address-card[b-g1vho681zr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.address-text[b-g1vho681zr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.address-text p[b-g1vho681zr] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.address-text .company-name[b-g1vho681zr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.address-text .service-areas[b-g1vho681zr] {
    font-size: 0.8125rem;
    color: var(--accent-color);
}

.map-link[b-g1vho681zr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--accent-color);
    border-radius: 0.625rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.map-link:hover[b-g1vho681zr] {
    background: var(--accent-hover);
    transform: translateY(-0.0625rem);
}

/* ============================================
   SOCIAL SECTION
   ============================================ */

.social-section[b-g1vho681zr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
}

.social-label[b-g1vho681zr] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.social-links[b-g1vho681zr] {
    display: flex;
    gap: 0.5rem;
}

.social-link[b-g1vho681zr] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.social-link:hover[b-g1vho681zr] {
    transform: translateY(-0.125rem);
}

.social-link.discord:hover[b-g1vho681zr] {
    background: var(--discord-color);
    border-color: var(--discord-color);
    color: white;
}

.social-link.facebook:hover[b-g1vho681zr] {
    background: #1877F2;
    border-color: #1877F2;
    color: white;
}

.social-link.twitter:hover[b-g1vho681zr] {
    background: #000000;
    border-color: #000000;
    color: white;
}

.social-link.linkedin:hover[b-g1vho681zr] {
    background: #0A66C2;
    border-color: #0A66C2;
    color: white;
}

/* ============================================
   FORM TEASER
   ============================================ */

.form-teaser[b-g1vho681zr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--accent-color-10), var(--accent-color-5));
    border: 1px solid var(--accent-color-20);
    border-radius: 1rem;
}

.teaser-content[b-g1vho681zr] {
    display: flex;
    gap: 1rem;
}

.teaser-icon[b-g1vho681zr] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--accent-color-15);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.teaser-text h4[b-g1vho681zr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.teaser-text p[b-g1vho681zr] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.form-btn[b-g1vho681zr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.form-btn:hover[b-g1vho681zr] {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.5625rem var(--accent-color-30);
}

.form-btn svg[b-g1vho681zr] {
    transition: transform var(--transition-normal);
}

.form-btn:hover svg[b-g1vho681zr] {
    transform: translateX(0.25rem);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .contact-header[b-g1vho681zr] {
        padding: 1.25rem 1rem;
    }

    .contact-content[b-g1vho681zr] {
        padding: 1rem;
    }

    .contact-card[b-g1vho681zr] {
        padding: 0.875rem 1rem;
    }

    .card-icon[b-g1vho681zr] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .address-card[b-g1vho681zr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .map-link[b-g1vho681zr] {
        width: 100%;
        justify-content: center;
    }

    .social-section[b-g1vho681zr] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Features/Support/Components/Panels/EmergencyPanel.razor.rz.scp.css */
/* ============================================
   EMERGENCY PANEL STYLES
   ============================================ */

.emergency-panel[b-aw44f1d1a2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* ============================================
   URGENT BANNER
   ============================================ */

.urgent-banner[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--error-color-15), var(--error-color-5));
    border-bottom: 1px solid var(--error-color-20);
}

.banner-icon[b-aw44f1d1a2] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--error-color-15);
    color: var(--error-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: urgentPulse-b-aw44f1d1a2 2s ease-in-out infinite;
}

@keyframes urgentPulse-b-aw44f1d1a2 {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--error-color-40);
    }
    50% {
        box-shadow: 0 0 0 0.625rem rgba(239, 68, 68, 0);
    }
}

.banner-text[b-aw44f1d1a2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.banner-title[b-aw44f1d1a2] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--error-color);
}

.banner-subtitle[b-aw44f1d1a2] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ============================================
   EMERGENCY CONTENT
   ============================================ */

.emergency-content[b-aw44f1d1a2] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ============================================
   FOUNDER CARD
   ============================================ */

.founder-card[b-aw44f1d1a2] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
}

.founder-header[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.founder-avatar[b-aw44f1d1a2] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.founder-info[b-aw44f1d1a2] {
    flex: 1;
}

.founder-info h3[b-aw44f1d1a2] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
}

.founder-info p[b-aw44f1d1a2] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

.availability-badge[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.availability-badge.available[b-aw44f1d1a2] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.availability-badge.unavailable[b-aw44f1d1a2] {
    background: var(--black-overlay-15);
    color: var(--text-secondary);
}

.avail-dot[b-aw44f1d1a2] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.availability-badge.available .avail-dot[b-aw44f1d1a2] {
    background: var(--success-color);
    box-shadow: 0 0 0.5rem var(--success-color-50);
    animation: dotPulse-b-aw44f1d1a2 2s ease-in-out infinite;
}

.availability-badge.unavailable .avail-dot[b-aw44f1d1a2] {
    background: var(--text-secondary);
}

@keyframes dotPulse-b-aw44f1d1a2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.founder-body[b-aw44f1d1a2] {
    padding: 1.5rem;
}

.direct-line-message[b-aw44f1d1a2] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
}

.direct-line-message strong[b-aw44f1d1a2] {
    color: var(--accent-color);
}

.hours-info[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: var(--accent-color-10);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.hours-info svg[b-aw44f1d1a2] {
    color: var(--accent-color);
    flex-shrink: 0;
}

.hours-info strong[b-aw44f1d1a2] {
    color: var(--text-primary);
}

/* Contact Actions */
.contact-actions[b-aw44f1d1a2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-btn[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: left;
}

.contact-btn:hover[b-aw44f1d1a2] {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.5625rem var(--black-overlay-15);
}

.contact-btn.call[b-aw44f1d1a2] {
    border-color: var(--success-color-30);
}

.contact-btn.call:hover[b-aw44f1d1a2] {
    background: var(--success-color-10);
    border-color: var(--success-color);
}

.contact-btn.call .btn-icon[b-aw44f1d1a2] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.contact-btn.text[b-aw44f1d1a2] {
    border-color: var(--accent-color-30);
}

.contact-btn.text:hover[b-aw44f1d1a2] {
    background: var(--accent-color-10);
    border-color: var(--accent-color);
}

.contact-btn.text .btn-icon[b-aw44f1d1a2] {
    background: var(--accent-color-15);
    color: var(--accent-color);
}

.contact-btn.outside-hours[b-aw44f1d1a2] {
    opacity: 0.7;
}

.btn-icon[b-aw44f1d1a2] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-text[b-aw44f1d1a2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.btn-label[b-aw44f1d1a2] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-hint[b-aw44f1d1a2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Outside Hours Notice */
.outside-hours-notice[b-aw44f1d1a2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-20);
    border-radius: 0.625rem;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.outside-hours-notice svg[b-aw44f1d1a2] {
    color: var(--warning-color);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.link-btn[b-aw44f1d1a2] {
    background: none;
    border: none;
    color: var(--accent-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.link-btn:hover[b-aw44f1d1a2] {
    color: var(--text-primary);
}

/* ============================================
   GUIDELINES SECTION
   ============================================ */

.guidelines-section[b-aw44f1d1a2] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}

.guidelines-section h4[b-aw44f1d1a2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.guidelines-grid[b-aw44f1d1a2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.guideline-item[b-aw44f1d1a2] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    background: var(--bg-primary);
}

.guideline-item.urgent[b-aw44f1d1a2] {
    background: var(--success-color-5);
}

.guideline-item.not-urgent[b-aw44f1d1a2] {
    background: var(--error-color-5);
}

.guideline-icon[b-aw44f1d1a2] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guideline-item.urgent .guideline-icon[b-aw44f1d1a2] {
    background: var(--success-color-15);
    color: var(--success-color);
}

.guideline-item.not-urgent .guideline-icon[b-aw44f1d1a2] {
    background: var(--error-color-15);
    color: var(--error-color);
}

.guideline-text[b-aw44f1d1a2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.guideline-text strong[b-aw44f1d1a2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.guideline-text span[b-aw44f1d1a2] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* ============================================
   DIALOGS
   ============================================ */

.dialog-overlay[b-aw44f1d1a2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black-overlay-60);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: overlayAppear-b-aw44f1d1a2 0.2s ease-out;
}

@keyframes overlayAppear-b-aw44f1d1a2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog[b-aw44f1d1a2] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    width: 90%;
    max-width: 23.75rem;
    overflow: hidden;
    animation: dialogAppear-b-aw44f1d1a2 0.3s ease-out;
}

.text-dialog[b-aw44f1d1a2] {
    max-width: 26.25rem;
}

@keyframes dialogAppear-b-aw44f1d1a2 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-header[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.dialog-header h3[b-aw44f1d1a2] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.close-btn[b-aw44f1d1a2] {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.close-btn:hover[b-aw44f1d1a2] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.dialog-body[b-aw44f1d1a2] {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Call Animation */
.call-animation[b-aw44f1d1a2] {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 1.5rem;
}

.call-ring[b-aw44f1d1a2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid var(--success-color);
    border-radius: 50%;
    opacity: 0;
    animation: ringPulse-b-aw44f1d1a2 2s ease-out infinite;
}

.call-ring.delay-1[b-aw44f1d1a2] {
    animation-delay: 0.5s;
}

.call-ring.delay-2[b-aw44f1d1a2] {
    animation-delay: 1s;
}

@keyframes ringPulse-b-aw44f1d1a2 {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

.call-avatar-center[b-aw44f1d1a2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--success-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
}

.call-info h4[b-aw44f1d1a2] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.call-info p[b-aw44f1d1a2] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.call-actions[b-aw44f1d1a2] {
    margin-top: 2rem;
}

.end-call-btn[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--error-color);
    border: none;
    border-radius: 100px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.end-call-btn:hover[b-aw44f1d1a2] {
    background: var(--error-color);
    transform: scale(1.05);
}

/* Text Dialog Specific */
.text-dialog .dialog-body[b-aw44f1d1a2] {
    text-align: left;
    align-items: stretch;
}

.text-recipient[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--bg-card);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.recipient-avatar[b-aw44f1d1a2] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

.recipient-details[b-aw44f1d1a2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.recipient-name[b-aw44f1d1a2] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.recipient-note[b-aw44f1d1a2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.text-input[b-aw44f1d1a2] {
    position: relative;
    margin-bottom: 1rem;
}

.text-input textarea[b-aw44f1d1a2] {
    width: 100%;
    min-height: 6.25rem;
    padding: 1rem;
    padding-bottom: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
    transition: all var(--transition-normal);
}

.text-input textarea:focus[b-aw44f1d1a2] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

.text-input textarea[b-aw44f1d1a2]::placeholder {
    color: var(--text-secondary);
}

.char-count[b-aw44f1d1a2] {
    position: absolute;
    bottom: 0.75rem;
    right: 1rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.char-count.warning[b-aw44f1d1a2] {
    color: var(--error-color);
}

.text-actions[b-aw44f1d1a2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.text-btn[b-aw44f1d1a2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.text-btn.cancel[b-aw44f1d1a2] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.text-btn.cancel:hover[b-aw44f1d1a2] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.text-btn.send[b-aw44f1d1a2] {
    background: var(--accent-gradient);
    border: none;
    color: white;
}

.text-btn.send:hover:not(:disabled)[b-aw44f1d1a2] {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem var(--accent-color-30);
}

.text-btn.send:disabled[b-aw44f1d1a2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner.small[b-aw44f1d1a2] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--white-overlay-30);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-aw44f1d1a2 0.8s linear infinite;
}

@keyframes spin-b-aw44f1d1a2 {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .urgent-banner[b-aw44f1d1a2] {
        padding: 0.875rem 1rem;
    }

    .emergency-content[b-aw44f1d1a2] {
        padding: 1rem;
    }

    .founder-header[b-aw44f1d1a2] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .availability-badge[b-aw44f1d1a2] {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .contact-actions[b-aw44f1d1a2] {
        grid-template-columns: 1fr;
    }

    .guidelines-grid[b-aw44f1d1a2] {
        grid-template-columns: 1fr;
    }

    .dialog[b-aw44f1d1a2] {
        width: 95%;
        margin: 1rem;
    }
}
/* /Features/Support/Components/Panels/KnowledgeBasePanel.razor.rz.scp.css */
/* ============================================
   KNOWLEDGE BASE PANEL STYLES
   ============================================ */

.knowledge-panel[b-6rp3gndk8t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 1.5rem;
    gap: 1.5rem;
}

/* Header */
.knowledge-header[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--accent-gradient);
    color: white;
    flex-shrink: 0;
}

.header-text h2[b-6rp3gndk8t] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.header-text p[b-6rp3gndk8t] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Search Container */
.search-container[b-6rp3gndk8t] {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0;
}

.search-input-wrapper[b-6rp3gndk8t] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-6rp3gndk8t] {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-input[b-6rp3gndk8t] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 3rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all var(--transition-fast);
}

.search-input[b-6rp3gndk8t]::placeholder {
    color: var(--text-secondary);
}

.search-input:focus[b-6rp3gndk8t] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-20);
}

.clear-btn[b-6rp3gndk8t] {
    position: absolute;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.clear-btn:hover[b-6rp3gndk8t] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Content */
.knowledge-content[b-6rp3gndk8t] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-title[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.back-btn[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 0.375rem;
    background: var(--hover-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.back-btn:hover[b-6rp3gndk8t] {
    color: var(--text-primary);
}

.result-count[b-6rp3gndk8t] {
    font-weight: 400;
    color: var(--text-secondary);
}

/* Categories Grid */
.categories-grid[b-6rp3gndk8t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.category-card[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-card:hover[b-6rp3gndk8t] {
    border-color: var(--accent-color);
    transform: translateY(-0.125rem);
}

.category-card.active[b-6rp3gndk8t] {
    border-color: var(--accent-color);
    background: var(--accent-color-10);
}

.category-icon[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    color: white;
    flex-shrink: 0;
}

.category-info[b-6rp3gndk8t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.category-name[b-6rp3gndk8t] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-count[b-6rp3gndk8t] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Articles List */
.articles-list[b-6rp3gndk8t] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-card[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-card);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.article-card:hover[b-6rp3gndk8t] {
    border-color: var(--accent-color);
    background: var(--hover-bg);
}

.article-icon[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--hover-bg);
    color: var(--accent-color);
    flex-shrink: 0;
}

.article-content[b-6rp3gndk8t] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.article-title[b-6rp3gndk8t] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-description[b-6rp3gndk8t] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-category[b-6rp3gndk8t] {
    font-size: 0.75rem;
    color: var(--accent-color);
}

.article-arrow[b-6rp3gndk8t] {
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.article-card:hover .article-arrow[b-6rp3gndk8t] {
    transform: translateX(0.25rem);
    color: var(--accent-color);
}

/* No Results */
.no-results[b-6rp3gndk8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.no-results-icon[b-6rp3gndk8t] {
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.no-results h4[b-6rp3gndk8t] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.no-results p[b-6rp3gndk8t] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Quick Help */
.quick-help[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--accent-color-15), var(--secondary-accent-10));
    border: 1px solid var(--accent-color-30);
    margin-top: auto;
}

.quick-help-content[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--accent-color);
}

.quick-help-text[b-6rp3gndk8t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.quick-help-text span:first-child[b-6rp3gndk8t] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.help-subtext[b-6rp3gndk8t] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.ask-ai-btn[b-6rp3gndk8t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--accent-gradient);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.ask-ai-btn:hover[b-6rp3gndk8t] {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem var(--accent-color-40);
}

/* Responsive */
@media (max-width: 640px) {
    .knowledge-panel[b-6rp3gndk8t] {
        padding: 1rem;
    }

    .categories-grid[b-6rp3gndk8t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-help[b-6rp3gndk8t] {
        flex-direction: column;
        text-align: center;
    }

    .quick-help-content[b-6rp3gndk8t] {
        flex-direction: column;
    }
}
/* /Features/Support/Components/Panels/LiveChatPanel.razor.rz.scp.css */
/* ============================================
   LIVE CHAT PANEL STYLES
   ============================================ */

.live-chat-container[b-c5db4732zp] {
    display: flex;
    flex-direction: column;
    /* CRITICAL: Use absolute dimensions from parent, not content-based */
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.live-chat-panel[b-c5db4732zp] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ============================================
   CHAT HEADER
   ============================================ */

.chat-header[b-c5db4732zp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}

.chat-status[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.discord-logo[b-c5db4732zp] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--discord-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-info[b-c5db4732zp] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.status-title[b-c5db4732zp] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.status-subtitle[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.online-dot[b-c5db4732zp],
.offline-dot[b-c5db4732zp],
.connecting-dot[b-c5db4732zp] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.online-dot[b-c5db4732zp] {
    background: var(--success-color);
    box-shadow: 0 0 0.5rem var(--success-color-50);
}

.offline-dot[b-c5db4732zp] {
    background: var(--text-secondary);
}

.connecting-dot[b-c5db4732zp] {
    background: var(--warning-color);
    animation: pulse-b-c5db4732zp 1s infinite;
}

@keyframes pulse-b-c5db4732zp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.divider[b-c5db4732zp] {
    opacity: 0.5;
}

.chat-actions[b-c5db4732zp] {
    display: flex;
    gap: 0.5rem;
}

.discord-link[b-c5db4732zp] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.discord-link:hover[b-c5db4732zp] {
    background: var(--discord-color);
    border-color: var(--discord-color);
    color: white;
}

/* ============================================
   CHAT CONTENT (Messages + User List)
   ============================================ */

.chat-content[b-c5db4732zp] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
}

/* ============================================
   CHAT MESSAGES
   ============================================ */

.chat-messages[b-c5db4732zp] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
}

/* States */
.connecting-state[b-c5db4732zp],
.disconnected-state[b-c5db4732zp],
.empty-state[b-c5db4732zp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 1rem;
    color: var(--text-secondary);
}

.spinner.large[b-c5db4732zp] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-c5db4732zp 0.8s linear infinite;
}

@keyframes spin-b-c5db4732zp {
    to { transform: rotate(360deg); }
}

.disconnect-icon[b-c5db4732zp],
.empty-icon[b-c5db4732zp] {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.disconnected-state h3[b-c5db4732zp],
.empty-state h3[b-c5db4732zp] {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin: 0;
}

.disconnected-state p[b-c5db4732zp],
.empty-state p[b-c5db4732zp] {
    font-size: 0.875rem;
    max-width: 18.75rem;
    margin: 0;
}

.retry-btn[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.retry-btn:hover[b-c5db4732zp] {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem var(--accent-color-30);
}

/* Messages */
.chat-message[b-c5db4732zp] {
    display: flex;
    gap: 0.75rem;
    animation: messageAppear-b-c5db4732zp 0.3s ease-out;
}

@keyframes messageAppear-b-c5db4732zp {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-avatar[b-c5db4732zp] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.message-avatar.employee-avatar[b-c5db4732zp] {
    border: 2px solid var(--discord-color);
    box-shadow: 0 0 0.5rem var(--discord-color-30);
}

.message-body[b-c5db4732zp] {
    flex: 1;
    min-width: 0;
}

.message-header[b-c5db4732zp] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.sender-name[b-c5db4732zp] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.sender-name.employee-name[b-c5db4732zp] {
    color: var(--discord-color);
}

.staff-badge[b-c5db4732zp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, var(--discord-color-20), var(--accent-color-15));
    color: var(--discord-color);
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 0.25rem;
    text-transform: uppercase;
    margin-left: 0.25rem;
    border: 1px solid var(--discord-color-30);
}

.staff-badge svg[b-c5db4732zp] {
    fill: var(--warning-color);
}

.message-time[b-c5db4732zp] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.message-text[b-c5db4732zp] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
    word-wrap: break-word;
}

/* Own messages */
.chat-message.own[b-c5db4732zp] {
    flex-direction: row-reverse;
}

.chat-message.own .message-body[b-c5db4732zp] {
    text-align: right;
}

.chat-message.own .message-header[b-c5db4732zp] {
    justify-content: flex-end;
}

.chat-message.own .message-text[b-c5db4732zp] {
    background: var(--accent-color);
    color: white;
    padding: 0.625rem 1rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    display: inline-block;
    text-align: left;
}

/* ============================================
   USER LIST PANEL
   ============================================ */

.user-list-panel[b-c5db4732zp] {
    width: 14rem;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-list-header[b-c5db4732zp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.user-list-title[b-c5db4732zp] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.user-count[b-c5db4732zp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: var(--accent-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.75rem;
}

.user-list[b-c5db4732zp] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    min-height: 0;
}

.user-group[b-c5db4732zp] {
    margin-bottom: 1rem;
}

.user-group:last-child[b-c5db4732zp] {
    margin-bottom: 0;
}

.user-group-header[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: 0.375rem;
}

.user-group-header:hover[b-c5db4732zp] {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.user-group-header svg[b-c5db4732zp] {
    opacity: 0.7;
}

.user-group-header .chevron[b-c5db4732zp] {
    transition: transform var(--transition-normal);
}

.user-group-header .chevron.expanded[b-c5db4732zp] {
    transform: rotate(90deg);
}

.user-group-items[b-c5db4732zp] {
    animation: slideDown-b-c5db4732zp 0.2s ease-out;
}

@keyframes slideDown-b-c5db4732zp {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-item[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: background var(--transition-fast);
}

.user-item:hover[b-c5db4732zp] {
    background: var(--bg-surface);
}

.user-item.employee[b-c5db4732zp] {
    background: var(--discord-color-5);
}

.user-item.employee:hover[b-c5db4732zp] {
    background: var(--discord-color-10);
}

.user-avatar[b-c5db4732zp] {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.user-item.employee .user-avatar[b-c5db4732zp] {
    border: 2px solid var(--discord-color);
}

.presence-indicator[b-c5db4732zp] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

.presence-indicator.online[b-c5db4732zp] {
    background: var(--success-color);
}

.presence-indicator.idle[b-c5db4732zp] {
    background: var(--warning-color);
}

.user-info[b-c5db4732zp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.user-name[b-c5db4732zp] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-name.employee-name[b-c5db4732zp] {
    color: var(--discord-color);
    font-weight: 600;
}

.user-source[b-c5db4732zp] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.no-users[b-c5db4732zp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-align: center;
}

/* ============================================
   INPUT AREA
   ============================================ */

.chat-input-area[b-c5db4732zp] {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.auth-prompt[b-c5db4732zp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sign-in-link[b-c5db4732zp] {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
}

.sign-in-link:hover[b-c5db4732zp] {
    text-decoration: underline;
}

/* Name prompt for anonymous users */
.name-prompt[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.name-input[b-c5db4732zp] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: all var(--transition-normal);
}

.name-input:focus[b-c5db4732zp] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

.name-input[b-c5db4732zp]::placeholder {
    color: var(--text-muted);
}

.join-btn[b-c5db4732zp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.join-btn:hover:not(:disabled)[b-c5db4732zp] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.join-btn:disabled[b-c5db4732zp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-wrapper[b-c5db4732zp] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 0.5rem;
    transition: all var(--transition-normal);
}

.input-wrapper:focus-within[b-c5db4732zp] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

.input-wrapper textarea[b-c5db4732zp] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.5rem;
    resize: none;
    min-height: 1.5rem;
    max-height: 7.5rem;
    outline: none;
}

.input-wrapper textarea[b-c5db4732zp]::placeholder {
    color: var(--text-secondary);
}

.send-btn[b-c5db4732zp] {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 0.625rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.send-btn.active[b-c5db4732zp] {
    background: var(--accent-gradient);
    color: white;
}

.send-btn:hover:not(:disabled).active[b-c5db4732zp] {
    transform: scale(1.05);
}

.send-btn:disabled[b-c5db4732zp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .chat-content[b-c5db4732zp] {
        flex-direction: column;
    }

    .user-list-panel[b-c5db4732zp] {
        width: 100%;
        height: auto;
        max-height: 10rem;
        border-left: none;
        border-top: 1px solid var(--border-color);
        order: -1;
    }

    .user-list[b-c5db4732zp] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .user-group[b-c5db4732zp] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0;
    }

    .user-group-header[b-c5db4732zp] {
        width: 100%;
        padding: 0.25rem 0.5rem;
    }

    .user-item[b-c5db4732zp] {
        padding: 0.375rem 0.5rem;
    }

    .user-info[b-c5db4732zp] {
        display: none;
    }

    .user-avatar[b-c5db4732zp] {
        width: 1.75rem;
        height: 1.75rem;
    }

    .presence-indicator[b-c5db4732zp] {
        width: 0.5rem;
        height: 0.5rem;
    }
}

@media (max-width: 640px) {
    .chat-header[b-c5db4732zp] {
        padding: 0.75rem 1rem;
    }

    .chat-messages[b-c5db4732zp] {
        padding: 1rem;
    }

    .chat-input-area[b-c5db4732zp] {
        padding: 0.75rem 1rem 1rem;
    }

    .status-subtitle[b-c5db4732zp] {
        font-size: 0.75rem;
    }

    .user-list-panel[b-c5db4732zp] {
        display: none;
    }
}
/* /Features/Support/Components/Panels/TeamDirectoryPanel.razor.rz.scp.css */
/* ============================================
   EMPLOYEE PANEL STYLES
   Azure AD Employee Directory
   ============================================ */

.employee-panel[b-f8ohjrxjjj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ============================================
   SEARCH SECTION
   ============================================ */

.search-section[b-f8ohjrxjjj] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.search-wrapper[b-f8ohjrxjjj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    transition: all var(--transition-normal);
}

.search-wrapper:focus-within[b-f8ohjrxjjj] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.1875rem var(--accent-color-10);
}

.search-icon[b-f8ohjrxjjj] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.search-wrapper input[b-f8ohjrxjjj] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9375rem;
    outline: none;
}

.search-wrapper input[b-f8ohjrxjjj]::placeholder {
    color: var(--text-secondary);
}

/* ============================================
   EMPLOYEE CONTENT
   ============================================ */

.employee-content[b-f8ohjrxjjj] {
    flex: 1;
    overflow-y: auto;
}

.employee-grid[b-f8ohjrxjjj] {
    flex: 1;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    min-height: 0;
}

/* Loading State */
.loading-state[b-f8ohjrxjjj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 12rem;
    gap: 1rem;
    color: var(--text-secondary);
}

.spinner[b-f8ohjrxjjj] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-f8ohjrxjjj 0.8s linear infinite;
}

@keyframes spin-b-f8ohjrxjjj {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-f8ohjrxjjj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 12rem;
    text-align: center;
    gap: 1rem;
    color: var(--text-secondary);
    padding: 2rem;
}

.empty-state svg[b-f8ohjrxjjj] {
    opacity: 0.5;
}

.empty-state h3[b-f8ohjrxjjj] {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin: 0;
}

.empty-state p[b-f8ohjrxjjj] {
    font-size: 0.875rem;
    max-width: 18.75rem;
    margin: 0;
}

/* ============================================
   EMPLOYEE CARD
   ============================================ */

.employee-card[b-f8ohjrxjjj] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    transition: all var(--transition-normal);
    animation: cardAppear-b-f8ohjrxjjj 0.3s ease-out;
}

@keyframes cardAppear-b-f8ohjrxjjj {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employee-card:hover[b-f8ohjrxjjj] {
    border-color: var(--accent-color);
    box-shadow: 0 0.25rem 1rem var(--black-overlay-10);
}

/* Avatar */
.employee-avatar[b-f8ohjrxjjj] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

/* Employee Info */
.employee-info[b-f8ohjrxjjj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.employee-name[b-f8ohjrxjjj] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: block;
}

.employee-title[b-f8ohjrxjjj] {
    font-size: 0.8125rem;
    color: var(--accent-color);
    display: block;
}

.employee-department[b-f8ohjrxjjj] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
}

/* Contact Links */
.employee-contact[b-f8ohjrxjjj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex-shrink: 0;
}

.contact-link[b-f8ohjrxjjj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all var(--transition-normal);
    max-width: 12rem;
    overflow: hidden;
}

.contact-link:hover[b-f8ohjrxjjj] {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--accent-color-5);
}

.contact-link svg[b-f8ohjrxjjj] {
    flex-shrink: 0;
}

.contact-text[b-f8ohjrxjjj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-link.email:hover[b-f8ohjrxjjj] {
    border-color: var(--success-color);
    color: var(--success-color);
    background: var(--success-color-5);
}

.contact-link.phone:hover[b-f8ohjrxjjj] {
    border-color: var(--info-color);
    color: var(--info-color);
    background: var(--info-color-5);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .search-section[b-f8ohjrxjjj] {
        padding: 0.75rem 1rem;
    }

    .employee-grid[b-f8ohjrxjjj] {
        padding: 0.75rem 1rem;
    }

    .employee-card[b-f8ohjrxjjj] {
        flex-direction: column;
        align-items: stretch;
        padding: 0.875rem;
    }

    .employee-avatar[b-f8ohjrxjjj] {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .employee-contact[b-f8ohjrxjjj] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-color);
    }

    .contact-link[b-f8ohjrxjjj] {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
}
/* /Features/Support/Components/SupportHub.razor.rz.scp.css */
/* ============================================
   SUPPORT HUB - Main Styles
   ============================================ */

.support-hub-container[b-zp5ree47ek] {
    --hub-width: 56.25rem;    /* 900px */
    --hub-height: 80vh;       /* 80% of viewport height */
    --hub-min-height: 25rem;  /* 400px minimum */
    --hub-radius: 1.25rem;    /* 20px */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-hub-container.page-mode[b-zp5ree47ek] {
    width: 100%;
    max-width: var(--hub-width);
    margin: 0 auto;
    padding: 2rem;
}

.support-hub-container.modal-mode[b-zp5ree47ek] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

/* ============================================
   THEME SELECTOR (Temporary)
   ============================================ */

.theme-selector[b-zp5ree47ek] {
    position: absolute;
    top: -2.5rem;             /* -40px */
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;    /* 8px */
    font-size: 0.75rem;
    z-index: 10;
}

.theme-label[b-zp5ree47ek] {
    opacity: 0.7;
}

.theme-btn[b-zp5ree47ek] {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--white-overlay-20);
    border-radius: 0.375rem;  /* 6px */
    background: var(--white-overlay-10);
    color: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-btn:hover[b-zp5ree47ek] {
    background: var(--white-overlay-20);
}

.theme-btn.active[b-zp5ree47ek] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

/* ============================================
   MAIN HUB STRUCTURE
   ============================================ */

.support-hub[b-zp5ree47ek] {
    position: relative;
    width: 100%;
    max-width: var(--hub-width);
    /* CAPPED height - use min() to prevent oversized modals on tall viewports */
    /* Cap at 850px max OR 75vh, whichever is smaller */
    height: min(75vh, 53.125rem);  /* 53.125rem = 850px */
    min-height: var(--hub-min-height);
    max-height: min(75vh, 53.125rem);
    display: flex;
    flex-direction: column;
    border-radius: var(--hub-radius);
    overflow: hidden;
}

.support-hub.modal-animate[b-zp5ree47ek] {
    animation: modalOpen-b-zp5ree47ek 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalOpen-b-zp5ree47ek {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(0.625rem); /* 10px */
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   HEADER
   ============================================ */

.support-hub-header[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.hub-title[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hub-icon[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;           /* 36px */
    height: 2.25rem;          /* 36px */
    border-radius: 0.625rem;  /* 10px */
    background: var(--accent-gradient);
    color: white;
}

.hub-title-text[b-zp5ree47ek] {
    font-size: 1.25rem;
    font-weight: 600;
}

.close-button[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;           /* 36px */
    height: 2.25rem;          /* 36px */
    border: none;
    border-radius: 0.625rem;  /* 10px */
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.close-button:hover[b-zp5ree47ek] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* ============================================
   TAB NAVIGATION
   ============================================ */

.support-hub-tabs[b-zp5ree47ek] {
    position: relative;
    display: flex;
    flex-shrink: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-color);
}

.tab-button[b-zp5ree47ek] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.tab-button:hover[b-zp5ree47ek] {
    color: var(--text-primary);
}

.tab-button.active[b-zp5ree47ek] {
    color: var(--accent-color);
}

.tab-button.urgent[b-zp5ree47ek] {
    color: var(--warning-color);
}

.tab-button.urgent.active[b-zp5ree47ek] {
    color: var(--error-color);
}

.tab-icon[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-label[b-zp5ree47ek] {
    font-size: 0.75rem;
    font-weight: 500;
}

.badge[b-zp5ree47ek] {
    position: absolute;
    top: 0.5rem;
    right: calc(50% - 1.5rem);
    min-width: 1.125rem;      /* 18px */
    height: 1.125rem;         /* 18px */
    padding: 0 0.3125rem;     /* 0 5px */
    border-radius: 0.5625rem; /* 9px */
    background: var(--error-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-indicator[b-zp5ree47ek] {
    position: absolute;
    bottom: 0;
    height: 0.1875rem;        /* 3px */
    background: var(--accent-gradient);
    border-radius: 0.1875rem 0.1875rem 0 0; /* 3px 3px 0 0 */
    transition: all var(--transition-normal);
}

/* ============================================
   CONTENT AREA
   ============================================ */

.support-hub-content[b-zp5ree47ek] {
    /* Use flex: 1 with min-height: 0 and position: relative for absolute child */
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.panel-container[b-zp5ree47ek] {
    /* ABSOLUTE POSITIONING - creates impenetrable containment boundary */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Desktop mode - same overflow behavior */
.support-hub-container.desktop-mode .panel-container[b-zp5ree47ek] {
    overflow: hidden;
}

.panel-container.slide-in-right[b-zp5ree47ek] {
    animation: slideInRight-b-zp5ree47ek 0.3s ease-out;
}

.panel-container.slide-in-left[b-zp5ree47ek] {
    animation: slideInLeft-b-zp5ree47ek 0.3s ease-out;
}

@keyframes slideInRight-b-zp5ree47ek {
    from {
        opacity: 0;
        transform: translateX(1.25rem); /* 20px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft-b-zp5ree47ek {
    from {
        opacity: 0;
        transform: translateX(-1.25rem); /* -20px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   THEME: GLASSMORPHISM
   ============================================ */

.theme-glass[b-zp5ree47ek] {
    --bg-primary: rgba(15, 23, 42, 0.95);
    --bg-secondary: rgba(30, 41, 59, 0.8);
    --bg-card: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-color: #6366f1;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --hover-bg: rgba(255, 255, 255, 0.1);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
}

.theme-glass.modal-mode[b-zp5ree47ek]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--black-overlay-60);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.theme-glass .support-hub[b-zp5ree47ek] {
    background: linear-gradient(135deg, var(--bg-primary), rgba(30, 27, 75, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-overlay-10);
    box-shadow:
        0 25px 50px -12px var(--black-overlay-50),
        0 0 0 1px var(--white-overlay-05) inset;
}

.theme-glass .theme-selector[b-zp5ree47ek] {
    background: var(--black-overlay-30);
    color: var(--text-secondary);
}

/* ============================================
   THEME: DARK MODERN
   ============================================ */

.theme-dark[b-zp5ree47ek] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #171717;
    --bg-card: #1f1f1f;
    --border-color: #262626;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --accent-color: #6366f1;
    --accent-gradient: linear-gradient(135deg, #6366f1, #818cf8);
    --hover-bg: rgba(255, 255, 255, 0.05);
    --success-color: #22c55e;
    --warning-color: #eab308;
    --error-color: #ef4444;
}

.theme-dark.modal-mode[b-zp5ree47ek]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--black-overlay-85);
}

.theme-dark .support-hub[b-zp5ree47ek] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow:
        0 25px 50px -12px var(--black-overlay-85),
        0 0 60px var(--accent-color-10);
}

.theme-dark .theme-selector[b-zp5ree47ek] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.theme-dark .tab-button.active[b-zp5ree47ek] {
    background: var(--accent-color-10);
}

/* ============================================
   THEME: NEUMORPHISM
   ============================================ */

.theme-neu[b-zp5ree47ek] {
    --bg-primary: #e0e5ec;
    --bg-secondary: #e0e5ec;
    --bg-card: #e0e5ec;
    --border-color: transparent;
    --text-primary: #2d3748;
    --text-secondary: #5a6c7d;
    --accent-color: #6366f1;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --hover-bg: rgba(0, 0, 0, 0.03);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --shadow-dark: rgba(163, 177, 198, 0.6);
    --shadow-light: rgba(255, 255, 255, 0.8);
}

.theme-neu.modal-mode[b-zp5ree47ek]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white-overlay-90);
}

/* Ensure Neumorphism theme in desktop dialog mode has no extra wrapper background */
.theme-neu.desktop-mode.page-mode[b-zp5ree47ek] {
    background: transparent;
}

.theme-neu .support-hub[b-zp5ree47ek] {
    background: var(--bg-primary);
    border: none;
    box-shadow:
        1.25rem 1.25rem 3.75rem var(--shadow-dark),
        -1.25rem -1.25rem 3.75rem var(--shadow-light);
}

.theme-neu .theme-selector[b-zp5ree47ek] {
    background: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow:
        0.25rem 0.25rem 0.625rem var(--shadow-dark),
        -0.25rem -0.25rem 0.625rem var(--shadow-light);
}

.theme-neu .support-hub-header[b-zp5ree47ek] {
    border-bottom: none;
    box-shadow:
        inset 0 -1px 0 var(--shadow-dark),
        inset 0 1px 0 var(--shadow-light);
}

.theme-neu .support-hub-tabs[b-zp5ree47ek] {
    border-bottom: none;
    box-shadow:
        inset 0 -1px 0 var(--shadow-dark),
        inset 0 1px 0 var(--shadow-light);
}

.theme-neu .tab-button[b-zp5ree47ek] {
    margin: 0.5rem 0.25rem;
    border-radius: 0.75rem;   /* 12px */
}

.theme-neu .tab-button.active[b-zp5ree47ek] {
    box-shadow:
        inset 0.25rem 0.25rem 0.5rem var(--shadow-dark),
        inset -0.25rem -0.25rem 0.5rem var(--shadow-light);
}

.theme-neu .tab-indicator[b-zp5ree47ek] {
    display: none;
}

.theme-neu .close-button[b-zp5ree47ek] {
    box-shadow:
        0.25rem 0.25rem 0.625rem var(--shadow-dark),
        -0.25rem -0.25rem 0.625rem var(--shadow-light);
    border-radius: 0.75rem;   /* 12px */
}

.theme-neu .close-button:active[b-zp5ree47ek] {
    box-shadow:
        inset 0.125rem 0.125rem 0.3125rem var(--shadow-dark),
        inset -0.125rem -0.125rem 0.3125rem var(--shadow-light);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .support-hub-container[b-zp5ree47ek] {
        --hub-height: 100%;
    }

    .support-hub-container.modal-mode[b-zp5ree47ek] {
        padding: 0;
    }

    .support-hub[b-zp5ree47ek] {
        max-height: 100vh;
        border-radius: 0;
    }

    .tab-label[b-zp5ree47ek] {
        display: none;
    }

    .tab-button[b-zp5ree47ek] {
        padding: 0.75rem;
    }

    .theme-selector[b-zp5ree47ek] {
        top: auto;
        bottom: -2.5rem;         /* -40px */
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 480px) {
    .hub-title-text[b-zp5ree47ek] {
        font-size: 1rem;
    }

    .support-hub-header[b-zp5ree47ek] {
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.panel-container[b-zp5ree47ek]::-webkit-scrollbar {
    width: 0.5rem;            /* 8px */
}

.panel-container[b-zp5ree47ek]::-webkit-scrollbar-track {
    background: transparent;
}

.panel-container[b-zp5ree47ek]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 0.25rem;   /* 4px */
}

.panel-container[b-zp5ree47ek]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .support-hub.modal-animate[b-zp5ree47ek],
    .panel-container.slide-in-right[b-zp5ree47ek],
    .panel-container.slide-in-left[b-zp5ree47ek],
    .tab-indicator[b-zp5ree47ek] {
        animation: none;
        transition: none;
    }
}

.tab-button:focus-visible[b-zp5ree47ek],
.close-button:focus-visible[b-zp5ree47ek],
.theme-btn:focus-visible[b-zp5ree47ek] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   DESKTOP MODE STYLES
   ============================================ */

.support-hub-container.desktop-mode[b-zp5ree47ek] {
    --hub-width: 81.25rem;    /* 1300px */
    --hub-min-height: 30rem;  /* 480px minimum for desktop */
    padding: 0;
}

.support-hub-container.desktop-mode .support-hub[b-zp5ree47ek] {
    max-width: var(--hub-width);
    /* CAPPED height for desktop - must match SupportHubDialog wrapper max-height */
    /* Cap at 850px max OR calc(100vh - 6rem), whichever is smaller */
    height: min(calc(100vh - 6rem), 53.125rem);  /* 53.125rem = 850px */
    min-height: var(--hub-min-height);
    max-height: min(calc(100vh - 6rem), 53.125rem);
}

/* Ensure content area fills available space in desktop mode */
.support-hub-container.desktop-mode .support-hub-content[b-zp5ree47ek] {
    flex: 1;
    min-height: 0;
}

/* Header Actions */
.header-actions[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.theme-selector-inline[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-card);
    border-radius: 0.5rem;    /* 8px */
    border: 1px solid var(--border-color);
}

.theme-selector-inline .theme-btn[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;              /* 32px */
    height: 2rem;             /* 32px */
    padding: 0;
    border: none;
    border-radius: 0.375rem;  /* 6px */
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-selector-inline .theme-btn:hover[b-zp5ree47ek] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.theme-selector-inline .theme-btn.active[b-zp5ree47ek] {
    background: var(--accent-color);
    color: white;
}

/* Body with Sidebar */
.support-hub-body[b-zp5ree47ek] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.support-hub-body.with-sidebar[b-zp5ree47ek] {
    gap: 0;
}

/* Quick Actions Sidebar */
.quick-actions-sidebar[b-zp5ree47ek] {
    width: 15rem;             /* 240px */
    flex-shrink: 0;
    padding: 1.25rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
}

.sidebar-section[b-zp5ree47ek] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-heading[b-zp5ree47ek] {
    margin: 0;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* Login Prompt Section */
.login-prompt-section[b-zp5ree47ek] {
    margin-bottom: 0.5rem;
}

.login-prompt[b-zp5ree47ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, var(--accent-color-15), var(--secondary-accent-10));
    border: 1px solid var(--accent-color-30);
    border-radius: 0.75rem;
    gap: 0.75rem;
}

.login-prompt-icon[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--accent-gradient);
    color: white;
}

.login-prompt-text[b-zp5ree47ek] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.login-prompt-btn[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.login-prompt-btn:hover[b-zp5ree47ek] {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem var(--accent-color-40);
}

.login-prompt-btn:active[b-zp5ree47ek] {
    transform: translateY(0);
}

/* Theme-specific Login Prompt Styles */
.theme-neu .login-prompt[b-zp5ree47ek] {
    background: var(--bg-primary);
    border: none;
    box-shadow:
        inset 0.125rem 0.125rem 0.375rem var(--shadow-dark),
        inset -0.125rem -0.125rem 0.375rem var(--shadow-light);
}

.theme-neu .login-prompt-btn[b-zp5ree47ek] {
    box-shadow:
        0.25rem 0.25rem 0.5rem var(--shadow-dark),
        -0.25rem -0.25rem 0.5rem var(--shadow-light);
}

.theme-neu .login-prompt-btn:hover[b-zp5ree47ek] {
    box-shadow:
        0.375rem 0.375rem 0.75rem var(--shadow-dark),
        -0.375rem -0.375rem 0.75rem var(--shadow-light);
}

/* Quick Action Buttons */
.quick-action-buttons[b-zp5ree47ek] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-action-btn[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;  /* 10px */
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.quick-action-btn:hover[b-zp5ree47ek] {
    border-color: var(--accent-color);
    background: var(--hover-bg);
}

.quick-action-btn.urgent[b-zp5ree47ek] {
    border-color: var(--error-color-30);
}

.quick-action-btn.urgent:hover[b-zp5ree47ek] {
    border-color: var(--error-color);
    background: var(--error-color-10);
}

.qa-icon[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;              /* 32px */
    height: 2rem;             /* 32px */
    border-radius: 0.5rem;    /* 8px */
    flex-shrink: 0;
}

.qa-icon.ai[b-zp5ree47ek] {
    background: linear-gradient(135deg, var(--accent-color-20), var(--secondary-accent-20));
    color: var(--accent-color);
}

.qa-icon.chat[b-zp5ree47ek] {
    background: linear-gradient(135deg, var(--success-color-20), var(--success-color-20));
    color: var(--success-color);
}

.qa-icon.urgent[b-zp5ree47ek] {
    background: linear-gradient(135deg, var(--error-color-20), var(--error-color-20));
    color: var(--error-color);
}

.qa-icon.login[b-zp5ree47ek] {
    background: linear-gradient(135deg, var(--accent-color-20), var(--secondary-accent-20));
    color: var(--accent-color);
}

.qa-icon.call[b-zp5ree47ek] {
    background: linear-gradient(135deg, var(--info-color-20), var(--info-color-20));
    color: var(--info-color);
}

.quick-action-btn.login[b-zp5ree47ek] {
    text-decoration: none;
    border-color: var(--accent-color);
    background: var(--accent-color-10);
}

.quick-action-btn.login:hover[b-zp5ree47ek] {
    background: var(--accent-color-20);
}

.qa-text[b-zp5ree47ek] {
    font-size: 0.875rem;
    font-weight: 500;
}

.qa-badge[b-zp5ree47ek] {
    position: absolute;
    top: -0.25rem;            /* -4px */
    right: -0.25rem;          /* -4px */
    min-width: 1.125rem;      /* 18px */
    height: 1.125rem;         /* 18px */
    padding: 0 0.3125rem;     /* 0 5px */
    border-radius: 0.5625rem; /* 9px */
    background: var(--error-color);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Recent Items */
.recent-items[b-zp5ree47ek] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.recent-item[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;    /* 8px */
    transition: background var(--transition-fast);
}

.recent-item:hover:not(.empty)[b-zp5ree47ek] {
    background: var(--hover-bg);
}

.recent-item.empty[b-zp5ree47ek] {
    opacity: 0.6;
}

.recent-icon[b-zp5ree47ek] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.recent-text[b-zp5ree47ek] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Account Links */
.account-links[b-zp5ree47ek] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-link[b-zp5ree47ek] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;    /* 8px */
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all var(--transition-fast);
}

.account-link:hover[b-zp5ree47ek] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.account-link svg[b-zp5ree47ek] {
    flex-shrink: 0;
}

/* Main Content Area */
.main-content-area[b-zp5ree47ek] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Desktop Mode Tab Adjustments */
.support-hub-container.desktop-mode .tab-button[b-zp5ree47ek] {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
}

.support-hub-container.desktop-mode .tab-label[b-zp5ree47ek] {
    display: inline;
    font-size: 0.8125rem;
}

/* Theme-specific Sidebar Styles */
.theme-glass .quick-actions-sidebar[b-zp5ree47ek] {
    background: linear-gradient(180deg, var(--glass-panel), rgba(30, 27, 75, 0.4));
}

.theme-dark .quick-actions-sidebar[b-zp5ree47ek] {
    background: var(--bg-primary);
}

.theme-neu .quick-actions-sidebar[b-zp5ree47ek] {
    background: var(--bg-primary);
    box-shadow:
        inset -0.5rem 0 1rem var(--shadow-dark),
        inset 0.5rem 0 1rem var(--shadow-light);
}

.theme-neu .quick-action-btn[b-zp5ree47ek] {
    border: none;
    box-shadow:
        0.25rem 0.25rem 0.5rem var(--shadow-dark),
        -0.25rem -0.25rem 0.5rem var(--shadow-light);
}

.theme-neu .quick-action-btn:hover[b-zp5ree47ek] {
    box-shadow:
        inset 0.125rem 0.125rem 0.25rem var(--shadow-dark),
        inset -0.125rem -0.125rem 0.25rem var(--shadow-light);
}

/* Responsive - Desktop Mode Collapse */
@media (max-width: 1024px) {
    .support-hub-container.desktop-mode[b-zp5ree47ek] {
        --hub-width: 100%;
    }

    .quick-actions-sidebar[b-zp5ree47ek] {
        width: 12.5rem;       /* 200px */
    }
}

@media (max-width: 768px) {
    .support-hub-container.desktop-mode .quick-actions-sidebar[b-zp5ree47ek] {
        display: none;
    }

    .support-hub-container.desktop-mode .support-hub-body.with-sidebar[b-zp5ree47ek] {
        gap: 0;
    }

    .theme-selector-inline[b-zp5ree47ek] {
        display: none;
    }

    .support-hub-container.desktop-mode .tab-button[b-zp5ree47ek] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem 0.5rem;
    }

    .support-hub-container.desktop-mode .tab-label[b-zp5ree47ek] {
        display: none;
    }
}
/* /Layouts/AILayout.razor.rz.scp.css */
/* AILayout - Glassmorphism Layout Styling
 * Uses CSS variables from ayva-theme.css
 */

/* Base background styling */
.bg-base[b-7eaqzgdbyc] {
    position: fixed;
    inset: 0;
    background: var(--bg-base);
    z-index: -2;
}

.bg-overlay[b-7eaqzgdbyc] {
    position: fixed;
    inset: 0;
    background:
        var(--bg-radial-accent),
        var(--bg-radial-secondary),
        var(--bg-radial-center);
    z-index: -1;
    pointer-events: none;
}

/* Glassmorphism MudPaper overrides for this layout */
[b-7eaqzgdbyc] .mud-paper {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--glass-paper-shadow) !important;
}

[b-7eaqzgdbyc] .mud-paper:hover {
    border-color: var(--accent-color-30) !important;
    box-shadow: var(--glass-paper-shadow-hover) !important;
}

/* MudDrawer glassmorphism */
[b-7eaqzgdbyc] .mud-drawer {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--border-subtle) !important;
}

/* MudAppBar glassmorphism */
[b-7eaqzgdbyc] .mud-appbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--glass-appbar-shadow) !important;
}

/* Card glassmorphism */
[b-7eaqzgdbyc] .mud-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-xl) !important;
}

/* Dialog glassmorphism */
[b-7eaqzgdbyc] .mud-dialog {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-dialog-shadow) !important;
}

/* Menu glassmorphism */
[b-7eaqzgdbyc] .mud-menu .mud-popover,
[b-7eaqzgdbyc] .mud-popover {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glass-popover-shadow) !important;
}

/* Snackbar glassmorphism */
[b-7eaqzgdbyc] .mud-snackbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
}
/* /Layouts/NetLayout.razor.rz.scp.css */
/* NetLayout - Glassmorphism Layout Styling
 * Uses CSS variables from ayva-theme.css
 */

.skip-nav[b-k1pta838pq] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-color);
    color: white;
    padding: var(--space-sm) var(--space-md);
    z-index: 10000;
    transition: top var(--transition-fast);
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-nav:focus[b-k1pta838pq] {
    top: 0;
}

/* Glassmorphism MudPaper overrides for this layout */
[b-k1pta838pq] .mud-paper {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--glass-paper-shadow) !important;
}

[b-k1pta838pq] .mud-paper:hover {
    border-color: var(--accent-color-30) !important;
    box-shadow: var(--glass-paper-shadow-hover) !important;
}

/* MudDrawer glassmorphism */
[b-k1pta838pq] .mud-drawer {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--border-subtle) !important;
}

/* MudAppBar glassmorphism */
[b-k1pta838pq] .mud-appbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--glass-appbar-shadow) !important;
}

/* Card glassmorphism */
[b-k1pta838pq] .mud-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-xl) !important;
}

/* Dialog glassmorphism */
[b-k1pta838pq] .mud-dialog {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-dialog-shadow) !important;
}

/* Menu glassmorphism */
[b-k1pta838pq] .mud-menu .mud-popover,
[b-k1pta838pq] .mud-popover {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glass-popover-shadow) !important;
}

/* Snackbar glassmorphism */
[b-k1pta838pq] .mud-snackbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
}

/* Site lockout content styling */
[b-k1pta838pq] .net-lockout-content {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-base) 100%) !important;
    width: 100vw;
    height: 100vh;
}